:root {
    --primary-purple: #6f42c1;
    --anthracite: #333d47;
    --soft-gray: #f8f9fa;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    color: var(--anthracite);
    --bs-primary: #6f42c1;
    --bs-primary-rgb: 111, 66, 193; /* Version RGB pour les transparences */
    --bs-link-color: #6f42c1;
    /* Couleur de fond subtile (violet très très clair) */
--bs-primary-bg-subtle: rgba(111, 66, 193, 0.1) !important; /* 10% d'opacité */
    --bs-primary-border-subtle: rgba(111, 66, 193, 0.2) !important; /* 20% d'opacité */
}
/* 2. On force le bouton à utiliser ces nouvelles valeurs */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    
    /* Couleur au survol (un peu plus sombre) */
    --bs-btn-hover-bg: #5a32a3;
    --bs-btn-hover-border-color: #5a32a3;
    
    /* Couleur quand on clique (encore plus sombre) */
    --bs-btn-active-bg: #4e2b8c;
    --bs-btn-active-border-color: #4e2b8c;
    
    /* Couleur du focus (halo) */
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
}
/* --- Ton Logo Précis --- */
.logo-clic, .logo-association {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
}
.logo-clic { color: var(--anthracite); }
.logo-association { color: var(--anthracite); }
.logo-association::first-letter { color: var(--primary-purple); }
.logo-dot {
    color: var(--primary-purple);
    font-weight: 900;
    font-size: 1.8rem;
}

/* --- Design Organique --- */
.navbar {
    background: white;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

/* On force la position et on s'assure qu'elle est au dessus de tout */
.navbar.fixed-top {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9999 !important; /* Pour passer devant le contenu hero */
}

/* Important : comme fixed-top fait "flotter" la barre, 
   le contenu du dessous va monter. On pousse le wrapper vers le bas. */
body {
    padding-top: 80px !important; 
}

/* Si tu as un effet parallaxe ou un wrapper spécifique */
.hero-bg-wrapper {
    overflow: visible !important;
}

.hero-section {
    padding: 40px 0;
    /* Remplacer 0,123,255 par 111,66,193 */
    background: radial-gradient(circle at 90% 10%, rgba(111, 66, 193, 0.03) 0%, transparent 50%);
}

.card-association {
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 35px; /* Forme très douce */
    padding: 40px;
    height: 100%;
    transition: all 0.3s ease;
}

.card-association:hover {
    border-color: var(--primary-purple);
    transform: translateY(-5px);
}

.btn-creer {
    background: var(--primary-purple);
    color: white;
    border-radius: 50px;
    padding: 14px 35px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px; /* Même hauteur que le bouton login pour l'équilibre visuel */
    padding: 10px 30px;
    line-height: 1;
}

.price-tag {
    background: var(--soft-gray);
    color: var(--anthracite);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 600;
}
/* --- Ajustements Typo et Boutons --- */
h1.display-small {
    font-size: 2.8rem; /* Plus élégant et moins imposant */
    line-height: 1.2;
    letter-spacing: -1px;
}

/* Bouton Espace Client plus visible */
.btn-login {
    color: var(--primary-purple);
    text-decoration: none;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid var(--border-soft);
    
    /* Correction de l'alignement vertical */
    display: inline-flex;    /* Utilise flexbox */
    align-items: center;     /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    line-height: 1;          /* Réinitialise la hauteur de ligne pour éviter les décalages */
    height: 46px;            /* On force une hauteur identique au bouton d'inscription */
    transition: all 0.2s;
}

.btn-login:hover {
    background-color: var(--soft-gray);
    border-color: #ddd;
}

/* --- Section Exemples --- */
.example-site {
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
    background: white;
}

.example-site:hover {
    transform: scale(1.02);
}

.example-img {
    height: 200px;
    background-color: #e9ecef;
    background-size: cover;
    background-position: center;
}

.example-body {
    padding: 20px;
}

/* --- Fond Coloré Dégradé --- */
/* --- Fond Coloré Dégradé Violet --- */
.hero-bg-wrapper {
    position: relative;
    background-color: #ffffff;
    background-image: 
        radial-gradient(at 0% 0%, rgba(111, 66, 193, 0.08) 0px, transparent 50%),   /* Violet Primaire */
        radial-gradient(at 100% 0%, rgba(164, 69, 242, 0.12) 0px, transparent 50%), /* Violet Clair */
        radial-gradient(at 50% 100%, rgba(111, 66, 193, 0.05) 0px, transparent 50%);
    overflow: hidden;
}

/* La forme floue en haut à droite */
.hero-bg-wrapper::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: rgba(111, 66, 193, 0.04); /* Passage au violet */
    filter: blur(80px);
    border-radius: 50%;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1; /* Pour passer au dessus du fond dégradé */
}

/* --- Visual Stack --- */
.visual-stack {
    position: relative;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.window-mockup {
    background: white;
    border-radius: 18px;
    border: 1px solid #eee;
    position: absolute;
    overflow: hidden;
}

/* Le Site Public */
.site-public {
    width: 480px;
    height: 320px;
    z-index: 1;
    right: 50px;
    transform: perspective(1000px) rotateY(-5deg);
}

/* L'interface Admin (superposée) */
.interface-admin {
    width: 220px;
    height: 240px;
    z-index: 2;
    bottom: 20px;
    right: 0;
    transform: translateY(-20px);
    border: 2px solid var(--primary-purple);
}

/* Détails internes des mockups */
.window-header {
    background: #f8f9fa;
    padding: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; }
.mock-url { flex-grow: 1; text-align: center; background: #fff; border-radius: 4px; color: #ccc; }

.mock-content { background: #fff; }
.mock-hero { 
    height: 80px; 
    background: linear-gradient(45deg, #6f42c1, #a445f2); /* Dégradé violet dynamique */
}
.mock-line { height: 8px; background: #f0f0f0; border-radius: 4px; }
.mock-square { height: 40px; background: #f8f9fa; border-radius: 8px; }

/* Styles spécifiques Admin */
.tiny-text { font-size: 10px; color: #aaa; text-transform: uppercase; font-weight: 700; }
.mock-input { font-size: 12px; padding: 5px; background: #f9fafb; border: 1px solid #eee; border-radius: 4px; }
.dot-color { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #eee; }
.dot-color.blue { background: #6f42c1; }
.dot-color.anthracite { background: #333d47; }
.dot-color.active { ring: 2px solid #6f42c1; outline: 1px solid #6f42c1; outline-offset: 1px; }
.mock-btn-save { 
    background: #6f42c1; color: #fff; font-size: 10px; text-align: center; 
    padding: 6px; border-radius: 4px; margin-top: 10px; font-weight: bold;
}

/* --- Styles spécifiques Login --- */

.login-container {
    width: 100%;
    max-width: 450px;
}

/* Style des champs de saisie "Galet" */
.form-control {
    border: 1px solid #eee;
    background-color: #fcfcfc;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary-purple);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.05);
    outline: none;
}

/* On réutilise la carte du site mais on l'adapte pour le login */
.card-association {
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 40px; /* Encore plus de rondeur pour le confort visuel */
}

.min-vh-100 {
    min-height: 100vh;
}

/* Animation de secousse pour l'erreur de login */
.shake-error {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ff4757 !important;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

html {
    scroll-behavior: smooth;
}

/* Optionnel : petit style pour le lien Tarifs s'il n'est pas dans ton CSS */
.text-muted:hover {
    color: var(--primary) !important;
}

.legal-card {
    background: white;
    border-radius: 40px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    margin: 40px auto; /* Centrage et marge haute/basse */
    max-width: 900px;
    position: relative;
    z-index: 2;
}

html, body {
    /* On force l'autorisation du scroll */
    overflow-y: auto !important; 
    height: auto !important;
    min-height: 100vh;
}

.input-group > .invalid-feedback {
    display: none; /* Cache par défaut */
    width: 100%;
    margin-top: 0.25rem;
}

/* On force l'affichage si l'input est invalide */
.input-group > .form-control.is-invalid ~ .invalid-feedback {
    display: block;
}
/* Ombre violette douce pour le bouton principal */
.shadow-blue {
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.2); /* Changement ici */
    transition: transform 0.2s, box-shadow 0.2s;
}

.shadow-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(111, 66, 193, 0.3); /* Changement ici */
}

/* Style spécifique pour le bouton démo */
.btn-outline-dark {
    border: 2px solid #e2e8f0; /* Gris très clair */
    color: #4a5568; /* Texte anthracite */
}

.btn-outline-dark:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e0;
    color: #1a202c;
}

/* Cache le bouton radio mais stylise l'image qui suit quand il est coché */
.btn-check:checked + label img.demo-img-selector {
    border: 3px solid #6f42c1 !important;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
    transform: scale(1.05);
}

.demo-img-selector {
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
}

.demo-img-selector:hover {
    border-color: #cbd5e0;
}
/* Style de base des pastilles */
.color-selector-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 3px solid transparent;
    display: inline-block;
}

/* Effet au survol */
.color-selector-dot:hover {
    transform: scale(1.1);
}

/* L'effet magique quand le bouton radio est coché */
.btn-check:checked + .color-selector-dot {
    border-color: #fdfdfd; /* Un petit liseré blanc */
    box-shadow: 0 0 0 3px #000; /* Un contour noir ou gris foncé pour marquer la sélection */
    transform: scale(1.2);
}

/* Optionnel : Si tu veux que le contour soit de la couleur du thème */
#color1:checked + .color-selector-dot { box-shadow: 0 0 0 3px #e67e22; }
#color2:checked + .color-selector-dot { box-shadow: 0 0 0 3px #2980b9; }
#color3:checked + .color-selector-dot { box-shadow: 0 0 0 3px #27ae60; }
#color4:checked + .color-selector-dot { box-shadow: 0 0 0 3px #d63384; }
#color5:checked + .color-selector-dot { box-shadow: 0 0 0 3px #222222; }
#color6:checked + .color-selector-dot { box-shadow: 0 0 0 3px #8e44ad; }
#color7:checked + .color-selector-dot { box-shadow: 0 0 0 3px #1abc9c; }


 .legal-card { background: white; border-radius: 40px; padding: 50px; box-shadow: 0 20px 60px rgba(0,0,0,0.05); margin: 40px auto; max-width: 900px; }
        .legal-content h2 { font-size: 1.8rem; font-weight: 800; color: #1a202c; margin-top: 40px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
        .legal-content h3 { font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-top: 30px; border-left: 4px solid #6f42c1; padding-left: 15px; }
        .legal-content p, .legal-content li { color: #4a5568; line-height: 1.7; }
        .highlight-box { background: #f8fafc; border-radius: 15px; padding: 20px; border-left: 4px solid #cbd5e0; margin: 20px 0; }


    /* Pour l'aspect "Fenêtre de logiciel" */
.mockup-container {
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
}

/* Zone pointillée pour les photos */
.photo-dropzone {
    border-color: #dee2e6 !important;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.photo-dropzone:hover {
    border-color: #6f42c1 !important;
    background-color: #f8fbff;
}

/* Inputs plus doux */
.form-control::placeholder {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Simuler le clic sur les couleurs */
.rounded-circle:hover {
    transform: scale(1.1);
}

/* Design des modules */
.module-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.mockup-line {
    height: 8px;
    background: #dee2e6;
    border-radius: 4px;
}

/* Espacement supplémentaire pour la section */
.py-7 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.ls-1 {
    letter-spacing: 1px;
}

.italic {
    font-style: italic;
}
/* Ajustement mobile */
@media (max-width: 991px) {
    .navbar-nav {
        padding: 20px 0;
        text-align: center;
    }
    .d-flex {
        width: 100%;
        padding-bottom: 20px;
    }
    .btn-creer, .btn-login {
        width: 100%;
        text-align: center;
    }
}

.visual-stack {
    padding-left: 2rem; /* Espace entre ton texte de gauche et le mockup */
}

.window-mockup {
    max-width: 580px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ddd;
    position: relative;
    /* Optionnel : légère rotation pour le dynamisme */
    transform: perspective(1000px) rotateY(-2deg);
}

.iframe-container {
    height: 480px; /* Taille de la fenêtre d'affichage */
    position: relative;
    overflow: hidden;
    background: #fff;
}

.iframe-container iframe {
    width: 1280px; 
    height: 1400px;
    border: none;
    position: absolute;
    
    /* AJUSTEMENT ICI : */
    /* On remonte le site de 120px pour supprimer l'espace vide du haut */
    top: -160px; 
    left: 0;
    
    /* On garde le scale pour la largeur */
    transform: scale(0.453); 
    transform-origin: top left;
    
    pointer-events: none;
}

.made-with-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: white;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    z-index: 25;
    border: 1px solid #eee;
}