/*
Theme Name: OceanWP Child
Template: oceanwp
*/

/* ============================================
   VARIABLES & BASE
   ============================================ */
:root {
    --bleu-marine: #1a2744;
    --bleu-roi:    #1a56a0;
    --bleu-clair:  #e8f0fb;
    --vert:        #1d9e75;
    --blanc:       #ffffff;
    --gris-clair:  #f8f9fb;
    --gris-bord:   #e0e0e0;
    --texte:       #1a2744;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--texte);
    background: var(--gris-clair);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   SUPPRIMER LE BANDEAU GRIS TITRE
   ============================================ */
.entry-header,
.page-header,
.ocean-page-header,
.page-header-wrap,
.site-header-inner {
    display: none !important;
}

/* ============================================
   HEADER
   ============================================ */
#site-header {
    background: var(--bleu-marine) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    z-index: 100;
}

#site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Logo dans le header */
#site-logo img,
.custom-logo {
    height: 48px !important;
    width: auto !important;
}

.site-logo-text a,
#site-logo a {
    color: var(--blanc) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Menu navigation */
#site-navigation,
.main-navigation {
    background: transparent !important;
}

.main-navigation ul li a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    transition: all .15s !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    background: rgba(255,255,255,0.15) !important;
    color: var(--blanc) !important;
}

/* Bouton deconnexion dans menu */
.main-navigation ul li.menu-deconnexion a {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */
#content,
.site-content {
    flex: 1;
    padding: 0 !important;
}

.content-area,
#primary {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.site-main {
    padding: 0 !important;
}

.entry-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Neutraliser OceanWP sur les boutons admin */
.ac-section button, .ac-section .btn-create, .ac-section .btn-save {
    box-sizing: border-box !important;
    line-height: 1 !important;
}
.ac-section .btn-group {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}
.ac-section .btn-group > * {
    flex: 1;
    height: 44px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Masquer header OceanWP */
#site-header { display: none !important; }
#main { padding-top: 0 !important; margin-top: 0 !important; }
#outer-wrap, #wrap { margin-top: 0 !important; padding-top: 0 !important; }

/* ============================================
   COMPOSANTS RÉUTILISABLES
   ============================================ */

/* Carte */
.judo-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

/* Titre de liste grisé */
.judo-list-head {
    background: #f8f9fb;
    padding: 10px 16px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 13px;
    font-weight: 600;
    color: #1a2744;
}

/* Contenu de liste */
.judo-list-body {
    padding: 0 16px;
}

/* Ligne de liste */
.judo-list-row {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.judo-list-row:last-child { border-bottom: none; }

/* Titre de ligne */
.judo-row-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a2744;
}

/* Actions style WordPress */
.judo-actions {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 0;
}
.judo-action-link {
    font-size: 11px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0 6px 0 0;
}
.judo-action-link:hover { color: #1a2744; }
.judo-action-sep {
    color: #ccc;
    font-size: 11px;
    margin-right: 6px;
}

/* Boutons */
.judo-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.judo-btn-primary { background: #0B2D5B; color: #fff; }
.judo-btn-primary:hover { background: #F6B21A; color: #0B2D5B; }
.judo-btn-secondary { background: #f0f0f0; color: #1a2744; }
.judo-btn-danger { background: #fcebeb; color: #e24b4a; }
.judo-btn-success { background: #1d9e75; color: #fff; }

/* Popup */
.judo-popup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.judo-popup.active { display: flex; }
.judo-popup-inner {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 420px;
    width: 90%;
}
.judo-popup-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a2744;
    margin-bottom: 1rem;
}
.judo-popup-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Champ formulaire */
.judo-field { margin-bottom: 10px; }
.judo-field label {
    font-size: 11px;
    color: #666;
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
}
.judo-field input, .judo-field select, .judo-field textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    box-sizing: border-box;
}

/* ============================================
   FOOTER
   ============================================ */
#site-footer {
    background: var(--bleu-marine) !important;
    color: rgba(255,255,255,0.6) !important;
    text-align: center !important;
    padding: 1rem !important;
    font-size: 12px !important;
    margin-top: auto !important;
}

#site-footer a {
    color: rgba(255,255,255,0.8) !important;
}

#site-footer .footer-bottom {
    border-top: none !important;
}

/* ============================================
   PAGE CONNEXION
   ============================================ */
.page-connexion-layout {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.connexion-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    width: 100%;
    background: var(--blanc);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26,39,68,.12);
}

.connexion-left {
    background: linear-gradient(135deg, var(--bleu-marine), var(--bleu-roi));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.connexion-left img {
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

.connexion-left h2 {
    color: var(--blanc);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.connexion-left p {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.6;
}

.connexion-right {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.connexion-right h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bleu-marine);
    margin-bottom: 1.5rem;
}

/* Formulaire UM */
.um-form .um-field-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}

.um-form .um-field input {
    border: 1px solid var(--gris-bord) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    width: 100% !important;
    transition: border-color .15s !important;
}

.um-form .um-field input:focus {
    border-color: #F6B21A !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(246,178,26,.25) !important;
}

.um-form .um-button,
.um-form input[type=submit] {
    background: #0B2D5B !important;
    color: var(--blanc) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background .15s !important;
}

/* Alignement Se souvenir de moi */
.um-field-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

.um-field-checkbox input[type=checkbox] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
}

.um-field-checkbox-state {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

.um-field-checkbox-option {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    float: none !important;
    display: inline !important;
}

.um-form .um-button:hover,
.um-form input[type=submit]:hover {
    background: #F6B21A !important;
    color: #0B2D5B !important;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .connexion-container {
        grid-template-columns: 1fr;
    }
    .connexion-left {
        padding: 2rem 1.5rem;
    }
    .connexion-left img {
        width: 80px;
    }
    .connexion-right {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    #site-header .container {
        padding: 0.5rem 1rem;
    }
}

/* ============================================
   MENU HAMBURGER MOBILE
   ============================================ */
@media (max-width: 768px) {
    .main-navigation {
        display: none;
    }
    .main-navigation.toggled {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bleu-marine);
        padding: 1rem;
        z-index: 99;
    }
    .main-navigation.toggled ul {
        flex-direction: column;
    }
}

/* Footer colle en bas */
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
#outer-wrap,
#wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#content,
.site-content {
    flex: 1;
}

/* Espace entre logo et formulaire connexion */
.page-id-14 .wp-block-columns,
.page-connexion .wp-block-columns {
    gap: 4rem !important;
}

/* Image fond page connexion */
.page-id-14 .site-main {
    background-image: url('https://myjudoclub.fr/wp-content/uploads/jk-Photoroom.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}
.page-id-14 .site-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.85);
}
.page-id-14 .site-main {
    position: relative;
}

/* Centrage vertical page connexion - tous sites */
.page-template-default.page [data-page="connexion"] #content,
.page-id-14 #content,
.page-id-14 .site-content,
.page-id-14 #primary,
.page-id-14 .content-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 130px);
}

.page-id-14 .entry-content {
    width: 100%;
}

/* Masquer header sur page connexion sous-sites */
.page-id-14 #site-header { display: none !important; }
.page-id-14 .site-main { min-height: 100vh !important; }

/* Centrage vertical page connexion */
.page-connexion .site-main,
.page-id-14 .site-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-id-14 .site-main .container {
    width: 100%;
}

/* Footer colle en bas - correction OceanWP */
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
#page { flex: 1; display: flex; flex-direction: column; }
.site-content { flex: 1; }

/* Footer colle en bas - OceanWP */
html, body { height: 100%; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }
#footer { margin-top: auto; }

/* Contenu minimum pour footer visible */
.site-main.clr {
    min-height: calc(100vh - 200px);
}

/* Layout global - footer colle en bas */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
#outer-wrap, #wrap { flex: 1; display: flex; flex-direction: column; }
#main { flex: 1; }
.site-main { min-height: calc(100vh - 200px) !important; }

/* ============================================
   AFFICHAGE TELEPHONE — regles communes a toutes les pages
   (les pages du thème mettent leur mise en page en style direct ; sans ces regles, les
   bandeaux en 3 colonnes et les formulaires en 2 colonnes etaient comprimes sur telephone,
   et les grands tableaux debordaient de l'ecran)
   ============================================ */
@media (max-width: 600px) {
    /* Bandeaux bleus "vide | titre | vide" : titre sur toute la largeur */
    #main [style*="grid-template-columns:1fr 2fr 1fr"],
    #main [style*="grid-template-columns: 1fr 2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    #main [style*="grid-template-columns:1fr 2fr 1fr"] > div:empty,
    #main [style*="grid-template-columns: 1fr 2fr 1fr"] > div:empty {
        display: none;
    }
    /* Formulaires et cartes en 2 (ou 3) colonnes : une seule colonne */
    #main [style*="grid-template-columns:1fr 1fr"],
    #main [style*="grid-template-columns: 1fr 1fr"],
    #main [style*="grid-template-columns:repeat(2,1fr)"],
    #main [style*="grid-template-columns:repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* ...et les cases "pleine largeur" (grid-column:span 2) ne doivent pas recreer une 2e colonne
       cachee qui ecrase les champs voisins (ex. Prenom tout petit dans le popup compte parent) */
    #main [style*="grid-template-columns:1fr 1fr"] > [style*="grid-column:span"],
    #main [style*="grid-template-columns: 1fr 1fr"] > [style*="grid-column:span"],
    #main [style*="grid-template-columns:repeat(2,1fr)"] > [style*="grid-column:span"],
    #main [style*="grid-template-columns:repeat(2, 1fr)"] > [style*="grid-column:span"],
    #main [style*="grid-template-columns:1fr 1fr"] > [style*="grid-column: span"],
    #main [style*="grid-template-columns: 1fr 1fr"] > [style*="grid-column: span"] {
        grid-column: 1 / -1 !important;
    }
    /* Grands tableaux : defilement horizontal plutot que de sortir de l'ecran */
    #main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #main img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   LARGEUR DES PAGES DE L'APPLICATION
   Le theme parent (OceanWP) limite la zone de contenu (~1200 px) : chaque page de l'application
   fixe elle-meme sa largeur (1100 px pour les formulaires et fiches, 1600 px pour les pages de
   donnees et les tableaux de bord). Ne concerne que les modeles de page du theme (page-*.php),
   pas la page de connexion ni les pages construites dans l'editeur.
   ============================================ */
body[class*="page-template-page-"] #content-wrap,
body[class*="page-template-page-"] #content-wrap.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}