@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ============================================================
   LUCAS PROPFIRM — Thème professionnel unifié « Atelier »
   Couche d'harmonisation chargée EN DERNIER sur chaque page.
   Objectif : une seule typographie + une seule palette sur les
   deux sous-systèmes du site (pages "articles" pilotées par
   variables CSS, et pages "landing" en classes .lp-*).
   ============================================================ */

:root {
  /* ---- Palette papier chaud, professionnelle ---- */
  --lp-paper:     #FCFBF7;
  --lp-surface:   #FFFFFF;
  --lp-surface-2: #F5F3EC;
  --lp-ink:       #1B1A16;
  --lp-ink-soft:  #3B3930;
  --lp-muted:     #6E6C62;
  --lp-faint:     #908D82;
  --lp-line:      #E7E3D8;
  --lp-line-2:    #D8D3C5;
  --lp-accent:    #C15F3C;   /* orange "Claude" — terracotta */
  --lp-accent-d:  #9F4527;
  --lp-accent-t:  rgba(193,95,60,0.09);
  --lp-loss:      #C23B3B;

  --lp-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --lp-font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Pont vers le sous-système "articles" (variables --color-*) ---- */
  --color-bg:         var(--lp-paper);
  --color-surface:    var(--lp-surface);
  --color-surface-2:  var(--lp-surface-2);
  --color-border:     var(--lp-line);
  --color-accent:     var(--lp-accent);
  --color-accent-2:   var(--lp-accent);
  --color-accent-3:   var(--lp-accent);
  --color-danger:     var(--lp-loss);
  --color-text:       var(--lp-ink);
  --color-text-muted: var(--lp-muted);
  --color-text-faint: var(--lp-faint);
  --font-display:     var(--lp-font-display);
  --font-body:        var(--lp-font-body);
  --shadow-card:      0 1px 2px rgba(27,26,22,.04), 0 10px 34px rgba(27,26,22,.06);
  --shadow-glow:      0 0 0 1px var(--lp-line);

  /* ---- Pont vers le sous-système "landing/guides" (variables --gold, --bg…) ---- */
  --gold:            var(--lp-accent);
  --gold-light:      #D98E6E;
  --gold-dark:       var(--lp-accent-d);
  --bg:              var(--lp-paper);
  --bg-card:         var(--lp-surface);
  --bg-secondary:    var(--lp-surface-2);
  --text:            var(--lp-ink);
  --text-secondary:  var(--lp-ink-soft);
  --gray:            var(--lp-muted);
  --gray-light:      var(--lp-muted);
  --border:          var(--lp-line);
  --border-color:    var(--lp-line);
}

/* ---- Base ---- */
html, body {
  background-color: var(--lp-paper);
  color: var(--lp-ink);
  font-family: var(--lp-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.light-mode { background-color: var(--lp-paper); color: var(--lp-ink); }

/* Atténue la texture de bruit des pages articles (plus calme/pro) */
body::before { opacity: .06 !important; }

/* ---- Révèle les contenus à animation d'apparition ----
   Beaucoup de sections démarrent à opacity:0 et sont révélées au scroll par
   script.min.js. Si ce JS ne tourne pas (aperçu), elles restent invisibles
   (ex. bandeau CTA vide). On force l'état visible : le contenu prime. */
.animate-on-scroll, .fade-in-up, .fade-in, .fade-up, .reveal, .scroll-reveal,
.slide-up, .slide-in, .cta-content, [class*="fade-in-up"], [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

/* ---- Corps de texte ---- */
p, li, td, th, dd, dt, blockquote, figcaption, label,
.body, .article-intro, .article-content p, .article-content li,
.lp-prose, .lp-prose p, .lp-prose li {
  font-family: var(--lp-font-body);
}
/* Corps de texte : forcer une encre lisible.
   (Les pages héritent d'un gris clair #d2d2d7 prévu pour fond sombre,
   posé avec une spécificité qui battait l'override de variable.) */
p, li, dd, blockquote,
main p, main li, .content p, .content li,
.article-content p, .article-content li, .article-container p, .article-container li,
.article-body p, .article-body li, section p, section li, .container p, .lp-prose p, .lp-prose li {
  color: var(--lp-ink-soft) !important;
}
.article-content { font-size: 17px; line-height: 1.78; }
/* Mots en gras (<strong>/<b>) dans le texte : blancs hérités du thème sombre -> encre lisible.
   (Scopé au texte courant : on ne touche pas au <b> blanc/ambre de la barre promo.) */
p strong, p b, li strong, li b, blockquote strong, dd strong, td strong, .lead strong,
.content strong, .content b, .article-content strong, .article-content b,
.article-container strong, .article-body strong, main p strong, section p strong {
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
}
/* Liens dans le texte courant : émeraude, bien visibles */
.content p a, .article-content p a, .article-container p a, .article-body p a, main p a, section p a, .content li a, .article-content li a {
  color: var(--lp-accent) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  -webkit-text-fill-color: var(--lp-accent) !important;
  opacity: 1 !important;
}
/* Sous-titres "intro" volontairement un peu plus doux, mais lisibles */
.hero-subtitle, .article-intro, .lead { color: var(--lp-muted) !important; }

/* ---- Titres : serif éditoriale ---- */
h1, h2, h3, h4, h5,
.display, .h1, .h2, .h3,
.article-title, .article-header h1,
.section-title, .section-header h2,
.lp-hero h1, .blog-hero h1, .lp-h1, .lp-h2,
.feature-card h2, .feature-card h3, .feature-card h4,
.article-cta h3, .next-article-title, .footer-logo, .nav-logo {
  font-family: var(--lp-font-display) !important;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.12;
}
h3, h4, h5, .h3, .nav-logo, .footer-logo { line-height: 1.25; }

/* Mot-accent en italique vert (signature de marque) */
h1 em, h2 em, .article-title em,
.lp-hero h1 em, .blog-hero h1 em, .section-title em {
  font-family: var(--lp-font-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--lp-accent) !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ---- Chiffres / prix / code : mono tabulaire ---- */
.mono, .mono-num, code, kbd, samp, .data-table td:first-child,
.sticky-code-value, .lp-price, .price, [class*="-price"],
[class*="price-"], [class*="amount"], [class*="-num"] {
  font-family: var(--lp-font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---- Liens ---- */
a { color: var(--lp-accent); }
a:hover { opacity: .82; }

/* ============================================================
   Sous-système "articles" (classes .nav, .btn-*, *-box, etc.)
   ============================================================ */
.nav { background: rgba(252,251,247,.82) !important; border-bottom: 1px solid var(--lp-line) !important; }
.nav-logo { color: var(--lp-ink) !important; }
.logo-badge, .nav-cta { background: var(--lp-accent) !important; color: #fff !important; }
.nav-cta:hover { background: var(--lp-accent-d) !important; opacity: 1; }

.article-category, .next-article-label, .breadcrumb { color: var(--lp-muted) !important; }
.article-category { color: var(--lp-accent) !important; }

.btn-primary { background: var(--lp-accent) !important; color: #fff !important; border-radius: 999px !important; }
.btn-primary:hover { background: var(--lp-accent-d) !important; opacity: 1; }
.btn-secondary { color: var(--lp-accent) !important; border: 1px solid var(--lp-accent) !important; background: transparent !important; border-radius: 999px !important; }
.btn-secondary:hover { background: var(--lp-accent-t) !important; opacity: 1; }

.tip-box, .example-box, .takeaway-box, .article-cta {
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-line) !important;
  border-left: 3px solid var(--lp-accent) !important;
  box-shadow: var(--shadow-card);
}
.warning-box {
  background: #FCF6EE !important;
  border: 1px solid #ECDDC4 !important;
  border-left: 3px solid #C58A2E !important;
}
.takeaway-box h4 { color: var(--lp-accent) !important; }
.data-table { border: 1px solid var(--lp-line) !important; }
.data-table thead { background: var(--lp-surface-2) !important; }
.data-table th { color: var(--lp-ink) !important; }
.data-table td, .data-table th { border-color: var(--lp-line) !important; }

.next-article-card { background: var(--lp-surface) !important; border: 1px solid var(--lp-line) !important; box-shadow: var(--shadow-card); }
.next-article-card:hover { border-color: var(--lp-line-2) !important; }
.next-article-num, .next-article-arrow { color: var(--lp-accent) !important; }

.footer { background: var(--lp-surface-2) !important; border-top: 1px solid var(--lp-line) !important; color: var(--lp-muted) !important; }
.footer-logo { color: var(--lp-ink) !important; }
.footer-links a { color: var(--lp-muted) !important; }
.footer-links a:hover { color: var(--lp-accent) !important; }

/* ============================================================
   Sous-système "landing" (.lp-*) — ré-habillage des boutons/accents
   (mêmes sélecteurs que la couche apple précédente pour gagner la cascade)
   ============================================================ */
a.lp-btn--primary, .lp-btn--primary,
a.lp-btn.lp-btn--primary, a.lp-btn--primary.lp-btn--lg,
.inline-cta-block a.lp-btn--primary,
.article-body a.lp-btn--primary {
  background: var(--lp-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
a.lp-btn--primary:hover, .lp-btn--primary:hover { background: var(--lp-accent-d) !important; color: #fff !important; }
a.lp-btn--secondary, .lp-btn--secondary {
  color: var(--lp-accent) !important;
  background: transparent !important;
  border: 1px solid var(--lp-accent) !important;
  border-radius: 999px !important;
}
a.lp-btn--secondary:hover, .lp-btn--secondary:hover { background: var(--lp-accent-t) !important; }

.inline-cta-block { background: var(--lp-surface) !important; color: var(--lp-ink) !important; border: 1px solid var(--lp-line) !important; }
.inline-cta-block h3 { color: var(--lp-ink) !important; }
.inline-cta-block p { color: var(--lp-ink-soft) !important; }

.feature-card { background: var(--lp-surface) !important; border: 1px solid var(--lp-line) !important; box-shadow: var(--shadow-card); }
.feature-card h2, .feature-card h3, .feature-card h4 { color: var(--lp-ink) !important; }
.feature-card p, .feature-card li { color: var(--lp-ink-soft) !important; }

.features-section { background: var(--lp-paper) !important; }
.features-section h2, .features-section h3, .features-section h4 { color: var(--lp-ink) !important; }
.features-section p, .features-section li { color: var(--lp-ink-soft) !important; }

.lp-keytake li, .lp-keytake__item { background: var(--lp-surface) !important; color: var(--lp-ink) !important; border: 1px solid var(--lp-line) !important; }
.lp-keytake__h { color: var(--lp-ink) !important; }
.lp-keytake li b, .lp-keytake__item strong { color: var(--lp-accent) !important; }

.blog-hero h1 em, .lp-hero h1 em, h1 em {
  background: transparent !important; padding: 0 !important;
  color: var(--lp-accent) !important; font-style: italic !important;
}
.cta-label { background: var(--lp-surface) !important; color: var(--lp-accent) !important; border: 1px solid var(--lp-line); }
.related-card, [class*="related"] .related-card { background: var(--lp-surface) !important; border: 1px solid var(--lp-line) !important; }
.related-card h3, .related-card p { color: var(--lp-ink) !important; }
.related-articles h3, .article-recommendation h3 { color: var(--lp-ink) !important; }

.section-label, .eyebrow { color: var(--lp-accent) !important; font-family: var(--lp-font-mono) !important; letter-spacing: .14em; text-transform: uppercase; }

/* ---- FAQ / accordéons : questions & réponses lisibles (texte blanc hérité) ---- */
.faq-question, .faq-question span, .faq-q, .faq-title, .faq-item button,
.accordion-header, .accordion-trigger, .accordion-title,
[class*="faq"] button, [class*="faq"] summary, details > summary {
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
  font-weight: 600;
}
.faq-answer, .faq-answer *, .faq-answer-content, .faq-answer-content *,
.accordion-body, .accordion-content, .accordion-content * {
  color: var(--lp-ink-soft) !important;
  -webkit-text-fill-color: var(--lp-ink-soft) !important;
}
.faq-item, .faq-question, .accordion-item, .accordion-header { background-color: var(--lp-surface) !important; border-color: var(--lp-line) !important; }
.faq-icon, .faq-question .faq-icon, .accordion-icon { color: var(--lp-accent) !important; -webkit-text-fill-color: var(--lp-accent) !important; }

/* ============================================================
   CORRECTIF LISIBILITÉ — héritage du thème SOMBRE d'origine.
   Beaucoup de pages définissent leurs cartes en blanc-translucide
   (rgba(255,255,255,.03)) + texte blanc + cellules sombres : sur
   fond clair, tout disparaît. On rend ces surfaces/textes visibles.
   (S'applique partout : aperçu ET serveur, car le défaut existe aussi
   en ligne.)
   ============================================================ */

/* 1) Surfaces "carte / encadré" translucides -> surface claire visible */
[class*="-card"], [class*="-box"], [class*="-tile"], [class*="-panel"],
.review-card, .pros-card, .cons-card, .account-mini-card, .firm-card,
.checklist-box, .faq-inline-item, .journal-template, .info-box, .stat-card,
.metric-card, .tier-card, .plan-card, .data-card, .note-box, .callout,
.highlight-box, .summary-box, .step-card, .tool-card, .template-value {
  background-color: var(--lp-surface) !important;
  border-color: var(--lp-line) !important;
}
/* Cartes stylées en inline (blanc translucide) */
[style*="rgba(255,255,255,0.02)"], [style*="rgba(255,255,255,0.03)"],
[style*="rgba(255,255,255,0.04)"], [style*="rgba(255,255,255,0.05)"],
[style*="rgba(255, 255, 255, 0.02)"], [style*="rgba(255, 255, 255, 0.03)"],
[style*="rgba(255, 255, 255, 0.04)"], [style*="rgba(255, 255, 255, 0.05)"] {
  background-color: var(--lp-surface) !important;
  border-color: var(--lp-line) !important;
}

/* 2) Tableaux comparatifs : texte FONCÉ sur cellules CLAIRES */
.comparison-table thead th, .tool-comparison thead th, .tool-comparison th,
.compare-table thead th, .data-table thead th {
  color: var(--lp-ink) !important;
  background: var(--lp-surface-2) !important;
  border-bottom: 1px solid var(--lp-line) !important;
}
.comparison-table thead th:first-child,
.tool-comparison thead th:first-child { color: var(--lp-muted) !important; }
.comparison-table thead th.recommended,
.comparison-table thead th.best { background: var(--lp-accent-t) !important; color: var(--lp-accent) !important; }
.comparison-table td, .tool-comparison td, .compare-table td {
  color: var(--lp-ink) !important;
  font-weight: 500 !important;
  border-color: var(--lp-line) !important;
}
.comparison-table td:first-child, .tool-comparison td:first-child {
  color: var(--lp-ink) !important;
  background: var(--lp-surface-2) !important;
}
.comparison-table td.col-phidias { background: var(--lp-accent-t) !important; }
.comparison-table td.best, .tool-comparison td.best, .comparison-table .best { color: var(--lp-accent) !important; }
.comparison-table tbody tr, .tool-comparison tbody tr, .criteria-table tr {
  background-color: var(--lp-surface) !important;
  border-bottom: 1px solid var(--lp-line) !important;
}
.comparison-table tbody tr:hover, .tool-comparison tbody tr:hover { background-color: var(--lp-accent-t) !important; }
.criteria-table td:first-child { color: var(--lp-ink) !important; }
.criteria-bar-track { background: var(--lp-surface-2) !important; }

/* 3) Texte clair résiduel dans ces composants -> lisible
   (titres/labels qui étaient blancs ou en dégradé sur fond sombre) */
[class*="-card"] h2, [class*="-card"] h3, [class*="-card"] h4, [class*="-card"] h5,
[class*="-box"] h2, [class*="-box"] h3, [class*="-box"] h4, [class*="-box"] h5,
[class*="-card"] [class*="title"], [class*="-box"] [class*="title"],
.pros-card h3, .cons-card h3, .review-card h3, .firm-card h3,
.pros-title, .cons-title {
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
  background: none !important;
}
.review-card [style*="color:#fff"], .review-card [style*="color: #fff"],
[class*="-card"] [style*="color:#fff"], [class*="-card"] [style*="color: #fff"] {
  color: var(--lp-ink) !important;
}

/* ---- Sections "panneau" (newsletter, CTA final) : bandeau clair défini ----
   (À l'origine, blocs SOMBRES à texte blanc. Le texte est désormais foncé :
   on leur donne un fond clair pour éviter le foncé-sur-foncé et bien les cadrer.) */
.newsletter-section, .cta-section, .cta-band, .newsletter-band, .email-capture {
  background: var(--lp-accent-t) !important;
  background-image: none !important;
  border-top: 1px solid var(--lp-line) !important;
  border-bottom: 1px solid var(--lp-line) !important;
  padding: clamp(40px, 6vw, 72px) 0 !important;
  margin: 48px auto !important;
  overflow: hidden;
}
/* Flourish décoratif (forme diagonale) non clippé sans style.min.css -> masqué */
.newsletter-section::before, .newsletter-section::after,
.cta-section::before, .cta-section::after { display: none !important; }

/* Contenu centré (newsletter + CTA), sur tous les rendus */
.newsletter-section, .cta-section { text-align: center !important; }
.newsletter-section > *, .cta-section .cta-content, .cta-section .container > * {
  margin-left: auto !important; margin-right: auto !important;
}
.cta-section .cta-content { max-width: 720px; }
.newsletter-section .nl-form {
  display: flex !important; gap: 10px; justify-content: center !important; align-items: center; flex-wrap: wrap;
  max-width: 540px; margin-left: auto !important; margin-right: auto !important;
}
.cta-content form, .cta-content .cta-actions, .cta-content .cta-buttons {
  display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.newsletter-section h2, .newsletter-section h3, .cta-section h2, .cta-title,
.newsletter-section .nl-title { color: var(--lp-ink) !important; -webkit-text-fill-color: var(--lp-ink) !important; }
.nl-btn, .newsletter-section button[type="submit"] {
  background: var(--lp-accent) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important; font-weight: 600;
}
.nl-btn:hover { background: var(--lp-accent-d) !important; }
.nl-input, .cta-code-box, .newsletter-section input {
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-line-2) !important;
  color: var(--lp-ink) !important;
}
.cta-code-box .cta-code, .cta-code-box strong { color: var(--lp-accent) !important; -webkit-text-fill-color: var(--lp-accent) !important; }

/* ---- Détails ---- */
/* ---- Détails ---- */
/* ---- Titres & libellés restés blancs (héritage sombre) -> encre lisible ----
   Le site est clair partout : ces titres sont sur fond clair, donc on force l'encre. */
.section-title, .hero-title, .hero h1, .hero-content h1,
.trustpilot-rating, .review-name, .discord-card-name, .testimonial-name,
.review-text, .discord-card-text, .payout-title, .result-title, .stat-title {
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
}
.section-title span, .hero-title span, .hero h1 span, .hero-content h1 span {
  color: var(--lp-accent) !important; -webkit-text-fill-color: var(--lp-accent) !important;
}
.section-subtitle, .review-date, .discord-card-role, .trustpilot-label, .trustpilot-rating span {
  color: var(--lp-muted) !important; -webkit-text-fill-color: var(--lp-muted) !important;
}
.review-avatar, .discord-card-avatar { background: var(--lp-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ---- Audit complet : titres/textes blancs spécifiques restés sur fond CLAIR ----
   (classes propres à certaines pages, non couvertes par les règles génériques ;
   on NE touche PAS aux titres sur bandeaux volontairement sombres, ex. .infog-title) */
.page-intro h1, .erreur-name,
.ressources-hero h1, .section-heading h2, .embed-section h2,
.error-title {
  color: var(--lp-ink) !important;
  -webkit-text-fill-color: var(--lp-ink) !important;
}
.page-intro h1 span, .ressources-hero h1 span {
  color: var(--lp-accent) !important; -webkit-text-fill-color: var(--lp-accent) !important;
}

/* ---- Cartes de profil de l'accueil : éclaircies (cohérence thème clair) ---- */
body.light-mode .profile-card, .profile-card.profile-card {
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-line) !important;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s !important;
}
body.light-mode .profile-card .profile-name {
  color: var(--lp-ink) !important; -webkit-text-fill-color: var(--lp-ink) !important;
}
body.light-mode .profile-card .profile-desc { color: var(--lp-muted) !important; -webkit-text-fill-color: var(--lp-muted) !important; }
body.light-mode .profile-card.active, body.light-mode .profile-card:hover {
  background: var(--lp-accent-t) !important;
  border-color: rgba(193,95,60,0.35) !important;
}

::selection { background: var(--lp-accent-t); color: var(--lp-ink); }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* ============================================================
   FILET DE SÉCURITÉ — mise en page minimale, propre et lisible.
   S'active UNIQUEMENT si style.min.css n'est pas chargé
   (aperçu éditeur, mode hors-ligne). Sur le serveur, la classe
   .lp-fallback n'est jamais posée → ces règles restent inertes
   et ta vraie mise en page (style.min.css) est conservée.
   ============================================================ */
html.lp-fallback body { display: block; }

html.lp-fallback .header {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 24px;
  padding: 13px clamp(16px, 4vw, 44px);
  background: rgba(252,251,247,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
html.lp-fallback .header-logo { font-family: var(--lp-font-display); font-weight: 600; font-size: 1.15rem; color: var(--lp-ink); }
html.lp-fallback .nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.4rem; color: var(--lp-ink); cursor: pointer; }
html.lp-fallback .header-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-wrap: wrap; }
html.lp-fallback .header-nav a { color: var(--lp-muted); font-size: .94rem; font-weight: 500; }
html.lp-fallback .header-nav a:hover { color: var(--lp-ink); }
html.lp-fallback .header-cta { background: var(--lp-accent) !important; color: #fff !important; padding: 9px 18px; border-radius: 999px; font-weight: 600; }

html.lp-fallback .breadcrumb { max-width: 880px; margin: 18px auto 0; padding: 0 clamp(16px, 4vw, 44px); color: var(--lp-muted); font-size: .85rem; }
html.lp-fallback .breadcrumb a { color: var(--lp-muted); }

html.lp-fallback .hero { max-width: 860px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 44px) 36px; text-align: center; }
html.lp-fallback .hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.12; margin: 16px 0 18px; }
html.lp-fallback .hero p { color: var(--lp-muted); font-size: 1.08rem; max-width: 640px; margin: 0 auto; line-height: 1.6; }
html.lp-fallback .hero-badge,
html.lp-fallback .hero-eyebrow {
  display: inline-block; font-family: var(--lp-font-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lp-accent);
  background: var(--lp-accent-t); border: 1px solid var(--lp-line);
  padding: 6px 14px; border-radius: 999px;
}

html.lp-fallback .content,
html.lp-fallback main.content,
html.lp-fallback main { max-width: 860px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 44px) 64px; }
html.lp-fallback .content > section { margin: 40px 0; }
html.lp-fallback h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 16px; }
html.lp-fallback h3 { font-size: 1.32rem; margin: 26px 0 12px; }
/* Neutralise les titres en dégradé-clippé (illisibles sans style.min.css) */
html.lp-fallback h1, html.lp-fallback h2, html.lp-fallback h3, html.lp-fallback .hero h1 {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--lp-ink) !important;
}
html.lp-fallback h1 em, html.lp-fallback h2 em, html.lp-fallback .hero h1 em {
  -webkit-text-fill-color: var(--lp-accent) !important; color: var(--lp-accent) !important;
}
html.lp-fallback p { margin: 0 0 16px; }
html.lp-fallback ul, html.lp-fallback ol { margin: 0 0 16px 1.25em; }
html.lp-fallback li { margin: 6px 0; }

html.lp-fallback table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .95rem; }
html.lp-fallback th, html.lp-fallback td { border: 1px solid var(--lp-line); padding: 10px 12px; text-align: left; }
html.lp-fallback thead th { background: var(--lp-surface-2); }

html.lp-fallback .footer, html.lp-fallback footer {
  margin-top: 48px; padding: 44px clamp(16px, 4vw, 44px);
  border-top: 1px solid var(--lp-line); color: var(--lp-muted); text-align: center;
}

@media (max-width: 760px) {
  html.lp-fallback .nav-toggle { display: block; }
  html.lp-fallback .header-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 0; }
  html.lp-fallback .header-nav.open { display: flex; }
}

/* ---- Structure "landing / avis / accueil" : header[role=banner] > .container > nav > .logo + ul.nav-links ; main#main-content > section > .container ---- */
html.lp-fallback .container { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
html.lp-fallback header[role="banner"] {
  position: sticky; top: 0; z-index: 90;
  background: rgba(252,251,247,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
html.lp-fallback header[role="banner"] .container { display: flex; align-items: center; gap: 22px; min-height: 62px; }
html.lp-fallback header[role="banner"] nav[role="navigation"] { display: flex; align-items: center; gap: 22px; width: 100%; }
html.lp-fallback .logo { font-family: var(--lp-font-display); font-weight: 600; font-size: 1.15rem; color: var(--lp-ink); white-space: nowrap; }
html.lp-fallback .nav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; flex-wrap: wrap; }
html.lp-fallback .nav-links li { margin: 0; }
html.lp-fallback .nav-links a { color: var(--lp-muted); font-size: .94rem; font-weight: 500; }
html.lp-fallback .nav-links a:hover { color: var(--lp-ink); }

/* Masque le décor + utilitaires non stylés (sinon ils s'affichent en vrac) */
html.lp-fallback .mobile-menu,
html.lp-fallback .theme-toggle,
html.lp-fallback .lang-switcher,
html.lp-fallback .language-selector,
html.lp-fallback .page-loader,
html.lp-fallback .bg-wrapper,
html.lp-fallback .floating-orb,
html.lp-fallback .grid-pattern,
html.lp-fallback .bg-gradient,
html.lp-fallback .scroll-progress-bar,
html.lp-fallback .back-to-top,
html.lp-fallback #themeToggle,
html.lp-fallback .menu-toggle,
html.lp-fallback .hamburger,
html.lp-fallback .toast-container,
html.lp-fallback .sticky-code-reminder { display: none !important; }
html.lp-fallback .skip-to-content { position: absolute !important; left: -9999px; }
/* Icônes SVG sans dimensions explicites : bornées en aperçu (sinon elles
   gonflent faute de style.min.css — ex. la flèche du bouton CTA à 770px). */
html.lp-fallback a svg, html.lp-fallback button svg, html.lp-fallback summary svg,
html.lp-fallback [class*="btn"] svg, html.lp-fallback .header-cta svg,
html.lp-fallback li > svg, html.lp-fallback p svg,
html.lp-fallback h1 svg, html.lp-fallback h2 svg, html.lp-fallback h3 svg, html.lp-fallback h4 svg {
  width: 1.15em !important; height: 1.15em !important;
  vertical-align: middle; flex: 0 0 auto;
}
html.lp-fallback .cta-icon svg, html.lp-fallback .feature-icon svg, html.lp-fallback .step-icon svg { width: 1.8em !important; height: 1.8em !important; }

/* Héros + sections "landing" */
html.lp-fallback main#main-content { display: block; }
html.lp-fallback main#main-content > section { padding: 38px 0; }
html.lp-fallback .avis-hero, html.lp-fallback section.hero, html.lp-fallback .lp-hero, html.lp-fallback .blog-hero { text-align: center; padding: 54px 0 30px; }
html.lp-fallback .avis-hero .container, html.lp-fallback section.hero .container { max-width: 820px; }
html.lp-fallback .hero-subtitle { color: var(--lp-muted); font-size: 1.05rem; max-width: 640px; margin: 14px auto 0; line-height: 1.6; }
html.lp-fallback .article-container { max-width: 820px; margin: 0 auto; }
html.lp-fallback .cta-title, html.lp-fallback .section-title { text-align: center; }

html.lp-fallback footer { margin-top: 48px; padding: 44px 0; border-top: 1px solid var(--lp-line); color: var(--lp-muted); text-align: center; }
html.lp-fallback .footer-logo { font-family: var(--lp-font-display); color: var(--lp-ink); font-size: 1.2rem; margin-bottom: 8px; }
html.lp-fallback .footer-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 16px 0; }
html.lp-fallback .footer-links a { color: var(--lp-muted); }

/* ---- Mise en page soignée des sections "panneau" (aperçu) ---- */
/* Newsletter : centrée, titre marqué, formulaire en ligne, succès masqué */
html.lp-fallback .newsletter-section { text-align: center; }
html.lp-fallback .newsletter-section > * { max-width: 600px; margin-left: auto; margin-right: auto; }
html.lp-fallback .newsletter-section p:nth-of-type(1) { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
html.lp-fallback .newsletter-section p:nth-of-type(2) {
  font-family: var(--lp-font-display); font-size: clamp(23px, 3vw, 30px);
  font-weight: 600; color: var(--lp-ink); margin: 0 auto 10px;
}
html.lp-fallback .nl-desc { color: var(--lp-muted); font-size: 1.05rem; margin-bottom: 22px; }
html.lp-fallback .nl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; }
html.lp-fallback .nl-input { flex: 1 1 250px; padding: 13px 18px; border-radius: 999px; font-size: 1rem; }
html.lp-fallback .nl-btn { padding: 13px 26px; white-space: nowrap; }
html.lp-fallback .nl-success { display: none !important; }
html.lp-fallback .nl-privacy { color: var(--lp-faint); font-size: .85rem; margin-top: 14px; }

/* CTA final : contenu centré, sous-titre + bouton alignés */
html.lp-fallback .cta-content, html.lp-fallback .cta-section .container { text-align: center; max-width: 700px; margin: 0 auto; }
html.lp-fallback .cta-subtitle { color: var(--lp-muted); font-size: 1.08rem; margin: 12px auto 26px; max-width: 580px; }
html.lp-fallback .cta-content form, html.lp-fallback .cta-actions, html.lp-fallback .cta-buttons {
  display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;
}
html.lp-fallback .cta-code-box { padding: 10px 16px; border-radius: 10px; font-family: var(--lp-font-mono); text-align: left; }

/* Articles connexes : grille de cartes propre */
html.lp-fallback .related-articles .section-title, html.lp-fallback .related-articles h2 { text-align: center; }
html.lp-fallback .blog-card-grid, html.lp-fallback .related-grid, html.lp-fallback .related-articles .container > div:last-child {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px;
}
html.lp-fallback .blog-card, html.lp-fallback .related-card, html.lp-fallback .related-articles a[class*="card"] {
  display: block; text-align: left; padding: 22px; border-radius: 14px;
  border: 1px solid var(--lp-line) !important; background: var(--lp-surface) !important;
}
html.lp-fallback .blog-card:hover, html.lp-fallback .related-card:hover { border-color: var(--lp-line-2) !important; }

@media (max-width: 760px) {
  html.lp-fallback .nav-links { gap: 12px; }
  html.lp-fallback header[role="banner"] nav[role="navigation"] { flex-wrap: wrap; }
}