/* =====================================================================
   Clic and Connect — page-theme.css
   Surcharge « Studio obsidienne — réseau vivant » pour les pages SEO
   (chrome legal-page). Chargée APRÈS styles.css. Harmonise les pages
   catégories au monde de l'accueil (indigo/violet neural).
   ===================================================================== */

body.legal-page {
  --bg: #0B0B16; --bg-2: #0D0E1B; --panel: #141527; --panel-2: #1A1B30;
  --glass: rgba(20,21,40,.7);
  --line: rgba(237,235,247,.10); --line-2: rgba(237,235,247,.17); --line-heat: rgba(139,124,255,.30);
  --ink: #ECEAF6; --ink-soft: #9B9AB8; --ink-dim: #8A8AA6;
  --heat: #8B7CFF; --heat-2: #6366F1; --heat-core: #C4B5FD; --heat-txt: #A99CFF;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Libre Franklin", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, monospace;

  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--f-body) !important;
}
body.legal-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, #14142c 0%, #0B0B16 55%, #06060e 100%);
}

/* Sélections & barres */
body.legal-page ::selection { background: var(--heat); color: #12101e; }
body.legal-page * { scrollbar-color: var(--heat-2) var(--bg-2); }
body.legal-page :focus-visible { outline: 2px solid var(--heat); outline-offset: 3px; }

/* Typo */
body.legal-page h1, body.legal-page h2, body.legal-page h3, body.legal-page h4 { font-family: var(--f-display) !important; color: var(--ink) !important; letter-spacing: -0.03em; }
body.legal-page p, body.legal-page li, body.legal-page a { color: var(--ink-soft); }
body.legal-page strong { color: var(--ink); }
body.legal-page a { color: var(--heat-txt); }

/* En-tête */
body.legal-page .legal-nav {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line) !important;
}
body.legal-page .legal-nav__brand { color: var(--ink) !important; font-family: var(--f-display); }
body.legal-page .legal-nav__brand .lw, body.legal-page .lw { color: var(--heat) !important; }
body.legal-page .legal-nav__back { color: var(--ink-soft) !important; transition: color .2s ease; }
body.legal-page .legal-nav__back:hover { color: var(--heat) !important; }

/* Hero — rappel du réseau (champ de points) */
body.legal-page .legal-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(62% 72% at 72% 22%, rgba(139,124,255,.14), transparent 60%),
    linear-gradient(180deg, #0d0d20, #0B0B16) !important;
  border-bottom: 1px solid var(--line);
}
body.legal-page .legal-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(139,124,255,.22) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 65% at 70% 25%, #000, transparent 72%);
  mask-image: radial-gradient(70% 65% at 70% 25%, #000, transparent 72%);
}
body.legal-page .legal-hero > * { position: relative; z-index: 1; }

/* Fil d'Ariane + eyebrow */
body.legal-page .local-breadcrumb, body.legal-page .local-breadcrumb a { color: var(--ink-dim) !important; }
body.legal-page .local-breadcrumb a:hover { color: var(--heat-txt) !important; }
body.legal-page .eyebrow { color: var(--heat-txt) !important; font-family: var(--f-mono); letter-spacing: .14em; }

/* Titre : plus de gradient-text bleu → violet plein */
body.legal-page .gradient-text {
  color: var(--heat) !important;
  -webkit-text-fill-color: var(--heat) !important;
  background: none !important;
  text-shadow: 0 0 30px rgba(139,124,255,.45);
}
body.legal-page .lead { color: var(--ink-soft) !important; }
body.legal-page .hero-note { color: var(--ink-dim) !important; }
body.legal-page .hero-note strong { color: var(--heat-txt); }

/* Sections */
body.legal-page .section { border-color: var(--line) !important; }
body.legal-page .legal-section h2 .num { color: var(--ink-dim) !important; } /* 5.8:1 sur obsidienne */
body.legal-page .section-title { color: var(--ink) !important; }

/* Boutons */
body.legal-page .btn-primary {
  color: #14100a !important; border: none !important;
  background: linear-gradient(135deg, var(--heat-core), var(--heat) 45%, var(--heat-2)) !important;
  box-shadow: 0 20px 50px -18px rgba(124,110,255,.5), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
body.legal-page .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -18px rgba(124,110,255,.6) !important; }
body.legal-page .btn-secondary {
  color: var(--ink) !important;
  background: rgba(237,235,247,.03) !important;
  border: 1px solid var(--line-2) !important;
}
body.legal-page .btn-secondary:hover { border-color: var(--line-heat) !important; background: rgba(139,124,255,.06) !important; }

/* Cartes (highlights, legal-card, steps) */
body.legal-page .highlight,
body.legal-page .legal-card,
body.legal-page .local-steps > *,
body.legal-page .local-faq {
  background: linear-gradient(180deg, rgba(26,27,48,.7), rgba(15,16,27,.55)) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,.6);
}
body.legal-page .highlight:hover, body.legal-page .legal-card:hover { border-color: var(--line-heat) !important; }
body.legal-page .highlight h3, body.legal-page .legal-card h3, body.legal-page .local-steps h3, body.legal-page .local-faq h3, body.legal-page .local-faq summary { color: var(--ink) !important; }
body.legal-page .highlight p, body.legal-page .legal-card p, body.legal-page .local-steps p, body.legal-page .local-faq p { color: var(--ink-soft) !important; }
body.legal-page .highlight-ic {
  color: var(--heat) !important;
  background: rgba(139,124,255,.10) !important;
  border: 1px solid var(--line-heat) !important;
}

/* FAQ */
body.legal-page .local-faq summary { cursor: pointer; background: transparent !important; }
body.legal-page .local-faq p { background: transparent !important; border: none !important; box-shadow: none !important; }
body.legal-page .local-faq summary::marker, body.legal-page .local-faq summary::-webkit-details-marker { color: var(--heat); }

/* Maillage interne */
body.legal-page .cross-links { border-color: var(--line) !important; }
body.legal-page .cross-links a {
  background: linear-gradient(180deg, rgba(26,27,48,.7), rgba(15,16,27,.55)) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
body.legal-page .cross-links a span { color: var(--ink-soft) !important; }
body.legal-page .cross-links a:hover { border-color: var(--line-heat) !important; color: var(--heat-core) !important; }

/* Pied de page */
body.legal-page .legal-footer {
  background: linear-gradient(180deg, transparent, rgba(6,6,14,.6)) !important;
  border-top: 1px solid var(--line-2) !important;
  color: var(--ink-soft) !important;
}
body.legal-page .legal-footer__copy, body.legal-page .legal-footer__links a { color: var(--ink-soft) !important; }
body.legal-page .legal-footer__links a:hover { color: var(--heat-txt) !important; }
body.legal-page .legal-footer .sep { color: var(--ink-dim) !important; }

/* Cookies (aligné accent) */
body.legal-page .cookie-consent .c-accept { color: #14100a !important; background: linear-gradient(135deg, var(--heat-core), var(--heat)) !important; border: none !important; }

/* Transitions de page (View Transitions API — accueil ↔ catégories) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .3s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-new(root) { animation: vtIn .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* =====================================================================
   BLOG — liste d'articles et corps d'article
   ===================================================================== */

/* Liste — une carte par article */
body.legal-page .post-list { display: grid; gap: 18px; margin-top: 28px; }
body.legal-page .post-card {
  display: block; padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--glass);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
body.legal-page .post-card:hover { border-color: var(--line-heat); transform: translateY(-2px); }
body.legal-page .post-card h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); margin: .5rem 0 .6rem; }
body.legal-page .post-card:hover h2 { color: var(--heat-core) !important; }
body.legal-page .post-card p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
body.legal-page .post-meta {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--heat-txt); display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
body.legal-page .post-more { display: inline-block; margin-top: 1rem; color: var(--heat-txt); font-weight: 600; }

/* Corps d'article — colonne de lecture */
body.legal-page .post { max-width: 720px; margin: 0 auto; }
body.legal-page .post > p { line-height: 1.8; margin: 0 0 1.2rem; font-size: 1.02rem; }
body.legal-page .post h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin: 2.8rem 0 1rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
body.legal-page .post h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem); margin: 1.9rem 0 .7rem; }
body.legal-page .post ul, body.legal-page .post ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
body.legal-page .post li { line-height: 1.75; margin-bottom: .6rem; }
body.legal-page .post a { border-bottom: 1px solid var(--line-heat); padding-bottom: 1px; }
body.legal-page .post a:hover { color: var(--heat-core); }

/* Chapô */
body.legal-page .post-lead { font-size: 1.14rem !important; line-height: 1.7 !important; color: var(--ink) !important; }

/* Encadré « à retenir » */
body.legal-page .post-aside {
  margin: 2rem 0; padding: clamp(18px, 2.6vw, 24px);
  border: 1px solid var(--line); border-left: 2px solid var(--heat); border-radius: 0 14px 14px 0;
  background: rgba(20,21,39,.5);
}
body.legal-page .post-aside h3 { margin: 0 0 .6rem; font-size: 1rem; }
body.legal-page .post-aside p:last-child { margin-bottom: 0; }

/* Tableau de prix */
body.legal-page .post-table { width: 100%; margin: 1.6rem 0 2rem; border-collapse: collapse; font-size: .95rem; }
body.legal-page .post-table th, body.legal-page .post-table td { padding: .85rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
body.legal-page .post-table thead th {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--heat-txt) !important; border-bottom-color: var(--line-2);
}
body.legal-page .post-table td:first-child { color: var(--ink) !important; font-weight: 600; }
body.legal-page .post-table tbody tr:hover td { background: rgba(139,124,255,.04); }
body.legal-page .post-table caption { caption-side: bottom; padding-top: .9rem; font-size: .82rem; color: var(--ink-dim); text-align: left; }
@media (max-width: 560px) {
  body.legal-page .post-table { font-size: .88rem; }
  body.legal-page .post-table th, body.legal-page .post-table td { padding: .7rem .45rem; }
}

/* Bloc de fin d'article */
body.legal-page .post-cta {
  margin-top: 3rem; padding: clamp(22px, 3.4vw, 34px); text-align: center;
  border: 1px solid var(--line-heat); border-radius: 18px;
  background: linear-gradient(180deg, rgba(30,26,60,.55), rgba(13,14,27,.45));
}
body.legal-page .post-cta h2 { border-top: none; padding-top: 0; margin-top: 0; }
body.legal-page .post-sign { margin-top: 2.4rem; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; color: var(--ink-dim) !important; }

/* Liens en plein texte : soulignés, pour rester distinguables sans la couleur (WCAG 1.4.1) */
body.legal-page .container p a:not(.btn),
body.legal-page .local-faq p a:not(.btn),
body.legal-page .local-steps li a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.legal-page .container p a:not(.btn):hover { color: var(--heat-core); }