/* Styles spécifiques à la page Conditions Générales */

.conditions-generales {
    background-color: var(--vert-profond);
}

.cg-article {
    width: 100%;
}

/* En-tête de page */
.cg-header {
    padding-block: var(--space-xl);
    background-color: var(--vert-profond);
    text-align: center;
}

.cg-header__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
}

.cg-header__surtitre {
    margin-block-end: 0;
}

.cg-header__title {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: 600;
    color: var(--ivoire);
    margin-block-end: var(--space-md);
    text-wrap: balance;
}

.cg-header__intro {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--ivoire);
    max-width: 600px;
    margin-inline: auto;
    margin-block-end: var(--space-sm);
}

.cg-header__meta {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--ivoire-attenue);
    margin-block-end: var(--space-sm);
}

.cg-header__date {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--ivoire-attenue);
    margin-block-end: 0;
}

/* Sections d'articles */
.cg-section {
    padding-block: var(--space-xl);
    background-color: var(--vert-profond);
    border-top: 1px solid var(--border-or-20);
}

.cg-section--alt {
    background-color: var(--vert-table);
}

.cg-section__inner {
    max-width: 600px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cg-section__title {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    font-weight: 500;
    color: var(--ivoire);
    margin-block-end: var(--space-sm);
    text-wrap: balance;
}

.cg-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.cg-subsection__title {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    font-weight: 500;
    color: var(--ivoire);
    margin-block-end: var(--space-xs);
}

/* Listes à puces dorées */
.cg-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cg-list > li {
    position: relative;
    padding-inline-start: var(--space-md);
    color: var(--ivoire);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.cg-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5em;
    height: 0.5em;
    background-color: var(--or);
    border-radius: var(--radius-badge);
}

/* Ligne de contact dans les réservations */
.cg-contact-line {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--ivoire-attenue);
    margin-block-start: var(--space-xs);
}

/* Section contact */
.cg-section--contact {
    border-bottom: 1px solid var(--border-or-20);
}

.cg-contact-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cg-contact-list > li {
    color: var(--ivoire);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.cg-contact-list__label {
    color: var(--or);
    font-weight: 500;
    min-width: 100px;
}

.cg-update-date {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--ivoire-attenue);
    margin-block-start: var(--space-sm);
    margin-block-end: 0;
}

/* Responsive */
@media (min-width: 768px) {
    .cg-header {
        padding-block: var(--space-2xl);
    }

    .cg-header__inner {
        padding-inline: var(--container-padding-desktop);
    }

    .cg-section {
        padding-block: var(--space-2xl);
    }

    .cg-section__inner {
        padding-inline: var(--container-padding-desktop);
    }
}

@media (max-width: 767px) {
    .cg-header {
        padding-block: var(--space-xl);
    }

    .cg-header__title {
        font-size: 2.5rem;
    }

    .cg-section {
        padding-block: var(--space-xl);
    }

    .cg-contact-list > li {
        flex-direction: column;
        gap: 0;
    }

    .cg-contact-list__label {
        min-width: 0;
    }
}