/* Page-owned styles for Astuces et Conseils */

.astuces-page {
    padding-block: var(--space-64);
}

.astuces-page .container {
    max-width: var(--container-editorial);
}

/* En-tête éditorial */
.astuces-hero {
    margin-block-end: var(--space-64);
}

.astuces-hero__content {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.astuces-hero__title {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-tracking);
    color: var(--color-champagne);
    margin-block-end: 0;
}

.astuces-hero__subtitle {
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    color: var(--color-texte-attenue);
    margin-block-end: 0;
}

/* Introduction */
.astuces-intro {
    margin-block-end: var(--space-64);
}

.astuces-intro__content {
    max-width: 68ch;
    margin-inline: auto;
    text-align: left;
}

.astuces-intro__content p {
    margin-block-end: 0;
}

/* Sections générales */
.astuces-section {
    margin-block-end: var(--space-64);
}

.astuces-section__content {
    max-width: 68ch;
    margin-inline: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.astuces-section__content h2 {
    margin-block-end: 0;
    color: var(--color-champagne);
}

.astuces-section__content p {
    margin-block-end: 0;
}

/* Listes */
.astuces-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.astuces-list li {
    position: relative;
    padding-inline-start: var(--space-24);
    line-height: var(--text-body-line-height);
}

.astuces-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.astuces-list--gold li::before {
    background-color: var(--color-or-ancien);
}

.astuces-list--rose li::before {
    background-color: var(--color-rose-poudre);
}

.astuces-list--champagne li::before {
    background-color: var(--color-champagne);
}

/* Carte d'erreurs */
.astuces-error-card {
    background-color: var(--surface-card);
    border: 1px solid var(--color-rose-poudre);
    border-radius: var(--radius-8);
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.astuces-error-card p {
    margin-block-end: 0;
}

/* Appel à l'action final */
.astuces-cta {
    margin-block-start: var(--space-96);
}

.astuces-cta__content {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}

.astuces-cta__content h2 {
    margin-block-end: 0;
    color: var(--color-champagne);
}

.astuces-cta__content p {
    margin-block-end: 0;
    max-width: 68ch;
    margin-inline: auto;
}

.astuces-cta__button {
    min-width: 240px;
}

/* Responsive */
@media (min-width: 768px) {
    .astuces-page {
        padding-block: var(--space-96);
    }

    .astuces-hero,
    .astuces-intro,
    .astuces-section {
        margin-block-end: var(--space-96);
    }

    .astuces-error-card {
        padding: var(--space-32);
    }
}

@media (max-width: 767px) {
    .astuces-page {
        padding-block: var(--space-48);
    }

    .astuces-hero,
    .astuces-intro,
    .astuces-section {
        margin-block-end: var(--space-48);
    }

    .astuces-hero__title {
        font-size: 2.5rem;
    }

    .astuces-hero__subtitle {
        font-size: 1rem;
    }

    .astuces-cta {
        margin-block-start: var(--space-64);
    }

    .astuces-cta__button {
        width: 100%;
        min-width: 0;
    }

    .astuces-error-card {
        padding: var(--space-16);
    }

    .astuces-section__content,
    .astuces-intro__content,
    .astuces-hero__content,
    .astuces-cta__content {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .astuces-page *,
    .astuces-page *::before,
    .astuces-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}