/* ===========================
   CSS VARIABLES & RESET
=========================== */
:root {
  --leo: #0F4C5C;
  --leo-light: #1a6b80;
  --leo-pale: #e8f4f7;
  --elise: #D67A61;
  --elise-light: #e8967f;
  --elise-pale: #fdf1ee;
  --white: #ffffff;
  --black: #111111;
  --anthracite: #1e2022;
  --grey-dark: #3a3d42;
  --grey-mid: #6b7280;
  --grey-light: #f4f5f6;
  --grey-border: #e5e7eb;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 64px rgba(0,0,0,0.12);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--anthracite);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ===========================
   TYPOGRAPHY
=========================== */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { font-weight: 300; color: var(--grey-dark); }

/* ===========================
   NAVIGATION
=========================== */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 clamp(1rem, 5vw, 4rem);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
}
nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--leo), var(--elise));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -1px;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--anthracite);
}
.nav-logo-text span { color: var(--elise); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--leo), var(--elise));
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-links a:hover { color: #7de8d0; }
nav.scrolled .nav-links a { color: var(--anthracite); text-shadow: none; }
nav.scrolled .nav-links a:hover { color: var(--leo); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  background: linear-gradient(135deg, var(--leo), var(--leo-light));
  color: white !important;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,76,92,0.3);
  color: white !important;
}
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--anthracite);
  transition: var(--transition);
}

/* ===========================
   HERO SECTION
=========================== */
.hero {
  min-height: 100vh;
  background: var(--anthracite);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 72px 0 0;
}
.hero-bg-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero-bg-leo {
  background: linear-gradient(135deg, #051f27 0%, #0F4C5C 60%, #1a6b80 100%);
}
.hero-bg-elise {
  background: linear-gradient(225deg, #5c2a1e 0%, #9e4a35 40%, #D67A61 100%);
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,10,10,0.6) 100%);
}
.hero-geometric {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* geometric elements removed for cleaner hero */
@keyframes pulse-ring {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
  50% { transform: translateX(-50%) scale(1.2); opacity: 0.15; }
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-left {
  animation: fadeUp 1s ease both;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--elise);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero-title {
  color: white;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.hero-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--elise-light), #f0a888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.65);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--elise), #c0603f);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(214, 122, 97, 0.45);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--transition);
}
.btn-secondary:hover { background: rgba(255,255,255,0.2); }
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.hero-right {
  animation: fadeUp 1s ease 0.2s both;
}
.hero-coaches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.coach-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.coach-card-leo { border-color: rgba(15,76,92,0.4); }
.coach-card-elise { border-color: rgba(214,122,97,0.4); }
.coach-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}
.coach-card-avatar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}
.coach-card-leo .coach-card-avatar {
  background: linear-gradient(135deg, #051f27 0%, #0F4C5C 100%);
}
.coach-card-elise .coach-card-avatar {
  background: linear-gradient(135deg, #5c2a1e 0%, #D67A61 100%);
}
.coach-card-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  position: relative;
  z-index: 1;
}
.coach-card-role {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  position: relative;
  z-index: 1;
  margin-top: 2px;
}
.coach-card-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.coach-card-leo .coach-card-tag { background: var(--leo); color: white; }
.coach-card-elise .coach-card-tag { background: var(--elise); color: white; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===========================
   SECTION UTILITIES
=========================== */
.section { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem); }
.container { max-width: 1200px; margin: 0 auto; }
.container-wide { max-width: 1400px; margin: 0 auto; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 6px 14px;
  border-radius: 50px;
}
.tag-leo { background: var(--leo-pale); color: var(--leo); }
.tag-elise { background: var(--elise-pale); color: var(--elise); }
.tag-neutral { background: var(--grey-light); color: var(--grey-mid); }
.section-intro { max-width: 600px; margin-bottom: 3.5rem; }
.section-intro p { font-size: 1.05rem; margin-top: 0.75rem; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.divider {
  height: 3px;
  width: 60px;
  border-radius: 2px;
  margin: 1.2rem 0;
}
.divider-leo { background: linear-gradient(90deg, var(--leo), var(--leo-light)); }
.divider-elise { background: linear-gradient(90deg, var(--elise), var(--elise-light)); }
.divider-gradient { background: linear-gradient(90deg, var(--leo), var(--elise)); }

/* ===========================
   INTRO STRIP
=========================== */
.intro-strip {
  background: var(--grey-light);
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
}
.intro-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.intro-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 160px;
}
.intro-strip-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.icon-leo { background: var(--leo-pale); }
.icon-elise { background: var(--elise-pale); }
.intro-strip-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--anthracite);
  line-height: 1.3;
}
.intro-strip-sub {
  font-size: 0.75rem;
  color: var(--grey-mid);
}

/* ===========================
   SERVICES GRID
=========================== */
.services-section { background: var(--white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-card {
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: default;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.service-card-leo {
  background: linear-gradient(135deg, var(--leo-pale), #d5edf2);
  border: 1px solid rgba(15,76,92,0.12);
}
.service-card-elise {
  background: linear-gradient(135deg, var(--elise-pale), #f5d9cf);
  border: 1px solid rgba(214,122,97,0.12);
}
.service-card-neutral {
  background: var(--grey-light);
  border: 1px solid var(--grey-border);
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 var(--radius-lg) 0 80px;
  opacity: 0.08;
}
.service-card-leo::before { background: var(--leo); }
.service-card-elise::before { background: var(--elise); }
.service-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.service-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--anthracite);
}
.service-desc {
  font-size: 0.88rem;
  color: var(--grey-mid);
  line-height: 1.6;
}

/* ===========================
   COACHES / ABOUT SECTION
=========================== */
.about-section {
  background: var(--anthracite);
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 50%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(15,76,92,0.08) 0%, rgba(15,76,92,0.02) 100%);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.coach-profile {
  padding: 4rem clamp(2rem, 5vw, 4rem);
  position: relative;
}
.coach-profile-leo {
  border-right: 1px solid rgba(255,255,255,0.08);
}
.coach-avatar-large {
  width: 120px; height: 120px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  border: 3px solid;
}
.avatar-leo {
  background: linear-gradient(135deg, #0F4C5C, #1a6b80);
  border-color: rgba(15,76,92,0.5);
}
.avatar-elise {
  background: linear-gradient(135deg, #D67A61, #e8967f);
  border-color: rgba(214,122,97,0.5);
}
.coach-name-large {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}
.coach-credentials {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}
.cred-leo { color: var(--leo-light); }
.cred-elise { color: var(--elise-light); }
.coach-bio {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  margin-bottom: 2rem;
  font-weight: 300;
}
.coach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.coach-tag {
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
}
.tag-leo-dark { background: rgba(15,76,92,0.3); color: #7dc7d9; border: 1px solid rgba(15,76,92,0.4); }
.tag-elise-dark { background: rgba(214,122,97,0.2); color: #f0a888; border: 1px solid rgba(214,122,97,0.3); }
.coach-values {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.coach-value {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  color: white;
}

/* ===========================
   WHY US SECTION
=========================== */
.why-section { background: var(--white); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
}
.why-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-border);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.why-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.why-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}
.why-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--anthracite);
}
.why-desc {
  font-size: 0.875rem;
  color: var(--grey-mid);
  line-height: 1.7;
}

/* ===========================
   SAP / CREDIT IMPOT
=========================== */
.sap-section {
  background: linear-gradient(135deg, var(--leo) 0%, #0d3e4e 100%);
  position: relative;
  overflow: hidden;
}
.sap-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}
.sap-section::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -5%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.02);
  pointer-events: none;
}
.sap-header .section-tag { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); }
.sap-header h2 { color: white; }
.sap-header p { color: rgba(255,255,255,0.65); }
.sap-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.sap-calculator {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.sap-calc-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: white;
  margin-bottom: 1.5rem;
}
.sap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sap-row:last-child { border-bottom: none; }
.sap-row-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}
.sap-row-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
}
.sap-row-value.highlight { color: #7de8a0; }
.sap-input-group {
  margin-bottom: 1.5rem;
}
.sap-input-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sap-input {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: white;
  font-size: 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  outline: none;
  transition: border-color var(--transition);
}
.sap-input:focus { border-color: rgba(255,255,255,0.5); }
.sap-result-big {
  background: rgba(125, 232, 160, 0.15);
  border: 1px solid rgba(125, 232, 160, 0.3);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  margin-top: 1rem;
}
.sap-result-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.sap-result-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: #7de8a0;
  line-height: 1;
}
.sap-info h3 { color: white; margin-bottom: 1rem; }
.sap-info p { color: rgba(255,255,255,0.65); margin-bottom: 2rem; line-height: 1.8; }
.sap-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sap-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.sap-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sap-step-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  padding-top: 4px;
  line-height: 1.6;
}
.sap-step-text strong { color: white; }

/* ===========================
   ZONES D'INTERVENTION
=========================== */
.zones-section { background: var(--grey-light); }
.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.zone-pill {
  background: white;
  border: 1px solid var(--grey-border);
  border-radius: 50px;
  padding: 10px 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--grey-dark);
  transition: all var(--transition);
}
.zone-pill:hover {
  background: var(--leo);
  color: white;
  border-color: var(--leo);
  transform: translateY(-2px);
}
.zones-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--grey-mid);
}
.zones-note strong { color: var(--leo); }

/* ===========================
   TESTIMONIALS
=========================== */
.testimonials-section { background: var(--white); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--grey-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.testimonial-card::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 5rem;
  position: absolute;
  top: -0.5rem; left: 1.5rem;
  opacity: 0.08;
  color: var(--anthracite);
  line-height: 1;
}
.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 1rem;
}
.star { color: #f59e0b; font-size: 1rem; }
.testimonial-text {
  font-size: 0.925rem;
  line-height: 1.75;
  color: var(--grey-dark);
  margin-bottom: 1.5rem;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  font-family: var(--font-display);
}
.avatar-blue { background: linear-gradient(135deg, var(--leo), var(--leo-light)); }
.avatar-red { background: linear-gradient(135deg, var(--elise), var(--elise-light)); }
.testimonial-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--anthracite);
}
.testimonial-detail {
  font-size: 0.78rem;
  color: var(--grey-mid);
}
.testimonial-tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
}

/* ===========================
   FAQ
=========================== */
.faq-section { background: var(--grey-light); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.faq-item {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--grey-border);
  transition: box-shadow var(--transition);
}
.faq-item:hover { box-shadow: var(--shadow); }
.faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--anthracite);
  text-align: left;
  background: none;
}
.faq-chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--grey-mid);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer-inner {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9rem;
  color: var(--grey-mid);
  line-height: 1.75;
}
.faq-answer-inner strong { color: var(--anthracite); }

/* ===========================
   CONTACT SECTION
=========================== */
.contact-section { background: var(--anthracite); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.contact-info h2 { color: white; margin-bottom: 0.5rem; }
.contact-info p { color: rgba(255,255,255,0.55); margin-bottom: 2.5rem; font-size: 1rem; }
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  transition: background var(--transition);
}
.contact-method:hover { background: rgba(255,255,255,0.1); }
.contact-method-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-method-text strong {
  display: block;
  color: white;
  font-size: 0.9rem;
}
.contact-method-text span {
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
}
.contact-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.contact-form h3 {
  color: white;
  font-size: 1.3rem;
  margin-bottom: 2rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group.full { grid-column: 1 / -1; }
label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
input, select, textarea {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: white;
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--elise);
}
select option { background: var(--anthracite); }
textarea { resize: vertical; min-height: 100px; }
.btn-form {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--elise), #c0603f);
  color: white;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  transition: transform var(--transition), box-shadow var(--transition);
  margin-top: 0.5rem;
}
.btn-form:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(214,122,97,0.4);
}
.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
  color: #7de8a0;
  font-size: 1rem;
}
.form-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-top: 1rem;
}

/* ===========================
   MAP SECTION
=========================== */
.map-embed {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: var(--radius-lg);
  margin-top: 2rem;
  filter: grayscale(30%);
}

/* ===========================
   FOOTER
=========================== */
footer {
  background: #0a0d0e;
  padding: 4rem clamp(1.5rem, 5vw, 4rem) 2rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}
.footer-brand-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  max-width: 260px;
}
.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.2rem;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--elise); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}
.footer-badges {
  display: flex;
  gap: 0.75rem;
}
.footer-badge {
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
}

/* ===========================
   STICKY CTA
=========================== */
.sticky-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
.sticky-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  color: white;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transition: transform var(--transition), box-shadow var(--transition);
  animation: slideInRight 0.5s ease 1s both;
}
.sticky-cta-btn:hover { transform: translateY(-3px); }
.sticky-btn-main {
  background: linear-gradient(135deg, var(--elise), #c0603f);
}
.sticky-btn-main:hover { box-shadow: 0 12px 32px rgba(214,122,97,0.5); }
.sticky-btn-wa {
  background: #25D366;
}
.sticky-btn-wa:hover { box-shadow: 0 12px 32px rgba(37,211,102,0.4); }
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===========================
   SECTION SPECIFIC STYLES
=========================== */
.lieux-section { background: white; }
.lieux-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.lieu-card {
  border: 1px solid var(--grey-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--transition);
}
.lieu-card:hover {
  border-color: var(--leo);
  background: var(--leo-pale);
}
.lieu-emoji { font-size: 1.5rem; }
.lieu-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--anthracite);
}

/* ===========================
   SCROLL ANIMATIONS
=========================== */
/* Le contenu est visible par defaut. L'animation d'apparition n'est activee
   que si le JS a pu poser .js-anim sur <html> : si le JS echoue ou est bloque,
   le site reste entierement lisible au lieu de rester invisible. */
.reveal { opacity: 1; transform: none; }
.js-anim .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-anim .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===========================
   GRADIENT DIVIDERS
=========================== */
.wave-divider {
  height: 60px;
  position: relative;
  overflow: hidden;
}
.wave-divider svg { width: 100%; height: 100%; }

/* ===========================
   MOBILE MENU
=========================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--anthracite);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 5rem 2rem 3rem;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.mobile-menu-links a {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--transition);
}
.mobile-menu-links a:hover { color: white; }
.mobile-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-subtitle { margin: 0 auto 2.5rem; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-right { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .coach-profile-leo { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .sap-main { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .hero-bg-split { grid-template-columns: 1fr; }
  .hero-bg-elise { display: none; }
  .hero-coaches { display: none; }
  /* Le fond centre-transparent convient a un texte aligne a gauche (desktop),
     mais sur mobile le texte est centre : il tombe dans la zone la plus
     claire de l'overlay. On assombrit uniformement pour garder le texte lisible. */
  .hero-bg-overlay { background: linear-gradient(180deg, rgba(5,8,10,0.45) 0%, rgba(5,8,10,0.78) 55%, rgba(5,8,10,0.85) 100%); }
  .hero-title, .hero-baseline, .hero-subtitle { text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .form-grid { grid-template-columns: 1fr; }
  .sticky-cta { bottom: 1rem; right: 1rem; }
  .sticky-cta-btn { font-size: 0.8rem; padding: 10px 16px; }
}
@media (max-width: 480px) {
  .hero-stats { flex-direction: column; gap: 1rem; }
  .hero-actions { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .zones-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   AJOUTS — reprise technique (aout 2026)
   ============================================================ */

/* CTA collant : pilote par une classe et non par du style inline (CSP) */
.sticky-cta.visible { opacity: 1; pointer-events: auto; }

/* Burger : croix quand le menu est ouvert */
.nav-burger span { transition: transform .25s ease, opacity .2s ease; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Les <picture> doivent se comporter comme les <img> qu'ils enveloppent */
picture { display: contents; }
.galerie-item picture { display: block; height: 100%; }

/* Bloc « Comment demarrer » (remplace l'ancien formulaire non fonctionnel) */
.contact-start {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.contact-start h3 { color: #fff; margin-bottom: 1.25rem; }
.start-steps { list-style: none; counter-reset: etape; display: grid; gap: 1rem; margin-bottom: 2rem; }
.start-steps li {
  counter-increment: etape; position: relative; padding-left: 2.5rem;
  color: rgba(255,255,255,0.6); font-size: 0.9rem; line-height: 1.65;
}
.start-steps li strong { color: rgba(255,255,255,0.92); }
.start-steps li::before {
  content: counter(etape); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--leo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600;
}
.start-actions { display: grid; gap: 0.75rem; }
.start-btn {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.95rem 1.15rem; border-radius: var(--radius);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  text-decoration: none; color: #fff;
  transition: border-color var(--transition), background var(--transition), transform 0.15s ease;
}
.start-btn:hover { border-color: var(--elise); background: rgba(214,122,97,0.1); transform: translateY(-2px); }
.start-btn-main { background: var(--leo); border-color: var(--leo); }
.start-btn-main:hover { background: var(--leo-light); border-color: var(--leo-light); }
.start-btn-ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
  background: rgba(255,255,255,0.09);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.start-btn-label {
  display: block; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(255,255,255,0.5); margin-bottom: 2px;
}
.start-btn-main .start-btn-label { color: rgba(255,255,255,0.72); }
.start-btn-value { display: block; font-size: 0.95rem; font-weight: 600; word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .galerie-item img { transition: none; }
}

/* ---------- Pages locales ---------- */
/* ATTENTION : c'est un <nav>, il herite donc de la barre fixe du haut.
   Il faut neutraliser explicitement position/z-index/hauteur, sinon le fil
   d'Ariane vient se superposer au menu. */
.fil-ariane {
  position: static; z-index: auto; height: auto; padding: 0; background: none;
  box-shadow: none; backdrop-filter: none; justify-content: flex-start;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-bottom: 1.5rem;
}
.fil-ariane a { color: rgba(255,255,255,0.6); text-decoration: none; }
.fil-ariane a:hover { color: var(--elise-light); }

.liste-atouts { list-style: none; display: grid; gap: 0.85rem; margin-top: 1.25rem; }
.liste-atouts li { position: relative; padding-left: 1.75rem; line-height: 1.7; }
.liste-atouts li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--leo);
}
a.zone-pill { text-decoration: none; display: inline-block; }
a.zone-pill:hover { border-color: var(--leo); color: var(--leo); }

/* ---------- Lisibilite du logo dans la nav ----------
   La nav est transparente au-dessus du hero sombre : le nom doit y etre clair,
   puis repasser en anthracite quand la nav prend son fond blanc au scroll. */
.nav-logo-text { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
nav.scrolled .nav-logo-text { color: var(--anthracite); text-shadow: none; }

/* Pages a fond clair : la nav garde son fond blanc des le chargement */
body.page-claire nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
body.page-claire .nav-logo-text { color: var(--anthracite); text-shadow: none; }
body.page-claire .nav-links a { color: var(--anthracite); text-shadow: none; }
body.page-claire .nav-links a:hover { color: var(--leo); }
body.page-claire .nav-burger span { background: var(--anthracite); }

/* ---------- Burger : contraste + zone tactile ----------
   Les barres etaient anthracite au-dessus du hero sombre (quasi invisibles)
   et la cible faisait 32x24 px, sous le minimum tactile de 44x44. */
.nav-burger {
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  gap: 5px; padding: 0; background: none; border: 0;
}
.nav-burger span { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.4); }
nav.scrolled .nav-burger span { background: var(--anthracite); box-shadow: none; }
body.page-claire .nav-burger span { box-shadow: none; }

/* ---------- Audit SEO : titres reels + baseline du hero ----------
   .service-title et .why-title sont passes de <div> a <h3> : la regle globale
   h3 leur imposerait Playfair, on retablit la typo d'origine. */
h3.service-title, h3.why-title { font-family: var(--font-body); line-height: 1.35; }

/* La phrase d'accroche descend sous le H1, qui porte desormais le mot-cle */
.hero-baseline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  color: rgba(255,255,255,0.88);
  margin: 0.5rem 0 1.5rem;
}
/* le H1 porte trois lignes : on le resserre pour garder le bouton visible */
.hero-title { font-size: clamp(2.1rem, 4.4vw, 3.7rem); }

/* Communes cliquables dans la zone d'intervention */
a.zone-pill-lien { position: relative; font-weight: 500; }
a.zone-pill-lien::after {
  content: '→'; margin-left: 6px; opacity: 0.5;
  transition: transform var(--transition), opacity var(--transition);
  display: inline-block;
}
a.zone-pill-lien:hover::after { transform: translateX(3px); opacity: 1; }

/* Le footer accueille une 5e colonne (« Nos secteurs ») depuis l'audit SEO */
.footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; gap: 2.5rem; }
@media (max-width: 1200px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
@media (max-width: 1024px)  { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 768px)   { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)   { .footer-top { grid-template-columns: 1fr; } }

/* ============================================================
   PASSAGE EN SITE MULTI-PAGES (30 aout 2026)
   ============================================================ */

/* Bandeau d'en-tete des pages internes (sous la nav fixe de 76 px) */
.page-hero { background: var(--anthracite); padding-top: 8rem; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.page-hero .section-intro p { color: rgba(255,255,255,0.6); }
.page-hero em { font-style: normal; color: var(--elise-light); }

/* Lien actif dans la nav */
.nav-links a.actif { color: var(--elise-light); }
nav.scrolled .nav-links a.actif { color: var(--leo); }

/* Titres de colonnes du footer : <h2> pour la semantique, look d'origine */
.footer-titre {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1rem;
}

/* Cartes de service cliquables */
h3.service-title a { color: inherit; text-decoration: none; }
.service-card:has(h3.service-title a):hover h3.service-title a { color: var(--leo); }
h3.service-title a::after { content: ' →'; opacity: 0; transition: opacity var(--transition); }
.service-card:hover h3.service-title a::after { opacity: 0.6; }

/* Encarts des pages de service */
.encart-coach {
  display: inline-block;
  background: var(--leo-pale); border: 1px solid rgba(15,76,92,0.15);
  border-radius: var(--radius); padding: 0.7rem 1.1rem;
  font-size: 0.88rem; color: var(--grey-dark); margin-bottom: 2.5rem;
}
.encart-coach a { color: var(--leo); text-decoration: underline; text-underline-offset: 2px; }

.encart-cta {
  margin-top: 3rem; padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--leo-pale); border: 1px solid rgba(15,76,92,0.15);
  border-radius: var(--radius-lg);
}
.encart-cta h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* Le fil d'Ariane des pages internes est sur fond sombre */
.page-hero .fil-ariane { margin-bottom: 2rem; }

/* ---------- Typographie des pages de contenu ----------
   Le design d'origine n'avait que des composants : les paragraphes vivaient
   toujours dans une carte. Les pages de texte long ont besoin de leur propre
   rythme. On ne cible que les enfants DIRECTS de .container pour ne pas
   toucher aux composants existants. */
.container > p { margin-bottom: 1.05rem; line-height: 1.75; }
.container > p:last-child { margin-bottom: 0; }
.container > h2:not(:first-child) { margin-top: 3rem; }
.container > h3 { margin-top: 2.25rem; margin-bottom: 0.85rem; }
.container > h2 + .divider { margin-bottom: 1.5rem; }
.container > ul { margin-bottom: 1.75rem; }
.container > .encart-cta p { margin-bottom: 0; }

/* ============================================================
   PAGE TARIFS
   ============================================================ */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.encart-essai {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: linear-gradient(135deg, var(--leo), var(--leo-light));
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 3rem;
}
.encart-essai h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.encart-essai p { color: rgba(255,255,255,0.85); font-weight: 400; }
.encart-essai strong { color: #fff; }
.encart-essai-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.6);
}

/* la table doit pouvoir defiler seule sur petit ecran */
.tarif-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
.tarif-table {
  width: 100%; min-width: 520px; border-collapse: collapse;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.tarif-table th, .tarif-table td {
  padding: 1rem 1.1rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--grey-border);
}
.tarif-table thead th {
  background: var(--anthracite); color: #fff;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.35;
  border-bottom: none;
}
.tarif-table tbody tr:last-child th,
.tarif-table tbody tr:last-child td { border-bottom: none; }
.tarif-table tbody th {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--anthracite);
}
.tarif-table tbody td:last-child { background: var(--leo-pale); }
.tarif-sous {
  display: block; font-family: var(--font-body); font-size: 0.75rem;
  font-weight: 400; color: var(--grey-mid); margin-top: 2px;
}
.tarif-prix {
  display: block; font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700; color: var(--anthracite); line-height: 1.1;
}
.tarif-net { color: var(--leo); }
.tarif-pers { display: block; font-size: 0.72rem; color: var(--grey-mid); margin-top: 3px; }
.tarif-note { font-size: 0.85rem; color: var(--grey-mid); line-height: 1.7; }

@media (max-width: 560px) {
  .tarif-table th, .tarif-table td { padding: 0.8rem 0.75rem; }
  .tarif-prix { font-size: 1.15rem; }
  .encart-essai { padding: 1.35rem; }
}

/* ---------- Tarifs sur petit écran ----------
   Un tableau qui défile horizontalement cacherait la colonne « coût réel »,
   qui est justement l'argument principal. On empile donc en fiches. */
@media (max-width: 640px) {
  .tarif-wrap { overflow-x: visible; }
  .tarif-table { min-width: 0; box-shadow: none; background: none; }
  .tarif-table thead { display: none; }
  .tarif-table, .tarif-table tbody, .tarif-table tr,
  .tarif-table th, .tarif-table td { display: block; width: 100%; }
  .tarif-table tr {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); margin-bottom: 1rem; overflow: hidden;
  }
  .tarif-table tbody th {
    background: var(--anthracite); color: #fff;
    padding: 0.9rem 1.1rem; border-bottom: none;
  }
  .tarif-table tbody th .tarif-sous { color: rgba(255,255,255,0.55); }
  .tarif-table td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.8rem 1.1rem;
  }
  .tarif-table td::before {
    content: attr(data-label);
    font-size: 0.78rem; font-weight: 500; color: var(--grey-mid);
    flex: 1 1 auto;
  }
  .tarif-table td > span { text-align: right; }
  .tarif-prix { font-size: 1.2rem; }
  .tarif-table tbody td:last-child { border-bottom: none; }
}