/* ==========================================================================
   Unitas Nutrition – feuille de style
   Charte : vert lime #A8D93A, vert foncé #1F3D1F, crème #FAF8F0, beige #EDE9DD
   Titres Playfair Display, texte Montserrat. Icônes au trait, feuillage, halo.
   ========================================================================== */

:root {
  --cream: #FAF8F0;
  --beige: #EDE9DD;
  --white: #FFFFFF;
  --green: #1F3D1F;
  --green-2: #2B4F29;
  --green-3: #142914;
  --lime: #A8D93A;
  --lime-2: #96C82C;
  --lime-text: #5A841A;      /* lime assombri, lisible sur crème */
  --ink: #1F3D1F;
  --ink-soft: #4F5D4C;
  --line: #E3DFD0;
  --on-dark: #FAF8F0;
  --on-dark-soft: rgba(250, 248, 240, .78);
  --leaf: #C5C8AB;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --wrap: 1180px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow: 0 1px 2px rgba(31, 61, 31, .05), 0 12px 32px -18px rgba(31, 61, 31, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--lime-text); }
:focus-visible { outline: 3px solid var(--lime-2); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--green); color: var(--cream); padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 1rem; color: var(--cream); }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 40px, 760px); margin-inline: auto; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .55em; text-wrap: balance; color: inherit; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; max-width: 66ch; }
.lead { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.75; }
.eyebrow { display: inline-block; font: 600 .74rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--lime-text); margin-bottom: 1rem; }
.on-dark .eyebrow, .eyebrow.light { color: var(--lime); }
.small { font-size: .9rem; color: var(--ink-soft); }

/* Séparateur feuille (charte) */
.sep { display: flex; align-items: center; gap: .8rem; color: var(--lime-2); margin: .2rem 0 1.4rem; }
.sep::before, .sep::after { content: ""; width: 56px; height: 1px; background: currentColor; }
.sep svg { width: 20px; height: 20px; flex: none; }
.center .sep { justify-content: center; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font: 600 .95rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; padding: 1.05rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-lime { background: var(--lime); color: var(--green); }
.btn-lime:hover { background: var(--lime-2); color: var(--green); }
.btn-green { background: var(--green); color: var(--cream); }
.btn-green:hover { background: var(--green-2); color: var(--cream); }
.btn-line { border-color: var(--green); color: var(--green); background: transparent; }
.btn-line:hover { background: var(--green); color: var(--cream); }
.btn-line-light { border-color: rgba(250,248,240,.6); color: var(--cream); background: transparent; }
.btn-line-light:hover { background: var(--cream); color: var(--green); }
.btn-sm { padding: .8rem 1.2rem; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.center .actions { justify-content: center; }

/* ---------- Barre d'infos + en-tête ---------- */
.topbar { background: var(--green); color: var(--on-dark-soft); font-size: .82rem; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; flex-wrap: wrap; }
.topbar a { color: var(--cream); text-decoration: none; }
.topbar a:hover { color: var(--lime); }
.topbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.topbar strong { color: var(--lime); font-weight: 600; }
@media (max-width: 760px) { .topbar .hide-sm { display: none; } }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,248,240,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-solid { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(31,61,31,.5); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 84px; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--green); }
.brand:hover { color: var(--green); }
.brand svg { width: 50px; height: 50px; flex: none; }
.brand-name { font: 700 1.12rem/1 var(--sans); letter-spacing: .14em; }
.brand-name small { display: block; font-size: .6rem; letter-spacing: .38em; color: var(--lime-text); margin-top: .35rem; font-weight: 600; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2rem; }
.nav a { color: var(--green); text-decoration: none; font-weight: 500; font-size: .93rem; position: relative; padding-block: .3rem; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--lime); transform: scaleX(0); transition: transform .2s; transform-origin: left; }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.nav a:hover { color: var(--green); }
.nav-toggle { display: none; align-items: center; gap: .5rem; background: none; border: 1.5px solid var(--green); border-radius: 999px; padding: .6rem 1rem; font: 600 .9rem var(--sans); color: var(--green); cursor: pointer; }
@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); display: none; box-shadow: 0 20px 30px -24px rgba(31,61,31,.5); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 20px 1.5rem; }
  .nav li a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav li a::after { display: none; }
  .nav li:last-child a { margin-top: 1.2rem; border: 0; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); overflow: hidden; }
.section-beige { background: var(--beige); }
.section-white { background: var(--white); }
.on-dark { background: var(--green); color: var(--on-dark); }
.on-dark p, .on-dark .lead { color: var(--on-dark-soft); }
.on-dark a:not(.btn) { color: var(--cream); }
.head { max-width: 680px; margin-bottom: 3.2rem; }
.head.center { text-align: center; margin-inline: auto; }
.head.center p { margin-inline: auto; }
.head p { color: var(--ink-soft); }
.on-dark .head p { color: var(--on-dark-soft); }

/* Halo lumineux (charte) */
.halo { position: relative; isolation: isolate; }
.halo::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(620px, 110vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(168,217,58,.22) 0%, rgba(168,217,58,0) 62%); pointer-events: none; }

/* Feuillage décoratif */
.foliage { position: absolute; z-index: 0; color: var(--leaf); pointer-events: none; }
.foliage.f-right { right: -50px; top: 30px; width: 260px; }
.foliage.f-left { left: -60px; bottom: -20px; width: 240px; transform: scaleX(-1) rotate(8deg); }
.on-dark .foliage { color: rgba(168,217,58,.14); }
.section > .wrap, .section > .narrow, .page-hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .foliage { opacity: .5; width: 170px !important; } }

/* Pastille icône */
.ico { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; color: var(--green); flex: none; }
.ico svg { width: 30px; height: 30px; }
.on-dark .ico { color: var(--cream); border-color: rgba(250,248,240,.45); }

/* ---------- Héros ---------- */
.hero { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; position: relative; z-index: 1; }
.hero-grid > * { min-width: 0; }
.hero h1 { margin-bottom: .45em; }
.hero h1 span { display: block; color: var(--lime-text); font-style: italic; font-weight: 600; }
.hero .lead { max-width: 54ch; margin-bottom: 2rem; }
.trust { list-style: none; padding: 0; margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; font-size: .9rem; font-weight: 500; }
.trust li { display: flex; align-items: center; gap: .5rem; }
.trust svg { width: 18px; height: 18px; color: var(--lime-2); }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }

/* Fiche "bilan corporel" du héros */
.bilan-card { position: relative; background: var(--green); color: var(--cream); border-radius: 28px; padding: clamp(1.8rem, 4vw, 2.6rem); box-shadow: 0 30px 60px -30px rgba(20,41,20,.65); overflow: hidden; isolation: isolate; }
.bilan-card::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(168,217,58,.38), rgba(168,217,58,0) 68%); }
.bilan-card .tag { display: inline-flex; align-items: center; gap: .45rem; background: var(--lime); color: var(--green); font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .5rem .8rem; border-radius: 999px; }
.bilan-card h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 1.1rem 0 .4rem; color: var(--cream); }
.bilan-card > p { color: var(--on-dark-soft); font-size: .95rem; margin-bottom: 1.4rem; }
.bilan-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .2rem; }
.bilan-list li { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(250,248,240,.14); }
.bilan-list .ico { width: 46px; height: 46px; color: var(--lime); border-color: rgba(168,217,58,.55); }
.bilan-list .ico svg { width: 22px; height: 22px; }
.bilan-list strong { display: block; font-weight: 600; font-size: .98rem; }
.bilan-list span { font-size: .84rem; color: var(--on-dark-soft); line-height: 1.4; display: block; }
.bilan-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid rgba(250,248,240,.14); font-size: .85rem; color: var(--on-dark-soft); }

/* ---------- Bandeau piliers ---------- */
.pillars { background: var(--white); border-block: 1px solid var(--line); }
.pillars ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.pillars li { display: flex; gap: 1rem; align-items: center; padding: 1.8rem 1.4rem; }
.pillars li + li { border-left: 1px solid var(--line); }
.pillars .ico { width: 52px; height: 52px; }
.pillars .ico svg { width: 24px; height: 24px; }
.pillars strong { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.pillars span { font-size: .85rem; color: var(--ink-soft); line-height: 1.45; display: block; margin-top: .2rem; }
@media (max-width: 1020px) { .pillars ul { grid-template-columns: 1fr 1fr; } .pillars li:nth-child(3) { border-left: 0; } .pillars li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .pillars ul { grid-template-columns: 1fr; } .pillars li + li { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Cartes accompagnements ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.2rem 2rem 2rem; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--lime-2); color: var(--ink); }
.card .ico { margin-bottom: 1.5rem; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); margin: 0 0 1.4rem; font-size: .96rem; }
.card .more { margin-top: auto; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--green); }
.card .more svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .more svg { transform: translateX(3px); }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; } }

/* ---------- Bilan corporel (section sombre) ---------- */
.bilan-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.bilan-grid > * { min-width: 0; }
.metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; counter-reset: m; }
.metrics li { counter-increment: m; background: rgba(250,248,240,.05); border: 1px solid rgba(250,248,240,.14); border-radius: var(--r-md); padding: 1.6rem; }
.metrics li::before { content: counter(m); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lime); color: var(--green); font: 700 1.1rem/1 var(--serif); margin-bottom: 1rem; }
.metrics h3 { font-size: 1.25rem; color: var(--cream); margin-bottom: .35rem; }
.metrics p { font-size: .9rem; margin: 0; line-height: 1.6; }
@media (max-width: 960px) { .bilan-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }

/* ---------- Étapes (frise) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: s; position: relative; }
.timeline::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 1px; background: repeating-linear-gradient(90deg, var(--lime-2) 0 6px, transparent 6px 12px); }
.timeline li { counter-increment: s; text-align: center; position: relative; }
.timeline li::before { content: counter(s); display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1.3rem; border-radius: 50%; background: var(--lime); color: var(--green); font: 700 1.4rem/1 var(--serif); box-shadow: 0 0 0 8px var(--cream); position: relative; }
.section-white .timeline li::before { box-shadow: 0 0 0 8px var(--white); }
.timeline h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.timeline p { font-size: .93rem; color: var(--ink-soft); margin: 0 auto; max-width: 30ch; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; row-gap: 3rem; } .timeline::before { display: none; } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } }

/* ---------- Split (coach, esprit club) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.split > * { min-width: 0; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }

.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 480px; width: 100%; margin-inline: auto; border-radius: 240px 240px var(--r-lg) var(--r-lg); overflow: hidden; background: var(--green); isolation: isolate; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; color: var(--cream); padding: 2rem; }
.portrait-fallback::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 38%, rgba(168,217,58,.35), rgba(168,217,58,0) 55%); }
.portrait-fallback svg { width: 120px; height: 120px; }
.portrait-fallback strong { font: 600 1.6rem/1.2 var(--serif); }
.portrait-fallback span { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.portrait-wrap { position: relative; }
.portrait-badge { position: absolute; right: 4%; bottom: 8%; background: var(--white); border-radius: var(--r-md); padding: 1rem 1.2rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: .8rem; max-width: 260px; }
.portrait-badge .ico { width: 44px; height: 44px; color: var(--green); }
.portrait-badge .ico svg { width: 20px; height: 20px; }
.portrait-badge strong { display: block; font-size: .9rem; line-height: 1.3; }
.portrait-badge span { font-size: .8rem; color: var(--ink-soft); }

.checks { list-style: none; padding: 0; margin: 1.6rem 0 2.2rem; display: grid; gap: 1.1rem; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; align-items: start; }
.checks li > svg { width: 28px; height: 28px; color: var(--green); }
.checks strong { display: block; font-weight: 600; }
.checks span { color: var(--ink-soft); font-size: .95rem; }
.on-dark .checks li > svg { color: var(--lime); }
.on-dark .checks span { color: var(--on-dark-soft); }

/* Valeurs (esprit club) */
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.value { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem; }
.value .ico { width: 48px; height: 48px; margin-bottom: 1rem; }
.value .ico svg { width: 22px; height: 22px; }
.value h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.value p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }

/* ---------- Offre ---------- */
.offer { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: 28px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.offer > * { min-width: 0; }
.offer-price { position: relative; background: var(--green); color: var(--cream); padding: clamp(2rem, 5vw, 3.2rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; }
.offer-price::before { content: ""; position: absolute; z-index: -1; left: -120px; bottom: -160px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(168,217,58,.3), rgba(168,217,58,0) 68%); }
.price { font: 700 clamp(4rem, 9vw, 5.8rem)/.9 var(--serif); color: var(--lime); margin: 0; }
.price sup { font-size: .4em; vertical-align: top; position: relative; top: .35em; margin-left: .1em; }
.price-unit { font-weight: 600; font-size: 1.1rem; margin: .8rem 0 .3rem; color: var(--cream); }
.offer-price .small { color: var(--on-dark-soft); margin-bottom: 1.8rem; }
.offer-body { padding: clamp(2rem, 5vw, 3.2rem); }
.offer-body h3 { font-size: 1.5rem; }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin-inline: auto; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: .8rem; transition: border-color .2s; }
.faq details[open] { border-color: var(--lime-2); }
.faq summary { list-style: none; cursor: pointer; padding: 1.3rem 3.6rem 1.3rem 1.6rem; position: relative; font: 600 1.12rem/1.4 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%231F3D1F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 1.6rem 1.4rem; color: var(--ink-soft); }
.faq .answer p { margin: 0; }

/* ---------- Bandeau final + infos ---------- */
.cta { position: relative; background: var(--green); color: var(--cream); border-radius: 32px; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; overflow: hidden; isolation: isolate; }
.cta::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -60%; width: 720px; height: 720px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(168,217,58,.3), rgba(168,217,58,0) 62%); }
.cta h2 { color: var(--cream); max-width: 20ch; margin-inline: auto; }
.cta p { color: var(--on-dark-soft); margin-inline: auto; }
.cta .actions { justify-content: center; margin-top: 2rem; }

.infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.info { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem; }
.info .ico { width: 48px; height: 48px; }
.info .ico svg { width: 22px; height: 22px; }
.info h3 { font: 600 .78rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lime-text); margin-bottom: .4rem; }
.info p { margin: 0; font-size: .95rem; }
.info a { font-weight: 600; }
@media (max-width: 900px) { .infos { grid-template-columns: 1fr; } }

/* ---------- En-tête des pages internes ---------- */
.page-hero { position: relative; padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); text-align: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); max-width: 20ch; margin-inline: auto; }
.page-hero .lead { margin-inline: auto; max-width: 60ch; }
.breadcrumb { font-size: .82rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.breadcrumb li + li::before { content: "›"; margin-right: .5rem; color: var(--lime-2); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }

/* ---------- Contenu éditorial ---------- */
.prose { font-size: 1.04rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.4em; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--lime-text); }
.prose > :first-child { margin-top: 0; }
.note { background: var(--beige); border-left: 3px solid var(--lime-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.1rem 1.4rem; font-size: .93rem; margin: 2rem 0; }
.note p { margin: 0; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; position: sticky; top: 110px; box-shadow: var(--shadow); }
.panel h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.panel > p { color: var(--ink-soft); font-size: .93rem; }

/* Articles */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.post { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.2rem; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--lime-2); color: var(--ink); }
.post .eyebrow { margin-bottom: .7rem; }
.post h3 { font-size: 1.5rem; }
.post p { color: var(--ink-soft); font-size: .95rem; }
.post .more { margin-top: auto; font-weight: 600; font-size: .9rem; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }
.article-meta { font-size: .85rem; color: var(--ink-soft); }
.points-list { list-style: none; padding: 0; margin: 2rem 0; counter-reset: p; display: grid; gap: 1.2rem; }
.points-list li { counter-increment: p; display: grid; grid-template-columns: 48px 1fr; gap: 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem 1.5rem; }
.points-list li::before { content: counter(p); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--green); font: 700 1.15rem/1 var(--serif); }
.points-list h3 { font-size: 1.2rem; margin: .4rem 0 .3rem; }
.points-list p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .form .row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.field input, .field select { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .85rem .95rem; transition: border-color .2s, background-color .2s; }
.field input:focus, .field select:focus { border-color: var(--lime-2); background: var(--white); outline: none; }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.consent input { margin-top: .15rem; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.form .btn { width: 100%; }
.form-status { font-weight: 600; font-size: .9rem; min-height: 1.4em; margin: 0; }
.hp { position: absolute; left: -9999px; }

.contact-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: center; }
.contact-list .ico { width: 48px; height: 48px; }
.contact-list .ico svg { width: 22px; height: 22px; }
.contact-list strong { display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-text); }
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { font-weight: 600; }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; background: var(--green-3); color: var(--on-dark-soft); padding-block: 4.5rem 6.5rem; font-size: .9rem; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; position: relative; z-index: 1; }
.site-footer h2 { font: 600 .74rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin-bottom: 1.1rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer .brand { color: var(--cream); margin-bottom: 1.2rem; }
.site-footer .brand-name small { color: var(--lime); }
.footer-legal { position: relative; z-index: 1; border-top: 1px solid rgba(250,248,240,.12); margin-top: 3.5rem; padding-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgba(250,248,240,.55); }
.footer-legal p { margin: 0; max-width: none; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
@media (min-width: 1021px) { .site-footer { padding-bottom: 3rem; } }

/* ---------- Barre d'action mobile ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: .5rem; padding: .65rem max(12px, env(safe-area-inset-right, 0px)) calc(.65rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: rgba(250,248,240,.97); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
.mobile-bar a { flex: 1; padding: .85rem .5rem; font-size: .88rem; }
@media (max-width: 1020px) { .mobile-bar { display: flex; } }

.mt-0 { margin-top: 0; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.hero .foliage.f-left { bottom: -150px; left: -90px; opacity: .7; }
@media (max-width: 920px) { .hero .foliage.f-left { display: none; } }

/* ==========================================================================
   Direction "néon" : logo Unitas lumineux sur vert foncé
   ========================================================================== */
.topbar { background: #0E1E0E; }
.site-header { background: rgba(20, 41, 20, .97); }
.site-header.is-solid { border-bottom-color: rgba(168,217,58,.18); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.brand, .brand:hover { color: var(--cream); }
.brand img { width: 56px; height: 56px; flex: none; }
.brand-name small { color: var(--lime); }
.nav a { color: var(--cream); }
.nav a:hover { color: var(--lime); }
.nav-toggle { color: var(--cream); border-color: rgba(250,248,240,.6); }
@media (max-width: 1020px) {
  .nav { background: var(--green-3); border-bottom-color: rgba(168,217,58,.18); }
  .nav li a { border-bottom-color: rgba(250,248,240,.1); }
}

/* Héros */
.hero.on-dark { background: radial-gradient(ellipse 60% 70% at 78% 50%, rgba(168,217,58,.16), rgba(168,217,58,0) 70%), linear-gradient(180deg, var(--green-3), var(--green)); padding-block: clamp(3rem, 6vw, 5rem); }
.hero.on-dark h1 { color: var(--cream); }
.hero.on-dark h1 span { color: var(--lime); }
.hero.on-dark .lead { color: var(--on-dark-soft); }
.hero.on-dark .trust { color: var(--cream); }
.hero-logo { display: flex; justify-content: center; }
.hero-logo img { width: min(520px, 100%); height: auto; animation: neon-in 1.1s ease-out both; }
@keyframes neon-in { from { opacity: 0; transform: scale(.94); filter: brightness(.6); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 920px) { .hero-logo { order: -1; } .hero-logo img { width: min(320px, 80%); } }

/* Boutons alignés : même hauteur partout, empilés pleine largeur sur mobile */
.btn { min-height: 54px; white-space: nowrap; }
.btn-sm { min-height: 44px; }
.actions { margin-top: 2rem; }
.head + .cards, .actions:first-child { margin-top: 0; }
.center-actions { justify-content: center; margin-top: 3rem; }
.btn-lime { box-shadow: 0 0 0 0 rgba(168,217,58,0); }
.on-dark .btn-lime:hover { box-shadow: 0 0 28px -4px rgba(168,217,58,.65); }
@media (max-width: 600px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
}

/* Fiche bilan dans la section sombre */
.on-dark .bilan-card { background: rgba(250,248,240,.05); border: 1px solid rgba(168,217,58,.25); box-shadow: none; }
.bilan-card h3 { font-size: 1.6rem; color: var(--cream); margin: 1.1rem 0 1rem; }
.bilan-list { margin-bottom: 0; }

/* Portrait : logo néon en attendant la photo */
.portrait { background: var(--green-3); }
.portrait-fallback img { width: 78%; max-width: 300px; height: auto; }
.portrait-fallback strong { color: var(--cream); }

/* Pied de page */
.site-footer { background: #0E1E0E; }
.hero .actions { margin-top: 0; }
.nav .btn-lime, .nav .btn-lime:hover { color: var(--green); }
.brand img { border-radius: 50%; box-shadow: 0 0 18px -2px rgba(168,217,58,.55); }
.portrait-fallback { justify-content: flex-start; padding-top: 12%; }
.portrait-badge { right: -12px; bottom: -26px; }
@media (max-width: 560px) { .portrait-badge { right: 8px; } }
/* Logo vectoriel (sans néon) */
.brand img { width: auto; height: 50px; border-radius: 0; box-shadow: none; }
.hero-logo img { width: min(440px, 100%); filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.portrait-fallback img { width: 70%; max-width: 280px; }
@media (max-width: 560px) { .brand img { height: 42px; } }
@media (max-width: 920px) { .hero-logo img { width: min(240px, 62%); } }
/* Logo officiel (fichier fourni) */
.brand img { height: 52px; width: auto; }
.hero-logo img { width: min(430px, 100%); border-radius: 50%; filter: drop-shadow(0 28px 50px rgba(0,0,0,.4)); }
.portrait-fallback img { width: 64%; max-width: 260px; border-radius: 50%; }
@media (max-width: 920px) { .hero-logo img { width: min(230px, 60%); } }
.brand img { height: 62px; } @media (max-width: 560px) { .brand img { height: 50px; } }

/* ==========================================================================
   Corrections : typo alignée sur le logo, deux fonds seulement, accueil allégé
   ========================================================================== */
:root { --serif: "Lexend", "Montserrat", "Segoe UI", system-ui, sans-serif; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { letter-spacing: -0.01em; }
.price, .timeline li::before, .metrics li::before, .points-list li::before, .faq summary { letter-spacing: -0.01em; }
.faq summary { font-weight: 500; font-size: 1.05rem; }

/* Deux fonds : vert foncé et crème. Les sections claires sont séparées par un filet. */
.section-white, .section-beige, .pillars { background: var(--cream); }
.section-white, .section-beige, .section-line { border-top: 1px solid var(--line); }
.pillars { border-top: 0; }
.timeline li::before, .section-white .timeline li::before { box-shadow: 0 0 0 8px var(--cream); }

/* Héros : titre court + encart "prochaine étape" */
.hero.on-dark { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero h1 { margin-bottom: .35em; }
.hero .lead { font-size: 1.15rem; }
.next-step { position: relative; background: var(--cream); color: var(--ink); border-radius: 24px; padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.next-step .tag { display: inline-block; background: var(--green); color: var(--lime); font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .55rem .85rem; border-radius: 999px; }
.next-step h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); margin: 1rem 0 1.3rem; }
.next-step ol { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; counter-reset: n; }
.next-step li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; gap: .9rem; align-items: start; }
.next-step li::before { content: counter(n); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--green); font: 700 .95rem/1 var(--serif); }
.next-step strong { display: block; font-weight: 600; line-height: 1.35; }
.next-step span { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; display: block; }
.next-step .btn { width: 100%; }
.next-step-alt { text-align: center; font-size: .88rem; color: var(--ink-soft); margin: .9rem 0 0; max-width: none; }
.on-dark .next-step-alt a { color: var(--green); }
@media (max-width: 920px) { .hero-grid { gap: 2.5rem; } }

/* Section bilan : texte + 4 indicateurs */
.bilan-grid .actions { margin-top: 1.6rem; }

/* Formulaire : message de confirmation */
.form-done { background: var(--beige); border-radius: var(--r-md); padding: 1.2rem 1.3rem; font-size: .92rem; }
.form-done strong { display: block; margin-bottom: .3rem; }
.form-done .actions { margin-top: 1rem; }
.on-dark .next-step p, .on-dark .next-step-alt { color: var(--ink-soft); } .on-dark .next-step h2 { color: var(--green); }

/* ==========================================================================
   Version claire : le vert foncé est réservé au texte, aux boutons et au pied de page
   ========================================================================== */
.topbar { background: var(--beige); color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--green); }
.topbar a:hover { color: var(--lime-text); }
.site-header { background: rgba(255,255,255,.96); }
.site-header.is-solid { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(31,61,31,.45); }
.nav a { color: var(--green); }
.nav a:hover { color: var(--lime-text); }
.nav .btn-lime, .nav .btn-lime:hover { color: var(--green); }
.nav-toggle { color: var(--green); border-color: var(--green); }
@media (max-width: 1020px) {
  .nav { background: #fff; border-bottom-color: var(--line); }
  .nav li a { border-bottom-color: var(--line); }
}

/* Bandeau d'accueil */
.banner { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); min-height: clamp(520px, 72vh, 720px); display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.banner-inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6rem); }
.banner-text { max-width: 640px; }
.banner h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); margin-bottom: .35em; }
.banner .lead { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 2rem; }
.banner .actions { margin-top: 0; align-items: center; gap: 1.4rem; }
.banner-media { position: absolute; inset: 0; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; }
.banner.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,248,240,.97) 0%, rgba(250,248,240,.9) 38%, rgba(250,248,240,.2) 70%, rgba(250,248,240,0) 100%); }
.banner-logo { position: absolute; right: max(4vw, calc((100vw - var(--wrap)) / 2)); top: 50%; transform: translateY(-50%); width: min(430px, 36vw); }
.banner-logo::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(168,217,58,.28), rgba(168,217,58,0) 65%); z-index: -1; }
.banner-logo img { width: 100%; height: auto; border-radius: 50%; box-shadow: 0 30px 60px -30px rgba(31,61,31,.35); }
@media (max-width: 900px) {
  .banner { min-height: 0; flex-direction: column; align-items: stretch; }
  .banner-logo { position: relative; right: auto; top: auto; transform: none; width: min(220px, 56vw); margin: 2.5rem auto 0; }
  .banner-inner { padding-top: 2rem; }
  .banner.has-photo { min-height: 0; }
  .banner.has-photo .banner-media { position: relative; height: 260px; }
  .banner.has-photo::after { display: none; }
}

/* Lien texte (CTA secondaire discret) */
.text-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--green); text-decoration: none; border-bottom: 2px solid var(--lime); padding-bottom: 2px; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s; }
.text-link:hover { color: var(--lime-text); }
.text-link:hover svg { transform: translateX(3px); }
@media (max-width: 600px) { .banner .actions { align-items: stretch; } .banner .text-link { align-self: center; } }

/* Section bilan sur fond clair */
.metrics li { background: #fff; border-color: var(--line); }
.metrics h3 { color: var(--green); }
.metrics p { color: var(--ink-soft); }
.bilan-grid .lead { color: var(--ink-soft); }

/* Offre sur fond clair */
.offer-price { background: #F1F6E3; color: var(--green); }
.offer-price::before { background: radial-gradient(circle, rgba(168,217,58,.35), rgba(168,217,58,0) 68%); }
.price { color: var(--green); }
.price-unit { color: var(--green); }
.offer-price .small { color: var(--ink-soft); margin-bottom: 0; }

/* Bandeau final clair */
.cta { background: #F1F6E3; color: var(--green); border: 1px solid #DDE9BF; }
.cta h2 { color: var(--green); }
.cta p { color: var(--ink-soft); }
.cta .actions { margin-top: 1.6rem; }
.cta-alt { font-size: .9rem; margin: 1rem auto 0; }
.cta-alt a { color: var(--green); font-weight: 600; }

/* Portrait (en attendant la photo) : fond clair */
.portrait { background: #F1F6E3; }
.portrait-fallback { color: var(--green); }
.portrait-fallback::before { background: radial-gradient(circle at 50% 38%, rgba(168,217,58,.35), rgba(168,217,58,0) 60%); }
.portrait-fallback strong { color: var(--green); }
.portrait-fallback span { color: var(--lime-text); }

/* Bandeau d'avis */
.reviews-score { text-align: center; margin: -1.6rem auto 2rem; font-size: .95rem; color: var(--ink-soft); }
.reviews-score strong { color: var(--green); font-size: 1.1rem; }
.stars { color: #E9B526; letter-spacing: .1em; }
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.review { scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.review blockquote { margin: 0; }
.review p { margin: 0; font-size: .96rem; }
.review figcaption { margin-top: auto; font-weight: 600; font-size: .9rem; }

/* Barre mobile fine */
.mobile-bar { gap: .6rem; padding: .5rem max(12px, env(safe-area-inset-right, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.97); transform: translateY(110%); transition: transform .25s; }
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { flex: 1; min-height: 46px; padding: .7rem 1rem; font-size: .9rem; }
.mb-tel { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--green); border-radius: 50%; color: var(--green); }
.mb-tel svg { width: 20px; height: 20px; }
@media (max-width: 1020px) { .site-footer { padding-bottom: 5.5rem; } }

/* ==========================================================================
   Zones photo, retour du vert, icônes centrées, barre mobile, blog
   ========================================================================== */
/* Icônes : toujours centrées dans leur cercle */
.pillars span.ico, .bilan-list span.ico, .info span.ico, .contact-list span.ico, .portrait-badge span.ico, .value span.ico, .card span.ico { display: grid; place-items: center; margin-top: 0; }
.card span.ico { margin-bottom: 1.5rem; }
.value span.ico { margin-bottom: 1rem; }

/* Zones photo */
.ph { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--beige); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--lime-text); border: 2px dashed #CFD8B4; background: linear-gradient(135deg, #F4F7EA, #EDE9DD); text-align: center; padding: 1rem; }
.ph-empty svg { width: 34px; height: 34px; opacity: .8; }
.ph-empty figcaption { font: 600 .82rem/1.3 var(--sans); color: var(--ink-soft); }
.ph-fill { position: absolute; inset: 0; border-radius: inherit; }

/* Bandeau d'accueil : texte + composition de photos */
.banner { min-height: 0; display: block; background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.banner-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.banner-inner > * { min-width: 0; }
.banner-photos { position: relative; padding: 0 0 2.5rem 2.5rem; }
.banner-photos .ph-main { aspect-ratio: 4 / 3.4; width: 100%; box-shadow: 0 30px 60px -36px rgba(31,61,31,.45); }
.banner-photos .ph-small { position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 1; border: 6px solid #fff; box-shadow: 0 20px 40px -24px rgba(31,61,31,.45); }
.banner-badge { position: absolute; right: -14px; top: -18px; width: 96px; height: 96px; border-radius: 50%; background: #fff; box-shadow: 0 14px 30px -16px rgba(31,61,31,.45); padding: 4px; }
.banner-badge img { width: 100%; height: 100%; border-radius: 50%; }
@media (max-width: 900px) {
  .banner-inner { grid-template-columns: 1fr; padding-top: 2rem; }
  .banner-photos { padding: 0 0 2rem 1.5rem; }
  .banner-badge { width: 72px; height: 72px; right: -4px; }
}

/* Retour du vert : section bilan et bloc tarif */
.on-dark .metrics li { background: rgba(250,248,240,.06); border-color: rgba(250,248,240,.16); }
.on-dark .metrics h3 { color: var(--cream); }
.on-dark .metrics p, .on-dark .bilan-grid .lead { color: var(--on-dark-soft); }
.offer-price { background: var(--green); color: var(--cream); }
.offer-price .eyebrow { color: var(--lime); }
.price, .price-unit { color: var(--cream); }
.price { color: var(--lime); }
.offer-price .small { color: var(--on-dark-soft); }
.offer-price::before { background: radial-gradient(circle, rgba(168,217,58,.3), rgba(168,217,58,0) 68%); }

/* Portrait : zone photo */
.portrait { background: var(--beige); }
.portrait .ph-empty { border-radius: inherit; }

/* Galerie "La vie au club" */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery .ph { aspect-ratio: 1; border-radius: 18px; }
.gallery .ph:first-child { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery .ph:first-child { grid-row: auto; aspect-ratio: 1; } }
.ph-wide { aspect-ratio: 16 / 10; margin-bottom: 1.6rem; }

/* Barre mobile : deux boutons de même taille */
.mobile-bar .btn { min-height: 46px; padding: .7rem .8rem; font-size: .9rem; gap: .45rem; }
.mobile-bar .mb-call { flex: 0 0 38%; }
.mobile-bar .mb-book { flex: 1; }
.mobile-bar .btn svg { width: 17px; height: 17px; }

/* Blog */
.posts-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .posts-3 { grid-template-columns: 1fr; } }
.post .more { display: inline-flex; align-items: center; gap: .45rem; color: var(--green); }
.post .more svg { width: 16px; height: 16px; }
.post h3 { font-size: 1.3rem; }
.cat-list { list-style: none; padding: 0; margin: 0 0 3rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.cat-list a { display: inline-block; padding: .55rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--green); }
.cat-list a:hover { border-color: var(--lime-2); }
.blog-cat { margin-bottom: 3.5rem; scroll-margin-top: 120px; }
.blog-cat h2 { font-size: 1.6rem; margin-bottom: 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.blog-cat .posts { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .blog-cat .posts { grid-template-columns: 1fr; } }
.nw { white-space: nowrap; }
.banner h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.gallery { grid-template-columns: repeat(3, 1fr); }
.gallery .ph, .gallery .ph:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }
.is-hidden { display: none !important; }
.banner-solo { display: flex; justify-content: center; position: relative; }
.banner-solo::before { content: ""; position: absolute; width: 360px; height: 360px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(168,217,58,.25), rgba(168,217,58,0) 65%); }
.banner-solo img { position: relative; width: min(260px, 60vw); height: auto; border-radius: 50%; box-shadow: 0 24px 50px -28px rgba(31,61,31,.4); }
.portrait-fallback img { width: 58%; max-width: 240px; }
.reviews { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
@media (max-width: 960px) { .reviews { grid-template-columns: 1fr; } }
.review { position: relative; }
.review::before { content: "“"; position: absolute; right: 1.2rem; top: .4rem; font: 700 3.5rem/1 var(--serif); color: #E4EDC9; }
.reviews-score { margin-top: -1.2rem; }
.reviews-section .center { text-align: center; } .reviews-section p.center { margin-inline: auto; max-width: none; }
.reviews-more { margin: 0 0 1.5rem; }
.reviews-more summary { list-style: none; cursor: pointer; text-align: center; font-weight: 600; color: var(--green); margin: 0 auto 1.4rem; width: max-content; border-bottom: 2px solid var(--lime); padding-bottom: 2px; }
.reviews-more summary::-webkit-details-marker { display: none; }
.reviews-more[open] summary { margin-bottom: 1.4rem; }

/* Réservation */
.btn-block { width: 100%; }
.btn-block svg, .alt-contact .btn svg { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: .8rem; color: var(--ink-soft); font-size: .85rem; margin: 1.1rem 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.alt-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.alt-contact .btn { min-height: 48px; padding: .7rem .6rem; font-size: .88rem; gap: .4rem; }
.callback { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.callback summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--green); list-style: none; }
.callback summary::-webkit-details-marker { display: none; }
.callback summary::after { content: " +"; color: var(--lime-text); }
.callback[open] summary::after { content: " −"; }
.callback .form { margin-top: 1rem; }
.timeline-4 { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; margin: 1.5rem 0 1rem; }
.timeline-4::before { display: none; }
.prose .timeline { padding: 0; }
.prose .timeline li { margin: 0; }
@media (max-width: 520px) { .timeline-4 { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.facts > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem; text-align: center; }
.facts strong { display: block; font: 700 1.5rem/1.2 var(--serif); color: var(--green); }
.facts span { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: .3rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   COUCHE RESPONSIVE & UX (mobile d'abord, tablette, desktop)
   ========================================================================== */
html { scroll-padding-top: 96px; }
[id] { scroll-margin-top: 96px; }

/* --- Accès rapides du héros --- */
.quick { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .6rem; max-width: 760px; }
.quick a { display: flex; align-items: center; gap: .6rem; height: 100%; padding: .75rem .85rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--green); transition: border-color .15s, box-shadow .15s; }
.quick a:hover { border-color: var(--lime-2); box-shadow: 0 8px 20px -14px rgba(31,61,31,.45); color: var(--green); }
.quick svg, .quick .q-star { width: 20px; height: 20px; flex: none; color: var(--lime-text); }
.quick .q-star { color: #E9B526; font-size: 1.15rem; line-height: 20px; text-align: center; }
.quick strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.25; }
.quick small { display: block; font-size: .74rem; color: var(--ink-soft); line-height: 1.3; }
.open-status.is-open::before, .open-status.is-closed::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: 1px; }
.open-status.is-open::before { background: #3BA55C; box-shadow: 0 0 0 3px rgba(59,165,92,.18); }
.open-status.is-closed::before { background: #C9A227; }
@media (max-width: 1100px) { .quick { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 520px; } }

/* --- Menu mobile : plein écran, gros boutons --- */
.nav-extra { display: none; }
@media (max-width: 1020px) {
  .site-header .nav { position: fixed; top: var(--hdr, 68px); left: 0; right: 0; bottom: 0; overflow-y: auto; background: #fff; border: 0; box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .nav ul { padding: .5rem 20px 0; }
  .nav li a { font-size: 1.1rem; padding: 1rem 0; font-weight: 600; }
  .nav li:last-child { display: none; }
  .nav-extra { display: grid; gap: .7rem; padding: 1.4rem 20px 2rem; }
  .nav-extra .btn { width: 100%; }
  .nav-extra .btn svg { width: 18px; height: 18px; }
  .nav-extra p { margin: .6rem 0 0; font-size: .88rem; color: var(--ink-soft); text-align: center; max-width: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-bar { display: none; }
}

/* --- Carrousels horizontaux (mobile) --- */
@media (max-width: 760px) {
  .swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin-inline: -20px; padding: .2rem 20px 1rem; scrollbar-width: none; max-width: none !important; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 84%; scroll-snap-align: start; }
  .swipe-hint { display: block; text-align: center; font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }
}
.swipe-hint { display: none; }

/* --- Tablette (761–1020) : grilles à 2 ou 3 colonnes plutôt qu'une --- */
@media (min-width: 761px) and (max-width: 1020px) {
  .cards, .posts-3, .blog-cat .posts, .reviews { grid-template-columns: repeat(2, 1fr) !important; max-width: none; }
  .cards > :last-child:nth-child(odd), .posts-3 > :last-child:nth-child(odd), .reviews > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .infos { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .split.reverse > :first-child { order: 2; }
  .offer { grid-template-columns: .9fr 1.1fr; }
  .bilan-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .timeline { grid-template-columns: repeat(4, 1fr); column-gap: 1rem; }
  .timeline::before { display: block; }
  .layout { grid-template-columns: minmax(0,1fr) 320px; gap: 2rem; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 2 / -1; }
}

/* --- Mobile (≤760) : compacité, lisibilité, moins de défilement --- */
@media (max-width: 760px) {
  body { font-size: .98rem; line-height: 1.65; }
  .wrap, .narrow { width: min(100% - 40px, var(--wrap)); }
  .topbar { display: none; }
  .header-inner { min-height: 66px; }
  .brand img { height: 44px; }
  .section { padding-block: 3rem; }
  .head { margin-bottom: 1.6rem; }
  .head p, .lead { font-size: 1rem; }
  h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .banner h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  h2 { font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
  .sep { margin-bottom: 1rem; }
  .sep::before, .sep::after { width: 40px; }
  .foliage { display: none; }

  /* Héros */
  .banner-inner { padding-block: 1.6rem 2.2rem; }
  .banner-solo, .banner-photos { display: none; }
  .banner .lead { margin-bottom: 1.4rem; }
  .banner .actions { gap: .9rem; }
  .quick { margin-top: 1.4rem; gap: .5rem; }
  .quick a { padding: .65rem .7rem; gap: .5rem; }
  .quick strong { font-size: .8rem; }
  .quick small { font-size: .72rem; }

  /* Piliers en 2 × 2 compacts */
  .pillars ul { grid-template-columns: 1fr 1fr; }
  .pillars li { flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.1rem .9rem; }
  .pillars li + li { border-top: 0; border-left: 0; }
  .pillars li:nth-child(even) { border-left: 1px solid var(--line); }
  .pillars li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pillars .ico { width: 40px; height: 40px; }
  .pillars .ico svg { width: 19px; height: 19px; }
  .pillars strong { font-size: .95rem; }
  .pillars span { font-size: .78rem; }

  /* Cartes plus denses */
  .card { padding: 1.4rem 1.3rem; }
  .card span.ico { width: 48px; height: 48px; margin-bottom: 1rem; }
  .card span.ico svg { width: 22px; height: 22px; }
  .card h3 { font-size: 1.15rem; }
  .card p { font-size: .92rem; margin-bottom: 1rem; }

  /* Indicateurs du bilan en 2 × 2 */
  .metrics { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .metrics li { padding: 1rem .9rem; }
  .metrics li::before { width: 1.9rem; height: 1.9rem; font-size: .9rem; margin-bottom: .6rem; }
  .metrics h3 { font-size: 1rem; }
  .metrics p { font-size: .8rem; line-height: 1.5; }
  .bilan-grid { gap: 1.6rem; }
  .bilan-grid .actions { margin-top: 1.2rem; }

  /* Frise en liste verticale compacte */
  .timeline, .timeline-4 { grid-template-columns: 1fr !important; gap: .9rem; }
  .timeline::before { display: none; }
  .timeline li { display: grid; grid-template-columns: 42px 1fr; column-gap: .9rem; text-align: left; align-items: start; }
  .timeline li::before { grid-row: span 2; width: 40px; height: 40px; font-size: 1.05rem; margin: 0; box-shadow: none; }
  .timeline h3 { font-size: 1.05rem; margin: .45rem 0 .2rem; }
  .timeline p { margin: 0; max-width: none; font-size: .9rem; }

  /* Coach */
  .portrait { max-width: 280px; border-radius: 140px 140px var(--r-lg) var(--r-lg); }
  .portrait-badge { right: 0; bottom: -18px; padding: .7rem .9rem; }
  .split { gap: 2.4rem; }

  /* Offre */
  .offer-price, .offer-body { padding: 1.6rem 1.4rem; }
  .price { font-size: 3.6rem; }
  .checks { gap: .8rem; margin: 1rem 0 1.4rem; }

  /* Avis */
  .review { padding: 1.3rem; }
  .review p { font-size: .9rem; }
  .reviews-score { margin: -.6rem auto 1.2rem; }

  /* Blog */
  .post { padding: 1.4rem; }
  .post h3 { font-size: 1.12rem; }
  .post p { font-size: .9rem; }

  /* FAQ */
  .faq summary { padding: 1.05rem 3.2rem 1.05rem 1.1rem; font-size: .98rem; }
  .faq summary::after { right: 1rem; width: 26px; height: 26px; margin-top: -13px; }
  .faq .answer { padding: 0 1.1rem 1.1rem; font-size: .92rem; }

  /* Infos pratiques en liste serrée */
  .infos { gap: .6rem; margin-top: 1.2rem; }
  .info { padding: 1rem 1.1rem; }
  .info .ico { width: 42px; height: 42px; }

  /* Pages internes */
  .page-hero { padding-block: 2rem 1.8rem; }
  .page-hero h1 { font-size: clamp(1.8rem, 7.8vw, 2.3rem); }
  .breadcrumb { margin-bottom: .8rem; }
  .panel { position: static; padding: 1.4rem; }
  .points-list li { grid-template-columns: 40px 1fr; padding: 1rem 1.1rem; gap: .8rem; }
  .points-list li::before { width: 36px; height: 36px; font-size: 1rem; }
  .points-list h3 { font-size: 1.05rem; margin-top: .3rem; }
  .facts { gap: .6rem; margin-top: 2rem; }
  .cta { padding: 2rem 1.3rem; border-radius: 22px; }

  /* Pied de page */
  .site-footer { padding-block: 2.6rem 5.6rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-legal { margin-top: 2rem; }
}

/* Réservation mobile : bouton visible dès l'ouverture de la page bilan */
@media (max-width: 960px) {
  .layout { display: flex; flex-direction: column-reverse; }
  .layout > .prose { width: 100%; }
}
/* Correctifs */
@media (max-width: 1020px) {
  .site-header { backdrop-filter: none; background: #fff; }
  .site-header .nav { position: fixed; top: var(--hdr, 66px); left: 0; right: 0; bottom: 0; height: auto; z-index: 70; }
}
@media (min-width: 761px) and (max-width: 1020px) { .metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .portrait-wrap:has(.portrait-fallback) { display: none; }
  .reviews.swipe > * { align-self: flex-start; }
  .review figcaption { margin-top: .4rem; }
}
.nav-extra .btn-green, .nav-extra .btn-green:hover { color: var(--cream); }
@media (max-width: 1020px) { .banner-solo { display: none; } .banner-inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   ITÉRATION : héros photo, bandeaux image, avis en carrousel, blog visuel
   ========================================================================== */
/* Héros */
.hero-meta { margin: 1.6rem 0 0; font-size: .88rem; color: var(--ink-soft); max-width: none; }
.hero-meta a { color: var(--green); font-weight: 600; text-decoration: none; }
.hero-meta .open-status { font-weight: 600; color: var(--green); }
.banner-photos .ph { background: var(--beige); }
.banner-photos .ph-main { aspect-ratio: 5 / 4.4; }
.banner-photos .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1020px) {
  .banner-photos { display: block !important; padding: 0 0 1.6rem 1.6rem; max-width: 640px; }
  .banner-photos .ph-main { aspect-ratio: 16 / 11; }
  .banner-photos .ph-small { width: 34%; }
  .banner-badge { width: 64px; height: 64px; right: -6px; top: -14px; }
}
@media (max-width: 760px) { .banner-inner { gap: 1.8rem; } .hero-meta { font-size: .82rem; } }

/* Bandeau image (photo + texte) */
.image-band { display: grid; grid-template-columns: 1.25fr 1fr; background: var(--green); color: var(--cream); min-height: 440px; }
.image-band.reverse { grid-template-columns: 1fr 1.25fr; }
.image-band.reverse .ib-media { order: 2; }
.ib-media { position: relative; overflow: hidden; background: var(--green-2); }
.ib-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-text { display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: clamp(2rem, 5vw, 4.5rem); }
.ib-text h2 { color: var(--cream); margin-bottom: .5em; }
.ib-text p { color: var(--on-dark-soft); margin-bottom: 1.6rem; }
.ib-text .btn { align-self: flex-start; }
@media (max-width: 860px) {
  .image-band, .image-band.reverse { grid-template-columns: 1fr; min-height: 0; }
  .image-band.reverse .ib-media { order: 0; }
  .ib-media { aspect-ratio: 16 / 10; }
  .ib-text { padding: 2rem 20px 2.4rem; }
  .ib-text .btn { align-self: stretch; }
}

/* Avis : carrousel compact */
.rv-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; }
.rv-top h2 { margin-bottom: .3rem; }
.rv-score { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; color: var(--ink-soft); }
.rv-score strong { font: 700 1.5rem/1 var(--serif); color: var(--green); }
.rv-nav { display: flex; gap: .5rem; flex: none; }
.rv-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--green); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rv-nav button:hover { border-color: var(--green); }
.rv-nav button svg { width: 18px; height: 18px; }
.rv-nav .rv-prev svg { transform: rotate(180deg); }
.rv-track, .post-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .2rem .2rem 1rem; scrollbar-width: none; }
.rv-track::-webkit-scrollbar, .post-track::-webkit-scrollbar { display: none; }
.rv { flex: 0 0 calc((100% - 3rem) / 4); scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; align-self: flex-start; }
.rv-head { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: .65rem; }
.rv-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #EAF3D3; color: var(--green); font-weight: 700; font-size: .95rem; }
.rv-head figcaption { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.rv-head .stars { font-size: .78rem; letter-spacing: .05em; }
.rv-head .g { width: 18px; height: 18px; }
.rv-text { margin: 0; }
.rv-text p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink); }
.rv-text.is-long p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rv-text.is-open p { display: block; }
.rv-more { align-self: flex-start; background: none; border: 0; padding: 0; font: 600 .84rem var(--sans); color: var(--lime-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rv-foot { margin: .6rem 0 0; text-align: center; max-width: none; }
@media (max-width: 1100px) { .rv { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 760px) {
  .rv-top { align-items: flex-start; flex-direction: column; }
  .rv-nav { display: none; }
  .rv-track, .post-track { margin-inline: -20px; padding-inline: 20px; }
  .rv { flex-basis: 78%; }
}
.reviews-section .head, .reviews-more { display: none; }

/* Cartes d'articles avec image */
.post { padding: 0; overflow: hidden; }
.post-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--beige); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post:hover .post-img img { transform: scale(1.04); }
.post-cat { position: absolute; left: .8rem; top: .8rem; background: rgba(255,255,255,.94); color: var(--green); font: 600 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .65rem; border-radius: 999px; }
.post-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-body h3 { font-size: 1.12rem; line-height: 1.3; margin-bottom: .5rem; }
.post-body p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-body .more { margin-top: auto; }
.post > .eyebrow { display: none; }

/* Page blog */
.featured { display: grid; grid-template-columns: 1.3fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink); margin-bottom: 2.4rem; transition: box-shadow .2s; }
.featured:hover { box-shadow: var(--shadow); color: var(--ink); }
.featured-img { position: relative; min-height: 320px; background: var(--beige); }
.featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-body { padding: clamp(1.6rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.featured-body p { color: var(--ink-soft); }
.featured-body .btn { align-self: flex-start; margin-top: .6rem; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .featured-img { min-height: 0; aspect-ratio: 16 / 9; } .featured-body .btn { align-self: stretch; } }
.blog-page .cat-list { justify-content: flex-start; margin-bottom: 2.2rem; }
.blog-cat { margin-bottom: 2.6rem; }
.bc-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.bc-head h2 { font-size: 1.45rem; margin: 0; padding: 0; border: 0; }
.bc-head > span { font-size: .85rem; color: var(--ink-soft); }
.bc-head .rv-nav { margin-left: auto; }
.post-track .post { flex: 0 0 calc((100% - 3rem) / 4); scroll-snap-align: start; }
@media (max-width: 1100px) { .post-track .post { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 760px) { .post-track .post { flex-basis: 78%; } .bc-head .rv-nav { display: none; } }

/* Article */
.article-img { margin: 0 0 1.6rem; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 8.5; background: var(--beige); }
.article-img img { width: 100%; height: 100%; object-fit: cover; }
.article-section { padding-top: 2.4rem; }

/* Formulaire : confirmation */
.form-done.ok { background: #EAF3D3; }
/* Bandeaux photo en version claire */
.image-band { background: #F1F6E3; color: var(--green); border-block: 1px solid #DDE9BF; }
.ib-text h2 { color: var(--green); }
.ib-text p { color: var(--ink-soft); }
.ib-text .eyebrow.light { color: var(--lime-text); }
.ib-text .btn-lime { background: var(--green); color: var(--cream); }
.ib-text .btn-lime:hover { background: var(--green-2); color: var(--cream); }