/*
 * main.css — Styles globaux & variables centralisées
 * Source unique de vérité pour tout le système de design Aventurusse
 * Importé sur toutes les pages via header.php
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@600;700&display=swap');

/* ═══════════════════════════════════════════
   VARIABLES — SOURCE UNIQUE DE VÉRITÉ
   Utilisées dans : main.css, home.css, trips.css,
                    _header.css, _footer.css
═══════════════════════════════════════════ */
:root {
    /* Palette principale */
    --blue-900:  #0a1628;
    --blue-700:  #0d3b8c;
    --blue-500:  #1a5cde;
    --blue-300:  #5b8ef5;
    --blue-100:  #e8effe;
    --blue-50:   #f4f7ff;

    /* Accents */
    --red-flag:  #d52b1e;   /* rouge drapeau russe */
    --gold:      #c8972a;
    --success:   #1a9e6e;
    --warning:   #d4820a;

    /* Texte */
    --text-dark: #111827;
    --text-mid:  #4b5563;
    --text-soft: #9ca3af;

    /* Surfaces */
    --white:     #ffffff;
    --light-bg:  #f4f7ff;
    --border:    #e5e9f2;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(10,22,40,.07), 0 1px 2px rgba(10,22,40,.05);
    --shadow-md: 0 4px 16px rgba(10,22,40,.10);
    --shadow-lg: 0 12px 40px rgba(10,22,40,.13);

    /* Rayons */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Typographie */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════
   RESET & BASE
   (défini ici une seule fois, plus dans chaque CSS)
═══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   SURCHARGES BOOTSTRAP GLOBALES
═══════════════════════════════════════════ */
.bg-light          { background-color: var(--light-bg) !important; }
.bg-primary        { background-color: var(--blue-900) !important; }
.text-primary      { color: var(--blue-500) !important; }
.text-warning      { color: #f59e0b !important; }
.text-muted        { color: var(--text-mid) !important; }
.btn-primary {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
    border-radius: var(--radius-md);
    font-weight: 600;
}
.btn-primary:hover {
    background-color: var(--blue-700);
    border-color: var(--blue-700);
}
.btn-outline-primary {
    color: var(--blue-500);
    border-color: var(--blue-500);
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: .6rem 1.4rem;
    transition: background .2s, color .2s;
}
.btn-outline-primary:hover {
    background: var(--blue-500);
    color: var(--white);
}

/* ═══════════════════════════════════════════
   UTILITAIRES GLOBAUX
═══════════════════════════════════════════ */

/* Lazy loading */
img.lazy {
    opacity: 0;
    transition: opacity .3s;
}
img.lazy.loaded {
    opacity: 1;
}

/* Animations au scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Validation formulaires */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
}
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--success);
}

/* ═══════════════════════════════════════════
   FORMULAIRES GLOBAUX
   Source unique — évite la duplication dans
   login.css, register.css, contact.css,
   individuel.css, destinations.css
═══════════════════════════════════════════ */
.form-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border);
    font-family: var(--font-body);
    font-size: .92rem;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(26,92,222,.15);
    outline: none;
}

/* Champs avec icône — utilisés sur login, register, destinations */
.input-icon-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-soft);
    font-size: .9rem;
    pointer-events: none;
    z-index: 2;
}

.form-control-icon {
    padding-left: 2.6rem !important;
}

/* ═══════════════════════════════════════════
   BOUTONS GRADIENT — SOCLE PARTAGÉ
   .btn-login / .btn-register / .btn-individuel /
   .btn-interest partagent ce patron commun ;
   chaque CSS de page ne conserve que les
   propriétés spécifiques (taille, marge)
═══════════════════════════════════════════ */
.btn-login,
.btn-register,
.btn-individuel,
.btn-interest,
.btn-aventurusse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 14px rgba(26,92,222,.35);
}

.btn-login:hover,
.btn-register:hover,
.btn-individuel:hover,
.btn-interest:hover,
.btn-aventurusse:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(26,92,222,.45);
    color: var(--white);
}

.btn-login:active,
.btn-register:active,
.btn-individuel:active,
.btn-interest:active,
.btn-aventurusse:active {
    transform: translateY(0);
}

/* Navbar CTA */
.btn-aventurusse {
    display: inline-flex;
    padding: .4rem 1.25rem;
    font-size: .9rem;
    text-decoration: none;
}

/* ═══════════════════════════════════════════
   CARTES STANDARD — SOCLE PARTAGÉ
   .contact-card, .individuel-card partagent
   la structure de base ; les paddings et
   font-sizes spécifiques restent dans chaque
   CSS de page
═══════════════════════════════════════════ */
.contact-card,
.individuel-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.contact-card-header,
.individuel-card-header {
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
    color: var(--white);
}

.contact-card-header h2,
.individuel-card-header h2 {
    color: var(--white);
    margin: 0;
    font-weight: 600;
}