/* ==========================================================================
   ANGELUS COMPONENTS — construits sur les tokens (tokens.css)
   ========================================================================== */

html, body {
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-font-base);
  font-size: var(--a-fs-base);
}
h1, h2, h3, h4, h5, h6, .a-display {
  font-family: var(--a-font-display);
  font-weight: 700;
  color: var(--a-text);
}
a { color: var(--a-color-primary); text-decoration: none; transition: color var(--a-transition-fast); }
a:hover { color: var(--a-color-secondary); }
::selection { background: var(--a-color-primary); color: #fff; }

.a-container { max-width: var(--a-container-max); margin-inline: auto; padding-inline: var(--a-space-4); }
.a-section { padding-block: var(--a-space-16); }
.a-section-title { font-size: var(--a-fs-2xl); margin-bottom: var(--a-space-2); }
.a-section-subtitle { color: var(--a-text-muted); margin-bottom: var(--a-space-8); }

/* --- Boutons --- */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--a-radius-pill);
  font-weight: 600; border: 0; transition: transform var(--a-transition-fast), box-shadow var(--a-transition-fast);
}
.a-btn-primary { background: var(--a-gradient-primary); color: #fff; box-shadow: var(--a-shadow-glow); }
.a-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--a-shadow-glow-lg); color: #fff; }
.a-btn-outline { background: transparent; color: var(--a-text); border: 1px solid var(--a-border); }
.a-btn-outline:hover { border-color: var(--a-color-primary); color: var(--a-color-primary); }
.a-btn-sm { padding: .5rem 1.25rem; font-size: var(--a-fs-sm); }

/* --- Header --- */
.a-header {
  background: var(--a-bg-elevated);
  border-bottom: 1px solid var(--a-border);
}
.a-navbar-brand { display: inline-flex; align-items: center; font-family: var(--a-font-display); font-weight: 800; font-size: var(--a-fs-xl); color: var(--a-text); }
.a-navbar-brand span { background: var(--a-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-navbar-brand img, .a-navbar-brand svg { max-height: 44px; width: auto; height: auto; display: block; }
.a-footer .a-navbar-brand img { max-height: 36px; }
.a-nav-link { color: var(--a-text-muted) !important; font-weight: 500; padding: .5rem 1rem !important; }
.a-nav-link:hover, .a-nav-link.active { color: var(--a-text) !important; }

/* --- Hero --- */
.a-hero { position: relative; padding-block: var(--a-space-24) var(--a-space-16); overflow: hidden; text-align: center; }
.a-hero-v1 { background: radial-gradient(circle at 20% 20%, rgba(255,45,120,.25), transparent 55%), radial-gradient(circle at 80% 60%, rgba(123,47,247,.2), transparent 55%), var(--a-bg); }
.a-hero-v2 { background: linear-gradient(180deg, var(--a-bg-elevated), var(--a-bg)); border-bottom: 1px solid var(--a-border); }
.a-hero h1 { font-size: var(--a-fs-hero); line-height: 1.1; margin-bottom: var(--a-space-4); }
.a-hero p.lead { color: var(--a-text-muted); font-size: var(--a-fs-lg); max-width: 640px; margin-inline: auto; margin-bottom: var(--a-space-8); }
.a-hero-cta { display: flex; gap: var(--a-space-4); justify-content: center; flex-wrap: wrap; }
.a-hero-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; z-index: 0; }

/* --- Cards génériques --- */
.a-card {
  background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius-md);
  transition: transform var(--a-transition), box-shadow var(--a-transition), border-color var(--a-transition);
  overflow: hidden; height: 100%;
}
.a-card:hover { transform: translateY(-4px); box-shadow: var(--a-shadow-glow); border-color: var(--a-color-primary); }
.a-card-body { padding: var(--a-space-6); }
.a-card img { width: 100%; height: auto; display: block; }

/* --- Category card --- */
.a-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--a-space-4); }
.a-cat-card { text-align: center; padding: var(--a-space-6) var(--a-space-4); }
.a-cat-icon { font-size: 2.5rem; margin-bottom: var(--a-space-4); background: var(--a-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-cat-image { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--a-space-4); border: 2px solid var(--a-border); }
.a-cat-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--a-transition); }
.a-cat-card:hover .a-cat-image img { transform: scale(1.1); }
.a-cat-card h3 { font-size: var(--a-fs-lg); margin-bottom: var(--a-space-2); }
.a-cat-card p { color: var(--a-text-muted); font-size: var(--a-fs-sm); margin-bottom: var(--a-space-4); }

/* --- Platform comparison card --- */
.a-platform-card { display: flex; flex-direction: column; }
.a-platform-logo { width: 64px; height: 64px; border-radius: var(--a-radius-sm); background: var(--a-surface-2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--a-fs-xl); color: var(--a-color-primary); margin-bottom: var(--a-space-4); }
.a-stars { color: var(--a-color-primary); font-size: var(--a-fs-sm); }
.a-platform-tagline { font-size: var(--a-fs-base); font-weight: 700; color: var(--a-text); line-height: 1.4; }
.a-platform-list { list-style: none; padding: 0; margin: var(--a-space-4) 0; font-size: var(--a-fs-sm); }
.a-platform-list li { display: flex; gap: .5rem; margin-bottom: var(--a-space-2); color: var(--a-text-muted); }
.a-platform-list.pros li i { color: #2ecc71; }
.a-platform-list.cons li i { color: #ff5c5c; }
.a-badge-rank { position: absolute; top: var(--a-space-4); left: var(--a-space-4); background: var(--a-gradient-primary); color: #fff; font-size: var(--a-fs-xs); font-weight: 700; padding: .25rem .75rem; border-radius: var(--a-radius-pill); }

/* --- City card --- */
.a-city-card { position: relative; border-radius: var(--a-radius-md); overflow: hidden; aspect-ratio: 4/3; }
.a-city-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--a-transition); }
.a-city-card:hover img { transform: scale(1.08); }
.a-city-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85)); display: flex; align-items: flex-end; padding: var(--a-space-4); }
.a-city-card-overlay h3 { font-size: var(--a-fs-base); margin: 0; }

/* --- Article card --- */
.a-article-card .a-card-body { display: flex; flex-direction: column; gap: var(--a-space-2); }
.a-article-meta { font-size: var(--a-fs-xs); color: var(--a-text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* --- CTA blocks --- */
.a-cta { border-radius: var(--a-radius-lg); padding: var(--a-space-12); text-align: center; }
.a-cta-v1 { background: var(--a-gradient-primary); color: #fff; }
.a-cta-v1 h2, .a-cta-v1 p { color: #fff; }
.a-cta-v2 { background: var(--a-surface); border: 1px solid var(--a-border); }

/* --- Trust / Why us --- */
.a-trust-item { text-align: center; padding: var(--a-space-4); }
.a-trust-icon { font-size: 2rem; color: var(--a-color-primary); margin-bottom: var(--a-space-3); }

/* --- FAQ --- */
.a-faq .accordion-item { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius-md) !important; margin-bottom: var(--a-space-3); overflow: hidden; }
.a-faq .accordion-button { background: transparent; color: var(--a-text); font-weight: 600; }
.a-faq .accordion-button:not(.collapsed) { background: var(--a-surface-2); color: var(--a-color-primary); box-shadow: none; }
.a-faq .accordion-body { color: var(--a-text-muted); }

/* --- Affiliate disclosure --- */
.a-disclosure { font-size: var(--a-fs-xs); color: var(--a-text-muted); background: var(--a-surface); border: 1px dashed var(--a-border); border-radius: var(--a-radius-sm); padding: var(--a-space-3) var(--a-space-4); }

/* --- Breadcrumbs --- */
.a-breadcrumbs { font-size: var(--a-fs-xs); color: var(--a-text-muted); margin-bottom: var(--a-space-6); }
.a-breadcrumbs a { color: var(--a-text-muted); }
.a-breadcrumbs a:hover { color: var(--a-color-primary); }

/* --- Sticky mobile CTA --- */
.a-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: var(--a-bg-elevated); border-top: 1px solid var(--a-border); padding: var(--a-space-3) var(--a-space-4); display: none; }
@media (max-width: 767.98px) { .a-sticky-cta.is-active { display: flex; gap: var(--a-space-3); } }

/* --- Footer --- */
.a-footer { background: var(--a-bg-elevated); border-top: 1px solid var(--a-border); padding-block: var(--a-space-8) var(--a-space-4); color: var(--a-text-muted); font-size: var(--a-fs-sm); }
.a-footer .row > div { margin-bottom: var(--a-space-2); }
.a-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.a-footer-links li { margin: 0; }
.a-widget-title { color: var(--a-text); font-size: var(--a-fs-sm); margin-bottom: var(--a-space-2); }
@media (max-width: 991.98px) {
  .a-footer { padding-block: var(--a-space-6) var(--a-space-3); }
  .a-footer .col-lg-4, .a-footer .col-lg-2 { margin-bottom: var(--a-space-4); }
}

/* --- Search / filters --- */
.a-search-bar { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius-pill); padding: var(--a-space-2); display: flex; }
.a-search-bar input { background: transparent; border: 0; color: var(--a-text); flex: 1; padding-inline: var(--a-space-4); }
.a-search-bar input:focus { outline: none; }

/* --- Contenu éditorial (the_content) --- */
.a-prose { color: var(--a-text); line-height: 1.75; }
.a-prose h2 { font-size: var(--a-fs-xl); margin-top: var(--a-space-8); margin-bottom: var(--a-space-3); }
.a-prose h3 { font-size: var(--a-fs-lg); margin-top: var(--a-space-6); margin-bottom: var(--a-space-2); }
.a-prose p { margin-bottom: var(--a-space-4); color: var(--a-text-muted); }
.a-prose a { text-decoration: underline; }
.a-prose ul, .a-prose ol { color: var(--a-text-muted); margin-bottom: var(--a-space-4); padding-left: 1.5rem; }
.a-prose img { max-width: 100%; height: auto; border-radius: var(--a-radius-md); }
.a-prose figcaption { color: var(--a-text-muted); font-size: var(--a-fs-xs); margin-top: var(--a-space-2); }

/* --- Empty state --- */
.a-empty { text-align: center; padding: var(--a-space-16) var(--a-space-4); color: var(--a-text-muted); }

@media (max-width: 575.98px) {
  .a-hero { padding-block: var(--a-space-16) var(--a-space-8); }
  .a-section { padding-block: var(--a-space-8); }
}