/* ==========================================================================
   Loc Event — identité "Prestige" (Playfair Display / Montserrat / or)
   ========================================================================== */

:root {
  --luxe-black:    #0f0f0f;
  --luxe-charcoal: #1a1a1a;
  --luxe-darkgray: #2a2a2a;
  --luxe-taupe:    #b5a48b;
  --luxe-sand:     #d9cfc1;
  --luxe-cream:    #f9f8f6;
  --luxe-gold:     #c5a059;
  --luxe-gold-light: #dfc288;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --le-container: 1280px;
  --le-header-h: 5.4rem;
}
@media (min-width:1024px){
  :root{ --le-header-h: 11rem; }
}

*{box-sizing:border-box}
/* Inline-SVG icons (replaces Font Awesome webfont): the <i> wrapper keeps
   every existing font-size/color rule unchanged (e.g. .le-card-link i),
   the svg just reads them back via 1em/currentColor. */
i.le-icon{display:inline-flex;}
i.le-icon svg{width:1em;height:1em;fill:currentColor;}
/* Grid items must not refuse to shrink below an image's intrinsic size. */
.le-grid > li,.le-compose-grid > *,.le-intro-grid > *,.le-brief-grid > li,.le-variant > *{min-width:0;}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--luxe-cream);color:var(--luxe-charcoal);-webkit-font-smoothing:antialiased;font-weight:400;}
h1,h2,h3,h4,.font-serif{font-family:var(--font-display);font-weight:500;color:var(--luxe-black);}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0}
button{font-family:inherit}
::selection{background:var(--luxe-taupe);color:#fff}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--luxe-cream)}
::-webkit-scrollbar-thumb{background:var(--luxe-taupe);border-radius:5px}
:focus-visible{outline:2px solid var(--luxe-gold);outline-offset:2px}
em{font-style:italic}

.le-skip-link{position:absolute;left:-999px;top:auto;background:var(--luxe-black);color:#fff;padding:.9em 1.5em;z-index:999;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;}
.le-skip-link:focus{left:1rem;top:1rem;}

.le-container{max-width:var(--le-container);margin:0 auto;padding:0 1.5rem;}

/* ---------------------------------------------------------- Sections --- */
.le-section{padding:5rem 0}
@media (min-width:768px){.le-section{padding:7.5rem 0}}
.le-section-alt{background:#fff;border-top:1px solid rgba(217,207,193,.4);border-bottom:1px solid rgba(217,207,193,.4);}
/* Lighter than --luxe-black on purpose: the footer right below this
   section uses pure black, and with no visual break the two used to
   read as one continuous block instead of two distinct ones. */
.le-section-dark{background:var(--luxe-darkgray);color:#d8d5cc;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);}
.le-section-dark .le-eyebrow{color:var(--luxe-gold-light)}
.le-section-dark h2{color:#fff}
.le-section-dark a:not(.le-btn){color:var(--luxe-gold-light)}

.le-eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.32em;color:var(--luxe-gold);font-weight:600;display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1em;}
.le-eyebrow.on-dark{color:var(--luxe-gold-light)}
.le-section-head{max-width:640px;margin:0 0 3rem;}
.le-section-head.le-center{margin-left:auto;margin-right:auto;text-align:center;}
.le-section-head h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;margin:0 0 .55em;}
.le-section-head p{color:#6b665c;font-weight:300;font-size:.95rem;line-height:1.75;margin:0;}
.le-section-head.le-center p{margin-left:auto;margin-right:auto;}
.le-section-head.le-center .le-cta-pair{justify-content:center;}

/* Page/section intro (eyebrow + h1 + lede + CTA): centered block, not
   left-pinned inside the wide .le-container. Used on product, category
   and zone pages. */
.le-hero-section .le-container{max-width:760px;text-align:center;}
.le-hero-section .le-cta-pair{justify-content:center;}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 .5em;}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:1.5em 0 .6em;}
h3{font-size:1.25rem;margin:1.1em 0 .5em;}
h1 em,h2 em,h3 em{color:var(--luxe-gold);}
h2 > i:first-child,.le-section-head h2 i,.le-prose h2 i{color:var(--luxe-gold);margin-right:.5rem;font-size:.82em;vertical-align:.05em;}

/* ------------------------------------------------------------ Buttons - */
.le-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1.05em 2em;font-size:.76rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;border:1px solid transparent;transition:all .3s ease;white-space:nowrap;cursor:pointer;}
.le-btn-primary{background:var(--luxe-black);color:#fff;}
.le-btn-primary:hover,.le-btn-primary:active{background:var(--luxe-gold);color:#fff;}
.le-btn-ghost{background:transparent;color:var(--luxe-black);border-color:var(--luxe-sand);}
.le-btn-ghost:hover,.le-btn-ghost:active{border-color:var(--luxe-gold);color:var(--luxe-gold);}
.le-btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.le-btn-ghost-light:hover,.le-btn-ghost-light:active{background:#fff;color:var(--luxe-black);}
.le-cta-pair{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem;}

/* -------------------------------------------------------------- Header - */
.le-header{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(249,248,246,.92);backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(217,207,193,.45);transition:box-shadow .3s;}
.le-header.is-scrolled{box-shadow:0 6px 24px rgba(15,15,15,.08);}

/* Row 1 — mobile (<1024px): simple two-item row, logo left, actions
   right. No absolute centering here: with the nav row hidden on mobile
   there's no "menu to center the logo above", and an absolutely
   positioned logo would otherwise overlap the Devis/hamburger buttons
   on narrow screens. */
.le-header-top{position:relative;display:flex;align-items:center;padding:1rem 0;}
.le-logo{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1;min-width:0;}
.le-logo-main{font-family:var(--font-display);font-size:1.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--luxe-black);font-weight:600;}
.le-logo-main em{color:var(--luxe-gold);font-style:normal;}
.le-logo-tag{font-family:var(--font-body);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--luxe-taupe);margin-top:.15em;margin-right:-.08em;white-space:nowrap;}

.le-phone-link{display:none;align-items:center;gap:.5em;font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--luxe-black);white-space:nowrap;border:1px solid var(--luxe-sand);border-radius:2px;padding:.65em 1.1em;transition:border-color .2s ease,color .2s ease;}
.le-phone-link i{color:var(--luxe-gold);font-size:.95rem;}
.le-phone-link:hover,.le-phone-link:active{border-color:var(--luxe-gold);color:var(--luxe-gold);}
.le-phone-link:hover i,.le-phone-link:active i{color:var(--luxe-gold);}

.le-header-actions{margin-left:auto;display:flex;align-items:center;gap:.8rem;}
.le-header-actions .le-btn-primary{padding:.85em 1.5em;white-space:nowrap;}
.le-nav-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid rgba(217,207,193,.7);border-radius:2px;padding:.5em .65em;color:var(--luxe-black);cursor:pointer;font-size:1.05rem;flex:0 0 auto;line-height:1;align-self:stretch;}
@media (min-width:1024px){.le-nav-toggle{display:none;}}
@media (max-width:480px){
  .le-logo-tag{display:none;}
  .le-logo-main{font-size:1.25rem;letter-spacing:.16em;}
  .le-header-actions{gap:.5rem;}
  .le-header-actions .le-btn-primary{padding:.65em .9em;font-size:.6rem;letter-spacing:.08em;}
}

/* Row 1 — desktop (≥1024px): phone (left) / logo (absolutely centered,
   dead center regardless of the phone/actions widths either side) /
   actions (right), with the nav row centered beneath it. */
@media (min-width:1024px){
  /* .le-header-top's own height came only from the phone-link/actions row
     (one short line), while the absolutely-centered two-line logo block
     is taller — centering it made it overflow past the row's bottom edge
     and into the nav row's border-top below, which read as a line struck
     through the tagline. min-height makes the row tall enough to contain
     the logo block with real clearance on both sides. */
  .le-header-top{min-height:7.6rem;}
  .le-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center;text-align:center;}
  .le-phone-link{display:inline-flex;}
}

/* Row 2 (desktop only): centered main nav, below the logo */
.le-header-nav-row{display:none;}
@media (min-width:1024px){
  .le-header-nav-row{display:flex;justify-content:center;border-top:1px solid rgba(217,207,193,.45);}
  .le-header-nav-row .le-container{display:flex;justify-content:center;}
}
.le-nav{display:none;}
@media (min-width:1024px){.le-nav{display:flex;padding:.85rem 0;}}
.le-nav > ul{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0;}
@media (min-width:1220px){.le-nav > ul{gap:2.4rem;}}
.le-nav a,.le-nav > ul > li > button{font-size:.76rem;text-transform:uppercase;letter-spacing:.11em;font-weight:600;color:var(--luxe-black);padding:.3em 0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;border-bottom:1px solid transparent;white-space:nowrap;}
.le-nav a:hover,.le-nav > ul > li > button:hover,.le-nav-cat.is-open > button{color:var(--luxe-gold);border-color:var(--luxe-gold);}
.le-nav-cat{position:relative;}
.le-nav-cat > button i{font-size:.6rem;transition:transform .2s;}
.le-nav-cat.is-open > button i,.le-nav-cat:hover > button i{transform:rotate(180deg);}
.le-dropdown-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:250px;background:#fff;border:1px solid rgba(217,207,193,.5);box-shadow:0 18px 40px rgba(15,15,15,.12);padding:.6rem 0;margin-top:1rem;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:50;}
.le-nav-cat:hover > .le-dropdown-panel,.le-nav-cat.is-open > .le-dropdown-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.le-dropdown-panel a{display:block;padding:.65em 1.4em;font-size:.74rem;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--luxe-charcoal);border:0;white-space:nowrap;}
.le-dropdown-panel a:hover{background:var(--luxe-cream);color:var(--luxe-gold);}

.le-mobile-menu{position:fixed;inset:0;z-index:50;background:var(--luxe-cream);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;padding:2.4rem 1.6rem;opacity:0;pointer-events:none;transition:opacity .3s ease;overflow-y:auto;}
.le-mobile-menu.is-open{opacity:1;pointer-events:auto;}
.le-mobile-menu-close{position:absolute;top:1.4rem;right:1.4rem;background:none;border:0;font-size:1.4rem;color:var(--luxe-black);padding:.6em;cursor:pointer;}
.le-mobile-menu nav{width:100%;max-width:420px;}
.le-mobile-menu ul{list-style:none;margin:0;padding:0;text-align:center;}
.le-mobile-menu > nav > ul{display:flex;flex-direction:column;gap:1.3rem;}
.le-mobile-menu a:not(.le-btn),.le-mobile-cat > button{font-size:.92rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--luxe-black);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;justify-content:center;width:100%;transition:color .15s ease;}
.le-mobile-menu-actions .le-btn{font-size:.78rem;}
.le-mobile-cat > button i{font-size:.7rem;transition:transform .2s;color:var(--luxe-gold);}
.le-mobile-cat.is-open > button i{transform:rotate(180deg);}
/* Open submenu: visibly subdued/indented vs. the top-level categories
   above, so a long open list stays readable. Scoped to tie (then beat
   via source order) the specificity of .le-mobile-menu a:not(.le-btn)
   above, which would otherwise win and flatten every link to the same
   bold uppercase style. */
.le-mobile-submenu{display:none;margin-top:.9rem;flex-direction:column;gap:.9rem;padding-left:1.1rem;border-left:2px solid rgba(181,164,139,.35);}
.le-mobile-submenu.is-open{display:flex;}
.le-mobile-menu .le-mobile-submenu a:not(.le-btn){font-size:.92rem;letter-spacing:.02em;text-transform:none;font-weight:400;color:#6b665c;justify-content:flex-start;}
.le-mobile-menu-actions{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(181,164,139,.3);display:flex;flex-direction:column;gap:.9rem;align-items:center;width:100%;max-width:300px;}
.le-mobile-menu-actions .le-btn{width:100%;}

/* Tap feedback on touch devices: :hover never fires there, so give
   every mobile-menu link/button its own :active state, same color as
   the desktop :hover gives a mouse user. */
@media (hover:none){
  .le-mobile-menu a:not(.le-btn):active,.le-mobile-cat > button:active{color:var(--luxe-gold);}
  .le-nav-toggle:active{background:var(--luxe-cream);border-color:var(--luxe-gold);}
}

/* ---------------------------------------------------------- Breadcrumb - */
.le-breadcrumb{padding:calc(var(--le-header-h) + 1rem) 0 0;}
.le-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:1.2rem 0;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#8a8477;}
.le-breadcrumb li:not(:last-child)::after{content:"/";margin-left:.6em;color:#c9c0b2;}
.le-breadcrumb a{color:#8a8477;}
.le-breadcrumb a:hover{color:var(--luxe-gold);}
.le-breadcrumb li[aria-current]{color:var(--luxe-black);}

/* ------------------------------------------------------------- Hero ---- */
.le-hero-full{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;}
.le-hero-full > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.68);z-index:0;}
.le-hero-full::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(15,15,15,.8), rgba(15,15,15,.2) 55%, rgba(15,15,15,.45));z-index:1;}
.le-hero-full-inner{position:relative;z-index:2;text-align:center;max-width:860px;padding:7rem 1.5rem 3rem;margin:0 auto;}
.le-hero-full .le-eyebrow{color:var(--luxe-sand);justify-content:center;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.6em;}
.le-hero-full h1{font-size:clamp(2.3rem,5vw,4.2rem);font-weight:500;margin:.6em 0;color:#fff;}
.le-hero-full h1 em{font-style:italic;color:var(--luxe-gold-light);}
.le-hero-full .le-hero-lede{color:#e4e1da;max-width:620px;margin:0 auto 1rem;}
.le-hero-full .le-cta-pair{justify-content:center;margin-top:2.2rem;}
.le-hero-lede{font-size:1rem;font-weight:300;line-height:1.8;color:#5b574f;max-width:640px;margin:0 auto;}

/* -------------------------------------------------------- Zone banner -- */
.le-zone-hero{position:relative;min-height:46vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;margin-bottom:0;}
.le-zone-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62);}
.le-zone-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(15,15,15,.9), rgba(15,15,15,.08) 65%);}
.le-zone-hero-inner{position:relative;z-index:2;padding:4rem 0 2.6rem;}
.le-zone-hero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:.4em 0;}
.le-zone-hero .le-hero-lede{color:#e4e1da;}
.le-zone-hero .le-eyebrow{color:var(--luxe-sand);}

/* -------------------------------------------------------- Intro/collage */
.le-intro-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;}
@media (min-width:900px){.le-intro-grid{grid-template-columns:1fr 1fr;gap:4.5rem;}}
.le-collage{position:relative;aspect-ratio:4/5;margin-bottom:3.2rem;}
@media (min-width:640px){.le-collage{aspect-ratio:5/4;}}
@media (min-width:900px){.le-collage{aspect-ratio:4/5;margin-bottom:0;}}
.le-collage-a{position:absolute;inset:0;overflow:hidden;box-shadow:0 24px 50px rgba(15,15,15,.18);}
.le-collage-a img{width:100%;height:100%;object-fit:cover;}
.le-collage-b{position:absolute;left:-6%;bottom:-10%;width:50%;aspect-ratio:4/3;overflow:hidden;box-shadow:0 18px 40px rgba(15,15,15,.22);border:6px solid var(--luxe-cream);}
.le-collage-b img{width:100%;height:100%;object-fit:cover;}
.le-stats{display:flex;gap:2.2rem;flex-wrap:wrap;list-style:none;margin:2.2rem 0 0;padding:1.6rem 0 0;border-top:1px solid rgba(217,207,193,.6);}
.le-stats dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8477;margin:0 0 .3em;}
.le-stats dd{margin:0;font-family:var(--font-display);font-size:1.85rem;font-weight:600;color:var(--luxe-black);}

/* -------------------------------------------------------------- Grids - */
.le-grid{display:grid;gap:2rem;list-style:none;margin:0;padding:0;}
.le-grid-2{grid-template-columns:1fr;}
@media (min-width:720px){.le-grid-2{grid-template-columns:1fr 1fr;}}
.le-grid-3{grid-template-columns:1fr;}
@media (min-width:680px){.le-grid-3{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.le-grid-3{grid-template-columns:1fr 1fr 1fr;}}
.le-grid-4{grid-template-columns:1fr 1fr;gap:1.1rem 2rem;}
@media (min-width:1024px){.le-grid-4{grid-template-columns:repeat(4,1fr);}}
.le-grid > li{display:flex;}
.le-grid > li > *{width:100%;}
.le-card{position:relative;display:flex;flex-direction:column;background:var(--luxe-cream);border:1px solid rgba(217,207,193,.5);width:100%;transition:box-shadow .3s,transform .3s;}
.le-card:hover{box-shadow:0 20px 44px rgba(15,15,15,.1);transform:translateY(-2px);}
.le-card-figure{overflow:hidden;aspect-ratio:4/3;}
.le-card-figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.le-card:hover .le-card-figure img{transform:scale(1.06);}
.le-card h3{position:relative;z-index:1;font-size:1.15rem;margin:1.2rem 1.4rem .5em;}
.le-card h3 a:hover{color:var(--luxe-gold);}
.le-card > p{margin:0 1.4rem;color:#6b665c;font-size:.87rem;font-weight:300;line-height:1.65;flex:1 0 auto;}
/* align-items:flex-start (not center): when the label wraps to a second
   line, the arrow pins to the top of the block, level with the first
   line, instead of floating centered between both lines or wrapping
   onto its own line below the text. margin-top is a fixed 15px, not auto:
   the sibling <p> above already has flex:1 0 auto and does the actual
   push-to-bottom, so auto here only added an inconsistent extra gap.
   ::after is a stretched link (inset:0 over the whole .le-card, which is
   position:relative) so the entire card is clickable, not just this
   link's own text — h3 a stays position:relative so it keeps its own
   hover feedback above the stretched layer. */
.le-card-link{display:flex;align-items:flex-start;gap:.5em;margin:15px 1.4rem 1.4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--luxe-black);}
/* position:static on purpose: ::after's containing block must be .le-card
   (the positioned ancestor), not this element, so inset:0 stretches the
   click target over the whole card instead of just this link's own box. */
.le-card-link::after{content:"";position:absolute;inset:0;}
.le-card-link i{font-size:.72rem;margin-top:.2em;flex:0 0 auto;transition:transform .2s;}
.le-card-link:hover,.le-card-link:active{color:var(--luxe-gold);}
.le-card-link:hover i,.le-card-link:active i{transform:translateX(3px);}
.le-card-dark{background:var(--luxe-black);color:#fff;padding:2rem;justify-content:space-between;}
.le-card-dark h3{margin:0 0 .5em;color:#fff;}
.le-card-dark > p{color:#c9c6bd;flex:1 0 auto;}
.le-card-dark small{color:var(--luxe-gold-light);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;}
.le-card-dark .le-btn{margin-top:1.4rem;align-self:flex-start;margin-top:auto;}

/* ------------------------------------------------------------ Gallery - */
.le-gallery-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem;}
.le-gallery-tabs button{padding:.6em 1.3em;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;background:rgba(217,207,193,.35);color:var(--luxe-black);border:0;cursor:pointer;transition:background .25s,color .25s;}
.le-gallery-tabs button[aria-selected="true"]{background:var(--luxe-black);color:#fff;}
.le-gallery-tabs button:hover,.le-gallery-tabs button:active{background:var(--luxe-gold);color:#fff;}
.le-gallery-grid{display:flex;flex-wrap:wrap;gap:1.8rem;list-style:none;margin:0;padding:0;justify-content:flex-start;}
.le-gallery-item{position:relative;overflow:hidden;flex:1 1 300px;max-width:calc(33.333% - 1.2rem);min-width:260px;aspect-ratio:3/4;}
@media (max-width:760px){.le-gallery-item{max-width:100%;}}
@media (min-width:761px) and (max-width:1023px){.le-gallery-item{max-width:calc(50% - 0.9rem);}}
.le-gallery-item.is-hidden{display:none;}
.le-gallery-item a{display:block;width:100%;height:100%;color:inherit;text-decoration:none;}
.le-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.le-gallery-item:hover img{transform:scale(1.05);}
.le-gallery-caption{position:absolute;inset:auto 0 0 0;padding:1.5rem;background:linear-gradient(to top, rgba(15,15,15,.88), rgba(15,15,15,0));color:#fff;}
.le-gallery-caption small{color:var(--luxe-gold-light);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;}
.le-gallery-caption h3{color:#fff;margin:.3em 0 0;font-size:1.15rem;}

/* ------------------------------------------------------------- Compose - */
.le-compose-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:stretch;}
@media (min-width:900px){.le-compose-grid{grid-template-columns:1fr 1fr 1.1fr;}}
.le-compose-item{display:flex;flex-direction:column;background:var(--luxe-cream);border:1px solid rgba(217,207,193,.5);transition:box-shadow .3s,transform .3s;}
.le-compose-item:hover{box-shadow:0 20px 44px rgba(15,15,15,.1);transform:translateY(-2px);}
.le-compose-item > a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;}
.le-compose-item figure{aspect-ratio:4/3;overflow:hidden;margin:0;}
.le-compose-item figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.le-compose-item:hover figure img{transform:scale(1.06);}
.le-compose-item-body{padding:1.5rem;display:flex;flex-direction:column;flex:1;}
.le-compose-item-body small{text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--luxe-gold);font-weight:600;}
.le-compose-item-body h3{font-size:1.1rem;margin:.5em 0;}
.le-compose-item-body p{margin:0;color:#6b665c;font-size:.86rem;font-weight:300;}
.le-compose-panel{background:var(--luxe-black);color:#fff;padding:2.2rem;display:flex;flex-direction:column;justify-content:center;}
.le-compose-panel h3{color:#fff;font-size:1.3rem;margin:.4em 0 .8em;}
.le-compose-panel p{color:#cfccc3;font-size:.86rem;font-weight:300;margin-bottom:1.4rem;}

/* ----------------------------------------------------------- Citylinks */
.le-citylinks{display:flex;flex-wrap:wrap;gap:.8rem;list-style:none;margin:1.6rem 0 0;padding:0;}
.le-citylinks a{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.3em;border:1px solid rgba(217,207,193,.6);font-size:.78rem;letter-spacing:.02em;color:var(--luxe-black);}
.le-citylinks a i{color:var(--luxe-gold);font-size:.78rem;}
.le-citylinks a:hover{border-color:var(--luxe-gold);color:var(--luxe-gold);}

/* --------------------------------------------------------------- FAQ -- */
.le-faq{list-style:none;margin:0;padding:0;max-width:820px;}
.le-faq li{border-bottom:1px solid rgba(217,207,193,.6);}
.le-faq summary{cursor:pointer;padding:1.3rem 2.2rem 1.3rem 0;font-family:var(--font-display);font-size:1.05rem;color:var(--luxe-black);position:relative;list-style:none;}
.le-faq summary::-webkit-details-marker{display:none;}
.le-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--luxe-gold);}
.le-faq details[open] summary::after{content:"\2013";}
.le-faq p{margin:0 0 1.5rem;color:#6b665c;font-size:.9rem;font-weight:300;line-height:1.75;max-width:70ch;}

/* ------------------------------------------------------------- Prose -- */
/* .le-prose is applied both to a whole <section> (product, zone, chauffage
   and à-propos pages) and to an inner .le-container (legal pages, which
   pass their own narrower inline max-width and so are unaffected here).
   It used to cap the section itself at 760px with no margin:auto, which
   collapsed it to the left edge instead of centering it (the "not
   centered" bug) — and even once centered, 760px didn't match the full
   width of the FAQ/city-links sections right below it on the same page,
   so the two blocks had visibly different widths/left edges. Rather than
   pick a second, narrower width for those sections too, .le-prose now
   just takes the full standard container width like everything else on
   the page — one width, used everywhere — which also gives the 5-column
   "En bref" grid enough room to stop looking cramped. */
.le-prose figure{margin:0 0 2.4rem;}
.le-prose figure img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.le-prose figcaption{font-size:.78rem;color:#8a8477;margin-top:.6rem;}
.le-prose h2{font-size:1.65rem;margin-top:2.2em;}
.le-prose h2:first-of-type{margin-top:0;}
.le-prose h3{font-size:1.15rem;}
.le-prose p{margin:0 0 1.2em;color:#4a4740;font-size:.96rem;font-weight:300;line-height:1.8;}
.le-prose strong{color:var(--luxe-black);font-weight:600;}
.le-prose em{font-style:italic;}
.le-prose ul,.le-prose ol{margin:0 0 1.4em;padding-left:1.3em;color:#4a4740;font-size:.96rem;font-weight:300;line-height:1.75;}
.le-prose li{margin-bottom:.5em;}
.le-prose li strong{color:var(--luxe-black);}
.le-note{font-size:.78rem;color:#8a8477;}

/* ------------------------------------------------------------ Table --- */
.le-table-wrap{overflow-x:auto;margin:1.6rem 0 2rem;}
.le-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.le-table th{background:var(--luxe-black);color:#fff;text-align:left;padding:.8em 1em;font-weight:600;text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;}
.le-table td{padding:.8em 1em;border-bottom:1px solid rgba(217,207,193,.6);color:#4a4740;}
.le-table tr:nth-child(even) td{background:rgba(217,207,193,.18);}

/* --------------------------------------------------- Product variants - */
.le-variant{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;margin-bottom:3.4rem;padding-bottom:3.4rem;border-bottom:1px solid rgba(217,207,193,.5);}
.le-variant:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
@media (min-width:860px){
  .le-variant{grid-template-columns:.85fr 1.15fr;gap:3.2rem;}
  .le-variant:nth-child(even) .le-variant-media{order:2;}
  .le-variant:nth-child(even) .le-variant-body{order:1;}
  .le-variant-media{position:sticky;top:calc(var(--le-header-h) + 1.5rem);}
}
.le-variant-media{overflow:hidden;aspect-ratio:4/3;}
.le-variant-media img{width:100%;height:100%;object-fit:cover;}
.le-variant-body h3{font-size:1.5rem;margin-top:0;}
.le-variant-specs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem;list-style:none;margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(217,207,193,.6);}
.le-variant-specs li{display:flex;align-items:flex-start;gap:.7em;font-size:.84rem;color:#4a4740;}
.le-variant-specs li i{color:var(--luxe-gold);font-size:1rem;margin-top:.15em;flex:0 0 auto;}
.le-variant-specs strong{display:block;color:var(--luxe-black);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;}

/* --------------------------------------------------------- Icon lists - */
.le-icon-list{list-style:none;margin:1.6rem 0;padding:0;display:grid;gap:1.4rem;}
.le-icon-list.le-icon-grid{grid-template-columns:1fr;}
@media (min-width:720px){.le-icon-list.le-icon-grid{grid-template-columns:1fr 1fr;}}
.le-icon-list li{display:flex;gap:1em;align-items:flex-start;}
.le-icon-list li i{color:var(--luxe-gold);font-size:1.1rem;margin-top:.2em;flex:0 0 auto;}
.le-icon-list .le-icon-label{display:block;font-weight:600;color:var(--luxe-black);margin-bottom:.15em;}
.le-icon-list p{margin:0;color:#4a4740;font-size:.9rem;font-weight:300;line-height:1.7;}

.le-brief-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin:1.8rem 0 2.6rem;}
@media (min-width:620px){.le-brief-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.le-brief-grid{grid-template-columns:repeat(5,1fr);}}
.le-brief-grid > li{display:flex;}
.le-brief-card{display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid rgba(217,207,193,.5);padding:1.4rem 1.2rem;width:100%;}
.le-brief-card i{color:var(--luxe-gold);font-size:1.3rem;}
.le-brief-card strong{font-size:.8rem;color:var(--luxe-black);}
.le-brief-card p{margin:0;font-size:.82rem;color:#5b574f;font-weight:300;line-height:1.55;}

/* ------------------------------------------------------------- Footer - */
.le-footer{background:var(--luxe-black);color:#c9c6bd;padding:5rem 0 2rem;}
.le-footer-top{display:grid;grid-template-columns:1fr;gap:2.8rem;padding-bottom:3.4rem;border-bottom:1px solid rgba(255,255,255,.1);}
@media (min-width:860px){.le-footer-top{grid-template-columns:1.3fr 1fr 1fr 1.1fr;}}
.le-footer-brand{font-family:var(--font-display);font-size:1.45rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 .8em;}
.le-footer-brand em{color:var(--luxe-gold);font-style:normal;}
.le-footer address{font-style:normal;font-size:.84rem;line-height:1.9;color:#a9a69c;}
.le-footer address a{color:#fff;}
.le-footer-social{display:flex;gap:.9rem;margin-top:1.3rem;}
.le-footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.18);color:var(--luxe-gold);}
.le-footer-social a:hover,.le-footer-social a:active{background:var(--luxe-gold);color:#fff;border-color:var(--luxe-gold);}
.le-footer h4{color:#fff;font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;margin:0 0 1.2em;}
.le-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em;}
.le-footer ul a{font-size:.82rem;color:#a9a69c;}
.le-footer ul a:hover,.le-footer ul a:active{color:var(--luxe-gold);}
.le-footer-contact-block p{font-size:.84rem;color:#a9a69c;margin:0 0 1.2em;line-height:1.7;}
.le-footer-contact-block .le-cta-pair{margin-top:0;flex-direction:column;}
.le-footer-contact-block .le-btn{width:100%;}
.le-footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:2rem;font-size:.74rem;color:#716e66;}
.le-footer-bottom ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.4rem;list-style:none;margin:0;padding:0;}
.le-footer-bottom a{color:#9b988f;}
.le-footer-bottom a:hover,.le-footer-bottom a:active{color:var(--luxe-gold);}

.le-google-review{display:inline-flex;align-items:center;gap:.6em;margin-top:1.1rem;padding:.6em 1.1em;border:1px solid rgba(255,255,255,.18);font-size:.76rem;color:#fff;}
.le-google-review i{color:#fff;font-size:.95rem;}
.le-google-review:hover,.le-google-review:active{border-color:var(--luxe-gold);color:var(--luxe-gold);}
.le-google-review:hover i,.le-google-review:active i{color:var(--luxe-gold);}

@media (max-width:859px){
  .le-footer-top{text-align:center;}
  .le-footer-top > div{display:flex;flex-direction:column;align-items:center;}
  .le-footer ul{align-items:center;}
  .le-footer-social{justify-content:center;}
  .le-footer-bottom{justify-content:center;text-align:center;}
  .le-footer-bottom ul{justify-content:center;}
}

/* ------------------------------------------------- Social/reviews embeds */
.le-social-embed{min-height:220px;}
.le-social-follow{text-align:center;margin:1.6rem 0 0;}
.le-social-follow a{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--luxe-black);}
.le-social-follow a:hover,.le-social-follow a:active{color:var(--luxe-gold);}
.le-social-follow i{color:var(--luxe-gold);font-size:.95rem;}
.le-reviews-embed{min-height:260px;}

/* --------------------------------------------------------- Form embed - */
.le-form-embed{background:#fff;border:1px solid rgba(217,207,193,.5);padding:1.6rem;min-height:420px;}
.le-contact-info{background:#fff;border:1px solid rgba(217,207,193,.5);padding:1.8rem;}
.le-contact-info address{font-style:normal;font-size:.95rem;line-height:2;color:#4a4740;}
.le-contact-info address a{color:var(--luxe-black);font-weight:600;}
.le-contact-info .le-btn{margin-top:1.4rem;width:100%;}
.le-devis-side{display:flex;flex-direction:column;gap:2rem;}

/* --------------------------------------------------- Scroll/load reveal */
/* Classes added by assets/js/reveal.js. If that script never runs (JS
   disabled, no IntersectionObserver), these elements simply never get
   .le-reveal and render normally — no FOUC, nothing to undo. */
.le-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1);transition-delay:var(--reveal-delay,0ms);}
.le-reveal.is-visible{opacity:1;}
/* transform:none kept separate from opacity, and :not(:hover): a card's
   own :hover transform (e.g. .le-card:hover's lift) has equal specificity,
   so without this exclusion the later rule always won here, silently
   cancelling the hover lift on every revealed card. */
.le-reveal.is-visible:not(:hover){transform:none;}
@media (prefers-reduced-motion:reduce){
  .le-reveal{opacity:1;transform:none;transition:none;}
}