/* ============================================================
   NEUROCHIRURGIE MARSEILLE — Design system
   Signature : la mire de repérage stéréotaxique (reticle), motif
   emprunté à la neuronavigation, utilisée comme marqueur de
   précision partout dans l'interface.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Palette */
  --ink:        #101A2B; /* navy dominant */
  --ink-2:      #1B2942; /* navy secondaire, cartes sur fond sombre */
  --ink-3:      #263A5C; /* navy clair, bordures sur fond sombre */
  --paper:      #F5F6F3; /* fond clair, froid, non crème */
  --paper-2:    #EAEDE8; /* fond clair secondaire */
  --signal:     #4F9B7B; /* vert clinique — fluorescence / accent unique */
  --signal-dim: rgba(79,155,123,.14);
  --signal-ink: #2F6B50;
  --slate:      #55606F; /* texte moyen sur fond clair */
  --silver:     #A6B1C2; /* texte moyen sur fond sombre */
  --white:      #FFFFFF;
  --line:       rgba(16,26,43,.10);
  --line-dark:  rgba(255,255,255,.12);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --container: 1140px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; letter-spacing: -0.01em; }
p{ margin:0 0 1em; }

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Reticle signature mark ---------- */
.reticle{
  display:inline-block; width:1em; height:1em;
  position:relative; vertical-align:-0.12em;
}
.reticle svg{ width:100%; height:100%; display:block; }

.eyebrow{
  display:flex; align-items:center; gap:.5em;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal-ink);
}
.eyebrow .reticle{ color: var(--signal); flex-shrink:0; }
.on-dark .eyebrow{ color: var(--signal); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:.65em; color: var(--white); }
.brand-mark{ width:30px; height:30px; color: var(--signal); }
.brand-text{ font-family: var(--font-display); font-size: 18px; line-height:1.15; }
.brand-text b{ display:block; font-weight:700; }
.brand-text span{ display:block; font-size: 11px; font-family: var(--font-mono); letter-spacing:.08em; color: var(--silver); text-transform: uppercase; }

.main-nav{ display:flex; align-items:center; gap: 20px; }
.main-nav > a, .nav-drop-trigger{
  font-size: 13.5px; color: var(--silver); font-weight:500;
  position: relative; padding: 6px 2px;
  transition: color .15s ease;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active, .nav-drop-trigger:hover{ color: var(--white); }
.main-nav > a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--signal);
}
.nav-cta{
  background: var(--signal); color: var(--ink) !important; padding: 9px 16px !important;
  border-radius: 3px; font-weight:600 !important; white-space:nowrap;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:#5FB08A; color:var(--ink) !important; }

.nav-toggle{ display:none; background:none; border:none; color:var(--white); cursor:pointer; padding:4px; }

/* Dropdown (desktop) */
.nav-drop{ position:relative; }
.nav-drop-trigger{ display:flex; align-items:center; gap:5px; background:none; border:none; font-family:var(--font-body); cursor:pointer; }
.nav-drop-trigger svg{ transition: transform .15s ease; opacity:.8; }
.nav-drop.active .nav-drop-trigger{ color: var(--white); }
.nav-drop.active .nav-drop-trigger::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: var(--signal); }
.nav-drop-menu{
  position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--ink-2); border:1px solid var(--line-dark); border-radius:4px;
  min-width: 220px; padding: 8px; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a{ display:block; padding: 9px 12px; font-size:13.5px; color: var(--silver); border-radius:3px; white-space:nowrap; }
.nav-drop-menu a:hover, .nav-drop-menu a.active{ background: var(--ink-3); color: var(--white); }

/* Mobile nav drawer */
.mobile-nav{ display:none; }

@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-nav{
    display: block; max-height:0; overflow:hidden; background: var(--ink-2);
    border-top: 1px solid var(--line-dark);
    transition: max-height .25s ease;
  }
  .mobile-nav.open{ max-height: 80vh; overflow-y:auto; }
  .mobile-nav a, .mobile-nav-label{ display:block; padding: 14px 28px; font-size:15px; color: var(--silver); border-bottom:1px solid var(--line-dark); }
  .mobile-nav a.active{ color: var(--signal); }
  .mobile-nav-group{ background: rgba(255,255,255,.02); }
  .mobile-nav-label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--silver); padding-bottom:6px; border-bottom:none; }
  .mobile-nav-group a{ padding-left:40px; }
  .mobile-cta{ margin: 16px 28px; text-align:center; border-radius:3px; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--ink); color: var(--white);
  position: relative; overflow: hidden;
  padding: 96px 0 84px;
}
.hero-reticle{
  position:absolute; top: -60px; right: -60px; width: 560px; height: 560px;
  color: var(--ink-3); opacity: .55;
  animation: driftReticle 34s ease-in-out infinite;
}
@keyframes driftReticle{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(-18px, 14px) rotate(6deg); }
}
.hero-inner{ position:relative; z-index:2; max-width: 680px; }
.hero h1{ font-size: clamp(34px, 5vw, 54px); line-height:1.08; margin: 14px 0 22px; }
.hero p.lead{ font-size: 18px; color: var(--silver); max-width: 540px; }
.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: 13px 22px; border-radius: 3px; font-weight:600; font-size:14.5px;
  border: 1px solid transparent; cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background: var(--signal); color: var(--ink); }
.btn-primary:hover{ background:#5FB08A; transform: translateY(-1px); }
.btn-ghost{ border-color: var(--line-dark); color: var(--white); }
.btn-ghost:hover{ border-color: var(--signal); color: var(--signal); }
.btn-ghost-dark{ border-color: var(--line); color: var(--ink); }
.btn-ghost-dark:hover{ border-color: var(--signal-ink); color: var(--signal-ink); }

/* quick-links row under hero */
.quicklinks{ background: var(--ink-2); border-top:1px solid var(--line-dark); }
.quicklinks .wrap{ display:flex; flex-wrap:wrap; gap: 2px; padding: 0; }
.quicklinks a{
  flex: 1 1 150px; text-align:center; padding: 16px 10px;
  font-size: 13px; color: var(--silver); font-weight:500;
  border-right: 1px solid var(--line-dark);
  transition: background .15s ease, color .15s ease;
}
.quicklinks a:last-child{ border-right:none; }
.quicklinks a:hover{ background: var(--ink); color: var(--white); }

/* ---------- Sections ---------- */
section{ padding: 78px 0; }
.section-alt{ background: var(--paper-2); }
.section-dark{ background: var(--ink); color: var(--white); }
.section-head{ max-width: 720px; margin-bottom: 42px; }
.section-head h2{ font-size: clamp(26px, 3.4vw, 36px); margin-top:12px; }
.section-head p{ color: var(--slate); font-size:16px; margin-top:12px; }
.section-dark .section-head p{ color: var(--silver); }

.lede{ font-size:17px; color: var(--slate); max-width: 760px; }

/* ---------- Grids & Cards ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 860px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--white); border:1px solid var(--line); border-radius: 4px;
  padding: 26px; transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color: var(--signal); transform: translateY(-2px); }
.card h3{ font-size:19px; margin-bottom:8px; }
.card .card-tag{
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--signal-ink); background: var(--signal-dim); display:inline-block;
  padding: 3px 8px; border-radius:2px; margin-bottom:12px;
}

/* Pathology cards link */
.path-card{ display:block; }
.path-card p{ color: var(--slate); font-size:14.5px; margin:0; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 860px){ .team-grid{ grid-template-columns: 1fr; } }
.doc-card{ background: var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.doc-photo{ aspect-ratio: 1/1; overflow:hidden; background: var(--ink-2); position:relative; }
.doc-photo img{ width:100%; height:100%; object-fit:cover; }
.doc-body{ padding: 26px 26px 30px; }
.doc-body h3{ font-size:22px; }
.doc-body .role{ font-family: var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--signal-ink); margin-top:6px; display:block; }
.doc-body p{ color: var(--slate); font-size:15px; margin-top:16px; }
.doc-bio{ margin-top:16px; }
.doc-bio summary{ cursor:pointer; font-weight:600; font-size:14px; color: var(--ink); list-style:none; display:flex; align-items:center; gap:.5em; }
.doc-bio summary::-webkit-details-marker{ display:none; }
.doc-bio summary .reticle{ transition: transform .2s ease; color: var(--signal); }
.doc-bio[open] summary .reticle{ transform: rotate(45deg); }
.doc-bio-text{ padding-top:14px; color: var(--slate); font-size:14.5px; }
.doc-bio-text p{ margin-bottom: .9em; }

/* ---------- Practical info ---------- */
.info-block{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:26px 28px; margin-bottom:20px; }
.info-block h3{ font-size:18px; margin-bottom:14px; display:flex; align-items:center; gap:.5em; }
.info-block h3 .reticle{ color:var(--signal); }
.contact-row{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-top:6px; }
@media (max-width: 860px){ .contact-row{ grid-template-columns:1fr; } }
.contact-item{ border-top:1px solid var(--line); padding-top:16px; }
.contact-item h4{ font-family:var(--font-body); font-weight:700; font-size:15px; }
.contact-item a, .contact-item div{ font-size:14.5px; color:var(--slate); }
.emergency{ background: var(--ink); color:var(--white); border-radius:4px; padding:24px 28px; margin-bottom:20px; }
.emergency .reticle{ color: var(--signal); }
.emergency b{ font-size:20px; letter-spacing:.02em; }

.hospital-card{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:22px; }
.hospital-card h4{ font-size:16px; margin-bottom:6px; }
.hospital-card p{ color:var(--slate); font-size:14px; margin:0; }
.hospital-card .card-tag{ margin-top:12px; display:inline-block; }
.hospital-photo{ aspect-ratio: 16/10; overflow:hidden; }
.hospital-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Detail pages: pathology / technique triptych ---------- */
.detail-card{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px; margin-bottom:22px; }
.detail-card h3{ font-size:21px; margin-bottom: 16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.triptych{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
@media (max-width: 860px){ .triptych{ grid-template-columns:1fr; } }
.triptych-col .t-label{
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--signal-ink); display:flex; align-items:center; gap:.4em; margin-bottom:8px;
}
.triptych-col p, .triptych-col ul{ font-size:14.5px; color: var(--slate); }
.triptych-col ul{ list-style:none; }
.triptych-col li{ position:relative; padding-left:16px; margin-bottom:6px; }
.triptych-col li::before{ content:"·"; position:absolute; left:2px; color: var(--signal); font-weight:700; }

.category-nav{ display:flex; gap:10px; margin-bottom: 34px; flex-wrap:wrap; }
.category-nav a{
  font-size:13.5px; font-weight:500; padding:9px 16px; border-radius:3px;
  border:1px solid var(--line); color: var(--slate);
}
.category-nav a:hover, .category-nav a.active{ border-color: var(--signal); color: var(--signal-ink); background: var(--signal-dim); }

/* Médias sur les cartes techniques */
.tech-media{
  margin: -28px -28px 22px; overflow:hidden; border-radius: 4px 4px 0 0;
  background: var(--ink-2); max-height: 260px; display:flex; align-items:center; justify-content:center;
}
.tech-media img{ width:100%; height:100%; object-fit: cover; max-height:260px; }
.tech-media-logo{ background: var(--white); padding: 24px 0; max-height:180px; }
.tech-media-logo img{ object-fit:contain; max-height:130px; width:auto; margin:0 auto; }
.tech-media-illustration{ background: var(--paper); max-height:280px; }
.tech-media-illustration img{ object-fit:contain; max-height:280px; }

/* ---------- Research / associations ---------- */
.assoc-card{ background: var(--white); border:1px solid var(--line); border-radius:4px; padding: 30px; }
.assoc-card h3{ font-size:20px; margin-bottom:6px; }
.assoc-card .founded{ font-family: var(--font-mono); font-size:12px; color: var(--signal-ink); text-transform:uppercase; letter-spacing:.06em; }
.assoc-card p{ color:var(--slate); font-size:14.5px; margin-top:14px; }
.assoc-card ul{ list-style:none; margin-top:12px; }
.assoc-card li{ position:relative; padding-left:18px; margin-bottom:8px; color:var(--slate); font-size:14.5px; }
.assoc-card li::before{ content:"·"; position:absolute; left:2px; color: var(--signal); font-weight:700; }

.legal-list{ margin-top: 20px; }
.legal-list li{ position:relative; padding-left:20px; margin-bottom:10px; color:var(--slate); font-size:15px; }
.legal-list li::before{ content:"·"; position:absolute; left:3px; color: var(--signal); font-weight:700; }

.riph-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; }
@media (max-width:860px){ .riph-grid{ grid-template-columns:1fr; } }
.riph-card{ border:1px solid var(--line); border-radius:4px; padding:20px; background:var(--white); }
.riph-card .cat{ font-family:var(--font-mono); font-size:12px; color:var(--signal-ink); text-transform:uppercase; }
.riph-card p{ font-size:14px; color:var(--slate); margin-top:8px; }

/* Tableau études en cours */
.studies-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:4px; background:var(--white); }
.studies-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:900px; }
.studies-table thead th{
  text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--signal-ink); background:var(--signal-dim); padding:12px 16px; border-bottom:1px solid var(--line);
}
.studies-table td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--slate); vertical-align:top; }
.studies-table tbody tr:last-child td{ border-bottom:none; }
.studies-table .acronym{ font-weight:700; color:var(--ink); white-space:nowrap; }
.studies-table .nct{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--slate); font-weight:400; margin-top:2px; }
.studies-table .study-title{ min-width:280px; }
.status-badge{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:2px; white-space:nowrap; }
.status-active{ background:var(--signal-dim); color:var(--signal-ink); }
.status-closed{ background:var(--paper-2); color:var(--slate); }

/* Publications */
.pub-item{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:22px 24px; margin-bottom:14px; position:relative; }
.pub-item h4{ font-size:15.5px; padding-right:90px; margin-bottom:8px; line-height:1.4; }
.pub-authors{ font-size:13.5px; color:var(--slate); margin-bottom:4px; }
.pub-journal{ font-size:13px; color:var(--slate); font-style:italic; margin:0; }
.pub-pmid{ font-family:var(--font-mono); font-style:normal; font-size:11.5px; color:var(--signal-ink); margin-left:8px; }
.pub-tag{
  position:absolute; top:22px; right:24px; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--signal-ink); background:var(--signal-dim); padding:4px 9px; border-radius:2px;
}

/* ---------- News ---------- */
.news-item{ display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.news-item:last-child{ border-bottom:none; }
.news-icon{ width:38px; height:38px; flex-shrink:0; color:var(--signal); }
.news-body h4{ font-size:16px; margin-bottom:4px; }
.news-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--signal-ink); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; display:block; }
.news-body p{ font-size:14.5px; color:var(--slate); margin:0 0 6px; }
.news-body a.src-link{ font-size:13.5px; color:var(--signal-ink); font-weight:600; word-break: break-all; }
.news-body a.src-link:hover{ text-decoration:underline; }

.tab-group{ margin-top:10px; }
.tab-title{ display:flex; align-items:center; gap:.5em; font-size:15px; font-weight:700; margin: 30px 0 4px; }

/* ---------- Vidéos intégrées (reportages) ---------- */
.video-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 760px){ .video-grid{ grid-template-columns: 1fr; } }
.video-card{ background: var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden; padding-bottom:18px; }
.video-embed{ position:relative; width:100%; aspect-ratio: 16/9; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card h4{ font-size:15px; margin:8px 20px 0; }
.video-card .news-meta{ margin:14px 20px 0; }
.video-card p{ font-size:13.5px; color:var(--slate); margin:6px 20px 0; }

.video-thumb{ position:relative; display:block; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease; }
.video-thumb:hover img{ transform: scale(1.03); }
.video-thumb .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.video-thumb .watch-badge{
  position:absolute; bottom:10px; right:10px; background: rgba(16,26,43,.82); color:#fff;
  font-family: var(--font-mono); font-size:11px; padding:5px 10px; border-radius:3px;
}
.tab-title .reticle{ color:var(--signal); }
.tab-title:first-child{ margin-top:0; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--ink); color:var(--white); padding: 60px 0; }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h2{ font-size: 26px; max-width:520px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: var(--silver); padding: 50px 0 30px; border-top:1px solid var(--line-dark); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h5{ color:var(--white); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:9px; font-size:14px; }
.footer-grid a:hover{ color:var(--white); }
.footer-bottom{ margin-top: 40px; padding-top: 22px; border-top:1px solid var(--line-dark); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-credit{ margin-top:14px; font-size:12px; color: var(--silver); text-align:center; }
.footer-credit a{ color: var(--silver); text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color: var(--white); }

/* ---------- Theme switch (démo client, à retirer avant mise en ligne) ---------- */
.theme-switch{
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: var(--signal); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding: 10px 16px; border-radius: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .15s ease;
}
.theme-switch:hover{ transform: translateY(-2px); }

/* ---------- Utility ---------- */

.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.badge{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); border:1px solid var(--line); padding:5px 10px; border-radius:2px; }

/* ---------- Modale de prise de rendez-vous (Doctolib intégré en iframe) ---------- */
.rdv-modal{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden; opacity: 0;
  transition: opacity .18s ease, visibility .18s ease;
}
.rdv-modal.open{ visibility: visible; opacity: 1; }
.rdv-modal-backdrop{
  position: absolute; inset: 0; background: rgba(16,26,43,.62); backdrop-filter: blur(2px);
}
.rdv-modal-panel{
  position: relative; background: var(--white); border-radius: 6px;
  width: 100%; max-width: 560px; max-height: 86vh;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.rdv-modal.open .rdv-modal-panel{ transform: translateY(0) scale(1); }
.rdv-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none; background: var(--paper-2);
  color: var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.rdv-modal-close:hover{ background: var(--signal-dim); color: var(--signal-ink); }

.rdv-modal-select{ padding: 40px 32px 32px; }
.rdv-modal-select h3{ font-size:22px; display:flex; align-items:center; gap:.5em; }
.rdv-modal-select h3 .reticle{ color: var(--signal); }
.rdv-modal-select > p{ color: var(--slate); font-size:14.5px; margin: 12px 0 22px; }
.rdv-doctor-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  width:100%; text-align:left; padding:16px 18px; margin-bottom:12px;
  border:1px solid var(--line); border-radius:5px; background: var(--paper);
  cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.rdv-doctor-btn:hover{ border-color: var(--signal); background: var(--signal-dim); }
.rdv-doctor-btn span{ font-weight:700; font-size:15.5px; color: var(--ink); }
.rdv-doctor-btn small{ font-size:12.5px; color: var(--slate); }

.rdv-modal-frame-wrap{ display:flex; flex-direction:column; flex:1; min-height: 70vh; }
.rdv-modal-frame-wrap[hidden]{ display:none; }
.rdv-modal-back{
  display:flex; align-items:center; gap:.4em; align-self:flex-start;
  margin: 16px 20px 0; padding: 8px 4px; border:none; background:none; cursor:pointer;
  font-size:13.5px; font-weight:600; color: var(--slate);
}
.rdv-modal-back:hover{ color: var(--signal-ink); }
#rdv-modal-iframe{ flex:1; width:100%; border:0; }

@media (max-width: 600px){
  .rdv-modal{ padding: 0; }
  .rdv-modal-panel{ max-width:none; width:100%; height:100%; max-height:none; border-radius:0; }
  .rdv-modal-frame-wrap{ min-height: 0; }
}