/* ==========================================================================
   NEXUS PROJECT — Thème "Éditorial premium"
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #14161D;
  --charcoal: #1E212B;
  --line2: #2A2E3A;
  --cream: #F7F4EC;
  --paper: #FBF9F4;
  --surface: #F1ECE0;
  --mist: #E4DCC9;
  --line: #1C97D6;
  --line-soft: rgba(28,151,214,0.35);
  --line-bg: rgba(28,151,214,0.08);
  --blue: #1C6FA6;
  --ink-text: #1F2430;
  --slate: #5B6472;
  --muted: #9298A3;
  --fog: #A6ABB4;
  --white: #FFFFFF;
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink-text);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-serif); margin: 0; font-weight: 500; }
p { margin: 0; }
input, textarea, select { font: inherit; }
:focus-visible { outline: 1px solid var(--line); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
@media (min-width: 768px) { .container { padding: 0 48px; } }

/* ---- Barre de progression fine ---- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 100; background: var(--line); transition: width 0.1s linear; }

/* ---- Eyebrow éditorial ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--line);
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--line); flex-shrink: 0; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,244,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20,22,29,0.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo-link img { height: 30px; width: auto; object-fit: contain; }
.main-nav { display: none; align-items: center; gap: 34px; }
.main-nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); transition: color 0.25s; }
.main-nav a:hover, .main-nav a.active { color: var(--line); }
.header-cta { display: none; }
.burger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(20,22,29,0.15); color: var(--ink-text); }
@media (min-width: 1024px) { .main-nav { display: flex; } .header-cta { display: block; } .burger { display: none; } }
.mobile-menu { display: none; border-top: 1px solid rgba(20,22,29,0.08); background: var(--paper); padding: 16px 28px 32px; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.mobile-menu a:hover { color: var(--line); }
.mobile-menu .btn { margin-top: 16px; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 30px; transition: all 0.3s ease; white-space: nowrap;
}
.btn-gold { background: var(--ink); color: var(--cream); border: 1px solid var(--ink); }
.btn-gold:hover { background: transparent; color: var(--ink-text); }
.section-dark .btn-gold { background: var(--line); color: var(--ink); border: 1px solid var(--line); }
.section-dark .btn-gold:hover { background: transparent; color: var(--line); }
.btn-line { border: 1px solid rgba(20,22,29,0.25); color: var(--ink-text); }
.btn-line:hover { border-color: var(--line); color: var(--line); }
.btn-line-dark { border: 1px solid rgba(247,244,236,0.25); color: var(--cream); }
.btn-line-dark:hover { border-color: var(--line); color: var(--line); }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* ---- Divider éditorial (signature) ---- */
.editorial-divider { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.editorial-divider.on-light { background: var(--paper); }
.editorial-divider.on-dark { background: var(--ink); }
.editorial-divider .rule { width: 64px; height: 1px; background: var(--line-soft); }
.editorial-divider .mark { width: 5px; height: 5px; transform: rotate(45deg); background: var(--line); margin: 0 16px; flex-shrink: 0; }

/* ---- Sections ---- */
.section { padding: 88px 0; position: relative; }
.section-light { background: var(--paper); color: var(--ink-text); }
.section-dark { background: var(--ink); color: var(--cream); }
.section-dark .eyebrow { color: var(--line); }
@media (min-width: 768px) { .section { padding: 108px 0; } }

.section-title { margin-top: 18px; font-size: 30px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.16; }
@media (min-width: 768px) { .section-title { font-size: 40px; } }
.section-title em { font-style: italic; color: var(--line); }
.section-dark .section-title { color: var(--cream); }

.lede { margin-top: 22px; max-width: 560px; font-size: 16px; line-height: 1.8; color: var(--slate); }
.section-dark .lede { color: var(--fog); }
.narrow { max-width: 680px; }
.mt-8 { margin-top: 32px; } .mt-10 { margin-top: 44px; } .mt-12 { margin-top: 56px; }
.actions-row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .actions-row { flex-direction: row; } }

/* ---- Layout ---- */
.two-col { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col-aside { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .two-col-aside { grid-template-columns: 1.25fr 1fr; } }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Grille éditoriale (cartes serrées) ---- */
.editorial-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 1px; }
@media (min-width: 640px) { .editorial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .editorial-grid { grid-template-columns: repeat(3, 1fr); } }
.editorial-grid.on-dark { background: rgba(255,255,255,0.08); }
.editorial-grid.on-light { background: rgba(20,22,29,0.08); }
.editorial-card { padding: 36px 30px; transition: background 0.3s ease; }
.editorial-card.on-dark { background: var(--ink); }
.editorial-card.on-dark:hover { background: var(--charcoal); }
.editorial-card.on-light { background: var(--paper); }
.editorial-card.on-light:hover { background: var(--surface); }
.editorial-card .idx { font-family: var(--font-serif); font-size: 32px; color: var(--line); font-style: italic; }
.editorial-card h3 { margin-top: 16px; font-size: 17px; font-weight: 500; }
.editorial-card.on-dark h3 { color: var(--cream); }
.editorial-card.on-light h3 { color: var(--ink-text); }
.editorial-card p { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.editorial-card.on-dark p { color: var(--fog); }
.editorial-card.on-light p { color: var(--slate); }

/* ---- Cartes simples ---- */
.card { padding: 28px; }
.card-light { background: var(--white); border: 1px solid var(--mist); }
.card-dark { background: var(--charcoal); border: 1px solid var(--line2); }
.card-line { border: 1px solid var(--line-soft); background: var(--line-bg); }

/* ---- Tags ---- */
.tag { display: inline-flex; align-items: center; padding: 9px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--mist); color: var(--slate); transition: border-color 0.25s, color 0.25s; }
.tag:hover { border-color: var(--line); color: var(--line); }
.section-dark .tag { border-color: var(--line2); color: var(--fog); }
.section-dark .tag:hover { border-color: var(--line); color: var(--line); }

/* ---- Stat row ---- */
.stat-row { margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.stat .v { font-family: var(--font-serif); font-size: 32px; font-weight: 500; }
.stat .l { margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.section-light .stat .l { color: var(--slate); }
.section-dark .stat .l { color: var(--fog); }

/* ---- Disclaimer ---- */
.disclaimer { border: 1px solid var(--line-soft); background: var(--line-bg); padding: 30px 32px; display: flex; gap: 16px; }
.section-dark .disclaimer { border-color: var(--line2); background: rgba(255,255,255,0.03); }
.disclaimer svg { flex-shrink: 0; margin-top: 2px; color: var(--line); }
.disclaimer-title { font-family: var(--font-serif); font-size: 16px; font-style: italic; }
.section-light .disclaimer-title { color: var(--ink-text); }
.section-dark .disclaimer-title { color: var(--cream); }
.disclaimer ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.7; }
.section-light .disclaimer ul { color: var(--slate); }
.section-dark .disclaimer ul { color: var(--fog); }
.disclaimer li { display: flex; gap: 10px; }
.disclaimer li::before { content: ''; margin-top: 9px; width: 4px; height: 1px; background: var(--line); flex-shrink: 0; }

/* ---- Checkbox ---- */
.checkbox-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; border: 1px solid var(--line2); padding: 18px; margin-top: 24px; }
.checkbox-row input { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--line); flex-shrink: 0; }
.checkbox-row span { font-size: 13px; line-height: 1.7; color: var(--fog); }

/* ---- Champ / calculateur ---- */
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; color: var(--slate); }
.field input { width: 100%; padding: 13px 16px; font-size: 14px; border: 1px solid var(--mist); background: var(--white); color: var(--ink-text); outline: none; transition: border-color 0.25s; }
.field input:focus { border-color: var(--line); }
.calc-result { margin-top: 22px; border: 1px solid var(--line); padding: 22px; background: var(--line-bg); }
.calc-result .cr-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.calc-result .cr-value { margin-top: 6px; font-family: var(--font-serif); font-size: 30px; font-weight: 500; color: var(--ink-text); }

/* ---- Pricing card ---- */
.pricing-card { border: 1px solid var(--line-soft); background: var(--charcoal); padding: 40px; position: relative; }
.pricing-price { margin-top: 16px; font-family: var(--font-serif); font-size: 44px; font-weight: 500; color: var(--line); }
.pricing-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) { .pricing-actions { flex-direction: row; } }
.pricing-actions .btn { flex: 1; }
.pricing-fine { margin-top: 26px; border-top: 1px solid var(--line2); padding-top: 22px; font-size: 12px; line-height: 1.7; color: var(--fog); }
.pack-list { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.pack-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--fog); }
.pack-list svg { margin-top: 3px; flex-shrink: 0; color: var(--line); }

/* ---- Timeline ---- */
.timeline-item { position: relative; display: flex; gap: 24px; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 22px; top: 46px; bottom: -8px; width: 1px; background: var(--mist); }
.timeline-item:last-child::before { display: none; }
.timeline-num { position: relative; z-index: 1; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--line); transition: background 0.3s ease, color 0.3s ease; }
.timeline-item:hover .timeline-num { background: var(--line); color: var(--ink); }
.timeline-body { padding-top: 6px; }
.timeline-body h3 { font-size: 16px; font-weight: 500; color: var(--ink-text); }
.timeline-body p { margin-top: 8px; max-width: 500px; font-size: 14px; line-height: 1.7; color: var(--slate); }

/* ---- Étapes de paiement ---- */
.payment-steps { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--mist); }
@media (min-width: 640px) { .payment-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .payment-steps { grid-template-columns: repeat(4, 1fr); } }
.payment-step { background: var(--paper); padding: 30px 26px; }
.payment-step-num { font-family: var(--font-serif); font-style: italic; font-size: 28px; color: var(--line); }
.payment-step h3 { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-text); }
.payment-step p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--slate); }

/* ---- Accordéon FAQ ---- */
.accordion { border-top: 1px solid var(--mist); }
.accordion-item { border-bottom: 1px solid var(--mist); }
.accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; padding: 24px 4px; font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--ink-text); }
.accordion-trigger .chevron { flex-shrink: 0; color: var(--line); transition: transform 0.3s ease; }
.accordion-trigger[aria-expanded="true"] .chevron { transform: rotate(45deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.accordion-panel-inner { padding: 0 4px 24px; font-size: 14px; line-height: 1.8; color: var(--slate); max-width: 640px; }

/* ---- Photos ---- */
.photo-frame { position: relative; }
.photo-frame .frame { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.photo-frame.ratio-4-3 .frame { aspect-ratio: 4/3; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(12%) contrast(1.02); }
.photo-frame .frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,29,0.04) 0%, rgba(20,22,29,0.3) 100%); }
.photo-frame .corner { position: absolute; width: 52px; height: 52px; border: 1px solid var(--line); z-index: 2; }
.photo-frame .corner.tl { top: -14px; left: -14px; border-right: none; border-bottom: none; }
.photo-frame .corner.br { bottom: -14px; right: -14px; border-left: none; border-top: none; }
.photo-stat { position: absolute; bottom: 26px; left: 26px; background: var(--paper); padding: 16px 20px; border-left: 2px solid var(--line); z-index: 2; }
.photo-stat.on-dark { background: var(--ink); }
.photo-stat .v { font-family: var(--font-serif); font-size: 26px; font-weight: 500; }
.photo-stat.on-dark .v { color: var(--cream); }
.photo-stat:not(.on-dark) .v { color: var(--ink-text); }
.photo-stat .l { margin-top: 2px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.photo-stat.on-dark .l { color: var(--fog); }

/* ---- Adresse ---- */
.address-block { border-left: 2px solid var(--line); padding-left: 20px; }
.address-block .addr-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--line); }
.address-block .addr-value { margin-top: 6px; font-size: 15px; color: var(--cream); }
.visit-list { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.visit-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fog); }
.visit-list li .mark { width: 4px; height: 4px; transform: rotate(45deg); background: var(--line); flex-shrink: 0; }

/* ---- CTA final ---- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: 32px; }
@media (min-width: 768px) { .cta-final h2 { font-size: 46px; } }
.cta-final p { margin-top: 18px; color: var(--slate); max-width: 440px; margin-left: auto; margin-right: auto; }
.cta-final .btn { margin-top: 36px; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: var(--fog); border-top: 1px solid var(--line2); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 44px; padding: 64px 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid img { height: 28px; width: auto; object-fit: contain; }
.footer-tagline { margin-top: 20px; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.7; color: var(--cream); }
.footer-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line); }
.footer-grid ul { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-grid ul a:hover { color: var(--cream); }
.footer-link-accent { color: var(--line); }
.footer-link-accent:hover { color: var(--cream); }
.footer-bottom { border-top: 1px solid var(--line2); }
.footer-bottom-inner { display: flex; flex-direction: column; gap: 12px; padding: 22px 0; font-size: 12px; }
@media (min-width: 768px) { .footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-bottom-inner .malagasy { font-family: var(--font-serif); font-style: italic; opacity: 0.85; }

/* ---- Reveal doux ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }