/* ==========================================================================
   1. RESET & VARIABLES GLOBALES
   ========================================================================== */
:root {
    --color-primary: #1c1c1c;       
    --color-secondary: #ffffff;     
    --color-accent: #e30613;        
    --color-accent-hover: #bc050f;  
    --color-bg-light: #f9f9f9;      
    --color-text-dark: #1c1c1c;     
    --color-text-muted: #8c8c8c;    
    --font-headings: 'Archivo', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --container-max-width: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-secondary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. TYPOGRAPHIE & UTILITAIRES
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--font-headings);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}
p { margin-bottom: 1.2rem; color: #333; }
.container { width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: 0 2rem; }
.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-secondary) !important; }
.text-muted { color: var(--color-text-muted); }
.max-w-700 { max-width: 700px; margin: 0 auto 3rem auto; }
.section-title-wrapper { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.section-title { font-size: 2.25rem; margin-bottom: 2rem; position: relative; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; }
.grid-2-align { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; align-items: center; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

/* Boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.9rem 2rem; font-family: var(--font-headings); font-weight: 700;
    text-transform: uppercase; text-decoration: none; border-radius: 4px;
    transition: var(--transition-smooth); cursor: pointer; font-size: 0.95rem;
}
.btn-phone { background-color: var(--color-primary); color: var(--color-secondary); border: 1px solid rgba(255,255,255,0.1); }
.btn-phone:hover { background-color: var(--color-accent); color: var(--color-secondary); }

/* ==========================================================================
   3. STRUCTURE HEADER
   ========================================================================== */
.site-header {
    background-color: var(--color-secondary); border-bottom: 1px solid #eef0f2;
    position: sticky; top: 0; z-index: 1000; height: 80px; display: flex; align-items: center;
}
.header-container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.site-logo { height: 120px; width: auto; display: block; }
.main-navigation .nav-links { display: flex; list-style: none; gap: 2.5rem; }
.main-navigation .nav-links a {
    text-decoration: none; color: var(--color-text-dark); font-family: var(--font-headings);
    font-weight: 700; font-size: 0.9rem; text-transform: uppercase; transition: var(--transition-smooth);
}
.main-navigation .nav-links a:hover { color: var(--color-accent); }

/* ==========================================================================
   4. SECTION HERO (RÉALISME INDUSTRIEL & PANORAMIQUE)
   ========================================================================== */
.hero-section {
    position: relative; background-color: #1A1A1A; padding: 10rem 0 8rem 0;
    color: var(--color-secondary); overflow: hidden;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 26, 26, 0.85); z-index: 1;
}

/* 1. LA GRILLE : L'image prend 60% de l'espace et on étire les deux colonnes (stretch) */
.hero-grid-layout { 
    position: relative; z-index: 2; display: grid; 
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 4rem; align-items: stretch; 
}

/* 2. LE TEXTE : Géré en Flexbox pour s'aligner dynamiquement */
.hero-content-block { 
    display: flex; flex-direction: column; justify-content: center; padding: 0;
}
.hero-content-block h1 { 
    font-size: 3.3rem; line-height: 1.1; font-weight: 900; 
    margin-top: 0; margin-bottom: 1.5rem; color: #FFFFFF; 
}
.hero-paragraph { 
    font-size: 1.2rem; color: #E2E8F0; max-width: 580px; 
    margin-bottom: 3rem; line-height: 1.5; 
}

/* Les Boutons */
.hero-cta-group { display: flex; gap: 1.5rem; }
.btn-hero-heavy {
    background-color: var(--color-accent); color: var(--color-secondary); padding: 1.2rem 2.5rem;
    font-family: var(--font-headings); font-weight: 800; letter-spacing: 0.05em; text-decoration: none;
    transition: var(--transition-smooth); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn-hero-heavy:hover { background-color: var(--color-accent-hover); transform: translateY(-2px); }
.btn-hero-secondary {
    background-color: transparent; color: var(--color-secondary); padding: 1.2rem 2.5rem;
    font-family: var(--font-headings); font-weight: 800; letter-spacing: 0.05em; text-decoration: none;
    border: 2px solid var(--color-secondary); transition: var(--transition-smooth);
}
.btn-hero-secondary:hover { background-color: var(--color-secondary); color: #1A1A1A; }

/* 3. L'IMAGE : Cadre bord à bord à 100% de la hauteur */
.hero-visual-block { display: flex; width: 100%; justify-content: flex-end; }
.hero-heavy-frame {
    position: relative; width: 100%; max-width: 100%; 
    height: 100%; /* S'adapte parfaitement à la hauteur du bloc texte */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); 
    border: none; border-radius: 6px; 
    margin-top: 0; overflow: hidden;
}

/* On centre la focale (80%) sur le camion et le pont pour ne pas avoir que du ciel */
.hero-main-img { 
    width: 100%; height: 100%; object-fit: cover; 
    object-position: center 80%; 
}

.hero-location-tag {
    position: absolute; top: 15px; right: 15px; background-color: rgba(26, 26, 26, 0.9);
    color: var(--color-secondary); font-family: var(--font-headings); font-weight: 700;
    font-size: 0.75rem; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem;
}

/* ==========================================================================
   5. SECTION CONCEPT
   ========================================================================== */
.section-concept { padding: 7rem 0; background-color: var(--color-secondary); }
.text-highlight { font-size: 1.2rem; font-weight: 600; color: var(--color-primary); margin-bottom: 1.5rem; }
.welcome-box { border-left: 4px solid var(--color-accent); padding-left: 1.5rem; margin-top: 2rem; font-style: italic; }
.concept-image-wrapper { display: flex; align-items: center; justify-content: center; }
.image-card { width: 100%; height: 450px; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); position: relative; }
.image-caption {
    position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(28,28,28,0.9);
    color: var(--color-secondary); padding: 1rem 1.5rem; font-size: 0.85rem; text-transform: uppercase; font-weight: 600;
}

/* ==========================================================================
   6. SECTION PRESTATIONS (EX-SECTEURS)
   ========================================================================== */
#prestations, .section-secteurs { background-color: #FFFFFF !important; padding: 6rem 0; color: #1A1A1A !important; }
#prestations h2.section-title { color: #1A1A1A !important; margin-bottom: 0.5rem; }
#prestations p, #prestations .text-muted { color: #4A5568 !important; }
.secteurs-header { border-bottom: none !important; padding-bottom: 0; margin-bottom: 4rem; }
.secteur-item { position: relative; padding-top: 4rem !important; border-top: none !important; }
#prestations .secteur-num {
    font-family: var(--font-headings); font-size: 3.5rem; font-weight: 900;
    color: #FFA3A8 !important; position: absolute; top: 0 !important; left: 0; line-height: 1; z-index: 1;
}
#prestations .secteur-item h3 { font-size: 1.25rem; margin-bottom: 1rem; color: #1A1A1A !important; text-transform: uppercase; position: relative; z-index: 2; }

/* ==========================================================================
   7. SECTION PROJETS MAJEURS (NOUVEAU)
   ========================================================================== */
.section-projets {
    padding: 7rem 0;
    background-color: #1A1A1A;
    color: var(--color-secondary);
}
.project-featured-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #2D3748;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.project-content {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.project-badge {
    display: inline-block;
    color: var(--color-accent);
    font-family: var(--font-headings);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.project-content h3 {
    font-size: 2rem;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
}
.project-content p {
    color: #E2E8F0;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}
.btn-project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-secondary);
    text-decoration: none;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.3rem;
    align-self: flex-start;
    transition: var(--transition-smooth);
}
.btn-project-link:hover {
    color: var(--color-accent);
}
.project-image {
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

/* ==========================================================================
   8. SECTION AVANTAGES
   ========================================================================== */
.section-avantages { padding: 7rem 0; background-color: var(--color-bg-light); }
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.advantage-card { background-color: var(--color-secondary); padding: 3rem 2rem; border-radius: 4px; border: 1px solid #eef0f2; transition: var(--transition-smooth); }
.advantage-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-color: rgba(227, 6, 19, 0.2); }
.card-icon { font-size: 2rem; color: var(--color-accent); margin-bottom: 1.5rem; }
.advantage-card h3 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--color-primary); }
.advantage-card p { font-size: 0.95rem; color: #555; margin-bottom: 0; }

/* ==========================================================================
   9. SECTION ÉQUIPE (DESIGN TROIS CARTES)
   ========================================================================== */
.section-expert {
    padding: 7rem 0;
    background-color: var(--color-secondary);
}

.team-grid {
    display: grid;
    /* On passe à 4 colonnes pour aligner toute l'équipe sur la même ligne */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem; /* Gap légèrement réduit pour aérer les 4 cartes */
    margin-top: 3rem;
}

.team-card {
    background-color: var(--color-bg-light);
    border: 1px solid #eef0f2;
    border-radius: 6px;
    overflow: hidden;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(227, 6, 19, 0.3);
}

.team-image-wrapper {
    position: relative;
    width: 100%;
    /* On réduit la hauteur de l'image (anciennement 380px) pour conserver de belles proportions sur une carte plus fine */
    height: 300px; 
    overflow: hidden;
    background-color: #1A1A1A;
}

.team-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: var(--transition-smooth);
}

.expert-placeholder {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f9f9f9;
}

.team-card:hover .team-image {
    transform: scale(1.04);
}

.team-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    font-family: var(--font-headings);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-left: 3px solid var(--color-accent);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.team-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.team-info h3 {
    font-size: 1.35rem;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.team-role {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.team-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.team-certif {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #eef0f2;
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 0.8rem;
    color: #2D3748;
    align-self: flex-start;
}

.team-certif i {
    color: #d69e2e; /* Couleur Or/médaille */
    font-size: 1rem;
}

/* ==========================================================================
   10. SECTION GALERIE
   ========================================================================== */
.section-galerie { padding: 7rem 0; background-color: var(--color-bg-light); }
.masonry-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gallery-item { position: relative; height: 280px; overflow: hidden; border-radius: 4px; cursor: pointer; background-color: var(--color-primary); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.gallery-hover {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(227, 6, 19, 0.85); display: flex; align-items: center;
    justify-content: center; color: var(--color-secondary); font-size: 1.5rem; opacity: 0; transition: var(--transition-smooth);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover .gallery-hover { opacity: 1; }

/* ==========================================================================
   11. SECTION CONTACT & FORMULAIRE
   ========================================================================== */
.section-contact { padding: 7rem 0; background-color: var(--color-secondary); }
.contact-info-panel h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.cta-box-highlight { background-color: var(--color-primary); color: var(--color-secondary); padding: 2rem; border-radius: 4px; margin: 2rem 0; }
.cta-box-highlight h3 { color: var(--color-accent); font-size: 1.2rem; margin-bottom: 0.5rem; }
.cta-box-highlight p { color: #cbd5e0; margin-bottom: 0; font-size: 0.95rem; }
.contact-channels { display: flex; flex-direction: column; gap: 1.5rem; }
.channel-item { display: flex; align-items: center; gap: 1.5rem; }
.channel-icon {
    width: 50px; height: 50px; background-color: var(--color-bg-light); border-radius: 50px;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--color-accent);
}
.channel-item span { display: block; font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; }
.channel-item .link-bold { font-family: var(--font-headings); font-size: 1.3rem; font-weight: 800; color: var(--color-primary); text-decoration: none; }
.modern-form { background-color: var(--color-bg-light); padding: 3rem; border-radius: 4px; border: 1px solid #eef0f2; }
.form-group { margin-bottom: 1.5rem; }
.grid-form-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.modern-form label { display: block; font-family: var(--font-headings); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 0.5rem; }
.modern-form input, .modern-form textarea {
    width: 100%; padding: 0.85rem 1rem; border: 1px solid #cbd5e0; background-color: var(--color-secondary);
    font-family: var(--font-body); font-size: 0.95rem; border-radius: 4px; transition: var(--transition-smooth);
}
.modern-form input:focus, .modern-form textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.1); }
.btn-submit { width: 100%; background-color: var(--color-accent); color: var(--color-secondary); border: none; padding: 1rem; gap: 0.5rem; }
.btn-submit:hover { background-color: var(--color-accent-hover); }

/* ==========================================================================
   12. PIED DE PAGE (FOOTER)
   ========================================================================== */
.site-footer { background-color: #333131; color: #cbd5e0; padding: 5rem 0 3rem 0; border-top: 3px solid var(--color-accent); font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; }
.site-footer p { color: #E2E8F0; }
.footer-logo { height: 120px; width: auto; margin-bottom: 1.5rem; }
.site-footer h4 { color: var(--color-secondary); font-size: 1rem; margin-bottom: 1.5rem; }
.footer-nav ul { list-style: none; }
.footer-nav ul li { margin-bottom: 0.75rem; }
.footer-nav ul a { color: #cbd5e0; text-decoration: none; transition: var(--transition-smooth); }
.footer-nav ul a:hover { color: var(--color-accent); }

/* ==========================================================================
   13. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* --- TABLETTES (Max 1024px) --- */
@media (max-width: 1024px) {
    .grid-2, .grid-2-align, .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cards { grid-template-columns: repeat(2, 1fr); }
    .hero-section h1 { font-size: 2.75rem; }
    .project-featured-card { grid-template-columns: 1fr; }
    .project-image { min-height: 300px; }
    .project-content { padding: 3rem; }
    .expert-frame { height: 400px; }
    
    /* Sur tablette : 2 colonnes pour l'équipe */
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .team-image-wrapper { height: 350px; }
}

/* --- MOBILES (Max 768px) --- */
@media (max-width: 768px) {
    .main-navigation { display: none; }
    
    /* Ajustement de l'en-tête et du bouton téléphone */
    .site-header { height: 70px; }
    .site-logo { height: 80px; }
    .header-cta .btn-phone { padding: 0.6rem 1rem; font-size: 0.85rem; }

    /* TOUT passe sur 1 seule colonne (Solution au problème d'écrasement) */
    .grid-4, .grid-cards, .masonry-gallery, .grid-form-2, .team-grid { 
        grid-template-columns: 1fr; 
        gap: 1.5rem; 
    }
    
    .hero-section { padding: 6rem 0; }
    .hero-section h1 { font-size: 2.2rem; }
    
    /* Boutons de la section Hero empilés proprement */
    .hero-cta-group { flex-direction: column; gap: 1rem; }
    .btn-hero-heavy, .btn-hero-secondary { width: 100%; text-align: center; }
    
    .project-content { padding: 2rem; }
    .modern-form { padding: 1.5rem; }
    .section-title { font-size: 1.75rem; }
    .expert-badge-experience { right: 0; bottom: -10px; }
    
    /* Hauteur d'image adaptée pour 1 colonne sur mobile */
    .team-image-wrapper { height: 320px; }
}