/* ═══════════════════════════════════════════════════════════════════════
   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; }
}

/* ── Drapeau français (bande de confiance / souveraineté) ────────────────── */
.flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66% 100%);
}

/* ── Capture d'écran de l'outil (section aperçu) ─────────────────────────── */
.shot {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--accent), transparent 52%);
}
.shot img { display: block; width: 100%; height: auto; }

/* ── Démo animée : bouton de dictée (héro) ───────────────────────────────── */
.demo-rec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.rec-core { position: relative; width: 72px; height: 72px; }
.rec-btn {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rouge);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--rouge), transparent 58%);
  animation: recPulse 2s ease-in-out infinite;
}
.rec-sq { width: 22px; height: 22px; border-radius: 5px; background: #fff; }
.rec-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--rouge);
  opacity: 0;
  animation: recRing 2.4s ease-out infinite;
}
.rec-ring2 { animation-delay: 1.2s; }
.rec-wave { display: flex; align-items: center; gap: 4px; height: 26px; }
.rec-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  height: 8px;
  animation: recWave 1.1s ease-in-out infinite;
}
.rec-wave i:nth-child(2) { animation-delay: 0.09s; }
.rec-wave i:nth-child(3) { animation-delay: 0.18s; }
.rec-wave i:nth-child(4) { animation-delay: 0.27s; }
.rec-wave i:nth-child(5) { animation-delay: 0.36s; }
.rec-wave i:nth-child(6) { animation-delay: 0.27s; }
.rec-wave i:nth-child(7) { animation-delay: 0.18s; }
.rec-wave i:nth-child(8) { animation-delay: 0.09s; }
.rec-wave i:nth-child(9) { animation-delay: 0s; }
.rec-label { margin: 0; font-size: 13.5px; color: var(--ink2); }
@keyframes recPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes recRing { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2); opacity: 0; } }
@keyframes recWave { 0%, 100% { height: 8px; } 50% { height: 26px; } }
/* Accessibilité : pas de mouvement si l'utilisateur le refuse. */
@media (prefers-reduced-motion: reduce) {
  .rec-btn, .rec-ring, .rec-wave i { animation: none !important; }
  .rec-ring { display: none; }
  .rec-wave i { height: 16px; }
}