:root{
  --cream:#FBF3E4;
  --cream-2:#fff;
  --navy:#163A5F;
  --navy-2:#1f4e7a;
  --blue:#5B9BD5;
  --blue-light:#e6f0fa;
  --ink:#1c2a36;
  --muted:#5e6b78;
  --green:#2e9e5b;
  --amber:#c98a16;
  --red:#c0392b;
  --radius:18px;
  --shadow:0 6px 22px rgba(22,58,95,.10);
  --shadow-lg:0 14px 40px rgba(22,58,95,.16);
  --maxw:980px;
  font-size:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%}
a{color:var(--navy-2);text-underline-offset:2px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;
  background:var(--cream);
  border-bottom:1px solid rgba(22,58,95,.10);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand-logo{width:46px;height:46px;border-radius:12px;object-fit:contain;background:var(--cream-2);box-shadow:var(--shadow)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text strong{font-size:1.15rem;letter-spacing:.2px}
.brand-text small{color:var(--blue);font-weight:600;font-size:.72rem;letter-spacing:1px;text-transform:uppercase}
.header-nav{display:flex;gap:6px}
.nav-link{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--navy);font-weight:600;font-size:.92rem}
.nav-link.active,.nav-link:hover{background:var(--blue-light)}

/* Layout */
.app{max-width:var(--maxw);margin:0 auto;padding:18px 16px 40px}

/* Hero */
.hero{
  background:linear-gradient(135deg,#163A5F,#1f4e7a 60%,#2f6aa0);
  color:#fff;border-radius:24px;padding:30px 24px;margin-bottom:22px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.hero h1{margin:0 0 8px;font-size:1.7rem;line-height:1.2}
.hero p{margin:0;color:#dcebd9 ;color:rgba(255,255,255,.9);max-width:640px}
.hero .hero-badges{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:600}

/* Search */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 18px}
.search{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:var(--cream-2);border:2px solid transparent;border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}
.search:focus-within{border-color:var(--blue)}
.search input{border:0;outline:0;font-size:1rem;width:100%;background:transparent;color:var(--ink)}
.search svg{flex:none}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid rgba(22,58,95,.18);background:var(--cream-2);color:var(--navy);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.86rem;cursor:pointer}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  background:var(--cream-2);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  border:1px solid rgba(22,58,95,.06);transition:transform .12s ease,box-shadow .12s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card .icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.7rem;background:var(--blue-light)}
.card h3{margin:2px 0 0;font-size:1.12rem;color:var(--navy)}
.card .cat{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--blue)}
.card .langs{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.lang-tag{font-size:.74rem;font-weight:700;background:#eef6ee;color:var(--green);padding:3px 9px;border-radius:999px}
.lang-tag.soon{background:#fdf3e0;color:var(--amber)}

/* Detail */
.detail-top{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--navy);font-weight:600;background:var(--cream-2);padding:8px 14px;border-radius:999px;box-shadow:var(--shadow)}
.detail-head{background:var(--cream-2);border-radius:24px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid rgba(22,58,95,.06)}
.detail-head .cat{font-size:.78rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue)}
.detail-head h1{margin:6px 0 4px;font-size:1.55rem;color:var(--navy);line-height:1.2}
.detail-head .subtitle{color:var(--muted);margin:0}

/* Audio block */
.audio-zone{background:linear-gradient(135deg,#eef6ff,#e6f0fa);border-radius:20px;padding:18px;margin-bottom:20px;border:1px solid rgba(91,155,213,.3)}
.audio-zone h2{margin:0 0 6px;font-size:1.05rem;color:var(--navy);display:flex;align-items:center;gap:8px}
.lang-switch{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.lang-btn{border:2px solid var(--blue);background:#fff;color:var(--navy-2);font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;font-size:.92rem}
.lang-btn.active{background:var(--blue);color:#fff}
.lang-btn.soon{border-color:#e3c483;color:var(--amber);cursor:not-allowed;opacity:.8}
.big-listen{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;margin:6px 0 4px;padding:16px 20px;
  border:0;border-radius:16px;cursor:pointer;
  background:var(--navy);color:#fff;font-size:1.25rem;font-weight:800;
  box-shadow:0 6px 18px rgba(22,58,95,.25);transition:transform .1s ease,background .15s ease;
}
.big-listen:hover{background:var(--navy-2)}
.big-listen:active{transform:scale(.98)}
.big-listen.playing{background:var(--blue)}
.big-listen .bl-icon{font-size:1.5rem;line-height:1}
.player{margin-top:8px}
.player audio{width:100%;height:46px}
.audio-soon{margin-top:8px;color:var(--amber);font-weight:600;background:#fff;border-radius:12px;padding:12px 14px}
.audio-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-weight:700;font-size:.92rem;padding:10px 16px;border-radius:12px;text-decoration:none}
.btn-primary{background:var(--navy);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid rgba(22,58,95,.2)}
.btn-green{background:#25D366;color:#fff}

/* Content */
.content{background:var(--cream-2);border-radius:24px;padding:22px 22px 8px;box-shadow:var(--shadow);border:1px solid rgba(22,58,95,.06)}
.content h2{color:var(--navy);font-size:1.18rem;margin:22px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--blue-light)}
.content h3{color:var(--navy-2);font-size:1.02rem;margin:16px 0 4px}
.content p{margin:8px 0}
.content ul{margin:8px 0 14px;padding-left:22px}
.content li{margin:5px 0}
.content .wolof{color:var(--navy-2);font-style:italic}
.note{display:flex;gap:10px;background:#fff7e8;border:1px solid #f0d9a8;border-left:5px solid var(--amber);border-radius:12px;padding:12px 14px;margin:14px 0}
.note.alert{background:#fdecea;border-color:#f3b6ae;border-left-color:var(--red)}
.note.info{background:#eaf4ff;border-color:#bcd9f5;border-left-color:var(--blue)}

/* QR */
.qr-card{background:var(--cream-2);border-radius:24px;padding:22px;box-shadow:var(--shadow);margin:20px 0;text-align:center;border:1px solid rgba(22,58,95,.06)}
.qr-card h2{color:var(--navy);margin:0 0 4px}
.qr-card p{color:var(--muted);margin:0 0 14px}
.qr-box{display:inline-block;background:#fff;padding:14px;border-radius:16px;box-shadow:var(--shadow)}
.qr-box img,.qr-box canvas{display:block}
.qr-url{font-size:.8rem;color:var(--muted);word-break:break-all;margin-top:10px}

/* About */
.prose{background:var(--cream-2);border-radius:24px;padding:24px;box-shadow:var(--shadow);border:1px solid rgba(22,58,95,.06)}
.prose h1{color:var(--navy);margin-top:0}
.prose h2{color:var(--navy-2);font-size:1.15rem;margin-top:22px}

.empty{text-align:center;color:var(--muted);padding:40px 0}

@media(max-width:560px){
  :root{font-size:17px}
  .hero{padding:24px 18px}
  .hero h1{font-size:1.4rem}
  .detail-head h1{font-size:1.3rem}
}

/* Print: poster QR + fiche */
@media print{
  .site-header,.site-footer,.header-nav,.toolbar,.back,.audio-actions,.no-print{display:none !important}
  body{background:#fff}
  .app{max-width:100%;padding:0}
  .detail-head,.content,.qr-card,.audio-zone{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}

/* ---------- Page lecteur (ouverte par QR code) ---------- */
.lecteur{
  max-width:520px;margin:14px auto;background:var(--cream-2);
  border-radius:24px;padding:26px 22px 24px;box-shadow:var(--shadow-lg);
  border:1px solid rgba(22,58,95,.06);text-align:center;
}
.lecteur-logo{width:90px;height:90px;object-fit:contain;border-radius:18px;background:var(--cream);padding:6px;box-shadow:var(--shadow);margin-bottom:8px}
.lecteur .cat{display:block;font-size:.78rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue)}
.lecteur h1{margin:4px 0 2px;font-size:1.45rem;color:var(--navy);line-height:1.2}
.lecteur-lang{margin:0 0 14px;color:var(--muted);font-weight:600}
.lecteur .big-listen{font-size:1.35rem;padding:18px 20px}
.lecteur .player{margin-top:10px}
.lecteur-contact{
  margin:18px 0 6px;padding:16px;border-radius:16px;
  background:var(--blue-light);border:1px solid rgba(91,155,213,.3);
}
.lecteur-contact p{margin:0 0 8px;color:var(--navy);font-weight:600}
.lecteur-contact .tel{
  display:inline-block;font-size:1.3rem;font-weight:800;color:var(--navy);
  text-decoration:none;background:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);
}
.lecteur-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.lecteur-actions .btn{flex:1 1 auto;justify-content:center;min-width:120px}

.lecteur-contact .contact-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.lecteur-contact .tel-wa{
  display:inline-flex;align-items:center;gap:8px;font-size:1.15rem;font-weight:800;
  color:#fff;text-decoration:none;background:#25D366;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);
}

/* ---------- Filigrane logo (signature MediSpeak) ---------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('../Logo%20MediSpeak.png') no-repeat center 40%;
  background-size:min(60vw,360px);
  opacity:.05;
}
.site-header,.app,.site-footer{position:relative;z-index:1}

/* ---------- Pied de page ---------- */
.site-footer{margin-top:30px;padding:22px 16px 30px;border-top:1px solid rgba(22,58,95,.12);background:var(--cream)}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-logo{width:54px;height:54px;object-fit:contain;border-radius:12px;background:var(--cream-2);box-shadow:var(--shadow)}
.footer-inner p{margin:2px 0;color:var(--ink)}
.footer-inner p:first-child{color:var(--navy)}
.footer-legal{max-width:var(--maxw);margin:14px auto 0;font-size:.82rem;color:var(--muted);text-align:center;line-height:1.5}
.footer-legal a{color:var(--navy-2);font-weight:600}

/* ---------- Illustrations de fiches ---------- */
.illu{width:100%;height:100%;display:block;object-fit:contain}
.card .icon{padding:0;overflow:hidden}
.detail-head{display:flex;gap:16px;align-items:center}
.detail-head-txt{flex:1}
.detail-illu{flex:none;width:76px;height:76px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.detail-illu .illu{width:100%;height:100%}
@media(max-width:560px){ .detail-illu{width:60px;height:60px} }

/* ---------- Espace partenaire / publicité ---------- */
.ad-slot{margin:22px 0}
.ad-empty{
  border:2px dashed rgba(22,58,95,.25);border-radius:20px;
  padding:22px;text-align:center;color:var(--muted);background:var(--cream-2);
}
.ad-tag{display:inline-block;background:var(--blue-light);color:var(--navy);
  font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;
  padding:4px 12px;border-radius:999px;margin-bottom:8px}
.ad-empty p{margin:4px 0}
.ad-sub{font-size:.85rem}
.ad-banner{display:block}
.ad-banner img{width:100%;border-radius:16px;display:block;box-shadow:var(--shadow)}

/* =====================================================================
   FINITION PRO — surcharge esthétique (placée en fin de fichier)
   ===================================================================== */
:root{
  --shadow:0 4px 16px rgba(22,58,95,.08);
  --shadow-lg:0 20px 48px rgba(22,58,95,.16);
  --ring:0 0 0 3px rgba(91,155,213,.40);
}
body{ background:linear-gradient(180deg,#FBF3E4 0%, #f5eee1 70%, #efe8db 100%); }
.app{ padding-top:22px; }

/* En-tête translucide */
.site-header{
  background:rgba(251,243,228,.82);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  backdrop-filter:saturate(1.2) blur(8px);
  box-shadow:0 1px 0 rgba(22,58,95,.08);
  border-bottom:0;
}
.brand-text strong{ letter-spacing:.3px; }

/* Héro plus riche */
.hero{
  padding:42px 34px; border-radius:28px; overflow:hidden; position:relative;
  background:radial-gradient(130% 150% at 100% 0%, #2f6aa0 0%, #1f4e7a 48%, #143452 100%);
}
.hero::after{
  content:""; position:absolute; right:-40px; top:-40px; width:280px; height:280px;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); pointer-events:none;
}
.hero h1{ font-size:2.05rem; font-weight:800; letter-spacing:-.4px; }
.hero p{ font-size:1.06rem; }
.badge{ background:rgba(255,255,255,.16); }

/* Titre de section */
.section-title{
  font-size:.82rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--blue); margin:4px 2px 12px;
}

/* Cartes */
.grid{ gap:18px; }
.card{ border:1px solid rgba(22,58,95,.08); border-radius:20px; padding:20px; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(91,155,213,.5); }
.card .icon{ width:60px; height:60px; border-radius:16px; box-shadow:inset 0 0 0 1px rgba(22,58,95,.06); }
.card h3{ font-weight:750; letter-spacing:-.2px; }

/* Boutons */
.btn{ border-radius:14px; padding:11px 18px; transition:transform .08s ease, filter .15s ease, box-shadow .15s ease; }
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ box-shadow:0 8px 18px rgba(22,58,95,.26); }
.btn-green{ box-shadow:0 8px 18px rgba(37,211,102,.28); }

/* Zone audio + bouton écouter */
.audio-zone{ border-radius:22px; padding:20px; }
.big-listen{ border-radius:16px; box-shadow:0 12px 26px rgba(22,58,95,.30); letter-spacing:.2px; }

/* En-tête de fiche : barre d'accent */
.detail-head{ border-radius:22px; position:relative; overflow:hidden; padding-left:28px; }
.detail-head::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(#5B9BD5,#163A5F); }
.detail-illu{ border-radius:18px; }

/* Lisibilité du contenu */
.content{ border-radius:22px; }
.content p,.content li{ color:#33424f; }
.content h2{ letter-spacing:-.2px; }

/* Accessibilité : focus visible */
a:focus-visible, button:focus-visible, input:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:12px; }

/* Espace partenaire */
.ad-slot{ max-width:760px; margin-inline:auto; }
.ad-empty{ border-radius:18px; background:linear-gradient(180deg,#ffffff,#f6faff); }
.ad-tag{ background:var(--navy); color:#fff; }

/* Pied de page sombre, plus pro */
.site-footer{ background:#0f2c49; color:#cfe0f0; margin-top:40px; border-top:0; padding-top:26px; }
.footer-inner p{ color:#cfe0f0; margin:2px 0; }
.footer-inner p:first-child{ color:#ffffff; }
.footer-logo{ background:#fff; }
.footer-legal{ color:#9db6cd; }
.footer-legal a{ color:#bcd4ea; }
.footer-legal strong{ color:#fff; }

/* ===== Stratégie à deux voies ===== */
.espace{margin:30px 0 10px}
.espace-head{display:flex;align-items:flex-start;gap:14px;border-left:5px solid var(--blue,#5B9BD5);padding:6px 0 6px 14px;margin-bottom:6px}
.espace-head.b2b{border-color:#1F6F43}
.espace-head h2{margin:0;color:#163A5F;font-size:22px}
.espace-head p{margin:3px 0 0;color:#5e6b78;font-size:14px}
.espace-tag{display:inline-block;font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;margin-bottom:4px}
.espace-tag.b2b{background:#E4F2EA;color:#1F6F43}
.espace-tag.pub{background:#EAF1F8;color:#163A5F}
.vbadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:20px;padding:3px 10px}
.vbadge.human{background:#E4F2EA;color:#1F6F43}
.vbadge.synth{background:#EEF0F4;color:#444}
.voice-legend{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.audio-pending{background:#FFF7E6;border:1px solid #F0D9A8;color:#8a6d1f;border-radius:10px;padding:12px 14px;font-size:14px}
.detail-voice{margin:6px 0 14px}
.icon-emoji{font-size:40px;line-height:1}
.card-sub{color:#5e6b78;font-size:13px;margin:2px 0 8px}

/* ===== Verrou audio + page-lecteur (QR) ===== */
.audio-locked{background:#F4F7FB;border:1px dashed #9bb6d4;color:#244;border-radius:12px;padding:16px 18px;margin:8px 0 16px;font-size:15px}
.lecteur{max-width:720px;margin:0 auto;text-align:center;padding:8px 0}
.lecteur-logo{height:54px;margin:6px 0 10px}
.lecteur h1{margin:6px 0}
.lecteur .content{text-align:left;margin-top:18px}
.lecteur-contact{color:#5e6b78;font-size:14px;margin-top:18px}
.big-listen{display:inline-flex;align-items:center;gap:10px;background:#5B9BD5;color:#fff;border:0;border-radius:40px;padding:14px 28px;font-size:18px;font-weight:700;cursor:pointer;margin:10px auto}
.big-listen.playing{background:#163A5F}

/* ===== Accueil mission-first + B2B discret ===== */
.mission{background:linear-gradient(135deg,#eef6ff,#e6f0fa);border:1px solid rgba(91,155,213,.3);border-radius:18px;padding:20px 22px;margin:24px 0}
.mission h2{margin:0 0 6px;color:#163A5F}
.mission p{margin:0;color:#33424f}
.biz-band{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  background:#0f2c49;color:#e7eff7;border-radius:18px;padding:18px 22px;margin:18px 0 6px}
.biz-band .biz-txt strong{color:#fff}
.biz-band .biz-txt p{margin:4px 0 0;color:#bcd2e8;font-size:14px;max-width:560px}
.btn-band{flex:none;background:#5B9BD5;color:#fff;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:12px;white-space:nowrap}
.btn-band:hover{filter:brightness(1.05)}
.contact-box{background:#eef6ff;border:1px solid rgba(91,155,213,.3);border-radius:16px;padding:18px;margin-top:18px;text-align:center}
.contact-box h2{margin:0 0 4px;color:#163A5F;border:0}
.big-contact{font-size:1.15rem;font-weight:800;color:#163A5F;margin:6px 0 0}

/* ===== Conseils par spécialité ===== */
.spec{margin:18px 0}
.spec-h{margin:6px 0 10px;color:#163A5F;font-size:1.05rem;border-bottom:2px solid #e6eef7;padding-bottom:6px}
.spec-h.muted{color:#5e6b78;border-color:#eef2f7}
.spec-comingwrap{margin-top:22px}
.spec-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.spec-tile{display:flex;flex-direction:column;background:#fff;border:1px solid #e6edf4;border-radius:12px;padding:11px 13px;color:#33424f;font-weight:600;font-size:.92rem;box-shadow:0 1px 3px rgba(22,58,95,.05)}
.spec-tile small{color:#9aa7b4;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}