/* Politique de confidentialité */

.politique-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

/* CGU sans sidebar (une seule colonne) */
.politique-container.cgu-single-column {
    grid-template-columns: 1fr;
    max-width: 1200px;
}

.politique-content {
    background: #fff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.politique-content h1 {
    font-size: 2.5rem;
    color: #E74C3C;
    margin-bottom: 1rem;
    font-weight: 700;
}

.last-updated {
    color: #7f8c8d;
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.politique-content section {
    margin-bottom: 3rem;
}

.politique-content h2 {
    font-size: 1.8rem;
    color: #E74C3C;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E74C3C;
    font-weight: 600;
}

.politique-content h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
}

.politique-content h4 {
    font-size: 1.1rem;
    color: #34495e;
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.table-finalites,
.table-conservation {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.table-finalites th,
.table-conservation th {
    background: #ecf0f1;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.table-finalites td,
.table-conservation td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #ecf0f1;
}

.droits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.droit-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #E74C3C;
}

.droit-card h3 {
    font-size: 1.2rem;
    margin-top: 0;
}

.btn-droit, .btn-cookies {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #E74C3C;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-droit:hover, .btn-cookies:hover {
    background: #c0392b;
}

.btn-droit.btn-danger {
    background: #e74c3c;
}

.btn-cookies {
    background: #3498db;
}

.btn-cookies:hover {
    background: #2980b9;
}

.contact-rgpd {
    background: #fff3cd;
    padding: 1.5rem;
    border-left: 4px solid #ffc107;
    margin: 2rem 0;
}

/* Alertes avec padding pour éviter que les listes dépassent */
.politique-content .alert-warning,
.politique-content .alert-danger,
.politique-content .alert-info,
.politique-content .contact-rgpd {
    padding: 1.5rem 1.5rem 1.5rem 2.5rem !important;
}

.politique-content .alert-warning ol,
.politique-content .alert-danger ol,
.politique-content .alert-info ol {
    margin-left: 0;
    padding-left: 1.5rem;
}

.politique-content .alert-warning ul,
.politique-content .alert-danger ul,
.politique-content .alert-info ul {
    margin-left: 0;
    padding-left: 1.5rem;
}

/* Scroll offset pour compenser le header fixe */
.politique-content section {
    scroll-margin-top: 100px;
}

/* Section CGU HTML content */
.cgu-html {
    margin-bottom: 2rem;
}

/* Footer CGU */
.cgu-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid #ecf0f1;
}

.cgu-footer p {
    margin: 0;
}

.cgu-footer a {
    color: #E74C3C;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.cgu-footer a:hover {
    color: #c0392b;
}

/* Alerte d'acceptation CGU */
.acceptation-info {
    background: #d4edda !important;
    border-left: 4px solid #28a745 !important;
    padding: 1.5rem !important;
    border-radius: 4px;
    margin-bottom: 2rem;
}

/* Sommaire fixe */
.sommaire {
    position: sticky;
    top: 2rem;
    height: fit-content;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.sommaire h3 {
    margin-top: 0;
    color: #2c3e50;
}

.sommaire nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sommaire a {
    color: #34495e;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.sommaire a:hover {
    background: #e9ecef;
}

/* ============================================
   MODE DARK
============================================ */

.dark-mode .politique-content {
    background: var(--card-bg, #2a3334);
    color: var(--text-color, #f0f0f0);
}

.dark-mode .politique-content h1 {
    color: #ff6b6b;
}

.dark-mode .politique-content h2 {
    color: #ff6b6b;
    border-bottom-color: #ff6b6b;
}

.dark-mode .politique-content h3 {
    color: var(--text-color, #f0f0f0);
}

.dark-mode .politique-content h4 {
    color: var(--text-light, #cccccc);
}

.dark-mode .last-updated {
    color: #999;
}

.dark-mode .table-finalites th,
.dark-mode .table-conservation th {
    background: #3a4446;
    color: var(--text-color, #f0f0f0);
}

.dark-mode .table-finalites td,
.dark-mode .table-conservation td {
    border-bottom-color: #3a4446;
    color: var(--text-light, #cccccc);
}

.dark-mode .droit-card {
    background: #3a4446;
    border-left-color: #ff6b6b;
}

.dark-mode .contact-rgpd {
    background: #3a4020;
    border-left-color: #ffc107;
    color: var(--text-color, #f0f0f0);
}

.dark-mode .sommaire {
    background: #3a4446;
}

.dark-mode .sommaire h3 {
    color: var(--text-color, #f0f0f0);
}

.dark-mode .sommaire a {
    color: var(--text-light, #cccccc);
}

.dark-mode .sommaire a:hover {
    background: #4a5456;
}

.dark-mode .alert-info {
    background: #2a3a4a !important;
    border-left-color: #2196f3 !important;
    color: var(--text-color, #f0f0f0) !important;
}

.dark-mode .alert-warning {
    background: #3a4020 !important;
    border-left-color: #ffc107 !important;
    color: var(--text-color, #f0f0f0) !important;
}

.dark-mode .alert-danger {
    background: #4a2020 !important;
    border-left-color: #dc3545 !important;
    color: var(--text-color, #f0f0f0) !important;
}

.dark-mode .contact-box {
    background: #3a4446 !important;
    color: var(--text-color, #f0f0f0) !important;
}

.dark-mode .text-muted {
    color: #999 !important;
}

.dark-mode code {
    background: #1a1f20;
    color: #4ecdc4;
    padding: 2px 6px;
    border-radius: 3px;
}

.dark-mode .cgu-footer {
    border-top-color: #3a4446;
}

.dark-mode .cgu-footer a {
    color: #ff6b6b;
}

.dark-mode .cgu-footer a:hover {
    color: #ff8787;
}

.dark-mode .acceptation-info {
    background: #2a4020 !important;
    border-left-color: #4caf50 !important;
    color: var(--text-color, #f0f0f0) !important;
}

/* ============================================
   RESPONSIVE DESIGN
============================================ */

/* Large tablets and desktops (1024px) */
@media (max-width: 1024px) {
    .politique-container {
        max-width: 100%;
        padding: 0 1.5rem;
        gap: 2rem;
    }

    .politique-content {
        padding: 2.5rem;
    }
}

/* Tablets (768px) */
@media (max-width: 768px) {
    .politique-container {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    .politique-content {
        padding: 2rem;
    }

    .politique-content h1 {
        font-size: 2rem;
    }

    .politique-content h2 {
        font-size: 1.5rem;
    }

    .sommaire {
        position: static;
        order: -1; /* Afficher le sommaire en premier sur mobile */
    }

    .droits-grid {
        grid-template-columns: 1fr;
    }

    .table-finalites,
    .table-conservation {
        font-size: 0.9rem;
    }

    .table-finalites th,
    .table-conservation th,
    .table-finalites td,
    .table-conservation td {
        padding: 0.5rem;
    }
}

/* Mobile phones (480px) */
@media (max-width: 480px) {
    .politique-container {
        padding: 0 0.75rem;
        margin: 1rem auto;
    }

    .politique-content {
        padding: 1.5rem;
    }

    .politique-content h1 {
        font-size: 1.75rem;
    }

    .politique-content h2 {
        font-size: 1.3rem;
    }

    .politique-content h3 {
        font-size: 1.1rem;
    }

    .droit-card {
        padding: 1rem;
    }

    .table-finalites,
    .table-conservation {
        font-size: 0.85rem;
    }
}

/* Small phones (320px) */
@media (max-width: 320px) {
    .politique-container {
        padding: 0 0.5rem;
        margin: 0.5rem auto;
    }

    .politique-content {
        padding: 1rem;
    }

    .politique-content h1 {
        font-size: 1.5rem;
    }

    .politique-content h2 {
        font-size: 1.2rem;
    }

    .politique-content h3 {
        font-size: 1rem;
    }
}