/*
 * Landing page (index.php) — hero, feature overview cards, detailed feature
 * sections, and the account-type comparison table. Kept separate from
 * app-theme.css since none of this applies to the actual app pages.
 */

/* Detail sections are jumped to from the overview cards' "En savoir plus"
   buttons — without this, the sticky navbar would cover the section's own
   heading right after the jump. Only honored by a NATIVE anchor jump
   (plain <a href="#id"> / scrollIntoView()) — Bootstrap's own JS smooth-
   scroll (data-bs-smooth-scroll) computes its target offset itself and
   ignores this, which is why the nav's data-bs-smooth-scroll attribute was
   removed in favor of plain scroll-behavior below. */
.landing-section {
    scroll-margin-top: 5.5rem;
}

html {
    scroll-behavior: smooth;
}

.landing-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.08), transparent 65%);
    padding-block: 4rem;
    overflow: hidden;
}

.landing-hero .container {
    position: relative;
    z-index: 1;
}

/* Each theme gets its own illustration (the light version's background is
   opaque white, the dark version near-black — swapping keeps either from
   reading as a jarring block against the opposite page background).
   Matches ":not([data-bs-theme=dark])" rather than "[data-bs-theme=light]"
   since the attribute is only set once a preference is actually stored
   (theme_early_script.php) — light is the default with no attribute
   present at all. */
html:not([data-bs-theme="dark"]) .landing-hero {
    background-image: url('../img/header_background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

html[data-bs-theme="dark"] .landing-hero {
    background-image: url('../img/header_background_dark.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Fades the illustration's bottom edge into the page background instead of
   a hard cut — sits above the image (z-index: 0) but below the text
   container (z-index: 1) via .landing-hero .container above. */
.landing-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, transparent, var(--bs-tertiary-bg));
    pointer-events: none;
}

.landing-hero .hero-icon {
    font-size: 3rem;
    color: var(--bs-primary);
}

.hero-lead {
    font-size: 1.35rem;
}

/* Frosted-glass frame around the hero tagline so it stays legible over the
   background illustration. Uses --bs-body-bg-rgb (not a hardcoded white) so
   it adapts automatically to dark mode's own body color. */
.hero-lead-frame {
    display: inline-block;
    background-color: rgba(var(--bs-body-bg-rgb), 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--bs-body-bg-rgb), 0.4);
    border-radius: 1rem;
    padding: 1.1rem 1.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
    .hero-lead {
        font-size: 1.65rem;
    }
}

.feature-card {
    border-radius: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-body-color-rgb), 0.12);
}

/* Icon badges — used both by the overview cards' round icon and each detail
   section's square icon. A soft gradient + inset ring reads as more premium
   than a flat tint, and the badge lifts/scales slightly with its card. */
.feature-card .feature-icon,
.detail-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.18), rgba(var(--bs-primary-rgb), 0.04));
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-primary);
    flex-shrink: 0;
    transition: transform .15s ease;
}

.feature-card .feature-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    font-size: 1.4rem;
}

.feature-card-title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.feature-card:hover .feature-icon {
    transform: scale(1.08);
}

.detail-feature-icon {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 1.25rem;
    font-size: 1.65rem;
}

.detail-illustration {
    font-size: 8rem;
    color: var(--bs-primary);
    opacity: 0.15;
}

.detail-illustration-img {
    max-width: 100%;
    width: 280px;
    height: auto;
}

/* The 4 tiers must stay side by side on one line (never wrap/stack) so
   they're easy to compare, like a typical SaaS pricing page — this scrolls
   horizontally on narrow viewports instead of collapsing to fewer columns. */
/* overflow-x: auto forces overflow-y to compute to 'auto' too (CSS spec),
   so the hover lift on .pricing-card below would otherwise get clipped at
   the top of this container — the extra top padding gives it room. */
.pricing-scroll {
    overflow-x: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 1.25rem;
    min-width: 960px;
}

.pricing-card {
    border-width: 2px;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-body-color-rgb), 0.12);
}

/* abonnement.php only — marks the tier a visitor clicked "SOUSCRIRE" for on
   index.php (?offer=<account_type>), so it stands out among the other 3. */
.pricing-card-highlighted {
    border-width: 3px;
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-body-color-rgb), 0.18);
}

.pricing-card-header {
    padding: 1.1rem 1.25rem;
    text-align: center;
    border-top-left-radius: calc(var(--bs-card-inner-border-radius, 0.375rem) - 2px);
    border-top-right-radius: calc(var(--bs-card-inner-border-radius, 0.375rem) - 2px);
}

.pricing-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.pricing-feature-list li:last-child {
    border-bottom: 0;
}

.pricing-feature-list i {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

/* Negative/absent values (e.g. "non incluse", "Avec filigrane") keep the
   tier's own color family but faded — vs. the full-strength tier color used
   for positive/included values — so each column reads at a glance which
   rows it actually gets. */
.pricing-value-light {
    opacity: 0.5;
}

.pricing-tagline {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.75rem;
}

/* The headline number on each pricing card — always "X €/mois" regardless
   of the monthly/annual toggle above the grid (see index.php's own
   #pricing-billing-toggle script); only the amount feeding it changes. */
.pricing-price {
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding-bottom: 0.75rem;
}

.pricing-price-amount {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Reserves the same height whether it holds real text ("Facturé 50 €/an",
   annual view) or just a placeholder (monthly view) — otherwise the card
   grows/shrinks by one line every time #pricing-billing-toggle is flipped. */
.pricing-price-note {
    min-height: 1.2em;
}

.works-with-box {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background-color: var(--bs-tertiary-bg);
}

.works-with-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.works-with-box a,
.works-with-value {
    font-weight: 600;
    color: var(--bs-body-color);
}

.works-with-box a {
    text-decoration: none;
}

.works-with-box a:hover {
    color: var(--bs-primary);
}

.works-with-devices {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color);
}