/*
Theme Name:   Twenty Twenty-Five Child (Custom)
Description:  Thème enfant pour agence : CPT Actualités, Single templates & Injection Elementor sur home.php
Author:       AMTHOS
Template:     twentytwentyfive
Version:      1.1.0
Text Domain:  twentytwentyfive-child
*/
/* ==========================================================================
   1. MENU FIXE DESKTOP
   ========================================================================== */
.fixed-navbar {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 80px; /* Hauteur de la barre */    background-color: #ffffff;    box-shadow: 0 2px 10px rgba(0,0,0,0.08);    z-index: 10000;    display: flex;    align-items: center;}
.navbar-container {    display: flex;    justify-content: space-between;    align-items: center;    width: 100%;   margin: 0 auto;    padding: 0 20px;}
.site-title {    font-size: 24px;    font-weight: 700;    text-decoration: none;    color: #111;}
.main-navigation ul {    list-style: none;    margin: 0;    padding: 0;    display: flex;    gap: 5px;}
.main-navigation a {    text-decoration: none;    color: #333;    font-weight: 500;    font-size: 16px;    transition: color 0.3s ease;}
.main-navigation a:hover {    color: #FFF;    background-color: #212121;}
.main-navigation .current-menu-item > a {    position: relative;    color: #FFF;    background-color: #212121;}
.main-navigation li > a {  position: relative;    padding: 2px 10px;    text-transform: uppercase;}
.main-navigation li > a:hover::after {    transform: scaleX(1); /* Apparaît au survol */}
/* ==========================================================================
   2. VIDÉO 100VH
   ========================================================================== */
.hero-video-header {    position: relative;    width: 100%;     height: 100vh;    overflow: hidden;    background-color: #000;}
/* S'assure que le contenu normal (articles, pages) passe sous le menu fixe */
.site-main {    margin-top: 80px; min-height: 500px;}
/* Annule cette marge si la vidéo 100vh est présente pour éviter le blanc */
.hero-video-header + .site-main {    margin-top: 0;}
.site-main , .site-footer {    position: relative;    background-color: #FFF;    z-index: 1000;}
.bg-video {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    object-fit: cover; /* Recadre proprement la vidéo sans la déformer */    z-index: 1;}

/* Couche sombre par dessus la vidéo pour faire ressortir les textes éventuels */
.hero-overlay {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.1);     z-index: 2;}
.hero-content {     height: 100vh;    width: 100%;position: relative;    background-size: cover; background-position: center;     background-attachment: fixed;
    & h1 { text-transform: uppercase; font-size: 130px; color: #FFF;font-weight: 700;  padding: 0;  margin: 0; z-index: 10000;       position: relative;   margin-left: 2%; width: max-content;text-shadow: 0px 0px 7px #888;  padding-top: 65px;}
    & h2 {text-transform: uppercase; font-size: 60px;color: #000;margin: 0;POSITION: RELATIVE;        z-index: 100;        margin-left: 2%;        font-weight: 700;}
    & .bloc_left { position: absolute; bottom: 30px; left: 30px; background-color: #FFF;   width: 350px;     z-index: 10;    border: 10px solid #FFF;}
    & .bloc_left .img {width: 90%; height:150px; margin:5%; background-size: cover; background-position: center;}
    & .bloc_left .txt {width: 80%;  margin:5%; padding: 5%; text-align: center; background-color: #000;color: #FFF;text-transform: uppercase;  position: relative;  z-index: 10;font-size: 16px; }
    & h3 {font-size: 20px; color: #FFF; margin: 0; padding: 0;font-weight: 700;}
    & h4 {font-size: 18px; color: #FFF; margin: 0; padding: 0;font-weight: 700;}
    & h5 {font-size: 14px; color: #FFF; margin: 0; padding: 0;}
    & .bloc_right { position: absolute; bottom: 0px; right: 0;background-color: #000; display: flex; flex-wrap: wrap; max-width: 50%; z-index: 10;}
    & .bloc_right .txt {width: 46%;  margin:2%; padding: 0%; color: #FFF;font-size: 16px;align-content: center;}
    & .bloc_right .img1 {width: 21%; margin:2%;  } 
    & .img_ct { width: 100%; height: 180px; background-size: cover; background-position: center;}
    & .txt_ct { width: 90%;  padding: 2%; font-size: 14px; text-align: center;}
}
.page-header  {width: 100%; height: 350px; position: relative;    background-size: cover;    background-position: center;   
    & h1 { text-transform: uppercase; font-size: 50px; color: #212121;font-weight: 700;  padding: 0;  margin: 0; z-index: 10000;     margin-top: 10px; position: fixed;   margin-left: 2%; width: max-content;}
}
@media (max-width: 1024px) {
    .hero-content {
        & h1 {font-size: 40px; margin-top: 15px; position: fixed; color: #212121;padding-top: 0px;text-shadow: none; }
        & .bloc_right { display: none;}
        & h2 {font-size: 30px;  color: #FFF;width: 96%;        text-align: center;   position: absolute;     background-color: rgba(21, 21, 21, 0.5);top: 100px;}
        & .bloc_left    { width: 90%; left: 5%;  right: 5%;   width: calc(90% - 20px);}
    }
    .hero-content h2:nth-child(3) {top: 135px;}

}
/* ==========================================================================
   3. MENU HAMBURGER (MOBILE)
   ========================================================================== */
.menu-toggle {    display: none; /* Caché sur Desktop */    background: transparent;    border: none;    cursor: pointer;    padding: 5px;    z-index: 1001;}
.menu-toggle .bar {    display: block;    width: 25px;    height: 3px;    margin: 5px auto;    background-color: #111;    transition: all 0.3s ease-in-out;}
@media (max-width: 768px) {
    .menu-toggle { display: block; /* Affiche le burger */ }
    /* Le menu passe en tiroir latéral ou déroulant */
    .main-navigation {  position: fixed;        top: 80px;        left: -100%; /* Caché hors de l'écran par défaut */        width: 100%;        height: calc(100vh - 80px);        background-color: #ffffff;        transition: left 0.4s ease;        overflow-y: auto;    }
    .main-navigation.is-active {  left: 0; /* Arrive sur l'écran au clic */  }
    .main-navigation ul {        flex-direction: column;        align-items: center;        padding: 40px 0;        gap: 25px;    }
    .main-navigation a {        font-size: 20px;    }
    /* Animation du bouton Burger vers la Croix (X) */
    .menu-toggle.is-active .bar:nth-child(1) {      transform: translateY(8px) rotate(45deg);    }
    .menu-toggle.is-active .bar:nth-child(2) {       opacity: 0;    }
    .menu-toggle.is-active .bar:nth-child(3) {        transform: translateY(-8px) rotate(-45deg);    }
}
/* --- FOOTER GLOBAL --- */
.site-footer {    width: 100%;    min-height: 350px;    position: relative;    background-size: cover;    background-attachment: fixed;    background-image: url('https://le-clan.amthos.fr/wp-content/uploads/2026/06/pexels-mountain-ranges-1835815_1920.webp');    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;    color: #a0a0a0;    padding: 70px 0 30px;    font-size: 14px;}

/* Overlay dégradé */
.site-footer .fx {    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    background-color: #3D3D3D;    background: linear-gradient(180deg, rgba(21, 21, 21,0.96) 42%, rgba(21, 21, 21, 0.67) 100%);    z-index: 1;}

/* Conteneur principal */
.site-footer .footer-content {    max-width: 1200px;    margin: 0 auto;    padding: 0 20px;    position: relative;    z-index: 2;}

/* Liens globaux du footer */
.site-footer a {    color: #a0a0a0;    text-decoration: none;    transition: color 0.3s ease;}
.site-footer a:hover {    color: #f25822; /* Orange Activland */}
/* --- SECTION SUPÉRIEURE (Colonnes) --- */
.site-footer .footer-top {    display: grid;    grid-template-columns: 1fr 1fr 1.5fr 2.5fr;    gap: 30px;    margin-bottom: 40px;}
.site-footer .widget-title {    color: #ffffff;    font-size: 13px;    text-transform: uppercase;    letter-spacing: 2px;    margin-bottom: 25px;    font-weight: 700;}
.site-footer ul {    list-style: none;    padding: 0;    margin: 0;}
.site-footer ul li {    margin-bottom: 15px;}
/* Bloc "Discover" */
.site-footer .widget-discover .discover-title {    color: #ffffff;    font-size: 24px;    line-height: 1.2;    font-weight: 800;    text-transform: uppercase;    margin-top: 0;    margin-bottom: 20px;}
.site-footer .widget-discover .discover-content {    display: flex;    justify-content: space-between;    align-items: flex-start;}
.site-footer .widget-discover .location-info {    line-height: 1.8;}
.site-footer .widget-discover .location-info p {    margin: 0 0 15px 0;}
.site-footer .widget-discover .location-info .hours strong {    color: #ffffff;    font-weight: 600;}
.site-footer .widget-discover .tripadvisor-badge {    flex-shrink: 0;    margin-left: 15px;}
.site-footer .widget-discover .tripadvisor-badge img {    width: 90px;    opacity: 1;    filter: grayscale(100%);}
/* --- SÉPARATEUR --- */
.site-footer .footer-divider {    border: 0;    height: 1px;    background-color: rgba(255, 255, 255, 0.08);    margin: 40px 0;}
/* --- SECTION MILIEU (Légal, Contact, Social) --- */
.site-footer .footer-middle {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 40px;}
.site-footer .footer-legal .separator {    margin: 0 8px;    color: #6d6d6d;}
.site-footer .footer-contact {    display: flex;    gap: 40px;}
.site-footer .footer-contact .contact-item {    display: flex;    align-items: center;    gap: 12px;    color: #ffffff;    font-size: 16px;    font-weight: 700;}
.site-footer .footer-contact .contact-item i {    color: #f25822;    font-size: 18px;}
.site-footer .footer-social {    display: flex;    gap: 12px;}
.site-footer .footer-social a {    display: flex;    align-items: center;    justify-content: center;    width: 38px;    height: 38px;    border: 1px solid rgba(255, 255, 255, 0.08);    border-radius: 50%;    color: #ffffff;    transition: all 0.3s ease;}
.site-footer .footer-social a:hover {    background-color: #f25822;    border-color: #f25822;}
/* --- SECTION COPYRIGHT --- */
.site-footer .site-info {    text-align: center;    font-size: 13px;    color: #878787;}
.site-footer .site-info .brand-text {    color: #f25822;    font-weight: 600;}
/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1024px) {
    .site-footer .footer-top {   grid-template-columns: repeat(2, 1fr);    }
    .site-footer .footer-middle {        flex-direction: column;        gap: 25px;    }
}
@media (max-width: 600px) {
    .site-footer .footer-top {        grid-template-columns: 1fr;    }
    .site-footer .footer-contact {        flex-direction: column;        gap: 15px;        align-items: center;    }
}