/* =============================================================
   custom.css — VotreIA Child Theme Kadence
   ---------------------------------------------------------------
   CE FICHIER CONTIENT :
     1. Variables CSS globales (couleurs, typographie, espacement)
     2. Reset et styles de base
     3. Classes utilitaires (boutons, sections, containers)
     4. Personnalisations Kadence / Elementor
   ============================================================= */


/* =============================================================
   1. VARIABLES CSS GLOBALES
   Pour changer une couleur sur tout le site, modifiez-la ici.
   ============================================================= */
:root {
    /* Couleurs de marque */
    --couleur-primaire:      #2563EB;  /* Bleu principal — boutons, liens, accents */
    --couleur-primaire-dark: #1D4ED8;  /* Bleu foncé — hover des boutons */
    --couleur-primaire-light:#DBEAFE;  /* Bleu très clair — fonds de sections */
    --couleur-accent:        #F59E0B;  /* Jaune/ambre — highlights, badges, CTA secondaires */
    --couleur-accent-dark:   #D97706;  /* Jaune foncé — hover accent */
    --couleur-succes:        #10B981;  /* Vert — confirmations, checkmarks */
    --couleur-erreur:        #EF4444;  /* Rouge — erreurs, alertes */

    /* Couleurs neutres */
    --couleur-fond:          #FFFFFF;  /* Fond principal — blanc */
    --couleur-fond-gris:     #F9FAFB;  /* Fond alternatif — sections grises */
    --couleur-fond-gris-2:   #F3F4F6;  /* Fond plus marqué */
    --couleur-texte:         #111827;  /* Texte principal — quasi-noir */
    --couleur-texte-secondaire: #6B7280; /* Texte secondaire — gris moyen */
    --couleur-texte-clair:   #9CA3AF;  /* Texte désactivé, placeholders */
    --couleur-bordure:       #E5E7EB;  /* Bordures, séparateurs */

    /* Typographie */
    --police-principale:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --taille-xs:             0.75rem;   /* 12px */
    --taille-sm:             0.875rem;  /* 14px */
    --taille-base:           1rem;      /* 16px */
    --taille-lg:             1.125rem;  /* 18px */
    --taille-xl:             1.25rem;   /* 20px */
    --taille-2xl:            1.5rem;    /* 24px */
    --taille-3xl:            1.875rem;  /* 30px */
    --taille-4xl:            2.25rem;   /* 36px */
    --taille-5xl:            3rem;      /* 48px */
    --graisse-normal:        400;
    --graisse-medium:        500;
    --graisse-semibold:      600;
    --graisse-bold:          700;
    --graisse-extrabold:     800;
    --hauteur-ligne:         1.6;

    /* Espacement */
    --espace-xs:    0.25rem;   /* 4px */
    --espace-sm:    0.5rem;    /* 8px */
    --espace-md:    1rem;      /* 16px */
    --espace-lg:    1.5rem;    /* 24px */
    --espace-xl:    2rem;      /* 32px */
    --espace-2xl:   3rem;      /* 48px */
    --espace-3xl:   4rem;      /* 64px */
    --espace-4xl:   6rem;      /* 96px */

    /* Mise en page */
    --largeur-max:        1200px;
    --largeur-etroite:    760px;
    --largeur-tres-etroite: 560px;
    --rayon-sm:    4px;
    --rayon-md:    8px;
    --rayon-lg:    12px;
    --rayon-xl:    16px;
    --rayon-complet: 9999px;

    /* Ombres */
    --ombre-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --ombre-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --ombre-lg:   0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
    --ombre-xl:   0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);

    /* Transitions */
    --transition-rapide:  150ms ease;
    --transition-normale: 250ms ease;
    --transition-lente:   400ms ease;
}


/* =============================================================
   2. RESET ET STYLES DE BASE
   ============================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--police-principale);
    font-size: var(--taille-base);
    font-weight: var(--graisse-normal);
    line-height: var(--hauteur-ligne);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--couleur-primaire);
    text-decoration: none;
    transition: color var(--transition-rapide);
}

a:hover {
    color: var(--couleur-primaire-dark);
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--graisse-bold);
    line-height: 1.25;
    color: var(--couleur-texte);
}


/* =============================================================
   3. CLASSES UTILITAIRES — BOUTONS
   ============================================================= */

/* Bouton principal — bleu plein */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-sm);
    padding: 0.875rem 1.75rem;
    background-color: var(--couleur-primaire);
    color: #FFFFFF;
    font-family: var(--police-principale);
    font-size: var(--taille-base);
    font-weight: var(--graisse-semibold);
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--rayon-complet);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-rapide),
                transform var(--transition-rapide),
                box-shadow var(--transition-rapide);
    white-space: nowrap;
}

.btn-primary:hover {
    background-color: var(--couleur-primaire-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Bouton primaire — grand format (hero) */
.btn-primary--lg {
    padding: 1.1rem 2.25rem;
    font-size: var(--taille-lg);
}

/* Bouton secondaire — contour bleu */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-sm);
    padding: 0.875rem 1.75rem;
    background-color: transparent;
    color: var(--couleur-primaire);
    font-family: var(--police-principale);
    font-size: var(--taille-base);
    font-weight: var(--graisse-semibold);
    line-height: 1;
    border: 2px solid var(--couleur-primaire);
    border-radius: var(--rayon-complet);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-rapide),
                color var(--transition-rapide),
                transform var(--transition-rapide);
    white-space: nowrap;
}

.btn-secondary:hover {
    background-color: var(--couleur-primaire);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Bouton accent — jaune */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-sm);
    padding: 0.875rem 1.75rem;
    background-color: var(--couleur-accent);
    color: var(--couleur-texte);
    font-family: var(--police-principale);
    font-size: var(--taille-base);
    font-weight: var(--graisse-bold);
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--rayon-complet);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-rapide),
                transform var(--transition-rapide),
                box-shadow var(--transition-rapide);
    white-space: nowrap;
}

.btn-accent:hover {
    background-color: var(--couleur-accent-dark);
    color: var(--couleur-texte);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.40);
}

/* Bouton texte simple — sans fond */
.btn-texte {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-xs);
    color: var(--couleur-texte-secondaire);
    font-size: var(--taille-sm);
    font-weight: var(--graisse-medium);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-rapide);
}

.btn-texte:hover {
    color: var(--couleur-primaire);
}


/* =============================================================
   3. CLASSES UTILITAIRES — MISE EN PAGE
   ============================================================= */

/* Container centré standard */
.container {
    width: 100%;
    max-width: var(--largeur-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--espace-lg);
    padding-right: var(--espace-lg);
}

/* Container étroit — pour le contenu textuel */
.container-narrow {
    width: 100%;
    max-width: var(--largeur-etroite);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--espace-lg);
    padding-right: var(--espace-lg);
}

/* Container très étroit — pour les formulaires */
.container-xs {
    width: 100%;
    max-width: var(--largeur-tres-etroite);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--espace-lg);
    padding-right: var(--espace-lg);
}

/* Section standard */
.section-padding {
    padding-top: var(--espace-4xl);
    padding-bottom: var(--espace-4xl);
}

/* Section plus petite */
.section-padding--sm {
    padding-top: var(--espace-3xl);
    padding-bottom: var(--espace-3xl);
}

/* Section grise alternée */
.section-gris {
    background-color: var(--couleur-fond-gris);
}

/* Section bleu clair */
.section-bleu-clair {
    background-color: var(--couleur-primaire-light);
}

/* Section bleu foncé (CTA, footer) */
.section-bleu-fonce {
    background-color: var(--couleur-primaire);
    color: #FFFFFF;
}

/* Centrage de texte */
.texte-centre {
    text-align: center;
}


/* =============================================================
   3. CLASSES UTILITAIRES — TYPOGRAPHIE
   ============================================================= */

.titre-hero {
    font-size: clamp(var(--taille-3xl), 5vw, var(--taille-5xl));
    font-weight: var(--graisse-extrabold);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--couleur-texte);
}

.titre-section {
    font-size: clamp(var(--taille-2xl), 4vw, var(--taille-4xl));
    font-weight: var(--graisse-bold);
    line-height: 1.2;
    color: var(--couleur-texte);
}

.sous-titre {
    font-size: var(--taille-lg);
    font-weight: var(--graisse-normal);
    color: var(--couleur-texte-secondaire);
    line-height: 1.7;
}

.label-section {
    display: inline-block;
    padding: var(--espace-xs) var(--espace-md);
    background-color: var(--couleur-primaire-light);
    color: var(--couleur-primaire);
    font-size: var(--taille-sm);
    font-weight: var(--graisse-semibold);
    border-radius: var(--rayon-complet);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--espace-md);
}

.texte-accentue {
    color: var(--couleur-primaire);
}

.texte-accent-jaune {
    color: var(--couleur-accent);
}


/* =============================================================
   3. CLASSES UTILITAIRES — COMPOSANTS
   ============================================================= */

/* Carte */
.carte {
    background-color: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-xl);
    padding: var(--espace-xl);
    box-shadow: var(--ombre-sm);
    transition: box-shadow var(--transition-normale),
                transform var(--transition-normale);
}

.carte:hover {
    box-shadow: var(--ombre-lg);
    transform: translateY(-2px);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--espace-xs) var(--espace-sm);
    background-color: var(--couleur-fond-gris-2);
    color: var(--couleur-texte-secondaire);
    font-size: var(--taille-xs);
    font-weight: var(--graisse-semibold);
    border-radius: var(--rayon-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge--primaire {
    background-color: var(--couleur-primaire-light);
    color: var(--couleur-primaire);
}

.badge--accent {
    background-color: #FEF3C7;
    color: #92400E;
}

.badge--succes {
    background-color: #D1FAE5;
    color: #065F46;
}

/* Checkmark liste */
.liste-check {
    display: flex;
    flex-direction: column;
    gap: var(--espace-sm);
}

.liste-check li {
    display: flex;
    align-items: flex-start;
    gap: var(--espace-sm);
    font-size: var(--taille-base);
    color: var(--couleur-texte);
}

.liste-check li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310B981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 2px;
}

/* Séparateur */
.separateur {
    border: none;
    border-top: 1px solid var(--couleur-bordure);
    margin: var(--espace-2xl) 0;
}

/* Grille 3 colonnes */
.grille-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-xl);
}

/* Grille 2 colonnes */
.grille-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-xl);
}


/* =============================================================
   4. PERSONNALISATIONS KADENCE / ELEMENTOR
   ============================================================= */

/* Forcer la police Inter sur tout le site (override Kadence) */
body,
.kadence-post-loop,
.entry-content {
    font-family: var(--police-principale) !important;
}

/* Navigation Kadence — style votreia */
.site-header .kadence-navigation a {
    font-weight: var(--graisse-medium);
    color: var(--couleur-texte);
    transition: color var(--transition-rapide);
}

.site-header .kadence-navigation a:hover {
    color: var(--couleur-primaire);
}

/* Bouton CTA dans la navigation */
.site-header .btn-primary {
    margin-left: var(--espace-md);
}

/* Formulaires — style cohérent */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--police-principale);
    font-size: var(--taille-base);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    border: 1.5px solid var(--couleur-bordure);
    border-radius: var(--rayon-md);
    transition: border-color var(--transition-rapide),
                box-shadow var(--transition-rapide);
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

input::placeholder,
textarea::placeholder {
    color: var(--couleur-texte-clair);
}


/* =============================================================
   5. RESPONSIVE — MOBILE FIRST
   ============================================================= */

/* Tablette et en dessous (< 1024px) */
@media (max-width: 1024px) {
    .grille-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-padding {
        padding-top: var(--espace-3xl);
        padding-bottom: var(--espace-3xl);
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :root {
        --espace-4xl: 4rem;
        --espace-3xl: 3rem;
    }

    .grille-3,
    .grille-2 {
        grid-template-columns: 1fr;
    }

    .container,
    .container-narrow,
    .container-xs {
        padding-left: var(--espace-md);
        padding-right: var(--espace-md);
    }

    .section-padding {
        padding-top: var(--espace-2xl);
        padding-bottom: var(--espace-2xl);
    }

    .btn-primary,
    .btn-secondary,
    .btn-accent {
        width: 100%;
        justify-content: center;
    }

    .btn-primary--lg {
        padding: 1rem 1.75rem;
        font-size: var(--taille-base);
    }

    .titre-hero {
        letter-spacing: -0.015em;
    }
}