/*
* 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;
/*
* Arrondis et ombres, configurables depuis /admin/apparence/templates
* (App\Models\Template — clés rayon_cartes/ombre_cartes/rayon_boutons/
* ombre_boutons). Valeurs par défaut = apparence actuelle du site, donc
* aucun changement tant qu'aucun template n'est actif.
*/
--smo-radius-card: 8px;
--smo-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.08);
--smo-radius-btn: 4px;
--smo-shadow-btn: none;
/*
* Fond de la classe .container, configurable depuis /admin/parametres
* (§ "Apparence du site" — App\Models\Parametre, clé
* apparence_couleur_fond_container). Transparent tant qu'aucune
* valeur n'est enregistrée ; surchargée en inline dans par
* app/Views/layouts/main.php quand un administrateur en définit une.
*/
--smo-container-bg: transparent;
/*
* Largeur des boutons image du menu (App\Models\MenuItem), configurable
* depuis /admin/parametres (§ "Apparence du site" — clés
* menu_image_largeur_desktop / menu_image_largeur_mobile). Valeurs de
* secours ci-dessous ; toujours surchargées en inline dans par
* app/Views/layouts/main.php avec la valeur réellement enregistrée.
*/
--smo-menu-img-width-desktop: 2.5rem;
--smo-menu-img-width-mobile: 2.75rem;
}
* { box-sizing: border-box; }
/*
* Accessibilité (RGAA) — utilitaires partagés site public + back-office
* (admin.css réutilise ces mêmes classes, app.css étant toujours chargé en
* premier dans les deux gabarits).
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -3rem;
left: 0.5rem;
z-index: 1000;
padding: 0.6rem 1rem;
background: var(--smo-black);
color: var(--smo-white);
border-radius: 0 0 6px 6px;
text-decoration: none;
transition: top 0.15s ease;
}
.skip-link:focus {
top: 0;
}
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;
background: var(--smo-container-bg);
}
/*
* 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;
/* nowrap : le logo reste sur la même ligne que le menu (le menu, lui,
peut passer à la ligne en interne s'il manque de place — voir
nav ci-dessous — plutôt que de faire descendre tout le bloc menu
sous le logo). */
flex-wrap: nowrap;
gap: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.site-header .logo {
display: flex;
align-items: center;
flex-shrink: 0; /* jamais compressé par le menu */
}
.site-header nav {
/* Prend le reste de la largeur et laisse ses liens revenir à la
ligne en interne (comme du texte) plutôt que de forcer tout le
bloc menu sous le logo. */
flex: 1 1 auto;
min-width: 0;
text-align: right;
}
/* 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; }
/*
* Logo du header public : même largeur que les boutons image du menu
* (--smo-menu-img-width-*, réglable depuis /admin/parametres), hauteur
* automatique — proportions du logo (656×731) proches de celles des
* boutons, il s'aligne donc visuellement sur eux.
*/
.site-header .logo-sm {
width: var(--smo-menu-img-width-desktop);
height: auto;
}
/*
* 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); }
/*
* Éléments de menu en "bouton image" (App\Models\MenuItem, champ "image" +
* affichage_desktop/affichage_mobile — voir menu_link() dans
* app/helpers.php). Le libellé reste l'info-bulle au survol (title) et le
* texte alternatif (alt) : jamais d'image sans équivalent texte.
* Les images ne sont pas recadrées : largeur fixée (--smo-menu-img-width-*,
* réglable depuis /admin/parametres — 40 px sur ordinateur et 44 px sur
* smartphone par défaut, cible tactile confortable — recommandation
* WCAG/Apple/Google), hauteur automatique pour conserver leurs proportions
* d'origine (ex: 288×334).
*/
.menu-link--image {
display: inline-flex;
align-items: center;
justify-content: center;
border-bottom: none;
padding-bottom: 0;
vertical-align: middle;
}
/*
* Espacement réduit pour les liens image en version ordinateur (10px au lieu
* des 20px par défaut de .site-header nav a) — sélecteur préfixé par
* ".site-header nav a" pour garantir la priorité sur cette règle générale,
* même raisonnement de spécificité qu'expliqué plus bas pour
* .menu-link--desktop-only.
*/
.site-header nav a.menu-link--image.menu-link--desktop-only {
margin-left: 0.625rem; /* 10px */
}
.menu-link-img {
display: block;
width: var(--smo-menu-img-width-desktop);
height: auto;
border-radius: 4px;
}
/*
* Affichage réglable indépendamment par support (ordinateur / smartphone) :
* quand les deux réglages d'un élément diffèrent, menu_link() génère deux
* liens (un par support) et seul le CSS ci-dessous, selon la largeur
* d'écran, décide lequel s'affiche — la détection de support n'étant pas
* possible côté serveur au moment du rendu.
*
* Sélecteurs préfixés par "a" (élément + classe, spécificité 0,1,1) pour
* que ce masquage l'emporte de façon certaine sur .menu-link--image
* ci-dessus (classe seule, 0,1,0), quel que soit l'ordre des règles dans
* la feuille de style — plutôt que de dépendre de l'ordre de déclaration
* entre deux sélecteurs de même spécificité, fragile face à un futur
* réagencement du fichier.
*/
a.menu-link--desktop-only,
a.menu-link--mobile-only { display: none; }
@media (min-width: 721px) {
a.menu-link--desktop-only.menu-link--texte { display: inline; }
a.menu-link--desktop-only.menu-link--image { display: inline-flex; }
}
@media (max-width: 720px) {
a.menu-link--mobile-only.menu-link--texte { display: inline; }
a.menu-link--mobile-only.menu-link--image { display: inline-flex; }
.menu-link-img { width: var(--smo-menu-img-width-mobile); height: auto; }
.site-header .logo-sm { width: var(--smo-menu-img-width-mobile); }
}
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; }
.footer-infos { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-infos-nom { color: var(--smo-white); font-weight: 700; margin: 0 0 0.35rem; }
.footer-infos-description { max-width: 640px; margin: 0 0 0.35rem; }
.footer-infos-contact { margin: 0; }
.footer-infos-contact a { color: var(--smo-gray-light); }
.footer-infos-contact a:hover { color: var(--smo-white); }
.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: var(--smo-radius-card);
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: var(--smo-shadow-card);
}
.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; }
/* Nom de la section et icônes de réseaux sociaux sur la même ligne. */
.section-hero-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.section-hero-title h1 { margin: 0; }
.section-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
.section-block {
margin-bottom: 1.75rem;
padding: 1.25rem 1.5rem;
background: var(--smo-white);
border: 1px solid var(--smo-border);
border-radius: var(--smo-radius-card);
}
.section-block h2 { margin-top: 0; font-size: 1.15rem; border-bottom: 2px solid var(--smo-yellow); display: inline-block; padding-bottom: 0.2rem; }
.section-block > *:last-child { margin-bottom: 0; }
.section-infobox {
background: var(--smo-gray-light);
border: 1px solid var(--smo-border);
border-radius: var(--smo-radius-card);
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; }
/*
* Contenu produit par l'éditeur riche (TinyMCE, cf.
* public/assets/js/richtext-editor.js) et nettoyé par App\Core\HtmlSanitizer
* (App\helpers::markdown()) : présentation de section, description
* d'événement/boutique/produit, etc. — jamais un
unique en sortie
* (AutoFormat.AutoParagraph peut produire plusieurs paragraphes, titres,
* listes ou un tableau), donc toujours affiché dans ce conteneur plutôt que
* ré-enveloppé dans un