/* --- Variables & Reset --- */
:root {
    --primary-orange: #B94F23;
    --bg-cream: #FDF5E6;
    --bg-white: #FFFFFF;
    --bg-gray-placeholder: #CCCCCC;
    --bg-darkgrey: #333333;
	--bg-dark: #000000;
	--text-grey: #CCCCCC;
	--text-dark: #333333;
	--text-black: #000000;
    --text-light: #FFFFFF;
    --text-orange-logo: #Ef8733;
    --logo-bg: #E0E0E0;
    
    --container-max-width: 1200px;
    --spacing-section: 30px;
 /* Polices */
    --font-title: 'Montserrat', sans-serif; /* Montserrat Bold pour les titres */
    --font-body: 'Roboto Condensed', sans-serif; /* Gotham pour le reste */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
	font-size: 1.2rem;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
}

/* --- Typographie Globale --- */
h2 {
    font-family: var(--font-title);
	font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--text-dark);
}

h3 {
	font-family: var(--font-title);
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--primary-orange);
}

p {
    margin-bottom: 10px;
}

a {
    display: inline-block;
    color: var(--text-orange-logo);
    text-decoration: none;
    font-weight: bold;
}

.content-wrapper {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

/* --- Header --- */
header {
    background-color: var(--bg-dark);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-icon {
    width: 200px;
    height: 111px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--text-dark);
    border-radius: 4px;
}

/* Navigation Links (Desktop) */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links li a {
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
}

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

/* Hamburger Icon (Hidden on Desktop) */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--text-light);
    border-radius: 2px;
}

/* --- Section Hero / Bandeau Fixe --- */
#hero-video {
    position: relative;
    width: 100%;
	 /* pour la video */
	height: auto;       /* CHANGÉ : La hauteur s'adapte à la vidéo */
    min-height: auto;   /* CHANGÉ : Suppression de la hauteur min */
    max-height: none;   /* CHANGÉ : Suppression de la hauteur max */

    /* pour la photo */
    /* height: 40vh;     */  /* Hauteur relative : 40% de l'écran */
    /* min-height: 300px; */ /* Hauteur minimum garantie (même sur mobile) */
    /* max-height: 500px; */ /* Hauteur max pour ne pas prendre tout l'écran sur PC */
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-white);
}

.hero-banner-container {
    width: 100%;
    height: 100%; /* Le conteneur prend toute la hauteur de la section */
}

.hero-static-img {
    width: 100%;
    height: 100%;        /* FORCE l'image à remplir toute la hauteur (supprime le blanc) */
    object-fit: cover;   /* L'image zoome pour remplir la zone sans être écrasée */
    object-position: left center; /* On cale l'image à GAUCHE. C'est donc la DROITE qui sera coupée */
    display: block;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit la zone sans distorsion */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

/* --- Section Intro & Logo --- */
#intro, #teotihuacan {
    background-color: var(--bg-white);
    padding-bottom: var(--spacing-section);
}

.main-logo {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #555;
}

.intro-text {
}

ul.intro-text {
    padding-left: 40px;
    list-style-position: outside;
    list-style-type: disc;
    margin-bottom: 20px;
}

/* --- Layout Intro avec Image --- */
.intro-layout {
    display: flex;
    align-items: flex-start; 
    gap: 40px;
    margin-bottom: 30px;
    margin-top: 30px; /* Ajoute l'espace de 30px avec la section du dessus */
}

.intro-img-col {
    flex: 0 0 450px;
}

.intro-img-col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Responsive : Passage en colonne verticale sur écran < 900px */
@media screen and (max-width: 900px) {
    .intro-layout {
        flex-direction: column;
    }
    
    .intro-img-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 450px;
        margin: 0 auto 20px auto;
    }
}

/* --- Bloc de mise en avant (Orange) --- */
.highlight-block {
    background-color: var(--primary-orange);
    padding: 40px;       /* Espace intérieur pour que le texte ne touche pas le bord */
    margin: 40px 0;      /* Espace extérieur en haut et en bas */
    border-radius: 8px;  /* Angles légèrement arrondis */
    color: var(--text-light); /* Texte blanc par défaut */
}

/* Force les titres et paragraphes en blanc dans ce bloc */
.highlight-block h3, 
.highlight-block p,
.highlight-block strong {
    color: var(--text-light);
}

.highlight-block h2 {
    color: var(--text-dark);
}

/* Ajustement des paragraphes dans le bloc */
.highlight-block p {
    margin-bottom: 20px;
}
.highlight-block p:last-child {
    margin-bottom: 0;
}

/* --- Section Vos Expériences --- */
#experiences {
    /* Dégradé vertical (gradient) du noir (#000000) vers le gris (#17171a) */
    background: linear-gradient(to bottom, #000000, #17171a);
    padding: var(--spacing-section) 0;
}

/* Titres en blanc sur fond noir */
#experiences h2, 
#experiences .subtitle {
    color: var(--text-light);
}

.subtitle {
    font-style: italic;
    margin-bottom: 60px;
    font-size: 1.2rem;
}

/* Conteneur global : Colonne verticale */
.experiences-grid {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espace entre chaque grande carte */
    width: 100%;
}

#experiences h3 {
    color: var(--text-light); /* Titre de la carte en blanc */
}

/* Style de la Carte : Flexbox Horizontal */
.card {
    background-color: var(--bg-dark);
    border-radius: 20px;
    padding: 0; /* Pas de padding pour que l'image touche les bords */
    color: var(--text-light);
    display: flex;
    flex-direction: row; /* Image à côté du texte */
    align-items: stretch; /* Les deux colonnes font la même hauteur */
    overflow: hidden; /* Pour que l'image suive les coins arrondis */
    min-height: 400px;
}

/* Alternez l'ordre Image/Texte pour une carte sur deux (Design Z) */
.card:nth-child(even) {
    flex-direction: row-reverse;
}

/* Colonne Image (50%) */
.card-img-placeholder {
    width: 50%;
    margin-bottom: 0;
    max-width: none; /* Annule la limite de 160px précédente */
    height: auto;
    border-radius: 0;
    background-color: #ccc;
}
    
.card-img-placeholder img {	
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit la zone sans se déformer */
    border-radius: 0;
    display: block;
}

/* Colonne Texte (50%) */
.card-content {
    width: 50%;
    padding: 40px; /* Espace intérieur autour du texte */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* aligne le contenu tout en haut */
    text-align: left;
}

/* Style liste à puces (Checkmark) dans les cartes */
.card-content ul {
    list-style: none;      /* Enlève les points ronds standards */
    margin-bottom: 20px;   /* Espace sous la liste */
}

.card-content li {
    position: relative;
    padding-left: 30px;    /* Espace entre la coche et le texte */
    margin-bottom: 8px;    /* Espace entre chaque ligne */
}

/* Création du Check (✓) */
.card-content ul li::before {
    content: '\2713';             /* Code universel pour le signe "Check" (✓) */
    position: absolute;
    left: 0;
    color: var(--text-light); /* Couleur du check */
    font-weight: bold;
    font-size: 0.9rem;
}

.card p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.card-btn {
    align-self: center; /* Le bouton s'aligne au centre */
    padding: 12px 30px;
    background-color: var(--bg-white);
    color: var(--primary-orange);
    border-radius: 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.card-btn:hover {
    background-color: #f0f0f0;
}

.card-pastille {
    align-self: flex-start; /* Le bouton s'aligne à gauche */
    padding: 5px 10px;
    background-color: var(--bg-darkgrey);
    color: var(--text-grey);
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.3s;
}

/* Espace entre l'icône et le texte dans la pastille */
.card-pastille i {
    margin-right: 8px;
}

/* Conteneur pour aligner les pastilles horizontalement */
.card-tags {
    display: flex;
    flex-wrap: wrap; /* AJOUT : Permet aux pastilles de passer à la ligne si besoin */
    gap: 10px;
    margin-bottom: 20px;
}

/* --- Section Vos Contacts --- */
#contacts {
    background: linear-gradient(to bottom, #000000, #17171a);
    padding: var(--spacing-section) 0;
}

#contacts h2 {
    color: var(--text-light);
}


.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes strictes */
    gap: 40px;
    margin-top: 30px;
}

.contact-card {
    text-align: center;
    background-color: var(--bg-dark);
    padding: 0 0 20px 0; /* 0 sur les côtés/haut pour l'image, 20px en bas */
    border-radius: 8px;
    overflow: hidden; /* Important : coupe l'image pour suivre les coins arrondis */
}

.contact-card img {
    width: 100%;         /* Prend toute la largeur de la div */
    height: 200px;       /* Hauteur fixe de 200px */
    object-fit: cover;   /* L'image remplit la zone sans se déformer (recadrage auto) */
    border-radius: 0;    /* On enlève le format "rond" précédent */
    border: none;        /* On enlève l'ancienne bordure orange */
    margin-bottom: 15px;
}

/* On rajoute un espacement pour le texte afin qu'il ne colle pas aux bords */
.contact-card p {
    padding: 0 20px;
    color: var(--primary-orange);
}


.contact-card h3 {
    margin-bottom: 5px;
    color: var(--text-light);
}

/* --- Section Vos Contacts --- */
#vous {
    background-color: var(--primary-orange);
    padding: var(--spacing-section) 0;
}

#vous h2 {
    color: var(--text-dark);
}

/* --- Bloc de mise en avant (Orange) --- */
.vous-block {
    background-color: var(--primary-orange);
   /*  padding: 40px;       Espace intérieur pour que le texte ne touche pas le bord */
    /* margin: 40px 0;      Espace extérieur en haut et en bas */
    /*border-radius: 8px;   Angles légèrement arrondis */
    color: var(--text-light); /* Texte blanc par défaut */
	text-align: center;
}

/* Force les titres et paragraphes en blanc dans ce bloc */
.vous-block h3, 
.vous-block p,
.vous-block strong {
    color: var(--text-light);
}

/* Ajustement des paragraphes dans le bloc */
.vous-block p {
    margin-bottom: 20px;
}
.vous-block p:last-child {
    margin-bottom: 0;
}

.card-pastille-vous {
    /* 1. Dimensions fixes pour l'uniformité (Carré) */
    width: 250px;      /* Largeur fixe */
    height: 250px;     /* Hauteur fixe */
    
    /* 2. Centrage du contenu à l'intérieur de la pastille */
    display: flex;
    flex-direction: column; /* Empile l'icône et le texte */
    justify-content: center; /* Centre verticalement */
    align-items: center;     /* Centre horizontalement */
    text-align: center;      /* Centre le texte s'il est sur plusieurs lignes */

    /* 3. Styles visuels (Noir & Blanc) */
    padding: 20px;
    background-color: var(--bg-cream);
    color: var(--text-dark);
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}


.card-pastille-vous i {
    color: var(--primary-orange);
    font-size: 2.5rem; /* Taille de l'icône un peu plus grande */
    margin-bottom: 15px; /* Espace entre l'icône et le texte */
}

/* Conteneur pour aligner les pastilles horizontalement */
.card-tags-vous {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center; /* Centre les éléments à l'intérieur */
}

/* --- Section Vos Contact --- */
#contact {
    background: var(--bg-white);
    padding: var(--spacing-section) 0;
}

#contact h2 {
    color: var(--text-dark);
    margin-bottom: 20px;
}

.contact-desc {
    font-size: 1.1rem;
    margin-bottom: 50px;
    line-height: 1.8;
    text-align: center; /* Description centrée pour l'harmonie */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Conteneur des 3 colonnes */
.contact-details {
    display: flex;
    flex-direction: row;    /* Aligne les éléments horizontalement */
    justify-content: space-around; /* Espace équitablement les colonnes */
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;        /* Permet le passage à la ligne si l'écran est petit */
}

/* Chaque colonne (Item) */
.contact-item {
    flex: 1;                /* Chaque colonne prend une largeur égale */
    min-width: 250px;       /* Largeur minimum pour éviter l'écrasement */
    display: flex;
    flex-direction: column; /* L'icône se place AU-DESSUS du texte */
    align-items: center;    /* Centre horizontalement */
    text-align: center;     /* Centre le texte */
    font-size: 1.1rem;
    color: var(--text-dark);
}

/* Style des icônes */
.contact-item i {
    color: var(--primary-orange);
    font-size: 2.5rem;      /* Icône plus grande pour le style "Colonne" */
    margin-bottom: 20px;    /* Espace sous l'icône */
    width: auto;            /* On annule la largeur fixe précédente */
}

/* Liens dans les contacts (Email/Tel) */
.contact-item a {
    margin-top: 0;          /* Reset de la marge par défaut des liens */
    color: var(--text-dark);
    font-weight: normal;
}

.contact-item a:hover {
    color: var(--primary-orange);
    text-decoration: underline;
}

/* --- AJOUT RESPONSIVE SPÉCIFIQUE CONTACT --- */
@media screen and (max-width: 768px) {
    .contact-details {
        flex-direction: column; /* Repasse en vertical sur mobile */
        gap: 50px;
    }
}
/* --- Footer & Social Icons --- */
footer {
    background-color: var(--bg-cream);
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 0.9rem;
}

/* Style des icônes réseaux sociaux */
.social-icons {
    margin-bottom: 20px; /* Espace entre les icônes et le texte */
    display: flex;
    justify-content: center;
    gap: 25px; /* Ecart entre chaque icône */
}

.social-icons a {
    color: var(--text-dark); /* Couleur par défaut (gris foncé) */
    font-size: 1.8rem; /* Taille des icônes */
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
    color: var(--primary-orange); /* Devient orange au survol */
    transform: translateY(-3px); /* Petite animation vers le haut */
}

footer p a {
    color: var(--primary-orange);
    font-weight: bold;
}

/* --- RESPONSIVE MOBILE pour les nouvelles cartes --- */
@media screen and (max-width: 900px) {
    .card, .card:nth-child(even) {
        flex-direction: column; /* Empile l'image puis le texte */
    }

    .card-img-placeholder, 
    .card-content {
        width: 100%; /* Prend toute la largeur */
    }

    .card-img-placeholder {
        height: 250px; /* Hauteur fixe pour l'image sur mobile */
    }
}

/* --- RESPONSIVE MOBILE (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    /* Menu caché par défaut */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-orange);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* Menu visible avec JS */
    .nav-links.active {
        display: flex;
    }

    /* Bouton Hamburger visible */
    .hamburger {
        display: flex;
        z-index: 101;
    }

    /* Ajustements généraux mobile */
    h2 {
        font-size: 2rem;
    }

    #hero-video {
        height: 40vh;
        min-height: 250px;
    }
    
    .experiences-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette/mobile */
    }
    
    .contacts-grid {
        grid-template-columns: 1fr; /* Passe en 1 colonne sur mobile */
    }
}

@media screen and (max-width: 480px) {
    .experiences-grid {
        grid-template-columns: 1fr; /* 1 colonne sur petit mobile */
    }
}