:root {
--vert: #4D5C00;
--vert-fonce: #3d4a00;
--vert-textes: #293100;
--brun-orange: #A47817;
--bleu-fondation: #003750;
--creme: #ffffff;
--creme-clair: #ffffff;
--sable: #d4a55a;
--orange: #f28e00;
--orange-fonce: #E08300;
--blanc: #fefefe;
--noir: #1f1f1f;
--container: 1440px;
--container-pad: 60px;
/* fond global blanc */
--bg-warm: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-warm);
color: var(--noir);
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
img { display: block; max-width: 100%; height: auto; }
/* ============================================
HERO — full bleed background, content max 1440 centered
============================================ */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 720px;
overflow: hidden;
background: var(--bg-warm);
isolation: isolate;
}
/* ---------- Décor full bleed (au bord du viewport) ---------- */
.hero__decor {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero__deco {
position: absolute;
left: 51%;
top: 50%;
transform: translate(-50%, -50%);
width: clamp(820px, 82vw, 1200px);
height: auto;
z-index: 1;
pointer-events: none;
}
.hero__villa {
position: absolute;
height: auto;
z-index: 1;
opacity: 0.4;
pointer-events: none;
}
.hero__villa--main {
/* villa-vert-1 — bord gauche, BAS du viewport */
width: 9vw;
max-width: 174px;
min-width: 90px;
left: 1vw;
bottom: 4vh;
}
.hero__villa--small {
/* villa-vert-2 : petit wing — bord droit, HAUT du viewport */
width: 18vw;
max-width: 280px;
min-width: 180px;
right: -2vw;
top: 12vh;
}
/* ---------- Titre bicolore ---------- */
.hero__title-layer {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.hero__title-layer--front { z-index: 5; }
.hero__title {
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(56px, 8.5vw, 140px);
line-height: 1;
letter-spacing: 0.005em;
text-align: center;
white-space: nowrap;
max-width: var(--container);
}
.hero__title--green { color: var(--vert); }
.hero__title--white { color: var(--blanc); }
/* ---------- Couche masquée ---------- */
.hero__masked {
position: absolute;
inset: 0;
z-index: 4;
-webkit-mask-image: url(#hero-mask);
mask-image: url(#hero-mask);
-webkit-mask-mode: luminance;
mask-mode: luminance;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Mode fallback Safari/iOS : la classe .is-safari-fallback est posée par le JS sur
uniquement si le browser est Safari (macOS) ou iOS.
Le mask-image data URL + mask-size sont posés et animés par JS (voir main.js). */
.is-safari-fallback .hero__masked {
-webkit-mask-mode: alpha;
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.hero__video-wrap { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__subtitle {
position: absolute;
left: 50%;
bottom: 14vh;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.22em;
white-space: nowrap;
}
.hero__subtitle-dot { opacity: 0.8; font-weight: 400; }
.hero__subtitle-orn { display: inline-flex; color: var(--blanc); transform: translateY(-1px); }
.hero__mask-outline {
position: absolute;
inset: 0;
z-index: 6;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
.hero__pause {
position: absolute;
z-index: 7;
top: 32%;
left: 60%;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--blanc);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, transform 0.25s ease;
}
.hero__pause:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); }
/* ============================================
NAV — full bleed bg, content 1440 centered
============================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
height: 145px;
pointer-events: none;
}
.nav__shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: auto;
}
.nav__inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
height: 90px; /* zone où se placent les liens, au-dessus de la courbe basse */
display: flex;
align-items: center;
justify-content: space-between;
color: var(--blanc);
pointer-events: auto;
}
.nav__links {
display: flex;
align-items: center;
gap: 48px;
font-family: 'Amarante', serif;
font-size: 17px;
white-space: nowrap;
flex-shrink: 0;
}
.nav__links a {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: opacity 0.25s ease;
line-height: 1;
}
.nav__links a:hover { opacity: 0.75; }
.nav__bullet {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--blanc);
}
.nav__links li:not(.is-active) .nav__bullet { visibility: hidden; }
.nav__logo {
position: absolute;
left: 50%;
top: 22px;
transform: translateX(-50%);
width: 78px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: auto;
}
.nav__logo img { width: 100%; height: auto; display: block; }
/* Bandes verticales blanches autour du logo dans le header */
.nav__logo::before, .nav__logo::after {
content: "";
position: absolute;
top: -21px;
bottom: -37px;
width: 1px;
background: #fff;
pointer-events: none;
}
.nav__logo::before { left: -51px; }
.nav__logo::after { right: -51px; }
.nav__actions {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
.nav__cta {
display: inline-flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 22px;
border: 1px solid var(--blanc);
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
transition: background-color 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.nav__cta:hover { background: var(--blanc); color: var(--vert); }
.nav__cta img { transition: transform 0.25s ease; }
.nav__cta:hover img { transform: translateX(4px); }
.nav__phone {
font-family: 'Amarante', serif;
font-size: 16px;
white-space: nowrap;
color: var(--blanc);
}
/* ---------- Burger (mobile) ---------- */
.nav__burger {
display: none;
position: absolute;
z-index: 4;
top: 28px;
right: 20px;
width: 44px;
height: 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
pointer-events: auto;
}
.nav__burger-bar {
display: block;
width: 24px;
height: 2px;
background: var(--blanc);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}
.nav.is-open .nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Panneau mobile ---------- */
.nav__mobile {
position: fixed;
inset: 0;
z-index: 3;
background: var(--vert);
color: var(--blanc);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 48px;
padding: 100px 32px 48px;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
pointer-events: none;
overflow-y: auto;
}
.nav.is-open .nav__mobile {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav__mobile[hidden] { display: flex; } /* on garde flex et on pilote via .is-open */
.nav__mobile-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
font-family: 'Amarante', serif;
font-size: 28px;
line-height: 1.1;
text-align: center;
}
.nav__mobile-links a {
display: inline-block;
transition: opacity 0.2s ease;
}
.nav__mobile-links a:hover { opacity: 0.75; }
.nav__mobile-links li.is-active a {
position: relative;
}
.nav__mobile-links li.is-active a::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--blanc);
}
.nav__mobile-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-top: 8px;
}
.nav__mobile-cta {
display: inline-flex;
align-items: center;
gap: 12px;
height: 48px;
padding: 0 26px;
border: 1px solid var(--blanc);
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
transition: background 0.25s ease, color 0.25s ease;
}
.nav__mobile-cta:hover { background: var(--blanc); color: var(--vert); }
.nav__mobile-phone {
font-family: 'Amarante', serif;
font-size: 18px;
color: var(--blanc);
}
/* ============================================
SECTION 2 — INTRO (vert en haut, blanc-warm en bas)
============================================ */
.intro {
position: relative;
color: var(--blanc);
background: var(--bg-warm);
overflow: visible;
}
.intro__green {
background: var(--vert);
height: 666px; /* fixé selon Figma à 1440 viewport */
padding: 96px 0 0;
display: flex;
align-items: flex-start;
justify-content: center;
}
.intro__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
}
/* Label haut "Organisation..." */
.intro__label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.intro__label-icon {
display: inline-flex;
align-items: center;
line-height: 0;
}
.intro__label-text {
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
}
/* Texte principal scroll-progress (mot par mot, dim → bright) */
.intro__text {
width: 100%;
max-width: 924px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: 600;
text-transform: uppercase;
margin-top: 8px;
color: #8A8E76;
}
.intro__word {
display: inline-block;
color: #8A8E76;
transition: color 0.18s linear;
}
/* Wrapper villa : straddle entre la zone verte et la zone blanche
Calcul : bandeau vert = 666px ; on veut que la pointe de la maison soit à
60px sous le bas du texte (texte à ~Y=270 au max → pointe à ~Y=330).
On remonte donc le wrapper de (666 - 330) = -336px. */
.intro__villa-wrap {
position: relative;
width: 100%;
margin-top: -336px;
padding: 0 var(--container-pad);
display: flex;
justify-content: center;
}
.intro__villa {
position: relative;
width: 100%;
max-width: 1240px;
aspect-ratio: 1240 / 826;
}
.intro__villa-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* ---------- Hotspots numérotés + animés ---------- */
.intro__hotspot {
position: absolute;
left: var(--x);
top: var(--y);
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
padding: 0;
border: 0;
background: transparent;
border-radius: 50%;
cursor: pointer;
z-index: 4;
-webkit-tap-highlight-color: transparent;
}
/* Halo crème (ripple) */
.intro__hotspot::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #FFE8B4;
transform: scale(1);
transform-origin: center;
animation: hotspotRipple 2.4s ease-out infinite;
}
/* Dot orange + numéro */
.intro__hotspot::after {
content: attr(data-num);
position: absolute;
inset: 50% 50% auto auto;
transform: translate(50%, -50%);
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
color: #FEFEFE;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
border-radius: 50%;
background: var(--orange);
box-shadow: 0 2px 8px rgba(242, 142, 0, 0.35);
animation: hotspotBeat 2.4s ease-in-out infinite;
}
.intro__hotspot:hover::before { animation-play-state: paused; transform: scale(1.45); opacity: 0.6; }
.intro__hotspot:hover::after { animation-play-state: paused; transform: translate(50%, -50%) scale(1.15); }
.intro__hotspot:focus-visible { outline: 2px solid var(--vert); outline-offset: 4px; }
/* Stagger des délais pour pas que tout pulse en même temps */
.intro__hotspot:nth-child(2)::before,
.intro__hotspot:nth-child(2)::after { animation-delay: 0.2s; }
.intro__hotspot:nth-child(3)::before,
.intro__hotspot:nth-child(3)::after { animation-delay: 0.4s; }
.intro__hotspot:nth-child(4)::before,
.intro__hotspot:nth-child(4)::after { animation-delay: 0.6s; }
.intro__hotspot:nth-child(5)::before,
.intro__hotspot:nth-child(5)::after { animation-delay: 0.8s; }
.intro__hotspot:nth-child(6)::before,
.intro__hotspot:nth-child(6)::after { animation-delay: 1.0s; }
.intro__hotspot:nth-child(7)::before,
.intro__hotspot:nth-child(7)::after { animation-delay: 1.2s; }
@keyframes hotspotRipple {
0% { transform: scale(0.8); opacity: 0.85; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
@keyframes hotspotBeat {
0%, 100% { transform: translate(50%, -50%) scale(1); box-shadow: 0 2px 8px rgba(242, 142, 0, 0.35); }
50% { transform: translate(50%, -50%) scale(1.08); box-shadow: 0 4px 14px rgba(242, 142, 0, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
.intro__hotspot::before { animation: none; opacity: 0.65; }
.intro__hotspot::after { animation: none; }
}
/* ---------- CTA bloc ---------- */
.intro__cta {
background: var(--bg-warm);
padding: 60px 0 100px;
}
.intro__cta .intro__inner {
gap: 24px;
}
.intro__cta-text {
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
text-align: center;
max-width: 720px;
}
.intro__cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 22px;
border: 1px solid var(--vert);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
transition: background-color 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.intro__cta-btn:hover { background: var(--vert); color: var(--blanc); }
.intro__cta-btn img {
/* la flèche est blanche dans le SVG → on la teinte en vert via filter */
filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(1080%) hue-rotate(35deg) brightness(95%) contrast(95%);
transition: filter 0.25s ease, transform 0.25s ease;
}
.intro__cta-btn:hover img {
filter: none;
transform: translateX(4px);
}
/* ============================================
SECTION 3 — CAROUSEL (full bleed)
============================================ */
.carousel {
position: relative;
background: var(--bg-warm);
padding: 80px 0 100px;
overflow-x: clip;
}
.carousel__inner {
position: relative;
/* full width — la galerie déborde des bords du viewport */
}
.carousel__track {
position: relative;
width: 100%;
height: clamp(300px, 28.65vw, 818px); /* hauteur du slot lg = la viewport du carrousel */
overflow: hidden;
user-select: none;
-webkit-user-select: none;
cursor: grab;
}
.carousel__track.is-dragging { cursor: grabbing; }
.carousel__photo {
position: absolute;
top: 50%;
left: 0;
margin: 0;
overflow: hidden;
background: rgba(0,0,0,0.06);
transform: translateY(-50%);
will-change: left, width, height, opacity;
transition:
left 0.7s cubic-bezier(0.65, 0, 0.35, 1),
width 0.7s cubic-bezier(0.65, 0, 0.35, 1),
height 0.7s cubic-bezier(0.65, 0, 0.35, 1),
opacity 0.5s ease;
}
.carousel__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}
.carousel__photo.is-warping { transition: none !important; }
/* Slots — mirror xs / md / lg / md / xs centré sur 50vw, sans gaps.
À 1440 viewport : xs=145, md=260, lg=628. */
.carousel__photo[data-slot="0"] { left: 0vw; width: clamp(110px, 10vw, 290px); height: clamp(144px, 13.1vw, 380px); opacity: 1; z-index: 1; }
.carousel__photo[data-slot="1"] { left: 10vw; width: clamp(200px, 18vw, 520px); height: clamp(254px, 22.85vw, 660px); opacity: 1; z-index: 2; }
.carousel__photo[data-slot="2"] { left: 28vw; width: clamp(460px, 44vw, 1256px); height: clamp(300px, 28.65vw, 818px); opacity: 1; z-index: 3; }
.carousel__photo[data-slot="3"] { left: 72vw; width: clamp(200px, 18vw, 520px); height: clamp(254px, 22.85vw, 660px); opacity: 1; z-index: 2; }
.carousel__photo[data-slot="4"] { left: 90vw; width: clamp(110px, 10vw, 290px); height: clamp(144px, 13.1vw, 380px); opacity: 1; z-index: 1; }
/* Slots tampons hors viewport pour le wrap loop */
.carousel__photo[data-slot="-1"] { left: -25vw; width: clamp(110px, 10vw, 290px); height: clamp(144px, 13.1vw, 380px); opacity: 0; z-index: 0; }
.carousel__photo[data-slot="5"] { left: 110vw; width: clamp(110px, 10vw, 290px); height: clamp(144px, 13.1vw, 380px); opacity: 0; z-index: 0; }
@media (max-width: 880px) {
/* Réduit l'espace entre la section intro (CTA "Demander un devis") et le carousel */
.intro__cta { padding: 36px 0 40px; }
.carousel { padding: 24px 0 60px; }
/* Mobile / tablette portrait : la slot centrale (2) est centrée et la plus grosse,
les latérales (1 et 3) peep à 8vw de chaque côté, les extrémités (0 et 4) sortent. */
.carousel__track { height: clamp(280px, 50vw, 480px); }
.carousel__photo[data-slot="0"] { left: -50vw; width: 28vw; height: 36vw; opacity: 0; z-index: 0; }
.carousel__photo[data-slot="1"] { left: -20vw; width: 28vw; height: 36vw; opacity: 0.55; z-index: 2; }
.carousel__photo[data-slot="2"] { left: 15vw; width: 70vw; height: 46vw; opacity: 1; z-index: 3; }
.carousel__photo[data-slot="3"] { left: 92vw; width: 28vw; height: 36vw; opacity: 0.55; z-index: 2; }
.carousel__photo[data-slot="4"] { left: 122vw; width: 28vw; height: 36vw; opacity: 0; z-index: 0; }
.carousel__photo[data-slot="-1"] { left: -100vw; opacity: 0; }
.carousel__photo[data-slot="5"] { left: 180vw; opacity: 0; }
}
/* Bouton sticker "Faites défiler" — version statique ancrée à droite */
.carousel__cta {
position: absolute;
top: 50%;
right: 60px;
transform: translateY(-50%) rotate(-15deg) scale(1);
width: 130px;
height: 130px;
border: 0;
padding: 0;
border-radius: 50%;
background: var(--orange);
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--blanc);
cursor: pointer;
box-shadow: 0 12px 30px rgba(242, 142, 0, 0.35);
z-index: 5;
opacity: 1;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease;
}
/* Variante "curseur" — clone JS, position fixed, suit la souris */
.carousel__cta--cursor {
position: fixed;
top: var(--cursor-y, -200px);
left: var(--cursor-x, -200px);
right: auto !important;
transform: translate(-50%, -50%) rotate(-15deg) scale(0);
opacity: 0;
pointer-events: none;
z-index: 9999;
cursor: none;
}
/* Mode curseur actif : on cache le curseur natif sur la zone, le clone scale up,
le sticker statique fade out */
.carousel__inner.is-cursor-mode { cursor: none; }
.carousel__inner.is-cursor-mode * { cursor: none; }
.carousel__inner.is-cursor-mode .carousel__cta:not(.carousel__cta--cursor) {
transform: translateY(-50%) rotate(-15deg) scale(0.6);
opacity: 0;
pointer-events: none;
}
.carousel__inner.is-cursor-mode .carousel__cta--cursor {
transform: translate(-50%, -50%) rotate(-15deg) scale(1);
opacity: 1;
}
.carousel__inner.is-cursor-mode .carousel__cta--cursor:active {
transform: translate(-50%, -50%) rotate(-15deg) scale(0.92);
}
.carousel__cta-ring {
position: absolute;
inset: 8px;
border-radius: 50%;
border: 0.6px solid var(--blanc);
opacity: 0.8;
pointer-events: none;
}
.carousel__cta-text {
font-family: 'Amarante', serif;
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
text-align: center;
line-height: 1;
}
.carousel__cta-arrow {
display: inline-flex;
/* La flèche suit la rotation -15° du sticker (parallèle au texte "Faites défiler") */
transform: none;
}
.carousel__cta-arrow img {
width: 28px;
height: auto;
display: block;
}
@media (max-width: 880px) {
.carousel__cta { right: 16px; width: 100px; height: 100px; }
.carousel__cta-text { font-size: 11px; }
}
/* Caption avec feuilles décoratives */
.carousel__caption {
margin: 80px auto 0;
max-width: 1100px;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 28px;
color: var(--brun-orange);
font-family: 'Amarante', serif;
font-size: clamp(24px, 3vw, 38px);
font-weight: 400;
line-height: 1.25;
text-align: center;
}
.carousel__caption-text { color: var(--brun-orange); }
.carousel__caption-leaf {
display: inline-flex;
flex-shrink: 0;
}
.carousel__caption-leaf img {
width: 36px;
height: auto;
display: block;
/* Picto blanc sur fond clair → on le teinte en brun-orangé */
filter: brightness(0) saturate(100%) invert(45%) sepia(55%) saturate(800%) hue-rotate(15deg) brightness(85%) contrast(95%);
}
.carousel__caption-leaf--r img { transform: scaleX(-1); }
@media (max-width: 880px) {
.carousel__caption { flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.carousel__caption-leaf img { width: 24px; }
}
/* ============================================
SECTION 4 — DES ESPACES QUI S'ADAPTENT
============================================ */
.adapt {
position: relative;
/* fond = vert 12 % d'opacité par-dessus le bg-warm global */
background: rgba(77, 92, 0, 0.12);
overflow: visible;
z-index: 1;
}
.adapt__inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 100px var(--container-pad) 60px;
min-height: 666px;
display: flex;
align-items: center;
z-index: 2;
}
/* ---------- Colonne contenu ---------- */
.adapt__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
max-width: 548px;
}
.adapt__title {
font-family: 'Amarante', serif;
font-size: 40px;
font-weight: 400;
line-height: 44.46px;
color: var(--vert);
text-transform: none;
}
.adapt__body {
display: flex;
flex-direction: column;
gap: 16px;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 23.36px;
}
.adapt__body strong {
font-weight: 600;
color: inherit;
}
.adapt__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13.5px 24px;
border: 1px solid var(--vert);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
transition: background-color 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.adapt__cta:hover { background: var(--vert); color: var(--blanc); }
.adapt__cta img {
/* arrow blanche → teintée vert pour l'état par défaut */
filter: brightness(0) saturate(100%) invert(28%) sepia(60%) saturate(900%) hue-rotate(35deg) brightness(85%) contrast(105%);
transition: filter 0.25s ease, transform 0.25s ease;
}
.adapt__cta:hover img { filter: none; transform: translateX(4px); }
/* ---------- Image collée au bord droit du viewport, overflow vers le bas ---------- */
.adapt__image {
position: absolute;
right: 0;
bottom: -80px; /* spill 80 px sur la section suivante */
width: clamp(420px, 48vw, 720px);
z-index: 3;
pointer-events: none;
}
.adapt__image img {
display: block;
width: 100%;
height: auto;
}
/* ---------- Décor feuilles oranges ---------- */
.adapt__leaf {
position: absolute;
width: clamp(170px, 14vw, 260px);
height: auto;
z-index: 1;
pointer-events: none;
opacity: 0.85;
}
/* La feuille --tr s'aligne sur le coin haut-gauche de la photo,
son right est calé sur la largeur de l'image avec un overlap plus marqué. */
.adapt__leaf--tr {
top: -40px;
right: calc(clamp(420px, 48vw, 720px) - 180px);
width: clamp(220px, 22vw, 320px);
z-index: 1;
}
.adapt__leaf--bl {
bottom: -40px;
left: 2vw;
z-index: 1;
}
@media (max-width: 1024px) {
.adapt__inner {
flex-direction: column;
align-items: stretch;
gap: 48px;
min-height: auto;
padding: 60px var(--container-pad) 0;
}
.adapt__content {
max-width: 100%;
gap: 28px;
}
.adapt__title { font-size: 32px; line-height: 1.15; }
/* L'image redevient statique sous le texte, full-width du container */
.adapt__image {
position: static;
width: 100%;
max-width: none;
margin-top: 8px;
}
.adapt__image img {
width: 100%;
height: auto;
}
.adapt__leaf { display: none; }
}
@media (max-width: 600px) {
.adapt__inner {
padding: 48px var(--container-pad) 0;
gap: 32px;
}
.adapt__title { font-size: 28px; }
.adapt__body { font-size: 15px; line-height: 1.5; }
}
/* ============================================
SECTION 5 — FONDATION
============================================ */
.found { position: relative; }
/* ---------- Bandeau bleu fondation ---------- */
.found__top {
background: var(--bleu-fondation);
color: var(--blanc);
padding: 200px 0 100px; /* padding-top large pour laisser de l'air sous l'image qui déborde de la section 4 */
position: relative;
overflow: hidden;
}
/* Décor SVG en filigrane (opacity 0.16 baked dans les SVG, stroke blanc) */
.found__decor {
position: absolute;
pointer-events: none;
z-index: 0;
height: auto;
user-select: none;
}
.found__decor--left {
/* logotype "soleil + feuilles" qui dépasse côté gauche */
left: -60px;
top: 35%;
transform: translateY(-30%);
width: clamp(220px, 22vw, 380px);
}
.found__decor--right {
/* leaves qui dépassent côté droit, bas */
right: -40px;
bottom: 0;
width: clamp(220px, 22vw, 380px);
}
.found__inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
.found__logo {
width: clamp(120px, 16vw, 180px);
height: auto;
margin: 0 auto -8px;
display: block;
/* Force le logo en blanc, quel que soit le SVG d'origine */
filter: brightness(0) invert(1);
}
.found__title {
max-width: 548px;
text-align: center;
color: var(--blanc);
font-family: 'Amarante', serif;
font-size: 40px;
font-weight: 400;
line-height: 44.46px;
text-transform: none;
}
.found__body {
max-width: 720px;
display: flex;
flex-direction: column;
gap: 16px;
text-align: center;
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 23.36px;
}
.found__body--strong { font-weight: 600; }
.found__link {
color: var(--blanc);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.2s ease;
}
.found__link:hover { opacity: 0.8; }
.found__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13.5px 24px;
border: 1px solid var(--blanc);
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
transition: background-color 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.found__cta:hover { background: var(--blanc); color: var(--bleu-fondation); }
.found__cta img { transition: transform 0.25s ease; }
.found__cta:hover img {
transform: translateX(4px);
filter: brightness(0) saturate(100%) invert(15%) sepia(40%) saturate(2400%) hue-rotate(170deg) brightness(95%) contrast(105%);
}
/* ---------- Bandeau brun-orangé : 4 atouts ---------- */
.found__bottom {
background: var(--brun-orange);
padding: 70px 0 80px;
color: var(--blanc);
}
.found__atouts {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.found__atout {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.found__atout-icon {
width: 48px;
height: auto;
display: block;
}
.found__atout-title {
font-family: 'Amarante', serif;
font-size: 16px;
font-weight: 400;
line-height: 17.79px;
color: var(--blanc);
text-transform: none;
margin: 0;
}
.found__atout-desc {
max-width: 253px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20.44px;
color: var(--blanc);
margin: 0;
}
@media (max-width: 1024px) {
.found__atouts { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
.found__top { padding: 140px 0 80px; }
.found__title { font-size: 32px; line-height: 1.15; }
}
@media (max-width: 600px) {
.found__atouts { grid-template-columns: 1fr; }
}
/* ============================================
SECTION 6 — LIVERDUN / GRANDS AXES
============================================ */
.loc {
position: relative;
z-index: 1;
/* Brun-orangé #A47817 à 8% d'opacité (sur fond blanc body) */
background: rgba(164, 120, 23, 0.08);
padding: 100px 0;
height: 783px;
/* overflow visible : le SVG carte déborde en bas dans la section CTA contact */
overflow: visible;
}
/* Carte de France + zoom Lorraine — absolute, déborde sous la section dans .cta-contact */
.loc__bg-france {
position: absolute;
/* Le SVG part du haut de la section et descend ; sa moitié basse passe sous le bord */
top: 50%;
/* Sous 1440 : SVG flush right viewport (= comme avant)
Au-delà de 1440 : SVG reste calé sur le bord droit du container 1440 (centré),
donc se rapproche du texte au lieu de partir vers le bord du viewport */
right: calc(-1 * var(--container-pad));
/* translateY(-25%) au lieu de -50% : centre du SVG décalé vers le bas → débordement bas */
transform: translateY(-25%) rotate(-6.202deg);
transform-origin: center center;
width: 895.527px;
height: 894.124px;
max-width: none;
pointer-events: none;
user-select: none;
z-index: 1;
}
.loc__inner {
position: relative;
z-index: 2;
height: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
/* 1 col texte ; le SVG est en absolute par-dessus à droite */
display: grid;
grid-template-columns: minmax(0, 560px);
align-items: center;
}
/* ---------- Colonne gauche ---------- */
.loc__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.loc__title {
max-width: 548px;
color: var(--vert);
font-family: 'Amarante', serif;
font-size: 40px;
font-weight: 400;
line-height: 44.46px;
text-transform: none;
}
.loc__body {
max-width: 525px;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 23.36px;
}
.loc__list {
width: 100%;
max-width: 630px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.loc__item {
display: flex;
align-items: center;
gap: 24px;
padding: 14px 0;
border-bottom: 1px solid rgba(164, 120, 23, 0.2);
}
.loc__item:first-child { padding-top: 0; }
.loc__item:last-child { /* on garde la dernière barre comme dans le Figma */ }
/* Picto blanc (picto-atout.svg) teinté en brun-orangé via mask */
.loc__item-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
background-color: var(--brun-orange);
-webkit-mask: url(/assets/img/picto-atout.svg) no-repeat center / contain;
mask: url(/assets/img/picto-atout.svg) no-repeat center / contain;
}
.loc__item-text {
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 23.36px;
}
/* ---------- Colonne droite — carte Lorraine ---------- */
.loc__map {
position: relative;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.loc__map img {
width: 100%;
max-width: 560px;
height: auto;
display: block;
}
@media (max-width: 1024px) {
/* Sur mobile : contenu d'abord, carte ensuite (en flow normal, pas en background) */
.loc {
display: flex;
flex-direction: column;
height: auto;
padding: 80px 0 40px;
}
.loc__inner {
grid-template-columns: 1fr;
gap: 40px;
order: 1;
height: auto;
}
.loc__title { font-size: 32px; line-height: 1.15; }
.loc__bg-france {
position: static;
order: 2;
width: 100%;
max-width: 560px;
height: auto;
margin: 32px auto 0;
transform: none;
align-self: center;
}
}
@media (max-width: 600px) {
.loc { padding: 64px 0 24px; }
.loc__title { font-size: 28px; }
.loc__body { font-size: 15px; line-height: 1.5; }
}
/* ============================================
SECTION 7 — CTA CONTACT
============================================ */
.cta-contact {
background: #FFFFFF;
padding: 80px 0;
position: relative;
z-index: 2; /* au-dessus du SVG carte qui déborde de .loc (z-index: 1) */
}
.cta-contact__inner {
position: relative;
z-index: 3;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.cta-contact__text {
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
max-width: 720px;
margin: 0;
}
/* Bouton outlined vert — même pattern que .intro__cta-btn / .adapt__cta */
.cta-contact__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13.5px 24px;
border: 1px solid var(--vert);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.cta-contact__btn img {
display: block;
width: 33px;
height: 12px;
/* la flèche est blanche dans le SVG → on la teinte en vert pour matcher le label */
filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(1080%) hue-rotate(35deg) brightness(95%) contrast(95%);
transition: filter 0.25s ease, transform 0.25s ease;
}
.cta-contact__btn:hover {
background: var(--vert);
color: var(--blanc);
}
.cta-contact__btn:hover img {
filter: none;
transform: translateX(4px);
}
@media (max-width: 720px) {
.cta-contact { padding: 60px 0; }
.cta-contact__text { font-size: 18px; }
}
/* ============================================
POPUP HOTSPOT (modal)
============================================ */
.hs-popup {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.hs-popup[aria-hidden="false"] { display: flex; }
.hs-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 25, 5, 0.55);
cursor: pointer;
animation: hsFadeIn 0.25s ease both;
}
.hs-popup__panel {
position: relative;
width: min(846px, 100%);
max-height: 86vh;
overflow: auto;
border-radius: 24px;
background: linear-gradient(161deg, var(--orange) 0%, var(--orange-fonce) 100%);
color: var(--blanc);
padding: 46px 56px 30px 88px;
box-shadow: 0 30px 80px rgba(160, 80, 0, 0.35);
animation: hsZoomIn 0.32s cubic-bezier(0.2, 1, 0.3, 1) both;
}
@media (max-width: 720px) {
.hs-popup__panel { padding: 36px 20px 24px; }
}
.hs-popup__close {
position: absolute;
top: 24px;
right: 24px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--blanc);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hs-popup__close::before,
.hs-popup__close::after {
content: "";
position: absolute;
width: 14px;
height: 1.6px;
background: var(--orange);
border-radius: 1px;
}
.hs-popup__close::before { transform: rotate(45deg); }
.hs-popup__close::after { transform: rotate(-45deg); }
.hs-popup__close:hover { transform: scale(1.05); }
.hs-popup__title {
font-family: 'Amarante', serif;
font-size: clamp(24px, 3vw, 34px);
font-weight: 400;
line-height: 1.1;
margin-bottom: 24px;
padding-right: 60px; /* laisser de l'air à la croix */
text-transform: none;
}
.hs-popup__divider {
border: 0;
height: 1px;
background: var(--blanc);
opacity: 0.29;
margin: 0 -56px 24px -88px;
}
@media (max-width: 720px) {
.hs-popup__divider { margin: 0 -20px 18px; }
}
.hs-popup__images {
display: flex;
gap: 20px;
margin-bottom: 22px;
overflow-x: auto;
scrollbar-width: thin;
}
.hs-popup__images img {
flex: 0 0 auto;
height: 200px;
width: auto;
border-radius: 8px;
object-fit: cover;
background: rgba(255, 255, 255, 0.15);
}
.hs-popup__images img[src=""],
.hs-popup__images img:not([src]) {
/* placeholder visible si pas encore d'image */
width: 280px;
background: rgba(255, 255, 255, 0.15);
}
.hs-popup__desc {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.34;
margin-bottom: 26px;
}
.hs-popup__nav {
display: inline-flex;
align-items: center;
gap: 14px;
}
.hs-popup__nav-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--blanc);
background: transparent;
cursor: pointer;
position: relative;
transition: background 0.2s ease, transform 0.2s ease;
}
.hs-popup__nav-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
transform: translate(-50%, -50%) rotate(-45deg);
border-top: 1.5px solid var(--blanc);
border-right: 1.5px solid var(--blanc);
transition: border-color 0.2s ease;
}
.hs-popup__prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.hs-popup__next { background: var(--blanc); }
.hs-popup__next::before { border-top-color: var(--orange); border-right-color: var(--orange); transform: translate(-70%, -50%) rotate(45deg); }
.hs-popup__nav-btn:hover { transform: scale(1.08); }
.hs-popup__next-label {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--blanc);
}
@keyframes hsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hsZoomIn {
from { opacity: 0; transform: scale(0.96) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
body.no-scroll { overflow: hidden; }
@media (max-width: 1280px) {
.intro { padding: 64px 0 0; }
.intro__text { font-size: 16px; line-height: 26px; }
}
@media (max-width: 720px) {
.intro__text { font-size: 14px; line-height: 22px; }
.intro__villa img { margin-bottom: -60px; }
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1280px) {
:root { --container-pad: 32px; }
.nav__links { gap: 28px; font-size: 15px; }
.nav__actions { gap: 16px; }
.nav__cta { padding: 0 16px; font-size: 12px; gap: 10px; height: 40px; }
.nav__phone { font-size: 14px; }
.hero__title { font-size: clamp(48px, 9.5vw, 110px); }
}
@media (max-width: 960px) {
:root { --container-pad: 16px; }
.nav { height: 100px; }
.nav__inner { height: 80px; }
.nav__links, .nav__cta, .nav__phone { display: none; }
.nav__logo { top: 10px; width: 64px; }
.nav__logo::before, .nav__logo::after { display: none; }
.nav__burger { display: flex; }
.hero__leaves, .hero__villa { display: none; }
.hero__title { white-space: normal; line-height: 0.95; }
.hero__subtitle { font-size: 11px; gap: 8px; bottom: 10vh; }
}
@media (max-width: 480px) {
.nav__mobile-links { font-size: 24px; gap: 24px; }
.nav__mobile { gap: 36px; }
}
/* éviter le scroll du body quand le menu mobile est ouvert */
body.nav-open { overflow: hidden; }
/* ========== Footer ========== */
.site-footer {
position: relative;
width: 100%;
color: var(--blanc);
overflow: hidden;
isolation: isolate;
/* hauteur ratio Figma : 503/1438 ≈ 35% — on impose un min pour les petits viewports */
min-height: 503px;
margin-top: 80px;
}
.site-footer__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
display: block;
}
.site-footer__inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 142px var(--container-pad) 0;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(420px, 522px) 1fr minmax(220px, auto);
grid-template-areas:
"card logo nav"
"card logo contact"
"div div div"
"legal legal legal";
column-gap: 48px;
row-gap: 24px;
align-items: start;
}
/* --- Carte Fondation --- */
.ftr-card {
grid-area: card;
background: #FAFAFA;
border-radius: 13px;
padding: 28px 30px 28px;
color: var(--bleu-fondation);
position: relative;
z-index: 2;
box-sizing: border-box;
width: 522px;
max-width: 100%;
min-height: 260px;
display: flex;
flex-direction: column;
}
.ftr-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 18px;
}
.ftr-card__fng { width: 139px; height: auto; display: block; }
.ftr-card__picto {
width: 95px;
height: 95px;
display: block;
flex-shrink: 0;
margin-top: -10px;
}
.ftr-card__title {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--bleu-fondation);
margin: 0 0 12px;
}
.ftr-card__body {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.46;
color: var(--bleu-fondation);
margin: 0 0 22px;
}
.ftr-card__ctas {
display: flex;
gap: 14px;
margin-top: auto;
}
/* --- Boutons (carte + nav) --- */
.ftr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 13.5px 24px;
border: 1px solid currentColor;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background .2s ease, color .2s ease;
cursor: pointer;
line-height: 1;
}
.ftr-btn--blue { color: var(--bleu-fondation); background: transparent; }
.ftr-btn--blue:hover { background: var(--bleu-fondation); color: #FAFAFA; }
.ftr-btn--white { color: var(--blanc); background: transparent; }
.ftr-btn--white:hover { background: var(--blanc); color: var(--vert); }
.ftr-btn__arrow {
width: 33px;
height: 12px;
flex-shrink: 0;
display: inline-block;
background-color: currentColor;
-webkit-mask: url(https://villalagarenne.fr/assets/css/../img/arrow.svg) no-repeat center / contain;
mask: url(https://villalagarenne.fr/assets/css/../img/arrow.svg) no-repeat center / contain;
transition: background-color .2s ease;
}
/* --- Décor feuilles (footer-leaves.svg, opacity & stroke blanc déjà dans le SVG) --- */
.ftr-leaves {
position: absolute;
left: 50%;
bottom: 80px;
transform: translateX(-170px);
width: 220px;
height: 178px;
object-fit: cover;
object-position: top center;
pointer-events: none;
user-select: none;
z-index: 0;
display: block;
}
/* --- Logo VLG centré --- */
.ftr-logo {
grid-area: logo;
display: flex;
justify-content: center;
align-items: flex-start;
align-self: start;
/* on remonte le logo pour le placer dans le tiers haut */
margin-top: -93px;
z-index: 3;
position: relative;
}
.ftr-logo__img {
width: 170px;
height: auto;
display: block;
/* convertit le PNG (couleur) en blanc — adapté à un logo monochrome */
filter: brightness(0) invert(1);
}
/* --- Navigation droite (liens) --- */
.ftr-nav {
grid-area: nav;
margin-top: 0;
z-index: 2;
position: relative;
}
.ftr-nav__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.ftr-nav__links a {
font-family: 'Amarante', serif;
font-size: 16px;
color: var(--blanc);
text-decoration: none;
transition: opacity .2s ease;
}
.ftr-nav__links a:hover { opacity: 0.7; }
/* --- Contact (adresse / tél / CTA) --- */
.ftr-contact {
grid-area: contact;
z-index: 2;
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
margin-top: -70px; /* aligne avec le bas de la carte fondation */
}
.ftr-contact__address {
font-family: 'Amarante', serif;
font-size: 18px;
color: var(--blanc);
margin: 0;
max-width: 220px;
line-height: 1.25;
}
.ftr-contact__phone {
margin: 0;
}
.ftr-contact__phone a {
font-family: 'Amarante', serif;
font-size: 18px;
color: var(--blanc);
text-decoration: none;
}
.ftr-contact__phone a:hover { opacity: 0.7; }
/* --- Diviseur (2 lignes blanches 14% séparées par le logo) --- */
.ftr-divider {
grid-area: div;
position: relative;
height: 1px;
margin-top: 48px;
pointer-events: none;
}
.ftr-divider span {
position: absolute;
top: 0;
height: 1px;
background: var(--blanc);
opacity: 0.14;
}
.ftr-divider span:first-child { left: 0; width: calc(50% - 80px); }
.ftr-divider span:last-child { right: 0; width: calc(50% - 80px); }
/* --- Légal --- */
.ftr-legal {
grid-area: legal;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding-bottom: 32px;
margin-top: 18px;
}
.ftr-legal__copy {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 600;
color: #FDFDFD;
line-height: 1.46;
}
.ftr-legal__copy a { color: inherit; text-decoration: underline; }
.ftr-legal__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 64px;
}
.ftr-legal__links a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
color: #FDFDFD;
text-decoration: none;
}
.ftr-legal__links a:hover { text-decoration: underline; }
/* --- Responsive --- */
@media (max-width: 1100px) {
.site-footer__inner {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"card card"
"logo logo"
"nav contact"
"div div"
"legal legal";
padding-top: 100px;
column-gap: 32px;
}
.ftr-card { width: auto; }
.ftr-leaves { display: none; }
.ftr-logo { margin-top: 24px; }
.ftr-contact { margin-top: 0; }
}
@media (max-width: 720px) {
.site-footer {
min-height: 0;
padding-bottom: 16px;
/* Mobile : on remplace le SVG full-bleed (qui devient pointu en s'étirant
verticalement) par un fond vert plat + une courbe cropped qui ne s'étire
qu'en largeur → vague douce qui garde son ratio. */
background: var(--vert) url(https://villalagarenne.fr/assets/css/../img/footer-bg-mobile.svg) no-repeat top center / 100% auto;
}
.site-footer__bg { display: none; }
.site-footer__inner {
grid-template-columns: 1fr;
grid-template-areas:
"card"
"logo"
"nav"
"contact"
"div"
"legal";
padding-top: 80px;
row-gap: 28px;
}
.ftr-card { padding: 24px 22px; min-height: 0; }
.ftr-card__head { flex-direction: row; gap: 16px; }
.ftr-card__picto { width: 72px; height: 72px; margin-top: 0; }
.ftr-card__ctas { flex-wrap: wrap; gap: 10px; }
.ftr-btn { padding: 12px 18px; font-size: 13px; }
.ftr-logo__img { width: 140px; }
.ftr-nav__links { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.ftr-contact { margin-top: 0; align-items: flex-start; }
.ftr-divider { margin-top: 24px; }
.ftr-divider span:first-child, .ftr-divider span:last-child { width: 100%; left: 0; right: auto; }
.ftr-divider span:last-child { display: none; }
.ftr-legal { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 24px; }
.ftr-legal__links { gap: 28px; }
}
/* =========================================================
PAGE L'ÉTABLISSEMENT
========================================================= */
.page-etablissement {
background: var(--bg-warm);
overflow-x: clip;
}
body { overflow-x: clip; }
/* --- Section 1 : Art Nouveau ----------------------------- */
.etab-art-nouveau {
position: relative;
background: var(--bg-warm);
padding-bottom: 60px;
z-index: 1;
}
.etab-art-nouveau__inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 200px var(--container-pad) 60px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
align-items: center;
gap: 60px;
min-height: 620px;
}
.etab-art-nouveau__media {
font-variant: JIS04;
position: relative;
margin-left: calc(50% - 37vw);
margin-bottom: -387px;
width: min(50vw, 760px);
pointer-events: none;
z-index: 3;
}
.etab-art-nouveau__media img {
display: block;
width: 100%;
height: auto;
}
.etab-art-nouveau__content {
grid-column: 2;
max-width: 540px;
display: flex;
flex-direction: column;
gap: 40px;
}
.etab-art-nouveau__title {
margin: 0;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: 46px;
line-height: 51.13px;
letter-spacing: 0;
}
.etab-art-nouveau__body {
margin: 0;
max-width: 483px;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 23.36px;
}
.etab-art-nouveau__cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 24px;
border: 1px solid var(--vert);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease;
}
.etab-art-nouveau__cta:hover { background: var(--vert); color: var(--blanc); }
.etab-art-nouveau__cta:hover .etab-art-nouveau__cta-arrow path { fill: var(--blanc); }
.etab-art-nouveau__cta-arrow {
display: block;
width: 29.7px;
height: 10.8px;
flex-shrink: 0;
transform: rotate(90deg);
transform-origin: center;
transition: transform 0.25s ease;
}
.etab-art-nouveau__cta:hover .etab-art-nouveau__cta-arrow { transform: rotate(90deg) translateX(3px); }
.etab-art-nouveau__leaf {
position: absolute;
right: 0px;
bottom: 0;
width: 240px;
height: 310px;
pointer-events: none;
z-index: 0;
}
/* --- Section 2 : Signature architecturale --------------- */
.etab-signature {
background: var(--vert);
color: var(--blanc);
padding: 100px var(--container-pad) 320px;
min-height: 666px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.etab-signature__inner {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.etab-signature__label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.etab-signature__label-icon {
display: inline-flex;
align-items: center;
line-height: 0;
}
.etab-signature__label-text {
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
}
.etab-signature__text {
width: 100%;
max-width: 924px;
margin: 8px auto 0;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: 600;
text-transform: uppercase;
color: #8A8E76;
}
.etab-signature__text-strong {
display: block;
margin-bottom: 12px;
}
.etab-signature__text .intro__word {
display: inline-block;
color: #8A8E76;
transition: color 0.18s linear;
}
/* --- Section photo + modulable (fond vert 12%) ---------- */
.etab-modulable {
position: relative;
background: rgba(77, 92, 0, 0.12);
padding-bottom: 320px;
z-index: 1;
}
.etab-modulable__photo {
position: relative;
max-width: 1100px;
margin: -250px auto 80px;
padding: 0 var(--container-pad);
z-index: 5;
}
.etab-modulable__photo-frame {
position: relative;
aspect-ratio: 703 / 599;
width: 100%;
transform-origin: center bottom;
will-change: transform;
}
.etab-modulable__photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
-webkit-mask-image: url(/wp/wp-content/uploads/2026/04/masque.svg);
mask-image: url(/wp/wp-content/uploads/2026/04/masque.svg);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.etab-modulable__photo-outline {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.etab-modulable__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.etab-modulable__col--text {
max-width: 548px;
}
.etab-modulable__title {
margin: 0;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: 40px;
line-height: 44.46px;
}
.etab-modulable__body {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.etab-modulable__body p {
margin: 0;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 23.36px;
}
.etab-modulable__body strong { font-weight: 600; }
.etab-modulable__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.etab-modulable__item {
display: flex;
align-items: center;
gap: 24px;
padding: 22px 0;
border-bottom: 1px solid rgba(77, 92, 0, 0.18);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 23.36px;
}
.etab-modulable__item:last-child { border-bottom: none; }
.etab-modulable__leaves {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
}
.etab-modulable__leaves img {
display: block;
width: 56px;
height: auto;
}
.etab-modulable__cta-wrap {
margin-top: 80px;
text-align: center;
}
.etab-modulable__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 9px 24px;
border: 1px solid var(--vert);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease;
}
.etab-modulable__cta:hover { background: var(--vert); color: var(--blanc); }
.etab-modulable__cta img {
/* arrow.svg est blanche → teinter en vert via filter */
filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(1080%) hue-rotate(35deg) brightness(95%) contrast(95%);
transition: filter 0.25s ease, transform 0.25s ease;
}
.etab-modulable__cta:hover img {
filter: none;
transform: translateX(4px);
}
/* --- Carousel établissement : chevauche la section verte 12% -- */
.etab-carousel {
background: transparent;
margin-top: -240px;
padding-top: 0;
padding-bottom: 100px;
position: relative;
z-index: 6;
}
/* --- Responsive ----------------------------------------- */
@media (max-width: 1100px) {
.etab-art-nouveau__inner {
grid-template-columns: 1fr;
padding: 180px var(--container-pad) 0;
gap: 40px;
}
.etab-art-nouveau__media {
margin-left: calc(-1 * var(--container-pad));
margin-bottom: -80px;
width: calc(100% + 2 * var(--container-pad));
max-width: none;
}
.etab-art-nouveau__content {
grid-column: 1;
max-width: 100%;
}
.etab-art-nouveau__leaf {
right: -80px;
top: 160px;
width: 220px;
opacity: 0.7;
}
}
@media (max-width: 720px) {
.etab-art-nouveau { padding-bottom: 80px; }
.etab-art-nouveau__inner { padding-top: 170px; gap: 32px; }
.etab-art-nouveau__title { font-size: 34px; line-height: 38px; }
.etab-art-nouveau__body { font-size: 15px; line-height: 22px; }
.etab-art-nouveau__leaf { display: none; }
.etab-art-nouveau__inner { display: flex; flex-direction: column; }
.etab-art-nouveau__content { order: 1; }
.etab-art-nouveau__media { order: 2; margin-bottom: -229px; margin-top: 24px; }
.etab-signature { padding: 70px var(--container-pad); }
.etab-signature__main,
.etab-signature__sub { font-size: 15px; line-height: 24px; }
.etab-signature__label { font-size: 12px; }
.etab-modulable { padding-bottom: 180px; }
.etab-modulable__photo { margin-top: -140px; margin-bottom: 40px; }
.etab-modulable__inner { grid-template-columns: 1fr; gap: 40px; }
.etab-modulable__title { font-size: 30px; line-height: 34px; }
.etab-modulable__leaves { width: auto; }
.etab-carousel { margin-top: -140px; padding-bottom: 60px; }
}
/* =====================================================================
Établissement — Timeline (« La Villa à travers le temps... »)
===================================================================== */
.etab-timeline {
position: relative;
background: var(--bg-warm);
padding: 80px var(--container-pad) 100px;
}
.etab-timeline__inner {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto;
aspect-ratio: 1280 / 900;
}
.etab-timeline__inner > *,
.etab-timeline__inner .etab-timeline__nav > *,
.etab-timeline__inner .etab-timeline__strip > *,
.etab-timeline__inner .etab-timeline__cell > * { position: absolute; }
.etab-timeline__title {
left: 34.84%;
top: 0;
width: 42.81%;
margin: 0;
text-align: center;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(24px, 3.1vw, 40px);
line-height: 1.11;
}
.etab-timeline__period,
.etab-timeline__lead,
.etab-timeline__float {
transition: opacity 0.28s ease;
}
.etab-timeline.is-fading .etab-timeline__period,
.etab-timeline.is-fading .etab-timeline__lead,
.etab-timeline.is-fading .etab-timeline__float {
opacity: 0;
}
.etab-timeline__period {
left: 15.08%;
top: 16.22%;
transform: translateX(-50%);
text-align: center;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(22px, 2.8vw, 36px);
line-height: 1.11;
white-space: nowrap;
}
.etab-timeline__period sup { font-size: 0.55em; vertical-align: super; }
.etab-timeline__lead {
left: 6.25%;
top: 40.33%;
width: 37.42%;
margin: 0;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: clamp(14px, 1.25vw, 16px);
line-height: 1.4;
}
/* Floating placeholder photos (top-right cluster) */
.etab-timeline__floats { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.etab-timeline__float { position: absolute; object-fit: cover; border-radius: 4px; }
.etab-timeline__float--a { left: 65.39%; top: 20.78%; width: 25.55%; aspect-ratio: 327 / 204; }
.etab-timeline__float--b { left: 75.55%; top: 39%; width: 22.27%; aspect-ratio: 285 / 219; }
.etab-timeline__float--c { left: 57.03%; top: 33.67%; width: 18.52%; aspect-ratio: 237 / 190; }
/* Horizontal rail segments — dotted/solid 1px vert 60% opacity */
.etab-timeline__seg {
top: 78.44%;
height: 1px;
background: var(--vert);
opacity: 0.6;
}
.etab-timeline__seg--1 { left: 0; width: 16.95%; }
.etab-timeline__seg--2 { left: 32.58%; width: 7.81%; }
.etab-timeline__seg--3 { left: 53.20%; width: 7.81%; }
.etab-timeline__seg--4 { left: 73.83%; width: 7.81%; }
/* Vertical lines descending from x=319 */
.etab-timeline__vline {
left: 24.92%;
width: 1px;
background: var(--vert);
opacity: 0.6;
}
.etab-timeline__vline--1 { top: 23.78%; height: 11.44%; }
.etab-timeline__vline--2 { top: 46.89%; height: 20.89%; }
.etab-timeline__vline--3 { top: 88%; height: 11.67%; }
/* Round photo nodes (clickable) — tous identiques, l'actif est juste scale 1 + ring vert */
.etab-timeline__node {
width: 11.56%;
aspect-ratio: 1;
padding: 9px;
border-radius: 50%;
border: none;
background: transparent;
overflow: hidden;
cursor: pointer;
outline: 3px solid transparent;
outline-offset: -3px;
transform: scale(0.78);
transform-origin: 50% 50%;
transition: transform 0.35s ease, outline-color 0.25s ease;
}
.etab-timeline__node:hover { transform: scale(0.82); }
.etab-timeline__node.is-active { transform: scale(1); outline-color: var(--vert); }
.etab-timeline__node.is-active:hover { transform: scale(1.03); }
.etab-timeline__node:focus-visible { outline-color: var(--vert); }
.etab-timeline__node img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
border: 1px solid var(--bleu-fondation);
}
/* Centres alignés sur le rail (top 706 / 900 = 78.44%, soit top 70.22% pour box 16.44% de haut) */
.etab-timeline__node--big { left: 19.14%; top: 70.22%; } /* center x = 25% (319/1280) */
.etab-timeline__node--s1 { left: 41.02%; top: 70.22%; } /* center x = 46.8% (599/1280) */
.etab-timeline__node--s2 { left: 61.64%; top: 70.22%; } /* center x = 67.4% (863/1280) */
.etab-timeline__node--s3 { left: 82.27%; top: 70.22%; } /* center x = 88% (1127/1280) */
/* Captions sitting just above the rail, between/at nodes */
.etab-timeline__caption {
top: 74.33%;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(13px, 1.25vw, 16px);
line-height: 1.11;
text-align: center;
white-space: nowrap;
}
.etab-timeline__caption sup { font-size: 0.65em; vertical-align: super; }
.etab-timeline__caption--c1 { left: 32.03%; }
.etab-timeline__caption--c2 { left: 55.70%; }
.etab-timeline__caption--c3 { left: 74.53%; }
/* Strip wrapper — transparent au layout sur desktop (les enfants restent positionnés absolument) */
.etab-timeline__nav,
.etab-timeline__strip,
.etab-timeline__cell { display: contents; }
.etab-timeline__caption--c0 { display: none; } /* doublon du titre dynamique sur desktop */
.etab-timeline__arrow { display: none; } /* flèches uniquement tablet/mobile */
/* ===== Tablet : layout stacké, strip horizontale en bas ===== */
@media (max-width: 1100px) {
.etab-timeline { padding: 70px var(--container-pad) 90px; }
.etab-timeline__inner {
aspect-ratio: auto;
max-width: 880px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.etab-timeline__inner > *,
.etab-timeline__inner .etab-timeline__nav > *,
.etab-timeline__inner .etab-timeline__strip > *,
.etab-timeline__inner .etab-timeline__cell > * { position: static; }
.etab-timeline__title,
.etab-timeline__period,
.etab-timeline__lead {
left: auto; top: auto; width: 100%;
transform: none;
text-align: center;
}
/* Ordre tablet/mobile : titre → nav (strip + arrows) → période → lead → floats */
.etab-timeline__title { order: 1; }
.etab-timeline__nav { order: 2; }
.etab-timeline__period { order: 3; }
.etab-timeline__lead { order: 4; }
.etab-timeline__floats { order: 5; }
.etab-timeline__title { font-size: clamp(26px, 4.5vw, 36px); line-height: 1.12; }
.etab-timeline__period { font-size: clamp(22px, 3.8vw, 32px); line-height: 1.12; }
.etab-timeline__lead { font-size: 15px; line-height: 1.5; max-width: 560px; }
/* Floats : grille 3 colonnes, tailles fluides */
.etab-timeline__floats {
position: static;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
width: 100%;
max-width: 560px;
}
.etab-timeline__float {
position: static;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
}
.etab-timeline__float--a,
.etab-timeline__float--b,
.etab-timeline__float--c { left: auto; top: auto; }
.etab-timeline__rail,
.etab-timeline__vline { display: none; }
/* Bloc nav : strip pleine largeur (1ère ligne), flèches centrées dessous */
.etab-timeline__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px 24px;
width: 100%;
max-width: 100%;
}
.etab-timeline__strip { flex: 1 0 100%; order: 1; }
.etab-timeline__arrow--prev { order: 2; }
.etab-timeline__arrow--next { order: 3; }
/* Strip horizontale des 4 cercles */
.etab-timeline__strip {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
gap: 28px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding: 14px 4px 18px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / old Edge */
}
.etab-timeline__strip::-webkit-scrollbar { display: none; } /* Chrome / Safari */
/* Flèches navigation (réutilise arrow.svg du thème) */
.etab-timeline__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 1px solid var(--vert);
border-radius: 50%;
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.etab-timeline__arrow-ico {
display: block;
width: 22px;
height: 12px;
background-color: var(--vert);
-webkit-mask: url(https://villalagarenne.fr/assets/css/../img/arrow.svg) center / contain no-repeat;
mask: url(https://villalagarenne.fr/assets/css/../img/arrow.svg) center / contain no-repeat;
pointer-events: none;
}
.etab-timeline__arrow--prev .etab-timeline__arrow-ico { transform: scaleX(-1); }
.etab-timeline__arrow:hover .etab-timeline__arrow-ico { background-color: var(--vert-fonce); }
.etab-timeline__arrow:hover { background: rgba(77, 92, 0, 0.08); }
.etab-timeline__arrow:active { transform: scale(0.94); }
.etab-timeline__arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.etab-timeline__cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex: 0 0 auto;
scroll-snap-align: center;
}
/* Cercles : tailles uniformes, active = scale up + ring vert */
.etab-timeline__node,
.etab-timeline__node--big,
.etab-timeline__node--s1,
.etab-timeline__node--s2,
.etab-timeline__node--s3 {
width: 100px;
height: 100px;
padding: 0;
transform: scale(1);
left: auto; top: auto;
}
.etab-timeline__node:hover { transform: scale(1.05); }
.etab-timeline__node.is-active {
transform: scale(1.28);
padding: 5px;
}
.etab-timeline__node.is-active:hover { transform: scale(1.3); }
/* Captions sous chaque cercle */
.etab-timeline__caption {
position: static;
display: block;
text-align: center;
font-size: 15px;
line-height: 1.2;
white-space: normal;
max-width: 130px;
}
.etab-timeline__caption--c0 { display: block; }
}
/* ===== Mobile : encore plus compact, scroll horizontal natif ===== */
@media (max-width: 600px) {
.etab-timeline { padding: 50px 0 70px; }
.etab-timeline__inner { padding: 0 var(--container-pad); gap: 22px; }
.etab-timeline__title { font-size: 26px; }
.etab-timeline__period { font-size: 22px; }
.etab-timeline__lead { font-size: 14px; }
.etab-timeline__floats { max-width: 420px; gap: 8px; }
.etab-timeline__strip {
gap: 18px;
padding-top: 10px;
padding-bottom: 14px;
}
.etab-timeline__node,
.etab-timeline__node--big,
.etab-timeline__node--s1,
.etab-timeline__node--s2,
.etab-timeline__node--s3 { width: 78px; height: 78px; padding: 0; outline-width: 1.5px; outline-offset: -1.5px; }
.etab-timeline__node.is-active { transform: scale(1.25); padding: 3px; }
.etab-timeline__caption { font-size: 13px; max-width: 100px; }
}
/* ============================================
ÉTABLISSEMENT — RENAISSANCE DU LIEU
============================================ */
.renaissance {
position: relative;
overflow: hidden;
background: var(--bleu-fondation);
color: var(--blanc);
min-height: 669px;
display: flex;
align-items: center;
padding: 80px 0;
}
.renaissance__decor {
position: absolute;
pointer-events: none;
user-select: none;
z-index: 0;
height: auto;
}
.renaissance__decor--right { opacity: 0.55; }
.renaissance__decor--left {
/* collé au bord gauche du viewport (semi-transparence bakée dans le SVG) */
left: 0;
top: 50%;
transform: translateY(-50%);
width: clamp(280px, 32vw, 480px);
}
.renaissance__decor--right {
right: -40px;
bottom: 0;
width: clamp(220px, 22vw, 380px);
}
.renaissance__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.renaissance__title {
max-width: 548px;
text-align: center;
color: var(--blanc);
font-family: 'Amarante', serif;
font-size: 40px;
font-weight: 400;
line-height: 44.46px;
margin: 0;
}
.renaissance__body {
max-width: 720px;
display: flex;
flex-direction: column;
gap: 16px;
text-align: center;
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 23.36px;
}
.renaissance__body p { margin: 0; }
.renaissance__link {
color: var(--blanc);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.2s ease;
}
.renaissance__link:hover { opacity: 0.8; }
.renaissance__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13.5px 24px;
border: 1px solid var(--blanc);
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.renaissance__cta img { transition: transform 0.25s ease; }
.renaissance__cta:hover { background: var(--blanc); color: var(--bleu-fondation); }
.renaissance__cta:hover img {
transform: translateX(4px);
filter: brightness(0) saturate(100%) invert(15%) sepia(40%) saturate(2400%) hue-rotate(170deg) brightness(95%) contrast(105%);
}
@media (max-width: 720px) {
.renaissance { min-height: auto; padding: 80px 0; }
.renaissance__title { font-size: 32px; line-height: 1.15; }
.renaissance__decor { opacity: 0.35; }
}
/* hauteur minimale du CTA contact pour respecter la maquette */
.page-etablissement .cta-contact { min-height: 394px; display: flex; align-items: center; }
@media (max-width: 720px) {
.page-etablissement .cta-contact { min-height: auto; }
}
/* ---- Variante bleue du menu : page Contribuer à l'inclusion ---- */
.page-template-page-inclusion .nav__shape path { fill: var(--bleu-fondation); }
.page-template-page-inclusion .nav__mobile { background: var(--bleu-fondation); }
.page-template-page-inclusion .nav__cta:hover { color: var(--bleu-fondation); }
.page-template-page-inclusion .nav__mobile-cta:hover { color: var(--bleu-fondation); }
/* =====================================================================
Page Contribuer à l'inclusion — section "Un lieu qui a du sens"
===================================================================== */
.incl-hero {
position: relative;
background: rgba(0, 55, 80, 0.12);
padding: 350px 0 40px;
overflow: hidden;
min-height: 600px;
}
.incl-hero__villa {
position: absolute;
left: 0;
bottom: 0;
width: clamp(200px, 20vw, 290px);
height: auto;
display: block;
pointer-events: none;
user-select: none;
}
.incl-hero__leaves {
position: absolute;
right: 0;
top: 280px;
width: clamp(180px, 18vw, 260px);
height: auto;
pointer-events: none;
user-select: none;
}
.incl-hero__inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
justify-content: center;
}
.incl-hero__ellipse {
position: absolute;
top: auto;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: clamp(640px, 70vw, 1000px);
height: auto;
pointer-events: none;
z-index: 0;
}
.incl-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: 100%;
max-width: 838px;
text-align: center;
}
.incl-hero__title {
font-family: 'Amarante', serif;
font-weight: 400;
font-size: 46px;
line-height: 51.13px;
color: var(--bleu-fondation);
margin: 0;
}
.incl-hero__body {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 23.36px;
font-weight: 500;
color: var(--bleu-fondation);
}
.incl-hero__body p { margin: 0; }
.incl-hero__body a {
color: var(--bleu-fondation);
text-decoration: underline;
text-underline-offset: 2px;
}
.incl-hero__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 24px;
border: 1px solid var(--bleu-fondation);
color: var(--bleu-fondation);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease;
}
.incl-hero__cta:hover { background: var(--bleu-fondation); color: var(--blanc); }
.incl-hero__cta-arrow {
transform: rotate(90deg);
transition: transform 0.25s ease;
}
/* =====================================================================
Page Contribuer à l'inclusion — bandeau bleu Fondation
===================================================================== */
.incl-fondation {
background: var(--bleu-fondation);
padding: 110px 0 100px;
color: var(--blanc);
}
.incl-fondation__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.incl-fondation__logo {
width: 250px;
height: auto;
margin: 0 auto 8px;
display: block;
}
.incl-fondation__label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.incl-fondation__label-icon {
height: 18px;
width: auto;
/* picto-label.svg → blanc */
filter: brightness(0) invert(1);
}
.incl-fondation__label-text {
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.incl-fondation__text {
max-width: 924px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: 600;
text-transform: uppercase;
color: var(--blanc);
}
.incl-fondation__lead { color: var(--blanc); }
.incl-fondation__reveal { color: var(--blanc); }
.incl-fondation__reveal .intro__word { display: inline-block; transition: color 0.18s linear; }
.incl-fondation__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 24px;
border: 1px solid var(--blanc);
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
height: 40px;
transition: background 0.25s ease, color 0.25s ease;
}
.incl-fondation__cta:hover { background: var(--blanc); color: var(--bleu-fondation); }
.incl-fondation__cta img {
filter: brightness(0) invert(1);
transition: transform 0.25s ease, filter 0.25s ease;
}
.incl-fondation__cta:hover img {
filter: brightness(0) saturate(100%) invert(13%) sepia(78%) saturate(2470%) hue-rotate(184deg) brightness(95%) contrast(101%);
transform: translateX(4px);
}
/* =====================================================================
Page Inclusion — Piliers (4 colonnes blanc) + Citation (fond bleu 12%)
===================================================================== */
.incl-piliers { background: var(--blanc); }
.incl-piliers__top {
position: relative;
background: var(--blanc);
}
/* Bloc piliers : padding 90/60, border-bottom 1px (= ligne horizontale Figma) */
.incl-piliers__piliers {
position: relative;
padding: 90px 0 60px;
border-bottom: 1px solid rgba(0, 55, 80, 0.5);
}
/* 4 colonnes — 3 bandes verticales (centres des gaps), mappées sur la même
grille que __grid pour rester alignées */
.incl-piliers__rails {
position: absolute;
top: 0;
bottom: 0;
left: var(--container-pad);
right: var(--container-pad);
max-width: calc(var(--container) - 2 * var(--container-pad));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 65px;
pointer-events: none;
z-index: 0;
}
.incl-piliers__rail { position: relative; }
.incl-piliers__rail::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(0, 55, 80, 0.5);
}
/* 1ère colonne : pas de ligne (on retire L1) */
.incl-piliers__rail:nth-child(1)::before { display: none; }
/* Colonnes 2-4 : ligne au centre du gap qui les précède (L2, L3, L4) */
.incl-piliers__rail:nth-child(n+2)::before { left: -32.5px; }
.incl-piliers__inner { position: relative; z-index: 1; }
.incl-piliers__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.incl-piliers__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 65px;
align-items: start;
}
.incl-piliers__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
.incl-piliers__icon {
width: 80px;
height: auto;
margin-bottom: 10px;
display: block;
}
.incl-piliers__item-title {
margin: 0;
font-family: 'Amarante', serif;
font-weight: 400;
font-size: 20px;
line-height: 29.21px;
color: var(--bleu-fondation);
}
.incl-piliers__item-desc {
margin: 0;
max-width: 275px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 23.36px;
color: var(--bleu-fondation);
}
/* Le mask se situe DANS __top (zone blanche), juste sous les piliers.
Hauteur naturelle = max-width 853 × (697/983) = 605 → 504 visible en blanc + 101 qui dépassent dans le bleu via margin-bottom négatif. */
.incl-piliers__illu-wrap {
max-width: var(--container);
margin: 0 auto -101px;
padding: 0 var(--container-pad);
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
.incl-piliers__illu {
display: block;
width: 100%;
max-width: 853px;
height: auto;
}
.incl-piliers__bottom {
position: relative;
background: rgba(0, 55, 80, 0.12);
/* 101 (mask qui descend) + 162 (gap mask → texte Figma) = 263 padding-top */
padding: 263px 0 90px;
z-index: 1;
}
.incl-piliers__quote {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
align-items: flex-start;
justify-content: center;
gap: 28px;
text-align: center;
}
.incl-piliers__quote-leaf {
width: 36px;
height: auto;
flex: 0 0 auto;
margin-top: 0.15em;
/* picto-label.svg → bleu fondation */
filter: brightness(0) saturate(100%) invert(13%) sepia(78%) saturate(2470%) hue-rotate(184deg) brightness(95%) contrast(101%);
}
.incl-piliers__quote-leaf--right { transform: scaleX(-1); }
.incl-piliers__quote-text {
margin: 0;
max-width: 900px;
font-family: 'Amarante', serif;
font-weight: 400;
font-size: 50px;
line-height: 59px;
color: var(--bleu-fondation);
}
/* =====================================================================
Page Inclusion — Section "Vous engager aux côtés de la Fondation"
===================================================================== */
.incl-engager {
background: var(--bleu-fondation);
color: var(--blanc);
padding: 119px 0 160px;
}
.incl-engager__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.incl-engager__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 97px;
align-items: start;
}
.incl-engager__title {
margin: 0 0 40px;
font-family: 'Amarante', serif;
font-weight: 400;
font-size: 40px;
line-height: 44.46px;
color: var(--blanc);
max-width: 548px;
}
.incl-engager__body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 23.36px;
color: var(--blanc);
}
.incl-engager__body strong { font-weight: 700; color: var(--blanc); }
.incl-engager__ctas {
max-width: var(--container);
margin: 52px auto 0;
padding: 0 var(--container-pad);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.incl-engager__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13.5px 24px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border: 1px solid var(--blanc);
transition: background 0.25s ease, color 0.25s ease;
}
.incl-engager__cta--outline { background: transparent; color: var(--blanc); }
.incl-engager__cta--outline:hover { background: var(--blanc); color: var(--bleu-fondation); }
.incl-engager__cta--filled { background: var(--blanc); color: var(--bleu-fondation); }
.incl-engager__cta--filled:hover { background: transparent; color: var(--blanc); }
/* =====================================================================
Page Inclusion — Carte "Soutenez la Fondation, faites un don !"
===================================================================== */
.incl-don {
/* La carte straddle entre la zone bleue (incl-engager juste au-dessus)
et la zone blanche en dessous (jusqu'au footer). */
background: var(--blanc);
padding: 0 0 144px;
}
.incl-don__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
justify-content: center;
}
.incl-don__card {
position: relative;
width: 100%;
max-width: 886px;
background: #fafafa;
border: 1px solid var(--bleu-fondation);
border-radius: 13px;
top: -50px;
padding: 95px 60px 50px;
text-align: center;
}
.incl-don__head {
position: absolute;
top: -64px;
left: 50%;
transform: translateX(-50%);
width: 127px;
height: auto;
display: block;
}
.incl-don__brand {
display: block;
margin: 36px auto 0;
width: 174px;
height: auto;
}
.incl-don__title {
margin: 0 0 12px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 33.86px;
letter-spacing: 0.52px;
color: var(--bleu-fondation);
}
.incl-don__body {
margin: 0 auto 40px;
max-width: 812px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 23.36px;
color: var(--bleu-fondation);
}
.incl-don__ctas {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.incl-don__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13.5px 24px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--bleu-fondation);
border: 1px solid var(--bleu-fondation);
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease;
}
.incl-don__cta:hover { background: var(--bleu-fondation); color: var(--blanc); }
/* =====================================================================
Footer — variante page Inclusion : fond bleu, carte fondation cachée
(déjà présente en page via incl-don)
===================================================================== */
.page-template-page-inclusion .site-footer__bg path { fill: var(--bleu-fondation); }
/* Footer mobile (SVG inline) — version bleue pour la page Inclusion */
@media (max-width: 720px) {
.page-template-page-inclusion .site-footer {
background: var(--bleu-fondation) url("data:image/svg+xml;utf8,") no-repeat top center / 100% auto;
}
}
@media (max-width: 900px) {
.incl-engager__cols { grid-template-columns: 1fr; gap: 24px; }
.incl-engager__title { font-size: 32px; line-height: 1.15; }
.incl-don__card { padding: 80px 28px 40px; }
.incl-don__title { font-size: 22px; line-height: 1.25; }
}
@media (max-width: 1100px) {
.incl-piliers__grid { gap: 32px; }
.incl-piliers__quote-text { font-size: 38px; line-height: 46px; }
}
@media (max-width: 820px) {
.incl-piliers__grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
.incl-piliers__illu { margin-top: -160px; }
.incl-piliers__quote-text { font-size: 28px; line-height: 36px; }
.incl-piliers__quote-leaf { width: 24px; }
.incl-piliers__quote { gap: 14px; }
}
@media (max-width: 520px) {
.incl-piliers__grid { grid-template-columns: 1fr; }
.incl-piliers__illu { margin-top: -100px; }
.incl-piliers__quote-text { font-size: 22px; line-height: 28px; }
.incl-piliers__rails { display: none; }
}
@media (max-width: 960px) {
.incl-hero { padding: 100px 0 0; min-height: 0; }
.incl-hero__villa { width: 180px; top: 80px; }
.incl-hero__leaves { width: 160px; top: 120px; }
.incl-hero__title { font-size: 36px; line-height: 1.1; }
.incl-hero__inner { padding-bottom: 24px; }
.incl-hero__ellipse { bottom: 0; width: clamp(420px, 110vw, 900px); }
.incl-fondation { padding: 80px 0 70px; }
.incl-fondation__text { font-size: 15px; line-height: 24px; }
.incl-fondation__logo { width: 200px; }
}
@media (max-width: 600px) {
.incl-hero__villa, .incl-hero__leaves { display: none; }
.incl-hero__title { font-size: 30px; }
.incl-hero__body { font-size: 15px; line-height: 22px; }
.incl-fondation__text { font-size: 14px; line-height: 22px; }
}
/* ============================================================
Page Contact
============================================================ */
.page-contact { background: var(--bg-warm); position: relative; }
/* SVG décoratifs villa-vert au niveau du pour pouvoir déborder
librement entre le hero et le formulaire (top:519 / top:135 du Figma). */
.page-contact__leaves {
position: absolute;
height: auto;
/* opacité déjà appliquée à l'intérieur du SVG (rect opacity=0.3) */
pointer-events: none;
user-select: none;
z-index: 1;
}
.page-contact__leaves--left { left: 0; top: 519px; width: 423px; }
.page-contact__leaves--right { right: 0; top: 135px; width: 277px; }
/* ---------- Hero (titre + intro centrés) ---------- */
.contact-hero {
position: relative;
padding: 232px 0 60px;
z-index: 2;
}
.contact-hero__inner {
position: relative;
z-index: 2;
max-width: 678px;
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
flex-direction: column;
gap: 40px;
text-align: center;
}
.contact-hero__title {
margin: 0;
color: var(--vert);
font-family: 'Amarante', serif;
font-size: 46px;
font-weight: 400;
line-height: 51.13px;
}
.contact-hero__body {
margin: 0;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
/* ---------- Formulaire ---------- */
.contact-form-section {
position: relative;
padding: 60px 0 100px;
z-index: 2;
background: var(--blanc);
}
.contact-form-section__inner {
max-width: 846px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
.contact-form__notice {
margin: 0 0 24px;
padding: 14px 18px;
border: 1px solid;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.contact-form__notice--ok { color: var(--vert); border-color: var(--vert); background: rgba(77, 92, 0, 0.08); }
.contact-form__notice--err { color: #8a2a1c; border-color: #8a2a1c; background: rgba(138, 42, 28, 0.08); }
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-form__field { width: 100%; }
.contact-form__field--half { grid-column: span 1; }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__field--submit { display: flex; align-items: stretch; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 13.5px 16px;
background: #ffffff;
border: 1px solid rgba(77, 92, 0, 0.70);
border-radius: 0;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--vert-textes);
font-style: italic;
font-weight: 400;
opacity: 1;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--vert);
}
.contact-form select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px 10px;
padding-right: 44px;
cursor: pointer;
}
.contact-form textarea {
min-height: 161px;
padding-top: 24px;
resize: vertical;
}
.contact-form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
/* Date input : on masque le texte natif jj/mm/aaaa tant que vide et non focus,
et on superpose un label italique cohérent avec les placeholders.
:invalid sur input[required] = champ vide ; :valid = a une valeur. */
.contact-form__field--date { position: relative; }
.contact-form__field--date input[type="date"] { color: var(--vert-textes); }
.contact-form__field--date input[type="date"]:required:invalid:not(:focus)::-webkit-datetime-edit { color: transparent; }
.contact-form__date-label {
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--vert-textes);
font-style: italic;
font-weight: 400;
font-size: 16px;
opacity: 1;
transition: opacity 0.15s ease;
}
.contact-form__field--date input[type="date"]:focus ~ .contact-form__date-label,
.contact-form__field--date input[type="date"]:required:valid ~ .contact-form__date-label {
opacity: 0;
}
.contact-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13.5px 24px;
background: var(--vert);
color: var(--blanc);
border: 1px solid var(--vert);
border-radius: 0;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-form__submit-arrow {
width: 33px;
height: 12px;
/* flèche blanche par défaut (sur fond vert) */
filter: brightness(0) invert(1);
transition: filter 0.25s ease, transform 0.25s ease;
}
.contact-form__submit:hover {
background: transparent;
color: var(--vert);
}
.contact-form__submit:hover .contact-form__submit-arrow {
/* teinte vert pour matcher le label au hover */
filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(1080%) hue-rotate(35deg) brightness(95%) contrast(95%);
transform: translateX(4px);
}
/* ---------- Bande verte "Nous trouver / Nous joindre" ---------- */
.contact-info {
position: relative;
background: var(--vert);
padding: 163px 0;
overflow: hidden;
}
.contact-info__inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
align-items: center;
gap: 240px;
}
.contact-info__logo {
width: 150px;
height: auto;
flex-shrink: 0;
margin-left: 89px; /* aligne le logo à ~209px du bord viewport sur 1440 */
}
.contact-info__col {
display: flex;
flex-direction: column;
gap: 14px;
flex-shrink: 0;
}
.contact-info__col--right { margin-left: 153px; }
.contact-info__leaves {
position: absolute;
right: 0;
bottom: 0;
width: 280px;
height: auto;
opacity: 0.35;
pointer-events: none;
user-select: none;
}
.contact-info__label {
color: var(--blanc);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
}
.contact-info__value {
margin: 0;
max-width: 235px;
color: var(--blanc);
font-family: 'Amarante', serif;
font-size: 26px;
font-weight: 400;
line-height: 1.15;
}
.contact-info__value a { color: inherit; text-decoration: none; }
.contact-info__value a:hover { text-decoration: underline; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.contact-hero { padding-top: 180px; }
.contact-hero__leaves--left { width: 280px; top: 600px; }
.contact-hero__leaves--right { width: 200px; top: 180px; }
}
@media (max-width: 960px) {
.contact-hero { padding: 160px 0 40px; }
.contact-hero__title { font-size: 38px; line-height: 1.15; }
.contact-hero__leaves { display: none; }
.contact-form { grid-template-columns: 1fr; gap: 16px; }
.contact-form__field--half { grid-column: 1 / -1; }
.contact-info { padding: 70px 0; }
.contact-info__inner { flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.contact-info__logo { margin-left: 0; width: 130px; }
.contact-info__col--right { margin-left: 0; }
}
@media (max-width: 600px) {
.contact-hero__title { font-size: 30px; }
.contact-form-section { padding: 40px 0 70px; }
}
/* Sur la page contact, la carte de loc ne doit pas déborder horizontalement
(il n'y a plus de cta-contact en dessous pour absorber le débordement bas). */
.page-contact { overflow-x: clip; }
.page-contact .loc { overflow: hidden; }
/* ---------- Case RGPD du formulaire contact ---------- */
.contact-form__field--rgpd { margin-top: -4px; }
.contact-form__rgpd {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.contact-form__rgpd input { position: absolute; opacity: 0; pointer-events: none; }
.contact-form__rgpd-box {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
background: #ffffff;
border: 1px solid rgba(77, 92, 0, 0.70);
position: relative;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.contact-form__rgpd-box::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 7px;
height: 12px;
border: solid var(--blanc);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.15s ease;
}
.contact-form__rgpd input:checked + .contact-form__rgpd-box {
background: var(--vert);
border-color: var(--vert);
}
.contact-form__rgpd input:checked + .contact-form__rgpd-box::after { opacity: 1; }
.contact-form__rgpd input:focus-visible + .contact-form__rgpd-box {
outline: 2px solid var(--vert);
outline-offset: 2px;
}
.contact-form__rgpd-text a {
color: var(--vert);
text-decoration: underline;
}
/* ---------- Altcha widget ---------- */
.contact-form__field--altcha altcha-widget {
--altcha-color-base: #ffffff;
--altcha-color-border: rgba(77, 92, 0, 0.70);
--altcha-color-text: var(--vert-textes);
--altcha-color-border-focus: var(--vert);
--altcha-color-error-text: #8a2a1c;
--altcha-border-radius: 0;
--altcha-max-width: 100%;
width: 100%;
display: block;
}
/* ============================================
PAGE MERCI — confirmation envoi formulaire
============================================ */
.page-merci {
background: var(--bg-warm);
position: relative;
overflow-x: clip;
min-height: 100vh;
}
.page-merci__leaves {
position: absolute;
height: auto;
pointer-events: none;
user-select: none;
z-index: 1;
opacity: 0.6;
}
.page-merci__leaves--left { left: 0; top: 200px; width: 280px; }
.page-merci__leaves--right { right: 0; bottom: 80px; width: 280px; transform: scaleX(-1); }
.page-merci__hero {
position: relative;
z-index: 2;
padding: 232px 0 120px;
min-height: 70vh;
display: flex;
align-items: center;
}
.page-merci__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--container-pad);
text-align: center;
}
.page-merci__title {
margin: 0 0 28px;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.1;
}
.page-merci__body {
margin: 0 auto 40px;
max-width: 560px;
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.55;
}
.page-merci__cta {
display: inline-flex;
align-items: center;
gap: 14px;
height: 52px;
padding: 0 28px;
border: 1px solid var(--vert);
color: var(--vert);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
transition: background-color 0.25s ease, color 0.25s ease;
}
.page-merci__cta img {
/* arrow blanche dans le SVG → teintée vert au repos */
filter: brightness(0) saturate(100%) invert(28%) sepia(60%) saturate(900%) hue-rotate(35deg) brightness(85%) contrast(105%);
transition: filter 0.25s ease, transform 0.25s ease;
}
.page-merci__cta:hover { background: var(--vert); color: var(--blanc); }
.page-merci__cta:hover img { filter: brightness(0) invert(1); transform: translateX(4px); }
@media (max-width: 768px) {
.page-merci__hero { padding: 180px 0 80px; }
.page-merci__leaves--left { width: 180px; top: 160px; }
.page-merci__leaves--right { width: 180px; bottom: 40px; }
}
/* ============================================
PAGE DEFAULT — Mentions légales, Politique de confidentialité, etc.
============================================ */
.page-default {
background: var(--bg-warm);
min-height: 100vh;
padding: 220px 0 120px;
}
.page-default__inner {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
.page-default__title {
margin: 0 0 48px;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.1;
text-align: center;
}
.page-default__content {
color: var(--vert-textes);
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 1.7;
}
.page-default__content h2 {
margin: 56px 0 16px;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.25;
}
.page-default__content h2:first-child { margin-top: 0; }
.page-default__content h3 {
margin: 32px 0 12px;
color: var(--vert);
font-family: 'Amarante', serif;
font-weight: 400;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.3;
}
.page-default__content p {
margin: 0 0 16px;
}
.page-default__content ul,
.page-default__content ol {
margin: 0 0 16px;
padding-left: 24px;
}
.page-default__content li {
margin: 0 0 8px;
}
.page-default__content a {
color: var(--vert);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: opacity 0.2s ease;
}
.page-default__content a:hover { opacity: 0.7; }
.page-default__content strong { color: var(--vert); font-weight: 600; }
@media (max-width: 768px) {
.page-default { padding: 170px 0 80px; }
.page-default__title { margin-bottom: 32px; }
.page-default__content { font-size: 15px; }
}
/* ============================================================
Sticky mobile CTA — bande orange pleine largeur < 960px
Bouton outlined blanc (même pattern que .ftr-btn--white)
============================================================ */
.vlg-mobile-cta { display: none; }
@media (max-width: 960px) {
.vlg-mobile-cta {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
padding: 14px 20px;
background: var(--orange);
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}
.vlg-mobile-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 13.5px 24px;
border: 1px solid var(--blanc);
color: var(--blanc);
background: transparent;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.vlg-mobile-cta__btn:hover,
.vlg-mobile-cta__btn:focus-visible {
background: var(--blanc);
color: var(--orange);
}
.vlg-mobile-cta__arrow {
width: 33px;
height: 12px;
flex-shrink: 0;
display: inline-block;
background-color: currentColor;
-webkit-mask: url(/assets/img/arrow.svg) no-repeat center / contain;
mask: url(/assets/img/arrow.svg) no-repeat center / contain;
transition: background-color .2s ease;
}
/* Quand le menu mobile plein écran est ouvert, on cache la bande */
body.nav-open .vlg-mobile-cta { display: none; }
/* Évite que le footer soit masqué par la bande sticky */
.site-footer { padding-bottom: 88px; }
/* Remonte le widget Axetio (accessibilité, injecté via GTM) au-dessus de la bande.
On tente les sélecteurs courants — à ajuster si Axetio utilise un id custom. */
#axetio-widget,
#axeptio_btn_openCookies,
[id^="axetio"],
[class*="axetio"],
.axetio,
.axetio-toggle,
.axetio-button,
[aria-label*="Axetio" i],
[aria-label*="accessibilité" i][role="button"] {
bottom: 80px !important;
z-index: 9001 !important;
}
}
@media (max-width: 480px) {
.vlg-mobile-cta { padding: 12px 16px; }
.vlg-mobile-cta__btn { font-size: 13px; padding: 12px 20px; gap: 10px; }
.vlg-mobile-cta__arrow { width: 28px; height: 10px; }
}