:root{
    --bleu:#002D62;
    --jaune:#FFC72C;
    --blanc:#FFFFFF;
    --gris:#F4F4F4;
    --ombre:0 4px 12px rgba(0,0,0,.12);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Segoe UI, Arial, sans-serif;
    background:var(--gris);
    color:#333;
    line-height:1.6;
}

header{
    background:var(--bleu);
    color:white;
    position:sticky;
    top:0;
    z-index:1000;
}

.header-container{
    max-width:1400px;
    margin:auto;
    padding:12px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:48px;
    height:48px;
    object-fit:contain;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}

.logo h1{
    color:var(--jaune);
    font-size:1.8rem;
}

.logo p{
    font-size:.9rem;
}

nav ul{
    list-style:none;
    display:flex;
    gap:10px;
    align-items:center;
    padding:0;
    margin:0;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:600;
    padding:8px 12px;
    border-radius:6px;
    transition:.3s;
    white-space:nowrap;
}

nav a:hover{
    background:#FFC72C;
    color:#002D62;
}

.hero{
    background:linear-gradient(rgba(0,45,98,.9), rgba(0,45,98,.9));
    color:white;
    text-align:center;
    padding:80px 20px;
}

.hero-logo{
    width:120px;
    max-width:80%;
    margin-bottom:20px;
    filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

.hero h2{
    font-size:2.4rem;
    margin-bottom:15px;
}

.btn{
    display:inline-block;
    background:var(--jaune);
    color:var(--bleu);
    padding:12px 24px;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
    margin-top:15px;
}

.container{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.card{
    background:white;
    border-radius:12px;
    padding:20px;
    box-shadow:var(--ombre);
}

.card h2,
.card h3{
    color:var(--bleu);
    margin-bottom:10px;
}


table{
    width:100%;
    border-collapse:collapse;
    background:white;
    box-shadow:var(--ombre);
}

th{
    background:var(--bleu);
    color:white;
}

th,td{
    padding:12px;
    border:1px solid #ddd;
    text-align:center;
}

form{
    background:white;
    padding:25px;
    border-radius:12px;
    box-shadow:var(--ombre);
}

input,select,textarea{
    width:100%;
    padding:12px;
    margin-bottom:12px;
    border:1px solid #ccc;
    border-radius:6px;
}

/* Bouton "voir le mot de passe" — cf. nav.js toggleVoirMdp(). Enveloppe un
   input password pour placer l'icône en incrustation à droite, sans casser
   la largeur/le margin-bottom standard des inputs (repris sur le wrapper). */
.champ-mdp-wrap{
    position:relative;
    margin-bottom:12px;
}
.champ-mdp-wrap input{
    margin-bottom:0;
    padding-right:44px;
}
/* Sélecteur .champ-mdp-wrap .btn-voir-mdp (2 classes) plutôt que
   .btn-voir-mdp seul : certaines pages ont un ".xxx button{width:100%}"
   pour leur bouton de soumission (ex: .login-card button dans
   connexion.html) qui, à spécificité égale avec .btn-voir-mdp, l'emportait
   par ordre de cascade (règle inline chargée après style.css) et étirait
   le bouton œil sur toute la largeur du champ au lieu de le coller à droite. */
.champ-mdp-wrap .btn-voir-mdp{
    position:absolute;
    top:50%; right:4px;
    transform:translateY(-50%);
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0;
    font-size:16px; line-height:1; cursor:pointer;
    color:#888;
}
.btn-voir-mdp:hover{ color:#333; }

button{
    background:var(--jaune);
    color:var(--bleu);
    border:none;
    padding:12px 20px;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
}

.product{
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:var(--ombre);
}

.product img{
    width:100%;
    border-radius:8px;
    margin-bottom:10px;
}

footer{
    background:#111;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:40px;
}

.notice{
    background:#fff8d8;
    border-left:4px solid var(--jaune);
    padding:15px;
    margin:15px 0;
}


.menu-toggle{
    display:none;
    background:#FFC72C;
    color:#002D62;
    border:none;
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:8px;
    cursor:pointer;
    font-size:0;
    position:relative;
}

.menu-toggle::before{
    content:"☰";
    font-size:19px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@media(max-width:768px){

    .menu-toggle{
        display:block;
        margin:0;
    }

    /* Menu en superposition (par-dessus le contenu) au lieu de pousser la
       page vers le bas — ancré au header (position:sticky = bloc positionné). */
    nav ul{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        width:auto;
        background:#002D62;
        padding:10px;
        gap:5px;
        box-shadow:0 10px 24px rgba(0,0,0,.3);
    }

    nav ul.show{
        display:flex;
    }

    nav a{
        display:block;
        width:100%;
    }

    .hero h2{
        font-size:1.8rem;
    }

    table{
        font-size:.9rem;
    }

}

footer{

background:#002D62;
color:white;

margin-top:50px;

padding:40px 20px;

}

.footer-container{

display:grid;

grid-template-columns: 1.1fr 1.3fr 1.3fr 1.3fr;

gap:40px;

max-width:1200px;

margin:auto;

align-items:start;

}

@media(max-width:900px){

.footer-container{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

}

footer h3{

color:#FFC72C;

margin-bottom:14px;

font-size:1.05rem;

}

footer a{

color:white;

text-decoration:none;

}

footer a:hover{

color:#FFC72C;

}

.copyright{

text-align:center;

margin-top:20px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.2);

}

.dashboard-card{

background:white;

padding:20px;

margin-top:20px;

border-radius:10px;

border-top:5px solid #FFC72C;

box-shadow:0 3px 10px rgba(0,0,0,.1);

}

/* ===== BACK OFFICE SB95 ===== */

.admin-layout{
display:flex;
min-height:100vh;
}

.sidebar{
width:260px;
background:#002D62;
color:white;
padding:20px;
}

.sidebar h2{
color:#FFC72C;
margin-bottom:30px;
}

.sidebar ul{
list-style:none;
padding:0;
}

.sidebar li{
margin-bottom:10px;
}

.sidebar a{
display:block;
padding:12px;
background:rgba(255,255,255,.05);
color:white;
text-decoration:none;
border-radius:6px;
}

.sidebar a:hover{
background:#FFC72C;
color:#002D62;
}

.main-content{
flex:1;
padding:25px;
background:#f5f5f5;
}

.admin-section{
display:none;
}

.admin-section.active{
display:block;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:30px;
}

.stat-box{
background:white;
padding:20px;
border-top:5px solid #FFC72C;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,.1);
}

.table-admin{
width:100%;
border-collapse:collapse;
background:white;
}

.table-admin th,
.table-admin td{
padding:12px;
border:1px solid #ddd;
}

.table-admin th{
background:#002D62;
color:white;
}

@media(max-width:900px){

.admin-layout{
flex-direction:column;
}

.sidebar{
width:100%;
}

.sidebar-toggle{
display:block;
width:100%;
background:#FFC72C;
color:#002D62;
border:none;
padding:12px;
font-weight:bold;
border-radius:6px;
cursor:pointer;
margin-bottom:10px;
}

.sidebar ul{
display:none;
}

.sidebar ul.show{
display:block;
}

}

.sidebar-toggle{
display:none;
}

.team-card{
    background:white;
    border-top:5px solid var(--jaune);
    border-radius:12px;
    padding:20px;
    text-align:center;
    box-shadow:var(--ombre);
    transition:.3s;
}

.team-card:hover{
    transform:translateY(-5px);
}

.team-card h2{
    color:var(--bleu);
    margin-bottom:10px;
}

/* ===================================
PAGE CONNEXION ESPACE CLUB
=================================== */

.login-page{
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
min-height:70vh;
}

.login-card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
max-width:500px;
width:100%;
text-align:center;
}

.login-logo{
width:70px;
height:auto;
margin-bottom:15px;
filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

.login-card h1{
color:#002D62;
margin-bottom:10px;
}

.login-subtitle{
color:#666;
margin-bottom:20px;
}

.btn-retour{
display:block;
margin-top:15px;
padding:12px;
background:#002D62;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

.btn-retour:hover{
background:#001f45;
}

nav a.active{
background:#FFC72C;
color:#002D62;
}

.footer-partenaire{
text-align:center;
background:rgba(255,255,255,.05);
border-radius:14px;
padding:20px 16px;
border:1px solid rgba(255,255,255,.1);
}

.footer-partenaire img{
height:70px;
background:white;
padding:6px;
border-radius:10px;
margin-bottom:14px;
box-shadow:0 4px 10px rgba(0,0,0,.2);
}

.footer-partenaire p{
font-size:.82rem;
color:rgba(255,255,255,.75);
line-height:1.4;
}

/* ===== Boutons réseaux sociaux — footer ===== */

.footer-social-title{
margin-bottom:16px !important;
}

.social-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.social-btn{
display:flex;
align-items:center;
gap:10px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
border-radius:50px;
padding:9px 16px 9px 9px;
color:white;
text-decoration:none;
font-size:.85rem;
font-weight:600;
transition:all .25s ease;
width:fit-content;
}

.social-btn .social-icon{
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:transform .25s ease;
}

.social-btn .social-icon svg{
width:16px;
height:16px;
fill:white;
}

.social-btn.facebook .social-icon{
background:#1877F2;
}

.social-btn.instagram .social-icon{
background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.social-btn:hover{
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.3);
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.social-btn:hover .social-icon{
transform:scale(1.12) rotate(-6deg);
}

.footer-col-title-row{
display:flex;
align-items:center;
gap:8px;
}

table{
width:100%;
border-collapse:collapse;
}

table td{
padding:10px;
border-bottom:1px solid #eee;
}

.contact-card h2{
color:#002D62;
margin-bottom:15px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — compléments et correctifs
   ═══════════════════════════════════════════════════════════ */

/* ── iOS : empêcher le zoom automatique sur les inputs ──── */
input, select, textarea{
  font-size: max(16px, 1em);
}

/* ── Tables — défilement horizontal sur tout écran ───────── */
.table-admin{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ─── Breakpoint 768px ─────────────────────────────────── */
@media(max-width:768px){

  /* Toutes les tables — défilement horizontal */
  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Logo compact — min-width:0 pour permettre au texte de rétrécir/wrapper
     plutôt que de pousser le bouton menu hors de l'écran (flex-item par
     défaut refuse de rétrécir sous sa largeur intrinsèque sinon) */
  .logo{ min-width:0; }
  .logo h1{ font-size:1.25rem; }
  .logo p { font-size:.76rem; }

  /* Hero */
  .hero{ padding:45px 15px; }
  .hero h2{ font-size:1.5rem; }

  /* Container */
  .container{ padding:20px 12px; }

  /* Admin — collapse sidebar dès 768px (en plus du 900px existant) */
  .admin-layout{ flex-direction:column; }
  .sidebar{ width:100%; }
  .sidebar-toggle{ display:block; width:100%; }
  .sidebar ul{ display:none; }
  .sidebar ul.show{ display:block; }
  .main-content{ padding:15px 12px; }

  /* Cards avec tableaux imbriqués — scrollables */
  .card, .dashboard-card{ overflow-x:auto; }

  /* Profil-header licencies.html — wrap sur 2 lignes */
  .profil-header{ flex-wrap:wrap; }
  .btn-modifier-profil{ margin-left:0 !important; margin-top:6px; }
  .btn-deconnexion{ margin-left:0 !important; margin-top:6px; }

  /* Dashboard grid — 1 colonne */
  .dashboard-grid{ grid-template-columns:1fr !important; }

  /* Stats 3 colonnes — on garde mais on réduit le texte */
  .stats-mini-valeur{ font-size:18px; }
  .stats-mini-label { font-size:10px; }

  /* Toast — pleine largeur */
  #_toastContainer{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    max-width:none !important;
    width:calc(100% - 20px) !important;
  }

  /* Footer — 1 colonne */
  .footer-container{
    grid-template-columns:1fr;
    gap:20px;
  }

  /* Boutons côte à côte — se rétrécissent */
  .btn-modifier-profil,
  .btn-deconnexion{
    font-size:12px;
    padding:7px 11px;
  }

  /* Grilles auto-fit avec minmax trop large — override */
  .stats-grid{
    grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  }

}

/* ─── Breakpoint 480px — très petits écrans ─────────────── */
@media(max-width:480px){

  /* Hero encore plus compact */
  .hero h2{ font-size:1.3rem; }
  .hero p { font-size:.88rem; }

  /* Tables — cellules plus petites */
  th, td{ padding:7px 5px; font-size:.8rem; }
  .table-admin th, .table-admin td{ padding:7px 5px; font-size:.8rem; }

  /* Stats boxes */
  .stats-mini-box{ padding:7px 6px; }
  .stats-mini-valeur{ font-size:16px; }

  /* Boutons header profil */
  .btn-modifier-profil,
  .btn-deconnexion{
    font-size:11px !important;
    padding:6px 9px !important;
    margin-top:4px;
  }

  /* Login card */
  .login-card{ padding:20px 14px; }

  /* Formulaires */
  form{ padding:15px 12px; }

  /* CTA bouton — pleine largeur */
  .btn{ display:block; text-align:center; }

  /* Lightbox actualités — hauteur réduite */
  .actu-lightbox-carousel{ height:220px !important; }

  /* Sidebar card — texte tronqué */
  .sidebar-user-card{ font-size:.8rem; }

}