/* ============================================================
   OPALINE CONSEIL — Thème « ATOMIC ALGORITHME »
   Rétro-futurisme âge atomique (années 50)
   Inspiration : chaîne YouTube @AtomicAlgorithme
   Version 1.0 — 2026-07-16
   ============================================================
   Chargé sur TOUTES les pages APRÈS leurs styles.
   Restyle en place (palette + typo + cartes + boutons + nav +
   footer) via des hooks larges — surcharge les inline existants.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ---- 1. PALETTE ATOMIQUE ---- */
:root {
  --at-cream:#F7ECC9 !important;
  --at-cream-2:#F2E2B4 !important;
  --at-paper:#FCF7E8 !important;
  --at-teal:#2A9D8F !important;
  --at-teal-deep:#17615A !important;
  --at-teal-ink:#0E463F !important;
  --at-orange:#F4A62A !important;
  --at-orange-deep:#E88A1A !important;
  --at-red:#E23A1B !important;
  --at-red-deep:#C02E15 !important;
  --at-ink:#241E17 !important;
  --at-ink-soft:#5c5346 !important;

  /* Remap des variables historiques (luxe → atomic) */
  --or:var(--at-teal) !important; --gold:var(--at-teal) !important;
  --or-premium:var(--at-teal) !important; --or-dark:var(--at-teal-deep) !important;
  --gold-dark:var(--at-teal-deep) !important;
  --noir:var(--at-cream) !important; --noir-dark:var(--at-ink) !important;
  --dark:var(--at-ink) !important; --burg:var(--at-red) !important;
  --bg:var(--at-cream) !important; --blanc:var(--at-paper) !important;
  --text:var(--at-ink) !important; --texte:var(--at-ink) !important;
  --muted:var(--at-ink-soft) !important; --text-muted:var(--at-ink-soft) !important;
  --opale:var(--at-ink) !important; --creme:var(--at-cream) !important;
  --op-or:var(--at-teal) !important; --op-noir:var(--at-cream) !important;
  --op-noir-velours:var(--at-cream) !important; --op-blanc:var(--at-paper) !important;
  --op-creme:var(--at-cream) !important; --op-texte:var(--at-ink) !important;
  --op-bordeaux:var(--at-red) !important; --op-or-fonce:var(--at-teal-deep) !important;

  /* Remap des accents hors-palette des anciennes pages (commencer/, tunnels, landings) */
  --purple:var(--at-teal) !important; --purple-dark:var(--at-teal-deep) !important;
  --purple-light:#e6f1ef !important;
  --gold:var(--at-orange-deep) !important; --gray:var(--at-ink-soft) !important;
}

/* Fond dégradé violet/nuit résiduel (ancien hero tunnel) -> crème atomic */
[style*="4A3470"], [style*="1A1A2E"],
[style*="#4a3470"], [style*="#1a1a2e"] {
  background:var(--at-cream) !important;
  color:var(--at-ink) !important;
}

/* ---- 2. TYPOGRAPHIE ---- */
body, body * {
  font-family:'Poppins','Segoe UI',sans-serif !important;
}
h1, h2, h3, .logo,
h1 *, h2 *, h3 *,
[class*="hero"] h1, [class*="title"], [class*="heading"],
.section-title, .kits-hero-title {
  font-family:'Poppins',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  line-height:1.1 !important;
}
.logo, [class*="logo"]:not([class*="logo-subtitle"]),
.brand .name, .price, .stat strong, .step-number, .hero-stats .stat strong {
  font-family:'Righteous',sans-serif !important;
  letter-spacing:.02em !important;
}
body {
  background:var(--at-cream) !important;
  color:var(--at-ink) !important;
  line-height:1.7 !important;
  font-size:17px !important;
  -webkit-font-smoothing:antialiased !important;
}

/* ---- 3. NAVIGATION / HEADER ---- */
header, .site-header, header nav, nav.site-nav {
  background:var(--at-cream) !important;
  color:var(--at-ink) !important;
  border-bottom:2.5px solid var(--at-ink) !important;
  box-shadow:none !important;
}
header a, nav a, header nav a { color:var(--at-ink) !important; font-weight:600 !important; }
header a:hover, nav a:hover { color:var(--at-red) !important; }
.logo, nav .logo, header .logo { color:var(--at-teal-deep) !important; }
nav .logo span, header .logo span, .logo-subtitle { color:var(--at-ink-soft) !important; }
nav a::after { background:var(--at-red) !important; }

/* ---- 4. HÉROS ---- */
.hero, section.hero,
[class*="hero"]:not([class*="hero-badge"]):not([class*="hero-card"]):not([class*="hero-stats"]):not([class*="hero-cta"]) {
  background:radial-gradient(60% 80% at 50% 15%,rgba(244,166,42,.5) 0%,rgba(244,166,42,0) 60%),var(--at-cream) !important;
  color:var(--at-ink) !important;
}
.hero h1, [class*="hero"] h1 { color:var(--at-ink) !important; }
.hero p, .hero-subtitle, [class*="hero"] p { color:var(--at-ink-soft) !important; }
.hero::after, section.hero::after { background:var(--at-red) !important; opacity:.7 !important; }

/* Badges / eyebrows */
.hero-badge, .badge, .eyebrow, .hero-eyebrow,
[class*="badge"]:not([class*="status"]):not(.badge.high):not(.badge.veryhigh):not(.badge.med) {
  background:var(--at-teal) !important;
  border:2.5px solid var(--at-ink) !important;
  box-shadow:3px 3px 0 var(--at-ink) !important;
  color:#fff !important;
  padding:8px 20px !important;
  border-radius:100px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
  display:inline-block !important;
}
.eyebrow { background:transparent !important; border:0 !important; box-shadow:none !important;
  color:var(--at-teal-deep) !important; font-family:'Righteous',sans-serif !important;
  letter-spacing:.12em !important; text-transform:uppercase !important; padding:0 !important; }

/* ---- 5. BOUTONS rétro (contour encre + ombre franche) ---- */
.btn, .btn-primary, .btn-secondary, .btn-lg,
.cta, .cta-button, button.cta, a.cta, a.cta-button,
.btn-kit-buy, .nav-cta-btn, .btn-audit,
[class*="btn-primary"], [class*="button-primary"], input[type="submit"] {
  background:var(--at-red) !important;
  color:#fff !important;
  border:2.5px solid var(--at-ink) !important;
  box-shadow:4px 4px 0 var(--at-ink) !important;
  border-radius:100px !important;
  font-family:'Poppins',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  padding:14px 30px !important;
  transition:transform .12s ease, box-shadow .12s ease !important;
  display:inline-block !important;
  cursor:pointer !important;
}
.btn:hover, .cta:hover, .cta-button:hover, a.cta:hover, .btn-primary:hover, .btn-kit-buy:hover {
  transform:translate(-2px,-2px) !important;
  box-shadow:6px 6px 0 var(--at-ink) !important;
}
.btn-secondary, .cta.outline, .cta-button.outline,
[class*="btn-secondary"], [class*="button-secondary"] {
  background:var(--at-teal) !important; color:#fff !important;
}
.nav-cta-btn { background:var(--at-red) !important; padding:10px 22px !important; }

/* ---- 6. SECTIONS ---- */
section.alt, .section-alt, [class*="bg-cream"], [class*="bg-light"] {
  background:var(--at-cream-2) !important;
}
section.dark, .section-dark {
  background:var(--at-teal-ink) !important; color:#fff !important;
  border-top:2.5px solid var(--at-ink) !important; border-bottom:2.5px solid var(--at-ink) !important;
}
.section-title { color:var(--at-ink) !important; }
.section-title strong, h2 strong, h3 strong { color:var(--at-red) !important; }

/* ---- 7. CARTES (contour encre + ombre franche) ---- */
.problem-card, .stake-card, .pricing-card, .article-card, .case-card, .secteur-card,
.chantier, .axis, .step, .timeline-item, .kit-card, .blog-card,
[class*="card"]:not(.pricing-card.featured) {
  background:var(--at-paper) !important;
  border:2.5px solid var(--at-ink) !important;
  border-radius:18px !important;
  box-shadow:5px 5px 0 var(--at-ink) !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.problem-card:hover, .pricing-card:hover, .article-card:hover, .case-card:hover, .kit-card:hover, .blog-card:hover {
  transform:translate(-3px,-3px) !important;
  box-shadow:8px 8px 0 var(--at-ink) !important;
}
.pricing-card.featured {
  background:var(--at-teal-ink) !important; color:#fff !important;
  border:2.5px solid var(--at-ink) !important;
  box-shadow:8px 8px 0 var(--at-ink) !important;
  transform:scale(1.03) !important;
}
.pricing-card.featured h3, .pricing-card.featured .price, .pricing-card.featured p { color:#fff !important; }
.pricing-card .price { color:var(--at-ink) !important; }
.pricing-card.featured::before { background:var(--at-orange) !important; color:var(--at-ink) !important;
  font-family:'Righteous',sans-serif !important; border:2px solid var(--at-ink) !important; }

/* ---- 8. TABLES ---- */
table, .cycle-table { background:var(--at-paper) !important; border:2.5px solid var(--at-ink) !important;
  border-radius:14px !important; overflow:hidden !important; box-shadow:5px 5px 0 var(--at-ink) !important; }
table th, .cycle-table th { background:var(--at-teal-ink) !important; color:#fff !important;
  font-family:'Poppins',sans-serif !important; font-weight:700 !important; text-transform:none !important; }
table td, .cycle-table td { border-bottom:1px solid rgba(36,30,23,.14) !important; }
table tr:nth-child(even) td { background:var(--at-cream) !important; }

/* ---- 9. CALLOUTS ---- */
.tldr, .callout, .promise {
  background:var(--at-cream-2) !important;
  border:2.5px solid var(--at-ink) !important; border-left:6px solid var(--at-red) !important;
  border-radius:12px !important; box-shadow:4px 4px 0 var(--at-ink) !important;
}
.tldr strong, .callout strong, .promise strong, .promise h3 { color:var(--at-red-deep) !important; }

/* ---- 10. CTA BLOCK ---- */
.cta-block, .final-cta {
  background:var(--at-teal-ink) !important; color:#fff !important;
  border:2.5px solid var(--at-ink) !important; border-radius:18px !important;
}
.cta-block h2, .cta-block h3, .final-cta h2, .final-cta h3 { color:#fff !important; }

/* ---- 11. FOOTER ---- */
footer, footer.site-footer, .footer, .site-footer {
  background:var(--at-ink) !important; color:rgba(255,255,255,.62) !important;
  border-top:2.5px solid var(--at-ink) !important;
}
footer a, .site-footer a { color:rgba(255,255,255,.62) !important; text-decoration:none !important; }
footer a:hover, .site-footer a:hover { color:var(--at-orange) !important; }
footer h4 { color:var(--at-orange) !important; font-family:'Righteous',sans-serif !important;
  text-transform:uppercase !important; letter-spacing:.1em !important; }

/* ---- 12. PRICE / STATS ---- */
.price-tag { background:var(--at-orange) !important; color:var(--at-ink) !important;
  border:2.5px solid var(--at-ink) !important; box-shadow:3px 3px 0 var(--at-ink) !important;
  font-family:'Righteous',sans-serif !important; border-radius:100px !important; }
.stat strong, .hero-stats .stat strong, .stats .n { color:var(--at-teal-deep) !important; font-family:'Righteous',sans-serif !important; }
.step-number { color:var(--at-orange-deep) !important; font-family:'Righteous',sans-serif !important; }

/* ---- 13. LIENS CONTENU ---- */
main a, article a, .blog-content a { color:var(--at-teal-deep) !important;
  text-decoration:underline !important; text-underline-offset:3px !important; }
main a:hover, article a:hover { color:var(--at-red) !important; }
::selection { background:var(--at-orange) !important; color:var(--at-ink) !important; }

/* ---- 14. FORMULAIRES ---- */
input[type="text"], input[type="email"], textarea, select {
  border:2.5px solid var(--at-ink) !important; border-radius:12px !important;
  background:var(--at-paper) !important; color:var(--at-ink) !important; font-family:'Poppins',sans-serif !important;
}
input:focus, textarea:focus, select:focus { border-color:var(--at-teal) !important;
  outline:none !important; box-shadow:3px 3px 0 var(--at-teal) !important; }

/* ---- 15. FAQ / DETAILS ---- */
details { background:var(--at-paper) !important; border:2.5px solid var(--at-ink) !important;
  border-radius:14px !important; box-shadow:3px 3px 0 var(--at-ink) !important; }
summary { color:var(--at-ink) !important; font-weight:700 !important; }

/* ---- 16. DROPDOWN NAV (repris de opaline-theme, palette atomic) ---- */
.submenu, ul.submenu, .dropdown-menu {
  background:var(--at-cream) !important; border:2.5px solid var(--at-ink) !important;
  box-shadow:5px 5px 0 var(--at-ink) !important;
}
.submenu li a, ul.submenu li a, .dropdown-menu a { color:var(--at-ink) !important; }
.submenu li a:hover, ul.submenu li a:hover, .dropdown-menu a:hover {
  background:rgba(42,157,143,.14) !important; color:var(--at-teal-deep) !important; }
.dd-price, .submenu .price, ul.submenu .price { color:var(--at-red) !important; }

/* ---- 17. RESPONSIVE ---- */
@media (max-width:768px){
  body{font-size:16px !important}
  .hero h1, [class*="hero"] h1{font-size:2rem !important;line-height:1.15 !important}
}
/* ============================================================
   18. GÉNÉRALISATION — harmonisation large de TOUT le site
   Attrape boutons / liens / accents quel que soit le nommage,
   pour une cohérence Atomic sur les pages non prévues.
   ============================================================ */

/* --- Variables de marque courantes -> palette Atomic --- */
:root {
  --primary:var(--at-teal) !important;        --primary-color:var(--at-teal) !important;
  --primary-dark:var(--at-teal-deep) !important; --color-primary:var(--at-teal) !important;
  --secondary:var(--at-orange) !important;     --secondary-color:var(--at-orange) !important;
  --accent:var(--at-orange) !important;        --accent-color:var(--at-orange) !important;
  --accent-dark:var(--at-orange-deep) !important;
  --brand:var(--at-teal) !important;           --brand-color:var(--at-teal) !important;
  --main:var(--at-teal) !important;            --main-color:var(--at-teal) !important;
  --highlight:var(--at-orange) !important;     --link:var(--at-teal-deep) !important;
  --blue:var(--at-teal) !important;            --violet:var(--at-teal) !important;
  --mauve:var(--at-teal) !important;           --indigo:var(--at-teal) !important;
  --theme:var(--at-teal) !important;           --cta:var(--at-red) !important;
}

/* --- Boutons génériques (tout ce qui ressemble à un bouton/CTA) --- */
button:not(.burger):not(.hamburger):not([class*="menu"]):not([class*="close"]):not([class*="toggle"]):not([aria-label*="menu"]),
a[class*="btn"], a[class*="button"], a[class*="cta"], a[class*="bouton"],
input[type="submit"], input[type="button"],
.wp-block-button__link, .elementor-button, .wp-element-button {
  background:var(--at-red) !important;
  color:#fff !important;
  border:2.5px solid var(--at-ink) !important;
  box-shadow:4px 4px 0 var(--at-ink) !important;
  border-radius:100px !important;
  font-family:'Poppins',sans-serif !important;
  font-weight:700 !important;
  text-transform:none !important;
  transition:transform .12s ease, box-shadow .12s ease !important;
}
button:not(.burger):hover,
a[class*="btn"]:hover, a[class*="button"]:hover, a[class*="cta"]:hover,
.wp-block-button__link:hover, .elementor-button:hover {
  transform:translate(-2px,-2px) !important;
  box-shadow:6px 6px 0 var(--at-ink) !important;
}
/* boutons "secondaires/outline" en teal */
a[class*="btn"][class*="secondary"], a[class*="btn"][class*="outline"],
a[class*="btn"][class*="ghost"], button[class*="secondary"] {
  background:var(--at-teal) !important; color:#fff !important;
}

/* --- Liens de contenu génériques --- */
a:not([class*="btn"]):not([class*="button"]):not([class*="cta"]):not(.logo):not([class*="logo"]):not(nav a):not(header a):not(footer a) {
  color:var(--at-teal-deep) !important;
}
a:not([class*="btn"]):not([class*="button"]):not([class*="cta"]):not(.logo):hover {
  color:var(--at-red) !important;
}

/* --- Accents génériques : petites pastilles/étiquettes --- */
[class*="badge"]:not([class*="status"]), [class*="tag"], [class*="pill"], [class*="chip"], [class*="label"]:not(label) {
  background:var(--at-teal) !important; color:#fff !important;
  border-radius:100px !important;
}

/* --- Titres : renforcer le rouge d'emphase --- */
mark, .highlight, [class*="accent-text"], .text-accent { color:var(--at-red) !important; background:transparent !important; }

/* --- Puces / listes : marqueur teal --- */
main li::marker, article li::marker { color:var(--at-teal) !important; }

/* Fin généralisation */

/* Fin thème Atomic Algorithme */