/* ════════════════════════════════════════════════════════════════════════════════ SongRep — Charte graphique « Liturgique chaleureux » Palette : crème + brun + doré · Typo : Lora (titres) + Inter (corps) ════════════════════════════════════════════════════════════════════════════════ */ /* ─── 1. VARIABLES ─────────────────────────────────────────────────────────── */ :root { /* Palette */ --c-bg: #f5efe6; /* crème papier — fond page */ --c-surface: #fbf7f1; /* blanc cassé chaud — fond cartes/tables */ --c-surface-alt: #ede4d3; /* sable plus marqué — bandeaux, headers de tables */ --c-border: #d4c5a8; /* sable bordures */ --c-border-soft: #e8dcc4; /* bordures discrètes */ --c-text: #2d2418; /* brun très foncé — texte principal */ --c-text-soft: #6b5d4a; /* brun moyen — texte secondaire / form-help (contraste 5.8:1 ✓ AA) */ --c-text-muted: #7a6a53; /* sable foncé — texte tertiaire / placeholders (contraste 4.6:1 ✓ AA — evol #38) */ --c-primary: #8b4513; /* sienna — titres, liens, headers */ --c-primary-dark: #6b3410; /* hover */ --c-primary-soft: #f0e5d4; /* fond doux primary (badges) */ --c-accent: #d4a017; /* doré — highlights, état actif */ --c-accent-dark: #a8800f; --c-accent-soft: #fdf3dd; --c-success: #558b2f; /* vert olive — état "validé", actions OK */ --c-success-soft: #e7eedf; --c-warning: #c77700; /* orange brûlé — état "en cours", warnings */ --c-warning-soft: #fbeed5; --c-danger: #a03e1c; /* terracotta — suppression, refus */ --c-danger-soft: #f3dcd2; --c-info: #4a6b8a; /* bleu ardoise — info, actions tech */ --c-info-soft: #dde6ef; /* Espacements (grille 8pt) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Typo */ --font-serif: 'Lora', 'Georgia', 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; /* Rayons & ombres */ --radius-sm: 3px; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(45, 36, 24, 0.06); --shadow: 0 2px 6px rgba(45, 36, 24, 0.08); --shadow-lg: 0 6px 20px rgba(45, 36, 24, 0.12); /* Layout */ --layout-max: 1100px; /* retour à la largeur historique : 1400 trop aéré sur grands écrans */ --sidebar-w: 280px; /* Filtre pour assombrir les images en mode sombre (drapeaux, logos, etc.). * En light : aucun effet. En dark : overridé pour atténuer les bg clairs. */ --img-filter: none; } /* ─── Mode sombre (evol #73) — palette "Liturgique chaleureux nocturne". * Activation : . Le toggle dans le header set/remove l'attribut. * L'écho est aussi déclenché par prefers-color-scheme via le script no-flash de layout.php. */ [data-theme="dark"] { /* Palette sombre — brun chaud sombre + crème claire + accents plus saturés */ --c-bg: #1f1a14; /* brun très foncé — fond page */ --c-surface: #2a221a; /* brun moyen sombre — fond cartes/tables */ --c-surface-alt: #352a20; /* un cran plus clair — bandeaux, headers de tables */ --c-border: #4a3d2e; --c-border-soft: #3a2f24; --c-text: #f0e8d8; /* crème claire — texte principal */ --c-text-soft: #c5b8a0; /* sable clair — texte secondaire */ --c-text-muted: #a89880; /* sable moyen — placeholders */ --c-primary: #d97942; /* sienna plus vif sur fond sombre */ --c-primary-dark: #ec8b54; /* hover plus clair (au lieu de plus foncé) */ --c-primary-soft: #4a342a; --c-accent: #f0b840; /* doré plus chaud */ --c-accent-dark: #ffd060; --c-accent-soft: #4a3f20; --c-success: #8bb764; --c-success-soft: #2c3d20; --c-warning: #e69845; --c-warning-soft: #4a3520; --c-danger: #d6593e; --c-danger-soft: #4a2820; --c-info: #7a9fc4; --c-info-soft: #2a3a4c; /* Ombres plus marquées sur fond sombre */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.55); color-scheme: dark; /* indique au browser pour les scrollbars + form natifs */ --img-filter: brightness(0.85); } /* Atténue légèrement les images en mode sombre (logos, drapeaux, fonds clairs). */ [data-theme="dark"] img:not(.no-dark-filter) { filter: var(--img-filter); } /* Aperçu ProPresenter : déjà en thème sombre par design, on garde son look quel que soit le thème. */ [data-theme="dark"] .slide-preview, [data-theme="dark"] .preview-slide, [data-theme="dark"] .preview-slide-empty { /* pas de changement nécessaire — fond sombre natif */ } /* Header : en dark on évite l'inversion (gradient sienna clair + texte foncé). On bascule sur un * gradient brun foncé avec texte crème, plus cohérent avec l'esthétique liturgique nocturne. * `html[data-theme="dark"]` + !important pour battre la cascade par défaut sans surprise. */ html[data-theme="dark"] .header-wrapper { background: linear-gradient(180deg, #3a2818 0%, #2a1c10 100%) !important; color: #f0e8d8 !important; } html[data-theme="dark"] .header .logo a, html[data-theme="dark"] .auth-block, html[data-theme="dark"] .auth-block a, html[data-theme="dark"] .auth-block .nav-group-toggle, html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] .breadcrumb li { color: #f0e8d8 !important; } html[data-theme="dark"] .breadcrumb { background: rgba(58, 40, 24, 0.5) !important; } /* Dropdown menus du nav : en dark, fond brun foncé + texte crème (cohérent avec le header). */ html[data-theme="dark"] .auth-block .nav-group-menu { background: #2a1c10 !important; border-color: rgba(240, 232, 216, 0.15) !important; } html[data-theme="dark"] .auth-block .nav-group-menu a { color: #f0e8d8 !important; } html[data-theme="dark"] .auth-block .nav-group-menu a:hover { background: rgba(240, 232, 216, 0.10) !important; } html[data-theme="dark"] .auth-block .nav-group-toggle:hover, html[data-theme="dark"] .auth-block .nav-group:hover .nav-group-toggle { background: rgba(240, 232, 216, 0.10) !important; } html[data-theme="dark"] .auth-block a:hover { background: rgba(240, 232, 216, 0.10) !important; } /* Footer : même traitement que le header. Le texte de base (--c-surface) et les liens * (--c-accent-soft) deviennent des bruns sombres en thème nuit → illisibles sur le fond * sombre. On force du texte crème + des liens dorés clairs. */ html[data-theme="dark"] .footer-wrapper { background: #1a140d !important; color: #e8dcc6 !important; } html[data-theme="dark"] .footer-wrapper a { color: var(--c-accent-dark) !important; } html[data-theme="dark"] .footer .searchform input { color: #f0e8d8 !important; } /* Toggle theme : icônes plus contrastées sur fond sombre du header */ html[data-theme="dark"] .theme-toggle { border-color: rgba(240, 232, 216, 0.3); color: #f0e8d8; } html[data-theme="dark"] .theme-toggle:hover { background: rgba(240, 232, 216, 0.1); border-color: var(--c-accent); } /* ─── 2. RESET MODERNE LÉGER ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-primary); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--c-primary-dark); text-decoration: underline; } button { font-family: inherit; cursor: pointer; } ul, ol { margin: 0; padding-left: 1.2em; } hr { border: none; height: 1px; background: var(--c-border-soft); margin: var(--space-6) 0; } /* Désactive l'ancien scanlines */ .scanlines { display: none !important; } /* ─── 3. TYPOGRAPHIE ──────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; color: var(--c-primary); margin: 0 0 var(--space-3) 0; line-height: 1.25; } h1 { font-size: 2.0rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.15rem; } h5 { font-size: 1rem; font-weight: 700; } h6 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } p { margin: 0 0 var(--space-3) 0; } strong, b { font-weight: 600; color: var(--c-text); } em, i { font-style: italic; } small { font-size: 0.85em; color: var(--c-text-soft); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-surface-alt); padding: 1px 6px; border-radius: var(--radius-sm); color: var(--c-text); } /* ─── 4. LAYOUT ───────────────────────────────────────────────────────────── */ .wrapper { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--space-4); } /* Header */ .header-wrapper { background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); color: var(--c-bg); box-shadow: var(--shadow); margin-bottom: var(--space-8); position: relative; z-index: 100; } .header { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .header .logo a { display: flex; align-items: center; gap: var(--space-2); color: var(--c-bg); font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; text-decoration: none; letter-spacing: 0.3px; } .header .logo a:hover { color: var(--c-accent-soft); text-decoration: none; } .header .logo a::before { content: "✠"; color: var(--c-accent); font-size: 1.3em; } .auth-block { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9rem; flex-wrap: wrap; } /* Bouton hamburger : caché sur desktop, visible sur petit écran (cf. @media en bas) */ .menu-toggle { display: none !important; /* desktop par défaut */ background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--c-bg); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; line-height: 1; } .menu-toggle .ico-open { display: none; } .menu-toggle.is-open .ico-closed { display: none; } .menu-toggle.is-open .ico-open { display: inline; } .menu-toggle:hover { background: rgba(255, 255, 255, 0.18); } .auth-block a { color: var(--c-bg); text-decoration: none; padding: 4px 8px; border-radius: var(--radius-sm); transition: background .15s ease; } .auth-block a:hover { background: rgba(255,255,255,0.12); text-decoration: none; } .auth-block .sep { opacity: 0.4; } .auth-block .user-info { opacity: 0.85; font-style: italic; font-size: 0.85rem; } .auth-block .user-info a { padding: 0; } .auth-block .role-pill { display: inline-block; font-size: 0.7rem; padding: 1px 8px; margin-left: 4px; border-radius: 10px; background: rgba(212, 160, 23, 0.25); color: var(--c-accent-soft); font-style: normal; letter-spacing: 0.3px; text-transform: lowercase; } /* ─── Groupes de menu (Trames / Chants / Admin) ─────────────────────────── */ .auth-block .nav-group { position: relative; display: inline-flex; align-items: center; } .auth-block .nav-group-toggle { background: transparent; border: none; color: var(--c-bg); cursor: pointer; font: inherit; padding: 6px 10px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; } .auth-block .nav-group-toggle:hover, .auth-block .nav-group:hover .nav-group-toggle { background: rgba(255, 255, 255, 0.12); } .auth-block .nav-group-toggle .caret { font-size: 0.7em; opacity: 0.7; transition: transform .15s ease; } .auth-block .nav-group:hover .nav-group-toggle .caret { transform: translateY(1px); } .auth-block .nav-group-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--c-primary-dark); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-sm); padding: 4px 0; box-shadow: var(--shadow-lg); z-index: 250; margin-top: 2px; } .auth-block .nav-group:hover .nav-group-menu, .auth-block .nav-group:focus-within .nav-group-menu, .auth-block .nav-group.is-open .nav-group-menu { display: block; } .auth-block .nav-group-menu a { display: block; padding: 8px 14px; color: var(--c-bg); text-decoration: none; white-space: nowrap; border-radius: 0; font-size: 0.9rem; } .auth-block .nav-group-menu a:hover { background: rgba(255, 255, 255, 0.12); } .auth-block .orga-pill { display: inline-block; font-size: 0.7rem; padding: 1px 8px; margin-left: 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); color: var(--c-bg); font-style: normal; letter-spacing: 0.3px; font-family: var(--font-mono); } /* Intro de page */ .intro { font-family: var(--font-serif); font-size: 1.7rem; color: var(--c-primary); margin: 0 0 var(--space-5) 0; font-weight: 500; letter-spacing: 0.2px; } /* Layout principal : content + sidebar */ .content { background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); } /* Layout 2 colonnes pour fiche détail */ .layout-detail { display: grid; grid-template-columns: 1fr var(--sidebar-w); gap: var(--space-6); align-items: start; } .sidebar { display: flex; flex-direction: column; gap: var(--space-4); } .sidebox { background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-sm); } .widget-title { font-size: 0.85rem; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--c-text-soft); margin: 0 0 var(--space-3) 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border-soft); } .sidebox ul { list-style: none; padding: 0; margin: 0; } .sidebox li { padding: 4px 0; } /* Clearfix résiduel */ .clear { clear: both; } /* ─── 5. BOUTONS ──────────────────────────────────────────────────────────── */ .btn, button.btn, input.btn { display: inline-block; font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.2; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: all .15s ease; background: var(--c-surface-alt); color: var(--c-text); } .btn:hover { background: var(--c-border); text-decoration: none; } .btn-primary { background: var(--c-primary); color: var(--c-bg); } .btn-primary:hover { background: var(--c-primary-dark); color: var(--c-bg); } .btn-success { background: var(--c-success); color: #fff; } .btn-success:hover { background: #426a25; color: #fff; } .btn-danger { background: var(--c-danger); color: #fff; } .btn-danger:hover { background: #802f15; color: #fff; } .btn-info { background: var(--c-info); color: #fff; } .btn-info:hover { background: #3a546d; color: #fff; } .btn[disabled], button.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Petits boutons (action rows) */ .btn-mini { display: inline-block; font-family: var(--font-sans); font-size: 13px; font-weight: 500; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: all .15s ease; background: var(--c-surface-alt); color: var(--c-text); } .btn-mini:hover { background: var(--c-border); text-decoration: none; } .btn-mini.primary { background: var(--c-info); color: #fff; } .btn-mini.primary:hover { background: #3a546d; color: #fff; } .btn-mini.success { background: var(--c-success); color: #fff; } .btn-mini.success:hover { background: #426a25; color: #fff; } .btn-mini.danger { background: var(--c-danger); color: #fff; } .btn-mini.danger:hover { background: #802f15; color: #fff; } /* Bouton « ajouter » */ .btn-add { display: inline-block; background: var(--c-success); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; margin-top: var(--space-3); transition: background .15s ease; } .btn-add:hover { background: #426a25; color: #fff; text-decoration: none; } /* ─── 6. FORMULAIRES ─────────────────────────────────────────────────────── */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea { font-family: var(--font-sans); font-size: 14px; color: var(--c-text); background: var(--c-surface); /* var au lieu de #fff fixe → s'adapte au mode sombre (evol #73) */ border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); } input[disabled], select[disabled], textarea[disabled] { background: var(--c-surface-alt) !important; color: var(--c-text-soft) !important; } label { font-weight: 600; color: var(--c-text); display: block; margin-bottom: 4px; } .form-help { font-size: 0.85em; color: var(--c-text-soft); margin-top: 4px; } fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--c-bg); /* fond crème, plus foncé que .content surface, pour casser la mono-teinte */ } legend { font-family: var(--font-serif); font-size: 1.1rem; color: var(--c-primary); padding: 0 var(--space-2); background: var(--c-bg); /* match fond fieldset pour effet "découpé" */ } /* Checkbox / radio */ input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--c-primary); } /* ─── 7. ALERTES ─────────────────────────────────────────────────────────── */ .alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: var(--space-4); border: 1px solid; } .alert-success { background: var(--c-success-soft); border-color: var(--c-success); color: #2c4d18; } .alert-warning { background: var(--c-warning-soft); border-color: var(--c-warning); color: #6b3f00; } .alert-error, .alert-danger { background: var(--c-danger-soft); border-color: var(--c-danger); color: #6e2810; } .alert-info { background: var(--c-info-soft); border-color: var(--c-info); color: #2d4257; } /* Modificateur compact : alerte plus petite (font + padding réduits, marge inférieure réduite) — evol #68 */ .alert-sm { padding: 6px 10px; font-size: 0.9em; margin-bottom: var(--space-2); } /* ─── 8. BADGES / PILLS ──────────────────────────────────────────────────── */ .badge { display: inline-block; font-size: 0.75em; font-weight: 600; padding: 2px 10px; border-radius: 12px; background: var(--c-surface-alt); color: var(--c-text-soft); letter-spacing: 0.2px; border: 1px solid var(--c-border-soft); } .badge.success { background: var(--c-success-soft); color: #2c4d18; border-color: var(--c-success); } .badge.warning { background: var(--c-warning-soft); color: #6b3f00; border-color: var(--c-warning); } .badge.danger { background: var(--c-danger-soft); color: #6e2810; border-color: var(--c-danger); } .badge.info { background: var(--c-info-soft); color: #2d4257; border-color: var(--c-info); } .badge.accent { background: var(--c-accent-soft); color: #6b4d00; border-color: var(--c-accent); } .badge.primary { background: var(--c-primary-soft); color: var(--c-primary-dark); border-color: var(--c-primary); } /* Chips cliquables (lien) — variante plus marquée que .badge, used for tags/themes (evol #70). */ .chip { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: 13px; text-decoration: none; color: var(--c-text); background: var(--c-surface-alt); border: 1px solid var(--c-border-soft); transition: background 0.15s; } .chip:hover { background: var(--c-surface); text-decoration: none; } .chip-theme { background: var(--c-accent-soft, #fff3d6); color: var(--c-text); border: none; } .chip-theme:hover { background: var(--c-accent-soft); filter: brightness(0.95); } .chip-medley { background: var(--c-accent, #d4a017); color: #fff; font-size: 0.85em; font-weight: 600; border-radius: 3px; padding: 2px 8px; margin-right: 6px; border: none; } /* Boutons utilitaires (evol #70). */ .btn-link { background: none; border: none; color: var(--c-primary); text-decoration: underline; cursor: pointer; padding: 4px 0; font-size: 0.9em; } .btn-link:hover { color: var(--c-primary-dark); } .btn-close { border: none; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; color: var(--c-text-soft); } .btn-close:hover { color: var(--c-danger); } /* Layout standard pour les boutons d'action en bas de formulaire (evol #70). */ .form-actions { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; margin-top: var(--space-4); } .form-actions-right { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); } /* Rangée checkbox alignée à un label multi-ligne (evol #70). */ .checkbox-row { display: flex; align-items: flex-start; gap: 10px; } /* Toggle mode sombre (evol #73) — bouton dans le header. */ .theme-toggle { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; margin-right: var(--space-3); transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--c-surface-alt); border-color: var(--c-primary); } .theme-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* Affiche soleil en mode clair, lune en mode sombre */ .theme-icon-sun { display: inline; } .theme-icon-moon { display: none; } [data-theme="dark"] .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-moon { display: inline; } /* SVG icons (evol #71) — taille héritée de font-size, alignement vertical neutre. */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .icon-sm { width: 0.85em; height: 0.85em; } .icon-lg { width: 1.25em; height: 1.25em; } .icon-xl { width: 1.5em; height: 1.5em; } /* Coloration contextuelle via stroke="currentColor" ; on surcharge color */ .icon-danger { color: var(--c-danger); } .icon-success { color: var(--c-success); } .icon-warning { color: var(--c-warning); } .icon-muted { color: var(--c-text-soft); } /* ─── 9. TABLEAUX ─────────────────────────────────────────────────────────── */ table.data { width: 100%; border-collapse: collapse; background: var(--c-surface); } table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid var(--c-border-soft); text-align: left; vertical-align: middle; } table.data th { background: var(--c-surface-alt); font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: 0.3px; } table.data tbody tr:hover { background: var(--c-accent-soft); } table.data td.center { text-align: center; } table.data td.actions { white-space: nowrap; text-align: right; } table.data td.actions form { display: inline; margin: 0; padding: 0; } /* Actions sur plusieurs lignes (ex : liste des trames qui a beaucoup de boutons) */ table.data td.actions .action-line { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; } table.data td.actions .action-line + .action-line { margin-top: 4px; } table.data td.actions .action-line form { display: inline-flex; } table.data tr.self { background: var(--c-accent-soft); } /* ─── 10. CARTES / GRILLE HOME ────────────────────────────────────────────── */ .blog-wrap { margin-bottom: var(--space-6); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); } .post.format-standard, .blog-card { background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .post.format-standard:hover, .blog-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .post.format-standard .post-kicker { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 4px 0; display: flex; gap: var(--space-2); align-items: baseline; } .post.format-standard .post-kicker a { color: var(--c-text-soft); } .post.format-standard .post-kicker a:hover { color: var(--c-primary); text-decoration: none; } .post.format-standard .post-kicker .kicker-num { color: var(--c-accent-dark); font-weight: 700; } .post.format-standard h2.title, .post.format-standard h2 { font-size: 1.15rem; font-family: var(--font-serif); margin: 0 0 var(--space-2) 0; line-height: 1.3; } .post.format-standard h2 a { color: var(--c-primary); } .post.format-standard h2 a:hover { color: var(--c-primary-dark); text-decoration: none; } .post.format-standard p { color: var(--c-text-soft); font-size: 0.9rem; margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .post.format-standard .details { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--c-text-muted); border-top: 1px solid var(--c-border-soft); padding-top: var(--space-2); } .post.format-standard .seen a { color: var(--c-text-muted); } /* ─── 11. FOOTER ──────────────────────────────────────────────────────────── */ .footer-wrapper { background: var(--c-primary-dark); color: var(--c-surface); padding: var(--space-8) 0 var(--space-4) 0; margin-top: var(--space-10); font-size: 0.9rem; } .footer-wrapper a { color: var(--c-accent-soft); } .footer-wrapper a:hover { color: #fff; } .footer { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); } .footer-col h6 { color: var(--c-accent); margin-bottom: var(--space-3); font-size: 0.85rem; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-list li { padding: 3px 0; } .footer .searchform input { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--c-surface); } .footer .searchform input::placeholder { color: rgba(255,255,255,0.5); } .site-generator { max-width: var(--layout-max); margin: var(--space-6) auto 0 auto; padding: var(--space-3) var(--space-4) 0 var(--space-4); border-top: 1px solid rgba(255,255,255,0.15); text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.6); font-style: italic; } /* ─── 12. UTILITAIRES ─────────────────────────────────────────────────────── */ .text-muted { color: var(--c-text-muted); } .text-soft { color: var(--c-text-soft); } .text-center { text-align: center; } .text-right { text-align: right; } .text-xs { font-size: 0.75em; } .text-sm { font-size: 0.85em; } .text-md { font-size: 1em; } .text-lg { font-size: 1.15em; } .text-italic { font-style: italic; } .text-bold { font-weight: 600; } .text-nowrap { white-space: nowrap; } /* Margins — échelle --space-1..6 (4, 8, 12, 16, 20, 24px) */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .ml-0 { margin-left: 0; } .ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-3 { margin-left: var(--space-3); } .mr-0 { margin-right: 0; } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); } .my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); } .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); } .no-margin { margin: 0 !important; } /* Paddings courants */ .p-0 { padding: 0 !important; } .no-padding { padding: 0 !important; } /* Display */ .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-none { display: none !important; } /* Flex helpers */ .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1; } .flex-grow { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .gap-0 { gap: 0; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } /* Form/composant inline — pattern courant pour
qui n'occupe pas de bloc */ .form-inline { display: inline; margin: 0; padding: 0; } .full-width { width: 100% !important; float: none !important; } .w-full { width: 100%; } .empty-state { background: var(--c-surface); padding: var(--space-6); border-radius: var(--radius); color: var(--c-text-soft); text-align: center; border: 1px dashed var(--c-border); } /* ─── 13. DRAG-AND-DROP (SortableJS) ─────────────────────────────────────── */ .drag-handle { cursor: grab; color: var(--c-text-muted); font-size: 1.2em; font-weight: bold; padding: 0 4px; user-select: none; -webkit-user-select: none; display: inline-block; width: 18px; text-align: center; } .drag-handle:hover { color: var(--c-primary); } .drag-handle:active { cursor: grabbing; } /* Classes ajoutées par SortableJS pendant le drag */ .sortable-ghost { opacity: 0.5; background: var(--c-accent-soft) !important; } .sortable-chosen { background: var(--c-primary-soft) !important; } .sortable-drag { box-shadow: var(--shadow-lg); } /* Cartes draggables (section-card, lien-card dans edit_chant) */ .draggable-card { position: relative; } .draggable-card .drag-handle-card { cursor: grab; user-select: none; color: var(--c-text-muted); font-size: 1.3em; padding: 4px 8px; display: inline-block; border-radius: var(--radius-sm); } .draggable-card .drag-handle-card:hover { color: var(--c-primary); background: var(--c-bg); } .draggable-card .drag-handle-card:active { cursor: grabbing; } /* ─── 14. RESPONSIVE ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { .layout-detail { grid-template-columns: 1fr; } .intro { font-size: 1.4rem; } /* Bascule en menu hamburger : on cache la barre, le bouton apparaît */ .header { position: relative; } .menu-toggle { display: inline-flex !important; align-items: center; } .auth-block { display: none !important; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-primary-dark); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--space-4) var(--space-4) var(--space-4); box-shadow: var(--shadow-lg); border-top: 1px solid rgba(255, 255, 255, 0.12); z-index: 200; } .auth-block.menu-open { display: flex !important; } .auth-block.menu-open a { padding: 10px 12px; border-radius: var(--radius-sm); display: block; } .auth-block.menu-open a:hover { background: rgba(255, 255, 255, 0.12); } .auth-block.menu-open .sep { display: none; } .auth-block.menu-open .user-info { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: var(--space-2); } .auth-block.menu-open .user-info a { display: inline; padding: 0; } /* Sous-menus : affichage plat (toujours déroulés) sur mobile */ .auth-block.menu-open .nav-group { display: block; width: 100%; padding: 0; } .auth-block.menu-open .nav-group-toggle { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 0.8rem; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; cursor: default; background: transparent; } .auth-block.menu-open .nav-group-toggle:hover { background: transparent; } .auth-block.menu-open .nav-group-toggle .caret { display: none; } .auth-block.menu-open .nav-group-menu { display: block; position: static; background: transparent; border: none; box-shadow: none; padding: 0 0 var(--space-2) 0; margin: 0; min-width: auto; } .auth-block.menu-open .nav-group-menu a { padding: 8px 12px 8px 24px; /* indenté pour montrer la hiérarchie */ font-size: 0.95rem; } } @media (max-width: 600px) { body { font-size: 14px; } .content { padding: var(--space-4); } h1 { font-size: 1.6rem; } h2 { font-size: 1.4rem; } } /* ═══════════════════════════════════════════════════════════════════ Accessibilité (evol #36) ═══════════════════════════════════════════════════════════════════ */ /* Visuellement masqué mais accessible aux lecteurs d'écran */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lien "Aller au contenu" — masqué jusqu'au focus clavier */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--c-primary); color: #fff; padding: 8px 16px; z-index: 9999; text-decoration: none; font-weight: 600; border-radius: 0 0 4px 0; transition: top 0.15s; } .skip-link:focus { top: 0; outline: 3px solid var(--c-accent); outline-offset: -3px; } /* Fil d'Ariane (evol #43) */ .breadcrumb { padding: 6px var(--space-4); background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border-soft); font-size: 0.85em; } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; max-width: var(--layout-max, 1100px); margin: 0 auto; } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li + li::before { content: '›'; margin: 0 8px; color: var(--c-text-muted); } .breadcrumb a { color: var(--c-primary); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--c-text-soft); font-weight: 600; } /* Modale réutilisable (evol #53) */ .modal-overlay { position: fixed; inset: 0; background: rgba(45, 36, 24, 0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: modalFadeIn 0.15s ease-out; } .modal { background: var(--c-surface); border-radius: 8px; padding: 24px 28px; min-width: 320px; max-width: min(560px, 90vw); box-shadow: 0 12px 48px rgba(45, 36, 24, 0.3); animation: modalSlideIn 0.2s ease-out; } .modal-title { color: var(--c-primary); font-family: var(--font-serif); margin: 0 0 12px; font-size: 1.25rem; font-weight: 700; } .modal-body { color: var(--c-text); line-height: 1.5; margin-bottom: 8px; } .modal-body p { margin: 0 0 8px; } .modal-body p:last-child { margin-bottom: 0; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .modal-actions .btn { min-width: 100px; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Toast notifications (evol #62) — pile en bas à droite, auto-dismiss 3s. */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9500; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px)); pointer-events: none; } .toast { pointer-events: auto; padding: 12px 18px; border-radius: 6px; box-shadow: 0 4px 16px rgba(45, 36, 24, 0.18); font-size: 14px; font-weight: 500; color: #fff; background: var(--c-text, #2d2418); display: flex; align-items: center; gap: 10px; animation: toastSlideIn 0.25s ease-out; cursor: pointer; } .toast.toast-success { background: var(--c-success, #5a8c3a); } .toast.toast-error { background: var(--c-danger, #be321e); } .toast.toast-info { background: var(--c-info, #4a7b8f); } .toast.toast-hide { animation: toastSlideOut 0.2s ease-in forwards; } .toast .toast-icon { flex-shrink: 0; font-size: 18px; line-height: 1; } .toast .toast-msg { flex: 1; } @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* Touches kbd pour l'aide raccourcis (evol #52) */ kbd { display: inline-block; padding: 2px 7px; background: var(--c-surface-alt); border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 0.85em; color: var(--c-text); box-shadow: 0 1px 0 rgba(0,0,0,0.05); margin: 0 1px; } /* Scroll horizontal pour les tables larges sur petit écran (evol #51) */ .table-scroll-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; /* momentum scroll sur iOS */ } /* Indicateur visuel discret quand la table déborde */ .table-scroll-wrap::-webkit-scrollbar { height: 8px; } .table-scroll-wrap::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; } .table-scroll-wrap::-webkit-scrollbar-track { background: transparent; } /* Tri/filtre live des tables (evol #39) */ input.table-filter { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); } input.table-filter:focus { border-color: var(--c-accent); outline: none; box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.2); } table.data thead th .sort-arrow { display: inline-block; transition: opacity 0.15s; } table.data thead th:hover .sort-arrow { opacity: 0.7 !important; } /* Focus visible global au clavier — la souris ne déclenche pas le contour */ *:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 2px; } /* On retire l'outline natif du browser sur les inputs déjà stylés (boxshadow custom) */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }