/*
Theme Name: Linkspire Advisory Child
Theme URI: https://linkspire-advisory.com
Description: Child theme of Astra for Linkspire Advisory. v2.1.0 — ajout safety net CSS body.la-page (neutralise drift .page-header / .entry-header / .entry-title) sans hacks globaux destructifs.
Author: Linkspire Advisory
Author URI: https://linkspire-advisory.com
Template: astra
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linkspire-advisory-child
*/

/* ============================================================
   TOKENS DESIGN
   ============================================================ */
:root {
  --la-bg: #FAFAF7;
  --la-surface: #FFFFFF;
  --la-surface-dark: #0A1628;
  --la-surface-dark-soft: #14213D;
  --la-text-primary: #0A1628;
  --la-text-secondary: #4A5A6B;
  --la-text-muted: #8A9AAB;
  --la-text-on-dark: #F5F3EC;
  --la-text-on-dark-muted: #A8B4C2;
  --la-accent: #C9A961;
  --la-accent-soft: #E8DBB4;
  --la-accent-hover: #B59748;
  --la-border: #E5E5E0;
  --la-border-soft: #EFEFE8;
  --la-border-dark: #1F2D44;
  --la-font-serif: 'Cormorant Garamond', Georgia, serif;
  --la-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --la-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --la-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--la-font-sans);
  background: var(--la-bg);
  color: var(--la-text-primary);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   ASTRA OVERRIDES — RESET CONTENT WRAPPER
   (Astra wrappe le contenu dans .ast-container et .site-content
    avec margin/padding par défaut. On reset.)
   ============================================================ */
.site-content,
.ast-container,
.entry-content,
.hentry,
.post,
.page {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Masque les <p> et <br> vides auto-insérés par wpautop */
.entry-content > p:empty,
.entry-content > br,
section > p:empty,
.la-hero > p:empty,
body p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* ============================================================
   CONTAINERS
   ============================================================ */
.la-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.la-container-narrow { max-width: 840px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .la-container, .la-container-narrow { padding: 0 20px; } }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.la-eyebrow { font-family: var(--la-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--la-accent); margin-bottom: 16px; display: inline-block; }
.la-h1 { font-family: var(--la-font-serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--la-text-primary); font-size: clamp(42px, 6vw, 72px); margin: 0 0 28px; }
.la-h2 { font-family: var(--la-font-serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--la-text-primary); font-size: clamp(32px, 4.5vw, 52px); margin: 0 0 20px; }
.la-h3 { font-family: var(--la-font-serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--la-text-primary); font-size: clamp(24px, 3vw, 34px); margin: 0 0 16px; }
.la-h4 { font-family: var(--la-font-sans); font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
.la-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--la-text-secondary); font-weight: 300; margin: 0 0 40px; max-width: 680px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.la-section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.la-section-light { background: var(--la-surface); }
.la-section-dark { background: var(--la-surface-dark); color: var(--la-text-on-dark); }
.la-section-dark .la-h2, .la-section-dark .la-h3 { color: var(--la-text-on-dark); }
.la-section-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 72px; }
@media (max-width: 800px) { .la-section-split { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   HERO
   ============================================================ */
.la-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.la-btn { display: inline-flex; align-items: center; padding: 14px 28px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s var(--la-ease); cursor: pointer; border: 1px solid transparent; }
.la-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 10vw, 120px); position: relative; overflow: hidden; }
.la-hero-inner { max-width: 960px; }
.la-hero-deco { position: absolute; top: 80px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, var(--la-accent-soft) 0%, transparent 70%); opacity: 0.4; pointer-events: none; z-index: 0; }
.la-hero > * { position: relative; z-index: 1; }
.la-btn-primary { background: var(--la-surface-dark); color: var(--la-text-on-dark); border-color: var(--la-surface-dark); }
.la-btn-primary:hover { background: var(--la-accent); color: var(--la-surface-dark); border-color: var(--la-accent); }
.la-btn-ghost { background: transparent; color: var(--la-text-primary); border-color: var(--la-border); }
.la-btn-ghost:hover { background: var(--la-surface-dark); color: var(--la-text-on-dark); border-color: var(--la-surface-dark); }
.la-btn-accent { background: var(--la-accent); color: var(--la-surface-dark); border-color: var(--la-accent); }
.la-btn-accent:hover { background: var(--la-accent-hover); border-color: var(--la-accent-hover); }
.la-btn-ghost-light { background: transparent; color: var(--la-text-on-dark); border-color: var(--la-border-dark); }
.la-btn-ghost-light:hover { background: var(--la-text-on-dark); color: var(--la-surface-dark); }

/* ============================================================
   SERVICES GRID (4 cartes expertises)
   ============================================================ */
.la-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--la-border-soft); border: 1px solid var(--la-border-soft); }
@media (max-width: 800px) { .la-services-grid { grid-template-columns: 1fr; } }
.la-service-card { background: var(--la-surface); padding: 48px 40px; transition: all 0.4s var(--la-ease); cursor: pointer; min-height: 280px; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.la-service-card:hover { background: var(--la-surface-dark); color: var(--la-text-on-dark); }
.la-service-card:hover .la-h3 { color: var(--la-accent); }
.la-service-num { font-family: var(--la-font-mono); font-size: 11px; color: var(--la-accent); letter-spacing: 0.15em; margin-bottom: 28px; display: block; }
.la-service-card .la-h3 { font-size: 24px; margin-bottom: 16px; transition: color 0.3s; }
.la-service-card p { font-size: 15px; line-height: 1.6; color: var(--la-text-secondary); margin: 0 0 24px; flex-grow: 1; transition: color 0.3s; }
.la-service-card:hover p { color: var(--la-text-on-dark-muted); }
.la-service-link { font-family: var(--la-font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--la-accent); }

/* ============================================================
   MODALITÉS GRID (4 formats d'engagement)
   ============================================================ */
.la-modalites-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .la-modalites-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .la-modalites-grid { grid-template-columns: 1fr; } }
.la-modalite { padding: 32px 0; border-top: 2px solid var(--la-surface-dark); }
.la-modalite p { font-size: 15px; color: var(--la-text-secondary); margin: 0; }

/* ============================================================
   PRINCIPES (3 piliers Linkspire)
   ============================================================ */
.la-principes { display: grid; grid-template-columns: 1fr; gap: 0; }
.la-principe-item { display: grid; grid-template-columns: auto 1fr; gap: 40px; padding: 32px 0; border-top: 1px solid var(--la-border-soft); align-items: start; }
.la-principe-item:last-child { border-bottom: 1px solid var(--la-border-soft); }
.la-principe-num { font-family: var(--la-font-mono); font-size: 12px; color: var(--la-accent); letter-spacing: 0.1em; padding-top: 6px; }
.la-principe-body h4 { margin-bottom: 8px; font-family: var(--la-font-serif); font-weight: 500; font-size: 22px; color: var(--la-text-primary); }
.la-principe-body p { font-size: 16px; margin: 0; }
@media (max-width: 720px) { .la-principe-item { grid-template-columns: 1fr; gap: 8px; } }

/* ============================================================
   CTA BAND (call-to-action plein largeur en bas de page)
   ============================================================ */
.la-cta-band { background: var(--la-surface-dark); color: var(--la-text-on-dark); padding: clamp(60px, 8vw, 100px) 0; }
.la-cta-band-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.la-cta-band .la-h2 { color: var(--la-text-on-dark); }
.la-cta-band-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 800px) { .la-cta-band-inner { grid-template-columns: 1fr; } .la-cta-band-buttons { justify-content: flex-start; } }

/* ============================================================
   EXPERTISE SUB-PAGES (Trésorerie, Paiements, etc.)
   ============================================================ */
.la-breadcrumb { font-family: var(--la-font-mono); font-size: 11px; color: var(--la-text-muted); padding: 24px 0; letter-spacing: 0.1em; text-transform: uppercase; }
.la-breadcrumb a { color: var(--la-text-muted); text-decoration: none; transition: color 0.2s; }
.la-breadcrumb a:hover { color: var(--la-accent); }
.la-breadcrumb .sep { margin: 0 12px; opacity: 0.5; }
.la-expertise-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px); }
.la-perimetre-list { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 48px; }
@media (max-width: 800px) { .la-perimetre-list { column-count: 1; } }
.la-perimetre-list li { font-size: 15px; line-height: 1.6; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--la-border-soft); position: relative; break-inside: avoid; color: var(--la-text-primary); }
.la-perimetre-list li::before { content: "→"; position: absolute; left: 0; color: var(--la-accent); font-family: var(--la-font-mono); }

/* ============================================================
   CYCLE GRID (4 verbes d'action)
   ============================================================ */
.la-cycle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--la-border-soft); border: 1px solid var(--la-border-soft); }
@media (max-width: 900px) { .la-cycle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .la-cycle-grid { grid-template-columns: 1fr; } }
.la-cycle-card { background: var(--la-surface); padding: 36px 28px; }
.la-cycle-step { font-family: var(--la-font-mono); font-size: 11px; color: var(--la-accent); letter-spacing: 0.1em; margin-bottom: 16px; }
.la-cycle-card h4 { font-family: var(--la-font-serif); font-size: 24px; font-weight: 500; margin: 0 0 12px; color: var(--la-text-primary); }
.la-cycle-card p { font-size: 14px; line-height: 1.55; color: var(--la-text-secondary); margin: 0; }

/* ============================================================
   TECH BLOC (Technologies & standards)
   ============================================================ */
.la-tech-bloc { background: var(--la-surface); padding: 48px 56px; border-left: 3px solid var(--la-accent); }
.la-tech-bloc p { font-size: 16px; line-height: 1.7; margin: 0; color: var(--la-text-primary); }
@media (max-width: 700px) { .la-tech-bloc { padding: 32px 24px; } }

/* ============================================================
   GESTION BLOC (capacité transverse)
   ============================================================ */
.la-gestion-bloc { background: var(--la-surface); padding: 48px 56px; border-left: 3px solid var(--la-accent); max-width: 880px; }
.la-gestion-bloc p { font-size: 16px; line-height: 1.7; margin: 0; color: var(--la-text-primary); }

/* ============================================================
   METHODOLOGY LINK
   ============================================================ */
.la-methodology-link { font-family: var(--la-font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--la-accent); text-decoration: none; display: inline-block; padding-bottom: 4px; border-bottom: 1px solid var(--la-accent); transition: color 0.3s; }
.la-methodology-link:hover { color: var(--la-accent-hover); border-color: var(--la-accent-hover); }

/* ============================================================
   TIMELINE (Méthodologie page — 4 étapes en serpent)
   ============================================================ */
.la-timeline { position: relative; max-width: 920px; margin: 0 auto; padding-top: 32px; }
.la-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--la-border); transform: translateX(-50%); z-index: 0; }
.la-timeline-step { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; margin-bottom: 80px; position: relative; }
.la-timeline-step:last-child { margin-bottom: 0; }
.la-timeline-content { background: var(--la-surface); padding: 36px 32px; position: relative; z-index: 1; }
.la-timeline-step-num { font-family: var(--la-font-mono); font-size: 11px; color: var(--la-accent); letter-spacing: 0.1em; margin-bottom: 12px; }
.la-timeline-verb { font-family: var(--la-font-serif); font-size: 32px; font-weight: 500; color: var(--la-text-primary); margin-bottom: 16px; line-height: 1.1; }
.la-timeline-content p { font-size: 14px; line-height: 1.6; color: var(--la-text-secondary); margin: 0 0 16px; }
.la-timeline-content h5 { font-family: var(--la-font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--la-accent); margin: 16px 0 6px; font-weight: 500; }
.la-timeline-step:nth-child(odd) .la-timeline-content { padding-right: 48px; text-align: right; }
.la-timeline-step:nth-child(odd) .la-timeline-content { grid-column: 1; }
.la-timeline-step:nth-child(even) .la-timeline-content { padding-left: 48px; grid-column: 2; }
.la-timeline-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: var(--la-accent); border-radius: 50%; z-index: 2; }
@media (max-width: 800px) {
  .la-timeline::before { left: 12px; }
  .la-timeline-step { grid-template-columns: 1fr; padding-left: 36px; margin-bottom: 48px; }
  .la-timeline-step:nth-child(odd) .la-timeline-content,
  .la-timeline-step:nth-child(even) .la-timeline-content { padding: 24px; text-align: left; grid-column: 1; }
  .la-timeline-node { left: 12px; top: 28px; transform: translate(-50%, 0); }
}

/* ============================================================
   TRANSVERSE GRID (principes méthodologie)
   ============================================================ */
.la-transverse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--la-border-soft); border: 1px solid var(--la-border-soft); }
@media (max-width: 700px) { .la-transverse-grid { grid-template-columns: 1fr; } }
.la-transverse-item { background: var(--la-surface); padding: 32px; }
.la-transverse-item p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--la-text-primary); }

/* ============================================================
   EXPERTISES LIST MINI (méthodologie → liens vers expertises)
   ============================================================ */
.la-expertises-list-mini { display: flex; flex-direction: column; gap: 0; max-width: 840px; margin: 0 auto; }
.la-expertises-list-mini a { display: flex; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid var(--la-border-soft); color: var(--la-text-primary); font-family: var(--la-font-serif); font-size: 22px; font-weight: 500; text-decoration: none; transition: padding 0.3s; }
.la-expertises-list-mini a:hover { padding-left: 16px; color: var(--la-accent); }
.la-expertises-list-mini a:first-child { border-top: 1px solid var(--la-border-soft); }
.la-expertises-list-mini span { color: var(--la-accent); font-family: var(--la-font-mono); font-size: 14px; }

/* ============================================================
   CONTACT (page Contact — formulaire + coordonnées)
   ============================================================ */
.la-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
@media (max-width: 900px) { .la-contact-grid { grid-template-columns: 1fr; gap: 48px; } }
.la-contact-form-wrap { width: 100%; }
.la-contact-info h3 { margin-bottom: 16px; }
.la-contact-block { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--la-border-soft); }
.la-contact-block:last-child { border: none; }
.la-contact-block h5 { font-family: var(--la-font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--la-accent); margin: 0 0 8px; font-weight: 500; }
.la-contact-block p { font-size: 16px; color: var(--la-text-primary); margin: 0 0 4px; }
.la-contact-block a { color: var(--la-accent); font-weight: 500; text-decoration: none; }
.la-contact-block ol { list-style: none; counter-reset: opt; margin: 12px 0 0; padding: 0; }
.la-contact-block ol li { counter-increment: opt; position: relative; padding-left: 32px; padding-bottom: 10px; font-size: 15px; color: var(--la-text-primary); }
.la-contact-block ol li::before { content: counter(opt); position: absolute; left: 0; top: 0; font-family: var(--la-font-mono); font-size: 11px; color: var(--la-accent); width: 20px; height: 20px; border: 1px solid var(--la-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   PAGES LÉGALES (mentions, politique de confidentialité)
   ============================================================ */
.la-legal { max-width: 880px; margin: 0 auto; padding: 80px 32px; }
.la-legal h1 { font-family: var(--la-font-serif); font-size: clamp(36px, 5vw, 56px); font-weight: 500; line-height: 1.1; color: var(--la-text-primary); margin: 0 0 24px; }
.la-legal h2 { font-family: var(--la-font-serif); font-size: 24px; font-weight: 500; color: var(--la-text-primary); margin: 48px 0 16px; }
.la-legal p { font-size: 16px; line-height: 1.7; color: var(--la-text-primary); margin: 0 0 16px; }
.la-legal ul, .la-legal ol { padding-left: 24px; margin: 0 0 16px; }
.la-legal li { font-size: 16px; line-height: 1.7; color: var(--la-text-primary); margin-bottom: 8px; }
.la-legal a { color: var(--la-accent); text-decoration: underline; }
.la-meta-dl { display: grid; grid-template-columns: 200px 1fr; gap: 12px 24px; margin: 24px 0; padding: 24px; background: var(--la-surface); border-left: 3px solid var(--la-accent); }
.la-meta-dl dt { font-family: var(--la-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--la-accent); margin: 0; }
.la-meta-dl dd { margin: 0; font-size: 15px; color: var(--la-text-primary); }
@media (max-width: 700px) { .la-meta-dl { grid-template-columns: 1fr; gap: 4px 0; } .la-meta-dl dd { margin-bottom: 12px; } }

/* ============================================================
   GLOBAL UTILITIES
   ============================================================ */
a { transition: color 0.2s ease; }
a:hover { color: var(--la-accent); }
#comments, .comments-area { display: none; }

/* ============================================================
   v2.1 · SAFETY NET — UNIQUEMENT sur body.la-page
   (ajouté par le snippet la-clean-render — neutralise tout drift
    de wrapper thème qui ré-apparaîtrait. Pas de hack global.)
   ============================================================ */
body.la-page .page-header,
body.la-page .entry-header,
body.la-page .entry-title,
body.la-page header.entry-header,
body.la-page div.page-header,
body.la-page .ast-page-header,
body.la-page .elementor-page-title {
  display: none !important;
}

body.la-page main#content,
body.la-page main.site-main,
body.la-page .site-main,
body.la-page .page-content,
body.la-page article.page,
body.la-page article.hentry {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Première section Linkspire colle au haut du wrapper */
body.la-page .entry-content > section:first-child,
body.la-page .entry-content > .la-hero:first-child,
body.la-page article > section:first-child,
body.la-page main > section:first-child {
  margin-top: 0 !important;
}