/* ===== Guides et Stratégies - page-owned styles ===== */

.guides-section {
    padding-block: var(--espace-section-mobile);
}

.guides-section__title {
    display: flex;
    align-items: center;
    gap: var(--espace-compact);
    margin-block-end: var(--espace-confort);
}

.guides-section__title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 24px;
    background-color: var(--ambre-projecteur);
    border-radius: 0;
    flex-shrink: 0;
}

.guides-section__title h2 {
    margin-block-end: 0;
}

/* Introduction */
.guides-intro {
    background-color: var(--encre-nuit);
    background-image: var(--degrade-hero);
}

.guides-intro__inner {
    width: 100%;
    max-width: var(--largeur-lecture);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
}

.guides-intro__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--espace-compact);
}

.guides-intro__title-wrap::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 24px;
    background-color: var(--ambre-projecteur);
    flex-shrink: 0;
}

.guides-intro__title {
    margin-block-end: 0;
}

.guides-intro__lead {
    color: var(--gris-coulisse);
    margin-block-end: 0;
}

/* Stratégies pour gagner des étoiles */
.guides-strategies {
    background-color: var(--velours-profond);
}

.guides-strategies__inner {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-confort);
}

.guides-strategies__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace-base);
}

.guides-strategies__card {
    background-color: var(--velours-profond);
    border: 1px solid var(--ardoise-fumee);
    border-radius: var(--rayon-base);
    padding: var(--espace-confort);
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
    min-width: 0;
    transition: border-color var(--transition-couleur);
}

.guides-strategies__card:hover {
    border-color: var(--ambre-projecteur);
}

.guides-strategies__card h3 {
    margin-block-end: 0;
}

.guides-strategies__card p {
    margin-block-end: 0;
}

.guides-strategies__card .liste-puces {
    margin-block-end: 0;
}

.guides-strategies__badge {
    align-self: flex-start;
    background-color: var(--corail-invite-fond);
    color: var(--corail-invite);
    border-radius: var(--rayon-petit);
    padding: var(--espace-micro) var(--espace-serre);
    font-size: var(--legende-size);
    line-height: var(--legende-line-height);
    font-weight: var(--legende-weight);
    letter-spacing: var(--legende-letter-spacing);
}

/* Déblocage décorations */
.guides-deblocage {
    background-color: var(--encre-nuit);
}

.guides-deblocage__inner {
    width: 100%;
    max-width: var(--largeur-lecture);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
}

.guides-deblocage__inner p {
    margin-block-end: 0;
}

.guides-deblocage__inner .liste-puces {
    margin-block-end: 0;
}

/* Garder les clients heureux */
.guides-clients {
    background-color: var(--velours-profond);
}

.guides-clients__inner {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-confort);
}

.guides-clients__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace-base);
}

.guides-clients__card {
    background-color: var(--velours-profond);
    border: 1px solid var(--ardoise-fumee);
    border-radius: var(--rayon-base);
    padding: var(--espace-confort);
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
    min-width: 0;
    transition: border-color var(--transition-couleur);
}

.guides-clients__card:hover {
    border-color: var(--ambre-projecteur);
}

.guides-clients__card h3 {
    margin-block-end: 0;
}

.guides-clients__card p {
    margin-block-end: 0;
}

.guides-clients__icon {
    align-self: flex-start;
    color: var(--menthe-confettis);
    font-size: var(--h4-size);
    line-height: 1;
    font-weight: 700;
}

/* Guides détaillés */
.guides-detail {
    background-color: var(--encre-nuit);
}

.guides-detail--velours {
    background-color: var(--velours-profond);
}

.guides-detail__inner {
    width: 100%;
    max-width: var(--largeur-lecture);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
}

.guides-detail__inner p {
    margin-block-end: 0;
}

.guides-detail__liste-numerotee {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espace-serre);
}

.guides-detail__liste-numerotee li {
    counter-increment: guide-step;
    position: relative;
    padding-inline-start: var(--espace-confort);
    margin-block-end: 0;
}

.guides-detail__liste-numerotee li::before {
    content: counter(guide-step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    color: var(--ambre-projecteur);
    font-family: var(--font-titres);
    font-weight: 600;
    font-size: var(--h4-size);
    line-height: 1.3;
}

.guides-detail__inner .liste-puces {
    margin-block-end: 0;
}

/* Conseils avancés */
.guides-astuces {
    background-color: var(--velours-profond);
}

.guides-astuces__inner {
    width: 100%;
    max-width: var(--largeur-lecture);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-confort);
}

.guides-astuces__liste {
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
}

.guides-astuces__encart {
    margin-block-end: 0;
    border-inline-start: 4px solid var(--ambre-projecteur);
    background-color: var(--ardoise-fumee);
    padding: var(--espace-base) var(--espace-confort);
    font-style: italic;
}

.guides-astuces__encart p {
    margin-block-end: 0;
}

/* Erreurs courantes */
.guides-erreurs {
    background-color: var(--encre-nuit);
}

.guides-erreurs__inner {
    width: 100%;
    max-width: var(--largeur-lecture);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--espace-base);
}

.guides-erreurs__inner p {
    margin-block-end: 0;
}

.guides-erreurs__inner .liste-puces {
    margin-block-end: 0;
}

/* Conclusion */
.guides-conclusion {
    background-color: var(--velours-profond);
}

.guides-conclusion__inner {
    width: 100%;
    max-width: var(--largeur-lecture);
    margin-inline: auto;
    padding-inline: var(--gouttiere-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espace-base);
}

.guides-conclusion__inner p {
    margin-block-end: 0;
    color: var(--gris-coulisse);
}

.guides-conclusion__btn {
    margin-block-start: var(--espace-compact);
}

/* Responsive */
@media (min-width: 640px) {
    .guides-section {
        padding-block: var(--espace-section-desktop);
    }

    .guides-intro__inner,
    .guides-deblocage__inner,
    .guides-detail__inner,
    .guides-astuces__inner,
    .guides-erreurs__inner,
    .guides-conclusion__inner {
        padding-inline: var(--gouttiere-desktop);
    }

    .guides-strategies__inner,
    .guides-clients__inner {
        padding-inline: var(--gouttiere-desktop);
    }

    .guides-strategies__grid,
    .guides-clients__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espace-confort);
    }
}

@media (min-width: 1024px) {
    .guides-strategies__grid,
    .guides-clients__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--espace-confort);
    }
}

@media (max-width: 639px) {
    .guides-intro__title {
        font-size: var(--h1-size);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guides-strategies__card,
    .guides-clients__card,
    .guides-conclusion__btn {
        transition: none;
    }
}