/* Responsive Navigation styles begin here */

@media (max-width: 500px) {
    #recherche div {
        margin-top: 20% !important;
    }
}

@media (max-width: 400px) {
    .t40 {
        width: 80% !important;
    }

    #actu, .espace-telecharge, .espace-enquete, .espace-question, .espace-temoigne {
        display: none !important;
    }

    #recherche div {
        margin-top: 30% !important;
    }

    #nav_smart ul {
        margin-left: 30%;
    }

    #logo img {
        width: 150% !important;
        height: auto !important;
    }

    .cycle_lien.celltop {
        display: inline-block !important;
    }

        .cycle_lien.celltop.t30 {
            width: 94% !important;
        }

    .cycle_texte.celltop {
        display: block !important;
    }

    article.cycle-slide {
        padding: 1%;
        margin-bottom: 100px;
        width: 97%;
    }

    ul.cycle_lien.celltop li.mb4 {
        margin-bottom: 2% !important;
    }

    article.cycle-slide label {
        width: 40% !important;
    }

        article.cycle-slide label.t85 {
            width: 75% !important;
        }

    article.cycle.table.t70 {
        width: 100% !important;
    }
}

@media (max-width: 1800px) {
    .colonne {
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1;
        -webkit-column-gap: 1.5rem;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
    }

        .colonne hr {
            display: none !important;
        }

    .synthese.t25 {
        width: 100% !important;
    }

    .wrap-center {
        margin-left: 0%;
        margin-right: 0% !important;
    }

    nav select {
        display: inline-block;
    }

    #recherche {
        margin-top: 20px !important;
        height: 400px;
    }

        #recherche div {
            margin-top: 15%;
        }

    .cycle-slide img, .diapo, #cabane, #tel, .grisentre figure, .nav-left {
        display: none !important;
    }

    #actu article {
        margin-right: 5% !important;
    }

    #reseaux {
        float: none !important;
        margin: 0 !important;
        bottom: 0;
        position: absolute;
        background-color: #373737;
        width: 100%;
    }

        #reseaux i {
            color: #FFFFFF;
        }

    footer#imFooter {
        display: block !important;
    }

    header {
        height: 120px;
    }

    #logo {
        margin-top: 10px;
        display: block;
    }

    #nav_top {
        display: none;
    }

    #nav_smart, #tj_smart, #sejour_smart, #inscription_smart, .synthese {
        display: block !important;
    }

    #tj_smart {
        margin-top: 60px;
    }

    #nav_smart ul {
        margin-left: 55%;
        margin-top: 50px;
        background-color: #00b6dd;
    }

    #nav_smart li {
        list-style-type: none;
    }

    #sejour_smart {
        padding-bottom: 60px !important;
    }

    #main {
        display: none;
    }

    #sejour_smart {
        padding: 2%;
    }

    #inscription_smart {
        position: absolute;
        margin: -220px 0 0px 65%;
        border: 1px solid ##00b6dd;
        border-radius: 50%;
        cursor: pointer;
        height: 6rem;
        width: 6rem;
        background-color: ##00b6dd;
        padding: 0;
        outline: 0;
        z-index: 7777;
    }

        #inscription_smart a, #inscription_smart a i {
            margin: 20px 0 0 15px;
            color: #FFFFFF;
            text-decoration: none;
            display: block;
        }

        #inscription_smart:hover {
            background-color: #FFFFFF;
        }

        #inscription_smart a:hover, #inscription_smart a i:hover {
            color: #000000;
        }

    #ConteneurCabane div.table[role="main"], #ConteneurCabane article.table[id="general"] {
        display: block !important;
    }

    ul.bas {
        padding-top: 0%;
    }

    nav + * {
        position: relative;
    }
    /* Theming opened nav */

    nav ul {
        /* maximum height */
        max-height: 20em;
        overflow: visible;
        /* translate with hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: max-height .4s;
        transition: max-height .4s, overflow .4s;
        will-change: max-height, overflow;
        /* global styles */
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #00b6dd;
        font-style: italic;
        margin-bottom: 20px;
    }

    nav a {
        display: block;
        padding: 0.3rem;
        color: #FFFFFF;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.2em;
    }

        nav a:hover,
        nav a:focus,
        nav a:active {
            background: #000000;
            padding: 0.3rem;
        }
    /* Theming closed nav */

    nav.is-closed ul {
        max-height: 0;
        overflow: hidden;
    }
    /* Global styling nav button */

    nav > button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 1;
        height: 3rem;
        width: 3rem;
        background-color: #333;
        padding: 0;
        outline: 0;
        border: 1px solid #333;
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-transition: -webkit-transform .2s;
        transition: transform .2s;
    }
        /*  Removing Firefox's dotted outline on button */

        nav > button::-moz-focus-inner {
            border: 0;
        }

        nav > button::before {
            font-family: "FontAwesome";
            content: "\f039";
            color: #FFFFFF;
            font-size: 22px;
        }

    /* Theming opened nav button */

    nav:not(.is-closed) > button,
    nav:not(.is-closed) > button::before {
        -webkit-transform: rotate(180deg) translateZ(0);
        -ms-transform: rotate(180deg) translateZ(0);
        transform: rotate(180deg) translateZ(0);
    }
    /* Hide alternate text except from screen readers */

    .visually-hidden {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
        overflow: hidden;
        height: 1px;
        width: 1px;
    }
}
/* BONUS deco */


@media (orientation: landscape) and (max-device-width: 660px) {
    html, body {
        -webkit-text-size-adjust: 100%;
    }
}

/* Footer normal (bureau) */
#imFooter {
    width: 100%;
    background-color: #0685B2;
    color: #FFFFFF;
    padding: 40px 5%;
    box-sizing: border-box;
}

/* --- VERSION MOBILE --- */
@media screen and (max-width: 1024px) {
    #logo img {
        width: 100% !important;
        height: auto !important;
    }

    #imFooter {
        padding: 20px;
        text-align: center;
    }

        #imFooter div {
            display: block !important;
            text-align: center;
            margin: 0 auto;
        }

        #imFooter img {
            display: block;
            margin: 0 auto 15px auto;
            max-width: 120px;
            height: auto;
            background-color: #fff;
            padding: 4px;
        }

        #imFooter iframe {
            display: none; /* cache la carte Google Maps sur petits écrans */
        }

        #imFooter h3 {
            font-size: 16px;
            margin-top: 15px;
        }

        #imFooter a {
            display: inline-block;
            color: white;
            text-decoration: none;
            margin: 4px 6px;
            font-size: 14px;
        }

            #imFooter a:hover {
                color: yellow;
            }

        #imFooter .mobile-info {
            font-size: 13px;
            line-height: 1.5;
            margin-top: 8px;
        }
}
/* --- PRIORITÉ : Footer simplifié sur mobile --- */
@media screen and (max-width: 1024px) {
    #imFooter {
        display: none !important;
    }

    .mobile-footer {
        display: block !important;
    }
}

@media screen and (max-width: 1024px) {
    /* Bouton S'INSCRIRE (détection sans dépendre de l'apostrophe) */
    a[href*="dansmonpanier"],
    a[onclick*="danspanier"],
    a[itemprop='url'],
    a[style*="EN SAVOIR PLUS"] {
        font-size: 13px !important;
        padding: 0.4em 1em !important;
        border-radius: 20px !important;
        width: auto !important;
        height: auto !important;
    }
    /* Conteneur des boutons dans chaque fiche */
    article .celltop div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Les articles (cartes) s’adaptent à la largeur mobile */
    article.grisclair {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }

    /* Titre et sous-titre */
    article h2 {
        font-size:2vw !important;
    }

    article h3 {
        font-size: 1.2em !important;
    }
    /* Cache seulement les blocs internes du footer principal */
    #imFooter > div {
        display: none !important;
    }

    /* Affiche le footer mobile à la place */
    #imFooter .mobile-footer {
        display: block !important;
    }

    /* Conteneur principal du bloc bleu */
    #recherche, .recherche, .t40 {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

        /* Champs de sélection */
        #recherche select,
        .recherche select {
            width: 100% !important;
            margin-bottom: 8px !important;
            font-size: 15px !important;
        }

        /* Bouton "Trouver" */
        #recherche input[type="submit"],
        #recherche button,
        .recherche input[type="submit"],
        .recherche button {
            display: block !important;
            width: 100% !important;
            max-width: 300px;
            margin: 10px auto !important;
            font-size: 16px !important;
            background-color: #c7d300; /* même vert anis */
            border: none;
            padding: 10px 0;
            border-radius: 4px;
        }

    /* Repeater : largeur complète sur mobile */
    .repeater, #repeater, .table.t70, .t70 {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1024px) {

    /* Le conteneur des boutons devient une section en bas de la fiche */
    article .celltop.pl {
        width: 100% !important;
        display: block !important;
        margin-top: 10px !important;
    }

        /* Les boutons s’empilent et se centrent sous la disponibilité */
        article .celltop.pl div[style*="display:flex"] {
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            margin-top: 10px !important;
        }

    /* Style des boutons (même taille pour tous) */
    a[href*="dansmonpanier"],
    a[onclick*="danspanier"],
    a[itemprop='url'],
    a[style*="EN SAVOIR PLUS"] {
        font-size: 13px !important;
        padding: 0.5em 1.2em !important;
        border-radius: 20px !important;
        width: auto !important;
        min-width: 140px;
        text-align: center;
    }

    /* Le bloc de droite (boutons) passe sous le texte principal */
    article .t80.celltop {
        width: 100% !important;
    }

    @media screen and (max-width: 1024px) {

        /* Centrage parfait du container gris clair */
        article.grisclair {
            width: 88% !important; /* un peu plus étroit */
            margin: 0 auto 18px auto !important; /* centré et espacé entre les fiches */
            padding: 15px 18px !important; /* un léger padding interne équilibré */
            background-color: #F5F5F5 !important;
            border-radius: 6px;
            box-sizing: border-box;
        }

            /* Alignement texte et contenu */
            article.grisclair h2,
            article.grisclair h3,
            article.grisclair div {
                text-align: left !important;
            }

        /* Centrage des boutons sous la disponibilité */
        article .celltop.pl div[style*="display:flex"] {
            justify-content: center !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 8px !important;
            margin-top: 10px !important;
        }

        /* Boutons : taille uniforme et centrés */
        a[href*="dansmonpanier"],
        a[onclick*="danspanier"],
        a[itemprop='url'],
        a[style*="EN SAVOIR PLUS"] {
            font-size: 13px !important;
            padding: 0.5em 1.3em !important;
            border-radius: 22px !important;
            width: auto !important;
            min-width: 130px;
            text-align: center;
        }

        /* Bloc principal largeur totale */
        article .t80.celltop {
            width: 100% !important;
        }
    }
}

@media screen and (max-width: 1024px) {

    /* Forcer le centrage du bloc gris même si .t100 est global */
    html body article.grisclair.table.t100 {
        width: 88% !important; /* largeur contrôlée */
        margin: 0 auto 20px auto !important; /* centrage horizontal */
        padding: 15px 18px !important;
        background-color: #F5F5F5 !important;
        border-radius: 6px;
        box-sizing: border-box;
        float: none !important;
        display: block !important;
    }

    /* Correction supplémentaire si .t100 garde la main */
    html body .t100.grisclair,
    html body .table.t100.grisclair {
        width: 88% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* Centrage des boutons */
    article.grisclair .celltop.pl {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 12px !important;
        padding: 0 !important;
    }

        article.grisclair .celltop.pl div[style*="display:flex"] {
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            margin-top: 10px !important;
            width: 100% !important;
        }

    a[href*="dansmonpanier"],
    a[onclick*="danspanier"],
    a[itemprop='url'],
    a[style*="EN SAVOIR PLUS"] {
        font-size: 13px !important;
        padding: 0.55em 1.4em !important;
        border-radius: 22px !important;
        width: auto !important;
        min-width: 160px;
        text-align: center;
        display: inline-block !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 1024px) {

    /* Conteneur principal : on supprime les gros paddings */
    [role="main"].table {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Bloc article : largeur contrôlée et centrée */
    html body article.grisclair.table.t100 {
        width: 90% !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
        box-sizing: border-box;
    }

    /* Boutons centrés */
    article.grisclair .celltop.pl div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    a[href*="dansmonpanier"],
    a[onclick*="danspanier"],
    a[itemprop='url'] {
        font-size: 13px !important;
        padding: 0.55em 1.4em !important;
        border-radius: 22px !important;
        width: auto !important;
        min-width: 160px;
        text-align: center;
        display: inline-block !important;
        margin: 0 auto !important;
    }
}

/* --- FIX FINAL : centrage absolu des boutons mobile --- */
@media screen and (max-width: 1024px) {

    /* Conteneur parent des deux boutons */
    article.grisclair .celltop.pl {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

        /* Ligne contenant les deux boutons (forcée en colonne centrée) */
        article.grisclair .celltop.pl > div[style*="display:flex"] {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            width: 100% !important;
            text-align: center !important;
        }

    /* Boutons eux-mêmes */
    article.grisclair a[href*="dansmonpanier"],
    article.grisclair a[onclick*="danspanier"],
    article.grisclair a[itemprop='url'],
    article.grisclair a[style*="EN SAVOIR PLUS"] {
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 0.6em 1.5em !important;
        border-radius: 22px !important;
        min-width: 160px;
    }
}
/* --- Fix centrage boutons mobile --- */
@media screen and (max-width: 1024px) {
    article.grisclair .celltop.pl {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

        article.grisclair .celltop.pl > div[style*="display:flex"] {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            gap: 10px !important;
            text-align: center !important;
        }

    article.grisclair a[href*="dansmonpanier"],
    article.grisclair a[onclick*="danspanier"],
    article.grisclair a[itemprop='url'],
    article.grisclair a[style*="EN SAVOIR PLUS"] {
        display: inline-block !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 0.6em 1.5em !important;
        border-radius: 22px !important;
        min-width: 160px;
    }
}
/* --- Corrige la taille de la popup sur smartphone --- */
@media screen and (max-width: 768px) {
    /* Cible uniquement les popups avec width inline */
    .popup_block[style*="width"] {
        width: 65% !important; /* largeur responsive */
        max-width: 400px !important; /* limite de sécurité */
        left: 35% !important;
        transform: translateX(-50%) !important;
        top: 20% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* optionnel : force les couleurs propres */
    .popup_block {
        background-color: #fff !important;
        color: #000 !important;
        border-radius: 6px !important;
    }
}

/* --- Variante pour tablettes --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .popup_block[style*="width"] {
        width: 50% !important;
        left: 35% !important;
        transform: translateX(-50%) !important;
        top: 15% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
}
/* --- Mise en colonne verticale pour les envois de pièces sur mobile --- */
@media screen and (max-width: 768px) {

    /* On cible les tableaux dans BanquePiecesStages */
    #BanquePiecesStages table,
    #BanquePiecesStages tr,
    #BanquePiecesStages td {
        display: block !important;
        width: 100% !important;
    }

    /* Espacement entre chaque bloc de pièce */
    #BanquePiecesStages tr {
        margin-bottom: 15px !important;
        border-bottom: 1px solid #ddd !important;
        padding-bottom: 10px !important;
    }

    /* Style individuel de chaque cellule transformée en bloc */
    #BanquePiecesStages td {
        text-align: left !important;
        padding: 4px 0 !important;
    }

    /* Le bouton "Envoyer" centré et élargi */
    #BanquePiecesStages input[type="submit"],
    #BanquePiecesStages button,
    #BanquePiecesStages .nompdf input[type="submit"] {
        width: 100% !important;
        max-width: 250px;
        margin: 8px auto !important;
        display: block !important;
        font-size: 15px !important;
    }

    /* Le FileUpload prend toute la largeur */
    #BanquePiecesStages input[type="file"] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Texte vert "OK" placé sous le bouton */
    #BanquePiecesStages .nompdf label {
        display: block !important;
        margin-top: 4px !important;
        text-align: center !important;
    }

    /* Réduction du padding global */
    #BanquePiecesStages {
        padding: 10px !important;
    }
}
/* --- Ajustement final du bas de formulaire pour smartphones --- */
@media screen and (max-width: 768px) {

    #PanelInsStage {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        padding: 0 10px 20px 10px !important; /* marge basse contrôlée */
    }

        /* Bouton "Enregistrer mon inscription" bien espacé du footer */
        #PanelInsStage input[type="submit"],
        #PanelInsStage button {
            width: 100% !important;
            max-width: 320px !important;
            display: block !important;
            margin: 25px auto 15px auto !important; /* équilibre vertical parfait */
            position: relative !important;
            bottom: auto !important;
        }

    /* Séparation visuelle douce entre le contenu et le footer */
    footer, #footer {
        margin-top: 10px !important;
        padding-top: 25px !important;
        border-top: 3px solid #fff !important; /* fine ligne blanche décorative */
        position: relative !important;
        z-index: 1 !important;
    }
}

@media screen and (max-width: 768px) {

    /* Ajustement final du bas du formulaire */
    #PanelInsStage {
        padding: 0 10px 30px 10px !important; /* espace plus doux */
    }

        /* Bouton Enregistrer bien respirant */
        #PanelInsStage input[type="submit"],
        #PanelInsStage button {
            margin: 35px auto 20px auto !important; /* équilibre visuel */
        }

    /* Footer parfaitement raccord */
    footer, #footer {
        margin-top: 0 !important;
        padding-top: 20px !important;
        border-top: 2px solid #e0e0e0 !important; /* fine ligne grise discrète */
    }
}
/* --- Footer toujours au pied de la page sur smartphone --- */
@media screen and (max-width: 768px) {

    html, body {
        height: 100% !important;
    }

        /* Le conteneur principal prend toute la hauteur */
        body > form,
        #divConteneurMoteur,
        #divTable100tble,
        .wrap-centerblanc,
        .content-wrapper {
            min-height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
        }

    /* Zone de contenu extensible */
    #PanelInsStage {
        flex: 1 0 auto !important;
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        padding: 0 10px 20px 10px !important;
    }

    /* Footer fixé en bas si la page est courte */
    footer, #footer {
        flex-shrink: 0 !important;
        width: 100% !important;
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        background-color: #00658f !important; /* garde ton bleu */
        color: white !important;
        text-align: center !important;
    }
}
/* --- Ajuste la taille des boutons de validation sur petits écrans --- */

/* Smartphones */
@media screen and (max-width: 768px) {
  input[type="submit"] {
    width: 50% !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
    margin: 5px 20px !important;
    display: block !important;
  }
}

/* Tablettes */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  input[type="submit"] {
    width: 60% !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    margin: 10px 20px !important;
    display: block !important;
  }
}