@import url('inter.css');
:root {
  --primary: #0F4C81;
  --bg: #F8FAFC;
  --fg: #0A0A0A;
  --fg-muted: #475569;
  --border: #E2E8F0;
  --surface: #FFFFFF;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header.transparent {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.site-header.transparent .brand,
.site-header.transparent .nav-links a { color: #fff; }

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.nav-links a:hover { opacity: 0.65; }
.nav-links a.active { color: var(--primary); }
.site-header.transparent .nav-links a.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    top: 64px;
    background: var(--surface);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 20px;
    gap: 20px;
    transform: translateY(-110%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    z-index: 49;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { font-size: 20px; }
}

/* Parallaxe — le décalage passe par une variable plutôt que par `transform`
   directement, pour cohabiter avec les zooms au survol qui occupent déjà la
   propriété. @property rend --zoom interpolable, donc transitionnable. */
@property --parallax-y {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --zoom {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* Hero (full-bleed photo) */
.hero {
  position: relative;
  /* Plein écran à l'arrivée. svh suit la barre d'adresse mobile ; vh sert de
     repli pour les navigateurs qui ne connaissent pas l'unité. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
}
/* Fond génératif WebGL — voir js/hero-bg.js */
/* Pas de débord ici : agrandir le canvas déformerait le cadrage du shader.
   La dérive du cœur au scroll est calculée dans hero-bg.js. */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-canvas--fallback {
  background: radial-gradient(120% 90% at 70% 45%, #0F4C81 0%, #071b2e 45%, #030b16 100%);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 42%, rgba(10,10,10,0.18) 100%);
}
/* Le shader gère déjà sa propre profondeur : le voile ne sert qu'au contraste du texte. */
.hero--generative .hero-scrim {
  background: linear-gradient(100deg, rgba(3,11,22,0.62) 0%, rgba(3,11,22,0.28) 45%, rgba(3,11,22,0) 100%);
}
.hero--generative h1 { max-width: 12ch; }
.hero-scroll-hint {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  right: 32px;
  color: rgba(255,255,255,0.68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 120px 0 60px;
}
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-top: 2px solid var(--primary);
  padding-top: 8px;
  margin-bottom: 28px;
}
.hero .eyebrow { border-top-color: #fff; color: #fff; }

.hero h1, .h1 {
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 32px;
  max-width: 16ch;
}

@media (max-width: 760px) {
  .hero { align-items: flex-start; }
  .hero-content { padding-top: 146px; }
  .hero-scroll-hint { display: none; }
}

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.stat {
  border-left: 2px solid #fff;
  padding-left: 14px;
}
.stat-num { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.stat-desc { font-size: 14px; opacity: 0.82; }

/* Section rhythm */
.section { padding: 88px 0; }
.section.tight { padding: 64px 0; }
.section h2, .h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 32px;
}

/* DestinationCard — portage CSS du composant 21st.dev.
   Chaque carte porte sa propre teinte via --theme (triplet HSL) : elle colore
   le voile, la bordure, la barre d'action et le halo projeté. */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 32px;
  width: 100%;
}
.site-card {
  width: 100%;
  height: 450px;
}
.site-card-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 0 40px -15px hsl(var(--theme) / 0.5);
  transition:
    transform 0.5s ease-in-out,
    box-shadow 0.5s ease-in-out,
    opacity 0.5s ease-in-out,
    filter 0.5s ease-in-out;
}
.site-card:hover .site-card-link,
.site-card-link:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 60px -15px hsl(var(--theme) / 0.6);
}

/* Les cartes non visées reculent, s'estompent et se floutent. Comme pour le
   hero, le survol cesse de piloter dès que le clavier a le focus dans la
   grille — sinon la carte focalisée se floutait elle aussi. */
.sites-grid:hover:not(:focus-within) .site-card:not(:hover) .site-card-link,
.sites-grid:focus-within .site-card:not(:focus-within) .site-card-link {
  transform: scale(0.97);
  opacity: 0.6;
  filter: blur(2px);
}
.site-card-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Image de fond, zoomée au survol — l'effet de parallaxe du composant. */
.site-card-img {
  position: absolute;
  left: 0;
  right: 0;
  /* Débord vertical : réserve pour la parallaxe. */
  top: -8%;
  height: 116%;
  background-color: hsl(var(--theme));
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--zoom));
  transition: --zoom 0.5s ease-in-out;
}
.site-card:hover .site-card-img,
.site-card-link:focus-visible .site-card-img { --zoom: 1.10; }

/* Voile teinté : opaque en bas pour le texte, transparent au-dessus. */
.site-card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsl(var(--theme) / 0.9),
    hsl(var(--theme) / 0.6) 30%,
    transparent 60%
  );
}

/* Faute de photo, la carte reçoit la trame de points du hero. */
.site-card-img.no-photo {
  background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.7px);
  background-size: 14px 14px;
}

.site-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 24px;
}
.site-card-body h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.site-stats {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}

/* Barre d'action en verre dépoli, teintée elle aussi. */
.site-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid hsl(var(--theme) / 0.3);
  border-radius: 8px;
  background: hsl(var(--theme) / 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.015em;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-card:hover .site-cta,
.site-card-link:focus-visible .site-cta {
  background: hsl(var(--theme) / 0.4);
  border-color: hsl(var(--theme) / 0.5);
}
.site-cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.3s ease;
}
.site-card:hover .site-cta svg,
.site-card-link:focus-visible .site-cta svg { transform: translateX(4px); }

@media (max-width: 760px) {
  .sites-grid { grid-template-columns: minmax(0, 360px); }
  .site-card { height: 420px; }
  /* Sans survol au doigt, une carte resterait figée floutée. */
  .sites-grid:hover:not(:focus-within) .site-card:not(:hover) .site-card-link {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

/* Team — portage CSS de la carte testimonial 21st.dev : carte noire arrondie,
   portrait cadré haut fondu dans le noir, puis bloc texte souligné. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  gap: 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
  max-width: 320px;
  background: #000;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.team-photo-wrap {
  position: relative;
  height: 270px;
  overflow: hidden;
  border-radius: 16px;
}
.team-photo {
  position: absolute;
  left: 0;
  /* Débord vertical : réserve pour la parallaxe. */
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: top;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--zoom));
  transition: --zoom 0.3s ease;
}
/* Même parti que le bandeau de l'accueil : les cinq portraits viennent de
   sources différentes, le noir et blanc les met d'accord. La couleur revient
   au survol, sur une seule carte à la fois. */
.team-photo { filter: grayscale(1) contrast(1.06); transition: filter 0.35s ease, --zoom 0.5s ease; }
.team-card:hover .team-photo,
.team-card:focus-visible .team-photo { --zoom: 1.05; filter: grayscale(0) contrast(1); }

/* Le dégradé noyaute le bas du portrait dans le fond noir de la carte. */
.team-photo-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #000, transparent);
}

.team-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 16px 16px;
}
/* La spécialité absorbe la hauteur restante : les traits de séparation, les
   noms et les sites s'alignent d'une carte à l'autre même quand le libellé
   tient sur trois lignes. */
.team-card .spec {
  flex: 1;
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #4b5563;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.team-card h3 {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
}
/* Ligne de sites en dégradé — l'aplat violet/orange du composant est remplacé
   par le bleu de la charte. */
.team-sites {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  /* Deux lignes réservées partout : « Romsée · Villers-le-Temple » revient à
     la ligne, et sans cette réserve il décalait le nom de sa carte. */
  min-height: 2.7em;
  /* Volontairement clair : sur fond noir, le bleu profond de la charte
     tombait sous le seuil de lisibilité. */
  background: linear-gradient(to right, #4FB3E8, #7FD4FF 55%, #B6E8FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.team-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 500px) {
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .team-card { max-width: none; }
}

/* Exams editorial list */
.exam-list { border-top: 1px solid var(--border); }
.exam-row {
  display: grid;
  grid-template-columns: 56px 32px 1fr;
  gap: 24px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.exam-index { font-size: 22px; font-weight: 800; color: var(--border); }
.exam-icon { width: 22px; height: 22px; color: var(--primary); }
.exam-row h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.exam-row p { margin: 0; color: var(--fg-muted); font-size: 15px; }

@media (max-width: 640px) {
  .exam-row { grid-template-columns: 32px 24px 1fr; }
}

/* Reassurance band */
.band-primary {
  background: var(--primary);
  color: #fff;
  text-align: center;
}
.band-primary .container { max-width: 800px; padding: 88px 32px; }
.band-primary h2 { color: #fff; }
.band-primary p { font-size: 17px; opacity: 0.88; margin: 0; }

/* Footer */
.site-footer {
  background: var(--fg);
  color: rgba(255,255,255,0.85);
  padding: 48px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-grid h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 10px;
}
.footer-grid p, .footer-grid a { font-size: 14px; margin: 4px 0; display: block; color: #fff; }
.footer-grid .col1 p { color: rgba(255,255,255,0.65); }
.footer-grid a:hover { opacity: 0.7; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Generic cards / borders / buttons */
.card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
  background: var(--surface);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(15,23,42,0.12); }

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,76,129,0.3); }

/* Reveal utility (JS toggles .is-visible via GSAP; this is fallback/no-JS state) */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Pages intérieures — en-tête de page, accordéon examens, blocs cabinets,
   cartes de contact, fiches praticiens.
   ====================================================================== */

.page-head { padding: 150px 0 20px; }
.page-head .lead {
  max-width: 62ch;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* --- Accordéon examens : <details> natif, donc accessible et fonctionnel
       sans JavaScript ; le JS ne sert qu'à animer la hauteur. --- */
.exam-acc { border-top: 1px solid var(--border); }
.exam-acc details {
  border-bottom: 1px solid var(--border);
}
.exam-acc summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 4px;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s ease, padding-left 0.35s cubic-bezier(0.16,1,0.3,1);
}
.exam-acc summary::-webkit-details-marker { display: none; }
.exam-acc summary:hover { background: var(--surface); padding-left: 12px; }
.exam-acc summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.exam-acc .idx {
  flex: none;
  width: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--fg-muted);
  opacity: 0.55;
}
.exam-acc .exam-icon { flex: none; width: 22px; height: 22px; color: var(--primary); }
.exam-acc .ttl { flex: 1; font-size: 19px; font-weight: 700; }
.exam-acc .chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fg-muted);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.exam-acc details[open] .chev { transform: rotate(180deg); }
.exam-acc .body {
  overflow: hidden;
  padding: 0 4px 0 74px;
}
.exam-acc .body p {
  margin: 0;
  padding-bottom: 28px;
  max-width: 70ch;
  color: var(--fg-muted);
  line-height: 1.65;
}

.cat-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 64px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
}
.cat-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Cartes de contact (porté de Contact 7) --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.contact-card {
  padding: 28px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15,23,42,0.09);
}
.contact-card .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(15,76,129,0.10);
  color: var(--primary);
}
.contact-card .ico svg { width: 22px; height: 22px; }
.contact-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.contact-card .desc { margin: 0 0 12px; font-size: 14px; color: var(--fg-muted); }
.contact-card .val {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}
.contact-card a.val:hover { text-decoration: underline; }
.contact-card .val--sm { font-size: 15px; font-weight: 600; }

/* --- Blocs cabinets --- */
.cabinet-block {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.cabinet-block + .cabinet-block { margin-top: 110px; }
/* L'alternance porte sur les colonnes de la grille, donc sur les enfants
   directs — pas sur .cabinet-media, qui est imbriquée. */
.cabinet-block.reverse > div:first-child { order: 2; }
.cabinet-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  background: var(--primary);
}
.cabinet-media img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--zoom));
  transition: --zoom 0.6s ease;
}
.cabinet-block:hover .cabinet-media img { --zoom: 1.04; }
.cabinet-media.no-photo {
  background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1.7px);
  background-size: 14px 14px;
}
.cabinet-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.cabinet-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.cabinet-meta { margin-top: 22px; }
.meta-row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.meta-row .k {
  flex: none;
  width: 132px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: 3px;
}
.meta-row .v { flex: 1; }
.meta-row .v strong { font-weight: 700; }

/* --- Fiche praticien --- */
.prat-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}
.prat-photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 5;
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
.prat-photo-wrap img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: top;
  transform: translate3d(0, var(--parallax-y), 0);
}
.prat-bio { font-size: 17px; line-height: 1.65; color: var(--fg-muted); max-width: 62ch; }
.prat-hours {
  border-left: 2px solid var(--primary);
  padding-left: 16px;
  margin-top: 28px;
}
.prat-hours .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.prat-hours p { margin: 0; line-height: 1.7; }

@media (max-width: 900px) {
  .cabinet-block { grid-template-columns: 1fr; gap: 28px; }
  .cabinet-block.reverse > div:first-child { order: 0; }
  .prat-grid { grid-template-columns: 1fr; gap: 28px; }
  .prat-photo-wrap { max-width: 320px; }
  .page-head { padding-top: 120px; }
  .meta-row { flex-direction: column; gap: 4px; }
  .meta-row .k { width: auto; }
}

/* =========================================================================
   Hero des pages intérieures — bandeau image + voile bleu nuit.
   Même vocabulaire que l'accueil, en plus compact.
   ====================================================================== */
/* =========================================================================
 * HERO IMMERSIF
 * Un seul composant pour toutes les pages. Deux traitements d'image :
 *   .is-stock   — visuel haute définition, rendu tel quel, simplement assombri
 *   .is-archive — photo du cabinet (≤ 733 px de large) : virage bichrome bleu
 *                 nuit. Agrandie 3 fois, une photo de téléphone se voit ;
 *                 traitée en aplat coloré, le manque de piqué devient une
 *                 intention graphique au lieu d'un défaut.
 * ====================================================================== */
.hero-im {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 80vh;
  min-height: 80svh;
  overflow: hidden;
  background: #030b16;
  color: #fff;
  isolation: isolate;
}
/* L'accueil occupe tout l'écran ; les pages intérieures laissent deviner la
   suite pour ne pas obliger à défiler à l'aveugle. */
.hero-im--full {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  --hero-x: 15%;
  --hero-scale: 1.36;
}
@media (max-width: 900px) {
  /* Sur écran étroit le sujet doit revenir au centre : il n'y a plus de
     colonne libre à préserver, le texte passe dessous. */
  .hero-im--full { --hero-x: 0%; --hero-scale: 1; }
}

.hero-im-img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  /* --hero-x et --hero-scale recadrent le sujet hors de la colonne de texte :
     object-position ne suffit pas quand l'image est plus haute que large,
     le recadrage ne joue alors que sur la verticale. */
  transform: translate3d(var(--hero-x, 0), var(--parallax-y), 0) scale(var(--hero-scale, 1));
  z-index: -2;
}

/* Virage bichrome : la photo passe en niveaux de gris, la couche bleu nuit
   lui rend une teinte homogène. */
.hero-im.is-archive .hero-im-img {
  filter: grayscale(1) contrast(1.08) brightness(0.82);
}
.hero-im.is-archive::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(150deg, #0F4C81 0%, #123f66 55%, #2b1620 100%);
  mix-blend-mode: color;
}
.hero-im.is-stock .hero-im-img {
  filter: brightness(0.9) saturate(0.62);
  object-position: 50% 38%;
}
/* Le visuel d'origine tire vers l'orange et le vert : une couche bleu nuit
   en mode « color » le ramène dans la charte sans effacer les volumes. */
.hero-im.is-stock::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0F4C81;
  mix-blend-mode: color;
  opacity: 0.55;
}

/* Voile de lisibilité : dense à gauche où se pose le texte, transparent à
   droite où l'image doit rester visible. */
.hero-im-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3,11,22,0.72) 0%, rgba(3,11,22,0.10) 34%, rgba(3,11,22,0.86) 100%),
    linear-gradient(96deg, rgba(3,11,22,0.92) 0%, rgba(3,11,22,0.66) 42%, rgba(3,11,22,0.05) 82%);
}

.hero-im .container {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 72px;
}
.hero-im--full .container { padding-top: 96px; }

.hero-im .eyebrow { border-top-color: rgba(255,255,255,0.9); color: #fff; }
.hero-im h1 {
  color: #fff;
  margin: 0;
  font-size: clamp(38px, 6.4vw, 86px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 16ch;
}
.hero-im .hero-stats { margin-top: 40px; }
.hero-im .lead {
  color: rgba(255,255,255,0.84);
  margin-top: 22px;
  max-width: 54ch;
  font-size: 17px;
}

/* Indice de défilement, réservé à l'accueil plein écran. */
.hero-im-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 760px) {
  .hero-im { min-height: 68vh; }
  .hero-im .container { padding-top: 92px; padding-bottom: 52px; }
  .hero-im-scrim {
    background: linear-gradient(180deg, rgba(3,11,22,0.62) 0%, rgba(3,11,22,0.30) 30%, rgba(3,11,22,0.92) 100%);
  }
}

/* -------------------------------------------------------------------------
 * En-tête de section avec lien
 * ---------------------------------------------------------------------- */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.sec-head h2 { margin: 0; }
.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.sec-link svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.sec-link:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
 * Bandeau équipe (accueil)
 * Les cinq portraits viennent de sources différentes : fonds, lumières et
 * cadrages ne concordent pas. Le noir et blanc et un cadre circulaire
 * identique effacent ces écarts ; la couleur ne revient qu'au survol, sur
 * un seul portrait à la fois.
 * ---------------------------------------------------------------------- */
.team-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.tb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.tb-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--border);
  box-shadow: 0 0 0 1px var(--border), 0 10px 24px -14px rgba(3,11,22,0.5);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.tb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.35s ease;
}
.tb-item:hover .tb-photo,
.tb-item:focus-visible .tb-photo {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--primary), 0 16px 30px -16px rgba(15,76,129,0.7);
}
.tb-item:hover .tb-photo img,
.tb-item:focus-visible .tb-photo img { filter: grayscale(0) contrast(1); }

/* Le nom passe avant la spécialité : répétée cinq fois, celle-ci prenait
   toute la place et masquait ce que le lecteur cherche. */
.tb-name {
  margin-top: 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.tb-spec {
  /* absorbe la hauteur restante : la ligne des sites s'aligne d'un portrait
     à l'autre même quand la spécialité tient sur deux lignes */
  flex: 1;
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.35;
}
.tb-sites {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

@media (max-width: 900px) {
  .team-band { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
  .tb-photo { width: 108px; height: 108px; }
}
@media (max-width: 520px) {
  .team-band { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
 * Sommaire des examens (accueil)
 * L'accueil ne reprend plus les descriptions : elles vivent sur examens.html.
 * Ici on n'annonce que la liste, pour donner la mesure de l'offre.
 * ---------------------------------------------------------------------- */
.exam-sum {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}
.exam-sum li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.ex-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.ex-nom { font-weight: 600; font-size: 16px; }
.ex-cat {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 900px) { .exam-sum { grid-template-columns: repeat(2, 1fr); gap: 0 28px; } }
@media (max-width: 560px) { .exam-sum { grid-template-columns: 1fr; } }

/* ========================================================================
   Navigation et décor de défilement — rafraîchissement premium 2026-08
   ======================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
  background: transparent;
  border: 0;
  transition: padding 0.3s ease, background 0.3s ease;
}
.site-header.transparent { position: absolute; top: 0; left: 0; right: 0; }
.site-header.transparent.is-scrolled { position: fixed; }
.site-header .container {
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid rgba(15, 76, 129, 0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 12px 32px rgba(7,31,52,0.08);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.transparent:not(.is-scrolled) .container {
  border-color: rgba(255,255,255,0.18);
  background: rgba(3,11,22,0.28);
  box-shadow: 0 12px 36px rgba(0,0,0,0.16);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.25;
}
.brand::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #31a5cc;
  box-shadow: 0 0 0 5px rgba(49,165,204,0.14);
}
.nav-links { align-items: center; gap: 8px; }
.nav-links a {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  color: #17324a;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.nav-links a:not(.nav-appointment)::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.24s ease;
}
.nav-links a:not(.nav-appointment):hover,
.nav-links a:not(.nav-appointment):focus-visible { background: rgba(15,76,129,0.07); }
.nav-links a:not(.nav-appointment):hover::after,
.nav-links a:not(.nav-appointment):focus-visible::after,
.nav-links a.active:not(.nav-appointment)::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active { color: var(--primary); }
.nav-appointment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  background: var(--primary);
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(15,76,129,0.2);
}
.nav-appointment svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.nav-appointment:hover,
.nav-appointment:focus-visible { background: #0a3c68; transform: translateY(-1px); }
.nav-appointment:hover svg,
.nav-appointment:focus-visible svg { transform: translateX(2px); }
.site-header.transparent:not(.is-scrolled) .brand,
.site-header.transparent:not(.is-scrolled) .nav-links a:not(.nav-appointment) { color: #fff; }
.site-header.transparent:not(.is-scrolled) .nav-links a:not(.nav-appointment):hover,
.site-header.transparent:not(.is-scrolled) .nav-links a:not(.nav-appointment):focus-visible { background: rgba(255,255,255,0.12); }
.nav-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(15,76,129,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.48);
  color: var(--primary);
}
.site-header.transparent:not(.is-scrolled) .nav-toggle { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.12); color: #fff; }
.scroll-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #f8fbfd;
}
.scroll-bg span { position: absolute; display: block; will-change: transform; }
.sb-1 {
  top: -22vmax;
  right: -18vmax;
  width: 66vmax;
  height: 66vmax;
  border: 1px solid rgba(37,133,171,0.13);
  border-radius: 48% 52% 63% 37% / 45% 42% 58% 55%;
  background: radial-gradient(circle at 42% 44%, rgba(101,199,229,0.14), rgba(101,199,229,0.035) 42%, transparent 68%);
}
.sb-2 {
  top: 34vh;
  left: -21vmax;
  width: 58vmax;
  height: 58vmax;
  border: 1px solid rgba(15,76,129,0.10);
  border-radius: 55% 45% 41% 59% / 53% 59% 41% 47%;
  background: radial-gradient(circle at 62% 35%, rgba(15,76,129,0.075), transparent 64%);
}
.sb-3 {
  right: 8vw;
  bottom: -26vmax;
  width: 54vmax;
  height: 54vmax;
  border: 1px solid rgba(49,165,204,0.10);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,227,241,0.24), transparent 66%);
}
.sb-grid {
  inset: -10%;
  opacity: 0.52;
  background-image: radial-gradient(rgba(15,76,129,0.12) 0.7px, transparent 0.8px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(110deg, transparent 8%, #000 34%, transparent 70%);
  mask-image: linear-gradient(110deg, transparent 8%, #000 34%, transparent 70%);
}
body > header,
body > section,
body > footer { position: relative; z-index: 1; }
.band-cta {
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 92% 16%, rgba(66,187,221,0.28), transparent 28%), radial-gradient(circle at 8% 100%, rgba(33,120,170,0.45), transparent 38%), #062743;
}
.band-cta .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: center;
  padding-top: 84px;
  padding-bottom: 84px;
}
.band-cta .eyebrow { margin-bottom: 18px; border-top-color: #72d4ed; color: #c3f2ff; }
.band-cta h2 { max-width: 14ch; margin: 0; color: #fff; font-size: clamp(32px, 4.1vw, 56px); line-height: 1.03; }
.band-cta p { max-width: 52ch; margin: 22px 0 0; color: rgba(235,248,252,0.78); font-size: 16px; }
.band-cta__actions { display: grid; gap: 10px; }
.appointment-link {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid rgba(198,239,250,0.20);
  border-radius: 16px;
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 1px rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}
.appointment-link:hover,
.appointment-link:focus-visible { transform: translateY(-3px); border-color: rgba(198,239,250,0.54); background: rgba(255,255,255,0.16); }
.appointment-link__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #72d4ed;
  color: #073554;
}
.appointment-link__icon svg { width: 19px; height: 19px; }
.appointment-link__copy { display: grid; gap: 2px; }
.appointment-link__copy small { color: rgba(235,248,252,0.68); font-size: 12px; font-weight: 600; }
.appointment-link__copy strong { font-size: 17px; letter-spacing: 0.01em; }
.appointment-link > svg { width: 20px; height: 20px; color: #aeeaf9; transition: transform 0.24s ease; }
.appointment-link:hover > svg,
.appointment-link:focus-visible > svg { transform: translateX(3px); }
.band-cta__contact { justify-self: start; margin: 8px 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(198,239,250,0.48); color: rgba(235,248,252,0.88); font-size: 13px; font-weight: 700; }
.band-cta__contact:hover,
.band-cta__contact:focus-visible { color: #fff; }
@media (max-width: 900px) {
  .brand { max-width: 310px; font-size: 9px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding-right: 8px; padding-left: 8px; }
  .nav-appointment { margin-left: 2px; }
}
@media (max-width: 760px) {
  .site-header { padding: 10px 0; }
  .site-header .container { min-height: 60px; border-radius: 15px; }
  .brand { max-width: 245px; font-size: 8px; letter-spacing: 0.8px; }
  .brand::before { width: 8px; height: 8px; flex-basis: 8px; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    position: fixed;
    top: 82px;
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(15,76,129,0.12);
    border-radius: 16px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 20px 48px rgba(7,31,52,0.18);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .nav-links a { padding: 13px 12px; font-size: 16px; }
  .nav-links a:not(.nav-appointment)::after { right: auto; left: 12px; width: 28px; }
  .nav-appointment { justify-content: space-between; width: 100%; margin: 8px 0 0; }
  .band-cta .container { grid-template-columns: 1fr; gap: 34px; padding-top: 64px; padding-bottom: 64px; }
  .band-cta h2 { max-width: 16ch; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-bg span { transform: none !important; }
  .nav-links,
  .nav-links a,
  .nav-appointment,
  .appointment-link,
  .appointment-link > svg { transition: none; }
}
@media (max-width: 760px) {
  .site-header.transparent:not(.is-scrolled) .nav-links.open a:not(.nav-appointment) { color: #17324a; }
}
:focus-visible { outline: 3px solid #57c9e7; outline-offset: 3px; }
/* État scrolé : la navigation quitte le hero sombre et redevient lisible. */
.site-header.transparent.is-scrolled .brand,
.site-header.transparent.is-scrolled .nav-links a:not(.nav-appointment) { color: #17324a; }
.site-header.transparent.is-scrolled .nav-links a.active:not(.nav-appointment) { color: var(--primary); }
/* Scroll background: stronger visual layer */
.brand {
  max-width: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.brand::before {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
  background: #59c9eb;
  box-shadow: 0 0 0 5px rgba(89,201,235,0.18), 0 0 20px rgba(89,201,235,0.55);
}
.scroll-bg {
  background:
    radial-gradient(circle at 85% 8%, rgba(80,196,231,0.18), transparent 34%),
    radial-gradient(circle at 14% 62%, rgba(26,111,163,0.13), transparent 40%),
    #f4faff;
}
.scroll-bg::before,
.scroll-bg::after {
  content: '';
  position: absolute;
  inset: 0;
}
.scroll-bg::before {
  opacity: 0.72;
  background:
    linear-gradient(110deg, transparent 8%, rgba(26,114,166,0.075) 38%, transparent 69%),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(15,76,129,0.035) 90px 91px);
}
.scroll-bg::after {
  top: 10%;
  right: -18%;
  bottom: auto;
  left: auto;
  width: min(78vw, 980px);
  height: min(78vw, 980px);
  border: 1px solid rgba(21,124,174,0.20);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(50,165,205,0.035), 0 0 0 104px rgba(50,165,205,0.025);
}
.sb-1 {
  border-color: rgba(19,123,176,0.32);
  background: radial-gradient(circle at 42% 44%, rgba(83,202,237,0.32), rgba(66,177,217,0.12) 45%, transparent 70%);
}
.sb-2 {
  border-color: rgba(15,76,129,0.25);
  background: radial-gradient(circle at 62% 35%, rgba(20,112,168,0.18), rgba(60,175,213,0.06) 48%, transparent 70%);
}
.sb-3 {
  border-color: rgba(31,146,191,0.25);
  background: radial-gradient(circle, rgba(124,215,240,0.38), rgba(93,192,224,0.10) 48%, transparent 72%);
}
.sb-grid {
  opacity: 0.92;
  background-image: radial-gradient(rgba(15,76,129,0.20) 0.8px, transparent 1px);
  background-size: 24px 24px;
}
.section > .container {
  position: relative;
}
.section > .container::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 32px;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), #57c9e7);
  box-shadow: 0 6px 18px rgba(15,76,129,0.16);
}
.section.tight > .container::before { top: -12px; }
@media (max-width: 760px) {
  .brand { font-size: 12px; }
  .section > .container::before { left: 20px; }
  .scroll-bg::after { width: 110vw; height: 110vw; right: -45vw; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-bg::before { opacity: 0.48; }
}
/* Unified navigation and sitewide CTA */
.site-header .container {
  position: relative;
  justify-content: center;
}
.site-header .brand { display: none !important; }
.site-header .nav-links { margin: 0 auto; }
.band-cta {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(153,224,243,0.18);
  border-bottom: 1px solid rgba(153,224,243,0.12);
}
.band-cta::before,
.band-cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.band-cta::before {
  top: -22%;
  right: 4%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(129,222,246,0.24);
  box-shadow: 0 0 0 48px rgba(68,177,213,0.06), 0 0 0 96px rgba(68,177,213,0.035);
}
.band-cta::after {
  bottom: -30%;
  left: -8%;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(74,190,225,0.23), transparent 68%);
}
.band-cta--compact .container {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
  gap: clamp(32px, 6vw, 86px);
  padding-top: 68px;
  padding-bottom: 68px;
}
.band-cta--compact h2 { max-width: 17ch; font-size: clamp(30px, 3.5vw, 48px); }
.band-cta--compact .band-cta__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-cta--compact .appointment-link { min-height: 96px; }
.band-cta__signal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12%;
  width: 30%;
  opacity: 0.58;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(151,235,255,0.16), transparent);
  transform: skewX(-22deg);
}
.contact-card,
.team-card,
.cabinet-block {
  border-color: rgba(15,76,129,0.13);
}
.contact-card:hover { box-shadow: 0 20px 42px rgba(15,76,129,0.12); }
@media (max-width: 760px) {
  .site-header .container { justify-content: flex-end; }
  .site-header .nav-toggle { position: relative; z-index: 2; }
  .band-cta--compact .container { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; }
  .band-cta--compact .band-cta__actions { grid-template-columns: 1fr; }
  .band-cta--compact .appointment-link { min-height: 76px; }
}
/* Team page: airy editorial directory over the animated background. */
.hero-team { --hero-x: 8%; --hero-scale: 1.18; }
.hero-team .hero-im-img { filter: grayscale(1) contrast(1.06) brightness(0.7); object-position: 58% 46%; }
.hero-team::before { background: linear-gradient(135deg, #061b30 0%, #0f4c81 60%, #39a7cf 140%); opacity: 0.8; }
.hero-team .hero-im-scrim { background: linear-gradient(96deg, rgba(3,11,22,0.94) 0%, rgba(3,11,22,0.71) 44%, rgba(3,11,22,0.12) 88%); }
.hero-team h1 { max-width: 12ch; }
.hero-team .lead { max-width: 60ch; }
.team-directory { position: relative; padding-top: clamp(88px, 12vw, 154px); padding-bottom: clamp(100px, 13vw, 174px); }
.team-directory > .container { position: relative; }
.team-directory__heading { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.58fr); column-gap: 11%; align-items: end; margin-bottom: clamp(68px, 11vw, 138px); }
.team-directory__heading .eyebrow { grid-column: 1; margin-bottom: 22px; }
.team-directory__heading h2 { grid-column: 1; margin: 0; max-width: 12ch; }
.team-directory__heading p { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 6px; color: #38566c; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }
.team-showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(36px, 7vw, 94px); }
.profile-tile { grid-column: 1 / span 9; display: grid; grid-template-columns: minmax(210px, 0.88fr) minmax(260px, 1.12fr); min-height: 350px; overflow: hidden; color: #09263b; border: 1px solid rgba(15,76,129,0.16); border-radius: 3px; background: rgba(255,255,255,0.57); box-shadow: 0 24px 60px -44px rgba(4,44,74,0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .35s ease; }
.profile-tile:nth-child(even) { grid-column: 4 / -1; }
.profile-tile--lead { grid-column: 1 / span 10; min-height: 420px; }
.profile-tile__photo { position: relative; overflow: hidden; min-height: 100%; background: #103b59; }
.profile-tile__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(3,23,40,0.08), rgba(3,23,40,0.48)); pointer-events: none; }
.profile-tile__photo img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 16%; filter: grayscale(1) contrast(1.05); transform: translate3d(0, var(--parallax-y), 0) scale(var(--zoom)); transition: filter .4s ease, --zoom .5s ease; }
.profile-tile__content { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(30px, 4vw, 58px); }
.profile-tile__number { position: absolute; top: 24px; right: 28px; color: rgba(15,76,129,0.32); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.profile-tile__specialty { margin: 0 36px 26px 0; color: #25688e; font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; }
.profile-tile h3 { margin: 0; color: #0b2b42; font-size: clamp(30px, 3.1vw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.profile-tile__bio { max-width: 36ch; margin: 18px 0 0; color: #496478; font-size: 15px; line-height: 1.55; }
.profile-tile__site { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 32px; color: #0f4c81; font-size: 13px; font-weight: 750; }
.profile-tile__site i { width: 4px; height: 4px; border-radius: 50%; background: #47b9db; }
.profile-tile__action { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid rgba(15,76,129,0.38); color: #0f4c81; font-size: 13px; font-weight: 800; transition: gap .25s ease, color .25s ease; }
.profile-tile__action b { font-size: 18px; font-weight: 400; line-height: .7; }
.profile-tile:hover, .profile-tile:focus-visible { transform: translateY(-7px); background: rgba(255,255,255,0.78); box-shadow: 0 32px 74px -42px rgba(4,44,74,0.58); outline: 2px solid #1274a3; outline-offset: 5px; }
.profile-tile:hover .profile-tile__photo img, .profile-tile:focus-visible .profile-tile__photo img { --zoom: 1.045; filter: grayscale(0) contrast(1); }
.profile-tile:hover .profile-tile__action, .profile-tile:focus-visible .profile-tile__action { gap: 18px; color: #082f50; }
@media (max-width: 760px) { .hero-team { --hero-x: 0%; --hero-scale: 1; } .hero-team .hero-im-scrim { background: linear-gradient(180deg, rgba(3,11,22,.72), rgba(3,11,22,.24) 34%, rgba(3,11,22,.9)); } .team-directory { padding-top: 78px; } .team-directory__heading { display: block; margin-bottom: 58px; } .team-directory__heading .eyebrow { margin-bottom: 18px; } .team-directory__heading h2 { margin-bottom: 20px; } .team-showcase { display: grid; grid-template-columns: 1fr; gap: 26px; } .profile-tile, .profile-tile:nth-child(even), .profile-tile--lead { grid-column: auto; grid-template-columns: minmax(120px, .72fr) minmax(0, 1.28fr); min-height: 255px; } .profile-tile__content { padding: 26px 22px; } .profile-tile__specialty { margin-bottom: 16px; font-size: 9px; } .profile-tile h3 { font-size: clamp(25px, 8vw, 34px); } .profile-tile__bio { display: none; } .profile-tile__site { padding-top: 18px; font-size: 12px; } .profile-tile__action { margin-top: 13px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .profile-tile { transition: none; } .profile-tile:hover, .profile-tile:focus-visible { transform: none; } .profile-tile__photo img { transition: none; } }
/* Team directory scroll progress: decorative reading line, driven by ScrollTrigger. */
.team-showcase { position: relative; }
.team-progress { position: absolute; z-index: 2; top: 10px; bottom: 10px; left: -24px; width: 10px; pointer-events: none; }
.team-progress__track { position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; overflow: hidden; background: rgba(15,76,129,0.18); }
.team-progress__fill { display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, #45c5e9, #0f4c81); transform: scaleY(0); transform-origin: top center; box-shadow: 0 0 12px rgba(69,197,233,0.72); }
.team-progress__dot { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #4bc9ec; box-shadow: 0 0 0 3px rgba(75,201,236,0.18), 0 0 16px rgba(75,201,236,0.86); }
@media (max-width: 760px) { .team-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .team-progress { display: none; } }
/* Visibility pass: the marker sits on the cards' edge instead of outside it. */
.team-progress { left: -8px; z-index: 6; width: 17px; }
.team-progress__track { left: 8px; width: 2px; background: rgba(15,76,129,0.22); }
.team-progress__fill { transform: scaleY(.08); background: linear-gradient(to bottom, #2b82ad, #0a365f); box-shadow: 0 0 14px rgba(23,104,153,.62); }
.team-progress__dot { left: 0; width: 17px; height: 17px; border: 2px solid #e7faff; background: #0f4c81; box-shadow: 0 0 0 4px rgba(73,190,229,.22), 0 0 22px rgba(15,76,129,.9), inset 0 0 0 2px rgba(4,32,57,.42); }
@media (prefers-reduced-motion: reduce) { .team-progress { display: block; } .team-progress__fill { transform: scaleY(.08); } }
/* Practitioner orbit: one dark-blue orb crosses from card to card as the page scrolls. */
.team-progress { position: absolute; inset: 0; z-index: 8; display: block; width: auto; height: auto; pointer-events: none; }
.team-progress__track, .team-progress__fill { display: none; }
.team-progress__dot { position: absolute; top: 0; left: 0; width: 25px; height: 25px; border: 3px solid #e8faff; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #4fb9e2 0 10%, #0f4c81 42%, #061f38 100%); box-shadow: 0 0 0 5px rgba(75,201,236,.16), 0 0 28px rgba(15,76,129,.95), inset 0 0 10px rgba(0,0,0,.48); will-change: transform; }
@media (max-width: 760px) { .team-progress { display: block; } .team-progress__dot { width: 18px; height: 18px; border-width: 2px; box-shadow: 0 0 0 4px rgba(75,201,236,.14), 0 0 18px rgba(15,76,129,.88); } }
/* Neon pass: the orb glows in open space and slips behind each practitioner card. */
.team-showcase { isolation: isolate; }
.team-progress { z-index: 1; overflow: visible; }
.profile-tile { position: relative; z-index: 2; }
.team-progress__dot { background: radial-gradient(circle at 34% 28%, #d2f8ff 0 7%, #52d8ff 13%, #1372ae 35%, #082f55 68%, #031729 100%); box-shadow: 0 0 0 3px rgba(134,232,255,.23), 0 0 14px rgba(65,205,255,.96), 0 0 34px rgba(15,91,161,.88), 0 0 62px rgba(37,161,231,.42), inset 0 0 9px rgba(0,0,0,.62); }
.team-progress__dot::before { content: ''; position: absolute; inset: -18px; z-index: -1; border-radius: inherit; background: radial-gradient(circle, rgba(84,216,255,.48) 0%, rgba(27,137,201,.18) 35%, transparent 72%); filter: blur(6px); }
@media (max-width: 760px) { .team-progress__dot::before { inset: -13px; } }
/* Horizontal directory progress: the whole team is read as one continuous sequence. */
.team-progress { position: sticky; inset: auto; top: 88px; z-index: 16; display: block; width: 100%; height: 18px; margin: 0 0 clamp(36px, 5vw, 62px); overflow: visible; pointer-events: none; }
.team-progress__track { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 3px; overflow: visible; border-radius: 99px; background: rgba(15,76,129,.17); transform: translateY(-50%); }
.team-progress__fill { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f4c81 0%, #2c93bf 62%, #72d4ed 100%); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 12px rgba(54,171,214,.42); }
.team-progress__dot { position: absolute; top: 50%; left: 0; display: block; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #0f4c81; box-shadow: 0 0 0 3px rgba(77,197,232,.18), 0 0 14px rgba(32,142,193,.72); will-change: transform; }
.team-progress__dot::before { content: none; }
.team-showcase { isolation: auto; }
.profile-tile { z-index: auto; }
@media (max-width: 760px) { .team-progress { top: 78px; height: 14px; margin-bottom: 32px; } .team-progress__track { height: 2px; } .team-progress__dot { width: 11px; height: 11px; } }
@media (prefers-reduced-motion: reduce) { .team-progress { display: block; } }
/* Vertical directory progress: a calm left-hand reading guide for the practitioner list. */
.team-showcase { position: relative; }
.team-progress { position: absolute; inset: 10px auto 10px -20px; z-index: 3; display: block; width: 14px; height: auto; margin: 0; overflow: visible; pointer-events: none; }
.team-progress__track { position: absolute; top: 0; bottom: 0; left: 50%; display: block; width: 2px; height: auto; overflow: visible; border-radius: 99px; background: rgba(15,76,129,.18); transform: translateX(-50%); }
.team-progress__fill { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #0f4c81 0%, #2c93bf 62%, #72d4ed 100%); transform: scaleY(0); transform-origin: top center; box-shadow: 0 0 12px rgba(54,171,214,.42); }
.team-progress__dot { position: absolute; top: 0; left: 50%; display: block; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #0f4c81; box-shadow: 0 0 0 3px rgba(77,197,232,.18), 0 0 14px rgba(32,142,193,.72); will-change: transform; }
.team-progress__dot::before { content: none; }
@media (max-width: 760px) { .team-progress { inset: 8px auto 8px -8px; width: 10px; } .team-progress__track { width: 2px; } .team-progress__dot { width: 11px; height: 11px; } }
@media (prefers-reduced-motion: reduce) { .team-progress { display: block; } }
/* Immersive examination hero: retain a calm, clinical scan-like depth. */
.hero-exams { --hero-x: 10%; --hero-scale: 1.22; }
.hero-im.hero-exams .hero-im-img { filter: brightness(.72) saturate(.64) contrast(1.08); object-position: 61% 49%; }
.hero-exams::before { background: linear-gradient(130deg, #03172a 0%, #0b4d7b 55%, #42b8d8 135%); opacity: .75; }
.hero-exams::after { content: ''; position: absolute; inset: -25% 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 32px, rgba(154,232,248,.10) 33px, transparent 34px 66px); mix-blend-mode: screen; opacity: .5; animation: examScan 13s linear infinite; }
.hero-exams .hero-im-scrim { background: linear-gradient(96deg, rgba(2,12,24,.95) 0%, rgba(2,12,24,.72) 44%, rgba(2,12,24,.10) 88%); }
.hero-exams h1 { max-width: 12ch; }
.hero-exams .lead { max-width: 57ch; }
.hero-exams .hero-stats { position: relative; z-index: 1; }
@keyframes examScan { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
@media (max-width: 760px) { .hero-exams { --hero-x: 0%; --hero-scale: 1; } .hero-exams .hero-im-scrim { background: linear-gradient(180deg, rgba(2,12,24,.76) 0%, rgba(2,12,24,.25) 34%, rgba(2,12,24,.92) 100%); } }
@media (prefers-reduced-motion: reduce) { .hero-exams::after { animation: none; } }
/* Cabinet directory: a deliberate two-site carousel with calm, accessible motion. */
.hero-cabinets { --hero-x: 8%; --hero-scale: 1.16; }
.hero-im.hero-cabinets .hero-im-img { filter: grayscale(1) contrast(1.08) brightness(.68); object-position: 53% 49%; }
.hero-cabinets::before { background: linear-gradient(132deg, #061b30 0%, #0f4c81 58%, #47bbdd 145%); opacity: .78; }
.hero-cabinets .hero-im-scrim { background: linear-gradient(96deg, rgba(3,11,22,.95) 0%, rgba(3,11,22,.70) 45%, rgba(3,11,22,.12) 88%); }
.hero-cabinets h1 { max-width: 11ch; }
.hero-cabinets .lead { max-width: 58ch; }
.cabinet-directory { padding-top: clamp(88px, 12vw, 150px); padding-bottom: clamp(96px, 13vw, 166px); }
.cabinet-directory__intro { display: grid; grid-template-columns: minmax(0, .98fr) minmax(260px, .57fr); column-gap: 11%; align-items: end; margin-bottom: clamp(54px, 8vw, 94px); }
.cabinet-directory__intro .eyebrow { grid-column: 1; margin-bottom: 22px; }
.cabinet-directory__intro h2 { grid-column: 1; margin: 0; max-width: 13ch; }
.cabinet-directory__intro p { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 6px; color: #38566c; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }
.cabinet-carousel { border-top: 1px solid rgba(15,76,129,.22); border-bottom: 1px solid rgba(15,76,129,.22); }
.cabinet-carousel__tabs { display: flex; gap: clamp(22px, 5vw, 70px); border-bottom: 1px solid rgba(15,76,129,.16); }
.cabinet-carousel__tab { position: relative; min-height: 62px; padding: 0; border: 0; background: transparent; color: #6b8494; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: color .25s ease; }
.cabinet-carousel__tab span { margin-right: 10px; color: #55bddd; font-size: 11px; letter-spacing: .12em; }
.cabinet-carousel__tab::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #0f4c81; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cabinet-carousel__tab:hover, .cabinet-carousel__tab:focus-visible, .cabinet-carousel__tab.is-active { color: #082f50; outline: none; }
.cabinet-carousel__tab:focus-visible { box-shadow: inset 0 0 0 2px #1176a5; }
.cabinet-carousel__tab.is-active::after { transform: scaleX(1); }
.cabinet-carousel__stage { overflow: hidden; }
.cabinet-carousel__slide[hidden] { display: none !important; }
.cabinet-carousel__slide { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(300px, .82fr); gap: clamp(38px, 7vw, 104px); align-items: center; padding: clamp(42px, 7vw, 88px) 0; animation: cabinetSlideIn .58s cubic-bezier(.16,1,.3,1) both; }
.cabinet-carousel__media { position: relative; min-height: clamp(350px, 43vw, 565px); overflow: hidden; background: #0b2f4b; }
.cabinet-carousel__image { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.04); }
.cabinet-carousel__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(145deg, rgba(3,20,36,.10), rgba(3,20,36,.45)); }
.cabinet-carousel__detail { position: absolute; z-index: 1; right: clamp(16px, 3vw, 38px); bottom: clamp(16px, 3vw, 38px); width: min(44%, 240px); aspect-ratio: 1 / .83; object-fit: cover; border: 5px solid rgba(255,255,255,.92); box-shadow: 0 20px 42px rgba(2,17,32,.28); }
.cabinet-carousel__caption { position: absolute; z-index: 2; top: 20px; left: 20px; padding: 8px 11px; background: rgba(3,20,36,.72); color: rgba(255,255,255,.88); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.cabinet-carousel__caption--illustration { background: rgba(15,76,129,.82); }
.cabinet-carousel__content { max-width: 490px; }
.cabinet-carousel__content h3 { margin: 0 0 18px; color: #092a42; font-size: clamp(42px, 5.1vw, 68px); font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.cabinet-carousel__content > p { margin: 0 0 38px; color: #466377; font-size: 17px; line-height: 1.63; }
.cabinet-carousel__content .cabinet-meta { border-top-color: rgba(15,76,129,.18); }
.cabinet-carousel__content .meta-row { grid-template-columns: 112px 1fr; border-bottom-color: rgba(15,76,129,.14); }
.cabinet-carousel__content .meta-row .k { color: #6a8394; }
.cabinet-carousel__content .meta-row .v { color: #294b61; line-height: 1.58; }
.cabinet-carousel__content .meta-row .v span { color: #708797; font-size: 13px; }
.cabinet-carousel__footer { display: flex; justify-content: space-between; align-items: center; min-height: 78px; border-top: 1px solid rgba(15,76,129,.16); }
.cabinet-carousel__footer p { margin: 0; color: #0f4c81; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.cabinet-carousel__controls { display: flex; gap: 8px; }
.cabinet-carousel__button { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(15,76,129,.25); border-radius: 50%; background: rgba(255,255,255,.55); color: #0f4c81; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.cabinet-carousel__button svg { width: 19px; height: 19px; }
.cabinet-carousel__button:hover, .cabinet-carousel__button:focus-visible { background: #0f4c81; color: #fff; outline: none; transform: translateY(-2px); }
.cabinet-carousel__button:focus-visible { box-shadow: 0 0 0 3px rgba(74,190,222,.35); }
@keyframes cabinetSlideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 760px) { .hero-cabinets { --hero-x: 0%; --hero-scale: 1; } .hero-cabinets .hero-im-scrim { background: linear-gradient(180deg, rgba(3,11,22,.76), rgba(3,11,22,.27) 34%, rgba(3,11,22,.92)); } .cabinet-directory { padding-top: 78px; } .cabinet-directory__intro { display: block; margin-bottom: 48px; } .cabinet-directory__intro .eyebrow, .cabinet-directory__intro h2 { margin-bottom: 20px; } .cabinet-carousel__tabs { gap: 24px; overflow-x: auto; } .cabinet-carousel__tab { flex: 0 0 auto; } .cabinet-carousel__slide { grid-template-columns: 1fr; gap: 34px; padding: 34px 0 50px; } .cabinet-carousel__media { min-height: 330px; } .cabinet-carousel__content h3 { font-size: clamp(40px, 13vw, 58px); } .cabinet-carousel__content > p { margin-bottom: 26px; } .cabinet-carousel__content .meta-row { grid-template-columns: 94px 1fr; gap: 12px; padding: 16px 0; } .cabinet-carousel__detail { width: 43%; border-width: 3px; } }
@media (prefers-reduced-motion: reduce) { .cabinet-carousel__slide { animation: none; } .cabinet-carousel__tab::after, .cabinet-carousel__button { transition: none; } .cabinet-carousel__button:hover, .cabinet-carousel__button:focus-visible { transform: none; } }
/* Dynamic photo galleries inside each cabinet slide. */
.site-gallery { isolation: isolate; }
.site-gallery__viewport { position: absolute; inset: 0; overflow: hidden; }
.site-gallery__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(3%); transition: opacity .55s ease, transform .72s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.site-gallery__slide.is-active { z-index: 1; opacity: 1; transform: translateX(0); }
.site-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.04); transform: scale(1.015); transition: transform 6.2s ease-out; }
.site-gallery__slide.is-active img { transform: scale(1.075); }
.site-gallery__controls { position: absolute; z-index: 4; right: 22px; bottom: 22px; left: 22px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.site-gallery__arrow { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; background: rgba(3,20,36,.68); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .22s ease, transform .22s ease; }
.site-gallery__arrow svg { width: 18px; height: 18px; }
.site-gallery__arrow:hover, .site-gallery__arrow:focus-visible { background: #0f4c81; outline: none; transform: scale(1.06); }
.site-gallery__arrow:focus-visible { box-shadow: 0 0 0 3px rgba(83,204,236,.42); }
.site-gallery__dots { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border-radius: 99px; background: rgba(3,20,36,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-gallery__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.46); cursor: pointer; transition: width .28s ease, background .28s ease; }
.site-gallery__dot.is-active { width: 28px; background: #72d5ed; }
.site-gallery__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site-gallery__count { position: absolute; z-index: 4; right: 22px; top: 20px; margin: 0; padding: 8px 10px; background: rgba(3,20,36,.68); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
@media (max-width: 760px) { .site-gallery__controls { right: 14px; bottom: 14px; left: 14px; gap: 8px; } .site-gallery__arrow { width: 44px; height: 44px; } .site-gallery__count { right: 14px; top: 14px; } }
@media (prefers-reduced-motion: reduce) { .site-gallery__slide, .site-gallery__slide img, .site-gallery__arrow, .site-gallery__dot { transition: none; } .site-gallery__slide.is-active img { transform: none; } }
/* Premium stacked-deck carousel: next images remain visible as tactile depth cues. */
.site-gallery { min-height: clamp(390px, 46vw, 610px); overflow: visible; background: transparent; }
.site-gallery::before { content: ''; position: absolute; inset: 38px 0 54px 44px; z-index: -1; border: 1px solid rgba(15,76,129,.14); background: linear-gradient(145deg, rgba(8,45,72,.10), rgba(81,187,218,.13)); transform: rotate(2.2deg); }
.site-gallery__viewport { position: absolute; inset: 34px 64px 82px 0; overflow: visible; perspective: 1400px; }
.site-gallery__slide { position: absolute; inset: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.52); background: #082d49; box-shadow: 0 28px 60px -32px rgba(2,27,47,.78); opacity: 0; transform-origin: 82% 50%; transition: opacity .45s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .5s ease; will-change: transform, opacity; }
.site-gallery__slide[data-gallery-position="0"] { z-index: 4; opacity: 1; transform: translate3d(0,0,0) rotateY(0) scale(1); }
.site-gallery__slide[data-gallery-position="1"] { z-index: 3; opacity: .82; transform: translate3d(50px,-20px,-40px) rotateY(-2.5deg) scale(.95); filter: brightness(.77) saturate(.72); cursor: pointer; pointer-events: auto; }
.site-gallery__slide[data-gallery-position="2"] { z-index: 2; opacity: .42; transform: translate3d(90px,-36px,-80px) rotateY(-4deg) scale(.89); filter: brightness(.58) saturate(.5); }
.site-gallery__slide[data-gallery-position="-1"] { z-index: 1; opacity: 0; transform: translate3d(-48px,18px,-80px) rotateY(3deg) scale(.92); }
.site-gallery__slide img { transform: scale(1.01); transition: transform 5.4s cubic-bezier(.22,.61,.36,1); }
.site-gallery__slide[data-gallery-position="0"] img { transform: scale(1.045); }
.site-gallery .cabinet-carousel__caption { top: 54px; left: 18px; z-index: 6; box-shadow: 0 10px 24px rgba(3,20,36,.16); }
.site-gallery__count { top: 54px; right: 78px; z-index: 6; border: 1px solid rgba(255,255,255,.26); background: rgba(3,20,36,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-gallery__controls { right: 42px; bottom: 14px; left: 0; z-index: 6; justify-content: flex-start; }
.site-gallery__arrow { width: 50px; height: 50px; border-color: rgba(15,76,129,.23); background: rgba(255,255,255,.82); color: #0f4c81; box-shadow: 0 10px 24px -16px rgba(4,45,73,.55); }
.site-gallery__arrow:hover, .site-gallery__arrow:focus-visible { background: #0f4c81; color: #fff; transform: translateY(-3px); }
.site-gallery__dots { gap: 5px; padding: 0 4px; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-gallery__dot { width: clamp(24px, 3vw, 42px); height: 3px; border-radius: 0; background: rgba(15,76,129,.20); }
.site-gallery__dot.is-active { width: clamp(24px, 3vw, 42px); background: #31a9cf; box-shadow: 0 0 10px rgba(49,169,207,.38); }
.site-gallery__dot:hover { background: #0f4c81; }
@media (max-width: 760px) { .site-gallery { min-height: 390px; } .site-gallery::before { inset: 28px 0 54px 28px; } .site-gallery__viewport { inset: 26px 38px 80px 0; } .site-gallery__slide[data-gallery-position="1"] { transform: translate3d(30px,-13px,-30px) scale(.95); } .site-gallery__slide[data-gallery-position="2"] { transform: translate3d(50px,-23px,-60px) scale(.9); } .site-gallery .cabinet-carousel__caption { top: 42px; left: 12px; max-width: 72%; } .site-gallery__count { top: 42px; right: 48px; } .site-gallery__controls { right: 22px; bottom: 12px; } .site-gallery__arrow { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .site-gallery__slide, .site-gallery__slide img { transition: none; } .site-gallery__slide[data-gallery-position="0"] img { transform: none; } }
/* 21st-style feature coverflow: centered sharp card, blurred adjacent cards. */
.site-gallery { min-height: clamp(380px, 42vw, 540px); overflow: hidden; background: radial-gradient(circle at 50% 38%, rgba(66,181,216,.13), transparent 54%); }
.site-gallery::before { display: none; }
.site-gallery__viewport { position: absolute; inset: 0; overflow: hidden; perspective: 1000px; }
.site-gallery__slide { top: 48%; left: 50%; right: auto; bottom: auto; width: 78%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: 24px; background: #082d49; box-shadow: none; opacity: 0; visibility: hidden; filter: blur(0); transform-origin: center; transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.site-gallery__slide[data-gallery-position="0"] { z-index: 10; opacity: 1; visibility: visible; filter: blur(0); transform: translate3d(-50%,-50%,0) translateX(0) scale(1) rotateY(0deg); }
.site-gallery__slide[data-gallery-position="-1"] { z-index: 5; opacity: .38; visibility: visible; filter: blur(4px); transform: translate3d(-50%,-50%,0) translateX(-58%) scale(.85) rotateY(10deg); pointer-events: auto; cursor: pointer; }
.site-gallery__slide[data-gallery-position="1"] { z-index: 5; opacity: .38; visibility: visible; filter: blur(4px); transform: translate3d(-50%,-50%,0) translateX(58%) scale(.85) rotateY(-10deg); pointer-events: auto; cursor: pointer; }
.site-gallery__slide[data-gallery-position="hidden"] { z-index: 1; opacity: 0; visibility: hidden; transform: translate3d(-50%,-50%,0) scale(.7); }
.site-gallery__slide img { width: 100%; height: 100%; border: 2px solid rgba(15,76,129,.12); border-radius: 24px; object-fit: cover; box-shadow: 0 28px 64px -30px rgba(2,24,43,.72); transform: none; transition: none; }
.site-gallery__slide[data-gallery-position="0"] img { transform: none; }
.site-gallery .cabinet-carousel__caption { top: auto; bottom: 22px; left: 50%; z-index: 16; max-width: 66%; transform: translateX(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-gallery__count { top: 18px; right: 18px; z-index: 16; }
.site-gallery__controls { inset: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; transform: none; pointer-events: none; }
.site-gallery__arrow { width: 48px; height: 48px; margin: 0 12px; border: 1px solid rgba(15,76,129,.20); background: rgba(255,255,255,.76); color: #0f4c81; pointer-events: auto; box-shadow: 0 14px 34px -20px rgba(3,31,51,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-gallery__arrow:hover, .site-gallery__arrow:focus-visible { background: #0f4c81; color: #fff; transform: scale(1.06); }
.site-gallery__dots { position: absolute; bottom: 72px; left: 50%; display: flex; gap: 6px; padding: 9px 11px; border-radius: 99px; background: rgba(255,255,255,.74); transform: translateX(-50%); pointer-events: auto; box-shadow: 0 10px 26px -18px rgba(3,31,51,.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-gallery__dot { width: 7px; height: 7px; border-radius: 99px; background: rgba(15,76,129,.24); }
.site-gallery__dot.is-active { width: 25px; background: #2398c0; box-shadow: none; }
@media (max-width: 760px) { .site-gallery { min-height: 360px; } .site-gallery__slide { top: 45%; width: 80%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; } .site-gallery__slide img { border-radius: 18px; } .site-gallery__slide[data-gallery-position="-1"] { transform: translate3d(-50%,-50%,0) translateX(-55%) scale(.84) rotateY(9deg); } .site-gallery__slide[data-gallery-position="1"] { transform: translate3d(-50%,-50%,0) translateX(55%) scale(.84) rotateY(-9deg); } .site-gallery .cabinet-carousel__caption { bottom: 18px; max-width: 76%; } .site-gallery__count { top: 12px; right: 12px; } .site-gallery__arrow { width: 44px; height: 44px; margin: 0 8px; } .site-gallery__dots { bottom: 65px; } }
@media (prefers-reduced-motion: reduce) { .site-gallery__slide, .site-gallery__arrow, .site-gallery__dot { transition: none; } }
/* Continuous smooth autoplay pass. */
.site-gallery__slide { transition-duration: 1.2s, 1.35s, 1.2s; transition-timing-function: ease, cubic-bezier(.25,.8,.25,1), ease; }
.site-gallery__dot { position: relative; overflow: hidden; width: 28px; height: 5px; background: rgba(15,76,129,.16); transition: background .25s ease; }
.site-gallery__dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #2398c0; transform: scaleX(0); transform-origin: left center; }
.site-gallery__dot.is-active { width: 28px; background: rgba(15,76,129,.16); }
.site-gallery__dot.is-active::after { animation: galleryAutoplayProgress 6.5s linear forwards; }
@keyframes galleryAutoplayProgress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .site-gallery__dot.is-active::after { animation: none; transform: scaleX(1); } }
/* Softer cinematic movement and an accessible crossfade-only fallback. */
.site-gallery__slide[data-gallery-position="-1"] { opacity: .48; filter: blur(2px); transform: translate3d(-50%,-50%,0) translateX(-52%) scale(.9) rotateY(6deg); }
.site-gallery__slide[data-gallery-position="1"] { opacity: .48; filter: blur(2px); transform: translate3d(-50%,-50%,0) translateX(52%) scale(.9) rotateY(-6deg); }
@media (prefers-reduced-motion: reduce) {
  .site-gallery__slide { transition: opacity 1.1s ease, filter 1.1s ease !important; }
  .site-gallery__slide[data-gallery-position="0"] { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
  .site-gallery__slide[data-gallery-position="-1"], .site-gallery__slide[data-gallery-position="1"] { opacity: 0; filter: none; transform: translate3d(-50%,-50%,0) scale(.985); }
  .site-gallery__dot.is-active::after { animation: galleryAutoplayProgress 6.5s linear forwards; }
}
/* Contact page v30 */
.hero-contact{min-height:88vh;min-height:88svh;--hero-x:12%;--hero-scale:1.2}
.hero-im.hero-contact .hero-im-img{filter:grayscale(1) contrast(1.08) brightness(.6);object-position:58% 50%}
.hero-im.hero-contact::before{background:linear-gradient(132deg,#031629 0%,#0d497a 58%,#40b7d8 145%);opacity:.78}
.hero-contact .hero-im-scrim{background:linear-gradient(94deg,rgba(2,11,22,.96),rgba(2,11,22,.74) 46%,rgba(2,11,22,.15) 88%)}
.hero-contact h1{max-width:11ch}.hero-contact .lead{max-width:54ch}
.hero-contact__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.hero-contact__actions a{display:grid;grid-template-columns:1fr auto;min-width:min(100%,245px);min-height:76px;padding:14px 15px 13px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(12px);transition:transform .25s ease,background .25s ease,border-color .25s ease}
.hero-contact__actions a:hover,.hero-contact__actions a:focus-visible{transform:translateY(-3px);border-color:rgba(126,222,246,.7);background:rgba(255,255,255,.16)}
.hero-contact__actions span{grid-column:1;color:rgba(225,246,252,.7);font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.hero-contact__actions strong{grid-column:1;margin-top:3px;font-size:18px}.hero-contact__actions svg{grid-column:2;grid-row:1/span 2;align-self:center;width:20px;height:20px;color:#79daf1}
.hero-contact__hint{position:absolute;right:max(24px,calc((100vw - 1180px)/2));bottom:30px;z-index:2;display:inline-flex;align-items:center;gap:12px;color:rgba(255,255,255,.68);font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.hero-contact__hint span{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%}
.contact-directory{position:relative;z-index:1;padding:clamp(90px,12vw,150px) 0 clamp(100px,13vw,170px)}
.contact-directory__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.55fr);gap:10%;align-items:end;margin-bottom:clamp(50px,7vw,86px)}.contact-directory__intro h2{max-width:14ch;margin:20px 0 0}.contact-directory__intro>p{margin:0 0 5px;color:#3c5b70;font-size:clamp(16px,1.45vw,18px);line-height:1.68}
.contact-sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,38px)}
.contact-site{overflow:hidden;border:1px solid rgba(15,76,129,.16);border-radius:24px;background:rgba(255,255,255,.72);box-shadow:0 28px 72px -54px rgba(3,39,65,.65);backdrop-filter:blur(14px);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease}.contact-site:hover{transform:translateY(-6px);border-color:rgba(33,132,174,.32);box-shadow:0 34px 78px -48px rgba(3,39,65,.62)}
.contact-site__visual{position:relative;height:clamp(220px,25vw,330px);overflow:hidden;background:#0a3555}.contact-site__visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(2,18,32,.66))}.contact-site__visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.68) contrast(1.04);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s ease}.contact-site:hover .contact-site__visual img{transform:scale(1.035);filter:saturate(.82) contrast(1.03)}.contact-site__visual>span{position:absolute;z-index:1;right:20px;bottom:18px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.contact-site__body{padding:clamp(26px,4vw,42px)}.contact-site__heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.contact-site__heading>div>span{color:#648093;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.contact-site__heading h3{margin:4px 0 0;color:#082d49;font-size:clamp(30px,3.5vw,46px);letter-spacing:-.045em;line-height:1}
.contact-site__status{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;margin-top:5px;padding:8px 10px;border-radius:99px;background:#e8f7fb;color:#176c8d;font-size:10px;font-weight:800}.contact-site__status i{width:7px;height:7px;border-radius:50%;background:#2eae79;box-shadow:0 0 0 4px rgba(46,174,121,.12)}
.contact-site address,.contact-site__note{min-height:52px;margin:24px 0 28px;color:#496679;font-size:14px;font-style:normal;line-height:1.58}
.contact-schedule{margin:0;border-top:1px solid rgba(15,76,129,.14)}.contact-schedule>div{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(150px,1.1fr);gap:18px;padding:14px 0;border-bottom:1px solid rgba(15,76,129,.12)}.contact-schedule dt{color:#7890a0;font-size:12px;font-weight:650}.contact-schedule dd{margin:0;color:#274b62;font-size:13px;font-weight:700}
.contact-call{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;margin-top:30px;padding:14px 16px 14px 19px;border-radius:15px;background:#0b436e;color:#fff;box-shadow:0 14px 30px -20px rgba(3,42,70,.75);transition:transform .24s ease,background .24s ease}.contact-call:hover,.contact-call:focus-visible{transform:translateY(-2px);background:#082f50}.contact-call span{display:grid;gap:3px}.contact-call small{color:rgba(220,243,250,.7);font-size:11px;font-weight:700}.contact-call strong{font-size:20px}.contact-call svg{width:22px;height:22px;color:#77d9f1;transition:transform .24s ease}.contact-call:hover svg,.contact-call:focus-visible svg{transform:translateX(4px)}
.contact-office{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3.5vw,42px);align-items:center;margin-top:clamp(32px,5vw,58px);padding:clamp(28px,4vw,46px);border:1px solid rgba(15,76,129,.16);border-radius:22px;background:linear-gradient(120deg,rgba(255,255,255,.76),rgba(224,245,251,.7));box-shadow:0 24px 64px -52px rgba(3,39,65,.7)}.contact-office__icon{display:grid;width:58px;height:58px;place-items:center;border-radius:17px;background:#dff3f9;color:#0f648a}.contact-office__icon svg{width:25px;height:25px}.contact-office .eyebrow{margin-bottom:10px}.contact-office h3{max-width:27ch;margin:0;color:#0a304c;font-size:clamp(22px,2.5vw,32px);line-height:1.15}.contact-office>a{display:grid;grid-template-columns:1fr auto;min-width:205px;padding:12px 0 12px 22px;border-left:1px solid rgba(15,76,129,.17);color:#0f4c81}.contact-office>a small{grid-column:1;color:#718b9b;font-size:11px;font-weight:700}.contact-office>a strong{grid-column:1;margin-top:3px;font-size:20px}.contact-office>a svg{grid-column:2;grid-row:1/span 2;align-self:center;width:20px;height:20px;transition:transform .22s ease}.contact-office>a:hover svg,.contact-office>a:focus-visible svg{transform:translateX(4px)}
@media(max-width:900px){.contact-directory__intro{grid-template-columns:1fr;gap:25px}.contact-directory__intro>p{max-width:60ch}.contact-sites{grid-template-columns:1fr}.contact-site__visual{height:clamp(250px,52vw,400px)}}
@media(max-width:760px){.hero-contact{min-height:88svh;--hero-x:0%;--hero-scale:1}.hero-contact .hero-im-scrim{background:linear-gradient(180deg,rgba(2,11,22,.66),rgba(2,11,22,.35) 28%,rgba(2,11,22,.94))}.hero-contact__actions{display:grid;grid-template-columns:1fr 1fr}.hero-contact__actions a{min-width:0}.hero-contact__hint{display:none}.contact-directory{padding-top:76px}.contact-site{border-radius:18px}.contact-site__body{padding:25px 20px}.contact-site__heading{display:grid}.contact-site__status{justify-self:start}.contact-site address,.contact-site__note{min-height:0}.contact-schedule>div{grid-template-columns:1fr;gap:4px}.contact-office{grid-template-columns:auto 1fr}.contact-office>a{grid-column:1/-1;min-width:0;padding:18px 0 0;border-top:1px solid rgba(15,76,129,.17);border-left:0}}
@media(max-width:470px){.hero-contact__actions{grid-template-columns:1fr}.hero-contact__actions a{min-height:68px}.contact-site__visual{height:220px}.contact-office{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero-contact__actions a,.contact-site,.contact-site__visual img,.contact-call,.contact-call svg,.contact-office>a svg{transition:none}.hero-contact__actions a:hover,.contact-site:hover,.contact-call:hover{transform:none}}
/* Professional global footer v31 */
/* Equal internal rows keep both appointment cards perfectly aligned. */
@media (min-width:901px){
  .contact-site{display:grid;grid-template-rows:auto 1fr}
  .contact-site__body{display:grid;grid-template-rows:128px 72px 1fr auto}
  .contact-site address,.contact-site__note{min-height:0;margin:18px 0 20px;align-self:start}
  .contact-schedule>div{min-height:62px;align-items:center}
  .contact-call{align-self:end}
}
.site-footer.site-footer--pro{position:relative;overflow:hidden;padding:0;background:#031522;color:#dcebf2;isolation:isolate}
.site-footer--pro::before{content:'';position:absolute;z-index:-2;top:-45%;right:-15%;width:min(720px,72vw);aspect-ratio:1;border:1px solid rgba(92,198,230,.13);border-radius:50%;box-shadow:0 0 0 70px rgba(57,166,204,.025),0 0 0 140px rgba(57,166,204,.018)}
.site-footer--pro::after{content:'';position:absolute;z-index:-3;inset:0;background:radial-gradient(circle at 88% 8%,rgba(54,177,215,.18),transparent 30%),radial-gradient(circle at 4% 100%,rgba(14,87,132,.32),transparent 36%),linear-gradient(145deg,#041a2b,#03121e 72%)}
.footer-pro__signal{position:absolute;z-index:-1;top:0;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,#58c7e8 28%,#58c7e8 72%,transparent);box-shadow:0 0 20px rgba(88,199,232,.7)}
.footer-pro__lead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;padding-top:clamp(58px,7vw,88px);padding-bottom:clamp(54px,7vw,82px);border-bottom:1px solid rgba(193,226,238,.14)}
.footer-pro__kicker{display:inline-flex;align-items:center;gap:11px;margin-bottom:17px;color:#80d7ee;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.footer-pro__kicker::before{content:'';width:8px;height:8px;border-radius:50%;background:#58c7e8;box-shadow:0 0 0 5px rgba(88,199,232,.12),0 0 18px rgba(88,199,232,.5)}
.footer-pro__lead h2{max-width:15ch;margin:0;color:#fff;font-size:clamp(32px,4.4vw,58px);font-weight:750;letter-spacing:-.045em;line-height:1.03}
.footer-pro__cta{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;min-width:min(100%,310px);min-height:88px;padding:17px 19px 17px 23px;border:1px solid rgba(154,221,239,.25);border-radius:16px;background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(14px);transition:transform .25s ease,background .25s ease,border-color .25s ease}
.footer-pro__cta:hover,.footer-pro__cta:focus-visible{transform:translateY(-3px);border-color:rgba(128,215,238,.58);background:rgba(255,255,255,.12)}
.footer-pro__cta span{display:grid;gap:3px}.footer-pro__cta small{color:rgba(213,238,246,.62);font-size:10px;font-weight:700;letter-spacing:.05em}.footer-pro__cta strong{font-size:17px}.footer-pro__cta svg{width:22px;height:22px;color:#6ed0ea;transition:transform .25s ease}.footer-pro__cta:hover svg,.footer-pro__cta:focus-visible svg{transform:translateX(4px)}
.footer-pro__grid{display:grid;grid-template-columns:minmax(230px,1.35fr) .7fr 1fr 1fr;gap:clamp(34px,5vw,72px);padding-top:clamp(54px,7vw,78px);padding-bottom:clamp(56px,7vw,82px)}
.footer-pro__brand{padding-right:clamp(0px,3vw,40px)}.footer-pro__mark{display:flex;align-items:center;gap:4px;width:54px;height:20px;margin-bottom:27px}.footer-pro__mark i{display:block;width:4px;border-radius:99px;background:#67cce7;box-shadow:0 0 11px rgba(103,204,231,.48)}.footer-pro__mark i:nth-child(1){height:8px}.footer-pro__mark i:nth-child(2){height:20px}.footer-pro__mark i:nth-child(3){height:12px}
.footer-pro__brand p{max-width:31ch;margin:0;color:rgba(216,235,242,.66);font-size:14px;line-height:1.7}.footer-pro__meta{display:flex;align-items:center;gap:9px;margin-top:23px;color:#8dc8d9;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.footer-pro__meta i{width:3px;height:3px;border-radius:50%;background:#5fc8e5}
.footer-pro__grid h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px;color:#fff;font-size:12px;font-weight:750;letter-spacing:.04em}.footer-pro__grid h3 span{color:#5fbcd7;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.footer-pro__nav a{position:relative;width:max-content;margin:0 0 12px;padding-bottom:2px;color:rgba(221,238,244,.67);font-size:13px;transition:color .2s ease,transform .2s ease}.footer-pro__nav a::after{content:'';position:absolute;right:0;bottom:0;left:0;height:1px;background:#66cce7;transform:scaleX(0);transform-origin:right;transition:transform .24s ease}.footer-pro__nav a:hover,.footer-pro__nav a:focus-visible{color:#fff;transform:translateX(3px)}.footer-pro__nav a:hover::after,.footer-pro__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.footer-pro__site address,.footer-pro__site>p{min-height:48px;margin:0;color:rgba(216,235,242,.62);font-size:13px;font-style:normal;line-height:1.65}.footer-pro__phone{display:grid;gap:3px;width:max-content;margin-top:23px;color:#fff}.footer-pro__phone small{color:#71cbe3;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.footer-pro__phone strong{font-size:17px;letter-spacing:.015em}.footer-pro__phone:hover strong,.footer-pro__phone:focus-visible strong{color:#8de0f3}
.footer-pro__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;border-top:1px solid rgba(193,226,238,.13)}.footer-pro__bottom p{margin:0;color:rgba(213,232,239,.46);font-size:11px}.footer-pro__emergency{display:flex;align-items:center;gap:8px}.footer-pro__emergency>span{width:6px;height:6px;border-radius:50%;background:#f0a96c;box-shadow:0 0 0 4px rgba(240,169,108,.1)}.footer-pro__emergency a{display:inline;color:#fff;font-weight:800;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
@media(max-width:900px){.footer-pro__grid{grid-template-columns:1.2fr .8fr 1fr}.footer-pro__site:last-child{grid-column:3}.footer-pro__brand{grid-row:1/span 2}.footer-pro__lead{grid-template-columns:1fr auto}}
@media(max-width:680px){.footer-pro__lead{grid-template-columns:1fr;gap:30px}.footer-pro__cta{min-width:0}.footer-pro__grid{grid-template-columns:1fr 1fr;gap:45px 25px}.footer-pro__brand{grid-column:1/-1;grid-row:auto;padding-right:0}.footer-pro__site:last-child{grid-column:auto}.footer-pro__bottom{align-items:flex-start;flex-direction:column;justify-content:center;gap:8px;padding-top:20px;padding-bottom:20px}}
@media(max-width:420px){.footer-pro__grid{grid-template-columns:1fr}.footer-pro__site:last-child{grid-column:auto}.footer-pro__lead h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.footer-pro__cta,.footer-pro__cta svg,.footer-pro__nav a,.footer-pro__nav a::after{transition:none}.footer-pro__cta:hover,.footer-pro__nav a:hover{transform:none}}
/* Contact fullscreen and footer collision fixes v32 */
.hero-im.hero-contact{min-height:100vh;min-height:100svh}
.footer-pro__lead>*,.footer-pro__grid>*{min-width:0}
.footer-pro__grid{grid-template-columns:minmax(210px,1.25fr) minmax(110px,.62fr) repeat(2,minmax(175px,1fr));gap:clamp(28px,3.6vw,54px)}
.footer-pro__grid h3{align-items:flex-start;flex-wrap:wrap;justify-content:flex-start;row-gap:7px;overflow-wrap:anywhere}
.footer-pro__grid h3 span{flex:0 0 100%}
.footer-pro__meta{flex-wrap:wrap}
.footer-pro__nav a,.footer-pro__site address,.footer-pro__site>p,.footer-pro__phone{max-width:100%;overflow-wrap:anywhere}
@media(max-width:1100px){
  .footer-pro__lead{grid-template-columns:minmax(0,1fr) minmax(270px,310px);gap:32px}
  .footer-pro__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:50px clamp(34px,7vw,72px)}
  .footer-pro__brand{grid-column:auto;grid-row:auto;padding-right:0}
  .footer-pro__site:last-child{grid-column:auto}
}
@media(max-width:760px){
  .hero-im.hero-contact{min-height:100vh;min-height:100svh}
  .footer-pro__lead{grid-template-columns:1fr;gap:30px}
}
@media(max-width:600px){
  .footer-pro__grid{grid-template-columns:1fr;gap:42px}
  .footer-pro__brand,.footer-pro__site:last-child{grid-column:auto}
  .footer-pro__grid h3 span{flex:0 0 auto;margin-left:5px}
  .footer-pro__site address,.footer-pro__site>p{min-height:0}
}
/* Footer explorer navigation fix v33 */
.footer-pro__nav{display:flex;flex-direction:column;align-items:flex-start}
.footer-pro__nav h3{width:100%;margin-bottom:12px}
.footer-pro__nav a{display:block;width:max-content;max-width:100%;margin:0;padding:3px 0;line-height:1.45}
/* Simplified footer and mobile navigation v34 */
.footer-pro__signal,.footer-pro__lead{display:none!important}
.site-footer.site-footer--pro{border-top:0}
.footer-pro__grid{padding-top:clamp(62px,8vw,96px)}
@media(max-width:760px){
  .site-header{padding:12px 0}
  .site-header .container{
    width:52px;
    min-height:52px;
    margin-right:16px;
    margin-left:auto;
    padding:4px;
    justify-content:center;
    border-radius:16px;
  }
  .site-header .nav-toggle{
    position:relative;
    z-index:2;
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border:0;
    border-radius:13px;
    overflow:hidden;
  }
  .nav-toggle svg{opacity:0}
  .nav-toggle::before,.nav-toggle::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:19px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .28s cubic-bezier(.16,1,.3,1),background .2s ease;
  }
  .nav-toggle::before{transform:translate(-50%,-50%) translateY(-4px)}
  .nav-toggle::after{transform:translate(-50%,-50%) translateY(4px)}
  .nav-toggle[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
  .nav-toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .site-header .nav-links{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    bottom:auto;
    left:auto;
    width:min(335px,calc(100vw - 32px));
    max-height:calc(100svh - 100px);
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle::before,.nav-toggle::after{transition:none}
}

/* --- Actions du hero --- */
.hero-lede {
  max-width: 46ch;
  margin: 26px 0 0;
  color: rgba(233, 243, 250, 0.82);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.62;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero-call {
  display: grid;
  gap: 3px;
  min-width: 236px;
  padding: 17px 22px 15px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: #fff;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.hero-call:hover,
.hero-call:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #0B2F4F;
  transform: translateY(-2px);
}
.hero-call__top {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.76;
}
.hero-call__num {
  font-size: clamp(21px, 1.9vw, 25px);
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.12;
}
.hero-call__act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.86;
}
.hero-call__act svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.22s ease;
}
.hero-call:hover .hero-call__act svg { transform: translateX(3px); }

@media (max-width: 760px) {
  .hero-lede { margin-top: 20px; }
  .hero-actions { gap: 11px; margin-top: 26px; width: 100%; }
  .hero-call { flex: 1 1 100%; min-width: 0; padding: 15px 18px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-call, .hero-call__act svg { transition: none; }
  .hero-call:hover { transform: none; }
}
/* --- Sécurité titres étroits --- */
/* Le titre ne doit jamais pouvoir sortir de l'écran, quelle que soit la
   police effectivement chargée : on autorise la césure et on réduit le
   corps sur les écrans les plus étroits. */
.hero-im h1,
.hero-im--full h1,
h1, h2 {
  overflow-wrap: break-word;
  word-break: normal;
}
@media (max-width: 430px) {
  .hero-im--full h1 { font-size: clamp(28px, 8.2vw, 36px); }
  .hero-lede { font-size: 15px; }
}
@media (max-width: 360px) {
  .hero-im--full h1 { font-size: 28px; }
}

/* --- Hauteur des heros intérieurs --- */
/* Les sous-pages n'ont plus de hero : elles commencent par leur titre, comme
   un document qu'on ouvre. Seul l'accueil garde une image plein écran, ce qui
   lui donne tout son poids. La structure HTML est inchangée : retirer ce bloc
   restitue les heros photographiques. */

.hero-im:not(.hero-im--full) {
  display: block;
  min-height: 0;
  background: transparent;
  color: var(--fg);
  overflow: visible;
}

/* image, voile, décor et invitations à défiler : plus lieu d'être */
.hero-im:not(.hero-im--full) .hero-im-img,
.hero-im:not(.hero-im--full) .hero-im-scrim,
.hero-im:not(.hero-im--full) .hero-im-hint,
.hero-im:not(.hero-im--full) .hero-stats,
.hero-im:not(.hero-im--full) .hero-contact__hint,
.hero-im:not(.hero-im--full)::before,
.hero-im:not(.hero-im--full)::after {
  display: none;
}

.hero-im:not(.hero-im--full) .container {
  padding-top: 62px;
  padding-bottom: 6px;
}

.hero-im:not(.hero-im--full) .eyebrow {
  border-top-color: var(--primary);
  color: var(--primary);
}

.hero-im:not(.hero-im--full) h1 {
  max-width: 20ch;
  color: var(--fg);
  font-size: clamp(31px, 3.7vw, 50px);
  line-height: 1.06;
}

.hero-im:not(.hero-im--full) .lead {
  max-width: 64ch;
  margin: 16px 0 0;
  color: var(--fg-muted);
  font-size: 16.5px;
  line-height: 1.62;
}

/* Contact : les deux lignes de rendez-vous restent, en version claire. */
.hero-contact .hero-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.hero-contact .hero-contact__actions a {
  display: grid;
  gap: 2px;
  min-width: 226px;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}
.hero-contact .hero-contact__actions a:hover,
.hero-contact .hero-contact__actions a:focus-visible { background: #0c3d68; }
.hero-contact .hero-contact__actions a span { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.82; }
.hero-contact .hero-contact__actions a strong { font-size: 21px; font-weight: 700; }
.hero-contact .hero-contact__actions a svg { display: none; }

@media (max-width: 760px) {
  .hero-im:not(.hero-im--full) .container { padding-top: 40px; }
  .hero-im:not(.hero-im--full) h1 { max-width: none; }
  .hero-contact .hero-contact__actions a { flex: 1 1 100%; min-width: 0; }
}

/* --- Lien vers les examens, fiches praticiens --- */
.prat-lien { margin: 14px 0 0; }
.prat-lien a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(15, 76, 129, 0.35);
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.prat-lien a::after { content: '\2192'; }
.prat-lien a:hover, .prat-lien a:focus-visible { border-bottom-color: var(--primary); }
/* --- Navigation entre praticiens --- */
/* Barre placée juste sous le titre : le patient voit les autres praticiens
   sans avoir a parcourir la fiche entiere. Compacte pour ne pas repousser
   le contenu de la page. */
.prat-nav {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.prat-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.prat-nav a { text-decoration: none; }

.prat-nav a.prat-nav__prev,
.prat-nav a.prat-nav__next {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.prat-nav a.prat-nav__next { justify-content: flex-end; text-align: right; }
.prat-nav a.prat-nav__prev:hover, .prat-nav a.prat-nav__next:hover,
.prat-nav a.prat-nav__prev:focus-visible, .prat-nav a.prat-nav__next:focus-visible {
  border-color: var(--primary);
  background: var(--surface);
}
.prat-nav__prev span, .prat-nav__next span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.prat-nav__prev strong, .prat-nav__next strong { font-size: 15px; font-weight: 600; }
.prat-nav__prev span::before { content: '←\00a0\00a0'; }
.prat-nav__next span::after  { content: '\00a0\00a0→'; }

/* « a.prat-nav__all » et non « .prat-nav__all » : sinon « .prat-nav a »
   l'emporte en specificite et le texte redevient gris sur le fond bleu. */
.prat-nav a.prat-nav__all {
  display: flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.prat-nav a.prat-nav__all:hover,
.prat-nav a.prat-nav__all:focus-visible { background: #0c3d68; color: #fff; }

@media (max-width: 700px) {
  .prat-nav__inner { grid-template-columns: 1fr 1fr; gap: 8px; }
  .prat-nav a.prat-nav__all { grid-column: 1 / -1; order: 3; justify-content: center; }
  .prat-nav a.prat-nav__prev, .prat-nav a.prat-nav__next { padding: 10px 14px; }
  .prat-nav__prev strong, .prat-nav__next strong { font-size: 14px; }
  /* sur telephone la carte tient sur une ligne : seule la fleche subsiste,
     le libelle reste lu par les lecteurs d ecran. */
  .prat-nav__prev span, .prat-nav__next span { font-size: 0; letter-spacing: 0; }
  .prat-nav__prev span::before, .prat-nav__next span::after { font-size: 15px; }
}

/* Essai sur la page d'accueil seulement : le bloc de texte du hero devient le
   plan le plus proche du lecteur. Il prend du retard moins vite que l'image,
   et semble donc flotter devant elle au lieu d'y être collé.
   La règle est volontairement restreinte à .hero-im--full pour ne pas toucher
   les onze autres pages tant que l'effet n'est pas validé. */
.hero-im--full > .container[data-parallax-layer] {
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-im--full > .container[data-parallax-layer] { transform: none; }
}