@charset "utf-8";
/*
-- Responsive / Mobile
-- Adaptation du layout fixe 960px pour les écrans de téléphone.
-- Ce fichier est chargé APRÈS main.css, home.css et diaporama.css,
-- ses règles ont donc la priorité en cascade sur les breakpoints ciblés.
*/
/* ============================================================
   Bouton hamburger : masqué par défaut (desktop)
   ============================================================ */
.nav-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: none;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 15px;
    top: 20px;
    width: 30px;
    z-index: 999;
}

/* .nav-toggle a déjà position:absolute (donc c'est un bloc de positionnement
   valide), mais on force position:relative sur son contenu direct pour
   garantir que les <span> position:absolute se positionnent bien par
   rapport au bouton dans tous les navigateurs (les <button> ont parfois
   un rendu interne particulier). */
.nav-toggle-bar,
.nav-toggle .visibilityHidden {
    box-sizing: border-box;
}

.nav-toggle-bar {
    background: #fff;
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
    width: 100%;
}

.nav-toggle-bar:nth-child(1) {
    top: 8px;
}

.nav-toggle-bar:nth-child(2) {
    top: 18px;
}

.nav-toggle-bar:nth-child(3) {
    top: 28px;
}

/* Texte "Menu" accessible aux lecteurs d'écran uniquement (masqué visuellement sans display:none) */
.nav-toggle .visibilityHidden {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: auto;
    visibility: visible;
    width: 1px;
}

/* Icône hamburger -> croix quand le menu est ouvert */
body.nav-open .nav-toggle-bar:nth-child(1) {
    top: 18px;
    transform: rotate(45deg);
}

body.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle-bar:nth-child(3) {
    top: 18px;
    transform: rotate(-45deg);
}


/* Bannière texte superposée au carousel : cachée par défaut (desktop),
   affichée uniquement sur mobile (voir media query plus bas) */
.diapo-caption {
    display: none;
}

.phone{
    display: none;
}

.desktop {
    display: block;
}


/* ============================================================
   TABLETTE (max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

    #colonnedroite a {
        color: #cf8b6c;
    }

    .desktop {
        display: none;
    }

    .phone {
        display: block;
    }

    html, body {
        overflow-x: hidden;
    }

    #diaporama a{
        margin: 0px 5px!important;
    }

    #diaporama {
        margin-top: 10px;
    }

        #diaporama img {
            height: 130px;
            width: 155px;
        }

        .bg {
            min-width: 0;
            width: 100%;
        }

    .wrapper {
        padding: 0 15px;
        width: 100%;
    }

    /* -------- HEADER -------- */
    .header-container .wrapper {
        background-size: cover;
        height: auto;
        min-height: 260px;
        padding-top: 15px;
    }

    .header-container h1#logo {
        height: 70px;
        left: 15px;
        position: relative;
        top: 0;
        width: 70px;
    }

    .header-container h1#logo img {
        height: 70px;
        width: 70px;
    }

    #slogan {
        display: none;
    }

    /* -------- MENU -------- */
    .nav-toggle {
        display: block;
    }

    nav#mainNav {
        background: rgba(52, 21, 7, 0.97);
        display: none;
        left: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 500;
    }

    body.nav-open nav#mainNav {
        display: block;
    }

    body.nav-open {
        overflow: hidden;
    }

    .hmenu {
        margin: 70px 0 0;
        position: static;
        right: auto;
        top: auto;
        width: 100%;
    }

    .hmenu li {
        float: none;
        margin: 0;
        text-align: center;
    }

    .hmenu a {
        border-bottom: 1px solid rgba(255,255,255,0.15);
        display: block;
        font-size: 16px;
        padding: 16px 20px;
    }

    .hmenu a:hover {
        border-bottom: 1px solid rgba(255,255,255,0.15);
        background: rgba(255,255,255,0.08);
    }

    /* -------- DIAPORAMA -------- */
    /* Le rotator anime l'opacité des <li> (voir diaporamaRotator.js), ils restent
       tous en position:absolute superposés. On garde cette logique et on donne
       une hauteur au conteneur via un ratio (image source 960x340 = 35.42%),
       sinon .diapo/.rotator s'effondrent à 0 et laissent un vide avant le footer.
       On sort le carousel du padding du .wrapper (technique "full bleed") pour
       qu'il touche les deux bords de l'écran, avec un espace au-dessus. */
    .diapo {
        border-top: 0;
        height: 0;
        left: 50%;
        margin-left: -50vw;
        margin-top: 25px;
        overflow: hidden;
        padding-top: 75%;
        position: relative;
        top: 0;
        width: 100vw;
    }

    .diapo .rotator {
        height: 100%;
        left: 0;
        padding-bottom: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .diapo .rotator ul,
    .diapo .rotator ul li {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .diapo .rotator ul li a {
        display: block;
        height: 100%;
        width: 100%;
    }

    .diapo img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    /* Le pattern décoratif (#paternHeader) et la vaguelette (btmLineDiapo.gif),
       tous deux des <img> enfants directs de .diapo, ne sont plus utiles en mobile */
    .diapo > img {
        display: none;
    }

    /* Bannière texte centrée par-dessus le carousel (mobile uniquement) */
    .diapo-caption {
        display: block;
        left: 50%;
        padding: 0 20px;
        position: absolute;
        text-align: center;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 300;
    }

    .diapo-caption h2 {
        border: 0;
        color: #fff;
        display: block;
        font-size: 20px;
        letter-spacing: 0.15em;
        margin: 0 0 12px;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    }

    .diapo-caption p {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }

    /* -------- CONTENU 2 COLONNES -------- */
    #colonnegauche,
    #colonnedroite {
        float: none;
        padding-top: 20px;
        width: 100%;
    }

    #fbBox {
        max-width: 100%;
        width: 100%;
    }

    /* -------- SERVICES : slider --------
       slides.jquery.js calcule les positions "left" de chaque slide en PIXELS
       une seule fois à l'initialisation (control.children().outerWidth()), puis
       fixe cette valeur en inline style. Lui donner une largeur en % casse tout
       son calcul (les slides atterrissent hors du cadre visible, d'où les points
       de pagination visibles mais aucune image). Il faut donc lui donner une
       largeur fixe en px adaptée au mobile, pas du fluide. */
    #slides {
        height: 241px;
        margin: 20px auto 0;
        width: 300px;
    }

    .slides_container {
        height: 208px;
        width: 300px;
    }

    .slides_container a,
    .slides_container a img {
        height: 208px;
        width: 300px;
    }

    ul.pagination {
        margin: -30px auto !important;
        width: 300px;
    }

    /* -------- RÉALISATIONS : galerie (2 colonnes, centrée, pleine largeur) -------- */
    ul.imgProduks {
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    ul.imgProduks a {
        flex: 0 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    ul.imgProduks img {
        height: auto;
        width: 100%;
    }

    .page_navigation {
        font-size: 14px;
    }

    /* -------- NOUS JOINDRE : carte Google -------- */
    #googlemap {
        height: auto;
        width: 100%;
    }

    #googlemap iframe {
        height: 300px;
        max-width: 100%;
        width: 100%;
    }

    /* -------- COLONNE DROITE (contact/decoration) -------- */
    .seeRealisations,
    .srvDecoration,
    .contactUs {
        margin-left: auto;
        margin-right: auto;
    }

    /* -------- FOOTER -------- */
    #footerContent {
        height: auto;
        padding: 5px 20px 5px;
        width: 100%;
    }

    #logoFooter {
        display: none;
    }

    p.copyrights {
        font-size: 10px;
        left: 0;
        padding: 0 20px;
        position: static;
        text-align: center;
        width: 100%;
    }
}


/* ============================================================
   TÉLÉPHONE (max-width: 480px)
   ============================================================ */
@media screen and (max-width: 480px) {

    body {
        font-size: 14px;
    }

    .header-container h1#logo {
        height: 55px;
        width: 55px;
    }

    .header-container h1#logo img {
        height: 55px;
        width: 55px;
    }

    #content h1 {
        font-size: 17px;
    }

    #colonnegauche p {
        font-size: 14px;
        line-height: 21px;
    }

    #footerContent {
        font-size: 15px;
    }
}