/* ============================================
   NEUROTECH ORTHOPÉDIE — Apple × Artisanat
   ============================================ */

:root {
  --deep-teal: #0E3A4C;
  --deep-teal-2: #113748;
  --teal-soft: #2A5A6E;
  --ivory: #F5F0E8;
  --ivory-warm: #EFE7D9;
  --copper: #B89968;
  --copper-dark: #9A7E4F;
  --cream: #FAF7F1;
  --paper: #FBF8F2;
  --ink: #1A2730;
  --ink-soft: #4A5A65;
  --line: rgba(14, 58, 76, 0.12);
  --line-soft: rgba(14, 58, 76, 0.06);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 2.2vw, 2rem);
  --text-2xl: clamp(2rem, 3.5vw, 3rem);
  --text-3xl: clamp(2.5rem, 5vw, 4rem);
  --text-hero: clamp(3.5rem, 9vw, 7.5rem);

  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 900px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: 'kern', 'liga', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }

::selection { background: var(--deep-teal); color: var(--ivory); }

.serif {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--deep-teal);
}

em { font-style: italic; color: var(--copper); }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--copper);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3rem); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3rem); }

/* ============================================
   NAV — Apple-style sticky transparent
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(14, 58, 76, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease);
}
.nav.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(14, 58, 76, 0.96);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1.5rem, 5vw, 3rem);
  max-width: var(--container-wide);
  margin: 0 auto;
  gap: 1rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}
.nav-brand-mark {
  width: 42px;
  height: 42px;
  color: var(--deep-teal);
}
.nav-brand-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--deep-teal);
  line-height: 1;
}
.nav-brand-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 4px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  flex-wrap: nowrap;
}
.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--deep-teal);
  position: relative;
  padding: 4px 0;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--copper);
  transition: width 0.4s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--deep-teal);
  color: var(--ivory) !important;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  transition: all 0.35s var(--ease);
}
.nav-cta:hover {
  background: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(14, 58, 76, 0.35);
}
.nav-cta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 0 rgba(184, 153, 104, 0.6);
  animation: pulse 2.2s infinite var(--ease);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 153, 104, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(184, 153, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 153, 104, 0); }
}

.nav-toggle { display: none; }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 99;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  padding: 6rem 2rem 2rem;
  visibility: hidden;
  display: none;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
@media (max-width: 880px) {
  .mobile-menu { display: block; }
  .nav-links { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .nav-toggle span {
    width: 22px;
    height: 1.5px;
    background: var(--deep-teal);
    transition: all 0.3s;
  }
  .mobile-menu ul { list-style: none; }
  .mobile-menu li { padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft); }
  .mobile-menu a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.75rem;
    color: var(--deep-teal);
  }
}

/* ============================================
   HERO — Apple-style : centré, énorme typo, photo en bas
   ============================================ */
.hero {
  padding: 9rem 0 0;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.hero::before {
  content: '';
  position: absolute;
  top: 15%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(184,153,104,0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.hero-inner .eyebrow {
  display: inline-block;
  margin-bottom: 1.75rem;
  padding: 0.5rem 1rem;
  background: rgba(14, 58, 76, 0.04);
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--text-hero);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--deep-teal);
  margin-bottom: 2rem;
  font-weight: 400;
}
.hero-title em {
  font-style: italic;
  color: var(--copper);
  font-weight: 400;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0 auto 2.5rem;
  font-weight: 300;
}
.hero-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Hero showcase — photo en bas, full-bleed */
.hero-showcase {
  margin-top: 5rem;
  position: relative;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.hero-showcase img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  aspect-ratio: 16/9;
  background: #0E3A4C;
}
.hero-showcase-meta {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.meta-block {
  text-align: center;
  padding: 0 1.5rem;
  border-right: 1px solid var(--line-soft);
}
.meta-block:last-child { border-right: none; }
.meta-num {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--deep-teal);
  margin-bottom: 0.6rem;
  font-weight: 400;
}
.meta-num span {
  color: var(--copper);
  font-style: italic;
}
.meta-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--deep-teal);
  color: var(--ivory);
  padding: 1.1rem 1.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184,153,104,0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(14, 58, 76, 0.45);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); position: relative; z-index: 1; }
.btn-primary span { position: relative; z-index: 1; }
.btn-primary:hover svg { transform: translateX(5px); }

.btn-primary-light {
  background: var(--copper);
  color: var(--deep-teal);
}
.btn-primary-light:hover {
  background: var(--ivory);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
}

.btn-primary-large {
  padding: 1.3rem 2.2rem;
  font-size: 1rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--deep-teal);
  padding: 1.1rem 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  left: 0.5rem; right: 0.5rem;
  bottom: 0.8rem;
  height: 1px;
  background: var(--deep-teal);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.btn-ghost:hover::after { transform: scaleX(0); transform-origin: right; }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--deep-teal);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--deep-teal);
  margin-top: 2rem;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-text:hover { gap: 1rem; color: var(--copper); border-bottom-color: var(--copper); }

@media (max-width: 880px) {
  .hero { padding: 6.5rem 0 0; }
  .hero-showcase { margin-top: 3rem; }
  .hero-showcase img { aspect-ratio: 4/3; max-height: 60vh; }
  .hero-showcase-meta {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .meta-block { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 1rem 0; }
  .meta-block:last-child { border-bottom: none; }
  .meta-num { font-size: 2rem; }
}

/* ============================================
   Marquee
   ============================================ */
.marquee {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--deep-teal);
  padding: 1.4rem 0;
  overflow: hidden;
  margin-top: 5rem;
}
.marquee-track {
  display: flex;
  gap: 4rem;
  animation: scroll 42s linear infinite;
  width: max-content;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ivory, #F5F0E8);
  white-space: nowrap;
}
.marquee-item::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--copper);
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ============================================
   SECTIONS GÉNÉRIQUES
   ============================================ */
section { padding: clamp(5rem, 11vw, 9rem) 0; }

.section-header {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  margin-bottom: 5rem;
  align-items: end;
}
.section-header-left .eyebrow { margin-bottom: 1.5rem; display: inline-block; }
.section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  max-width: 14ch;
  letter-spacing: -0.025em;
}
.section-header-right p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 48ch;
  font-weight: 300;
}
@media (max-width: 880px) {
  .section-header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
}

/* ============================================
   SOLUTIONS — Cards XL Apple-style
   ============================================ */
.solutions {
  background: var(--paper);
  position: relative;
}
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.solution-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.6s var(--ease);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.solution-card::before {
  content: none;
}
.solution-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -30px rgba(14, 58, 76, 0.3);
  border-color: var(--line);
}
.solution-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ivory-warm);
}
.solution-card-img.dark { background: var(--deep-teal); }
.solution-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.solution-card:hover .solution-card-img img { transform: scale(1.06); }

.solution-card-body {
  padding: 2.5rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.solution-card-body .eyebrow {
  margin-bottom: 1rem;
  display: inline-block;
}
.solution-card-body h3 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  color: var(--deep-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}
.solution-card-body p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  font-weight: 300;
  max-width: 38ch;
}
.solution-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}
.solution-tags li {
  font-size: 0.75rem;
  color: var(--deep-teal);
  background: var(--ivory-warm);
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: all 0.4s var(--ease);
}
.solution-card:hover .solution-tags li {
  background: var(--deep-teal);
  color: var(--ivory);
}
.solution-link {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--deep-teal);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.solution-card:hover .solution-link {
  gap: 1rem;
  color: var(--copper);
}
.solution-link svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.solution-card:hover .solution-link svg { transform: translateX(4px); }

@media (max-width: 880px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .solution-card-body { padding: 1.75rem 1.5rem 2rem; }
  .solution-card-body h3 { font-size: 1.9rem; }
}

/* ============================================
   CRAFT — gros plan artisan
   ============================================ */
.craft {
  background: var(--deep-teal);
  color: var(--ivory);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.craft::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(184,153,104,0.15), transparent 70%);
  pointer-events: none;
}
.craft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.craft-text .eyebrow { color: var(--copper); display: inline-block; margin-bottom: 2rem; }
.craft-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--ivory);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.craft-text h2 em { color: var(--copper); font-style: italic; }
.craft-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.78);
  font-weight: 300;
  max-width: 44ch;
}
.craft-text .btn-text {
  color: var(--copper);
  border-bottom-color: var(--copper);
}
.craft-text .btn-text:hover { color: var(--ivory); border-bottom-color: var(--ivory); }
.craft-visual {
  aspect-ratio: 4/5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--deep-teal-2);
}
.craft-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 880px) {
  .craft-grid { grid-template-columns: 1fr; }
  .craft-visual { aspect-ratio: 4/3; }
}

/* ============================================
   APPROCHE — Triptyque
   ============================================ */
.approche {
  background: var(--ivory);
  position: relative;
}
.approche-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.approche-item {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background 0.6s var(--ease);
}
.approche-item:last-child { border-right: none; }
.approche-item:hover { background: var(--cream); }
/* Hover state: cream background needs dark teal text for legibility,
   even when the parent section is teal/dark. */
.approche-item:hover,
.approche-item:hover h3,
.approche-item:hover p,
.approche-item:hover .approche-num,
.bg-teal .approche-item:hover,
.bg-teal .approche-item:hover h3,
.bg-teal .approche-item:hover p,
.bg-teal .approche-item:hover .approche-num,
.prose-section.dark .approche-item:hover,
.prose-section.dark .approche-item:hover h3,
.prose-section.dark .approche-item:hover p,
.prose-section.dark .approche-item:hover .approche-num,
.prose-section.teal .approche-item:hover,
.prose-section.teal .approche-item:hover h3,
.prose-section.teal .approche-item:hover p,
.prose-section.teal .approche-item:hover .approche-num {
  color: var(--deep-teal) !important;
}
.approche-item:hover .approche-num,
.bg-teal .approche-item:hover .approche-num,
.prose-section.dark .approche-item:hover .approche-num,
.prose-section.teal .approche-item:hover .approche-num {
  color: var(--copper) !important;
}
.approche-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--copper);
  margin-bottom: 3rem;
  letter-spacing: 0.05em;
}
.approche-item h3 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}
.approche-item p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
}
@media (max-width: 880px) {
  .approche-grid { grid-template-columns: 1fr; }
  .approche-item { border-right: none; border-bottom: 1px solid var(--line); padding: 2.5rem 1.5rem; }
  .approche-item:last-child { border-bottom: none; }
}

/* ============================================
   HISTOIRE
   ============================================ */
/* Histoire — section sombre pour alternance bleu/beige */
.histoire {
  background: var(--deep-teal);
  color: var(--ivory);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.histoire::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 140%;
  background: radial-gradient(ellipse, rgba(184,153,104,0.10), transparent 65%);
  pointer-events: none;
}
.histoire .container { position: relative; z-index: 1; }
.histoire .eyebrow { color: var(--copper); }
.histoire h2, .histoire h3 { color: var(--ivory); }
.histoire p { color: rgba(245,240,232,0.85); }
.histoire .pullquote { color: var(--ivory); border-left-color: var(--copper); }
.histoire-visual { border: 1px solid rgba(184,153,104,0.25); }
.histoire-visual-overlay { background: linear-gradient(180deg, rgba(14,58,76,0) 0%, rgba(14,58,76,0.55) 35%, rgba(14,58,76,0.88) 100%); backdrop-filter: blur(2px); }
.histoire-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.histoire-visual {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.histoire-visual img { width: 100%; height: 100%; object-fit: cover; }
.histoire-visual-overlay {
  position: absolute;
  bottom: 0; left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(14,58,76,0) 0%, rgba(14,58,76,0.55) 35%, rgba(14,58,76,0.88) 100%);
  backdrop-filter: blur(2px);
  color: var(--ivory);
  padding: 3.5rem 2.25rem 1.75rem;
  max-width: 100%;
}
.histoire-visual-overlay .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--copper);
}
.histoire-visual-overlay .label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  color: rgba(245, 240, 232, 0.8);
}
.histoire-content .eyebrow { display: inline-block; margin-bottom: 1.5rem; }
.histoire-content h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: 2rem;
  letter-spacing: -0.025em;
}
.histoire-content p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 52ch;
  font-weight: 300;
}
.histoire-content blockquote {
  border-left: 2px solid var(--copper);
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--deep-teal);
  line-height: 1.4;
  margin: 2rem 0;
  max-width: 38ch;
}
@media (max-width: 880px) {
  .histoire-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PARCOURS
   ============================================ */
.parcours { background: var(--cream); }
.parcours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}
.parcours-step {
  padding: 3.5rem 1.5rem 3rem 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.parcours-step:last-child { border-right: none; }
.parcours-step::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 44px; height: 2px;
  background: var(--copper);
}
.parcours-step .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--copper);
  margin-bottom: 1.5rem;
  margin-top: -0.5rem;
}
.parcours-step h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  margin-bottom: 0.85rem;
  color: var(--deep-teal);
  letter-spacing: -0.015em;
}
.parcours-step p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.65;
  padding-right: 1rem;
  font-weight: 300;
}
@media (max-width: 880px) {
  .parcours-grid { grid-template-columns: 1fr; border-top: none; }
  .parcours-step {
    border-right: none;
    border-top: 1px solid var(--line);
    padding: 2rem 0;
  }
}

/* ============================================
   TÉMOIGNAGE
   ============================================ */
.temoignage {
  background: var(--ivory-warm);
  text-align: center;
}
.temoignage blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.3;
  color: var(--deep-teal);
  max-width: 24ch;
  margin: 2rem auto;
  letter-spacing: -0.015em;
}
.temoignage cite {
  display: block;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 2.5rem;
}
.temoignage-mark {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  color: var(--copper);
  opacity: 0.5;
}

/* ============================================
   CTA BAND — bande sombre Apple-style
   ============================================ */
/* CTA band - now beige (alternance) with strong teal CTA inside */
.cta-band {
  background: var(--paper);
  color: var(--deep-teal);
  padding: clamp(5rem, 9vw, 7rem) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cta-band::before {
  content: '';
  position: absolute;
  bottom: -50%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(184,153,104,0.18), transparent 65%);
  pointer-events: none;
}
.cta-band-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-band-text .eyebrow { color: var(--copper); display: inline-block; margin-bottom: 1.25rem; }
.cta-band-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  color: var(--deep-teal);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}
.cta-band-text h2 em { color: var(--copper); font-style: italic; }
.cta-band-text p {
  font-size: 1.1rem;
  color: rgba(14, 39, 48, 0.72);
  font-weight: 300;
  max-width: 42ch;
}
.cta-band-inner > a {
  justify-self: end;
}
@media (max-width: 880px) {
  .cta-band-inner { grid-template-columns: 1fr; text-align: center; }
  .cta-band-text p { margin-left: auto; margin-right: auto; }
  .cta-band-inner > a { justify-self: center; }
}

/* ============================================
   CONTACT
   ============================================ */
/* Contact-quick - bleu profond pour fermer la home */
.contact {
  background: var(--deep-teal);
  color: var(--ivory);
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.contact .eyebrow { color: var(--copper); }
.contact .contact-info h2 { color: var(--ivory); }
.contact .contact-info > p { color: rgba(245,240,232,0.78); }
.contact .contact-block { border-top-color: rgba(184,153,104,0.18); }
.contact .contact-block:last-of-type { border-bottom: 1px solid rgba(184,153,104,0.18); }
.contact .contact-block-label { color: var(--copper); }
.contact .contact-block-content { color: var(--ivory); }
.contact .contact-block-content a { color: var(--ivory); }
.contact .contact-block-content a:hover { color: var(--copper); }
.contact .contact-block-content small { color: rgba(245,240,232,0.55); }
.contact .factlist { border-top-color: rgba(184,153,104,0.25); }
.contact .factlist .label { color: var(--copper); }
.contact .factlist .value { color: var(--ivory); }
/* Form card on dark bg: switch to ivory card for contrast */
.contact .contact-form-card {
  background: var(--ivory);
  color: var(--deep-teal);
  border: 1px solid rgba(184,153,104,0.20);
}
.contact .contact-form-card h3 { color: var(--deep-teal); }
.contact .contact-form-card p { color: var(--ink-soft); opacity: 1; }
.contact .contact-form-card .form-row label { color: var(--copper); }
.contact .contact-form-card .form-row input,
.contact .contact-form-card .form-row select,
.contact .contact-form-card .form-row textarea {
  background: rgba(14,58,76,0.04);
  border: 1px solid rgba(14,58,76,0.15);
  color: var(--deep-teal);
}
.contact .contact-form-card .form-row input:focus,
.contact .contact-form-card .form-row select:focus,
.contact .contact-form-card .form-row textarea:focus {
  border-color: var(--copper);
  background: #fff;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.contact-info .eyebrow { display: inline-block; margin-bottom: 1.5rem; }
.contact-info h2 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); margin-bottom: 1.75rem; max-width: 14ch; letter-spacing: -0.025em; }
.contact-info > p { color: var(--ink-soft); margin-bottom: 3rem; max-width: 40ch; line-height: 1.7; font-weight: 300; font-size: 1.05rem; }

.contact-block {
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  align-items: start;
}
.contact-block:last-of-type { border-bottom: 1px solid var(--line); }
.contact-block-label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  padding-top: 6px;
}
.contact-block-content {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--deep-teal);
}
.contact-block-content a { transition: color 0.3s; }
.contact-block-content a:hover { color: var(--copper); }
.contact-block-content small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: 300;
}

.contact-form-card {
  background: var(--deep-teal);
  color: var(--ivory);
  padding: clamp(2.25rem, 4vw, 3rem);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.contact-form-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(184,153,104,0.12), transparent 65%);
  pointer-events: none;
}
.contact-form-card > * { position: relative; z-index: 1; }
.contact-form-card h3 {
  color: var(--ivory);
  font-size: 1.9rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.contact-form-card .eyebrow { color: var(--copper); margin-bottom: 1.5rem; display: inline-block; }
.contact-form-card p {
  font-size: 0.95rem;
  opacity: 0.78;
  margin-bottom: 2rem;
  line-height: 1.6;
  font-weight: 300;
}
.form-row { margin-bottom: 1.25rem; }
.form-row label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.6rem;
}
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 240, 232, 0.22);
  padding: 0.75rem 0;
  color: var(--ivory);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-bottom-color: var(--copper);
}
.form-row textarea { min-height: 80px; resize: vertical; }
.form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23B89968' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}
.form-row select option { background: var(--deep-teal); color: var(--ivory); }
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--copper);
  color: var(--deep-teal);
  width: 100%;
  padding: 1.15rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1.25rem;
  transition: all 0.4s var(--ease);
}
.form-submit:hover {
  background: var(--ivory);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.3);
}
.form-submit svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.form-submit:hover svg { transform: translateX(4px); }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-block { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--ink);
  color: var(--ivory);
  padding: 5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer h5 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1.5rem;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.75rem; }
.footer ul a {
  font-size: 0.92rem;
  color: rgba(245, 240, 232, 0.7);
  transition: color 0.3s;
  font-weight: 300;
}
.footer ul a:hover { color: var(--copper); }
.footer-brand-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.footer-brand-desc {
  font-size: 0.92rem;
  color: rgba(245, 240, 232, 0.6);
  line-height: 1.7;
  max-width: 32ch;
  font-weight: 300;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 240, 232, 0.08);
  font-size: 0.78rem;
  color: rgba(245, 240, 232, 0.5);
  flex-wrap: wrap;
  gap: 1rem;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   FLOATING CTA — visible en permanence sur mobile, discret desktop
   ============================================ */
.floating-cta {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 90;
  background: var(--deep-teal);
  color: var(--ivory);
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  box-shadow: 0 20px 50px -15px rgba(14, 58, 76, 0.5), 0 0 0 1px rgba(184, 153, 104, 0.3);
  transition: transform 0.6s var(--ease), background 0.3s var(--ease);
}
.floating-cta.show {
  transform: translateX(-50%) translateY(0);
}
.floating-cta:hover { background: var(--ink); }
.floating-cta svg {
  width: 16px; height: 16px;
  color: var(--copper);
}

/* ============================================
   REVEAL
   ============================================ */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
}
html.js-reveal .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   COOKIE
   ============================================ */
.cookie {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  max-width: 380px;
  background: var(--deep-teal);
  color: var(--ivory);
  padding: 1.1rem 1.4rem;
  border-radius: 8px;
  z-index: 200;
  font-size: 0.82rem;
  display: none;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.3);
}
.cookie.visible { display: block; }
@media (max-width: 600px) {
  .cookie { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
  .floating-cta { bottom: 5.5rem; }
}
.cookie p { margin-bottom: 1rem; line-height: 1.5; }
.cookie-actions { display: flex; gap: 0.75rem; }
.cookie-btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.cookie-btn.accept { background: var(--copper); color: var(--deep-teal); }
.cookie-btn.refuse { background: transparent; color: var(--ivory); border: 1px solid rgba(245,240,232,0.3); }

/* ============================================
   HERO VIDÉO — Cinematic loop
   ============================================ */
.hero-video-wrap {
  margin-top: 4rem;
  position: relative;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.hero-video-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--deep-teal);
  aspect-ratio: 16/9;
  max-height: 78vh;
  box-shadow: 0 60px 120px -40px rgba(14, 58, 76, 0.45);
}
.hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 58, 76, 0.25));
  pointer-events: none;
}
.hero-video-caption {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  color: var(--ivory);
  z-index: 2;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.01em;
  max-width: 22ch;
  line-height: 1.4;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero-video-caption::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--copper);
  margin-bottom: 0.85rem;
}

/* ============================================
   PAGE HEADER (sous-pages) — sobre, calé sous nav
   ============================================ */
.page-header {
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--paper);
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.page-header::before {
  content: '';
  position: absolute;
  top: 30%; right: -20%;
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(184,153,104,0.08), transparent 65%);
  pointer-events: none;
}
.page-header-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.breadcrumb {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--copper); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--deep-teal); }
.breadcrumb-sep { color: var(--line); font-size: 0.7rem; }
.breadcrumb span:last-child { color: var(--ink-soft); }

.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--deep-teal);
  max-width: 22ch;
  margin-bottom: 1.75rem;
  font-weight: 400;
}
.page-title em { color: var(--copper); font-style: italic; }
.page-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 58ch;
  font-weight: 300;
}

/* ============================================
   PROSE — contenu éditorial sous-pages
   ============================================ */
/* Alternance beige (default) → teal (.alt) sur toutes les pages */
.prose-section { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--cream, #F5F0E8); color: var(--deep-teal); }
.prose-section.alt { background: var(--deep-teal); color: #fff; }
.prose-section.alt h1, .prose-section.alt h2, .prose-section.alt h3, .prose-section.alt h4 { color: #fff; }
.prose-section.alt p, .prose-section.alt li { color: rgba(255, 255, 255, 0.9); }
.prose-section.alt .eyebrow { color: var(--copper); }
.prose-section.alt em { color: var(--copper); }
.prose-section.alt strong { color: #fff; }
.prose-section.alt a:not(.btn-primary):not(.btn-ghost) { color: var(--copper); }
.prose-section.alt .prose-aside .eyebrow { color: var(--copper); }
.prose-section.dark { background: var(--deep-teal); color: var(--ivory); }
.prose-section.dark h2, .prose-section.dark h3 { color: var(--ivory); }
.prose-section.dark p { color: rgba(245, 240, 232, 0.82); }
.prose-section.dark em { color: var(--copper); }
.prose-section.dark li { color: rgba(245, 240, 232, 0.86); }
.prose-section.dark strong { color: var(--ivory); }
.prose-section.dark .eyebrow { color: var(--copper); }

.prose-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.prose-grid.reverse { grid-template-columns: 1.4fr 1fr; }
.prose-grid.reverse .prose-text { order: 1; }
.prose-grid.reverse .prose-visual { order: 2; }

.prose-aside .eyebrow { display: block; margin-bottom: 1rem; }
.prose-aside h2 {
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 14ch;
}
.prose-aside p {
  color: var(--ink-soft);
  margin-top: 1.25rem;
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 32ch;
}

.prose-text > * + * { margin-top: 1.35rem; }
.prose-text p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink);
  font-weight: 400;
  max-width: 60ch;
}
.prose-text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  letter-spacing: -0.015em;
  margin-top: 2.5rem !important;
  margin-bottom: 0.85rem;
  color: var(--deep-teal);
}
.prose-text h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  margin-top: 2rem !important;
  margin-bottom: 0.5rem;
}
.prose-text ul { padding-left: 0; list-style: none; }
.prose-text ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
}
.prose-text ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px; height: 1px;
  background: var(--copper);
}
.prose-text ol {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}
.prose-text ol li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.4rem;
  line-height: 1.7;
  max-width: 60ch;
}
.prose-text ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--copper);
  line-height: 1;
}
.prose-text strong { color: var(--deep-teal); font-weight: 600; }
.prose-text blockquote {
  border-left: 2px solid var(--copper);
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--deep-teal);
  line-height: 1.4;
  margin: 2rem 0 !important;
  max-width: 40ch;
}

.prose-visual {
  position: sticky;
  top: 6rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ivory-warm);
  aspect-ratio: 3/4;
}
.prose-visual img { width: 100%; height: 100%; object-fit: cover; }
.prose-visual.flat { aspect-ratio: 4/3; }
.prose-visual figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(14, 58, 76, 0.95), transparent);
  color: var(--ivory);
  padding: 2.5rem 1.5rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Variantes prose-visual : anatomy (fond sombre, image entière) + product (fond clair) */
.prose-visual.anatomy {
  aspect-ratio: 4/3;
  background: #0a1418;
}
.prose-visual.anatomy img { object-fit: cover; }
.prose-visual.product {
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, #F5F0E8 0%, #E8DFD0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.prose-visual.product img { object-fit: contain; }
.prose-visual.product figcaption {
  background: linear-gradient(to top, rgba(14, 58, 76, 0.92), transparent);
}

@media (max-width: 880px) {
  .prose-grid, .prose-grid.reverse { grid-template-columns: 1fr; }
  .prose-grid.reverse .prose-text { order: 2; }
  .prose-grid.reverse .prose-visual { order: 1; }
  .prose-visual { position: relative; top: 0; aspect-ratio: 4/3; }
  .prose-visual.product { aspect-ratio: 3/4; }
  .prose-aside h2 { max-width: none; }
}

/* ============================================
   Phases-grid : grille 4 cards anatomiques
   ============================================ */
.phases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 4rem 0 3rem;
}
.phase-card {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(14, 58, 76, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.phase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -20px rgba(14, 58, 76, 0.25);
}
.phase-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #0a1418;
}
.phase-card figcaption {
  padding: 1.75rem 1.75rem 2rem;
  position: relative;
  flex: 1;
}
.phase-card .phase-number {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--copper);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}
.phase-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--deep-teal);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.phase-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.phases-conclusion {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--deep-teal);
  text-align: center;
  max-width: 760px;
  margin: 2rem auto 0;
}

@media (max-width: 880px) {
  .phases-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .phases-conclusion { font-size: 1.1rem; }
}

/* ============================================
   FULL prose (single-column éditorial)
   ============================================ */
.prose-single {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.prose-single > * + * { margin-top: 1.35rem; }
.prose-single h2 {
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-top: 3rem !important;
  margin-bottom: 1rem;
}
.prose-single h2:first-child { margin-top: 0 !important; }
.prose-single h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  margin-top: 2.2rem !important;
  margin-bottom: 0.6rem;
  color: var(--deep-teal);
}
.prose-single p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--ink);
}
.prose-single ul li, .prose-single ol li {
  font-size: 1.02rem;
  line-height: 1.7;
}
.prose-single ul { padding-left: 0; list-style: none; }
.prose-single ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.prose-single ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px; height: 1px;
  background: var(--copper);
}
.prose-single ol {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}
.prose-single ol li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.4rem;
}
.prose-single ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--copper);
  line-height: 1;
}

/* ============================================
   SPEC ROW — chiffres / data points
   ============================================ */
.spec-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: var(--container);
  margin: clamp(2rem, 4vw, 3rem) auto;
}
.spec-cell {
  padding: 2.5rem 1.5rem;
  border-right: 1px solid var(--line-soft);
}
.spec-cell:last-child { border-right: none; }
.spec-cell .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--deep-teal);
  margin-bottom: 0.7rem;
  font-weight: 400;
}
.spec-cell .num em { color: var(--copper); font-style: italic; }
.spec-cell .label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 880px) {
  .spec-row { grid-template-columns: 1fr 1fr; }
  .spec-cell { padding: 1.5rem 1rem; border-bottom: 1px solid var(--line-soft); }
  .spec-cell:nth-child(2) { border-right: none; }
  .spec-cell .num { font-size: 2rem; }
}

/* ============================================
   SPECIALITIES INDEX CARDS — pour /nos-specialites
   ============================================ */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.spec-card {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.6s var(--ease);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.spec-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(14, 58, 76, 0.3);
}
.spec-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ivory-warm);
}
.spec-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.spec-card:hover .spec-card-img img { transform: scale(1.05); }
.spec-card-body { padding: 2.25rem 2.25rem 2.5rem; flex: 1; display: flex; flex-direction: column; }
.spec-card-body .eyebrow { display: inline-block; margin-bottom: 0.9rem; }
.spec-card-body h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  letter-spacing: -0.018em;
  line-height: 1.05;
}
.spec-card-body p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 1.5rem;
  flex: 1;
}
.spec-card-link {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep-teal);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  transition: gap 0.3s, color 0.3s;
}
.spec-card:hover .spec-card-link { gap: 1rem; color: var(--copper); }

/* Sub-cards list (sous /nos-specialites/ortheses) */
.subcards {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.subcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.4s var(--ease);
}
.subcard:hover {
  border-color: var(--copper);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -25px rgba(14, 58, 76, 0.2);
}
.subcard .eyebrow { display: inline-block; }
.subcard h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--deep-teal);
}
.subcard p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.55;
}
.subcard-arrow {
  margin-top: auto;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-teal);
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  transition: gap 0.3s;
}
.subcard:hover .subcard-arrow { gap: 0.95rem; color: var(--copper); }

@media (max-width: 880px) {
  .specs-grid, .subcards { grid-template-columns: 1fr; }
}

/* ============================================
   FAQ — accordéon sobre
   ============================================ */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  color: var(--deep-teal);
  letter-spacing: -0.012em;
  cursor: pointer;
  padding: 0.6rem 0;
  background: none;
  border: none;
  line-height: 1.25;
}
.faq-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--copper);
  transition: transform 0.4s var(--ease);
}
.faq-icon::before {
  top: 50%; left: 0; right: 0; height: 1.5px;
  transform: translateY(-50%);
}
.faq-icon::after {
  left: 50%; top: 0; bottom: 0; width: 1.5px;
  transform: translateX(-50%);
}
.faq-item.open .faq-icon::after { transform: translateX(-50%) rotate(90deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease);
}
.faq-answer-inner {
  padding: 0.85rem 0 0.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 70ch;
}
.faq-item.open .faq-answer { max-height: 700px; }

/* ============================================
   CONTACT pleine page
   ============================================ */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.contact-page-info > .eyebrow { display: inline-block; margin-bottom: 1rem; }
.contact-page-info h2 {
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  letter-spacing: -0.022em;
  max-width: 14ch;
  margin-bottom: 1.5rem;
}
.contact-page-info p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1rem;
  max-width: 42ch;
}

/* Page figure (illustration inline dans une page contenu) */
.page-figure {
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 8px 32px -12px rgba(14, 58, 76, 0.18);
}
.page-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.page-figure.tall img { aspect-ratio: 4 / 5; }
.page-figure figcaption {
  padding: 0.9rem 1.2rem 1rem;
  font-size: 0.82rem;
  color: var(--ink);
  opacity: 0.62;
  letter-spacing: 0.02em;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
}
.page-figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
}
@media (max-width: 720px) {
  .page-figure-grid { grid-template-columns: 1fr; }
}
.page-figure-grid .page-figure { margin: 0; }

/* Planning notice — fond bleu, texte blanc (règle de contraste) */
.notice {
  background: var(--deep-teal);
  border-left: 3px solid var(--copper);
  padding: 1.5rem 1.75rem;
  border-radius: 0 8px 8px 0;
  margin: 2.5rem 0;
  color: #fff;
}
.notice .label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.7rem;
  display: block;
}
.notice p,
.contact-page-info .notice p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #fff !important;
  margin: 0 0 0.6rem;
}
.notice p strong,
.contact-page-info .notice p strong { color: #fff !important; }
.notice ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.notice ul li,
.contact-page-info .notice ul li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 0.4rem;
}
.notice ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 10px; height: 1px;
  background: var(--copper);
}
.notice ul li strong,
.contact-page-info .notice ul li strong { color: #fff !important; font-weight: 600; }

@media (max-width: 880px) {
  .contact-page-grid { grid-template-columns: 1fr; }
}

/* ============================================
   GENERIC TABLE / mini-fact rows
   ============================================ */
.factlist {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin: 3rem 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 2rem;
}
.factlist li { list-style: none; }
.factlist .label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.45rem;
}
.factlist .value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  color: var(--deep-teal);
  line-height: 1.3;
}
@media (max-width: 880px) {
  .factlist { grid-template-columns: 1fr; }
}

/* ============================================
   HERO PHOTO (replaces video hero)
   ============================================ */
.hero-photo {
  position: relative;
  min-height: 92vh;
  max-height: 880px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(14,58,76,0.72) 0%,
      rgba(14,58,76,0.58) 35%,
      rgba(14,58,76,0.32) 60%,
      rgba(14,58,76,0.18) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.42) 100%);
  z-index: 1;
}
/* (la vidéo reste visible même avec prefers-reduced-motion — on a juste un loop lent silencieux) */
.hero-photo-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 6rem;
  padding-bottom: 5rem;
}
.hero-photo-content {
  max-width: 640px;
  color: #fff;
}
.eyebrow-light {
  color: var(--copper) !important;
  opacity: 1 !important;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 500;
}
.hero-photo-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  font-weight: 400;
  color: #fff;
  margin: 1.4rem 0 1.6rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero-photo-title em {
  font-style: italic;
  color: var(--copper);
  font-weight: 400;
}
.hero-photo-lead {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2.4rem;
  max-width: 520px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.hero-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.8rem;
}
.btn-ghost-light {
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
}
.hero-photo-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 480px;
}
.hero-photo-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-photo-phone svg {
  width: 17px;
  height: 17px;
  color: var(--copper);
}
.hero-photo-phone:hover { color: var(--copper); }
.hero-photo-loc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}

@media (max-width: 780px) {
  .hero-photo {
    min-height: 78vh;
    background-position: 68% center;
  }
  .hero-photo-overlay {
    background:
      linear-gradient(180deg,
        rgba(14,58,76,0.35) 0%,
        rgba(14,58,76,0.45) 60%,
        rgba(14,58,76,0.62) 100%);
  }
  .hero-photo-inner { padding-top: 5rem; padding-bottom: 3rem; }
  .hero-photo-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero-photo-lead { font-size: 1rem; }
}

/* =============================================
   PLANNING NOTICE (encart d'information patients)
   ============================================= */
.planning-notice {
  background: var(--paper);
  border-top: 1px solid rgba(14, 58, 76, 0.08);
  border-bottom: 1px solid rgba(14, 58, 76, 0.08);
  padding: 1.5rem 0;
}
.planning-notice-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.planning-notice-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--deep-teal);
  color: var(--ivory);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.planning-notice-icon svg { width: 22px; height: 22px; }
.planning-notice-text .eyebrow {
  color: var(--copper);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.3rem;
  display: block;
}
.planning-notice-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--deep-teal);
}
.planning-notice-text strong { color: var(--deep-teal); font-weight: 600; }
@media (max-width: 880px) {
  .planning-notice-inner {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  .planning-notice-inner > a { grid-column: 1 / -1; justify-self: start; }
}

/* =============================================
   FAUTEUILS SECTION & PRESTATIONS GRID
   ============================================= */
.fauteuils-section {
  background: var(--deep-teal);
  color: var(--ivory);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.fauteuils-section .eyebrow { color: var(--copper); }
.fauteuils-section h2 {
  color: var(--ivory);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  margin: 0.5rem 0 1.5rem;
}
.fauteuils-section h2 em { font-style: italic; color: var(--copper); }
.fauteuils-section p { color: rgba(245, 240, 232, 0.85); }
.fauteuils-section .reglementation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(184, 153, 104, 0.4);
  border-radius: 999px;
  color: var(--copper);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.prestations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.prestation-card {
  background: var(--ivory);
  color: var(--deep-teal);
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  text-align: left;
}
.prestation-card .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--copper);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.5rem;
}
.prestation-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--deep-teal);
}
.prestation-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(14, 58, 76, 0.78);
  margin: 0;
}
@media (max-width: 1024px) { .prestations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prestations-grid { grid-template-columns: 1fr; } }

/* ============================================
   NEW HERO — Simplified, mobile-first, video bg
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0E3A4C;
  margin-top: 0;
}
.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  background: #0E3A4C;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg,
      rgba(14,58,76,0.62) 0%,
      rgba(14,58,76,0.42) 40%,
      rgba(14,58,76,0.22) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container, 1240px);
  margin: 0 auto;
  padding: 8rem clamp(1.5rem, 5vw, 3rem) 5rem;
  color: #fff;
}
.hero__content { max-width: 640px; }
.hero__eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper, #B89968);
  margin-bottom: 1.6rem;
  font-weight: 500;
}
.hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.4rem;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--copper, #B89968);
}
.hero__lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin: 0 0 2.2rem;
  max-width: 540px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.6rem;
}
.hero__info {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 1.6rem;
  max-width: 520px;
}
.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 500;
  font-size: 1.04rem;
  text-decoration: none;
  transition: color 0.2s ease;
  margin-bottom: 0.45rem;
}
.hero__phone svg { width: 17px; height: 17px; color: var(--copper, #B89968); }
.hero__phone:hover { color: var(--copper, #B89968); }
.hero__loc {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}

@media (max-width: 780px) {
  .hero { min-height: 88vh; }
  .hero__inner { padding: 6rem clamp(1.25rem, 6vw, 2rem) 3.5rem; }
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(14,58,76,0.30) 0%,
        rgba(14,58,76,0.45) 60%,
        rgba(14,58,76,0.65) 100%);
  }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero__lead { font-size: 1rem; }
  .hero__actions { gap: 0.75rem; }
}

/* ===== iOS inline-playback hardening ===== */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  background: #0E3A4C;
}
.hero__media .hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) translateZ(0);
  -webkit-transform: translate(-50%, -50%) translateZ(0);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #0E3A4C;
  will-change: transform;
}
/* Hide native iOS video controls / fullscreen button if Safari ever injects them */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-play-button,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-fullscreen-button,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== Hero layout split top/bottom for better video visibility ===== */
.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92vh;
}
.hero__top { max-width: 640px; }
.hero__bottom { max-width: 640px; }
.hero__bottom .hero__lead {
  margin-bottom: 1.6rem;
}
.hero__bottom .hero__info {
  margin-top: 1.6rem;
}

/* Lighter overlay so the video is clearly visible in the middle */
.hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(14,58,76,0.62) 0%,
      rgba(14,58,76,0.32) 28%,
      rgba(14,58,76,0.18) 50%,
      rgba(14,58,76,0.38) 72%,
      rgba(14,58,76,0.70) 100%) !important;
}

@media (max-width: 780px) {
  .hero { min-height: 100vh; }
  .hero__inner {
    min-height: 100vh;
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }
  /* Pull video out so it shows wider, less zoomed-in */
  .hero__media .hero__video {
    width: auto;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
  .hero__title {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.05;
  }
  .hero__eyebrow {
    font-size: 0.7rem;
    margin-bottom: 1rem;
  }
  .hero__lead {
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(14,58,76,0.78) 0%,
        rgba(14,58,76,0.42) 22%,
        rgba(14,58,76,0.18) 45%,
        rgba(14,58,76,0.22) 55%,
        rgba(14,58,76,0.55) 78%,
        rgba(14,58,76,0.82) 100%) !important;
  }
}

/* ===== Hero loop image (replaces video for iOS compatibility) ===== */
img.hero__video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ===== Canvas-based hero (iOS-proof) ===== */
canvas.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
  background: #0E3A4C;
}

/* ===== Hero mobile: 3-image Ken Burns slideshow (no <video> tag) ===== */
.hero__video--mobile,
.hero__video--desktop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #0E3A4C;
  pointer-events: none;
  overflow: hidden;
}
.hero__video--mobile { display: none; }
.hero__video--mobile {
  background-image: url('../images/hero_m1.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  animation: heroKenBurns 18s ease-in-out infinite;
}
.hero__video--mobile::before,
.hero__video--mobile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
.hero__video--mobile::before {
  background-image: url('../images/hero_m2.jpg');
  animation: heroFade1 18s ease-in-out infinite;
}
.hero__video--mobile::after {
  background-image: url('../images/hero_m3.jpg');
  animation: heroFade2 18s ease-in-out infinite;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.05) translate(-1%, -1%); }
  50%  { transform: scale(1.12) translate(1%, 1%); }
  100% { transform: scale(1.05) translate(-1%, -1%); }
}
@keyframes heroFade1 {
  0%, 25% { opacity: 0; transform: scale(1.05); }
  33%, 58% { opacity: 1; transform: scale(1.10); }
  66%, 100% { opacity: 0; transform: scale(1.05); }
}
@keyframes heroFade2 {
  0%, 58% { opacity: 0; transform: scale(1.05); }
  66%, 91% { opacity: 1; transform: scale(1.10); }
  100% { opacity: 0; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video--mobile,
  .hero__video--mobile::before,
  .hero__video--mobile::after { animation: none; transform: none; }
}

/* ===== Hero mobile slideshow (real <img> elements, JS-driven) ===== */
.hero__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0E3A4C;
  pointer-events: none;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transform: scale(1.05);
}
.hero__slide.is-active {
  opacity: 1;
  animation: heroSlideKenBurns 6s ease-in-out forwards;
}
@keyframes heroSlideKenBurns {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.2%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active { animation: none; transform: scale(1.05); }
}

/* Overlay transparent par-dessus la vidéo mobile : absorbe les taps pour
   empêcher iOS Safari d'ouvrir le lecteur vidéo natif en plein écran */
.hero__tap-blocker {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important; /* au-dessus de la vidéo (z-0), sous le contenu (z-2) */
  background: transparent !important;
  pointer-events: auto !important;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== Hero mobile : vidéo directe en fond (canvas masqué) ===== */
.hero .hero__media .hero__video.hero__video--bg,
.hero__video.hero__video--bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  pointer-events: none !important;
  background: #0E3A4C !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hero__video.hero__video--bg::-webkit-media-controls,
.hero__video.hero__video--bg::-webkit-media-controls-panel,
.hero__video.hero__video--bg::-webkit-media-controls-play-button,
.hero__video.hero__video--bg::-webkit-media-controls-start-playback-button,
.hero__video.hero__video--bg::-webkit-media-controls-overlay-play-button,
.hero__video.hero__video--bg::-webkit-media-controls-fullscreen-button,
.hero__video.hero__video--bg::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== Canvas hero (video drawn pixel-by-pixel, untouchable) ===== */
.hero__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: #0E3A4C url('../images/hero-still.jpg') center center / cover no-repeat;
  pointer-events: none;
}
/* MOBILE HERO VIDEO — mp4 décodé en hardware iOS, pointer-events:none
   pour bloquer tout tap d'atteindre la vidéo (donc pas de fullscreen natif).
   Par défaut caché (desktop utilise le canvas). */
.hero__mobile-video {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #0E3A4C;
  border: 0;
  outline: 0;
}
.hero__mobile-video::-webkit-media-controls,
.hero__mobile-video::-webkit-media-controls-panel,
.hero__mobile-video::-webkit-media-controls-start-playback-button,
.hero__mobile-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .hero__mobile-video { display: block; z-index: 1; }
  .hero__canvas { display: none !important; }
}
.hero__hidden-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Le canvas couvre la vidéo et bloque les taps pour empêcher iOS Safari
   d'ouvrir la vidéo en plein écran natif au tap */
.hero__canvas {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
/* Belt-and-suspenders : si iOS affiche la vidéo native malgré tout, on la cache via clip + transform */
.hero__hidden-video::-webkit-media-controls,
.hero__hidden-video::-webkit-media-controls-panel,
.hero__hidden-video::-webkit-media-controls-start-playback-button,
.hero__hidden-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}

/* ===== Hero is now video-only, text moved below ===== */
.hero {
  min-height: 92vh !important;
  height: 92vh;
  max-height: none;
  padding: 0 !important;
  margin-top: 0;
}
@media (max-width: 780px) {
  .hero {
    min-height: 88vh !important;
    height: 88vh;
    max-height: none;
  }
}
/* Lighter overlay since no text on top */
.hero .hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(14,58,76,0.08) 0%,
      rgba(14,58,76,0.05) 50%,
      rgba(14,58,76,0.20) 100%) !important;
}

/* ===== Hero Intro (text section below the video) ===== */
.hero-intro {
  background: var(--ivory, #F5F0E8);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(14,58,76,0.08);
}
.hero-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.hero-intro__eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper, #B89968);
  margin-bottom: 1.4rem;
  font-weight: 500;
}
.hero-intro__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--deep-teal, #0E3A4C);
  margin: 0 0 1.4rem;
}
.hero-intro__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--copper, #B89968);
}
.hero-intro__lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: rgba(14,58,76,0.78);
  margin: 0 0 2.2rem;
  max-width: 560px;
}
.hero-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.hero-intro__info {
  border-top: 1px solid rgba(14,58,76,0.15);
  padding-top: 1.4rem;
  max-width: 560px;
}
.hero-intro__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--deep-teal, #0E3A4C);
  font-weight: 500;
  font-size: 1.04rem;
  text-decoration: none;
  margin-bottom: 0.4rem;
}
.hero-intro__phone svg {
  width: 17px; height: 17px; color: var(--copper, #B89968);
}
.hero-intro__loc {
  font-size: 0.88rem;
  color: rgba(14,58,76,0.65);
  line-height: 1.5;
}
@media (max-width: 780px) {
  .hero-intro { padding: 2.8rem 0 2.4rem; }
  .hero-intro__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-intro__lead { font-size: 1rem; }
}

/* ===== Brand logo (PNG, navy + ivory variants) ===== */
.nav-brand-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
/* Nav is now teal everywhere — always show ivory logo + white text */
.nav-brand-img--navy { display: none; }
.nav-brand-img--ivory { display: block; }
.nav .nav-brand-text { color: #fff; }
.nav .nav-brand-sub { color: rgba(255,255,255,0.85); }
.nav-links a { color: #fff; }
.nav-links a:not(.nav-cta):hover { color: var(--copper, #B89968); }
.nav-toggle span { background: #fff; }

/* CTA button — ivory text on copper, stays readable on teal nav */
.nav-cta { color: #fff; }

/* ===== Cruro-pédieuse — auto-rotating carousel ===== */
.cruro-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 18px;
  background: #0a1a22;
}
.cruro-carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}
.cruro-carousel__img.is-active { opacity: 1; }

/* ===== Force white text on every teal/dark block =====
   Scoped to the section's own prose containers (.container > direct text),
   NEVER on nested cards that have their own light background
   (phase-card, solution-card, etc.). */
.prose-section.dark,
.prose-section.teal,
section.bg-teal,
.bg-teal {
  background: var(--deep-teal) !important;
  color: #fff !important;
}
/* Direct prose blocks inside teal sections */
.prose-section.dark > .container .prose-single,
.prose-section.dark > .container .prose-text,
.prose-section.dark > .container .prose-aside,
.prose-section.dark > .container > .reveal,
.prose-section.teal > .container .prose-single,
.prose-section.teal > .container .prose-text,
.prose-section.teal > .container .prose-aside,
.prose-section.teal > .container > .reveal,
section.bg-teal > .container .prose-single,
section.bg-teal > .container .prose-text,
section.bg-teal > .container .prose-aside,
section.bg-teal > .container > .reveal {
  color: #fff;
}
.prose-section.dark > .container .prose-single h1,
.prose-section.dark > .container .prose-single h2,
.prose-section.dark > .container .prose-single h3,
.prose-section.dark > .container .prose-single h4,
.prose-section.dark > .container .prose-text h1,
.prose-section.dark > .container .prose-text h2,
.prose-section.dark > .container .prose-text h3,
.prose-section.dark > .container .prose-text h4,
.prose-section.dark > .container .prose-aside h1,
.prose-section.dark > .container .prose-aside h2,
.prose-section.dark > .container .prose-aside h3,
.prose-section.dark > .container .prose-aside h4,
.prose-section.teal > .container .prose-single h1,
.prose-section.teal > .container .prose-single h2,
.prose-section.teal > .container .prose-single h3,
.prose-section.teal > .container .prose-single h4,
.prose-section.teal > .container .prose-text h1,
.prose-section.teal > .container .prose-text h2,
.prose-section.teal > .container .prose-text h3,
.prose-section.teal > .container .prose-text h4,
.prose-section.teal > .container .prose-aside h1,
.prose-section.teal > .container .prose-aside h2,
.prose-section.teal > .container .prose-aside h3,
.prose-section.teal > .container .prose-aside h4,
section.bg-teal > .container .prose-single h1,
section.bg-teal > .container .prose-single h2,
section.bg-teal > .container .prose-single h3,
section.bg-teal > .container .prose-single h4,
section.bg-teal > .container .prose-text h1,
section.bg-teal > .container .prose-text h2,
section.bg-teal > .container .prose-text h3,
section.bg-teal > .container .prose-text h4,
section.bg-teal > .container .prose-aside h1,
section.bg-teal > .container .prose-aside h2,
section.bg-teal > .container .prose-aside h3,
section.bg-teal > .container .prose-aside h4 {
  color: #fff;
}
.prose-section.dark > .container .prose-single p,
.prose-section.dark > .container .prose-single li,
.prose-section.dark > .container .prose-single .eyebrow,
.prose-section.dark > .container .prose-text p,
.prose-section.dark > .container .prose-text li,
.prose-section.dark > .container .prose-text .eyebrow,
.prose-section.dark > .container .prose-aside p,
.prose-section.dark > .container .prose-aside li,
.prose-section.dark > .container .prose-aside .eyebrow,
.prose-section.teal > .container .prose-single p,
.prose-section.teal > .container .prose-single li,
.prose-section.teal > .container .prose-single .eyebrow,
.prose-section.teal > .container .prose-text p,
.prose-section.teal > .container .prose-text li,
.prose-section.teal > .container .prose-text .eyebrow,
.prose-section.teal > .container .prose-aside p,
.prose-section.teal > .container .prose-aside li,
.prose-section.teal > .container .prose-aside .eyebrow,
section.bg-teal > .container .prose-single p,
section.bg-teal > .container .prose-single li,
section.bg-teal > .container .prose-single .eyebrow,
section.bg-teal > .container .prose-text p,
section.bg-teal > .container .prose-text li,
section.bg-teal > .container .prose-text .eyebrow,
section.bg-teal > .container .prose-aside p,
section.bg-teal > .container .prose-aside li,
section.bg-teal > .container .prose-aside .eyebrow {
  color: rgba(255, 255, 255, 0.92);
}
.prose-section.dark > .container em,
.prose-section.teal > .container em,
section.bg-teal > .container em {
  color: var(--copper);
}
.prose-section.dark > .container .prose-single a:not(.btn-primary):not(.btn-ghost),
.prose-section.dark > .container .prose-text a:not(.btn-primary):not(.btn-ghost),
.prose-section.teal > .container .prose-single a:not(.btn-primary):not(.btn-ghost),
.prose-section.teal > .container .prose-text a:not(.btn-primary):not(.btn-ghost),
section.bg-teal > .container .prose-single a:not(.btn-primary):not(.btn-ghost),
section.bg-teal > .container .prose-text a:not(.btn-primary):not(.btn-ghost) {
  color: var(--copper);
}
/* Cards keep their own dark text on their light background — phase-card, etc. */
.prose-section.dark .phase-card,
.prose-section.teal .phase-card,
section.bg-teal .phase-card {
  background: var(--ivory);
  color: var(--deep-teal);
}
.prose-section.dark .phase-card h3,
.prose-section.teal .phase-card h3,
section.bg-teal .phase-card h3 {
  color: var(--deep-teal);
}
.prose-section.dark .phase-card p,
.prose-section.teal .phase-card p,
section.bg-teal .phase-card p {
  color: var(--ink-soft, #4a5a64);
}
.prose-section.dark .phase-card .phase-number,
.prose-section.teal .phase-card .phase-number,
section.bg-teal .phase-card .phase-number {
  color: var(--copper);
}
/* Beige/cream/paper blocks keep dark teal text */
.bg-beige, section.bg-beige, .prose-section.beige {
  background: var(--cream, #F5F0E8) !important;
  color: var(--deep-teal) !important;
}

/* ============================================================
   RÈGLE UNIVERSELLE DE CONTRASTE — DERNIÈRE PASSE
   Si fond bleu → texte blanc (sauf cartes à fond clair).
   Si fond beige → texte bleu foncé (sauf cartes à fond foncé).
   ============================================================ */

/* --- 1. TEAL/DARK SECTIONS : tout le texte en blanc --- */
.prose-section.alt,
.prose-section.dark,
.prose-section.teal,
section.bg-teal,
.bg-teal,
.cta-band.dark,
.histoire,
.contact,
.craft {
  background: var(--deep-teal);
  color: #fff;
}

.prose-section.alt *:not(.phase-card):not(.phase-card *):not(.solution-card):not(.solution-card *):not(.solution-card-body):not(.solution-card-body *):not(.approche-item):not(.approche-item *):not(.contact-form-card):not(.contact-form-card *):not(.notice):not(.notice *):not(.spec-card):not(.spec-card *):not(.subcard):not(.subcard *):not(.prestation-card):not(.prestation-card *):not(.btn-primary):not(.btn-ghost):not(.btn-outline):not(svg):not(svg *),
.prose-section.dark *:not(.phase-card):not(.phase-card *):not(.solution-card):not(.solution-card *):not(.solution-card-body):not(.solution-card-body *):not(.approche-item):not(.approche-item *):not(.contact-form-card):not(.contact-form-card *):not(.notice):not(.notice *):not(.spec-card):not(.spec-card *):not(.subcard):not(.subcard *):not(.prestation-card):not(.prestation-card *):not(.btn-primary):not(.btn-ghost):not(.btn-outline):not(svg):not(svg *),
.prose-section.teal *:not(.phase-card):not(.phase-card *):not(.solution-card):not(.solution-card *):not(.solution-card-body):not(.solution-card-body *):not(.approche-item):not(.approche-item *):not(.contact-form-card):not(.contact-form-card *):not(.notice):not(.notice *):not(.spec-card):not(.spec-card *):not(.subcard):not(.subcard *):not(.prestation-card):not(.prestation-card *):not(.btn-primary):not(.btn-ghost):not(.btn-outline):not(svg):not(svg *),
section.bg-teal *:not(.phase-card):not(.phase-card *):not(.solution-card):not(.solution-card *):not(.solution-card-body):not(.solution-card-body *):not(.approche-item):not(.approche-item *):not(.contact-form-card):not(.contact-form-card *):not(.notice):not(.notice *):not(.spec-card):not(.spec-card *):not(.subcard):not(.subcard *):not(.prestation-card):not(.prestation-card *):not(.btn-primary):not(.btn-ghost):not(.btn-outline):not(svg):not(svg *) {
  color: #fff !important;
}

/* Titres en blanc pur, sous-textes en ivory légèrement adouci */
.prose-section.alt h1, .prose-section.alt h2, .prose-section.alt h3, .prose-section.alt h4, .prose-section.alt h5, .prose-section.alt h6,
.prose-section.dark h1, .prose-section.dark h2, .prose-section.dark h3, .prose-section.dark h4, .prose-section.dark h5, .prose-section.dark h6,
.prose-section.teal h1, .prose-section.teal h2, .prose-section.teal h3, .prose-section.teal h4, .prose-section.teal h5, .prose-section.teal h6,
section.bg-teal h1, section.bg-teal h2, section.bg-teal h3, section.bg-teal h4, section.bg-teal h5, section.bg-teal h6 {
  color: #fff !important;
}

.prose-section.alt p, .prose-section.alt li, .prose-section.alt blockquote, .prose-section.alt small, .prose-section.alt span,
.prose-section.dark p, .prose-section.dark li, .prose-section.dark blockquote, .prose-section.dark small, .prose-section.dark span,
.prose-section.teal p, .prose-section.teal li, .prose-section.teal blockquote, .prose-section.teal small, .prose-section.teal span,
section.bg-teal p, section.bg-teal li, section.bg-teal blockquote, section.bg-teal small, section.bg-teal span {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Strong reste blanc franc */
.prose-section.alt strong, .prose-section.dark strong, .prose-section.teal strong, section.bg-teal strong {
  color: #fff !important;
}

/* Accents copper (eyebrow / em / liens) — copper sur fond bleu = OK */
.prose-section.alt .eyebrow, .prose-section.alt em,
.prose-section.dark .eyebrow, .prose-section.dark em,
.prose-section.teal .eyebrow, .prose-section.teal em,
section.bg-teal .eyebrow, section.bg-teal em {
  color: var(--copper) !important;
}

.prose-section.alt a:not(.btn-primary):not(.btn-ghost):not(.btn-outline),
.prose-section.dark a:not(.btn-primary):not(.btn-ghost):not(.btn-outline),
.prose-section.teal a:not(.btn-primary):not(.btn-ghost):not(.btn-outline),
section.bg-teal a:not(.btn-primary):not(.btn-ghost):not(.btn-outline) {
  color: var(--copper) !important;
}

/* Puces de liste, compteurs ordonnés et bordures décoratives en copper */
.prose-section.alt .prose-text ul li::before,
.prose-section.dark .prose-text ul li::before,
.prose-section.teal .prose-text ul li::before,
section.bg-teal .prose-text ul li::before,
.prose-section.alt .prose-single ul li::before,
.prose-section.dark .prose-single ul li::before,
.prose-section.teal .prose-single ul li::before,
section.bg-teal .prose-single ul li::before {
  background: var(--copper) !important;
}

.prose-section.alt blockquote, .prose-section.dark blockquote,
.prose-section.teal blockquote, section.bg-teal blockquote {
  border-left-color: var(--copper) !important;
  color: #fff !important;
}

/* --- 2. CARTES À FOND CLAIR DANS LES SECTIONS TEAL : texte foncé --- */
.prose-section.alt .phase-card,
.prose-section.dark .phase-card,
.prose-section.teal .phase-card,
section.bg-teal .phase-card,
.prose-section.alt .approche-item,
.prose-section.dark .approche-item,
.prose-section.teal .approche-item,
section.bg-teal .approche-item,
.prose-section.alt .notice,
.prose-section.dark .notice,
.prose-section.teal .notice,
section.bg-teal .notice {
  background: var(--ivory);
  color: var(--deep-teal) !important;
}

.prose-section.alt .phase-card *, .prose-section.dark .phase-card *, .prose-section.teal .phase-card *, section.bg-teal .phase-card *,
.prose-section.alt .approche-item *, .prose-section.dark .approche-item *, .prose-section.teal .approche-item *, section.bg-teal .approche-item *,
.prose-section.alt .notice *, .prose-section.dark .notice *, .prose-section.teal .notice *, section.bg-teal .notice * {
  color: var(--deep-teal) !important;
}

/* Spec-cards / sub-cards / prestation-cards / solution-cards : fond clair, texte foncé */
/* Spécificité augmentée via duplication de classe pour battre .prose-section.alt h3 */
section.prose-section .spec-card.spec-card,
section.prose-section .subcard.subcard,
section.prose-section .prestation-card.prestation-card,
section.prose-section .solution-card.solution-card {
  background: var(--cream) !important;
  color: var(--deep-teal) !important;
}
section.prose-section .spec-card.spec-card h1,
section.prose-section .spec-card.spec-card h2,
section.prose-section .spec-card.spec-card h3,
section.prose-section .spec-card.spec-card h4,
section.prose-section .spec-card.spec-card h5,
section.prose-section .spec-card.spec-card h6,
section.prose-section .subcard.subcard h1,
section.prose-section .subcard.subcard h2,
section.prose-section .subcard.subcard h3,
section.prose-section .subcard.subcard h4,
section.prose-section .subcard.subcard h5,
section.prose-section .subcard.subcard h6,
section.prose-section .prestation-card.prestation-card h1,
section.prose-section .prestation-card.prestation-card h2,
section.prose-section .prestation-card.prestation-card h3,
section.prose-section .prestation-card.prestation-card h4,
section.prose-section .prestation-card.prestation-card h5,
section.prose-section .prestation-card.prestation-card h6,
section.prose-section .solution-card.solution-card h1,
section.prose-section .solution-card.solution-card h2,
section.prose-section .solution-card.solution-card h3,
section.prose-section .solution-card.solution-card h4,
section.prose-section .solution-card.solution-card h5,
section.prose-section .solution-card.solution-card h6 {
  color: var(--deep-teal) !important;
}
section.prose-section .spec-card.spec-card p,
section.prose-section .spec-card.spec-card li,
section.prose-section .spec-card.spec-card span,
section.prose-section .subcard.subcard p,
section.prose-section .subcard.subcard li,
section.prose-section .subcard.subcard span,
section.prose-section .prestation-card.prestation-card p,
section.prose-section .prestation-card.prestation-card li,
section.prose-section .prestation-card.prestation-card span,
section.prose-section .solution-card.solution-card p,
section.prose-section .solution-card.solution-card li,
section.prose-section .solution-card.solution-card span {
  color: var(--ink-soft) !important;
}
section.prose-section .spec-card.spec-card .eyebrow,
section.prose-section .subcard.subcard .eyebrow,
section.prose-section .prestation-card.prestation-card .eyebrow,
section.prose-section .solution-card.solution-card .eyebrow,
section.prose-section .prestation-card.prestation-card .num {
  color: var(--copper) !important;
}

/* Liens d'action (Découvrir, Lire, Nous contacter) : deep-teal lisible, copper au hover */
section.prose-section .spec-card.spec-card .spec-card-link,
section.prose-section .subcard.subcard .subcard-arrow,
.spec-card .spec-card-link,
.subcard .subcard-arrow {
  color: var(--deep-teal) !important;
}
.spec-card:hover .spec-card-link,
.subcard:hover .subcard-arrow,
section.prose-section .spec-card.spec-card:hover .spec-card-link,
section.prose-section .subcard.subcard:hover .subcard-arrow {
  color: var(--copper) !important;
}
section.prose-section .spec-card.spec-card .spec-card-body strong,
section.prose-section .subcard.subcard strong,
section.prose-section .prestation-card.prestation-card strong,
section.prose-section .solution-card.solution-card strong {
  color: var(--deep-teal) !important;
}

/* Carte formulaire contact : spécificité maximale (5 classes) pour battre :not(.alt):not(.dark):not(.teal) */
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card {
  background: var(--deep-teal) !important;
  color: #fff !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card h1,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card h2,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card h3,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card h4,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card h5,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card h6 {
  color: #fff !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card p,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card label,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card span,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card small,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card li {
  color: rgba(255, 255, 255, 0.92) !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card strong {
  color: #fff !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card .eyebrow {
  color: var(--copper) !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card input,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card select,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card textarea {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card input::placeholder,
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card .form-submit {
  background: var(--copper) !important;
  color: var(--deep-teal) !important;
}
section.prose-section.prose-section .contact-form-card.contact-form-card.contact-form-card .form-submit svg {
  stroke: var(--deep-teal) !important;
}

/* Lien téléphone et e-mail : assurer un bon contraste partout */
.contact-block-content a[href^="tel:"],
.contact-block-content a[href^="mailto:"] {
  color: var(--deep-teal) !important;
  background: transparent !important;
}
.contact-block-content a[href^="tel:"]:hover,
.contact-block-content a[href^="mailto:"]:hover {
  color: var(--copper) !important;
}
section.contact .contact-block-content a[href^="tel:"],
section.contact .contact-block-content a[href^="mailto:"] {
  color: #fff !important;
}
section.contact .contact-block-content a[href^="tel:"]:hover,
section.contact .contact-block-content a[href^="mailto:"]:hover {
  color: var(--copper) !important;
}
/* CTA flottant téléphone */
.floating-cta a, .floating-cta a span { color: #fff !important; }

/* Sauf les eyebrow et accents copper à l'intérieur des cartes claires */
.prose-section.alt .phase-card .phase-number, .prose-section.dark .phase-card .phase-number, .prose-section.teal .phase-card .phase-number, section.bg-teal .phase-card .phase-number,
.prose-section.alt .phase-card .eyebrow, .prose-section.dark .phase-card .eyebrow, .prose-section.teal .phase-card .eyebrow, section.bg-teal .phase-card .eyebrow,
.prose-section.alt .solution-card .eyebrow, .prose-section.dark .solution-card .eyebrow, .prose-section.teal .solution-card .eyebrow, section.bg-teal .solution-card .eyebrow,
.prose-section.alt .approche-item .eyebrow, .prose-section.dark .approche-item .eyebrow, .prose-section.teal .approche-item .eyebrow, section.bg-teal .approche-item .eyebrow,
.prose-section.alt .contact-form-card .eyebrow, .prose-section.dark .contact-form-card .eyebrow, .prose-section.teal .contact-form-card .eyebrow, section.bg-teal .contact-form-card .eyebrow,
.prose-section.alt .notice .label, .prose-section.dark .notice .label, .prose-section.teal .notice .label, section.bg-teal .notice .label {
  color: var(--copper) !important;
}

/* --- 3. SECTIONS BEIGE/CREAM : tout le texte en bleu foncé --- */
.prose-section:not(.alt):not(.dark):not(.teal),
.bg-beige,
section.bg-beige,
.prose-section.beige,
.cta-band:not(.dark) {
  background: var(--cream);
  color: var(--deep-teal);
}

.prose-section:not(.alt):not(.dark):not(.teal) h1,
.prose-section:not(.alt):not(.dark):not(.teal) h2,
.prose-section:not(.alt):not(.dark):not(.teal) h3,
.prose-section:not(.alt):not(.dark):not(.teal) h4,
.prose-section:not(.alt):not(.dark):not(.teal) h5,
.prose-section:not(.alt):not(.dark):not(.teal) h6,
.prose-section:not(.alt):not(.dark):not(.teal) strong {
  color: var(--deep-teal) !important;
}

.prose-section:not(.alt):not(.dark):not(.teal) p,
.prose-section:not(.alt):not(.dark):not(.teal) li,
.prose-section:not(.alt):not(.dark):not(.teal) small,
.prose-section:not(.alt):not(.dark):not(.teal) span:not(.eyebrow):not(.label) {
  color: var(--ink) !important;
}

.prose-section:not(.alt):not(.dark):not(.teal) .eyebrow,
.prose-section:not(.alt):not(.dark):not(.teal) em,
.prose-section:not(.alt):not(.dark):not(.teal) .label {
  color: var(--copper) !important;
}

/* Exception : .notice garde son fond teal + texte blanc, même dans une section beige */
.prose-section:not(.alt):not(.dark):not(.teal) .notice,
.prose-section:not(.alt):not(.dark):not(.teal) .notice * {
  color: #fff !important;
}
.prose-section:not(.alt):not(.dark):not(.teal) .notice {
  background: var(--deep-teal) !important;
}
.prose-section:not(.alt):not(.dark):not(.teal) .notice p,
.prose-section:not(.alt):not(.dark):not(.teal) .notice li {
  color: rgba(255, 255, 255, 0.92) !important;
}
.prose-section:not(.alt):not(.dark):not(.teal) .notice strong,
.prose-section:not(.alt):not(.dark):not(.teal) .notice h1,
.prose-section:not(.alt):not(.dark):not(.teal) .notice h2,
.prose-section:not(.alt):not(.dark):not(.teal) .notice h3,
.prose-section:not(.alt):not(.dark):not(.teal) .notice h4 {
  color: #fff !important;
}
.prose-section:not(.alt):not(.dark):not(.teal) .notice .label {
  color: var(--copper) !important;
}

/* Exception : carte formulaire contact a un fond teal même dans une section beige */
.prose-section .contact-form-card {
  background: var(--deep-teal) !important;
  color: #fff !important;
}
.prose-section .contact-form-card h1,
.prose-section .contact-form-card h2,
.prose-section .contact-form-card h3,
.prose-section .contact-form-card h4,
.prose-section .contact-form-card p,
.prose-section .contact-form-card label,
.prose-section .contact-form-card span,
.prose-section .contact-form-card small {
  color: #fff !important;
}
.prose-section .contact-form-card p,
.prose-section .contact-form-card label,
.prose-section .contact-form-card small {
  color: rgba(255, 255, 255, 0.92) !important;
}
.prose-section .contact-form-card .eyebrow {
  color: var(--copper) !important;
}
.prose-section .contact-form-card input,
.prose-section .contact-form-card select,
.prose-section .contact-form-card textarea {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.prose-section .contact-form-card input::placeholder,
.prose-section .contact-form-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
.prose-section .contact-form-card .form-submit {
  background: var(--copper) !important;
  color: var(--deep-teal) !important;
}

/* --- 4. SECTION CONTACT (toujours teal) : forcer texte clair --- */
section.contact h1, section.contact h2, section.contact h3, section.contact h4 { color: #fff !important; }
section.contact p, section.contact li, section.contact small { color: rgba(255,255,255,0.9) !important; }
section.contact .contact-block-label { color: var(--copper) !important; }
section.contact .contact-form-card,
section.contact .contact-form-card * {
  color: var(--deep-teal) !important;
}
section.contact .contact-form-card .eyebrow { color: var(--deep-teal) !important; }

/* --- 5. SECTION CRAFT / HISTOIRE (toujours teal) : forcer texte clair --- */
section.craft h1, section.craft h2, section.craft h3, section.craft h4 { color: #fff !important; }
section.craft p, section.craft li, section.craft small { color: rgba(255,255,255,0.9) !important; }
section.craft .eyebrow, section.craft em { color: var(--copper) !important; }

section.histoire h1, section.histoire h2, section.histoire h3, section.histoire h4 { color: #fff !important; }
section.histoire p, section.histoire li, section.histoire small { color: rgba(255,255,255,0.9) !important; }
section.histoire .eyebrow, section.histoire em, section.histoire .pullquote { color: var(--copper) !important; }

/* --- NAV : toujours fond teal, texte blanc --- */
.nav, .nav.scrolled { background: rgba(14, 58, 76, 0.92); }
.nav .nav-brand,
.nav .nav-brand-text,
.nav .nav-brand a,
.nav .nav-brand span { color: #fff !important; }
.nav .nav-brand-sub { color: var(--copper) !important; }
.nav .nav-brand-mark { color: #fff; }
.nav .nav-links a { color: rgba(255, 255, 255, 0.92) !important; }
.nav .nav-links a:hover { color: var(--copper) !important; }
.nav .nav-cta { color: #fff; }

/* --- 6. PAGE-HEADER : toujours sur fond paper (beige), texte foncé --- */
.page-header { background: var(--paper); color: var(--deep-teal); }
.page-header h1, .page-header h2, .page-header p { color: var(--deep-teal) !important; }
.page-header .eyebrow { color: var(--copper) !important; }
.page-header .breadcrumb a, .page-header .breadcrumb span { color: var(--ink-soft) !important; }
.page-header .breadcrumb a:hover { color: var(--deep-teal) !important; }


/* ===== Hero watermark logo (bottom-right of video) ===== */
/* .hero__media already has position: absolute + inset: 0 above — do NOT override */
.hero__watermark {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  width: clamp(48px, 7vw, 84px);
  height: auto;
  opacity: 0.88;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  z-index: 3;
}


/* =========================================================================
   RÈGLE FINALE : si fond clair → eyebrow/label en deep-teal (lisible)
   si fond teal → eyebrow/label restent en copper (déjà géré)
   ========================================================================= */
.prose-section:not(.dark):not(.teal):not(.alt) .eyebrow,
.prose-section:not(.dark):not(.teal):not(.alt) .label,
section.intro .eyebrow,
section.solutions .eyebrow,
section.approche .eyebrow,
section.cta .eyebrow,
.page-header .eyebrow,
.hero-intro__eyebrow,
.spec-card .eyebrow,
.subcard .eyebrow,
.prestation-card .eyebrow,
.solution-card .eyebrow,
.contact-info .eyebrow,
.faq-section .eyebrow,
.section-header-left .eyebrow,
.cta-band:not(.dark):not(.teal) .eyebrow {
  color: var(--deep-teal) !important;
  opacity: 0.85;
}

/* Garder copper sur fonds teal (override le bloc précédent) */
section.craft .eyebrow,
section.histoire .eyebrow,
section.contact .eyebrow,
section.contact .label,
.prose-section.dark .eyebrow,
.prose-section.teal .eyebrow,
.fauteuils-section .eyebrow,
.contact-form-card .eyebrow {
  color: var(--copper) !important;
  opacity: 1;
}


/* =========================================================================
   RÈGLE NUCLÉAIRE — ABSOLUMENT TOUS les eyebrow/label = deep-teal par défaut
   Sauf si explicitement dans une section sur fond teal
   Spécificité forcée (0,2,0 minimum) pour battre les règles antérieures
   ========================================================================= */
.eyebrow.eyebrow,
.label.label,
.hero-intro__eyebrow.hero-intro__eyebrow,
.spec-card .eyebrow.eyebrow,
.subcard .eyebrow.eyebrow,
.prestation-card .eyebrow.eyebrow,
.solution-card .eyebrow.eyebrow,
.prose-section.alt .spec-card .eyebrow.eyebrow,
.prose-section.alt .subcard .eyebrow.eyebrow,
section.prose-section .spec-card.spec-card .eyebrow.eyebrow,
section.prose-section .subcard.subcard .eyebrow.eyebrow,
section.prose-section .prestation-card.prestation-card .eyebrow.eyebrow,
section.prose-section .solution-card.solution-card .eyebrow.eyebrow {
  color: var(--deep-teal) !important;
}

/* Override : copper UNIQUEMENT sur fonds teal */
section.craft .eyebrow,
section.craft .label,
section.histoire .eyebrow,
section.histoire .label,
section.contact .eyebrow,
section.contact .label,
.prose-section.dark .eyebrow,
.prose-section.dark .label,
.prose-section.teal .eyebrow,
.prose-section.teal .label,
.fauteuils-section .eyebrow,
.fauteuils-section .label,
.cta-band.dark .eyebrow,
.cta-band.teal .eyebrow,
.hero .eyebrow {
  color: var(--copper) !important;
}

/* contact-form-card : fond ivory en pratique → eyebrow deep-teal */
.contact-form-card .eyebrow.eyebrow,
.contact-form-card .label.label {
  color: var(--deep-teal) !important;
}


/* =========================================================================
   HOVER : inversion de couleur sur tous les blocs
   Carte claire (cream/ivory) → carte teal au hover, texte clair
   Carte teal → carte cream au hover, texte deep-teal
   ========================================================================= */
.spec-card,
.subcard,
.prestation-card,
.solution-card,
.phase-card,
.approche-item,
.notice,
.contact-form-card {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

/* === Inversion : carte claire → teal au hover === */
/* Spécificité boostée pour battre section.prose-section .spec-card.spec-card (0,3,1) */
section.prose-section .spec-card.spec-card.spec-card:hover,
section.prose-section .subcard.subcard.subcard:hover,
section.prose-section .prestation-card.prestation-card.prestation-card:hover,
section.prose-section .solution-card.solution-card.solution-card:hover,
.spec-card.spec-card.spec-card:hover,
.subcard.subcard.subcard:hover,
.prestation-card.prestation-card.prestation-card:hover,
.solution-card.solution-card.solution-card:hover,
.phase-card.phase-card.phase-card:hover,
.approche-item.approche-item.approche-item:hover,
.notice.notice.notice:hover {
  background: var(--deep-teal) !important;
  background-color: var(--deep-teal) !important;
  border-color: var(--deep-teal) !important;
  color: var(--ivory) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(14, 58, 76, 0.22);
}

/* Tout le texte des cartes claires devient ivory/blanc au hover */
section.prose-section .spec-card.spec-card.spec-card:hover *,
section.prose-section .subcard.subcard.subcard:hover *,
section.prose-section .prestation-card.prestation-card.prestation-card:hover *,
section.prose-section .solution-card.solution-card.solution-card:hover *,
.spec-card.spec-card.spec-card:hover *,
.subcard.subcard.subcard:hover *,
.prestation-card.prestation-card.prestation-card:hover *,
.solution-card.solution-card.solution-card:hover *,
.phase-card.phase-card.phase-card:hover *,
.approche-item.approche-item.approche-item:hover *,
.notice.notice.notice:hover * {
  color: var(--ivory) !important;
  border-color: rgba(245, 240, 232, 0.25) !important;
}

/* Eyebrows, accents, liens d'action restent copper au hover (sur teal) */
section.prose-section .spec-card.spec-card.spec-card:hover .eyebrow,
section.prose-section .subcard.subcard.subcard:hover .eyebrow,
section.prose-section .prestation-card.prestation-card.prestation-card:hover .eyebrow,
section.prose-section .solution-card.solution-card.solution-card:hover .eyebrow,
.spec-card.spec-card.spec-card:hover .eyebrow,
.subcard.subcard.subcard:hover .eyebrow,
.prestation-card.prestation-card.prestation-card:hover .eyebrow,
.solution-card.solution-card.solution-card:hover .eyebrow,
.phase-card.phase-card.phase-card:hover .eyebrow,
.approche-item.approche-item.approche-item:hover .eyebrow,
.spec-card.spec-card.spec-card:hover .spec-card-link,
.subcard.subcard.subcard:hover .subcard-arrow,
.prestation-card.prestation-card.prestation-card:hover .num,
.phase-card.phase-card.phase-card:hover .phase-number,
.phase-card.phase-card.phase-card:hover .num {
  color: var(--copper) !important;
}

/* Strong & em restent visibles en hover */
.spec-card.spec-card:hover strong,
.spec-card.spec-card:hover em,
.subcard.subcard:hover strong,
.subcard.subcard:hover em,
.prestation-card.prestation-card:hover strong,
.solution-card.solution-card:hover strong,
.phase-card.phase-card:hover strong,
.approche-item.approche-item:hover strong {
  color: #fff !important;
}

/* SVG dans cards prennent currentColor → suivent l'ivory */
.spec-card.spec-card:hover svg,
.subcard.subcard:hover svg,
.prestation-card.prestation-card:hover svg,
.solution-card.solution-card:hover svg,
.phase-card.phase-card:hover svg,
.approche-item.approche-item:hover svg {
  color: var(--ivory) !important;
  stroke: var(--ivory) !important;
}

/* === Inversion inverse : carte teal (contact-form-card si fond deep-teal) → claire au hover ===
   Note : la contact-form-card est en pratique sur fond ivory, donc on inverse vers teal aussi */
.contact-form-card.contact-form-card:hover {
  background: var(--deep-teal) !important;
  color: var(--ivory) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(14, 58, 76, 0.22);
}
.contact-form-card.contact-form-card:hover h1,
.contact-form-card.contact-form-card:hover h2,
.contact-form-card.contact-form-card:hover h3,
.contact-form-card.contact-form-card:hover p,
.contact-form-card.contact-form-card:hover label,
.contact-form-card.contact-form-card:hover small {
  color: var(--ivory) !important;
}
.contact-form-card.contact-form-card:hover .eyebrow { color: var(--copper) !important; }
.contact-form-card.contact-form-card:hover input,
.contact-form-card.contact-form-card:hover textarea,
.contact-form-card.contact-form-card:hover select {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* Curseur pointer sur les cards cliquables (a.spec-card, a.subcard) */
a.spec-card,
a.subcard,
a.prestation-card,
a.solution-card { cursor: pointer; }


/* =========================================================================
   HOVER FAQ : inversion au hover
   ========================================================================= */
.faq-item {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.faq-item.faq-item.faq-item:hover {
  background: var(--deep-teal) !important;
  background-color: var(--deep-teal) !important;
  border-color: var(--deep-teal) !important;
  color: var(--ivory) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(14, 58, 76, 0.22);
}
.faq-item.faq-item.faq-item:hover *,
.faq-item.faq-item.faq-item:hover .faq-question,
.faq-item.faq-item.faq-item:hover .faq-question *,
.faq-item.faq-item.faq-item:hover .faq-answer,
.faq-item.faq-item.faq-item:hover .faq-answer *,
.faq-item.faq-item.faq-item:hover h2,
.faq-item.faq-item.faq-item:hover h3,
.faq-item.faq-item.faq-item:hover h4,
.faq-item.faq-item.faq-item:hover p,
.faq-item.faq-item.faq-item:hover li,
.faq-item.faq-item.faq-item:hover span {
  color: var(--ivory) !important;
  border-color: rgba(245, 240, 232, 0.25) !important;
}
.faq-item.faq-item.faq-item:hover .faq-question {
  background: transparent !important;
}
.faq-item.faq-item.faq-item:hover .eyebrow,
.faq-item.faq-item.faq-item:hover em,
.faq-item.faq-item.faq-item:hover strong {
  color: var(--copper) !important;
}
.faq-item.faq-item.faq-item:hover svg {
  color: var(--ivory) !important;
  stroke: var(--ivory) !important;
}

/* =========================================================================
   PHOTO P4 EN CERCLE PARFAIT — uniquement sur les cartes (home / specialites)
   La page prothese utilise une image déjà padée (-v2) en carré plein.
   ========================================================================= */
.solution-card .solution-card-img:has(img[src*="prothese-p4"]),
.spec-card .spec-card-img:has(img[src*="prothese-p4"]) {
  position: relative;
  background: var(--deep-teal) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  padding: 1.5rem;
}
.solution-card .solution-card-img:has(img[src*="prothese-p4"]) img,
.spec-card .spec-card-img:has(img[src*="prothese-p4"]) img {
  width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%,
    #2a2a2a 0%,
    #1a1a1a 40%,
    #0a0a0a 75%,
    var(--deep-teal) 100%) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6),
              inset 0 0 60px rgba(0,0,0,0.4);
}
/* Pages produit (prothese-p4, suro-studio, etc.) : figure carrée centrée,
   image entière (déjà padée en carré teal) */
figure.page-figure:has(img[src*="prothese-p4-studio-v2"]),
figure.page-figure:has(img[src*="suro-studio-v2"]) {
  max-width: 520px;
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  background: var(--deep-teal) !important;
  border-radius: 18px;
  overflow: hidden;
}
figure.page-figure:has(img[src*="prothese-p4-studio-v2"]) img,
figure.page-figure:has(img[src*="suro-studio-v2"]) img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================================
   FIGURE VIDEO (page orthèse cruro-pédieuse) — plan vidéo plein cadre
   ========================================================================= */
.page-figure.page-figure--video {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 2.5rem;
  border-radius: 18px;
  overflow: hidden;
  background: var(--deep-teal);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
  aspect-ratio: 16 / 9;
  position: relative;
}
.page-figure.page-figure--video .page-figure-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* =========================================================================
   PHOTO ORTHÈSE CARBONE — l'image source est déjà padée en carré teal,
   on l'affiche telle quelle en cover, garanti entière sur tous formats.
   ========================================================================= */
.solution-card .solution-card-img:has(img[src*="orthese-cruro-carbone"]),
.spec-card .spec-card-img:has(img[src*="orthese-cruro-carbone"]),
figure.page-figure:has(img[src*="orthese-cruro-carbone"]) {
  position: relative;
  background: var(--deep-teal) !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.solution-card .solution-card-img:has(img[src*="orthese-cruro-carbone"]) img,
.spec-card .spec-card-img:has(img[src*="orthese-cruro-carbone"]) img,
figure.page-figure:has(img[src*="orthese-cruro-carbone"]) img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: var(--deep-teal) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* La légende sous la figure ronde reste lisible */
figure.page-figure:has(img[src*="prothese-p4"]) figcaption {
  background: transparent !important;
  padding-top: 1rem;
}

/* FAQ hover : surcharge des spans avec plus de spécificité pour battre
   .prose-section:not(.alt):not(.dark):not(.teal) span:not(.eyebrow):not(.label) */
.prose-section .faq-item.faq-item.faq-item:hover,
.prose-section .faq-item.faq-item.faq-item:hover *,
.prose-section .faq-item.faq-item.faq-item:hover button,
.prose-section .faq-item.faq-item.faq-item:hover button span,
.prose-section .faq-item.faq-item.faq-item:hover .faq-question,
.prose-section .faq-item.faq-item.faq-item:hover .faq-question span,
.prose-section .faq-item.faq-item.faq-item:hover .faq-answer,
.prose-section .faq-item.faq-item.faq-item:hover .faq-answer *,
.prose-section .faq-item.faq-item.faq-item:hover p,
.prose-section .faq-item.faq-item.faq-item:hover li,
.prose-section .faq-item.faq-item.faq-item:hover span:not(.eyebrow):not(.label) {
  color: var(--ivory) !important;
}


/* =========================================================================
   IMAGES DANS LES SUBCARDS (4 blocs orthèses)
   ========================================================================= */
/* Subcard reprend son padding original, image dans un cercle centré en haut */
.subcard {
  padding: 2.5rem 2rem 2rem !important;
  text-align: center;
  align-items: center;
}
.subcard .subcard-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: #0a0a0a;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 12px 30px -10px rgba(14, 58, 76, 0.25);
  border: 3px solid var(--ivory);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.subcard .subcard-img img {
  width: 110%;
  height: 110%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.subcard:hover .subcard-img {
  transform: scale(1.04);
  box-shadow: 0 20px 45px -10px rgba(14, 58, 76, 0.4);
}
.subcard:hover .subcard-img img {
  transform: scale(1.08);
}
/* Texte centré sous le cercle */
.subcard .eyebrow {
  margin: 0 0 0.5rem !important;
  display: inline-block;
}
.subcard h4 {
  text-align: center;
}
.subcard p {
  text-align: center;
}
.subcard-arrow {
  margin-top: auto;
  justify-content: center;
  align-self: center;
}
/* Hover : cercle bord teal pour bonne intégration sur fond teal */
.subcard.subcard.subcard:hover .subcard-img {
  border-color: rgba(245, 240, 232, 0.4);
}

/* =========================================================================
   FORM STATUS — retour utilisateur après envoi via Web3Forms
   ========================================================================= */
.form-status {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  display: none;
}
.form-status[data-kind="success"] {
  display: block;
  background: rgba(14, 58, 76, 0.08);
  color: var(--deep-teal);
  border-left: 3px solid var(--deep-teal);
}
.form-status[data-kind="error"] {
  display: block;
  background: rgba(184, 153, 104, 0.12);
  color: var(--deep-teal);
  border-left: 3px solid var(--copper);
}
.form-status[data-kind="error"] a {
  color: var(--deep-teal);
  font-weight: 600;
  text-decoration: underline;
}
.form-status[data-kind="pending"] { display: none; }

/* Inversion sur fond sombre (formulaire dans section dark) */
.prose-section.dark .form-status[data-kind="success"],
.prose-section.teal .form-status[data-kind="success"] {
  background: rgba(245, 240, 232, 0.12);
  color: var(--ivory);
  border-left-color: var(--ivory);
}
.prose-section.dark .form-status[data-kind="error"],
.prose-section.teal .form-status[data-kind="error"] {
  background: rgba(184, 153, 104, 0.18);
  color: var(--ivory);
}
.prose-section.dark .form-status[data-kind="error"] a,
.prose-section.teal .form-status[data-kind="error"] a {
  color: var(--ivory);
}