body {
    background-color: var(--creme);
    color: var(--texte-gris);
    overflow-x: hidden;
}

.hero-legal {
    margin-top: 70px;
    background: linear-gradient(135deg, var(--noir) 0%, var(--noir-doux) 100%);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-legal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(201, 168, 76, 0.03) 10px,
            rgba(201, 168, 76, 0.03) 20px
        );
    pointer-events: none;
}

.hero-legal-contenu {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-legal h1 {
    font-size: 2.8rem;
    color: var(--or);
    margin: 1rem 0;
    font-weight: 700;
}

.hero-legal-date {
    font-size: 0.95rem;
    color: var(--or-clair);
    font-style: italic;
    margin-top: 1rem;
}

.legal-contenu {
    padding: 4rem 2rem;
    background-color: var(--blanc);
}

.legal-contenu-inner {
    max-width: 900px;
    margin: 0 auto;
}

.legal-article {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--creme-fonce);
}

.legal-article:last-of-type {
    border-bottom: none;
}

.legal-article h2 {
    font-size: 1.6rem;
    color: var(--noir);
    margin-bottom: 1rem;
    font-weight: 600;
}

.legal-article p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--texte-gris);
    margin-bottom: 1rem;
}

.legal-article p:last-child {
    margin-bottom: 0;
}

.legal-article ul {
    list-style: disc;
    margin-left: 2rem;
    margin-top: 1rem;
}

.legal-article ul li {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--texte-gris);
    margin-bottom: 0.5rem;
}

.legal-article strong {
    color: var(--noir);
    font-weight: 600;
}

.legal-article a {
    color: var(--or);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.legal-article a:hover {
    color: var(--or-fonce);
}

.legal-retour {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--or-clair);
}

.etiquette {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--or);
    padding: 0.4rem 1rem;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid var(--or-clair);
    border-radius: 20px;
    margin-bottom: 1rem;
}

.ligne-or {
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--or-clair), var(--or), var(--or-clair));
    margin: 1rem auto;
}

.btn-principal {
    display:          inline-block;
    padding:          0.85rem 2.2rem;
    background-color: var(--or);
    color:            var(--noir);
    font-family:      var(--font-corps);
    font-weight:      700;
    font-size:        0.9rem;
    letter-spacing:   1.5px;
    text-transform:   uppercase;
    border:           2px solid var(--or);
    border-radius:    var(--rayon);
    cursor:           pointer;
    transition:       background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-principal:hover {
    background-color: transparent;
    color:            var(--or);
    transform:        translateY(-2px);
}

.footer {
    background-color: var(--noir);
    color:            var(--blanc);
    padding:          var(--espace-lg) var(--espace-md) 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espace-lg);
}

.footer-col {
    flex:      1;
    min-width: 200px;
}

.footer-logo-nom {
    font-family: var(--font-titre);
    font-size:   1.5rem;
    color:       var(--or);
    margin-bottom: 0.3rem;
}

.footer-logo-sous {
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.2rem;
}

.footer-col p {
    color:     rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.footer-col h3,
.footer-col h4 {
    color: var(--or);
    font-family: var(--font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.footer-col h2 {
    color: var(--or);
    font-family: var(--font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.footer-liens li {
    margin-bottom: 0.6rem;
}

.footer-horaire-sep {
    margin-top: var(--espace-xs);
}

.footer-liens a {
    color:      rgba(255, 255, 255, 0.55);
    font-size:  0.9rem;
    transition: color 0.25s ease;
}

.footer-liens a:hover {
    color: var(--or);
}

.footer-contact-liste li {
    display:       flex;
    gap:           0.6rem;
    margin-bottom: 0.7rem;
    font-size:     0.9rem;
    color:         rgba(255, 255, 255, 0.55);
}

.footer-contact-liste span.icone {
    color:      var(--or);
    flex-shrink: 0;
}

.footer-reseaux {
    display: flex;
    gap:     0.8rem;
    margin-top: 1rem;
}

.footer-reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: opacity 0.25s ease;
}

.footer-reseaux i {
    color: var(--or);
    font-size: 1.5rem;
}

.footer-reseaux a:hover {
    opacity: 0.8;
    color:            var(--noir);
}

.footer-bas {
    max-width:   1200px;
    margin:      0 auto;
    padding:     1.5rem 0;
    display:     flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.5rem;
}

.footer-bas p {
    font-size: 0.82rem;
    color:     rgba(255, 255, 255, 0.35);
    margin:    0;
}

.footer-bas .fait-avec {
    color: var(--or-clair);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .footer-inner {
        gap: var(--espace-md);
    }
}

@media (max-width: 640px) {
    :root {
        --espace-xl: 3.5rem;
        --espace-lg: 2.5rem;
    }

    
    .navbar-inner {
        flex-direction: column;
        height:         auto;
        padding:        1rem 0;
        gap:            0.8rem;
    }

    .nav-liens {
        gap:       var(--espace-sm);
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-liens a {
        font-size: 0.75rem;
    }

    
    .hero-legal h1 {
        font-size: 2rem;
    }

    
    .hero-legal {
        margin-top: 0;
    }

    
    .legal-contenu {
        padding: 2rem 1rem;
    }

    .legal-article h2 {
        font-size: 1.3rem;
    }

    
    .footer-bas {
        flex-direction: column;
        text-align:     center;
    }
}