/* ============================================
   ACCUEIL - STYLES DES FORMULAIRES
   Design system cohérent avec le reste de l'application
============================================ */

/* ============================================
   DESIGN TOKENS & VARIABLES
============================================ */
:root {
    --ease-out:    cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

    --text-on-blue:  #FFFFFF;
    --text-on-white: #1A202C;
    --text-on-light: #2D3748;
    --text-muted:    #718096;

    --bg-hero:          linear-gradient(180deg, var(--gradient-primary) 0%, var(--gradient-secondary) 100%);
    --bg-blue-solid:    var(--primary);
    --bg-blue-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --bg-white:         #FFFFFF;
    --bg-off-white:     #F7FAFC;
    --bg-light-gray:    #EDF2F7;
}

/* ============================================
   GLOBAL
============================================ */
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.madagascar-colors { background: linear-gradient(90deg, #FF6B6B 0%, #4ECDC4 50%, #45B7D1 100%); }

.section-padding { padding: 4rem 0; }

.card-hover:hover {
    transform:  translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.step-number {
    background:    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    color:         white;
    width:         50px;
    height:        50px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-weight:   bold;
    font-size:     1.2rem;
    margin:        0 auto 1rem;
}

/* ============================================
   ICÔNES AVANTAGES / MISSION
============================================ */
.benefit-icon {
    width:           4rem;
    height:          4rem;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 1rem;
    transition:      all 0.3s ease;
}
.benefit-icon i { color: white; font-size: 1.5rem; }

.icon-gradient-primary   { background: linear-gradient(135deg, var(--brand-primary)   0%, var(--brand-secondary) 100%); }
.icon-gradient-secondary { background: linear-gradient(135deg, var(--secondary)        0%, var(--secondary-dark)  100%); }
.icon-gradient-accent    { background: linear-gradient(135deg, var(--brand-accent)     0%, var(--secondary)       100%); }
.icon-gradient-success   { background: linear-gradient(135deg, var(--success)          0%, var(--success-dark)    100%); }
.icon-gradient-info      { background: linear-gradient(135deg, var(--info)             0%, var(--info-dark)       100%); }
.icon-gradient-warning   { background: linear-gradient(135deg, var(--warning)          0%, var(--warning-dark)   100%); }
.icon-gradient-danger    { background: linear-gradient(135deg, var(--danger)           0%, var(--danger-dark)    100%); }

.card-hover:hover .benefit-icon { transform: scale(1.1); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.feature-icon-colored {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    margin-right:    0.75rem;
    transition:      all 0.3s ease;
}
.feature-icon-colored i { color: white; font-size: 1.1rem; }

.mission-icon {
    width:           3rem;
    height:          3rem;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 0.75rem;
    transition:      all 0.3s ease;
}
.mission-icon i { color: white; font-size: 1.2rem; }
.mission-icon:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }

/* ============================================
   PRICING CARD
============================================ */
.pricing-card { position: relative; overflow: hidden; }
.pricing-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0;
    width:      100%;
    height:     4px;
    background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
}

/* ============================================
   POLITIQUE MOT DE PASSE
   FIX : on supprime les ::after qui dupliquaient l'icône.
   L'icône Font Awesome <i> dans le HTML est la SEULE icône.
============================================ */
.policy-item {
    transition: all 0.3s ease;
}

/* État valide */
.policy-valid {
    color: #16a34a !important;
}

/* État invalide */
.policy-invalid {
    color: #dc2626 !important;
}

/* Conteneur de l'icône — taille fixe, pas de contenu généré */
.policy-check {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           20px !important;
    height:          20px !important;
    border-radius:   50% !important;
    font-size:       14px !important;
    font-weight:     bold !important;
    flex-shrink:     0 !important;
    /* PAS de background, PAS de ::after — l'icône <i> suffit */
}

/* Couleur de l'icône selon l'état */
.policy-check.valid {
    color:            #16a34a !important;
    background-color: transparent !important;
    /* ❌ SUPPRIMÉ : ::after { content: '✓' } — c'était la cause du doublon */
}

.policy-check.invalid {
    color:            #dc2626 !important;
    background-color: transparent !important;
    /* ❌ SUPPRIMÉ : ::after { content: '✗' } — c'était la cause du doublon */
}

/* Texte du critère */
.policy-valid .policy-text {
    color: #16a34a;
}
.policy-invalid .policy-text {
    color: #6b7280;
}

/* ============================================
   SECTION INSCRIPTION
============================================ */
#inscription { background: white; }

/* Onglets */
.flex.border-b {
    border-bottom: 2px solid #e2e8f0 !important;
    gap: 0;
}

.tab-btn {
    padding:        12px 24px !important;
    font-weight:    500 !important;
    font-size:      16px !important;
    color:          #64748b !important;
    background:     transparent !important;
    border:         none !important;
    border-bottom:  3px solid transparent !important;
    margin-bottom: -2px !important;
    transition:     all 0.3s ease !important;
    cursor:         pointer !important;
}

.tab-btn:hover { color: #0b59b4 !important; }

.tab-btn.border-blue-600,
.tab-btn.text-blue-600 {
    color:              #0b59b4 !important;
    border-bottom-color: #0b59b4 !important;
}

/* Conteneur de formulaire */
.bg-gray-50.rounded-lg.p-8.shadow-lg {
    background:    #f8fafc !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow:    0 4px 12px rgba(0,0,0,0.05) !important;
    padding:       32px !important;
}

form.bg-white {
    background:    white !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow:    0 4px 12px rgba(0,0,0,0.05) !important;
    padding:       32px !important;
}

/* Titres de formulaire */
.form-section h3,
form.bg-white h3 {
    font-size:     1.25rem !important;
    font-weight:   600 !important;
    color:         #1e293b !important;
    margin-bottom: 24px !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           10px !important;
}
.form-section h3 i,
form.bg-white h3 i { color: #0b59b4 !important; font-size: 1.5rem !important; }

/* Labels */
label.block {
    display:       block !important;
    font-weight:   500 !important;
    color:         #334155 !important;
    margin-bottom: 8px !important;
    font-size:     14px !important;
}
label.block i { color: #0b59b4 !important; margin-right: 6px !important; font-size: 14px !important; }

/* ============================================
   CHAMPS DE FORMULAIRE
============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="file"],
input[type="number"],
select,
textarea {
    width:       100% !important;
    padding:     12px 16px !important;
    border:      1px solid #cbd5e0 !important;
    border-radius: 8px !important;
    font-size:   14px !important;
    color:       #1e293b !important;
    background:  white !important;
    transition:  all 0.3s ease !important;
    font-family: 'CenturyGothicPaneuropean', 'Century Gothic', sans-serif !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline:    none !important;
    border-color: #0b59b4 !important;
    box-shadow: 0 0 0 3px rgba(11, 89, 180, 0.1) !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder { color: #94a3b8 !important; }

select {
    appearance:         none !important;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230b59b4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat:  no-repeat !important;
    background-position: right 12px center !important;
    background-size:    20px !important;
    padding-right:      44px !important;
    cursor:             pointer !important;
}

textarea { resize: vertical !important; min-height: 100px !important; line-height: 1.6 !important; }

input[readonly] { background-color: #f1f5f9 !important; cursor: not-allowed !important; }

input[type="file"] { padding: 10px 14px !important; cursor: pointer !important; }
input[type="file"]::-webkit-file-upload-button {
    background:   linear-gradient(135deg, #0b59b4 0%, #1e40af 100%);
    color:        white !important;
    padding:      8px 16px !important;
    border:       none !important;
    border-radius: 6px !important;
    cursor:       pointer !important;
    margin-right: 12px !important;
    font-weight:  500 !important;
    transition:   all 0.3s ease !important;
}
input[type="file"]::-webkit-file-upload-button:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(11,89,180,0.3) !important; }

input[type="checkbox"] {
    width:        18px !important;
    height:       18px !important;
    cursor:       pointer !important;
    accent-color: #0b59b4 !important;
    margin-top:   2px !important;
}

.text-red-500 { color: #dc2626 !important; font-weight: bold !important; margin-left: 4px !important; }

/* ============================================
   BOUTONS
============================================ */
.btn-primary,
.create-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    padding:         14px 32px !important;
    background:      linear-gradient(135deg, #0b59b4 0%, #1e40af 100%) !important;
    color:           white !important;
    border:          none !important;
    border-radius:   8px !important;
    font-size:       16px !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    transition:      all 0.3s ease !important;
    box-shadow:      0 4px 12px rgba(11,89,180,0.2) !important;
    text-decoration: none !important;
}

.btn-primary:hover,
.create-btn:hover {
    background:  linear-gradient(135deg, #094aa3 0%, #1a3a94 100%) !important;
    transform:   translateY(-2px) !important;
    box-shadow:  0 6px 16px rgba(11,89,180,0.3) !important;
}

.btn-primary:active,
.create-btn:active { transform: translateY(0) !important; }

.btn-primary:disabled,
.create-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; }

/* ============================================
   BLOC CRITÈRES MOT DE PASSE
============================================ */
#password-policies-entreprise,
#password-policies-particulier {
    background:    #f8fafc !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding:       16px !important;
    margin-top:    12px !important;
}

/* BLOC CORRESPONDANCE */
#password-match-entreprise,
#password-match-particulier {
    background:    #f8fafc !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding:       12px 16px !important;
    margin-top:    12px !important;
}

/* ============================================
   ESPACEMENTS
============================================ */
.mt-6 { margin-top: 24px !important; }
.mt-8 { margin-top: 32px !important; }
.gap-6 { gap: 20px !important; }

/* ============================================
   PRÉVISUALISATION PHOTO
============================================ */
#photo-preview img {
    border:        2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background:    #f8fafc !important;
    transition:    all 0.3s ease !important;
}
#photo-preview img:hover { border-color: #0b59b4 !important; box-shadow: 0 4px 12px rgba(11,89,180,0.1) !important; }

/* ============================================
   FORMULAIRE CONTACT
============================================ */
#contact form.bg-white {
    background:    white !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding:       32px !important;
    box-shadow:    0 4px 12px rgba(0,0,0,0.05) !important;
}

/* ============================================
   INPUT TÉLÉPHONE AVEC PAYS
============================================ */
.phone-input-wrapper {
    display:       flex !important;
    align-items:   stretch !important;
    border:        1px solid #cbd5e0 !important;
    border-radius: 8px !important;
    overflow:      hidden !important;
    transition:    all 0.3s ease !important;
    background:    white !important;
}
.phone-input-wrapper:focus-within { border-color: #0b59b4 !important; box-shadow: 0 0 0 3px rgba(11,89,180,0.1) !important; }

.country-code {
    display:        flex !important;
    align-items:    center !important;
    gap:            8px !important;
    padding:        12px 16px !important;
    background:     #f8fafc !important;
    border-right:   1px solid #cbd5e0 !important;
    font-weight:    600 !important;
    color:          #334155 !important;
    white-space:    nowrap !important;
    font-size:      14px !important;
}

.flag-icon { width: 24px !important; height: 16px !important; object-fit: cover !important; border-radius: 2px !important; border: 1px solid #e2e8f0 !important; }
.country-prefix { font-size: 14px !important; color: #0b59b4 !important; }

.phone-input-wrapper .form-control { border: none !important; flex: 1 !important; padding: 12px 16px !important; }
.phone-input-wrapper .form-control:focus { box-shadow: none !important; border: none !important; }

.phone-input-wrapper input[type="tel"] { width: 100% !important; padding: 12px 16px !important; border: none !important; background: transparent !important; outline: none !important; font-size: 14px !important; color: #1e293b !important; }
.phone-input-wrapper input[type="tel"]::placeholder { color: #94a3b8 !important; }

.phone-input-with-country {
    display:       flex !important;
    gap:           0 !important;
    align-items:   stretch !important;
    width:         100% !important;
    border:        1px solid #cbd5e0 !important;
    border-radius: 8px !important;
    overflow:      hidden !important;
    transition:    all 0.3s ease !important;
    background:    white !important;
}
.phone-input-with-country:focus-within { border-color: #0b59b4 !important; box-shadow: 0 0 0 3px rgba(11,89,180,0.1) !important; }

.phone-input-with-country .country-code-select {
    flex:                  0 0 auto !important;
    width:                 180px !important;
    max-width:             180px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right:          none !important;
    background-color:      #f8fafc !important;
    font-size:             13px !important;
    padding:               12px 10px !important;
    cursor:                pointer !important;
    border:                1px solid #cbd5e0 !important;
}
.phone-input-with-country .country-code-select:focus { border-right: 2px solid #0b59b4 !important; z-index: 2 !important; outline: none !important; }

.phone-input-with-country input[type="tel"] {
    flex:                 1 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    min-width:            0 !important;
    border:               1px solid #cbd5e0 !important;
    border-left:          none !important;
    padding:              12px 16px !important;
}
.phone-input-with-country input[type="tel"]:focus { outline: none !important; box-shadow: none !important; }

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 768px) {
    .tab-btn { padding: 10px 16px !important; font-size: 14px !important; }
    .bg-gray-50.rounded-lg.p-8.shadow-lg { padding: 20px !important; }
    .btn-primary, .create-btn { width: 100% !important; padding: 14px 24px !important; }
}

/* ============================================
   ANIMATIONS
============================================ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

input.error   { border-color: #dc2626 !important; animation: shake 0.3s ease-in-out !important; }
input.success { border-color: #16a34a !important; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible { outline: 2px solid #0b59b4 !important; outline-offset: 2px !important; }

/* ============================================
   HERO SECTION
============================================ */
.hero-section {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    position:        relative;
    overflow:        hidden;
    padding:         120px 24px 80px 8%;
    background:      linear-gradient(135deg, #FDFBF7 0%, #F5F0E6 100%);
}

.hero-bg-gradient {
    position:   absolute;
    inset:      0;
    background:
            radial-gradient(ellipse at 20% 30%, rgba(11, 89, 180, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 70%, rgba(27, 83, 116, 0.06) 0%, transparent 50%),
            linear-gradient(135deg, #FDFBF7 0%, #F5F0E6 100%);
    pointer-events: none;
    z-index:    0;
}

.hero-bg-grid {
    position:         absolute;
    inset:            0;
    background-image: linear-gradient(rgba(11,89,180,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(11,89,180,0.03) 1px, transparent 1px);
    background-size:  40px 40px;
    pointer-events:   none;
    z-index:          1;
}

.hero-bg-noise {
    position:         absolute;
    inset:            0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity:          0.02;
    pointer-events:   none;
    z-index:          2;
}

.globe-image-container {
    position:        absolute;
    top:             50%;
    right:           8%;
    transform:       translateY(-50%);
    width:           45%;
    max-width:       500px;
    height:          70%;
    z-index:         3;
    pointer-events:  none;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.globe-image { width: 100%; height: 100%; object-fit: contain; animation: globeFloat 6s ease-in-out infinite; }

@keyframes globeFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-20px); }
}

.particles-container { display: none; }
.currency-symbols    { display: none; }
.world-map-container { display: none; }

/* Carte de crédit */
.credit-card-mockup {
    position:       absolute;
    bottom:         10%;
    right:          10%;
    width:          320px;
    height:         200px;
    perspective:    1000px;
    z-index:        5;
    pointer-events: none;
    opacity:        0;
    animation:      cardSlideIn 1s ease-out 1s forwards;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateX(100px) rotateY(-20deg); }
    to   { opacity: 1; transform: translateX(0) rotateY(0deg); }
}

.card-glass {
    width:        100%;
    height:       100%;
    background:   linear-gradient(135deg, #D4AF37 0%, #C5A028 30%, #B8941F 60%, #A68416 100%);
    border:       1px solid rgba(255,215,0,0.4);
    border-radius: 16px;
    padding:      24px;
    position:     relative;
    transform-style: preserve-3d;
    transition:   transform 0.3s ease;
}
.credit-card-mockup:hover .card-glass { transform: rotateX(10deg) rotateY(-10deg); }

.card-chip {
    width:         45px;
    height:        35px;
    background:    linear-gradient(135deg, #F5D76E 0%, #D4AF37 50%, #B8941F 100%);
    border-radius: 6px;
    margin-bottom: 15px;
    position:      relative;
    overflow:      hidden;
    border:        1px solid rgba(255,255,255,0.3);
}
.card-chip::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,0.5); border-radius: 4px; }
.card-chip::after  { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.3); }

.card-number { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 600; color: #FFFFFF; letter-spacing: 3px; margin-bottom: 25px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.card-holder { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5px; }
.card-expiry { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 1px; }

.card-logo { position: absolute; bottom: 25px; right: 25px; width: 60px; height: 40px; }
.card-logo-mastercard { position: relative; width: 100%; height: 100%; }
.card-logo-circle.circle-red    { position: absolute; left: 0;  width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #EB001B 0%, #C41230 100%); opacity: 0.95; }
.card-logo-circle.circle-orange { position: absolute; right: 0; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #F79E1B 0%, #FF5F00 100%); opacity: 0.95; }
.card-logo-mastercard .circle-red,
.card-logo-mastercard .circle-orange { mix-blend-mode: multiply; }

/* Hero content */
.hero-content {
    position:  relative;
    z-index:   10;
    text-align: left;
    max-width: 700px;
    width:     100%;
}

.hero-title {
    font-family: 'Inter', 'Poppins', var(--font-family-sans);
    font-size:   clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color:       #1A1A2E;
    line-height: 1.1;
    margin-bottom: 24px;
    opacity:     0;
    transform:   translateY(30px);
    animation:   fadeUp 0.8s var(--ease-out) 0.2s forwards;
}

.hero-title .text-gradient {
    background:             linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    display:                 inline-block;
}

.hero-title .text-gradient::after {
    content:              '●';
    position:             relative;
    margin-left:          8px;
    color:                var(--primary);
    -webkit-text-fill-color: var(--primary);
    font-size:            0.6em;
    vertical-align:       middle;
    animation:            blink 1.5s ease-in-out infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-subtitle {
    font-size:   clamp(1.125rem, 2vw, 1.25rem);
    color:       #2D3748;
    font-weight: 600;
    margin-bottom: 12px;
    opacity:     0;
    transform:   translateY(20px);
    animation:   fadeUp 0.8s var(--ease-out) 0.3s forwards;
}

.hero-description {
    font-size:   clamp(0.9375rem, 1.5vw, 1.0625rem);
    color:       #4A5568;
    margin-bottom: 40px;
    line-height: 1.7;
    max-width:   520px;
    opacity:     0;
    transform:   translateY(20px);
    animation:   fadeUp 0.8s var(--ease-out) 0.4s forwards;
}

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.hero-buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
    opacity:   0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.5s forwards;
}

.hero-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         16px 32px;
    border-radius:   50px;
    font-size:       0.9375rem;
    font-weight:     600;
    text-decoration: none;
    transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor:          pointer;
    border:          none;
    position:        relative;
    overflow:        hidden;
}

.hero-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:      var(--text-light);
    box-shadow: 0 4px 20px rgba(11,89,180,0.4), inset 0 1px 1px rgba(255,255,255,0.2);
}
.hero-btn.primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.hero-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(11,89,180,0.5), inset 0 1px 1px rgba(255,255,255,0.2); }
.hero-btn.primary:hover::before { opacity: 1; }
.hero-btn.primary:active { transform: translateY(0); }

.hero-btn.secondary { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.hero-btn.secondary:hover { background: linear-gradient(135deg, rgba(11,89,180,0.1) 0%, rgba(27,83,116,0.1) 100%); color: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); }
.hero-btn.secondary:active { transform: translateY(0); }

.hero-btn i { font-size: 1rem; }

/* ============================================
   FAQ
============================================ */
#faq { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; }
#faq h2 { font-size: 2.5rem !important; font-weight: 700 !important; color: #1e293b !important; margin-bottom: 16px !important; position: relative !important; display: inline-block !important; }
#faq h2::after { content: '' !important; display: block !important; width: 60px !important; height: 4px !important; background: linear-gradient(90deg, #0b59b4 0%, #1e40af 100%) !important; margin: 12px auto 0 !important; border-radius: 2px !important; }

.faq-item { background: white !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; margin-bottom: 16px !important; overflow: hidden !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; }
.faq-item:hover { box-shadow: 0 8px 16px rgba(11,89,180,0.1) !important; border-color: #a3c7f7 !important; transform: translateY(-2px) !important; }

.faq-question { padding: 20px 24px !important; font-size: 16px !important; font-weight: 600 !important; color: #1e293b !important; background: transparent !important; border: none !important; text-align: left !important; cursor: pointer !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.faq-question:hover { color: #0b59b4 !important; background: #f8fafc !important; }
.faq-question i { color: #0b59b4 !important; transition: transform 0.3s ease !important; font-size: 14px !important; }
.faq-question.active i { transform: rotate(180deg) !important; }

.faq-answer { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.4s ease !important; background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; }
.faq-answer.active { max-height: 500px !important; }
.faq-answer p { padding: 20px 24px !important; font-size: 15px !important; line-height: 1.7 !important; color: #475569 !important; margin: 0 !important; }

/* ============================================
   COULEURS DE SECTIONS
============================================ */
#tarifs  { background: var(--brand-primary) !important; }
#contact { background: var(--brand-primary) !important; }
#comment-ca-marche, #faq, #inscription { background: var(--bg-white) !important; }
#a-propos { background: var(--bg-off-white) !important; }
.section-padding.bg-white { background: var(--bg-white) !important; }

#contact h2, #contact h3 { color: var(--text-on-blue) !important; }
#contact p { color: rgba(255,255,255,0.95) !important; }
#contact h3 { color: #000000 !important; text-shadow: none; }
#contact label, #contact .text-gray-700 { color: #000000 !important; }

#tarifs h2, #tarifs .text-xl { color: #FFFFFF !important; }
#tarifs a.btn-primary, #tarifs .btn-primary.text-white { color: #FFFFFF !important; }
#tarifs .bg-blue-500, #tarifs .bg-blue-500 span { color: #FFFFFF !important; }
#tarifs .mt-12 p { color: #FFFFFF !important; }
#tarifs .bg-white .text-gray-700, #tarifs .bg-white h3, #tarifs .bg-white .font-bold { color: #000000 !important; }
#tarifs .bg-white .bg-blue-500 span { color: #FFFFFF !important; }

/* ============================================
   FOOTER
============================================ */
footer.bg-gray-900 { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important; position: relative; overflow: hidden; }
footer.bg-gray-900::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%); }

.footer-logo-text { background: linear-gradient(135deg, var(--primary-light) 0%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; }
.footer-brand-accent { width: 60px; height: 3px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 2px; margin-top: 10px; }

.social-links { display: flex; gap: 12px; }
.social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--primary-light); font-size: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.social-link:hover { background: var(--primary); border-color: var(--primary); color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(11,89,180,0.4); }

.footer-title { font-size: 1.125rem; font-weight: 700; color: #ffffff; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; position: relative; padding-bottom: 12px; }
.footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: linear-gradient(90deg, var(--primary) 0%, transparent 100%); }
.footer-title i { color: var(--primary-light); font-size: 1.2rem; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; transition: all 0.3s ease; }
.footer-links li:hover { transform: translateX(5px); }
.footer-links a { color: #9ca3af; text-decoration: none; font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; }
.footer-links a i { font-size: 0.75rem; color: var(--primary); transition: all 0.3s ease; }
.footer-links a:hover { color: #ffffff; }
.footer-links a:hover i { color: var(--primary-light); }

.footer-divider { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%); margin: 40px 0; position: relative; }
.footer-divider::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 2px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 2px; }

.copyright-text  { color: #9ca3af; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.footer-tagline  { color: #6b7280; font-size: 0.8125rem; display: flex; align-items: center; gap: 8px; }
.footer-tagline i { color: var(--primary); }
.footer-made-with { color: #6b7280; font-size: 0.8125rem; display: flex; align-items: center; gap: 8px; }
.footer-made-with i { color: #ef4444; animation: heartbeat 1.5s ease-in-out infinite; }

@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* ============================================
   RESPONSIVE FOOTER & HERO
============================================ */
@media (max-width: 768px) {
    .hero-section { padding: 100px 20px 60px; flex-direction: column; justify-content: flex-start; }
    .hero-content { text-align: center; max-width: 100%; }
    .hero-description { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-btn { width: 100%; max-width: 280px; }
    .credit-card-mockup { display: none; }
    .world-map-container { display: none; }

    .footer-brand { padding-right: 0; text-align: center; margin-bottom: 30px; }
    .footer-brand-accent { margin: 10px auto; }
    .social-links { justify-content: center; }
    .footer-column { padding-left: 0; text-align: center; margin-bottom: 30px; }
    .footer-title { justify-content: center; }
    .footer-title::after { left: 50%; transform: translateX(-50%); }
    .footer-links { display: inline-block; text-align: left; }
    .footer-links li:hover { transform: none; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.875rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-description { font-size: 0.875rem; }
    .hero-btn { padding: 14px 24px; font-size: 0.875rem; }
}

/* ============================================
   ACCESSIBILITÉ — RÉDUCTION DE MOUVEMENT
============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:      0.01ms !important;
    }
    .particles-container, .currency-symbols, .world-map-container, .credit-card-mockup { display: none; }
}