/* =========================================================
   SAILOR THEME — refonte/optimisation du CSS existant
   Vibe: marine / nautique (navy + ivoire + rouge), rayures,
   boutons "badge", cartes type "pont de bateau".
   (Aucune modif HTML requise)
========================================================= */

/* -----------------------------
   Variables / Base
------------------------------ */
:root {
    --navy: #0b1f3a;          /* Bleu marine foncé */
    --navy-2: #0f2d52;        /* Bleu marine plus clair */
    --sea: #0ea5a8;           /* Cyan/bleu clair */
    --red: #d6293a;           /* Rouge vif */
    --ivory: #fbf7ef;         /* Ivoire clair */
    --sand: #efe7d8;          /* Sable clair */
    --ink: #0b1220;           /* Couleur texte sombre */
    
    --line: rgba(11, 31, 58, 0.16);
    --line-2: rgba(11, 31, 58, 0.26);

    --shadow: 0 16px 40px rgba(11, 31, 58, 0.12);
    --shadow-soft: 0 10px 25px rgba(11, 31, 58, 0.10);

    --radius: 14px;
    --radius-sm: 10px;

    --ring: 0 0 0 4px rgba(14, 165, 168, 0.22);
}


/* Import Google Fonts (remplace Segoe UI) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,750&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body{
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

     /* Image de fond */
    background-image: url('background.jpg'); /* chemin vers ton image */
    background-size: cover;        /* couvre tout l'écran */
    background-position: center;   /* centrer l'image */
    background-repeat: no-repeat;  /* ne pas répéter l'image */
    background-attachment: fixed;  /* fixe l'image lors du scroll */


    color: rgba(11, 18, 32, .92);
    line-height: 1.55;

   

    /* améliore le rendu typographique */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titres: serif "capitaine" */
h1,h2,h3,.sidebar h2{
    font-family: "Fraunces", serif;
    letter-spacing: .2px;
    color: var(--ink);
}
.content h1{
    margin-top: 0;
    margin-bottom: 18px;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
}
.content h2{
    margin-top: 22px;
    margin-bottom: 12px;
    font-size: clamp(1.15rem, 1.02rem + .6vw, 1.5rem);
}

/* -----------------------------
   Layout général
------------------------------ */
.layout{
    display: flex;
    min-height: 100vh;
    gap: 18px;
    padding: 18px;
}

/* -----------------------------
   Sidebar — "cabine" + rayures
------------------------------ */
.sidebar{
    width: 240px;
    color: #fff;
    padding: 18px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;

    background:
        /* rayures nautiques */
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.10) 0px,
            rgba(255,255,255,.10) 10px,
            rgba(255,255,255,0) 10px,
            rgba(255,255,255,0) 22px
        ),
        linear-gradient(180deg, var(--navy), var(--navy-2));

    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.10);

    display: flex;
    flex-direction: column;
}

.sidebar::before{
    /* mini "cordage" en bord */
    content:"";
    position:absolute;
    inset: 10px;
    border-radius: calc(var(--radius) - 6px);
    border: 1px dashed rgba(255,255,255,.22);
    pointer-events: none;
}

.sidebar h2{
    margin: 2px 0 16px 0;
    font-size: 1.35em;
    color: rgba(255,255,255,.96);
}

/* Navigation */
.sidebar ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.sidebar ul li{ margin: 0; }

.sidebar ul li a{
    text-decoration: none;
    color: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;
    border-radius: 12px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);

    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.sidebar ul li a:hover,
.sidebar ul li.active a{
    background: rgba(14,165,168,.22);
    border-color: rgba(14,165,168,.45);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.sidebar-footer{
    margin-top: auto;
    padding-top: 14px;
}

.sidebar-footer a{
    color: rgba(255,255,255,.92);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 12px;
    border-radius: 999px;

    background: rgba(214,41,58,.18);
    border: 1px solid rgba(214,41,58,.35);

    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.sidebar-footer a:hover{
    background: rgba(214,41,58,.28);
    border-color: rgba(214,41,58,.55);
    transform: translateY(-1px);
    text-decoration: none;
}

/* -----------------------------
   Contenu principal — "pont"
------------------------------ */
.content{
    flex: 1;
    padding: clamp(14px, 2vw, 26px);
    border-radius: var(--radius);
    background:
        /* léger grain + voile */
        radial-gradient(1000px 500px at 10% 0%, rgba(14,165,168,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.70)),
        /* planchettes très discrètes */
        repeating-linear-gradient(
            90deg,
            rgba(11,31,58,.06) 0px,
            rgba(11,31,58,.06) 1px,
            rgba(11,31,58,0) 1px,
            rgba(11,31,58,0) 34px
        );
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

/* -----------------------------
   Formulaires — "instruments"
------------------------------ */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea,
select{
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    margin-bottom: 14px;

    border: 1px solid var(--line-2);
    border-radius: 12px;
    font-size: 1em;

    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 18px rgba(11,31,58,.06);
    transition: border-color .16s ease, box-shadow .16s ease, transform .08s ease;
}

input:focus,
textarea:focus,
select:focus{
    outline: none;
    border-color: rgba(14,165,168,.55);
    box-shadow: var(--ring), 0 10px 22px rgba(11,31,58,.10);
}

textarea.textarea-field{ resize: vertical; }

/* -----------------------------
   Boutons — "badges nautiques"
------------------------------ */
button, .btn{
    padding: 10px 16px;
    margin: 6px 0;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 650;
    letter-spacing: .2px;

    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
    box-shadow: 0 12px 24px rgba(11,31,58,.14);
}

button:hover, .btn:hover{
    transform: translateY(-1px);
    filter: saturate(1.05);
}
button:active, .btn:active{
    transform: translateY(0px) scale(.99);
    box-shadow: 0 8px 18px rgba(11,31,58,.12);
}

.btn-primary{
    background: linear-gradient(180deg, var(--sea), #0b7b85);
    color: #fff;
    border-color: rgba(255,255,255,.14);
}
.btn-secondary{
    background: linear-gradient(180deg, #9aa7b2, #7f8c97);
    color: #fff;
}
.btn-danger{
    background: linear-gradient(180deg, var(--red), #b61f2f);
    color: #fff;
}
.btn-link{
    background: none;
    color: var(--navy-2);
    text-decoration: underline;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    font-weight: 600;
}

/* -----------------------------
   Questions personnalisées — cartes
------------------------------ */
.question-block{
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px rgba(11,31,58,.08);
}

.question-block button{ margin-top: 6px; }

/* -----------------------------
   Tableaux — "carnet de bord"
------------------------------ */
.event-table, .table-responses{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 20px rgba(11,31,58,.08);
}

.event-table th, .event-table td,
.table-responses th, .table-responses td{
    border: 1px solid rgba(11,31,58,.10);
    padding: 10px;
    text-align: center;
}

.event-table th, .table-responses th{
    color: rgba(255,255,255,.95);
    background:
        linear-gradient(180deg, var(--navy-2), var(--navy));
    letter-spacing: .3px;
    font-weight: 700;
}

.event-table tr:nth-child(even) td,
.table-responses tr:nth-child(even) td{
    background: rgba(14,165,168,.05);
}

.total-cell{
    font-weight: 800;
    background: rgba(214,41,58,.08);
}

/* -----------------------------
   Statut — pastilles
------------------------------ */
.status{
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,.06);
}

.status.responded{
    background: rgba(14,165,168,.14);
    color: #0b5f63;
    border-color: rgba(14,165,168,.28);
}
.status.pending{
    background: rgba(214,41,58,.12);
    color: #7d1620;
    border-color: rgba(214,41,58,.22);
}

/* -----------------------------
   Onglets / Tabs — "panneaux"
------------------------------ */
.tabbar{
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.tabbar button{
    flex: 1;
    padding: 10px 12px;
    cursor: pointer;

    border: 1px solid var(--line);
    background: rgba(255,255,255,.65);
    border-radius: 999px;
    font-size: 1em;
    box-shadow: 0 10px 20px rgba(11,31,58,.08);
}

.tabbar button.active{
    background: linear-gradient(180deg, rgba(14,165,168,.20), rgba(14,165,168,.12));
    border-color: rgba(14,165,168,.35);
}

.tab-content{
    display: none;
    padding: 14px;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px rgba(11,31,58,.08);
}

.tab-content.active{ display: block; }

/* -----------------------------
   Messages admin — encadrés
------------------------------ */
.admin-message, .admin-message-form{
    border: 1px solid var(--line);
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.74));
    margin-top: 14px;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px rgba(11,31,58,.08);
}

/* -----------------------------
   Erreurs
------------------------------ */
.error{
    color: var(--red);
    font-weight: 800;
}

/* -----------------------------
   Responsive
------------------------------ */
@media (max-width: 768px){
    .layout{
        flex-direction: column;
        padding: 12px;
    }

    .sidebar{
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        overflow-x: auto;
        padding: 14px;
    }

    .sidebar h2{
        margin: 0;
        white-space: nowrap;
        font-size: 1.1em;
    }

    .sidebar ul{
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-left: 6px;
    }

    .sidebar ul li a{
        white-space: nowrap;
    }

    .sidebar-footer{
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
        white-space: nowrap;
    }

    .content{
        padding: 14px;
    }

    .tabbar{
        flex-direction: column;
    }
}

.sidebar-admin .sidebar-link {
    font-weight: bold;
    color: #b00020;
}

.sidebar-admin .sidebar-link {
    color: #c0392b;
    font-weight: bold;
}

.sidebar-coach .sidebar-link {
    color: #2980b9;
}

.sidebar-user .sidebar-link {
    color: #27ae60;
}


/* ==============================
   Onglet Fichiers - Version Ergonomique
============================== */

.tab-content#fichiers {
    padding: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-width: 600px;
    margin: 0 auto;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
}

.tab-content#fichiers h3,
.tab-content#fichiers h4 {
    margin-top: 0;
    color: #004080;
    font-weight: 600;
    line-height: 1.3;
}

.tab-content#fichiers form {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.tab-content#fichiers input[type="file"] {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1.5px solid #ccc;
    width: 100%;
    max-width: 300px;
    font-size: 1rem;
    transition: border-color 0.3s;
    cursor: pointer;
}

.tab-content#fichiers input[type="file"]:focus {
    outline: none;
    border-color: #0059b3;
    box-shadow: 0 0 5px rgba(0, 89, 179, 0.5);
}

.tab-content#fichiers button.btn-primary {
    background-color: #004080;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 64, 128, 0.4);
}

.tab-content#fichiers button.btn-primary:hover,
.tab-content#fichiers button.btn-primary:focus {
    background-color: #0059b3;
    box-shadow: 0 4px 12px rgba(0, 89, 179, 0.6);
    outline: none;
}

.tab-content#fichiers ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fafafa;
}

.tab-content#fichiers li {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.tab-content#fichiers li:last-child {
    border-bottom: none;
}

.tab-content#fichiers li:hover {
    background-color: #e6f0ff;
}

.tab-content#fichiers li a {
    color: #004080;
    text-decoration: none;
    flex-grow: 1;
    margin-right: 16px;
    word-break: break-word;
}

.tab-content#fichiers li a:hover,
.tab-content#fichiers li a:focus {
    text-decoration: underline;
    outline: none;
}

.tab-content#fichiers button.btn-danger {
    background-color: #c0392b;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.5);
}

.tab-content#fichiers button.btn-danger:hover,
.tab-content#fichiers button.btn-danger:focus {
    background-color: #e74c3c;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.7);
    outline: none;
}

/* Scrollbar personnalisée pour la liste */
.tab-content#fichiers ul::-webkit-scrollbar {
    width: 8px;
}

.tab-content#fichiers ul::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.tab-content#fichiers ul::-webkit-scrollbar-thumb {
    background: #004080;
    border-radius: 8px;
}

.tab-content#fichiers ul::-webkit-scrollbar-thumb:hover {
    background: #0059b3;
}

/* Message d’état ou d’erreur */
.tab-content#fichiers .status-message {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
}

.tab-content#fichiers .status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.tab-content#fichiers .status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive */
@media (max-width: 480px) {
    .tab-content#fichiers form {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-content#fichiers input[type="file"],
    .tab-content#fichiers button.btn-primary {
        width: 100%;
        margin-left: 0;
    }

    .tab-content#fichiers li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tab-content#fichiers button.btn-danger {
        align-self: flex-end;
    }
}

/* Carte du prochain événement */
.next-event-card {
    padding: 16px;
    margin-bottom: 24px;
    background: rgba(255,255,255,.85);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line);
}

.next-event-card h2 {
    margin-bottom: 12px;
    color: var(--sea);
}

.next-event-card p {
    margin: 4px 0;
    font-weight: 500;
}

.no-event {
    font-style: italic;
    color: var(--navy-2);
    margin-bottom: 24px;
}

/* Section Accès rapide */
.quick-access {
    margin-top: 20px;
}

.quick-access h2 {
    margin-bottom: 12px;
    color: var(--sea);
}

.quick-access-icons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.quick-access-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    width: 100px;
    border-radius: var(--radius-sm);
    background: rgba(14,165,168,.08);
    border: 1px solid rgba(11,31,58,.10);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--ink);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.quick-access-item img {
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
}

.quick-access-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(11,31,58,.18);
    filter: saturate(1.1);
}