/* ===== Psico del Deporte — styles ===== */
:root {
  --blue-1: #80C6FA;
  --blue-2: #5DB1F0;
  --blue-3: #289FF8;
  --terra-1: #E0AF9E;
  --terra-2: #D58F76;
  --terra-3: #DC7C5A;
  --paper: #F2F2F5;
  --ink: #1D1D20;
  --ink-soft: #55555c;
  --white: #ffffff;
  --line: rgba(29, 29, 32, .12);

  --f-display: "Darker Grotesque", system-ui, sans-serif;
  --f-body: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --f-serif: "Gowun Batang", Georgia, serif;

  --radius: 28px;
  --radius-sm: 16px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 128px) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-serif);
  font-size: 15px;
  color: var(--terra-3);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.h2 { font-size: clamp(40px, 6vw, 68px); }
.h2 em { font-style: normal; color: var(--blue-3); }
.lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-soft); max-width: 60ch; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--blue-3); outline-offset: 3px; }
.btn--primary { background: var(--terra-3); color: var(--white); box-shadow: 0 6px 0 #b9603f; }
.btn--primary:hover { box-shadow: 0 8px 0 #b9603f; }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--wa { background: #25D366; color: #0b3b1e; }
.btn svg { width: 20px; height: 20px; }

/* ===== Header ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 242, 245, .86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.header.is-scrolled { border-bottom-color: var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.header__logo img { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { position: relative; }
.nav__link {
  font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink);
  background: none; border: 0; padding: 8px 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__link:hover { color: var(--blue-3); }
.nav__link svg { width: 12px; height: 12px; transition: transform .2s ease; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: -18px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-width: 210px;
  list-style: none; margin: 0;
  box-shadow: 0 18px 40px rgba(29, 29, 32, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
.has-dropdown:hover .nav__link svg, .has-dropdown.is-open .nav__link svg { transform: rotate(180deg); }
.dropdown a {
  display: block; padding: 9px 14px; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: 15px;
}
.dropdown a:hover { background: var(--paper); color: var(--blue-3); }
.header__cta { padding: 12px 20px; font-size: 15px; box-shadow: 0 4px 0 #b9603f; }
.burger {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 110px); }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border-radius: 999px;
  padding: 8px 16px 8px 8px; font-size: 14px; font-weight: 700; margin-bottom: 26px;
}
.hero__tag .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--blue-1); display: grid; place-items: center; }
.hero__tag .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-3); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
.hero h1 { font-size: clamp(46px, 6.6vw, 92px); }
.hero h1 .kw { color: var(--blue-3); display: block; }
.hero h1 .accent { color: var(--terra-3); }
.hero__text { margin-top: 26px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__proof { display: flex; align-items: center; gap: 16px; margin-top: 38px; }
.avatars { display: flex; }
.avatars span {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--paper);
  margin-left: -10px;
}
.avatars span:first-child { margin-left: 0; background: var(--blue-2); }
.avatars span:nth-child(2) { background: var(--terra-2); }
.avatars span:nth-child(3) { background: var(--blue-1); }
.avatars span:nth-child(4) { background: var(--terra-3); }
.hero__proof p { font-size: 15px; line-height: 1.35; }
.hero__proof strong { font-family: var(--f-display); font-size: 22px; display: block; }

.hero__visual { position: relative; }
.poster {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--blue-1);
  position: relative;
}
.poster svg { width: 100%; height: 100%; }
.card-name {
  position: absolute; left: -28px; bottom: 36px;
  background: var(--white); border-radius: var(--radius-sm);
  padding: 16px 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 18px 40px rgba(29, 29, 32, .14);
}
.card-name img { width: 48px; height: auto; }
.card-name strong { display: block; font-family: var(--f-display); font-size: 22px; line-height: 1; }
.card-name span { font-size: 13px; color: var(--ink-soft); }
.badge-online {
  position: absolute; top: 26px; right: -18px;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: 10px 18px;
  font-weight: 700; font-size: 14px;
  transform: rotate(6deg);
}

/* ===== Marquee ===== */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding: 20px 0; }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: scroll 32s linear infinite; }
.marquee__track span {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px);
  display: inline-flex; align-items: center; gap: 48px; white-space: nowrap;
}
.marquee__track span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--terra-2); }
.marquee__track span:nth-child(even)::after { background: var(--blue-2); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ===== Problems ===== */
.problems__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.problems__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.problem {
  background: var(--white); border-radius: var(--radius-sm);
  padding: 28px 24px 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s ease, background .25s ease;
}
.problem:hover { transform: translateY(-4px); }
.problem__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.problem__icon svg { width: 26px; height: 26px; }
.problem h3 { font-size: 30px; }
.problem p { font-size: 15px; color: var(--ink-soft); }
.problem--cta {
  background: var(--blue-3); color: var(--white);
  justify-content: space-between;
}
.problem--cta h3 { font-size: 34px; }
.problem--cta p { color: rgba(255, 255, 255, .85); }
.problem--cta .btn { align-self: flex-start; }

/* ===== About ===== */
.about { background: var(--white); border-radius: clamp(28px, 4vw, 48px); margin: 0 clamp(8px, 1.5vw, 20px); }
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about .poster { background: var(--terra-1); aspect-ratio: 1 / 1.1; }
.about__text .h2 { margin-bottom: 26px; }
.about__text .lead + .lead { margin-top: 16px; }
.quote {
  margin: 32px 0 0; padding: 0 0 0 22px;
  border-left: 3px solid var(--terra-2);
  font-family: var(--f-serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.45;
}
.about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 36px 0; }
.stat { background: var(--paper); border-radius: var(--radius-sm); padding: 20px; }
.stat strong { font-family: var(--f-display); font-size: 46px; line-height: 1; display: block; color: var(--blue-3); }
.stat span { font-size: 14px; color: var(--ink-soft); }

/* ===== Steps ===== */
.steps__head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.steps__head .lead { margin: 20px auto 0; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step {
  border-radius: var(--radius); padding: 34px 30px 32px;
  display: flex; flex-direction: column; gap: 16px; min-height: 340px;
  position: relative; overflow: hidden;
}
.step:nth-child(1) { background: var(--blue-1); }
.step:nth-child(2) { background: var(--terra-1); }
.step:nth-child(3) { background: var(--blue-2); color: var(--white); }
.step__num {
  font-family: var(--f-display); font-weight: 800; font-size: 120px; line-height: .7;
  opacity: .9;
}
.step h3 { font-size: 36px; margin-top: auto; }
.step p { font-size: 16px; }
.step .btn { align-self: flex-start; margin-top: 6px; }

/* ===== Testimonials ===== */
.testimonials { background: var(--ink); color: var(--paper); }
.testimonials .h2 em { color: var(--blue-1); }
.testimonials .eyebrow { color: var(--terra-1); }
.testi__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; }
.testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi {
  margin: 0;
  background: #28282c; border-radius: var(--radius); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.testi blockquote { margin: 0; font-family: var(--f-serif); font-size: 19px; line-height: 1.5; }
.testi footer { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testi__avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.testi footer strong { display: block; font-size: 16px; }
.testi footer span { font-size: 14px; color: #a7a7ae; }
.stars { display: flex; gap: 3px; color: var(--terra-2); }
.stars svg { width: 18px; height: 18px; }

/* ===== Sports ===== */
.sports__head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 48px; }
.sports__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sport {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 26px 24px; border-radius: var(--radius-sm);
  background: var(--white); text-decoration: none;
  font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.sport small { display: block; font-family: var(--f-body); font-weight: 600; font-size: 13px; color: var(--ink-soft); margin-top: 6px; transition: color .2s ease; }
.sport__arrow {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper); display: grid; place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.sport__arrow svg { width: 16px; height: 16px; }
.sport:hover { background: var(--blue-3); color: var(--white); }
.sport:hover small { color: rgba(255, 255, 255, .8); }
.sport:hover .sport__arrow { transform: rotate(-45deg); background: var(--white); color: var(--ink); }
.sport--clinic { background: var(--terra-1); }
.sport--clinic:hover { background: var(--terra-3); }

/* ===== FAQ ===== */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq__aside { position: sticky; top: 110px; }
.faq__aside .lead { margin: 20px 0 30px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--white); border-radius: var(--radius-sm); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 26px;
  font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1.05;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .plus {
  width: 34px; height: 34px; border-radius: 50%; background: var(--paper);
  flex-shrink: 0; position: relative; transition: background .2s ease, transform .25s ease;
}
.faq__item summary .plus::before, .faq__item summary .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
  background: var(--ink); transform: translate(-50%, -50%);
}
.faq__item summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] summary .plus { background: var(--blue-1); transform: rotate(45deg); }
.faq__item p { padding: 0 26px 26px; color: var(--ink-soft); max-width: 62ch; }

/* ===== Blog ===== */
.blog__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.post__img { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.post__img svg { width: 100%; height: 100%; transition: transform .4s ease; }
.post:hover .post__img svg { transform: scale(1.04); }
.post__meta { font-size: 13px; font-weight: 700; color: var(--terra-3); text-transform: uppercase; letter-spacing: .06em; }
.post h3 { font-size: 28px; line-height: 1; }
.post:hover h3 { color: var(--blue-3); }

/* ===== Final CTA ===== */
.final { padding: 0 clamp(8px, 1.5vw, 20px) clamp(8px, 1.5vw, 20px); }
.final__box {
  background: var(--blue-3); color: var(--white);
  border-radius: clamp(28px, 4vw, 48px);
  padding: clamp(56px, 8vw, 110px) var(--gutter);
  text-align: center; position: relative; overflow: hidden;
}
.final__box h2 { font-size: clamp(48px, 8vw, 104px); max-width: 12ch; margin: 0 auto; position: relative; }
.final__box p { margin: 22px auto 36px; max-width: 52ch; font-size: 19px; color: rgba(255, 255, 255, .9); position: relative; }
.final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; position: relative; }
.final__deco { position: absolute; inset: 0; pointer-events: none; }

/* ===== Footer ===== */
.footer { background: var(--ink); color: var(--paper); padding: 80px 0 32px; margin-top: clamp(8px, 1.5vw, 20px); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer__brand img { height: 46px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: #a7a7ae; max-width: 32ch; font-size: 15px; }
.footer h4 { font-family: var(--f-serif); font-weight: 400; font-size: 15px; color: var(--terra-1); margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { text-decoration: none; color: var(--paper); font-size: 15px; }
.footer a:hover { color: var(--blue-1); }
.footer__bottom {
  border-top: 1px solid #333338; margin-top: 60px; padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: #a7a7ae;
}

/* ===== WhatsApp floating ===== */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: #0b3b1e;
  border-radius: 999px; padding: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  text-decoration: none; font-weight: 800; font-size: 15px;
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.05); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, padding .3s ease; }
.wa-float:hover span { max-width: 220px; padding-right: 6px; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track, .hero__tag .dot::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .problems__grid { grid-template-columns: repeat(2, 1fr); }
  .sports__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 76px 0 0 0;
    background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 24px var(--gutter) 40px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link { font-family: var(--f-display); font-weight: 800; font-size: 34px; padding: 14px 0; width: 100%; justify-content: space-between; }
  .nav__link svg { width: 18px; height: 18px; }
  .dropdown {
    position: static; box-shadow: none; background: transparent; padding: 0 0 12px;
    opacity: 1; visibility: visible; transform: none; display: none; min-width: 0;
  }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.is-open .dropdown { display: grid; grid-template-columns: 1fr 1fr; }
  .dropdown a { padding: 8px 0; font-size: 17px; }
  .header__cta { width: 100%; padding: 16px; font-size: 16px; }

  .hero__grid, .about__grid, .faq__grid, .problems__head { grid-template-columns: 1fr; }
  .hero__visual { max-width: 460px; width: 100%; margin: 0 auto; }
  .card-name { left: 12px; }
  .badge-online { right: 12px; }
  .steps__grid, .testi__grid, .blog__grid { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .step h3 { margin-top: 12px; }
  .faq__aside { position: static; }
  .about__grid .poster { max-width: 460px; }
  .sports__head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .problems__grid, .sports__grid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .stat { padding: 14px 12px; }
  .stat strong { font-size: 34px; }
  .stat span { font-size: 12px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
  .hero__ctas .btn, .final__ctas .btn { width: 100%; }
  .faq__item summary { font-size: 22px; padding: 20px; }
  .faq__item p { padding: 0 20px 20px; }
  .wa-float { right: 14px; bottom: 14px; }
}

.faq { padding-top: 0; }

/* ===== Photos ===== */
.poster--photo { background: var(--terra-1); }
.poster--photo img { width: 100%; height: 100%; object-fit: cover; }
.card-name__avatar { width: 56px !important; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blue-1); }
.about__photo { position: relative; }
.photo-tag {
  position: absolute; left: 18px; bottom: 18px;
  background: var(--white); border-radius: 999px; padding: 8px 16px;
  font-family: var(--f-serif); font-size: 14px;
}
.wide-photo { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 8; }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post:hover .post__img img { transform: scale(1.04); }

.session {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  margin-top: 20px; background: var(--white); border-radius: var(--radius); padding: clamp(16px, 2vw, 24px);
}
.session__photo { margin: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1 / 1; }
.session__photo img { width: 100%; height: 100%; object-fit: cover; }
.session__text { padding: clamp(8px, 2vw, 24px) clamp(4px, 2vw, 24px) clamp(8px, 2vw, 24px) 0; }
.session__title { font-size: clamp(38px, 4.6vw, 56px); margin-bottom: 24px; }
.session__title em { font-style: normal; color: var(--blue-3); }
.checks { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; }
.checks li { position: relative; padding-left: 36px; color: var(--ink-soft); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (max-width: 900px) {
  .session { grid-template-columns: 1fr; }
  .session__text { padding: 8px; }
  .wide-photo { aspect-ratio: 16 / 9; }
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

/* --- Hero : titre mot par mot --- */
.js .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .hero h1 .w > span {
  display: inline-block; transform: translateY(110%);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 55ms + 100ms);
}
.is-loaded .hero h1 .w > span { transform: none; }

/* --- Hero : éléments d'intro --- */
.js .intro { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.is-loaded .intro { opacity: 1; transform: none; }

/* --- Hero : révélation de la photo --- */
.js .hero__visual .poster { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1) .25s; }
.is-loaded .hero__visual .poster { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .hero__visual .poster img { transform: scale(1.18); transition: transform 1.8s cubic-bezier(.2,.8,.2,1) .25s; }
.is-loaded .hero__visual .poster img { transform: scale(1.05); }
.js .card-name { opacity: 0; transform: translateY(20px) scale(.96); transition: opacity .6s ease 1.1s, transform .7s cubic-bezier(.2,1.4,.4,1) 1.1s; }
.is-loaded .card-name { opacity: 1; transform: none; }
.js .badge-online { opacity: 0; transition: opacity .5s ease 1.3s; }
.is-loaded .badge-online { opacity: 1; animation: floaty 5s ease-in-out 1.8s infinite; }
@keyframes floaty { 0%,100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }

/* --- Hero : cercle de respiration (4 s inspiration / 4 s expiration) --- */
.hero__visual { isolation: isolate; }
.breath {
  position: absolute; z-index: -1;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  right: -14%; top: -10%;
  background: var(--terra-1);
  animation: breathe 8s ease-in-out infinite;
}
.breath::after {
  content: ""; position: absolute; inset: -9%; border-radius: 50%;
  border: 2px solid var(--blue-1);
  animation: breathe 8s ease-in-out infinite .4s;
}
@keyframes breathe { 0%,100% { transform: scale(.82); } 50% { transform: scale(1); } }
.breath-label {
  position: absolute; z-index: 3; left: -14px; top: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border-radius: 999px; padding: 8px 16px 8px 10px;
  font-family: var(--f-serif); font-size: 14px;
  box-shadow: 0 10px 24px rgba(29,29,32,.1);
}
.breath-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--blue-3); animation: breathe 8s ease-in-out infinite; }
.breath-text { min-width: 4.2em; transition: opacity .4s ease; }
.breath-text.is-swapping { opacity: 0; }
.js .breath-label { opacity: 0; transition: opacity .6s ease 1.5s; }
.is-loaded .breath-label { opacity: 1; }

/* --- Apparition en cascade des grilles --- */
.reveal { transition-delay: calc(var(--i, 0) * 80ms); }

/* --- Cartes problèmes : icône qui réagit --- */
.problem:hover .problem__icon { animation: wiggle .5s ease; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.08); } }

/* --- Photos : zoom piloté par le scroll --- */
[data-zoom] { overflow: hidden; }
[data-zoom] img { transform: scale(var(--z, 1)); transform-origin: center; will-change: transform; }

/* --- Étapes : le grand chiffre se remplit --- */
.step__num { -webkit-text-stroke: 2px currentColor; color: transparent; transition: color .8s ease .3s; }
.step.is-visible .step__num { color: inherit; }
.step:nth-child(1).is-visible .step__num, .step:nth-child(2).is-visible .step__num { color: var(--ink); }
.step:nth-child(3).is-visible .step__num { color: var(--white); }

/* --- Bouton principal : flèche + effet magnétique --- */
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn--magnetic { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, color .2s ease; }

/* --- Header : se cache en descendant, revient en remontant --- */
.header { transition: transform .35s ease, border-color .2s ease; }
.header.is-hidden { transform: translateY(-100%); }

/* --- WhatsApp : apparaît après le hero, avec une onde --- */
.wa-float { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .4s ease, transform .4s cubic-bezier(.2,1.4,.4,1); }
.wa-float.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wa-float.is-shown:hover { transform: scale(1.05); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: #25D366; z-index: -1;
  animation: ripple 2.6s ease-out infinite;
}
@keyframes ripple { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* --- FAQ : ouverture fluide --- */
.faq__item p { overflow: hidden; }

/* --- CTA final : formes qui flottent --- */
.final__deco circle { transform-box: fill-box; transform-origin: center; animation: drift 9s ease-in-out infinite; }
.final__deco circle:nth-child(2) { animation-duration: 11s; animation-direction: reverse; }
.final__deco circle:nth-child(3) { animation-duration: 7s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-20px, 14px) scale(1.06); } }

@media (max-width: 900px) {
  .breath { width: 70%; right: -10%; top: -6%; }
  .breath-label { left: 8px; top: 14px; }
}

/* Accessibilité : tout est coupé si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero h1 .w > span, .js .intro, .js .card-name, .js .badge-online, .js .breath-label { transform: none; opacity: 1; }
  .js .hero__visual .poster { clip-path: none; }
  .js .hero__visual .poster img, [data-zoom] img { transform: none; }
  .step__num { color: inherit; -webkit-text-stroke: 0; }
  .wa-float { opacity: 1; transform: none; pointer-events: auto; }
}
.hero { overflow-x: clip; }

/* =====================================================
   CONTRASTE : tons dérivés de la charte
   (texte foncé ton sur ton au lieu du noir sur les aplats,
    fonds plus soutenus derrière le texte blanc)
   ===================================================== */
:root {
  --blue-text: #1A80D4;    /* accents de titres (≥ 3:1 sur fond clair) */
  --terra-text: #A8502E;   /* petits textes terracotta (≥ 4.5:1) */
  --terra-title: #C2603A;  /* grands titres terracotta (≥ 3:1) */
  --blue-strong: #1F6FB5;  /* fond bleu sous texte blanc (5.2:1) */
  --terra-strong: #B85A36; /* fond bouton principal sous texte blanc (4.6:1) */
  --blue-deep: #0E4F80;    /* texte sur bleus clairs */
  --terra-deep: #7A3420;   /* texte sur terracottas clairs */
}
.h2 em, .session__title em { color: var(--blue-text); }
.hero h1 .kw { color: var(--blue-text); }
.hero h1 .accent { color: var(--terra-title); }
.eyebrow { color: var(--terra-text); }
.testimonials .eyebrow { color: var(--terra-1); }
.nav__link:hover, .dropdown a:hover, .post:hover h3 { color: var(--blue-text); }
.post__meta { color: var(--terra-text); }
.stat strong { color: var(--blue-text); }

.btn--primary { background: var(--terra-strong); box-shadow: 0 6px 0 #8A4226; }
.btn--primary:hover { box-shadow: 0 8px 0 #8A4226; }
.header__cta { box-shadow: 0 4px 0 #8A4226; }

/* Icônes des problèmes : trait ton sur ton */
.problem__icon svg { stroke: var(--blue-deep); }
.problem__icon[style*="E0AF9E"] svg, .problem__icon[style*="D58F76"] svg { stroke: var(--terra-deep); }
.problem--cta { background: var(--blue-strong); }

/* Étapes */
.step:nth-child(1) { background: var(--blue-1); color: var(--blue-deep); }
.step:nth-child(2) { background: var(--terra-1); color: var(--terra-deep); }
.step:nth-child(3) { background: var(--blue-strong); color: var(--white); }
.step:nth-child(1).is-visible .step__num { color: var(--blue-deep); }
.step:nth-child(2).is-visible .step__num { color: var(--terra-deep); }
.step:nth-child(3).is-visible .step__num { color: var(--blue-1); }
.step:nth-child(3) .step__num { -webkit-text-stroke-color: var(--blue-1); }

/* Sports */
.sport:hover { background: var(--blue-strong); }
.sport--clinic { color: var(--terra-deep); }
.sport--clinic small { color: var(--terra-deep); opacity: .8; }
.sport--clinic:hover { background: var(--terra-strong); color: var(--white); }

/* CTA final */
.final__box { background: var(--blue-strong); }
.final__deco circle:nth-child(1) { fill: var(--blue-3); }
.final__deco circle:nth-child(2) { fill: var(--blue-2); opacity: .5; }
.final__deco circle:nth-child(3) { fill: var(--terra-2); }

/* Coches de la liste */
.checks li::before {
  background: var(--blue-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4F80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Avis : initiales à la place des photos */
.testi__avatar {
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 22px;
}
.testi:nth-child(1) .testi__avatar { background: var(--blue-1); color: var(--blue-deep); }
.testi:nth-child(2) .testi__avatar { background: var(--terra-1); color: var(--terra-deep); }
.testi:nth-child(3) .testi__avatar { background: var(--blue-2); color: var(--blue-deep); }

/* =====================================================
   CARTE DES PAYS HISPANOPHONES
   ===================================================== */
.map-section { padding-top: clamp(40px, 6vw, 80px); }
.map__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.map__text .h2 { margin-bottom: 22px; }
.chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  background: var(--white); border-radius: 999px; padding: 7px 14px;
  font-size: 14px; font-weight: 700; cursor: default;
  transition: background .2s ease, color .2s ease;
}
.chips li:first-child { background: var(--terra-1); color: var(--terra-deep); }
.chips li:hover, .chips li.is-on { background: var(--blue-strong); color: var(--white); }

.map { margin: 0; background: var(--white); border-radius: var(--radius); padding: clamp(10px, 2vw, 22px); position: relative; }
.map__svg { width: 100%; height: auto; }
.map__bg path { fill: #E6E6EC; stroke: var(--white); stroke-width: .5; }
.map__hisp path { fill: var(--blue-1); stroke: var(--white); stroke-width: .6; transition: fill .25s ease; }
.map__hisp path:hover, .map__hisp path.is-on { fill: var(--blue-strong); }
.map__hisp path.c-home { fill: var(--terra-2); }
.map__hisp path.c-home:hover, .map__hisp path.c-home.is-on { fill: var(--terra-strong); }
.arc { fill: none; stroke: var(--terra-strong); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; }
.cap { fill: var(--blue-deep); stroke: var(--white); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.map.is-drawn .arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1) calc(var(--i) * 80ms); }
.map.is-drawn .cap { transform: scale(1); transition: transform .45s cubic-bezier(.2,1.6,.4,1) calc(var(--i) * 80ms + 1.1s); }
.home-dot { fill: var(--terra-strong); stroke: var(--white); stroke-width: 2.5; }
.home-pulse { fill: var(--terra-2); transform-box: fill-box; transform-origin: center; animation: ripple 2.4s ease-out infinite; }
.map__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 13px; color: var(--ink-soft); padding: 8px 6px 0;
}
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: -8px; }
.lg--home { background: var(--terra-strong); }
.lg--hisp { background: var(--blue-1); margin-left: 8px; }
@media (max-width: 900px) { .map__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .arc { stroke-dashoffset: 0; } .cap { transform: none; }
}
.map__grid { grid-template-columns: .8fr 1.2fr; }
.map-section .h2 { font-size: clamp(38px, 5vw, 60px); }
.map__inset rect { fill: var(--paper); stroke: var(--line); }
.map__inset .map__bg path { fill: #E6E6EC; }
@media (max-width: 900px) { .map__grid { grid-template-columns: 1fr; } }

/* =====================================================
   MINI-TEST
   ===================================================== */
.quiz-section { padding-top: clamp(40px, 6vw, 80px); }
.quiz__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.quiz__intro .h2 { margin-bottom: 22px; }
.countries { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.countries p { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.countries strong { color: var(--ink); }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flags img { width: 32px; height: 24px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); transition: transform .2s ease; }
.flags img:hover { transform: translateY(-3px) scale(1.15); }

.quiz {
  background: var(--white); border-radius: var(--radius);
  padding: clamp(22px, 3.5vw, 40px);
  box-shadow: 0 24px 60px rgba(29,29,32,.08);
  min-height: 520px; display: flex; flex-direction: column;
}
.quiz__top { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.quiz__step { font-family: var(--f-serif); font-size: 15px; color: var(--terra-text); }
.quiz__back { background: none; border: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer; padding: 4px 0; }
.quiz__back:hover { color: var(--ink); }
.quiz__bar { height: 6px; background: var(--paper); border-radius: 6px; margin: 14px 0 30px; overflow: hidden; }
.quiz__bar span { display: block; height: 100%; width: 0; background: var(--blue-3); border-radius: 6px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.quiz__stage { flex: 1; display: flex; flex-direction: column; }
.quiz__panel { animation: qIn .45s cubic-bezier(.2,.8,.2,1) both; display: flex; flex-direction: column; flex: 1; }
.quiz__panel.is-out { animation: qOut .25s ease both; }
@keyframes qIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes qOut { to { opacity: 0; transform: translateX(-28px); } }
.quiz__q { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; margin-bottom: 26px; }
.quiz__opts { display: flex; flex-direction: column; gap: 12px; }
.quiz__opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--paper); border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.quiz__opt:hover { border-color: var(--blue-1); transform: translateX(4px); }
.quiz__opt:focus-visible { outline: 3px solid var(--blue-3); outline-offset: 2px; }
.quiz__opt .k {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white);
  font-size: 13px; color: var(--blue-deep); transition: background .2s ease, color .2s ease;
}
.quiz__opt.is-picked { border-color: var(--blue-strong); background: #E8F3FD; }
.quiz__opt.is-picked .k { background: var(--blue-strong); color: var(--white); }

/* Résultat */
.quiz__result-label { font-family: var(--f-serif); font-size: 15px; color: var(--terra-text); margin-bottom: 8px; }
.quiz__result-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 4vw, 52px); line-height: .95; color: var(--blue-text); margin-bottom: 16px; }
.quiz__result p { color: var(--ink-soft); }
.quiz__bars { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.qbar { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.qbar__track { height: 10px; border-radius: 10px; background: var(--paper); overflow: hidden; }
.qbar__fill { display: block; height: 100%; width: 0; border-radius: 10px; background: var(--blue-1); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.qbar.is-top .qbar__fill { background: var(--terra-strong); }
.quiz__tip { background: var(--paper); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 15px; margin-bottom: 22px; }
.quiz__tip strong { color: var(--ink); }
.quiz__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.quiz__ctas .btn { flex: 1 1 200px; }
.quiz__restart { background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; margin-top: 16px; align-self: flex-start; }
.quiz__disclaimer { font-size: 12px; color: var(--ink-soft); margin-top: 14px; }

@media (max-width: 900px) {
  .quiz__grid { grid-template-columns: 1fr; }
  .quiz { min-height: 0; }
}
@media (max-width: 560px) {
  .qbar { grid-template-columns: 92px 1fr; font-size: 13px; }
  .quiz__opt { padding: 15px 16px; font-size: 15px; }
}
.quiz__result .quiz__result-title { color: var(--blue-text); }
.quiz__result .quiz__result-label { color: var(--terra-text); }
.quiz__result .quiz__tip { color: var(--ink-soft); }
.quiz__result .quiz__disclaimer { font-size: 12px; }
.quiz__restart { padding: 0; }
.testi__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
.testi__grid--2 blockquote { font-size: clamp(19px, 1.8vw, 22px); }
@media (max-width: 900px) { .testi__grid--2 { grid-template-columns: 1fr; } }

/* =====================================================
   ICÔNES SPORT
   ===================================================== */
.sp-ic { display: inline-grid; place-items: center; }
.sp-ic svg { width: 100%; height: 100%; overflow: visible; }

/* Pastilles du hero */
.avatars .sp-ic {
  width: 44px; height: 44px; border-radius: 50%; margin-left: -10px;
  background: var(--white); border: 3px solid var(--paper); padding: 6px;
  box-shadow: 0 4px 10px rgba(29,29,32,.08);
}
.avatars .sp-ic:first-child { margin-left: 0; }
.avatars .sp-ic:nth-child(2) { background: #E8F3FD; }
.avatars .sp-ic:nth-child(3) { background: #FBEDE7; }
.avatars .sp-ic:nth-child(4) { background: #FBEDE7; }
.js .is-loaded .avatars .sp-ic, .is-loaded .avatars .sp-ic { animation: popIn .5s cubic-bezier(.2,1.6,.4,1) both; }
.avatars .sp-ic:nth-child(1) { animation-delay: 1s; }
.avatars .sp-ic:nth-child(2) { animation-delay: 1.08s; }
.avatars .sp-ic:nth-child(3) { animation-delay: 1.16s; }
.avatars .sp-ic:nth-child(4) { animation-delay: 1.24s; }
@keyframes popIn { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }

/* Cartes sport */
.sport { justify-content: flex-start; }
.sport__ic {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  background: var(--paper); padding: 8px;
  transition: transform .4s cubic-bezier(.2,1.4,.4,1), background .2s ease;
}
.sport__name { flex: 1; }
.sport:hover .sport__ic { transform: rotate(-20deg) scale(1.1); background: var(--white); }

/* CTA final : ballons */
.final__deco .ball { transform-box: fill-box; transform-origin: center; }
.final__deco .ball use { transform-box: fill-box; transform-origin: center; }
.b-spin use { animation: spin 40s linear infinite; }
.b-spin-r use { animation: spin 28s linear infinite reverse; }
.b-rock use { animation: rock 6s ease-in-out infinite; }
.b-bounce use { animation: bounce 2.4s cubic-bezier(.5,0,.5,1) infinite; }
.b-drift use { animation: drift 9s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rock { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
.final__deco circle { animation: none; }
@media (max-width: 700px) {
  .final__deco .b-hide-m { display: none; }
}
.sports__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sport { gap: 14px; padding: 22px 20px; font-size: 27px; }
.sport__ic { width: 46px; height: 46px; padding: 7px; }
.sport__arrow { width: 36px; height: 36px; }
@media (max-width: 1080px) { .sports__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sports__grid { grid-template-columns: 1fr; } }

/* =====================================================
   PAGES INTÉRIEURES
   ===================================================== */
.nav__link.is-active { color: var(--blue-text); }
.nav__link--test {
  background: #E8F3FD; color: var(--blue-deep); padding: 8px 14px !important; border-radius: 999px;
}
.nav__link--test:hover { background: var(--blue-1); color: var(--blue-deep); }
@media (max-width: 900px) { .nav__link--test { background: none; padding: 14px 0 !important; border-radius: 0; } }

.crumbs { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--terra-text); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--blue-text); }

.page-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); overflow-x: clip; }
.page-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero h1 { font-size: clamp(46px, 6.4vw, 88px); }
.page-hero h1 em { font-style: normal; color: var(--blue-text); display: block; }
.page-hero .lead { margin-top: 24px; font-size: clamp(17px, 1.6vw, 20px); }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-hero__visual { position: relative; }
.page-hero__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--terra-1); }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__photo--wide { aspect-ratio: 16 / 10; }
.js .page-hero__photo { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1) .2s; }
.is-loaded .page-hero__photo { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .page-hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .page-hero h1 .w > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 55ms + 100ms); }
.is-loaded .page-hero h1 .w > span { transform: none; }

/* Scène animée (sport) posée sur la photo */
.scene {
  position: absolute; left: -26px; bottom: 28px; z-index: 2;
  width: min(340px, 78%); background: var(--white); border-radius: var(--radius-sm);
  padding: 10px 12px 8px; box-shadow: 0 18px 40px rgba(29,29,32,.14);
}
.scene svg { width: 100%; height: auto; display: block; }
.scene__cap { font-family: var(--f-serif); font-size: 13px; color: var(--terra-text); padding: 2px 4px 0; }
.js .scene { opacity: 0; transform: translateY(18px); transition: opacity .6s ease 1s, transform .7s cubic-bezier(.2,1.4,.4,1) 1s; }
.is-loaded .scene { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .scene { left: 12px; bottom: 12px; }
}

/* Sections communes des pages intérieures */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split .h2 { margin-bottom: 20px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.panel { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.mini-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: ms; }
.mini-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.mini-steps li::before {
  counter-increment: ms; content: "0" counter(ms);
  font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 48px; text-align: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--blue-1); color: var(--blue-deep);
}
.mini-steps li:nth-child(2)::before { background: var(--terra-1); color: var(--terra-deep); }
.mini-steps li:nth-child(3)::before { background: var(--blue-strong); color: var(--white); }
.mini-steps strong { display: block; font-family: var(--f-display); font-size: 24px; line-height: 1.1; }
.mini-steps span { color: var(--ink-soft); font-size: 15px; }
.problems__grid--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .problems__grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .problems__grid--6 { grid-template-columns: 1fr; } }
.problem__num {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 22px;
  background: var(--blue-1); color: var(--blue-deep);
}
.problem:nth-child(even) .problem__num { background: var(--terra-1); color: var(--terra-deep); }
.section--tight { padding: clamp(48px, 7vw, 88px) 0; }
.section--white { background: var(--white); }
.testi--solo { max-width: 820px; margin: 0 auto; }
.testi--solo blockquote { font-size: clamp(20px, 2.2vw, 26px); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.chips-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-list li { background: var(--white); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 15px; }
.chips-list li:nth-child(odd) { background: #E8F3FD; color: var(--blue-deep); }
.chips-list li:nth-child(even) { background: #FBEDE7; color: var(--terra-deep); }
.placeholder { background: #FFF4CC; border-radius: 4px; padding: 0 4px; }

/* Grille de cartes génériques */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--white); border-radius: var(--radius-sm); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 28px; }
.card p { color: var(--ink-soft); font-size: 15px; }
.card .sp-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--paper); padding: 9px; }
.card ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
.card__tag { align-self: flex-start; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--terra-text); }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* =====================================================
   SCÈNES SPORTIVES (SVG animés)
   ===================================================== */
.sc { --deep: #0E4F80; --tdeep: #7A3420; }
.sc .ground { fill: var(--blue-1); }
.sc .ground--terra { fill: var(--terra-1); }
.sc .line { stroke: #fff; stroke-width: 2; fill: none; }
.sc .stroke { stroke: var(--deep); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc .stroke-t { stroke: var(--tdeep); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc .net { stroke: var(--deep); stroke-width: 1.2; fill: none; opacity: .55; }
.sc .ballw { fill: #fff; stroke: var(--deep); stroke-width: 2.5; }
.sc .shadow { fill: rgba(14,79,128,.18); }
.sc * { transform-box: fill-box; }

/* Hockey : crosse qui frappe, balle au but */
.sc-hockey .stick { transform-origin: 50% 0%; animation: hk-stick 3s cubic-bezier(.5,0,.3,1) infinite; }
.sc-hockey .ball { animation: hk-ball 3s linear infinite; }
.sc-hockey .netg { transform-origin: 0% 50%; animation: net-bulge 3s ease infinite; }
@keyframes hk-stick { 0%,8% { transform: rotate(-38deg); } 16% { transform: rotate(14deg); } 30%,100% { transform: rotate(-38deg); } }
@keyframes hk-ball { 0%,15% { transform: translateX(0); opacity: 1; } 42% { transform: translateX(212px); opacity: 1; } 60% { transform: translateX(218px); opacity: 1; } 70%,100% { transform: translateX(218px); opacity: 0; } }
@keyframes net-bulge { 0%,40% { transform: scaleX(1); } 48% { transform: scaleX(1.35); } 62%,100% { transform: scaleX(1); } }

/* Fútbol : tir en cloche dans le but */
.sc-futbol .ball { animation: fb-ball 3.2s cubic-bezier(.3,.6,.4,1) infinite; }
.sc-futbol .ball use { transform-origin: center; animation: spin .6s linear infinite; }
.sc-futbol .netg { transform-origin: 0% 50%; animation: net-bulge2 3.2s ease infinite; }
@keyframes fb-ball {
  0%,10% { transform: translate(0,0); opacity: 1; }
  25% { transform: translate(80px,-52px); }
  40% { transform: translate(170px,-40px); }
  48% { transform: translate(210px,-14px); opacity: 1; }
  62% { transform: translate(214px,10px); opacity: 1; }
  72%,100% { transform: translate(214px,10px); opacity: 0; }
}
@keyframes net-bulge2 { 0%,44% { transform: scaleX(1); } 52% { transform: scaleX(1.4); } 66%,100% { transform: scaleX(1); } }

/* Rugby : transformation entre les poteaux */
.sc-rugby .ball { animation: rg-ball 3.4s cubic-bezier(.35,.5,.45,1) infinite; }
.sc-rugby .ball ellipse { transform-origin: center; animation: spin .9s linear infinite; }
.sc-rugby .flag { transform-origin: 0% 100%; animation: flag 3.4s ease infinite; }
@keyframes rg-ball {
  0%,8% { transform: translate(0,0) scale(1); opacity: 1; }
  30% { transform: translate(110px,-82px) scale(.85); }
  52% { transform: translate(220px,-66px) scale(.72); opacity: 1; }
  70% { transform: translate(262px,-40px) scale(.6); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes flag { 0%,50% { transform: rotate(-90deg); } 58%,86% { transform: rotate(0deg); } 94%,100% { transform: rotate(-90deg); } }

/* Básquet : tir au panier + filet */
.sc-basquet .ball { animation: bk-ball 3s cubic-bezier(.35,.4,.5,1) infinite; }
.sc-basquet .ball use { transform-origin: center; animation: spin 1s linear infinite; }
.sc-basquet .netg { transform-origin: 50% 0%; animation: swish 3s ease infinite; }
@keyframes bk-ball {
  0%,8% { transform: translate(0,0); opacity: 1; }
  30% { transform: translate(120px,-96px); }
  46% { transform: translate(210px,-74px); }
  58% { transform: translate(210px,-44px); opacity: 1; }
  70% { transform: translate(210px,-6px); opacity: 1; }
  78%,100% { transform: translate(210px,0); opacity: 0; }
}
@keyframes swish { 0%,50% { transform: scaleY(1); } 58% { transform: scaleY(1.3) scaleX(.85); } 70%,100% { transform: scaleY(1); } }

/* Tenis : échange avec rebonds */
.sc-tenis .ball { animation: tn-x 2.8s ease-in-out infinite alternate; }
.sc-tenis .ball circle { animation: tn-y .7s cubic-bezier(.3,0,.7,1) infinite alternate; }
.sc-tenis .shadow { animation: tn-x 2.8s ease-in-out infinite alternate; }
.sc-tenis .shadow ellipse { transform-origin: center; animation: tn-s .7s cubic-bezier(.3,0,.7,1) infinite alternate; }
@keyframes tn-x { from { transform: translateX(0); } to { transform: translateX(236px); } }
@keyframes tn-y { from { transform: translateY(-58px); } to { transform: translateY(0); } }
@keyframes tn-s { from { transform: scale(.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* Pádel : la balle tape la vitre */
.sc-padel .ball { animation: pd-ball 2.6s cubic-bezier(.4,0,.6,1) infinite; }
.sc-padel .glass { animation: glass 2.6s ease infinite; }
@keyframes pd-ball {
  0% { transform: translate(0,0); }
  45% { transform: translate(226px,-30px); }
  55% { transform: translate(200px,4px); }
  100% { transform: translate(0,0); }
}
@keyframes glass { 0%,40% { fill-opacity: .25; } 47% { fill-opacity: .7; } 60%,100% { fill-opacity: .25; } }

/* Equitación : trajectoire de saut + empreintes */
.sc-equitacion .arc { stroke: var(--terra-strong); stroke-width: 3.5; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; animation: draw 3.4s ease-in-out infinite; }
.sc-equitacion .print { opacity: 0; animation: print 3.4s ease infinite; }
.sc-equitacion .print:nth-of-type(1) { animation-delay: 0s; }
@keyframes draw { 0% { stroke-dashoffset: 1; } 55%,80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes print { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.sc-equitacion .poles { transform-origin: 50% 100%; animation: poles 3.4s ease infinite; }
@keyframes poles { 0%,28% { transform: translateY(0); } 34% { transform: translateY(-2px); } 40%,100% { transform: translateY(0); } }

/* Clínica : pouls qui s'apaise */
.sc-clinica .pulse { stroke: var(--blue-strong); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw2 5s ease-in-out infinite; }
.sc-clinica .dot { fill: var(--terra-strong); offset-path: path("M10 75 L60 75 L70 40 L82 110 L94 60 L104 75 L140 75 Q160 55 180 75 T220 75 T260 75 T310 75"); animation: along 5s ease-in-out infinite; }
@keyframes draw2 { 0% { stroke-dashoffset: 1; } 70% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes along { 0% { offset-distance: 0%; } 70%,100% { offset-distance: 100%; } }

/* Sobre mí : piste + compteur km */
.sc-run .runner { offset-path: path("M60 30 H260 A45 45 0 0 1 260 120 H60 A45 45 0 0 1 60 30 Z"); offset-rotate: 0deg; animation: lap 6s linear infinite; fill: var(--terra-strong); }
@keyframes lap { to { offset-distance: 100%; } }

/* Profesionales : tableau tactique */
.sc-board .arrow { stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; animation: draw3 4.5s ease infinite; }
.sc-board .arrow:nth-of-type(2) { animation-delay: .6s; }
.sc-board .arrow:nth-of-type(3) { animation-delay: 1.2s; }
.sc-board .mover { animation: mover 4.5s ease-in-out infinite; }
@keyframes draw3 { 0%,10% { stroke-dashoffset: 1; } 45%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mover { 0%,40% { transform: translate(0,0); } 70%,90% { transform: translate(64px,-34px); } 100% { transform: translate(0,0); } }

/* 404 : drapeau de hors-jeu */
.sc-404 .flag { transform-origin: 0% 100%; animation: wave 1.2s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-8deg) skewY(-4deg); } to { transform: rotate(6deg) skewY(4deg); } }

@media (prefers-reduced-motion: reduce) {
  .sc *, .sc { animation: none !important; }
  .sc .arc, .sc .pulse, .sc .arrow { stroke-dashoffset: 0; }
  .sc .print { opacity: 1; }
}

/* ===== Blog ===== */
.post--feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.post--feature .post__img { aspect-ratio: 16 / 11; }
.post__feature-title { font-size: clamp(34px, 4vw, 52px); margin: 10px 0 16px; }
.post--feature:hover .post__feature-title { color: var(--blue-text); }
@media (max-width: 900px) { .post--feature { grid-template-columns: 1fr; } }

.article__head { max-width: 860px; padding-top: clamp(28px, 4vw, 56px); }
.article__title { font-size: clamp(40px, 5.6vw, 72px); margin: 12px 0 24px; }
.article__author { display: flex; align-items: center; gap: 12px; }
.article__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.article__author strong { display: block; }
.article__author span { font-size: 14px; color: var(--ink-soft); }
.article__cover { max-width: 1060px; margin: 32px auto 0; }
.article__cover img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 8; object-fit: cover; }
.article__body { max-width: 760px; padding-top: 40px; padding-bottom: 40px; font-size: 18px; line-height: 1.7; }
.article__body h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 44px 0 14px; }
.article__body p { margin: 0 0 16px; color: #3a3a40; }
.article__body ul { margin: 0 0 18px; padding-left: 22px; color: #3a3a40; }
.article__body li { margin-bottom: 8px; }
.article__body a { color: var(--blue-text); font-weight: 700; text-underline-offset: 3px; }
.article__answer { background: #E8F3FD; border-left: 4px solid var(--blue-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 18px 22px; color: var(--blue-deep) !important; }
.article__body .faq__list { margin-top: 10px; }
.article__body .faq__item p { color: var(--ink-soft); font-size: 16px; }
.article__body .faq__item summary { font-size: 22px; }
.article__cta { margin-top: 48px; background: var(--white); border-radius: var(--radius); padding: 30px; }
.article__cta-title { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; margin: 0 !important; color: var(--ink) !important; }

/* Barre de lecture : un ballon qui avance */
.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 55; height: 6px; pointer-events: none; }
.read-progress__track { position: relative; height: 6px; background: rgba(128,198,250,.35); }
.read-progress__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue-strong); }
.read-progress__ball { position: absolute; top: -8px; left: 0; width: 22px; height: 22px; transform: translateX(-50%) rotate(var(--rot, 0deg)); }
.read-progress__ball svg { width: 100%; height: 100%; }

/* ===== Test ===== */
.test__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.test__intro h1 { font-size: clamp(44px, 5.6vw, 80px); }
.test__intro h1 em { font-style: normal; color: var(--blue-text); display: block; }
.ltest { background: var(--white); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 40px); box-shadow: 0 24px 60px rgba(29,29,32,.08); min-height: 540px; display: flex; flex-direction: column; }
.ltrack { position: relative; height: 54px; margin-bottom: 18px; }
.ltrack__lane { position: absolute; left: 0; right: 30px; top: 30px; height: 12px; border-radius: 12px; background: repeating-linear-gradient(90deg, var(--terra-1) 0 22px, #ead1c7 22px 26px); overflow: hidden; }
.ltrack__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--terra-strong); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ltrack__runner { position: absolute; top: 0; left: 0; width: 40px; height: 40px; transform: translateX(-6px); transition: left .6s cubic-bezier(.2,.8,.2,1); }
.ltrack__runner svg { width: 100%; height: 100%; animation: jog .5s ease-in-out infinite alternate; }
@keyframes jog { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-5px) rotate(6deg); } }
.ltrack__flag { position: absolute; right: 0; top: 18px; width: 30px; height: 30px; }
.ltrack__flag svg { width: 100%; height: 100%; }
.likert { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.likert .quiz__opt { flex-direction: column; text-align: center; justify-content: center; padding: 18px 10px; gap: 10px; font-size: 15px; }
.likert .quiz__opt .k { width: auto; height: auto; background: none; font-size: 0; }
.likert .dots { display: flex; gap: 4px; justify-content: center; }
.likert .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.likert .dots i.on { background: var(--blue-strong); }
@media (max-width: 640px) { .likert { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .test__grid { grid-template-columns: 1fr; } .ltest { min-height: 0; } }
.result-band { display: inline-block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px; }
.result-band--low { background: #E8F3FD; color: var(--blue-deep); }
.result-band--mid { background: #FBEDE7; color: var(--terra-deep); }
.result-band--high { background: var(--terra-strong); color: #fff; }
.result-areas { list-style: none; padding: 0; margin: 14px 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.result-areas li { background: var(--paper); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; }
.result-note { background: #FFF4E5; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; color: #5a4320; margin-bottom: 18px; }
.result-note a { color: var(--terra-text); font-weight: 700; }
.medal-pop { width: 70px; height: 70px; margin-bottom: 10px; animation: popIn .7s cubic-bezier(.2,1.6,.4,1) both; }

/* ===== Profesionales ===== */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 28px; left: 6%; right: 6%; height: 3px; background: repeating-linear-gradient(90deg, var(--blue-1) 0 12px, transparent 12px 20px); }
.timeline li { position: relative; background: var(--white); border-radius: var(--radius-sm); padding: 72px 22px 24px; }
.timeline__n { position: absolute; top: 6px; left: 22px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-strong); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 22px; }
.timeline strong { display: block; font-family: var(--f-display); font-size: 26px; line-height: 1.05; margin-bottom: 8px; }
.timeline p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; } .timeline::before { display: none; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }
.bform { display: flex; flex-direction: column; gap: 14px; background: var(--paper); border-radius: var(--radius); padding: clamp(20px, 3vw, 34px); }
.bform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .bform__row { grid-template-columns: 1fr; } }
.bform label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.bform input, .bform select, .bform textarea {
  font: inherit; font-weight: 400; font-size: 16px; padding: 13px 14px; border-radius: 12px;
  border: 2px solid transparent; background: var(--white); color: var(--ink);
}
.bform input:focus, .bform select:focus, .bform textarea:focus { outline: none; border-color: var(--blue-3); }
.bform .is-invalid { border-color: var(--terra-strong); }
.bform__error { color: var(--terra-text); font-weight: 700; font-size: 14px; }
.bform .btn { align-self: flex-start; }
.read-progress__ball { opacity: 0; transition: opacity .3s ease; }
.read-progress.is-on .read-progress__ball { opacity: 1; }
.page-hero .about__stats { min-width: 0; }
.about__stats .stat { min-width: 0; overflow-wrap: anywhere; }
.result-band { align-self: flex-start; }
.medal-pop { align-self: flex-start; }
body { overflow-x: clip; }

/* Menu mobile : positionné sous le header, hauteur = écran (corrige le menu invisible) */
@media (max-width: 900px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto;
    height: calc(100vh - 76px); height: calc(100dvh - 76px);
    border-top: 1px solid var(--line);
  }
  .header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); transform: none; }
  .nav__link--test { justify-content: space-between; }
}

/* Petit bonhomme (test) */
.stick { overflow: visible; }
.stick .stick__line { fill: none; stroke: var(--sc, #B85A36); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.stick .stick__head { fill: var(--sc, #B85A36); }
.stick g { transform-box: view-box; }
.stick--run .stick__leg1, .stick--run .stick__leg2 { transform-origin: 47px 58px; }
.stick--run .stick__arm1, .stick--run .stick__arm2 { transform-origin: 54px 34px; }
.stick--run .stick__leg1 { animation: legA .45s ease-in-out infinite alternate; }
.stick--run .stick__leg2 { animation: legB .45s ease-in-out infinite alternate; }
.stick--run .stick__arm1 { animation: legB .45s ease-in-out infinite alternate; }
.stick--run .stick__arm2 { animation: legA .45s ease-in-out infinite alternate; }
@keyframes legA { from { transform: rotate(-28deg); } to { transform: rotate(22deg); } }
@keyframes legB { from { transform: rotate(22deg); } to { transform: rotate(-28deg); } }
.ltrack__runner svg { animation: bob .225s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.stick--cheer .stick__cheer1, .stick--cheer .stick__cheer2 { transform-origin: 50px 38px; }
.stick--cheer .stick__cheer1 { animation: cheerL .5s ease-in-out infinite alternate; }
.stick--cheer .stick__cheer2 { animation: cheerR .5s ease-in-out infinite alternate; }
@keyframes cheerL { from { transform: rotate(0); } to { transform: rotate(-18deg); } }
@keyframes cheerR { from { transform: rotate(0); } to { transform: rotate(18deg); } }
.stick--cheer { animation: popIn .7s cubic-bezier(.2,1.6,.4,1) both, jump .6s ease-in-out .7s infinite alternate; }
@keyframes jump { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.city-card { text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.city-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(29,29,32,.08); }
.city-card h3 { font-size: 26px; }
.city-card__go { margin-top: auto; font-weight: 800; color: var(--blue-text); }
.chips-list a { color: inherit; }
/* Diplômes */
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.creds--stack { grid-template-columns: 1fr; }
.cred { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border-radius: var(--radius-sm); padding: 18px; border: 2px solid #E8F3FD; }
.section--white .cred, .about .cred { background: var(--paper); border-color: transparent; }
.cred__ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-strong); color: #fff; }
.cred:nth-child(2) .cred__ic { background: var(--terra-strong); }
.cred__ic svg { width: 22px; height: 22px; }
.cred strong { display: block; font-family: var(--f-display); font-size: 21px; line-height: 1.05; margin-bottom: 4px; }
.cred span { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 760px) { .creds { grid-template-columns: 1fr; } }
.footer__grid { grid-template-columns: 1.3fr repeat(4, 1fr); }
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.about__creds { background: var(--paper); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.about__creds .creds { margin: 22px 0 26px; }
.about__creds .cred { background: var(--white); }
.about__creds-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 3.4vw, 44px); line-height: .98; }
.about__creds-title em { font-style: normal; color: var(--blue-text); }

.ltrack__runner { width: 50px; height: 50px; top: -8px; }

/* WhatsApp : texte blanc + lueur autour du bouton flottant */
.btn--wa, .wa-float { background: #16A34A !important; color: #fff !important; }
.btn--wa:hover { background: #128C3F !important; }
.wa-float { box-shadow: 0 10px 28px rgba(0,0,0,.2), 0 0 0 0 rgba(37,211,102,.5); }
.wa-float::before { background: #25D366; animation: ripple 2.6s ease-out infinite !important; }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none !important; } }

/* ============ PLACES DISPONIBLES (en-tête) ============ */
.spots { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 16px 10px 14px; border-radius: 999px; background: var(--white); border: 1.5px solid rgba(184,90,54,.3); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; overflow: hidden; box-shadow: 0 6px 22px -12px rgba(122,52,32,.45); transition: transform .3s, box-shadow .3s; }
.spots:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(122,52,32,.55); }
.spots::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: spots-shine 4.5s ease-in-out 2.4s infinite; pointer-events: none; }
.spots__live { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--terra-strong); flex-shrink: 0; }
.spots__live::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--terra-strong); animation: spots-ping 1.8s ease-out infinite; }
.spots__text strong { font-family: var(--f-display); font-size: 1.25em; color: var(--terra-strong); display: inline-block; min-width: 1ch; text-align: center; }
.spots__num.is-tick { animation: spots-tick .28s ease-out; }
.spots__seats { display: inline-flex; gap: 4px; }
.spots__seats i { width: 9px; height: 16px; border-radius: 3px 3px 2px 2px; background: rgba(23,32,42,.16); transform-origin: bottom; }
.spots__seats i.is-free { background: var(--blue-strong); animation: spots-seat 2.6s ease-in-out calc(1.4s + var(--i) * .12s) infinite; }
@keyframes spots-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes spots-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes spots-tick { 0% { transform: translateY(-60%) scale(1.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes spots-seat { 0%, 70%, 100% { transform: none; } 80% { transform: scaleY(.6); } 90% { transform: scaleY(1.12); } }
@media (max-width: 480px) { .spots { font-size: 14px; gap: 10px; } .spots__seats i { width: 7px; height: 13px; } }
@media (prefers-reduced-motion: reduce) { .spots::after, .spots__live::before, .spots__seats i.is-free, .spots__num.is-tick { animation: none; } }
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.hero__top .hero__tag { margin-bottom: 0; }
.hero__top .spots { margin-top: 0; }
.hero__top + h1 { margin-top: 26px; }
.spots__text { white-space: nowrap; }
.hero__content { min-width: 0; }
@media (max-width: 420px) { .spots { font-size: 13px; gap: 9px; padding: 9px 13px 9px 12px; } .spots__seats { gap: 3px; } .spots__seats i { width: 6px; height: 12px; } .spots__seats i:not(.is-free) { display: none; } }
/* Badge places : version discrète sous les boutons */
.spots { margin-top: 16px; padding: 4px 0; background: none; border: 0; box-shadow: none; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.spots:hover { transform: none; box-shadow: none; color: var(--ink); }
.spots::after { display: none; }
.spots__live { width: 8px; height: 8px; }
.spots__text strong { font-size: 1.15em; }
.hero__proof { margin-top: 26px; }
@media (max-width: 420px) { .spots { padding: 4px 0; } }
@media (max-width: 760px) { .spots { display: flex; justify-content: center; } }

/* ============ ¿PARA QUIÉN? — cartes ============ */
.who { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who__card { --tone: var(--blue-text); --tint: rgba(128,198,250,.22); position: relative; overflow: hidden; padding: 30px 26px 26px; border: 1.5px solid transparent; isolation: isolate; }
.who__card:nth-child(even) { --tone: var(--terra-strong); --tint: rgba(224,175,158,.3); }
.who__card::before { content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; right: -42px; top: -42px; border-radius: 50%; background: var(--tint); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.who__card::after { content: attr(data-n); position: absolute; top: 16px; right: 18px; font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--tone); opacity: .35; }
.who__card .sp-ic { width: 64px; height: 64px; background: var(--white); box-shadow: 0 8px 20px -10px rgba(29,29,32,.35); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.who__card h3 { font-size: 24px; margin-top: 6px; }
.who__card p { flex: 1; }
.who__card .city-card__go { color: var(--tone); display: inline-flex; align-items: center; gap: 10px; }
.who__arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tone); color: #fff; font-size: 15px; transition: transform .3s; }
.who__card:hover { border-color: var(--tone); transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(29,29,32,.25); }
.who__card:hover::before { transform: scale(1.8); }
.who__card:hover .sp-ic { transform: rotate(-8deg) scale(1.1); }
.who__card:hover .who__arrow { transform: translateX(5px); }
@media (max-width: 1080px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .who__card::before, .who__card .sp-ic, .who__arrow { transition: none; } }
.spots { overflow: visible; }

/* ============ Disponibilité dans la carte de Camila ============ */
.card-name { flex-wrap: wrap; row-gap: 12px; }
.avail { flex-basis: 100%; display: block; padding-top: 12px; border-top: 1.5px dashed rgba(29,29,32,.12); text-decoration: none; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.avail__row { display: flex; align-items: center; gap: 8px; }
.avail__left { margin-left: auto; color: var(--ink); font-weight: 700; white-space: nowrap; }
.avail__left b { font-family: var(--f-display); font-size: 1.5em; line-height: 1; color: var(--terra-strong); display: inline-block; min-width: 1ch; text-align: center; vertical-align: -1px; }
.avail__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--terra-strong); flex-shrink: 0; }
.avail__live::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--terra-strong); animation: spots-ping 1.8s ease-out infinite; }
.avail__bar { display: block; position: relative; height: 7px; margin-top: 9px; border-radius: 99px; background: rgba(128,198,250,.3); overflow: hidden; }
.avail__bar i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 80%); border-radius: inherit; background: linear-gradient(90deg, var(--terra-title), var(--terra-strong)); }
.avail__bar i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); background-size: 17px 17px; animation: avail-stripes 1s linear infinite; }
.js .avail__bar i { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.8,.2,1) 1.6s; }
.is-loaded .avail__bar i { transform: none; }
.avail:hover .avail__left { color: var(--terra-strong); }
.spots__num.is-tick { animation: spots-tick .28s ease-out; }
@keyframes avail-stripes { to { background-position: 17px 0; } }
@media (prefers-reduced-motion: reduce) { .avail__live::before, .avail__bar i::after { animation: none; } .js .avail__bar i { transform: none; transition: none; } }
.card-name { max-width: 390px; }
.card-name > div { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
  .hero__visual { margin-bottom: 70px; }
  .card-name { left: 14px; right: 14px; bottom: -64px; max-width: none; padding: 14px 16px; }
  .card-name strong { font-size: 20px; }
  .card-name span { font-size: 12px; }
}

/* ============ Pages pays ============ */
.honest { display: flex; gap: 18px; align-items: flex-start; max-width: 860px; margin: 0 auto; padding: 24px 26px; border-radius: var(--radius-sm); background: var(--paper); border-left: 4px solid var(--blue-strong); }
.honest svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--blue-strong); }
.honest p:last-child { color: var(--ink-soft); }
.footer__countries { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 22px 0; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.footer__countries span { opacity: .7; }
.footer__countries a { color: inherit; text-decoration: none; font-weight: 700; }
.footer__countries a:hover { text-decoration: underline; }

/* ============ MENU (v2) ============ */
.sport--clinic { grid-column: 1 / -1; }
.nav__ctas { display: flex; align-items: center; }
.nav__wa, .nav__note { display: none; }
@media (min-width: 901px) {
  .nav__link { position: relative; }
  .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2.5px; border-radius: 2px; background: var(--terra-title); transform: scaleX(0); transform-origin: center; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .nav__link:hover::after, .nav__link.is-active::after, .has-dropdown:hover > .nav__link::after { transform: scaleX(1); }
  .nav__link--test::after { display: none; }

  .dropdown { top: calc(100% + 14px); padding: 12px; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(14,79,128,.28), 0 8px 20px -10px rgba(29,29,32,.12); transform: translateY(10px) scale(.98); transform-origin: top left; transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.3,1.2), visibility .22s; }
  .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* pont de survol */
  .mega { display: grid; grid-template-columns: 1fr 210px; gap: 12px; width: 640px; left: -24px; }
  .mega__grid, .pro-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .pro-list { grid-template-columns: 1fr; }
  .dropdown--pro { width: 330px; left: -24px; }
  .mega__grid li, .pro-list li { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .3s ease; transition-delay: 0s; }
  .has-dropdown:hover .mega__grid li, .has-dropdown:focus-within .mega__grid li, .has-dropdown.is-open .mega__grid li,
  .has-dropdown:hover .pro-list li, .has-dropdown:focus-within .pro-list li, .has-dropdown.is-open .pro-list li { opacity: 1; transform: none; transition-delay: calc(.04s + var(--j) * .03s); }
  .dropdown a.mega__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; font-size: 15px; }
  .mega__ic { width: 40px; height: 40px; flex-shrink: 0; background: var(--paper); transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .2s; }
  .mega__ic svg { width: 80%; height: 80%; }
  .mega__txt { display: flex; flex-direction: column; line-height: 1.15; }
  .mega__txt small { font-weight: 600; font-size: 12px; color: var(--ink-soft); }
  .dropdown a.mega__item:hover { background: var(--paper); color: var(--ink); }
  .dropdown a.mega__item:hover .mega__ic { transform: rotate(-10deg) scale(1.12); background: var(--white); }
  .dropdown a.mega__item:hover strong { color: var(--blue-text); }
  .mega__aside { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px; border-radius: 16px; overflow: hidden; background: var(--blue-deep); color: #fff !important; text-decoration: none; min-height: 100%; }
  .mega__aside::before { content: ""; position: absolute; width: 170px; height: 170px; right: -60px; top: -60px; border-radius: 50%; background: rgba(128,198,250,.35); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .mega__aside:hover::before { transform: scale(1.6); }
  .mega__aside > * { position: relative; }
  .mega__aside-k { font-size: 13px; font-weight: 600; opacity: .85; }
  .mega__aside strong { font-family: var(--f-display); font-size: 30px; line-height: 1; }
  .mega__aside span:not(.mega__aside-k):not(.mega__aside-go) { font-size: 13px; opacity: .8; }
  .mega__aside-go { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--terra-strong); font-size: 16px; transition: transform .3s; }
  .mega__aside:hover .mega__aside-go { transform: translateX(4px); }
  .dropdown a.mega__aside:hover { background: var(--blue-deep); color: #fff; }
  .pro-all { display: flex; justify-content: space-between; margin-top: 6px; padding: 12px 12px 6px; border-top: 1px solid var(--line); font-weight: 800; font-size: 14px; color: var(--blue-text) !important; text-decoration: none; }
  .dropdown a.pro-all:hover { background: none; }
  .pro-all span { transition: transform .25s; } .pro-all:hover span { transform: translateX(4px); }
}
@media (min-width: 901px) and (max-width: 1080px) { .mega { width: 560px; grid-template-columns: 1fr 170px; } }

/* Mobile */
@media (max-width: 900px) {
  .nav { padding-bottom: 28px; }
  .nav__list > li { opacity: 0; transform: translateY(14px); }
  .nav.is-open .nav__list > li { animation: navIn .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.05s + var(--i) * .05s); }
  @keyframes navIn { to { opacity: 1; transform: none; } }
  .nav__link { font-size: 30px; }
  .has-dropdown.is-open > .nav__link { color: var(--blue-text); }
  .has-dropdown .dropdown { display: none; padding: 2px 0 16px; }
  .has-dropdown.is-open .dropdown { display: block; }
  .mega__grid, .pro-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pro-list { grid-template-columns: 1fr; gap: 6px; }
  .has-dropdown.is-open .mega__grid li, .has-dropdown.is-open .pro-list li { animation: navIn .35s ease forwards; animation-delay: calc(var(--j) * .035s); opacity: 0; transform: translateY(8px); }
  .dropdown a.mega__item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--white); font-size: 16px; }
  .pro-list a.mega__item { font-size: 15px; }
  .mega__ic { width: 36px; height: 36px; flex-shrink: 0; background: var(--paper); }
  .mega__ic svg { width: 80%; height: 80%; }
  .mega__txt small { display: none; }
  .mega__aside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--blue-deep); color: #fff !important; text-decoration: none; }
  .mega__aside strong { font-size: 17px; }
  .mega__aside-k { font-size: 13px; opacity: .85; flex-basis: 100%; }
  .mega__aside span:not(.mega__aside-k):not(.mega__aside-go) { font-size: 13px; opacity: .8; }
  .mega__aside-go { margin-left: auto; }
  .pro-all { display: block; padding: 12px 0 0; font-weight: 800; color: var(--blue-text) !important; text-decoration: none; font-size: 15px; }
  .nav__ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; opacity: 0; }
  .nav.is-open .nav__ctas { animation: navIn .45s ease .45s forwards; }
  .nav__wa { display: inline-flex; justify-content: center; width: 100%; padding: 15px; }
  .nav__note { display: block; text-align: center; font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__list > li, .nav__ctas, .mega__grid li, .pro-list li { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.dropdown a.mega__aside { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 18px; border-radius: 16px; font-size: 14px; }
.mega__ic { border-radius: 50%; }
.mega__aside strong { display: block; margin: 2px 0; }
@media (max-width: 900px) {
  .dropdown a.mega__aside { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 14px 16px; gap: 2px 10px; }
  .dropdown a.mega__aside .mega__aside-go { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--terra-strong); }
}
@media (min-width: 901px) { .mega__aside-k { padding-right: 40px; } }
.header__logo { flex-shrink: 0; }
.nav__link { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) { .nav__list { gap: 20px; } .nav { gap: 20px; } }
@media (min-width: 901px) and (max-width: 1080px) { .nav__ctas { display: none; } }
.local-sport { display: flex; gap: 22px; align-items: flex-start; padding: clamp(22px,3vw,34px); border-radius: var(--radius); background: var(--white); }
.local-sport > .sp-ic { width: 64px; height: 64px; flex-shrink: 0; background: var(--paper); border-radius: 50%; }
@media (max-width: 560px) { .local-sport { flex-direction: column; } }
/* FAQ : marge haute quand la section précédente a un autre fond */
.section--white + .faq, .testimonials + .faq, .quiz-section + .faq { padding-top: clamp(64px, 9vw, 112px); }

/* ============ Responsive : garde-fous ============ */
.split > *, .about__grid > *, .page-hero__grid > *, .faq__grid > *, .hero__grid > *, .test__grid > *, .problems__head > *, .bform, .bform > *, .about__creds, .sport, .card { min-width: 0; }
input, select, textarea { max-width: 100%; }
.bform select { width: 100%; text-overflow: ellipsis; }
h1, h2, h3, .h2 { overflow-wrap: break-word; }
.sport__name { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1081px) and (max-width: 1320px) { .sport__name { font-size: 22px; } }
@media (max-width: 380px) {
  .h2 { font-size: 30px; }
  .page-hero h1, .hero h1 { font-size: 40px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .about__creds { grid-template-columns: 1fr; }
}
.bform__row > *, .bform label { min-width: 0; }
.bform input, .bform select, .bform textarea { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 380px) { .page-hero__ctas .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; } }
@media (max-width: 380px) { .about__creds { padding: 18px; } .about__creds .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; padding-left: 14px; padding-right: 14px; } }

/* ============ Fluidité du scroll ============ */
/* En-tête : fond opaque au lieu du flou (le flou recalculé à chaque image coûte cher) */
.header { background: rgba(242, 242, 245, .97); backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateZ(0); }
/* Animations en pause quand elles ne sont pas à l'écran */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
/* Rayures de la barre d'agenda : animées par transform (pas de repeint) */
.avail__bar i::after { inset: 0 -17px 0 -17px; background-size: auto; animation: avail-stripes2 1s linear infinite; will-change: transform; }
@keyframes avail-stripes2 { from { transform: translateX(-17px); } to { transform: translateX(0); } }
.marquee__track, .wa-float, .breath { will-change: transform; }
/* Apparitions plus rapides et plus douces */
.reveal { transform: translateY(16px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }

/* iPhone / anciens Safari : pas de débordement horizontal (overflow: clip non pris en charge) */
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
@supports not (overflow: clip) { .hero, .page-hero, .final, .marquee { overflow: hidden; } }
.header { background: var(--paper); }