﻿/* assets/css/immobilier.css — renforts spécifiques à la page Immobilier */

/* =====================
Swiper tweaks
===================== */
/* .immobilier .featured-listings .carousel-viewport { overflow: visible !important; }
.immobilier .featured-listings .swiper-wrapper { display: flex; gap: var(--gap); }
.immobilier .featured-listings .swiper-slide {
width: 23rem;
margin-right: 0 !important;
} */

/* =====================
Panels (SPA onglets)
===================== */
.immobilier .panels {
position: relative;
}

/* (Transitions désactivées pour le moment)
.immobilier .panels .panel{
opacity: 0;
transform: translateY(12px);
transition: opacity 300ms ease-out, transform 300ms ease-out;
will-change: opacity, transform;
}
.immobilier .panels .panel.is-active{
opacity: 1;
transform: translateY(0);
}
*/

/* Quand hidden est présent, on ne l’affiche pas */
.immobilier .panels .panel[hidden] {
display: none;
}

/* =========================================
GRILLE DE 4 CARDS
========================================= */
.luxury__cards-grid {
display: grid;
grid-template-columns: repeat(2, 534px);
grid-template-rows: repeat(2, 732px);
gap: 40px 40px;
justify-content: center;
margin-top: 4rem;
}

.luxury__card {
position: relative;
width: 534px;
height: 732px;
border-radius: 24px;
overflow: hidden;
background: center/cover no-repeat var(--card-bg);
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
}

/* Décalage des cards de droite */
.luxury__card--offset {
margin-top: 80px;
}

.luxury__card_overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0) 100%
);
}

.luxury__card_content {
position: relative;
z-index: 2;
padding: 2rem;
text-align: left;
}

.luxury__card-title {
margin: 0 0 1rem;
font-family: "Big Caslon", serif;
font-weight: 500;
font-size: 40px;
line-height: 36px;
}

.luxury__card-text {
margin: 0 0 1rem;
font: 400 16px/24px Montserrat, sans-serif;
max-width: 90%;
}

.luxury__card-link {
font: 600 16px Montserrat, sans-serif;
color: #fff;
}
.luxury__card-link:hover {
opacity: 0.9;
text-decoration: underline;
color: #f1f1f1;
}

/* Ellipses décoratives (page Louer) */
.louer-cards-ellipses {
position: relative;
isolation: isolate;
z-index: 0;
--ellipse-size: 47rem;
--ellipse-color: rgba(243, 204, 135, 0.6);
--ellipse-blur: 300px;
--ellipse-left-top: 22rem;
--ellipse-right-bottom: 0rem;
}
.louer-cards-ellipses::before {
content: "";
position: absolute;
width: var(--ellipse-size);
height: var(--ellipse-size);
left: -20rem;
top: var(--ellipse-left-top);
background: var(--ellipse-color);
border-radius: 50%;
filter: blur(var(--ellipse-blur));
z-index: -1;
}
.louer-cards-ellipses::after {
content: "";
position: absolute;
width: var(--ellipse-size);
height: var(--ellipse-size);
right: -22rem;
bottom: var(--ellipse-right-bottom);
background: var(--ellipse-color);
border-radius: 50%;
filter: blur(var(--ellipse-blur));
z-index: -1;
}

/* =========================================================
Accessibilité
========================================================= */
.immobilier .panels .panel {
transition: none;
transform: none;
padding: 0;
}

/* =========================================================
Base générique tabs (overlay héro)
========================================================= */

/* Evite les micro-sauts de scroll quand le contenu bouge */
.immobilier .panel,
.immobilier .featured-listings,
.immobilier .luxury__cards-grid,
.immobilier .testimonials {
overflow-anchor: none;
}

/* Bouton/tab "biens" */
.luxury__tab.biens {
min-height: 19px;
padding: 0.7em;
}

/* Etat flex item des boutons */
.panel--biens .luxury__tab,
.journal .luxury__tab,
.panel--standalone .luxury__tabs-link {
flex: 0 0 auto;
}

.biens .bloc__hero {
max-width: 100%;
padding: 34px 3rem 22px;
}
/* =========================================================
≤ 1440px — scroll horizontal, flèches & scrollbars (Immobilier + Journal)
========================================================= */
.luxury__tabs {
position: absolute;
left: 50%;
bottom: 1.625rem;
transform: translateX(-50%);
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 0.625rem;
white-space: nowrap;
padding: 1.125rem 1.25rem;
border-radius: var(--radius-sm);
background: #fff;
box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.1);
z-index: 2;
}

.luxury__tabs-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.4375rem;
padding: 0.0625rem clamp(1rem, 4.5vw, 3.34375rem);
border-radius: var(--radius-sm);
border: 0;
background: #fff;
color: var(--color-text);
font-weight: 600;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.luxury__tabs-link:hover {
background: rgba(0, 76, 102, 0.08);
}

.luxury__tabs-link.is-active {
background: #004c66;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
cursor: default;
}
@media (max-width: 1680px) {
.panel--biens .luxury__tabs,
.journal .luxury__tabs,
.panel--standalone .luxury__tabs {
      --tabs-pad: clamp(1rem, 2.8vw, 1.875rem);
        overflow-x: auto;
        overflow-y: hidden;
        padding-inline: var(--tabs-pad);
        scroll-padding-inline: var(--tabs-pad);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        width: auto;
        max-width: calc(100% - 80px);
}

.panel--biens .luxury__tabs::-webkit-scrollbar,
.journal .luxury__tabs::-webkit-scrollbar,
.panel--standalone .luxury__tabs::-webkit-scrollbar {
height: 6px;
}

.panel--biens .luxury__tabs::-webkit-scrollbar-thumb,
.journal .luxury__tabs::-webkit-scrollbar-thumb,
.panel--standalone .luxury__tabs::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 999px;
}

.panel--biens .luxury__tabs::before,
.panel--biens .luxury__tabs::after,
.journal .luxury__tabs::before,
.journal .luxury__tabs::after,
.panel--standalone .luxury__tabs::before,
.panel--standalone .luxury__tabs::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: clamp(2rem, 5vw, 3rem);
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
background-position: center;
background-repeat: no-repeat;
}

.panel--biens .luxury__tabs::before,
.journal .luxury__tabs::before,
.panel--standalone .luxury__tabs::before {
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M14 6 8 12l6 6' stroke='%23004c66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 14px 14px;
}

.panel--biens .luxury__tabs::after,
.journal .luxury__tabs::after,
.panel--standalone .luxury__tabs::after {
right: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M10 6l6 6-6 6' stroke='%23004c66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 14px 14px;
}

.panel--biens .luxury__tabs.is-scrollable::after,
.journal .luxury__tabs.is-scrollable::after,
.panel--standalone .luxury__tabs.is-scrollable::after {
opacity: 0.7;
}

.panel--biens .luxury__tabs.is-scroll-left::before,
.journal .luxury__tabs.is-scroll-left::before,
.panel--standalone .luxury__tabs.is-scroll-left::before {
opacity: 0.7;
}

.panel--biens .luxury__tabs:not(.is-scroll-right)::after,
.journal .luxury__tabs:not(.is-scroll-right)::after,
.panel--standalone .luxury__tabs:not(.is-scroll-right)::after,
.panel--biens .luxury__tabs:not(.is-scroll-left)::before,
.journal .luxury__tabs:not(.is-scroll-left)::before,
.panel--standalone .luxury__tabs:not(.is-scroll-left)::before {
opacity: 0;
}
}
.bloc__hero {
position: relative;
text-align: center;
padding: clamp(4rem, 8vw, 6rem) 0 2rem;
}

.bloc__hero-content {
position: relative;
z-index: 2;
max-width: 52rem;
margin: 0 auto;
color: #fff;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-inline: clamp(1rem, 5vw, 3rem);
}

.bloc__hero-eyebrow {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.7);
}

.bloc__hero-title {
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.2;
color: #fff;
}

.services__hero-text {
color: rgba(255, 255, 255, 0.85);
margin-bottom: 0;
}

.luxury__tabs {
margin-top: clamp(2rem, 5vw, 3rem);
}

.bloc__intro-eyebrow {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-muted, #9aa1a6);
margin-bottom: 1.25rem;
display: inline-block;
}


/* 21 dec */
.luxury-mega.is-open .luxury-mega-panel{
  height: auto;
  max-height: 100%;
  overflow: auto;
}
.intro__text p {
  line-height: 1.4;
}
@media only screen and (max-width:1024px){
.luxury__cards-grid.six_cards, .luxury__cards-grid{
  width: 100%;
}
.luxury__advice  .advice__grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 3rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  justify-items: center;
}
.advice__grid > .luxury__card--offset {
  margin-top: 0;
}
body .journal-grid, body .luxury__advice .advice__grid{
row-gap: 40px;
}
body .luxury__advice .advice__grid{
  display: block;
  margin-bottom: 2.5rem;
  padding: 0 2rem;
}
.advice__grid > .advice__card {
  float: none;
  /* width: min(80vw, 980px);
  max-width: min(80vw, 980px); */
  margin-left: auto;
  margin-right: auto;
  scroll-snap-align: start;
}
}
@media only screen and (max-width:767px){
.luxury__advice .advice__grid {
  padding: 0 2rem;
}
.process__inner{
  scale: 1;
}
}
@media only screen and (max-width:575px){
.advice__card {
  width: 100%;
  max-width: 100%;
}
}
@media only screen and (max-width:767px){
.footer-col--split .footer-split-wrapper {
  grid-template-columns: repeat(1, max-content);
  gap: 10px;
}
}