/* =========================================================
CONCIERGERIE AIRBNB NICE — HERO BANNER
Palette
Rose Poudré (base) ...... #F6EAEA
Rose Lumière (spotlight). #FBF3F3
Travertin Rosé .......... #EAD9D9
Encre Profonde .......... #1F1A1A
Laiton .................. #B8956A (brass accent, unchanged)
Taupe Rosé .............. #8A7670 (secondary text)
Laiton hover ............ #9A7B54
Bleu Promenade .......... #42627A
========================================================= */
:root {
--color-cream: #F6EAEA; /* Rose Poudré — primary ground */
--color-rose-lumiere: #FBF3F3; /* Lifted spotlight variant */
--color-travertin: #EAD9D9; /* Travertin Rosé */
--color-ink: #1F1A1A; /* Encre Profonde */
--color-ink-soft: #3D3D38;
--color-laiton: #B8956A;
--color-laiton-deep: #8A7670; /* Taupe Rosé */
--color-laiton-hover: #9A7B54;
--color-bleu: #42627A; /* Bleu Promenade, adjusted */
--font-serif: "Cormorant Garamond", "Tenor Sans", Georgia, serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-script: "Pinyon Script", "Tangerine", cursive;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--color-cream);
color: var(--color-ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern", "liga", "onum";
}
a { color: inherit; text-decoration: none; }
/* =========================================================
HEADER
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
}
/* ---------- LAYER 1 — TOP BAR ---------- */
.topbar {
height: 36px;
background: var(--color-ink);
color: var(--color-travertin);
/* smart-bar retraction */
transition: margin-top 0.3s var(--ease-out);
opacity: 0;
animation: header-fade 0.2s var(--ease-out) forwards;
}
.site-header.is-condensed .topbar {
margin-top: -36px;
}
.topbar__inner {
max-width: 1440px;
height: 100%;
margin: 0 auto;
padding: 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
}
.topbar__nap {
display: flex;
align-items: center;
gap: 16px;
}
.nap-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-travertin);
}
.nap-icon {
color: var(--color-laiton);
flex-shrink: 0;
transition: color 0.3s var(--ease-out);
}
.nap-text--place {
text-transform: uppercase;
letter-spacing: 0.15em;
}
.nap-text--phone {
font-weight: 500;
}
.nap-text--hours {
letter-spacing: 0.1em;
}
.nap-divider {
width: 1px;
height: 14px;
background: var(--color-travertin);
opacity: 0.3;
}
.nap-item--link {
transition: color 0.3s var(--ease-out);
}
.nap-item--link:hover {
color: var(--color-cream);
}
.nap-item--link:hover .nap-icon {
color: var(--color-cream);
}
.topbar__micro {
display: flex;
align-items: center;
gap: 28px;
}
.topbar__owner {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--color-travertin);
padding-bottom: 4px;
border-bottom: 1px solid var(--color-laiton);
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.topbar__owner:hover {
color: var(--color-cream);
border-bottom-color: var(--color-cream);
}
.topbar__lang {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lang {
font-family: var(--font-sans);
font-size: 12px;
background: none;
border: none;
cursor: pointer;
color: var(--color-travertin);
opacity: 0.5;
padding: 0;
transition: opacity 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.lang--active {
color: var(--color-cream);
opacity: 1;
}
.lang-dot {
color: var(--color-laiton);
font-size: 12px;
}
/* ---------- LAYER 2 — MASTHEAD ---------- */
.masthead {
height: 84px;
background: var(--color-cream);
opacity: 0;
animation: header-fade 0.4s var(--ease-out) 0.1s forwards;
transition: border-color 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out);
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled .masthead {
border-bottom: 1px solid rgba(184, 149, 106, 0.3);
background: rgba(246, 234, 234, 0.92);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.masthead__inner {
max-width: 1440px;
height: 100%;
margin: 0 auto;
padding: 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
/* Logo */
.logo {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
column-gap: 12px;
align-items: baseline;
}
.logo__mark {
grid-row: 1 / 3;
grid-column: 1;
align-self: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 32px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-ink);
}
.logo__amp {
font-size: 110%;
color: var(--color-bleu);
transition: color 0.4s var(--ease-out);
}
.logo:hover .logo__amp {
color: var(--color-laiton);
}
.logo__word {
grid-row: 1;
grid-column: 2;
font-family: var(--font-serif);
font-weight: 400;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--color-ink);
align-self: end;
}
.logo__rule {
grid-row: 2;
grid-column: 2;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin-top: 6px;
}
.logo__tagline {
grid-row: 3;
grid-column: 2;
margin-top: 4px;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-laiton-deep);
}
/* Navigation */
.nav {
display: flex;
align-items: center;
gap: 40px;
}
.nav__item {
position: relative;
font-family: var(--font-serif);
font-weight: 400;
font-size: 15px;
letter-spacing: 0.02em;
color: var(--color-ink);
padding-bottom: 4px;
opacity: 0;
animation: header-fade 0.4s var(--ease-out) forwards;
transition: color 0.4s var(--ease-out);
}
.nav__item:nth-child(1) { animation-delay: 0.20s; }
.nav__item:nth-child(2) { animation-delay: 0.26s; }
.nav__item:nth-child(3) { animation-delay: 0.32s; }
.nav__item:nth-child(4) { animation-delay: 0.38s; }
.nav__item:nth-child(5) { animation-delay: 0.44s; }
.nav__item:nth-child(6) { animation-delay: 0.50s; }
/* Animated underline */
.nav__item::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: var(--color-laiton);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.nav__item:hover { color: var(--color-bleu); }
.nav__item:hover::after { transform: scaleX(1); }
.nav__item--active { color: var(--color-bleu); }
.nav__item--active::after { transform: scaleX(1); }
/* Stacked "Tarifs — 20 % HT" */
.nav__item--stacked {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.nav__sublabel {
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
color: var(--color-laiton-deep);
transition: color 0.4s var(--ease-out);
}
.nav__item--stacked:hover .nav__sublabel { color: var(--color-bleu); }
/* CTA */
.masthead__cta {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
padding: 14px 24px;
background: var(--color-laiton);
color: var(--color-cream);
border-radius: 2px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: inset 0 1px 0 0 #D4B68A;
opacity: 0;
animation: header-fade 0.5s var(--ease-out) 0.56s forwards;
transition: background-color 0.4s var(--ease-out);
}
.masthead__cta:hover {
background: var(--color-laiton-hover);
}
.masthead__cta-arrow {
transition: transform 0.4s var(--ease-out);
}
.masthead__cta:hover .masthead__cta-arrow {
transform: translateX(4px);
}
/* Mobile-only CTA + burger (hidden on desktop) */
.masthead__cta-mobile,
.masthead__burger {
display: none;
}
/* ---------- LAYER 3 — REASSURANCE BANNER ---------- */
.reassurance-banner {
height: 48px;
background: var(--color-travertin);
overflow: hidden;
transform: translateY(-100%);
animation: banner-drop 0.6s var(--ease-out) 0.6s forwards;
}
.reassurance-banner__inner {
max-width: 1440px;
height: 100%;
margin: 0 auto;
padding: 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
.rb-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--color-ink);
}
.rb-check {
color: var(--color-bleu);
flex-shrink: 0;
transition: color 0.4s var(--ease-out);
}
.rb-item:hover .rb-check {
color: var(--color-laiton);
}
.rb-figure {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--color-ink);
}
.rb-divider {
width: 1px;
height: 16px;
background: var(--color-laiton);
opacity: 0.4;
flex-shrink: 0;
}
/* ---------- MOBILE MENU OVERLAY ---------- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: var(--color-cream);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 48px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}
body.mobile-menu-open .mobile-menu {
opacity: 1;
visibility: visible;
}
body.mobile-menu-open {
overflow: hidden;
}
.mobile-menu__nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.mobile-menu__nav a {
font-family: var(--font-serif);
font-size: 24px;
color: var(--color-ink);
}
.mobile-menu__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 32px;
background: var(--color-laiton);
color: var(--color-cream);
border-radius: 2px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
box-shadow: inset 0 1px 0 0 #D4B68A;
}
/* ---------- HEADER ANIMATIONS ---------- */
@keyframes header-fade {
to { opacity: 1; }
}
@keyframes banner-drop {
to { transform: translateY(0); }
}
/* ---------- HEADER — TABLET ---------- */
@media (max-width: 1024px) {
.topbar__inner,
.masthead__inner,
.reassurance-banner__inner {
padding: 0 32px;
}
.topbar__inner { gap: 32px; }
.nav { gap: 28px; }
.nap-text { font-size: 11px; }
/* Drop the hours item — least essential when space tightens */
.topbar__nap > .nap-item:last-child,
.topbar__nap > .nap-divider:last-of-type {
display: none;
}
}
/* ---------- HEADER — MOBILE ---------- */
@media (max-width: 768px) {
.topbar {
height: 32px;
}
.site-header.is-condensed .topbar {
margin-top: -32px;
}
.topbar__inner {
padding: 0 20px;
gap: 16px;
}
/* Keep only phone + lang on the mobile top bar */
.topbar__nap .nap-item:not(.nap-item--link),
.topbar__nap .nap-item--link[href^="mailto"],
.topbar__nap .nap-divider {
display: none;
}
.topbar__owner { display: none; }
.masthead {
height: 64px;
}
.masthead__inner {
padding: 0 20px;
gap: 16px;
}
.logo__word { display: none; }
.logo__rule { display: none; }
.logo {
grid-template-columns: auto auto;
grid-template-rows: auto;
align-items: center;
}
.logo__mark {
grid-row: 1;
grid-column: 1;
align-self: center;
}
.logo__tagline {
grid-row: 1;
grid-column: 2;
margin-top: 0;
align-self: center;
}
.nav { display: none; }
.masthead__cta { display: none; }
.masthead__cta-mobile {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--color-laiton);
color: var(--color-cream);
border-radius: 2px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
box-shadow: inset 0 1px 0 0 #D4B68A;
margin-left: auto;
}
.masthead__burger {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
width: 24px;
background: none;
border: none;
cursor: pointer;
padding: 4px 0;
}
.burger__line {
display: block;
width: 16px;
height: 1.5px;
background: var(--color-ink);
transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), width 0.3s var(--ease-out);
}
.burger__line--short { width: 12px; }
body.mobile-menu-open .burger__line:nth-child(1) {
width: 16px;
transform: translateY(6.5px) rotate(45deg);
}
body.mobile-menu-open .burger__line:nth-child(2) {
opacity: 0;
}
body.mobile-menu-open .burger__line:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
.reassurance-banner {
height: 56px;
}
.reassurance-banner__inner {
padding: 0 20px;
gap: 0;
overflow-x: auto;
justify-content: flex-start;
scrollbar-width: none;
}
.reassurance-banner__inner::-webkit-scrollbar { display: none; }
.rb-item {
flex-shrink: 0;
padding: 0 16px;
white-space: nowrap;
}
.rb-item:first-child { padding-left: 0; }
}
/* ---------- HEADER — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.topbar,
.masthead,
.nav__item,
.masthead__cta {
opacity: 1;
animation: none;
}
.reassurance-banner {
transform: translateY(0);
animation: none;
}
}
/* ---------- HERO SHELL ---------- */
.hero {
position: relative;
min-height: 100vh;
width: 100%;
background: var(--color-cream);
overflow: hidden;
padding: 48px 48px 0 48px;
display: flex;
flex-direction: column;
}
.hero__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ---------- GRID ---------- */
.hero__grid {
position: relative;
z-index: 2;
flex: 1;
display: grid;
grid-template-columns: 55fr 45fr;
gap: 64px;
align-items: center;
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 40px 0 120px 0;
}
/* ---------- LEFT — CONTENT ---------- */
.hero__content {
max-width: 600px;
padding-left: 24px;
opacity: 0;
transform: translateY(12px);
animation: rise 0.8s var(--ease-out) forwards;
}
/* Eyebrow */
.eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 40px;
}
.eyebrow__label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-laiton);
}
.eyebrow__rule {
display: inline-block;
width: 24px;
height: 1px;
background: var(--color-laiton);
opacity: 0.6;
}
/* H1 */
.hero__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(40px, 4.4vw, 64px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--color-ink);
margin: 0 0 32px 0;
}
.hero__title-line { display: block; }
.hero__title-line--italic {
font-style: italic;
font-weight: 300;
margin-top: 8px;
}
.hero__dash {
display: inline-block;
margin-right: 4px;
font-style: normal;
color: var(--color-laiton);
}
.hero__accent {
font-style: italic;
color: var(--color-bleu);
font-weight: 400;
}
/* Subtitle */
.hero__subtitle {
max-width: 480px;
margin: 0 0 40px 0;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.6;
font-weight: 400;
color: var(--color-laiton-deep);
}
.hero__subtitle .figure {
font-feature-settings: "onum", "kern";
color: var(--color-ink);
font-weight: 500;
}
/* ---------- CTAs ---------- */
.hero__ctas {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
opacity: 0;
animation: rise 0.8s var(--ease-out) 0.6s forwards;
}
.cta {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
transition: all 0.4s var(--ease-out);
cursor: pointer;
}
/* Primary */
.cta--primary {
background: var(--color-laiton);
color: var(--color-cream);
padding: 18px 32px;
border-radius: 2px;
gap: 12px;
cursor: url("data:image/svg+xml;utf8,") 8 8, pointer;
}
.cta--primary:hover {
background: var(--color-laiton-hover);
}
.cta__arrow {
display: inline-block;
transition: transform 0.4s var(--ease-out);
}
.cta--primary:hover .cta__arrow {
transform: translateX(4px);
}
/* Secondary */
.cta--secondary {
position: relative;
color: var(--color-ink);
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-ink);
text-underline-offset: 6px;
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), border-width 0.3s var(--ease-out);
}
.cta--secondary:hover {
color: var(--color-bleu);
border-bottom: 2px solid var(--color-bleu);
padding-bottom: 5px;
}
.cta__phone {
display: inline-block;
flex-shrink: 0;
}
/* ---------- RIGHT — IMAGE ---------- */
.hero__image-wrap {
position: relative;
height: 100%;
min-height: 560px;
opacity: 0;
animation: fade 1s var(--ease-out) 0.2s forwards;
}
.hero__image {
position: relative;
width: 100%;
height: 100%;
min-height: 560px;
overflow: hidden;
/* hairline border in Sable Doré at 20% opacity */
box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.2);
}
.hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.02);
}
/* Warm color grade — slight lift in shadows toward #B8956A */
.hero__image-tone {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(184, 149, 106, 0.04) 0%,
rgba(184, 149, 106, 0.10) 100%);
mix-blend-mode: soft-light;
pointer-events: none;
}
/* ---------- REASSURANCE STRIP ---------- */
.reassurance {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 32px 24px 64px 24px;
opacity: 0;
animation: rise 0.8s var(--ease-out) 0.6s forwards;
}
.reassurance__item {
position: relative;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 6px;
}
.reassurance__item + .reassurance__item::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 1px;
background: var(--color-laiton);
opacity: 0.2;
}
.reassurance__top {
display: flex;
align-items: center;
gap: 10px;
}
.reassurance__check {
color: var(--color-bleu);
flex-shrink: 0;
}
.reassurance__label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--color-ink);
letter-spacing: 0.01em;
}
.reassurance__label strong {
font-weight: 500;
}
.reassurance__caption {
display: block;
margin-left: 26px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 400;
color: var(--color-laiton);
letter-spacing: 0.02em;
}
/* =========================================================
SECTION — QUI SOMMES-NOUS ?
========================================================= */
.about {
position: relative;
min-height: 720px;
padding: 160px 48px;
background: var(--color-travertin);
/* 200px gradient fade at top — quiet chapter break from the hero */
background-image: linear-gradient(
to bottom,
var(--color-cream) 0,
var(--color-travertin) 200px
);
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
/* Chapter-mark hairlines, top & bottom */
.about__chapter-mark {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: var(--color-laiton);
opacity: 0.1;
}
.about__chapter-mark--top { top: 80px; }
.about__chapter-mark--bottom { bottom: 80px; }
/* ---------- GRID ---------- */
.about__grid {
position: relative;
display: grid;
grid-template-columns: 42fr 58fr;
gap: 96px;
max-width: 1280px;
margin: 0 auto;
align-items: center;
}
/* ---------- PORTRAIT ---------- */
.about__portrait-wrap {
position: relative;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.about__portrait-wrap.is-visible {
opacity: 1;
transform: translateY(0);
}
.about__portrait {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
/* 1px Sable Doré 20% hairline frame, matching the hero */
box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.2);
}
.about__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.02);
}
.about__signature {
margin: 24px 0 0 0;
text-align: center;
font-family: var(--font-script);
font-size: 32px;
line-height: 1;
color: var(--color-bleu);
font-weight: 400;
}
/* ---------- CONTENT ---------- */
.about__content {
position: relative;
max-width: 620px;
/* Faint vertical hairline at the left edge of the text column */
padding-left: 32px;
border-left: 1px solid rgba(184, 149, 106, 0.15);
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.about__content.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Animated eyebrow rule */
.eyebrow__rule--draw {
width: 0;
transition: width 0.6s var(--ease-out) 0.3s;
}
.about__content.is-visible .eyebrow__rule--draw {
width: 24px;
}
/* H2 */
.about__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(32px, 3.4vw, 46px);
line-height: 1.1;
color: var(--color-ink);
margin: 0 0 40px 0;
}
.about__title-line { display: block; }
.about__title-line--italic {
font-style: italic;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.about__dash {
display: inline-block;
margin-right: 4px;
color: var(--color-laiton);
}
/* Body */
.about__body {
margin-bottom: 48px;
}
.about__paragraph {
margin: 0 0 28px 0;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.7;
color: var(--color-ink-soft);
}
.about__paragraph:last-child { margin-bottom: 0; }
.about__accent {
color: var(--color-bleu);
}
.about__brand {
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--color-ink);
font-weight: 400;
}
/* The two-circle mark */
.about__twomark {
display: flex;
justify-content: center;
margin: 8px 0 28px 0;
opacity: 0.85;
}
/* Pull-quote paragraph (paragraph 3) */
.about__paragraph--pull {
position: relative;
padding-left: 24px;
border-left: 2px solid var(--color-laiton);
color: var(--color-ink);
}
/* ---------- CTA (text link) ---------- */
.about__cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-ink);
}
/* Underline (1px Laiton, 6px below baseline) — sits under the label only,
extends 12px to the right on hover, shifts to Bleu Promenade. */
.about__cta-label {
position: relative;
display: inline-block;
padding-bottom: 6px;
}
.about__cta-label::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--color-laiton);
transition: right 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.about__cta:hover .about__cta-label::after {
right: -12px;
background: var(--color-bleu);
}
.about__cta-arrow {
display: inline-block;
color: var(--color-laiton);
transition: transform 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.about__cta:hover .about__cta-arrow {
transform: translateX(6px);
color: var(--color-bleu);
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.about {
padding: 120px 32px;
}
.about__grid {
gap: 56px;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.about {
padding: 96px 20px;
min-height: 0;
}
.about__chapter-mark--top { top: 48px; }
.about__chapter-mark--bottom { bottom: 48px; }
.about__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.about__content {
padding-left: 20px;
max-width: 100%;
}
.about__title {
margin-bottom: 32px;
}
.about__paragraph,
.about__brand {
font-size: 16px;
}
.about__signature {
font-size: 28px;
}
}
/* ---------- REDUCED MOTION (about) ---------- */
@media (prefers-reduced-motion: reduce) {
.about__portrait-wrap,
.about__content {
opacity: 1;
transform: none;
transition: none;
}
.eyebrow__rule--draw { width: 24px; transition: none; }
.about__cta::after,
.about__cta-label::after,
.about__cta-arrow { transition: none; }
}
/* =========================================================
SECTION — POURQUOI NOUS CHOISIR ?
========================================================= */
.why {
position: relative;
background: var(--color-cream);
padding: 160px 80px;
overflow: hidden;
}
/* Grain continuity with the hero */
.why__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ---------- HEADER ---------- */
.why__header {
position: relative;
z-index: 2;
text-align: center;
max-width: 1280px;
margin: 0 auto 96px auto;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.why__header.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Chapter mark — 120px 1px Laiton rule centered above the eyebrow */
.why__chapter-mark {
display: block;
width: 120px;
height: 1px;
background: var(--color-laiton);
opacity: 0.5;
margin: 0 auto 48px auto;
}
.eyebrow--center {
justify-content: center;
margin-bottom: 32px;
}
.why__eyebrow-label {
letter-spacing: 0.25em;
}
.eyebrow__rule--center {
width: 32px;
}
.why__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 48px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 720px;
}
.why__brand {
font-style: italic;
color: var(--color-ink);
}
.why__subtitle {
margin: 32px auto 0 auto;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: var(--color-laiton);
letter-spacing: 0.01em;
}
/* ---------- GRID ---------- */
.why__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: 1280px;
margin: 0 auto;
}
/* ---------- BLOCK ---------- */
.why__block {
position: relative;
display: flex;
flex-direction: column;
min-height: 420px;
padding: 0 32px;
/* Reveal */
opacity: 0;
transform: translateY(16px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
transition-delay: var(--block-delay, 0ms);
}
.why__block.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Vertical hairlines between blocks (draws top-to-bottom after blocks land) */
.why__block + .why__block::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 0;
background: var(--color-laiton);
opacity: 0.15;
transition: height 1.2s var(--ease-out);
transition-delay: calc(var(--block-delay, 0ms) + 800ms);
}
.why__block.is-visible + .why__block::before,
.why__block + .why__block.is-visible::before {
height: 100%;
}
/* Internal stagger via transition-delay on children */
.why__block > * {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.why__block.is-visible > * {
opacity: 1;
transform: translateY(0);
}
/* Order: icon → number → title → body → aside */
.why__block.is-visible .why__icon-frame { transition-delay: calc(var(--block-delay, 0ms) + 0ms); }
.why__block.is-visible .why__number { transition-delay: calc(var(--block-delay, 0ms) + 80ms); }
.why__block.is-visible .why__block-title { transition-delay: calc(var(--block-delay, 0ms) + 160ms); }
.why__block.is-visible .why__block-body { transition-delay: calc(var(--block-delay, 0ms) + 240ms); }
.why__block.is-visible .why__aside { transition-delay: calc(var(--block-delay, 0ms) + 320ms); }
.why__block.is-visible .why__closer { transition-delay: calc(var(--block-delay, 0ms) + 400ms); }
/* Number — visual position above icon (DOM-first so it stacks above) */
.why__number {
display: block;
order: 1;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
letter-spacing: 0.1em;
color: var(--color-laiton);
margin-bottom: 16px;
}
/* Icon frame — 64x64 with 1px Sable Doré 20% hairline */
.why__icon-frame {
order: 2;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(184, 149, 106, 0.2);
}
.why__icon {
display: block;
color: var(--color-laiton);
}
/* Title */
.why__block-title {
order: 3;
margin: 24px 0 0 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(20px, 1.6vw, 24px);
line-height: 1.2;
color: var(--color-ink);
}
.why__figure {
color: var(--color-bleu);
font-style: italic;
font-weight: 400;
}
/* Body */
.why__block-body {
order: 4;
margin: 20px 0 0 0;
max-width: 280px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.65;
color: var(--color-ink-soft);
}
.why__block-body em {
font-style: italic;
color: var(--color-ink);
}
/* Aside (Block 2's proof phrase) */
.why__aside {
order: 5;
margin: 12px 0 0 0;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--color-laiton);
}
.why__aside em { font-style: italic; }
/* Hairline closer — anchored to a shared baseline across blocks */
.why__closer {
order: 6;
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
opacity: 0.6;
margin-top: auto; /* pushes to the bottom of the 420px block */
}
/* ---------- TABLET — 2x2 ---------- */
@media (max-width: 1024px) {
.why {
padding: 120px 48px;
}
.why__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Reset desktop verticals */
.why__block + .why__block::before {
display: none;
}
/* Re-create vertical hairlines for the 2x2 (between columns) */
.why__block:nth-child(even)::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 0;
background: var(--color-laiton);
opacity: 0.15;
transition: height 1.2s var(--ease-out);
transition-delay: calc(var(--block-delay, 0ms) + 800ms);
}
.why__block:nth-child(even).is-visible::before {
height: 100%;
}
/* Horizontal hairline between the two rows (single line spanning both columns) */
.why__block:nth-child(3)::after {
content: "";
position: absolute;
top: -32px;
left: 16px;
width: calc(200% - 32px);
height: 1px;
background: var(--color-laiton);
opacity: 0.15;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.2s var(--ease-out);
transition-delay: calc(var(--block-delay, 0ms) + 800ms);
}
.why__block:nth-child(3).is-visible::after {
transform: scaleX(1);
}
/* Add vertical gap between the two rows */
.why__block:nth-child(n+3) {
margin-top: 64px;
}
}
/* ---------- MOBILE — single column ---------- */
@media (max-width: 768px) {
.why {
padding: 96px 24px;
}
.why__header {
margin-bottom: 64px;
}
.why__chapter-mark {
width: 80px;
margin-bottom: 32px;
}
.why__grid {
grid-template-columns: 1fr;
}
.why__block {
min-height: 0;
padding: 0;
}
.why__block + .why__block::before,
.why__block:nth-child(even)::before,
.why__block:nth-child(n+3)::after {
display: none;
}
/* Horizontal divider between stacked blocks */
.why__block + .why__block {
margin-top: 48px;
padding-top: 48px;
border-top: 1px solid rgba(184, 149, 106, 0.15);
}
.why__block:nth-child(n+3) {
margin-top: 48px;
}
}
/* ---------- REDUCED MOTION (why) ---------- */
@media (prefers-reduced-motion: reduce) {
.why__header,
.why__block,
.why__block > * {
opacity: 1;
transform: none;
transition: none;
}
.why__block + .why__block::before,
.why__block:nth-child(even)::before {
height: 100%;
transition: none;
}
.why__block:nth-child(n+3)::after {
transform: scaleX(1);
transition: none;
}
}
/* =========================================================
SECTION — NOS SERVICES
========================================================= */
.services {
position: relative;
background: var(--color-travertin);
padding: 180px 80px;
overflow: hidden;
}
.services__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ---------- MARGINALIA ---------- */
.services__marginalia {
position: absolute;
top: 220px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-laiton);
opacity: 0.8;
white-space: nowrap;
z-index: 2;
writing-mode: vertical-rl;
transform: rotate(180deg); /* bottom-to-top */
}
.services__marginalia--left { left: 32px; }
.services__marginalia--right { right: 32px; }
/* ---------- HEADER ---------- */
.services__header {
position: relative;
z-index: 2;
text-align: center;
max-width: 1320px;
margin: 0 auto 112px auto;
}
.services__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 48px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 800px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.services__title.is-visible {
opacity: 1;
transform: translateY(0);
}
.services__title em {
font-style: italic;
color: var(--color-ink);
}
.services__subtitle {
margin: 28px auto 0 auto;
max-width: 640px;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
color: var(--color-laiton);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.services__subtitle.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- GRID ---------- */
.services__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 32px;
row-gap: 32px;
max-width: 1320px;
margin: 0 auto;
}
/* Row separator spans all 5 columns between rows 1 and 2 */
.services__separator {
position: relative;
grid-column: 1 / -1;
height: 1px;
background: rgba(184, 149, 106, 0.25);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1s var(--ease-out) 1s;
}
.services__separator.is-visible {
transform: scaleX(1);
}
.services__separator-tick {
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 12px;
background: var(--color-laiton);
transform: translate(-50%, -50%);
}
/* ---------- SERVICE BLOCK ---------- */
.service {
position: relative;
display: flex;
flex-direction: column;
min-height: 280px;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
transition-delay: var(--block-delay, 0ms);
}
.service.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Row 2 services (after separator) get an extra wait so they arrive after the separator draws */
.services__separator ~ .service {
transition-delay: calc(var(--block-delay, 0ms) + 1500ms);
}
.services__separator ~ .service.is-visible {
transition-delay: calc(var(--block-delay, 0ms) + 1500ms);
}
/* Internal stagger */
.service > * {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.service.is-visible > * {
opacity: 1;
transform: translateY(0);
}
.service.is-visible .service__icon { transition-delay: calc(var(--block-delay, 0ms) + 0ms); }
.service.is-visible .service__number { transition-delay: calc(var(--block-delay, 0ms) + 60ms); }
.service.is-visible .service__title { transition-delay: calc(var(--block-delay, 0ms) + 120ms); }
.service.is-visible .service__body { transition-delay: calc(var(--block-delay, 0ms) + 180ms); }
.services__separator ~ .service.is-visible .service__icon { transition-delay: calc(var(--block-delay, 0ms) + 1500ms); }
.services__separator ~ .service.is-visible .service__number { transition-delay: calc(var(--block-delay, 0ms) + 1560ms); }
.services__separator ~ .service.is-visible .service__title { transition-delay: calc(var(--block-delay, 0ms) + 1620ms); }
.services__separator ~ .service.is-visible .service__body { transition-delay: calc(var(--block-delay, 0ms) + 1680ms); }
/* Number above icon */
.service__number {
order: 1;
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.15em;
color: var(--color-laiton);
margin-bottom: 24px;
transition: color 0.4s var(--ease-out) !important;
}
/* Icon */
.service__icon {
order: 2;
color: var(--color-ink);
transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out) !important;
}
.service__icon svg { display: block; }
/* Title */
.service__title {
order: 3;
margin: 20px 0 0 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: 19px;
line-height: 1.25;
color: var(--color-ink);
}
.service__title em {
font-style: italic;
color: var(--color-ink);
}
/* Body */
.service__body {
order: 4;
margin: 16px 0 0 0;
max-width: 220px;
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.6;
color: #5A5550;
}
.service__body em {
font-style: italic;
color: var(--color-ink);
}
.service__place {
color: var(--color-bleu);
}
/* Hover — only icon + number move, only on devices that hover */
@media (hover: hover) {
.service:hover .service__icon {
color: var(--color-bleu);
transform: translateY(-4px);
}
.service:hover .service__number {
color: var(--color-bleu);
}
}
/* ---------- ANCHOR + CTA ---------- */
.services__anchor {
display: block;
width: 80px;
height: 24px;
border: 1px solid var(--color-laiton);
opacity: 0.35;
margin: 96px auto 32px auto;
position: relative;
z-index: 2;
}
.services__cta-wrap {
position: relative;
z-index: 2;
text-align: center;
margin-top: 16px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out) 400ms, transform 0.8s var(--ease-out) 400ms;
}
.services__cta-wrap.is-visible {
opacity: 1;
transform: translateY(0);
}
.services__cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 16px;
padding: 20px 40px;
border: 1px solid var(--color-laiton);
border-radius: 2px;
background: transparent;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-ink);
transition: border-color 0.5s var(--ease-out),
border-width 0.5s var(--ease-out),
background-color 0.5s var(--ease-out);
}
.services__cta-arrow {
display: inline-block;
color: var(--color-ink);
transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.services__cta:hover {
border-color: var(--color-laiton);
border-width: 1.5px;
/* Maintain the same outer footprint by shaving 0.5px from padding */
padding: 19.5px 39.5px;
background-color: rgba(246, 234, 234, 0.5);
}
.services__cta:hover .services__cta-arrow {
transform: translateX(8px);
color: var(--color-bleu);
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.services {
padding: 120px 48px;
}
.services__marginalia { display: none; }
.services__header { margin-bottom: 80px; }
.services__grid {
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
row-gap: 56px;
}
/* Separator no longer sits between two clean halves — hide it */
.services__separator { display: none; }
/* Reset row-2 stagger penalty on tablet since the visual rhythm is different */
.services__separator ~ .service { transition-delay: var(--block-delay, 0ms); }
.services__separator ~ .service.is-visible .service__icon { transition-delay: calc(var(--block-delay, 0ms) + 0ms); }
.services__separator ~ .service.is-visible .service__number { transition-delay: calc(var(--block-delay, 0ms) + 60ms); }
.services__separator ~ .service.is-visible .service__title { transition-delay: calc(var(--block-delay, 0ms) + 120ms); }
.services__separator ~ .service.is-visible .service__body { transition-delay: calc(var(--block-delay, 0ms) + 180ms); }
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.services {
padding: 96px 24px;
}
.services__header { margin-bottom: 56px; }
.services__grid {
grid-template-columns: 1fr;
row-gap: 48px;
}
.service { min-height: 0; }
.service__body { max-width: 100%; }
.services__anchor { margin: 64px auto 24px auto; }
.services__cta {
width: 100%;
justify-content: center;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.services__title,
.services__subtitle,
.services__cta-wrap,
.service,
.service > *,
.services__separator {
opacity: 1;
transform: none;
transition: none;
}
.services__separator { transform: scaleX(1); }
}
/* =========================================================
SECTION — ZONES D'INTERVENTION
========================================================= */
.zones {
position: relative;
background: var(--color-cream);
padding: 160px 80px;
overflow: hidden;
}
.zones__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* Right-edge marginalia */
.zones__marginalia {
position: absolute;
top: 200px;
right: 32px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-laiton);
opacity: 0.8;
white-space: nowrap;
writing-mode: vertical-rl;
z-index: 2;
}
/* ---------- GRID ---------- */
.zones__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 38fr 62fr;
gap: 96px;
max-width: 1280px;
margin: 0 auto;
align-items: center;
}
/* ---------- LEFT — CONTENT ---------- */
.zones__content {
max-width: 480px;
}
/* Per-element reveal styles handled via data-reveal */
.zones__content [data-reveal],
.zones__map-wrap[data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.zones__content [data-reveal].is-visible,
.zones__map-wrap[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
.zones__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(30px, 3vw, 44px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 0 40px 0;
}
.zones__title em {
font-style: italic;
color: var(--color-ink);
}
.zones__body {
margin: 0;
}
.zones__paragraph {
margin: 0 0 24px 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
color: var(--color-ink-soft);
}
.zones__paragraph:last-child { margin-bottom: 0; }
.zones__paragraph em { font-style: italic; }
/* Neighborhood names — Cormorant italic in Bleu Promenade */
.zone-name {
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--color-bleu);
}
.zones__footnote {
margin: 32px 0 0 0;
font-family: var(--font-sans);
font-size: 13px;
font-style: italic;
line-height: 1.6;
color: var(--color-laiton);
}
/* ---------- RIGHT — MAP ---------- */
.zones__map-wrap {
position: relative;
width: 100%;
}
.zones__map {
display: block;
width: 100%;
height: auto;
max-height: 620px;
}
/* SVG text classes (inline-styled inside the SVG via class) */
.zones__pin-label {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 12px;
font-style: italic;
fill: var(--color-ink);
}
.zones__pin-label--primary {
font-size: 14px;
}
.zones__compass-label {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 10px;
font-style: italic;
fill: var(--color-laiton);
}
.zones__scale-label {
font-family: "Inter", sans-serif;
font-size: 9px;
fill: var(--color-laiton);
letter-spacing: 0.05em;
}
/* ---------- MAP ANIMATIONS ---------- */
/* Coastline draw-in (west → east) */
.zones__coastline {
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
transition: stroke-dashoffset 2s ease-in-out;
}
.zones__map-wrap.is-visible .zones__coastline {
stroke-dashoffset: 0;
}
/* Sea hatching fades in concurrently */
.zones__sea {
opacity: 0;
transition: opacity 1.2s var(--ease-out) 1.5s;
}
.zones__map-wrap.is-visible .zones__sea {
opacity: 1;
}
/* Pins — each fades in via its own --pin-delay, starting after coastline draws */
.zones__pin {
opacity: 0;
transition: opacity 0.5s var(--ease-out);
transition-delay: var(--pin-delay, 0ms);
}
.zones__map-wrap.is-visible .zones__pin {
opacity: 1;
transition-delay: calc(2000ms + var(--pin-delay, 0ms));
}
/* Boat fades in along with the sea */
.zones__boat {
opacity: 0;
transition: opacity 0.8s var(--ease-out) 2200ms;
}
.zones__map-wrap.is-visible .zones__boat {
opacity: 0.9;
}
/* Compass + scale arrive last */
.zones__compass,
.zones__scale {
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.zones__map-wrap.is-visible .zones__compass,
.zones__map-wrap.is-visible .zones__scale {
opacity: 1;
transition-delay: 3800ms;
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.zones {
padding: 120px 48px;
}
.zones__marginalia { display: none; }
.zones__grid {
gap: 64px;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.zones {
padding: 96px 24px;
}
.zones__grid {
grid-template-columns: 1fr;
gap: 64px;
}
.zones__map-wrap {
order: -1; /* map above text on mobile */
}
.zones__title {
margin-bottom: 32px;
}
.zone-name {
font-size: 16px;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.zones__content [data-reveal],
.zones__map-wrap[data-reveal],
.zones__coastline,
.zones__sea,
.zones__pin,
.zones__boat,
.zones__compass,
.zones__scale {
opacity: 1;
transform: none;
transition: none;
stroke-dashoffset: 0;
}
.zones__boat { opacity: 0.9; }
}
/* =========================================================
SECTION — TÉMOIGNAGES
========================================================= */
.reviews {
position: relative;
background: var(--color-travertin);
padding: 160px 80px;
overflow: hidden;
}
.reviews__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* Left-edge marginalia */
.reviews__marginalia {
position: absolute;
top: 220px;
left: 32px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-laiton);
opacity: 0.8;
white-space: nowrap;
writing-mode: vertical-rl;
transform: rotate(180deg);
z-index: 2;
}
/* Tiny vertical "page top" architectural mark */
.reviews__anchor-mark {
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 16px;
background: var(--color-laiton);
opacity: 0.4;
z-index: 2;
}
/* ---------- HEADER ---------- */
.reviews__header {
position: relative;
z-index: 2;
text-align: center;
max-width: 1280px;
margin: 0 auto 96px auto;
}
.reviews__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 48px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 720px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reviews__title.is-visible {
opacity: 1;
transform: translateY(0);
}
.reviews__title em {
font-style: italic;
color: var(--color-ink);
}
/* Rating anchor */
.reviews__rating {
display: inline-flex;
align-items: center;
gap: 16px;
margin: 32px auto 0 auto;
max-width: 480px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reviews__rating.is-visible {
opacity: 1;
transform: translateY(0);
}
.reviews__rating-figure {
font-family: var(--font-serif);
font-weight: 400;
font-size: 28px;
color: var(--color-ink);
line-height: 1;
}
.reviews__rating-stars {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-laiton);
}
.reviews__star {
display: block;
opacity: 0;
transition: opacity 0.4s var(--ease-out);
transition-delay: var(--star-delay, 0ms);
}
.reviews__rating.is-visible .reviews__star {
opacity: 1;
}
.reviews__rating-divider {
display: inline-block;
width: 1px;
height: 24px;
background: var(--color-laiton);
opacity: 0.4;
}
.reviews__rating-source {
font-family: var(--font-sans);
font-size: 13px;
color: var(--color-laiton);
}
/* ---------- GRID ---------- */
.reviews__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1280px;
margin: 0 auto;
align-items: stretch;
}
/* ---------- TESTIMONIAL ---------- */
.testimonial {
position: relative;
display: flex;
flex-direction: column;
padding: 0 8px;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
transition-delay: var(--block-delay, 0ms);
}
.testimonial.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Vertical hairline separators between blocks */
.testimonial + .testimonial::before {
content: "";
position: absolute;
left: -20px;
top: 0;
bottom: 0;
width: 1px;
background: var(--color-laiton);
opacity: 0.15;
}
/* Internal stagger (exclude divider — it uses scaleX, handled separately) */
.testimonial > *:not(.testimonial__divider) {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.testimonial.is-visible > *:not(.testimonial__divider) {
opacity: 1;
transform: translateY(0);
}
.testimonial.is-visible .testimonial__quote--open { transition-delay: calc(var(--block-delay, 0ms) + 200ms); }
.testimonial.is-visible .testimonial__text { transition-delay: calc(var(--block-delay, 0ms) + 500ms); }
.testimonial.is-visible .testimonial__divider { transition-delay: calc(var(--block-delay, 0ms) + 700ms); }
.testimonial.is-visible .testimonial__attribution { transition-delay: calc(var(--block-delay, 0ms) + 900ms); }
/* Hairline divider draws left-to-right */
.testimonial__divider {
display: block;
width: 40px;
height: 1px;
background: var(--color-laiton);
opacity: 0.6;
margin-top: auto; /* anchors attribution to a shared baseline */
transform: scaleX(0);
transform-origin: left center;
}
.testimonial.is-visible .testimonial__divider {
transform: scaleX(1);
transition: transform 0.6s var(--ease-out), opacity 0.5s var(--ease-out);
transition-delay: calc(var(--block-delay, 0ms) + 700ms);
}
/* Opening « — large, top-left */
.testimonial__quote--open {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 80px;
line-height: 0.6;
color: var(--color-laiton);
opacity: 0.3;
margin: 0 0 24px 0;
}
.testimonial.is-visible .testimonial__quote--open {
opacity: 0.3; /* override default opacity:1 from generic rule */
}
/* Closing » — small, inline with the last word */
.testimonial__quote--close {
font-family: var(--font-serif);
font-style: italic;
font-size: 32px;
line-height: 1;
color: var(--color-laiton);
opacity: 0.5;
vertical-align: -8px;
}
/* Body text */
.testimonial__text {
margin: 0 0 32px 0;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.6;
font-weight: 400;
color: var(--color-ink);
}
/* Accent phrase — Bleu Promenade 1px underline 4px below baseline */
.testimonial__accent {
color: var(--color-ink);
background-image: linear-gradient(var(--color-bleu), var(--color-bleu));
background-position: 0 calc(100% + 4px);
background-repeat: no-repeat;
background-size: 100% 1px;
padding-bottom: 6px;
}
/* Attribution block */
.testimonial__attribution {
margin-top: 24px;
}
.testimonial__name {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
line-height: 1.4;
}
.testimonial__status {
margin: 4px 0 0 0;
font-family: var(--font-sans);
font-size: 12px;
color: var(--color-laiton);
line-height: 1.4;
}
.testimonial__date {
margin: 4px 0 0 0;
font-family: var(--font-sans);
font-style: italic;
font-size: 11px;
color: var(--color-laiton);
line-height: 1.4;
}
.testimonial__stars {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
color: var(--color-laiton);
}
.testimonial__stars svg { display: block; }
/* ---------- CLOSING LINE ---------- */
.reviews__more {
position: relative;
z-index: 2;
text-align: center;
margin: 80px auto 0 auto;
font-family: var(--font-sans);
font-size: 14px;
color: var(--color-ink-soft);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
transition-delay: 1700ms;
}
.reviews__more.is-visible {
opacity: 1;
transform: translateY(0);
}
.reviews__more-count {
font-family: var(--font-sans);
font-weight: 600;
color: var(--color-ink);
}
.reviews__more-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-bleu);
margin-left: 4px;
padding-bottom: 4px;
border-bottom: 1px solid var(--color-bleu);
transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), border-width 0.4s var(--ease-out);
}
.reviews__more-arrow {
color: var(--color-bleu);
transition: transform 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.reviews__more-link:hover {
color: var(--color-laiton);
border-bottom: 2px solid var(--color-laiton);
padding-bottom: 3px;
}
.reviews__more-link:hover .reviews__more-arrow {
transform: translateX(6px);
color: var(--color-laiton);
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.reviews {
padding: 120px 48px;
}
.reviews__marginalia { display: none; }
.reviews__grid {
grid-template-columns: 1fr;
gap: 72px;
max-width: 640px;
}
.testimonial + .testimonial::before {
left: 0;
right: 0;
top: -36px;
bottom: auto;
width: auto;
height: 1px;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.reviews {
padding: 96px 24px;
}
.reviews__header {
margin-bottom: 64px;
}
.reviews__rating {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.reviews__rating-divider { display: none; }
.testimonial__text { font-size: 16px; }
.reviews__more { margin-top: 56px; }
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.reviews__title,
.reviews__rating,
.testimonial,
.testimonial > *,
.reviews__star,
.reviews__more {
opacity: 1;
transform: none;
transition: none;
}
.testimonial__quote--open { opacity: 0.3; }
.testimonial__divider { transform: scaleX(1); }
}
/* =========================================================
SECTION — FAQ
========================================================= */
.faq {
position: relative;
background: var(--color-cream);
padding: 180px 80px;
overflow: hidden;
}
.faq__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.faq__inner {
position: relative;
z-index: 2;
max-width: 1080px;
margin: 0 auto;
}
/* ---------- HEADER ---------- */
.faq__header {
display: grid;
grid-template-columns: 40fr 60fr;
gap: 64px;
align-items: start;
margin-bottom: 96px;
}
.faq__header-text {
max-width: 540px;
}
.faq__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(30px, 3vw, 44px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 0 28px 0;
}
.faq__title em { font-style: italic; }
.faq__subtitle {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--color-laiton);
max-width: 540px;
}
/* Right-side numeral stack */
.faq__toc {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 16px;
border-left: 1px solid var(--color-laiton);
align-self: end;
justify-self: end;
margin-top: 12px;
}
.faq__toc-row {
display: inline-flex;
align-items: center;
gap: 12px;
opacity: 0;
transition: opacity 0.5s var(--ease-out);
transition-delay: var(--toc-delay, 0ms);
}
.faq__toc[data-reveal].is-visible .faq__toc-row { opacity: 1; }
.faq__toc-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.15em;
color: var(--color-laiton);
}
.faq__toc-tick {
display: inline-block;
width: 0;
height: 1px;
background: var(--color-laiton);
opacity: 0.4;
transition: width 0.3s var(--ease-out);
transition-delay: var(--toc-delay, 0ms);
}
.faq__toc[data-reveal].is-visible .faq__toc-tick { width: 6px; }
/* Generic reveal for header text + footer */
.faq__header-text [data-reveal],
.faq__controls[data-reveal],
.faq__footer[data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.faq__header-text [data-reveal].is-visible,
.faq__controls[data-reveal].is-visible,
.faq__footer[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- CONTROLS ---------- */
.faq__controls {
max-width: 880px;
margin: 0 auto 24px auto;
text-align: right;
font-family: var(--font-sans);
font-size: 12px;
}
.faq__control {
font-family: inherit;
font-size: inherit;
background: none;
border: none;
color: var(--color-laiton);
cursor: pointer;
padding: 0 0 4px 0;
border-bottom: 1px solid currentColor;
transition: color 0.4s var(--ease-out);
}
.faq__control:hover { color: var(--color-bleu); }
.faq__control-dot {
color: var(--color-laiton);
padding: 0 8px;
}
/* ---------- LIST ---------- */
.faq__list {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 880px;
position: relative;
/* Reading-rail hairline at left edge */
border-left: 1px solid rgba(184, 149, 106, 0.1);
}
.faq-item {
position: relative;
border-bottom: 1px solid rgba(184, 149, 106, 0.3);
opacity: 0;
transition: opacity 0.6s var(--ease-out);
transition-delay: var(--block-delay, 0ms);
}
.faq-item:first-child {
border-top: 1px solid rgba(184, 149, 106, 0.3);
}
.faq-item.is-visible {
opacity: 1;
}
/* Trigger (closed state) */
.faq-item__trigger {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
width: 100%;
min-height: 96px;
padding: 24px 8px 24px 24px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
}
.faq-item__number {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.15em;
color: var(--color-laiton);
transition: color 0.4s var(--ease-out);
}
.faq-item__question {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.3;
color: var(--color-ink);
transition: color 0.4s var(--ease-out);
}
.faq-item__keyword {
font-style: normal;
color: var(--color-bleu);
transition: color 0.4s var(--ease-out);
}
/* Plus / × indicator */
.faq-item__indicator {
position: relative;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-item__indicator-ring {
position: absolute;
inset: 4px;
border: 1px solid var(--color-laiton);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s var(--ease-out);
}
.faq-item__indicator-plus {
position: relative;
width: 16px;
height: 16px;
display: inline-block;
transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out);
color: var(--color-ink);
}
.faq-item__indicator-bar {
position: absolute;
background: currentColor;
}
.faq-item__indicator-bar--h {
left: 0;
right: 0;
top: 50%;
height: 1px;
transform: translateY(-50%);
}
.faq-item__indicator-bar--v {
top: 0;
bottom: 0;
left: 50%;
width: 1px;
transform: translateX(-50%);
}
/* Hover (closed) */
.faq-item__trigger:hover .faq-item__question { color: var(--color-bleu); }
.faq-item__trigger:hover .faq-item__keyword { color: var(--color-bleu); }
.faq-item__trigger:hover .faq-item__number { color: var(--color-bleu); }
.faq-item__trigger:hover .faq-item__indicator-ring { opacity: 1; }
/* Open state */
.faq-item__trigger[aria-expanded="true"] .faq-item__indicator-plus {
transform: rotate(45deg);
color: var(--color-bleu);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__indicator-ring { opacity: 1; }
.faq-item__trigger[aria-expanded="true"] .faq-item__question { color: var(--color-bleu); }
.faq-item__trigger[aria-expanded="true"] .faq-item__keyword { color: var(--color-ink); } /* inversion */
.faq-item__trigger[aria-expanded="true"] .faq-item__number { color: var(--color-bleu); }
/* Focus ring for keyboard accessibility */
.faq-item__trigger:focus-visible {
outline: 1px dashed var(--color-laiton);
outline-offset: 4px;
}
/* Panel — smooth expand via grid-template-rows */
.faq-item__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--ease-out);
}
.faq-item__trigger[aria-expanded="true"] + .faq-item__panel {
grid-template-rows: 1fr;
}
.faq-item__panel-inner {
overflow: hidden;
}
/* Answer */
.faq-item__answer {
padding: 8px 24px 32px 24px;
margin-left: 56px; /* aligns under the question text past the numeral */
max-width: 720px;
border-left: 1px solid rgba(184, 149, 106, 0.5);
padding-left: 24px;
}
.faq-item__answer p {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.75;
color: var(--color-ink-soft);
}
/* In-answer accent treatments */
.faq-item__figure {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
font-weight: 400;
}
.faq-item__place {
font-family: var(--font-serif);
font-style: italic;
color: var(--color-bleu);
}
/* ---------- FOOTER ---------- */
.faq__footer {
margin-top: 80px;
text-align: center;
}
.faq__closing {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: var(--color-ink);
margin: 0;
}
.faq__closing-line { display: block; }
.faq__closing-line--accent {
letter-spacing: -0.005em;
}
.faq__ctas {
display: inline-flex;
align-items: center;
gap: 48px;
margin-top: 32px;
flex-wrap: wrap;
justify-content: center;
}
.faq__ctas-divider {
display: inline-block;
width: 1px;
height: 16px;
background: var(--color-laiton);
opacity: 0.4;
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.faq {
padding: 120px 48px;
}
.faq__header {
grid-template-columns: 1fr;
gap: 32px;
}
.faq__toc {
flex-direction: row;
flex-wrap: wrap;
border-left: none;
border-top: 1px solid var(--color-laiton);
padding-left: 0;
padding-top: 12px;
gap: 16px;
justify-self: start;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.faq {
padding: 96px 24px;
}
.faq__header { margin-bottom: 56px; }
.faq__toc { display: none; }
.faq__controls { text-align: center; }
.faq-item__trigger {
min-height: 0;
padding: 20px 8px 20px 16px;
gap: 16px;
}
.faq-item__question {
font-size: 17px;
}
.faq-item__answer {
margin-left: 28px;
padding: 4px 0 24px 16px;
}
.faq__ctas { gap: 24px; }
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.faq__header-text [data-reveal],
.faq__controls[data-reveal],
.faq__footer[data-reveal],
.faq__toc-row,
.faq__toc-tick,
.faq-item {
opacity: 1;
transform: none;
transition: none;
}
.faq__toc-tick { width: 6px; }
.faq-item__panel { transition: none; }
.faq-item__indicator-plus { transition: none; }
}
/* =========================================================
SECTION — CTA FINALE
========================================================= */
.finale {
--finale-bg: #2D2A26;
--finale-bg-deep: #1F1D1A;
--finale-text: #F6EAEA;
--finale-text-soft: #8A7670;
--finale-laiton: #B8956A;
--finale-laiton-lit:#D4B68A;
--finale-bleu: #7C9AAE;
position: relative;
background: var(--finale-bg);
padding: 200px 80px;
overflow: hidden;
color: var(--finale-text);
text-align: center;
}
/* Tonal transition at top (travertin → dark over 120px) */
.finale__top-fade {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, var(--color-travertin), var(--finale-bg));
z-index: 1;
pointer-events: none;
}
/* 3% grain (reads as film grain on dark) */
.finale__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.06;
z-index: 2;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
/* Corner vignettes — soft spotlight on the center */
.finale__vignette {
position: absolute;
width: 300px;
height: 300px;
pointer-events: none;
z-index: 2;
}
.finale__vignette--tl { top: 0; left: 0; background: radial-gradient(circle at top left, var(--finale-bg-deep), transparent 70%); }
.finale__vignette--tr { top: 0; right: 0; background: radial-gradient(circle at top right, var(--finale-bg-deep), transparent 70%); }
.finale__vignette--bl { bottom: 0; left: 0; background: radial-gradient(circle at bottom left, var(--finale-bg-deep), transparent 70%); }
.finale__vignette--br { bottom: 0; right: 0; background: radial-gradient(circle at bottom right, var(--finale-bg-deep), transparent 70%); }
/* Architectural side columns (Laiton hairlines flanking the content) */
.finale__column {
position: absolute;
top: 200px;
bottom: 200px;
width: 1px;
background: var(--finale-laiton);
opacity: 0.4;
z-index: 3;
}
.finale__column--left { left: calc(50% - 480px - 80px); }
.finale__column--right { right: calc(50% - 480px - 80px); }
/* Square caps */
.finale__column::before,
.finale__column::after {
content: "";
position: absolute;
left: -1.5px;
width: 4px;
height: 4px;
background: var(--finale-laiton);
}
.finale__column::before { top: -4px; }
.finale__column::after { bottom: -4px; }
/* Hairlines draw in top-to-bottom (scaleY) */
.finale__column {
transform: scaleY(0);
transform-origin: top center;
transition: transform 2s var(--ease-out);
}
.finale.is-visible .finale__column { transform: scaleY(1); }
@media (max-width: 1199px) {
.finale__column { display: none; }
}
/* ---------- INNER ---------- */
.finale__inner {
position: relative;
z-index: 4;
max-width: 960px;
margin: 0 auto;
}
/* Tiny brass anchor dot above the opening mark */
.finale__anchor-dot {
display: block;
width: 4px;
height: 4px;
background: var(--finale-laiton);
margin: 0 auto 24px auto;
opacity: 0;
transition: opacity 0.6s var(--ease-out) 200ms;
}
.finale__inner.is-visible .finale__anchor-dot { opacity: 1; }
/* ---------- MARKS (opening + closing) ---------- */
.finale__mark {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin: 0 auto;
}
.finale__mark--open { margin-bottom: 48px; }
.finale__mark--close { margin: 80px auto 0 auto; }
.finale__mark-rule {
display: block;
width: 80px;
height: 1px;
background: var(--finale-laiton);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--ease-out);
}
.finale__inner.is-visible .finale__mark-rule { transform: scaleX(1); }
.finale__mark-quotes {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--finale-laiton);
letter-spacing: 0.1em;
opacity: 0;
transition: opacity 0.5s var(--ease-out) 600ms;
}
.finale__inner.is-visible .finale__mark-quotes { opacity: 1; }
/* Closing mark — same elements, reverse order: quotes appear then rule draws */
.finale__mark--close .finale__mark-rule {
transition-delay: 3200ms;
}
.finale__mark--close .finale__mark-quotes {
transition-delay: 2800ms;
}
/* ---------- TITLE ---------- */
.finale__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.05;
color: var(--finale-text);
margin: 0 auto 40px auto;
max-width: 800px;
}
.finale__title em {
font-style: italic;
color: var(--finale-text);
}
.finale__title-line {
display: block;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.finale__title-line:nth-child(1) { transition-delay: 1100ms; }
.finale__title-line:nth-child(2) { transition-delay: 1300ms; }
.finale__inner.is-visible .finale__title-line {
opacity: 1;
transform: translateY(0);
}
.finale__title-q {
color: var(--finale-laiton);
font-style: italic;
}
/* ---------- SUBTITLE + REASSURANCE ---------- */
.finale__subtitle {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
line-height: 1.5;
color: var(--finale-text-soft);
margin: 0 auto 12px auto;
max-width: 640px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.6s var(--ease-out) 1700ms, transform 0.6s var(--ease-out) 1700ms;
}
.finale__inner.is-visible .finale__subtitle {
opacity: 1;
transform: translateY(0);
}
.finale__subtitle-figure {
color: var(--finale-text);
font-style: italic;
}
.finale__reassurance {
font-family: var(--font-sans);
font-size: 14px;
color: var(--finale-text-soft);
margin: 0 auto;
letter-spacing: 0.02em;
opacity: 0;
transition: opacity 0.6s var(--ease-out) 1900ms;
}
.finale__inner.is-visible .finale__reassurance { opacity: 1; }
.finale__reassurance-dot {
color: var(--finale-laiton);
padding: 0 10px;
}
/* ---------- PRIMARY CTA ---------- */
.finale__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 480px;
max-width: 100%;
margin: 64px auto 28px auto;
padding: 24px 48px;
background: var(--finale-laiton);
color: var(--finale-bg);
font-family: var(--font-sans);
font-size: 17px;
font-weight: 500;
letter-spacing: 0.02em;
border-radius: 2px;
/* "Lit" brass top highlight — light catching the top edge */
box-shadow: inset 0 1px 0 0 var(--finale-laiton-lit);
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.8s var(--ease-out) 2100ms,
transform 0.8s var(--ease-out) 2100ms,
background-color 0.4s var(--ease-out),
box-shadow 0.4s var(--ease-out);
}
.finale__inner.is-visible .finale__cta {
opacity: 1;
transform: translateY(0);
}
.finale__cta-arrow {
color: var(--finale-bg);
transition: transform 0.4s var(--ease-out);
}
.finale__cta:hover {
background: var(--finale-laiton-lit);
box-shadow: inset 0 1.5px 0 0 #E2C99B;
}
.finale__cta:hover .finale__cta-arrow {
transform: translateX(8px);
}
/* ---------- SECONDARY (PHONE) CTA ---------- */
.finale__phone {
text-align: center;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s var(--ease-out) 3300ms, transform 0.7s var(--ease-out) 3300ms;
}
.finale__inner.is-visible .finale__phone {
opacity: 1;
transform: translateY(0);
}
.finale__phone-prompt {
margin: 0 0 8px 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--finale-text-soft);
}
.finale__phone-link {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 18px;
font-weight: 500;
color: var(--finale-text);
padding-bottom: 6px;
border-bottom: 1px solid var(--finale-laiton);
transition: border-color 0.4s var(--ease-out);
}
.finale__phone-link svg {
color: var(--finale-laiton);
transition: color 0.4s var(--ease-out);
flex-shrink: 0;
}
.finale__phone-link:hover {
border-bottom-color: var(--finale-text);
}
.finale__phone-link:hover svg {
color: var(--finale-text);
}
/* ---------- SIGNATURE + SIGN-OFF ---------- */
.finale__signature {
margin: 48px auto 0 auto;
font-family: var(--font-script);
font-size: 28px;
line-height: 1;
color: var(--finale-text);
opacity: 0;
/* "Ink drying" — slower fade */
transition: opacity 1.2s var(--ease-out) 4000ms;
}
.finale__inner.is-visible .finale__signature {
opacity: 0.85;
}
.finale__sign-off {
margin: 16px auto 0 auto;
font-family: var(--font-sans);
font-style: italic;
font-size: 11px;
letter-spacing: 0.05em;
color: var(--finale-text-soft);
opacity: 0;
transition: opacity 0.6s var(--ease-out) 5400ms;
}
.finale__inner.is-visible .finale__sign-off { opacity: 1; }
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.finale {
padding: 140px 48px;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.finale {
padding: 96px 24px;
}
.finale__top-fade { height: 80px; }
.finale__mark--close { margin-top: 64px; }
.finale__cta {
width: 100%;
padding: 20px 24px;
font-size: 16px;
margin: 48px auto 24px auto;
}
.finale__title { margin-bottom: 28px; }
.finale__subtitle { font-size: 19px; }
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.finale__column,
.finale__anchor-dot,
.finale__mark-rule,
.finale__mark-quotes,
.finale__title-line,
.finale__subtitle,
.finale__reassurance,
.finale__cta,
.finale__phone,
.finale__signature,
.finale__sign-off {
opacity: 1;
transform: none;
transition: none;
}
.finale__signature { opacity: 0.85; }
.finale__cta {
box-shadow: inset 0 1px 0 0 var(--finale-laiton-lit);
}
}
/* =========================================================
FOOTER
========================================================= */
.footer {
--ft-bg: #1F1A1A;
--ft-bg-deep: #15140F;
--ft-bg-lift: #2D2A26;
--ft-text: #F6EAEA;
--ft-text-sec: #8A7670;
--ft-text-ter: #5A5550;
--ft-laiton: #B8956A;
--ft-bleu: #7C9AAE;
position: relative;
background: var(--ft-bg);
color: var(--ft-text);
overflow: hidden;
}
.footer__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
/* Generic data-reveal for footer layers */
.footer [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
transition-delay: var(--block-delay, 0ms);
}
.footer [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- LAYER 1 — CTA BANNER ---------- */
.footer-cta {
position: relative;
z-index: 2;
background: linear-gradient(to bottom, var(--ft-bg-lift), var(--ft-bg));
text-align: center;
}
.footer-cta__rule {
display: block;
width: 100%;
height: 1px;
background: var(--ft-laiton);
opacity: 0.6;
}
.footer-cta__inner {
max-width: 720px;
margin: 0 auto;
padding: 64px 64px;
}
.footer-cta__mark {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--ft-laiton);
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.footer-cta__title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: 32px;
line-height: 1.25;
color: var(--ft-text);
margin: 0 auto;
max-width: 720px;
}
.footer-cta__subtitle {
margin: 16px auto 0 auto;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ft-text-sec);
}
.footer-cta__dot { color: var(--ft-laiton); padding: 0 8px; }
.footer-cta__actions {
display: inline-flex;
align-items: center;
gap: 48px;
margin-top: 32px;
flex-wrap: wrap;
justify-content: center;
}
.footer-cta__divider {
width: 1px;
height: 14px;
background: var(--ft-text-sec);
opacity: 0.4;
}
.footer-cta__primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: var(--ft-laiton);
color: var(--ft-bg);
border-radius: 2px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
box-shadow: inset 0 1px 0 0 #D4B68A;
transition: background-color 0.4s var(--ease-out);
}
.footer-cta__primary svg { transition: transform 0.4s var(--ease-out); }
.footer-cta__primary:hover { background: #D4B68A; }
.footer-cta__primary:hover svg { transform: translateX(4px); }
.footer-cta__secondary {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--ft-text);
padding-bottom: 6px;
border-bottom: 1px solid var(--ft-laiton);
transition: border-color 0.4s var(--ease-out);
}
.footer-cta__secondary svg { color: var(--ft-laiton); }
.footer-cta__secondary:hover { border-bottom-color: var(--ft-text); }
/* ---------- BODY WRAP ---------- */
.footer__body {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 140px 64px 0 64px;
}
/* ---------- LAYER 2 — BRAND SIGNATURE ---------- */
.footer-brand {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-brand__mark {
font-family: var(--font-serif);
font-style: italic;
font-size: 36px;
line-height: 1;
color: var(--ft-text);
}
.footer-brand__amp { color: var(--ft-laiton); }
.footer-brand__name {
margin-top: 8px;
font-family: var(--font-serif);
font-size: 16px;
letter-spacing: 0.04em;
color: var(--ft-text);
}
.footer-brand__rule {
width: 40px;
height: 1px;
background: var(--ft-laiton);
opacity: 0.4;
margin-top: 12px;
}
.footer-brand__positioning {
margin-top: 8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--ft-text-sec);
}
/* ---------- LAYER 3 — FOUR-COLUMN GRID ---------- */
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-top: 80px;
}
.footer-col__title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.08em;
color: var(--ft-laiton);
margin: 0;
line-height: 1.4;
}
.footer-col__rule {
display: block;
width: 24px;
height: 1px;
background: var(--ft-text-sec);
opacity: 0.6;
margin-top: 12px;
}
.footer-col__content {
margin-top: 24px;
}
/* Column 1 */
.footer-col__intro {
margin: 0 0 32px 0;
font-family: var(--font-sans);
font-style: italic;
font-size: 13px;
line-height: 1.7;
color: var(--ft-text-sec);
max-width: 240px;
}
.nap-block {
margin-bottom: 20px;
}
.nap-block__label {
display: block;
font-family: var(--font-sans);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ft-laiton);
margin-bottom: 6px;
}
.nap-block__value {
display: block;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--ft-text);
}
.nap-block__value--phone {
font-size: 15px;
font-weight: 500;
transition: color 0.3s var(--ease-out);
}
.nap-block__value--phone:hover { color: var(--ft-bleu); }
.nap-block__value--email {
display: inline-block;
padding-bottom: 4px;
border-bottom: 1px solid var(--ft-laiton);
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
word-break: break-all;
}
.nap-block__value--email:hover { color: var(--ft-bleu); border-color: var(--ft-bleu); }
.nap-block__note {
display: block;
margin-top: 4px;
font-family: var(--font-sans);
font-style: italic;
font-size: 12px;
color: var(--ft-text-sec);
}
.footer-social {
margin-top: 40px;
}
.footer-social__rule {
display: block;
width: 80px;
height: 1px;
background: var(--ft-text-sec);
opacity: 0.3;
margin-bottom: 24px;
}
.footer-social__label {
display: block;
font-family: var(--font-sans);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ft-laiton);
margin-bottom: 12px;
}
.footer-social__row {
display: flex;
gap: 20px;
}
.footer-social__link {
color: var(--ft-laiton);
transition: color 0.3s var(--ease-out);
}
.footer-social__link:hover { color: var(--ft-text); }
/* Footer links (Columns 2 & 4) */
.footer-links {
list-style: none;
margin: 24px 0 0 0;
padding: 0;
}
.footer-links li {
line-height: 2.2;
}
.footer-links a {
position: relative;
display: inline-flex;
align-items: baseline;
font-family: var(--font-serif);
font-size: 14px;
color: var(--ft-text);
transition: color 0.4s var(--ease-out);
}
.footer-links a em {
font-style: italic;
color: var(--ft-text-sec);
margin-left: 4px;
transition: color 0.4s var(--ease-out);
}
.footer-links__mark {
width: 3px;
height: 3px;
background: var(--ft-laiton);
margin-right: 12px;
flex-shrink: 0;
transform: translateY(-2px);
transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out);
}
.footer-links a:hover { color: var(--ft-bleu); }
.footer-links a:hover em { color: var(--ft-bleu); }
.footer-links a:hover .footer-links__mark {
width: 5px;
height: 5px;
}
.footer-links a::after {
content: "";
position: absolute;
left: 15px;
right: 0;
bottom: -4px;
height: 1px;
background: var(--ft-laiton);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s var(--ease-out);
}
.footer-links a:hover::after { transform: scaleX(1); }
/* Column 3 — zones */
.footer-zones--second { margin-top: 32px; }
.footer-zones__subhead {
display: block;
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ft-laiton);
}
.footer-zones__subrule {
display: block;
width: 16px;
height: 1px;
background: var(--ft-text-sec);
opacity: 0.4;
margin-top: 4px;
}
.footer-links--zones {
margin-top: 16px;
}
.footer-links--zones li {
line-height: 2;
}
.footer-links--zones a {
font-style: italic;
font-size: 13px;
}
/* ---------- LAYER 4 — NEWSLETTER ---------- */
.footer-news {
display: grid;
grid-template-columns: 40fr 60fr;
gap: 64px;
align-items: start;
margin-top: 96px;
padding: 80px 0;
border-top: 1px solid rgba(138, 118, 112, 0.3);
border-bottom: 1px solid rgba(138, 118, 112, 0.3);
}
.footer-news__title {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
letter-spacing: 0.08em;
color: var(--ft-laiton);
}
.footer-news__desc {
margin: 16px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
line-height: 1.6;
color: var(--ft-text);
max-width: 320px;
}
.footer-news__form {
display: flex;
gap: 0;
}
.footer-news__input {
flex: 1;
height: 56px;
background: transparent;
border: 1px solid rgba(138, 118, 112, 0.5);
border-radius: 2px 0 0 2px;
border-right: none;
padding: 0 20px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ft-text);
transition: border-color 0.3s var(--ease-out);
}
.footer-news__input::placeholder {
font-style: italic;
color: var(--ft-text-sec);
}
.footer-news__input:focus {
outline: none;
border-color: var(--ft-laiton);
}
.footer-news__submit {
display: inline-flex;
align-items: center;
gap: 8px;
height: 56px;
padding: 0 32px;
background: var(--ft-laiton);
color: var(--ft-bg);
border: none;
border-radius: 0 2px 2px 0;
cursor: pointer;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
box-shadow: inset 0 1px 0 0 #D4B68A;
transition: background-color 0.4s var(--ease-out);
}
.footer-news__submit:hover { background: #D4B68A; }
.footer-news__privacy {
margin: 12px 0 0 0;
font-family: var(--font-sans);
font-style: italic;
font-size: 11px;
color: var(--ft-text-sec);
}
/* ---------- LAYER 5 — TRUST STRIP ---------- */
.footer-trust {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-top: 64px;
padding-bottom: 48px;
flex-wrap: wrap;
}
.footer-trust__rating {
display: inline-flex;
align-items: center;
gap: 12px;
}
.footer-trust__score {
font-family: var(--font-serif);
font-size: 22px;
color: var(--ft-text);
}
.footer-trust__stars {
display: inline-flex;
gap: 3px;
color: var(--ft-laiton);
}
.footer-trust__divider {
width: 1px;
height: 14px;
background: var(--ft-text-sec);
opacity: 0.4;
}
.footer-trust__reviews {
font-family: var(--font-sans);
font-style: italic;
font-size: 12px;
color: var(--ft-bleu);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.footer-trust__certs {
display: inline-flex;
gap: 16px;
}
.cert-frame {
width: 56px;
height: 56px;
border: 1px solid rgba(138, 118, 112, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 3px;
padding: 4px;
}
.cert-frame__label {
font-family: var(--font-sans);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ft-laiton);
}
.cert-frame__value {
font-family: var(--font-sans);
font-size: 9px;
color: var(--ft-text);
line-height: 1.2;
}
.cert-frame__acronym {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--ft-text);
}
.footer-trust__social {
display: inline-flex;
gap: 20px;
}
/* ---------- LAYER 6 — LEGAL ---------- */
.footer-legal {
position: relative;
z-index: 2;
background: var(--ft-bg-deep);
text-align: center;
padding: 32px 64px 48px 64px;
}
.footer-legal__rule {
display: block;
width: calc(100% - 128px);
max-width: 1320px;
height: 1px;
background: rgba(138, 118, 112, 0.25);
margin: 0 auto 32px auto;
}
.footer-legal__copyright {
margin: 0;
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.6;
color: var(--ft-text);
}
.footer-legal__copyright em {
font-style: italic;
color: var(--ft-text-sec);
}
.footer-legal__siret {
margin: 12px 0 0 0;
font-family: var(--font-sans);
font-size: 11px;
color: var(--ft-text-sec);
}
.footer-legal__siret em { font-style: italic; }
.footer-legal__dot {
color: var(--ft-laiton);
padding: 0 6px;
}
.footer-legal__links {
margin-top: 16px;
font-family: var(--font-sans);
font-size: 11px;
color: var(--ft-text-sec);
}
.footer-legal__links a {
color: var(--ft-text-sec);
padding-bottom: 2px;
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
border-bottom: 1px solid transparent;
}
.footer-legal__links a:hover {
color: var(--ft-bleu);
border-bottom-color: var(--ft-laiton);
}
.footer-legal__credit {
margin: 24px 0 0 0;
font-family: var(--font-sans);
font-style: italic;
font-size: 10px;
color: var(--ft-text-ter);
}
.footer-legal__credit a {
color: var(--ft-text-ter);
border-bottom: 1px solid rgba(138, 118, 112, 0.3);
transition: color 0.3s var(--ease-out);
}
.footer-legal__credit a:hover { color: var(--ft-text-sec); }
.footer-legal__final-mark {
display: block;
width: 4px;
height: 4px;
background: var(--ft-laiton);
margin: 32px auto 0 auto;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.footer-legal.is-visible .footer-legal__final-mark {
opacity: 1;
transition-delay: 0.8s;
}
/* ---------- FOOTER — TABLET ---------- */
@media (max-width: 1024px) {
.footer__body {
padding: 100px 32px 0 32px;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 56px 48px;
}
.footer-news {
grid-template-columns: 1fr;
gap: 32px;
margin-top: 72px;
padding: 56px 0;
}
.footer-cta__inner { padding: 56px 32px; }
.footer-legal { padding: 32px 32px 48px 32px; }
.footer-legal__rule { width: calc(100% - 64px); }
}
/* ---------- FOOTER — MOBILE ---------- */
@media (max-width: 768px) {
.footer__body {
padding: 72px 24px 0 24px;
}
.footer-cta__inner { padding: 48px 24px; }
.footer-cta__title { font-size: 24px; }
.footer-cta__actions { gap: 24px; }
.footer-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.footer-col__intro { max-width: 100%; }
.footer-news { margin-top: 56px; padding: 48px 0; }
.footer-news__form { flex-direction: column; gap: 12px; }
.footer-news__input {
border-right: 1px solid rgba(138, 118, 112, 0.5);
border-radius: 2px;
}
.footer-news__submit {
border-radius: 2px;
justify-content: center;
}
.footer-trust {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.footer-trust__certs { flex-wrap: wrap; }
.footer-legal { padding: 32px 24px 48px 24px; }
.footer-legal__rule { width: calc(100% - 48px); }
.footer-legal__links a { display: inline-block; }
}
/* ---------- FOOTER — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.footer [data-reveal],
.footer-legal__final-mark {
opacity: 1;
transform: none;
transition: none;
}
.footer-legal.is-visible .footer-legal__final-mark { opacity: 1; }
}
/* =========================================================
PAGE "NOS SERVICES"
========================================================= */
/* ---------- PAGE HERO ---------- */
.page-hero {
position: relative;
min-height: 70vh;
background: var(--color-cream);
padding: 120px 80px 96px 80px;
overflow: hidden;
display: flex;
align-items: center;
}
.page-hero__grain,
.intro__grain,
.compare__grain,
.zones-compact__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.page-hero__inner {
position: relative;
z-index: 2;
max-width: 960px;
margin: 0 auto;
text-align: center;
width: 100%;
}
.page-hero__eyebrow {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: none;
color: var(--color-laiton);
}
/* Generic reveal for the services page */
.page-hero [data-reveal],
.intro [data-reveal],
.services-page [data-reveal],
.compare [data-reveal],
.zones-compact [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.page-hero [data-reveal].is-visible,
.intro [data-reveal].is-visible,
.services-page [data-reveal].is-visible,
.compare [data-reveal].is-visible,
.zones-compact [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
.page-hero__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.1;
color: var(--color-ink);
margin: 0 auto;
max-width: 900px;
}
.page-hero__title-line { display: block; }
.page-hero__title-line--italic {
font-style: italic;
margin-top: 6px;
}
.page-hero__subtitle {
margin: 40px auto 0 auto;
max-width: 720px;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.7;
color: var(--color-ink-soft);
}
.page-hero__subtitle em {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
}
.page-hero__figure {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--color-bleu);
}
.page-hero__reassurance {
margin: 64px auto 0 auto;
max-width: 880px;
}
.page-hero__reassurance-rule {
display: block;
width: 100%;
height: 1px;
background: rgba(184, 149, 106, 0.3);
}
.page-hero__reassurance-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 0;
padding: 18px 0;
}
.phr-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--color-ink);
}
.phr-item svg { color: var(--color-bleu); flex-shrink: 0; }
.phr-item em {
font-family: var(--font-serif);
font-style: italic;
color: var(--color-ink);
}
.phr-dot {
color: var(--color-laiton);
padding: 0 16px;
}
.page-hero__cta {
margin-top: 56px;
}
.page-hero__anchor {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-top: 56px;
}
.page-hero__anchor-label {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
letter-spacing: 0.25em;
color: var(--color-laiton);
}
.page-hero__anchor-line {
width: 1px;
height: 32px;
background: rgba(184, 149, 106, 0.4);
}
/* ---------- INTRODUCTION ---------- */
.intro {
position: relative;
background: var(--color-cream);
padding: 96px 80px 120px 80px;
overflow: hidden;
}
.intro__inner {
position: relative;
z-index: 2;
max-width: 880px;
margin: 0 auto;
}
.intro .eyebrow--center {
justify-content: center;
margin-bottom: 48px;
}
.intro__body {
text-align: left;
}
.intro__paragraph {
margin: 0 0 24px 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: 18px;
line-height: 1.8;
color: var(--color-ink-soft);
}
.intro__paragraph:last-of-type { margin-bottom: 0; }
.intro__paragraph em {
font-style: italic;
color: var(--color-ink);
}
.intro__seo {
font-style: italic;
color: var(--color-bleu) !important;
}
.intro__dropcap {
float: left;
font-family: var(--font-serif);
font-style: italic;
font-size: 80px;
line-height: 0.8;
color: var(--color-laiton);
margin: 6px 12px 0 0;
}
.intro__close-mark {
display: block;
width: 4px;
height: 4px;
background: var(--color-laiton);
margin: 32px auto 0 auto;
}
/* ---------- SERVICES PAGE — SECTION HEADER ---------- */
.services-page {
position: relative;
}
.services-page__header {
max-width: 1280px;
margin: 0 auto;
padding: 0 80px;
text-align: center;
}
.services-page__header-rule {
display: block;
width: 100%;
height: 1px;
background: rgba(184, 149, 106, 0.3);
margin-bottom: 32px;
}
.services-page__header-eyebrow {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.services-page__header-row {
margin: 32px 0 0 0;
display: flex;
align-items: baseline;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.services-page__header-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--color-ink);
}
.services-page__header-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--color-laiton-deep);
}
.services-page__header-desc .dot { color: var(--color-laiton); padding: 0 4px; }
/* ---------- INDIVIDUAL SERVICE ---------- */
.svc {
position: relative;
padding: 96px 80px;
}
.svc--cream { background: var(--color-cream); }
.svc--travertin { background: rgba(234, 217, 217, 0.5); }
.svc:first-of-type { padding-top: 96px; }
.svc__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 40fr 60fr;
gap: 80px;
align-items: center;
}
.svc--reverse .svc__inner {
grid-template-columns: 60fr 40fr;
}
/* In reverse layout, text is the first DOM child (left), image second (right) */
/* Image */
.svc__image-wrap {
position: relative;
}
.svc__image {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.2);
background: var(--color-cream);
}
.svc__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.02);
}
.svc__image-num {
position: absolute;
top: 16px;
left: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-ink);
color: var(--color-cream);
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
z-index: 2;
}
/* Composed image variants */
.svc__image--compose {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px;
}
.svc__image--platforms {
gap: 18px;
}
.platforms__item {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(22px, 3vw, 34px);
color: var(--color-ink);
line-height: 1.1;
}
.platforms__item:nth-child(odd) { color: var(--color-laiton-deep); }
.yield-graph { width: 100%; height: auto; }
.yield-label {
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
fill: var(--color-laiton-deep);
}
.svc__image--diptych {
display: flex;
flex-direction: row;
padding: 0;
gap: 0;
}
.diptych__half {
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
}
.diptych__half--before { border-right: 1px solid var(--color-laiton); }
.diptych__half img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.diptych__half--before img { filter: saturate(0.6) brightness(1.05) contrast(0.9); }
.diptych__half--after img { filter: saturate(1) contrast(1.03); }
.diptych__label {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--color-cream);
background: rgba(31, 26, 26, 0.6);
padding: 2px 8px;
z-index: 2;
}
.svc__image--rating {
gap: 16px;
}
.rating-comp__stars {
display: flex;
gap: 6px;
}
.rating-comp__figure {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(40px, 5vw, 64px);
color: var(--color-ink);
line-height: 1;
}
.rating-comp__quote {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--color-laiton-deep);
text-align: center;
max-width: 240px;
}
.svc__image--report { padding: 24px; }
.report-illu { width: 100%; height: auto; max-height: 100%; }
.report-brand {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
fill: var(--color-ink);
}
.report-figure {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
fill: var(--color-laiton);
}
.report-sign {
font-family: var(--font-serif);
font-style: italic;
font-size: 10px;
fill: var(--color-laiton-deep);
}
/* Text side */
.svc__text {
max-width: 600px;
}
.svc__eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.svc__eyebrow-label {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.svc__eyebrow-rule {
width: 32px;
height: 1px;
background: var(--color-laiton);
}
.svc__h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(26px, 2.8vw, 36px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
}
.svc__h2 em { font-style: italic; }
.svc__body {
margin-top: 32px;
}
.svc__body p {
margin: 0 0 20px 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.75;
color: var(--color-ink-soft);
}
.svc__body p:last-child { margin-bottom: 0; }
.svc__brand {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
}
.svc__figure {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
}
.svc__geo,
.svc__seo {
font-family: var(--font-serif);
font-style: italic;
color: var(--color-bleu);
}
.svc__checks {
margin-top: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.svc__check {
display: flex;
align-items: baseline;
gap: 12px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--color-ink);
line-height: 1.4;
}
.svc__check svg {
color: var(--color-bleu);
flex-shrink: 0;
transform: translateY(2px);
}
.svc__check em {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--color-ink);
}
.svc__links {
margin-top: 32px;
display: flex;
align-items: center;
gap: 16px;
}
.svc__link {
font-family: var(--font-sans);
font-style: italic;
font-size: 14px;
color: var(--color-bleu);
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.svc__link:hover {
color: var(--color-laiton);
border-bottom-color: var(--color-laiton);
}
.svc__link-dot { color: var(--color-laiton); }
.svc__closer {
display: block;
width: 40px;
height: 1px;
background: var(--color-laiton);
opacity: 0.4;
margin-top: 32px;
}
/* The .svc container itself stays static — only its children stagger in */
.services-page .svc[data-reveal] {
opacity: 1;
transform: none;
}
/* Per-service internal stagger on reveal */
.svc .svc__image-wrap,
.svc .svc__eyebrow,
.svc .svc__h2,
.svc .svc__body,
.svc .svc__checks,
.svc .svc__links,
.svc .svc__closer {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.svc.is-visible .svc__image-wrap { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.svc.is-visible .svc__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.svc.is-visible .svc__h2 { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.svc.is-visible .svc__body { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.svc.is-visible .svc__checks { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.svc.is-visible .svc__links { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.svc.is-visible .svc__closer { opacity: 1; transform: translateY(0); transition-delay: 560ms; }
/* ---------- MID-PAGE BREAK ---------- */
.mid-break {
background: var(--color-cream);
padding: 60px 80px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.mid-break__rule {
width: 60px;
height: 1px;
background: var(--color-laiton);
}
.mid-break__line {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--color-ink);
}
.mid-break__mark {
width: 4px;
height: 4px;
background: var(--color-laiton);
}
/* ---------- COMPARATIVE TABLE ---------- */
.compare {
position: relative;
background: var(--color-travertin);
padding: 160px 80px;
overflow: hidden;
}
.compare__inner {
position: relative;
z-index: 2;
max-width: 1080px;
margin: 0 auto;
}
.compare__header {
text-align: center;
margin-bottom: 96px;
}
.compare__header .eyebrow--center { justify-content: center; margin-bottom: 32px; }
.compare__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 800px;
}
.compare__title span { display: block; }
.compare__title em { font-style: italic; }
.compare__table {
position: relative;
}
/* Highlight rule on the C&C column */
.compare__col-rule {
position: absolute;
top: 0;
bottom: 0;
left: 120px;
width: 1px;
background: var(--color-laiton);
opacity: 0.6;
}
.compare__head,
.compare__row {
display: grid;
grid-template-columns: 120px 1fr 1fr;
gap: 48px;
align-items: center;
}
.compare__head {
padding-bottom: 8px;
}
.compare__head-cell {
padding-left: 26px;
}
.compare__head-name {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
}
.compare__head-cell--cc .compare__head-name { color: var(--color-bleu); }
.compare__head-cell--market .compare__head-name { color: var(--color-laiton-deep); }
.compare__head-label {
display: block;
margin-top: 6px;
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.compare__head-label--market { color: var(--color-laiton-deep); }
.compare__head-rule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin-top: 12px;
}
.compare__row {
padding: 32px 0;
border-top: 1px solid rgba(184, 149, 106, 0.3);
}
.compare__row:first-of-type { border-top: 1px solid rgba(184, 149, 106, 0.3); }
.compare__crit {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-laiton);
}
.compare__cc {
position: relative;
padding-left: 26px;
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--color-ink);
}
.compare__check {
position: absolute;
left: 0;
color: var(--color-bleu);
font-style: normal;
font-size: 14px;
}
.compare__cc-anchor {
color: var(--color-bleu);
}
.compare__market {
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--color-laiton-deep);
padding-left: 26px;
}
.compare__close-rule {
display: block;
width: 100%;
height: 1px;
background: rgba(184, 149, 106, 0.4);
}
.compare__caption {
margin: 24px 0 0 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-laiton-deep);
}
/* ---------- ZONES COMPACT ---------- */
.zones-compact {
position: relative;
background: var(--color-cream);
padding: 120px 80px;
overflow: hidden;
}
.zones-compact__inner {
position: relative;
z-index: 2;
max-width: 1080px;
margin: 0 auto;
}
.zones-compact__header {
text-align: center;
margin-bottom: 64px;
}
.zones-compact__header .eyebrow--center { justify-content: center; margin-bottom: 32px; }
.zones-compact__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 760px;
}
.zones-compact__title em { font-style: italic; }
.zones-compact__subtitle {
margin: 24px auto 0 auto;
max-width: 720px;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.75;
color: var(--color-ink-soft);
}
.zones-compact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
max-width: 960px;
margin: 0 auto;
}
.zones-compact__subhead {
display: block;
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.zones-compact__subrule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin-top: 8px;
}
.zones-compact__mosaic {
margin: 20px 0 0 0;
line-height: 2.1;
}
.zc-name {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-bleu);
}
.zc-dot {
color: var(--color-laiton);
padding: 0 8px;
}
.zones-compact__closing {
margin: 48px auto 0 auto;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--color-laiton-deep);
}
.zones-compact__link {
color: var(--color-bleu);
border-bottom: 1px solid transparent;
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.zones-compact__link:hover {
color: var(--color-laiton);
border-bottom-color: var(--color-laiton);
}
/* ---------- SERVICES PAGE — TABLET ---------- */
@media (max-width: 1024px) {
.page-hero { padding: 96px 32px 72px 32px; }
.intro { padding: 72px 32px 96px 32px; }
.services-page__header { padding: 0 32px; }
.svc { padding: 72px 32px; }
.svc__inner,
.svc--reverse .svc__inner {
gap: 48px;
}
.compare { padding: 120px 32px; }
.zones-compact { padding: 96px 32px; }
.zones-compact__grid { gap: 56px; }
}
/* ---------- SERVICES PAGE — MOBILE ---------- */
@media (max-width: 768px) {
.page-hero { padding: 64px 24px 56px 24px; min-height: 0; }
.page-hero__title { font-size: clamp(32px, 8vw, 44px); }
.phr-dot { padding: 0 8px; }
.page-hero__reassurance-row { flex-direction: column; align-items: center; gap: 12px; }
.page-hero__reassurance-row .phr-dot { display: none; }
.intro { padding: 56px 24px 72px 24px; }
.intro__paragraph { font-size: 16px; }
.intro__dropcap { font-size: 64px; }
.services-page__header { padding: 0 24px; }
.svc { padding: 56px 24px; }
.svc__inner,
.svc--reverse .svc__inner {
grid-template-columns: 1fr;
gap: 32px;
}
/* Image always on top on mobile */
.svc__image-wrap { order: -1; }
.svc--reverse .svc__image-wrap { order: -1; }
.svc__checks { grid-template-columns: 1fr; gap: 16px; }
.mid-break { padding: 48px 24px; }
.mid-break__line { font-size: 19px; text-align: center; }
.compare { padding: 96px 24px; }
.compare__header { margin-bottom: 56px; }
.compare__col-rule { display: none; }
.compare__head { display: none; }
.compare__row {
grid-template-columns: 1fr;
gap: 8px;
padding: 24px 0;
}
.compare__crit { font-size: 12px; }
.compare__cc,
.compare__market {
padding-left: 26px;
font-size: 16px;
}
.compare__cc::before {
content: "C&C — ";
font-style: normal;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--color-bleu);
}
.compare__market::before {
content: "Marché — ";
font-style: normal;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--color-laiton-deep);
}
.zones-compact { padding: 72px 24px; }
.zones-compact__grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ---------- SERVICES PAGE — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.page-hero [data-reveal],
.intro [data-reveal],
.services-page [data-reveal],
.compare [data-reveal],
.zones-compact [data-reveal],
.svc .svc__image-wrap,
.svc .svc__eyebrow,
.svc .svc__h2,
.svc .svc__body,
.svc .svc__checks,
.svc .svc__links,
.svc .svc__closer {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
PAGE "QUI SOMMES-NOUS"
========================================================= */
/* Generic reveal for the about page */
.aboutp-hero [data-reveal],
.aboutp-chapter [data-reveal],
.aboutp-values [data-reveal],
.aboutp-promise [data-reveal],
.aboutp-cta [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.aboutp-hero [data-reveal].is-visible,
.aboutp-chapter [data-reveal].is-visible,
.aboutp-values [data-reveal].is-visible,
.aboutp-promise [data-reveal].is-visible,
.aboutp-cta [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
.aboutp-eyebrow {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: none;
color: var(--color-laiton);
}
/* ---------- HERO ---------- */
.aboutp-hero {
position: relative;
min-height: 90vh;
background: var(--color-cream);
padding: 96px 80px 80px 80px;
overflow: hidden;
display: flex;
align-items: center;
}
.aboutp-hero__grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.aboutp-hero__inner {
position: relative;
z-index: 2;
max-width: 1280px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 45fr 55fr;
gap: 80px;
align-items: center;
}
.aboutp-hero__text {
max-width: 520px;
}
.aboutp-hero__epigraph {
margin: 24px 0 24px 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.aboutp-hero__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(40px, 4.4vw, 58px);
line-height: 1.1;
color: var(--color-ink);
margin: 0;
max-width: 480px;
}
.aboutp-hero__title-line { display: block; }
.aboutp-hero__title-line--italic {
font-style: italic;
}
.aboutp-hero__amp {
color: var(--color-laiton);
font-size: 110%;
}
.aboutp-hero__subtitle {
margin: 32px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.6;
color: var(--color-ink-soft);
max-width: 440px;
}
.aboutp-hero__colophon {
margin: 64px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.25em;
color: var(--color-laiton);
}
/* Hero media */
.aboutp-hero__media {
transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out) !important;
}
.aboutp-hero__photo {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.2);
}
.aboutp-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.02) brightness(1.02);
}
.aboutp-hero__caption {
margin: 16px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.aboutp-hero__caption-credit {
color: var(--color-laiton);
}
/* ---------- PROSE CHAPTERS (Sections 1, 2, 4) ---------- */
.aboutp-chapter {
position: relative;
background: var(--color-cream);
padding: 120px 80px;
}
.aboutp-chapter--wash {
background: rgba(234, 217, 217, 0.5);
}
.aboutp-chapter__inner {
max-width: 720px;
margin: 0 auto;
}
.aboutp-chapter__head {
margin-bottom: 48px;
}
.aboutp-chapter__head--center {
text-align: center;
}
.aboutp-chapter__eyebrow {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.25em;
color: var(--color-laiton);
text-align: center;
}
.aboutp-chapter__eyebrow-rule {
display: block;
width: 16px;
height: 1px;
background: var(--color-laiton);
margin: 8px auto 24px auto;
}
.aboutp-chapter__eyebrow-rule--center {
margin: 8px auto 24px auto;
}
.aboutp-chapter__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
text-align: left;
}
.aboutp-chapter__head--center .aboutp-chapter__title { text-align: center; }
.aboutp-chapter__title span { display: block; }
.aboutp-chapter__title em { font-style: italic; }
/* Prose */
.aboutp-prose p {
margin: 0 0 24px 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: 18px;
line-height: 1.85;
color: var(--color-ink-soft);
}
.aboutp-prose p:last-child { margin-bottom: 0; }
.aboutp-prose em {
font-style: italic;
color: var(--color-ink);
}
.aboutp-geo {
font-style: italic;
color: var(--color-bleu) !important;
}
.aboutp-brand {
font-style: italic;
color: var(--color-ink);
}
/* Photographic insert */
.aboutp-insert {
margin: 32px auto;
max-width: 480px;
}
.aboutp-insert__img {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(184, 149, 106, 0.2);
}
.aboutp-insert__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.02);
}
.aboutp-insert__caption {
margin: 12px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--color-laiton-deep);
}
/* Isolated sentence (Section 2) */
.aboutp-isolated {
margin: 48px 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: var(--color-ink);
}
/* Em-dash closing mark */
.aboutp-emdash {
display: block;
margin: 48px 0 0 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 24px;
color: var(--color-laiton);
}
/* ---------- SECTION 3 — VALUES ---------- */
.aboutp-values {
position: relative;
background: var(--color-cream);
padding: 140px 80px;
}
.aboutp-values__inner {
max-width: 1080px;
margin: 0 auto;
}
.aboutp-values__head {
text-align: center;
margin-bottom: 96px;
}
.aboutp-values__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
}
.aboutp-values__title em { font-style: italic; }
.aboutp-values__subtitle {
margin: 24px auto 0 auto;
max-width: 540px;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.aboutp-values__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.aboutp-value {
position: relative;
padding: 0 32px;
display: flex;
flex-direction: column;
}
.aboutp-values .aboutp-value[data-reveal] {
transition-delay: var(--block-delay, 0ms);
}
.aboutp-value + .aboutp-value::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--color-laiton);
opacity: 0.15;
}
.aboutp-value__mark {
display: block;
margin-bottom: 32px;
color: var(--color-laiton);
}
.aboutp-value__title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 24px;
color: var(--color-ink);
margin: 0;
}
.aboutp-value__body {
margin: 20px 0 0 0;
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.75;
color: var(--color-ink-soft);
}
.aboutp-value__body em {
font-style: italic;
color: var(--color-ink);
}
.aboutp-value__body em.aboutp-figure {
color: var(--color-bleu);
}
.aboutp-figure {
font-style: italic;
}
.aboutp-value__closer {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
opacity: 0.6;
margin-top: 32px;
}
/* ---------- SECTION 5 — PROMISE ---------- */
.aboutp-promise {
position: relative;
background: var(--color-cream);
padding: 140px 80px;
}
.aboutp-promise__inner {
max-width: 720px;
margin: 0 auto;
}
.aboutp-promise .aboutp-chapter__head {
margin-bottom: 0;
}
.aboutp-promise__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
text-align: center;
}
.aboutp-promise__title em { font-style: italic; }
.aboutp-promise__lead {
margin: 64px 0 0 0;
font-family: var(--font-serif);
font-size: 20px;
line-height: 1.85;
color: var(--color-ink-soft);
}
.aboutp-promise__lead em {
font-style: italic;
color: var(--color-ink);
}
.aboutp-promise__lead em.aboutp-geo {
color: var(--color-bleu);
}
.aboutp-triplet {
margin: 48px 0 0 0;
text-align: center;
}
.aboutp-triplet span {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 26px;
line-height: 1;
color: var(--color-ink);
margin-bottom: 12px;
}
.aboutp-triplet span:last-child { margin-bottom: 0; }
.aboutp-promise__reveal {
margin: 64px auto 0 auto;
max-width: 600px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.5;
color: var(--color-ink);
}
.aboutp-promise__brand {
display: block;
margin-top: 8px;
font-style: normal;
font-size: 32px;
letter-spacing: 0.02em;
color: var(--color-ink);
}
.aboutp-promise__mark {
display: block;
width: 4px;
height: 4px;
background: var(--color-laiton);
margin: 48px auto 0 auto;
}
/* ---------- FINAL CTA (clear ground, non-commercial) ---------- */
.aboutp-cta {
position: relative;
background: var(--color-cream);
padding: 160px 80px;
text-align: center;
}
.aboutp-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.aboutp-cta .eyebrow--center {
justify-content: center;
margin-bottom: 32px;
}
.aboutp-cta__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
}
.aboutp-cta__title em { font-style: italic; }
.aboutp-cta__text {
margin: 32px auto 0 auto;
max-width: 560px;
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.65;
color: var(--color-ink-soft);
}
.aboutp-cta__actions {
margin-top: 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.aboutp-cta__ghost {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 36px;
border: 1.5px solid var(--color-laiton);
border-radius: 2px;
background: transparent;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-ink);
transition: border-color 0.5s var(--ease-out),
background-color 0.5s var(--ease-out);
}
.aboutp-cta__arrow {
color: var(--color-laiton);
transition: transform 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.aboutp-cta__ghost:hover {
border-color: var(--color-bleu);
border-width: 2px;
padding: 17.5px 35.5px;
background-color: rgba(246, 234, 234, 0.5);
}
.aboutp-cta__ghost:hover .aboutp-cta__arrow {
transform: translateX(8px);
color: var(--color-bleu);
}
.aboutp-cta__phone {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--color-ink);
padding-bottom: 6px;
border-bottom: 1px solid var(--color-laiton);
transition: border-color 0.4s var(--ease-out);
}
.aboutp-cta__phone svg { color: var(--color-laiton); flex-shrink: 0; }
.aboutp-cta__phone:hover { border-bottom-color: var(--color-bleu); }
.aboutp-cta__signoff {
margin-top: 96px;
}
.aboutp-cta__signature {
margin: 0;
font-family: var(--font-script);
font-size: 28px;
line-height: 1;
color: var(--color-ink);
opacity: 0.85;
}
.aboutp-cta__mark {
display: block;
width: 4px;
height: 4px;
background: var(--color-laiton);
margin: 24px auto 0 auto;
}
/* ---------- ABOUT PAGE — TABLET ---------- */
@media (max-width: 1024px) {
.aboutp-hero { padding: 80px 32px 64px 32px; }
.aboutp-hero__inner { gap: 48px; }
.aboutp-chapter { padding: 96px 32px; }
.aboutp-values { padding: 112px 32px; }
.aboutp-promise { padding: 112px 32px; }
.aboutp-cta { padding: 120px 32px; }
}
/* ---------- ABOUT PAGE — MOBILE ---------- */
@media (max-width: 768px) {
.aboutp-hero {
padding: 56px 24px 56px 24px;
min-height: 0;
}
.aboutp-hero__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.aboutp-hero__media { order: -1; }
.aboutp-hero__title { font-size: clamp(34px, 9vw, 46px); }
.aboutp-hero__colophon { margin-top: 40px; }
.aboutp-chapter { padding: 72px 24px; }
.aboutp-chapter__title { font-size: clamp(24px, 7vw, 32px); }
.aboutp-prose p { font-size: 17px; }
.aboutp-insert { margin: 24px auto; }
.aboutp-values { padding: 88px 24px; }
.aboutp-values__head { margin-bottom: 64px; }
.aboutp-values__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.aboutp-value { padding: 0; }
.aboutp-value + .aboutp-value::before {
width: auto;
left: 0;
right: 0;
top: -24px;
bottom: auto;
height: 1px;
}
.aboutp-promise { padding: 88px 24px; }
.aboutp-promise__lead { font-size: 18px; }
.aboutp-triplet span { font-size: 22px; }
.aboutp-promise__reveal { font-size: 18px; }
.aboutp-promise__brand { font-size: 26px; }
.aboutp-cta { padding: 96px 24px; }
.aboutp-cta__text { font-size: 18px; }
.aboutp-cta__ghost { width: 100%; justify-content: center; }
}
/* ---------- ABOUT PAGE — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.aboutp-hero [data-reveal],
.aboutp-chapter [data-reveal],
.aboutp-values [data-reveal],
.aboutp-promise [data-reveal],
.aboutp-cta [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
PAGE "TARIFS"
========================================================= */
/* Generic reveal */
.tp-hero [data-reveal],
.tp-philo [data-reveal],
.tp-included [data-reveal],
.tp-excluded [data-reveal],
.tp-compare [data-reveal],
.tp-sim [data-reveal],
.tp-cases [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.tp-hero [data-reveal].is-visible,
.tp-philo [data-reveal].is-visible,
.tp-included [data-reveal].is-visible,
.tp-excluded [data-reveal].is-visible,
.tp-compare [data-reveal].is-visible,
.tp-sim [data-reveal].is-visible,
.tp-cases [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* Shared chapter header */
.tp-eyebrow,
.tp-chapter-eyebrow {
font-family: var(--font-serif);
font-style: italic;
letter-spacing: 0.2em;
color: var(--color-laiton);
text-transform: none;
}
.tp-chapter-head {
margin-bottom: 80px;
}
.tp-chapter-head--center { text-align: center; }
.tp-chapter-eyebrow {
display: block;
font-size: 13px;
}
.tp-chapter-rule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin: 8px auto 24px auto;
}
.tp-chapter-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0 auto;
max-width: 720px;
}
.tp-chapter-title span { display: block; }
.tp-chapter-title em { font-style: italic; }
.tp-chapter-title em.tp-fig-bleu { color: var(--color-bleu); }
.tp-chapter-subtitle {
margin: 32px auto 0 auto;
max-width: 540px;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.tp-chapter-intro {
margin: 32px auto 0 auto;
max-width: 640px;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.7;
color: var(--color-ink-soft);
}
.tp-chapter-intro em { font-style: italic; color: var(--color-ink); }
/* Number colour treatments */
.tp-fig-bleu { font-style: italic; color: var(--color-bleu); }
.tp-fig-sable { font-style: italic; color: var(--color-laiton-deep); }
.tp-square {
display: block;
width: 4px;
height: 4px;
background: var(--color-laiton);
margin: 48px auto 0 auto;
}
/* ---------- HERO ---------- */
.tp-hero {
position: relative;
min-height: 85vh;
padding: 96px 80px 80px 80px;
display: flex;
align-items: center;
background: linear-gradient(to bottom,
var(--color-cream) 0,
var(--color-cream) 200px,
#FBF3F3 320px,
#FBF3F3 100%);
}
.tp-hero__inner {
max-width: 960px;
margin: 0 auto;
text-align: center;
width: 100%;
}
.tp-hero__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 880px;
}
.tp-hero__title-line { display: block; }
.tp-hero__title-line--italic { font-style: italic; margin-top: 6px; }
.tp-hero__title-soft { font-style: italic; }
.tp-hero__title-fig {
font-style: italic;
font-weight: 400;
color: var(--color-bleu);
}
.tp-hero__subtitle {
margin: 32px auto 0 auto;
max-width: 560px;
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.65;
color: var(--color-ink-soft);
}
/* The price monument */
.tp-figure-block {
margin: 64px auto 0 auto;
max-width: 720px;
display: flex;
flex-direction: column;
align-items: center;
}
.tp-figure-block__rule {
display: block;
width: 80px;
height: 1px;
background: var(--color-laiton);
}
.tp-figure-block__label {
margin-top: 24px;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
letter-spacing: 0.25em;
color: var(--color-laiton);
text-transform: uppercase;
}
.tp-figure {
display: flex;
align-items: flex-start;
justify-content: center;
margin: 40px 0;
color: var(--color-ink);
}
.tp-figure__number,
.tp-figure__pct {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(110px, 16vw, 180px);
line-height: 0.9;
color: var(--color-ink);
}
.tp-figure__pct {
margin-left: 0.08em;
}
.tp-figure__unit {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(24px, 3.2vw, 36px);
color: var(--color-laiton-deep);
margin-left: 16px;
margin-top: 0.12em;
}
.tp-figure-block__caption {
margin: 8px 0 0 0;
font-family: var(--font-serif);
font-size: 18px;
color: var(--color-ink);
max-width: 560px;
}
.tp-figure-block__caption em { font-style: italic; }
.tp-figure-block__rule:last-child { margin-top: 24px; }
.tp-hero__cta { margin-top: 64px; }
.tp-hero__microstrip {
margin: 56px 0 0 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 0;
}
.tp-micro {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--color-ink);
}
.tp-micro svg { color: var(--color-bleu); flex-shrink: 0; }
.tp-micro em {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
}
.tp-micro-dot { color: var(--color-laiton); padding: 0 16px; }
/* ---------- SECTION 1 — PHILOSOPHIE ---------- */
.tp-philo {
background: var(--color-cream);
padding: 140px 80px;
}
.tp-philo__inner {
max-width: 880px;
margin: 0 auto;
}
.tp-prose p {
margin: 0 0 24px 0;
font-family: var(--font-serif);
font-size: 18px;
line-height: 1.85;
color: var(--color-ink-soft);
}
.tp-prose p:last-child { margin-bottom: 0; }
.tp-prose em { font-style: italic; color: var(--color-ink); }
.tp-prose em.tp-fig-bleu { color: var(--color-bleu); }
.tp-prose em.tp-fig-sable { color: var(--color-laiton-deep); }
.tp-brand { font-style: italic; color: var(--color-ink); }
.tp-isolated {
margin: 48px 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--color-ink);
}
/* ---------- SECTION 2 — INCLUSIONS ---------- */
.tp-included {
background: rgba(234, 217, 217, 0.5);
padding: 140px 80px;
}
.tp-included__inner {
max-width: 1080px;
margin: 0 auto;
}
.tp-incl-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 48px;
}
.tp-incl {
display: flex;
gap: 16px;
padding: 28px 0;
border-top: 1px solid rgba(184, 149, 106, 0.2);
}
/* first item in each column has no top border line doubled — keep clean: top border only from row 2 visually.
With 2 columns, items 1 & 2 are the first row. */
.tp-incl:nth-child(1),
.tp-incl:nth-child(2) {
border-top: none;
padding-top: 0;
}
.tp-incl__mark {
flex-shrink: 0;
width: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--color-bleu);
}
.tp-incl__num {
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.tp-incl__text { padding-left: 0; }
.tp-incl__title {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 17px;
line-height: 1.3;
color: var(--color-ink);
}
.tp-incl__desc {
margin: 8px 0 0 0;
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.55;
color: #5A5550;
max-width: 360px;
}
.tp-incl__desc em { font-style: italic; color: var(--color-ink); }
.tp-incl__desc em.tp-fig-bleu { color: var(--color-bleu); }
.tp-incl-closing {
margin: 48px 0 0 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--color-ink);
}
/* ---------- SECTION 3 — EXCLUSIONS ---------- */
.tp-excluded {
background: var(--color-cream);
padding: 140px 80px;
}
.tp-excluded__inner {
max-width: 1080px;
margin: 0 auto;
}
.tp-excl-table {
margin-top: 0;
}
.tp-excl-head,
.tp-excl-row {
display: grid;
grid-template-columns: 40% 30% 30%;
gap: 32px;
}
.tp-excl-head {
padding-bottom: 16px;
border-bottom: 1px solid rgba(184, 149, 106, 0.6);
}
.tp-excl-head span {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-laiton);
}
.tp-excl-row {
padding: 48px 0;
border-bottom: 1px solid rgba(184, 149, 106, 0.3);
align-items: start;
}
.tp-excl-name {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--color-ink);
}
.tp-excl-when {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
color: var(--color-ink-soft);
}
.tp-excl-amount {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
line-height: 1.5;
}
.tp-excl-amount em.tp-fig-bleu { color: var(--color-bleu); }
.tp-excl-closing-big {
margin: 64px 0 0 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 32px;
color: var(--color-ink);
}
.tp-excl-closing-small {
margin: 24px auto 0 auto;
max-width: 540px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
line-height: 1.6;
color: var(--color-laiton-deep);
}
/* ---------- SECTION 4 — COMPARATIF ---------- */
.tp-compare {
background: rgba(234, 217, 217, 0.5);
padding: 160px 80px;
}
.tp-compare__inner {
max-width: 1180px;
margin: 0 auto;
}
.tp-cmp {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 32px;
}
.tp-cmp__hl {
position: absolute;
top: 0;
bottom: 0;
left: -16px;
width: 1px;
background: var(--color-laiton);
opacity: 0.6;
}
.tp-cmp__heads {
display: contents;
}
.tp-cmp__head {
padding-bottom: 8px;
}
.tp-cmp__head-name {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 19px;
color: var(--color-bleu);
line-height: 1.3;
}
.tp-cmp__head-name--alt {
font-style: normal;
font-size: 17px;
color: var(--color-laiton-deep);
}
.tp-cmp__head-label {
display: block;
margin-top: 8px;
font-family: var(--font-sans);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.tp-cmp__head-label--alt { color: #5A5550; }
.tp-cmp__head-rule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin-top: 12px;
}
.tp-cmp__head-rule--alt { background: rgba(184, 149, 106, 0.4); }
/* Row labels span the whole grid */
.tp-cmp__rowlabel {
grid-column: 1 / -1;
margin-top: 40px;
margin-bottom: 8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-laiton);
}
.tp-cmp__row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 32px;
padding: 16px 0;
border-top: 1px solid rgba(184, 149, 106, 0.2);
}
.tp-cmp__cell {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
line-height: 1.4;
color: var(--color-laiton-deep);
}
.tp-cmp__cell--cc {
font-size: 17px;
color: var(--color-ink);
}
.tp-cmp__cell em.tp-fig-bleu { color: var(--color-bleu); font-style: italic; }
.tp-math {
margin-top: 72px;
display: flex;
flex-direction: column;
align-items: center;
}
.tp-math__rule {
display: block;
width: 80px;
height: 1px;
background: var(--color-laiton);
}
.tp-math__statement {
margin: 24px 0;
max-width: 720px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
line-height: 1.6;
color: var(--color-ink);
}
.tp-math__statement em { font-style: italic; }
.tp-math__fig {
font-style: normal;
font-weight: 400;
color: var(--color-bleu);
}
/* ---------- SECTION 5 — SIMULATEUR ---------- */
.tp-sim {
background: var(--color-cream);
padding: 160px 80px;
}
.tp-sim__inner {
max-width: 1080px;
margin: 0 auto;
}
.tp-simulator {
display: grid;
grid-template-columns: 45fr 55fr;
max-width: 960px;
margin: 0 auto;
border: 1px solid rgba(184, 149, 106, 0.4);
border-radius: 2px;
}
.tp-sim-inputs {
padding: 56px;
border-right: 1px solid rgba(138, 118, 112, 0.3);
}
.tp-sim-results {
padding: 56px;
}
.tp-sim-col-label {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
color: var(--color-laiton);
text-transform: uppercase;
}
.tp-sim-col-rule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin: 8px 0 32px 0;
}
.tp-field { margin-bottom: 24px; }
.tp-field:last-child { margin-bottom: 0; }
.tp-field > label {
display: block;
font-family: var(--font-sans);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-laiton-deep);
margin-bottom: 8px;
}
/* Select */
.tp-select {
position: relative;
}
.tp-select select {
width: 100%;
height: 48px;
background: transparent;
border: 1px solid rgba(184, 149, 106, 0.5);
border-radius: 2px;
padding: 0 40px 0 16px;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.tp-select select:focus {
outline: none;
border-color: var(--color-laiton);
}
.tp-select__arrow {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--color-laiton);
pointer-events: none;
}
/* Stepper */
.tp-stepper {
display: inline-flex;
align-items: center;
}
.tp-stepper__btn {
width: 32px;
height: 32px;
border: 1px solid var(--color-laiton);
border-radius: 2px;
background: transparent;
color: var(--color-ink);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s var(--ease-out);
}
.tp-stepper__btn:hover { background: rgba(184, 149, 106, 0.12); }
.tp-stepper__value {
width: 64px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--color-ink);
}
/* Slider */
.tp-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 1px;
background: rgba(138, 118, 112, 0.35);
outline: none;
margin: 8px 0;
cursor: pointer;
}
.tp-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-laiton);
border: 2px solid var(--color-cream);
cursor: pointer;
}
.tp-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-laiton);
border: 2px solid var(--color-cream);
cursor: pointer;
}
.tp-slider__value {
display: block;
margin-top: 8px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
}
/* Results */
.tp-result { margin-bottom: 20px; }
.tp-result__label {
display: block;
font-family: var(--font-sans);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-laiton-deep);
margin-bottom: 8px;
}
.tp-result__value {
font-family: var(--font-serif);
font-style: italic;
font-size: 32px;
color: var(--color-ink);
line-height: 1;
}
.tp-result__value--small { font-size: 24px; }
.tp-result__value--sub {
font-size: 22px;
color: var(--color-laiton-deep);
}
.tp-sim-divider {
display: block;
width: 100%;
height: 1px;
background: rgba(184, 149, 106, 0.4);
margin: 32px 0 24px 0;
}
.tp-sim-net-rule {
display: block;
width: 80px;
height: 1px;
background: var(--color-laiton);
}
.tp-result--net {
margin: 16px 0;
}
.tp-result__label--net {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-bleu);
}
.tp-result__value--net {
font-size: 40px;
color: var(--color-bleu);
}
.tp-sim__cta {
display: flex;
width: fit-content;
margin: 48px auto 0 auto;
}
.tp-sim__note {
margin: 24px auto 0 auto;
max-width: 720px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
line-height: 1.7;
color: var(--color-laiton-deep);
}
/* ---------- SECTION 6 — CAS CONCRETS ---------- */
.tp-cases {
background: rgba(234, 217, 217, 0.5);
padding: 140px 80px;
}
.tp-cases__inner {
max-width: 1280px;
margin: 0 auto;
}
.tp-cases__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1080px;
margin: 0 auto;
}
.tp-case {
display: flex;
flex-direction: column;
}
.tp-cases .tp-case[data-reveal] {
transition-delay: var(--block-delay, 0ms);
}
.tp-case__icon {
color: var(--color-laiton);
margin-bottom: 16px;
}
.tp-case__id {
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.tp-case__name {
margin: 8px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 20px;
line-height: 1.3;
color: var(--color-ink);
}
.tp-case__rule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
opacity: 0.4;
margin: 32px 0 24px 0;
}
.tp-case__rule--short {
width: 60px;
opacity: 0.3;
background: var(--color-laiton-deep);
margin: 24px 0;
}
.tp-case__line {
margin-bottom: 16px;
}
.tp-case__label {
display: block;
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-laiton-deep);
margin-bottom: 4px;
}
.tp-case__label--net { color: var(--color-bleu); }
.tp-case__value {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--color-ink);
}
.tp-case__value--sub { color: var(--color-laiton-deep); }
.tp-case__line--net { margin-bottom: 0; }
.tp-case__value--net {
font-size: 24px;
color: var(--color-bleu);
}
.tp-case__compare {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.tp-cases__note {
margin: 64px auto 0 auto;
max-width: 720px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
line-height: 1.7;
color: var(--color-laiton-deep);
}
/* ---------- TARIFS — TABLET ---------- */
@media (max-width: 1024px) {
.tp-hero { padding: 80px 32px 64px 32px; }
.tp-philo,
.tp-included,
.tp-excluded { padding: 112px 32px; }
.tp-compare,
.tp-sim { padding: 120px 32px; }
.tp-cases { padding: 112px 32px; }
.tp-incl-grid { grid-template-columns: 1fr; column-gap: 0; }
.tp-incl:nth-child(2) { border-top: 1px solid rgba(184, 149, 106, 0.2); padding-top: 28px; }
/* Comparative table → 2 columns */
.tp-cmp { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
.tp-cmp__hl { display: none; }
.tp-cmp__row { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
.tp-simulator { grid-template-columns: 1fr; }
.tp-sim-inputs { border-right: none; border-bottom: 1px solid rgba(138, 118, 112, 0.3); }
.tp-cases__grid { grid-template-columns: 1fr; gap: 56px; max-width: 480px; }
}
/* ---------- TARIFS — MOBILE ---------- */
@media (max-width: 768px) {
.tp-hero { padding: 56px 24px 56px 24px; min-height: 0; }
.tp-philo,
.tp-included,
.tp-excluded,
.tp-compare,
.tp-sim,
.tp-cases { padding: 80px 24px; }
.tp-chapter-head { margin-bottom: 56px; }
.tp-figure__number,
.tp-figure__pct { font-size: clamp(88px, 24vw, 120px); }
.tp-prose p { font-size: 17px; }
.tp-excl-head { display: none; }
.tp-excl-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 32px 0;
}
.tp-excl-when, .tp-excl-amount { font-size: 14px; }
.tp-cmp { grid-template-columns: 1fr; }
.tp-cmp__head { padding-top: 24px; }
.tp-cmp__head:first-child { padding-top: 0; }
.tp-cmp__row { grid-template-columns: 1fr; row-gap: 8px; }
.tp-cmp__cell--cc { padding-bottom: 4px; }
.tp-sim-inputs, .tp-sim-results { padding: 32px; }
.tp-math__statement { font-size: 18px; }
}
/* ---------- TARIFS — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.tp-hero [data-reveal],
.tp-philo [data-reveal],
.tp-included [data-reveal],
.tp-excluded [data-reveal],
.tp-compare [data-reveal],
.tp-sim [data-reveal],
.tp-cases [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
PAGE "CONTACT"
========================================================= */
/* Generic reveal */
.ct-hero [data-reveal],
.ct-main [data-reveal],
.ct-after [data-reveal],
.ct-map-section [data-reveal],
.ct-final [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.ct-hero [data-reveal].is-visible,
.ct-main [data-reveal].is-visible,
.ct-after [data-reveal].is-visible,
.ct-map-section [data-reveal].is-visible,
.ct-final [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
.ct-eyebrow {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: none;
color: var(--color-laiton);
}
.ct-square {
display: block;
width: 4px;
height: 4px;
background: var(--color-laiton);
margin: 24px auto 0 auto;
}
/* Shared section header (centered) */
.ct-section-head {
text-align: center;
margin-bottom: 80px;
}
.ct-section-eyebrow {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.ct-section-rule {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
margin: 8px auto 24px auto;
}
.ct-section-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0 auto;
max-width: 720px;
}
.ct-section-title em { font-style: italic; }
.ct-section-intro {
margin: 28px auto 0 auto;
max-width: 580px;
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
line-height: 1.6;
color: var(--color-ink-soft);
}
/* ---------- HERO ---------- */
.ct-hero {
background: var(--color-cream);
min-height: 50vh;
padding: 96px 80px 64px 80px;
display: flex;
align-items: center;
}
.ct-hero__inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
width: 100%;
}
.ct-hero__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.15;
color: var(--color-ink);
margin: 0 auto;
max-width: 800px;
}
.ct-hero__title em { font-style: italic; }
.ct-hero__subtitle {
margin: 28px auto 0 auto;
max-width: 640px;
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.6;
color: var(--color-ink-soft);
}
.ct-hero__subtitle span { display: block; }
.ct-hero__subtitle em { font-style: italic; }
.ct-fig {
font-style: italic;
font-weight: 400;
color: var(--color-bleu);
}
.ct-hero__reassurance {
margin: 48px auto 0 auto;
max-width: 720px;
}
.ct-hero__reassurance-rule {
display: block;
width: 100%;
height: 1px;
background: rgba(184, 149, 106, 0.3);
}
.ct-hero__reassurance-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 0;
padding: 18px 0;
}
.ct-rea {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--color-ink);
}
.ct-rea svg { color: var(--color-bleu); flex-shrink: 0; }
.ct-rea-fig { color: var(--color-bleu); }
.ct-rea-dot { color: var(--color-laiton); padding: 0 16px; }
/* ---------- SECTION CENTRALE — TWO COLUMNS ---------- */
.ct-main {
background: var(--color-cream);
padding: 80px 80px 120px 80px;
}
.ct-main__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0 80px;
align-items: start;
}
.ct-main__divider {
align-self: stretch;
width: 1px;
background: rgba(184, 149, 106, 0.3);
}
/* Column headers */
.ct-col-eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.ct-col-eyebrow__label {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.2em;
color: var(--color-laiton);
}
.ct-col-eyebrow__rule {
width: 24px;
height: 1px;
background: var(--color-laiton);
}
.ct-col-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
max-width: 400px;
}
.ct-col-title em { font-style: italic; }
.ct-col-intro {
margin: 24px 0 0 0;
max-width: 420px;
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
line-height: 1.65;
color: var(--color-ink-soft);
}
.ct-col-intro em { font-style: italic; color: var(--color-ink); }
/* Contact methods */
.ct-methods {
margin-top: 48px;
}
.ct-method {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
}
.ct-method + .ct-method { margin-top: 16px; }
.ct-method__icon {
flex-shrink: 0;
width: 32px;
display: flex;
justify-content: center;
color: var(--color-laiton);
transition: color 0.3s var(--ease-out);
}
.ct-method__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.ct-method__primary {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 500;
color: var(--color-ink);
transition: color 0.3s var(--ease-out);
}
.ct-method__context {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.ct-method--link { cursor: pointer; }
.ct-method--link:hover .ct-method__icon { color: var(--color-bleu); }
.ct-method--link:hover .ct-method__primary {
color: var(--color-bleu);
text-decoration: underline;
text-decoration-color: var(--color-laiton);
text-underline-offset: 4px;
}
/* Human-touch quote */
.ct-quote {
margin-top: 64px;
}
.ct-quote__rule {
display: block;
width: 40px;
height: 1px;
background: var(--color-laiton);
margin-bottom: 24px;
}
.ct-quote__text {
position: relative;
margin: 0;
padding-left: 24px;
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
line-height: 1.7;
color: var(--color-ink-soft);
}
.ct-quote__open {
position: absolute;
left: -8px;
top: -6px;
font-size: 32px;
color: var(--color-laiton);
opacity: 0.6;
}
.ct-quote__close {
font-size: 24px;
color: var(--color-laiton);
opacity: 0.6;
vertical-align: -6px;
}
.ct-quote__accent {
font-style: italic;
color: var(--color-bleu);
}
.ct-quote__signature {
margin: 16px 0 0 24px;
font-family: var(--font-script);
font-size: 20px;
color: var(--color-ink);
opacity: 0.85;
}
/* ---------- FORM ---------- */
.ct-form { margin-top: 48px; }
.ct-field {
margin-bottom: 24px;
border: none;
padding: 0;
}
.ct-label {
display: block;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-laiton-deep);
margin-bottom: 8px;
transition: color 0.3s var(--ease-out);
}
.ct-req { color: var(--color-laiton); }
/* Bottom-border-only inputs */
.ct-input {
width: 100%;
height: 52px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(184, 149, 106, 0.5);
padding: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--color-ink);
transition: border-color 0.3s var(--ease-out), border-width 0.3s var(--ease-out);
}
.ct-input::placeholder {
font-family: var(--font-serif);
font-style: italic;
color: rgba(138, 118, 112, 0.6);
}
.ct-input:focus {
outline: none;
border-bottom: 1.5px solid var(--color-bleu);
}
.ct-field:focus-within .ct-label {
color: var(--color-bleu);
}
.ct-input.is-invalid {
border-bottom-color: var(--color-laiton-deep);
}
.ct-textarea {
height: auto;
min-height: 144px;
padding-top: 8px;
line-height: 1.6;
resize: vertical;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 31px,
rgba(184, 149, 106, 0.25) 31px,
rgba(184, 149, 106, 0.25) 32px
);
}
.ct-field__hint {
display: block;
margin-top: 6px;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--color-laiton-deep);
}
.ct-field__hint--error {
display: none;
color: var(--color-laiton-deep);
}
.ct-field__hint--error.is-visible { display: block; }
/* Radio group */
.ct-field--radio { margin-bottom: 28px; }
.ct-field--radio .ct-label {
margin-bottom: 14px;
}
.ct-radio {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
margin-bottom: 12px;
}
.ct-radio:last-child { margin-bottom: 0; }
.ct-radio input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ct-radio__dot {
flex-shrink: 0;
width: 16px;
height: 16px;
border: 1px solid rgba(184, 149, 106, 0.6);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.3s var(--ease-out);
}
.ct-radio__dot::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-laiton);
transform: scale(0);
transition: transform 0.2s var(--ease-out);
}
.ct-radio input:checked + .ct-radio__dot {
border-color: var(--color-laiton);
}
.ct-radio input:checked + .ct-radio__dot::after {
transform: scale(1);
}
.ct-radio input:focus-visible + .ct-radio__dot {
outline: 1px dashed var(--color-laiton);
outline-offset: 3px;
}
.ct-radio__text {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--color-ink);
}
/* Select */
.ct-select { position: relative; }
.ct-select select {
width: 100%;
height: 52px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(184, 149, 106, 0.5);
padding: 0 28px 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--color-ink);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.ct-select select:focus {
outline: none;
border-bottom: 1.5px solid var(--color-bleu);
}
.ct-select__arrow {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--color-laiton);
pointer-events: none;
}
/* Consent checkbox */
.ct-consent {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
margin-top: 8px;
}
.ct-consent input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ct-consent__box {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 2px;
border: 1px solid rgba(184, 149, 106, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-cream);
transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.ct-consent__box svg {
opacity: 0;
transition: opacity 0.2s var(--ease-out);
}
.ct-consent input:checked + .ct-consent__box {
background: var(--color-laiton);
border-color: var(--color-laiton);
}
.ct-consent input:checked + .ct-consent__box svg { opacity: 1; }
.ct-consent input:focus-visible + .ct-consent__box {
outline: 1px dashed var(--color-laiton);
outline-offset: 3px;
}
.ct-consent__text {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--color-ink-soft);
}
.ct-consent__text em { font-style: italic; color: var(--color-ink); }
/* Submit */
.ct-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 56px;
margin-top: 40px;
background: var(--color-laiton);
color: var(--color-ink);
border: none;
border-radius: 2px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
cursor: pointer;
box-shadow: inset 0 1px 0 0 #D4B68A;
opacity: 0.6;
transition: opacity 0.6s var(--ease-out), background-color 0.4s var(--ease-out);
}
.ct-submit svg { transition: transform 0.4s var(--ease-out); }
.ct-submit.is-ready { opacity: 1; }
.ct-submit.is-ready:hover {
background: #D4B68A;
}
.ct-submit.is-ready:hover svg { transform: translateX(6px); }
.ct-privacy {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 24px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
line-height: 1.65;
color: var(--color-laiton-deep);
}
.ct-privacy__lock {
flex-shrink: 0;
color: var(--color-laiton);
margin-top: 2px;
}
/* ---------- SECTION — CE QUI SE PASSE APRÈS ---------- */
.ct-after {
background: rgba(234, 217, 217, 0.5);
padding: 140px 80px;
}
.ct-after__inner {
max-width: 1180px;
margin: 0 auto;
}
.ct-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 1080px;
margin: 0 auto;
}
.ct-step {
position: relative;
padding: 0 32px;
display: flex;
flex-direction: column;
}
.ct-step + .ct-step::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--color-laiton);
opacity: 0.15;
}
.ct-after .ct-step[data-reveal] {
transition-delay: var(--block-delay, 0ms);
}
.ct-step__num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: 72px;
line-height: 1;
color: var(--color-laiton);
}
.ct-step__rule {
display: block;
width: 32px;
height: 1px;
background: var(--color-laiton);
margin: 24px 0 20px 0;
}
.ct-step__title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 1.25;
color: var(--color-ink);
margin: 0;
}
.ct-step__body {
margin: 20px 0 0 0;
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.7;
color: var(--color-ink-soft);
max-width: 320px;
}
.ct-step__body em { font-style: italic; color: var(--color-ink); }
.ct-step__accent { font-style: italic; color: var(--color-bleu) !important; }
.ct-step__closer {
display: block;
width: 24px;
height: 1px;
background: var(--color-laiton);
opacity: 0.6;
margin-top: 32px;
}
.ct-after__closing {
margin: 64px auto 0 auto;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.5;
color: var(--color-ink);
max-width: 720px;
}
.ct-after__closing span { display: block; }
/* ---------- SECTION CARTE ---------- */
.ct-map-section {
background: var(--color-cream);
padding: 140px 80px;
}
.ct-map-section__inner {
max-width: 1280px;
margin: 0 auto;
}
.ct-map-frame {
border: 1px solid rgba(184, 149, 106, 0.4);
padding: 24px;
}
.ct-map {
display: block;
width: 100%;
height: 480px;
border: 0;
/* Nudge Google's default palette toward the brand's warm register */
filter: saturate(0.7) sepia(0.12) brightness(1.02) contrast(0.96);
}
.ct-geo {
margin: 48px auto 0 auto;
max-width: 880px;
text-align: center;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.8;
color: var(--color-ink-soft);
}
.ct-geo-name {
font-style: italic;
color: var(--color-bleu);
}
/* ---------- FAQ tweaks (left-aligned title already from .faq) ---------- */
.ct-faq .faq__title em { font-style: italic; }
/* ---------- CTA FINAL — ALTERNATIVE DOUCE ---------- */
.ct-final {
background: var(--color-cream);
padding: 160px 80px;
text-align: center;
}
.ct-final__inner {
max-width: 720px;
margin: 0 auto;
}
.ct-final .eyebrow--center {
justify-content: center;
margin-bottom: 32px;
}
.ct-final__title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
color: var(--color-ink);
margin: 0;
}
.ct-final__title em { font-style: italic; }
.ct-final__text {
margin: 32px auto 0 auto;
max-width: 560px;
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.6;
color: var(--color-ink-soft);
}
.ct-final__text em { font-style: italic; color: var(--color-ink); }
.ct-final__actions {
margin-top: 56px;
display: flex;
align-items: stretch;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.ct-final-cta {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 20px 36px;
border: 1.5px solid var(--color-ink);
border-radius: 2px;
background: transparent;
transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.ct-final-cta__icon {
color: var(--color-laiton);
flex-shrink: 0;
transition: color 0.4s var(--ease-out);
}
.ct-final-cta__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.ct-final-cta__label {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: var(--color-ink);
}
.ct-final-cta__sub {
font-family: var(--font-sans);
font-size: 13px;
color: var(--color-laiton-deep);
}
.ct-final-cta:hover {
border-color: var(--color-bleu);
border-width: 2px;
padding: 19.5px 35.5px;
background-color: rgba(246, 234, 234, 0.3);
}
.ct-final-cta:hover .ct-final-cta__icon {
color: var(--color-bleu);
}
.ct-final__signoff {
margin-top: 96px;
}
.ct-final__signature {
margin: 0;
font-family: var(--font-script);
font-size: 26px;
line-height: 1;
color: var(--color-ink);
opacity: 0.85;
}
.ct-final__byline {
margin: 12px 0 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--color-laiton-deep);
}
/* ---------- CONTACT — TABLET ---------- */
@media (max-width: 1024px) {
.ct-hero { padding: 80px 32px 56px 32px; }
.ct-main { padding: 64px 32px 96px 32px; }
.ct-main__inner {
grid-template-columns: 1fr;
gap: 64px;
}
.ct-main__divider {
width: auto;
height: 1px;
}
.ct-after,
.ct-map-section { padding: 112px 32px; }
.ct-final { padding: 120px 32px; }
}
/* ---------- CONTACT — MOBILE ---------- */
@media (max-width: 768px) {
.ct-hero {
padding: 56px 24px 48px 24px;
min-height: 0;
}
.ct-hero__reassurance-row {
flex-direction: column;
gap: 12px;
}
.ct-hero__reassurance-row .ct-rea-dot { display: none; }
.ct-main { padding: 48px 24px 72px 24px; }
.ct-main__inner { gap: 56px; }
.ct-after,
.ct-map-section { padding: 80px 24px; }
.ct-section-head { margin-bottom: 56px; }
.ct-steps { grid-template-columns: 1fr; gap: 48px; }
.ct-step { padding: 0; }
.ct-step + .ct-step::before {
width: auto;
left: 0;
right: 0;
top: -24px;
bottom: auto;
height: 1px;
}
.ct-map { height: 360px; }
.ct-map-frame { padding: 12px; }
.ct-final { padding: 96px 24px; }
.ct-final__actions { flex-direction: column; gap: 16px; }
.ct-final-cta { width: 100%; justify-content: center; }
}
/* ---------- CONTACT — REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.ct-hero [data-reveal],
.ct-main [data-reveal],
.ct-after [data-reveal],
.ct-map-section [data-reveal],
.ct-final [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
SHARED ANIMATIONS
========================================================= */
@keyframes rise {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade {
to { opacity: 1; }
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.hero {
padding: 32px 32px 0 32px;
}
.hero__grid {
gap: 40px;
padding: 24px 0 100px 0;
}
.hero__content {
padding-left: 8px;
}
.hero__image-wrap,
.hero__image {
min-height: 480px;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
.hero {
min-height: 85vh;
padding: 24px 20px 0 20px;
}
.hero__grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 16px 0 80px 0;
}
.hero__content {
order: 1;
padding-left: 0;
max-width: 100%;
}
.hero__image-wrap {
order: 2;
min-height: 360px;
}
.hero__image {
min-height: 360px;
}
.eyebrow {
margin-bottom: 24px;
}
.hero__title {
font-size: clamp(32px, 8vw, 44px);
margin-bottom: 24px;
}
.hero__subtitle {
font-size: 16px;
margin-bottom: 32px;
}
.hero__ctas {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.cta--primary {
width: 100%;
justify-content: center;
}
.reassurance {
grid-template-columns: repeat(2, 1fr);
gap: 20px 0;
padding: 24px 8px 48px 8px;
}
.reassurance__item {
padding: 0 16px;
}
.reassurance__item:nth-child(3)::before {
display: none;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.hero__content,
.hero__image-wrap,
.hero__ctas,
.reassurance {
opacity: 1;
transform: none;
animation: none;
}
.cta,
.cta__arrow {
transition: none;
}
}
/* =========================================================
COOKIE CONSENT BANNER (RGPD/CNIL)
========================================================= */
.cookie-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 560px;
margin: 0 auto;
background: #fffdf8;
border: 1px solid #e8e0d0;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(26, 26, 24, 0.18);
padding: 22px 24px;
z-index: 9999;
font-family: 'Inter', sans-serif;
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: transform 0.32s ease, opacity 0.32s ease;
}
.cookie-banner--visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.cookie-banner--hidden {
transform: translateY(20px);
opacity: 0;
pointer-events: none;
}
.cookie-banner__inner {
display: flex;
flex-direction: column;
gap: 14px;
}
.cookie-banner__title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 4px;
color: #1a1a18;
}
.cookie-banner__body {
font-size: 0.875rem;
line-height: 1.55;
color: #4a4a48;
margin: 0;
}
.cookie-banner__link {
color: #B8956A;
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-banner__link:hover {
color: #9a7c54;
}
.cookie-banner__actions {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.cookie-banner__btn {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 500;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
line-height: 1.2;
letter-spacing: 0.01em;
}
.cookie-banner__btn--refuse {
background: transparent;
color: #4a4a48;
border: 1px solid #d8d0c0;
}
.cookie-banner__btn--refuse:hover {
background: #f5f0e6;
border-color: #B8956A;
color: #1a1a18;
}
.cookie-banner__btn--accept {
background: #B8956A;
color: #fff;
border: 1px solid #B8956A;
}
.cookie-banner__btn--accept:hover {
background: #9a7c54;
border-color: #9a7c54;
}
@media (max-width: 600px) {
.cookie-banner {
left: 8px;
right: 8px;
bottom: 8px;
padding: 18px 20px;
}
.cookie-banner__actions {
flex-direction: column-reverse;
}
.cookie-banner__btn {
width: 100%;
padding: 12px;
}
}