/* ============================================================
   COACHING DAVID VEILLEUX — style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  --color-bg:      #F5F0E8;
  --color-navy:    #1B2D4F;
  --color-accent:  #C8A96E;
  --color-text:    #2C2C2C;
  --color-white:   #FFFFFF;
  --color-gray-50: #F8F6F2;
  --color-gray-100:#F0EDE6;
  --color-gray-200:#E2DDD4;
  --color-gray-500:#8A8A8A;

  --font-heading:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(27,45,79,.06);
  --shadow-md: 0 4px 16px rgba(27,45,79,.08);
  --shadow-lg: 0 8px 32px rgba(27,45,79,.12);

  --max-w: 1280px;
  --ease: .25s ease;
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
main ul:not([class]):not([style]) {
  list-style: disc;
  padding-left: 1.5rem;
  margin: .75rem 0 1rem;
}
main ul:not([class]):not([style]) li { margin-bottom: .35rem; }
button { cursor:pointer; font:inherit; border:none; background:none; }
input,select,textarea { font:inherit; }

/* ─── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text);
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight:700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem);  font-weight:600; }
h3 { font-size: clamp(1.1rem, 2vw, 1.375rem); font-weight:600; }
h4 { font-size: 1.0625rem; font-weight:600; }
p  { margin-bottom:1rem; }
p:last-child { margin-bottom:0; }
strong { font-weight:600; }

/* ─── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.section      { padding-block: clamp(3.5rem,7vw,5rem); }
.section--sm  { padding-block: clamp(2.5rem,5vw,3.5rem); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  min-height: 44px;
  transition: all var(--ease);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
  border: 2px solid var(--color-navy);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: #243d6a;
  border-color: #243d6a;
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,.5);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255,255,255,.1);
  border-color: var(--color-white);
}
.btn-cta-header {
  background: var(--color-navy);
  color: var(--color-white);
  border: 2px solid var(--color-navy);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .625rem 1.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.btn-cta-header:hover,
.btn-cta-header:focus-visible { background:#243d6a; border-color:#243d6a; }

/* ─── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.site-header.scrolled {
  border-color: var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: .25rem;
}
/* Top row: hamburger (abs left) | logo (center) | lang (abs right) */
.header-top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: .5rem;
}
/* Hamburger — hidden on desktop */
.hamburger {
  position: absolute;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  display: block;
  transition: all var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Logo */
.site-logo a { display:inline-flex; flex-direction:column; align-items:center; text-align:center; gap:.2rem; }
.logo-img { width:40px; height:40px; object-fit:contain; }
.logo-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.logo-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: .06em;
  opacity: .75;
  margin-top: .1rem;
  white-space: nowrap;
}
/* Right cluster: lang + mobile CTA */
.header-right {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: .625rem;
}
/* Lang switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: .2rem;
  font-size: .8125rem;
}
.lang-switcher a {
  padding: .25rem .4rem;
  color: var(--color-text);
  opacity: .5;
  border-radius: 3px;
  transition: opacity var(--ease);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.lang-switcher a:hover,
.lang-switcher a.active { opacity: 1; }
.lang-switcher a.active { font-weight: 600; }
.lang-sep { color: var(--color-gray-500); font-size: .75rem; }

/* Main nav */
.main-nav { width:100%; }
.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  flex-wrap: wrap;
}
.nav-item { position: relative; }
.nav-list > .nav-item > a {
  font-size: .875rem;
  font-weight: 400;
  color: var(--color-text);
  padding: .5rem .75rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .3rem;
  border-bottom: 1px solid transparent;
  transition: all var(--ease);
  white-space: nowrap;
}
.nav-list > .nav-item > a:hover,
.nav-list > .nav-item > a.active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}
/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 210px;
  padding-top: .5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--ease);
  z-index: 200;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: .5625rem 1rem;
  font-size: .875rem;
  color: var(--color-text);
  white-space: nowrap;
  transition: background var(--ease);
  border-bottom: none !important;
}
.nav-dropdown a:hover { background: var(--color-gray-50); color:var(--color-navy); }

/* CTA compact mobile (dans la barre du header) */
.header-mobile-cta {
  display: none;
}

/* Header CTA bar */
.header-cta {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: .875rem 0;
  margin-top: .5rem;
  border-top: 1px solid var(--color-gray-200);
}

/* ─── Mobile nav overlay ─────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  text-align: center;
  padding: 2rem;
  overflow-y: auto;
}
.mobile-nav-overlay.open { display:flex; }
.mobile-nav-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.75rem;
  color: var(--color-navy);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mobile-nav-logo {
  margin-bottom: 1.5rem;
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  width: 100%;
}
.mobile-nav-list a {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: var(--color-navy);
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: .25rem 1rem;
}
.mobile-nav-list a.sub {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text);
  opacity: .65;
  min-height: 36px;
  font-weight: 400;
}
.mobile-lang {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  font-size: .9rem;
}
.mobile-cta { margin-top: 1.5rem; width: 100%; }

/* ─── Hero ───────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem,6vw,5rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(2rem,4vw,4rem);
  align-items: center;
}
.hero-text { max-width:640px; }
.hero-text h1 {
  margin-bottom: 1.25rem;
  color: var(--color-navy);
}
.hero-text p {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 3/4;
}

/* ─── Section Vidéo ──────────────────────────────────────── */
.section-video {
  background: var(--color-navy);
  padding-block: clamp(3.5rem,7vw,5rem);
}
.section-video h2,
.section-video p { color: var(--color-white); }
.video-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem,4vw,4rem);
  align-items: center;
}
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-text h2 { margin-bottom:1rem; }
.video-text p  { opacity:.9; margin-bottom:1.75rem; }

/* ─── Piliers ────────────────────────────────────────────── */
.section-pillars { background: var(--color-bg); }
.pillars-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.pillar-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem,3vw,2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pillar-header {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.pillar-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-navy);
}
.pillar-title {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.pillar-card p {
  font-size: .9375rem;
  line-height: 1.7;
  flex: 1;
}
.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--color-navy);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: gap var(--ease);
  margin-top: auto;
}
.pillar-link:hover { gap:.625rem; }

/* ─── Approche ───────────────────────────────────────────── */
.section-approach { background: var(--color-bg); }
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}
.approach-image img {
  border-radius: var(--radius-md);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}
.approach-text h2 { margin-bottom:1.25rem; }
.approach-text p  { font-size:.9375rem; }
.approach-text .btn { margin-top:1.25rem; }

/* ─── Témoignages ────────────────────────────────────────── */
.section-testimonials { background: var(--color-gray-50); }
.section-testimonials h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scroll-snap-align: start;
}
.stars { color: var(--color-accent); font-size:1rem; letter-spacing:2px; }
.testimonial-text {
  font-size: .9rem;
  line-height: 1.75;
  font-style: italic;
  flex: 1;
}
.testimonial-author {
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-navy);
}
.testimonial-source {
  font-size: .75rem;
  color: var(--color-gray-500);
}
.testimonials-more {
  text-align: center;
  margin-top: 2rem;
}

/* ─── Tarifs résumé ──────────────────────────────────────── */
.section-pricing { background: var(--color-bg); }
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pricing-table th {
  background: var(--color-navy);
  color: var(--color-white);
  padding: .875rem 1.5rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pricing-table td {
  padding: .9375rem 1.5rem;
  font-size: .9375rem;
  border-bottom: 1px solid var(--color-gray-100);
}
.pricing-table tr:last-child td { border-bottom:none; }
.pricing-table tr:hover td { background: var(--color-gray-50); }
.pricing-free { color:var(--color-navy); font-weight:600; }
.pricing-cta  { text-align:center; margin-top:1.75rem; }

/* Pricing page extras */
.pricing-notice,
.pricing-cancel {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.pricing-notice { border-left:4px solid var(--color-accent); }
.pricing-cancel { border-left:4px solid var(--color-navy); }
.pricing-notice h3,
.pricing-cancel h3 {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: .625rem;
}
.ritma-logo { width:72px; margin-bottom:.75rem; }

/* ─── FAQ ────────────────────────────────────────────────── */
.section-faq { background: var(--color-bg); }
.faq-list { max-width:720px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--color-gray-200); }
.faq-item:first-child { border-top:1px solid var(--color-gray-200); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text);
  min-height: 44px;
}
.faq-question:hover { color:var(--color-navy); }
.faq-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  transition: transform var(--ease);
  font-style: normal;
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-answer {
  display: none;
  padding-bottom: 1.25rem;
  font-size: .9375rem;
  line-height: 1.7;
}
.faq-item.open .faq-answer { display:block; }

/* ─── CTA Final ──────────────────────────────────────────── */
.section-cta-final {
  background: var(--color-navy);
  text-align: center;
  padding-block: clamp(3.5rem,7vw,5rem);
}
.section-cta-final h2,
.section-cta-final p { color:var(--color-white); }
.section-cta-final h2 { margin-bottom:.875rem; }
.section-cta-final p  {
  opacity:.85;
  max-width:540px;
  margin-inline:auto;
  margin-bottom:2rem;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-gray-200);
  padding-block: 3.5rem 1.5rem;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin-inline: auto;
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-logo-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.footer-logo-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.footer-name {
  display: block;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: .02em;
}
.footer-sub {
  display: block;
  font-size: .7rem;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .2rem;
}
.footer-tagline {
  font-size: .875rem;
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}
.footer-cta {
  align-self: flex-start;
  font-size: .8125rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
}
.footer-col-title {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: .875rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-gray-200);
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.footer-links a {
  color: var(--color-gray-500);
  text-decoration: none;
  font-size: .8125rem;
  line-height: 1.4;
  transition: color var(--ease);
}
.footer-links a:hover { color: var(--color-navy); }
.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.footer-address p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--color-gray-500);
}
.footer-address a {
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color var(--ease);
}
.footer-address a:hover { color: var(--color-navy); }
.footer-copy {
  text-align: center;
  font-size: .72rem;
  color: var(--color-gray-500);
  margin-top: 1.5rem;
}

/* ─── Page header (inner pages) ──────────────────────────── */
.page-header {
  background: var(--color-navy);
  padding-block: clamp(3rem,6vw,5rem);
  text-align: center;
}
.page-header h1 { color:var(--color-white); max-width:800px; margin-inline:auto; }
.page-header p  {
  color: rgba(255,255,255,.85);
  max-width:580px;
  margin-inline:auto;
  margin-top:1rem;
}

/* ─── Service page layout ────────────────────────────────── */
.service-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(2rem,4vw,4rem);
  align-items: start;
}
.service-sidebar { position:sticky; top:260px; }
.sidebar-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.sidebar-card h3 { font-size:.9375rem; margin-bottom:.875rem; }

/* Steps */
.steps-list { display:flex; flex-direction:column; gap:0; }
.step-item {
  display: flex;
  gap: 1rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--color-gray-200);
}
.step-item:last-child { border-bottom:none; }
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .8125rem;
  flex-shrink: 0;
}
.step-body h4 { color:var(--color-navy); margin-bottom:.2rem; font-size:.9rem; }
.step-body p  { font-size:.875rem; margin:0; }

/* Deontology box */
.deon-box {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  border-left: 4px solid var(--color-navy);
}
.deon-links { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.875rem; }
.deon-links a {
  font-size:.8125rem;
  color:var(--color-navy);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Certifications */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 1rem;
}
.cert-badge {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}
.cert-badge::before {
  content: '✓';
  width: 22px;
  height: 22px;
  background: var(--color-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  flex-shrink: 0;
  margin-top:.05rem;
}

/* GEO answer capsule */
.geo-capsule {
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-gray-500);
  margin-bottom: 1.25rem;
  border-left: 3px solid var(--color-accent);
}

/* Resources grid */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.resource-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.625rem;
  transition: transform var(--ease), box-shadow var(--ease);
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.resource-card h3 { font-size:1rem; margin-bottom:.625rem; }
.resource-card p  { font-size:.875rem; }
.resource-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-navy);
  font-size: .875rem;
  font-weight: 500;
  margin-top: .625rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: gap var(--ease);
}
.resource-link:hover { gap:.6rem; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,4vw,4rem);
  align-items: start;
}
.contact-detail {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: .9375rem;
}
.contact-icon { width:20px; color:var(--color-navy); flex-shrink:0; margin-top:.2rem; }
.map-embed { border-radius:var(--radius-md); overflow:hidden; margin-top:1.5rem; }
.map-embed iframe { width:100%; height:260px; border:0; display:block; }

/* Form */
.contact-form {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.form-group { margin-bottom:1.125rem; }
.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .3rem;
}
.form-field {
  width: 100%;
  padding: .8125rem 1rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 48px;
  transition: border-color var(--ease), background var(--ease);
  appearance: none;
}
.form-field:focus       { outline:none; border-color:var(--color-navy); background:var(--color-white); }
.form-field.focused     { border-color:var(--color-navy); }
.form-field.filled      { background:var(--color-white); }
textarea.form-field     { min-height:140px; resize:vertical; }
.honeypot               { display:none !important; }
.form-note              { font-size:.8rem; color:var(--color-gray-500); margin-top:1rem; text-align:center; }

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  box-shadow: var(--shadow-lg);
  transform: translateX(150%);
  transition: transform .35s cubic-bezier(.22,.8,.44,1);
  z-index: 9999;
  max-width: 340px;
}
.toast.show { transform:translateX(0); }

/* Fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ─── Utilities ──────────────────────────────────────────── */
.text-center   { text-align:center; }
.text-navy     { color:var(--color-navy); }
.section-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: .65;
  margin-bottom: .625rem;
}
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border-width:0;
}
.divider { border:none; border-top:1px solid var(--color-gray-200); margin-block:2rem; }

/* ─── Responsive ─────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media (max-width:1024px) {
  .service-layout { grid-template-columns:1fr; }
  .service-sidebar { position:static; }
  .testimonials-grid { grid-template-columns:1fr 1fr; }
  .approach-grid { grid-template-columns:1fr; }
  .approach-image { max-width:480px; margin-inline:auto; }
}

/* Narrow desktop — prevent nav wrapping before mobile breakpoint */
@media (max-width:960px) and (min-width:769px) {
  .header-cta   { padding:.5rem 0; margin-top:.25rem; }
  .nav-list > .nav-item > a { padding:.5rem .5rem; }
}

/* Mobile (≤ 768px) */
@media (max-width:768px) {
  /* Show hamburger, hide desktop nav */
  .hamburger     { display:flex; }
  .main-nav      { display:none; }
  .header-cta    { display:none; }
  .header-top    { padding-bottom:.25rem; }
  /* Limiter le logo pour qu'il ne déborde pas dans les zones abs */
  .logo-subtitle { display:none; }
  .header-right  { position:absolute; right:0; gap:.5rem; }
  .header-right .lang-switcher { display:none; }
  .header-mobile-cta {
    display: inline-flex;
    align-items: center;
    background: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
    padding: .45rem .75rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  /* Hero */
  .hero-grid     { grid-template-columns:1fr; }
  .hero-image    { display:flex; justify-content:center; order:-1; }
  .hero-image img { max-height:320px; width:auto; }
  .hero-text     { max-width:100%; text-align:center; }
  .hero-text h1  { text-align:center; }
  .hero-text .btn { width:100%; }

  /* Video */
  .video-grid    { grid-template-columns:1fr; }
  .video-text    { text-align:center; }

  /* Pillars */
  .pillars-grid  { grid-template-columns:1fr; }

  /* Testimonials — horizontal scroll */
  .testimonials-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .testimonial-card {
    flex: 0 0 85%;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Pricing table */
  .pricing-table th,
  .pricing-table td { padding:.75rem 1rem; font-size:.875rem; }

  /* Contact */
  .contact-grid  { grid-template-columns:1fr; }

  /* Footer */
  .footer-main  { max-width:none; grid-template-columns:1fr 1fr; text-align:center; }
  .footer-brand { grid-column:1 / -1; align-items:center; }
  .footer-col-title { text-align:center; }
  .footer-links { align-items:center; }
  .footer-address { align-items:center; }
  .footer-cta   { align-self:stretch; text-align:center; }
}

/* Tablette étroite — lang + CTA visibles ensemble */
@media (max-width:768px) and (min-width:481px) {
  .header-right .lang-switcher { display:flex; font-size:.75rem; }
}

/* Small mobile (≤ 480px) */
@media (max-width:480px) {
  h1 { font-size:1.875rem; }
  h2 { font-size:1.3125rem; }
  .section { padding-block:3rem; }
  .section-video,
  .section-cta-final { padding-block:3rem; }
  .testimonials-grid { padding-inline:0; }
  .toast { left:1rem; right:1rem; bottom:1rem; max-width:none; border-radius:var(--radius-sm); }
  .footer-main  { grid-template-columns:1fr; text-align:center; }
  .footer-brand { grid-column:auto; align-items:center; }
}