/* ============================================================================= user.css — ASSO SEP (Joomla 6 / Cassiopeia child) Dernière MàJ : 28/02/2026 Objectif : un seul fichier lisible, maintenable et “modulaire”. - Les gros réglages (couleurs, rayons, largeurs) sont centralisés dans :root. - Les styles “page” sont scoppés (ex: .sep-confs-page, .sep-conf, .sep-biblio-app) pour éviter les effets de bord. TRADUCTIONS (FR ↔ langage tech) - “token” = réglage central (souvent une variable CSS : --sep-...) - “chip” = pastille / badge (info courte : date, lieu, places…) - “KPI” = carte d’info (repère visuel : lieu, horaires, places…) - “fallback” = valeur de secours : var(--x, valeur) COMMENTAIRES DEV vs PROD - Commentaires “normaux” : documentation utile (gardez-les) - Commentaires “DEV:” : notes temporaires (supprimables en prod) => en prod, vous pouvez supprimer ces lignes avec une recherche regex. TABLE DES BLOCS (recherche rapide dans Sublime : “BLOC 32”, “RÉGLAGE RAPIDE”, etc.) - 00 — Charte globale + TOKENS (variables :root) - 05 — Animations (data-animate + .sep-js) - 10 — Modal (backdrop/iframe/scroll lock) - 20 — Accueil (scopé .sep-home) - 30 — Agenda Conférences (scopé .sep-confs-page) - 31 — Agenda Ateliers (scopé .sep-ateliers-page) - 32 — Conférence (détail) - 33 — Atelier (détail) - 34 — Infos pratiques (KPI) - 35 — Déontologie - 37 — Bibliothèque (fonds JSON -> UI) - 38 — Bibliothèque (univers compact + overrides) - 40c — Historique (layout) - 42 — Timeline 3 fils ============================================================================= */ /* ============================================================================= JOOMLA 6 — Liste des "Classes de page" à renseigner (Page class) Où : Menu → (élément de menu) → Onglet "Options" / "Affichage de la page" → champ "Classe de page" Note : tu peux mettre PLUSIEURS classes, séparées par des espaces. But : scoper proprement le CSS par page (body.) et stabiliser le rendu. --------------------------------------------------------------------------- ✅ ACCUEIL - sep-home (Remplace l’usage de body.itemid-101 : plus stable) --------------------------------------------------------------------------- ✅ AGENDA CONFÉRENCES (page listing) - sep-confs-page (Le CSS est scoppé sous .sep-confs-page ; si tu mets cette classe au body, ça fonctionne même si tu oublies le wrapper dans l’article.) ✅ FICHE CONFÉRENCE (article détail) - sep-conf (À utiliser si tu veux des règles spécifiques aux fiches conférences.) --------------------------------------------------------------------------- ✅ AGENDA ATELIERS (page listing) - sep-ateliers-page ✅ FICHE ATELIER (article détail) - sep-atelier --------------------------------------------------------------------------- ✅ BIBLIOTHÈQUE (univers + pages) - sep-biblio (IMPORTANT : c’est la classe “thème bibliothèque” utilisée dans user.clean.css via :where(body.sep-biblio, body.itemid-110)…) - (optionnel) sep-biblio-page (À ajouter si tu veux que .sep-biblio-page puisse être porté par le body, au lieu d’un wrapper
dans l’article.) Exemple conseillé (bibliothèque) : "sep-biblio sep-biblio-page" --------------------------------------------------------------------------- ✅ INFOS PRATIQUES / LIEUX (si tu veux scoper via body) - sep-info-pratiques (Sinon, tu peux garder uniquement un wrapper HTML du type
…
dans l’article.) --------------------------------------------------------------------------- ✅ PAGES CADRE / ÉDITO - sep-deonto-page (Déontologie) - sep-history-page (Historique) - sep-team-page (Équipe / association) --------------------------------------------------------------------------- ⛔ À NE PAS RENSEIGNER MANUELLEMENT - itemid-XXX (ajouté automatiquement par Joomla) - sep-modal-open (classe d’état ajoutée/retirée par JS) ============================================================================= */ /* ########################################################################## BLOC 00 — CHARTE GLOBALE DU SITE Dernière MàJ : 28/02/2026 - Tokens (couleurs, rayons, rythme, largeurs) - Utilitaires typographiques (si souhaité) ########################################################################## */ /* ========================= TOKENS (charte légère) -> Réglages rapides ici ========================= */ :root{ /* ====================================================================== RÉGLAGES RAPIDES — Variables CSS (tokens) Dernière MàJ : 28/02/2026 Idée (mécanique “univers”) : - Les palettes sont définies ici, dans :root. - Chaque page/section peut les “mapper” dans des variables locales (ex: --agenda-accent, --part-accent, --biblio-accent) pour thématiser sans réécrire tous les styles. Astuce : dans Sublime Text → rechercher “--sep-” ou “RÉGLAGE RAPIDE”. ====================================================================== */ /* ========================= UNIVERS 00 — SITE (fond clair / accent violet) ========================= */ --sep-surface: #ffffff; --sep-surface-2: rgba(109, 40, 217, .06); --sep-ink: #1b1327; --sep-muted: #5b5566; --sep-line: rgba(27, 19, 39, .12); --sep-accent: #6d28d9; /* accent principal */ --sep-accent-2: #7c3aed; /* hover */ --sep-metal-gold: rgba(200,169,94,.55); /* doré doux */ --sep-metal-silver: rgba(203,213,225,.75);/* argenté doux */ /* ========================= UNIVERS 01 — TOPBAR / FOOTER (fond sombre) ========================= */ --sep-topbar-bg: #001B4C; --sep-topbar-text: #ffffff; --sep-topbar-pad-y: .5rem; /* hauteur visuelle (fine) */ --sep-topbar-pad-x: 1rem; --sep-footer-bg: var(--sep-topbar-bg); --sep-footer-text: var(--sep-topbar-text); --sep-footer-text-muted: rgba(255,255,255,.74); --sep-footer-link: rgba(255,255,255,.98); --sep-footer-link-hover: rgba(196,181,253,1); /* lavande (lisible sur fond violet/bleu) */ --sep-footer-link-size: .85rem; /* liens footer plus petits */ /* ========================= UNIVERS 02 — CONFÉRENCES (Partie 1 / Partie 2) RÉGLAGE RAPIDE : change seulement --sep-p1-accent et --sep-p2-accent si besoin. ========================= */ --sep-p1-accent: #0ea5e9; /* Partie 1 : bleu clair */ --sep-p1-tint: rgba(14,165,233,.10); --sep-p1-border: rgba(14,165,233,.26); --sep-p1-glow: rgba(14,165,233,.18); --sep-p2-accent: #7c3aed; /* Partie 2 : violet médiumnique */ --sep-p2-tint: rgba(124,58,237,.10); --sep-p2-border: rgba(124,58,237,.26); --sep-p2-glow: rgba(124,58,237,.18); /* ========================= UNIVERS 03 — AGENDA (listings conférences + ateliers) ========================= */ --sep-agenda-radius: 8px; --sep-agenda-gap: 1rem; /* ========================= UNIVERS 04 — ATELIERS (vert / ambre) ========================= */ --sep-at-accent: #0f766e; /* teal profond */ --sep-at-tint: rgba(15,118,110,.09); --sep-at2-accent: #f59e0b; /* ambre */ --sep-at2-tint: rgba(245,158,11,.10); /* ========================= UNIVERS 05 — BIBLIOTHÈQUE (UI compacte) ========================= */ --sep-biblio-radius: 0px; /* 0 = angles vifs */ --sep-biblio-border: rgba(27,19,39,.14); --sep-biblio-panel-bg: rgba(255,255,255,.78); --sep-biblio-panel-bg2: rgba(255,255,255,.92); --sep-biblio-panel-shadow: 0 10px 24px rgba(27,19,39,.06); --sep-biblio-field-bg: rgba(255,255,255,.94); --sep-biblio-field-border: rgba(27,19,39,.20); --sep-biblio-focus: rgba(109,40,217,.18); /* ========================= UNIVERS 06 — CAUSERIES (réservé / futur) -> Palette en attente : sans impact tant que non utilisée. ========================= */ --sep-caus-accent: #db2777; --sep-caus-tint: rgba(219,39,119,.10); /* ========================= RYTHME / LAYOUT (général) ========================= */ --sep-radius: 6px; --sep-radius-lg: 10px; /* ========================= UI — rayons & ombres (charte) -> Ajuste ici pour homogénéiser cards / boutons / champs. ========================= */ --sep-ui-radius-card: var(--sep-radius-lg); --sep-ui-radius-btn: 14px; --sep-ui-radius-btn-pill: 999px; --sep-ui-radius-field: 10px; --sep-ui-radius-modal: 14px; --sep-ui-shadow-card: 0 8px 30px rgba(27, 19, 39, .06); --sep-ui-shadow-card-hover: 0 14px 40px rgba(27, 19, 39, .10); --sep-max: 68ch; /* confort lecture */ --sep-lh: 1.85; /* interligne généreux */ /* Largeur container “long form” (conf/intervenants) */ --sep-container: 1060px; /* ajuste si besoin */ --sep-gutter: 12px; /* padding latéral */ /* Intervenants : tokens portrait (ajustables en 1 endroit) */ --sep-portrait-h: clamp(220px, 32vw, 360px); --sep-portrait-aspect: 4 / 5; --sep-portrait-radius: 8px; /* ========================= UNIVERS 07 — HEADER / NAV ========================= */ --sep-nav-bg-1: #4c1d95; --sep-nav-bg-2: #6d28d9; --sep-nav-ink: rgba(255,255,255,.94); --sep-nav-ink-dim: rgba(255,255,255,.78); --sep-wave-opacity: .22; /* ========================= UNIVERS 08 — ATELIERS (UI) ========================= */ --sep-atel-radius: 6px; --sep-atel-edge: 5px; --sep-atel-shadow: 0 10px 24px rgba(27,19,39,.06); /* ========================= UNIVERS 09 — ACCUEIL (HERO) ========================= */ /* Même photo sur tous les écrans : on pilote le hero par un ratio d’image. */ --sep-home-hero-ar: 16 / 9; /* À ajuster au ratio réel de l’image (largeur/hauteur) */ --sep-home-hero-max-h: 620px; /* garde-fou desktop (optionnel) */ /* (Legacy / utile ailleurs) : hauteur “confort” si tu en as besoin */ --sep-home-hero-h: clamp(340px, 52vh, 620px); /* Position verticale du bandeau de mots (en % de hauteur du hero) */ --sep-home-hero-words-y: 58%; --sep-home-hero-ar: 16 / 9; --sep-home-hero-max-h: 620px; /* Filtrage image HERO (Accueil) : homogénéiser desktop vs mobile */ --sep-home-hero-filter-lg: brightness(1.00) contrast(1.12) saturate(1.08); --sep-home-hero-filter-sm: brightness(1.05) contrast(1.08) saturate(1.06); /* Couleur des mots sur la photo */ --sep-home-hero-words-color: rgba(76,29,149,.90); } /* ========================= Typo / rythme (utilitaires) ========================= */ .sep-section{ padding-block: clamp(2.2rem, 5vw, 4.2rem); } .sep-h2{ font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; margin-bottom: 1rem; }