/* =================================================================
   JF-CHRONOTRAIL — Gestion des Bénévoles
   Feuille de style principale, calée sur la charte graphique du site
   public (www.jf-chronotrail.fr) : Open Sans, teal #008c8c, cartes
   blanches à coins arrondis, boutons pleins teal/gris.
   ================================================================= */

:root {
    --jf-teal: #008c8c;
    --jf-teal-dark: #006d6d;
    --jf-teal-bg: #f4fdfd;
    --jf-gray-dark: #2c3e50;
    --jf-gray-text: #333333;
    --jf-border: #e0e0e0;
    --jf-success: #28a745;
    --jf-success-bg: #d4edda;
    --jf-success-text: #155724;
    --jf-danger: #a80000;
    --jf-danger-bg: #fdf2f2;
    --jf-warning: #ffc107;
}

body {
    font-family: "Open Sans", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: var(--jf-gray-text);
    line-height: 1.6;
    overflow-x: hidden; /* évite qu'un tableau large ne fasse déborder toute la page */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--jf-teal);
    margin-top: 0;
    font-weight: 700;
}

a { color: var(--jf-teal); }
a:hover { color: var(--jf-teal-dark); }

/* En-tête (logo + titre) — includes/header.php */
.jf-header {
    background: #ffffff;
    border-bottom: 3px solid var(--jf-teal);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.jf-header img { height: 42px; }
.jf-header .jf-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--jf-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .jf-header {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .jf-header img {
        height: 28px;
        flex-shrink: 0;
    }
    .jf-header .jf-header-title {
        font-size: 12px;
        letter-spacing: 0.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }
}

/* Navigation — includes/menu.php */
nav {
    background-color: var(--jf-gray-dark);
    padding: 10px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    row-gap: 6px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 2px;
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 9px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.2s ease;
}
nav a:hover { background: var(--jf-teal); color: #ffffff; }
nav a.actif { background: var(--jf-teal) !important; color: #ffffff !important; font-weight: 700; box-shadow: inset 0 -3px 0 rgba(255,255,255,0.7); }

/* Boutons d'action de ligne (Fiche/Voir, Modifier, Supprimer) — 3 couleurs
   nettement distinctes et un espacement suffisant, pour éviter les clics
   accidentels entre actions (notamment la suppression). */
.btn-action-voir, .btn-action-modifier, .btn-action-supprimer {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    margin: 2px 10px 2px 0;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.btn-action-voir { background: #e7f1ff !important; color: #0056b3 !important; border-color: #b6d4fe !important; }
.btn-action-modifier { background: #fff3cd !important; color: #856404 !important; border-color: #ffe69c !important; }
.btn-action-supprimer { background: #fdecea !important; color: #a80000 !important; border-color: #f1b0b7 !important; margin-right: 0; }
.btn-action-voir:hover { background: #cfe2ff !important; }
.btn-action-modifier:hover { background: #ffe69c !important; }
.btn-action-supprimer:hover { background: #f5c2c7 !important; }
nav span { color: #cfd8dc; font-size: 13px; }
nav span a { color: #ff8a80 !important; }
nav span a:hover { background: rgba(255,255,255,0.1); }

/* Conteneurs principaux */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
}

/* Tableaux de données */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 15px;
    background: #ffffff;
}
thead tr, table tr[style*="background: #f8f9fa"] {
    background-color: var(--jf-teal) !important;
}
thead th, table tr[style*="background: #f8f9fa"] th {
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.3px;
}
th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--jf-border);
}
tbody tr:hover { background-color: var(--jf-teal-bg); }

/* Formulaires */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="search"],
select, textarea {
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 9px 12px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--jf-teal);
    box-shadow: 0 0 0 2px rgba(0, 140, 140, 0.15);
}
label { color: var(--jf-gray-dark); font-weight: 600; font-size: 13px; }

/* Boutons — recouvre les styles inline déjà présents dans le code
   existant (background: #28a745 / #007bff / #ffc107) pour les
   harmoniser sur la teinte teal de la charte, sans réécrire les
   98 fichiers un par un. */
button,
a[style*="background: #28a745"], a[style*="background:#28a745"] {
    background: var(--jf-teal) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 5px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
    transition: background 0.2s ease, transform 0.15s ease;
}
button:hover,
a[style*="background: #28a745"]:hover, a[style*="background:#28a745"]:hover {
    background: var(--jf-teal-dark) !important;
    transform: translateY(-1px);
}
a[style*="background: #007bff"], a[style*="background:#007bff"] { background: #2c3e50 !important; }
a[style*="background: #007bff"]:hover, a[style*="background:#007bff"]:hover { background: #1a242f !important; }
a[style*="background: #ffc107"] { background: var(--jf-warning) !important; color: #2c3e50 !important; }

/* Messages / alertes (succès, erreur) — recouvre les styles inline
   (background: #d4edda / #f8d7da) déjà présents dans le code. */
div[style*="background: #d4edda"] {
    background: var(--jf-success-bg) !important;
    color: var(--jf-success-text) !important;
    border-left: 5px solid var(--jf-success);
    border-radius: 6px;
    font-weight: 600;
}
div[style*="background: #f8d7da"] {
    background: var(--jf-danger-bg) !important;
    color: var(--jf-danger) !important;
    border-left: 5px solid var(--jf-danger);
    border-radius: 6px;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Parcours guidé par étapes (tableau de bord admin), inspiré de la
   structuration en 4 étapes de Vorg.fr : Personnaliser -> Lancer
   l'appel & piloter -> Affecter -> Communiquer & documents.
   --------------------------------------------------------------- */
.jf-step {
    display: flex;
    gap: 20px;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
}
.jf-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 39px;
    bottom: -20px;
    width: 2px;
    height: 20px;
    background: var(--jf-teal);
    opacity: 0.3;
}
.jf-step-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jf-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
.jf-step-content { flex: 1; }
.jf-step-content h3 { margin: 0 0 6px 0; }
.jf-step-content p { margin: 0 0 12px 0; color: #555; font-size: 14px; }
.jf-step-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--jf-gray-dark);
}
.jf-step-stats strong { color: var(--jf-teal); font-size: 16px; }
.jf-step-content .btn,
.jf-step-content a.btn {
    margin-right: 8px;
    margin-bottom: 6px;
    background: var(--jf-teal) !important;
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 5px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}
.jf-step-content .btn:hover { background: var(--jf-teal-dark) !important; }

@media (max-width: 700px) {
    .jf-step { flex-direction: column; }
    .jf-step:not(:last-child)::after { display: none; }
}