/* =============================================
   AgriGreenSkills - espace de gestion
   =============================================
   Reprend l'identité de la plateforme publique (css/base.css à la racine) :
   Inter pour le texte, Roboto Slab pour les titres, corail en accent, vert pour l'actif,
   barre de navigation en pilule, cartes arrondies à filet léger.
   Les anciennes classes des pages (.petit, .card, .btn-primary, .log_box…) sont conservées et restylées.
*/

:root {
    /* Mêmes valeurs que css/base.css de la plateforme */
    --nav-bg: rgba(244, 243, 240, 0.72);
    --nav-border: rgba(200, 200, 190, 0.45);
    --text-primary: #222;
    --text-secondary: #666;
    --accent: #ed6d6a;
    --accent-light: rgba(237, 109, 106, 0.08);
    --green: #3a9e6e;
    --green-light: #e8f5ed;
    --surface-muted: #f9f9f6;
    /* Variantes plus foncées pour le texte blanc sur fond coloré et les liens (lisibilité) */
    --accent-texte: #c0403d;
    --green-fonce: #2b7a55;

    --bs-body-font-family: "Inter", system-ui, sans-serif;
    --bs-body-color: var(--text-primary);
    --bs-link-color: var(--accent-texte);
    --bs-link-color-rgb: 192, 64, 61;
    --bs-link-hover-color: #9c2f2c;
    --bs-link-hover-color-rgb: 156, 47, 44;
}

body {
    background: #fff;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--text-primary);
}

h1, h2, h3, h4, h5,
.card-title {
    font-family: "Roboto Slab", serif;
    font-weight: 400;
    color: #505050;
}
h2 { font-size: 2rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.35rem; }
h4, .card-title { font-size: 1.2rem; }

a { color: var(--accent-texte); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 2px;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #222;
    color: #fff;
    padding: 0.5rem 1rem;
}
.lien-evitement:focus { left: 0; color: #fff; }

/* ----- Barre du haut (pilule en verre dépoli, comme le site) ----- */

.gestion-barre {
    padding: 16px 24px 0;
}
.gestion-nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 28px;
    min-height: 62px;
    background: var(--nav-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--nav-border);
    border-radius: 35px;
    box-shadow: 0 2px 8px rgba(79, 110, 247, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.gestion-nav .logo img { height: 36px; width: auto; display: block; }
.gestion-nav-titre {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--green-fonce);
    background: var(--green-light);
    border-radius: 20px;
    padding: 4px 14px;
}

/* ----- Bandeau illustré ----- */

.gestion-hero {
    max-width: 1200px;
    margin: 20px auto 0;
    display: flex;
    align-items: stretch;
    background: #e8ecdb;              /* fond de l'illustration : le bandeau et l'image se fondent */
    border-radius: 35px;
    overflow: hidden;
    min-height: 190px;
}
/* Mêmes marges latérales que la barre du haut, centré au-delà de 1200px */
.gestion-barre + .gestion-hero { margin-left: max(24px, calc((100% - 1200px) / 2)); margin-right: max(24px, calc((100% - 1200px) / 2)); }
.gestion-hero-texte {
    flex: 1 1 50%;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gestion-hero-tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--green-fonce);
    background: #fff;
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 12px;
}
.gestion-hero-titre {
    font-family: "Roboto Slab", serif;
    font-size: 2.4rem;
    line-height: 1.1;
    color: #3b4a3a;
    margin-bottom: 8px;
}
.gestion-hero-desc {
    color: #4f5a4c;
    margin: 0;
    max-width: 32rem;
}
.gestion-hero-image {
    flex: 1 1 50%;
    background: url("../images/illustration-gestion.jpg") center / cover no-repeat;
    border-radius: 35px;
}

/* ----- Corps : même largeur que le site ----- */

.gestion-corps {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 24px;
}

/* Menu de gauche : liens du site (neutres, survol vert pâle, actif en vert plein) */
.gestion-menu {
    position: sticky;
    top: 16px;
    background: var(--surface-muted);
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 12px;
}
.gestion-menu ul { list-style: none; margin: 0; padding: 0; }
.gestion-menu li + li { margin-top: 4px; }
.gestion-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.gestion-menu a i { width: 1.1em; text-align: center; }
.gestion-menu a:hover {
    text-decoration: none;
    color: var(--green-fonce);
    background: var(--green-light);
    border-color: rgba(58, 158, 110, 0.22);
}
.gestion-menu a.active {
    color: #fff;
    background: var(--green-fonce);
    border-color: var(--green-fonce);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(58, 158, 110, 0.22);
}

.gestion-contenu { min-width: 0; }

/* Bloc utilisateur (login_appel_gestion.inc.php) en haut à droite du contenu */
.log_box {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 1rem;
}
.btn-profil, .btn-bleute {
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e5e0;
    background: var(--surface-muted);
    color: var(--text-primary);
}
.btn-profil:hover, .btn-bleute:hover {
    border-color: var(--green);
    color: var(--green-fonce);
    background: var(--green-light);
}

/* ----- Composants Bootstrap aux couleurs du site ----- */

.btn { border-radius: 20px; font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--green-fonce);
    --bs-btn-border-color: var(--green-fonce);
    --bs-btn-hover-bg: #22633f;
    --bs-btn-hover-border-color: #22633f;
    --bs-btn-active-bg: #22633f;
    --bs-btn-active-border-color: #22633f;
}
.btn-outline-primary, .btn-outline-secondary, .btn-secondary {
    --bs-btn-color: #555;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: var(--green-fonce);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-color: var(--green-fonce);
    --bs-btn-active-bg: var(--green-light);
    --bs-btn-active-border-color: var(--green);
}
.btn-danger { --bs-btn-bg: #c9363f; --bs-btn-border-color: #c9363f; }
.btn-group .btn { border-radius: 50rem; }
.btn-group form .btn { border-radius: 50rem; }

.card {
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
}
.card-header, .card-footer {
    background: var(--surface-muted);
    border-color: #eee;
}
.card-header h3 { margin: 0.5rem 0; }

/* Étiquette de date / auteur, dans l'esprit des tags de la plateforme */
.petit {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--green-fonce);
    background: var(--green-light);
    border-radius: 20px;
    padding: 2px 12px;
}

.badge {
    font-size: 0.8rem;
    font-weight: 600;
    background-color: var(--green-light) !important;
    color: var(--green-fonce);
    border-radius: 20px;
}

.form-control, .form-select { border-radius: 12px; border-color: #ddd; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 0.2rem rgba(58, 158, 110, 0.2);
}
.form-check-input:checked { background-color: var(--green-fonce); border-color: var(--green-fonce); }

.breadcrumb { font-size: 0.9rem; }
.breadcrumb a { color: var(--text-secondary); }

.alert { border-radius: 12px; }

/* Icônes de documents insérées via Redactor */
.fa-file-pdf, .fa-file-excel, .fa-file-word {
    padding-right: 7px;
    font-size: 1.3rem;
    color: var(--accent);
}

/* Formulaire de connexion (login.inc.php) */
#login_box { border-radius: 16px; border: 1px solid #eee; box-shadow: none !important; }

/* ----- Pied de page ----- */

.gestion-pied {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.europe {
    font-family: Arial, sans-serif;
    color: #0e2c8d;
    max-width: 450px;
    margin: auto;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .gestion-barre { padding: 12px 12px 0; }
    .gestion-nav { padding: 0 18px; }
    .gestion-nav-titre { display: none; }
    /* Mobile : illustration en bande au-dessus du texte, plus compacte */
    .gestion-barre + .gestion-hero { margin: 12px 12px 0; flex-direction: column-reverse; min-height: 0; }
    .gestion-hero-image { flex: none; height: 110px; }
    .gestion-hero-texte { padding: 18px 22px 22px; }
    .gestion-hero-titre { font-size: 1.7rem; }
    .gestion-corps { padding: 20px 16px; }
    .gestion-menu { position: static; }
    h2 { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}