/* ============================================
   La Conciergerie de Marie — styles
   Couleurs du logo (turquoise / corail / orange)
   ============================================ */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes form-pulse {
    0%, 100% {
        box-shadow: var(--shadow-lg), 0 0 12px 2px rgba(30, 153, 144, 0.15);
    }
    50% {
        box-shadow: var(--shadow-lg), 0 0 60px 14px rgba(30, 153, 144, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__form { animation: none !important; }
}

:root {
    --color-bg: #ffffff;
    --color-bg-alt: #f3f7f6;
    --color-ink: #2D3142;
    --color-ink-soft: #5a6172;
    --color-line: #e2eae8;

    --color-accent: #1E9990;          /* turquoise du logo */
    --color-accent-dark: #156B66;
    --color-accent-soft: #d6ebe9;

    --color-warm: #D9402A;            /* rouge corail du logo */
    --color-orange: #F39A2A;          /* orange du logo */

    --color-dark: #0E2A2C;            /* dark teal — header / hero */
    --color-dark-2: #0A1F21;

    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 10px rgba(20, 23, 28, 0.06);
    --shadow-md: 0 12px 40px rgba(20, 23, 28, 0.10);
    --shadow-lg: 0 24px 60px rgba(20, 23, 28, 0.18);
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --max-width: 1240px;
    --transition: 200ms ease;
}

/* ===== Skip link (accessibilité clavier / lecteurs d'écran) ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 12px;
    z-index: 1000;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top 200ms ease;
}
.skip-link:focus {
    top: 12px;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ===== Focus visible global (clavier uniquement, pas au clic) ===== */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.65;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ===== Layout ===== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 96px 0; }
.section--alt { background: var(--color-bg-alt); }

.section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}
.section__header p {
    color: var(--color-ink-soft);
    font-size: 1.05rem;
    margin-top: 16px;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 16px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.accent { color: var(--color-accent); font-style: italic; font-weight: 500; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    cursor: pointer;
    white-space: nowrap;
    border: none;
}
/* CTA "Estimez vos revenus" — turquoise du logo */
.btn--cta {
    background: var(--color-accent);
    color: #fff;
}
.btn--cta:hover {
    background: var(--color-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(30, 153, 144, 0.35);
}
/* Bouton "Me faire rappeler" — même turquoise que le CTA */
.btn--primary {
    background: var(--color-accent);
    color: #fff;
}
.btn--primary:hover {
    background: var(--color-accent-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(30, 153, 144, 0.40);
}
.btn--ghost {
    background: transparent;
    color: var(--color-ink);
    border: 1.5px solid var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: #fff; }
.btn--small { padding: 10px 20px; font-size: 0.88rem; }
.btn--large { padding: 18px 36px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ===== Header (sombre, comme Siméo) ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 92px;
    gap: 24px;
}
.header__inner > .logo { grid-column: 1; }
.header__inner > .nav { grid-column: 2; justify-self: center; }
.header__inner > .header__actions { grid-column: 3; justify-self: end; }
.header__inner > .nav-toggle { grid-column: 3; justify-self: end; }

/* "Estimez vos revenus" dupliqué dans .nav uniquement visible sur mobile */
.nav__cta-mobile { display: none; }

/* Zone droite : badge + CTA */
.header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}


.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.logo img {
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.logo__brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1;
}
.logo__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.logo__tagline {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav a {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    position: relative;
    padding: 8px 0;
    letter-spacing: 0.005em;
    transition: color 220ms ease;
}
.nav a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a:hover {
    color: #fff;
}
.nav a:not(.btn):hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.nav .btn--cta,
.header__cta {
    color: #fff;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.nav .btn--cta { margin-left: 8px; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.nav-toggle span {
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform var(--transition), opacity var(--transition);
}

/* ===== Hero (dark, photo en background, formulaire dark à droite) ===== */
.hero {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    overflow: hidden;
    padding: 88px 0 96px;
}
.hero__bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(100deg,
            rgba(14, 42, 44, 0.82) 0%,
            rgba(14, 42, 44, 0.55) 35%,
            rgba(14, 42, 44, 0.40) 55%,
            rgba(14, 42, 44, 0.85) 100%
        ),
        url('assets/hero.jpg');
    background-size: cover;
    background-position: center 60%;
    z-index: 0;
}
/* Fallback gradient si pas de photo */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 80% 10%, rgba(30, 153, 144, 0.25), transparent 60%),
        radial-gradient(700px 400px at 0% 90%, rgba(243, 154, 42, 0.12), transparent 60%);
    z-index: 0;
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
}
.hero__badge-icon {
    width: 14px;
    height: 14px;
    color: var(--color-orange);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(243, 154, 42, 0.55));
}
.hero__badge strong {
    color: var(--color-accent);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.hero__content h1 {
    color: #fff;
    margin-bottom: 28px;
}
.hero__content h1 .accent {
    color: var(--color-accent);
    font-style: italic;
}

/* Mot dynamique qui tourne dans le H1 — turquoise avec contour blanc léger */
.hero__content h1 .dynamic-word {
    display: inline-block;
    min-width: 6ch;
    font-weight: 800;
    font-style: italic;
    color: var(--color-accent);
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke fill;
    letter-spacing: 0;
}
.dynamic-word.is-rotating {
    animation: word-rotate 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes word-rotate {
    0%   { opacity: 1; transform: translateY(0); }
    45%  { opacity: 0; transform: translateY(-16px); }
    55%  { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero__lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 36px;
    max-width: 520px;
}

/* +30 % avec info-bulle */
.hero__highlight-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.hero__info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(93, 212, 198, 0.55);
    border-radius: 50%;
    background: rgba(93, 212, 198, 0.08);
    color: rgba(93, 212, 198, 0.95);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    transform: translateY(-3px);
}
.hero__info:hover,
.hero__info:focus-visible {
    background: rgba(93, 212, 198, 0.2);
    border-color: rgba(93, 212, 198, 0.9);
    outline: none;
}
.hero__info-icon {
    pointer-events: none;
}
.hero__info-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    padding: 10px 14px;
    background: #0A1F21;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(93, 212, 198, 0.3);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    z-index: 10;
}
.hero__info-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0A1F21;
}
.hero__info:hover .hero__info-tip,
.hero__info:focus-visible .hero__info-tip,
.hero__info:focus .hero__info-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
    .hero__info-tip { max-width: 220px; left: 0; transform: translateX(-30%) translateY(4px); }
    .hero__info-tip::after { left: 30%; }
    .hero__info:hover .hero__info-tip,
    .hero__info:focus-visible .hero__info-tip,
    .hero__info:focus .hero__info-tip { transform: translateX(-30%) translateY(0); }
}
.hero__lead strong { color: var(--color-accent); font-weight: 600; }

.hero__lead strong.hero__highlight {
    display: inline-block;
    color: #5DD4C6;
    font-weight: 800;
    font-size: 1.12em;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(93, 212, 198, 0.35);
    font-variant-numeric: tabular-nums;
}

/* ===== Bande de prestations — marquee infini horizontal (style éditorial luxe) ===== */
.perks-strip {
    background: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 0;
    position: relative;
    overflow: hidden;
}
/* Dégradés latéraux : les items "émergent" du noir à gauche, "s'évanouissent" dans le noir à droite */
.perks-strip::before,
.perks-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}
.perks-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--color-dark) 0%, var(--color-dark) 20%, transparent 100%);
}
.perks-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--color-dark) 0%, var(--color-dark) 20%, transparent 100%);
}

/* Le ruban qui défile */
.perks-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: max-content;
    align-items: center;
    animation: perks-marquee 42s linear infinite;
}
.perks-strip:hover .perks-strip__list {
    animation-play-state: paused;
}
@keyframes perks-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .perks-strip__list { animation: none; }
}

/* Chaque item dans le ruban */
.perks-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 36px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}
/* Séparateur losange turquoise après chaque item */
.perks-strip__item::after {
    content: '◆';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    font-size: 7px;
    opacity: 0.55;
}

.perks-strip__icon {
    display: inline-flex;
    color: var(--color-accent);
    flex-shrink: 0;
}
.perks-strip__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.perks-strip__label strong {
    color: var(--color-accent);
    font-weight: 700;
    margin-right: 1px;
}
.perks-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}
.perks-strip__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.perks-strip__label strong {
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-right: 1px;
}

.hero__social {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    font-weight: 500;
    margin-bottom: 18px;
}

/* CTA téléphone subtil sous le bouton du formulaire */
.form-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: color var(--transition), background var(--transition);
}
.form-phone:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.form-phone svg {
    width: 13px;
    height: 13px;
    color: var(--color-accent);
    flex-shrink: 0;
}
.form-phone strong {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}
.hero__avatars {
    display: flex;
}
.hero__avatars img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent);
    margin-left: -10px;
    background: var(--color-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hero__avatars img:first-child {
    margin-left: 0;
    border-color: var(--color-accent);
}
.hero__avatars img:nth-child(2) { border-color: var(--color-orange); }
.hero__avatars img:nth-child(3) { border-color: var(--color-warm); }

/* Indicateur de scroll en bas du hero */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color var(--transition), transform var(--transition);
    z-index: 2;
}
.hero__scroll:hover {
    color: rgba(255, 255, 255, 0.95);
}
.hero__scroll svg {
    width: 22px;
    height: 22px;
    animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__scroll svg { animation: none; }
}

/* ===== Formulaire hero (dark) ===== */
.hero__form {
    background: rgba(10, 31, 33, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-lg);
    padding: 28px 28px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: form-pulse 3s ease-in-out infinite;
    color: #fff;
    width: 100%;
    max-width: 480px;
    justify-self: end;
    transition: border-color 400ms ease, box-shadow 400ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Highlight quand l'utilisateur arrive depuis un CTA "Estimer mes revenus" */
.hero__form.is-targeted {
    animation: form-targeted 1.8s ease-out;
    border-color: var(--color-accent);
}
@keyframes form-targeted {
    0%   { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(30, 153, 144, 0.6); transform: scale(1); }
    20%  { box-shadow: var(--shadow-lg), 0 0 0 16px rgba(30, 153, 144, 0.25); transform: scale(1.015); }
    100% { box-shadow: var(--shadow-lg), 0 0 0 30px rgba(30, 153, 144, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__form.is-targeted { animation: none; }
}
/* Header du formulaire — dégradé turquoise (couleur de marque) */
.hero__form-header {
    position: relative;
    margin: -28px -28px 24px;
    padding: 26px 24px 22px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-align: center;
    background:
        linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 60%, #2BB3A8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 6px 20px -6px rgba(30, 153, 144, 0.5);
    overflow: hidden;
}
/* Léger reflet brillant en haut pour l'effet glass premium */
.hero__form-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent);
    pointer-events: none;
}
.hero__form h3 {
    position: relative;
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.hero__form-sub {
    position: relative;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 0.82rem;
    margin: 0;
    letter-spacing: 0.01em;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.form-row label { margin-bottom: 0; }

.hero__form label {
    display: block;
    margin-bottom: 14px;
}
.hero__form label span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hero__form label em {
    color: rgba(255, 255, 255, 0.45);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
}
.hero__form input {
    width: 100%;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #fff;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.hero__form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.hero__form input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 4px rgba(30, 153, 144, 0.18);
}

.hero__form .btn--primary {
    background: var(--color-accent);
    color: #fff;
    margin-top: 10px;
    border: none;
}
.hero__form .btn--primary:hover {
    background: var(--color-accent-dark);
    box-shadow: 0 10px 30px rgba(30, 153, 144, 0.40);
}

.form-trust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 22px -28px -28px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px 0 rgba(30, 153, 144, 0.15);
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}
.form-trust li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Textarea (champ message optionnel) */
.hero__form textarea {
    width: 100%;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: inherit;
    color: #fff;
    resize: vertical;
    min-height: 70px;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.hero__form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.hero__form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 4px rgba(30, 153, 144, 0.18);
}
.hero__form label em {
    color: rgba(255, 255, 255, 0.45);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Consentement RGPD */
.form-consent {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px !important;
    cursor: pointer;
}
.form-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--color-accent);
    cursor: pointer;
    flex-shrink: 0;
}
.form-consent > span {
    display: block !important;
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.45;
}
.form-consent__link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form-consent__link:hover { color: #5DD4C6; }

/* Message d'erreur inline */
.form-error {
    background: rgba(217, 64, 42, 0.12);
    border: 1px solid rgba(217, 64, 42, 0.4);
    border-radius: 10px;
    padding: 10px 14px;
    color: #FFB4A8;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.4;
}

.form-success {
    background: rgba(30, 153, 144, 0.18);
    color: #fff;
    padding: 20px;
    border-radius: var(--radius);
    text-align: center;
    font-size: 0.95rem;
    border: 1px solid var(--color-accent);
}

/* ===== Stats ===== */
.stats {
    background: var(--color-dark);
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.stats::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -160px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 153, 144, 0.16), transparent 65%);
    pointer-events: none;
}
.stats::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -140px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 154, 42, 0.08), transparent 65%);
    pointer-events: none;
}
.stats > .container { position: relative; z-index: 1; }

.stats__header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 36px;
}
.stats__header .eyebrow {
    color: var(--color-accent);
    margin-bottom: 10px;
}
.stats__header h2 {
    color: #fff;
    margin-bottom: 12px;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}
.stats__header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto;
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
    text-align: center;
}
.stat {
    padding: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stat__icon {
    color: var(--color-accent);
    margin-bottom: 12px;
    opacity: 0.9;
    width: 24px;
    height: 24px;
}
.stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 15%;
    height: 70%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stat__label {
    display: block;
    margin-top: 8px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Citation client — pill horizontal compact centré */
.stats__quote {
    margin: 28px auto 0;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.stats__quote-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.stats__quote-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    line-height: 1.4;
    font-style: italic;
    font-weight: 400;
    flex: 1;
    min-width: 0;
}
.stats__quote-text strong {
    color: var(--color-accent);
    font-weight: 600;
    font-style: normal;
}
.stats__quote-author {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    font-weight: 500;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Cards (services) ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.card {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}
.card__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--color-accent-soft);
    border-radius: 14px;
    font-size: 1.6rem;
    margin-bottom: 20px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* === Section crème (services) === */
.section--cream {
    background: #faf7f2;
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(30, 153, 144, 0.04), transparent 70%),
        #faf7f2;
    border-top: 1px solid #efe9df;
    border-bottom: 1px solid #efe9df;
}

/* === Services — Grille 3×2 (6 cards) === */
.stories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}
.story {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ece5d8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04), 0 8px 24px -14px rgba(14, 42, 44, 0.18);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.story:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04), 0 18px 36px -16px rgba(14, 42, 44, 0.28);
    border-color: rgba(30, 153, 144, 0.25);
}

/* Bloc média : image en haut, sans bordure interne */
.story__media { position: relative; }
.story__image-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-alt);
}
.story__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(14, 42, 44, 0.1));
    pointer-events: none;
}
.story__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.story:hover .story__image-wrap img { transform: scale(1.04); }
/* Focus le cadrage sur le bas de l'image (mains + laptop) */
.story__image-wrap--bottom img {
    object-position: center 78%;
}
.story__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(14, 42, 44, 0.18));
    pointer-events: none;
}
.story__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease;
    filter: saturate(0.94);
}
.story:hover .story__image-wrap img {
    transform: scale(1.03);
    filter: saturate(1);
}

/* Contenu (à l'intérieur de la card) */
.story__content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    padding: 14px 18px 16px;
}
.story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0;
}
.story__eyebrow--with-avatar {
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-ink-soft);
    align-items: flex-start;
    line-height: 1.45;
}
.story__eyebrow-text { flex: 1; }
.story__eyebrow--with-avatar strong { color: var(--color-accent); font-weight: 700; }
.story__avatar {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    overflow: hidden;
}
.story__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.25;
    letter-spacing: -0.018em;
    margin: 0;
}
.story__lead {
    color: var(--color-ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}
.story__lead em { color: var(--color-accent); font-style: italic; font-weight: 500; }
.story__lead strong { color: var(--color-ink); font-weight: 700; }

/* Stat inline ("+30%" dans le texte) */
.story__stat-inline {
    display: inline-block;
    font-weight: 800;
    color: var(--color-accent);
    font-size: 1.08em;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, transparent 60%, rgba(30, 153, 144, 0.18) 60%);
    padding: 0 4px;
}

/* Carte stat (service 02) */
.story__stat-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 10px 14px;
    background: var(--color-accent-soft);
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    align-self: flex-start;
}
.story__stat-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-accent-dark);
    line-height: 1;
    letter-spacing: -0.02em;
}
.story__stat-label {
    color: var(--color-ink);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Pastilles avec puce (service 01) */
.story__pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 6px;
    padding: 0;
    margin: auto 0 0;
}
.story__pills li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    background: #faf7f2;
    border: 1px solid #ece5d8;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--color-ink);
    transition: border-color var(--transition), background var(--transition);
}
.story__pills li:hover { background: #fff; }
.story__pills li:hover { border-color: var(--color-accent); }
.story__pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* Métriques (service 03) */
.story__metrics {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0;
    margin: auto 0 0;
}
.story__metrics li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 6px;
    background: #faf7f2;
    border: 1px solid #ece5d8;
    border-radius: 6px;
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}
.story__metrics li:hover { background: #fff; }
.story__metrics li:hover { border-color: var(--color-accent); }
.story__metrics strong {
    font-family: var(--font-display);
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.story__metrics span {
    color: var(--color-ink-soft);
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Checklist — version allégée (toutes les cards) */
.story__checklist {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.story__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.35;
}
.story__checklist li::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 1.5px;
    margin-top: 9px;
    background: var(--color-accent);
    border-radius: 1px;
}

/* === Mini garantie en bas de section "Notre expertise" === */
.services-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 56px auto 0;
    padding: 12px 22px;
    background: rgba(30, 153, 144, 0.08);
    border: 1px solid rgba(30, 153, 144, 0.22);
    border-radius: 999px;
    color: var(--color-ink);
    font-size: 0.9rem;
    font-weight: 500;
    width: fit-content;
}
.services-tag svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
    flex-shrink: 0;
}
.services-tag strong {
    color: var(--color-accent-dark);
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Réduction du padding-bottom de la section services pour enchainer */
.section--cream { padding-bottom: 36px; }

/* === Vague statique cream → dark teal === */
.static-wave {
    background: var(--color-dark);
    height: 90px;
    line-height: 0;
    margin-top: -1px;
}
.static-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 700px) {
    .static-wave { height: 56px; }
}

/* ===== Notre offre — carte compacte avec silhouette villa décorative ===== */
.offer {
    background: var(--color-dark);
    color: #fff;
    padding: 56px 0 64px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* La carte centrale */
.offer__card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 52px 52px 44px;
    background:
        radial-gradient(600px 400px at 50% 38%, rgba(30, 153, 144, 0.10), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    text-align: center;
    overflow: hidden;
    box-shadow:
        0 30px 60px -30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Corner brackets en haut-gauche & bas-droite (cadre éditorial luxe) */
.offer__card::before,
.offer__card::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-accent);
    opacity: 0.45;
    pointer-events: none;
    z-index: 2;
}
.offer__card::before {
    top: 16px;
    left: 16px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 8px;
}
.offer__card::after {
    bottom: 16px;
    right: 16px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 8px;
}


.offer__header { margin-bottom: 32px; }
.offer__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.offer__title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
}
.offer__title .dynamic-word {
    color: var(--color-accent);
    font-style: italic;
    font-weight: 500;
    /* Largeur réservée pour le mot le plus long → évite le décalage de la phrase à chaque rotation */
    display: inline-block;
    min-width: 5.5ch;
    text-align: left;
}

/* Bloc prix — adapté pour la carte */
.offer__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.offer__price-from {
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.offer__price-display {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    line-height: 0.85;
}
.offer__price-num {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 9vw, 5.6rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 32px rgba(30, 153, 144, 0.2);
}
.offer__price-pct {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.01em;
    padding-bottom: clamp(6px, 1vw, 10px);
}
.offer__price-meta {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Divider "Tout est inclus" avec petits diamants turquoise */
.offer__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    color: var(--color-accent);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-family: var(--font-display);
}
.offer__divider > span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.offer__divider > span::before,
.offer__divider > span::after {
    content: '◆';
    color: var(--color-accent);
    font-size: 7px;
    opacity: 0.7;
}
.offer__divider::before,
.offer__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* Liste des inclusions */
.offer__list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 32px;
    text-align: left;
}
.offer__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
    line-height: 1.4;
}
.offer__list li::before {
    content: '✓';
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Ligne "0€ · 0 · 0" (flex wrap, items insécables) */
.offer__zeros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0 0 26px;
    letter-spacing: 0.01em;
}
.offer__zeros-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.offer__zeros strong {
    font-family: var(--font-display);
    color: #fff;
    font-weight: 800;
}
.offer__zeros-sep {
    color: rgba(255, 255, 255, 0.25);
}

/* Sur mobile : on stack en colonne, on masque les séparateurs */
@media (max-width: 540px) {
    .offer__zeros {
        flex-direction: column;
        gap: 4px;
    }
    .offer__zeros-sep { display: none; }
}

/* CTA */
.offer__cta {
    background: var(--color-accent);
    color: #fff;
    padding: 16px 40px;
    font-weight: 800;
    box-shadow: 0 14px 36px -10px rgba(30, 153, 144, 0.5);
}
.offer__cta:hover {
    background: var(--color-accent-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 48px -12px rgba(30, 153, 144, 0.6);
}

@media (max-width: 700px) {
    .offer { padding: 40px 0 48px; }
    .offer__card { padding: 36px 22px 32px; border-radius: 14px; }
    .offer__header { margin-bottom: 24px; }
    .offer__price { margin-bottom: 24px; }
    .offer__price-num { font-size: 3.8rem; }
    .offer__price-pct { font-size: 1.1rem; padding-bottom: 6px; }
    .offer__divider { margin-bottom: 20px; gap: 12px; }
    .offer__list { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; }
    .offer__list li { font-size: 0.85rem; }
    .offer__zeros { font-size: 0.8rem; margin-bottom: 22px; }
    .offer__zeros-sep { margin: 0 4px; }
}

.offer__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.offer__title {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.offer__title .dynamic-word {
    color: var(--color-accent);
    font-style: italic;
    font-weight: 500;
    /* Largeur réservée pour le mot le plus long → évite le décalage de la phrase à chaque rotation */
    display: inline-block;
    min-width: 5.5ch;
    text-align: left;
}

/* Bloc prix — aligné à gauche dans la colonne */
.offer__price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 24px 0 26px;
}
.offer__price-from {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.offer__price-num {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.offer__price-pct {
    color: var(--color-accent);
    font-size: 0.45em;
    margin-left: 6px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.offer__price-meta {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 4px;
}

/* Eyebrow "Tout est inclus" */
.offer__included-label {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Pills inline avec checkmarks */
.offer__pills {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 760px;
}
.offer__pills li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 11px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 0.83rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
}
.offer__pills li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Ligne "0 € · 0 € · 0 €" */
.offer__zeros-line {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0 0 22px;
    letter-spacing: 0.01em;
}
.offer__zeros-line strong {
    font-family: var(--font-display);
    color: var(--color-accent);
    font-weight: 800;
    margin-right: 2px;
}
.offer__zeros-line span {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 6px;
}

/* CTA */
.offer__cta {
    background: var(--color-accent);
    color: #fff;
    padding: 14px 32px;
    font-weight: 800;
    box-shadow: 0 12px 32px -10px rgba(30, 153, 144, 0.5);
}
.offer__cta:hover {
    background: var(--color-accent-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -12px rgba(30, 153, 144, 0.6);
}

@media (max-width: 980px) {
    .offer__split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .offer__visual {
        aspect-ratio: 16 / 10;
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }
}
@media (max-width: 700px) {
    .offer { padding: 48px 0 60px; }
    .offer__price-block { margin: 20px 0 22px; }
    .offer__pills { gap: 6px; margin-bottom: 22px; }
    .offer__pills li { font-size: 0.78rem; padding: 6px 12px 6px 10px; }
    .offer__zeros-line { font-size: 0.85rem; }
    .offer__zeros-line span { margin: 0 4px; }
    .offer__price-num { font-size: 2.6rem; }
}

/* ===== Steps ===== */
/* ===== Process — tabs interactifs avec panel détaillé ===== */
.process {
    max-width: 980px;
    margin: 40px auto 0;
}

/* Tabs en haut */
.process__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 6px;
    position: relative;
}
.process__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--color-ink-soft);
    transition:
        color 350ms ease,
        background 350ms ease;
    font-family: inherit;
    position: relative;
    z-index: 1;
}
.process__tab:hover { color: var(--color-ink); }
.process__tab.is-active {
    background: #fff;
    color: var(--color-accent-dark);
    box-shadow: 0 4px 12px -4px rgba(20, 23, 28, 0.12);
}
.process__tab-num {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    opacity: 0.6;
    transition: opacity 350ms ease, color 350ms ease;
}
.process__tab.is-active .process__tab-num {
    color: var(--color-accent);
    opacity: 1;
}
.process__tab-label {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Barre de progression sous les tabs */
.process__progress {
    height: 2px;
    background: rgba(20, 23, 28, 0.08);
    border-radius: 2px;
    margin: 20px 14px 36px;
    overflow: hidden;
}
.process__progress-fill {
    height: 100%;
    width: 25%;
    background: linear-gradient(to right, var(--color-accent), #2BB3A8);
    border-radius: 2px;
    transform-origin: left;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Container des panels — empilés en absolu, un seul visible */
.process__panels {
    position: relative;
    min-height: 320px;
}
.process__panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: center;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    box-shadow: 0 14px 40px -16px rgba(20, 23, 28, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 500ms;
    pointer-events: none;
}
.process__panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    position: relative; /* le panel actif occupe le flux pour que le container ait la bonne hauteur */
}

/* Visual à gauche : gros numéro + icône */
.process__panel-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    max-width: 220px;
    background:
        radial-gradient(circle at 50% 50%, rgba(30, 153, 144, 0.12), transparent 70%),
        linear-gradient(135deg, rgba(30, 153, 144, 0.06) 0%, rgba(30, 153, 144, 0.02) 100%);
    border-radius: 16px;
    border: 1px solid rgba(30, 153, 144, 0.15);
}
.process__panel-bignum {
    font-family: var(--font-display);
    font-size: clamp(5rem, 12vw, 7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(30, 153, 144, 0.35);
    text-stroke: 1.5px rgba(30, 153, 144, 0.35);
    user-select: none;
}
.process__panel-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    bottom: 26px;
    right: 26px;
    color: var(--color-accent);
}

/* Body droite : texte */
.process__panel-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.process__panel-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.process__panel-title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--color-ink);
    margin: 4px 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.process__panel-desc {
    color: var(--color-ink-soft);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0 0 12px;
}
.process__panel-bullets {
    list-style: none;
    margin: 4px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.process__panel-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-ink);
    font-size: 0.9rem;
    line-height: 1.4;
}
.process__panel-bullets li::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat,
        var(--color-accent);
}

/* Responsive */
@media (max-width: 760px) {
    .process { margin-top: 24px; }
    .process__tabs { padding: 4px; }
    .process__tab { padding: 10px 6px; }
    .process__tab-num { font-size: 0.62rem; }
    .process__tab-label { font-size: 0.78rem; }
    .process__progress { margin: 14px 10px 24px; }
    .process__panel {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 22px;
    }
    .process__panel-visual { max-width: 160px; margin: 0 auto; }
    .process__panel-icon { width: 36px; height: 36px; bottom: 18px; right: 18px; }
    .process__panel-bignum { font-size: 4.5rem; }
    .process__panel-desc { font-size: 0.92rem; }
}

/* ===== Timeline scroll-driven (Comment ça marche) — ancien composant, conservé ===== */
.timeline {
    position: relative;
    max-width: 980px;
    margin: 48px auto 0;
    padding: 8px 0;
}

/* Track gris (en arrière-plan) + fill turquoise (animé au scroll) */
.timeline__track {
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(20, 23, 28, 0.08);
    border-radius: 2px;
    overflow: hidden;
    z-index: 0;
}
.timeline__progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(to bottom, var(--color-accent), #2BB3A8);
    border-radius: 2px;
    transition: height 120ms linear;
    box-shadow: 0 0 16px rgba(30, 153, 144, 0.4);
}

/* Liste des étapes — layout 3 colonnes zigzag */
.timeline__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 56px;
    position: relative;
    z-index: 1;
}
.timeline__step {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    column-gap: 36px;
    align-items: center;
}
/* Marker toujours au milieu */
.timeline__step .timeline__marker {
    grid-column: 2;
    justify-self: center;
}
/* Steps impairs (1, 3) : card à gauche, texte aligné à droite */
.timeline__step:nth-child(odd) .timeline__card {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
}
.timeline__step:nth-child(odd) .timeline__details {
    align-items: flex-end;
}
.timeline__step:nth-child(odd) .timeline__details li {
    flex-direction: row-reverse;
}
/* Steps pairs (2, 4) : card à droite, texte aligné à gauche */
.timeline__step:nth-child(even) .timeline__card {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
}

/* Marker circulaire avec numéro */
.timeline__marker {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(20, 23, 28, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 500ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 500ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 500ms ease;
}
.timeline__icon,
.timeline__check {
    position: absolute;
    transition: opacity 350ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), color 400ms ease;
}
.timeline__icon {
    width: 24px;
    height: 24px;
    color: var(--color-ink-soft);
}
.timeline__check {
    width: 22px;
    height: 22px;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
}

/* État "active" : la step est passée sous le centre du viewport */
.timeline__step.is-active .timeline__marker {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 8px rgba(30, 153, 144, 0.14), 0 8px 24px -8px rgba(30, 153, 144, 0.5);
    transform: scale(1.04);
}
.timeline__step.is-active .timeline__icon {
    color: #fff;
}
/* État "completed" : la step a été validée (la barre l'a dépassée) */
.timeline__step.is-completed .timeline__icon {
    opacity: 0;
    transform: scale(0.6);
}
.timeline__step.is-completed .timeline__check {
    opacity: 1;
    transform: scale(1);
}

/* Card de chaque étape */
.timeline__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 28px 26px 22px;
    box-shadow: 0 10px 30px -16px rgba(20, 23, 28, 0.12);
    transition:
        border-color 400ms ease,
        box-shadow 400ms ease,
        transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Connecteur horizontal vers le marker central */
.timeline__card::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 36px;
    height: 1px;
    background: rgba(20, 23, 28, 0.1);
    transition: background 400ms ease;
}
.timeline__step:nth-child(odd) .timeline__card::after {
    right: -36px;
    background: linear-gradient(to right, rgba(20, 23, 28, 0.1), transparent);
}
.timeline__step:nth-child(even) .timeline__card::after {
    left: -36px;
    background: linear-gradient(to left, rgba(20, 23, 28, 0.1), transparent);
}
.timeline__step.is-active .timeline__card {
    border-color: rgba(30, 153, 144, 0.35);
    box-shadow: 0 16px 40px -16px rgba(30, 153, 144, 0.25);
    transform: translateY(-2px);
}
.timeline__step.is-active:nth-child(odd) .timeline__card::after {
    background: linear-gradient(to right, var(--color-accent), transparent);
}
.timeline__step.is-active:nth-child(even) .timeline__card::after {
    background: linear-gradient(to left, var(--color-accent), transparent);
}

/* Liste de détails en bullets */
.timeline__details {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.timeline__details li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-ink-soft);
    font-size: 0.85rem;
    line-height: 1.4;
}
.timeline__details li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.7;
}

/* Bloc texte */
.timeline__label {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 6px;
    transition: color 400ms ease;
}
.timeline__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
    line-height: 1.25;
    transition: color 400ms ease;
}
.timeline__title-aside {
    color: var(--color-accent);
    font-weight: 500;
    font-style: italic;
    font-size: 0.85em;
    letter-spacing: 0;
}
.timeline__step.is-active .timeline__title {
    color: var(--color-accent-dark);
}
.timeline__desc {
    color: var(--color-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Destination finale (CTA au bout de la timeline) ===== */
.timeline__destination {
    position: relative;
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.timeline__destination-card {
    max-width: 480px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 28px 32px 28px;
    box-shadow: 0 18px 48px -20px rgba(20, 23, 28, 0.18);
}
.timeline__destination-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.timeline__destination-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.timeline__destination-desc {
    color: var(--color-ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 22px;
}
.timeline__destination-cta {
    padding: 14px 32px;
    font-weight: 800;
}

@media (max-width: 860px) {
    /* Sur tablette/mobile : on stack tout à gauche du fil conducteur */
    .timeline { max-width: 580px; }
    .timeline__track {
        left: 22px;
        transform: none;
        top: 28px;
        bottom: 28px;
    }
    .timeline__steps { gap: 36px; }
    .timeline__step {
        grid-template-columns: 44px 1fr;
        column-gap: 20px;
        align-items: flex-start;
    }
    .timeline__step .timeline__marker {
        grid-column: 1;
        justify-self: center;
        width: 44px;
        height: 44px;
    }
    .timeline__icon { width: 20px; height: 20px; }
    .timeline__check { width: 18px; height: 18px; }
    /* Cards toutes à droite, texte aligné à gauche */
    .timeline__step:nth-child(odd) .timeline__card,
    .timeline__step:nth-child(even) .timeline__card {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }
    .timeline__step:nth-child(odd) .timeline__details,
    .timeline__step:nth-child(even) .timeline__details {
        align-items: flex-start;
    }
    .timeline__step:nth-child(odd) .timeline__details li {
        flex-direction: row;
    }
    /* Connecteur toujours à gauche */
    .timeline__step:nth-child(odd) .timeline__card::after,
    .timeline__step:nth-child(even) .timeline__card::after {
        left: -20px;
        right: auto;
        width: 20px;
        background: linear-gradient(to left, rgba(20, 23, 28, 0.1), transparent);
    }
    .timeline__step.is-active:nth-child(odd) .timeline__card::after,
    .timeline__step.is-active:nth-child(even) .timeline__card::after {
        background: linear-gradient(to left, var(--color-accent), transparent);
    }
    .timeline__title { font-size: 1.15rem; }
    .timeline__desc { font-size: 0.9rem; }
    .timeline__details li { font-size: 0.82rem; }
    .timeline__card { padding: 20px 22px 18px; }
}

/* ===== Zone ===== */
.zone__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.zone__card {
    background: #fff;
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.zone__card:nth-child(2) { border-top-color: var(--color-warm); }
.zone__card:nth-child(3) { border-top-color: var(--color-orange); }
.zone__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.zone__card h3 { margin-bottom: 12px; color: var(--color-ink); }
.zone__card p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* ===== Testimonials ===== */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.testimonial {
    background: #fff;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
}
.testimonial__stars {
    color: var(--color-orange);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.testimonial p {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-ink);
    margin-bottom: 16px;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.testimonial footer {
    color: var(--color-ink-soft);
    font-size: 0.88rem;
    font-weight: 500;
}

/* ===== FAQ ===== */
.faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq__item {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
}
.faq__item:hover { border-color: var(--color-accent); }
.faq__item[open] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--color-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '+';
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--color-accent);
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.faq__item[open] summary::after {
    content: '−';
}
.faq__body {
    padding: 0 26px 24px;
}
.faq__body p {
    color: var(--color-ink-soft);
    font-size: 0.97rem;
    line-height: 1.65;
}

/* ===== CTA final ===== */
.cta-final {
    background: var(--color-dark);
    color: #fff;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}
.cta-final::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    opacity: 0.25;
}
.cta-final::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-orange) 0%, transparent 70%);
    opacity: 0.18;
}
.cta-final__inner {
    text-align: center;
    position: relative;
    z-index: 1;
}
.cta-final h2 { color: #fff; margin-bottom: 16px; }
.cta-final p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

/* ===== Footer ===== */
.footer {
    background: var(--color-dark-2);
    color: rgba(255, 255, 255, 0.75);
    padding: 44px 0 32px;
    font-size: 0.92rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__logo {
    height: 88px;
    width: auto;
    margin-bottom: 16px;
}
.footer h4 {
    color: #fff;
    margin-bottom: 16px;
}
.footer ul li { margin-bottom: 10px; }
.footer a { color: rgba(255, 255, 255, 0.75); }
.footer a:hover { color: var(--color-accent); }
.footer__brand p { margin-top: 4px; max-width: 280px; }
.footer__bottom {
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Barre d'action flottante (mobile uniquement) ===== */
.mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    background: rgba(10, 31, 33, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    gap: 8px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-bar.is-hidden {
    transform: translateY(calc(100% + 20px));
    pointer-events: none;
}
.mobile-bar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition), background var(--transition);
}
.mobile-bar__btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.mobile-bar__btn--call {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.mobile-bar__btn--call:active { background: rgba(255, 255, 255, 0.16); }
.mobile-bar__btn--quote {
    background: var(--color-accent);
    box-shadow: 0 4px 14px rgba(30, 153, 144, 0.35);
}
.mobile-bar__btn--quote:active {
    background: var(--color-accent-dark);
    transform: scale(0.98);
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .section { padding: 72px 0; }
    .hero { padding: 64px 0 80px; }
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero__form { justify-self: center; max-width: 460px; }

    /* Header repasse en flex pour mobile : logo | hamburger */
    .header__inner {
        display: flex;
        justify-content: space-between;
        gap: 16px;
    }
    .header__actions { display: none; }

    /* Barre flottante mobile activée */
    .mobile-bar { display: flex; }
    body { padding-bottom: 60px; }

    /* Masquer l'indicateur de scroll (la barre flottante prend le relais) */
    .hero__scroll { display: none; }

    /* Bande perks : compacte, wrap centré sur mobile */
    .perks-strip { padding: 12px 0; }
    .perks-strip__list { gap: 6px 18px; }
    .perks-strip__item { font-size: 0.76rem; gap: 6px; }
    .perks-strip__icon svg { width: 14px; height: 14px; }
    .nav__cta-mobile { display: inline-flex; }
    .cards,
    .testimonials,
    .zone__grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Services : 2x2 sur tablette */
    .stories {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 28px;
    }
    .story__image-wrap { aspect-ratio: 5 / 4; }
    .steps {
        grid-template-columns: 1fr 1fr;
    }
    .stats { padding: 64px 0; }
    .stats__header { margin-bottom: 40px; }
    .stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
    }
    .stat:not(:last-child)::after { display: none; }
    /* Restaure une séparation verticale pour les colonnes 1<->2 en grille 2×2 */
    .stat:nth-child(odd)::after {
        content: '';
        display: block;
        position: absolute;
        right: -10px;
        top: 15%;
        height: 70%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14), transparent);
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .nav {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        margin: 0 !important;
        background: var(--color-dark) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start;
        align-items: stretch;
        padding: 100px 28px 32px;
        gap: 4px;
        transform: translate3d(100%, 0, 0);
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease, visibility 200ms ease;
        box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.5);
        z-index: 9999;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .nav.is-open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .nav a {
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1.05rem;
    }
    .nav a:not(.btn)::after { display: none; }
    .nav .btn--cta { margin-top: 16px; margin-left: 0; align-self: flex-start; border-bottom: none; }

    /* Backdrop derrière le drawer */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        transition: opacity 280ms ease, visibility 280ms ease;
        z-index: 199;
    }
    .nav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Toggle reste cliquable au-dessus du drawer */
    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 201;
    }
    .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 600px) {
    .container { padding: 0 18px; }
    .section { padding: 56px 0; }
    .hero { padding: 48px 0 64px; }
    /* Stories sur mobile : 1 colonne */
    .stories { grid-template-columns: 1fr; gap: 22px; max-width: 480px; margin-left: auto; margin-right: auto; }
    .story__image-wrap { aspect-ratio: 16 / 10; }
    .cards,
    .testimonials,
    .zone__grid,
    .steps,
    .footer__grid {
        grid-template-columns: 1fr;
    }

    /* Stats compact sur mobile */
    .stats { padding: 48px 0; }
    .stats__header { margin-bottom: 32px; }
    .stats__header h2 { font-size: 1.5rem; }
    .stats__header p { font-size: 0.92rem; }
    .stats__grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
    .stat__icon { width: 22px; height: 22px; margin-bottom: 12px; }
    .stat__value { font-size: 1.6rem; }
    .stat__label { font-size: 0.66rem; margin-top: 8px; }
    .stat:nth-child(odd)::after { right: -6px; }

    .stats__quote {
        margin-top: 22px;
        padding: 6px 14px 6px 6px;
        gap: 8px;
        border-radius: 22px;
        max-width: 100%;
    }
    .stats__quote-avatar { width: 28px; height: 28px; }
    .stats__quote-text { font-size: 0.72rem; line-height: 1.4; }
    .stats__quote-author {
        font-size: 0.62rem;
        padding-left: 8px;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Hero plus serré sur mobile */
    .hero__form { padding: 22px 18px; max-width: 100%; }
    .hero__form-header { margin: -22px -18px 18px; padding: 22px 16px 18px; }
    .hero__form h3 { font-size: 1.2rem; }
    .hero__lead { font-size: 1rem; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-trust { font-size: 0.7rem; gap: 6px 10px; margin: 18px -18px -22px; padding: 14px 16px; justify-content: center; }

    /* Header logo plus discret */
    .header__inner { height: 80px; gap: 16px; }
    .logo { gap: 10px; }
    .logo img { height: 40px; }
    .logo__name { font-size: 0.88rem; }
    .logo__tagline { display: none; }
    .nav { inset: 80px 0 0 0; }

    /* Section header titres recadrés */
    .section__header { margin-bottom: 40px; }
    .cta-final { padding: 64px 0; }
    .cta-final p { font-size: 1rem; }

    /* Footer plus aéré */
    .footer { padding: 32px 0 24px; }
    .footer__grid { gap: 28px; padding-bottom: 32px; }
    .footer__bottom { font-size: 0.78rem; }
}

/* =============================================
   PROMISE — "Ce que les autres ne font pas"
   Sceau Top 1 + 4 atouts uniques + comparatif Vous vs Nous
   ============================================= */
.promise {
    position: relative;
    /* Padding réduit car la section au-dessus (timeline) est déjà cream :
       le séparateur design fait office de transition visuelle */
    padding-top: 16px;
}
@media (max-width: 640px) {
    .promise { padding-top: 10px; }
}
/* Séparateur léger en bas de la section → transition vers le dirigeant */
.promise::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-line) 25%, var(--color-accent) 50%, var(--color-line) 75%, transparent 100%);
    opacity: 0.7;
}

/* ===== Séparateur design en haut de la section ===== */
.promise__divider-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 320px;
    margin: 0 auto 36px;
}
.promise__divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(20, 23, 28, 0.18) 100%);
}
.promise__divider-line:last-child {
    background: linear-gradient(90deg, rgba(20, 23, 28, 0.18) 0%, transparent 100%);
}
.promise__divider-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent) 0%, #2BB3A8 100%);
    color: #fff;
    box-shadow:
        0 6px 16px -6px rgba(30, 153, 144, 0.5),
        0 0 0 4px rgba(30, 153, 144, 0.08);
    flex-shrink: 0;
}
.promise__divider-mark svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .promise__divider-top {
        margin-bottom: 28px;
        gap: 14px;
        max-width: 260px;
    }
    .promise__divider-mark {
        width: 30px;
        height: 30px;
    }
    .promise__divider-mark svg { width: 15px; height: 15px; }
}

/* ===== Atouts uniques (différenciateurs concurrentiels) ===== */
.promise__edges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto 48px;
}
.promise__edge {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 28px 24px 24px;
    box-shadow: 0 14px 36px -22px rgba(20, 23, 28, 0.14);
    transition:
        transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 400ms ease,
        border-color 400ms ease;
}
.promise__edge:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 153, 144, 0.4);
    box-shadow: 0 22px 50px -22px rgba(20, 23, 28, 0.22);
}
/* Liseré accent en haut de chaque card */
.promise__edge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, #2BB3A8 100%);
    border-radius: 0 0 6px 6px;
}
.promise__edge-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(30, 153, 144, 0.1);
    color: var(--color-accent);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.promise__edge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #2BB3A8 100%);
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 8px 20px -8px rgba(30, 153, 144, 0.45);
}
.promise__edge-icon svg {
    width: 22px;
    height: 22px;
}
.promise__edge h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.promise__edge p {
    font-size: 0.89rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
    margin: 0;
}
.promise__edge strong {
    color: var(--color-ink);
    font-weight: 700;
}
.promise__edge em {
    display: inline-block;
    margin-top: 6px;
    font-style: italic;
    color: var(--color-accent);
    font-weight: 500;
}

/* ===== Intro du comparatif ===== */
.promise__split-intro {
    text-align: center;
    margin: 0 auto 24px;
    max-width: 600px;
}
.promise__split-intro span {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(20, 23, 28, 0.04);
    border: 1px dashed var(--color-line);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--color-ink-soft);
}

/* ===== Comparatif Vous vs Nous ===== */
.promise__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
    align-items: stretch;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
}

.promise__col {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 18px;
    padding: 28px 28px 32px;
    box-shadow: 0 22px 50px -30px rgba(20, 23, 28, 0.16);
    display: flex;
    flex-direction: column;
}

/* En-tête de chaque colonne : tag + count */
.promise__col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px dashed var(--color-line);
}
.promise__col-tag {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
.promise__col-tag--accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #2BB3A8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.promise__col-count {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

/* === Colonne VOUS — minimal, aéré === */
.promise__you-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    justify-content: center;
}
.promise__you-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.promise__you-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(30, 153, 144, 0.25);
}
.promise__you-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.005em;
    line-height: 1.35;
    margin-bottom: 2px;
}
.promise__you-list small {
    font-size: 0.86rem;
    color: var(--color-ink-soft);
    font-weight: 400;
}

/* === Séparateur vertical "vs" === */
.promise__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 60px;
}
.promise__divider::before,
.promise__divider::after {
    content: '';
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg, transparent 0%, var(--color-line) 25%, var(--color-line) 75%, transparent 100%);
}
.promise__divider-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: var(--color-ink);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 10px 24px -10px rgba(20, 23, 28, 0.3);
    margin: 10px 0;
}

/* === Colonne NOUS — checklist alignée === */
.promise__us-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 14px 22px;
}
.promise__us-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--color-ink);
}
.promise__us-list svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent) 0%, #2BB3A8 100%);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 3px 8px -2px rgba(30, 153, 144, 0.4);
}

/* === Responsive === */
@media (max-width: 1080px) {
    .promise__edges {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        max-width: 720px;
    }
}

@media (max-width: 900px) {
    .promise__split {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .promise__divider {
        flex-direction: row;
        min-height: 40px;
        padding: 0 20px;
    }
    .promise__divider::before,
    .promise__divider::after {
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--color-line) 25%, var(--color-line) 75%, transparent 100%);
    }
}

@media (max-width: 640px) {
    .promise__edges {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 14px;
        margin-bottom: 36px;
    }
    .promise__edge { padding: 22px 20px 20px; }
    .promise__edge-icon { width: 40px; height: 40px; }
    .promise__edge-icon svg { width: 20px; height: 20px; }
    .promise__edge h3 { font-size: 1rem; }
    .promise__edge p { font-size: 0.88rem; }

    .promise__split-intro span { font-size: 0.8rem; padding: 7px 14px; }

    .promise__col {
        padding: 22px 22px 26px;
        border-radius: 14px;
    }
    .promise__col-tag { font-size: 1.4rem; }
    .promise__col-count { font-size: 0.64rem; letter-spacing: 0.1em; }
    .promise__us-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .promise__us-list li { font-size: 0.9rem; min-height: auto; }
    .promise__you-list { gap: 18px; }
    .promise__you-list strong { font-size: 0.98rem; }
    .promise__you-list small { font-size: 0.82rem; }
}

/* =============================================
   FOUNDER — Section "Le dirigeant"
   Fond sombre sobre, motifs subtils, sans gimmick
   ============================================= */
.founder {
    position: relative;
    background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    padding-top: 76px;
    padding-bottom: 52px;
}
/* Lignes topographiques très discrètes */
.founder__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.founder__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ===== Photo d'ouverture éditoriale (en tête du contenu) ===== */
.founder__cover {
    position: relative;
    margin: 0 0 28px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 5 / 2;
    box-shadow:
        0 16px 36px -18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}
.founder__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.founder__cover:hover img {
    transform: scale(1.025);
}
/* Voile dégradé en bas, juste pour la lisibilité de l'étiquette */
.founder__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 31, 33, 0.65) 100%);
    pointer-events: none;
}
/* Étiquette discrète bas-droit, format pill avec point turquoise */
.founder__cover-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: rgba(14, 42, 44, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
}
.founder__cover-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(30, 153, 144, 0.25);
    flex-shrink: 0;
}
/* Un seul halo turquoise très doux, pour la profondeur */
.founder::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -180px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 153, 144, 0.14) 0%, transparent 65%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}
.founder__container {
    position: relative;
    z-index: 1;
}

/* ===== Override couleurs section header pour fond sombre ===== */
.founder .section__header h2 { color: #fff; }
.founder .section__header p { color: rgba(255, 255, 255, 0.72); }
.founder .section__header .accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5fd4c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Grille 2 colonnes (photo compacte) ===== */
.founder__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* ===== Portrait — carré compact ===== */
.founder__portrait {
    margin: 0;
    position: relative;
    max-width: 260px;
}
.founder__portrait-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
        0 20px 50px -24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}
.founder__portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

/* Caption sous photo */
.founder__caption {
    margin-top: 18px;
    line-height: 1.4;
}
.founder__caption-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -0.005em;
}
.founder__caption-role {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
}

/* Contact direct */
.founder__contact {
    list-style: none;
    padding: 14px 0 0;
    margin: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.founder__contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 250ms ease;
    word-break: break-all;
}
.founder__contact a:hover {
    color: var(--color-accent);
}
.founder__contact svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ===== Texte ===== */
.founder__content {
    max-width: 620px;
}
.founder__lead {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.45rem);
    line-height: 1.4;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0 0 28px;
}
.founder__lead em {
    color: var(--color-accent);
    font-style: italic;
    font-weight: 500;
}
.founder__body {
    margin: 0 0 30px;
}
.founder__body p {
    font-size: 1rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.76);
    margin: 0 0 14px;
}
.founder__body p:last-child { margin-bottom: 0; }
.founder__body strong {
    color: #fff;
    font-weight: 600;
}

/* ===== Carte de confiance (slogan + proof + CTA) ===== */
.founder__trust {
    position: relative;
    margin: 4px 0 32px;
    padding: 32px 32px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    text-align: center;
    overflow: hidden;
}
/* Liseré accent en haut */
.founder__trust::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
    border-radius: 0 0 6px 6px;
}
.founder__trust-slogan {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.3vw, 1.65rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.015em;
    margin: 0 0 22px;
}
.founder__trust-proof {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.founder__trust-stars {
    display: inline-flex;
    gap: 4px;
    color: var(--color-orange);
}
.founder__trust-stars svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 6px rgba(243, 154, 42, 0.35));
}
.founder__trust-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.founder__trust-avatars {
    display: flex;
    flex-shrink: 0;
}
.founder__trust-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent);
    margin-left: -10px;
    background: var(--color-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.founder__trust-avatars img:first-child { margin-left: 0; }
.founder__trust-avatars img:nth-child(2) { border-color: var(--color-orange); }
.founder__trust-avatars img:nth-child(3) { border-color: var(--color-warm); }
.founder__trust-count {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}
.founder__trust-count strong {
    color: #fff;
    font-weight: 700;
}
.founder__trust-cta {
    display: inline-flex;
    box-shadow: 0 14px 36px -16px rgba(30, 153, 144, 0.55);
}

/* ===== Points (4 items, centrés sous la carte) ===== */
.founder__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 20px;
}
.founder__points li {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.74);
    padding-right: 20px;
}
.founder__points li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.8;
}

/* ===== Responsive — Tablet ===== */
@media (max-width: 980px) {
    .founder { padding-top: 60px; padding-bottom: 44px; }
    .founder__grid {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 560px;
    }
    .founder__portrait {
        max-width: 220px;
        margin: 0 auto;
    }
    .founder__caption { text-align: center; }
    .founder__contact { align-items: center; }
    .founder__cover { aspect-ratio: 16 / 9; margin-bottom: 24px; }
}

/* ===== Responsive — Mobile ===== */
@media (max-width: 640px) {
    .founder { padding-top: 52px; padding-bottom: 36px; }
    .founder__grid { gap: 28px; }
    .founder__portrait { max-width: 200px; }
    .founder__portrait-frame { border-radius: 14px; }

    .founder__cover {
        aspect-ratio: 16 / 10;
        margin-bottom: 22px;
        border-radius: 10px;
    }
    .founder__cover-tag {
        bottom: 10px;
        right: 10px;
        font-size: 0.66rem;
        padding: 5px 10px 5px 8px;
        gap: 7px;
    }
    .founder__cover-tag::before { width: 5px; height: 5px; }
    .founder__caption { margin-top: 14px; }
    .founder__caption-name { font-size: 1rem; }
    .founder__contact {
        padding-top: 12px;
        margin-top: 12px;
        gap: 8px;
    }
    .founder__contact a { font-size: 0.85rem; }

    .founder__lead { font-size: 1.1rem; }
    .founder__body p { font-size: 0.96rem; }

    .founder__trust {
        padding: 26px 22px 24px;
        border-radius: 16px;
    }
    .founder__trust-slogan {
        font-size: 1.2rem;
        margin-bottom: 18px;
    }
    .founder__trust-stars svg { width: 18px; height: 18px; }
    .founder__trust-meta { gap: 10px; }
    .founder__trust-avatars img {
        width: 30px;
        height: 30px;
        margin-left: -8px;
    }
    .founder__trust-count { font-size: 0.86rem; }
    .founder__trust-cta {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .founder__points {
        gap: 6px 16px;
    }
    .founder__points li {
        font-size: 0.85rem;
        padding-right: 16px;
    }
}

/* ===== Animations ===== */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 600ms ease, transform 600ms ease;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   NAV DROPDOWN — "Nos villes"
   ============================================= */
.nav__dropdown {
    position: relative;
}
/* Bouton "Nos villes" → même style que les <a> de la nav (couleur blanche, taille, etc.) */
.nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    padding: 8px 0;
    letter-spacing: 0.005em;
    transition: color 220ms ease;
    position: relative;
}
/* Soulignement turquoise au hover (comme les <a>) */
.nav__dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 16px; /* exclu le chevron pour que le trait s'arrête au texte */
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__dropdown:hover .nav__dropdown-toggle::after,
.nav__dropdown-toggle[aria-expanded="true"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.nav__dropdown-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 300ms ease;
}
.nav__dropdown-toggle[aria-expanded="true"] svg,
.nav__dropdown:hover .nav__dropdown-toggle svg {
    transform: rotate(180deg);
}

/* Bridge invisible entre le bouton et le menu → garde le hover continu.
   Toujours pointer-events: auto (sinon race condition quand la souris quitte le bouton). */
.nav__dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 18px;
    z-index: 199; /* sous le menu (z:200) — les clics passent au menu */
}

.nav__dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 240px;
    list-style: none;
    padding: 8px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    box-shadow: 0 22px 50px -20px rgba(20, 23, 28, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms;
    z-index: 200;
}
/* Open via hover (desktop) ou aria-expanded (JS / clavier) */
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav__dropdown-menu li {
    margin: 0;
}
.nav__dropdown-menu a {
    display: block;
    padding: 10px 14px;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 180ms ease, color 180ms ease;
}
.nav__dropdown-menu a:hover,
.nav__dropdown-menu a.is-active {
    background: var(--color-bg-alt);
    color: var(--color-accent);
}

/* Mobile : dropdown plié dans la nav-drawer */
@media (max-width: 980px) {
    .nav__dropdown { width: 100%; }
    .nav__dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 10px 0;
        font-size: inherit;
        font-weight: 600;
        color: #fff;
    }
    /* Pas d'underline sur mobile (drawer mode) */
    .nav__dropdown-toggle::after { display: none; }
    .nav__dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 16px;
        margin: 0 0 12px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 320ms ease;
    }
    .nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown-menu {
        max-height: 600px;
        transform: none;
    }
    .nav__dropdown:hover .nav__dropdown-menu {
        /* Pas de hover sur mobile */
        max-height: 0;
    }
    .nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown-menu {
        max-height: 600px;
    }
    .nav__dropdown-menu a {
        padding: 8px 0;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.78);
    }
    .nav__dropdown-menu a:hover,
    .nav__dropdown-menu a.is-active {
        background: transparent;
        color: var(--color-accent);
    }
}


/* =============================================
   PAGES VILLES — Hero, About, Services, Team, Edges, CTA
   ============================================= */

/* ===== City Hero ===== */
.city-hero {
    position: relative;
    background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
    color: #fff;
    padding: 100px 0 72px;
    overflow: hidden;
}
.city-hero::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -180px;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(30, 153, 144, 0.18) 0%, transparent 65%);
    filter: blur(30px);
    pointer-events: none;
}
.city-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 18px;
}
.city-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.city-hero__breadcrumb a:hover { color: var(--color-accent); }
.city-hero__breadcrumb strong { color: #fff; font-weight: 600; }
.city-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
    max-width: 720px;
}
.city-hero h1 .accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5fd4c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.city-hero__lead {
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 700px;
    margin: 0 0 28px;
}
.city-hero__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
}
.city-hero__meta li {
    position: relative;
    padding-left: 18px;
}
.city-hero__meta li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}
.city-hero__meta strong { color: #fff; font-weight: 600; }
.city-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 32px;
}
.city-hero__actions .btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
.city-hero__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}
.city-hero__proof {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
}
.city-hero__stars {
    color: var(--color-orange);
    letter-spacing: 2px;
}
.city-hero__proof strong { color: #fff; font-weight: 700; }


/* ===== About this city ===== */
.city-about__intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-ink-soft);
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}
.city-about__intro strong { color: var(--color-ink); font-weight: 700; }
.city-attractions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}
.city-attraction {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 22px 22px 20px;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 350ms ease;
}
.city-attraction:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -22px rgba(20, 23, 28, 0.18);
    border-color: rgba(30, 153, 144, 0.35);
}
.city-attraction h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}
.city-attraction p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
}


/* ===== Property + photo ===== */
.city-property {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
.city-property__text .eyebrow {
    display: inline-block;
    margin-bottom: 12px;
}
.city-property__text h2 {
    margin: 0 0 16px;
}
.city-property__text p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--color-ink-soft);
    margin: 0 0 12px;
}
.city-property__text strong { color: var(--color-ink); font-weight: 700; }
.city-property__profile { font-size: 0.9rem !important; }
.city-property__photo {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 22px 50px -22px rgba(20, 23, 28, 0.22);
}
.city-property__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.city-property__tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(14, 42, 44, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    color: #fff;
}
.city-property__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(30, 153, 144, 0.25);
}


/* ===== Services (2 colonnes proprio / voyageur) ===== */
.city-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}
.city-services__col {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 18px 40px -24px rgba(20, 23, 28, 0.15);
}
.city-services__col h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-line);
}
.city-services__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.city-services__col li {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-ink);
}
.city-services__col strong { font-weight: 700; }


/* ===== Team (3 membres) ===== */
.city-team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto;
}
.city-team__member {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
}
.city-team__member:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(20, 23, 28, 0.18);
}
.city-team__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--avatar-grad);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px -10px rgba(20, 23, 28, 0.25),
        inset 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.city-team__member h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 4px;
}
.city-team__role {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 12px;
}
.city-team__member p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
    margin: 0;
}


/* ===== Edges (4 atouts) ===== */
.city-edges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
}
.city-edges__card {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 24px 22px 22px;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 350ms ease;
}
.city-edges__card:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 153, 144, 0.4);
    box-shadow: 0 18px 36px -22px rgba(20, 23, 28, 0.18);
}
.city-edges__card h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 8px;
}
.city-edges__card p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
    margin: 0;
}
.city-edges__card em {
    display: inline-block;
    margin-top: 6px;
    font-style: italic;
    color: var(--color-accent);
    font-weight: 500;
}


/* ===== CTA final ville ===== */
.city-cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, #fff 100%);
    border: 1px solid var(--color-line);
    border-radius: 20px;
    box-shadow: 0 22px 50px -28px rgba(20, 23, 28, 0.16);
}
.city-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}
.city-cta > p {
    margin: 0 0 24px;
    font-size: 1rem;
    color: var(--color-ink-soft);
}
.city-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.city-cta__trust {
    font-size: 0.86rem;
    color: var(--color-ink-soft);
    margin: 0;
}
.city-cta__trust span[aria-label] {
    color: var(--color-orange);
    letter-spacing: 2px;
}
.city-cta__trust strong { color: var(--color-ink); font-weight: 700; }


/* ===== Responsive ville ===== */
@media (max-width: 900px) {
    .city-property {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .city-property__photo { order: -1; max-width: 480px; margin: 0 auto; width: 100%; }
    .city-services { grid-template-columns: 1fr; max-width: 480px; }
    .city-team { grid-template-columns: 1fr; max-width: 420px; }
    .city-edges { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 640px) {
    .city-hero { padding: 80px 0 56px; }
    .city-hero h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
    .city-hero__meta { gap: 14px 18px; font-size: 0.82rem; }
    .city-attractions { grid-template-columns: 1fr; max-width: 420px; }
    .city-cta { padding: 30px 22px; }
    .city-cta__actions .btn { width: 100%; }
}


/* =============================================
   CITY MARKET — Copy SEO unique par ville
   ============================================= */
.city-market__copy {
    max-width: 760px;
    margin: 0 auto;
}
.city-market__copy p {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--color-ink-soft);
    margin: 0 0 18px;
}
.city-market__copy p:last-child { margin-bottom: 0; }
.city-market__copy strong {
    color: var(--color-ink);
    font-weight: 700;
}
.city-market__copy em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 500;
}
@media (max-width: 640px) {
    .city-market__copy p { font-size: 0.96rem; line-height: 1.68; }
}


/* =============================================
   PAGE CONTACT — Hero split, stats, reviews
   ============================================= */

/* ===== Contact Hero ===== */
.contact-hero {
    position: relative;
    background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
    color: #fff;
    padding: 96px 0 80px;
    overflow: hidden;
}
.contact-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 20%, rgba(30, 153, 144, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(243, 154, 42, 0.08) 0%, transparent 50%);
    filter: blur(20px);
}
.contact-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 60px;
    align-items: start;
    z-index: 1;
}
.contact-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 18px;
}
.contact-hero__breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.contact-hero__breadcrumb a:hover { color: var(--color-accent); }
.contact-hero__breadcrumb strong { color: #fff; font-weight: 600; }
.eyebrow--light { color: var(--color-accent); }
.contact-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
}
.contact-hero h1 .accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, #5fd4c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.contact-hero__lead {
    font-size: 1.08rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 32px;
}
.contact-hero__lead strong { color: #fff; font-weight: 700; }

.contact-hero__direct {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}
.contact-hero__direct li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.contact-hero__direct svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--color-accent);
    margin-top: 2px;
}
.contact-hero__direct-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2px;
}
.contact-hero__direct-value {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 220ms ease;
}
.contact-hero__direct-value:hover { color: var(--color-accent); }

.contact-hero__trust {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
}
.contact-hero__stars {
    color: var(--color-orange);
    letter-spacing: 2px;
}
.contact-hero__trust strong { color: #fff; font-weight: 700; }

/* Form wrapper sur la droite — utilise les styles .hero__form (dark, glass, etc.) */
.contact-hero__form-wrap {
    align-self: start;
    /* Sur desktop, le formulaire reste collé en haut quand on scrolle */
    position: sticky;
    top: 100px;
    /* Annule la max-width 480px + justify-self end de .hero__form pour s'adapter à la grille */
    max-width: 100%;
    justify-self: stretch;
    /* Annule l'animation de pulsation pour ne pas distraire sur cette page dédiée */
    animation: none;
}


/* ===== Trust band — stats ===== */
.contact-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}
.contact-stat {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 24px 22px;
    text-align: center;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
}
.contact-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -22px rgba(20, 23, 28, 0.16);
}
.contact-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.contact-stat span {
    font-size: 0.88rem;
    color: var(--color-ink-soft);
    line-height: 1.4;
}


/* ===== Témoignages ===== */
.contact-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
}
.contact-review {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 14px 30px -18px rgba(20, 23, 28, 0.12);
}
.contact-review__stars {
    display: inline-block;
    color: var(--color-orange);
    letter-spacing: 3px;
    margin-bottom: 14px;
}
.contact-review p {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--color-ink);
    margin: 0 0 14px;
    font-style: italic;
}
.contact-review footer {
    font-size: 0.84rem;
    color: var(--color-ink-soft);
}
.contact-review footer strong { color: var(--color-ink); font-weight: 700; }


/* ===== Guarantees (rassurance) ===== */
.contact-guarantees {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
}
.contact-guarantees li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 22px 22px;
}
.contact-guarantees svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent) 0%, #2BB3A8 100%);
    border-radius: 50%;
    padding: 5px;
    margin-top: 2px;
    box-shadow: 0 4px 10px -2px rgba(30, 153, 144, 0.4);
}
.contact-guarantees strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 4px;
}
.contact-guarantees span {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-ink-soft);
}


/* ===== Responsive contact ===== */
@media (max-width: 980px) {
    .contact-hero { padding: 72px 0 60px; }
    .contact-hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .contact-hero__form-wrap {
        position: static;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }
    .contact-stats { grid-template-columns: repeat(2, 1fr); }
    .contact-reviews { grid-template-columns: 1fr; max-width: 560px; }
    .contact-guarantees { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .contact-hero { padding: 56px 0 48px; }
    .contact-hero__direct {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .contact-hero__form-wrap { padding: 24px 22px 20px; border-radius: 14px; }
    .contact-stats { grid-template-columns: 1fr; max-width: 360px; }
    .contact-stat strong { font-size: 1.6rem; }
}