/* ==================================================================
   MAGISTERAI — pages intérieures (blog, pages légales, suppression)
   Même univers que l'accueil : barre de nuit, papier, encre violette.
   Ici c'est le jour : on lit sur du papier clair.
   ================================================================== */
:root {
  --nuit: #0D0B26;
  --papier: #F8F6FC;
  --papier-2: #EEEAF7;
  --encre: #5427D8;
  --violet: #8A4DFF;
  --violet-dark: #6B3FCC;
  --violet-light: #BBA8FF;
  --violet-bg: #EEEAF7;
  --lilas: #BBA8FF;
  --graphite: #1F1C33;
  --graphite-2: #55506E;
  --text: #1F1C33;
  --text-soft: #55506E;
  --fluo: #FFE66B;
  --marge: #F0568A;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --display: "Ops", "Gloock", Georgia, "Times New Roman", serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--body) !important;
  color: var(--graphite);
  background-color: var(--papier) !important;
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--fluo); color: var(--graphite); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 6px; }

/* ---------- Barre du haut : la nuit ---------- */
nav {
  background: rgba(13, 11, 38, .94) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(187, 168, 255, .14) !important;
  box-shadow: none !important;
}
nav a, .nav-logo { color: #F1EEFC !important; }
.nav-logo { font-weight: 700 !important; letter-spacing: -.01em; }
.nav-logo img { filter: drop-shadow(0 4px 10px rgba(138, 77, 255, .45)); }
.nav-back {
  color: var(--lilas) !important; font-weight: 600 !important;
  padding: 4px 2px;
  background: linear-gradient(transparent 62%, rgba(138, 77, 255, .6) 62%, rgba(138, 77, 255, .6) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size .35s var(--ease), color .2s !important;
}
.nav-back:hover { color: #fff !important; background-size: 100% 100%; }

/* ---------- Titres ---------- */
h1, h2, .page-hero h1, .hero-article h1, .section h2, .article-body h2 {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em;
}

/* ---------- Pages légales ---------- */
.page-hero {
  position: relative;
  background-color: var(--nuit) !important;
  background-image:
    radial-gradient(60% 80% at 80% 0%, rgba(122, 76, 255, .3), transparent 70%),
    linear-gradient(90deg, transparent calc(5% - 1px), rgba(240, 86, 138, .34) calc(5% - 1px), rgba(240, 86, 138, .34) calc(5% + 1px), transparent calc(5% + 1px)),
    repeating-linear-gradient(180deg, rgba(170, 150, 255, .07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(170, 150, 255, .045) 0 1px, transparent 1px 32px) !important;
  border-bottom: 0 !important;
}
.page-hero h1 { color: #F1EEFC !important; font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important; line-height: 1.05 !important; }
.page-hero p { color: #B1ABD6 !important; }
.badge {
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  font-family: var(--hand); font-weight: 700 !important; font-size: 1.45rem !important; line-height: 1 !important;
  color: var(--fluo) !important; transform: rotate(-2.5deg); transform-origin: left bottom;
}

.toc {
  background-color: #fff !important;
  background-image:
    linear-gradient(90deg, transparent 22px, rgba(240, 86, 138, .5) 22px, rgba(240, 86, 138, .5) 23.5px, transparent 23.5px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(110, 90, 220, .12) 31px 32px) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 36px -22px rgba(30, 20, 70, .45), 0 2px 6px rgba(30, 20, 70, .1);
  padding-left: 44px !important;
  transform: rotate(-.4deg);
}
.toc h3 { font-family: var(--hand); font-weight: 700 !important; font-size: 1.6rem !important; color: var(--encre); }
.toc a { color: var(--graphite) !important; font-weight: 500; }
.toc a:hover { color: var(--encre) !important; }

.section h2 {
  color: var(--graphite) !important;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem) !important;
  line-height: 1.15 !important;
  border-bottom: 0 !important;
  padding-bottom: 10px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 2 60 8 118 4' fill='none' stroke='%238A4DFF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 74px 8px;
}
.section p, .section li { color: var(--graphite-2) !important; line-height: 1.75 !important; }
.section strong { color: var(--graphite) !important; }
.section a { color: var(--encre); }

.highlight-box {
  background: rgba(255, 230, 107, .3) !important;
  border-left: 4px solid #F2C230 !important;
  border-radius: 4px !important;
}
.highlight-box p { color: var(--graphite) !important; }
.warning-box { border-radius: 4px !important; }
.green-box { border-radius: 4px !important; }

.info-card, .principle-card, .right-card {
  background-color: #fff !important; background-image: var(--grain) !important;
  border: 0 !important; border-top: 5px solid var(--violet) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 36px -24px rgba(30, 20, 70, .5), 0 2px 6px rgba(30, 20, 70, .08) !important;
}
.icon { border-radius: 10px !important; }

th { background: var(--papier-2) !important; color: var(--encre) !important; font-weight: 700; }
td { color: var(--graphite-2); }

.pricing-hero, .contact-box {
  background-color: var(--nuit) !important;
  background-image: radial-gradient(70% 90% at 90% 0%, rgba(122, 76, 255, .35), transparent 70%) !important;
  border-radius: 6px !important;
}
.pricing-hero h3, .contact-box h3 { font-family: var(--display); font-weight: 400 !important; }
.pricing-card { border-radius: 6px !important; }
.pricing-card .price { font-family: var(--display); font-weight: 400 !important; }
.step-num { font-family: var(--hand); font-weight: 700 !important; font-size: 1.3rem !important; border-radius: 52% 46% 55% 45% / 48% 55% 45% 52% !important; }

.footer-links a { color: var(--lilas); }

/* ---------- Articles du blog ---------- */
.hero-overlay { background: linear-gradient(to bottom, rgba(13, 11, 38, .15) 0%, rgba(13, 11, 38, .9) 100%) !important; }
.hero-article h1 { color: #fff !important; font-size: clamp(1.9rem, 4vw, 3rem) !important; line-height: 1.08 !important; text-wrap: balance; }
.article-category {
  background: var(--fluo) !important; color: #3A2E10 !important;
  font-family: var(--hand); font-weight: 700 !important; font-size: 1.15rem !important; line-height: 1 !important;
  padding: 6px 12px 7px !important; border-radius: 2px 2px 10px 2px !important; transform: rotate(-2deg);
}
.article-meta { color: rgba(241, 238, 252, .78) !important; }
.article-body h2 { color: var(--graphite) !important; font-size: clamp(1.5rem, 2.8vw, 1.95rem) !important; line-height: 1.15 !important; }
.article-body h3 { color: var(--encre) !important; font-weight: 650 !important; }
.article-body p { color: #3E3A55 !important; }
.article-body strong { color: var(--graphite) !important; background: linear-gradient(transparent 62%, rgba(255, 230, 107, .75) 62%, rgba(255, 230, 107, .75) 92%, transparent 92%); }
.article-intro { border-left: 2px solid var(--marge) !important; color: var(--graphite-2) !important; font-size: 1.12rem !important; }

.method-card, .technique-item, .usage-card, .tip-card {
  background-color: #fff !important; background-image: var(--grain) !important;
  border: 0 !important; border-radius: 4px !important;
  box-shadow: 0 18px 36px -24px rgba(30, 20, 70, .5), 0 2px 6px rgba(30, 20, 70, .08) !important;
}
.method-card { border-top: 5px solid var(--violet) !important; }
.method-number, .technique-num {
  background: var(--papier) !important; color: var(--encre) !important;
  border: 2px solid var(--encre);
  font-family: var(--hand); font-weight: 700 !important; font-size: 1.35rem !important;
  border-radius: 52% 46% 55% 45% / 48% 55% 45% 52% !important;
}
.stat-box, .hygiene-item, .breath-step { border-radius: 4px !important; }
.stat-big { font-family: var(--display); font-weight: 400 !important; color: var(--encre) !important; }
.breathing-box { border-radius: 6px !important; }

.tag { background: var(--papier-2) !important; color: var(--encre) !important; border-radius: 999px; }
.sidebar-card {
  background-color: #fff !important; background-image: var(--grain) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 36px -24px rgba(30, 20, 70, .5), 0 2px 6px rgba(30, 20, 70, .08);
}
.sidebar-card h4 { font-family: var(--hand); font-weight: 700 !important; font-size: 1.5rem !important; color: var(--encre) !important; }
.related-title { color: var(--graphite) !important; }
.related-article:hover .related-title { color: var(--encre) !important; }
.cta-sidebar {
  background-color: var(--nuit) !important;
  background-image: radial-gradient(80% 80% at 100% 0%, rgba(122, 76, 255, .45), transparent 70%) !important;
  border-radius: 6px !important;
}
.cta-sidebar h4 { font-family: var(--display); font-weight: 400 !important; font-size: 1.3rem !important; line-height: 1.15; }
.cta-sidebar a {
  background: var(--violet) !important; color: #fff !important; border-radius: 12px !important;
  box-shadow: 0 5px 0 #4B20B9; transition: transform .18s var(--ease), box-shadow .18s var(--ease) !important;
}
.cta-sidebar a:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #4B20B9; opacity: 1 !important; }
.cta-sidebar a:active { transform: translateY(4px); box-shadow: 0 1px 0 #4B20B9; }
.author-block { background: var(--papier-2) !important; border-radius: 4px !important; }

footer {
  background: var(--nuit) !important;
  color: rgba(241, 238, 252, .6) !important;
}
footer a { color: var(--lilas) !important; }

/* ---------- Suppression de compte ---------- */
main .card {
  background-color: #fff !important; background-image: var(--grain) !important;
  border-radius: 4px !important;
  box-shadow: 0 30px 60px -30px rgba(30, 20, 70, .55), 0 2px 8px rgba(30, 20, 70, .1) !important;
}
main .card h1 { font-size: 2rem !important; line-height: 1.1; }
main input, main textarea { border-radius: 8px !important; }