/* --- Éléments uniquement mobile, cachés sur desktop --- */
.nav-mobile-header {
	display: none;
}
.hamburger {
    display: none;
}

.nav-img a {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-img a img {
    margin-left: 60px;
	padding-top: 0; 
}	

/*TABLETTE — 1024px*/

@media (max-width: 1024px) {
    .onglet a, .onglet-contact a {
        padding: 54px 14px;
        font-size: 92%;
    }

    .nav-img a img {
        width: 38%;
        padding-top: 20px;
        padding-left: 16px;
    }
}

/*MOBILE — 768px*/

@media (max-width: 768px) {
    /* --- Nav globale : pleine largeur, toujours visible --- */
    nav {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: 0;
        background-color: #efefef;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		transition: transform 0.3s ease, background-color 0.4s ease, box-shadow 0.4s ease;
    }
    /* Annule la transition desktop (déjà scrolled dès le départ) */
    nav.scrolled {
        background-color: #efefef;
    }
	
	nav.nav-hidden {
        transform: translateY(-100%);
    }
    /* Si le menu est ouvert, on ne masque jamais la nav */
    nav:has(.title-nav.open) {
        transform: translateY(0);
    }
    /* --- Header mobile : logo à gauche, hamburger à droite --- */
    .nav-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;       
        padding: 0 16px;
    }
	
	.nav-mobile-header a {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .nav-mobile-header img {
        display: block;
        height: 46px;
        width: auto;
    }
    /* --- Bouton hamburger --- */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #2d2d2d;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
        transform-origin: center;
    }
    /* Animation croix quand le menu est ouvert */
    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    /* --- Menu principal : caché par défaut, s'ouvre en slide --- */
    .title-nav {
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        border-top: 0.5px solid rgba(0, 0, 0, 0.08);
        padding: 0;
        margin: 0;
    }

    .title-nav.open {
        max-height: 700px;
    }
    /* Le logo dans la liste est masqué (remplacé par nav-mobile-header) */
    .nav-img {
        display: none;
    }
    /* --- Items du menu principal --- */
    nav ul li {
        width: 100%;
        text-align: left;
        float: none;
    }

    .onglet a, .onglet-contact a {
        padding: 14px 20px;
        border-radius: 0;
        font-size: 15px;
        min-height: 44px;         
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* --- Flèche des déroulants : remplacée par JS (classe .open) --- */
    .deroulant > a::after {
        content: "▶";
        font-size: 11px;
        transition: transform 0.2s ease;
        display: inline-block;
    }

    .deroulant.open > a::after {
        content: "▼";
    }
    /* --- Sous-menus : position static + contrôle par classe .open --- */
    .sous {
        position: static;
        display: none;
        width: 100%;
        border-top: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sous.open {
        display: block;
    }
    /* Désactive le hover desktop sur mobile */
    nav > ul li:hover .sous {
        display: none;
    }
    nav > ul li:hover > a {
        background-color: transparent;
    }

    .sous a {
        padding: 12px 20px 12px 20px;   /* Indentation pour l'arborescence */
        min-height: 44px;
        font-size: 15px;
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        border-bottom: none;
        border-radius: 0;
        text-align: left;
    }

    .sous a:hover {
        background-color: aliceblue;
    }
    /* Arrondi sur le dernier sous-item visible */
    .sous-obj a, .sous-colorr a {
        border-radius: 0;
    }
    /* --- Sections .background : moins de marge sur mobile --- */
    .background {
        margin: 0 12px 40px 12px;
        padding: 80px 0 10px 0;
    }

    .background h4 {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* --- Parallax : désactivé sur mobile (bug iOS Safari) --- */
    .parallax-imgc, .parallax-imgv, .parallax-imge, .parallax-imgr, .parallax-imga {
        background-attachment: scroll;
        background-position: center center;
    }
    /* --- Typographie fluide --- */
    .titre {
        font-size: clamp(1.2rem, 5vw, 2rem);
        padding: 0 1rem;
    }

    h2 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }
}