:root {
    --couleur-primaire: #073b4c;
    --couleur-primaire-claire: #e6ebee;
    --couleur-primaire-foncee: #052633;
    --couleur-secondaire: #2a9d8f;
    --couleur-secondaire-claire: #e8f5f3;
    --couleur-tertiaire: #f4a261;
    --couleur-tertiaire-claire: #fef3e8;
    --couleur-accent: #e63946;
    --couleur-accent-claire: #fdedef;
    --couleur-neutre: #6c757d;
    --couleur-neutre-claire: #f8f9fa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    background: linear-gradient(135deg, var(--couleur-primaire-claire) 0%, #ffffff 100%);
    overflow-x: hidden;
}

.container-principal {
    min-height: 100vh;
    position: relative;
}

.zone-magnetique-primaire {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    padding: 80px 5% 60px 8%;
    align-items: center;
    min-height: 100vh;
    position: relative;
}

.bloc-asymetrique-gauche {
    z-index: 10;
    transform: translateY(-20px);
}

.capsule-textuelle-majeure {
    max-width: 580px;
    animation: apparition-fluide 1.2s ease-out;
}

.titre-percutant-geometrique {
    font-family: 'Times New Roman', serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.sous-declaration-audacieuse {
    font-size: 1.35rem;
    color: var(--couleur-secondaire);
    margin-bottom: 32px;
    font-weight: 500;
    letter-spacing: 0.01em
}

.paragraphe-convaincant-dense {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 45px;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

.ensemble-boutons-dynamiques {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.bouton-pilule-primaire {
    background: var(--couleur-accent);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.bouton-pilule-primaire:hover {
    background: #d63447;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4)
}

.bouton-pilule-secondaire {
    background: transparent;
    color: var(--couleur-primaire);
    padding: 16px 32px;
    border: 2px solid var(--couleur-primaire);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.bouton-pilule-secondaire:hover {
    background: var(--couleur-primaire);
    color: white;
    transform: translateY(-2px)
}

.zone-visuelle-droite {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.conteneur-image-hero {
    position: relative;
    z-index: 5;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(7, 59, 76, 0.15);
    transform: rotate(-2deg);
}

.image-hero-adaptative {
    width: 100%;
    height: auto;
    max-width: 480px;
    display: block;
    transition: transform 0.4s ease;
}

.image-hero-adaptative:hover {
    transform: scale(1.05)
}

.ornement-geometrique-flottant {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: var(--couleur-tertiaire);
    border-radius: 30px;
    opacity: 0.8;
    z-index: 1;
    transform: rotate(45deg);
}

.accent-visuel-complementaire {
    position: absolute;
    bottom: -20px;
    left: -40px;
    width: 80px;
    height: 80px;
    background: var(--couleur-secondaire);
    border-radius: 50px;
    opacity: 0.7;
    z-index: 1
}

@keyframes apparition-fluide {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .zone-magnetique-primaire {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 60px 5%;
        text-align: center;
    }
    
    .bloc-asymetrique-gauche {
        order: 2;
        transform: none;
    }
    
    .zone-visuelle-droite {
        order: 1;
    }
    
    .ensemble-boutons-dynamiques {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .zone-magnetique-primaire {
        padding: 40px 4%;
        gap: 40px;
    }
    
    .titre-percutant-geometrique {
        font-size: 2.5rem;
    }
    
    .sous-declaration-audacieuse {
        font-size: 1.2rem;
    }
    
    .ensemble-boutons-dynamiques {
        flex-direction: column;
        align-items: center;
    }
    
    .bouton-pilule-primaire,
    .bouton-pilule-secondaire {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    .conteneur-image-hero {
        transform: none;
    }
    
    .ornement-geometrique-flottant {
        width: 80px;
        height: 80px;
        top: -20px;
        right: -15px;
    }
    
    .accent-visuel-complementaire {
        width: 60px;
        height: 60px;
        bottom: -10px;
        left: -20px;
    }
}




















.territoire-narratif-club {
    padding: 100px 5% 120px;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
    position: relative;
}

.enveloppe-contenu-majeure {
    max-width: 1200px;
    margin: 0 auto;
}

.assemblage-histoire-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 100px;
}

.marqueur-section-distinctif {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: -0.01em
}

.timeline-organique-creation {
    position: relative;
    padding-left: 40px;
}

.timeline-organique-creation::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--couleur-accent) 0%, var(--couleur-secondaire) 100%);
    border-radius: 3px;
}

.etape-fondatrice {
    position: relative;
    margin-bottom: 45px;
    padding-left: 30px;
}

.etape-fondatrice::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--couleur-accent);
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3)
}

.badge-chronologique {
    background: var(--couleur-tertiaire);
    color: white;
    padding: 6px 18px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

.recit-fondation-dense {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

.grille-objectifs-strategiques {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
}

.objectif-primordial {
    padding: 30px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(7, 59, 76, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.objectif-primordial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--couleur-secondaire);
}

.objectif-primordial.cultiver::before {
    background: var(--couleur-accent);
}

.objectif-primordial.innover::before {
    background: var(--couleur-tertiaire)
}

.objectif-primordial:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.12);
}

.icone-conceptuelle-cultiver,
.icone-conceptuelle-rassembler,
.icone-conceptuelle-innover {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.icone-conceptuelle-cultiver {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff6b7a 100%);
}

.icone-conceptuelle-rassembler {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #3eb3a3 100%);
}

.icone-conceptuelle-innover {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7b577 100%);
}

.titre-objectif-percutant {
    font-family: 'Times New Roman', serif;
    font-size: 1.4rem;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
    font-weight: 600;
}

.description-objectif-detaillee {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.85;
}

.galerie-moments-authentiques {
    text-align: center;
}

.galerie-moments-authentiques .marqueur-section-distinctif {
    text-align: center;
    margin-bottom: 60px;
}

.mosaique-visuelle-irreguliere {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    justify-items: center;
}

.frame-photo-unique {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(7, 59, 76, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

.frame-photo-unique.grande-concentration {
    transform: rotate(-1deg);
}

.frame-photo-unique.moment-victoire {
    transform: rotate(2deg);
}

.frame-photo-unique.session-apprentissage {
    transform: rotate(-0.5deg);
}

.frame-photo-unique.soiree-conviviale {
    transform: rotate(1.5deg);
}

.frame-photo-unique.evenement-special {
    transform: rotate(-1.8deg)
}

.frame-photo-unique:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 15px 40px rgba(7, 59, 76, 0.2);
}

.photo-vie-club {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (max-width: 1024px) {
    .assemblage-histoire-mission {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .territoire-narratif-club {
        padding: 80px 4% 100px;
    }
    
    .marqueur-section-distinctif {
        font-size: 2.4rem;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .territoire-narratif-club {
        padding: 60px 4% 80px;
    }
    
    .timeline-organique-creation {
        padding-left: 25px;
    }
    
    .etape-fondatrice {
        padding-left: 20px;
    }
    
    .marqueur-section-distinctif {
        font-size: 2rem;
    }
    
    .mosaique-visuelle-irreguliere {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .frame-photo-unique {
        max-width: 350px;
    }
    
    .frame-photo-unique.grande-concentration,
    .frame-photo-unique.moment-victoire,
    .frame-photo-unique.session-apprentissage,
    .frame-photo-unique.soiree-conviviale,
    .frame-photo-unique.evenement-special {
        transform: none;
    }
    
    .frame-photo-unique:hover {
        transform: scale(1.02);
    }
}




















.univers-protocoles-acces {
    padding: 90px 5% 110px;
    background: linear-gradient(170deg, var(--couleur-primaire-claire) 0%, #ffffff 50%, var(--couleur-secondaire-claire) 100%);
    position: relative;
}

.conteneur-reglementaire-principal {
    max-width: 1100px;
    margin: 0 auto;
}

.zone-titre-reglementaire {
    text-align: center;
    margin-bottom: 70px;
}

.intitule-protocoles-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 3rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sous-texte-accueil-chaleureux {
    font-size: 1.25rem;
    color: var(--couleur-primaire-foncee);
    opacity: 0.8;
    font-weight: 400;
}

.architecture-regles-complexe {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

.module-acces-geographique,
.module-conditions-financieres,
.module-preparation-materielle {
    background: white;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 12px 40px rgba(7, 59, 76, 0.1);
    position: relative;
    overflow: hidden
}

.en-tete-module-distinctif {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
}

.pastille-identification-localisation,
.pastille-identification-finances,
.pastille-identification-equipement {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pastille-identification-localisation {
    background: var(--couleur-accent);
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
}

.pastille-identification-finances {
    background: var(--couleur-secondaire);
    box-shadow: 0 0 20px rgba(42, 157, 143, 0.4);
}

.pastille-identification-equipement {
    background: var(--couleur-tertiaire);
    box-shadow: 0 0 20px rgba(244, 162, 97, 0.4);
}

.titre-module-percutant {
    font-family: 'Times New Roman', serif;
    font-size: 1.8rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    margin: 0;
}

.bloc-adresse-complete {
    background: var(--couleur-primaire-claire);
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.marqueur-lieu-principal {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--couleur-primaire);
    margin-bottom: 8px;
}

.complement-localisation,
.reference-proximite {
    color: var(--couleur-primaire-foncee);
    opacity: 0.85;
    margin-bottom: 6px;
}

.instructions-acces-detaillees {
    display: grid;
    gap: 20px;
}

.etiquette-transport {
    color: var(--couleur-primaire);
    font-weight: 600;
}

.details-transport {
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

.grille-tarifs-flexibles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.option-tarifaire-decouverte,
.option-tarifaire-reguliere,
.option-tarifaire-premium {
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option-tarifaire-decouverte {
    background: linear-gradient(135deg, var(--couleur-secondaire-claire) 0%, #f0f9f8 100%);
    border: 2px solid var(--couleur-secondaire);
}

.option-tarifaire-reguliere {
    background: linear-gradient(135deg, var(--couleur-primaire-claire) 0%, #f5f8f9 100%);
    border: 2px solid var(--couleur-primaire);
}

.option-tarifaire-premium {
    background: linear-gradient(135deg, var(--couleur-tertiaire-claire) 0%, #fef8f2 100%);
    border: 2px solid var(--couleur-tertiaire);
}

.option-tarifaire-decouverte:hover,
.option-tarifaire-reguliere:hover,
.option-tarifaire-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(7, 59, 76, 0.15);
}

.badge-type-session {
    background: var(--couleur-primaire);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
}

.montant-principal-gratuit {
    font-size: 2rem;
    font-weight: 800;
    color: var(--couleur-secondaire);
    margin-bottom: 15px;
}

.montant-principal-standard,
.montant-principal-avantageux {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
}

.description-formule {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--couleur-primaire-foncee);
    opacity: 0.85;
}

.categorisation-objets-utiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.sous-titre-categorie-rouge,
.sous-titre-categorie-verte {
    font-family: 'Times New Roman', serif;
    font-size: 1.3rem;
    margin-bottom: 18px;
    font-weight: 600;
}

.sous-titre-categorie-rouge {
    color: var(--couleur-accent);
}

.sous-titre-categorie-verte {
    color: var(--couleur-secondaire);
}

.liste-objets-necessaires,
.liste-objets-recommandes,
.liste-objets-proscrits {
    list-style: none;
    padding: 0;
}

.item-obligatoire,
.item-recommande,
.item-interdit {
    padding: 12px 0;
    border-left: 4px solid;
    padding-left: 15px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.item-obligatoire {
    border-left-color: var(--couleur-accent);
    background: rgba(230, 57, 70, 0.05);
}

.item-recommande {
    border-left-color: var(--couleur-secondaire);
    background: rgba(42, 157, 143, 0.05);
}

.item-interdit {
    border-left-color: var(--couleur-accent);
    background: rgba(230, 57, 70, 0.08);
    opacity: 0.9
}

.encadre-informations-supplementaires {
    margin-top: 60px;
    background: var(--couleur-primaire);
    color: white;
    padding: 30px;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.notice-horaires-flexibles,
.contact-urgence-rapide {
    font-size: 1.05rem;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .encadre-informations-supplementaires {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .categorisation-objets-utiles {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .univers-protocoles-acces {
        padding: 70px 4% 90px;
    }
    
    .intitule-protocoles-majeur {
        font-size: 2.5rem;
    }
    
    .module-acces-geographique,
    .module-conditions-financieres,
    .module-preparation-materielle {
        padding: 30px 25px;
    }
    
    .grille-tarifs-flexibles {
        grid-template-columns: 1fr;
    }
    
    .en-tete-module-distinctif {
        gap: 15px;
    }
    
    .titre-module-percutant {
        font-size: 1.5rem;
    }
}







.bibliotheque-ludique-complete {
    padding: 100px 5% 120px;
    background: linear-gradient(145deg, #ffffff 0%, var(--couleur-primaire-claire) 40%, #ffffff 100%);
}

.conteneur-collection-principale {
    max-width: 1200px;
    margin: 0 auto;
}

.presentation-catalogue-majeure {
    text-align: center;
    margin-bottom: 80px;
}

.titre-collection-impressionnant {
    font-family: 'Times New Roman', serif;
    font-size: 3.2rem;
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.description-bibliotheque-riche {
    font-size: 1.3rem;
    color: var(--couleur-primaire-foncee);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

.exposition-jeux-organisee {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 35px;
    margin-bottom: 70px;
}

.fiche-jeu-detaillee {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 10px 35px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.fiche-jeu-detaillee::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--couleur-secondaire);
}

.fiche-jeu-detaillee.strategie-pure::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.fiche-jeu-detaillee.deduction-mystere::before {
    background: linear-gradient(90deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.fiche-jeu-detaillee.cooperation-intense::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.fiche-jeu-detaillee.strategie-economique::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.fiche-jeu-detaillee.bluff-social::before {
    background: linear-gradient(90deg, #9b59b6 0%, #c0749e 100%);
}

.fiche-jeu-detaillee.territoire-controle::before {
    background: linear-gradient(90deg, #3498db 0%, #5dade2 100%);
}

.fiche-jeu-detaillee.aventure-narrative::before {
    background: linear-gradient(90deg, #2c3e50 0%, #4a6741 100%);
}

.fiche-jeu-detaillee.construction-cite::before {
    background: linear-gradient(90deg, #e67e22 0%, #f39c12 100%);
}

.fiche-jeu-detaillee.gestion-ressources::before {
    background: linear-gradient(90deg, #27ae60 0%, #58d68d 100%);
}

.fiche-jeu-detaillee.rapidite-reflexion::before {
    background: linear-gradient(90deg, #8e44ad 0%, #bb8fce 100%);
}

.fiche-jeu-detaillee:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.15);
}

.conteneur-meta-jeu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.nom-jeu-distinctif {
    font-family: 'Times New Roman', serif;
    font-size: 1.6rem;
    color: var(--couleur-primaire);
    font-weight: 700;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.badge-genre-principal {
    background: var(--couleur-primaire);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.synopsis-jeu-captivant {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    margin-bottom: 25px;
    opacity: 0.9;
}

.specifications-techniques-jeu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    border-top: 2px solid var(--couleur-primaire-claire);
    padding-top: 20px;
}

.detail-joueurs-precise,
.detail-duree-estimee,
.detail-complexite-evaluee {
    text-align: center;
}

.etiquette-spec {
    display: block;
    font-size: 0.85rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.valeur-spec-importante {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--couleur-primaire-foncee);
}

.indicateur-complexite-visuel {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
}

.point-complexite {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--couleur-neutre-claire);
    border: 2px solid var(--couleur-neutre);
    transition: all 0.3s ease
}

.point-complexite.actif {
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
}

.niveau-facile .point-complexite.actif {
    background: var(--couleur-secondaire);
    border-color: var(--couleur-secondaire);
}

.niveau-moyen .point-complexite.actif {
    background: var(--couleur-tertiaire);
    border-color: var(--couleur-tertiaire);
}

.niveau-eleve .point-complexite.actif {
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
}

.niveau-expert .point-complexite.actif {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
}

.notice-collection-evolutive {
    background: var(--couleur-primaire-claire);
    padding: 30px;
    border-radius: 25px;
    text-align: center;
}

.texte-mise-a-jour {
    font-size: 1.1rem;
    color: var(--couleur-primaire-foncee);
    margin: 0;
    font-style: italic;
    opacity: 0.9;
}

@media (max-width: 1024px) {
    .exposition-jeux-organisee {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
    }
    
    .specifications-techniques-jeu {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: left;
    }
    
    .detail-joueurs-precise,
    .detail-duree-estimee,
    .detail-complexite-evaluee {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    
    .indicateur-complexite-visuel {
        justify-content: flex-end;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .bibliotheque-ludique-complete {
        padding: 80px 4% 100px;
    }
    
    .titre-collection-impressionnant {
        font-size: 2.8rem;
    }
    
    .exposition-jeux-organisee {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .fiche-jeu-detaillee {
        padding: 28px 25px;
    }
    
    .conteneur-meta-jeu {
        flex-direction: column;
        gap: 12px;
    }
    
    .badge-genre-principal {
        align-self: flex-start;
    }
    
    .nom-jeu-distinctif {
        font-size: 1.4rem;
    }
}














.planification-evenements-hebdomadaires {
    padding: 100px 5% 120px;
    background: linear-gradient(160deg, var(--couleur-primaire-claire) 0%, #ffffff 60%, var(--couleur-secondaire-claire) 100%);
}

.conteneur-programmation-principale {
    max-width: 1300px;
    margin: 0 auto;
}

.en-tete-calendrier-dynamique {
    text-align: center;
    margin-bottom: 60px;
}

.titre-planning-strategique {
    font-family: 'Times New Roman', serif;
    font-size: 3.1rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.description-planning-riche {
    font-size: 1.25rem;
    color: var(--couleur-primaire-foncee);
    opacity: 0.8;
    margin-bottom: 35px;
}

.indicateur-periode-courante {
    background: var(--couleur-primaire);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    display: inline-block;
    font-weight: 600;
    font-size: 1.05rem;
}

.etiquette-periode {
    opacity: 0.9;
}

.valeur-periode-active {
    font-weight: 700;
    text-transform: capitalize;
}

.separateur-periode {
    margin: 0 8px;
    opacity: 0.7;
}

.grille-evenements-organises {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
}

.carte-evenement-unique {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 12px 40px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-evenement-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--couleur-secondaire);
}

.carte-evenement-unique.virtuel::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-evenement-unique.presentiel::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-evenement-unique:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(7, 59, 76, 0.15);
}

.en-tete-evenement-principal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    gap: 15px;
}

.jour-evenement-distinctif {
    font-family: 'Times New Roman', serif;
    font-size: 1.3rem;
    color: var(--couleur-primaire);
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.2;
    flex: 1;
}

.badge-format-evenement {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.badge-format-evenement.presentiel {
    background: var(--couleur-secondaire);
    color: white;
}

.badge-format-evenement.virtuel {
    background: var(--couleur-tertiaire);
    color: white;
}

.nom-evenement-percutant {
    font-family: 'Times New Roman', serif;
    font-size: 1.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.specifications-evenement-pratiques {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--couleur-primaire-claire);
    border-radius: 15px;
}

.detail-horaire-precis,
.detail-lieu-specifique,
.detail-organisateur-responsable {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.detail-organisateur-responsable {
    grid-column: 1 / -1;
}

.etiquette-detail {
    font-size: 0.8rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.valeur-detail-importante {
    font-size: 1rem;
    color: var(--couleur-primaire-foncee);
    font-weight: 600;
}

.description-evenement-captivante {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 25px;
}

.pied-evenement-actions {
    border-top: 2px solid var(--couleur-primaire-claire);
    padding-top: 20px;
}

.indicateur-popularite-evenement {
    display: flex;
    align-items: center;
    gap: 15px;
}

.jauge-participation-visuelle {
    flex: 1;
    height: 8px;
    background: var(--couleur-neutre-claire);
    border-radius: 10px;
    overflow: hidden;
}

.niveau-participation-actuel {
    height: 100%;
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, var(--couleur-accent) 100%);
    border-radius: 10px;
    transition: width 0.8s ease;
}

.texte-participation {
    font-size: 0.9rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    flex-shrink: 0;
}

.informations-complementaires-planning {
    background: var(--couleur-primaire);
    color: white;
    padding: 35px;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
}

.notice-inscription-rapide {
    font-size: 1.1rem;
    line-height: 1.6;
}

.legende-formats-evenements {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.format-physique,
.format-numerique {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

.indicateur-format-presentiel,
.indicateur-format-virtuel {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.indicateur-format-presentiel {
    background: var(--couleur-secondaire);
}

.indicateur-format-virtuel {
    background: var(--couleur-tertiaire);
}

@media (max-width: 1024px) {
    .grille-evenements-organises {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
    }
    
    .informations-complementaires-planning {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .legende-formats-evenements {
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .planification-evenements-hebdomadaires {
        padding: 80px 4% 100px;
    }
    
    .titre-planning-strategique {
        font-size: 2.6rem;
    }
    
    .grille-evenements-organises {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .carte-evenement-unique {
        padding: 25px;
    }
    
    .en-tete-evenement-principal {
        flex-direction: column;
        gap: 12px;
    }
    
    .badge-format-evenement {
        align-self: flex-start;
    }
    
    .specifications-evenement-pratiques {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .detail-organisateur-responsable {
        grid-column: 1;
    }
    
    .indicateur-periode-courante {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    .legende-formats-evenements {
        flex-direction: column;
        gap: 15px;
    }
}















.zone-conclusion-institutionnelle {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-primaire-foncee) 100%);
    color: white;
    padding: 60px 5% 30px;
    position: relative;
    overflow: hidden;
}

.zone-conclusion-institutionnelle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--couleur-accent) 0%, var(--couleur-secondaire) 50%, var(--couleur-tertiaire) 100%);
}

.conteneur-informations-legales {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 50px;
    align-items: start;
    margin-bottom: 40px;
}

.signature-etablissement-principale {
    text-align: left;
}

.denomination-club-officielle {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.nom-entite-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
}

.localisation-geographique-precise {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.declaration-droits-reserves {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.navigation-documents-officiels {
    justify-self: center;
}

.liste-liens-reglementaires {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.element-politique-donnees,
.element-politique-cookies,
.element-conditions-utilisation {
    position: relative;
}

.lien-document-legal {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lien-document-legal:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.coordonnees-contact-rapides {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-telephonique-direct,
.adresse-electronique-principale,
.localisation-physique-complete {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.contact-telephonique-direct {
    font-weight: 600;
    color: white;
    font-size: 1.1rem;
}

.adresse-electronique-principale {
    font-weight: 500;
}

.localisation-physique-complete {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 250px;
    margin-left: auto;
}

.barre-separation-finale {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    margin: 30px 0 25px;
}

.mention-creation-technique {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.texte-discret-conception {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .conteneur-informations-legales {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .signature-etablissement-principale,
    .coordonnees-contact-rapides {
        text-align: center;
    }
    
    .localisation-physique-complete {
        margin: 0 auto;
    }
    
    .liste-liens-reglementaires {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .zone-conclusion-institutionnelle {
        padding: 50px 4% 25px;
    }
    
    .conteneur-informations-legales {
        gap: 35px;
    }
    
    .nom-entite-majeur {
        font-size: 1.6rem;
    }
    
    .liste-liens-reglementaires {
        flex-direction: column;
        gap: 15px;
    }
    
    .lien-document-legal {
        padding: 10px 25px;
        font-size: 1rem;
    }
    
    .coordonnees-contact-rapides {
        gap: 10px;
    }
    
    .contact-telephonique-direct {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .lien-document-legal {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
    
    .localisation-physique-complete {
        font-size: 0.9rem;
        max-width: 100%;
    }
}





















.navigation-principale-superieure {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(7, 59, 76, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 5%;
    box-shadow: 0 2px 20px rgba(7, 59, 76, 0.08);
}

.conteneur-menu-horizontal {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}

.identite-marque-gauche {
    flex-shrink: 0;
}

.lien-nom-etablissement {
    font-family: 'Times New Roman', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--couleur-primaire);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.lien-nom-etablissement:hover {
    color: var(--couleur-primaire-foncee);
}

.zone-action-contact-droite {
    flex-shrink: 0;
}

.bouton-contact-principal {
    background: var(--couleur-accent);
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(230, 57, 70, 0.3);
}

.bouton-contact-principal:hover {
    background: #d63447;
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(230, 57, 70, 0.4);
}

@media (max-width: 768px) {
    .navigation-principale-superieure {
        padding: 0 4%;
    }
    
    .conteneur-menu-horizontal {
        padding: 15px 0;
    }
    
    .lien-nom-etablissement {
        font-size: 1.4rem;
    }
    
    .bouton-contact-principal {
        padding: 10px 24px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .lien-nom-etablissement {
        font-size: 1.2rem;
    }
    
    .bouton-contact-principal {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}



















/* About page specific styles */

.conteneur-principal-formats {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--couleur-primaire-claire) 0%, #ffffff 50%, var(--couleur-secondaire-claire) 100%);
}

/* Introduction Section */
.introduction-formats-ludiques {
    padding: 80px 5% 60px;
    text-align: center;
}

.capsule-introduction-centree {
    max-width: 800px;
    margin: 0 auto;
}

.titre-formats-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 3.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.description-formats-generale {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
}

/* Main formats section */
.exposition-formats-detaillee {
    padding: 0 5% 100px;
}

.conteneur-formats-organises {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 40px;
}

.carte-format-unique {
    background: white;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-format-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--couleur-secondaire);
}

.carte-format-unique.jeu-libre::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-format-unique.tournois::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.carte-format-unique.master-classes::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-format-unique.soirees-thematiques::before {
    background: linear-gradient(90deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.carte-format-unique:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 55px rgba(7, 59, 76, 0.18);
}

.en-tete-format-distinctif {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.icone-format-conceptuelle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.icone-format-conceptuelle.libre {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-format-conceptuelle.competition {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.icone-format-conceptuelle.apprentissage {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.icone-format-conceptuelle.thematique {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.nom-format-principal {
    font-family: 'Times New Roman', serif;
    font-size: 2rem;
    color: var(--couleur-primaire);
    margin: 0;
    font-weight: 700;
    flex: 1;
    min-width: 200px;
}

.badge-niveau-adapte {
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.badge-niveau-adapte.debutant-friendly {
    background: var(--couleur-secondaire);
    color: white;
}

.badge-niveau-adapte.experimente {
    background: var(--couleur-accent);
    color: white;
}

.badge-niveau-adapte.progression {
    background: var(--couleur-tertiaire);
    color: white;
}

.badge-niveau-adapte.creativite {
    background: var(--couleur-primaire);
    color: white;
}

.corps-description-format {
    margin-bottom: 30px;
}

.explication-format-captivante {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    margin-bottom: 25px;
    opacity: 0.9;
}

.caracteristiques-format-pratiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
    background: var(--couleur-primaire-claire);
    border-radius: 20px;
}

.detail-format-specifique {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.label-caracteristique {
    font-size: 0.8rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.valeur-caracteristique {
    font-size: 1rem;
    color: var(--couleur-primaire-foncee);
    font-weight: 700;
}

.pied-format-recommandations {
    border-top: 2px solid var(--couleur-primaire-claire);
    padding-top: 20px;
}

.conseil-participation {
    font-size: 1rem;
    color: var(--couleur-primaire-foncee);
    line-height: 1.6;
    opacity: 0.9;
}

.conseil-participation strong {
    color: var(--couleur-primaire);
    font-weight: 700;
}

/* Selection guide section */
.guide-selection-format {
    padding: 80px 5% 100px;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
}

.conteneur-conseils-selection {
    max-width: 1000px;
    margin: 0 auto;
}

.titre-guide-orientation {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}

.grille-conseils-niveaux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 50px;
}

.bloc-conseil-niveau {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 40px rgba(7, 59, 76, 0.1);
    position: relative;
    overflow: hidden;
}

.bloc-conseil-niveau.debutants::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.bloc-conseil-niveau.experimente::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.titre-niveau-cible {
    font-family: 'Times New Roman', serif;
    font-size: 1.8rem;
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    font-weight: 600;
}

.recommandations-niveau-specifique {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.format-recommande {
    padding: 20px;
    border-radius: 15px;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.format-recommande.prioritaire {
    background: rgba(42, 157, 143, 0.08);
    border-left-color: var(--couleur-secondaire);
}

.format-recommande.secondaire {
    background: rgba(244, 162, 97, 0.08);
    border-left-color: var(--couleur-tertiaire);
}

.format-recommande.evolutif,
.format-recommande.detente {
    background: rgba(7, 59, 76, 0.05);
    border-left-color: var(--couleur-primaire);
}

.format-recommande:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(7, 59, 76, 0.1);
}

.nom-format-conseille {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-bottom: 8px;
}

.raison-recommandation {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

/* Responsive design */
@media (max-width: 1024px) {
    .conteneur-formats-organises {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .grille-conseils-niveaux {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .introduction-formats-ludiques {
        padding: 60px 4% 50px;
    }
    
    .exposition-formats-detaillee {
        padding: 0 4% 80px;
    }
    
    .guide-selection-format {
        padding: 60px 4% 80px;
    }
    
    .titre-formats-majeur {
        font-size: 2.8rem;
    }
    
    .titre-guide-orientation {
        font-size: 2.4rem;
    }
    
    .carte-format-unique {
        padding: 30px 25px;
    }
    
    .en-tete-format-distinctif {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .icone-format-conceptuelle {
        align-self: center;
    }
    
    .nom-format-principal {
        font-size: 1.7rem;
        text-align: center;
        min-width: auto;
    }
    
    .badge-niveau-adapte {
        align-self: center;
    }
    
    .caracteristiques-format-pratiques {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .titre-formats-majeur {
        font-size: 2.4rem;
    }
    
    .description-formats-generale {
        font-size: 1.2rem;
    }
    
    .nom-format-principal {
        font-size: 1.5rem;
    }
    
    .carte-format-unique {
        padding: 25px 20px;
    }
    
    .bloc-conseil-niveau {
        padding: 25px 20px;
    }
}
















/* Contacts page specific styles */

.conteneur-principal-contact {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--couleur-primaire-claire) 0%, #ffffff 30%, var(--couleur-secondaire-claire) 100%);
}

/* Title section */
.zone-titre-contact {
    padding: 80px 5% 60px;
    text-align: center;
}

.capsule-titre-centree {
    max-width: 700px;
    margin: 0 auto;
}

.titre-contact-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 3.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.description-contact-generale {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

/* Contact information section */
.informations-contact-principales {
    padding: 0 5% 80px;
}

.conteneur-coordonnees-completes {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
}

.carte-coordonnee-unique {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 40px rgba(7, 59, 76, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-coordonnee-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--couleur-secondaire);
}

.carte-coordonnee-unique.localisation::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-coordonnee-unique.telephonie::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.carte-coordonnee-unique.courrier::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-coordonnee-unique:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 50px rgba(7, 59, 76, 0.15);
}

.icone-coordonnee-distinctive {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.icone-coordonnee-distinctive.adresse {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-coordonnee-distinctive.telephone {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.icone-coordonnee-distinctive.email {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.contenu-coordonnee-detaille {
    flex: 1;
}

.label-coordonnee-principal {
    font-family: 'Times New Roman', serif;
    font-size: 1.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 12px;
    font-weight: 600;
}

.valeur-coordonnee-complete {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    margin-bottom: 8px;
}

.lien-telephone-direct,
.lien-email-direct {
    color: var(--couleur-primaire);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.lien-telephone-direct:hover,
.lien-email-direct:hover {
    color: var(--couleur-accent);
}

.note-disponibilite {
    font-size: 0.9rem;
    color: var(--couleur-neutre);
    font-style: italic;
}

/* Form section */
.zone-formulaire-contact {
    padding: 80px 5%;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
}

.conteneur-formulaire-principal {
    max-width: 800px;
    margin: 0 auto;
}

.presentation-formulaire {
    text-align: center;
    margin-bottom: 50px;
}

.titre-formulaire-engagement {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
}

.description-formulaire-motivante {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

.formulaire-contact-structure {
    background: white;
    border-radius: 30px;
    padding: 45px;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.groupe-champ-formulaire {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.etiquette-champ-obligatoire {
    font-size: 1.1rem;
    color: var(--couleur-primaire);
    font-weight: 600;
    margin-bottom: 5px;
}

.champ-saisie-principal,
.champ-texte-etendu {
    padding: 18px 20px;
    border: 2px solid var(--couleur-primaire-claire);
    border-radius: 15px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: #ffffff;
}

.champ-saisie-principal:focus,
.champ-texte-etendu:focus {
    outline: none;
    border-color: var(--couleur-secondaire);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.1);
    transform: translateY(-2px);
}

.champ-texte-etendu {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.zone-soumission-formulaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.bouton-envoi-principal {
    background: var(--couleur-accent);
    color: white;
    padding: 18px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
    font-family: inherit;
}

.bouton-envoi-principal:hover {
    background: #d63447;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4);
}

.bouton-envoi-principal:active {
    transform: translateY(-1px);
}

.note-traitement-donnees {
    font-size: 0.9rem;
    color: var(--couleur-neutre);
    text-align: center;
    max-width: 400px;
    line-height: 1.5;
}

/* Map section */
.zone-carte-geographique {
    padding: 80px 5% 100px;
}

.conteneur-carte-complete {
    max-width: 1000px;
    margin: 0 auto;
}

.titre-localisation-carte {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

.encadre-carte-interactive {
    background: white;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    margin-bottom: 30px;
    overflow: hidden;
}

.carte-google-integree {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 15px;
}

.informations-acces-pratiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.conseil-transport,
.conseil-stationnement {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(7, 59, 76, 0.08);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
}

.conseil-transport strong,
.conseil-stationnement strong {
    color: var(--couleur-primaire);
    font-weight: 700;
}

/* Responsive design */
@media (max-width: 1024px) {
    .conteneur-coordonnees-completes {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .informations-acces-pratiques {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .zone-titre-contact {
        padding: 60px 4% 50px;
    }
    
    .informations-contact-principales {
        padding: 0 4% 60px;
    }
    
    .zone-formulaire-contact {
        padding: 60px 4%;
    }
    
    .zone-carte-geographique {
        padding: 60px 4% 80px;
    }
    
    .titre-contact-majeur {
        font-size: 2.8rem;
    }
    
    .titre-formulaire-engagement,
    .titre-localisation-carte {
        font-size: 2.4rem;
    }
    
    .carte-coordonnee-unique {
        padding: 25px;
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .formulaire-contact-structure {
        padding: 35px 25px;
    }
    
    .carte-google-integree {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .titre-contact-majeur {
        font-size: 2.4rem;
    }
    
    .titre-formulaire-engagement,
    .titre-localisation-carte {
        font-size: 2rem;
    }
    
    .description-contact-generale,
    .description-formulaire-motivante {
        font-size: 1.1rem;
    }
    
    .formulaire-contact-structure {
        padding: 25px 20px;
    }
    
    .bouton-envoi-principal {
        width: 100%;
        max-width: 300px;
    }
    
    .encadre-carte-interactive {
        padding: 15px;
    }
}


















/* Cookies page specific styles */

.conteneur-principal-cookies {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--couleur-primaire-claire) 0%, #ffffff 40%, var(--couleur-secondaire-claire) 100%);
}

/* Introduction section */
.introduction-politique-cookies {
    padding: 80px 5% 70px;
    text-align: center;
}

.capsule-introduction-centree {
    max-width: 750px;
    margin: 0 auto;
}

.titre-cookies-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 3.3rem;
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.description-cookies-generale {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 30px;
}

.badge-mise-a-jour {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--couleur-primaire);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 0.95rem;
}

.label-update {
    opacity: 0.9;
}

.date-update {
    font-weight: 700;
}

/* Main explanation section */
.explication-cookies-ludique {
    padding: 0 5% 80px;
}

.conteneur-explications-principales {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
}

.carte-explication-unique {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-explication-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--couleur-secondaire);
}

.carte-explication-unique.definition::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-explication-unique.utilisation::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-explication-unique:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(7, 59, 76, 0.15);
}

.en-tete-explication-distinctive {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.icone-concept-cookies {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
}

.icone-concept-cookies.definition-icon {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-concept-cookies.usage-icon {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.titre-concept-principal {
    font-family: 'Times New Roman', serif;
    font-size: 1.7rem;
    color: var(--couleur-primaire);
    margin: 0;
    font-weight: 600;
}

.description-concept-claire {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin: 0;
}

.liste-utilisations-cookies {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.item-utilisation-specifique {
    padding: 20px;
    background: var(--couleur-primaire-claire);
    border-radius: 15px;
    border-left: 4px solid var(--couleur-tertiaire);
}

.nom-utilisation {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-bottom: 8px;
}

.description-utilisation {
    font-size: 1rem;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    line-height: 1.5;
}

/* Cookie types section */
.types-cookies-detailles {
    padding: 80px 5%;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
}

.conteneur-types-cookies {
    max-width: 1100px;
    margin: 0 auto;
}

.titre-section-types {
    font-family: 'Times New Roman', serif;
    font-size: 2.7rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.grille-types-cookies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.carte-type-cookie {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-type-cookie::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.carte-type-cookie.essentiel::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.carte-type-cookie.fonctionnel::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-type-cookie.analytique::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-type-cookie:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(7, 59, 76, 0.15);
}

.badge-type-cookie {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.badge-type-cookie.necessaire {
    background: var(--couleur-accent);
    color: white;
}

.badge-type-cookie.optionnel {
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire);
}

.nom-type-cookie {
    font-family: 'Times New Roman', serif;
    font-size: 1.4rem;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
    font-weight: 600;
}

.description-type-cookie {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 20px;
}

.statut-activation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.statut-activation.obligatoire {
    background: rgba(230, 57, 70, 0.1);
    border: 1px solid rgba(230, 57, 70, 0.3);
}

.statut-activation.personnalisable {
    background: rgba(42, 157, 143, 0.1);
    border: 1px solid rgba(42, 157, 143, 0.3);
}

.label-statut {
    color: var(--couleur-primaire);
    font-weight: 600;
}

.valeur-statut {
    color: var(--couleur-primaire-foncee);
    font-weight: 700;
}

/* User controls section */
.controle-cookies-utilisateur {
    padding: 80px 5%;
}

.conteneur-controles-cookies {
    max-width: 900px;
    margin: 0 auto;
}

.titre-controles-cookies {
    font-family: 'Times New Roman', serif;
    font-size: 2.7rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.explication-controles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bloc-controle-principal {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
}

.titre-bloc-controle {
    font-family: 'Times New Roman', serif;
    font-size: 1.6rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 600;
}

.description-controle-detaillee {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 25px;
}

.instructions-navigateurs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--couleur-primaire-claire);
    padding: 20px;
    border-radius: 15px;
}

.instruction-navigateur-specifique {
    font-size: 0.95rem;
    color: var(--couleur-primaire-foncee);
    line-height: 1.5;
}

.instruction-navigateur-specifique strong {
    color: var(--couleur-primaire);
    font-weight: 700;
}

.avertissement-desactivation {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--couleur-tertiaire-claire);
    padding: 25px;
    border-radius: 20px;
    border-left: 5px solid var(--couleur-tertiaire);
}

.icone-avertissement {
    width: 24px;
    height: 24px;
    background: var(--couleur-tertiaire);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.contenu-avertissement {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
}

.contenu-avertissement strong {
    color: var(--couleur-primaire);
    font-weight: 700;
}

/* Contact section */
.contact-cookies-questions {
    padding: 80px 5% 100px;
    background: linear-gradient(160deg, var(--couleur-primaire-claire) 0%, #ffffff 100%);
}

.conteneur-questions-cookies {
    max-width: 700px;
    margin: 0 auto;
}

.bloc-questions-centralise {
    background: white;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
}

.titre-questions-cookies {
    font-family: 'Times New Roman', serif;
    font-size: 2.2rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
}

.description-questions-cookies {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 30px;
}

.action-questions-cookies {
    margin-top: 25px;
}

.bouton-questions-contact {
    background: var(--couleur-accent);
    color: white;
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
    display: inline-block;
}

.bouton-questions-contact:hover {
    background: #d63447;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4);
}

/* Responsive design */
@media (max-width: 1024px) {
    .conteneur-explications-principales {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .grille-types-cookies {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .introduction-politique-cookies {
        padding: 60px 4% 60px;
    }
    
    .explication-cookies-ludique {
        padding: 0 4% 60px;
    }
    
    .types-cookies-detailles {
        padding: 60px 4%;
    }
    
    .controle-cookies-utilisateur {
        padding: 60px 4%;
    }
    
    .contact-cookies-questions {
        padding: 60px 4% 80px;
    }
    
    .titre-cookies-majeur {
        font-size: 2.8rem;
    }
    
    .titre-section-types,
    .titre-controles-cookies {
        font-size: 2.3rem;
    }
    
    .carte-explication-unique,
    .bloc-controle-principal,
    .bloc-questions-centralise {
        padding: 25px;
    }
    
    .instructions-navigateurs {
        padding: 15px;
    }
    
    .avertissement-desactivation {
        flex-direction: column;
        gap: 15px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .titre-cookies-majeur {
        font-size: 2.4rem;
    }
    
    .titre-section-types,
    .titre-controles-cookies {
        font-size: 2rem;
    }
    
    .description-cookies-generale {
        font-size: 1.1rem;
    }
    
    .carte-type-cookie {
        padding: 25px 20px;
    }
    
    .statut-activation {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}



















/* Privacy page specific styles */

.conteneur-principal-privacy {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--couleur-primaire-claire) 0%, #ffffff 35%, var(--couleur-secondaire-claire) 100%);
}

/* Introduction section */
.introduction-politique-privacy {
    padding: 80px 5% 70px;
    text-align: center;
}

.capsule-introduction-centree {
    max-width: 800px;
    margin: 0 auto;
}

.titre-privacy-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 3.4rem;
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.description-privacy-generale {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 35px;
}

.indicateurs-conformite {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.badge-conformite {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--couleur-secondaire);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
}

.badge-mise-a-jour {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--couleur-primaire);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 0.95rem;
}

.label-conformite,
.label-update {
    opacity: 0.9;
}

.norme-conformite,
.date-update {
    font-weight: 700;
}

/* Principles section */
.principes-protection-donnees {
    padding: 0 5% 80px;
}

.conteneur-principes-fondamentaux {
    max-width: 1200px;
    margin: 0 auto;
}

.titre-section-principes {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.grille-principes-cles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.carte-principe-unique {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-principe-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.carte-principe-unique.transparence::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-principe-unique.controle::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-principe-unique.securite::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.carte-principe-unique.minimisation::before {
    background: linear-gradient(90deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.carte-principe-unique:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(7, 59, 76, 0.15);
}

.icone-principe-conceptuelle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.icone-principe-conceptuelle.transparence-icon {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-principe-conceptuelle.controle-icon {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.icone-principe-conceptuelle.securite-icon {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.icone-principe-conceptuelle.minimisation-icon {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.nom-principe-distinctif {
    font-family: 'Times New Roman', serif;
    font-size: 1.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
    font-weight: 600;
}

.description-principe-claire {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

/* Data collection section */
.donnees-collectees-details {
    padding: 80px 5%;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
}

.conteneur-donnees-principales {
    max-width: 1000px;
    margin: 0 auto;
}

.titre-donnees-collectees {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.categories-donnees-organisees {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bloc-categorie-donnee {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.bloc-categorie-donnee::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.bloc-categorie-donnee.identification::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.bloc-categorie-donnee.navigation::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.bloc-categorie-donnee:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(7, 59, 76, 0.15);
}

.en-tete-categorie-distinctive {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.badge-categorie-donnee {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-categorie-donnee.essentielle {
    background: var(--couleur-accent);
    color: white;
}

.badge-categorie-donnee.technique {
    background: var(--couleur-secondaire);
    color: white;
}

.nom-categorie-donnee {
    font-family: 'Times New Roman', serif;
    font-size: 1.6rem;
    color: var(--couleur-primaire);
    margin: 0;
    font-weight: 600;
    flex: 1;
}

.explication-categorie-contextuelle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 20px;
}

.liste-donnees-specifiques {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-donnee-precise {
    padding: 15px 20px;
    background: var(--couleur-primaire-claire);
    border-radius: 12px;
    font-size: 1rem;
    color: var(--couleur-primaire-foncee);
    border-left: 4px solid var(--couleur-secondaire);
}

/* Usage objectives section */
.utilisation-donnees-objectifs {
    padding: 80px 5%;
}

.conteneur-objectifs-utilisation {
    max-width: 1100px;
    margin: 0 auto;
}

.titre-utilisation-donnees {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.grille-objectifs-utilisation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.carte-objectif-unique {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-objectif-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, var(--couleur-tertiaire) 100%);
}

.carte-objectif-unique:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(7, 59, 76, 0.15);
}

.numero-objectif {
    width: 40px;
    height: 40px;
    background: var(--couleur-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.titre-objectif-specifique {
    font-family: 'Times New Roman', serif;
    font-size: 1.4rem;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
    font-weight: 600;
}

.description-objectif-detaillee {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

/* User rights section */
.droits-utilisateur-controles {
    padding: 80px 5%;
    background: linear-gradient(160deg, var(--couleur-primaire-claire) 0%, #ffffff 100%);
}

.conteneur-droits-utilisateur {
    max-width: 1000px;
    margin: 0 auto;
}

.titre-droits-utilisateur {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

.introduction-droits-contexte {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    text-align: center;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.liste-droits-detailles {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.droit-utilisateur-specifique {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(7, 59, 76, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 25px;
    transition: all 0.4s ease;
}

.droit-utilisateur-specifique:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.12);
}

.icone-droit-distinctive {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.icone-droit-distinctive.acces-icon {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-droit-distinctive.rectification-icon {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.icone-droit-distinctive.suppression-icon {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.icone-droit-distinctive.portabilite-icon {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.nom-droit-principal {
    font-family: 'Times New Roman', serif;
    font-size: 1.4rem;
    color: var(--couleur-primaire);
    margin-bottom: 10px;
    font-weight: 600;
}

.description-droit-pratique {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin: 0;
}

/* Contact section */
.contact-privacy-assistance {
    padding: 80px 5% 100px;
}

.conteneur-assistance-privacy {
    max-width: 700px;
    margin: 0 auto;
}

.bloc-assistance-centralise {
    background: white;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    position: relative;
    overflow: hidden;
}

.bloc-assistance-centralise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-accent) 0%, var(--couleur-secondaire) 50%, var(--couleur-tertiaire) 100%);
}

.titre-assistance-privacy {
    font-family: 'Times New Roman', serif;
    font-size: 2.3rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
}

.description-assistance-motivante {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 30px;
}

.actions-assistance-privacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bouton-assistance-principal {
    background: var(--couleur-accent);
    color: white;
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
    display: inline-block;
}

.bouton-assistance-principal:hover {
    background: #d63447;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4);
}

.note-reponse-delai {
    background: var(--couleur-primaire-claire);
    padding: 12px 20px;
    border-radius: 20px;
    border-left: 4px solid var(--couleur-secondaire);
}

.delai-reponse {
    font-size: 0.9rem;
    color: var(--couleur-primaire);
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 1024px) {
    .grille-principes-cles {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    
    .grille-objectifs-utilisation {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
    
    .categories-donnees-organisees {
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .introduction-politique-privacy {
        padding: 60px 4% 60px;
    }
    
    .principes-protection-donnees {
        padding: 0 4% 60px;
    }
    
    .donnees-collectees-details {
        padding: 60px 4%;
    }
    
    .utilisation-donnees-objectifs {
        padding: 60px 4%;
    }
    
    .droits-utilisateur-controles {
        padding: 60px 4%;
    }
    
    .contact-privacy-assistance {
        padding: 60px 4% 80px;
    }
    
    .titre-privacy-majeur {
        font-size: 2.8rem;
    }
    
    .titre-section-principes,
    .titre-donnees-collectees,
    .titre-utilisation-donnees,
    .titre-droits-utilisateur {
        font-size: 2.3rem;
    }
    
    .carte-principe-unique,
    .bloc-categorie-donnee {
        padding: 25px;
    }
    
    .indicateurs-conformite {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .en-tete-categorie-distinctive {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .droit-utilisateur-specifique {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .icone-droit-distinctive {
        align-self: center;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .titre-privacy-majeur {
        font-size: 2.4rem;
    }
    
    .titre-section-principes,
    .titre-donnees-collectees,
    .titre-utilisation-donnees,
    .titre-droits-utilisateur {
        font-size: 2rem;
    }
    
    .titre-assistance-privacy {
        font-size: 2rem;
    }
    
    .description-privacy-generale,
    .introduction-droits-contexte {
        font-size: 1.1rem;
    }
    
    .grille-principes-cles {
        grid-template-columns: 1fr;
    }
    
    .grille-objectifs-utilisation {
        grid-template-columns: 1fr;
    }
    
    .carte-principe-unique,
    .carte-objectif-unique,
    .bloc-categorie-donnee {
        padding: 20px;
    }
    
    .bloc-assistance-centralise {
        padding: 30px 25px;
    }
    
    .actions-assistance-privacy {
        gap: 15px;
    }
    
    .bouton-assistance-principal {
        width: 100%;
        max-width: 280px;
    }
}














/* Terms page specific styles */

.conteneur-principal-terms {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--couleur-primaire-claire) 0%, #ffffff 40%, var(--couleur-secondaire-claire) 100%);
}

/* Introduction section */
.introduction-conditions-generales {
    padding: 80px 5% 70px;
    text-align: center;
}

.capsule-introduction-centree {
    max-width: 750px;
    margin: 0 auto;
}

.titre-terms-majeur {
    font-family: 'Times New Roman', serif;
    font-size: 3.3rem;
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.description-terms-generale {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 30px;
}

.indicateur-validite {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--couleur-primaire);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 0.95rem;
}

.label-validite {
    opacity: 0.9;
}

.date-validite {
    font-weight: 700;
}

/* Main rules section */
.regles-fondamentales-utilisation {
    padding: 0 5% 80px;
}

.conteneur-regles-principales {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bloc-regle-majeure {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.bloc-regle-majeure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.bloc-regle-majeure.acceptation::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.bloc-regle-majeure.objectif-educatif::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.bloc-regle-majeure.responsabilite-utilisateur::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.bloc-regle-majeure:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(7, 59, 76, 0.15);
}

.en-tete-regle-distinctive {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
}

.numero-regle {
    width: 50px;
    height: 50px;
    background: var(--couleur-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.titre-regle-principal {
    font-family: 'Times New Roman', serif;
    font-size: 1.8rem;
    color: var(--couleur-primaire);
    margin: 0;
    font-weight: 600;
    flex: 1;
}

.explication-regle-contextuelle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 20px;
}

.note-importante-educative {
    background: var(--couleur-tertiaire-claire);
    padding: 20px;
    border-radius: 15px;
    border-left: 4px solid var(--couleur-tertiaire);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
}

.note-importante-educative strong {
    color: var(--couleur-primaire);
    font-weight: 700;
}

/* Site usage section */
.utilisation-site-services {
    padding: 80px 5%;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
}

.conteneur-utilisation-services {
    max-width: 1100px;
    margin: 0 auto;
}

.titre-section-utilisation {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.grille-modalites-utilisation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.carte-modalite-unique {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(7, 59, 76, 0.1);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-modalite-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.carte-modalite-unique.acces-libre::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-modalite-unique.usage-personnel::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-modalite-unique.respect-regles::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.carte-modalite-unique:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(7, 59, 76, 0.15);
}

.icone-modalite-distinctive {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.icone-modalite-distinctive.acces-icon {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-modalite-distinctive.usage-icon {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.icone-modalite-distinctive.regles-icon {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.nom-modalite-specifique {
    font-family: 'Times New Roman', serif;
    font-size: 1.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
    font-weight: 600;
}

.description-modalite-detaillee {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
}

/* Intellectual property section */
.propriete-intellectuelle-contenu {
    padding: 80px 5%;
}

.conteneur-propriete-intellectuelle {
    max-width: 900px;
    margin: 0 auto;
}

.titre-propriete-contenu {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.explication-propriete-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bloc-propriete-principal,
.bloc-propriete-utilisation {
    background: white;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
    position: relative;
    overflow: hidden;
}

.bloc-propriete-principal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-primaire) 0%, #2c5f6f 100%);
}

.bloc-propriete-utilisation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.titre-bloc-propriete {
    font-family: 'Times New Roman', serif;
    font-size: 1.6rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 600;
}

.description-propriete-detaillee {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin: 0;
}

/* Liability limitations section */
.limitations-responsabilite {
    padding: 80px 5%;
    background: linear-gradient(160deg, var(--couleur-primaire-claire) 0%, #ffffff 100%);
}

.conteneur-limitations-principales {
    max-width: 1000px;
    margin: 0 auto;
}

.titre-limitations-responsabilite {
    font-family: 'Times New Roman', serif;
    font-size: 2.8rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.avertissements-responsabilite {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.avertissement-specifique {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(7, 59, 76, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 25px;
    transition: all 0.4s ease;
}

.avertissement-specifique:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.12);
}

.icone-avertissement-distinctive {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.icone-avertissement-distinctive.info-icon {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-avertissement-distinctive.decision-icon {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.icone-avertissement-distinctive.service-icon {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.titre-avertissement-clair {
    font-family: 'Times New Roman', serif;
    font-size: 1.4rem;
    color: var(--couleur-primaire);
    margin-bottom: 10px;
    font-weight: 600;
}

.description-avertissement-precise {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin: 0;
}

/* Modifications section */
.modifications-conditions {
    padding: 80px 5%;
}

.conteneur-modifications-terms {
    max-width: 800px;
    margin: 0 auto;
}

.bloc-modifications-centralise {
    background: white;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    position: relative;
    overflow: hidden;
}

.bloc-modifications-centralise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-primaire) 0%, var(--couleur-secondaire) 100%);
}

.titre-modifications-conditions {
    font-family: 'Times New Roman', serif;
    font-size: 2.3rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
}

.description-modifications-contexte {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 25px;
}

.engagement-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: var(--couleur-secondaire-claire);
    padding: 15px 25px;
    border-radius: 20px;
    border-left: 4px solid var(--couleur-secondaire);
}

.icone-engagement-notification {
    width: 20px;
    height: 20px;
    background: var(--couleur-secondaire);
    border-radius: 50%;
    flex-shrink: 0;
}

.texte-engagement {
    font-size: 1rem;
    color: var(--couleur-primaire);
    font-weight: 600;
}

/* Contact section */
.contact-questions-conditions {
    padding: 80px 5% 100px;
    background: linear-gradient(160deg, var(--couleur-primaire-claire) 0%, #ffffff 100%);
}

.conteneur-questions-terms {
    max-width: 700px;
    margin: 0 auto;
}

.bloc-questions-centralise {
    background: white;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    position: relative;
    overflow: hidden;
}

.bloc-questions-centralise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-accent) 0%, var(--couleur-secondaire) 50%, var(--couleur-tertiaire) 100%);
}

.titre-questions-terms {
    font-family: 'Times New Roman', serif;
    font-size: 2.2rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
}

.description-questions-motivante {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 30px;
}

.action-questions-terms {
    margin-top: 25px;
}

.bouton-questions-contact {
    background: var(--couleur-accent);
    color: white;
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
    display: inline-block;
}

.bouton-questions-contact:hover {
    background: #d63447;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4);
}

/* Responsive design */
@media (max-width: 1024px) {
    .grille-modalites-utilisation {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    
    .explication-propriete-wrapper {
        gap: 25px;
    }
    
    .avertissements-responsabilite {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .introduction-conditions-generales {
        padding: 60px 4% 60px;
    }
    
    .regles-fondamentales-utilisation {
        padding: 0 4% 60px;
    }
    
    .utilisation-site-services {
        padding: 60px 4%;
    }
    
    .propriete-intellectuelle-contenu {
        padding: 60px 4%;
    }
    
    .limitations-responsabilite {
        padding: 60px 4%;
    }
    
    .modifications-conditions {
        padding: 60px 4%;
    }
    
    .contact-questions-conditions {
        padding: 60px 4% 80px;
    }
    
    .titre-terms-majeur {
        font-size: 2.8rem;
    }
    
    .titre-section-utilisation,
    .titre-propriete-contenu,
    .titre-limitations-responsabilite {
        font-size: 2.3rem;
    }
    
    .titre-modifications-conditions,
    .titre-questions-terms {
        font-size: 2rem;
    }
    
    .bloc-regle-majeure,
    .bloc-propriete-principal,
    .bloc-propriete-utilisation {
        padding: 25px;
    }
    
    .en-tete-regle-distinctive {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .titre-regle-principal {
        text-align: center;
    }
    
    .grille-modalites-utilisation {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .avertissement-specifique {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .icone-avertissement-distinctive {
        align-self: center;
        margin-top: 0;
    }
    
    .engagement-notification {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .titre-terms-majeur {
        font-size: 2.4rem;
    }
    
    .titre-section-utilisation,
    .titre-propriete-contenu,
    .titre-limitations-responsabilite {
        font-size: 2rem;
    }
    
    .titre-modifications-conditions,
    .titre-questions-terms {
        font-size: 1.8rem;
    }
    
    .description-terms-generale {
        font-size: 1.1rem;
    }
    
    .conteneur-regles-principales {
        gap: 25px;
    }
    
    .bloc-regle-majeure,
    .carte-modalite-unique,
    .bloc-propriete-principal,
    .bloc-propriete-utilisation {
        padding: 20px;
    }
    
    .avertissement-specifique {
        padding: 25px 20px;
    }
    
    .bloc-modifications-centralise,
    .bloc-questions-centralise {
        padding: 30px 25px;
    }
    
    .bouton-questions-contact {
        width: 100%;
        max-width: 280px;
    }
    
    .numero-regle {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .titre-regle-principal {
        font-size: 1.5rem;
    }
    
    .nom-modalite-specifique {
        font-size: 1.3rem;
    }
    
    .titre-avertissement-clair {
        font-size: 1.2rem;
    }
}

















/* Thank you page specific styles */

.conteneur-principal-thankyou {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--couleur-primaire-claire) 0%, #ffffff 50%, var(--couleur-secondaire-claire) 100%);
}

/* Main confirmation section */
.zone-confirmation-centrale {
    padding: 80px 5% 60px;
    text-align: center;
}

.capsule-confirmation-majeure {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(7, 59, 76, 0.15);
    position: relative;
    overflow: hidden;
}

.capsule-confirmation-majeure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, var(--couleur-tertiaire) 50%, var(--couleur-accent) 100%);
}

/* Success icon */
.icone-confirmation-reussie {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.cercle-confirmation-externe {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-confirmation 2s ease-in-out infinite;
}

.cercle-confirmation-interne {
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coche-validation-stylisee {
    width: 30px;
    height: 30px;
    background: var(--couleur-secondaire);
    border-radius: 3px;
    position: relative;
}

.coche-validation-stylisee::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 20px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes pulse-confirmation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.titre-confirmation-principal {
    font-family: 'Times New Roman', serif;
    font-size: 3rem;
    color: var(--couleur-primaire);
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.description-confirmation-chaleureuse {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Process steps */
.informations-suite-procedure {
    margin-bottom: 40px;
}

.bloc-info-etape-suivante {
    background: var(--couleur-primaire-claire);
    border-radius: 25px;
    padding: 35px;
    margin-bottom: 30px;
}

.titre-etape-suivante {
    font-family: 'Times New Roman', serif;
    font-size: 2rem;
    color: var(--couleur-primaire);
    margin-bottom: 30px;
    font-weight: 600;
    text-align: center;
}

.timeline-reponse-attendue {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
}

.timeline-reponse-attendue::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 50px;
    bottom: 50px;
    width: 3px;
    background: linear-gradient(180deg, var(--couleur-secondaire) 0%, var(--couleur-tertiaire) 50%, var(--couleur-accent) 100%);
    border-radius: 3px;
}

.etape-processus-unique {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    position: relative;
    z-index: 1;
}

.numero-etape-processus {
    width: 50px;
    height: 50px;
    background: var(--couleur-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.etape-processus-unique.analyse .numero-etape-processus {
    background: var(--couleur-tertiaire);
    box-shadow: 0 4px 15px rgba(244, 162, 97, 0.3);
}

.etape-processus-unique.reponse .numero-etape-processus {
    background: var(--couleur-secondaire);
    box-shadow: 0 4px 15px rgba(42, 157, 143, 0.3);
}

.contenu-etape-detaille {
    flex: 1;
    text-align: left;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(7, 59, 76, 0.08);
}

.nom-etape-specifique {
    font-family: 'Times New Roman', serif;
    font-size: 1.3rem;
    color: var(--couleur-primaire);
    margin-bottom: 10px;
    font-weight: 600;
}

.description-etape-claire {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin: 0;
}

/* Response time guarantee */
.engagement-delai-reponse {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.badge-engagement-temps {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--couleur-secondaire);
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.05rem;
}

.icone-engagement-horloge {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Suggestions section */
.suggestions-navigation-utiles {
    padding: 80px 5%;
    background: linear-gradient(160deg, #ffffff 0%, var(--couleur-primaire-claire) 100%);
}

.conteneur-suggestions-principales {
    max-width: 1100px;
    margin: 0 auto;
}

.titre-suggestions-navigation {
    font-family: 'Times New Roman', serif;
    font-size: 2.5rem;
    color: var(--couleur-primaire);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}

.description-suggestions-contexte {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    text-align: center;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.grille-suggestions-pratiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.carte-suggestion-unique {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 12px 35px rgba(7, 59, 76, 0.1);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.carte-suggestion-unique::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.carte-suggestion-unique.decouverte::before {
    background: linear-gradient(90deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.carte-suggestion-unique.formats::before {
    background: linear-gradient(90deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.carte-suggestion-unique.planning::before {
    background: linear-gradient(90deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.carte-suggestion-unique:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(7, 59, 76, 0.15);
}

.icone-suggestion-distinctive {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.icone-suggestion-distinctive.decouverte-icon {
    background: linear-gradient(135deg, var(--couleur-secondaire) 0%, #4fb3a5 100%);
}

.icone-suggestion-distinctive.formats-icon {
    background: linear-gradient(135deg, var(--couleur-tertiaire) 0%, #f7c593 100%);
}

.icone-suggestion-distinctive.planning-icon {
    background: linear-gradient(135deg, var(--couleur-accent) 0%, #ff8a94 100%);
}

.titre-suggestion-specifique {
    font-family: 'Times New Roman', serif;
    font-size: 1.5rem;
    color: var(--couleur-primaire);
    margin-bottom: 15px;
    font-weight: 600;
}

.description-suggestion-detaillee {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 25px;
}

.lien-suggestion-action {
    background: var(--couleur-primaire);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.lien-suggestion-action:hover {
    background: var(--couleur-primaire-foncee);
    transform: translateY(-2px);
}

/* Back to home section */
.retour-accueil-rapide {
    padding: 80px 5% 100px;
}

.conteneur-retour-principal {
    max-width: 700px;
    margin: 0 auto;
}

.bloc-retour-accueil-centre {
    background: white;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(7, 59, 76, 0.12);
    position: relative;
    overflow: hidden;
}

.bloc-retour-accueil-centre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--couleur-accent) 0%, var(--couleur-secondaire) 50%, var(--couleur-tertiaire) 100%);
}

.titre-retour-accueil {
    font-family: 'Times New Roman', serif;
    font-size: 2.2rem;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    font-weight: 700;
}

.description-retour-motivante {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--couleur-primaire-foncee);
    opacity: 0.9;
    margin-bottom: 30px;
}

.actions-retour-navigation {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.bouton-retour-principal {
    background: var(--couleur-accent);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
}

.bouton-retour-principal:hover {
    background: #d63447;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4);
}

.bouton-retour-secondaire {
    background: transparent;
    color: var(--couleur-primaire);
    padding: 16px 32px;
    border: 2px solid var(--couleur-primaire);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.bouton-retour-secondaire:hover {
    background: var(--couleur-primaire);
    color: white;
    transform: translateY(-2px);
}

/* Responsive design */
@media (max-width: 1024px) {
    .grille-suggestions-pratiques {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    
    .timeline-reponse-attendue::before {
        left: 20px;
    }
    
    .numero-etape-processus {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .zone-confirmation-centrale {
        padding: 60px 4% 50px;
    }
    
    .suggestions-navigation-utiles {
        padding: 60px 4%;
    }
    
    .retour-accueil-rapide {
        padding: 60px 4% 80px;
    }
    
    .capsule-confirmation-majeure {
        padding: 35px 25px;
    }
    
    .titre-confirmation-principal {
        font-size: 2.5rem;
    }
    
    .titre-suggestions-navigation {
        font-size: 2.2rem;
    }
    
    .titre-retour-accueil {
        font-size: 2rem;
    }
    
    .grille-suggestions-pratiques {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .timeline-reponse-attendue {
        gap: 20px;
    }
    
    .timeline-reponse-attendue::before {
        display: none;
    }
    
    .etape-processus-unique {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .contenu-etape-detaille {
        text-align: center;
    }
    
    .actions-retour-navigation {
        flex-direction: column;
        align-items: center;
    }
    
    .bouton-retour-principal,
    .bouton-retour-secondaire {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .titre-confirmation-principal {
        font-size: 2.2rem;
    }
    
    .titre-suggestions-navigation {
        font-size: 2rem;
    }
    
    .titre-retour-accueil {
        font-size: 1.8rem;
    }
    
    .description-confirmation-chaleureuse,
    .description-suggestions-contexte,
    .description-retour-motivante {
        font-size: 1.05rem;
    }
    
    .cercle-confirmation-externe {
        width: 80px;
        height: 80px;
    }
    
    .cercle-confirmation-interne {
        width: 55px;
        height: 55px;
    }
    
    .coche-validation-stylisee {
        width: 25px;
        height: 25px;
    }
    
    .coche-validation-stylisee::after {
        font-size: 16px;
    }
    
    .bloc-info-etape-suivante {
        padding: 25px 20px;
    }
    
    .carte-suggestion-unique {
        padding: 25px 20px;
    }
    
    .bloc-retour-accueil-centre {
        padding: 30px 25px;
    }
}