/*
 * Palette de marque du Stade Montois — voir docs/charte-graphique.md
 * pour les règles d'usage (contraste, zones d'application, logo).
 * Ne jamais coder une couleur en dur ailleurs : passer par ces tokens.
 */
:root {
    --smo-yellow: #FFD203;
    --smo-yellow-dark: #E0B400; /* hover/active sur fond jaune */
    --smo-black: #231F20;
    --smo-gray: #818284;
    --smo-gray-light: #F2F2F2;
    --smo-white: #FFFFFF;

    --smo-bg: var(--smo-white);
    --smo-text: var(--smo-black);
    --smo-border: #E4E4E4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--smo-bg);
    color: var(--smo-text);
    line-height: 1.5;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/*
 * Le logo officiel (public/assets/img/logo-sm.png) a une encre NOIRE :
 * il ne doit jamais être posé directement sur un fond noir/foncé (voir
 * docs/charte-graphique.md). Le header public reste donc sur fond clair ;
 * un liseré jaune en pied de header apporte la touche de dynamisme.
 */
.site-header {
    background: var(--smo-white);
    color: var(--smo-black);
    border-bottom: 3px solid var(--smo-yellow);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.site-header .logo {
    display: flex;
    align-items: center;
}

/* Logo "SM" — cf. docs/charte-graphique.md pour les règles d'usage. */
.logo-sm {
    display: block;
    height: 2.5rem;
    width: auto;
}

/* Variante réduite (espaces contraints, ex. sidebar admin). */
.logo-sm--sm { height: 2rem; }

/*
 * Pastille claire pour poser le logo sur un fond noir/foncé (sidebar admin)
 * sans perdre son encre noire.
 */
.logo-chip {
    display: inline-flex;
    align-items: center;
    background: var(--smo-white);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    line-height: 0;
}

.site-header nav a {
    color: var(--smo-black);
    text-decoration: none;
    margin-left: 1.25rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.15rem;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    border-bottom-color: var(--smo-yellow);
}

.site-header nav a[href^="/admin"] { margin-left: 1.75rem; opacity: 0.75; }

/* --- Sous-menu déroulant (menu principal administrable) ------------------ */
.nav-dropdown { position: relative; display: inline-block; }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 1.25rem;
    background: var(--smo-white);
    border: 1px solid var(--smo-border);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    padding: 0.4rem 0;
    min-width: 180px;
    z-index: 20;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-menu a { margin: 0; padding: 0.4rem 0.9rem; border-bottom: none; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--smo-gray-light); }

main.container { padding: 2rem 1.25rem; min-height: 50vh; }

.footer-nav { margin-top: 0.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-nav a { color: var(--smo-gray); font-size: 0.85rem; }
.footer-nav a:hover { color: var(--smo-white); }
.footer-nav--liens { padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); }

.site-footer {
    background: var(--smo-black);
    color: var(--smo-gray-light);
    border-top: none;
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

.site-footer p { color: var(--smo-gray); margin: 0; }

.alert {
    padding: 0.75rem 1.25rem;
    margin: 1rem auto 0;
    max-width: 1080px;
    border-radius: 4px;
}

.alert-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.alert-success { background: #eaf7ed; color: #1e7b34; border: 1px solid #c3e6cb; }

.auth-form, .error-page { max-width: 420px; margin: 0 auto; }

.auth-form form { display: flex; flex-direction: column; gap: 0.75rem; }

.auth-form label { font-weight: 600; }

.auth-form input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--smo-border);
    border-radius: 4px;
}

/* Bouton primaire (CTA) : fond jaune de marque, texte noir (contraste). */
.auth-form button, .admin-topbar button {
    background: var(--smo-yellow);
    color: var(--smo-black);
    border: none;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.auth-form button:hover, .admin-topbar button:hover { background: var(--smo-yellow-dark); }

.checklist ul { padding-left: 1.25rem; }
.checklist code { background: #eee; padding: 0.1rem 0.35rem; border-radius: 3px; }

/* --- En-tête de page générique (annuaires, listes) ----------------------- */
.page-header { margin-bottom: 1.75rem; }
.page-header p { color: var(--smo-gray); }

.breadcrumb { color: var(--smo-gray); font-size: 0.85rem; margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--smo-black); }

/* --- Annuaire des sections (grille de cartes) ---------------------------- */
.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.section-card {
    display: block;
    background: var(--smo-white);
    border: 1px solid var(--smo-border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.section-card:hover, .section-card:focus-visible {
    border-color: var(--smo-yellow);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.section-card-img { width: 100%; height: 140px; object-fit: cover; display: block; }

.section-card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smo-black);
    color: var(--smo-yellow);
    font-size: 2.5rem;
    font-weight: 700;
}

.section-card-body { padding: 1rem; }
.section-card-body h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.section-card-body p { margin: 0; color: var(--smo-gray); font-size: 0.9rem; }

/* --- Fiche section --------------------------------------------------- */
.section-hero { margin-bottom: 1.5rem; }
.section-hero-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }

.section-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }

.section-block { margin-bottom: 1.75rem; }
.section-block h2 { font-size: 1.15rem; border-bottom: 2px solid var(--smo-yellow); display: inline-block; padding-bottom: 0.2rem; }

.section-infobox {
    background: var(--smo-gray-light);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.section-infobox h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.section-infobox p { margin: 0 0 0.4rem; font-size: 0.9rem; }

.social-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--smo-white);
    border: 1px solid var(--smo-gray);
    color: var(--smo-black);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover,
.social-link:focus-visible {
    background: var(--smo-yellow);
    border-color: var(--smo-yellow);
    color: var(--smo-black);
}

@media (max-width: 720px) {
    .section-columns { grid-template-columns: 1fr; }
}

/* --- Badges (base partagée public + admin) ------------------------------ */
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge-une { background: var(--smo-yellow); color: var(--smo-black); }
.badge-section { background: var(--smo-black); color: var(--smo-white); text-decoration: none; margin-bottom: 0.5rem; display: inline-block; }

/* --- Actualités : grille de cartes -------------------------------------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.news-grid--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.news-card {
    display: block;
    background: var(--smo-white);
    border: 1px solid var(--smo-border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.news-card:hover, .news-card:focus-visible {
    border-color: var(--smo-yellow);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.news-card-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.news-card-body { padding: 1rem; }
.news-card-body time { color: var(--smo-gray); font-size: 0.78rem; }
.news-card-body h2, .news-card-body h3 { margin: 0.35rem 0 0.4rem; font-size: 1.05rem; }
.news-card-body p { margin: 0; color: var(--smo-gray); font-size: 0.9rem; }

.news-card--featured {
    display: flex;
    align-items: stretch;
}
.news-card--featured .news-card-img {
    width: 280px;
    height: auto;
    min-height: 180px;
    flex-shrink: 0;
}
.news-card--featured .news-card-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-card--featured .news-card-body h3 { font-size: 1.25rem; margin-top: 0; }
.news-card--featured .news-card-body p { font-size: 0.95rem; }

@media (max-width: 560px) {
    .news-card--featured { flex-direction: column; }
    .news-card--featured .news-card-img { width: 100%; height: 180px; }
}

.pagination { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.pagination a { color: var(--smo-black); font-weight: 600; text-decoration: none; }
.pagination a:hover { text-decoration: underline; }

/* --- Fiche actualité --------------------------------------------------- */
.news-hero { margin-bottom: 1.25rem; }
.news-hero time { display: block; color: var(--smo-gray); font-size: 0.85rem; margin-bottom: 0.75rem; }
.news-hero-img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 8px; }

.news-resume { font-size: 1.1rem; color: var(--smo-gray); margin-bottom: 1.5rem; }
.news-content { line-height: 1.7; }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 1.5rem 0 0; }
.tag { background: var(--smo-gray-light); color: var(--smo-black); padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; }

/* --- Événements --------------------------------------------------------- */
.event-card .badge-section { margin: 0 0 0.35rem; }
.event-dates { color: var(--smo-gray); font-weight: 600; margin: 0.5rem 0 1.25rem; }

.event-cta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

/* --- Médiathèque publique ------------------------------------------------ */
.media-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.media-public-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--smo-black);
}

.media-public-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.media-public-tile:hover img { transform: scale(1.05); }

.media-public-tile--video { display: flex; align-items: center; justify-content: center; }

.media-public-play {
    color: var(--smo-yellow);
    font-size: 2rem;
}

.media-public-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: var(--smo-white);
    font-size: 0.8rem;
    padding: 1.5rem 0.6rem 0.5rem;
}

/* --- Liste de documents (fiches section/événement) --------------------- */
.document-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.document-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--smo-black);
    font-weight: 600;
    text-decoration: none;
}

.document-list a:hover { text-decoration: underline; }

.document-ext {
    background: var(--smo-black);
    color: var(--smo-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* --- Partenaires --------------------------------------------------------- */
.partenaires-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.partenaire-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 1rem;
    background: var(--smo-white);
    border: 1px solid var(--smo-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--smo-black);
    font-weight: 600;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.partenaire-tile:hover {
    border-color: var(--smo-yellow);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.partenaire-tile img { max-width: 100%; max-height: 60px; object-fit: contain; }

.partenaires-grid--compact .partenaire-tile { height: 70px; padding: 0.6rem; }
.partenaires-grid--compact .partenaire-tile img { max-height: 40px; }

/* --- Services externes (SIRH, bénévoles...) ---------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.service-card {
    display: block;
    background: var(--smo-white);
    border: 1px solid var(--smo-border);
    border-radius: 8px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.service-card:hover {
    border-color: var(--smo-yellow);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.service-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.service-card p { margin: 0 0 0.75rem; color: var(--smo-gray); font-size: 0.9rem; }
.service-card-cta { font-weight: 600; color: var(--smo-black); }

.services-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.services-quicklinks a {
    background: var(--smo-black);
    color: var(--smo-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: background-color 0.15s ease;
}

.services-quicklinks a:hover { background: var(--smo-yellow); color: var(--smo-black); }

/* --- Recherche globale --------------------------------------------------- */
.search-form { display: flex; gap: 0.5rem; margin-top: 1rem; max-width: 480px; }

.search-form input[type="search"] {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--smo-border);
    border-radius: 4px;
    font: inherit;
}

.search-results { list-style: none; padding: 0; margin: 0; }

.search-results li { padding: 0.85rem 0; border-bottom: 1px solid var(--smo-border); }
.search-results li:last-child { border-bottom: none; }
.search-results a { font-weight: 600; color: var(--smo-black); text-decoration: none; font-size: 1.05rem; }
.search-results a:hover { text-decoration: underline; }
.search-results p { margin: 0.3rem 0 0; color: var(--smo-gray); font-size: 0.9rem; }

/* --- Recherche compacte (en-tête) --------------------------------------- */
.header-search { display: flex; align-items: center; }
.header-search input[type="search"] {
    width: 160px;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--smo-border);
    border-radius: 999px 0 0 999px;
    font-size: 0.85rem;
    font: inherit;
}
.header-search button {
    border: 1px solid var(--smo-border);
    border-left: none;
    background: var(--smo-gray-light);
    border-radius: 0 999px 999px 0;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.header-search button:hover { background: var(--smo-yellow); }

/* --- Lien direct d'édition pour les admins connectés -------------------- */
/*
 * Sur une page publique (page libre, section, événement, actualité, lieu,
 * service...), un admin de section ou super-admin voit un accès direct vers
 * la fiche d'édition correspondante en back-office (cf. cahier des charges
 * §15). Le contrôleur ne transmet $editLink que si l'utilisateur connecté a
 * réellement le droit de modifier la ressource affichée.
 */
.admin-edit-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    background: var(--smo-yellow);
    color: var(--smo-black);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}
.admin-edit-fab:hover { background: var(--smo-yellow-dark); transform: translateY(-1px); }

/* Sur la liste des partenaires, le lien se pose en badge sur chaque tuile
   (une page peut afficher plusieurs partenaires gérés par des personnes
   différentes, un bouton flottant unique n'aurait pas de sens). */
.partenaire-tile-wrap { position: relative; }
.partenaire-edit-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--smo-yellow);
    color: var(--smo-black);
    border-radius: 50%;
    border: 2px solid var(--smo-white);
    text-decoration: none;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.partenaire-edit-badge:hover { background: var(--smo-yellow-dark); }