/* --- Réinitialisation et styles de base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Supprime les micro-espaces blancs marginaux */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.5;
}

/* --- Barre de navigation (Menu Rouge) --- */
.main-header {
    background-color: #d7000f;
    padding: 12px 15px; /* Marge réduite à gauche/droite */
    position: relative;
    z-index: 10;
}

.nav-menu {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.nav-menu a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
}

.nav-menu a:hover {
    text-decoration: underline;
}

.burger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.burger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
}

/* --- Section Image de Fond (Hero) --- */
.hero-section {
    background: url('batiment.jpg') no-repeat center center/cover;
    height: 50vh;
    position: relative;
    /* Ligne blanche supprimée ici (pas de border-bottom) */
}

.hero-container {
    max-width: 1400px; /* Élargissement global */
    margin: 0 auto;
    height: 100%;
    position: relative;
}

/* Cadre blanc K-LINE */
.badge-kline {
    position: absolute;
    bottom: 25px;
    right: 20px; /* Rapprochement du bord */
    background-color: #ffffff;
    padding: 12px 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.badge-kline img {
    height: 50px;
    display: block;
}

@font-face
{
font-family: Fontaj;
src: url(spartan.ttf);
}

/* --- LE BANDEAU GRIS (#404040) --- */
.gray-bar {
    background-color: #404040;
    color: #ffffff;
    padding: 15px 0; /* Gère la hauteur globale du bandeau */
}

.gray-bar-container {
    max-width: 1400px; /* Élargissement global */
    margin: 0 auto;
    padding: 0 20px; /* Marges réduites à gauche/droite */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Aligne le logo et le slogan sur le même axe vertical */
}

/* Le bloc rouge centré verticalement dans la zone grise */
.badge-red-branding {
    background-color: #d7000f;
    color: #ffffff;
    padding: 15px 35px;
    text-align: center;
    min-width: 240px;
	font-family:Fontaj;
}

.badge-red-branding h1 {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.badge-red-branding p {
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* Slogan d'accompagnement blanc à droite */
.bar-slogan {
    text-align: right;
}

.bar-slogan .slogan-top {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.bar-slogan .slogan-bottom {
    font-weight: bold;
    font-size: 1.1rem;
}

/* --- ZONE BLANCHE DU BAS --- */
.main-content {
    background-color: #ffffff;
    padding: 50px 0;
}

.content-container {
    max-width: 1400px; /* Élargissement global */
    margin: 0 auto;
    padding: 0 20px; /* Marges réduites à gauche/droite */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* Bloc de textes (gauche) */
.text-block {
    flex: 1;
}

.text-block h2 {
    color: #b3000c;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.text-block p {
    font-size: 1.05rem;
    color: #333333;
    margin-bottom: 10px;
}

.text-block .highlight-text {
    color: #0077b5;
}

/* Bloc logos (droite) */
.logos-block {
    display: flex;
    gap: 35px;
    align-items: center;
}

.logo-item {
    text-align: center;
    max-width: 120px;
}

.logo-item img {
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.logo-item span {
    font-size: 0.85rem;
    color: #444444;
    display: block;
    line-height: 1.2;
}



/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .nav-menu { display: none; }
    .burger-menu { display: flex; }
    
    .hero-section { height: 35vh; }
    
    .badge-kline {
        position: static;
        margin: 10px auto;
        text-align: center;
        width: fit-content;
    }

    .gray-bar-container {
        flex-direction: column;
        padding: 20px;
        text-align: center;
        gap: 15px;
    }

    .badge-red-branding {
        width: 100%;
    }

    .bar-slogan {
        text-align: center;
    }

    .content-container {
        flex-direction: column;
        padding: 20px;
    }

    .logos-block {
        margin-top: 30px;
        justify-content: center;
        width: 100%;
    }
}

/* --- DESIGN DE LA PAGE CONTACT --- */
.contact-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section haute : Plan et Infos */
.contact-top-section {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
    align-items: flex-start;
}

.contact-title-map {
    flex: 1;
    text-align: center;
}

.contact-main-title {
    color: #d7000f; /* Rouge identique à votre charte */
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
	    text-align: center;
}

/* --- NOUVEAU DESIGN DE CARTE (Correctif ratio) --- */

/* Le conteneur définit le ratio et annule les 20px de marge du parent */
.map-wrapper {
    position: relative;
    width: calc(100% + 40px); /* On élargit le bloc pour compenser les marges */
    margin-left: -20px;       /* On le décale de 20px vers la gauche */
    margin-right: -20px;      /* On le décale de 20px vers la droite */
    padding-bottom: 100%;   /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-top: 10px;
}

/* L'iframe s'adapte à 100% de ce conteneur */
.contact-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.contact-info-block {
    flex: 1;
    /* Aligne visuellement le texte avec le haut du plan */
    padding-top: 65px; 
}

.contact-info-block h3 {
    font-size: 1.3rem;
    color: #d7000f;
    margin-top: 20px;
    margin-bottom: 5px;
}

.contact-info-block p {
    font-size: 1.1rem;
    color: #333333;
    line-height: 1.4;
}

/* --- PAGE PRODUITS --- */
.products-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Texte introductif */
.products-intro {
    text-align: center;
    font-size: 1.1rem;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Menu de logos circulaires */
.products-menu-section {
    text-align: center;
    margin-bottom: 50px;
}

.menu-main-title {
    color: #d7000f; /* Rouge vif de la charte */
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.circular-menu-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

/* Style des boutons images */
.menu-logo-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    padding: 0;
    outline: none;
    transition: transform 0.2s;
}

.menu-logo-btn img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Rend vos images jpg parfaitement rondes */
    border: 5px solid #d7000f;
    object-fit: cover;
    margin-bottom: 10px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.menu-logo-btn span {
    font-size: 0.95rem;
    font-weight: bold;
    color: #d7000f;
    line-height: 1.2;
}

/* États au survol et actif */
.menu-logo-btn:hover img {
    box-shadow: 0 0 12px rgba(215, 0, 15, 0.4);
    transform: scale(1.05);
}

.menu-logo-btn.active img {
    border-color: #404040; /* Changement de couleur d'anneau pour repérer l'actif */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.menu-logo-btn.active span {
    color: #404040;
}

/* --- GRILLE DE LA GALERIE (5 COLONNES) --- */
.gallery-wrapper {
    min-height: 300px;
    position: relative;
    margin-bottom: 40px;
}

.products-columns-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colonnes égales sur grand écran */
    gap: 25px;
}

.product-card-item {
    background-color: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* Zone image avec sécurité débordement */
.img-zoom-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* Force un format carré propre pour harmoniser la grille */
    overflow: hidden;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
}

.product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.product-card-item:hover .product-thumb {
    transform: scale(1.06); /* Léger effet dynamique sur l'image au survol */
}

/* Typographies de la carte */
.product-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 5px;
    line-height: 1.3;
}

.product-card-info {
    font-size: 0.95rem;
    font-style: italic;
    color: #666666;
}

/* Éléments utilitaires */
.loader {
    text-align: center;
    font-size: 1.2rem;
    font-style: italic;
    color: #999999;
    padding: 50px 0;
}

.error-msg, .no-data-msg {
    text-align: center;
    font-size: 1.1rem;
    color: #666666;
    padding: 40px 0;
}

/* --- RESPONSIVE DE LA GRILLE --- */
@media (max-width: 1200px) {
    .products-columns-grid { grid-template-columns: repeat(3, 1fr); } /* 3 colonnes sur tablette */
}

@media (max-width: 768px) {
    .products-columns-grid { grid-template-columns: repeat(2, 1fr); } /* 2 colonnes sur petit écran */
    .circular-menu-grid { gap: 15px; }
    .menu-logo-btn { width: 90px; }
    .menu-logo-btn img { width: 75px; height: 75px; }
}

@media (max-width: 480px) {
    .products-columns-grid { grid-template-columns: 1fr; } /* 1 seule colonne sur smartphone */
}

/* --- Style pour les liens de contact (téléphone et email) --- */
.phone-link a, .email-link a {
    color: #333333;          /* Garde la couleur du texte d'origine */
    text-decoration: none;   /* Supprime le soulignement automatique */
    font-weight: bold;
}

/* Optionnel : change la couleur au survol sur PC */
.phone-link a:hover, .email-link a:hover {
    color: #d7000f;          /* Devient rouge au survol */
    text-decoration: underline;
}

/* --- STRUCTURE DU FORMULAIRE --- */
.contact-form {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-top: 30px;
}

.form-left-col {
    flex: 1.2;
}

.form-right-col {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 10px;
}

/* Groupes de champs (Label + Input à droite) */
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-group label {
    width: 220px; /* Aligne verticalement tous les inputs */
    font-size: 1.2rem;
    font-weight: bold;
    color: #000000;
    padding-right: 15px;
}

.form-group input {
    flex: 1;
    padding: 10px;
    font-size: 1.1rem;
    border: 1px solid #999999;
    border-radius: 0; /* Garde le style rectangulaire de la maquette */
}

/* Zone de texte */
.textarea-group {
    margin-top: 25px;
}

.textarea-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 1.2rem;
    font-style: italic;
    border: 1px solid #999999;
    resize: vertical;
}

/* Options radio (Boutons d'options) */
.radio-section {
    margin-bottom: 40px;
}

.radio-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000000;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
}

.radio-label input[type="radio"] {
    transform: scale(1.3); /* Agrandit légèrement les ronds pour le confort visuel */
    cursor: pointer;
}

/* Bouton envoyer rouge avec relief (dégradé) de la maquette */
.btn-submit-red {
    background: linear-gradient(to bottom, #ff0000, #cc0000);
    color: #ffffff;
    border: 1px solid #aa0000;
    padding: 15px 40px;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: flex-end; /* Aligne le bouton à droite de sa colonne */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.1s, box-shadow 0.1s;
    min-width: 200px;
}

.btn-submit-red:hover {
    background: linear-gradient(to bottom, #ff1a1a, #e60000);
}

.btn-submit-red:active {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.icon-send {
    transform: rotate(-20deg); /* Légère inclinaison de la flèche en papier */
}

/* Limitation de la taille et ombre portée sur les photos de réalisations */
/* Ombre portée prononcée sur les photos de réalisations */
.realisation-img {
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 10px 10px 20px rgba(0, 0, 0, 0.4); /* Ombre beaucoup plus sombre et large */
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet au survol */
.realisation-img:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); /* Encore plus prononcé au survol */
}

/* --- ADAPTATION MOBILE (Responsive) --- */
@media (max-width: 900px) {
    .contact-top-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .contact-info-block {
        padding-top: 0;
    }

    .contact-form {
        flex-direction: column;
        gap: 30px;
    }

    .form-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .form-group label {
        width: 100%;
    }

    .btn-submit-red {
        width: 100%; /* Le bouton prend toute la largeur sur mobile */
        align-self: center;
    }
	
	.nav-menu.active {
        display: flex !important;
        flex-direction: column;
        background-color: #d7000f; /* Garde le fond rouge du menu sur mobile */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px;
        gap: 15px;
    }
	.map-wrapper {
        width: 100%;      /* Reprend la largeur normale sur mobile */
        margin-left: 0;   /* Annule le décalage */
        margin-right: 0;
        border: 1px solid #ccc;
    }
}
/* --- LE STYLE DU PLEIN ÉCRAN (LIGHTBOX) --- */
.lightbox {
    display: none; /* Invisible par défaut */
    position: fixed;
    z-index: 9999; /* S'affiche par-dessus absolument tout */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Fond noir transparent à 90% */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

/* Classe activée par JavaScript pour ouvrir la fenêtre */
.lightbox.open {
    display: flex;
}

/* La grande photo au centre */
.lightbox img {
    max-width: 90%;
    max-height: 80vh; /* Empêche l'image de dépasser de l'écran en hauteur */
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    animation: zoomEffect 0.2s ease-out; /* Petit effet d'ouverture fluide */
}

/* Le bouton de fermeture (la croix) */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: #d7000f; /* La croix devient rouge au survol */
}

/* La légende sous la grande photo */
#lightbox-caption {
    color: #ffffff;
    text-align: center;
    margin-top: 15px;
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 80%;
}

/* Petite animation d'apparition douce pour l'image */
@keyframes zoomEffect {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- LE FOOTER GLOBAL --- */
.main-footer {
    background-color: #404040; /* Même gris anthracite que le bandeau du haut */
    color: #ffffff;
    padding: 25px 0;
    margin-top: auto; /* Aide à pousser le footer en bas si la page est courte */
    border-top: 3px solid #d7000f; /* Rappel de la ligne rouge corporate */
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.footer-container a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-container a:hover {
    color: #d7000f; /* Le lien devient rouge au survol */
    text-decoration: underline;
}

/* Ajustement mobile pour le footer */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Modification ciblée pour mobile */
@media screen and (max-width: 600px) {
    .badge-red-branding {
        /* On réduit l'échelle de l'élément à 60% de sa taille originale */
        transform: scale(0.6);
        transform-origin: top center;
        /* On retire la marge excédentaire que la transformation laisse vide */
        margin: -20px 0; 
    }
    
    /* Optionnel : si vous voulez aussi réduire le slogan juste en dessous */
    .bar-slogan {
        font-size: 0.8rem;
        padding-top: 10px;
    }
}