/*
Theme Name: Neuraccure Theme
Template: kadence
Description: Thème enfant Kadence pour neuraccure.com, reprenant le design du prototype validé.
Version: 1.0
*/

:root {
  --ink: #221B4D;       /* headings, nav — deep indigo derived from the logo gradient */
  --ink-dark: #150F30;  /* footer background */
  --blue: #08CCFE;      /* logo gradient start (vivid, decorative use) */
  --purple: #DD15FC;    /* logo gradient end (vivid, decorative use) */
  --accent: #9D17C9;    /* deep purple — links, icons, accessible on white */
  --accent2: #0A8FC7;   /* deep blue — secondary accent, gradient partner */
  --tint: #F5F2FC;      /* light lavender band background */
  --border: #E7E2F2;
  --grey: #5C5A72;
  --text: #201C33;
  --radius: 10px;
  --brand-gradient: linear-gradient(135deg, var(--accent2), var(--accent));
  --brand-gradient-vivid: linear-gradient(135deg, var(--blue), var(--purple));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 28px; margin-bottom: 24px; }
h3 { font-size: 18px; margin-bottom: 8px; }
p { margin: 0 0 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo-mark { width: 26px; height: auto; display: inline-block; }
.nav { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; }
.navlink { color: var(--grey); font-size: 14.5px; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.navlink:hover { color: var(--ink); text-decoration: none; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .header-inner { gap: 14px; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; margin-left: auto; cursor: pointer; order: 3;
  }
  .nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
  }
  .nav-toggle span:before { position: absolute; top: -6px; }
  .nav-toggle span:after { position: absolute; top: 6px; }
  .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 0; padding: 6px 20px 14px;
    box-shadow: 0 8px 18px rgba(34,27,77,0.08);
  }
  .nav.nav-open { display: flex; }
  .navlink { padding: 12px 0; border-bottom: 1px solid var(--border); }
  /* Le bouton d'appel à l'action de l'en-tête n'a pas de contrainte de
     largeur : sur petit écran il pousse le bouton hamburger hors du cadre.
     On le masque simplement (le menu déroulant mobile contient déjà un
     lien "Essayer" vers la même page, donc rien n'est perdu). */
  .header-inner > .btn.btn-small { display: none; }
}
.navlink.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Buttons */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px; font-weight: 700;
  font-size: 15px; border: 1px solid transparent; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand-gradient); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #eef1f4; }
.btn-small { padding: 9px 16px; font-size: 13.5px; }

/* Hero */
.hero { padding: 76px 0 64px; background: linear-gradient(180deg, var(--tint) 0%, #fff 100%); }
.hero-compact { padding: 52px 0 36px; }
.hero-compact h1 { font-size: 32px; margin-bottom: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.hero h1 {
  font-size: 42px; line-height: 1.15; max-width: 780px; margin-bottom: 18px;
  background: var(--brand-gradient-vivid);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { font-size: 19px; color: var(--grey); max-width: 620px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; }

.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero-grid .hero-text { min-width: 0; }
.hero-media img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(15, 30, 60, 0.35);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-media { order: -1; }
}

/* Sections */
.section { padding: 56px 0; }
.section.band-light { background: var(--tint); }
.section.band-navy { background: var(--ink); color: #fff; }
.section-intro { font-size: 17px; color: var(--grey); max-width: 760px; margin-bottom: 28px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px;
}
.card p { color: var(--grey); font-size: 15px; margin-bottom: 0; }
.card-flat { background: #fff; border: 1px solid var(--border); }
.card-flat h3 { color: var(--accent); font-size: 22px; }
.card-link { display: block; transition: box-shadow 0.15s, transform 0.15s; }
.card-link:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(34,27,77,0.1); transform: translateY(-2px); }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--tint); color: var(--accent); margin-bottom: 14px;
}

.checklist { list-style: none; padding: 0; margin: 0 0 20px; }
.checklist li { padding: 10px 0 10px 30px; position: relative; border-bottom: 1px solid var(--border); font-size: 16px; }
.checklist li:before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Legal pages */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-updated { font-size: 13.5px; color: var(--grey); margin: -6px 0 34px; }
.legal-content h2 { font-size: 21px; margin: 44px 0 14px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 16.5px; margin: 26px 0 10px; color: var(--ink); }
.legal-content p, .legal-content li { color: var(--grey); line-height: 1.75; margin-bottom: 13px; font-size: 15.5px; }
.legal-content ul { padding-left: 20px; margin: 0 0 16px; }
.legal-content strong { color: var(--text); }

.callout {
  background: var(--tint); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 16px 20px; font-size: 14.5px; color: var(--ink); font-style: italic; max-width: 760px;
}

.form-placeholder {
  border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 30px;
  color: var(--grey); background: var(--tint); text-align: center;
}
.form-placeholder strong { color: var(--ink); }

/* Filet de sécurité : neutralise toute hauteur/défilement interne que le script
   Brevo (main.js) tenterait d'appliquer au formulaire à l'exécution. */
.sib-form,
.sib-form #sib-form-container,
.sib-form .sib-form-container,
.sib-form #sib-container,
.sib-form .sib-container--large {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band p { margin: 0; font-size: 18px; max-width: 620px; color: #E7E1F7; }

.team-card { text-align: center; }
.team-avatar {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 16px; display: block; border: 3px solid var(--tint);
}
.team-role { color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 10px; }

.institution-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 28px 40px; margin-top: 22px; }
.institution-logo { height: 48px; width: auto; display: block; }
@media (max-width: 560px) { .institution-logos { gap: 20px 26px; } .institution-logo { height: 38px; } }

.partner-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 36px 44px; }
.partner-logo {
  height: 48px; width: auto; display: block;
  filter: grayscale(1) opacity(0.72);
  transition: filter 0.2s ease;
}
.partner-logo:hover { filter: none; }
@media (max-width: 560px) { .partner-logos { gap: 24px 28px; } .partner-logo { height: 40px; } }

/* Footer */
.site-footer { background: var(--ink-dark); color: #C6C4DA; padding: 52px 0 0; margin-top: 40px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.footer-logo { color: #fff; margin-bottom: 14px; }
.footer-note { font-size: 13px; color: #9C97B8; max-width: 380px; }
.footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.footer-col a { display: block; color: #C6C4DA; font-size: 14.5px; margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #322A57; padding: 18px 0; font-size: 12.5px; color: #8A85A6; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { color: #8A85A6; }
.footer-legal-links a:hover { color: #fff; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } .footer-bottom { justify-content: flex-start; } }

/* Manuel utilisateur — mise en page documentation (TOC + contenu) */
.doc-header { padding: 40px 0 28px; border-bottom: 1px solid var(--border); background: var(--tint); }
.doc-header .eyebrow { margin-bottom: 10px; }
.doc-header h1 { font-size: 30px; margin-bottom: 6px; background: none; -webkit-text-fill-color: initial; color: var(--ink); }
.doc-header p { color: var(--grey); margin: 0; }
.doc-layout { display: grid; grid-template-columns: 25% 1fr; gap: 0; align-items: start; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.doc-toc {
  position: sticky; top: 69px; align-self: start;
  max-height: calc(100vh - 69px); overflow-y: auto;
  padding: 28px 20px 40px 0; border-right: 1px solid var(--border);
}
.doc-toc-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); margin-bottom: 12px; font-weight: 700; }
.doc-toc nav { display: flex; flex-direction: column; }
.doc-toc a {
  color: var(--text); font-size: 13.5px; padding: 5px 0 5px 12px; border-left: 2px solid transparent;
  line-height: 1.35;
}
.doc-toc a:hover { color: var(--accent); text-decoration: none; }
.doc-toc a.lvl-1 { font-weight: 700; color: var(--ink); margin-top: 10px; font-size: 14px; }
.doc-toc a.lvl-2 { padding-left: 22px; color: var(--grey); }
.doc-toc a.lvl-3 { padding-left: 34px; color: var(--grey); font-size: 12.5px; }
.doc-toc a.active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.doc-toc a.lvl-1.active { color: var(--accent); }

.doc-content { padding: 36px 0 80px 40px; max-width: 760px; }
.doc-content section { padding-top: 18px; margin-top: 8px; scroll-margin-top: 84px; }
.doc-content h2 { font-size: 24px; border-top: 1px solid var(--border); padding-top: 32px; margin-top: 8px; }
.doc-content section:first-child h2 { border-top: none; padding-top: 0; }
.doc-content h3 { font-size: 17px; color: var(--accent); margin-top: 26px; }
.doc-content h4 { font-size: 15px; color: var(--ink); margin-top: 18px; }
.doc-content p { color: var(--text); font-size: 15.5px; }
.doc-content ul, .doc-content ol { padding-left: 22px; color: var(--text); font-size: 15.5px; }
.doc-content li { margin-bottom: 6px; }
.doc-content .warn {
  background: #FFF7EC; border-left: 3px solid #E0A100; border-radius: 6px;
  padding: 12px 16px; font-size: 14px; margin: 14px 0;
}
.doc-content .measured {
  background: var(--tint); border-radius: 8px; padding: 12px 16px; margin: 12px 0; font-size: 14px;
}
.doc-content .img-ph {
  border: 1.5px dashed var(--border); border-radius: 8px; padding: 18px; text-align: center;
  color: var(--grey); font-size: 13px; margin: 14px 0; background: #FAFAFC;
}
.doc-figure {
  margin: 16px 0; padding: 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #FAFAFC;
}
.doc-figure img { display: block; width: 100%; height: auto; background: #fff; }
.doc-figure figcaption {
  padding: 10px 14px; font-size: 12.5px; color: var(--grey); border-top: 1px solid var(--border); line-height: 1.4;
}
.doc-figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.doc-figure-row .doc-figure { margin: 0; }
@media (max-width: 560px) { .doc-figure-row { grid-template-columns: 1fr; } }
.doc-content table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
.doc-content table td, .doc-content table th { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.doc-mobile-toc { display: none; }
@media (max-width: 860px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { display: none; }
  .doc-content { padding: 24px 0; max-width: 100%; }
  .doc-mobile-toc { display: block; margin: 20px 0; }
  .doc-mobile-toc select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 15px; }
}

/* ---------- Blog (ajouté pour le thème WordPress, absent du prototype statique) ---------- */
.blog-card { display: flex; flex-direction: column; }
.blog-card-thumb { margin: -22px -20px 14px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.blog-card-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.blog-card-date { font-size: 12.5px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.blog-single-thumb { margin-bottom: 24px; }
.blog-single-thumb img { width: 100%; height: auto; border-radius: var(--radius); }
.blog-pagination { margin-top: 40px; display: flex; justify-content: center; gap: 16px; }
.blog-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px; color: var(--grey); font-weight: 600; font-size: 14px; }
.blog-pagination a.page-numbers:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.blog-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.share-buttons { display: flex; align-items: center; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.share-label { font-weight: 600; font-size: 14px; color: var(--grey); margin-right: 4px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f3f4f7; color: var(--ink); flex-shrink: 0; }
.share-btn:hover { background: var(--brand-gradient); color: #fff; text-decoration: none; }