/* =========================================================
   EIRA — Page d'accueil (design validé)
   Chargée uniquement sur la page d'accueil (voir inc/accueil.php).
   Les couleurs et typos proviennent de theme.json : modifier la palette
   dans Apparence → Éditeur → Styles met aussi à jour cette page.
   Documentation des classes : DESIGN-CLASSES.md
   ========================================================= */

:root {
  --eira-base: var(--wp--preset--color--base, #FAF8F3);
  --eira-white: var(--wp--preset--color--blanc, #FFFFFF);
  --eira-ivory: var(--wp--preset--color--ivoire, #F4EFE9);
  --eira-beige: var(--wp--preset--color--beige, #EFE7D9);
  --eira-sand: var(--wp--preset--color--sable, #EAE3D7);
  --eira-taupe: var(--wp--preset--color--taupe, #B9A98F);
  --eira-clay: var(--wp--preset--color--argile, #A9714E);
  --eira-clay-dark: var(--wp--preset--color--argile-fonce, #8F5C3E);
  --eira-brown-soft: var(--wp--preset--color--brun-doux, #694F37);
  --eira-text: var(--wp--preset--color--brun, #4A3A2A);

  --eira-font-display: var(--wp--preset--font-family--playfair, Georgia, serif);
  --eira-font-editorial: var(--wp--preset--font-family--bodoni, Georgia, serif);
  --eira-font-body: var(--wp--preset--font-family--montserrat, Arial, sans-serif);

  --eira-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --eira-max: 1320px;
  --eira-sect-y: clamp(4.5rem, 11vw, 9.5rem);

  --eira-ease: cubic-bezier(.22, .61, .36, 1);
  --eira-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* La page d'accueil pilote sa propre typographie de base. */
body.eira-page-accueil {
  background: var(--eira-base);
  color: var(--eira-text);
  font-family: var(--eira-font-body);
  font-size: clamp(.95rem, .9rem + .25vw, 1.03rem);
  line-height: 1.75;
  overflow-x: clip;
}

.eira-page-accueil .wp-site-blocks > main > *,
.eira-page-accueil .wp-site-blocks > main {
  margin-block: 0;
}

/* ============================================================
   EIRA WEDDING — tokens
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0}

:focus-visible{
  outline:2px solid var(--eira-clay-dark);
  outline-offset:4px;
  border-radius:2px;
}
#eira-main:focus,#eira-main:focus-visible{outline:none}

.eira-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Typographic primitives
   ============================================================ */
.eira-eyebrow{
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--eira-clay-dark);
  display:flex;align-items:center;gap:.85em;
}
.eira-eyebrow::before{
  content:"";width:clamp(1.5rem,4vw,2.75rem);height:1px;
  background:currentColor;opacity:.55;flex:none;
}
.eira-eyebrow--plain::before{display:none}

.eira-h2{
  font-family:var(--eira-font-display);
  font-weight:400;
  font-size:clamp(2rem,1.35rem + 3.1vw,3.75rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--eira-text);
}
.eira-h3{
  font-family:var(--eira-font-display);
  font-weight:400;
  font-size:clamp(1.28rem,1.1rem + .8vw,1.72rem);
  line-height:1.2;
  letter-spacing:-.01em;
}
.eira-lead{
  font-size:clamp(1rem,.95rem + .35vw,1.14rem);
  line-height:1.72;
  color:color-mix(in srgb,var(--eira-text) 88%,transparent);
  max-width:46ch;
}
.eira-italic{
  font-family:var(--eira-font-editorial);
  font-style:italic;
  font-weight:400;
}

/* growing hairline under section titles */
.eira-underline{position:relative;display:block;padding-bottom:.6em}
.eira-underline::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--eira-clay);
  transition:width 1.15s var(--eira-ease-out) .18s;
}
.is-in .eira-underline::after,.eira-underline.is-in::after{width:clamp(3.5rem,9vw,6.5rem)}

/* ============================================================
   Layout
   ============================================================ */
.eira-shell{
  width:100%;max-width:var(--eira-max);
  margin-inline:auto;
  padding-inline:var(--eira-gutter);
}
.eira-section{padding-block:var(--eira-sect-y)}
.eira-section--tight{padding-block:clamp(3rem,7vw,5.5rem)}
.eira-rule{height:1px;background:color-mix(in srgb,var(--eira-taupe) 45%,transparent);border:0;margin:0}

/* ============================================================
   Buttons
   ============================================================ */
.eira-btn{
  --btn-bg:var(--eira-clay);
  --btn-fg:var(--eira-white);
  --btn-bd:var(--eira-clay);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:52px;padding:.95rem 1.9rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  line-height:1;text-align:center;
  transition:background .45s var(--eira-ease),color .45s var(--eira-ease),
             border-color .45s var(--eira-ease),transform .35s var(--eira-ease-out);
  will-change:transform;
}
.eira-btn:hover{--btn-bg:var(--eira-clay-dark);--btn-bd:var(--eira-clay-dark)}
.eira-btn--ghost{--btn-bg:transparent;--btn-fg:var(--eira-text);--btn-bd:var(--eira-taupe)}
.eira-btn--ghost:hover{--btn-bg:transparent;--btn-fg:var(--eira-clay-dark);--btn-bd:var(--eira-clay-dark)}
.eira-btn--light{--btn-bg:var(--eira-white);--btn-fg:var(--eira-text);--btn-bd:var(--eira-white)}
.eira-btn--light:hover{--btn-bg:var(--eira-sand);--btn-bd:var(--eira-sand)}
.eira-btn__arrow{width:1.05em;height:1.05em;flex:none;transition:transform .4s var(--eira-ease-out)}
.eira-btn:hover .eira-btn__arrow{transform:translateX(4px)}

.eira-textlink{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:44px;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--eira-clay-dark);
  padding-block:.6rem;
  position:relative;
}
.eira-textlink::after{
  content:"";position:absolute;left:0;right:0;bottom:.7rem;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:left;
  transition:transform .5s var(--eira-ease-out);
}
.eira-textlink:hover::after{transform:scaleX(.35)}

/* ============================================================
   Scroll progress
   ============================================================ */
.eira-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:120;
  background:transparent;pointer-events:none;
}
.eira-progress__bar{
  height:100%;width:100%;background:var(--eira-clay);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ============================================================
   Custom cursor (desktop, pointer:fine only)
   ============================================================ */
.eira-cursor-dot,.eira-cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;opacity:0;
  display:none;
}
.eira-cursor-dot{
  width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--eira-clay);
  transition:opacity .3s linear,transform .25s var(--eira-ease-out);
}
.eira-cursor-ring{
  width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--eira-clay) 70%,transparent);
  background:transparent;
  display:none;place-items:center;
  transition:opacity .3s linear,width .4s var(--eira-ease-out),height .4s var(--eira-ease-out),
             margin .4s var(--eira-ease-out),background-color .4s var(--eira-ease-out),
             border-color .4s var(--eira-ease-out);
}
.eira-cursor-ring__label{
  font-size:.55rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--eira-white);opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--eira-ease) .05s,transform .35s var(--eira-ease-out) .05s;
}

/* ring states */
html.eira-cursor-link .eira-cursor-ring{
  width:58px;height:58px;margin:-29px 0 0 -29px;
  border-color:var(--eira-clay);
  background:color-mix(in srgb,var(--eira-clay) 10%,transparent);
}


/* ============================================================
   Reveal system
   ============================================================ */
html.eira-anim .eira-rv{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .95s var(--eira-ease-out),transform 1.05s var(--eira-ease-out);
}
html.eira-anim .eira-rv.is-in{opacity:1;transform:none}

.eira-imgmask{display:block;position:relative;overflow:hidden;background:var(--eira-ivory)}
.eira-imgmask img{width:100%;height:100%;object-fit:cover}
html.eira-anim .eira-imgmask img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.1);
  transition:clip-path 1.25s var(--eira-ease-out),transform 1.7s var(--eira-ease-out);
}
html.eira-anim .eira-imgmask.is-in img{clip-path:inset(0 0 0 0);transform:scale(1)}
@media (min-width:900px){
}
@media (min-width:900px){}
@media (min-width:900px){}

/* ============================================================
   HERO
   ============================================================ */
.eira-ac-hero{position:relative;padding-top:clamp(1.75rem,5vw,3.25rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.eira-ac-hero__grid{display:grid;gap:clamp(1.75rem,5vw,3.5rem)}
@media (min-width:960px){
  .eira-ac-hero{padding-top:clamp(2rem,4vw,4rem)}
  .eira-ac-hero__grid{
    grid-template-columns:1.02fr .98fr;
    gap:clamp(2.5rem,5vw,5rem);
    align-items:stretch;
  }
}
.eira-ac-hero__copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.15rem,2.6vw,1.9rem)}

.eira-ac-hero__title{
  font-family:var(--eira-font-display);
  font-weight:400;
  font-size:clamp(2.7rem,1.6rem + 8.4vw,5.9rem);
  line-height:.97;
  letter-spacing:-.025em;
  color:var(--eira-text);
}
.eira-ac-hero__line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.eira-ac-hero__line>span{display:block}
html.eira-anim .eira-ac-hero__line>span{
  transform:translate3d(0,105%,0);
  clip-path:inset(0 0 -12% 0);
  transition:transform 1.25s var(--eira-ease-out);
}
.eira-ac-hero__line:nth-child(2)>span{transition-delay:.13s}
.eira-ac-hero__line:nth-child(3)>span{transition-delay:.26s}
html.eira-anim .eira-ac-hero.is-ready .eira-ac-hero__line>span{transform:none}
.eira-ac-hero__title em{
  font-family:var(--eira-font-editorial);
  font-style:italic;font-weight:400;
  color:var(--eira-clay);
}

html.eira-anim :is(.eira-ac-hero__eyebrow,.eira-ac-hero__lead,.eira-ac-hero__actions,.eira-ac-hero__meta){
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--eira-ease-out),transform 1s var(--eira-ease-out);
}
html.eira-anim .eira-ac-hero.is-ready .eira-ac-hero__eyebrow{opacity:1;transform:none;transition-delay:.05s}
html.eira-anim .eira-ac-hero.is-ready .eira-ac-hero__lead{opacity:1;transform:none;transition-delay:.52s}
html.eira-anim .eira-ac-hero.is-ready .eira-ac-hero__actions{opacity:1;transform:none;transition-delay:.66s}
html.eira-anim .eira-ac-hero.is-ready .eira-ac-hero__meta{opacity:1;transform:none;transition-delay:.8s}

.eira-ac-hero__actions{display:flex;flex-direction:column;gap:.7rem}
@media (min-width:520px){.eira-ac-hero__actions{flex-direction:row;flex-wrap:wrap;gap:.85rem}}
.eira-ac-hero__actions .eira-btn{width:100%}
@media (min-width:520px){.eira-ac-hero__actions .eira-btn{width:auto}}

.eira-ac-hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.35rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--eira-text) 72%,transparent);
  padding-top:.4rem;
}
.eira-ac-hero__meta span{display:inline-flex;align-items:center;gap:.55em}
.eira-ac-hero__meta span::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--eira-clay);flex:none;
}
/* the stats band repeats these figures right below — keep the mobile fold for the video */
@media (max-width:639px){.eira-ac-hero__meta{display:none}}

/* video column */
.eira-ac-hero__media{position:relative}
.eira-ac-hero__frame{
  position:relative;overflow:hidden;
  background:var(--eira-ivory);
  aspect-ratio:9/16;
  max-height:66vh;
  margin-inline:auto;
  width:100%;
}
html.eira-anim .eira-ac-hero__frame{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.35s var(--eira-ease-out) .18s;
}
html.eira-anim .eira-ac-hero.is-ready .eira-ac-hero__frame{clip-path:inset(0 0 0 0)}
@media (min-width:960px){
  .eira-ac-hero__frame{aspect-ratio:auto;height:100%;min-height:min(78vh,760px);max-height:none}
}
.eira-ac-hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  animation:eira-kenburns 26s ease-in-out infinite alternate;
}
@keyframes eira-kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(0,-1.5%,0)}
}
.eira-ac-hero__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--eira-text) 34%,transparent),color-mix(in srgb,var(--eira-text) 0%,transparent) 42%);
}
.eira-ac-hero__badge{
  position:absolute;left:0;bottom:0;z-index:2;
  background:color-mix(in srgb,var(--eira-base) 94%,transparent);
  backdrop-filter:blur(6px);
  padding:.85rem 1.15rem;
  max-width:min(78%,20rem);
}
.eira-ac-hero__badge strong{
  display:block;font-family:var(--eira-font-display);font-weight:500;
  font-size:1.08rem;line-height:1.2;
}
.eira-ac-hero__badge span{
  display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--eira-clay-dark);margin-top:.3rem;
}

/* scroll hint */
.eira-scrollhint{
  display:none;
  position:absolute;left:50%;bottom:.25rem;transform:translateX(-50%);
  align-items:center;gap:.7rem;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--eira-text) 78%,transparent);
  transition:opacity .6s var(--eira-ease),transform .6s var(--eira-ease);
}
@media (min-width:960px){.eira-scrollhint{display:flex}}
.eira-scrollhint__line{
  width:1px;height:46px;background:linear-gradient(to bottom,var(--eira-taupe),transparent);
  position:relative;overflow:hidden;
}
.eira-scrollhint__line::after{
  content:"";position:absolute;inset:0 auto auto 0;width:1px;height:16px;
  background:var(--eira-clay);
  animation:eira-hintrun 2.4s var(--eira-ease) infinite;
}
@keyframes eira-hintrun{
  0%{transform:translateY(-18px)}
  60%,100%{transform:translateY(48px)}
}
.eira-scrollhint.is-hidden{opacity:0;transform:translate(-50%,14px);pointer-events:none}

/* ============================================================
   STATS band
   ============================================================ */
.eira-stats{background:var(--eira-brown-soft);color:var(--eira-base)}
.eira-stats__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem 2rem;padding-bottom:clamp(1.75rem,4vw,2.75rem);
}
.eira-stats .eira-eyebrow{color:var(--eira-sand)}
.eira-stats__note{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--eira-sand) 92%,transparent);
}
.eira-stats__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;
}
@media (min-width:640px){.eira-stats__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.eira-stats__grid{grid-template-columns:repeat(6,1fr)}}
.eira-stat{
  padding:clamp(1.1rem,3vw,1.6rem) clamp(.6rem,2vw,1.25rem) clamp(1.1rem,3vw,1.6rem) 0;
  border-top:1px solid color-mix(in srgb,var(--eira-sand) 22%,transparent);
}
.eira-stat:nth-child(odd){padding-right:clamp(.75rem,3vw,1.5rem)}
@media (min-width:640px){.eira-stat{border-left:1px solid color-mix(in srgb,var(--eira-sand) 22%,transparent);padding-left:clamp(.9rem,2vw,1.4rem)}
.eira-stat:nth-child(3n+1){border-left:0;padding-left:0}}
@media (min-width:1080px){
  .eira-stat{border-left:1px solid color-mix(in srgb,var(--eira-sand) 22%,transparent)!important;padding-left:clamp(1rem,1.6vw,1.5rem)!important}
  .eira-stat:first-child{border-left:0!important;padding-left:0!important}
}
.eira-stat__value{
  font-family:var(--eira-font-display);
  font-weight:400;
  font-size:clamp(2.35rem,1.5rem + 3.4vw,3.5rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--eira-base);
  display:flex;align-items:baseline;gap:0;
  font-variant-numeric:tabular-nums;
}
.eira-stat__suffix{
  font-family:var(--eira-font-body);
  font-size:clamp(.85rem,.6rem + .7vw,1.05rem);
  font-weight:400;letter-spacing:.02em;
  color:var(--eira-sand);
  white-space:pre;
}
.eira-stat__label{
  margin-top:.7rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.6;
  color:color-mix(in srgb,var(--eira-sand) 90%,transparent);
  max-width:15ch;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.eira-ac-marquee{
  overflow:hidden;
  padding-block:clamp(1.1rem,2.6vw,1.7rem);
  background:var(--eira-ivory);
  border-block:1px solid color-mix(in srgb,var(--eira-taupe) 38%,transparent);
}
.eira-ac-marquee__track{
  display:flex;width:max-content;
  animation:eira-marquee 34s linear infinite;
}
.eira-ac-marquee:hover .eira-ac-marquee__track{animation-play-state:paused}
.eira-ac-marquee__group{display:flex;align-items:center;flex:none}
.eira-ac-marquee__item{
  display:inline-flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);
  padding-inline:clamp(.75rem,2vw,1.5rem);
  font-family:var(--eira-font-editorial);
  font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,1rem + 1.7vw,2.35rem);
  line-height:1;
  color:var(--eira-clay-dark);
  white-space:nowrap;
}
.eira-ac-marquee__item::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--eira-taupe);flex:none;
}
@keyframes eira-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   OFFERS
   ============================================================ */
.eira-offers__head{
  display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  padding-bottom:clamp(2.25rem,5vw,3.5rem);
  max-width:min(100%,52rem);
}
.eira-offers__grid{display:grid;gap:clamp(1.5rem,3.5vw,2.5rem)}
@media (min-width:820px){.eira-offers__grid{grid-template-columns:1fr 1fr}}
.eira-offer{
  position:relative;
  background:var(--eira-white);
  border:1px solid color-mix(in srgb,var(--eira-taupe) 35%,transparent);
  padding:clamp(1.6rem,4vw,2.6rem);
  display:flex;flex-direction:column;gap:clamp(1.1rem,2.5vw,1.6rem);
  transition:border-color .5s var(--eira-ease),transform .7s var(--eira-ease-out),box-shadow .6s var(--eira-ease);
}
@media (hover:hover) and (min-width:820px){
  .eira-offer:hover{
    border-color:var(--eira-clay);
    transform:translateY(-5px);
    box-shadow:0 24px 50px -34px color-mix(in srgb,var(--eira-text) 35%,transparent);
  }
}
.eira-offer__num{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  color:var(--eira-clay-dark);
  display:flex;align-items:center;gap:.75em;
}
.eira-offer__num::after{
  content:"";height:1px;flex:1;background:color-mix(in srgb,var(--eira-taupe) 55%,transparent);
}
.eira-offer__price{
  font-family:var(--eira-font-display);
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem);
  line-height:1.05;font-weight:400;letter-spacing:-.015em;
}
.eira-offer__price small{
  display:block;font-family:var(--eira-font-body);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--eira-clay-dark);margin-top:.55rem;font-weight:500;
}
.eira-offer__facts{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0;padding:0;list-style:none;
}
.eira-offer__facts li{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .8rem;
  background:var(--eira-ivory);
  color:color-mix(in srgb,var(--eira-text) 85%,transparent);
  line-height:1.35;
}
.eira-offer__foot{margin-top:auto;padding-top:.35rem}

/* ============================================================
   COLLECTION strip
   ============================================================ */
.eira-strip{overflow:hidden}
/* Surtitre sur sa propre ligne, titre et flèches sur la suivante — comme
   les autres en-têtes de section. Sans la base 100 %, le surtitre et le
   titre se partageaient la largeur : sur téléphone, « Collection » se
   retrouvait à gauche et « Les robes » à sa droite, alors que partout
   ailleurs le titre est en dessous. */
.eira-strip__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.5rem 2rem;padding-bottom:clamp(1.75rem,4vw,2.75rem);
}
.eira-strip__head > .eira-eyebrow{flex:1 1 100%}
.eira-strip__head > h2,
.eira-strip__head > .eira-h2{flex:1 1 auto;margin:0}
.eira-strip__head > .eira-strip__nav{margin-left:auto}
.eira-strip__nav{display:none;gap:.6rem}
@media (min-width:900px){.eira-strip__nav{display:flex}}
.eira-strip__navbtn{
  width:48px;height:48px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--eira-taupe) 55%,transparent);
  display:grid;place-items:center;
  color:var(--eira-text);
  transition:background-color .4s var(--eira-ease),border-color .4s var(--eira-ease),color .4s var(--eira-ease);
}
.eira-strip__navbtn:hover{background:var(--eira-clay);border-color:var(--eira-clay);color:var(--eira-white)}
.eira-strip__navbtn[disabled]{opacity:.32;pointer-events:none}
.eira-strip__navbtn svg{width:16px;height:16px}

.eira-strip__scroller{
  display:flex;
  gap:clamp(.85rem,2.2vw,1.5rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--eira-gutter);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:var(--eira-gutter);
  padding-bottom:.5rem;
  margin-inline:calc(-1 * var(--eira-gutter));
}
.eira-strip__scroller::-webkit-scrollbar{display:none}
.eira-strip__scroller::after{content:"";flex:none;width:1px}

.eira-ac-card{
  flex:none;scroll-snap-align:start;
  color:inherit;text-decoration:none;
  width:clamp(15rem,72vw,17rem);
  display:flex;flex-direction:column;gap:.95rem;
}
@media (min-width:700px){.eira-ac-card{width:clamp(16rem,32vw,20rem)}}
@media (min-width:1180px){.eira-ac-card{width:22rem}}
.eira-ac-card__media{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;background:var(--eira-ivory);
}
.eira-ac-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--eira-ease-out);
}
@media (hover:hover){.eira-ac-card:hover .eira-ac-card__media img{transform:scale(1.07)}}
/* Fond plein plutôt que translucide : sur une photo de robe blanche, un
   voile ivoire à 93 % avec un texte argile devenait illisible — la mention
   « À louer / À acheter » disparaissait dans l'image. */
.eira-ac-card__tag{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--eira-clay-dark);
  padding:.5rem .8rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--eira-base);
}
.eira-ac-card__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid color-mix(in srgb,var(--eira-taupe) 40%,transparent);
  padding-top:.85rem;
}
.eira-ac-card__name{
  font-family:var(--eira-font-display);font-weight:500;
  font-size:1.02rem;letter-spacing:.06em;
}
.eira-ac-card__price{
  font-size:.8rem;letter-spacing:.06em;white-space:nowrap;
  color:var(--eira-clay-dark);font-weight:500;
}
.eira-ac-card__price del{
  color:color-mix(in srgb,var(--eira-text) 75%,transparent);
  font-weight:400;margin-right:.45em;
}
.eira-strip__foot{padding-top:clamp(1.5rem,3.5vw,2.25rem)}
@media (max-width:519px){.eira-strip__foot .eira-btn{width:100%}}

/* ============================================================
   BAND (full-bleed parallax photo)
   ============================================================ */
.eira-band{
  position:relative;overflow:hidden;
  min-height:clamp(24rem,72vw,34rem);
  display:grid;align-items:end;
  isolation:isolate;
}
.eira-band--tall{min-height:clamp(28rem,86vw,40rem)}
/* on phones the panel eats the band — give the photograph room to breathe */
@media (max-width:639px){.eira-band--tall{min-height:34rem}}
.eira-band__media{position:absolute;inset:-12% 0;z-index:0}
.eira-band__media img{width:100%;height:100%;object-fit:cover}
.eira-band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,color-mix(in srgb,var(--eira-clay-dark) 55%,transparent),color-mix(in srgb,var(--eira-clay-dark) 18%,transparent) 58%,color-mix(in srgb,var(--eira-clay-dark) 8%,transparent));
}
.eira-band__inner{
  position:relative;z-index:2;
  padding-block:clamp(1.75rem,5vw,3.5rem);
  color:var(--eira-white);
}
/* text always sits on a solid panel — never directly on the photograph */
.eira-band__panel{
  background:color-mix(in srgb,var(--eira-clay-dark) 92%,transparent);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  padding:clamp(1.5rem,4vw,2.75rem);
  max-width:min(100%,44rem);
  border-left:1px solid color-mix(in srgb,var(--eira-sand) 35%,transparent);
}
.eira-band__quote{
  font-family:var(--eira-font-editorial);
  font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,1.15rem + 2.9vw,3.35rem);
  line-height:1.14;
  letter-spacing:-.01em;
  max-width:26ch;
  color:var(--eira-white);
}
.eira-band__quote em{font-style:italic;color:var(--eira-sand)}
.eira-band .eira-eyebrow{color:var(--eira-sand);margin-bottom:clamp(.9rem,2.5vw,1.4rem)}
.eira-band__cta{
  display:flex;flex-direction:column;gap:.7rem;
  margin-top:clamp(1.5rem,4vw,2.25rem);
}
@media (min-width:520px){.eira-band__cta{flex-direction:row;flex-wrap:wrap;gap:.85rem}}
.eira-band__cta .eira-btn{width:100%}
@media (min-width:520px){.eira-band__cta .eira-btn{width:auto}}
.eira-band__cta .eira-btn--ghost{--btn-fg:var(--eira-white);--btn-bd:color-mix(in srgb,var(--eira-white) 60%,transparent)}
.eira-band__cta .eira-btn--ghost:hover{--btn-fg:var(--eira-text);--btn-bg:var(--eira-white);--btn-bd:var(--eira-white)}
/* ============================================================
   WHY EIRA
   ============================================================ */
.eira-why{background:var(--eira-ivory)}
.eira-why__head{
  display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  padding-bottom:clamp(2.25rem,5vw,3.5rem);
  max-width:min(100%,52rem);
}
.eira-why__grid{
  display:grid;gap:clamp(1.5rem,3vw,2.25rem);
}
@media (min-width:600px){.eira-why__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.eira-why__grid{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,2.4vw,2.5rem)}}
.eira-why__item{
  display:flex;flex-direction:column;gap:1rem;
  padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--eira-taupe) 48%,transparent);
}
.eira-why__icon{color:var(--eira-clay);width:44px;height:44px}
.eira-why__icon svg{width:100%;height:100%;display:block}
.eira-why__item p{
  font-size:.95rem;line-height:1.7;
  color:color-mix(in srgb,var(--eira-text) 85%,transparent);
  max-width:32ch;
}

/* ============================================================
   SHOWROOM
   ============================================================ */
.eira-showroom__grid{display:grid;gap:clamp(1.75rem,4.5vw,3.5rem)}
@media (min-width:900px){
  .eira-showroom__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2.5rem,5vw,4.5rem)}
}
.eira-showroom__figures{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.75rem,2vw,1.25rem);
  align-items:start;
}
.eira-showroom__figures .eira-imgmask{aspect-ratio:3/4}
.eira-showroom__figures .eira-imgmask:first-child{margin-top:clamp(1.25rem,4vw,3rem)}
.eira-showroom__copy{display:grid;gap:clamp(1.1rem,2.6vw,1.7rem);align-content:start}
.eira-showroom__list{display:grid;gap:.85rem;margin:0;padding:0}
.eira-showroom__list div{
  display:flex;gap:.9rem;align-items:baseline;
  padding-bottom:.85rem;
  border-bottom:1px solid color-mix(in srgb,var(--eira-taupe) 32%,transparent);
}
.eira-showroom__list dt{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--eira-clay-dark);flex:none;min-width:7.5rem;
}
.eira-showroom__list dd{margin:0;font-size:.92rem;line-height:1.6}

/* ============================================================
   EXPERIENCE steps
   ============================================================ */
.eira-steps{background:var(--eira-beige)}
.eira-steps__head{
  display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  padding-bottom:clamp(2.25rem,5vw,3.5rem);max-width:min(100%,52rem);
}
.eira-steps__list{
  counter-reset:none;display:grid;gap:0;margin:0;padding:0;list-style:none;
  position:relative;
}
.eira-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1rem,3vw,2.25rem);
  padding-block:clamp(1.35rem,3.2vw,2rem);
  border-top:1px solid color-mix(in srgb,var(--eira-taupe) 50%,transparent);
  align-items:baseline;
}
.eira-step:last-child{border-bottom:1px solid color-mix(in srgb,var(--eira-taupe) 50%,transparent)}
@media (min-width:760px){
  .eira-step{grid-template-columns:auto minmax(0,26ch) 1fr;align-items:center}
}
.eira-step__num{
  font-family:var(--eira-font-display);
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem);
  line-height:1;font-weight:400;
  color:var(--eira-clay);
  font-variant-numeric:tabular-nums;
  min-width:2.4em;
}
.eira-step__title{
  font-family:var(--eira-font-display);
  font-size:clamp(1.1rem,1rem + .6vw,1.42rem);
  line-height:1.25;font-weight:400;
  letter-spacing:-.005em;
}
.eira-step__detail{
  grid-column:2;
  font-size:.9rem;line-height:1.65;
  color:color-mix(in srgb,var(--eira-text) 78%,transparent);
  margin-top:.4rem;
}
@media (min-width:760px){
  .eira-step__detail{grid-column:3;margin-top:0;text-align:right;font-size:.86rem;letter-spacing:.04em}
}

/* ============================================================
   REVIEWS
   ============================================================ */
.eira-reviews__grid{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:880px){
  .eira-reviews__grid{grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
}
.eira-reviews__score{display:grid;gap:clamp(.9rem,2vw,1.35rem);align-content:start}
.eira-reviews__big{
  font-family:var(--eira-font-display);
  font-size:clamp(3.4rem,2.2rem + 5.6vw,6rem);
  line-height:.92;font-weight:400;letter-spacing:-.03em;
  color:var(--eira-text);
  display:flex;align-items:baseline;gap:.1em;
  font-variant-numeric:tabular-nums;
}
.eira-reviews__bigsuffix{
  font-family:var(--eira-font-body);font-size:.3em;font-weight:400;
  letter-spacing:.06em;color:var(--eira-clay-dark);
}
.eira-reviews__stars{display:flex;gap:.35rem;color:var(--eira-clay)}
.eira-reviews__stars svg{width:20px;height:20px}
.eira-reviews__count{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--eira-text) 75%,transparent);
}
.eira-widget{
  border:1px dashed color-mix(in srgb,var(--eira-taupe) 75%,transparent);
  background:var(--eira-white);
  padding:clamp(1.5rem,4vw,2.5rem);
  display:grid;gap:.9rem;
  min-height:clamp(13rem,32vw,16rem);
  align-content:center;justify-items:start;
}
.eira-widget__tag{
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--eira-clay-dark);
  border:1px solid color-mix(in srgb,var(--eira-clay) 45%,transparent);
  padding:.4rem .7rem;
}
.eira-widget__body{
  font-size:.9rem;line-height:1.7;max-width:46ch;
  color:color-mix(in srgb,var(--eira-text) 80%,transparent);
}
.eira-widget__note{
  font-family:var(--eira-font-editorial);font-style:italic;
  font-size:1.02rem;line-height:1.5;color:var(--eira-text);
}
@media (min-width:820px){
}

/* ============================================================
   Sticky mobile CTA
   ============================================================ */
.eira-stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  padding:.6rem var(--eira-gutter) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--eira-base) 92%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid color-mix(in srgb,var(--eira-taupe) 40%,transparent);
  transform:translate3d(0,120%,0);
  transition:transform .6s var(--eira-ease-out);
}
.eira-stickycta.is-visible{transform:none}
.eira-stickycta .eira-btn{width:100%;min-height:50px}
@media (min-width:900px){.eira-stickycta{display:none}}

/* ============================================================
   Reduced motion — neutralise everything
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .eira-rv{opacity:1!important;transform:none!important}
  .eira-imgmask img{clip-path:none!important;transform:none!important}
  .eira-ac-hero__line>span{transform:none!important}
  .eira-ac-hero__frame{clip-path:none!important}
  .eira-ac-hero__eyebrow,.eira-ac-hero__lead,.eira-ac-hero__actions,.eira-ac-hero__meta{opacity:1!important;transform:none!important}
  .eira-underline::after{width:clamp(3.5rem,9vw,6.5rem)!important}
  .eira-ac-marquee__track{animation:none!important}
  .eira-ac-hero__video{animation:none!important}
  .eira-scrollhint__line::after{animation:none!important}
  .eira-cursor-dot,.eira-cursor-ring{display:none!important}
  .eira-stickycta{transform:none}
  .eira-stickycta:not(.is-visible){display:none}
}

/* Curseur : le pointeur du système reste TOUJOURS visible.
   L'anneau vient en supplément et se transforme en disque « Voir »
   au survol des cartes robes. Aucun `cursor:none` n'est utilisé. */
.eira-cursor-dot{display:none!important}
html.eira-has-cursor .eira-cursor-ring{display:grid}
html.eira-cursor-active .eira-cursor-ring{opacity:1}
html.eira-cursor-card .eira-cursor-ring{
  width:86px;height:86px;margin:-43px 0 0 -43px;
  background:var(--eira-clay);border-color:var(--eira-clay);
}
html.eira-cursor-card .eira-cursor-ring__label{opacity:1;transform:translateY(0)}

/* ============================================================
   Alternance des fonds : deux sections voisines n'ont jamais
   la même teinte — les couleurs se touchent, sans filet ni écart.
   ============================================================ */
.eira-ac-hero{background:var(--eira-base)}
/* Option 3 : la bande des chiffres porte le terracotta validé. */
.eira-stats{background:var(--eira-clay);color:var(--eira-base)}
.eira-ac-marquee{background:var(--eira-sand)}
.eira-offers{background:var(--eira-base)}
.eira-strip{background:var(--eira-ivory)}
.eira-why{background:var(--eira-base)}
.eira-showroom{background:var(--eira-ivory)}
.eira-steps{background:var(--eira-beige)}
.eira-reviews{background:var(--eira-base)}

/* Aucun filet : c'est le changement de teinte qui marque la rupture.
   WordPress insère un écart vertical entre les blocs (block gap) : sur
   l'accueil il doit être supprimé, sinon une bande claire apparaît entre
   deux sections de couleurs différentes. */
.eira-page-accueil .wp-site-blocks > main,
.eira-page-accueil .wp-site-blocks > main > *,
.eira-page-accueil .wp-block-post-content,
.eira-page-accueil .wp-block-post-content > *,
.eira-page-accueil .entry-content > *{
  margin-block-start:0;
  margin-block-end:0;
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-band,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-section,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-ac-marquee,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-ac-hero{
  border-top:0;
  border-bottom:0;
}

/* Bandes photo : panneau et voile dans la famille terracotta
   (argile foncé de la charte), jamais en brun sombre. */
.eira-band__panel{
  border-left-color:color-mix(in srgb,var(--eira-base) 45%,transparent);
}
.eira-band__quote em{color:var(--eira-beige)}
.eira-band .eira-eyebrow{color:var(--eira-beige)}

/* =========================================================================
   Adaptation au DOM de l'éditeur de blocs
   Le contenu de l'accueil est composé de blocs natifs (groupes, titres,
   paragraphes, images, vidéo, boutons, listes) : ces règles raccordent le
   design aux balises que WordPress génère (figure.wp-block-image,
   figure.wp-block-video, a.wp-block-button__link…).
   ========================================================================= */

/* Les groupes ne doivent pas ajouter leurs propres marges verticales. */
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-group > *,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-buttons,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-image,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-video,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-list {
  margin-block: 0;
}

/* --- Boutons : les boutons natifs reprennent l'apparence .eira-btn --- */
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn > .wp-block-button__link,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn > .wp-block-button__link:hover {
  background: var(--btn-bg, var(--eira-clay));
  color: var(--btn-fg, var(--eira-white));
  border: 1px solid var(--btn-bd, var(--eira-clay));
  border-radius: 0;
  padding: 1.05em 2em;
  font-family: var(--eira-font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background-color .45s var(--eira-ease), color .45s var(--eira-ease), border-color .45s var(--eira-ease);
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn--ghost > .wp-block-button__link {
  --btn-bg: transparent;
  --btn-fg: var(--eira-text);
  --btn-bd: var(--eira-taupe);
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn--light > .wp-block-button__link {
  --btn-bg: var(--eira-white);
  --btn-fg: var(--eira-text);
  --btn-bd: var(--eira-white);
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn > .wp-block-button__link:hover {
  background: var(--eira-clay-dark);
  color: var(--eira-white);
  border-color: var(--eira-clay-dark);
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-band__cta .wp-block-button.eira-btn--ghost > .wp-block-button__link {
  --btn-fg: var(--eira-white);
  --btn-bd: color-mix(in srgb, var(--eira-white) 60%, transparent);
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-ac-hero__actions,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-band__cta,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-strip__foot .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

@media (max-width: 519px) {
  :is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-ac-hero__actions,
  :is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-band__cta {
    flex-direction: column;
  }

  :is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn {
    width: 100%;
  }

  :is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn > .wp-block-button__link {
    display: block;
    text-align: center;
  }
}

/* --- Hero : vidéo dans une figure --- */
.eira-ac-hero__frame .wp-block-video {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
}

.eira-ac-hero__frame .wp-block-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre du hero : le script découpe les lignes, mais le rendu doit être
   correct même sans JavaScript. */
.eira-ac-hero__title br {
  display: block;
}

/* Ligne d'informations sous les boutons */
.eira-ac-hero__meta {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eira-text) 62%, transparent);
  line-height: 2;
}

/* --- Bandes photo : image dans une figure --- */
.eira-band .wp-block-image.eira-band__media {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  margin: 0;
}

.eira-band .wp-block-image.eira-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Showroom : deux photos + informations en lignes --- */
.eira-showroom__figures .wp-block-image {
  margin: 0;
}

.eira-showroom__list {
  display: grid;
  gap: .1rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

.eira-showroom__ligne {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: .5rem 1.5rem;
  padding-block: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.eira-showroom__terme {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eira-clay);
}

.eira-showroom__valeur {
  color: color-mix(in srgb, var(--eira-text) 82%, transparent);
}

.eira-showroom__lien {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.eira-showroom__lien a,
.eira-offer__foot a {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eira-clay-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--eira-clay) 45%, transparent);
  padding-bottom: 2px;
  transition: border-color .35s var(--eira-ease);
}

.eira-showroom__lien a:hover,
.eira-offer__foot a:hover {
  border-bottom-color: var(--eira-clay);
}

@media (max-width: 519px) {
  .eira-showroom__ligne {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
}

/* --- Offres : prix et nombre de modèles en deux paragraphes --- */
.eira-offer__count {
  margin-top: .3rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eira-clay);
}

/* --- Étapes : lignes en groupes plutôt qu'en liste ordonnée --- */
.eira-steps__list {
  display: grid;
  gap: 0;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* --- Bandeau défilant : paragraphes comme items --- */
.eira-ac-marquee__item {
  margin: 0;
}

/* --- Note Google : le script anime le nombre du titre --- */
.eira-reviews__big {
  margin: 0;
}

/* Le conteneur de boutons natif remplace l'ancien bouton en lien simple :
   la boîte extérieure ne doit rien dessiner, seul le lien est habillé. */
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .wp-block-button.eira-btn {
  background: none;
  border: 0;
  padding: 0;
  letter-spacing: normal;
}

:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-ac-hero__actions,
:is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-band__cta {
  flex-direction: row;
}

@media (max-width: 519px) {
  :is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-ac-hero__actions,
  :is(.eira-ac-hero,.eira-stats,.eira-ac-marquee,.eira-offers,.eira-strip,.eira-band,.eira-why,.eira-showroom,.eira-steps,.eira-reviews,.eira-cine) .eira-band__cta {
    flex-direction: column;
  }
}

/* Badge du hero : deux lignes serrées */
.eira-ac-hero__badge {
  line-height: 1.5;
}

.eira-ac-hero__badge strong {
  display: block;
}




/* Carte robe composée de blocs : l'image est dans une figure Gutenberg. */
.eira-ac-card__media .wp-block-image,
.eira-ac-card__media figure {
  margin: 0;
  height: 100%;
}

.eira-ac-card__media .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eira-ac-card__name a {
  color: inherit;
  text-decoration: none;
}

.eira-ac-card__name a:hover {
  color: var(--eira-clay-dark);
}

/* Pictogrammes : blocs HTML dans le contenu, donc modifiables. */
.eira-why__icon svg {
  width: 34px;
  height: 34px;
  color: var(--eira-clay);
  margin-bottom: clamp(1rem, 2.5vw, 1.4rem);
}

.eira-reviews__stars svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--eira-clay);
}

.eira-reviews__stars {
  display: flex;
  gap: .3rem;
  margin-bottom: .8rem;
}

/* =========================================================================
   PAGES INTÉRIEURES — mise au même niveau que l'accueil
   Les pages sont déjà composées de blocs éditables : ces règles leur
   appliquent le rythme, la typographie et les composants de l'accueil.
   ========================================================================= */

/* --- Rythme vertical et largeur de lecture --- */
.wp-block-group.alignfull.eira-reveal {
  padding-top: clamp(3.5rem, 7.5vw, 6.5rem) !important;
  padding-bottom: clamp(3.5rem, 7.5vw, 6.5rem) !important;
}

/* --- Titres de section : même échelle que l'accueil --- */
.eira-filet,
.wp-block-group .wp-block-heading.has-x-large-font-size {
  font-family: var(--eira-font-display);
  font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.1rem) !important;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-weight: 400;
}

.eira-reveal h3.has-large-font-size {
  font-family: var(--eira-font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  letter-spacing: .01em;
}

.eira-kicker {
  color: var(--eira-clay);
}

/* --- Bandeau d'ouverture des pages --- */
.eira-bande-hero {
  min-height: clamp(24rem, 52vh, 34rem);
}

.eira-bande-hero .wp-block-cover__inner-container {
  max-width: var(--eira-max);
  margin-inline: auto;
  width: 100%;
}

.eira-bande-hero__kicker {
  font-size: .72rem !important;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--eira-beige) !important;
}

.eira-bande-hero__titre {
  font-family: var(--eira-font-display);
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem) !important;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.eira-bande-hero__titre em {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  color: var(--eira-beige);
}

.eira-bande__panneau {
  background: color-mix(in srgb, var(--eira-clay-dark) 88%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-left: 1px solid color-mix(in srgb, var(--eira-base) 45%, transparent);
}

/* --- Cartes d'information : filet plutôt que boîte --- */
.eira-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: clamp(1.1rem, 2.5vw, 1.6rem) !important;
  box-shadow: none !important;
}

.eira-card:hover {
  transform: none;
  box-shadow: none !important;
  border-top-color: var(--eira-clay) !important;
}

.eira-card h3 {
  font-family: var(--eira-font-display);
  font-weight: 500;
  letter-spacing: .01em;
}

.eira-card p {
  color: color-mix(in srgb, var(--eira-text) 78%, transparent);
  line-height: 1.7;
}

.eira-cards {
  gap: clamp(1.5rem, 3vw, 2.6rem) !important;
}

/* --- Étapes : lignes séparées par un filet, numéro en terracotta --- */
.eira-etape {
  padding-left: clamp(3.4rem, 6vw, 5rem);
  padding-block: clamp(1.2rem, 2.6vw, 1.8rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.eira-etape::before {
  font-family: var(--eira-font-body) !important;
  font-style: normal !important;
  font-size: .78rem !important;
  font-weight: 600;
  letter-spacing: .18em;
  top: clamp(1.35rem, 2.8vw, 2rem) !important;
  text-align: left !important;
}

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

.eira-etape h3 {
  margin-bottom: .25rem;
}

.eira-etape p {
  color: color-mix(in srgb, var(--eira-text) 72%, transparent);
}

/* --- Citation éditoriale --- */
.eira-citation {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  font-size: clamp(1.6rem, 1.05rem + 2.4vw, 3rem) !important;
  line-height: 1.16;
  letter-spacing: -.01em;
  max-width: 22ch;
  margin-inline: auto;
}

.eira-citation em {
  color: var(--eira-clay);
}

/* --- Mosaïques et galeries : révélation par balayage --- */
.eira-mosaique figure,
.eira-galerie-showroom figure,
.eira-journal-carte figure {
  overflow: hidden;
}

html.eira-anim :is(.eira-mosaique, .eira-galerie-showroom) img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.08);
  transition: clip-path 1.2s var(--eira-ease-out), transform 1.6s var(--eira-ease-out);
}

html.eira-anim :is(.eira-mosaique, .eira-galerie-showroom).is-visible img,
html.eira-anim .is-visible :is(.eira-mosaique, .eira-galerie-showroom) img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* --- Appel à l'action de bas de page --- */
.has-argile-background-color.eira-reveal {
  background: var(--eira-clay) !important;
  position: relative;
}

.has-argile-background-color.eira-reveal h2 {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3rem) !important;
  line-height: 1.14;
}

.has-argile-background-color.eira-reveal .wp-block-button__link {
  border-radius: 0;
  padding: 1.05em 2.2em;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color .45s var(--eira-ease), color .45s var(--eira-ease);
}

.has-argile-background-color.eira-reveal .wp-block-button__link:hover {
  background: var(--eira-clay-dark) !important;
  color: var(--eira-white) !important;
}

/* --- Fiches du journal --- */
.eira-journal-carte {
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 50%, transparent);
  padding-top: 1.2rem;
  transition: border-color .4s var(--eira-ease);
}

.eira-journal-carte:hover {
  border-top-color: var(--eira-clay);
}

.eira-journal-carte h3 {
  font-family: var(--eira-font-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  font-weight: 500;
}

/* --- FAQ : lignes fines, sans boîte --- */
.eira-faq .wp-block-details {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
  background: transparent;
  padding-inline: 0;
}

.eira-faq .wp-block-details summary {
  font-family: var(--eira-font-display);
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  font-weight: 500;
  padding-block: 1.1rem;
}

.eira-faq .wp-block-details p {
  color: color-mix(in srgb, var(--eira-text) 78%, transparent);
  padding-bottom: 1.2rem;
}

/* --- Boutons des pages intérieures --- */
.eira-reveal .wp-block-button__link {
  border-radius: 0;
  padding: 1.05em 2em;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* =========================================================================
   PAGES INTÉRIEURES — corrections d'alignement et composants (v2)
   ========================================================================= */

/* --- Un seul gabarit pour toutes les sections : titres et contenus alignés
       sur la même colonne, avec de l'air sur les côtés. --- */
.wp-block-group.alignfull.eira-reveal > *,
.wp-block-group.alignfull:not(.eira-bande-hero) > .wp-block-columns,
.wp-block-group.alignfull:not(.eira-bande-hero) > .wp-block-heading,
.wp-block-group.alignfull:not(.eira-bande-hero) > p {
  max-width: var(--eira-max);
  margin-inline: auto;
  padding-inline: var(--eira-gutter);
  box-sizing: border-box;
}

/* Les paragraphes de lecture restent courts, mais alignés à gauche du titre. */
.eira-reveal > p:not(.has-text-align-center):not(.eira-citation) {
  max-width: calc(46em + var(--eira-gutter) * 2);
}

.eira-reveal > .eira-filet,
.eira-reveal > .wp-block-heading {
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}

/* Le sur-titre colle au titre qui suit. */
.eira-reveal > .eira-kicker {
  margin-bottom: .9rem;
}

/* --- Cartes d'information : grille régulière, pictogramme, pas de vide --- */
.eira-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 3rem) !important;
  align-items: start;
}

.eira-cards > .wp-block-column {
  width: auto !important;
  flex-basis: auto !important;
  min-width: 0;
}

.eira-card {
  gap: .35rem;
}

.eira-card__icone {
  display: block;
  margin-bottom: .9rem;
  color: var(--eira-clay);
  line-height: 0;
}

.eira-card__icone svg {
  width: 26px;
  height: 26px;
}

.eira-card h3 {
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem) !important;
  letter-spacing: .02em;
}

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

/* --- Étapes : véritable ligne de temps ---

   La ligne de temps a besoin d'une colonne à gauche : c'est là que passent
   le trait et les pastilles. Cette colonne s'ajoute à la gouttière de page,
   mais celle-ci ne vient pas du même endroit selon la largeur d'écran — sur
   ordinateur, chaque section la porte sur ses enfants ; sur téléphone, c'est
   la section elle-même. D'où la variable : la colonne reste la même, la
   gouttière suit le gabarit en vigueur, et le trait se cale dessus. Sans
   cela, le trait se retrouvait sous les numéros et les pastilles hors cadre. */
.eira-etapes {
  --eira-etapes-colonne: clamp(2.2rem, 4vw, 3.2rem);
  --eira-etapes-gouttiere: var(--eira-gutter);
  position: relative;
  margin-top: clamp(1rem, 2.5vw, 1.8rem);
}

@media (max-width: 900px) {
  .eira-etapes {
    --eira-etapes-gouttiere: 0px;
  }
}

.eira-etapes,
.wp-block-group.alignfull.eira-reveal > .eira-etapes {
  padding-left: calc(var(--eira-etapes-gouttiere) + var(--eira-etapes-colonne));
  padding-right: var(--eira-etapes-gouttiere);
}

.eira-etapes::before,
.eira-etapes::after {
  content: "";
  position: absolute;
  left: calc(var(--eira-etapes-gouttiere) + 6px);
  top: .9rem;
  bottom: .9rem;
  width: 1px;
}

.eira-etapes::before {
  background: color-mix(in srgb, var(--eira-taupe) 50%, transparent);
}

/* Le trait terracotta se remplit au fil du défilement (--eira-progress). */
.eira-etapes::after {
  background: var(--eira-clay);
  transform: scaleY(var(--eira-progress, 0));
  transform-origin: 50% 0;
  transition: transform .25s linear;
}

.eira-etape {
  position: relative;
  padding-left: 0 !important;
  padding-block: clamp(1.1rem, 2.4vw, 1.7rem) !important;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 35%, transparent);
}

.eira-etape:first-child {
  border-top: 0;
}

/* Pastille sur la ligne */
.eira-etape::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(-1 * var(--eira-etapes-colonne, clamp(2.2rem, 4vw, 3.2rem)) + 2px);
  top: clamp(1.5rem, 3vw, 2.1rem);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--eira-clay);
  background: var(--eira-base);
  transition: background-color .5s var(--eira-ease);
}

.eira-etape.is-visible::after,
.is-visible .eira-etape::after {
  background: var(--eira-clay);
}

/* Numéro : petit, en capitales, au-dessus du titre */
.eira-etape::before {
  position: static !important;
  display: block;
  width: auto !important;
  margin-bottom: .35rem;
  font-size: .68rem !important;
  letter-spacing: .28em;
  color: var(--eira-clay) !important;
  background: none !important;
}

.eira-etape h3 {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem) !important;
}

/* --- Citation : centrée --- */
.eira-citation {
  text-align: center;
  max-width: 26ch;
}

.eira-reveal > .eira-kicker + .eira-citation,
.eira-citation + .eira-kicker {
  text-align: center;
}

/* --- Bande photo avec panneau : panneau lisible, jamais rogné --- */
.eira-parallax.wp-block-cover {
  min-height: clamp(22rem, 46vh, 30rem) !important;
}

.eira-bande__panneau {
  max-width: min(100%, 40rem);
  margin-inline: auto;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) !important;
}

.eira-bande__panneau h2 {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem) !important;
  line-height: 1.15;
  color: var(--eira-white);
}

.eira-bande__panneau p {
  color: color-mix(in srgb, var(--eira-base) 88%, transparent);
  font-style: normal;
  margin-top: .8rem;
}

/* --- Grille de robes : de l'air sur les côtés --- */
.eira-robes-grille {
  max-width: var(--eira-max);
  margin-inline: auto;
  padding-inline: var(--eira-gutter);
  box-sizing: border-box;
}

/* --- FAQ et listes : même gabarit --- */
.eira-faq {
  max-width: var(--eira-max);
  margin-inline: auto;
  padding-inline: var(--eira-gutter);
  box-sizing: border-box;
}

/* --- Bande photo : la photo bouge dans un cadre fixe, le panneau ne sort
       jamais de la bande. --- */
.eira-parallax.wp-block-cover {
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
  align-items: center;
}

.eira-parallax .wp-block-cover__image-background {
  height: 118% !important;
  top: -9% !important;
  will-change: transform;
}

.eira-parallax .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* Le sous-titre du panneau doit rester lisible : jamais coupé, jamais pâle. */
.eira-bande__panneau .eira-section-sub,
.eira-bande__panneau p {
  color: color-mix(in srgb, var(--eira-base) 92%, transparent) !important;
  font-family: var(--eira-font-body);
  font-style: normal;
  font-size: .95rem;
  line-height: 1.7;
  max-width: 34em;
  margin-inline: auto;
}

/* --- Filet des titres : aligné sur le texte, pas sur le bord du bloc.
       (Les sections ont une marge latérale : sans ce décalage, le filet
       partait à gauche du titre.) --- */
.wp-block-group.alignfull .eira-filet::after,
.entry-content .eira-filet::after {
  left: var(--eira-gutter);
}

.wp-block-group.alignfull .has-text-align-center.eira-filet::after,
.entry-content .has-text-align-center.eira-filet::after {
  left: 50%;
  transform: translateX(-50%);
}

/* =========================================================================
   FAQ — colonne centrée, rubriques annoncées par un intertitre
   (La version en deux colonnes collantes a été abandonnée : les titres de
   rubriques se superposaient d'un groupe à l'autre.)
   ========================================================================= */
.wp-block-group.alignfull:has(> .eira-faq) {
  max-width: var(--eira-max);
  margin-inline: auto;
  padding-inline: var(--eira-gutter);
  box-sizing: border-box;
}

/* Intertitre de rubrique : centré, encadré de deux filets. */
.wp-block-group.alignfull:has(> .eira-faq) > .wp-block-heading {
  max-width: 46rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto clamp(1.2rem, 2.5vw, 1.8rem);
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--eira-font-body);
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--eira-clay);
}

.wp-block-group.alignfull:has(> .eira-faq) > .wp-block-heading::before,
.wp-block-group.alignfull:has(> .eira-faq) > .wp-block-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.wp-block-group.alignfull:has(> .eira-faq) > .wp-block-heading:first-child {
  margin-top: 0;
}

.eira-faq {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 0;
}

/* --- Lignes de questions --- */
.eira-faq .wp-block-details {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
  transition: border-color .4s var(--eira-ease);
}

.eira-faq .wp-block-details:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.eira-faq .wp-block-details[open] {
  border-top-color: var(--eira-clay);
}

.eira-faq .wp-block-details summary {
  font-family: var(--eira-font-display);
  font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .01em;
  padding: clamp(1rem, 2.2vw, 1.5rem) 2.6rem clamp(1rem, 2.2vw, 1.5rem) 0;
}

.eira-faq .wp-block-details[open] summary {
  color: var(--eira-clay-dark);
}

/* Le + pivote en croix à l'ouverture. */
.eira-faq .wp-block-details summary::after {
  content: "" !important;
  right: .3rem;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--eira-clay), var(--eira-clay)) center/13px 1px no-repeat,
    linear-gradient(var(--eira-clay), var(--eira-clay)) center/1px 13px no-repeat;
  transition: transform .45s var(--eira-ease-out);
}

.eira-faq .wp-block-details[open] summary::after {
  transform: translateY(-50%) rotate(135deg);
}

.eira-faq .wp-block-details p {
  font-size: .95rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--eira-text) 76%, transparent);
  max-width: 42em;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

html.eira-anim .eira-faq .wp-block-details[open] p {
  animation: eira-faq-ouvre .5s var(--eira-ease-out) both;
}

@keyframes eira-faq-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Les lignes d'informations du showroom : un seul filet par ligne.
   (L'ancienne règle de la maquette ajoutait un filet bas, qui se
   superposait au filet haut des nouvelles lignes.) */
.eira-showroom__list .eira-showroom__ligne {
  border-bottom: 0;
}

.eira-showroom__list .eira-showroom__ligne:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.eira-showroom__list {
  gap: 0 !important;
}

/* =========================================================================
   EN-TÊTE PLEINE LARGEUR
   La barre reste pleine largeur et collée en haut du site. Au défilement,
   le fond se densifie légèrement et le logo se resserre : la navigation
   reste lisible sans jamais masquer la photo.
   ========================================================================= */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 120;
}

.eira-header {
  position: relative;
  background: color-mix(in srgb, var(--eira-base) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 38%, transparent);
  transition: background-color .45s var(--eira-ease), box-shadow .45s var(--eira-ease),
              padding .45s var(--eira-ease), border-color .45s var(--eira-ease);
}

/* Au défilement : fond plus dense, filet plus net, ombre discrète. */
.eira-header.is-stuck {
  background: color-mix(in srgb, var(--eira-base) 96%, transparent);
  border-bottom-color: color-mix(in srgb, var(--eira-taupe) 55%, transparent);
  box-shadow: 0 16px 34px -30px color-mix(in srgb, var(--eira-text) 70%, transparent);
}

.eira-header .wp-block-site-logo img {
  transition: max-height .45s var(--eira-ease);
}

@media (min-width: 901px) {
  .eira-header .wp-block-site-logo img {
    max-height: 46px;
  }

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

/* =========================================================================
   SECTION D'OUVERTURE PLEIN ÉCRAN (vidéo)
   Vidéo verticale en fond, cadrée haut pour garder la silhouette visible,
   voile dégradé pour la lisibilité, titre et boutons au centre bas.
   ========================================================================= */
.eira-cine {
  position: relative;
  /* Hauteur d'écran moins la barre de menu : la section tient d'un seul
     regard, boutons compris, sans faire défiler pour les découvrir. */
  min-height: calc(100vh - var(--eira-header-h, 74px));
  min-height: calc(100svh - var(--eira-header-h, 74px));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--eira-text);
  padding-block: clamp(2.5rem, 7vh, 5rem) !important;
  isolation: isolate;
}

.eira-cine .wp-block-video,
.eira-cine__video {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.eira-cine .wp-block-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Voile : sombre en bas pour le texte, léger en haut pour la barre de menu. */
.eira-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--eira-text) 90%, transparent) 0%,
      color-mix(in srgb, var(--eira-text) 68%, transparent) 26%,
      color-mix(in srgb, var(--eira-text) 30%, transparent) 55%,
      color-mix(in srgb, var(--eira-text) 6%, transparent) 78%,
      color-mix(in srgb, var(--eira-text) 26%, transparent) 100%);
}

.eira-cine__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.eira-cine__panneau {
  max-width: 34rem;
}

.eira-cine__eyebrow {
  color: var(--eira-beige) !important;
  margin-bottom: 1.1rem;
}

.eira-cine__titre {
  font-family: var(--eira-font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem) !important;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--eira-white);
  margin: 0;
}

.eira-cine__titre em {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  color: var(--eira-beige);
}

.eira-cine__lead {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height: 1.75;
  color: color-mix(in srgb, var(--eira-base) 88%, transparent);
  max-width: 32em;
}

.eira-cine__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

.eira-cine__actions .wp-block-button.eira-btn--ghost > .wp-block-button__link {
  --btn-fg: var(--eira-white);
  --btn-bd: color-mix(in srgb, var(--eira-white) 55%, transparent);
}

.eira-cine__actions .wp-block-button.eira-btn--ghost > .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--eira-white) 12%, transparent);
  border-color: var(--eira-white);
  color: var(--eira-white);
}

/* Invitation à défiler */
.eira-cine__cue {
  position: absolute;
  z-index: 2;
  right: var(--eira-gutter);
  bottom: clamp(1.6rem, 4vh, 2.6rem);
  margin: 0;
  padding-right: 2.4rem;
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eira-base) 75%, transparent);
}

.eira-cine__cue::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background: color-mix(in srgb, var(--eira-base) 60%, transparent);
  transform-origin: right center;
  animation: eira-cue 2.6s var(--eira-ease) infinite;
}

@keyframes eira-cue {
  0%, 100% { transform: scaleX(.4); opacity: .5; }
  50%      { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eira-cine__cue::after { animation: none; transform: none; }
}

@media (max-width: 700px) {
  .eira-cine {
    /* Place laissée au bouton flottant « Réserver un essayage ». */
    padding-bottom: 5.5rem !important;
  }

  .eira-cine__eyebrow {
    font-size: .6rem;
    letter-spacing: .2em;
  }

  .eira-cine__lead {
    font-size: .92rem;
    line-height: 1.65;
  }

  .eira-cine__cue {
    display: none;
  }

  .eira-cine__actions .wp-block-button {
    width: 100%;
  }

  .eira-cine__actions .wp-block-button > .wp-block-button__link {
    display: block;
    text-align: center;
  }
}

/* =========================================================================
   MARGES LATÉRALES SUR TÉLÉPHONE (pages intérieures)
   Sur petit écran, la marge est portée par la section elle-même : tout ce
   qu'elle contient — titres, paragraphes, cartes, listes, accordéons —
   respire de la même façon, quelle que soit la profondeur des blocs.
   ========================================================================= */
@media (max-width: 900px) {
  body:not(.eira-page-accueil) .wp-site-blocks main .wp-block-group.alignfull:not(.eira-bande-hero):not(.eira-parallax):not(.eira-marquee) {
    padding-inline: clamp(1.25rem, 5vw, 2rem);
  }

  /* La marge n'est plus portée par les enfants : sinon elle compterait double.
     La ligne de temps est exclue : sa gouttière gauche n'est pas une marge
     de lecture, c'est la colonne où passent le trait et les pastilles. Sans
     elle, le trait se retrouvait sous les numéros et les pastilles hors du
     cadre. */
  body:not(.eira-page-accueil) .wp-block-group.alignfull.eira-reveal > *:not(.eira-etapes),
  body:not(.eira-page-accueil) .wp-block-group.alignfull:not(.eira-bande-hero) > .wp-block-columns,
  body:not(.eira-page-accueil) .wp-block-group.alignfull:not(.eira-bande-hero) > .wp-block-heading,
  body:not(.eira-page-accueil) .wp-block-group.alignfull:not(.eira-bande-hero) > p {
    padding-inline: 0;
  }
}

/* =========================================================================
   INFOS PRATIQUES — [eira_infos_pratiques]
   Même écriture que le bloc « Un showroom privé » de l'accueil : intitulé
   en petites capitales terracotta, valeur en regard, filet fin entre les
   lignes. Plus de puces : la liste devient un tableau de repères.
   ========================================================================= */
.eira-infos {
  display: grid;
  gap: 0;
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  padding: 0;
}

.eira-infos__ligne {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: .4rem 1.5rem;
  align-items: baseline;
  padding-block: .8rem;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.eira-infos__ligne:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
}

.eira-infos__terme {
  margin: 0;
  font-family: var(--eira-font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eira-clay);
}

.eira-infos__valeur {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--eira-text) 82%, transparent);
}

/* La mention sur l'adresse devient une note éditoriale, pas un paragraphe
   de plus : italique Bodoni, comme les autres apartés du site. */
.eira-infos + p {
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
  font-family: var(--eira-font-editorial);
  font-style: italic;
  font-size: .95rem !important;
  line-height: 1.7;
  color: color-mix(in srgb, var(--eira-text) 65%, transparent);
  max-width: 34em;
}

@media (max-width: 600px) {
  .eira-infos__ligne {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
}

/* =========================================================================
   MODULE DE RÉSERVATION (FluentBooking)
   Le calendrier est un composant du plugin : on ne touche pas à son
   fonctionnement, on remplace seulement sa peau par celle du site — palette
   du thème, angles droits, filets fins, capitales espacées.
   Tout est cadré sous .fcal_cal_wrap pour ne rien déborder ailleurs.
   ========================================================================= */
.fcal_cal_wrap {
  /* Les variables du plugin pointent vers la palette EIRA : si la cliente
     change la palette dans l'éditeur, le calendrier suit. */
  --fcal_primary_color: var(--eira-clay);
  --fcal_dark: var(--eira-text);
  --fcal_body_bg: transparent;
  --fcal_cal_bg: var(--eira-white);
  --fcal_slot_border: color-mix(in srgb, var(--eira-taupe) 45%, transparent);
  --fcal_thBG: var(--eira-sand);
  font-family: var(--eira-font-body);
  color: var(--eira-text);
}

/* Le cadre blanc arrondi du plugin disparaît : la page fournit déjà le sien. */
.fcal_cal_wrap .fcal_calendar_inner,
.fcal_cal_wrap .fcal_booking_inner,
.fcal_cal_wrap .fluent_booking_app {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.fcal_cal_wrap .fcal_side {
  background: transparent !important;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem) 0 0 !important;
}

/* Filet de séparation entre la présentation et le calendrier. */
@media (min-width: 820px) {
  .fcal_cal_wrap .fcal_side {
    border-right: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
  }

  .fcal_cal_wrap .fcal_day_picker,
  .fcal_cal_wrap .fcal_slot_picker {
    padding-left: clamp(1.5rem, 3vw, 2.5rem) !important;
  }
}

/* --- Colonne de gauche : hôte, titre, repères --- */
.fcal_cal_wrap .fcal_author_avatar {
  display: none;
}

.fcal_cal_wrap .fcal_author_name {
  font-size: .68rem !important;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eira-clay) !important;
}

.fcal_cal_wrap .fcal_slot_heading {
  font-family: var(--eira-font-display);
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.95rem) !important;
  font-weight: 400 !important;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: .5rem 0 1rem !important;
  color: var(--eira-text) !important;
}

.fcal_cal_wrap .fcal_slot_info .fcal_icon_item,
.fcal_cal_wrap .fcal_duration_title,
.fcal_cal_wrap .fcal_loc_text {
  font-size: .8rem !important;
  color: color-mix(in srgb, var(--eira-text) 72%, transparent) !important;
}

.fcal_cal_wrap .fcal_slot_description {
  margin-top: 1.1rem;
  font-size: .92rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--eira-text) 78%, transparent);
}

.fcal_cal_wrap .fcal_slot_description p {
  margin: 0 0 .8rem;
}

/* --- En-tête du calendrier : mois en Playfair, année en Bodoni italique --- */
.fcal_cal_wrap .calendar-month-year h2 {
  font-family: var(--eira-font-display);
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  color: var(--eira-text) !important;
}

.fcal_cal_wrap .calendar-month-year h2 span {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  color: var(--eira-clay);
}

.fcal_cal_wrap .calendar_nav button {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--eira-clay) !important;
  transition: background-color .35s var(--eira-ease), color .35s var(--eira-ease),
              border-color .35s var(--eira-ease);
}

.fcal_cal_wrap .calendar_nav button svg {
  width: 11px;
  height: 11px;
}

.fcal_cal_wrap .calendar_nav button.fcal_nav_active:hover {
  background: var(--eira-clay) !important;
  border-color: var(--eira-clay) !important;
  color: var(--eira-white) !important;
}

.fcal_cal_wrap .calendar_nav button.fcal_btn_disabled {
  opacity: .35;
}

/* --- Jours de la semaine --- */
.fcal_cal_wrap .calendar .day-name {
  font-size: .62rem !important;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eira-taupe) !important;
}

/* --- Cases des jours : la pastille est le span intérieur --- */
.fcal_cal_wrap .calendar .day > span {
  border-radius: 0 !important;
  border: 1px solid transparent;
  font-family: var(--eira-font-body);
  font-size: .82rem !important;
  font-weight: 500;
  letter-spacing: .03em;
  transition: background-color .3s var(--eira-ease), color .3s var(--eira-ease),
              border-color .3s var(--eira-ease);
}

.fcal_cal_wrap .calendar .day-enabled > span {
  background: var(--eira-sand) !important;
  color: var(--eira-text) !important;
}

.fcal_cal_wrap .calendar .day-enabled:not(.day_is_selected):hover > span {
  background: color-mix(in srgb, var(--eira-clay) 14%, var(--eira-base)) !important;
  border-color: var(--eira-clay);
  color: var(--eira-clay-dark) !important;
}

.fcal_cal_wrap .calendar .day-disabled > span {
  background: transparent !important;
  color: color-mix(in srgb, var(--eira-taupe) 85%, transparent) !important;
}

.fcal_cal_wrap .calendar .day_is_selected > span,
.fcal_cal_wrap .calendar .day-selected > span,
.fcal_cal_wrap .calendar .day.selected > span,
.fcal_cal_wrap .calendar .day-active > span {
  background: var(--eira-clay) !important;
  border-color: var(--eira-clay);
  color: var(--eira-white) !important;
}

/* Le repère « aujourd'hui » passe en terracotta. */
.fcal_cal_wrap .calendar .is-today,
.fcal_cal_wrap .calendar .day.is-today > span::after {
  background: var(--eira-clay) !important;
  color: var(--eira-clay) !important;
}

/* --- Fuseau horaire --- */
.fcal_cal_wrap .fcal_timezone_selector,
.fcal_cal_wrap .svelte-select {
  --border-radius: 0;
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  background: var(--eira-white) !important;
  font-size: .85rem !important;
}

.fcal_cal_wrap .fcal_timezone_select > label,
.fcal_cal_wrap .fcal_timezone_selector .selected-item {
  font-size: .85rem !important;
  color: var(--eira-text) !important;
}

.fcal_cal_wrap .fcal_timezone_select > label,
.fcal_cal_wrap h3 {
  font-family: var(--eira-font-body);
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eira-clay) !important;
}

/* --- Créneaux horaires (deuxième étape) --- */
.fcal_cal_wrap .fcal_slot_items button,
.fcal_cal_wrap .fcal_slot_items a,
.fcal_cal_wrap .fcal_spot_lists button,
.fcal_cal_wrap .fcal_spot_lists a {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  background: transparent !important;
  color: var(--eira-text) !important;
  font-family: var(--eira-font-body);
  font-size: .78rem !important;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .35s var(--eira-ease), color .35s var(--eira-ease),
              border-color .35s var(--eira-ease);
}

.fcal_cal_wrap .fcal_slot_items button:hover,
.fcal_cal_wrap .fcal_slot_items a:hover,
.fcal_cal_wrap .fcal_spot_lists button:hover,
.fcal_cal_wrap .fcal_spot_lists a:hover {
  background: var(--eira-clay) !important;
  border-color: var(--eira-clay) !important;
  color: var(--eira-white) !important;
}

/* --- Formulaire (troisième étape) --- */
.fcal_cal_wrap .fcal_form_item label {
  font-size: .68rem !important;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eira-clay) !important;
}

.fcal_cal_wrap .fcal_form_item .fcal_input,
.fcal_cal_wrap textarea,
.fcal_cal_wrap input[type="text"],
.fcal_cal_wrap input[type="email"],
.fcal_cal_wrap input[type="tel"] {
  border-radius: 0 !important;
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  background: var(--eira-white) !important;
  font-family: var(--eira-font-body);
  font-size: .92rem !important;
  color: var(--eira-text) !important;
}

.fcal_cal_wrap .fcal_form_item .fcal_input:focus,
.fcal_cal_wrap textarea:focus {
  outline: none;
  border-color: var(--eira-clay) !important;
}

.fcal_cal_wrap .fcal_btn_submit,
.fcal_cal_wrap button[type="submit"] {
  border-radius: 0 !important;
  border: 1px solid var(--eira-clay) !important;
  background: var(--eira-clay) !important;
  color: var(--eira-white) !important;
  font-family: var(--eira-font-body);
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 1.05em 2.2em !important;
  line-height: 1 !important;
  transition: background-color .35s var(--eira-ease), border-color .35s var(--eira-ease);
}

.fcal_cal_wrap .fcal_btn_submit:hover,
.fcal_cal_wrap button[type="submit"]:hover {
  background: var(--eira-clay-dark) !important;
  border-color: var(--eira-clay-dark) !important;
}

.fcal_cal_wrap .fcal_back a,
.fcal_cal_wrap .fcal_powered_by,
.fcal_cal_wrap .fcal_powered_by a {
  color: var(--eira-clay) !important;
  font-size: .72rem !important;
}

/* --- Téléphone : les deux colonnes s'empilent --- */
@media (max-width: 819px) {
  .fcal_cal_wrap .fcal_side {
    padding: 0 0 1.5rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
    margin-bottom: 1.5rem;
  }

  .fcal_cal_wrap .calendar .day > span {
    font-size: .78rem !important;
  }
}

/* Renforcement : le plugin injecte sa feuille après celle du thème et
   utilise « !important ». Ces trois règles reprennent la main. */
body .fcal_cal_wrap .calendar-month-year h2 span {
  color: var(--eira-clay) !important;
}

body .fcal_cal_wrap .fcal_timezone_selector,
body .fcal_cal_wrap .fcal_timezone_selector.svelte-select,
body .fcal_cal_wrap .svelte-select {
  border-radius: 0 !important;
}

body .fcal_cal_wrap .calendar_nav button {
  width: 34px !important;
  height: 34px !important;
}


/* --- Correctifs : texte de gauche et menu déroulant des fuseaux ---------- */

/* Le texte de présentation doit rester plus discret que les titres :
   le plugin impose 16 px, on revient à l'échelle du site. */
body .fcal_cal_wrap .fcal_slot_description,
body .fcal_cal_wrap .fcal_slot_description p,
body .fcal_cal_wrap .fcal_slot_description div {
  font-size: .9rem !important;
  line-height: 1.72 !important;
  color: color-mix(in srgb, var(--eira-text) 78%, transparent) !important;
}

body .fcal_cal_wrap .fcal_slot_heading {
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.65rem) !important;
  line-height: 1.2 !important;
}

/* Menu déroulant (fuseau horaire) : il flotte au-dessus du calendrier, il lui
   faut donc un fond opaque, un filet, une ombre et une hauteur limitée. */
body .fcal_cal_wrap .svelte-select-list,
body .fcal_cal_wrap [class*="svelte-select-list"],
body .fcal_cal_wrap .listContainer {
  background: var(--eira-white) !important;
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 46px -28px color-mix(in srgb, var(--eira-text) 60%, transparent) !important;
  max-height: 15rem !important;
  overflow-y: auto !important;
  z-index: 60 !important;
}

body .fcal_cal_wrap .svelte-select-list .list-item,
body .fcal_cal_wrap .svelte-select-list .item,
body .fcal_cal_wrap [class*="svelte-select-list"] .item {
  padding: .55rem .9rem !important;
  font-size: .85rem !important;
  line-height: 1.4 !important;
  background: transparent !important;
  color: var(--eira-text) !important;
}

body .fcal_cal_wrap .svelte-select-list .item.hover,
body .fcal_cal_wrap .svelte-select-list .item.active,
body .fcal_cal_wrap .svelte-select-list .list-item:hover,
body .fcal_cal_wrap [class*="svelte-select-list"] .item.hover,
body .fcal_cal_wrap [class*="svelte-select-list"] .item.active {
  background: var(--eira-clay) !important;
  color: var(--eira-white) !important;
}

/* Bascule 12 h / 24 h au-dessus des créneaux. */
body .fcal_cal_wrap .fcal_slot_picker_header_action {
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden;
}

body .fcal_cal_wrap .fcal_slot_picker_header_action button,
body .fcal_cal_wrap .fcal_slot_picker_header_action span {
  border-radius: 0 !important;
  font-family: var(--eira-font-body);
  font-size: .7rem !important;
  font-weight: 500;
  letter-spacing: .1em;
}

body .fcal_cal_wrap .fcal_slot_picker_header_action button.active,
body .fcal_cal_wrap .fcal_slot_picker_header_action .active {
  background: var(--eira-clay) !important;
  color: var(--eira-white) !important;
}

/* Date sélectionnée au-dessus des créneaux : même écriture que les titres. */
body .fcal_cal_wrap .fcal_slot_date_info,
body .fcal_cal_wrap .fcal_slot_picker_header > div:first-child {
  font-family: var(--eira-font-body);
  font-size: .8rem !important;
  letter-spacing: .04em;
  color: var(--eira-text) !important;
}

/* --- Correctifs : champ fuseau horaire et lignes de créneaux ------------- */

/* Le champ de recherche du sélecteur est posé PAR-DESSUS la valeur affichée :
   il doit rester transparent, sinon il masque « Europe/Paris ». */
body .fcal_cal_wrap .fcal_timezone_selector input,
body .fcal_cal_wrap .svelte-select input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

body .fcal_cal_wrap .fcal_timezone_selector .selected-item {
  position: relative;
  z-index: 1;
}

/* Une seule ligne, un seul filet : le cadre est porté par la ligne, les
   boutons qu'elle contient n'en ont plus. */
body .fcal_cal_wrap .fcal_spot {
  display: flex;
  align-items: stretch;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 50%, transparent) !important;
  border-radius: 0 !important;
  transition: border-color .35s var(--eira-ease);
}

body .fcal_cal_wrap .fcal_spot:hover {
  border-color: var(--eira-clay) !important;
}

/* L'heure : pas de capitales, elle se lit mieux telle quelle. */
body .fcal_cal_wrap .fcal_spot .fcal_spot_name {
  flex: 1 1 auto;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: .9rem 1rem !important;
  font-family: var(--eira-font-body);
  font-size: .82rem !important;
  font-weight: 500;
  letter-spacing: .06em !important;
  text-transform: none !important;
  color: var(--eira-text) !important;
}

/* Le bouton de validation qui apparaît au survol : compact, terracotta,
   séparé de l'heure par un simple filet. */
body .fcal_cal_wrap .fcal_spot .fcal_spot_confirm,
body .fcal_cal_wrap .fcal_spot > button + button,
body .fcal_cal_wrap .fcal_spot > button + a {
  flex: 0 0 auto;
  border: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--eira-white) 35%, transparent) !important;
  border-radius: 0 !important;
  background: var(--eira-clay) !important;
  color: var(--eira-white) !important;
  padding: .9rem 1.3rem !important;
  font-family: var(--eira-font-body);
  font-size: .66rem !important;
  font-weight: 600;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
}

body .fcal_cal_wrap .fcal_spot .fcal_spot_confirm:hover,
body .fcal_cal_wrap .fcal_spot > button + button:hover {
  background: var(--eira-clay-dark) !important;
}

/* --- Affinage : liste déroulante plus fine, jours ouverts plus engageants -- */

/* La liste : lignes basses, alignées d'un bord à l'autre. */
body .fcal_cal_wrap .svelte-select-list,
body .fcal_cal_wrap [class*="svelte-select-list"] {
  padding: .25rem 0 !important;
}

body .fcal_cal_wrap .svelte-select-list .item,
body .fcal_cal_wrap .svelte-select-list .list-item,
body .fcal_cal_wrap [class*="svelte-select-list"] .item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .4rem .9rem !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

/* Les jours ouverts ne doivent pas ressembher à des cases « complet » :
   un voile terracotta très clair et un filet fin, plutôt qu'un bloc plein.
   Le sable est réservé aux fonds de section. */
body .fcal_cal_wrap .calendar .day-enabled > span {
  background: color-mix(in srgb, var(--eira-clay) 7%, var(--eira-white)) !important;
  border-color: color-mix(in srgb, var(--eira-clay) 30%, transparent) !important;
  color: var(--eira-clay-dark) !important;
}

body .fcal_cal_wrap .calendar .day-enabled:not(.day_is_selected):hover > span {
  background: color-mix(in srgb, var(--eira-clay) 16%, var(--eira-white)) !important;
  border-color: var(--eira-clay) !important;
  color: var(--eira-clay-dark) !important;
}

body .fcal_cal_wrap .calendar .day_is_selected > span {
  background: var(--eira-clay) !important;
  border-color: var(--eira-clay) !important;
  color: var(--eira-white) !important;
}


/* ============================================================
   FORMULAIRE DE CONTACT (Fluent Forms)
   Le plugin livre une feuille générique (champs arrondis, bleu,
   bouton plein). On la ramène dans la charte : filets sable,
   libellés en petites capitales, terracotta sur le focus.
   La classe .eira-form est posée par le réglage
   « Classe CSS » du formulaire (Réglages > Mise en page).
   ============================================================ */

.fluentform {
  --eira-form-line: color-mix(in srgb, var(--eira-taupe) 55%, transparent);
}

.fluentform .ff-el-group {
  margin-bottom: 1.35rem;
}

/* Libellés */
.fluentform .ff-el-input--label label {
  font-family: var(--eira-font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eira-text) 72%, transparent);
  margin-bottom: .5rem;
}

.fluentform .ff-el-input--label.ff-el-is-required label:after,
.fluentform .ff-el-input--label label .ff-el-is-required {
  color: var(--eira-clay);
}

/* Champs */
.fluentform .ff-el-form-control {
  font-family: var(--eira-font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--eira-text);
  background: var(--eira-white);
  border: 1px solid var(--eira-form-line);
  border-radius: 0;
  box-shadow: none;
  padding: .82rem .95rem;
  transition: border-color .35s var(--eira-ease), background .35s var(--eira-ease);
}

.fluentform .ff-el-form-control::placeholder {
  color: color-mix(in srgb, var(--eira-text) 42%, transparent);
}

.fluentform .ff-el-form-control:focus {
  border-color: var(--eira-clay);
  background: var(--eira-white);
  box-shadow: none;
  outline: none;
}

.fluentform textarea.ff-el-form-control {
  min-height: 9.5rem;
  resize: vertical;
}

/* Liste déroulante : on remplace la flèche du navigateur */
.fluentform select.ff-el-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--eira-clay) 50%),
                    linear-gradient(135deg, var(--eira-clay) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - .85rem) 1.25rem;
  background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

/* Prénom / nom côte à côte */
.fluentform .ff-t-container {
  gap: 1rem;
}

/* Consentement RGPD */
.fluentform .ff-el-form-check {
  margin-bottom: 0;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check label {
  font-size: .82rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--eira-text) 80%, transparent);
}

.fluentform .ff-el-form-check input[type="checkbox"] {
  accent-color: var(--eira-clay);
  width: 1rem;
  height: 1rem;
  margin-top: .18rem;
}

.fluentform .ff-el-form-check a {
  color: var(--eira-clay-dark);
  text-underline-offset: .22em;
}

/* Aide et erreurs */
.fluentform .ff-el-help-message {
  font-size: .78rem;
  color: color-mix(in srgb, var(--eira-text) 60%, transparent);
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--eira-clay-dark);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
  font-size: .78rem;
  color: var(--eira-clay-dark);
}

/* Bouton d'envoi : même dessin que les boutons du site */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper button {
  font-family: var(--eira-font-body);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eira-white);
  background: var(--eira-clay);
  border: 1px solid var(--eira-clay);
  border-radius: 0;
  box-shadow: none;
  padding: 1.05rem 2.35rem;
  cursor: pointer;
  transition: background .45s var(--eira-ease), border-color .45s var(--eira-ease);
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_submit_btn_wrapper button:hover {
  background: var(--eira-clay-dark);
  border-color: var(--eira-clay-dark);
  color: var(--eira-white);
}

.fluentform .ff-btn-submit:focus-visible {
  outline: 2px solid var(--eira-clay-dark);
  outline-offset: 3px;
}

/* Message de confirmation */
.fluentform .ff-message-success,
.fluentform_wrapper_form .ff-message-success {
  font-family: var(--eira-font-editorial);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--eira-text);
  background: color-mix(in srgb, var(--eira-clay) 7%, var(--eira-white));
  border: 1px solid color-mix(in srgb, var(--eira-clay) 30%, transparent);
  border-radius: 0;
  padding: 1.5rem 1.6rem;
}

.fluentform .ff-message-success p:last-child {
  margin-bottom: 0;
}


/* --- Tout nouveau formulaire hérite de la charte ------------------------- */

/* Fluent Forms 6 pilote ses couleurs par variables : les redéfinir ici suffit
   pour que les cases à cocher, boutons radio, sélecteurs de date, info-bulles
   et messages d'erreur d'un formulaire créé plus tard soient déjà en charte,
   sans une ligne de CSS à ajouter. */
.fluentform {
  --fluentform-primary: var(--eira-clay);
  --fluentform-secondary: color-mix(in srgb, var(--eira-text) 62%, transparent);
  --fluentform-danger: var(--eira-clay-dark);
  --fluentform-border-color: color-mix(in srgb, var(--eira-taupe) 55%, transparent);
  --fluentform-border-radius: 0px;
}

/* Le plugin écrit la couleur du bouton formulaire par formulaire, dans une
   balise <style> injectée après la feuille du thème
   (« form.fluent_form_1 .ff-btn-submit »). Sans ce sélecteur plus précis, un
   nouveau formulaire repartirait avec le bleu par défaut. */
body .fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style),
body .fluentform form.frm-fluent-form .ff_submit_btn_wrapper button:not(.ff_btn_no_style) {
  background-color: var(--eira-clay);
  border-color: var(--eira-clay);
  color: var(--eira-white);
}

body .fluentform form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
body .fluentform form.frm-fluent-form .ff_submit_btn_wrapper button:not(.ff_btn_no_style):hover {
  background-color: var(--eira-clay-dark);
  border-color: var(--eira-clay-dark);
  color: var(--eira-white);
}

/* Types de champs non utilisés par le formulaire de contact, mais probables
   dans un futur formulaire (questionnaire mariée, demande de devis…). */
.fluentform .ff-el-form-check + .ff-el-form-check {
  margin-top: .5rem;
}

.fluentform .ff-el-group .ff-el-form-check-label {
  padding-left: .15rem;
}

.fluentform input[type="radio"],
.fluentform .ff-el-form-check input[type="radio"] {
  accent-color: var(--eira-clay);
}

.fluentform .ff_upload_btn.ff-btn {
  font-family: var(--eira-font-body);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--eira-taupe);
  border-radius: 0;
  color: var(--eira-text);
}

.fluentform .ff_upload_btn.ff-btn:hover {
  background-color: var(--eira-sand);
  border-color: var(--eira-clay);
  color: var(--eira-clay-dark);
}

.fluentform .ff-el-section-break {
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
  padding-top: 1.6rem;
  margin-top: .6rem;
}

.fluentform .ff-el-section-break h3,
.fluentform .ff-el-section-break .ff-el-section-title {
  font-family: var(--eira-font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--eira-text);
}

/* Formulaire en plusieurs étapes : barre de progression en terracotta */
.fluentform .ff-el-progress-bar {
  background: var(--eira-clay);
  border-radius: 0;
}

.fluentform .ff-el-progress {
  background: var(--eira-sand);
  border-radius: 0;
}


/* ============================================================
   SECTION NEWSLETTER (accueil) + formulaire Brevo
   Le plugin Brevo laisse le thème habiller son formulaire quand
   l'option « dépend du thème » est active — c'est le réglage à
   garder, sinon il injecte sa propre feuille par-dessus.
   ============================================================ */

/* Fond argile — la couleur du bouton « Réserver ». La section précédente
   (showroom) et la suivante (étapes) sont deux ivoires très proches :
   sans rupture franche, la newsletter se lisait comme la suite du
   showroom. L'argile la détache et lui donne le poids d'un appel à
   l'action, dans la même couleur que les boutons du site. */
.eira-news {
  background: var(--eira-clay);
  color: var(--eira-base);
  text-align: center;
}

.eira-news .eira-eyebrow {
  color: color-mix(in srgb, var(--eira-base) 88%, transparent);
}

.eira-news .eira-h2,
.eira-news .eira-h2 em,
.eira-news .eira-h2 i {
  color: var(--eira-base);
}

.eira-news .eira-lead {
  color: color-mix(in srgb, var(--eira-base) 92%, transparent);
}

.eira-news .eira-underline::after {
  background: color-mix(in srgb, var(--eira-base) 70%, transparent);
}

.eira-news__inner {
  max-width: 44rem;
}

.eira-news .eira-lead {
  margin-inline: auto;
  max-width: 34rem;
}

.eira-news__note {
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--eira-base) 74%, transparent);
}

.eira-news__attente {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--eira-base);
  background: color-mix(in srgb, var(--eira-base) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--eira-base) 45%, transparent);
}

/* --- Formulaire Brevo : une ligne, champ + bouton --- */

.eira-news form.sib_signup_form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: .7rem;
  margin-top: 2rem;
}

.eira-news form.sib_signup_form p {
  margin: 0;
  flex: 1 1 18rem;
  max-width: 24rem;
}

/* Les intitulés du plugin sont en anglais et redondants avec le
   texte de la section : le champ porte son propre placeholder. */
.eira-news form.sib_signup_form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Prénom et nom masqués : une seule demande, une seule friction.
   Décommenter côté Brevo si tu veux personnaliser tes envois. */
.eira-news form.sib_signup_form .sib-FIRSTNAME-area,
.eira-news form.sib_signup_form .sib-LASTNAME-area {
  display: none;
}

.eira-news form.sib_signup_form input[type="email"],
.eira-news form.sib_signup_form input[type="text"] {
  width: 100%;
  font-family: var(--eira-font-body);
  font-size: .95rem;
  color: var(--eira-text);
  background: var(--eira-white);
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 55%, transparent);
  border-radius: 0;
  padding: .95rem 1.1rem;
  transition: border-color .35s var(--eira-ease);
}

.eira-news form.sib_signup_form input[type="email"]::placeholder {
  color: color-mix(in srgb, var(--eira-text) 42%, transparent);
}

.eira-news form.sib_signup_form input[type="email"]:focus,
.eira-news form.sib_signup_form input[type="text"]:focus {
  border-color: var(--eira-clay);
  outline: none;
}

.eira-news form.sib_signup_form .sib-default-btn,
.eira-news form.sib_signup_form input[type="submit"] {
  flex: 0 0 auto;
  font-family: var(--eira-font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Le fond de la section est déjà argile : un bouton argile
     disparaîtrait. Il passe donc en brun profond. */
  color: var(--eira-base);
  background: var(--eira-text);
  border: 1px solid var(--eira-text);
  border-radius: 0;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background .45s var(--eira-ease), border-color .45s var(--eira-ease);
}

.eira-news form.sib_signup_form .sib-default-btn:hover,
.eira-news form.sib_signup_form input[type="submit"]:hover {
  background: var(--eira-brown-soft);
  border-color: var(--eira-brown-soft);
}

/* Message de confirmation ou d'erreur renvoyé par Brevo */
.eira-news .sib_msg_disp {
  flex: 1 1 100%;
  order: 3;
  margin-top: .2rem;
  font-family: var(--eira-font-editorial);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--eira-base);
}

.eira-news .sib_loader {
  flex: 1 1 100%;
  order: 4;
}

@media (max-width: 599px) {
  .eira-news form.sib_signup_form {
    gap: .6rem;
  }

  .eira-news form.sib_signup_form p,
  .eira-news form.sib_signup_form .sib-default-btn,
  .eira-news form.sib_signup_form input[type="submit"] {
    flex: 1 1 100%;
    max-width: none;
  }
}


/* ============================================================
   CARROUSEL GÉNÉRIQUE
   Un seul composant pour tous les défilements horizontaux :
   photos, avis, robes. Défilement natif (glissé du doigt sur
   téléphone, molette et flèches sur ordinateur) plutôt qu'une
   bibliothèque JavaScript — rien à charger, rien à maintenir,
   et le clavier fonctionne sans effort particulier.
   ============================================================ */

/* Surtitre sur sa propre ligne, titre et flèches sur la suivante.
   Sans la base 100 %, le surtitre et le titre se partageaient la largeur :
   sur téléphone, « Elles en parlent » se cassait en trois lignes à côté du
   titre. */
.eira-carrousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.eira-carrousel__head > .eira-eyebrow {
  flex: 1 1 100%;
}

.eira-carrousel__head > h2,
.eira-carrousel__head > .eira-h2 {
  flex: 1 1 auto;
  margin: 0;
}

.eira-carrousel__head > .eira-carrousel__nav {
  margin-left: auto;
}

.eira-carrousel {
  display: flex;
  gap: clamp(.85rem, 2.2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--eira-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--eira-gutter);
  padding-bottom: .5rem;
  margin-inline: calc(-1 * var(--eira-gutter));
}

.eira-carrousel::-webkit-scrollbar {
  display: none;
}

/* La classe est doublée à dessein : WordPress pose
   `:root :where(.is-layout-flow) > * { margin-block-start: 24px }`, une
   règle plus spécifique qu'un simple `.eira-carrousel > *`. Résultat, la
   première carte n'avait pas cette marge haute et paraissait plus grande
   que les suivantes de 24 px exactement. */
.eira-carrousel.eira-carrousel > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin-block: 0;
  margin-inline: 0;
}

/* Repère de fin, pour que la dernière carte ne colle pas au bord */
.eira-carrousel::after {
  content: "";
  flex: none;
  width: 1px;
}

/* Flèches : posées par le script, uniquement quand il y a de quoi défiler */
.eira-carrousel__nav {
  display: none;
  gap: .6rem;
}

@media (min-width: 900px) {
  .eira-carrousel__nav {
    display: flex;
  }
}

.eira-carrousel__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--eira-text);
  background: transparent;
  border: 1px solid var(--eira-taupe);
  border-radius: 50%;
  cursor: pointer;
  transition: background .35s var(--eira-ease), border-color .35s var(--eira-ease), color .35s var(--eira-ease);
}

.eira-carrousel__navbtn:hover {
  color: var(--eira-white);
  background: var(--eira-clay);
  border-color: var(--eira-clay);
}

.eira-carrousel__navbtn[disabled] {
  opacity: .32;
  pointer-events: none;
}

.eira-carrousel__navbtn svg {
  width: 16px;
  height: 16px;
}

/* --- Carrousel de photos --- */

.eira-carrousel--photos > figure {
  width: clamp(14rem, 62vw, 23rem);
}

.eira-carrousel--photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* --- Carrousel d'avis --- */

.eira-avis-card {
  width: clamp(16rem, 74vw, 24rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--eira-white);
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 45%, transparent);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.eira-avis-card__texte {
  font-family: var(--eira-font-editorial);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--eira-text);
  margin: 0;
  flex: 1;
}

.eira-avis-card__nom {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eira-clay);
  margin: 0;
}

.eira-avis-card .eira-reviews__stars {
  margin: 0;
}

.eira-avis-card .eira-reviews__stars svg {
  width: 14px;
  height: 14px;
  color: var(--eira-clay);
}

/* ============================================================
   DUO TEXTE + PHOTO
   La section passe-partout pour composer une nouvelle page.
   ============================================================ */

.eira-duo .wp-block-columns {
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.eira-duo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Inverser l'ordre : ajouter la classe eira-duo--inverse sur la section */
@media (min-width: 782px) {
  .eira-duo--inverse .wp-block-columns {
    flex-direction: row-reverse;
  }
}

/* ============================================================
   BANDEAU DE RÉASSURANCE
   Quatre repères courts, sans argumentaire — à ne pas confondre
   avec la section « Pourquoi EIRA », qui développe.
   ============================================================ */

.eira-rassure__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

@media (min-width: 782px) {
  .eira-rassure__grille {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.eira-rassure__item p {
  margin: 0;
}

.eira-rassure__titre {
  font-family: var(--eira-font-display);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--eira-text);
  margin-top: .7rem;
}

.eira-rassure__note {
  font-size: .82rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--eira-text) 62%, transparent);
  margin-top: .35rem;
}

.eira-rassure__item .eira-why__icon svg {
  width: 30px;
  height: 30px;
}

/* ============================================================
   MISE EN AVANT D'UNE ROBE
   ============================================================ */

.eira-focus {
  background: var(--eira-ivory);
}

.eira-focus .wp-block-columns {
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.eira-focus img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.eira-focus__prix {
  font-family: var(--eira-font-editorial);
  font-size: 1.15rem;
  color: var(--eira-clay-dark);
  margin-top: .4rem;
}

/* En-tête de section réutilisable (hors carrousel) */
.eira-tete {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ============================================================
   TROIS DERNIERS ARTICLES
   ============================================================ */

.eira-journal-teaser .wp-block-post-template {
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.eira-journal-teaser .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.eira-journal-teaser .wp-block-post-title {
  font-family: var(--eira-font-display);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 1rem;
}

.eira-journal-teaser .wp-block-post-title a {
  color: var(--eira-text);
  text-decoration: none;
}

.eira-journal-teaser .wp-block-post-title a:hover {
  color: var(--eira-clay-dark);
}

.eira-journal-teaser .wp-block-post-excerpt {
  color: color-mix(in srgb, var(--eira-text) 72%, transparent);
  line-height: 1.7;
}

.eira-journal-teaser .wp-block-post-excerpt__more-text {
  display: none;
}


/* ============================================================
   CORRECTIFS MOBILES
   ============================================================ */

@media (max-width: 900px) {

  /* --- 1. Marges du pied de page ---------------------------------------
     La règle de gouttière mobile ne vise que l'intérieur de <main> : le
     pied de page, qui est en dehors, restait collé aux deux bords. */
  .eira-footer {
    padding-inline: var(--eira-gutter);
  }

  /* --- 2. Plus de réserve en bas de document ---------------------------
     Le bandeau « Réserver un essayage » était affiché en permanence : il
     fallait lui réserver la place, sinon il masquait la dernière ligne de
     la page. Il s'efface maintenant dès qu'on descend, et au-dessus du
     pied de page. La réserve n'a plus lieu d'être — elle laissait une
     bande vide sous le pied de page. */

  /* --- 3. Le menu se replie jusqu'à 900 px -----------------------------
     Le bloc Navigation de WordPress ne bascule en menu déroulant qu'en
     dessous de 600 px. Entre 600 et 900 px — une tablette en portrait,
     un téléphone en paysage — les sept entrées s'affichaient en ligne et
     débordaient de l'écran. */
  .eira-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .eira-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}

/* --- 4. Le panneau du menu : voir « TIROIR DU MENU MOBILE » plus bas ---
   Le menu déroulant de WordPress est en position fixe : son cadre de
   référence devrait être l'écran. Mais le flou d'arrière-plan de
   l'en-tête (`backdrop-filter`) crée un nouveau cadre de référence pour
   ses descendants fixes : le panneau se calait donc sur la hauteur de
   l'en-tête — 64 px — et, avec son défilement interne, n'affichait que
   « Accueil ».

   Le flou est retiré le temps de l'ouverture. Il n'a de toute façon rien
   à flouter : le panneau plein écran est opaque et le recouvre.

   Deux règles séparées, jamais une liste : `:has()` est inconnu des
   navigateurs anciens, et un sélecteur invalide dans une liste annulerait
   toute la règle — donc aussi la variante posée par le script. */
.eira-header.eira-header--menu {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transform: none;
}

.eira-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transform: none;
}

/* Le panneau est ancré sur l'écran, sans dépendre de l'animation d'entrée
   de WordPress : celle-ci le décale de quelques pixels vers le bas, ce qui
   laissait un mince liseré de page visible tout en haut. Le `!important`
   est nécessaire ici — une animation l'emporte sur une déclaration
   ordinaire, mais pas sur une déclaration importante. Le fondu en opacité,
   lui, est conservé. */
.eira-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  transform: none !important;
}


/* ============================================================
   SOUS-MENU DU MENU PRINCIPAL (ordinateur)
   Le panneau livré par WordPress est une simple boîte blanche à
   filet gris. Ici : filet argile en attache sous l'en-tête, ombre
   portée basse, entrées espacées, et un petit tiret qui glisse au
   survol — le même vocabulaire que les sur-titres du site.
   En dessous de 901 px, le menu passe en panneau plein écran :
   ces règles ne s'y appliquent pas.
   ============================================================ */

@media (min-width: 901px) {

  .eira-header .wp-block-navigation .wp-block-navigation__submenu-container {
    min-width: 15.5rem;
    padding-block: .35rem;
    border: 0;
    border-top: 2px solid var(--eira-clay);
    background: var(--eira-white);
    box-shadow: 0 28px 48px -30px color-mix(in srgb, var(--eira-text) 60%, transparent),
                0 1px 0 color-mix(in srgb, var(--eira-taupe) 30%, transparent);
    letter-spacing: .14em;
  }

  /* Entrées : plus d'air, et le soulignement du menu principal
     n'a plus de sens ici — remplacé par le tiret de gauche. */
  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: .95rem 1.5rem .95rem 2.1rem;
    font-size: .68rem;
    color: var(--eira-text);
    transition: background-color .3s var(--eira-ease),
                color .3s var(--eira-ease),
                padding-left .3s var(--eira-ease);
  }

  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
    display: none;
  }

  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--eira-clay);
    transition: width .3s var(--eira-ease);
  }

  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: var(--eira-ivory);
    color: var(--eira-clay-dark);
    padding-left: 2.35rem;
  }

  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before {
    width: .55rem;
  }

  /* Filet très léger entre deux entrées */
  .eira-header .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 16%, transparent);
  }

  /* Le chevron du parent pivote quand le panneau est ouvert */
  .eira-header .wp-block-navigation .wp-block-navigation__submenu-icon {
    transition: transform .3s var(--eira-ease);
  }

  .eira-header .wp-block-navigation .has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
  .eira-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: no-preference) {
    .eira-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
    .eira-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
      animation: eira-sousmenu-entree .26s var(--eira-ease-out) both;
    }
  }

  @keyframes eira-sousmenu-entree {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: none; }
  }
}


/* ============================================================
   MENU PRINCIPAL — rythme régulier (ordinateur)
   Les deux entrées à déroulant portent un chevron, posé par
   WordPress à côté du lien. L'espacement venant de la liste
   s'ajoutait donc à la largeur du chevron : les entrées à
   déroulant paraissaient plus espacées que les autres, et leur
   soulignement s'arrêtait avant le chevron. L'espacement passe
   sur chaque entrée, le soulignement sur l'entrée entière.
   ============================================================ */

@media (min-width: 901px) {

  .eira-header .wp-block-navigation__container {
    gap: 0;
  }

  .eira-header .wp-block-navigation__container > .wp-block-navigation-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45em;
    padding-inline: .9rem;
  }

  .eira-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding-block: .45em;
  }

  /* Un seul soulignement par entrée, de la même longueur pour toutes. */
  .eira-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    display: none;
  }

  .eira-header .wp-block-navigation__container > .wp-block-navigation-item::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: 0;
    height: 1px;
    background: var(--eira-clay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--eira-ease);
  }

  .eira-header .wp-block-navigation__container > .wp-block-navigation-item:hover::after,
  .eira-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within::after {
    transform: scaleX(1);
  }

  /* Pas de soulignement sur les entrées à déroulant : le panneau qui
     s'ouvre porte déjà son filet argile en attache, et les deux traits
     se superposaient — deux lignes marron de largeurs différentes.
     Le survol reste signalé par le panneau et le chevron qui pivote. */
  .eira-header .wp-block-navigation__container > .wp-block-navigation-item.has-child::after {
    display: none;
  }

  /* Chevron : même taille pour les deux déroulants, collé au texte. */
  .eira-header .wp-block-navigation__submenu-icon {
    padding: 0;
    margin: 0;
  }

  .eira-header .wp-block-navigation__submenu-icon svg {
    width: 11px;
    height: 11px;
  }
}

/* ============================================================
   EN-TÊTE ET TIROIR DU MENU — PETIT ÉCRAN (< 901 px)

   En-tête : le bouton du menu passe à gauche et le logo au
   centre. Le balisage place le logo en premier et le menu
   ensuite ; plutôt que de le réécrire, la rangée devient une
   grille de trois colonnes et chacun rejoint la sienne.

   Menu : WordPress l'ouvre en plein écran, sous-entrées
   dépliées. Ici, un panneau qui glisse depuis la gauche — du
   côté du bouton qui l'ouvre —, la page assombrie derrière,
   les entrées en lignes séparées d'un filet, et les sous-menus
   repliés en accordéon (voir assets/js/design.js).

   Le balisage reste celui de WordPress : rien n'est recréé,
   tout est habillé. Les noms de classes viennent donc du cœur,
   et quelques `!important` sont nécessaires — les règles du
   cœur visent le menu déroulant avec cinq classes, une
   spécificité qu'un sélecteur de thème lisible n'atteint pas.
   ============================================================ */

@media (max-width: 900px) {

  /* --- En-tête : menu à gauche, logo au centre ------------------------ */
  .eira-header > .wp-block-group {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 !important;
  }

  .eira-header > .wp-block-group > .wp-block-group {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .eira-header > .wp-block-group > .wp-block-site-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  /* --- Le voile ------------------------------------------------------- */
  .eira-header .wp-block-navigation__responsive-container.is-menu-open {
    /* Le menu est justifié à droite sur ordinateur. Dans le tiroir, tout
       s'aligne à gauche : on remet la variable du cœur à sa valeur de
       départ plutôt que de corriger chaque élément un par un. */
    --navigation-layout-justification-setting: flex-start !important;
    --navigation-layout-align: flex-start !important;
    padding: 0 !important;
    background: color-mix(in srgb, var(--eira-text) 48%, transparent) !important;
    display: block !important;
    text-align: left !important;
  }

  /* --- Le panneau ----------------------------------------------------- */
  .eira-header .is-menu-open .wp-block-navigation__responsive-close {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 21rem);
    max-width: none;
    display: flex;
    flex-direction: column;
    background: var(--eira-base);
    box-shadow: 18px 0 46px -28px color-mix(in srgb, var(--eira-text) 75%, transparent);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .eira-header .is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
  }

  /* --- La croix, en haut du panneau ----------------------------------- */
  .eira-header .is-menu-open .wp-block-navigation__responsive-container-close {
    position: static !important;
    align-self: flex-end;
    margin: .35rem .35rem 0 0;
    padding: .85rem;
    color: var(--eira-text);
  }

  .eira-header .is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 22px;
    height: 22px;
  }

  /* --- Les entrées ---------------------------------------------------- */
  .eira-header .is-menu-open .wp-block-navigation__responsive-container-content {
    display: block !important;
    padding: .5rem 0 0 !important;
    overflow: visible !important;
  }

  .eira-header .is-menu-open .wp-block-navigation__container {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .eira-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    display: block !important;
    position: relative;
    padding: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 24%, transparent);
  }

  .eira-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 24%, transparent);
  }

  /* Le soulignement animé du menu d'ordinateur n'a pas de sens ici. */
  .eira-header .is-menu-open .wp-block-navigation-item__content::after,
  .eira-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item::after {
    display: none;
  }

  .eira-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: block !important;
    padding: 1.15rem 3.8rem 1.15rem 1.4rem !important;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    text-align: left;
    color: var(--eira-text);
  }

  /* --- Groupe repliable ----------------------------------------------- */

  /* Le chevron de WordPress est remplacé par celui du thème : le sien ne
     pilote que le survol sur ordinateur. */
  .eira-header .is-menu-open .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  .eira-tiroir__bouton {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.35rem;
    color: var(--eira-clay);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .eira-tiroir__bouton svg {
    width: 13px;
    height: 13px;
    transition: transform .32s var(--eira-ease);
  }

  .eira-tiroir__bouton[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Replié par défaut. La hauteur est posée en style en ligne par le
     script — une transition ne sait pas animer « auto », et un style en
     ligne est le seul moyen de passer devant la règle du cœur qui impose
     `height: auto` au menu déroulant ouvert. D'où aussi le
     `overflow: hidden !important` : sans lui, les sous-entrées débordaient
     d'une boîte de hauteur nulle et se superposaient aux entrées
     suivantes. */
  .eira-header .is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--eira-ivory) !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: height .34s var(--eira-ease-out);
  }

  .eira-header .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    border: 0 !important;
    padding: 0 !important;
  }

  .eira-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block !important;
    padding: .95rem 1.4rem .95rem 2.2rem !important;
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    text-align: left;
    font-family: var(--eira-font-body);
    color: color-mix(in srgb, var(--eira-text) 82%, transparent);
  }

  .eira-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
    padding-top: 1.15rem !important;
  }

  .eira-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
    padding-bottom: 1.15rem !important;
  }

  /* Le cœur impose `background-color: transparent !important` aux entrées
     du menu ouvert — logique pour une liste à plat, pas pour un accordéon.
     La classe est triplée pour passer devant : à importance égale, c'est la
     spécificité qui tranche, et celle du cœur atteint quatre classes. */
  .eira-header .is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    background-color: var(--eira-ivory) !important;
  }

  /* Les entrées du volet sont des boîtes flex : sans cela, le lien ne fait
     que la largeur de son texte et la zone cliquable ne couvre pas la
     ligne. */
  .eira-header .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block !important;
    width: 100% !important;
  }

  /* --- Pied du panneau : le rendez-vous, toujours à portée ------------ */
  .eira-tiroir__pied {
    margin-top: auto;
    padding: 1.5rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  .eira-tiroir__pied a {
    display: block;
    padding: 1.05em 1rem;
    text-align: center;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eira-base);
    background: var(--eira-clay);
    transition: background-color .4s var(--eira-ease);
  }

  .eira-tiroir__pied a:hover,
  .eira-tiroir__pied a:focus-visible {
    background: var(--eira-clay-dark);
  }
}

/* Pas d'animation de glissement sur le panneau : WordPress fait déjà
   apparaître le voile en fondu, et une animation qui ne se joue pas —
   onglet en arrière-plan, navigateur qui la refuse — laisserait le
   panneau hors écran. Un menu qu'on ne voit pas est un défaut bien plus
   grave qu'une entrée sans effet. */


/* ============================================================
   PAGE DE CONFIRMATION DE RÉSERVATION

   Cet écran est le premier que voit une mariée après avoir
   réservé. Le HTML vient de FluentBooking : les classes
   (`fcal_*`) sont les siennes, relevées dans son code.

   Il existe en DEUX exemplaires, produits par le même code du
   plugin :

   1. un fragment inséré dans la page « Réserver un essayage »
      juste après l'envoi du formulaire, sans rechargement ;
   2. un document autonome servi si l'on recharge l'adresse de
      confirmation.

   D'où deux règles de méthode, à respecter pour toute retouche
   de ce bloc :

   — Ce qui est commun se règle sur `.fcal_confirmation`, jamais
     sous `.confirmation_page`, qui n'existe que sur le second.

   — SPÉCIFICITÉ. Sur la page autonome, notre feuille est
     chargée après celle du plugin ; dans la page du site, c'est
     l'inverse. À égalité de spécificité, nos règles gagnaient
     donc sur un exemplaire et perdaient sur l'autre — c'est
     exactement ce qu'on voyait : mise en page correcte au
     rechargement, cassée sans rechargement. Le plugin cible ses
     éléments avec deux classes (`.fcal_confirmation
     .fcal_confirm_section`) ; on double donc la première pour
     passer devant lui dans les deux sens.
   ============================================================ */

/* --- Variables et cadre de la page autonome ------------------------- */

/* Le plugin ne définit ses variables que sur `:root`, hors de portée du
   reste de cette feuille : sans cela le lien de retour reste bleu
   (#386bb8) et le fond gris (#f3f4f6). */
body.booking-confirmation-page,
.confirmation_page {
  --fcal_primary_color: var(--eira-clay-dark);
  --fcal_dark: var(--eira-text);
  --fcal_body_bg: var(--eira-ivory);
  --fcal_cal_bg: transparent;
  --fcal_slot_border: color-mix(in srgb, var(--eira-taupe) 28%, transparent);
}

body.booking-confirmation-page {
  margin: 0;
  background: var(--eira-ivory);
  font-family: var(--eira-font-body);
  color: var(--eira-text);
}

/* Le plugin fige la hauteur du fond à 100vh : dès que la confirmation
   dépasse l'écran, le fond s'arrête net et laisse une bande blanche. */
.confirmation_page.confirmation_page {
  height: auto;
  min-height: 100vh;
  background: var(--eira-ivory);
}

/* Sa carte à lui — fond blanc, coins arrondis, ombre — enveloppait la
   nôtre. La carte, c'est `.fcal_confirmation`, la seule des deux qui
   existe dans les deux exemplaires. */
.confirmation_page.confirmation_page .fcal_conf_wrap {
  max-width: 44rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  padding-inline: 1.25rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- La carte ------------------------------------------------------- */

.fcal_confirmation.fcal_confirmation {
  max-width: 40rem;
  margin-inline: auto;

  /* Dans la page du site, la carte remplace le calendrier juste sous le
     surtitre « CALENDRIER DE RÉSERVATION », dont le filet argile (72px,
     .eira-filet) tombait alors pile sur le liseré argile du haut de la
     carte : deux traits superposés, l'un court, l'autre large. On les
     sépare. Sur la page autonome, il n'y a pas de surtitre — la marge est
     remise à zéro plus bas. */
  margin-block-start: clamp(2rem, 5vw, 3rem);
  background: var(--eira-white);
  border: 1px solid color-mix(in srgb, var(--eira-taupe) 34%, transparent);
  border-top: 2px solid var(--eira-clay);
  border-radius: 0;
  box-shadow: 0 30px 60px -45px color-mix(in srgb, var(--eira-text) 60%, transparent);
  padding: clamp(1.75rem, 4vw, 3rem);

  /* Référence des requêtes de conteneur plus bas : la mise en colonnes
     doit suivre la largeur de la carte, pas celle de la fenêtre. Dans la
     page du site, la carte est étroite alors que la fenêtre est large. */
  container-type: inline-size;
}

.confirmation_page .fcal_confirmation.fcal_confirmation {
  margin-block-start: 0;
}

/* --- En-tête -------------------------------------------------------- */

.fcal_confirmation.fcal_confirmation .fcal_confirm_header {
  text-align: center;
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  /* Le plugin ajoute 20px sous l'en-tête, en plus de notre marge
     intérieure et de celle du corps : trois espaces empilés laissaient
     une bande vide de plus de 80px avant la première ligne. */
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 28%, transparent);
}

/* La coche verte est remplacée par un filet argile : le vert n'appartient
   pas à la charte, et une image chargée depuis le dossier du plugin
   disparaîtrait à sa prochaine mise à jour.

   Masquer l'image ne suffit pas : le plugin dessine autour d'elle une
   pastille grise de 3rem, qui restait visible, vide, au-dessus du titre. */
.fcal_confirmation.fcal_confirmation .fcal_check_holder {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.fcal_confirmation.fcal_confirmation .fcal_check_holder img,
.fcal_confirmation.fcal_confirmation .fcal_check_holder svg {
  display: none;
}

.fcal_confirmation.fcal_confirmation .fcal_check_holder::after {
  content: "";
  display: block;
  width: clamp(2.5rem, 6vw, 3.5rem);
  height: 1px;
  margin: 0 auto 1.5rem;
  background: var(--eira-clay);
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_header h2 {
  font-family: var(--eira-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--eira-text);
  margin: 0 0 .6rem;
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_header p {
  font-family: var(--eira-font-editorial);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--eira-text) 72%, transparent);
  margin: 0;
}

/* --- Les lignes de détail ------------------------------------------- */

.fcal_confirmation.fcal_confirmation .fcal_confirm_body {
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* Le plugin empile intitulé et contenu (`display: flex; flex-direction:
   column`) et fixe la largeur de l'intitulé à 200px. On reprend la main
   sur les deux. */
.fcal_confirmation.fcal_confirmation .fcal_confirm_section {
  display: grid;
  gap: .2rem;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--eira-taupe) 20%, transparent);
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_section:last-child {
  border-bottom: 0;
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_section_title {
  width: auto;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Deux colonnes seulement si la carte est assez large — requête de
   conteneur, pas de fenêtre : la même confirmation s'affiche tantôt en
   pleine page, tantôt dans la colonne de la page « Réserver un
   essayage ». Les navigateurs qui ne connaissent pas `@container`
   gardent l'empilement, qui reste lisible. */
@container (min-width: 25rem) {
  .fcal_confirmation.fcal_confirmation .fcal_confirm_section {
    grid-template-columns: minmax(0, 7.5rem) 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }
}

@container (min-width: 34rem) {
  .fcal_confirmation.fcal_confirmation .fcal_confirm_section {
    grid-template-columns: minmax(0, 9rem) 1fr;
    gap: 1.5rem;
  }
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_section_title h4 {
  margin: 0;
  font-family: var(--eira-font-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eira-clay-dark);
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_section_content,
.fcal_confirmation.fcal_confirmation .fcal_confirm_section_content p {
  font-size: .95rem;
  line-height: 1.62;
  color: var(--eira-text);
  margin: 0;
}

.fcal_confirmation.fcal_confirmation .fcal_confirm_section_content a {
  color: var(--eira-clay-dark);
}

.fcal_confirmation.fcal_confirmation .fcal_listed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fcal_confirmation.fcal_confirmation .fcal_host_badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .15em .55em;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eira-clay-dark);
  background: var(--eira-ivory);
  border-radius: 0;
}

/* --- Pied : annuler, déplacer, agenda ------------------------------- */

.fcal_confirmation.fcal_confirmation .fcal_booking_manage {
  margin-top: 0;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
  border-top: 0;
  font-size: .92rem;
  color: color-mix(in srgb, var(--eira-text) 78%, transparent);
}

.fcal_confirmation.fcal_confirmation .fcal_normal_booking_footer {
  text-align: center;
}

.fcal_confirmation.fcal_confirmation .fcal_booking_manage a {
  color: var(--eira-clay-dark);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--eira-clay) 45%, transparent);
  transition: border-color .3s var(--eira-ease);
}

.fcal_confirmation.fcal_confirmation .fcal_booking_manage a:hover {
  border-bottom-color: var(--eira-clay);
}

.fcal_confirmation.fcal_confirmation .fcal_to_calendars {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--eira-taupe) 20%, transparent);
  text-align: center;
}

.fcal_confirmation.fcal_confirmation .fcal_to_calendars span {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--eira-text) 58%, transparent);
}

/* --- « Retour à l'accueil » ------------------------------------------
   Posé par le plugin hors de la carte, sous elle — donc sur la page
   autonome seulement. C'était le seul élément resté dans son habillage :
   bleu souligné sur le fond gris. Traité comme un intitulé de section,
   pas comme un bouton : il ne doit pas concurrencer « Ajouter à mon
   agenda ». */

.confirmation_page.confirmation_page .fcal_back_btn {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  gap: .1rem;
}

.confirmation_page.confirmation_page .fcal_back_btn svg {
  width: 1rem;
  height: 1rem;
  stroke: var(--eira-clay);
}

.confirmation_page.confirmation_page .fcal_back_btn a {
  font-family: var(--eira-font-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eira-clay-dark);
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--eira-ease);
}

.confirmation_page.confirmation_page .fcal_back_btn a:hover,
.confirmation_page.confirmation_page .fcal_back_btn a:focus-visible {
  border-bottom-color: var(--eira-clay);
}