/* ==========================================================================
   1. VARIABLES & CONFIGURATION GLOBALE
   ========================================================================== */
:root {
    /* Couleurs de la charte graphique RCA Zenkai */
    --primary-blue: #4161af;
    --primary-orange: #f18918;
    --dark: #2a2929;
    --light: #ffffff;
    --gray-bg: #f4f4f4;
    --bg-light: #f6f9fc;
    
    /* Typographies (définies via Google Fonts dans le HTML) */
    --font-main: 'Montserrat', sans-serif;
    --font-title: 'Montserrat', bold;
}

/* Reset CSS de base pour éviter les marges par défaut des navigateurs */
html, body, p, h1, h2, h3, h4, ul, li, figure {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base du document */
body {
    font-family: var(--font-main);
    color: var(--dark);
    line-height: 1.6;
    background-color: var(--light);
}

h3 {
   color: var(--primary-orange);
}


/* ==========================================================================
   2. STRUCTURE PRINCIPALE
   ========================================================================== */

/* Conteneur principal : limite la largeur sur grand écran et centre le tout */
main {
    max-width: 1200px;
    margin: 0 auto; /* Centrage horizontal automatique */
    padding: 0 5%;  /* Marges intérieures pour que le texte ne touche pas les bords sur mobile */
}


/* ==========================================================================
   3. EN-TÊTE (HEADER) & NAVIGATION
   ========================================================================== */
header {
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between; /* Sépare le logo à gauche et les actions à droite */
    align-items: center; /* Centre verticalement les éléments */
    border-bottom: 2px solid var(--primary-blue);
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petit écran */
    gap: 1rem;
}

/* Logo de l'en-tête */
.logo {
    max-height: 150px;
    width: auto;
    clip-path: inset(20% 0% 20% 0%); /* Rogne le haut et le bas de l'image si nécessaire */
    transform: scale(1.4);
}

/* Conteneur des boutons/liens à droite */
.header-actions {
    display: flex;
    align-items: center;
}

/* Texte "Uniquement sur rendez-vous" */
.phone-link {
    text-align: right;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

.phone-label {
    font-size: 1.2rem;
    color: var(--primary-blue);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Bouton d'appel mobile et bureau */
.btn-call-mobile {
    background-color: var(--primary-blue);
    color: var(--light);
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre l'icône SVG et le texte */
    transition: transform 0.2s, background-color 0.2s; /* Animation fluide au survol */
    font-size: 1rem;
    white-space: nowrap; /* Empêche le texte du bouton de se couper sur 2 lignes */
}

.btn-call-mobile:hover {
    transform: scale(1.05); /* Effet de grossissement */
    background-color: var(--primary-orange);
}


/* ==========================================================================
   4. SECTIONS PRINCIPALES (HERO & À PROPOS)
   ========================================================================== */

/* Section de présentation (Image + Texte) */
.hero {
    padding: 4rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes de taille égale */
    gap: 2rem;
    align-items: center;
}

.hero h1 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.hero span { 
    color: var(--primary-orange); /* Mise en évidence des mots-clés */
}

.hero-img img { 
    width: 100%; 
    max-width: 500px; /* Évite que l'image devienne trop géante sur grand écran */
    border-radius: 8px; 
    display: block;
    margin: 0 auto;
}

/* Surcharge de la classe hero pour la section À propos */
#propos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px; /* C'est ici que tu gères l'espacement exact entre logo et texte */
    max-width: 900px; /* Empêche le texte de trop s'étirer sur grand écran */
    margin: 0 auto; /* Centre tout le bloc proprement */
}

/* Pour que ça reste propre sur mobile (logo au-dessus du texte) */
@media (max-width: 768px) {
    #propos {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* ==========================================================================
   5. GRILLE DES SERVICES
   ========================================================================== */
.services {
    padding: 3rem 5%;
    background: var(--gray-bg);
    text-align: center;
    border-radius: 16px;
}

/* Grille adaptative : s'ajuste automatiquement selon la largeur disponible */
.services-grid {
    display: grid;
    /* Crée autant de colonnes que possible (min 250px de large) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-card {
    background: var(--light);
    padding: 2rem;
    border-radius: 12px;
    border-bottom: 4px solid var(--primary-orange);
    transition: transform 0.3s; /* Animation fluide */
}

.service-card:hover { 
    transform: translateY(-10px); /* La carte se soulève au survol */
}


/* ==========================================================================
   6. PIED DE PAGE (FOOTER)
   ========================================================================== */
footer {
    background: var(--dark);
    color: var(--light);
    padding: 3rem 5% 1rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Les éléments passent à la ligne si manque de place */
    gap: 2rem; 
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.footer-info h4 {
    color: var(--primary-orange);
    margin-bottom: 0.5rem;
}

/* Liens légaux empilés verticalement */
.legal-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Style commun à tous les liens du footer */
.legal-links a, 
.social-links a, 
.signature a {
    color: var(--light);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.legal-links a:hover, 
.social-links a:hover, 
.signature a:hover {
    color: var(--primary-orange);
}

/* Réseaux sociaux */
.socials p {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.social-links {
    display: flex;
    gap: 1rem; /* Espace entre Instagram et TikTok */
}

/* Ligne de copyright et crédits */
.signature {
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid #333; /* Ligne de séparation subtile */
    padding-top: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}


/* Style du lien d'adresse dans le footer */
.address-link {
    color: var(--light);
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
    line-height: 1.4;
}

.address-link:hover {
    color: var(--primary-orange);
}

/* ==========================================================================
   7. ANIMATIONS 2D / 3D
   ========================================================================== */

/* Rotation 3D continue */
@keyframes flip-y {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.logo-flip { 
    width: 180px;       /* Force la largeur */
    height: 180px;      /* Force la hauteur pour faire un carré */
    object-fit: cover;  /* L'astuce magique : coupe les bords au lieu de déformer l'image */
    animation: flip-y 5s ease-in-out infinite; 
    will-change: transform;
}


/* ==========================================================================
   8. RESPONSIVE DESIGN (Mobiles & Tablettes)
   ========================================================================== */
/* Toutes les modifications pour les écrans inférieurs à 768px sont ici */
@media (max-width: 768px) {
    
    /* --- Header --- */
    header {
        justify-content: center;
        text-align: center;
    }
    .phone-link {
        display: none; /* Cache le texte "Uniquement sur RDV" pour gagner de la place */
    }

    /* --- Sections Hero --- */
    .hero { 
        grid-template-columns: 1fr; /* Passe de 2 colonnes à 1 seule colonne */
        text-align: center; 
        padding: 2rem 0;
    }
    .hero h1 {
        font-size: 2rem; /* Réduit la taille du titre */
    }
    .propos-logos {
        flex-direction: column; /* Empile les logos verticalement */
        align-items: center;
    }

    /* --- Footer --- */
    .footer-content {
        flex-direction: column; /* Empile toutes les colonnes du footer */
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    .social-links {
        justify-content: center; /* Centre les liens des réseaux sociaux */
    }
}

/* ==========================================================================
   PAGE TARIFS (Style "Tableau Léger")
   ========================================================================== */
.page-tarif {
    max-width: 900px; /* Plus étroit pour une meilleure lisibilité des lignes */
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.hero-tarif {
    text-align: center;
    margin-bottom: 4rem;
}

.hero-tarif h1 {
    font-family: var(--font-title);
    color: var(--primary-blue);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.pricing-container {
    display: flex;
    flex-direction: column;
    gap: 3.5rem; /* Grand espace aéré entre les catégories */
}

/* Titres de sections (Diag, Serrurerie...) */
.pricing-category h3 {
    color: var(--primary-orange);
    font-family: var(--font-title);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-blue);
    display: inline-block; /* Le soulignement s'arrête à la fin du texte */
}

/* Ligne d'un tarif (Le "tableau" soft) */
.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #eaeaea; /* Trait très fin et gris clair */
    transition: background-color 0.2s;
}

.pricing-row:hover {
    background-color: var(--bg-light); /* Feedback subtil au passage de la souris */
}

/* Bloc texte de la prestation */
.pricing-details {
    flex: 1;
    padding-right: 2rem; /* Sépare bien le texte du prix */
}

.pricing-details h4 {
    color: var(--dark);
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.pricing-details p {
    font-size: 0.9rem;
    color: #666; /* Gris doux pour les descriptions annexes */
    margin: 0;
}

/* Bloc Prix */
.pricing-price {
    font-weight: bold;
    color: var(--primary-blue);
    font-size: 1.1rem;
    white-space: nowrap; /* Empêche le prix d'être coupé sur deux lignes */
    text-align: right;
}

/* ==========================================================================
   RESPONSIVE PAGE TARIFS
   ========================================================================== */
/* À placer dans ta media query existante ou à ajouter à la fin de ton fichier */
@media (max-width: 600px) {
    .pricing-row {
        flex-direction: column; /* Empile le texte et le prix sur mobile */
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .pricing-price {
        text-align: left;
        color: var(--primary-orange); /* Fait ressortir le prix sur fond clair sur mobile */
    }
    
    .pricing-details {
        padding-right: 0;
    }
}

/* Bloc "Uniquement sur rendez-vous" */
.appointment-notice {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--bg-light);
    border-radius: 8px;
    border-left: 4px solid var(--primary-orange);
    
    /* Flexbox pour centrer le contenu et gérer l'espacement */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; 
    text-align: center;
}

.appointment-notice p {
    font-size: 1.1rem;
    color: var(--dark);
    margin: 0;
}

.appointment-notice span {
    color: var(--primary-blue);
    font-weight: bold;
    text-transform: uppercase;
}

/* Bouton d'appel spécifique à la page tarif */
.btn-call-tarif {
    background-color: var(--primary-blue);
    color: var(--light);
    padding: 12px 30px;
    border-radius: 50px; /* Bords plus arrondis pour un style "Call to Action" */
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, background-color 0.2s;
    font-size: 1.1rem;
}

.btn-call-tarif:hover {
    transform: scale(1.05);
    background-color: var(--primary-orange);
}