/* ==========================================================================
   STYLES GLOBAUX - COMPANY WINNERS
   
   SOMMAIRE:
   1. Variables et paramètres globaux
   2. Styles de base et reset
   3. Structure et mise en page
   4. Navigation et header
   5. Pages de contenu
   6. Composants réutilisables
   7. Formulaire et section contact
   8. Footer
   9. Animations et effets
   10. Media Queries
   ========================================================================== */

/* ==========================================================================
   1. Variables et paramètres globaux
   ========================================================================== */
:root {
    /* Palette de couleurs */
    --noir: #0c0a08ff;       /* Noir principal pour textes et éléments sombres */
    --rouge-fonce: #832226ff;/* Rouge foncé pour accents secondaires */
    --rouge: #f93943ff;      /* Rouge vif pour accents principaux et CTA */
    --viridian: #417b5aff;   /* Vert sombre */
    --mint : #63A375;        /* Vert */
    --marine: #2b4570ff;     /* Bleu profond pour éléments secondaires */
    --vert: #a9e5bbff;       /* Vert clair pour accents et success */
    --lavande: #d8d4f2ff;    /* Lavande pour accents légers et hover */
    --creme: #fefcf2ff;      /* Blanc cassé pour fonds clairs */
    --blanc: #ffffffff;      /* Blanc pur pour textes sur fonds sombres */
    --jasmine: #FFEE88; /* Jaune */
    --icterine: #fcfc62; /* Jaune */
    --bleu-nuit: #1c2e4a;
    --bleu-gris: #95A1B1;
    /* Polices */
    --font-main: 'Montserrat', sans-serif;     /* Corps de texte et général */
    --font-titles: 'Inter', sans-serif;        /* Titres et accents */
}
/* ==========================================================================
   2. Styles de base et reset
   ========================================================================== */
body {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    background-color: var(--blanc);
    color: var(--noir);
    font-family: var(--font-main);
    display: flex;
    flex-direction: column;
}

/* Eléments typographiques de base */
p {
    font-size: 0.9rem;
}

p.lead {
    font-size: 1rem!important;;
    font-weight: 600!important;;
    color:var(--rouge)!important;
}

b, strong {
    font-weight: 600;
}

ul li {
    font-size: 0.9rem;
    font-weight: 500;
}
ul.marges-xl li {
    margin-bottom: 0.9rem;
}

.rouge {
    color: var(--rouge);
}

/* ==========================================================================
   3. Structure et mise en page
   ========================================================================== */
/* Structure générale des pages */
.content-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.content-section {
    height: 100%;
}

/* Arrière-plan commun aux sections */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/bg-section-bleu-2.webp") center center no-repeat;
    background-size: cover;
    z-index: -1;
}

/* Sections DVE et SIO */
#dve, #sio {
    flex: 1;
    padding-bottom: 80px;
}

/* ==========================================================================
   4. Navigation et header
   ========================================================================== */
.navbar {
    background-color: transparent;
    padding: 1rem 0;
}

.navbar-brand {

    font-size: 1.4rem;
    font-weight: 500;
}

.navbar-brand:hover {
    color: var(--rouge);
}

.navbar-toggler {
    border-color: var(--noir);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(12, 10, 8, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .nav-link {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link.active {
    color: var(--rouge);
}

.nav-item {
    margin-right: 0.5rem;
}

/* Style pour le menu déroulant avec activation au survol */
.nav-item.dropdown {
    position: relative;
}

/* Afficher le menu déroulant au survol sur desktop */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Indicateur de menu déroulant */
.nav-item.dropdown .nav-link {
    padding-right: 1.5rem;
    position: relative;
}

/* Animation du menu déroulant */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajustements pour mobile */
@media (max-width: 991px) {
    .nav-item.dropdown .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 1.5rem;
    }
    
    .nav-item.dropdown .nav-link::after {
        right: auto;
        position: relative;
        display: inline-block;
        top: auto;
        transform: none;
        margin-left: 0.5rem;
    }
}

.navbar-brand, 
.navbar-nav .nav-link,
#enjeux h1, 
#metier h1,
#equipe h1,
#fondateurs h1, 
#prestations h1, 
#differences h1, 
#management h1, 
#contact h1, 
#mentions-legales h1,
#mentions-legales .h4,
.tab-pane h3
 {
    color: var(--noir);
}

h2.chapo,
#enjeux p, 
#fondateurs .card-body p, 
#equipe p,
#prestations p, 
#differences p, 
#management p, 
#contact p, 
#mentions-legales p,
ul li,
.breadcrumb-item a {
    color: var(--noir);
}


/* ==========================================================================
   CLASSES UTILITAIRES POUR BADGES COLORÉS
   À ajouter dans cw-style-global.css
   ========================================================================== */

/* Badges avec couleurs de la charte graphique */
.bg-rouge {
    background-color: var(--rouge) !important;
    color: var(--creme) !important;
}

.bg-marine {
    background-color: var(--marine) !important;
    color: var(--creme) !important;
}

.bg-vert {
    background-color: var(--vert) !important;
    color: var(--noir) !important;
}

.bg-lavande {
    background-color: var(--lavande) !important;
    color: var(--noir) !important;
}

.bg-creme {
    background-color: var(--creme) !important;
    color: var(--noir) !important;
}

.bg-noir {
    background-color: var(--noir) !important;
    color: var(--creme) !important;
}

/* Classes de couleur de texte correspondantes */
.text-rouge {
    color: var(--rouge) !important;
}

.text-marine {
    color: var(--marine) !important;
}

.text-vert {
    color: var(--vert) !important;
}

.text-lavande {
    color: var(--lavande) !important;
}

.text-creme {
    color: var(--creme) !important;
}

.text-noir {
    color: var(--noir) !important;
}

/* Variantes avec transparence pour les overlays */
.bg-rouge-10 {
    background-color: rgba(249, 57, 67, 0.1) !important;
}

.bg-marine-10 {
    background-color: rgba(43, 69, 112, 0.1) !important;
}

.bg-vert-10 {
    background-color: rgba(169, 229, 187, 0.1) !important;
}

.bg-lavande-10 {
    background-color: rgba(216, 212, 242, 0.1) !important;
}
/* Classes pour rouge foncé - À ajouter après les autres classes bg- */
.bg-rouge-fonce {
    background-color: var(--rouge-fonce) !important;
    color: var(--creme) !important;
}

.text-rouge-fonce {
    color: var(--rouge-fonce) !important;
}

/* Variante avec transparence */
.bg-rouge-fonce-10 {
    background-color: rgba(131, 34, 38, 0.1) !important;
}

/* Badge rouge foncé */
.badge.bg-rouge-fonce {
    font-weight: 500;
    font-family: var(--font-main);
    border: none;
    transition: all 0.3s ease;
}

.badge.bg-rouge-fonce:hover {
    /*background-color: rgba(131, 34, 38, 0.8) !important;*/
    /*transform: translateY(-1px);*/
}

/* Bandeau rouge foncé */
.bandeau-rouge-fonce {
    background-color: rgba(131, 34, 38, 0.15);
    color: var(--creme);
    border: 1px solid var(--rouge-fonce);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bandeau-rouge-fonce:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.bandeau-rouge-fonce hr {
    border-color: rgba(254, 252, 242, 0.2);
    margin: 1rem 0;
}

.bandeau-rouge-fonce h4 {
    color: var(--creme);
    margin-bottom: 0.75rem;
}

.bandeau-rouge-fonce a {
    color: var(--lavande);
    text-decoration: none;
    font-weight: 500;
}

.bandeau-rouge-fonce a:hover {
    color: var(--vert);
    text-decoration: underline;
}

.btn.active {
    background-color: var(--rouge);    
    border-color: var(--rouge);   
}
/* Bandeau rouge foncé avec icône */
.bandeau-rouge-fonce.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fefcf2' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill='%23fefcf2' d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
}

/* Bouton rouge foncé */
.btn-rouge-fonce {
    background-color: var(--rouge-fonce);
    border-color: var(--rouge-fonce);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--creme) !important;
}

.btn-rouge-fonce:hover {
    background-color: var(--rouge);
    border-color: var(--rouge);
    color: var(--creme) !important;
}
/* Amélioration des badges pour une meilleure lisibilité */
.badge.bg-rouge,
.badge.bg-marine,
.badge.bg-vert,
.badge.bg-lavande,
.badge.bg-creme,
.badge.bg-noir {
    font-weight: 500;
    font-family: var(--font-main);
    border: none;
    transition: all 0.3s ease;
}

/* Effet hover sur les badges cliquables */
.badge.bg-rouge:hover {
    background-color: var(--rouge-fonce) !important;
    transform: translateY(-1px);
}

.badge.bg-marine:hover {
    background-color: rgba(43, 69, 112, 0.8) !important;
    transform: translateY(-1px);
}

.badge.bg-vert:hover {
    background-color: rgba(169, 229, 187, 0.8) !important;
    transform: translateY(-1px);
}

.badge.bg-lavande:hover {
    background-color: rgba(216, 212, 242, 0.8) !important;
    transform: translateY(-1px);
}

/* Boutons */
.btn-danger, .btn-rouge {
    background-color: var(--rouge);
    border-color: var(--rouge);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--creme)!important;
}

.btn-danger:hover, .btn-rouge:hover {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--creme)!important;
    text-decoration: none!important;
}

.btn-vert {
    background-color: var(--vert);
    border-color: var(--vert);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--noir)!important;
}

.btn-vert:hover {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--creme)!important;
}

.btn-marine {
    background-color: var(--marine);
    border-color: var(--marine);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--creme)!important;
}

.btn-marine:hover {
    background-color: var(--bleu-gris);
    border-color: var(--bleu-gris);
    color: var(--blanc)!important;
    text-decoration:none!important;
}

.btn-lavande {
    background-color: var(--lavande);
    border-color: var(--lavande);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--noir)!important;
}

.btn-lavande:hover {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--creme)!important;
}

.btn-creme {
    background-color: var(--creme);
    border-color: var(--creme);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--rouge)!important;
}

.btn-creme:hover {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--creme)!important;
}

.btn-noir {
    background-color: var(--noir);
    border-color: var(--noir);
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--creme)!important;
}

.btn-noir:hover {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--creme)!important;
}

/* ==========================================================================
   NAVIGATION CONTEXTUELLE
   ========================================================================== */

.contextual-nav {
    background: linear-gradient(135deg, rgba(249, 57, 67, 0.05) 0%, rgba(43, 69, 112, 0.05) 100%);
    border: 1px solid rgba(249, 57, 67, 0.15);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.contextual-nav:hover {
    border-color: rgba(249, 57, 67, 0.25);
    box-shadow: 0 2px 8px rgba(249, 57, 67, 0.1);
}

.contextual-nav .nav-title {
    color: var(--noir);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-titles);
    margin-bottom: 0;
}

.contextual-nav .btn-group .btn {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-color: var(--rouge);
    transition: all 0.3s ease;
}

.contextual-nav .btn-outline-danger {
    color: var(--rouge);
    background-color: transparent;
}

.contextual-nav .btn-outline-danger:hover {
    background-color: var(--rouge);
    color: var(--creme);
    transform: translateY(-1px);
}

.contextual-nav .btn-outline-danger.active {
    background-color: var(--rouge);
    color: var(--creme);
    border-color: var(--rouge);
    box-shadow: 0 2px 4px rgba(249, 57, 67, 0.3);
}

.contextual-nav .btn-outline-danger:not(.active):hover {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--creme);
}

/* Icônes dans les boutons */
.contextual-nav .btn i {
    font-size: 0.8rem;
}

/* Animation au chargement */
.contextual-nav {
    animation: slideInDown 0.6s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .contextual-nav .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .contextual-nav .btn-group {
        width: 100%;
    }
    
    .contextual-nav .btn-group .btn {
        flex: 1;
        font-size: 0.8rem;
        padding: 0.5rem 0.6rem;
    }
}
/* ==========================================================================
   5. Pages de contenu
   ========================================================================== */
/* Titres des sections de contenu */
#enjeux h1, 
#metier h1,
#dve h1,
#sio h1,
#equipe h1,
#fondateurs h1, 
#prestations h1, 
#differences h1, 
#management h1, 
#contact h1, 
#mentions-legales h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* Paragraphes des sections de contenu */
h2.chapo,
#enjeux p, 
#fondateurs .card-body p, 
#equipe p,
#prestations p, 
#differences p, 
#management p, 
#contact p, 
#mentions-legales p, 
#mentions-legales .h4 {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.325rem;
    text-align: justify;
}

h2.chapo {font-weight: 600;}

/* Mentions légales */
#mentions-legales h4, 
#mentions-legales .h4 {
    color: var(--rouge);
}

/* Styles spécifiques à certaines sections */
#fondateurs .card-body p {
    text-align: left;
}


#differences ul li ul li {
    margin-bottom: 0;
}

#equipe p.encadre {
    text-align: left;
}


/* ==========================================================================
   6. Composants réutilisables
   ========================================================================== */
/* ---- 6.1 Cards et conteneurs de cartes ---- */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.cards-container .card {
    width: calc(50% - 10px);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.cards-container .card:hover {
    transform: translateY(-5px);
}

/* Styles spécifiques aux cartes des fondateurs */
#fondateurs .card {
    background-color: transparent;
    border: none; 
    box-shadow: none;
}

#fondateurs h4 {
    color: var(--noir);
}

.card-header {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 2px solid #e63946;
}

.card-header h2 {
    margin: 0;
    color: #333;
}

.card-body {
    padding: 20px;
}
/* ---- 6.2 Bandeaux et alertes personnalisés ---- */

/* Bandeau vert pour les succès ou confirmations */
.bandeau-vert {
    background-color: rgba(169, 229, 187, 0.15); /* Version semi-transparente de var(--vert) */
    color: var(--noir);
    border: 1px solid var(--vert);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bandeau-vert:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.bandeau-vert hr {
    border-color: rgba(12, 10, 8, 0.2);
    margin: 1rem 0;
}

.bandeau-vert h4 {
    color: var(--noir);
    margin-bottom: 0.75rem;
}

.bandeau-vert p {
    margin-bottom: 0.75rem;
}

.bandeau-vert p:last-child {
    margin-bottom: 0;
}

.bandeau-vert .lien-rouge {
    color: var(--rouge);
    text-decoration: none;
    font-weight: 500;
}

.bandeau-vert .lien-rouge:hover {
    color: var(--rouge-fonce);
    text-decoration: underline;
}

/* Bandeau rouge pour les alertes ou informations importantes */
.bandeau-rouge {
    background-color: rgba(249, 57, 67, 0.15);
    color: var(--noir);
    border: 1px solid var(--rouge);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bandeau-rouge:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.bandeau-rouge hr {
    border-color: rgba(131, 34, 38, 0.2);
    margin: 1rem 0;
}

.bandeau-rouge h4 {
    color: var(--rouge);
    margin-bottom: 0.75rem;
}

h4.titre-fondateurs {
    font-size: 1.275rem!important;
    margin-bottom: 0!important;
    text-align: center;
}

/* Bandeau lavande pour les conseils ou astuces */
.bandeau-lavande {
    background-color: rgba(216, 212, 242, 0.15); /* Version semi-transparente de var(--lavande) */
    color: var(--noir);
    border: 1px solid var(--lavande);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bandeau-lavande:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.bandeau-lavande hr {
    border-color: rgba(12, 10, 8, 0.15);
    margin: 1rem 0;
}

.bandeau-lavande h4 {
    color: var(--marine);
    margin-bottom: 0.75rem;
}

/* Bandeau marine pour les témoignages ou citations */
.bandeau-marine {
    background-color: rgba(43, 69, 112, 0.15); /* Version semi-transparente de var(--marine) */
    color: var(--noir);
    border: 1px solid var(--marine);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bandeau-marine:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.bandeau-marine hr {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 1rem 0;
}

.bandeau-marine h4 {
    color: var(--noir);
    margin-bottom: 0.75rem;
}

.bandeau-marine a {
    color: var(--lavande);
    text-decoration: none;
    font-weight: 500;
}

.bandeau-marine a:hover {
    color: var(--bleu-gris);
    text-decoration: none;
}

/* Bandeau crème pour les notes ou informations contextuelles */
.bandeau-creme {
    background-color: rgba(254, 252, 242, 0.15); /* Version semi-transparente de var(--creme) */
    color: var(--noir);
    border: 1px solid var(--creme);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bandeau-creme:hover {
    /*transform: translateY(-3px);*/
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);*/
}

.bandeau-creme hr {
    border-color: rgba(12, 10, 8, 0.1);
    margin: 1rem 0;
}

.bandeau-creme h4 {
    color: var(--noir);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.bandeau-creme a {
    color: var(--rouge);
    text-decoration: none;
    font-weight: 500;
}

.bandeau-creme a:hover {
    color: var(--marine);
    text-decoration: underline;
}

/* Modificateurs pour les bandeaux */
/* Variantes de taille */
.bandeau-sm {
    padding: 0.75rem;
    font-size: 0.85rem;
}

.bandeau-sm h4 {
    font-size: 1.1rem;
}

.bandeau-lg {
    padding: 1.5rem;
}

.bandeau-lg h4 {
    font-size: 1.5rem;
}

/* Variantes de style */
.bandeau-border-rounded {
    border-radius: 1rem;
}

.bandeau-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bandeau-shadow:hover {
    /* box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);*/
}

.bandeau-icon {
    position: relative;
    padding-left: 4rem;
}

.bandeau-icon::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}

.bandeau-vert.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230c0a08' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
}

.bandeau-rouge.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f93943' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill='%23f93943' d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
}

.bandeau-lavande.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%232b4570' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-3 2.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm7 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-6-2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zM7.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
}

.bandeau-marine.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z'/%3E%3C/svg%3E");
}
fondateurs
.bandeau-creme.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230c0a08' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

/* Variante avec icône pour le bandeau vert */
.bandeau-vert.bandeau-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230c0a08' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
}

/* ---- 6.3 Onglets et navigation par onglets ---- */
.nav-tabs {
    border-bottom: 2px solid rgba(200, 200, 200, 0.5);
    margin-bottom: 2rem;
    /* border: none;*/
}

.nav-tabs .nav-link {
    color: var(--noir);
    border: none;
    /*border-radius: 0;*/
    padding: 0.8rem 1.2rem;
    margin-bottom: 0!important;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: rgba(254, 252, 242, 0.5);
}

.nav-tabs .nav-link:hover {
    color: var(--rouge);
    background-color: rgba(249, 57, 67, 0.05);
}

.nav-tabs .nav-link.active {
    color: var(--creme);
    background-color: var(--rouge);
    border: none;
}

.tab-content {
    padding: 0.5rem 0;
}

.tab-pane {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-pane.show {
    opacity: 1;
}

.tab-pane h3 {
    font-size: 1.6rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* Icônes et en-têtes d'onglets */
.tab-icon, .icon-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: rgba(249, 57, 67, 0.1);
    border-radius: 50%;
    margin-right: 0.5rem;
    color: var(--rouge);
}

.tab-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb {
    background-color: transparent;
    padding: 0 0.75rem 0 0;
    margin-bottom: 0rem;
    font-size: 0.9rem;
    font-family: var(--font-main);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--rouge);
    font-weight: 600;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.breadcrumb-item a {
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    color: var(--rouge);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--rouge);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.8rem;
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.3rem;
        padding-left: 0.3rem;
    }
}

/* Navigation contextuelle - Processus méthodologique */

.contextual-nav .process-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contextual-nav .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--lavande);
    color: var(--noir);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.contextual-nav .step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--noir);
    white-space: nowrap;
}

.contextual-nav .step.active .step-number {
    background-color: var(--rouge);
    color: var(--creme);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(249, 57, 67, 0.3);
}

.contextual-nav .step.active .step-label {
    color: var(--rouge);
    font-weight: 600;
}

/* Animation du processus */
.contextual-nav .process-steps {
    animation: fadeInRight 0.8s ease-out 0.3s both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive pour le processus */
@media (max-width: 768px) {
    .contextual-nav .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .contextual-nav .process-steps {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .contextual-nav .step-label {
        font-size: 0.7rem;
    }
    
    .contextual-nav .step-number {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
}
/* CTA de transition - À ajouter dans cw-style-global.css */

/* ==========================================================================
   CTA DE TRANSITION
   ========================================================================== */

/* Animation d'entrée pour les CTA */
.cta-transition {
    animation: slideInUp 0.8s ease-out;
}

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

/* Effets de survol pour les boutons CTA */
.cta-transition .btn-light {
    transition: all 0.3s ease;
    font-weight: 600;
    border: 2px solid transparent;
}

.cta-transition .btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--creme);
}

.cta-transition .btn-outline-light {
    transition: all 0.3s ease;
    font-weight: 500;
    border-width: 2px;
}

.cta-transition .btn-outline-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.75);
    border-color: var(--creme);
}

/* Animation des icônes dans les CTA */
.cta-transition .btn svg {
    transition: transform 0.3s ease;
}

.cta-transition .btn:hover svg {
    transform: scale(1.1);
}

/* Responsive optimisé pour tous les écrans */
@media (max-width: 768px) {
    .cta-transition .card-body {
        padding: 2rem 1.5rem !important;
    }
    
    .cta-transition h3 {
        font-size: 1.4rem;
    }
    
    .cta-transition .lead {
        font-size: 1rem;
    }
    
    .cta-transition .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* Écrans moyens (tablettes) */
@media (min-width: 769px) and (max-width: 1199px) {
    .cta-transition .card-body {
        padding: 3rem 2rem !important;
    }
}

/* Grands écrans */
@media (min-width: 1200px) {
    .cta-transition .card-body {
        padding: 4rem 3rem !important;
    }
    
    .cta-transition h3 {
        font-size: 2rem;
    }
}

/* Effet de parallaxe léger pour les motifs décoratifs */
@media (prefers-reduced-motion: no-preference) {
    .cta-transition .card:hover div[style*="position: absolute"] {
        animation: float 6s ease-in-out infinite;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

/* ==========================================================================
   7. Formulaire et section contact
   ========================================================================== */
.contact-section {
    padding: 80px 0;
}

.contact-section h2 {
    font-family: var(--font-main);
    font-weight: 700;
    margin-bottom: 30px;
}

.form-container {
    background-color: #ffff;
    border-radius: 10px;
}

.form-control:focus {
    border-color: var(--marine);
    box-shadow: 0 0 0 0.2rem rgba(43,69,112,0.25);
}

.form-section {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.required {
    color: var(--rouge);
}


/* Forcer les icônes des titres h4 à être rouges */
.form-section h4 i {
    color: var(--rouge) !important;
}

.icon-box {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.form-label {
    font-weight: 500;
}

/* Styles pour les états du formulaire */
.php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #dc3545;
    border-top-color: #f8f9fa;
    animation: animate-loading 1s linear infinite;
}

.php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    border-radius: 5px;
}

.php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
}

/* Messages de formulaire */
.form-messages .alert {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border: none;
    font-weight: 500;
    margin-bottom: 0;
}

.form-messages .alert-success {
    background-color: var(--vert);
    color: var(--noir);
}

.form-messages .alert-danger {
    background-color: rgba(249, 57, 67, 0.1);
    color: var(--rouge);
}


/* ==========================================================================
   8. Footer enrichi avec plan de site
   ========================================================================== */

footer {
    color: var(--noir);
    font-family: var(--font-main);
    position: relative;
    width: 100%;
    z-index: 2;
    margin-top: auto;
    border-top: 1px solid rgba(249, 57, 67, 0.1);
}
footer.bg-light {
    background-color: var(--creme)!important;
}

/* Titres de sections dans le footer */
.footer-title {
    color: var(--noir);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-titles);
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

/* Liens dans le footer */
.footer-links a {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.footer-links a:hover {
    color: var(--rouge);
    transform: translateX(3px);
}

.footer-links span {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Icônes dans les liens du footer */
.footer-links svg {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-links a:hover svg {
    opacity: 1;
}

/* Séparateur du footer */
.footer-divider {
    border-color: rgba(249, 57, 67, 0.2);
    margin: 1rem 0 1.5rem 0;
}

/* Copyright et mentions */
.copyright {
    font-family: var(--font-main);
}

/* CTA dans le footer */
.footer-cta {
    transition: all 0.3s ease;
}

.footer-cta:hover {
    background-color: rgba(249, 57, 67, 0.08) !important;
    border-color: rgba(249, 57, 67, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(249, 57, 67, 0.15);
}

.footer-cta .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
}

/* Icônes sociales dans le footer */
.social-links a {
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(249, 57, 67, 0.05);
}

.social-links a.linkedin {
    color: var(--marine);
}

.social-links a.twitter-x {
    color: var(--noir);
}

.social-links a:hover {
    color: var(--creme);
    background-color: var(--rouge);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(249, 57, 67, 0.3);
}

/* Animation d'apparition du footer */
footer {
    animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive pour le footer */
@media (max-width: 768px) {
    .footer-links {
        text-align: center;
    }
    
    .footer-cta {
        text-align: center;
        margin-top: 2rem;
    }
    
    .social-links {
        text-align: center;
        margin-top: 1rem;
    }
    
    .social-links a {
        margin: 0 0.5rem;
    }
}

@media (max-width: 576px) {
    footer .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .footer-title {
        font-size: 0.75rem;
    }
    
    .footer-links a,
    .footer-links span {
        font-size: 0.8rem;
    }
    
    .footer-cta h6 {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   FOOTER HOMEPAGE ADAPTÉ
   ========================================================================== */

.homepage-footer {
    background-color: rgba(12, 10, 8, 0.8) !important;
    backdrop-filter: blur(10px);
    color: var(--creme);
    font-family: var(--font-main);
    position: relative;
    width: 100%;
    z-index: 2;
    margin-top: auto;
    border-top: 1px solid rgba(249, 57, 67, 0.2);
}

/* Liens rapides du footer homepage */
.footer-quick-link {
    color: var(--creme);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.footer-quick-link:hover {
    color: var(--rouge);
    background-color: rgba(249, 57, 67, 0.1);
    transform: translateY(-1px);
}

/* Réseaux sociaux pour homepage */
.homepage-footer .social-links a {
    color: var(--creme);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(254, 252, 242, 0.1);
}

.homepage-footer .social-links a:hover {
    color: var(--rouge);
    background-color: rgba(249, 57, 67, 0.2);
    transform: translateY(-2px);
}

/* Copyright pour homepage */
.homepage-footer .copyright {
    color: rgba(254, 252, 242, 0.7);
}

/* Responsive pour footer homepage */
@media (max-width: 991px) {
    .footer-quick-link {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 768px) {
    .homepage-footer .d-flex.gap-3 {
        gap: 0.5rem !important;
    }
    
    .footer-quick-link {
        font-size: 0.75rem;
        padding: 0.15rem 0.3rem;
    }
}
/* ==========================================================================
   9. Animations et effets
   ========================================================================== */
/* Animation de chargement du formulaire */
@keyframes animate-loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animation des flèches sur les pages DVE et SIO */
.top-caret, 
.bottom-caret {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--rouge);
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.caret-marine {
    color: var(--marine) !important;
}

.top-caret {
    top: -30px;
    animation-name: moveTopCaret;
}

.bottom-caret {
    bottom: -30px;
    animation-name: moveBottomCaret;
}

@keyframes moveTopCaret {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(5px); }
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes moveBottomCaret {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* Animation subtile pour les liens */
a {
    transition: all 0.3s ease;
}

/* Animation de fade-in pour les éléments */
.fade-in {
    animation: fadeIn 0.8s ease-in-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   10. Media Queries
   ========================================================================== */
/* Grands écrans */
@media (min-width: 1920px) {
    h2.chapo,
    #enjeux p, 
    #fondateurs .card-body p, 
    #equipe p, 
    #prestations p, 
    #consultant p, 
    #management p, 
    #contact p, 
    #differences p, 
    #differences ul li {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }
}

@media (min-width: 1360px) {
    .content-wrapper {
        height: 100vh;
    }
}

/* Tablettes et écrans moyens */
@media (max-width: 991px) {
    .contact-info {
        margin-bottom: 40px;
    }
    
    .bandeau-icon {
        padding-left: 3.5rem;
    }
}

/* Petits écrans et mobiles */
@media (max-width: 768px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }
    
    .card {
        width: 100%;
    }
    
    .bandeau-icon {
        padding-left: 1rem;
        padding-top: 3.5rem;
    }
    
    .bandeau-icon::before {
        left: 50%;
        top: 1rem;
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    /* Ajustements de navigation pour mobiles */
    .navbar-brand {
        font-size: 1rem;
    }
    
    /* Ajustements typographiques pour mobiles */
    h1 {
        font-size: 2.5rem;
    }
    
    p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    #enjeux h1, 
    #prestations h1, 
    #consultant h1, 
    #management h1, 
    #contact h1 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    #enjeux p, 
    #prestations p, 
    #consultant p, 
    #management p, 
    #contact p {
        font-size: 0.8rem;
    }
    
    /* Ajustements des bandeaux pour mobiles */
    .bandeau-lg {
        padding: 1.25rem;
    }
    
    .bandeau-lg h4 {
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   SYSTÈME DE GESTION DES COOKIES AVANCÉ
   ========================================================================== */

/* Bandeau principal */
.cw-preferences-banner {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    color: var(--noir);
    padding: 2rem 0;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.5s ease-out;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.preferences-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--noir);
    margin-bottom: 1rem;
    font-family: var(--font-titles);
}

.preferences-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.preferences-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--noir);
}

.preferences-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--rouge);
    font-weight: bold;
}

.preferences-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.btn-accept-all,
.btn-choose,
.btn-refuse-all,
.btn-save {
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-main);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-accept-all {
    background-color: var(--rouge);
    color: var(--creme);
    border-color: var(--rouge);
}

.btn-accept-all:hover {
    background-color: var(--rouge-fonce);
    border-color: var(--rouge-fonce);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 57, 67, 0.3);
}

.btn-choose {
    background-color: transparent;
    color: var(--marine);
    border-color: var(--marine);
}

.btn-choose:hover {
    background-color: var(--marine);
    color: var(--creme);
    transform: translateY(-2px);
}

.btn-refuse-all {
    background-color: transparent;
    color: var(--gris);
    border-color: var(--gris);
}

.btn-refuse-all:hover {
    background-color: var(--gris);
    color: var(--blanc);
    transform: translateY(-2px);
}

.preferences-footer {
    text-align: center;
}

.preferences-link {
    color: var(--marine);
    font-size: 0.85rem;
    text-decoration: underline;
}

.preferences-link:hover {
    color: var(--rouge);
}

/* Panneau de détail */
.cw-preferences-detail {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 10000;
    overflow-y: auto;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.detail-header {
    background: var(--creme);
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.detail-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--noir);
}

.btn-back {
    background: none;
    border: none;
    color: var(--marine);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: rgba(43, 69, 112, 0.1);
}

.detail-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.detail-intro {
    font-size: 1rem;
    color: var(--noir);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.preference-item {
    background: var(--blanc);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.preference-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.preference-item.essential {
    background: var(--creme);
}

.preference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.preference-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--noir);
}

.preference-description {
    font-size: 0.9rem;
    color: var(--gris);
    margin: 0;
    line-height: 1.5;
}

.always-on {
    font-size: 0.85rem;
    color: var(--vert);
    font-weight: 500;
    background: rgba(169, 229, 187, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--rouge);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.detail-actions {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.btn-save {
    background-color: var(--rouge);
    color: var(--creme);
    border-color: var(--rouge);
    padding: 0.8rem 3rem;
}

.btn-save:hover {
    background-color: var(--rouge-fonce);
    border-color: var(--rouge-fonce);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 57, 67, 0.3);
}

/* Animation de fermeture */
.cw-preferences-banner.closing,
.cw-preferences-detail.closing {
    animation: slideDown 0.5s ease-in forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Ajustement du body */
body.cookies-visible {
    padding-bottom: 200px;
}

/* Responsive */
@media (max-width: 768px) {
    .cw-preferences-banner {
        padding: 1.5rem 0;
    }
    
    .preferences-title {
        font-size: 1.1rem;
    }
    
    .preferences-list li {
        font-size: 0.85rem;
    }
    
    .preferences-actions {
        flex-direction: column;
    }
    
    .btn-accept-all,
    .btn-choose,
    .btn-refuse-all {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .detail-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .btn-back {
        align-self: flex-start;
    }
    
    .preference-item {
        padding: 1rem;
    }
    
    .preference-header h4 {
        font-size: 1rem;
    }
    
    .preference-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .toggle-switch {
        width: 44px;
        height: 24px;
    }
    
    .toggle-slider:before {
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }
}