*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Barlow", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.page { display: none; }
.page.active { display: block; }

/* HOME */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:  #0A0A0A;
  --white:  #FFFFFF;
  --grey:   #F4F4F2;
  --rule:   #DEDEDE;
  --muted:  #767676;
  --light:  #B0B0B0;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  height: auto;
  padding: 18px 82px 10px 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 0.9;
  white-space: nowrap;
}

.nav-logo-sub {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  line-height: 1;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--black); }

.nav-cta {
  display: inline-block;
  padding: 13px 28px;
  background: #FF7F11;
  color: var(--black);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--black); color: var(--white); }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--black);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  min-height: 0;
  padding-top: 86px;
  padding-left: 112px;
}

.hero-text {
  padding: 0px 56px 40px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-top {}

.hero-overline {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 40px;
}

.hero-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(72px, 9vw, 130px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 28px;
}

.hero-subtitle {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  line-height: 1;
  margin-top: -12px;
  margin-bottom: 28px;
}

.hero-desc {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
  max-width: 440px;
  margin-bottom: 32px;
}

.hero-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
}



.hero-meta {
  display: flex;
  gap: 48px;
  margin-bottom: 8px;
}

.hero-meta-item {}

.hm-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}

.hm-value {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

.hero-actions { display: flex; gap: 20px; align-items: center; }

.btn-solid {
  display: inline-block;
  padding: 13px 36px;
  background: #FF7F11;
  color: var(--black);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-solid:hover { background: var(--black); color: var(--white); }

.btn-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.btn-text:hover { color: var(--black); }

.hero-photo {
  position: relative;
  overflow: hidden;
  max-height: none;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(1.0) contrast(1.0);
  display: block;
}

/* ── SHARED ── */
.overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 24px;
}

.overline.inv { color: rgba(255,255,255,0.85); }

.h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
}

.h1.inv { color: var(--white); }

.body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

.body.inv { color: rgba(255,255,255,0.45); }

section { padding: 96px 112px; }
section.grey { background: var(--grey); }
section.black { background: var(--black); }
section.white { background: var(--white); }

.section-rule { border: none; border-top: 1px solid var(--rule); }
.section-rule.inv { border-color: rgba(255,255,255,0.08); }

/* ── ABOUT ── */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.about-body { margin-top: 36px; }
.about-body + .about-body { margin-top: 18px; }

.about-cta {
  margin-top: 48px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF7F11;
  text-decoration: none;
  border-bottom: 1.5px solid #FF7F11;
  padding-bottom: 2px;
}

.stats-col {}

.stat-block {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: baseline;
}

.stat-block:first-child { border-top: none; }

.stat-block:last-child { border-bottom: none; }

.s-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--black);
}

.s-label { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--muted); }
.s-label strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); margin-bottom: 4px; }

/* ── INNOVATION TIMELINE ── */
.innov-header {
  margin-bottom: 72px;
}

.innov-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.innov-item {
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  border-left: 1px solid var(--black);
}

.innov-item:first-child {
  border-left: none;
  padding-left: 0;
}

.innov-item:last-child {
  padding-right: 0;
}

.innov-year {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}

.innov-dot { display: none; }

.innov-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.innov-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 2.8em; /* enough for 2 lines — aligns descs across columns */
  display: flex;
  align-items: flex-start;
}

.innov-desc {
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
}

/* ── CHIFFRES CLÉS ── */
.chiffres-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: stretch;
}

.chiffres-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chiffres-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
}

.chiffres-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.chiffre-card {
  background: transparent;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--rule);
}

.chiffre-card:first-child {
  border-left: none;
  padding-left: 0;
}

.chiffre-full {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}

.chiffre-full-inner {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.chiffre-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--black);
}

.chiffre-full .chiffre-num {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-family: "Barlow Condensed", sans-serif;
}

.chiffre-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.4;
}

.chiffre-full .chiffre-label {
  font-size: 13px;
  font-weight: 600;
  color: #FF7F11;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: "Barlow Condensed", sans-serif;
}

  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: "Barlow Condensed", sans-serif;
}

/* ── SPECIALITES ── grey ── */
.spec-header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 64px;
}

.spec-header-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.spec-card {
  padding: 32px 24px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transition: background 0.2s;
  cursor: default;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.spec-card:hover { background: var(--grey); }

.spec-n {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #FF7F11;
  margin-bottom: 14px;
}

.spec-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 0;
  flex-grow: 1;
}

.spec-desc {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
  flex-shrink: 0;
}

.spec-card:hover .spec-desc {
  opacity: 1;
}


/* ── INTERVENTIONS ── white ── */
.int-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
}

.int-list {}

.int-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.int-item:last-child { border-bottom: none; }
.int-item:first-child { border-top: none; }

.int-stat {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.int-stat:first-child { border-top: none; }
.int-stat:last-child { border-bottom: none; }

.int-n {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--black);
}

.int-txt { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--muted); }
.int-txt strong { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); margin-bottom: 4px; }

/* ── RECHERCHE ── black ── */
.rech-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
  align-items: end;
}

.rech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2px;
}

.rech-card {
  padding: 44px 40px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--white);
  transition: background 0.2s;
}

.rech-card:hover { background: var(--grey); }

.rech-lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 18px;
}

.rech-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 14px;
  line-height: 1.1;
}

.rech-desc { font-size: 13.5px; font-weight: 400; color: var(--muted); line-height: 1.75; }

.pub-block {
  background: var(--grey);
  border-left: 4px solid #FF7F11;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 48px;
  padding: 32px 48px;
  margin-top: 48px;
}

.pub-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
}

.pub-text {}
.pub-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 12px;
}

.pub-desc { font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--black); max-width: 400px; }

/* ── PARCOURS ── grey ── */
.parcours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 56px;
}

.col-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF7F11;
  border-bottom: 2px solid #FF7F11;
  padding-bottom: 16px;
  margin-bottom: 0;
}

.tl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.tl:last-child { border-bottom: none; }

.tl-yr {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--black);
  padding-top: 1px;
}

.tl-c { font-size: 18px; font-weight: 300; color: var(--black); line-height: 1.6; }
.tl-c small { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }

/* ── FIERTÉ ── */
.fierte-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.fierte-quote {
  padding-left: 0;
  border-left: none;
}

.fierte-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 600;
  font-style: italic;
  text-transform: none;
  line-height: 1.3;
  color: var(--black);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.fierte-author {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF7F11;
  font-family: "Barlow Condensed", sans-serif;
}

.fierte-blocks {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.fierte-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.fierte-block-inner {
  width: 64px;
  height: 64px;
  border: 2px solid var(--black);
  border-radius: 6px;
  background: transparent;
}

.fierte-block--small .fierte-block-inner {
  width: 64px;
  height: 64px;
}

.fierte-block-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
}

.fierte-lepoint-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.5;
}

/* ── AFFILIATIONS ── white ── */
.affil-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px;
  align-items: start;
  padding: 48px 112px;
}

.affil-h {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--black);
}

.affil-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  line-height: 1.6;
}
.affil-item:first-child { border-top: none !important; }
.affil-item:last-child { border-bottom: none !important; }
.affil-dash { color: var(--black); font-weight: 600; }

/* ── CONTACT ── black ── */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  background: var(--grey);
}

.contact-left {
  padding: 96px 56px 96px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-desc { margin-top: 32px; }

.contact-right {
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-row {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.c-row:first-child { border-top: 1px solid var(--rule); }

.c-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.c-val {
  font-size: 18px;
  font-weight: 300;
  color: var(--black);
  line-height: 1.5;
}

.btn-black-solid {
  display: inline-block;
  margin-top: 52px;
  padding: 14px 40px;
  background: var(--white);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s;
  align-self: flex-start;
}

.btn-white-solid:hover { opacity: 0.88; }





/* CONTRIBUTIONS */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:  #0A0A0A;
  --white:  #FFFFFF;
  --grey:   #F4F4F2;
  --rule:   #DEDEDE;
  --muted:  #767676;
  --light:  #B0B0B0;
}
html { scroll-behavior: smooth; }
body {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* NAV */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  height: 110px; padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--black); }
.nav-cta {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black); text-decoration: none;
  border-bottom: 1.5px solid var(--black); padding-bottom: 1px;
}

/* PAGE HEADER */
.page-header {
  padding: 96px 48px 72px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: end;
}
.page-header--wide { padding-left: 96px !important; }
.researchgate-follow-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.researchgate-follow {
  width: auto;
}


/* MINIMAL HEADER — Syndrome Facettaire / Kystes de Tarlov */
.page-header-minimal {
  background: var(--grey);
  padding: 64px 96px 40px;
}
.page-header-minimal-inner {
  max-width: 760px;
}
.page-header-minimal .h1 {
  font-size: clamp(38px, 4.2vw, 56px);
  margin-bottom: 16px;
}
.page-header-minimal .header-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}
@media (max-width: 768px) {
  .page-header-minimal { padding: 40px 20px 28px; }
}

.overline {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 24px;
}
.h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 800; line-height: 0.92;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--black);
}
.header-desc {
  font-size: 16px; font-weight: 300;
  line-height: 1.8; color: var(--muted);
}

/* STAT BAR */
.stat-bar {
  background: var(--grey);
  border-bottom: 1px solid var(--rule);
  padding: 28px 96px;
  display: flex; gap: 64px; align-items: center;
}
.sb-item { display: flex; align-items: baseline; gap: 12px; }
.sb-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px; font-weight: 800; color: var(--black);
}
.sb-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.sb-sep { width: 1px; height: 32px; background: var(--rule); }

/* FILTER TABS */
.filters {
  padding: 32px 96px;
  border-bottom: 1px solid var(--rule);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 20px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--black); color: var(--black); }
.filter-btn.active { background: #FF7F11; color: var(--black); border-color: #FF7F11; }

/* VIDEO GRID — Medical Education page */
.video-section-head {
  padding: 32px 96px 0;
}
.video-grid {
  padding: 40px 96px 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
}
.video-card { display: flex; flex-direction: column; }
.video-placeholder {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: transparent;
  overflow: hidden;
  border-radius: 6px;
}
.video-placeholder img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1;
}
.video-placeholder a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: #FF7F11;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.38);
  z-index: 10;
  transition: all 0.2s ease;
}
.play-btn svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  margin-left: 4px;
}
.video-placeholder a:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #FF9A3D;
}
.video-placeholder iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #FF7F11;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-placeholder:hover .video-placeholder-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #FF9A3D;
}
.video-placeholder svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
.video-meta { padding-top: 18px; }
.video-tag {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #FF7F11; margin-bottom: 8px; display: block;
}
.video-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21px; font-weight: 700; line-height: 1.15;
  color: var(--black); text-transform: uppercase;
  letter-spacing: -0.005em;
}

.video-description {
  font-size: 11px;
  line-height: 1.45;
  color: #767676;
  margin-top: 10px;
  padding: 8px 10px;
  background: #f9f9f9;
  border-radius: 3px;
  position: relative;
}

.video-description-text {
  display: block;
}

.video-description-toggle {
  display: inline;
  font-size: 10px;
  font-weight: 600;
  color: #FF7F11;
  cursor: pointer;
  margin-left: 4px;
  user-select: none;
}

.video-description-toggle:hover {
  text-decoration: underline;
}

.video-empty {
  padding: 64px 96px;
  font-size: 14px; color: var(--muted);
  display: none;
}
@media (max-width: 860px) {
  .video-grid { grid-template-columns: 1fr; padding: 32px 24px 64px; }
  .video-section-head { padding: 24px 24px 0; }
  .filters { padding: 24px 24px; }
}

/* DETAIL PAGE CONTENT (Syndrome facettaire / Kystes de Tarlov) */
.detail-section { padding: 0 96px; max-width: 880px; }
.detail-section-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--black);
  margin: 56px 0 18px;
}
.detail-section p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 18px;
}
.detail-section ul { margin: 0 0 18px 20px; padding: 0; }
.detail-section li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 10px;
}
.detail-quote {
  margin: 32px 0;
  padding-left: 18px;
  border-left: 3px solid #FF7F11;
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
}
.detail-note {
  font-size: 13px;
  font-style: italic;
  color: var(--light);
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Syndrome facettaire — illustration in the “Comprendre” section */
.facet-understand-section {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 56px;
  align-items: center;
}
.facet-understand-copy {
  max-width: 760px;
}
.facet-understand-image-wrap {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 56px 0 0;
  width: 100%;
  cursor: zoom-in;
  display: block;
  text-align: initial;
}
.facet-understand-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}
@media (max-width: 900px) {
  .facet-understand-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .facet-understand-copy { max-width: 100%; }
  .facet-understand-image-wrap {
    margin-top: 0;
    max-width: 680px;
  }
}
/* Syndrome facettaire — therapeutic options image next to treatment section */
.facet-treatment-block {
  width: min(1280px, calc(100vw - 112px));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 56px;
  align-items: start;
  margin: 56px 0 24px -40px;
  padding: 40px;
  background: #F8F8F6;
}
.facet-treatment-copy {
  min-width: 0;
}
.facet-treatment-block .detail-section-title {
  margin: 0 0 18px;
}
.facet-treatment-image-wrap {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: zoom-in;
  display: block;
  text-align: initial;
}
.facet-treatment-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: contain;
  object-position: top center;
}
@media (max-width: 900px) {
  .facet-treatment-block {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding: 28px 20px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .facet-treatment-image-wrap {
    max-width: 680px;
  }
  .facet-treatment-image {
    max-height: none;
  }
}

/* Syndrome facettaire — facet arthrodesis illustration on the right */
.facet-arthrodesis-block {
  width: min(1280px, calc(100vw - 112px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
  gap: 56px;
  align-items: start;
  margin: 56px 0 24px -40px;
  padding: 0 40px;
}
.facet-arthrodesis-copy {
  min-width: 0;
}
.facet-arthrodesis-block .detail-section-title {
  margin: 0 0 18px;
}
.facet-arthrodesis-image-wrap {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: zoom-in;
  display: block;
  text-align: initial;
}
.facet-arthrodesis-image-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.facet-arthrodesis-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: top center;
}
.facet-arthrodesis-image-wrap--secondary .facet-arthrodesis-image {
  border-radius: 6px;
}

@media (max-width: 900px) {
  .facet-arthrodesis-block {
    width: 100%;
    margin: 56px 0 24px;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .facet-arthrodesis-image-stack {
    max-width: 680px;
  }
  .facet-arthrodesis-image-wrap {
    max-width: 680px;
  }

  .facet-arthrodesis-image {
    max-height: none;
  }
}

.detail-cta {
  text-align: center;
  padding: 80px 32px 96px;
  border-top: 1px solid var(--rule);
  margin-top: 32px;
  background: var(--grey);
}
.detail-cta p {
  font-size: 18px;
  color: var(--muted);
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.6;
}


/* ── FACET QUESTIONNAIRE ── */
.facet-questionnaire-header-btn {
  display: inline-block;
  margin-top: 24px;
}

.questionnaire-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 96px 96px;
}

.questionnaire-intro {
  max-width: 820px;
  margin-bottom: 44px;
}

.questionnaire-intro p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 14px;
}

.questionnaire-note {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 3px solid #FF7F11;
  background: var(--grey);
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.questionnaire-section {
  margin-top: 44px;
}

.questionnaire-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--black);
  margin-bottom: 0;
}

.questionnaire-section-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}

.questionnaire-section-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF7F11;
}

.questionnaire-subhead {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 30px 0 10px;
  color: var(--black);
}

.questionnaire-context {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 10px;
}

.questionnaire-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.questionnaire-label {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--black);
}

.questionnaire-options {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.questionnaire-choice {
  position: relative;
  cursor: pointer;
}

.questionnaire-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.questionnaire-choice span {
  min-width: 80px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all 0.15s ease;
}

.questionnaire-choice:hover span {
  border-color: var(--black);
  color: var(--black);
}

.questionnaire-choice input:focus-visible + span {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.questionnaire-choice input:checked + span {
  background: #FF7F11;
  border-color: #FF7F11;
  color: var(--black);
}

.questionnaire-results {
  margin-top: 52px;
  background: var(--grey);
  padding: 34px 36px;
  border-top: 3px solid #FF7F11;
}

.questionnaire-results-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.questionnaire-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.questionnaire-score {
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
}

.questionnaire-score:first-child { padding-left: 0; }
.questionnaire-score:last-child { border-right: 0; }

.questionnaire-score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.questionnaire-score-value {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--black);
  line-height: 1;
}

.questionnaire-score-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.questionnaire-result-note {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 22px;
  display: none !important;
}

.questionnaire-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.questionnaire-reset {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--black);
  padding: 0 0 2px;
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  cursor: pointer;
}

/* ── QUESTIONNAIRE AUTO-SLIDE ANIMATION ── */
.questionnaire-step {
  opacity: 1;
  transform: translateX(0);
  transition: none;
  animation: slideInFromRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.questionnaire-step[hidden] {
  display: none !important;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hide the Next question button */
.questionnaire-wizard-next {
  display: none !important;
}

@media (max-width: 768px) {
  .questionnaire-wrap { padding: 44px 20px 72px; }
  .questionnaire-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .questionnaire-item { grid-template-columns: 1fr; gap: 12px; padding: 18px 0 20px; }
  .questionnaire-options { width: 100%; }
  .questionnaire-choice { flex: 1; }
  .questionnaire-choice span { width: 100%; min-width: 0; }
  .questionnaire-results { padding: 28px 20px; }
  .questionnaire-score-grid { grid-template-columns: 1fr; }
  .questionnaire-score,
  .questionnaire-score:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .questionnaire-score:last-child { border-bottom: 0; }
}

/* ACCORDION */
.accordion-wrap { padding: 0 96px 96px; }

.accordion-item {
  border-bottom: 1px solid var(--rule);
}
.accordion-item:first-child { border-top: 1px solid var(--rule); margin-top: 48px; }

.accordion-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 120px 32px;
  gap: 24px;
  padding: 22px 0;
  background: none; border: none;
  cursor: pointer; text-align: left;
  align-items: center;
  transition: background 0.15s;
}
.accordion-trigger:hover { background: var(--grey); padding-left: 12px; padding-right: 12px; margin-left: -12px; margin-right: -12px; border-left: 3px solid #FF7F11; }

.acc-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; color: #FF7F11;
}
.acc-title {
  font-size: 15px; font-weight: 500;
  color: var(--black); line-height: 1.4;
  text-align: left;
}
.acc-year {
  font-size: 12px; font-weight: 400;
  color: var(--muted); text-align: right;
}
.acc-icon {
  font-size: 20px; font-weight: 300;
  color: var(--light); text-align: center;
  transition: transform 0.25s;
  line-height: 1;
}

.accordion-item.open .acc-icon { transform: rotate(45deg); }

.accordion-body {
  display: none;
  padding: 0 0 28px 80px;
}
.accordion-item.open .accordion-body { display: block; }

.acc-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #FF7F11;
  border: 1px solid #FF7F11;
  padding: 4px 12px; margin-bottom: 14px;
}
.acc-abstract {
  font-size: 14px; font-weight: 300;
  line-height: 1.75; color: var(--muted);
  max-width: 680px; margin-bottom: 16px;
}
.acc-link {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #FF7F11; text-decoration: none;
  border-bottom: 1.5px solid #FF7F11; padding-bottom: 1px;
}
.acc-link:hover { opacity: 0.6; }
.acc-placeholder {
  font-size: 12px; font-weight: 400;
  color: var(--light); font-style: italic;
}

/* FOOTER */
footer {
  background: var(--black); padding: 24px 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.foot { font-size: 11px; color: rgba(255,255,255,0.18); letter-spacing: 0.06em; }


/* CONTACT */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:  #0A0A0A;
  --white:  #FFFFFF;
  --grey:   #F4F4F2;
  --rule:   #DEDEDE;
  --muted:  #767676;
  --light:  #B0B0B0;
}
html { scroll-behavior: smooth; }
body {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* NAV */
nav {
  position: sticky;
  top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  height: auto;
  padding: 28px 64px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--black); }
.nav-cta {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  background: #FF7F11;
  padding: 10px 24px;
  transition: background 0.15s;
  border-bottom: none;
}
.nav-cta:hover { background: #CC6500; color: var(--black); }

/* PAGE HEADER */
.page-header {
  padding: 96px 48px 72px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 24px;
}
.h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
}
.page-header-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

/* CONTACT GRID */
.contact-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}

.contact-info {
  padding: 72px 56px 72px 48px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-row {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.c-row:first-child { border-top: 1px solid var(--rule); }
.c-row:last-child { border-bottom: none; }

.c-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.c-val {
  font-size: 18px;
  font-weight: 300;
  color: var(--black);
  line-height: 1.5;
}
.c-val a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.15s;
}
.c-val a:hover { border-color: var(--black); }

/* MAP PLACEHOLDER */
.contact-map {
  background: var(--grey);
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.map-box {
  background: var(--rule);
  flex: 1;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.map-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
}
.map-address {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

/* CTA */
.contact-cta {
  padding: 64px 48px;
  background: var(--grey);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.cta-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
}
/* btn-solid defined above */.8; }

/* FOOTER */
footer {
  background: var(--black);
  padding: 24px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foot { font-size: 11px; color: rgba(255,255,255,0.18); letter-spacing: 0.06em; }


/* ── HOMEPAGE TOPIC SECTIONS ── */
.home-topic-sections {
  background: var(--white);
  border-top: 3px solid var(--rule);
}

.home-topic-hero {
  min-height: 420px;
  padding: 96px 112px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.home-topic-block {
  padding: 96px 112px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.home-topic-block:nth-child(even) {
  background: var(--grey);
}

.home-topic-overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 24px;
}

.home-topic-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
}

.home-topic-small-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
}

.home-topic-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  max-width: 520px;
}

.home-topic-link {
  display: inline-block;
  margin-top: 40px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF7F11;
  text-decoration: none;
  border-bottom: 1.5px solid #FF7F11;
  padding-bottom: 2px;
}

.pourquoi-v2-links {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 20px;
}
.pourquoi-v2-links .home-topic-link { margin-top: 0; }

/* ── MEDICAL EDUCATION SECTION ── */
.mededu-section {
  background: var(--white);
  padding: 96px 112px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.mededu-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 96px;
  align-items: center;
}

.mededu-overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 24px;
}

.mededu-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 32px;
}

.mededu-desc {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  max-width: 520px;
}

.mededu-video-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 24px;
  align-items: stretch;
}

.mededu-video-main,
.mededu-video-side {
  background: var(--grey);
  border: 1px solid var(--rule);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mededu-video-side {
  min-height: 220px;
}

.mededu-video-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
}

.mededu-video-link {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--rule);
  cursor: pointer;
  text-decoration: none;
}

.mededu-video-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease, filter 0.25s ease;
  object-fit: cover;
  object-position: right center;
}

.mededu-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #FF7F11;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.38);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 3;
  pointer-events: none;
}

.mededu-play svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  margin-left: 4px;
  display: block;
}

.mededu-video-link:hover img {
  transform: scale(1.015);
  filter: brightness(0.94);
}

.mededu-video-link:hover .mededu-play {
  transform: translate(-50%, -50%) scale(1.07);
}

@media (max-width: 768px) {
  .mededu-play {
    width: 60px;
    height: 60px;
  }

  .mededu-play svg {
    width: 26px;
    height: 26px;
  }
}

/* ── FOOTER ── */
footer {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 48px 112px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: center;
  min-height: 160px;
}

.foot-logo {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  display: block;
  margin-bottom: 6px;
}

.foot-sub {
  font-size: 12px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.04em;
  display: block;
}

.foot-legal {
  font-size: 11px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.7;
  text-align: right;
}

.foot-copy {
  font-size: 11px;
  color: var(--white);
  letter-spacing: 0.04em;
  text-align: right;
  display: block;
}

.foot-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.foot-icon {
  display: block;
  width: 40px;
  height: 40px;
  opacity: 1;
  transition: opacity 0.2s;
  filter: brightness(0) saturate(100%) invert(56%) sepia(67%) saturate(1000%) hue-rotate(1deg) brightness(103%);
}
.foot-icon:hover { opacity: 0.8; }
.foot-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ═══════════════════════════════════
   RESPONSIVE — TABLET (max 1024px)
═══════════════════════════════════ */
@media (max-width: 1024px) {
  nav { padding: 18px 32px; height: auto; position: relative; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 16px 32px;
    font-size: 14px;
    letter-spacing: 0.14em;
    border-bottom: 1px solid var(--rule);
  }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }

  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 48px; }
  .hero-text { padding: 80px 32px 48px; border-right: none; border-bottom: 1px solid var(--rule); }
  .hero-photo { height: 50vw; min-height: 320px; }
  .hero-name { font-size: clamp(56px, 10vw, 100px); }

  .about { grid-template-columns: 1fr; gap: 48px; padding: 72px 32px; }
  section { padding: 72px 32px; }

  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .parcours-grid { grid-template-columns: 1fr; gap: 48px; }
  .rech-grid { grid-template-columns: 1fr; }
  .rech-header { grid-template-columns: 1fr; gap: 24px; }
  .spec-header { grid-template-columns: 1fr; gap: 24px; }
  .int-header { grid-template-columns: 1fr; gap: 24px; }

  .affil-wrap { grid-template-columns: 1fr; gap: 32px; padding: 72px 32px; }

  footer { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px; text-align: left; }
  .foot-right { text-align: left; }
  .foot-copy { text-align: left; }
  .foot-social { justify-content: flex-start; flex-direction: row; }

  .contact { grid-template-columns: 1fr; }
  .contact-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .page-header { grid-template-columns: 1fr; gap: 32px; }
  .home-topic-hero { grid-template-columns: 1fr; padding: 72px 32px; gap: 32px; }
  .home-topic-block { grid-template-columns: 1fr; padding: 72px 32px; gap: 32px; }
  .mededu-section { padding: 72px 32px; }
  .mededu-wrap { grid-template-columns: 1fr; gap: 48px; }
  .pub-block { grid-template-columns: auto 1fr; gap: 32px; padding: 40px 32px; }
}

/* ═══════════════════════════════════
   RESPONSIVE — MOBILE (max 768px)
═══════════════════════════════════ */
@media (max-width: 768px) {
  nav { padding: 16px 20px; height: auto; }
  .nav-logo {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

  .hero-text { padding: 48px 20px 40px; }
  .hero-name { font-size: clamp(52px, 15vw, 80px); }
  .hero-desc { font-size: 15px; }
  .hero-meta { gap: 24px; flex-wrap: wrap; }
  .hm-value { font-size: 28px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-photo { height: 60vw; }

  section { padding: 56px 20px; }
  .about { padding: 56px 20px; gap: 40px; }
  .h1 { font-size: clamp(36px, 10vw, 60px); }

  .spec-grid { grid-template-columns: 1fr; }
  .spec-card { padding: 28px 24px; }

  .int-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .about-left, .about-right { width: 100%; }

  .parcours-grid { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 90px 1fr; }

  .affil-wrap { padding: 56px 20px; }
  .affil-h { font-size: 28px; }

  .rech-grid { grid-template-columns: 1fr; }
  .rech-card { padding: 32px 24px; }
  .pub-block { grid-template-columns: 1fr; gap: 16px; padding: 32px 24px; }
  .pub-num { font-size: 72px; }

  footer { padding: 40px 20px; grid-template-columns: 1fr; gap: 28px; }
  .foot-right { text-align: left; }
  .foot-copy { text-align: left; }

  .stat-bar { padding: 20px; gap: 24px; flex-wrap: wrap; }
  .filters { padding: 20px; }
  .accordion-wrap { padding: 0 20px 56px; }
  .detail-section { padding: 0 20px; }
  .detail-section-title { margin: 40px 0 14px; }
  .accordion-trigger { grid-template-columns: 36px 1fr 60px 24px; gap: 12px; }
  .accordion-body { padding: 0 0 20px 48px; }

  .page-header { padding: 64px 20px 48px; grid-template-columns: 1fr; gap: 24px; }
  .page-header--wide { padding-left: 20px !important; }
  .home-topic-hero { padding: 56px 20px; }
  .home-topic-block { padding: 56px 20px; }
  .mededu-section { padding: 56px 20px; }
  .mededu-video-grid { grid-template-columns: 1fr; }
  .contact-body { grid-template-columns: 1fr; }
  .contact-left { padding: 48px 20px; }
  .contact-right { padding: 32px 20px; }
  .contact-cta { flex-direction: column; gap: 20px; padding: 40px 20px; }
}

/* ═══════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 480px)
═══════════════════════════════════ */
@media (max-width: 480px) {
  .hero-name { font-size: clamp(44px, 14vw, 68px); }
  .h1 { font-size: clamp(32px, 9vw, 52px); }
  .hero-overline { font-size: 10px; }
  .stat-row { grid-template-columns: 80px 1fr; }
  .a-num { font-size: 40px; }
  .int-n { font-size: 40px; }
  .tl { grid-template-columns: 80px 1fr; gap: 12px; }
  .pub-block { gap: 12px; }
}







/* FINAL REQUESTED OVERRIDES — header subtitle + hero spacing */
/* nav-logo-sub size now unified below at the global "nav .nav-logo-sub" rule */

:is(#page-home,#page-home-en) .hero {
  grid-template-columns: 1fr 0.9fr !important;
  padding-top: 0 !important;
  align-items: stretch !important;
}

:is(#page-home,#page-home-en) .hero-text {
  justify-content: flex-start !important;
  padding-left: 0px !important;
  padding-right: 48px !important;
  padding-top: 86px !important;
}

:is(#page-home,#page-home-en) .hero-desc {
  font-size: 19px !important;
  max-width: 650px !important;
  margin-bottom: 28px !important;
}

:is(#page-home,#page-home-en) .hero-bottom {
  gap: 18px !important;
  margin-top: 0 !important;
}

:is(#page-home,#page-home-en) .hero-meta .hm-label {
  color: var(--black) !important;
}

:is(#page-home,#page-home-en) .hero-actions {
  margin-top: 9px !important;
}

:is(#page-home,#page-home-en) .hero-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* FINAL REQUESTED OVERRIDES — hero image right edge + bottom crop/spacing */
:is(#page-home,#page-home-en) .hero-photo {
  justify-self: stretch !important;
  width: 100% !important;
  margin-right: 0 !important;
  transform: none !important;
  clip-path: none !important;
  align-self: stretch !important;
}

:is(#page-home,#page-home-en) .hero-text {
  padding-bottom: 0px !important;
}

:is(#page-home,#page-home-en) .hero {
  padding-right: 0 !important;
}


/* FINAL REQUESTED OVERRIDE — remove right spacing beside hero image */
:is(#page-home,#page-home-en) .hero {
  padding-bottom: 0 !important;
  margin-right: 0 !important;
}

:is(#page-home,#page-home-en) .hero-photo {
  margin-right: 0 !important;
  justify-self: stretch !important;
}


/* FINAL REQUESTED OVERRIDE — navigation subtitle size/spacing (applies to every page's nav) */
nav .nav-logo {
  gap: 10px !important;
}

nav .nav-logo-sub {
  font-size: 14px !important;
}


/* FINAL REQUESTED OVERRIDE — reduce space above hero title */
:is(#page-home,#page-home-en) .hero-overline {
  margin-bottom: 18px !important;
}


/* FINAL REQUESTED OVERRIDE — Le Point award strip */
:is(#page-home,#page-home-en) .fierte-blocks {
  display: none !important;
}

:is(#page-home,#page-home-en) .fierte-award-strip {
  border-left: 4px solid #FF7F11;
  padding: 28px 32px;
  background: var(--grey);
  max-width: 560px;
}

:is(#page-home,#page-home-en) .fierte-award-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 12px;
}

:is(#page-home,#page-home-en) .fierte-award-source {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 10px;
}

:is(#page-home,#page-home-en) .fierte-award-years {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}


/* FINAL RESPONSIVE ADAPTABILITY OVERRIDES — NO NAVIGATION CHANGES */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
iframe,
video {
  max-width: 100%;
}

@media (max-width: 1200px) {
  :is(#page-home,#page-home-en) .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
  }

  :is(#page-home,#page-home-en) .hero-desc {
    max-width: 560px !important;
  }

  .spec-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .chiffres-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 32px !important;
  }

  .fierte-wrap,
  .mededu-wrap,
  .home-topic-hero,
  .home-topic-block {
    gap: 56px !important;
  }
}

@media (max-width: 900px) {
  .li-posts-grid {
    grid-template-columns: 1fr !important;
  }

  :is(#page-home,#page-home-en) .hero {
    grid-template-columns: 1fr !important;
    padding-right: 112px !important;
  }

  :is(#page-home,#page-home-en) .hero-photo {
    transform: none !important;
    clip-path: none !important;
    max-height: none !important;
  }

  :is(#page-home,#page-home-en) .hero-photo img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .about,
  .spec-header-top,
  .int-header,
  .parcours-grid,
  .contact,
  .contact-body,
  .page-header,
  .fierte-wrap,
  .mededu-wrap,
  .home-topic-hero,
  .home-topic-block {
    grid-template-columns: 1fr !important;
  }

  .spec-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .innov-timeline {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 48px !important;
  }

  .mededu-video-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-bar {
    flex-wrap: wrap !important;
  }

  .lepoint-slide-inner {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .lepoint-slide-img {
    min-height: 240px;
  }

  .lepoint-arrow--prev {
    left: 4px !important;
  }

  .lepoint-arrow--next {
    right: 4px !important;
  }

  .lepoint-arrow svg {
    width: 32px;
    height: 32px;
  }

  .cv2-tall-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sv2-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  section,
  section.white,
  section.grey,
  section.black,
  .home-topic-hero,
  .home-topic-block,
  .mededu-section,
  .page-header,
  .accordion-wrap,
  .filters,
  .stat-bar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  :is(#page-home,#page-home-en) .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  :is(#page-home,#page-home-en) .hero-text {
    padding-right: 0 !important;
  }

  .spec-grid,
  .chiffres-grid,
  .innov-timeline {
    grid-template-columns: 1fr !important;
  }

  .hero-meta,
  .stat-bar,
  .contact-cta {
    flex-wrap: wrap !important;
  }

  .accordion-trigger {
    grid-template-columns: 36px 1fr 48px 24px !important;
    gap: 12px !important;
  }

  .accordion-body {
    padding-left: 48px !important;
  }

  footer {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
}


/* FINAL HERO BLACK VERSION — HERO ONLY */
:is(#page-home,#page-home-en) .hero {
  background: var(--black) !important;
}

:is(#page-home,#page-home-en) .hero-name,
:is(#page-home,#page-home-en) .hero-desc,
:is(#page-home,#page-home-en) .hm-label,
:is(#page-home,#page-home-en) .hm-value {
  color: var(--black) !important;
}

:is(#page-home,#page-home-en) .hero-bottom-rule {
  border-color: rgba(255,255,255,0.35) !important;
}



/* FINAL REQUESTED OVERRIDES — black version hero + innovation spacing */
:is(#page-home,#page-home-en) .hero {
  margin-bottom: 0 !important;
}

:is(#page-home,#page-home-en) #innovation {
  padding-top: 180px !important;
  padding-bottom: 180px !important;
}


/* FINAL REQUESTED OVERRIDE — hero image background removed */
:is(#page-home,#page-home-en) .hero-photo,
:is(#page-home,#page-home-en) .hero-photo img {
  background: transparent !important;
}





/* FINAL CORRECTION — make full hero background black */
:is(#page-home,#page-home-en) .hero {
  background: transparent !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  position: relative;
  clip-path: none;
}

:is(#page-home,#page-home-en) .hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--grey);
  z-index: 0;
}

:is(#page-home,#page-home-en) .hero-text {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

:is(#page-home,#page-home-en) .hero-photo {
  position: relative;
  z-index: 1;
}

:is(#page-home,#page-home-en) .hero::after {
  display: none !important;
  content: none !important;
}


/* FINAL CORRECTION — remove only the black band below the hero */
:is(#page-home,#page-home-en) .hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

:is(#page-home,#page-home-en) .hero::after {
  display: none !important;
  content: none !important;
}

:is(#page-home,#page-home-en) .hero-photo {
  margin-bottom: 0 !important;
}

:is(#page-home,#page-home-en) #innovation {
  margin-top: 0 !important;
}


/* FINAL REQUESTED OVERRIDE — white hero stats text */
:is(#page-home,#page-home-en) .hero-meta .hm-label,
:is(#page-home,#page-home-en) .hero-meta .hm-value {
  color: var(--black) !important;
}


/* VERSION C — light grey background overrides */
:is(#page-home,#page-home-en) .hero-overline { color: #FF7F11 !important; }
:is(#page-home,#page-home-en) .hero-name { color: var(--black) !important; }
:is(#page-home,#page-home-en) .hero-desc { color: var(--muted) !important; }
:is(#page-home,#page-home-en) .hero-bottom-rule { border-color: var(--rule) !important; }
:is(#page-home,#page-home-en) .hm-label { color: var(--muted) !important; }
:is(#page-home,#page-home-en) .hm-value { color: var(--black) !important; }


/* ── Large screen: cap content width and scale up padding ── */
@media (min-width: 1440px) {
  section {
    padding-left: clamp(112px, 8vw, 180px) !important;
    padding-right: clamp(112px, 8vw, 180px) !important;
  }
  :is(#page-home,#page-home-en) .hero {
    padding-left: clamp(112px, 8vw, 180px) !important;
  }
  :is(#page-home,#page-home-en) .hero-name {
    font-size: clamp(72px, 5.5vw, 110px) !important;
  }
  nav {
    padding-left: clamp(112px, 8vw, 180px) !important;
    padding-right: clamp(112px, 8vw, 180px) !important;
  }
}

@media (min-width: 1800px) {
  /* Hard cap: beyond 1800px content stays centered within a max envelope */
  body {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
  section {
    padding-left: max(112px, calc((100vw - 1800px) / 2 + 112px)) !important;
    padding-right: max(112px, calc((100vw - 1800px) / 2 + 112px)) !important;
  }
  :is(#page-home,#page-home-en) .hero {
    padding-left: max(112px, calc((100vw - 1800px) / 2 + 112px)) !important;
  }
}

@media (min-width: 1440px) {
  /* Scale up type slightly on large screens */
  :is(#page-home,#page-home-en) .hero-desc {
    font-size: clamp(19px, 1.4vw, 24px) !important;
    max-width: 700px !important;
  }
  .innov-year { font-size: clamp(34px, 3.2vw, 48px); }
  .hm-value { font-size: clamp(32px, 2.5vw, 52px) !important; }
  .hm-label { font-size: clamp(12px, 0.85vw, 15px) !important; }
}

/* HERO IMAGE — fill full square, centered on face, no gap */
:is(#page-home,#page-home-en) .hero {
  align-items: stretch !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  position: relative !important;
  min-height: 520px !important;
}

:is(#page-home,#page-home-en) .hero-text {
  padding-top: 86px !important;
  position: relative !important;
  z-index: 2 !important;
}

:is(#page-home,#page-home-en) .hero-photo {
  position: relative !important;
  height: auto !important;
  max-height: none !important;
  align-self: stretch !important;
  transform: none !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

:is(#page-home,#page-home-en) .hero-photo img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: transparent !important;
}

:is(#page-home,#page-home-en) .hero-photo {
  background: var(--grey) !important;
}

:is(#page-home,#page-home-en) .hero::before {
  content: '' !important;
  display: block !important;
}


/* RESPONSIVE HERO FONT */
:is(#page-home,#page-home-en) .hero-name {
  font-size: clamp(73px, 12.2vw, 285px) !important;
  line-height: 0.9 !important;
}

:is(#page-home,#page-home-en) .hero-text {
  padding-top: 63px !important;
  justify-content: flex-start !important;
}

/* ── INNOVATION REDESIGN ── */
.innov-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 32px;
}

.innov-main-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 0.95;
  margin: 0;
  flex-shrink: 0;
}

.innov-quote {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  font-style: italic;
  color: var(--black);
  line-height: 1.3;
  margin: 0;
  max-width: 640px;
  text-align: left;
  border: none;
  padding: 0;
  align-self: center;
  letter-spacing: 0.01em;
}

/* Horizontal timeline */
.innov-htimeline {
  width: 100%;
}

.innov-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-bottom: 16px;
  height: 12px;
}

.innov-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  right: 5px;
  height: 1px;
  background: var(--black);
  transform: translateY(-50%);
  z-index: 0;
}

.innov-dot-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 1;
}

.innov-dot-wrap:last-child { justify-content: flex-start; }

.innov-hdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF7F11;
  border: 2px solid var(--white);
  outline: 1px solid #FF7F11;
  flex-shrink: 0;
}

.innov-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.innov-hitem {
  padding-right: 32px;
}

.innov-hitem:last-child { padding-right: 0; }

/* ── CHIFFRES CLÉS OVERRIDES ── */
.chiffre-icon {
  display: none !important;
}

.chiffre-num {
  font-size: clamp(42px, 5vw, 68px) !important;
}

.chiffre-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #FF7F11 !important;
}

.chiffres-right {
  gap: 48px !important;
}

.chiffres-wrap {
  gap: 80px !important;
}

/* ── FORMATION HEADER WITH QUOTE ── */
.parcours-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.parcours-quote {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 420px;
  text-align: right;
  align-self: center;
}

.parcours-quote-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 600;
  font-style: italic;
  color: var(--black);
  line-height: 1.35;
  margin: 0 0 10px 0;
  letter-spacing: 0.01em;
}

.parcours-quote-author {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF7F11;
  font-style: normal;
  display: block;
}

/* ── LE POINT CAROUSEL ── */
.lepoint-carousel-wrap {
  overflow: visible;
  position: relative;
}

.lepoint-clip {
  overflow: hidden;
}

.lepoint-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 0;
  opacity: 0.85;
}

.lepoint-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.lepoint-arrow svg {
  width: 44px;
  height: 44px;
  stroke: #FF7F11;
  fill: none;
}

.lepoint-arrow--prev {
  left: -56px;
}

.lepoint-arrow--next {
  right: -56px;
}

.lepoint-carousel {
  display: flex;
  width: 600%;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.lepoint-slide {
  width: 16.6667%;
  padding: 0;
  background: var(--grey);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.lepoint-slide-inner {
  display: grid;
  grid-template-columns: 1fr 540px;
  min-height: 360px;
  height: 100%;
}

.lepoint-slide-text {
  padding: 48px 48px 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lepoint-slide-img {
  position: relative;
  overflow: hidden;
  background: var(--grey);
}

.lepoint-snippet {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: 1;
  transition: transform 0.3s ease;
}

.lepoint-slide:hover .lepoint-snippet {
  transform: scale(1.03);
}


.lepoint-year {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: #FF7F11;
  letter-spacing: -0.02em;
}

.lepoint-badge {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}

.lepoint-specialty {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF7F11;
}

.lepoint-detail {
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
  margin-top: 8px;
}

.lepoint-source {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.lepoint-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

.lepoint-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rule);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}

.lepoint-dot.active {
  background: #FF7F11;
  transform: scale(1.3);
}

/* ── CITATION — full-bleed photo with quote ── */
.citation-section {
  position: relative;
  overflow: hidden;
  height: 440px;
  display: flex;
  align-items: center;
}

.citation-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.citation-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.50) 50%, rgba(0,0,0,0.08) 100%);
}

.citation-inner {
  position: relative;
  z-index: 2;
  padding: 0 112px;
  max-width: 680px;
}

.citation-mark {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 80px;
  font-weight: 800;
  color: #FF7F11;
  line-height: 0.7;
  margin-bottom: 12px;
}

.citation-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 600;
  font-style: italic;
  color: var(--white);
  line-height: 1.25;
  margin: 0 0 24px 0;
  letter-spacing: -0.01em;
}

.citation-sig {
  display: flex;
  align-items: center;
  gap: 20px;
}

.citation-rule {
  width: 36px;
  height: 2px;
  background: #FF7F11;
  flex-shrink: 0;
}

.citation-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* ── CHIFFRES V2 — card grid on grey ── */
:is(#apropos-v2,#apropos-v2-en) {
  background: #f5f4f1;
  padding: 80px 112px;
}

.cv2-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  margin: 0 0 48px 0;
}

.cv2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.cv2-card {
  background: var(--white);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv2-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}

.cv2-card--wide .cv2-line {
  width: 1px;
  height: 48px;
  flex-shrink: 0;
}

.cv2-big {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 800;
  color: #FF7F11;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cv2-big--text {
  font-size: clamp(22px, 2.2vw, 32px) !important;
  letter-spacing: 0 !important;
}

.cv2-line {
  width: 32px;
  height: 2px;
  background: #FF7F11;
  flex-shrink: 0;
}

.cv2-name {
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

/* ── POURQUOI MERGED ── */
.pourquoi-merged {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  background: var(--white);
  border-top: 3px solid var(--rule);
  padding: 80px 112px;
  align-items: start;
}

.pourquoi-card {
  padding: 0 56px;
  display: flex;
  flex-direction: column;
}

.pourquoi-card:first-child {
  padding-left: 0;
}

.pourquoi-card:last-child {
  padding-right: 0;
}

.pourquoi-title {
  font-family: "Barlow", sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--black);
  margin-bottom: 24px;
  min-height: 2.6em;
}

.pourquoi-divider {
  background: var(--rule);
  width: 1px;
  align-self: stretch;
}

.pourquoi-desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 32px;
}

.pourquoi-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  margin-bottom: 28px;
  filter: grayscale(20%);
}

/* Carousel sup styling */
.lepoint-badge sup {
  font-size: 0.55em;
  vertical-align: super;
  font-weight: 600;
}

/* FINAL NAV OVERRIDES — single-line links, sticky, ME CONTACTER button */
nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  height: auto !important;
  padding: 18px 82px 10px 82px !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Push page content below the fixed nav */
.page.active {
  padding-top: 72px !important;
}

.nav-logo {
  white-space: nowrap !important;
  flex-direction: column !important;
  display: flex !important;
}

.nav-logo span:first-child {
  font-size: 30px !important;
  font-weight: 800 !important;
}

.nav-logo-sub {
  font-size: 20px !important;
  letter-spacing: 0.22em !important;
}

.nav-links {
  gap: 34px !important;
}

.nav-links a {
  font-size: 10.5px !important;
  white-space: nowrap !important;
  letter-spacing: 0.16em !important;
}

.nav-cta {
  background: #FF7F11 !important;
  color: var(--black) !important;
  padding: 13px 28px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.nav-cta:hover {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* ── INNOVATION TIMELINE ARROW + ANIMATION ── */
.innov-arrow {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: #FF7F11;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
}

@keyframes innov-line-grow {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}

@keyframes innov-dot-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes innov-fadeup {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.innov-htimeline.is-visible .innov-track::before {
  animation: innov-line-grow 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
}

.innov-hdot--anim { opacity: 0; }

.innov-htimeline.is-visible .innov-dot-wrap:nth-child(1) .innov-hdot--anim { animation: innov-dot-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.55s forwards; }
.innov-htimeline.is-visible .innov-dot-wrap:nth-child(2) .innov-hdot--anim { animation: innov-dot-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.80s forwards; }
.innov-htimeline.is-visible .innov-dot-wrap:nth-child(3) .innov-hdot--anim { animation: innov-dot-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.05s forwards; }
.innov-htimeline.is-visible .innov-dot-wrap:nth-child(4) .innov-hdot--anim { animation: innov-dot-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.30s forwards; }

.innov-hitem { opacity: 0; transform: translateY(18px); }
.innov-htimeline.is-visible .innov-labels .innov-hitem:nth-child(1) { animation: innov-fadeup 0.5s ease 0.55s forwards; }
.innov-htimeline.is-visible .innov-labels .innov-hitem:nth-child(2) { animation: innov-fadeup 0.5s ease 0.80s forwards; }
.innov-htimeline.is-visible .innov-labels .innov-hitem:nth-child(3) { animation: innov-fadeup 0.5s ease 1.05s forwards; }
.innov-htimeline.is-visible .innov-labels .innov-hitem:nth-child(4) { animation: innov-fadeup 0.5s ease 1.30s forwards; }

/* Quote as section heading in parcours */
.parcours-quote-heading {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(24px, 2.8vw, 42px) !important;
  font-weight: 600 !important;
  font-style: italic;
  line-height: 1.25;
  color: var(--black);
  max-width: 720px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── STAIRCASE TIMELINE v2 ── */
.s2-outer {
  padding: 0;
  box-sizing: border-box;
}

/* Quote above the chart */
.s2-quote {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(20px, 2.6vw, 48px);
  font-weight: 600;
  font-style: normal;
  color: var(--black);
  line-height: 1.25;
  margin: 0 0 40px 0;
  padding: 0;
  border: none;
  max-width: none;
  white-space: nowrap;
}

.s2-stage {
  position: relative;
  width: 100%;
}

.s2-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Label container — absolute over each column */
.s2-label {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* Year: bottom edge sits 3% above the tread */
.s2-year {
  position: absolute;
  bottom: calc(100% - var(--tp) + 3%);
  left: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 800;
  color: #FF7F11;
  line-height: 1;
  white-space: nowrap;
}

/* Text: top edge sits 3% below the tread */
.s2-below {
  position: absolute;
  top: calc(var(--tp) + 3%);
  left: 18px;
  padding-right: 28px;
}

.s2-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 6px;
}

.s2-desc {
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

/* Animations */
@keyframes s2-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes s2-slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

:is(#innovation-stair,#innovation-stair-en) .s2-stage { opacity: 0; transition: opacity 0.4s ease; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-stage { opacity: 1; }

:is(#innovation-stair,#innovation-stair-en) .s2-quote { opacity: 0; transform: translateX(-30px); transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-quote { opacity: 1; transform: translateX(0); }

/* Labels (text below line) slide up staggered */
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(2) { animation: s2-rise 0.45s ease 0.3s both; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(3) { animation: s2-rise 0.45s ease 0.55s both; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(4) { animation: s2-rise 0.45s ease 0.80s both; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(5) { animation: s2-rise 0.45s ease 1.05s both; }

/* Years slide in from left, staggered */
:is(#innovation-stair,#innovation-stair-en) .s2-year { opacity: 0; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(2) .s2-year { animation: s2-slide-left 0.5s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(3) .s2-year { animation: s2-slide-left 0.5s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(4) .s2-year { animation: s2-slide-left 0.5s cubic-bezier(0.22,1,0.36,1) 0.70s both; }
:is(#innovation-stair,#innovation-stair-en).is-visible .s2-label:nth-child(5) .s2-year { animation: s2-slide-left 0.5s cubic-bezier(0.22,1,0.36,1) 0.95s both; }

/* ── CHIFFRES v1 — tall cards ── */
.cv2-tall-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0;
}

.cv2-tall-card {
  background: #fff;
  border-radius: 8px;
  padding: 32px 24px 28px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.cv2-tall-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 800;
  color: #0A0A0A;
  line-height: 1;
  letter-spacing: -0.02em;
  min-height: 64px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
}

.cv2-tall-num--sm {
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  white-space: normal;
}

.cv2-tall-line {
  display: none;
}

.cv2-tall-desc {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  color: #444;
  line-height: 1.55;
  margin-top: 18px;
}

.cv2-tall-card:nth-child(-n+4) .cv2-tall-desc {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(18px, 1.9vw, 28px);
  font-weight: 800;
  color: #FF7F11;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cv2-tall-card:last-child .cv2-tall-line {
  display: none;
}

.cv2-tall-card:last-child .cv2-tall-num--sm {
  font-size: clamp(18px, 1.9vw, 28px);
  color: #FF7F11;
  display: inline-block;
}

:is(#apropos-v2,#apropos-v2-en).is-visible .cv2-tall-card:last-child .cv2-tall-num--sm {
  animation: cv2-breathe 2s ease-in-out 3;
}

@keyframes cv2-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.72; transform: scale(1.05); }
}

.cv2-tall-card:last-child {
  background: #565656;
}

.cv2-tall-card:last-child .cv2-tall-desc {
  color: #fff;
}

/* cv3 orange line */
.cv3-oline {
  display: none;
}

/* ── CHIFFRES v3 — card grid (image 1 inspired) ── */
#chiffres-v3 {
  padding-left: 0;
  padding-right: 0;
}

.cv3-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 0 112px;
}

.cv3-card {
  background: #fff;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 4px;
}

.cv3-card--wide {
  grid-column: 1 / -1;
}

.cv3-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF7F11;
}

.cv3-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 800;
  color: #0A0A0A;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 8px;
  min-height: 68px;
  display: flex;
  align-items: flex-start;
}

.cv3-num--sm {
  font-size: clamp(22px, 2.4vw, 38px);
}

.cv3-desc {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
  margin-top: auto;
}

/* ── CHIFFRES v4 — horizontal bands (image 2 inspired) ── */
.cv4-band {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 40px 112px;
  border-bottom: 1px solid #e8e8e8;
}

.cv4-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0A0A0A;
  line-height: 1.4;
}

/* Progress bar */
.cv4-band-bar {
  flex: 1;
}

.cv4-bar-track {
  width: 100%;
  height: 2px;
  background: #e0dedd;
  border-radius: 2px;
  overflow: hidden;
}

.cv4-bar-fill {
  height: 100%;
  width: 0%;
  background: #FF7F11;
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#chiffres-v4.is-visible .cv4-bar-fill {
  width: var(--bar-pct);
}

.cv4-band-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 800;
  color: #FF7F11;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
  min-width: 180px;
}

/* ── DOMAINES D'EXPERTISE v2 — animated cards ── */
.sv2-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* ── DOMAINES v1 — 2-column numbered list with animation ── */
.sv1-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  border-top: 1px solid #e0e0e0;
}

.sv1-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid #e0e0e0;
  align-items: start;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Left column spans full width for border continuity */
.sv1-item:nth-child(odd) { border-right: 1px solid #e0e0e0; padding-right: 24px; }
.sv1-item:nth-child(even) { padding-left: 24px; }

#specialites.animate-ready .sv1-item {
  opacity: 0;
  transform: translateY(20px);
}
#specialites.animate-ready .sv1-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sv1-left {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 4px;
}

.sv1-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #FF7F11;
  flex-shrink: 0;
}

.sv1-line {
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

.sv1-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.sv1-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.3;
}

.sv1-desc {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
}

/* ── DOMAINES v2 — animated cards ── */
.sv2-card {
  background: #f7f6f4;
  border-radius: 6px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Only hide if JS has marked section as animating */
:is(#specialites-v2,#specialites-v2-en).animate-ready .sv2-card {
  opacity: 0;
  transform: translateY(28px);
}

:is(#specialites-v2,#specialites-v2-en).animate-ready .sv2-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sv2-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #FF7F11;
  margin-bottom: 20px;
}

.sv2-bar {
  width: 0%;
  height: 2px;
  background: #FF7F11;
  border-radius: 2px;
  margin-bottom: 20px;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.sv2-card.is-visible .sv2-bar {
  width: 36px;
}

.sv2-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 14px;
}

.sv2-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
  margin-top: auto;
}


/* ── LIGHTBOX ── */
.lp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lp-lightbox.open {
  display: flex;
}
.lp-lightbox-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 90vw;
  max-height: 90vh;
}
.lp-lightbox-stage img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  border-radius: 2px;
  cursor: default;
  filter: brightness(1.04) contrast(1.03);
}
.lp-colmar-highlight {
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 4px solid #F28A2E;
  background: rgba(242,138,46,0.035);
  pointer-events: none;
  z-index: 2;
}
.lp-colmar-highlight.is-visible { display: block; }

/* Make the new 2027 step read as a continuation of the innovation timeline. */
.tl-yr--future {
  white-space: nowrap;
}
.tl-future-arrow {
  display: inline-block;
  margin-left: 7px;
  color: #FF7F11;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 0.8;
  vertical-align: -2px;
}
.lp-lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
  background: none;
  border: none;
  padding: 0;
}
.lp-lightbox-close:hover { opacity: 1; }
.lepoint-snippet-wrap {
  cursor: zoom-in;
  width: 100%;
  height: 100%;
}

/* ── POURQUOI V2 — alternating layout ── */
.pourquoi-v2 {
  background: #fff;
  padding: 48px 0 0;
}
.pourquoi-v2-article {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: stretch;
  min-height: 0;
  padding: 96px 0;
}
.pourquoi-v2-article:nth-child(even) {
  grid-template-columns: 2fr 3fr;
}
.pourquoi-v2-text {
  padding: 0 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pourquoi-v2-article:nth-child(odd) .pourquoi-v2-text {
  padding-left: 0;
}
.pourquoi-v2-article:nth-child(even) .pourquoi-v2-text {
  padding-right: 0;
}
.pourquoi-v2-img {
  overflow: hidden;
  background: #111;
  border-radius: 8px;
  position: relative;
}
.pourquoi-v2-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
}
/* article 1: text LEFT, image RIGHT */
.pourquoi-v2-article:nth-child(odd) .pourquoi-v2-text { order: 1; }
.pourquoi-v2-article:nth-child(odd) .pourquoi-v2-img  { order: 2; }
/* article 2: image LEFT, text RIGHT */
.pourquoi-v2-article:nth-child(even) .pourquoi-v2-text { order: 2; }
.pourquoi-v2-article:nth-child(even) .pourquoi-v2-img  { order: 1; }

.pourquoi-v2-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  line-height: 1.1;
  margin: 0 0 20px;
}
.pourquoi-v2-desc {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 32px;
}
.pourquoi-v2-more { margin: -12px 0 0; }
.pourquoi-v2-quote {
  margin: 28px 0 0;
  padding-left: 20px;
  border-left: 4px solid #FF7F11;
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  color: var(--black);
  line-height: 1.45;
}

@media (max-width: 768px) {
  .pourquoi-v2-article {
    grid-template-columns: 1fr;
  }
  .pourquoi-v2-article:nth-child(even) .pourquoi-v2-text { order: 2; }
  .pourquoi-v2-article:nth-child(even) .pourquoi-v2-img  { order: 1; }
  .pourquoi-v2-img { min-height: 280px; }
  .pourquoi-v2-text { padding: 40px 24px; }
}

/* ── ECOUTER D'ABORD — editorial quote block ── */
.ecouter-section {
  background: #fff;
  padding: 96px 112px 40px;
}
.ecouter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 72px;
  align-items: stretch;
}
.ecouter-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 75%;
  border-left: 6px solid #FF7F11;
  padding-left: 32px;
}
.ecouter-text::after {
  content: none;
}
.ecouter-text p {
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 400;
  font-style: italic;
  color: var(--black);
  line-height: 1.75;
  margin: 0 0 20px;
}
.ecouter-text p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .ecouter-section { padding: 72px 32px 32px; }
  .ecouter-grid { gap: 32px; }
  .ecouter-text { max-width: 85%; padding-left: 24px; border-left-width: 5px; }
}
@media (max-width: 640px) {
  .ecouter-section { padding: 56px 20px 28px; }
  .ecouter-text { max-width: 100%; border-left: 5px solid #FF7F11; padding-left: 20px; }
}


/* ── ECOUTER D'ABORD — ALTERNATIVE EDITORIAL COMPARISON ── */
.ecouter-alt {
  background: var(--black);
  padding: 96px 112px;
  position: relative;
  overflow: hidden;
}

.ecouter-alt::before {
  content: "“";
  position: absolute;
  top: -70px;
  right: 5vw;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(220px, 26vw, 430px);
  font-weight: 800;
  line-height: 1;
  color: rgba(255,127,17,0.09);
  pointer-events: none;
}

.ecouter-alt-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

.ecouter-alt-kicker {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 52px;
}

.ecouter-alt-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px 32px;
}

.ecouter-alt-card {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.24);
  padding-top: 22px;
}

.ecouter-alt-card:nth-child(1) {
  grid-column: 1 / span 7;
}

.ecouter-alt-card:nth-child(2) {
  grid-column: 6 / span 7;
  margin-top: 34px;
}

.ecouter-alt-card:nth-child(3) {
  grid-column: 2 / span 8;
  margin-top: 24px;
}

.ecouter-alt-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #FF7F11;
  margin-bottom: 18px;
}

.ecouter-alt-card p {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}

.ecouter-alt-card:nth-child(2) p {
  font-size: clamp(24px, 2.45vw, 38px);
  color: rgba(255,255,255,0.82);
}

.ecouter-alt-card:nth-child(3) p {
  font-size: clamp(24px, 2.45vw, 38px);
  color: rgba(255,255,255,0.82);
}

.ecouter-alt-accent {
  width: 72px;
  height: 5px;
  background: #FF7F11;
  margin-top: 56px;
}

@media (max-width: 900px) {
  .ecouter-alt {
    padding: 72px 32px;
  }

  .ecouter-alt-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .ecouter-alt-card:nth-child(1),
  .ecouter-alt-card:nth-child(2),
  .ecouter-alt-card:nth-child(3) {
    grid-column: auto;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .ecouter-alt {
    padding: 56px 20px;
  }

  .ecouter-alt-kicker {
    margin-bottom: 36px;
  }

  .ecouter-alt-card p,
  .ecouter-alt-card:nth-child(2) p,
  .ecouter-alt-card:nth-child(3) p {
    font-size: clamp(24px, 8vw, 34px);
  }
}


/* Requested update: slightly larger Investigateur Principal title */
.cv2-tall-card:last-child .cv2-investigateur {
  font-size: clamp(20px, 2.1vw, 30px) !important;
}


/* REQUESTED RESPONSIVE FIX — POURQUOI section alignment */
@media (max-width: 1200px) {
  #pourquoi-v2 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  #pourquoi-v2 .pourquoi-v2-article {
    width: 100% !important;
  }

  #pourquoi-v2 .pourquoi-v2-article:nth-child(odd) .pourquoi-v2-text,
  #pourquoi-v2 .pourquoi-v2-article:nth-child(even) .pourquoi-v2-text {
    padding-left: 0 !important;
    padding-right: 40px !important;
  }

  #pourquoi-v2 .pourquoi-v2-article:nth-child(even) .pourquoi-v2-text {
    padding-left: 40px !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 900px) {
  #pourquoi-v2 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  #pourquoi-v2 .pourquoi-v2-article,
  #pourquoi-v2 .pourquoi-v2-article:nth-child(even) {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #pourquoi-v2 .pourquoi-v2-text,
  #pourquoi-v2 .pourquoi-v2-article:nth-child(odd) .pourquoi-v2-text,
  #pourquoi-v2 .pourquoi-v2-article:nth-child(even) .pourquoi-v2-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #pourquoi-v2 .pourquoi-v2-img {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #pourquoi-v2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* REQUESTED DETAIL PAGE HERO IMAGES */
.page-header-minimal--with-image {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 64px;
  align-items: stretch;
  padding-top: 56px;
  padding-bottom: 56px;
}
.page-header-minimal--with-image .page-header-minimal-inner {
  max-width: 760px;
  align-self: center;
}
.page-header-minimal-image {
  min-height: 300px;
  overflow: hidden;
  background: #111;
  border-radius: 6px;
}
.page-header-minimal-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .page-header-minimal--with-image {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 32px;
  }
  .page-header-minimal-image {
    min-height: 280px;
  }
}
@media (max-width: 640px) {
  .page-header-minimal--with-image {
    padding: 40px 20px 28px;
    gap: 24px;
  }
  .page-header-minimal-image {
    min-height: 220px;
  }
}





/* CORRECTED DETAIL HERO IMAGE SIZING */
:is(#page-syndrome-facettaire,#page-syndrome-facettaire-en) .page-header-minimal-image,
:is(#page-kystes-tarlov,#page-kystes-tarlov-en) .page-header-minimal-image {
  width: 100% !important;
  height: 300px !important;
  min-height: 300px !important;
  overflow: hidden !important;
}

:is(#page-syndrome-facettaire,#page-syndrome-facettaire-en) .page-header-minimal-image img,
:is(#page-kystes-tarlov,#page-kystes-tarlov-en) .page-header-minimal-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Crop the taller Syndrome Facettaire source image to focus higher and hide the bottom-left marker */
:is(#page-syndrome-facettaire,#page-syndrome-facettaire-en) .page-header-minimal-image img {
  object-position: center 28% !important;
}

@media (max-width: 900px) {
  :is(#page-syndrome-facettaire,#page-syndrome-facettaire-en) .page-header-minimal-image,
  :is(#page-kystes-tarlov,#page-kystes-tarlov-en) .page-header-minimal-image {
    height: 280px !important;
    min-height: 280px !important;
  }
}

@media (max-width: 640px) {
  :is(#page-syndrome-facettaire,#page-syndrome-facettaire-en) .page-header-minimal-image,
  :is(#page-kystes-tarlov,#page-kystes-tarlov-en) .page-header-minimal-image {
    height: 220px !important;
    min-height: 220px !important;
  }
}


/* FINAL POURQUOI ALIGNMENT FIX
   The actual section id is :is(#articles-thematiques-v2,#articles-thematiques-v2-en).
   Give it the same horizontal gutters as the other homepage sections. */
:is(#articles-thematiques-v2,#articles-thematiques-v2-en) {
  padding-left: 112px !important;
  padding-right: 112px !important;
}

:is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 768px) {
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article,
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-text,
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article:nth-child(odd) .pourquoi-v2-text,
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article:nth-child(even) .pourquoi-v2-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 1440px) {
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) {
    padding-left: clamp(112px, 8vw, 180px) !important;
    padding-right: clamp(112px, 8vw, 180px) !important;
  }
}


/* FINAL NAV RESPONSIVE IMPROVEMENT
   Keep navigation spacing consistent and switch to the hamburger
   before the desktop links become compressed. */
.nav-links {
  gap: 34px !important;
  flex-shrink: 0 !important;
}

.nav-links li,
.nav-links a {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Preserve the desktop navigation until there is no longer enough room */
@media (max-width: 1180px) {
  nav {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-burger {
    display: flex !important;
  }

  .nav-cta {
    display: none !important;
  }

  .nav-links.open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: var(--white) !important;
    border-bottom: 1px solid var(--rule) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important;
  }

  .nav-links.open li {
    width: 100% !important;
  }

  .nav-links.open a {
    display: block !important;
    width: 100% !important;
    padding: 16px 32px !important;
    border-bottom: 1px solid var(--rule) !important;
  }
}


/* ── MEDICAL EDUCATION ACCESS DISCLAIMER ── */
body.medical-disclaimer-open {
  overflow: hidden !important;
}

.medical-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.medical-disclaimer.is-hidden {
  display: none;
}

.medical-disclaimer-card {
  width: min(100%, 620px);
  background: var(--white);
  padding: 52px 54px 48px;
  border-top: 5px solid #FF7F11;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}

.medical-disclaimer-overline {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 16px;
}

.medical-disclaimer-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 24px;
}

.medical-disclaimer-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 28px;
}

.medical-disclaimer-question {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--black);
  margin-bottom: 26px;
}

.medical-disclaimer-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.medical-disclaimer-btn {
  appearance: none;
  border: 1px solid var(--black);
  padding: 13px 22px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.medical-disclaimer-btn--yes {
  background: #FF7F11;
  border-color: #FF7F11;
  color: var(--black);
}

.medical-disclaimer-btn--yes:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.medical-disclaimer-btn--no {
  background: var(--white);
  color: var(--black);
}

.medical-disclaimer-btn--no:hover {
  background: var(--black);
  color: var(--white);
}

@media (max-width: 600px) {
  .medical-disclaimer {
    padding: 18px;
    align-items: center;
  }

  .medical-disclaimer-card {
    padding: 38px 26px 32px;
  }

  .medical-disclaimer-actions {
    flex-direction: column;
  }

  .medical-disclaimer-btn {
    width: 100%;
    text-align: center;
  }
}



/* ── BILINGUAL LANGUAGE SWITCH ── */
.lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 14px;
  margin-right: 14px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lang-option {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lang-option:hover { color: var(--black); }
.lang-option.active {
  color: #FF7F11;
  font-weight: 800;
  pointer-events: none;
}
.lang-separator { color: var(--rule); font-weight: 400; }

/* Keep the established nav spacing intact: switch to burger before links compress. */
@media (max-width: 1320px) {
  nav { position: relative; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-links.open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: var(--white) !important;
    border-bottom: 1px solid var(--rule) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important;
    z-index: 110;
  }
  .nav-links.open li { width: 100% !important; }
  .nav-links.open a {
    display: block !important;
    width: 100% !important;
    padding: 16px 32px !important;
    border-bottom: 1px solid var(--rule) !important;
  }
}
@media (max-width: 600px) {
  .lang-switch { margin-left: auto; margin-right: 16px; font-size: 11px; gap: 5px; }
}

/* FINAL VISIBILITY FIX — comparison duplicate + FR/EN timelines */
#ecouter-alt-fr,
#ecouter-alt-en {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 420px;
}

#innovation-stair .s2-stage,
#innovation-stair-en .s2-stage,
#innovation-stair .s2-quote,
#innovation-stair-en .s2-quote,
#innovation-stair .s2-year,
#innovation-stair-en .s2-year {
  opacity: 1 !important;
}

#innovation-stair .s2-quote,
#innovation-stair-en .s2-quote,
#innovation-stair .s2-year,
#innovation-stair-en .s2-year {
  transform: none !important;
}

/* Keep timeline labels visible even if the observer has not fired. */
#innovation-stair .s2-label,
#innovation-stair-en .s2-label {
  opacity: 1 !important;
  transform: none !important;
}


/* FINAL COMPACT VERSION — VERSION 2 ALTERNATIVE
   Approx. 60% shorter vertically on desktop */
#ecouter-alt-fr,
#ecouter-alt-en {
  min-height: 0 !important;
  padding: 38px 112px 42px !important;
}

#ecouter-alt-fr::before,
#ecouter-alt-en::before {
  top: -45px !important;
  font-size: clamp(120px, 14vw, 220px) !important;
}

#ecouter-alt-fr .ecouter-alt-kicker,
#ecouter-alt-en .ecouter-alt-kicker {
  font-size: 10px !important;
  margin-bottom: 24px !important;
}

#ecouter-alt-fr .ecouter-alt-grid,
#ecouter-alt-en .ecouter-alt-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(40px, 4.5vw, 96px) !important;
}

#ecouter-alt-fr .ecouter-alt-card,
#ecouter-alt-en .ecouter-alt-card,
#ecouter-alt-fr .ecouter-alt-card:nth-child(1),
#ecouter-alt-fr .ecouter-alt-card:nth-child(2),
#ecouter-alt-fr .ecouter-alt-card:nth-child(3),
#ecouter-alt-en .ecouter-alt-card:nth-child(1),
#ecouter-alt-en .ecouter-alt-card:nth-child(2),
#ecouter-alt-en .ecouter-alt-card:nth-child(3) {
  grid-column: auto !important;
  margin-top: 0 !important;
  padding-top: 14px !important;
}

#ecouter-alt-fr .ecouter-alt-num,
#ecouter-alt-en .ecouter-alt-num {
  font-size: 10px !important;
  margin-bottom: 10px !important;
}

#ecouter-alt-fr .ecouter-alt-card p,
#ecouter-alt-fr .ecouter-alt-card:nth-child(2) p,
#ecouter-alt-fr .ecouter-alt-card:nth-child(3) p,
#ecouter-alt-en .ecouter-alt-card p,
#ecouter-alt-en .ecouter-alt-card:nth-child(2) p,
#ecouter-alt-en .ecouter-alt-card:nth-child(3) p {
  font-size: clamp(17px, 1.45vw, 23px) !important;
  line-height: 1.28 !important;
}

#ecouter-alt-fr .ecouter-alt-accent,
#ecouter-alt-en .ecouter-alt-accent {
  width: 48px !important;
  height: 3px !important;
  margin-top: 18px !important;
}

@media (max-width: 900px) {
  #ecouter-alt-fr,
  #ecouter-alt-en {
    padding: 44px 32px !important;
  }

  #ecouter-alt-fr .ecouter-alt-grid,
  #ecouter-alt-en .ecouter-alt-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  #ecouter-alt-fr .ecouter-alt-card p,
  #ecouter-alt-fr .ecouter-alt-card:nth-child(2) p,
  #ecouter-alt-fr .ecouter-alt-card:nth-child(3) p,
  #ecouter-alt-en .ecouter-alt-card p,
  #ecouter-alt-en .ecouter-alt-card:nth-child(2) p,
  #ecouter-alt-en .ecouter-alt-card:nth-child(3) p {
    font-size: clamp(18px, 3.2vw, 24px) !important;
  }
}

@media (max-width: 640px) {
  #ecouter-alt-fr,
  #ecouter-alt-en {
    padding: 36px 20px !important;
  }

  #ecouter-alt-fr .ecouter-alt-kicker,
  #ecouter-alt-en .ecouter-alt-kicker {
    margin-bottom: 20px !important;
  }

  #ecouter-alt-fr .ecouter-alt-card p,
  #ecouter-alt-fr .ecouter-alt-card:nth-child(2) p,
  #ecouter-alt-fr .ecouter-alt-card:nth-child(3) p,
  #ecouter-alt-en .ecouter-alt-card p,
  #ecouter-alt-en .ecouter-alt-card:nth-child(2) p,
  #ecouter-alt-en .ecouter-alt-card:nth-child(3) p {
    font-size: 18px !important;
  }
}



/* FINAL ECOUTER VERSION — simplified alternative directly under hero */
#ecouter-alt-fr,
#ecouter-alt-en {
  background: #565656 !important;
  padding-top: 28px !important;
  padding-bottom: 30px !important;
}

#ecouter-alt-fr .ecouter-alt-grid,
#ecouter-alt-en .ecouter-alt-grid {
  margin-top: 0 !important;
}

#ecouter-alt-fr .ecouter-alt-card,
#ecouter-alt-en .ecouter-alt-card {
  border-top: 0 !important;
  padding-top: 0 !important;
}

#ecouter-alt-fr .ecouter-alt-card p,
#ecouter-alt-fr .ecouter-alt-card:nth-child(2) p,
#ecouter-alt-fr .ecouter-alt-card:nth-child(3) p,
#ecouter-alt-en .ecouter-alt-card p,
#ecouter-alt-en .ecouter-alt-card:nth-child(2) p,
#ecouter-alt-en .ecouter-alt-card:nth-child(3) p {
  color: #FFFFFF !important;
}

/* RESTORED ORANGE ACCENT LINE */
#ecouter-alt-fr .ecouter-alt-accent,
#ecouter-alt-en .ecouter-alt-accent {
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: #FF7F11 !important;
  margin-top: 18px !important;
}

/* TARLOV INFOGRAPHICS — language-specific */
.tarlov-infographic-block {
  margin: 48px 0 64px;
}
.tarlov-infographic-block img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .tarlov-infographic-block {
    margin: 32px 0 44px;
  }
  .tarlov-infographic-block img {
    border-radius: 6px;
  }
}

/* TARLOV INTRO — image on the right side of the first section */
.tarlov-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 20px;
}

.tarlov-intro-text .detail-section-title {
  margin-top: 0;
}

.tarlov-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .tarlov-intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tarlov-intro-image {
    order: 2;
  }

  .tarlov-intro-text {
    order: 1;
  }
}

/* FINAL TARLOV INTRO SPACING — match Facet "Understand" section */
#page-kystes-tarlov .tarlov-intro-grid,
#page-kystes-tarlov-en .tarlov-intro-grid {
  width: calc(100vw - 192px) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr) !important;
  gap: 56px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

#page-kystes-tarlov .tarlov-intro-text,
#page-kystes-tarlov-en .tarlov-intro-text {
  max-width: 760px !important;
}

#page-kystes-tarlov .tarlov-intro-text .detail-section-title,
#page-kystes-tarlov-en .tarlov-intro-text .detail-section-title {
  margin: 56px 0 18px !important;
}

#page-kystes-tarlov .tarlov-intro-image,
#page-kystes-tarlov-en .tarlov-intro-image {
  width: 100% !important;
  margin: 56px 0 0 !important;
}

#page-kystes-tarlov .tarlov-intro-image img,
#page-kystes-tarlov-en .tarlov-intro-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  object-position: top center !important;
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  #page-kystes-tarlov .tarlov-intro-grid,
  #page-kystes-tarlov-en .tarlov-intro-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  #page-kystes-tarlov .tarlov-intro-text,
  #page-kystes-tarlov-en .tarlov-intro-text {
    max-width: 100% !important;
  }

  #page-kystes-tarlov .tarlov-intro-image,
  #page-kystes-tarlov-en .tarlov-intro-image {
    margin-top: 0 !important;
    max-width: 680px !important;
  }

  #page-kystes-tarlov .tarlov-intro-text .detail-section-title,
  #page-kystes-tarlov-en .tarlov-intro-text .detail-section-title {
    margin-top: 56px !important;
  }
}

/* ── DLF QUESTIONNAIRE — SOURCE FIGURES FROM THE 2013 THESIS ── */
.questionnaire-image-frame {
  min-height: 430px;
  border: 1px solid #D7D7D3;
  background: #F4F4F2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.questionnaire-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 382px;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 900px) {
  .questionnaire-image-frame { min-height: 260px; padding: 18px; }
  .questionnaire-image-frame img { max-height: 360px; }
}
@media (max-width: 600px) {
  .questionnaire-image-frame { min-height: 210px; padding: 14px; }
  .questionnaire-image-frame img { max-height: 300px; }
}


/* ── QUESTIONNAIRE DOWNLOAD + TRAINING REQUEST ── */
.questionnaire-download {
  border: 0;
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
}

.training-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,10,10,0.72);
}
.training-modal.is-hidden { display: none; }
body.training-modal-open { overflow: hidden; }
.training-modal-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-top: 5px solid #FF7F11;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  padding: 40px;
  position: relative;
}
.training-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.training-modal-overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF7F11;
  margin-bottom: 14px;
}
.training-modal-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 800;
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 16px;
}
.training-modal-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 28px;
}
.training-form-group { margin-bottom: 20px; }
.training-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 8px;
}
.training-form-group input,
.training-form-group select,
.training-form-group textarea {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.training-form-group input:focus,
.training-form-group select:focus,
.training-form-group textarea:focus { border-color: #FF7F11; }
.training-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.training-profession-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.training-radio {
  display: flex !important;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--rule);
  padding: 11px 12px;
  margin: 0 !important;
  cursor: pointer;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.training-radio input { width: auto; padding: 0; accent-color: #FF7F11; }
.training-consent {
  display: grid !important;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 8px;
  cursor: pointer;
}
.training-consent input { width: auto; margin-top: 2px; accent-color: #FF7F11; }
.training-consent span {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}
.training-form-status {
  display: none;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--grey);
  border-left: 3px solid #FF7F11;
  font-size: 13px;
  line-height: 1.5;
  color: var(--black);
}
.training-form-status.show { display: block; }
.training-form-status.error { border-left-color: #B42318; }
.training-form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.training-form-submit {
  border: 0;
  cursor: pointer;
}
.training-form-direct {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.training-form-direct:hover { color: var(--black); border-color: var(--black); }
.training-form-privacy {
  margin-top: 20px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--light);
}
@media (max-width: 600px) {
  .training-modal { padding: 12px; align-items: flex-end; }
  .training-modal-card { padding: 32px 20px 24px; max-height: calc(100vh - 24px); }
  .training-form-row, .training-profession-options { grid-template-columns: 1fr; }
}



/* KYSTES DE TARLOV — same crop, lower focal point on the cysts */
:is(#page-kystes-tarlov,#page-kystes-tarlov-en) .page-header-minimal-image img {
  object-position: center 82% !important;
}


/* LATEST HOMEPAGE REFINEMENTS — 2027 formatting + facet X-ray focal crop */
.tl-c--2027 .tl-role-line {
  display: block;
}
.tl-c--2027 small {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 0;
  color: var(--muted);
}
.tl-c--2027 small + .tl-role-line {
  margin-top: 9px;
}

/* Centre the first “Pourquoi” X-ray around the facet implant highlighted by the user. */
:is(#articles-thematiques-v2,#articles-thematiques-v2-en)
  .pourquoi-v2-article:first-child .pourquoi-v2-img img {
  object-position: 36% 30% !important;
  transform: scale(1.16);
  transform-origin: 36% 30%;
}

@media (max-width: 768px) {
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en)
    .pourquoi-v2-article:first-child .pourquoi-v2-img img {
    transform: scale(1.10);
    object-position: 36% 30% !important;
  }
}


/* ── FACET QUESTIONNAIRE — ONE QUESTION AT A TIME ── */
#page-questionnaire-facettaire .questionnaire-wrap,
#page-questionnaire-facettaire-en .questionnaire-wrap {
  max-width: 1280px;
  padding-top: 54px;
}
#page-questionnaire-facettaire .questionnaire-intro,
#page-questionnaire-facettaire-en .questionnaire-intro {
  max-width: 100%;
  margin-bottom: 42px;
}
#page-questionnaire-facettaire .questionnaire-note,
#page-questionnaire-facettaire-en .questionnaire-note {
  margin: 0;
  padding: 22px 24px;
  border: 2px solid #FF7F11;
  border-left-width: 2px;
  background: #FFFFFF;
  color: #0A0A0A;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}
#page-questionnaire-facettaire .questionnaire-note strong,
#page-questionnaire-facettaire-en .questionnaire-note strong { font-weight: 800; }
.questionnaire-progress { margin-bottom: 34px; }
.questionnaire-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 12px;
}
.questionnaire-progress-label,
.questionnaire-progress-percent {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.questionnaire-progress-label { color: var(--black); }
.questionnaire-progress-percent { color: #FF7F11; }
.questionnaire-progress-track {
  height: 5px;
  background: #E7E7E4;
  overflow: hidden;
}
.questionnaire-progress-fill {
  height: 100%;
  background: #FF7F11;
  transition: width .28s ease;
}
.questionnaire-progress-steps {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 5px;
  margin-top: 8px;
}
.questionnaire-progress-steps span {
  height: 3px;
  background: #DEDEDE;
  transition: background .2s ease;
}
.questionnaire-progress-steps span.is-complete,
.questionnaire-progress-steps span.is-current { background: #FF7F11; }
.questionnaire-step { margin: 0; padding: 0; }
.questionnaire-step[hidden] { display: none !important; }
.questionnaire-step-grid {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: stretch;
  min-height: 430px;
}
.questionnaire-image-placeholder {
  min-height: 430px;
  border: 1px solid #D7D7D3;
  background: #F4F4F2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 38px;
  color: var(--muted);
}
.questionnaire-image-placeholder-icon {
  position: relative;
  width: 86px;
  height: 64px;
  border: 2px solid #BEBEB9;
  margin-bottom: 22px;
}
.questionnaire-image-placeholder-icon span:first-child {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #BEBEB9;
  border-radius: 50%;
  top: 13px;
  right: 16px;
}
.questionnaire-image-placeholder-icon span:last-child {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 22px;
  border-left: 2px solid #BEBEB9;
  border-bottom: 2px solid #BEBEB9;
  transform: skewY(-28deg);
}
.questionnaire-image-placeholder-copy strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8A86;
  margin-bottom: 7px;
}
.questionnaire-image-placeholder-copy small {
  font-size: 13px;
  font-weight: 300;
  color: #9A9A96;
}
.questionnaire-question-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 0;
}
.questionnaire-question-meta {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.questionnaire-question-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FF7F11;
}
.questionnaire-clinical-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 5px 8px;
}
.questionnaire-question-number {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.questionnaire-question-panel .questionnaire-context {
  margin: 0 0 12px;
  max-width: 600px;
  color: var(--muted);
}
.questionnaire-step .questionnaire-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--black);
  margin-bottom: 34px;
  max-width: 680px;
}
.questionnaire-step .questionnaire-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 540px);
}
.questionnaire-step .questionnaire-choice { display: block; }
.questionnaire-step .questionnaire-choice span {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 14px 18px;
  font-size: 13px;
  border: 1px solid #CFCFCC;
}
.questionnaire-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.questionnaire-wizard-back {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--black);
  background: transparent;
  padding: 0 0 3px;
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
  cursor: pointer;
}
.questionnaire-wizard-next {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.questionnaire-wizard-next:disabled,
.questionnaire-wizard-next.is-unanswered {
  opacity: .35;
}
.questionnaire-wizard-next.is-unanswered {
  cursor: pointer;
}
.questionnaire-wizard-next span { font-size: 19px; line-height: 0; }
.questionnaire-results--wizard[hidden] { display: none !important; }
.questionnaire-results--wizard {
  margin-top: 0;
  padding: 40px;
}
.questionnaire-results--wizard .questionnaire-results-title { font-size: 30px; }
@media (max-width: 900px) {
  .questionnaire-step-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .questionnaire-image-placeholder { min-height: 260px; }
  .questionnaire-question-panel { padding: 0; }
}
@media (max-width: 600px) {
  #page-questionnaire-facettaire .questionnaire-note,
  #page-questionnaire-facettaire-en .questionnaire-note { font-size: 15px; padding: 18px; }
  .questionnaire-progress-steps { gap: 3px; }
  .questionnaire-image-placeholder { min-height: 210px; }
  .questionnaire-step .questionnaire-options { grid-template-columns: 1fr; }
  .questionnaire-wizard-actions { align-items: stretch; }
  .questionnaire-wizard-next { justify-content: center; }
}



/* Syndrome Facettaire / Facet Syndrome navigation dropdown */
.nav-dropdown-item { position: relative; }
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover,
.nav-dropdown[open] summary { color: var(--black); }
.nav-dropdown-caret {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  color: #FF7F11;
  transition: transform .18s ease;
  transform-origin: center;
}
.nav-dropdown[open] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 18px);
  left: -18px;
  min-width: 245px;
  padding: 8px 0;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 30px rgba(0,0,0,.09);
  z-index: 250;
}
.nav-dropdown[open] .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block !important;
  padding: 13px 18px !important;
  border: 0 !important;
  font-size: 12px !important;
  letter-spacing: .13em !important;
  color: var(--muted) !important;
}
.nav-dropdown-menu a:hover {
  color: var(--black) !important;
  background: var(--grey);
}
@media (min-width: 1321px) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}
@media (max-width: 1320px) {
  .nav-links.open .nav-dropdown-item { width: 100% !important; }
  .nav-links.open .nav-dropdown { width: 100%; }
  .nav-links.open .nav-dropdown summary {
    width: 100%;
    padding: 16px 32px;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    letter-spacing: .14em;
  }
  .nav-dropdown-menu,
  .nav-dropdown[open] .nav-dropdown-menu {
    position: static;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #F7F7F5;
  }
  .nav-dropdown-menu a {
    padding: 14px 32px 14px 52px !important;
    border-bottom: 1px solid var(--rule) !important;
    background: #F7F7F5;
  }
}

/* Facet questionnaire promotional card — replaces the first “Pourquoi” image only */
.pourquoi-v2-quiz-wrap {
  background: #0A0A0A !important;
  border: 1px solid var(--rule);
  min-height: 550px;
}
.facet-quiz-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #0A0A0A;
  color: #FFFFFF;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
.facet-quiz-card:focus-visible { box-shadow: inset 0 0 0 3px #FF7F11; }
.facet-quiz-stat {
  padding: 30px 34px 28px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
}
.facet-quiz-stat strong { font-weight: 800; }
.facet-quiz-stat a {
  color: var(--black);
  font-weight: 700;
  text-decoration-color: #FF7F11;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.facet-quiz-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 34px 38px;
  background: #0A0A0A;
  color: #FFFFFF;
  overflow: hidden;
}
.facet-quiz-main::before { display: none; }
.facet-quiz-graphic { display: none; }
.facet-dot {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #FF7F11;
  background: rgba(255,127,17,.08);
}
.facet-dot--top { left: 57px; top: 0; }
.facet-dot--left { left: 18px; top: 38px; }
.facet-dot--center { left: 57px; top: 38px; background: #FF7F11; }
.facet-dot--right { right: 18px; top: 38px; }
.facet-spine-line {
  position: absolute;
  width: 2px;
  height: 84px;
  left: 74px;
  top: 0;
  background: rgba(10,10,10,.24);
  z-index: -1;
}
.facet-quiz-kicker {
  position: relative;
  z-index: 1;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 9px;
}
.facet-quiz-title {
  position: relative;
  z-index: 1;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 28px;
}
.facet-quiz-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 390px);
  min-height: 54px;
  padding: 15px 24px;
  background: #FF7F11;
  color: #0A0A0A;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: background .16s ease, color .16s ease;
}
.facet-quiz-card:hover .facet-quiz-button { background: #FF9A3D; color: #0A0A0A; }
.facet-quiz-note {
  padding: 19px 30px 21px;
  background: #FFFFFF;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.facet-quiz-note strong { color: var(--black); font-weight: 700; }
@media (max-width: 768px) {
  .pourquoi-v2-article:first-child .pourquoi-v2-quiz-wrap { min-height: 425px !important; }
  .facet-quiz-stat { padding: 26px 24px 24px; }
  .facet-quiz-main { padding: 32px 22px 36px; }
  .facet-quiz-note { padding: 18px 22px 20px; }
  .facet-quiz-title { font-size: 42px; }
}


/* Keep the dropdown functionality while making its visible label identical to every other navigation link. */
.nav-links .nav-dropdown summary {
  font-family: "Barlow", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  line-height: normal !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
}
.nav-links .nav-dropdown summary:hover,
.nav-links .nav-dropdown[open] summary { color: var(--black) !important; }
.nav-dropdown-caret { display: none !important; }

/* Give more vertical room to the black centre of the quiz card by tightening the two white bands. */
.facet-quiz-stat {
  color: #0A0A0A !important;
  padding: 17px 26px 16px !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.35 !important;
}
.facet-quiz-note {
  padding: 11px 24px 12px !important;
  font-size: 11.5px !important;
  line-height: 1.42 !important;
}
.facet-quiz-title {
  font-size: clamp(30px, 3.2vw, 46px) !important;
  margin-bottom: 20px !important;
}
.facet-quiz-button {
  width: min(100%, 330px) !important;
  min-height: 46px !important;
  padding: 12px 20px !important;
  font-size: 12px !important;
  gap: 9px !important;
}
@media (max-width: 768px) {
  .nav-links.open .nav-dropdown summary {
    font-size: 13px !important;
    letter-spacing: .14em !important;
  }
  .facet-quiz-stat { padding: 16px 20px 15px !important; font-size: 15px !important; }
  .facet-quiz-note { padding: 11px 20px 12px !important; font-size: 11px !important; }
  .facet-quiz-title { font-size: 36px !important; }
  .facet-quiz-button { min-height: 44px !important; font-size: 11.5px !important; }
}


/* Navigation: dropdown trigger uses the exact same vertical alignment as its sibling links. */
.nav-links > li { display: flex; align-items: center; }
.nav-links > li > a,
.nav-links .nav-dropdown summary {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  min-height: 14px;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.nav-links .nav-dropdown,
.nav-links .nav-dropdown-item { align-items: center; }

/* Promotional card: remove the former DLF subtitle entirely. */
.facet-quiz-kicker { display: none !important; }

/* 'Lire la suite / Read more' now sits directly below the intro and reads as an expandable control. */
.pourquoi-readmore-row {
  margin-top: 18px;
  margin-bottom: 20px;
}
.pourquoi-readmore-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 0 !important;
}
.pourquoi-readmore-link::after {
  content: "⌄";
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .18s ease;
}
.pourquoi-readmore-link.is-open::after {
  transform: translateY(1px) rotate(180deg);
}

/* Stronger 'Comprendre… / Understand…' CTA replaces the former quote position. */
.pourquoi-understand-cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  padding: 14px 20px;
  background: #FF7F11;
  border: 1px solid #FF7F11;
  color: #0A0A0A;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pourquoi-understand-cta:hover {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FFFFFF;
}
.pourquoi-understand-arrow {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

@media (max-width: 1320px) {
  /* Preserve the existing mobile dropdown spacing rules. */
  .nav-links.open .nav-dropdown summary {
    min-height: 0;
    padding: 16px 32px !important;
    line-height: normal !important;
  }
}
@media (max-width: 640px) {
  .pourquoi-understand-cta { width: 100%; }
}


/* Tighten the gap between the introductory copy and Lire la suite / Read more. */
.pourquoi-readmore-row {
  margin-top: 7px !important;
}

/* Slightly smaller typography inside the Syndrome Facettaire / Facet Syndrome dropdown only. */
.nav-dropdown-menu a {
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
}


/* Reduce by 50% the gap between the intro body and Lire la suite / Read more. */
:is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-text > .pourquoi-v2-desc:first-of-type {
  margin-bottom: 16px !important;
}
:is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-readmore-row {
  margin-top: 0 !important;
}


/* Medical Education — training CTA in the video header */
.video-section-head--with-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.video-training-cta {
  justify-self: end;
  align-self: center;
  min-width: 270px;
  text-align: center;
  padding: 18px 34px;
  background: #FF7F11;
  color: #0A0A0A;
  border: 0;
}
.video-training-cta:hover {
  background: #0A0A0A;
  color: #FFFFFF;
}
@media (max-width: 900px) {
  .video-section-head--with-cta {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .video-training-cta {
    justify-self: start;
    min-width: 0;
  }
}


/* ============================================================
   MOBILE-ONLY HOMEPAGE REFINEMENTS — requested 2026-08-30
   Desktop/tablet layouts above 768px are intentionally untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* HERO — portrait remains on the right, with a deliberate close crop.
     Text owns the left column so it never overlaps the portrait. */
  :is(#page-home,#page-home-en) .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 59%) minmax(0, 41%) !important;
    align-items: stretch !important;
    min-height: 430px !important;
    height: 430px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--grey) !important;
  }

  :is(#page-home,#page-home-en) .hero::before,
  :is(#page-home,#page-home-en) .hero::after {
    border: 0 !important;
    box-shadow: none !important;
  }

  :is(#page-home,#page-home-en) .hero-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 54px 12px 36px 20px !important;
    border: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    justify-content: flex-start !important;
  }

  :is(#page-home,#page-home-en) .hero-name {
    font-size: clamp(48px, 14.2vw, 68px) !important;
    line-height: 0.88 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  :is(#page-home,#page-home-en) .hero-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 4px !important;
  }

  :is(#page-home,#page-home-en) .hero-desc br {
    display: inline !important; /* the tagline is two sentences: keep the line break on phones too */
  }

  :is(#page-home,#page-home-en) .hero-photo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  :is(#page-home,#page-home-en) .hero-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    /* Keeps the face against the right edge so only part of it remains visible. */
    object-position: left top !important;
  }

  /* Remove the faint rule that previously appeared beneath the mobile hero. */
  :is(#page-home,#page-home-en) .hero,
  :is(#page-home,#page-home-en) .hero-text,
  :is(#page-home,#page-home-en) .hero-photo {
    border-bottom: 0 !important;
  }

  /* INNOVATION / STAIRCASE TIMELINE — mobile: vertical timeline with evenly-spaced items */
  :is(#innovation-stair,#innovation-stair-en) {
    padding-top: 48px !important;
    padding-bottom: 100px !important;
    position: relative !important;
  }

  :is(#innovation-stair,#innovation-stair-en) .s2-quote {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 48px !important;
    white-space: normal !important;
  }

  :is(#innovation-stair,#innovation-stair-en) .s2-stage {
    position: relative !important;
    padding-left: 30px !important;
    /* Total height for 4 evenly-spaced items */
    min-height: 300px !important;
  }

  /* Hide the SVG on mobile */
  :is(#innovation-stair,#innovation-stair-en) .s2-svg {
    display: none !important;
  }

  /* Vertical ORANGE line on left - spans entire timeline */
  :is(#innovation-stair,#innovation-stair-en) .s2-stage::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: -40px !important;
    width: 2px !important;
    background: #FF7F11 !important;
  }

  /* DOWN arrow at the end of the orange line - CENTERED over line */
  :is(#innovation-stair,#innovation-stair-en) .s2-stage::after {
    content: '▼' !important;
    position: absolute !important;
    left: -7px !important;
    bottom: -56px !important;
    font-size: 16px !important;
    color: #FF7F11 !important;
    line-height: 1 !important;
  }

  /* Timeline items - EVENLY SPACED groups */
  :is(#innovation-stair,#innovation-stair-en) .s2-label {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    clear: both !important;
    height: auto !important;
  }

  /* Position each GROUP at equal intervals with fixed height */
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(1) {
    min-height: 70px !important;
    margin-bottom: 0px !important;
  }
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(2) {
    min-height: 70px !important;
    margin-bottom: 0px !important;
  }
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(3) {
    min-height: 70px !important;
    margin-bottom: 0px !important;
  }
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(4) {
    min-height: 70px !important;
    margin-bottom: 0px !important;
  }

  /* Year styling */
  :is(#innovation-stair,#innovation-stair-en) .s2-year {
    font-size: 32px !important;
    letter-spacing: 0 !important;
    color: #FF7F11 !important;
    font-weight: 800 !important;
    font-family: "Barlow Condensed", sans-serif !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    line-height: 1.1 !important;
    clear: both !important;
    float: none !important;
    position: static !important;
    height: auto !important;
  }

  /* Title and description wrapper */
  :is(#innovation-stair,#innovation-stair-en) .s2-below {
    position: static !important;
    left: auto !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    clear: both !important;
    display: block !important;
    float: none !important;
  }

  /* Title styling */
  :is(#innovation-stair,#innovation-stair-en) .s2-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    font-family: "Barlow Condensed", sans-serif !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Description styling */
  :is(#innovation-stair,#innovation-stair-en) .s2-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #767676 !important;
    font-family: "Barlow", sans-serif !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Remove staggered offsets */
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(1),
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(2),
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(3),
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(4),
  :is(#innovation-stair,#innovation-stair-en) .s2-label:nth-of-type(5) {
    margin-left: 0 !important;
  }

  /* Orange down arrow at bottom */

  :is(#apropos-v2,#apropos-v2-en) .cv2-tall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  :is(#apropos-v2,#apropos-v2-en) .cv2-tall-card:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* QUOTE / PHOTO — tighter gutters, smaller copy and crop biased toward
     Dr. Srour's face so the smile remains visible on a narrow screen. */
  :is(#citation,#citation-en).citation-section {
    height: 350px !important;
    min-height: 350px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :is(#citation,#citation-en) .citation-inner {
    padding-left: 16px !important;
    padding-right: 12px !important;
    max-width: 64% !important;
  }

  :is(#citation,#citation-en) .citation-mark {
    font-size: 54px !important;
    margin-bottom: 8px !important;
  }

  :is(#citation,#citation-en) .citation-text {
    font-size: clamp(22px, 6.2vw, 27px) !important;
    line-height: 1.18 !important;
    margin-bottom: 14px !important;
  }

  :is(#citation,#citation-en) .citation-bg {
    object-position: 67% 34% !important;
  }

  :is(#citation,#citation-en) .citation-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.52) 46%, rgba(0,0,0,0.06) 76%, rgba(0,0,0,0) 100%) !important;
  }

  /* Reduce only the mobile vertical gap before PARCOURS. */
  :is(#parcours,#parcours-en) {
    padding-top: 58px !important;
  }

  :is(#parcours,#parcours-en) > div[style*="text-align:left"] {
    margin-top: 30px !important;
  }

  /* Reduce only the mobile gap before the two POURQUOI blocks. */
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) {
    padding-top: 48px !important;
  }

  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}


/* Mobile: make the dropdown trigger exactly match the other menu links. */
@media (max-width: 1320px) {
  .nav-links.open .nav-dropdown summary {
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    line-height: normal !important;
  }
}
/* Mobile: triple the gap between the innovation statement and the timeline. */
@media (max-width: 768px) {
  :is(#innovation-stair,#innovation-stair-en) .s2-quote {
    margin-bottom: 78px !important;
  }
}
/* Full Le Point image navigation. */
.lp-lightbox-nav {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(10,10,10,.72);
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-size: 34px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10002;
  transition: background .15s ease, border-color .15s ease;
}
.lp-lightbox-nav.is-visible { display: flex; }
.lp-lightbox-nav:hover { background: #F28A2E; border-color: #F28A2E; }
.lp-lightbox-prev { left: 22px; }
.lp-lightbox-next { right: 22px; }
@media (max-width: 640px) {
  .lp-lightbox-nav { width: 44px; height: 44px; font-size: 28px; }
  .lp-lightbox-prev { left: 8px; }
  .lp-lightbox-next { right: 8px; }
  .lp-lightbox-stage { max-width: 94vw; }
  .lp-lightbox-stage img { max-width: 94vw; max-height: 86vh; }
}


/* MOBILE-ONLY refinements requested 2026-08-30 */
@media (max-width: 768px) {
  /* Questionnaire: specific override beats the global mobile rule that hides .nav-cta. */
  :is(#page-questionnaire-facettaire,#page-questionnaire-facettaire-en) .questionnaire-wizard-next {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1;
    min-height: 52px;
    padding: 14px 20px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  :is(#page-questionnaire-facettaire,#page-questionnaire-facettaire-en) .questionnaire-wizard-next.is-unanswered {
    opacity: .42 !important;
  }
  :is(#page-questionnaire-facettaire,#page-questionnaire-facettaire-en) .questionnaire-wizard-actions {
    display: flex !important;
    width: 100%;
  }

  /* Main CTA: keep the action visible in the mobile navigation bar. */
  nav {
    padding: 12px 14px 10px !important;
    gap: 7px !important;
  }
  nav .nav-logo {
    gap: 4px !important;
    min-width: 0 !important;
  }
  nav .nav-logo span:first-child {
    font-size: 19px !important;
    line-height: 1 !important;
  }
  nav .nav-logo-sub {
    font-size: 9px !important;
    letter-spacing: .16em !important;
  }
  nav > .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 10px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    margin-left: auto !important;
    margin-right: 10px !important;
    flex: 0 0 auto !important;
  }
  nav .lang-switch {
    margin-left: 2px !important;
    margin-right: 2px !important;
    font-size: 9px !important;
    gap: 4px !important;
  }
  nav .nav-burger {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  /* Investigateur Principal / Principal Investigator: shorter + dark grey. */
  :is(#apropos-v2,#apropos-v2-en) .cv2-tall-card:last-child {
    min-height: 160px !important;
    padding: 22px 18px !important;
    background: #565656 !important;
  }
  :is(#apropos-v2,#apropos-v2-en) .cv2-tall-card:last-child .cv2-investigateur {
    min-height: 0 !important;
    margin-bottom: 8px !important;
  }
  :is(#apropos-v2,#apropos-v2-en) .cv2-tall-card:last-child .cv2-tall-desc {
    margin-top: 8px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 420px) {
  /* On very narrow phones keep all nav controls on one row. */
  nav .nav-logo span:first-child { font-size: 17px !important; }
  nav > .nav-cta { padding: 8px 8px !important; font-size: 7.8px !important; }
  nav .lang-switch { font-size: 8px !important; }
}


@media (max-width: 768px) {
  /* Exact mobile menu typography parity. */
  .nav-links.open > li > a,
  .nav-links.open .nav-dropdown summary {
    font-family: "Barlow", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    padding: 16px 32px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep FR | EN centered in the mobile navigation bar. */
  nav { position: relative !important; }
  nav .lang-switch {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  /* Equal left/right gutters for expertise cards. */
  :is(#specialites-v2,#specialites-v2-en) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 48px !important;
    padding-bottom: 96px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :is(#specialites-v2,#specialites-v2-en) .sv2-grid {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Hide last 5 cards on mobile */
  :is(#specialites-v2,#specialites-v2-en) .sv2-card:nth-child(n+6) {
    display: none !important;
  }

  /* Show when expanded */
  :is(#specialites-v2,#specialites-v2-en) .sv2-card:nth-child(n+6).sv2-card--show {
    display: block !important;
  }

  /* Expand button styling */
  .sv2-expand-btn {
    display: block !important;
    width: 100% !important;
    padding: 20px !important;
    margin-top: 16px !important;
    text-align: center !important;
    background: transparent !important;
    border: 2px solid #FF7F11 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FF7F11 !important;
    font-family: "Barlow Condensed", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  .sv2-expand-btn:active {
    background: #FF7F11 !important;
    color: white !important;
  }

  :is(#specialites-v2,#specialites-v2-en) .sv2-card {
    padding: 20px 16px 24px 16px !important;
    margin: 0 !important;
  }

  :is(#specialites-v2,#specialites-v2-en) .sv2-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  :is(#specialites-v2,#specialites-v2-en) .sv2-desc {
    font-size: 13px !important;
  }

  /* Facet Pourquoi block: show the questionnaire card before the editorial copy on mobile. */
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article:first-child .pourquoi-v2-quiz-wrap {
    order: 1 !important;
  }
  :is(#articles-thematiques-v2,#articles-thematiques-v2-en) .pourquoi-v2-article:first-child .pourquoi-v2-text {
    order: 2 !important;
  }

  /* Results actions must remain visible and usable on phones. */
  :is(#page-questionnaire-facettaire,#page-questionnaire-facettaire-en) .questionnaire-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  :is(#page-questionnaire-facettaire,#page-questionnaire-facettaire-en) .questionnaire-actions .nav-cta,
  :is(#page-questionnaire-facettaire,#page-questionnaire-facettaire-en) .questionnaire-actions .questionnaire-reset {
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}


/* Medical Education — clean thumbnail crop and rounded corners */
:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder img {
  top: -8px !important;
  left: -8px !important;
  width: calc(100% + 16px) !important;
  height: calc(100% + 16px) !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder > a {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Bottom Request Training / Demander une formation CTA */
:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-bottom-training {
  padding: 16px 0 22px !important;
  margin: 0 !important;
  text-align: center !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-bottom-training .btn-solid {
  width: min(540px, calc(100% - 40px)) !important;
  min-width: 0 !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  :is(#videos-pedagogiques, #videos-pedagogiques-en) .video-bottom-training {
    padding: 12px 0 16px !important;
  }

  :is(#videos-pedagogiques, #videos-pedagogiques-en) .video-bottom-training .btn-solid {
    width: calc(100% - 32px) !important;
  }
}

/* Mobile-only final refinements */
@media (max-width: 768px) {
  /* Extra breathing room between Contact CTA and hamburger */
  nav > .nav-cta {
    margin-right: 10px !important;
  }

  /* Same hero image dimensions; only change the crop origin */
  :is(#page-home, #page-home-en) .hero-photo img {
    object-position: left top !important;
  }

  /* Approx. 25% shorter dark-grey centre of the Facet questionnaire card */
  :is(#articles-thematiques-v2, #articles-thematiques-v2-en)
    .pourquoi-v2-article:first-child .pourquoi-v2-quiz-wrap {
    min-height: 425px !important;
  }
}


/* ============================================================
   FINAL REQUESTED REFINEMENTS — 2026-09-02
   ============================================================ */

/* Medical Education: every thumbnail uses one identical 16px clipping radius.
   The image itself has no separate radius, avoiding left/right differences. */
:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder {
  border-radius: 16px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 16px) !important;
  -webkit-clip-path: inset(0 round 16px) !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder > a {
  border-radius: 16px !important;
  overflow: hidden !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder img {
  border-radius: 0 !important;
}

/* ResearchGate button remains visible in the Scientific Articles page header
   even when the normal navigation CTA is hidden on smaller screens. */
@media (max-width: 1320px) {
  :is(#page-contributions, #page-contributions-en) .researchgate-follow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {

  /* HOMEPAGE HERO
     Restore the crop shown in the user's reference image.
     Image and hero dimensions remain unchanged. */
  :is(#page-home, #page-home-en) .hero-photo img {
    object-position: 42% top !important;
  }

  /* INNOVATION TIMELINE — slightly larger mobile typography. */
  :is(#innovation-stair, #innovation-stair-en) .s2-year {
    font-size: 36px !important;
  }

  :is(#innovation-stair, #innovation-stair-en) .s2-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  :is(#innovation-stair, #innovation-stair-en) .s2-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* KEY NUMBERS — make the four white cards shorter and keep every
     number on the same vertical starting line. */
  :is(#apropos-v2, #apropos-v2-en) .cv2-tall-card:not(:last-child) {
    min-height: 235px !important;
    padding: 24px 18px 22px !important;
    justify-content: flex-start !important;
  }

  :is(#apropos-v2, #apropos-v2-en) .cv2-tall-card:not(:last-child) .cv2-tall-num {
    min-height: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  :is(#apropos-v2, #apropos-v2-en) .cv2-tall-card:not(:last-child) .cv2-tall-desc {
    margin-top: 14px !important;
  }

  /* PHOTO QUOTE — move copy upward so it overlaps Dr. Srour's face less. */
  :is(#citation, #citation-en) .citation-inner {
    transform: translateY(-46px) !important;
  }

  /* FACET SYNDROME + TARLOV CYSTS — image first, text second in mobile hero. */
  :is(
    #page-syndrome-facettaire,
    #page-syndrome-facettaire-en,
    #page-kystes-tarlov,
    #page-kystes-tarlov-en
  ) .page-header-minimal--with-image .page-header-minimal-image {
    order: 1 !important;
  }

  :is(
    #page-syndrome-facettaire,
    #page-syndrome-facettaire-en,
    #page-kystes-tarlov,
    #page-kystes-tarlov-en
  ) .page-header-minimal--with-image .page-header-minimal-inner {
    order: 2 !important;
  }

  /* SCIENTIFIC ARTICLES — expose the ResearchGate Follow/Suivre CTA on mobile. */
  :is(#page-contributions, #page-contributions-en) .researchgate-follow-wrap {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  :is(#page-contributions, #page-contributions-en) .researchgate-follow {
    display: inline-flex !important;
    width: auto !important;
    min-width: 120px !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
}


/* Training form: conditional text field shown only when "Other / Autre" is selected. */
.training-other-profession.is-hidden {
  display: none !important;
}

.training-other-profession {
  margin-top: -4px !important;
}

/* MOBILE */
@media (max-width: 768px) {
  /* Homepage hero: keep the exact same image dimensions but anchor the
     source image to its LEFT edge, so no part of the source is cropped on the left. */
  :is(#page-home, #page-home-en) .hero-photo img {
    object-position: left top !important;
  }

  /* Key-number cards: remove the oversized empty bottom area.
     Top and bottom padding are now equal, while number baselines remain aligned. */
  :is(#apropos-v2, #apropos-v2-en) .cv2-tall-card:not(:last-child) {
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 18px !important;
    justify-content: flex-start !important;
  }

  :is(#apropos-v2, #apropos-v2-en) .cv2-tall-card:not(:last-child) .cv2-tall-num {
    min-height: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  :is(#apropos-v2, #apropos-v2-en) .cv2-tall-card:not(:last-child) .cv2-tall-desc {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }
}


@media (max-width: 768px) {
  /* Keep the portrait anchored in the same right-hand position as before,
     but let the left side of the source image extend behind the text. */
  :is(#page-home, #page-home-en) .hero {
    position: relative !important;
    overflow: hidden !important;
  }

  :is(#page-home, #page-home-en) .hero-text {
    position: relative !important;
    z-index: 3 !important;
  }

  :is(#page-home, #page-home-en) .hero-photo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  :is(#page-home, #page-home-en) .hero-photo img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: right top !important;
  }
}


/* Medical Education — crop only the left side of the f1j9XkPSe6E thumbnail
   so the person seated in the background is no longer visible.
   Applied to both FR and EN cards, while keeping the card/frame dimensions unchanged. */
:is(#videos-pedagogiques, #videos-pedagogiques-en)
  .video-placeholder[data-video-id="f1j9XkPSe6E"] img {
  left: -10% !important;
  width: 110% !important;
  right: auto !important;
  object-fit: cover !important;
  object-position: right center !important;
}


@media (max-width: 768px) {

  /* MOBILE NAVIGATION — restore the compact layout shown in the reference,
     while removing the excessive white space above it. */
  nav {
    padding: 8px 14px 8px !important;
    min-height: 54px !important;
    height: auto !important;
    gap: 7px !important;
    align-items: center !important;
  }

  .page.active {
    padding-top: 54px !important;
  }

  nav .nav-logo {
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  nav .nav-logo span:first-child {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  nav .nav-logo-sub {
    font-size: 9px !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
  }

  nav .lang-switch {
    margin-left: auto !important;
    margin-right: 9px !important;
    font-size: 9px !important;
    gap: 4px !important;
  }

  nav > .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 7px 0 0 !important;
    padding: 9px 10px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
  }

  nav .nav-burger {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
  }

  /* MOBILE HERO — reproduce the reference composition:
     - portrait remains on the right in the same visual position
     - the FULL image is used, so its left side is not cropped
     - image sits behind the text rather than being confined to a narrow column */
  :is(#page-home, #page-home-en) .hero {
    position: relative !important;
    display: block !important;
    height: 430px !important;
    min-height: 430px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--grey) !important;
  }

  :is(#page-home, #page-home-en) .hero-text {
    position: relative !important;
    z-index: 3 !important;
    width: 59% !important;
    height: 100% !important;
    padding: 54px 12px 36px 20px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  :is(#page-home, #page-home-en) .hero-name {
    font-size: clamp(48px, 14.2vw, 68px) !important;
    line-height: .88 !important;
    margin-bottom: 24px !important;
  }

  :is(#page-home, #page-home-en) .hero-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 4px !important;
  }

  :is(#page-home, #page-home-en) .hero-desc br {
    display: inline !important; /* the tagline is two sentences: keep the line break on phones too */
  }

  :is(#page-home, #page-home-en) .hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: visible !important;
    z-index: 1 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  :is(#page-home, #page-home-en) .hero-photo img {
    position: absolute !important;
    top: 0 !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: right top !important;
    transform: none !important;
  }

  :is(#page-home, #page-home-en) .hero::before,
  :is(#page-home, #page-home-en) .hero::after {
    border: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 420px) {
  nav {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    min-height: 52px !important;
  }

  .page.active {
    padding-top: 52px !important;
  }

  nav .nav-logo span:first-child {
    font-size: 17px !important;
  }

  nav > .nav-cta {
    padding: 8px 8px !important;
    font-size: 7.8px !important;
  }

  nav .lang-switch {
    font-size: 8px !important;
    margin-right: 7px !important;
  }
}


@media (max-width: 768px) {
  /* Clean mobile navigation: fixed at the top, no empty band above it,
     and balanced spacing between logo, language switch, CTA and burger. */
  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    justify-content: initial !important;
    column-gap: 10px !important;

    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 18px !important;
    margin: 0 !important;
  }

  .page.active {
    padding-top: 58px !important;
  }

  nav .nav-logo {
    min-width: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    align-self: center !important;
  }

  nav .nav-logo span:first-child {
    font-size: 19px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  nav .nav-logo-sub {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
    white-space: nowrap !important;
  }

  nav .lang-switch {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    gap: 4px !important;
    align-self: center !important;
  }

  nav > .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  nav .nav-burger {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }

  nav .nav-burger span {
    width: 28px !important;
  }

  /* Mobile dropdown should begin directly under the fixed nav. */
  .nav-links.open {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 420px) {
  nav {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    column-gap: 7px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 7px 12px !important;
  }

  .page.active {
    padding-top: 56px !important;
  }

  nav .nav-logo span:first-child {
    font-size: 17px !important;
  }

  nav .nav-logo-sub {
    font-size: 8px !important;
  }

  nav .lang-switch {
    font-size: 8px !important;
  }

  nav > .nav-cta {
    padding: 8px 9px !important;
    font-size: 7.8px !important;
  }

  .nav-links.open {
    top: 56px !important;
  }
}


@media (max-width: 768px) {
  /* Keep the current mobile hero composition and image size,
     but move Dr. Srour slightly to the right to reduce overlap with the text. */
  :is(#page-home, #page-home-en) .hero-photo img {
    right: 4px !important;
  }
}


@media (max-width: 768px) {
  /* Move Dr. Srour further to the right on mobile without changing image size. */
  :is(#page-home, #page-home-en) .hero-photo img {
    right: -16px !important;
  }
}


@media (max-width: 768px) {
  /* Move Dr. Srour further to the right on mobile, keeping the same size and height. */
  :is(#page-home, #page-home-en) .hero-photo img {
    right: -34px !important;
  }

  /* French key-number cards:
     force these two labels onto exactly two lines on mobile. */
  #apropos-v2 .cv2-tall-card:nth-child(1) .cv2-tall-desc,
  #apropos-v2 .cv2-tall-card:nth-child(3) .cv2-tall-desc {
    max-width: 108px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* Stronger left-side crop for the f1j9XkPSe6E Medical Education thumbnail.
   This removes the seated person in the far-left background while keeping
   the surgeon and monitor composition intact. */
:is(#videos-pedagogiques, #videos-pedagogiques-en)
  .video-placeholder[data-video-id="f1j9XkPSe6E"] img {
  left: -19% !important;
  width: 119% !important;
  right: auto !important;
  object-fit: cover !important;
  object-position: right center !important;
}


@media (max-width: 768px) {
  /* Previous move was 18px further right (-16px to -34px).
     Move twice that distance again: an additional 36px to the right. */
  :is(#page-home, #page-home-en) .hero-photo img {
    right: -70px !important;
  }

  /* French "Articles scientifiques" card: force the label onto two lines. */
  #apropos-v2 .cv2-tall-card:nth-child(4) .cv2-tall-desc {
    max-width: 108px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


@media (max-width: 768px) {
  /* French homepage LinkedIn section:
     remove the descriptive sentence and tighten the space above the heading. */
  #page-home .social-feed-home-fr {
    padding-top: 40px !important;
  }

  #page-home .social-feed-home-fr-intro {
    display: none !important;
  }

  #page-home .social-feed-home-fr-header {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 28px !important;
  }

  #page-home .social-feed-home-fr-header .h1 {
    margin-top: 0 !important;
  }
}


@media (max-width: 768px) {
  /* Move the portrait much further to the right so Dr. Srour's right ear
     sits close to the right edge of the mobile screen, without changing size. */
  :is(#page-home, #page-home-en) .hero-photo img {
    right: -118px !important;
  }
}


/* ============================================================
   MEDICAL EDUCATION — FINAL THUMBNAIL RULES
   ============================================================ */

/* One single clipping radius controls all four corners.
   The image and link themselves have NO independent radius,
   preventing the left and right corners from looking different. */
:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  clip-path: inset(0 round 14px) !important;
  -webkit-clip-path: inset(0 round 14px) !important;
  background: #fff !important;
  isolation: isolate !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder > a {
  border-radius: 0 !important;
  overflow: visible !important;
}

:is(#videos-pedagogiques, #videos-pedagogiques-en) .video-placeholder img {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Keep the stronger left crop previously requested for the
   Facet Cage Fusion video so the seated person in the background
   is not visible. The OUTER 14px clipping remains perfectly symmetrical. */
:is(#videos-pedagogiques, #videos-pedagogiques-en)
  .video-placeholder[data-video-id="f1j9XkPSe6E"] img {
  left: -19% !important;
  width: 119% !important;
  object-position: right center !important;
}


/* Questionnaire hero: cleaner and more prominent title. */
:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .page-header-minimal .h1 {
  font-size: clamp(58px, 6.2vw, 90px) !important;
  line-height: .92 !important;
  margin-bottom: 0 !important;
}

/* Source / orientation sentence moved into the body. */
:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-source-line {
  max-width: 980px;
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--black);
}

/* Wider questionnaire on every non-mobile screen. */
@media (min-width: 901px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-wrap {
    width: 100% !important;
    max-width: 1540px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
  }

  /* Fixed-height question stage so each question stays in exactly the same vertical position. */
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-step-grid {
    grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr) !important;
    gap: 72px !important;
    height: 520px !important;
    min-height: 520px !important;
    align-items: stretch !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-image-frame {
    height: 520px !important;
    min-height: 520px !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-image-frame img {
    max-height: 470px !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-question-panel {
    height: 520px !important;
    min-height: 520px !important;
    justify-content: flex-start !important;
    padding: 28px 0 !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-step .questionnaire-label {
    min-height: 3.25em;
    margin-bottom: 28px !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-wizard-actions {
    margin-top: auto !important;
  }
}

/* Tablet: use more of the available screen width without forcing a fixed-height stacked layout. */
@media (min-width: 769px) and (max-width: 900px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-wrap {
    width: 100% !important;
    max-width: none !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
}

/* Mobile remains flexible. */
@media (max-width: 768px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .page-header-minimal .h1 {
    font-size: clamp(46px, 12vw, 62px) !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-source-line {
    font-size: 16px;
    margin-bottom: 20px;
  }
}


/* Questionnaire: use the available viewport width fluidly on laptop, desktop and large desktop screens. */
@media (min-width: 901px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-wrap {
    width: calc(100vw - clamp(72px, 7vw, 180px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-step-grid {
    grid-template-columns: minmax(420px, .90fr) minmax(560px, 1.10fr) !important;
    gap: clamp(48px, 4.5vw, 110px) !important;
    height: clamp(520px, 31vw, 650px) !important;
    min-height: clamp(520px, 31vw, 650px) !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-image-frame {
    height: clamp(520px, 31vw, 650px) !important;
    min-height: clamp(520px, 31vw, 650px) !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-image-frame img {
    max-height: calc(clamp(520px, 31vw, 650px) - 48px) !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-question-panel {
    height: clamp(520px, 31vw, 650px) !important;
    min-height: clamp(520px, 31vw, 650px) !important;
    padding: clamp(24px, 2vw, 36px) 0 !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-step .questionnaire-label {
    font-size: clamp(32px, 2.65vw, 54px) !important;
    max-width: min(100%, 900px) !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-step .questionnaire-options {
    width: min(100%, 720px) !important;
  }
}

/* Extra-wide displays: keep generous breathing room without making the content feel boxed in. */
@media (min-width: 1800px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-wrap {
    width: calc(100vw - 200px) !important;
  }

  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-step-grid {
    grid-template-columns: minmax(520px, .92fr) minmax(700px, 1.08fr) !important;
  }
}

/* Tablet remains fluid but avoids the desktop fixed-height composition. */
@media (min-width: 769px) and (max-width: 900px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-wrap {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Small inline citation numbers with accessible hover/focus popups. */
.citation-ref {
  position: relative;
  display: inline-block;
  vertical-align: super;
  margin-left: 2px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.citation-ref-number {
  font-family: "Barlow", sans-serif;
  font-size: 0.62em;
  font-weight: 700;
  color: #FF7F11;
  letter-spacing: 0;
  white-space: nowrap;
}

.citation-ref:hover .citation-ref-number,
.citation-ref:focus .citation-ref-number,
.citation-ref.is-open .citation-ref-number {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.citation-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: min(420px, 72vw);
  transform: translateX(calc(-50% + var(--ct-shift, 0px))) translateY(6px);
  padding: 14px 16px;
  background: #0A0A0A;
  color: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 12px 36px rgba(0,0,0,.20);
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 10020;
}

.citation-tooltip strong {
  color: #FF7F11;
  font-weight: 800;
}

.citation-tooltip::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--ct-shift, 0px));
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #0A0A0A;
}

.citation-ref:hover .citation-tooltip,
.citation-ref:focus .citation-tooltip,
.citation-ref.is-open .citation-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--ct-shift, 0px))) translateY(0);
  pointer-events: auto;
}

/* The popup itself is rendered by JS in #citationPortal (a direct child of <body>),
   so it can never be clipped by a scrolling or overflow-hidden ancestor. */
.citation-ref .citation-tooltip { display: none !important; }
#citationPortal {
  position: absolute;
  z-index: 10060;
  width: min(420px, 72vw);
  padding: 14px 16px;
  background: #0A0A0A;
  color: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 12px 36px rgba(0,0,0,.20);
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  display: none;
}
#citationPortal.is-visible { display: block; }
#citationPortal strong { color: #FF7F11; font-weight: 800; }
#citationPortal::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #0A0A0A;
}
#citationPortal.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0A0A0A; }
@media (max-width: 700px) {
  #citationPortal { position: fixed; left: 16px !important; right: 16px; bottom: 18px; top: auto !important; width: auto; }
  #citationPortal::after { display: none; }
}

/* Keep popups inside the viewport near the left/right edges. */
@media (max-width: 700px) {
  .citation-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    max-width: none;
    transform: translateY(8px);
    font-size: 12px;
    z-index: 10050;
  }

  .citation-tooltip::after {
    display: none;
  }

  .citation-ref:hover .citation-tooltip,
  .citation-ref:focus .citation-tooltip,
  .citation-ref.is-open .citation-tooltip {
    transform: translateY(0);
  }
}


.questionnaire-step-grid--single { grid-template-columns: 1fr !important; }
.questionnaire-location-fields { margin-top: 24px; }
.questionnaire-location-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; }
.questionnaire-location-fields .training-form-group { margin-bottom: 8px; }
.questionnaire-step--location .questionnaire-wizard-next { display: inline-flex !important; }
.questionnaire-step--location .questionnaire-wizard-next.is-unanswered { opacity: .42; }
@media (max-width: 700px) { .questionnaire-location-fields { grid-template-columns: 1fr; } }


/* Desktop dropdown opens on hover/focus. Mobile keeps tap/click behavior. */
@media (min-width: 1321px) {
  .nav-dropdown-menu {
    top: 100% !important;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown[open] .nav-dropdown-menu {
    display: block !important;
  }

  .nav-dropdown:hover .nav-dropdown-caret,
  .nav-dropdown:focus-within .nav-dropdown-caret {
    transform: rotate(180deg);
  }
}

/* Contact page is reached through the CTA only and is not listed in nav-links. */
.contact-page-form-section {
  background: #fff;
  padding: 72px clamp(24px, 5vw, 80px) 84px;
  border-bottom: 1px solid var(--rule);
}

.contact-page-form-card {
  width: min(960px, 100%);
  margin: 0 auto;
  border-top: 5px solid #FF7F11;
  background: #fff;
  padding: clamp(30px, 4vw, 54px);
  box-shadow: 0 12px 42px rgba(0,0,0,.07);
}

.contact-page-form-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 800;
  line-height: .96;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 16px;
}

.contact-page-form-desc {
  max-width: 720px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 34px;
}

.contact-optional {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

.contact-security-group {
  margin-bottom: 24px !important;
}

.contact-slider-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 4px 8px;
  user-select: none;
}

.contact-slider-arrow {
  flex: 0 0 auto;
  font-size: 24px;
}

.contact-slider-track {
  flex: 1;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  position: relative;
  border: 1px solid #ddd;
  overflow: hidden;
}

.contact-slider-handle {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #FF7F11;
  border-radius: 4px;
  cursor: grab;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  user-select: none;
}

.contact-slider-copy {
  flex: 0 0 auto;
  font-size: 12px;
  color: #767676;
  min-width: 80px;
}

@media (max-width: 700px) {
  .contact-page-form-section {
    padding: 40px 18px 56px;
  }

  .contact-page-form-card {
    padding: 30px 20px;
    box-shadow: none;
  }

  .contact-slider-copy {
    min-width: 64px;
  }
}


/* Reset only the Facet Cage Fusion thumbnail to the same framing as the other videos.
   This overrides the older 119% zoom / sideways shift that was clipping the image. */
:is(#videos-pedagogiques, #videos-pedagogiques-en)
  .video-placeholder[data-video-id="f1j9XkPSe6E"] img {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Mobile: show the editorial “Pourquoi…” text first,
   then the facet questionnaire card underneath. */
@media (max-width: 768px) {
  :is(#articles-thematiques-v2, #articles-thematiques-v2-en)
    .pourquoi-v2-article:first-child .pourquoi-v2-text {
    order: 1 !important;
  }

  :is(#articles-thematiques-v2, #articles-thematiques-v2-en)
    .pourquoi-v2-article:first-child .pourquoi-v2-quiz-wrap {
    order: 2 !important;
  }
}


/* Contact page: form replaces the former map in the right-hand column. */
.contact-page-form-column {
  background: var(--grey);
  padding: 72px 48px;
  display: flex;
  align-items: flex-start;
}

.contact-page-form-column .contact-page-form-card {
  width: 100%;
  max-width: none;
  margin: 0;
  box-shadow: none;
  padding: 40px;
}

@media (max-width: 768px) {
  .contact-page-form-column {
    padding: 32px 20px 48px;
  }

  .contact-page-form-column .contact-page-form-card {
    padding: 28px 20px;
  }
}


:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-source-line {
  margin-bottom: 8px !important;
}

:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en) .questionnaire-source-citation {
  margin: 0 0 24px;
  max-width: 980px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* Single flat-orange results download button. */
:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en)
  .questionnaire-print-download {
  background: #FF7F11 !important;
  color: #0A0A0A !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en)
  .questionnaire-print-download:hover,
:is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en)
  .questionnaire-print-download:focus {
  background: #FF8D2A !important;
  color: #0A0A0A !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  :is(#page-questionnaire-facettaire, #page-questionnaire-facettaire-en)
    .questionnaire-source-citation {
    font-size: 12px;
    margin-bottom: 20px;
  }
}


@media (max-width: 768px) {
  /* Timeline: the desktop reveal animation can remain pending while the
     responsive layout is already visible. On mobile, keep all content visible. */
  :is(#innovation-stair, #innovation-stair-en).timeline-sequence .s2-label,
  :is(#innovation-stair, #innovation-stair-en).timeline-sequence .s2-year,
  :is(#innovation-stair, #innovation-stair-en) .s2-label,
  :is(#innovation-stair, #innovation-stair-en) .s2-year {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }

  :is(#innovation-stair, #innovation-stair-en) .s2-quote,
  :is(#innovation-stair, #innovation-stair-en) .s2-stage {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Tarlov hero and anatomical infographic: force normal document flow and
     visibility on phones, including pages initially hidden by the SPA. */
  :is(#page-kystes-tarlov, #page-kystes-tarlov-en) .page-header-minimal-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  :is(#page-kystes-tarlov, #page-kystes-tarlov-en) .page-header-minimal-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
  }

  :is(#page-kystes-tarlov, #page-kystes-tarlov-en) .tarlov-intro-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 1px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  :is(#page-kystes-tarlov, #page-kystes-tarlov-en) .tarlov-intro-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

' +
    'body{margin:0;font-family:Arial,sans-serif;color:#0A0A0A;background:#fff}.top{height:6px;background:#FF7F11}.wrap{max-width:900px;margin:auto;padding:42px}.brand{font-size:28px;font-weight:800;letter-spacing:.05em}.role{color:#FF7F11;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}.title{font-size:34px;font-weight:800;margin:38px 0 6px;text-transform:uppercase}.sub{color:#767676}.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.score{background:#F4F4F2;padding:18px}.score b{display:block;font-size:26px;margin:8px 0}.label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#767676}.note{background:#fff7ef;padding:18px;color:#767676;line-height:1.55}.section{margin-top:34px;font-size:18px;font-weight:800;text-transform:uppercase;color:#FF7F11;border-bottom:2px solid #FF7F11;padding-bottom:8px}.row{display:grid;grid-template-columns:42px 1fr 130px;gap:14px;padding:15px 12px;border-bottom:1px solid #DEDEDE;align-items:start}.n{font-weight:700;color:#FF7F11}.q{line-height:1.45}.a{font-weight:700;text-align:right}.foot{margin-top:36px;padding-top:14px;border-top:1px solid #DEDEDE;color:#767676;font-size:12px}@media(max-width:650px){.wrap{padding:28px 18px}.scores{grid-template-columns:1fr}.row{grid-template-columns:32px 1fr}.a{grid-column:2;text-align:left}}@media print{body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}' +
    '
' +
    'body{margin:0;font-family:Arial,sans-serif;color:#0A0A0A;background:#fff}.top{height:6px;background:#FF7F11}.wrap{max-width:900px;margin:auto;padding:42px}.brand{font-size:28px;font-weight:800;letter-spacing:.05em}.role{color:#FF7F11;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}.title{font-size:34px;font-weight:800;margin:38px 0 6px;text-transform:uppercase}.sub{color:#767676}.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.score{background:#F4F4F2;padding:18px}.score b{display:block;font-size:26px;margin:8px 0}.label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#767676}.note{background:#fff7ef;padding:18px;color:#767676;line-height:1.55;font-size:13px;max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.section{margin-top:34px;font-size:18px;font-weight:800;text-transform:uppercase;color:#FF7F11;border-bottom:2px solid #FF7F11;padding-bottom:8px}.row{display:grid;grid-template-columns:42px 1fr 130px;gap:14px;padding:15px 12px;border-bottom:1px solid #DEDEDE;align-items:start}.n{font-weight:700;color:#FF7F11}.q{line-height:1.45}.a{font-weight:700;text-align:right}.foot{margin-top:36px;padding-top:14px;border-top:1px solid #DEDEDE;color:#767676;font-size:12px}@media(max-width:650px){.wrap{padding:28px 18px}.scores{grid-template-columns:1fr}.row{grid-template-columns:32px 1fr}.a{grid-column:2;text-align:left}.note{padding:14px;font-size:12px}}' +
    '

/* Match the questionnaire promo panel to the dark grey band below the hero. */
.pourquoi-v2-quiz-wrap,
.facet-quiz-card,
.facet-quiz-main {
  background: #565656 !important;
}

/* Keep the question more compact on every screen size. */
.facet-quiz-title {
  font-size: clamp(30px, 3.15vw, 48px) !important;
  line-height: .96 !important;
  margin-bottom: 22px !important;
}

/* Smaller, tighter CTA while preserving the existing orange treatment. */
.facet-quiz-button {
  width: min(100%, 330px) !important;
  min-height: 46px !important;
  padding: 12px 20px !important;
  gap: 10px !important;
  font-size: 12.5px !important;
  letter-spacing: .10em !important;
}

@media (max-width: 768px) {
  .facet-quiz-title {
    font-size: 34px !important;
    margin-bottom: 18px !important;
  }
  .facet-quiz-button {
    width: min(100%, 300px) !important;
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 12px !important;
  }
}


/* Expertise expander: visible only on mobile. */
.sv2-expand-btn {
  display: none !important;
}
@media (max-width: 768px) {
  .sv2-expand-btn {
    display: block !important;
  }
}

/* Innovation staircase: year + matching copy fade in together, sequentially. */
:is(#innovation-stair, #innovation-stair-en).timeline-sequence .s2-label {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  animation: none !important;
}
@keyframes timeline-sequence-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
:is(#innovation-stair, #innovation-stair-en).timeline-sequence.timeline-sequence--run .s2-label:nth-child(2) {
  animation: timeline-sequence-fade .58s ease .10s forwards !important;
}
:is(#innovation-stair, #innovation-stair-en).timeline-sequence.timeline-sequence--run .s2-label:nth-child(3) {
  animation: timeline-sequence-fade .58s ease .55s forwards !important;
}
:is(#innovation-stair, #innovation-stair-en).timeline-sequence.timeline-sequence--run .s2-label:nth-child(4) {
  animation: timeline-sequence-fade .58s ease 1.00s forwards !important;
}
:is(#innovation-stair, #innovation-stair-en).timeline-sequence.timeline-sequence--run .s2-label:nth-child(5) {
  animation: timeline-sequence-fade .58s ease 1.45s forwards !important;
}

/* Full carousel images: click to zoom, then scroll around the enlarged image. */
.lp-lightbox-stage {
  width: 90vw !important;
  height: 90vh !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow: auto !important;
  display: grid !important;
  place-items: center !important;
  overscroll-behavior: contain;
}
.lp-lightbox-stage #lpLightboxImg {
  cursor: zoom-in !important;
  transition: width .22s ease, max-width .22s ease, max-height .22s ease;
  margin: auto;
}
.lp-lightbox-stage.is-zoomed {
  display: block !important;
}
.lp-lightbox-stage.is-zoomed #lpLightboxImg {
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  cursor: grab !important;
  transition: none !important;
}
.lp-lightbox-stage.is-zoomed.is-dragging #lpLightboxImg { cursor: grabbing !important; }
.lp-lightbox-stage.is-zoomed { touch-action: pan-x pan-y; }
.lp-zoom-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(10,10,10,.82);
  border-radius: 999px;
  z-index: 5;
}
.lp-lightbox.open .lp-zoom-bar { display: inline-flex; }
.lp-zoom-bar button {
  appearance: none;
  border: 0;
  background: #FF7F11;
  color: #0A0A0A;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
}
.lp-zoom-bar button:hover { background: #F28A2E; }
.lp-zoom-bar #lpZoomReset { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.lp-zoom-bar #lpZoomLabel {
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  min-width: 48px;
  text-align: center;
}

@media (max-width: 640px) {
  .lp-lightbox-stage {
    width: 94vw !important;
    height: 86vh !important;
    max-width: 94vw !important;
    max-height: 86vh !important;
  }
  .lp-zoom-bar { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#innovation-stair, #innovation-stair-en).timeline-sequence .s2-label,
  :is(#innovation-stair, #innovation-stair-en).timeline-sequence.timeline-sequence--run .s2-label {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ============================================================
   FINAL TIMELINE ANIMATION
   - desktop / laptop: left -> right
   - mobile: top -> bottom
   - animation happens once, then content stays visible
   ============================================================ */

/* Override all older animation rules for the timeline items. */
:is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
  .s2-stage > .s2-label {
  opacity: 0 !important;
  transform: translateX(-28px) !important;
  animation: none !important;
  transition:
    opacity .62s cubic-bezier(.22,1,.36,1),
    transform .62s cubic-bezier(.22,1,.36,1) !important;
  visibility: visible !important;
  will-change: opacity, transform;
}

/* The year had its own older animations; disable those completely. */
:is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
  .s2-stage > .s2-label .s2-year {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}

/* Text within each item stays tied to the parent reveal. */
:is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
  .s2-stage > .s2-label .s2-below,
:is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
  .s2-stage > .s2-label .s2-title,
:is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
  .s2-stage > .s2-label .s2-desc {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Once JS reveals an item, it remains in its final position permanently. */
:is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
  .s2-stage > .s2-label.timeline-item-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Mobile: same staggered reveal, but vertically from top to bottom. */
@media (max-width: 768px) {
  :is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
    .s2-stage > .s2-label {
    opacity: 0 !important;
    transform: translateY(22px) !important;
  }

  :is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
    .s2-stage > .s2-label.timeline-item-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* No-motion accessibility: immediately show everything. */
@media (prefers-reduced-motion: reduce) {
  :is(#innovation-stair, #innovation-stair-en).timeline-anim-ready[data-timeline-anim]
    .s2-stage > .s2-label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Halve only the space BETWEEN article 1 and article 2.
   Outer spacing of the section remains unchanged. */
:is(#articles-thematiques-v2, #articles-thematiques-v2-en)
  .pourquoi-v2-article:first-child {
  padding-bottom: 48px !important;
}

:is(#articles-thematiques-v2, #articles-thematiques-v2-en)
  .pourquoi-v2-article:nth-child(2) {
  padding-top: 48px !important;
}


/* Desktop/tablet: use the normal two-column image. */
.tarlov-mobile-direct {
  display: none !important;
}

/* Phones and small screens: bypass the responsive grid completely.
   This direct image is in normal document flow and cannot be cropped,
   absolutely positioned, or hidden by the old Tarlov grid rules. */
@media (max-width: 768px) {
  :is(#page-kystes-tarlov, #page-kystes-tarlov-en)
    .tarlov-intro-grid .tarlov-intro-image {
    display: none !important;
  }

  :is(#page-kystes-tarlov, #page-kystes-tarlov-en)
    .tarlov-mobile-direct {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 1px !important;
    margin: 24px 0 40px !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 1 !important;
  }

  :is(#page-kystes-tarlov, #page-kystes-tarlov-en)
    .tarlov-mobile-direct img {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 6px !important;
  }
}