/* 
 * GOL - Grand Largue Lyon (GoL)
 * Structure Responsive Simplifiée (511px / 911px / 1199px)
 */

/* 1. RÉGLAGES GÉNÉRAUX (Toutes résolutions ou très grands écrans) */
.container {
    padding: 0;
    font-size: .9em;
}

table td,
form table>tbody>tr>td {
    padding: 5px;
}

/* 2. MD - ORDINATEURS PORTABLES ET ÉCRANS MOYENS (< 1199px) */
@media screen and (max-width: 1199px) {

    /* Configuration du menu latéral et du contenu */
    .menu_opened #content,
    .menu_opened footer {
        margin-left: 20%;
    }

    #side {
        width: 20%;
        left: -20%;
    }

    .menu_opened #floating_entete {
        margin-left: 20%;
    }

    #explore .explore_thing {
        width: 20%;
    }

    .visible-ipad {
        display: initial !important;
    }

    .hidden-ipad {
        display: none !important;
    }

    input[type="submit"],
    .btn {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    body {
        font-size: 0.8em;
    }

    input,
    select,
    textarea,
    .btn {
        font-size: 12px;
        padding: 5px 10px;
    }

    #explore {
        margin-top: -120px;
    }

    .menu_opened #explore p span {
        display: block;
    }

    #content {
        padding-bottom: 145px;
    }

    #contact form {
        padding: 50px 15px 0;
    }

    #contact input[type="submit"],
    #contact .btn {
        font-size: 16px;
        padding: 10px 15px;
    }

    /* Tooltips */
    [data-tooltip] {
        color: #fff;
        background: var(--gol-blue-tooltip);
        position: relative;
        text-align: left;
    }

    [data-tooltip]:before {
        text-align: center;
        content: "?";
        color: #fff;
        border: 1px solid #fff;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        display: inline-block;
        margin-right: 5px;
    }
}

/* 3. SM/MD TRANSITION - RÉGLAGES SPÉCIFIQUES (912px - 1199px) */
@media screen and (min-width: 912px) and (max-width: 1199px) {
    .menu_opened.connected header {
        display: block;
    }

    .menu_opened.connected #side {
        top: 50px;
    }

    .menu_opened.connected #content {
        padding-top: 50px;
    }

    .breadcumb {
        margin-top: 0;
    }

    .bienvenue .btn {
        top: -21px;
        bottom: -15px;
    }

    .btn-group .btn {
        display: block;
        margin: 0;
        border-radius: 0;
    }

    .btn-group .btn:first-child {
        border-radius: 4px 4px 0 0;
    }

    .btn-group .btn:last-child {
        border-radius: 0 0 4px 4px;
    }
}

/* 4. SM - TABLETTES ET LARGES MOBILES (< 911px) */
@media screen and (max-width: 911px) {
    body {
        font-size: 1em;
    }

    #content {
        padding-bottom: 155px;
    }

    .totop {
        bottom: 25px;
        right: 25px;
    }


    .brand {
        font-size: 1em;
        height: 31px;
    }

    .brand span {
        position: absolute;
        top: 26px;
        left: 15px;
    }

    /* Correction alignement bouton déconnexion */
    .bienvenue .btn {
        top: -21px;
        bottom: -15px;
        padding: 5px 10px;
        font-size: 14px;
    }

    /* MENU BURGER */
    #side {
        width: 60% !important;
        left: -100% !important;
        z-index: 1001 !important;
    }

    body.menu_responsive::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        pointer-events: auto;
    }

    .menu_opened #side {
        left: -100% !important;
    }

    .menu_responsive #side {
        left: 0 !important;
    }

    .menu_opened .bar1,
    .menu_opened .bar2,
    .menu_opened .bar3 {
        transform: none;
        opacity: 1;
    }

    .menu_responsive .bar1 {
        transform: rotate(-45deg) translate(-9px, 6px);
    }

    .menu_responsive .bar2 {
        opacity: 0;
    }

    .menu_responsive .bar3 {
        transform: rotate(45deg) translate(-8px, -8px);
    }

    .menu_opened #content,
    .menu_opened footer,
    .menu_opened #floating_entete {
        margin-left: 0;
    }

    .scrolled #floating_entete {
        display: block;
    }

    #floating_entete {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    #floating_entete table.entete {
        min-width: max-content;
    }

    .container {
        padding: 0 10px;
    }

    #burgerMenu {
        display: none;
    }

    #responsiveMenu {
        display: block;
    }

    #main {
        width: auto;
        padding: 15px 10px;
    }

    /* LAYOUT HP */
    #splash {
        position: initial;
        height: auto;
    }

    #splash_shade,
    .connected #splash_shade {
        position: relative;
        padding: 0;
    }

    #splash_title {
        padding: 100px 0 75px;
    }

    #explore {
        position: relative;
        margin: 0;
        flex-direction: column;
    }

    #explore .explore_thing {
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--gol-dark-blue);
    }

    .news_title .btn {
        display: none;
    }

    #contact .contactActions a {
        width: 100%;
        text-align: center;
        display: block;
        border: none;
        border-bottom: 1px solid #fff;
    }

    #contact iframe {
        width: 100%;
    }

    #pg_logo_ffv,
    #pg_logo_facebook {
        text-align: center;
    }

    .row {
        margin: 0;
    }

    .col {
        flex-basis: auto;
    }

    .bradius {
        border: 5px solid var(--gol-blue);
    }

    footer img {
        height: 40px !important;
    }

    /* --- FORMULAIRES ET TABLEAUX RESPONSIVES --- */
    table td,
    form table>tbody>tr>td {
        padding: 2px;
    }

    table.responsive-form,
    table.responsive-form>tbody,
    table.responsive-form td,
    table.responsive-form table,
    table.responsive-form table>tbody {
        display: block;
        width: 100%;
        border: none;
        box-sizing: border-box;
    }

    table.responsive-form table>tbody>tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border-bottom: 1px solid var(--gol-grey-lightest);
        padding: 0;
    }

    table.responsive-form table>tbody>tr>td {
        display: block;
        border: none !important;
        padding: 4px;
        box-sizing: border-box;
    }

    table.responsive-form table>tbody>tr>td.afcham {
        width: 30%;
        text-align: left;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 0.9em;
        color: var(--gol-grey-dark);
    }

    table.responsive-form table>tbody>tr>td:not(.afcham) {
        width: 70%;
        text-align: left;
    }

    table.responsive-form input,
    table.responsive-form select,
    table.responsive-form textarea {
        max-width: 100%;
    }

    table.responsive-form table>tbody>tr>td:empty {
        display: none;
    }

    table.responsive-form table>tbody>tr.row-stacked {
        flex-direction: column;
    }

    table.responsive-form table>tbody>tr.row-stacked>td.afcham {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        padding-bottom: 0;
        color: #000;
    }

    table.responsive-form table>tbody>tr.row-stacked>td:not(.afcham) {
        width: 100%;
        padding-top: 5px;
    }

    table.responsive-form textarea {
        width: 100% !important;
        box-sizing: border-box;
        min-height: 100px;
    }

    table.responsive-data-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    table.responsive-data-table thead {
        display: none;
    }

    table.responsive-data-table tbody,
    table.responsive-data-table tr,
    table.responsive-data-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    table.responsive-data-table tr {
        margin-bottom: 15px;
        border: 2px solid var(--gol-blue);
        border-radius: 5px;
        background: transparent;
        overflow: hidden;
    }

    table.responsive-data-table td {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        padding: 8px 10px 8px 0;
        border-bottom: 1px solid var(--gol-grey-lightest);
    }

    table.responsive-data-table td:last-child {
        border-bottom: none;
    }

    table.responsive-data-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        color: var(--gol-grey-dark);
        flex: 0 0 35%;
        align-self: stretch;
        background: #e1e1e8; /* Opaque pour éviter les mélanges avec le fond des lignes */
        padding: 8px 10px;
        margin: -8px 12px -8px 1px;
        display: flex;
        align-items: center;
        border-right: 1px solid var(--gol-grey-lightest);
    }

    /* Fiche Adhérent */
    .adh-fiche-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .adh-fiche-photo {
        flex: 0 0 auto;
        width: 100%;
    }

    .adh-fiche-photo img {
        height: 100px;
    }

    .adh-fiche-infos {
        width: 100%;
    }
}

/* 5. XS - PETITS MOBILES (< 511px) */
@media screen and (max-width: 511px) {

    #tbl_filtres,
    #tbl_filtres tbody,
    #tbl_filtres tr,
    #tbl_filtres th {
        display: block;
        width: 100%;
    }

    #tbl_filtres th br {
        display: none;
    }

    #tbl_filtres th:not(:has(input[type="text"])) {
        display: none;
    }

    #tbl_filtres th input[type="text"] {
        float: right;
        padding: 4px 8px;
        margin-bottom: 0;
    }
}

/* 6. UTILITAIRES DE VISIBILITÉ GÉNÉRAUX */
.hide,
.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.affix {
    position: fixed;
}



/* Masqué par défaut (utilitaires Bootstrap recalibrés) */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important;
}

/* Mobile (XS < 511px) */
@media (max-width: 511px) {

    .visible-xs,
    .visible-xs-block {
        display: block !important;
    }

    .visible-xs-inline {
        display: inline !important;
    }

    .visible-xs-inline-block {
        display: inline-block !important;
    }

    .hidden-xs {
        display: none !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }

    table.responsive-data-table td {
        padding: 4px 10px 4px 0;
    }

    table.responsive-data-table tr {
        margin-bottom: 10px;
    }
}

/* Tablette (SM 512px - 911px) */
@media (min-width: 512px) and (max-width: 911px) {

    .visible-sm,
    .visible-sm-block {
        display: block !important;
    }

    .visible-sm-inline {
        display: inline !important;
    }

    .visible-sm-inline-block {
        display: inline-block !important;
    }

    .hidden-sm {
        display: none !important;
    }

    table.visible-sm {
        display: table !important;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

/* Laptop (MD 912px - 1199px) */
@media (min-width: 912px) and (max-width: 1199px) {

    .visible-md,
    .visible-md-block {
        display: block !important;
    }

    .visible-md-inline {
        display: inline !important;
    }

    .visible-md-inline-block {
        display: inline-block !important;
    }

    .hidden-md {
        display: none !important;
    }

    table.visible-md {
        display: table !important;
    }

    tr.visible-md {
        display: table-row !important;
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important;
    }
}

/* Desktop (LG > 1200px) */
@media (min-width: 1200px) {

    .visible-lg,
    .visible-lg-block {
        display: block !important;
    }

    .visible-lg-inline {
        display: inline !important;
    }

    .visible-lg-inline-block {
        display: inline-block !important;
    }

    .hidden-lg {
        display: none !important;
    }

    table.visible-lg {
        display: table !important;
    }

    tr.visible-lg {
        display: table-row !important;
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important;
    }
}

/* Impression */
.visible-print {
    display: none !important;
}

@media print {

    .visible-print,
    .visible-print-block {
        display: block !important;
    }

    .visible-print-inline {
        display: inline !important;
    }

    .visible-print-inline-block {
        display: inline-block !important;
    }

    .hidden-print {
        display: none !important;
    }

    table.visible-print {
        display: table !important;
    }

    tr.visible-print {
        display: table-row !important;
    }

    th.visible-print,
    td.visible-print {
        display: table-cell !important;
    }
}

/* ==========================================================================
   PAGE D'ACCUEIL — home.php (responsive)
   Breakpoints alignés sur ceux du projet : 911px (tablette) et 511px (mobile)
   ========================================================================== */

/* SM — Tablettes (<= 911px) */
@media screen and (max-width: 911px) {
    .home-container .row {
        gap: 16px;
    }

    .home-member-banner {
        align-items: flex-start;
        gap: 8px;
    }

    .event-action {
        padding: 6px 8px;
    }

    .event-action .btn {
        font-size: 0.78em;
        padding: 3px 8px;
    }
}

/* XS — Mobiles (<= 511px) */
@media screen and (max-width: 511px) {
    .home-container {
        padding: 0 8px 20px;
    }
    .home-container .row {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }
    .home-container .col {
        min-width: unset;
        padding: 0 4px;
    }

    /* Toute la carte devient cliquable via le lien interne "étendu" */
    .event-action {
        display: block;
        width: 0;
        padding: 0;
        border-left: none;
        overflow: visible;
    }

    .event-action .btn {
        visibility: hidden;
        position: static;
    }

    .event-action .btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        visibility: visible;
    }

    .event-date {
        min-width: 48px;
        padding: 6px 8px;
    }
    .event-date .day   { font-size: 1.3em; }
    .event-date .month { font-size: 0.7em; }

    .event-details {
        padding: 6px 10px;
    }
    .event-title {
        font-size: 0.88em;
    }

    .home-member-banner {
        padding: 10px 14px;
        border-radius: 8px;
    }
    .home-member-banner h2 {
        font-size: 1em;
    }

    .enc-card {
        padding: 6px 10px;
        gap: 8px;
    }
}