/* ========================================================================== Maison Constructive — Thème « Graphite & bleu profond » (surcouche Bootstrap) ========================================================================== Quatre thèmes + auto, deux polices, pilotés par data-* sur : - data-bs-theme : "light" | "dark" (résolu par PHP, et par JS en auto) - data-sk-theme-mode : "light" | "dark" | "high-contrast-light" | "high-contrast-dark" | "auto" - data-sk-font : "normal" | "easy-read" Tokens de base indexés sur data-bs-theme (couvre clair, sombre ET auto) ; les variantes contrastées surchargent ensuite via data-sk-theme-mode. Palette « Graphite & bleu profond » : 10 jetons par mode, noms partagés. Polices 100 % locales (CSP font-src 'self'). ========================================================================== */ /* -------------------------------------------------------------------------- 01 · POLICES LOCALES -------------------------------------------------------------------------- */ /* Fraunces — accents, lede, citations (serif italique) */ @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; } /* Inter Tight — logo Maison Constructive (jamais basculé en lecture facile) */ @font-face { font-family: 'Inter Tight'; src: url('/assets/fonts/InterTight-VariableFont_wght.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url('/assets/fonts/InterTight-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; } /* Manrope — titres, corps, UI */ @font-face { font-family: 'Manrope'; src: url('/assets/fonts/Manrope-VariableFont_wght.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } /* JetBrains Mono — eyebrow, métadonnées, code */ @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 100 800; font-style: italic; font-display: swap; } /* Atkinson Hyperlegible Next — police « lecture facile » */ @font-face { font-family: 'AtkinsonHyperlegibleNext'; src: url('/assets/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonHyperlegibleNext'; src: url('/assets/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; } /* Atkinson Hyperlegible Mono — mono « lecture facile » */ @font-face { font-family: 'AtkinsonHyperlegibleMono'; src: url('/assets/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonHyperlegibleMono'; src: url('/assets/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; } /* -------------------------------------------------------------------------- 02 · TOKENS — familles, échelle, espacements, rayons, ombres -------------------------------------------------------------------------- */ :root { /* Familles « normale » (par défaut) */ --ff-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --ff-brand: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Familles « lecture facile » — basculées via data-sk-font */ --ff-easy: 'AtkinsonHyperlegibleNext', Verdana, Tahoma, sans-serif; --ff-easy-mono: 'AtkinsonHyperlegibleMono', ui-monospace, monospace; /* Familles actives (réaffectées par le switch police). --ff-brand n'est JAMAIS basculé : le logo garde Inter Tight. */ --sk-ff-display: var(--ff-display); --sk-ff-serif: var(--ff-serif); --sk-ff-sans: var(--ff-sans); --sk-ff-mono: var(--ff-mono); /* Échelle typographique — base 16px */ --fs-display: 3.75rem; /* 60px */ --fs-h1: 2.875rem;/* 46px */ --fs-h2: 2.125rem;/* 34px */ --fs-h3: 1.625rem;/* 26px */ --fs-h4: 1.25rem; /* 20px */ --fs-h5: 1.0625rem;/* 17px */ --fs-h6: 0.8125rem;/* 13px */ --fs-small: 0.8125rem;/* 13px */ --fs-caption: 0.6875rem;/* 11px */ /* Espacements — base 4px */ --s-0: 4px; --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; /* Rayons */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-full: 999px; /* Largeurs de contenu */ --cont: 1280px; --cont-narrow: 780px; } /* -------------------------------------------------------------------------- 03 · PALETTE — clair (défaut + data-bs-theme="light") Graphite & bleu profond — 10 jetons (cf. doc Palette v4) -------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { --c-ink: #14212e; /* Encre graphite — titres, texte principal */ --c-ink-2: #2a3038; /* Ardoise — paragraphes longs */ --c-muted: #6a7380; /* Gris béton — métadonnées, base du logo */ --c-line: #d8dde3; /* Gris ciment — filets, bordures */ --c-bg: #f4f5f7; /* Blanc chantier — fond principal */ --c-bg-2: #e6ebf0; /* Fond secondaire */ --c-paper: #ffffff; /* Blanc pur — cartes, fiches */ --c-graphite: #2f3842; /* Graphite — boutons primaires, bandeaux */ --c-graphite-2: #1a2028; /* Graphite profond */ --c-blue: #1f4e79; /* Bleu profond — primary, logo, liens */ --c-blue-2: #4a7097; /* Bleu médian — hover, séparateur du logo */ --c-blue-deep: #163a5c; /* Bleu profond (hover du primaire bleu) */ --c-signal: #f59f00; /* Jaune signal — CTA, étoiles, surligneur */ --c-signal-2: #ffc845; /* Jaune signal clair */ --c-success: #1f7a4d; --c-warning: #c17800; /* Signal lisible sur fond clair (texte) */ --c-danger: #b0432f; --c-info: var(--c-blue); --sh-1: 0 2px 6px rgba(20,24,29,.06), 0 1px 2px rgba(20,24,29,.04); --sh-2: 0 14px 28px -10px rgba(20,24,29,.22), 0 4px 8px rgba(20,24,29,.08); --sh-3: 0 32px 60px -20px rgba(20,24,29,.35), 0 8px 16px rgba(20,24,29,.12); /* Anneau de focus bleu */ --sk-focus-ring: 0 0 0 3px rgba(31,78,121,.25); /* RGB utiles pour les rgba() utilitaires */ --c-bg-rgb: 244,245,247; --c-ink-rgb: 20,33,46; --c-blue-rgb: 31,78,121; --c-signal-rgb: 245,159,0; /* Alias hérités (compat : composants/pages écrits pour « Noyer & Or ») */ --c-walnut: var(--c-blue); --c-walnut-2: var(--c-blue-deep); --c-walnut-rgb: var(--c-blue-rgb); --c-terra: var(--c-signal); --c-terra-rgb: var(--c-signal-rgb); --c-ocre: var(--c-blue-2); --c-sage: var(--c-blue-2); --c-sage-2: var(--c-blue-2); --c-sage-rgb: var(--c-blue-rgb); --c-honey: var(--c-signal); --c-honey-rgb: var(--c-signal-rgb); --c-gold: var(--c-blue); --c-gold-2: var(--c-signal); --c-gold-3: var(--c-bg-2); --c-gold-rgb: var(--c-blue-rgb); --c-accent: var(--c-signal); --c-accent-rgb: var(--c-signal-rgb); } /* -------------------------------------------------------------------------- 04 · PALETTE — sombre (data-bs-theme="dark", couvre aussi auto-nuit) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --c-ink: #e6ebf0; /* Brume claire */ --c-ink-2: #c8cfd8; /* Brume assourdie */ --c-muted: #8a93a0; /* Gris béton clair */ --c-line: #2a3038; /* Filet graphite */ --c-bg: #0e1217; /* Nuit graphite */ --c-bg-2: #1a2028; --c-paper: #14181d; /* Surface nuit */ --c-graphite: #3a4450; /* Graphite clair */ --c-graphite-2: #0a0d12; --c-blue: #6ea3d6; /* Bleu éclairci */ --c-blue-2: #7d9fc2; /* Bleu médian clair */ --c-blue-deep: #3a6790; --c-signal: #ffc845; /* Jaune signal (refroidi) */ --c-signal-2: #ffd66b; --c-success: #5bbd8c; --c-warning: #ffc845; --c-danger: #e08a76; --c-info: var(--c-blue); --sh-1: 0 2px 6px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --sh-2: 0 14px 28px -10px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4); --sh-3: 0 32px 60px -20px rgba(0,0,0,.7), 0 8px 16px rgba(0,0,0,.5); --sk-focus-ring: 0 0 0 3px rgba(110,163,214,.4); --c-bg-rgb: 14,18,23; --c-ink-rgb: 230,235,240; --c-blue-rgb: 110,163,214; --c-signal-rgb: 255,200,69; --c-gold-3: var(--c-bg-2); } /* -------------------------------------------------------------------------- 05 · VARIANTES CONTRASTÉES — surchargent la base (placées après) -------------------------------------------------------------------------- */ [data-sk-theme-mode="high-contrast-light"] { --c-ink: #000000; --c-ink-2: #000000; --c-muted: #333333; --c-line: #000000; --c-bg: #ffffff; --c-bg-2: #f2f2f2; --c-paper: #ffffff; --c-graphite: #1a1f26; --c-graphite-2: #000000; --c-blue: #0b3a63; --c-blue-2: #0b3a63; --c-blue-deep: #07203a; --c-signal: #7a5200; --c-signal-2: #7a5200; --c-warning: #7a5200; --c-bg-rgb: 255,255,255; --c-ink-rgb: 0,0,0; --c-blue-rgb: 11,58,99; --c-signal-rgb: 122,82,0; --c-gold-3: #f0f2f5; } [data-sk-theme-mode="high-contrast-dark"] { --c-ink: #ffffff; --c-ink-2: #ffffff; --c-muted: #cccccc; --c-line: #ffffff; --c-bg: #000000; --c-bg-2: #0a0a0a; --c-paper: #000000; --c-graphite: #4a5460; --c-graphite-2: #000000; --c-blue: #8ec3f0; --c-blue-2: #8ec3f0; --c-blue-deep: #5a8fc0; --c-signal: #ffd000; --c-signal-2: #ffd000; --c-warning: #ffd000; --c-bg-rgb: 0,0,0; --c-ink-rgb: 255,255,255; --c-blue-rgb: 142,195,240; --c-signal-rgb: 255,208,0; --c-gold-3: #0a0a0a; } [data-sk-theme-mode^="high-contrast"] *:focus-visible { outline: 3px solid var(--c-blue) !important; outline-offset: 2px; } /* -------------------------------------------------------------------------- 06 · MAPPING VERS LES VARIABLES BOOTSTRAP (un seul bloc : tout est exprimé via les tokens --c-*, donc valable pour les 4 thèmes sans répétition) -------------------------------------------------------------------------- */ [data-bs-theme] { --bs-body-bg: var(--c-bg); --bs-body-bg-rgb: var(--c-bg-rgb); --bs-body-color: var(--c-ink-2); --bs-body-color-rgb: var(--c-ink-rgb); --bs-emphasis-color: var(--c-ink); --bs-secondary-color: var(--c-muted); --bs-secondary-bg: var(--c-bg-2); --bs-tertiary-color: var(--c-muted); --bs-tertiary-bg: var(--c-bg-2); --bs-border-color: var(--c-line); --bs-heading-color: var(--c-ink); --bs-link-color: var(--c-blue); --bs-link-color-rgb: var(--c-blue-rgb); --bs-link-hover-color: var(--c-blue-deep); --bs-link-hover-color-rgb: var(--c-blue-rgb); --bs-primary: var(--c-blue); --bs-primary-rgb: var(--c-blue-rgb); --bs-danger: var(--c-danger); --bs-success: var(--c-success); --bs-code-color: var(--c-blue); --bs-border-radius: var(--r-sm); /* Familles via Bootstrap */ --bs-body-font-family: var(--sk-ff-sans); --bs-font-monospace: var(--sk-ff-mono); } /* -------------------------------------------------------------------------- 07 · BASCULE DE POLICE (normal ↔ lecture facile) Note : --ff-brand (logo) est volontairement exclu de la bascule. -------------------------------------------------------------------------- */ [data-sk-font="easy-read"] { --sk-ff-display: var(--ff-easy); --sk-ff-serif: var(--ff-easy); --sk-ff-sans: var(--ff-easy); --sk-ff-mono: var(--ff-easy-mono); } [data-sk-font="easy-read"] body { letter-spacing: .015em; line-height: 1.7; } /* Lecture facile : on neutralise les italiques décoratives */ [data-sk-font="easy-read"] .sk-lede, [data-sk-font="easy-read"] .sk-pullquote, [data-sk-font="easy-read"] .sk-quote > blockquote, [data-sk-font="easy-read"] em { font-style: normal; } /* -------------------------------------------------------------------------- 08 · TYPOGRAPHIE DE BASE -------------------------------------------------------------------------- */ body { font-family: var(--sk-ff-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sk-ff-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--c-ink); } [data-sk-font="easy-read"] h1, [data-sk-font="easy-read"] h2, [data-sk-font="easy-read"] h3, [data-sk-font="easy-read"] h4, [data-sk-font="easy-read"] h5, [data-sk-font="easy-read"] h6 { letter-spacing: 0; font-weight: 800; } /* Accent serif italique (Fraunces) — dans les titres, surlignant un mot */ em, .sk-serif { font-family: var(--sk-ff-serif); font-style: italic; font-weight: 400; color: var(--c-blue); } code, kbd, samp, pre { font-family: var(--sk-ff-mono); } /* Lede / chapô éditorial */ .sk-lede { font-family: var(--sk-ff-serif); font-style: italic; font-weight: 400; font-size: 1.3125rem; line-height: 1.45; color: var(--c-ink-2); } /* Surtitre (eyebrow) */ .sk-eyebrow { font-family: var(--sk-ff-mono); font-size: var(--fs-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); } .sk-eyebrow.sk-eyebrow-gold { color: var(--c-blue); } .sk-eyebrow.sk-eyebrow-accent { color: var(--c-warning); } .sk-eyebrow.sk-eyebrow-sage { color: var(--c-blue-2); } /* Focus bleu global */ :focus-visible { outline: none; box-shadow: var(--sk-focus-ring); } /* -------------------------------------------------------------------------- 09 · LAYOUT GÉNÉRAL -------------------------------------------------------------------------- */ .sk-app { display: flex; flex-direction: column; min-height: 100vh; background: var(--c-bg); } .sk-main { flex: 1 0 auto; } .sk-content { padding: 1.5rem 0; } /* Lien d'évitement (skip link) */ .sk-skip-link { position: absolute; top: -48px; left: .5rem; z-index: 2000; background: var(--c-ink); color: var(--c-bg); padding: .5rem 1rem; border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; font-family: var(--sk-ff-mono); font-size: .8rem; } .sk-skip-link:focus { top: 0; } /* -------------------------------------------------------------------------- 10 · TOPBAR / HEADER -------------------------------------------------------------------------- */ .sk-topbar { background: var(--c-bg); border-bottom: 1px solid var(--c-line); } /* Filet éditorial bleu → signal */ .sk-topbar::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--c-blue) 0 45%, var(--c-signal) 45%); } /* Marque — logo chevron (toit) + libellé Inter Tight */ .sk-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--c-ink); } .sk-brand .sk-brand-mark { width: 38px; height: 38px; flex-shrink: 0; } .sk-brand .sk-brand-mark svg { width: 100%; height: 100%; display: block; } /* Libellé : police Inter Tight figée, jamais en lecture facile. « maison▪ » sur une ligne, « constructive » dessous. */ .sk-brand .sk-brand-name { font-family: var(--ff-brand); line-height: .9; display: inline-flex; flex-direction: column; justify-content: center; } .sk-brand-name .l1 { display: inline-flex; align-items: center; font-size: 1.125rem; font-weight: 700; letter-spacing: -.03em; color: var(--c-blue); } .sk-brand-name .l1 .sq { display: inline-block; width: 5px; height: 5px; background: var(--c-blue-2); margin-left: 3px; } .sk-brand-name .l2 { font-size: 1.125rem; font-weight: 400; letter-spacing: -.01em; color: var(--c-muted); } /* Navigation principale — boutons inclinés (skew), dégradé graphite → bleu */ .sk-nav { display: flex; gap: 4px; flex-wrap: wrap; } .sk-nav .sk-nav-link { font-family: var(--sk-ff-sans); font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: #fff; text-decoration: none; padding: 7px 14px; line-height: 1.1; display: inline-block; transform: skewX(-12deg); border: 1.5px solid transparent; transition: filter .15s ease; } .sk-nav .sk-nav-link > span { display: inline-block; transform: skewX(12deg); position: relative; } /* Fonds fixes : contraste constant quel que soit le thème. */ .sk-nav .sk-nav-link[data-c="1"] { background: #1a2028; color: #fff; } .sk-nav .sk-nav-link[data-c="2"] { background: #2f3842; color: #fff; } .sk-nav .sk-nav-link[data-c="3"] { background: #4a5460; color: #fff; } .sk-nav .sk-nav-link[data-c="4"] { background: #6a7380; color: #fff; } .sk-nav .sk-nav-link[data-c="5"] { background: #9099a5; color: #14212e; } .sk-nav .sk-nav-link[data-c="6"] { background: #1f4e79; color: #fff; } /* Sombre : on relève toute la rampe pour qu'aucun bouton (Annuaire = data-c 1) ne se confonde avec le fond sombre du header (#0e1217). */ [data-bs-theme="dark"] .sk-nav .sk-nav-link[data-c="1"] { background: #2f3842; } [data-bs-theme="dark"] .sk-nav .sk-nav-link[data-c="2"] { background: #3a4450; } [data-bs-theme="dark"] .sk-nav .sk-nav-link[data-c="3"] { background: #4a5460; } [data-bs-theme="dark"] .sk-nav .sk-nav-link[data-c="4"] { background: #5a6675; } [data-bs-theme="dark"] .sk-nav .sk-nav-link[data-c="5"] { background: #6a7380; color: #fff; } [data-bs-theme="dark"] .sk-nav .sk-nav-link[data-c="6"] { background: #1f4e79; } .sk-nav .sk-nav-link:hover { filter: brightness(1.08); } .sk-nav .sk-nav-link:hover > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: currentColor; } .sk-nav .sk-nav-link.active { outline: 2px solid var(--c-signal); outline-offset: 2px; } /* En lecture facile / contraste, on neutralise le skew (lisibilité) */ [data-sk-font="easy-read"] .sk-nav .sk-nav-link, [data-sk-theme-mode^="high-contrast"] .sk-nav .sk-nav-link { transform: none; } [data-sk-font="easy-read"] .sk-nav .sk-nav-link > span, [data-sk-theme-mode^="high-contrast"] .sk-nav .sk-nav-link > span { transform: none; } /* Contraste élevé : plus de fonds colorés. Item courant entièrement encadré, les autres simplement soulignés ; survol bien visible en couleur d'accent. */ [data-sk-theme-mode^="high-contrast"] .sk-nav .sk-nav-link { background: transparent; color: var(--c-ink); border-color: transparent; border-bottom: 2px solid var(--c-ink); } [data-sk-theme-mode^="high-contrast"] .sk-nav .sk-nav-link:hover { filter: none; background: var(--c-blue); color: var(--c-bg); border-color: var(--c-blue); } [data-sk-theme-mode^="high-contrast"] .sk-nav .sk-nav-link:hover > span::after { display: none; } [data-sk-theme-mode^="high-contrast"] .sk-nav .sk-nav-link.active { border: 2px solid var(--c-ink); outline: none; } /* Bouton « Affichage » (déclencheur offcanvas) — fond discret, rond bien droit */ .sk-prefs-btn { --bs-btn-color: var(--c-ink); --bs-btn-bg: rgba(var(--c-blue-rgb), .12); --bs-btn-border-color: var(--c-ink); --bs-btn-hover-color: var(--c-bg); --bs-btn-hover-bg: var(--c-ink); --bs-btn-hover-border-color: var(--c-ink); --bs-btn-active-bg: var(--c-ink); --bs-btn-active-border-color: var(--c-ink); position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: var(--r-full); font-size: 1.05rem; } /* Séparateur menu | réglage : centré dans l'espace, incliné comme les boutons */ .sk-prefs-btn::before { content: ""; position: absolute; left: -.6rem; top: 50%; width: 2px; height: 24px; background: var(--c-line); transform: translateY(-50%) skewX(-12deg); } [data-sk-font="easy-read"] .sk-prefs-btn::before, [data-sk-theme-mode^="high-contrast"] .sk-prefs-btn::before { transform: translateY(-50%); } /* Champ de recherche (topbar) */ .sk-search { position: relative; flex: 1 1 auto; max-width: 22rem; } .sk-search .sk-search-icon { position: absolute; top: 50%; left: .75rem; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; } .sk-search .form-control { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-ink); padding: .4rem .9rem .4rem 2.25rem; font-size: .85rem; } .sk-search .form-control::placeholder { color: var(--c-muted); opacity: 1; } .sk-search .form-control:focus { border-color: var(--c-blue); box-shadow: 0 0 0 .2rem rgba(var(--c-blue-rgb), .25); } /* -------------------------------------------------------------------------- 11 · OFFCANVAS PRÉFÉRENCES -------------------------------------------------------------------------- */ #skPrefs { background: var(--c-bg); color: var(--c-ink); } #skPrefs .offcanvas-title { font-family: var(--sk-ff-display); font-weight: 800; } #skPrefs h3 { font-family: var(--sk-ff-mono); font-size: var(--fs-caption); letter-spacing: .16em; color: var(--c-muted); } #skPrefs [data-sk-set-theme].active, #skPrefs [data-sk-set-font].active { --bs-btn-active-bg: var(--c-blue); --bs-btn-active-border-color: var(--c-blue); --bs-btn-active-color: #fff; background: var(--c-blue); border-color: var(--c-blue); color: #fff; } /* -------------------------------------------------------------------------- 12 · FOOTER ÉDITORIAL -------------------------------------------------------------------------- */ /* Bloc graphite profond — toujours sombre, dans les deux thèmes */ .sk-footer { flex-shrink: 0; background: var(--c-graphite-2); color: #c8cfd8; padding: 3rem 0 1.5rem; margin-top: 3rem; } [data-bs-theme="dark"] .sk-footer { background: #080b0f; } .sk-footer::before { content: ""; display: block; height: 3px; margin-bottom: 2.5rem; background: linear-gradient(90deg, var(--c-signal) 0 45%, var(--c-blue) 45%); } .sk-footer .sk-footer-brand { display: flex; align-items: center; gap: 12px; } .sk-footer .sk-footer-brand-mark { width: 44px; height: 44px; flex-shrink: 0; } .sk-footer .sk-footer-brand-mark svg { width: 100%; height: 100%; display: block; } /* Logo : adapte ses traits au fond sombre du footer */ .sk-footer .sk-footer-brand-mark svg path { stroke: #a8c5e0; } .sk-footer .sk-footer-brand-mark svg line { stroke: #6a7380; } .sk-footer .sk-footer-brand-name { font-family: var(--ff-brand); /* logo figé, jamais en lecture facile */ line-height: .9; display: inline-flex; flex-direction: column; justify-content: center; } .sk-footer .sk-footer-brand-name .l1 { display: inline-flex; align-items: center; font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; color: #fff; } .sk-footer .sk-footer-brand-name .l1 .sq { display: inline-block; width: 6px; height: 6px; background: var(--c-blue-2); margin-left: 3px; } .sk-footer .sk-footer-brand-name .l2 { font-size: 1.375rem; font-weight: 400; letter-spacing: -.01em; color: #9099a5; } .sk-footer .sk-footer-about { color: #9099a5; font-size: .9rem; line-height: 1.55; max-width: 36ch; margin: 1rem 0 0; } .sk-footer h2 { font-family: var(--sk-ff-sans); font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 .75rem; } .sk-footer ul { list-style: none; padding: 0; margin: 0; } .sk-footer li { padding: .15rem 0; } .sk-footer a { color: #9099a5; text-decoration: none; font-size: .9rem; } .sk-footer a:hover { color: var(--c-signal); text-decoration: none; } .sk-footer .sk-footer-legal { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2.25rem; padding-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; font-family: var(--sk-ff-mono); font-size: .75rem; color: #6a7380; } .sk-footer .sk-footer-legal a { color: #6a7380; font-size: .75rem; } .sk-footer .sk-footer-legal a:hover { color: var(--c-signal); } .sk-footer .sk-footer-legal ul { display: flex; gap: 1rem; flex-wrap: wrap; } /* Modes contrastés : le footer suit la palette d'accessibilité */ [data-sk-theme-mode^="high-contrast"] .sk-footer { background: var(--c-bg); color: var(--c-ink); border-top: 2px solid var(--c-line); } [data-sk-theme-mode^="high-contrast"] .sk-footer::before { background: var(--c-line); } [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-brand-name .l1, [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-brand-name .l2, [data-sk-theme-mode^="high-contrast"] .sk-footer h2, [data-sk-theme-mode^="high-contrast"] .sk-footer a, [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-about, [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-legal, [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-legal a { color: var(--c-ink); } [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-brand-mark svg path { stroke: var(--c-blue); } [data-sk-theme-mode^="high-contrast"] .sk-footer .sk-footer-brand-mark svg line { stroke: var(--c-muted); } /* -------------------------------------------------------------------------- 13 · BOUTONS ÉDITORIAUX (variantes Bootstrap-natives via --bs-btn-*) -------------------------------------------------------------------------- */ /* Texte = couleur de fond (opposé de l'encre) : reste lisible dans les 2 thèmes. Clair → fond encre sombre + texte clair ; sombre → fond clair + texte sombre. */ .btn-ink { --bs-btn-color: var(--c-bg); --bs-btn-bg: var(--c-ink); --bs-btn-border-color: var(--c-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-blue-deep); --bs-btn-hover-border-color: var(--c-blue-deep); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-blue-deep); --bs-btn-active-border-color: var(--c-blue-deep); } /* Primaire graphite (CTA « demander un devis ») */ .btn-graphite { --bs-btn-color: #fff; --bs-btn-bg: var(--c-graphite); --bs-btn-border-color: var(--c-graphite); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-graphite-2); --bs-btn-hover-border-color: var(--c-graphite-2); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-graphite-2); --bs-btn-active-border-color: var(--c-graphite-2); } /* Bleu profond (action secondaire) — alias des anciens .btn-walnut/.btn-gold */ .btn-blue, .btn-walnut, .btn-gold { --bs-btn-color: #fff; --bs-btn-bg: var(--c-blue); --bs-btn-border-color: var(--c-blue); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-blue-deep); --bs-btn-hover-border-color: var(--c-blue-deep); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-blue-deep); --bs-btn-active-border-color: var(--c-blue-deep); } /* Alias hérités décoratifs → bleu médian */ .btn-sage { --bs-btn-color: #fff; --bs-btn-bg: var(--c-blue-2); --bs-btn-border-color: var(--c-blue-2); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-blue); --bs-btn-hover-border-color: var(--c-blue); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-blue); --bs-btn-active-border-color: var(--c-blue); } /* Jaune signal (CTA « 3 devis gratuits ») — alias .btn-terra/.btn-accent/.btn-honey */ .btn-signal, .btn-honey, .btn-terra, .btn-accent { --bs-btn-color: #14212e; --bs-btn-bg: var(--c-signal); --bs-btn-border-color: var(--c-signal); --bs-btn-hover-color: #14212e; --bs-btn-hover-bg: var(--c-signal-2); --bs-btn-hover-border-color: var(--c-signal-2); --bs-btn-active-color: #14212e; --bs-btn-active-bg: var(--c-signal-2); --bs-btn-active-border-color: var(--c-signal-2); } .btn-ghost { --bs-btn-color: var(--c-ink); --bs-btn-bg: transparent; --bs-btn-border-color: var(--c-ink); --bs-btn-hover-color: var(--c-bg); --bs-btn-hover-bg: var(--c-ink); --bs-btn-hover-border-color: var(--c-ink); --bs-btn-active-color: var(--c-bg); --bs-btn-active-bg: var(--c-ink); --bs-btn-active-border-color: var(--c-ink); } /* Carte-lien — survol éditorial (réutilisable : raccourcis, invitations…) */ .sk-card-link { color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sk-card-link:hover { transform: translateY(-3px); border-color: var(--c-signal); box-shadow: var(--sh-2); } .sk-card-link:hover .bi-arrow-right { color: var(--c-blue); } /* Cards Bootstrap : fond papier + bordure visible */ .card { --bs-card-bg: var(--c-paper); --bs-card-border-color: var(--c-line); --bs-card-cap-bg: var(--c-bg-2); } /* Carte « localisation actuelle » — liseré bleu */ .sk-loc-current { border-left: 4px solid var(--c-blue); } /* Pastille d'icône (cartes, raccourcis) — touche bleue */ .sk-card-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-md); background: rgba(var(--c-blue-rgb), .12); color: var(--c-blue); font-size: 1.4rem; } /* Colonne de lecture centrée */ .sk-narrow { max-width: 52rem; margin-inline: auto; } /* Couleurs d'accent (utilitaires) */ .text-gold, .text-walnut, .text-blue { color: var(--c-blue) !important; } .text-sage { color: var(--c-blue-2) !important; } .text-terra, .text-signal { color: var(--c-warning) !important; } .text-honey { color: var(--c-warning) !important; } /* Grand nombre 404 — dégradé bleu profond → jaune signal */ .sk-404 { font-family: var(--ff-display); font-weight: 800; font-size: clamp(5rem, 18vw, 11rem); line-height: .9; letter-spacing: -.03em; background: linear-gradient(135deg, var(--c-blue), var(--c-signal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-sk-theme-mode^="high-contrast"] .sk-404 { background: none; -webkit-text-fill-color: currentColor; color: var(--c-ink); } /* ========================================================================== 14 · UTILITAIRES ÉDITORIAUX (préservés — utilisés par les pages/contenus) ========================================================================== */ /* Bandeau cookies (fixe en bas de page) */ .sk-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1080; background: var(--c-paper); border-top: 1.5px solid var(--c-ink); box-shadow: var(--sh-2); padding: 1rem 1.25rem; } /* Affichage debug GeoLite */ .sk-geo-card { font-family: var(--sk-ff-mono); } .sk-geo-card dt { font-weight: 600; } .sk-geo-card dd { margin-bottom: 0.25rem; } /* Page cookies — liste à puces sans bullet */ .sk-cookie-list { list-style: none; padding-left: 0; margin-bottom: 0; } .sk-cookie-list li { padding: .25rem 0; display: flex; align-items: baseline; } /* Figures illustrées dans le contenu éditorial */ .sk-img { display: block; margin: 1.25rem auto; max-width: 100%; } .sk-img > img { display: block; max-width: 100%; height: auto; border-radius: .25rem; } .sk-img > figcaption { font-size: .875rem; color: var(--c-muted); padding-top: .35rem; line-height: 1.4; text-align: center; } .sk-img > figcaption .sk-img-credit { display: block; font-size: .75rem; font-style: italic; opacity: .75; } .sk-img-th { width: 150px; } .sk-img-sm { width: 400px; } .sk-img-md { width: 800px; } .sk-img-full { width: 100%; max-width: 100%; } .sk-img-full > img { width: 100%; } .sk-img-placeholder { display: inline-block; padding: 0 .25rem; } /* Habillage texte autour d'une image */ .sk-wrap { margin: 1rem 0; } .sk-wrap::after { content: ""; display: table; clear: both; } .sk-wrap-left > .sk-img { float: left; margin: 0 1.25rem 1rem 0; } .sk-wrap-right > .sk-img { float: right; margin: 0 0 1rem 1.25rem; } .sk-wrap blockquote, .sk-wrap pre, .sk-wrap table, .sk-wrap ul, .sk-wrap ol { overflow: hidden; } @media (max-width: 575.98px) { .sk-wrap-left > .sk-img, .sk-wrap-right > .sk-img { float: none; margin: 1rem auto; } } /* Alignements de texte */ .sk-text-left { text-align: left; } .sk-text-center { text-align: center; } .sk-text-right { text-align: right; } .sk-text-justify { text-align: justify; } /* Soulignement décoratif (mark = surligneur signal) */ mark { background: linear-gradient(transparent 60%, var(--c-signal) 60%); color: inherit; padding: 0 2px; } /* Encarts colorés (callouts) */ .sk-callout { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid; border-radius: .25rem; background-color: var(--c-bg-2); } .sk-callout-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; } .sk-callout > :last-child { margin-bottom: 0; } .sk-callout-note { border-color: var(--c-muted); } .sk-callout-info { border-color: var(--c-blue); } .sk-callout-tip, .sk-callout-success { border-color: var(--c-success); } .sk-callout-warning { border-color: var(--c-signal); } .sk-callout-danger { border-color: var(--c-danger); } /* Citation avec attribution */ .sk-quote { margin: 1.5rem 0; } .sk-quote > blockquote { margin: 0; font-style: italic; font-family: var(--sk-ff-serif); } .sk-quote > figcaption { margin-top: .5rem; text-align: right; color: var(--c-muted); } /* Pullquote éditoriale */ .sk-pullquote { font-family: var(--sk-ff-serif); font-style: italic; font-weight: 400; font-size: 1.75rem; line-height: 1.3; padding: 1.5rem 0; border-top: 2px solid var(--c-graphite); border-bottom: 2px solid var(--c-graphite); margin: 2rem 0; color: var(--c-ink); } .sk-pullquote::before { content: "« "; color: var(--c-blue); font-weight: 800; } .sk-pullquote::after { content: " »"; color: var(--c-blue); font-weight: 800; } /* Section repliable (HTML5
) */ details { margin: 1rem 0; padding: .5rem .75rem; border: 1px solid var(--c-line); border-radius: .25rem; } details > summary { cursor: pointer; font-weight: 500; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: "▸"; display: inline-block; margin-right: .35em; transition: transform .15s ease; } details[open] > summary::before { transform: rotate(90deg); } /* Ancres invisibles pour la navigation en page */ .sk-anchor { display: block; scroll-margin-top: 4rem; } /* Bandeau de localisation + autocomplete partagé */ .sk-loc-banner { font-size: .95rem; } .sk-loc-suggest { z-index: 1050; max-height: 18rem; overflow-y: auto; } .sk-loc-suggest .list-group-item-action { cursor: pointer; } /* -------------------------------------------------------------------------- 15 · RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* Header mobile : menu empilé pleine largeur + bouton « Affichage » texté */ .sk-nav { flex-direction: column; gap: 8px; align-items: stretch; margin-top: .75rem; } .sk-nav .sk-nav-link { display: block; text-align: center; padding: 10px 16px; transform: none; } .sk-nav .sk-nav-link > span { transform: none; } .sk-prefs-btn::before { display: none; } .sk-prefs-btn { width: 100%; height: auto; display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .6rem; padding: .6rem 1rem; } .sk-prefs-label { font-weight: 600; } .sk-search { max-width: none; } } @media print { .sk-topbar, .sk-footer, .sk-cookie-banner, #skPrefs { display: none !important; } } /* ========================================================================== 16 · COMPOSANTS FRONT — listings, cartes, hero, fiche, tuiles Portés de la maquette « Site v4 » en classes .sk-*, branchés sur les tokens « Graphite & bleu profond » (aplats Meuble Déco recolorés en gamme froide). ========================================================================== */ /* --- Conteneur large éditorial (≈ .wrap maquette) --- */ .sk-container { max-width: var(--cont); margin: 0 auto; padding: 0 24px; } /* --- Section générique + en-tête de section --- */ .sk-section { padding: 3.5rem 0; border-bottom: 1px solid var(--c-line); } .sk-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; } .sk-section-head h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); margin: 0; } .sk-section-head h2 em, .sk-list-hero h1 em, .sk-home-hero h1 em, .sk-detail-hero h1 em { font-style: italic; color: var(--c-sage); } .sk-more { font-family: var(--sk-ff-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--c-ink); border-bottom: 1px solid var(--c-ink); padding-bottom: 2px; white-space: nowrap; } .sk-more:hover { color: var(--c-walnut); border-color: var(--c-walnut); } /* --- Champ de recherche « hero » --- */ .sk-search-big { display: flex; gap: .5rem; max-width: 40rem; margin: 0 0 1.25rem; } .sk-search-big input { flex: 1; border: 1.5px solid var(--c-ink); background: var(--c-paper); border-radius: var(--r-full); padding: .7rem 1.1rem; font: inherit; color: var(--c-ink); } .sk-search-big input::placeholder { color: var(--c-muted); } .sk-search-big input:focus { outline: none; border-color: var(--c-walnut); box-shadow: 0 0 0 .2rem rgba(var(--c-walnut-rgb), .3); } .sk-search-big .btn { border-radius: var(--r-full); white-space: nowrap; } /* --- Stats inline (compteurs de hero) --- */ .sk-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .9rem; color: var(--c-muted); } .sk-stats > div { display: flex; align-items: baseline; } .sk-stats b { font-family: var(--sk-ff-display); font-size: 1.5rem; color: var(--c-walnut); margin-right: .35rem; } /* --- Accueil : hero --- */ .sk-home-hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--c-line); } .sk-home-hero .sk-container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; } /* Zone droite du hero : tuiles « Parcourir par catégorie » */ .sk-hero-cats-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 .8rem; } .sk-hero-cats-head .sk-cats-label { margin: 0; } .sk-hero-cats .sk-cats-label { margin: .2rem 0 .8rem; } .sk-hero-cats .sk-cats-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 0; } .sk-hero-cats .sk-cat-tile { min-height: 76px; padding: .6rem .7rem; } .sk-hero-cats .sk-cat-tile h3 { font-size: .98rem; } .sk-home-hero.is-solo .sk-container { grid-template-columns: 1fr; max-width: var(--cont-narrow); } .sk-home-hero h1 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); line-height: .98; margin: 0 0 1.25rem; } .sk-home-lede { font-size: 1.2rem; color: var(--c-ink-2); max-width: 48ch; margin: 0 0 1.5rem; } .sk-home-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .sk-meta-num { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1.25rem; margin-top: .5rem; border-top: 1px solid var(--c-line); } .sk-meta-num .n { font-family: var(--sk-ff-display); font-size: 2.25rem; color: var(--c-walnut); display: block; line-height: 1; } .sk-meta-num .l { font-size: .75rem; color: var(--c-muted); margin-top: .25rem; display: block; } /* Visuel de hero (mosaïque de tuiles) */ .sk-hero-visual { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; aspect-ratio: 1/1; } .sk-hero-visual .v { position: relative; box-shadow: var(--sh-1); overflow: hidden; border-radius: var(--r-sm); } .sk-hero-visual .v.big { grid-row: span 2; } .sk-hero-visual .v .sk-tile, .sk-hero-visual .v .sk-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; } /* --- Catégories (tuiles compactes : titre en haut, total en bas) --- */ .sk-cats-label { font-family: var(--sk-ff-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 .7rem; } .sk-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .6rem; margin-bottom: 2.25rem; } .sk-cat-tile { text-decoration: none; color: inherit; background: var(--c-paper); border: 1px solid var(--c-line); border-left: 3px solid var(--c-walnut); border-radius: var(--r-sm); padding: .7rem .9rem; min-height: 86px; display: flex; flex-direction: column; justify-content: space-between; gap: .4rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sk-cat-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-1); border-left-color: var(--c-terra); } .sk-cat-tile h3 { font-family: var(--sk-ff-display); font-size: 1.05rem; margin: 0; font-weight: 400; line-height: 1.15; } .sk-cat-tile .n { display: inline-flex; align-items: baseline; gap: .3rem; font-family: var(--sk-ff-mono); font-size: .78rem; color: var(--c-muted); letter-spacing: .04em; } .sk-cat-tile .n strong { font-family: var(--sk-ff-display); font-size: 1.2rem; font-weight: 400; line-height: 1; color: var(--c-walnut); } .sk-cat-tile .n i { font-size: .85rem; color: var(--c-walnut); align-self: center; } /* Sous-catégories en chips */ .sk-subcats { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; } .sk-subcat { font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-full); padding: .4rem .8rem; } .sk-subcat:hover, .sk-subcat.active { background: var(--c-walnut); color: #fff; border-color: var(--c-walnut); } .sk-subcat .n { color: var(--c-muted); margin-left: .3rem; font-size: .85em; } .sk-subcat:hover .n, .sk-subcat.active .n { color: rgba(255,255,255,.7); } /* --- Régions --- */ .sk-reg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .sk-reg-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; text-decoration: none; color: var(--c-ink); font-size: .9rem; border-bottom: 1px solid var(--c-line); transition: background .15s; } .sk-reg-list a:hover { background: var(--c-paper); color: var(--c-walnut); } .sk-reg-list a .n { font-family: var(--sk-ff-mono); font-size: .72rem; color: var(--c-muted); } /* --- Cartes (artisans / coups de cœur) --- */ .sk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .sk-acard { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .2s ease; } .sk-acard:hover { transform: translateY(-3px); } .sk-acard-thumb { aspect-ratio: 1/1; position: relative; margin-bottom: .75rem; box-shadow: var(--sh-1); overflow: hidden; border-radius: var(--r-sm); } .sk-acard-thumb .sk-tile, .sk-acard-thumb .sk-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; } .sk-acard-thumb .sk-badge { position: absolute; top: .6rem; left: .6rem; z-index: 2; } .sk-acard-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; font-family: var(--sk-ff-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .sk-acard-meta .cat { color: var(--c-walnut); font-weight: 600; } .sk-acard h3 { font-size: 1.25rem; margin: 0 0 .25rem; line-height: 1.15; font-weight: 400; } .sk-acard p { color: var(--c-ink-2); font-size: .85rem; margin: 0; } /* --- Bande « Coups de cœur » — graphite franc, fort contraste dans les 2 thèmes. --c-graphite est le jeton « bandeaux » : foncé sur fond clair, éclairci (#3a4450) sur fond sombre → la bande reste toujours distincte de la page. Texte blanc fixe. --- */ .sk-stripe { background: var(--c-graphite); color: #fff; padding: 3.5rem 0; } .sk-stripe h2 { color: #fff; } .sk-stripe h2 em { color: var(--c-honey); } .sk-stripe .sk-more { color: #fff; border-color: #fff; } .sk-stripe .sk-more:hover { color: var(--c-honey); border-color: var(--c-honey); } [data-sk-theme-mode^="high-contrast"] .sk-stripe { background: var(--c-bg); color: var(--c-ink); border-top: 2px solid var(--c-line); border-bottom: 2px solid var(--c-line); } [data-sk-theme-mode^="high-contrast"] .sk-stripe h2, [data-sk-theme-mode^="high-contrast"] .sk-stripe .sk-acard h3, [data-sk-theme-mode^="high-contrast"] .sk-stripe .sk-acard p, [data-sk-theme-mode^="high-contrast"] .sk-stripe .sk-more { color: var(--c-ink); border-color: var(--c-ink); } /* --- Hero de listing --- */ .sk-list-hero { padding: 3.5rem 0 2rem; background: var(--c-paper); border-bottom: 1px solid var(--c-line); } .sk-list-hero h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); margin: 0 0 .6rem; } .sk-list-hero p { font-size: 1.05rem; color: var(--c-ink-2); max-width: 64ch; margin: 0 0 1.25rem; } /* --- Barre de filtres horizontale (sticky) --- */ .sk-filters-bar { background: var(--c-paper); border-bottom: 1px solid var(--c-line); padding: .9rem 0; position: sticky; top: 0; z-index: 10; } .sk-filters-bar .sk-container { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .sk-filters-bar select, .sk-filters-bar input { font: inherit; font-size: .85rem; border: 1px solid var(--c-line); background: var(--c-bg); padding: .5rem .8rem; border-radius: var(--r-sm); color: var(--c-ink); } .sk-flabel { font-family: var(--sk-ff-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); flex-shrink: 0; } .sk-filters-bar .sk-sort { margin-left: auto; display: flex; gap: .5rem; align-items: center; } /* --- Toolbar + résultats --- */ .sk-list-layout { padding: 2rem 0; } .sk-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-line); } .sk-result-count { display: flex; align-items: baseline; gap: .4rem; font-family: var(--sk-ff-sans); font-size: .95rem; color: var(--c-ink-2); } .sk-result-count b { font-family: var(--sk-ff-display); font-size: 1.6rem; line-height: 1; color: var(--c-walnut); } .sk-page-of { font-family: var(--sk-ff-mono); font-size: .78rem; color: var(--c-muted); } .sk-active-filter { display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0 0; background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: var(--r-full); padding: .3rem .85rem; font-size: .85rem; } .sk-clear { color: var(--c-terra); text-decoration: none; font-weight: 600; } .sk-clear:hover { text-decoration: underline; } /* --- Ligne d'annuaire (entry-row sans colonne note) --- */ .sk-entry { display: grid; grid-template-columns: 180px 1fr auto; gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--c-line); transition: background .15s ease; } .sk-entry:hover { background: var(--c-paper); } .sk-thumb { display: block; aspect-ratio: 4/3; position: relative; overflow: hidden; border-radius: var(--r-sm); box-shadow: var(--sh-1); } .sk-thumb .sk-tile, .sk-thumb .sk-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; } .sk-entry h3 { font-size: 1.35rem; margin: 0 0 .25rem; font-weight: 400; } .sk-entry h3 a { text-decoration: none; color: var(--c-ink); } .sk-entry h3 a:hover { color: var(--c-walnut); } .sk-meta-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .35rem 0 .5rem; font-family: var(--sk-ff-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .sk-meta-row .cat { color: var(--c-walnut); font-weight: 600; } .sk-desc { font-size: .9rem; color: var(--c-ink-2); max-width: 64ch; } .sk-desc p { margin: 0; } .sk-aside { text-align: right; } /* --- Chips / tags / badges --- */ .sk-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; } .sk-tags { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; } .sk-tags-label { font-family: var(--sk-ff-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-right: .25rem; } .sk-tag { font-size: .72rem; font-weight: 500; text-decoration: none; color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-full); padding: .2rem .6rem; } .sk-tag:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } .sk-badge { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--sk-ff-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; background: var(--c-ink); color: var(--c-bg); padding: .2rem .5rem; border-radius: 3px; } .sk-badge-honey { background: var(--c-honey); color: var(--c-ink); } .sk-badge-sage { background: var(--c-sage); color: #fff; } .sk-badge-walnut{ background: var(--c-walnut);color: #fff; } /* --- Pager --- */ .sk-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem 0; font-family: var(--sk-ff-mono); flex-wrap: wrap; } .sk-pager a, .sk-pager span { padding: .5rem .85rem; text-decoration: none; color: var(--c-ink); font-size: .85rem; border-radius: var(--r-sm); } .sk-pager a:hover { background: var(--c-paper); } .sk-pager .cur { background: var(--c-walnut); color: #fff; } .sk-pager .gap { color: var(--c-muted); } /* --- État vide --- */ .sk-empty { text-align: center; padding: 3rem 1rem; color: var(--c-muted); } .sk-empty i { font-size: 2.5rem; color: var(--c-line); display: block; margin-bottom: .75rem; } .sk-empty a { color: var(--c-walnut); } /* --- Aucun résultat (explorer) : icône soignée + nuage de tags-suggestions --- */ .sk-noresult { text-align: center; max-width: 640px; margin: 0 auto; padding: 2rem 1rem 3.5rem; } .sk-noresult-ico { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 1.1rem; border-radius: var(--r-full); background: rgba(var(--c-walnut-rgb), .12); color: var(--c-walnut); font-size: 2rem; } .sk-noresult h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 .4rem; } .sk-noresult h2 em { font-style: italic; color: var(--c-walnut); } .sk-noresult p { color: var(--c-ink-2); margin: 0 0 .3rem; } .sk-noresult .sk-noresult-lead { margin: 1.5rem 0 .25rem; font-family: var(--sk-ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); } .sk-tagcloud { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .25rem 0 1.5rem; } .sk-tagcloud a { font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-full); padding: .4rem .9rem; transition: background .15s, color .15s, border-color .15s; } .sk-tagcloud a:hover { background: var(--c-walnut); color: #fff; border-color: var(--c-walnut); } .sk-noresult-cards { max-width: 760px; margin: 1.5rem auto 0; } /* --- Onglets de portée (explorer) --- */ .sk-buckets { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; } .sk-bucket { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: .4rem .9rem; } .sk-bucket:hover { border-color: var(--c-walnut); } .sk-bucket.active { background: var(--c-walnut); color: #fff; border-color: var(--c-walnut); } .sk-search-group { margin-bottom: 2rem; } /* --- Fiche : hero + fil d'Ariane --- */ .sk-detail-hero { padding: 2.5rem 0 1.5rem; } .sk-detail-hero h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); margin: .5rem 0; } .sk-sub { font-family: var(--sk-ff-display); font-style: italic; font-size: 1.2rem; color: var(--c-ink-2); margin: 0 0 .75rem; } .sk-hero-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-family: var(--sk-ff-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .sk-bc { background: var(--c-paper); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-size: .8rem; } .sk-bc .sk-container { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; color: var(--c-muted); } .sk-bc a { color: var(--c-muted); text-decoration: none; } .sk-bc a:hover { color: var(--c-ink); } .sk-bc .sep { opacity: .4; } .sk-bc .cur { color: var(--c-ink); font-weight: 600; } /* --- Fiche : corps (2 colonnes) --- */ .sk-detail { padding: 2.5rem 0; } /* align-items par défaut (stretch) : la cellule droite occupe toute la hauteur de la ligne → l'infobox sticky a de la place pour suivre le scroll. */ .sk-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; } .sk-intro > * + * { margin-top: 1rem; } .sk-intro p { font-size: 1rem; line-height: 1.75; color: var(--c-ink-2); } .sk-detail-cover { margin: 0 0 1.25rem; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-1); } .sk-detail-cover img { width: 100%; display: block; } .sk-detail-meta { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; } .sk-meta-label { font-family: var(--sk-ff-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin-right: .25rem; } .sk-taxo { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .85rem; } .sk-taxo-link { color: var(--c-walnut); text-decoration: none; font-weight: 600; } .sk-taxo-link:hover { text-decoration: underline; } .sk-taxo .sep { color: var(--c-muted); } /* Infobox latérale */ .sk-infobox { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 1.5rem; position: sticky; top: 1rem; } .sk-infobox dl { margin: 0; display: grid; gap: .9rem; } .sk-infobox dt { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; font-family: var(--sk-ff-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); } .sk-infobox dt i { color: var(--c-walnut); } .sk-infobox dd { margin: 0; font-size: .9rem; color: var(--c-ink); } .sk-infobox dd a { color: var(--c-walnut); } .sk-infobox-updated { margin: 1rem 0 0; font-size: .72rem; font-style: italic; color: var(--c-muted); } /* « Mis à jour le » discret, même dans .sk-intro (bat .sk-intro p par spécificité) */ .sk-intro .sk-updated-foot { margin-top: 1.5rem; font-size: .7rem; font-style: italic; line-height: 1.4; color: var(--c-muted); opacity: .7; text-align: right; } .sk-svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .5rem 0; } .sk-svc-list div { display: flex; align-items: center; gap: .4rem; font-size: .85rem; } .sk-svc-list div::before { content: "✓"; color: var(--c-sage); font-weight: 700; } /* --- Tuiles typographiques (repli image) + cover — gamme graphite/bleu --- */ .sk-tile { position: relative; display: grid; place-items: center; overflow: hidden; color: rgba(255,255,255,.9); background: linear-gradient(135deg, var(--p-a, #4a7097) 0%, var(--p-b, #1f4e79) 100%); } .sk-tile::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25% 75%, rgba(255,255,255,.06) 75%), linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25% 75%, rgba(255,255,255,.06) 75%); background-size: 40px 40px; background-position: 0 0, 20px 20px; } .sk-tile-mono { position: relative; z-index: 1; font-family: var(--sk-ff-display); font-size: 1.8rem; letter-spacing: .02em; color: rgba(255,255,255,.92); } .sk-tile-tag { position: absolute; top: .6rem; left: .6rem; z-index: 2; font-family: var(--sk-ff-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.45); color: #fff; padding: .2rem .45rem; border-radius: 3px; } .sk-tile-v1 { --p-a:#2f3842; --p-b:#14212e; } .sk-tile-v2 { --p-a:#1f4e79; --p-b:#163a5c; } .sk-tile-v3 { --p-a:#4a7097; --p-b:#1f4e79; } .sk-tile-v4 { --p-a:#3a5a78; --p-b:#14212e; } .sk-tile-v5 { --p-a:#5b6b7a; --p-b:#2f3842; } .sk-tile-v6 { --p-a:#1f4e79; --p-b:#2f3842; } .sk-tile-v7 { --p-a:#44607d; --p-b:#163a5c; } .sk-tile-v8 { --p-a:#2a3a4a; --p-b:#1a2028; } .sk-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } [data-bs-theme="dark"] .sk-tile { filter: brightness(.85) saturate(.9); } /* --- Carte coup de cœur (vraie « card » : visuel + corps + date) --- */ .sk-scard { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sk-scard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--c-walnut); } .sk-scard-thumb { aspect-ratio: 3/2; position: relative; overflow: hidden; background: var(--c-bg-2); } .sk-scard-thumb .sk-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .sk-scard-thumb .sk-tile { position: absolute; inset: 0; } .sk-scard-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; } .sk-scard-date { font-family: var(--sk-ff-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-walnut); } .sk-scard h3 { font-size: 1.15rem; margin: 0; line-height: 1.2; font-weight: 400; } .sk-scard p { margin: 0; font-size: .85rem; color: var(--c-ink-2); } /* --- Listing : colonne filtres (gauche) + résultats (droite) --- */ .sk-list-grid { display: grid; grid-template-columns: 230px 1fr; gap: 2rem; align-items: start; } .sk-filters { position: sticky; top: 1rem; align-self: start; } .sk-filters-sec { margin-bottom: 1.25rem; } .sk-filters-sec h4 { font-family: var(--sk-ff-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 .7rem; padding-bottom: .4rem; border-bottom: 1px solid var(--c-line); } .sk-fgrp { margin-bottom: .6rem; } .sk-fgrp .sk-flabel { display: block; margin-bottom: .2rem; } .sk-fgrp .sk-flabel i { color: var(--c-walnut); } .sk-filters-hr { border: 0; border-top: 1px solid var(--c-line); margin: 1.25rem 0; } .sk-filters select { width: 100%; font: inherit; font-size: .85rem; color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: .45rem .6rem; } .sk-filters-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .sk-results { min-width: 0; } /* --- Bloc « informations complémentaires » (fiches) --- */ .sk-info-block { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--c-bg-2); border-left: 3px solid var(--c-sage); border-radius: var(--r-sm); } .sk-info-title { font-family: var(--sk-ff-display); font-style: italic; font-size: 1.2rem; margin: 0 0 .5rem; font-weight: 400; } .sk-info-block p { margin: 0; color: var(--c-ink-2); } /* --- Pager : boutons précédent/suivant + numéros --- */ .sk-pager .sk-pager-edge { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; border: 1px solid var(--c-ink); color: var(--c-ink); background: transparent; } .sk-pager .sk-pager-edge:hover { background: var(--c-ink); color: var(--c-bg); } .sk-pager .sk-pager-edge.is-off { opacity: .35; pointer-events: none; } /* Chiffres au centre — liens simples (pas de boutons pleins) */ .sk-pager-nums { display: flex; align-items: center; gap: .25rem; flex: 1; flex-wrap: wrap; justify-content: center; } .sk-pager-nums a, .sk-pager-nums .cur, .sk-pager-nums .gap { min-width: 2rem; text-align: center; padding: .35rem .5rem; } .sk-pager-nums a:hover { background: var(--c-paper); color: var(--c-walnut); } /* CTA « Visiter » centré (fiche sélection) */ .sk-visit { text-align: center; margin: 1.5rem 0; } /* Tags dans la card (infobox) */ .sk-tags-card { margin-top: 1rem; } /* --- Navigation précédent / suivant (fiche sélection) avec vignettes --- */ .sk-prevnext { border-top: 1px solid var(--c-line); margin-top: 1rem; } .sk-prevnext .sk-container { padding-top: 1.5rem; padding-bottom: 2.5rem; } .sk-pn { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .7rem .9rem; text-decoration: none; color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-sm); transition: border-color .15s, background .15s; } .sk-pn:hover { border-color: var(--c-walnut); background: var(--c-paper); } .sk-pn-thumb { flex: 0 0 120px; width: 120px; aspect-ratio: 3/2; position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--c-bg-2); } .sk-pn-thumb .sk-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .sk-pn-thumb .sk-tile { position: absolute; inset: 0; } .sk-pn-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .sk-pn-dir { font-family: var(--sk-ff-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-walnut); } .sk-pn-title { font-family: var(--sk-ff-display); font-size: 1rem; line-height: 1.2; } .sk-pn-next { flex-direction: row-reverse; text-align: right; } .sk-pn-next .sk-pn-text { align-items: flex-end; } /* --- Responsive (front) --- */ @media (max-width: 991.98px) { .sk-home-hero .sk-container { grid-template-columns: 1fr; } .sk-hero-cats .sk-cats-grid { grid-template-columns: repeat(2, 1fr); } .sk-hero-visual { max-width: 460px; } .sk-detail-grid { grid-template-columns: 1fr; } .sk-infobox { position: static; } .sk-cards { grid-template-columns: 1fr 1fr; } .sk-reg-list { grid-template-columns: 1fr; } .sk-list-grid { grid-template-columns: 1fr; } .sk-filters { position: static; } .sk-entry { grid-template-columns: 1fr; gap: .85rem; } .sk-entry .sk-thumb { aspect-ratio: 16/9; } .sk-aside { text-align: left; } .sk-pn-next { flex-direction: row; text-align: left; } .sk-pn-next .sk-pn-text { align-items: flex-start; } } @media (max-width: 575.98px) { .sk-cards { grid-template-columns: 1fr 1fr; } }