:root {
    --primary-blue: #007bff;
    --anthracite: #333d47;
    --soft-gray: #f8f9fa;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fdfdfd;
    color: var(--anthracite);
}

/* --- Ton Logo Précis --- */
.logo-clic, .logo-artisan {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
}
.logo-clic { color: var(--anthracite); }
.logo-artisan { color: var(--anthracite); }
.logo-artisan::first-letter { color: var(--primary-blue); }
.logo-dot {
    color: var(--primary-blue);
    font-weight: 900;
    font-size: 1.8rem;
}

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

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

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

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

.btn-creer {
    background: var(--primary-blue);
    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: 0.9rem;
    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(--anthracite);
    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é --- */
.hero-bg-wrapper {
    position: relative;
    background-color: #ffffff;
    /* On utilise des bleus légèrement plus saturés pour le côté "coloré" */
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 123, 255, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 212, 255, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(102, 126, 234, 0.05) 0px, transparent 50%);
    overflow: hidden;
}

/* Optionnel : une forme floue pour plus de relief */
.hero-bg-wrapper::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: rgba(0, 123, 255, 0.04);
    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-blue);
}

/* 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, #eef2f3, #8e9eab); }
.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: #007bff; }
.dot-color.anthracite { background: #333d47; }
.dot-color.active { ring: 2px solid #007bff; outline: 1px solid #007bff; outline-offset: 1px; }
.mock-btn-save { 
    background: #007bff; 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-blue);
    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-artisan {
    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 bleue douce pour le bouton principal */
.shadow-blue {
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.shadow-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 123, 255, 0.3);
}

/* 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 #007bff !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 #007bff; 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; }