/* =========================================
   1. VARIABLES & CONFIGURATION
   ========================================= */
:root {
    /* Palette de couleurs "Corporate Minimaliste" */
    --primary: #0F172A;       /* Bleu Nuit - Titres & éléments principaux */
    --primary-light: #1E293B; /* Variante plus claire */
    --secondary: #B78D65;     /* Doré/Beige - Accents & Call to Action */
    --light: #F8FAFC;         /* Fond très clair */
    --dark: #1E293B;          /* Texte principal */
    --gray: #64748B;          /* Texte secondaire */
    --light-gray: #F1F5F9;    /* Bordures et fonds secondaires */
}

/* =========================================
   2. BASES & TYPOGRAPHIE
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    color: var(--dark);
    background-color: white;
    line-height: 1.7; /* Aéré pour une meilleure lisibilité */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif; /* Élégance pour les titres */
    color: var(--primary);
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* =========================================
   3. COMPOSANTS
   ========================================= */

/* Bouton Principal (CTA) */
.btn-primary {
    background-color: var(--primary);
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
    font-weight: 500;
    /* Note : Le padding et le radius sont gérés par Tailwind dans le HTML, 
       mais peuvent être ajoutés ici si vous voulez standardiser */
}

.btn-primary:hover {
    background-color: var(--secondary);
    transform: translateY(-2px); /* Légère remontée au survol */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =========================================
   4. UTILITAIRES DE COULEUR
   ========================================= */
.text-secondary {
    color: var(--secondary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-light {
    background-color: var(--light);
}

.border-light {
    border-color: rgba(241, 245, 249, 0.5);
}

/* =========================================
   5. ANIMATIONS & EFFETS
   ========================================= */

/* Transition fluide générique */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de survol simple (utilisé sur l'accueil) */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
    transform: translateY(-5px);
}

/* Effet avancé pour les cartes (Offres & Services) */
.card-hover {
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Prépare la bordure pour éviter le saut */
}

.card-hover:hover {
    transform: translateY(-5px);
    border-color: rgba(183, 141, 101, 0.3); /* Bordure subtilement dorée */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* Effet de cadre décoratif (Optionnel pour les images design) */
.image-frame {
    position: relative;
}
.image-frame::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    border: 2px solid var(--secondary);
    z-index: -1;
    transition: all 0.3s ease;
}
.group:hover .image-frame::after {
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
}