/* ═══════════════════════════════════════════════════════════════════════
   Marianne Copilote — Radiologie · Landing publique
   Design source : « Site sobre moderne professionnel » (Claude Design),
   variante d'accueil 1a (classique centré). CSS repris fidèlement, framework
   de prototypage retiré, utilitaires réécrits en clair.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées ──────────────────────────────────────────────
   Aucune requête vers un CDN tiers : la page affirme « rien ne sort de
   France », elle ne charge donc rien depuis Google Fonts au visitage. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900; /* police variable : un seul fichier couvre tout */
  font-display: swap;
  src: url("fonts/hanken-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/spectral-300.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/spectral-400.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/spectral-400-italic.woff2") format("woff2");
}

/* ── Jetons (repris tels quels du design) ───────────────────────────────── */
:root {
  --bg: #fbfcfd;
  --bg2: #f3f6f9;
  --ink: #1b2733;
  --ink2: #5c6b78;
  --line: #e4e9ee;
  --accent: #33618f;
  --accent2: color-mix(in oklab, var(--accent), #081018 25%);
  --tint: color-mix(in srgb, var(--accent), #fff 92%);
  --tint2: color-mix(in srgb, var(--accent), #fff 80%);
  --ring: color-mix(in srgb, var(--accent), transparent 72%);
  --rouge: #b5443c;
  /* Mosaïque du logo (nuances de l'accent) */
  --m1: color-mix(in oklab, var(--accent), #0b1626 42%);
  --m2: color-mix(in oklab, var(--accent), #0b1626 20%);
  --m4: color-mix(in oklab, var(--accent), #fff 24%);
  --m5: color-mix(in oklab, var(--accent), #fff 44%);
  --sp: 124px; /* respiration verticale des sections (rythme « aéré ») */
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Utilitaires (équivalents des atomics du prototype) ─────────────────── */
.cx { max-width: 1140px; margin: 0 auto; padding: 0 36px; }
.fx { display: flex; }
.col { display: flex; flex-direction: column; }
.ac { align-items: center; }
.jb { justify-content: space-between; }
.jc { justify-content: center; }
.wrap { flex-wrap: wrap; }
.tc { text-align: center; }
.m0 { margin: 0; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.w100 { width: 100%; }
.gap8 { gap: 8px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.gap14 { gap: 14px; }
.gap18 { gap: 18px; }
.gap20 { gap: 20px; }
.gap22 { gap: 22px; }
.gap24 { gap: 24px; }
.mut { color: var(--ink2); }
.fs14 { font-size: 14px; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hrow { height: 64px; }
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.mark { width: 24px; height: 24px; display: block; flex-shrink: 0; object-fit: contain; }
/* Logo Marianne Copilote (M dégradé) rendu via <img class="mark"> — même emblème que l'app + le compagnon. */
.lg2 { font-weight: 500; color: var(--ink2); }
.lgr {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink2);
  border-left: 1px solid var(--line);
  padding-left: 10px;
  line-height: 1.6;
}
/* Cocarde tricolore minimaliste (badge + section souveraineté) */
.tri { display: flex; gap: 2px; flex-shrink: 0; }
.tq { width: 5px; height: 5px; display: block; }
.t1 { background: var(--accent); }
.t2 { background: #fff; border: 1px solid var(--line); }
.t3 { background: var(--rouge); }
.nvl {
  color: var(--ink2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.nvl:hover { color: var(--ink); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 13px 22px;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-p { background: var(--accent); color: #fff; }
.btn-p:hover { background: var(--accent2); }
.btn-s { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-s:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 9px; }

/* ── Typographie ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--tint);
  color: var(--accent2);
  border: 1px solid var(--tint2);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 600;
}
.h1 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 300;
  font-size: clamp(46px, 6vw, 84px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
}
.h2 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.h3 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.lead { font-size: 20px; line-height: 1.62; color: var(--ink2); margin: 0; }
.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sect { padding: var(--sp) 0; }
.band { background: var(--bg2); }
.hero { padding: 110px 0 92px; }
/* Réassurance essai : sous les boutons du héro et du CTA final */
.trial {
  font-size: 14px;
  color: var(--ink2);
  margin: 0;
}
.trial .tdot { padding: 0 4px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
}
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
.stp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-size: 17.5px;
  max-width: 300px;
  margin: 0 auto;
}

/* Emplacement de capture d'écran (image à fournir) */
.ph {
  background: repeating-linear-gradient(-45deg, #f1f5f8 0 14px, #ebf0f5 14px 28px);
  border: 1px dashed #bfceda;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phtx {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #78899a;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 14px;
  border-radius: 8px;
}
.cap {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink2);
}

/* Bande de confiance (souveraineté) */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  font-size: 13.5px;
  color: var(--ink2);
  text-align: center;
}
.tdot { color: var(--accent); font-weight: 700; }

/* ── Abonnement ──────────────────────────────────────────────────────────── */
.pc { display: flex; flex-direction: column; gap: 14px; padding: 34px; }
.plan {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink2);
}
.price {
  font-family: "Spectral", Georgia, serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.per { color: var(--ink2); font-size: 15px; font-weight: 500; }
.fchip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
}
.ck { color: var(--accent); font-weight: 700; }

/* ── Souveraineté (cartes) ───────────────────────────────────────────────── */
.sv {
  font-family: "Spectral", Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
}

/* ── Pictogrammes abstraits des 3 arguments ─────────────────────────────── */
.mk { display: flex; flex-direction: column; gap: 4px; justify-content: center; height: 28px; }
.mb { width: 24px; height: 5px; border-radius: 3px; background: #d7e0e8; display: block; }
.mba { width: 34px; background: var(--accent); }
.mk2 {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkd { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.mk3 { display: flex; align-items: flex-end; gap: 5px; height: 28px; }
.d1 { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.35; display: block; }
.d2 { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0.6; display: block; }
.d3 { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); display: block; }

/* Onde vocale décorative du héro */
.wv { display: flex; align-items: center; gap: 4px; }
.wb { width: 3px; border-radius: 2px; background: var(--accent); }

/* Pastilles [À COMPLÉTER] visibles (le brief impose de ne rien inventer) */
.todo {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #7c8a97;
  background: #edf2f6;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ── Pages légales (mentions, confidentialité, CGV, RGPD) ─────────────────
   Colonne de lecture étroite, même charte que la landing. Aucune requête
   externe : liens internes uniquement, hébergeurs cités en clair (.nolink). */
.lgl { padding-top: 92px; }
.lgl .cx { max-width: 820px; }
.prose { margin-top: 20px; color: var(--ink); }
.prose h2 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}
.prose h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 26px 0 8px;
}
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 7px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent2); }
.prose strong { font-weight: 700; }
.prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg2);
  padding: 1px 6px;
  border-radius: 5px;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 15px;
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--bg2); font-weight: 700; }
.prose .tbl-wrap { overflow-x: auto; }
/* Hébergeur / prestataire cité mais volontairement non cliquable
   (règle souveraineté : la page ne déclenche aucune requête sortante). */
.nolink { color: var(--ink); font-weight: 600; }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.ftr { border-top: 1px solid var(--line); padding: 34px 0; font-size: 13.5px; color: var(--ink2); }
.fl { color: var(--ink2); text-decoration: none; }
.fl:hover { color: var(--accent); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1160px) {
  .nav { display: none; }
}
@media (max-width: 900px) {
  :root { --sp: 80px; }
  .cx { padding: 0 22px; }
  .g3 { grid-template-columns: 1fr; }
  .hrow { height: 58px; }
  .hero { padding: 72px 0 64px; }
  .hdr .nvl { display: none; } /* étroit : logo + CTA seulement */
}
@media (max-width: 600px) {
  /* Très étroit : l'en-tête se compresse (logo sans mention « Radiologie »,
     bouton réduit) pour tenir sans débordement horizontal. */
  .lgr { display: none; }
  .logo { font-size: 14px; gap: 8px; }
  .hdr .btn-sm { padding: 8px 12px; font-size: 13px; }
}