/* ============================================================ massard.eu v2 — Global stylesheet Identity: NatGeo / Monocle — ink on paper, gold accent Typefaces: Fraunces (serif headlines) + Inter (body) ============================================================ */ /* --- Self-hosted variable fonts (GDPR-safe, no third-party request) --- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces-latin-opsz-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-standard-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-ext-standard-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* wrappers (respimg shortcode) must be layout-transparent */ picture { display: contents; } /* ============================================================ DESIGN TOKENS — NatGeo base (default) ============================================================ */ :root { /* Core palette */ --ink: #1C1917; --ink-soft: #44403C; --ink-muted: #78716C; --paper: #F7F4EE; --paper-warm: #EDE9E1; --white: #FFFFFF; --accent: #C9A84C; /* NatGeo gold */ --accent-dark:#A07830; /* Destination themes — overridden by [data-theme] */ --theme-primary: var(--accent); --theme-bg: var(--paper); /* Typography */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Layout */ --max-w: 1200px; --max-w-prose: 720px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.08); --shadow-md: 0 4px 6px rgba(28,25,23,.06), 0 10px 15px rgba(28,25,23,.08); --shadow-lg: 0 10px 15px rgba(28,25,23,.06), 0 20px 25px rgba(28,25,23,.1); /* Transition */ --ease: cubic-bezier(.4,0,.2,1); --duration: 200ms; } /* ============================================================ DESTINATION THEMES Applied via ============================================================ */ /* D01 Nordic Notebook */ [data-theme="nordic"] { --theme-primary: #2E5E5A; --theme-bg: #F2F7F6; --accent: #2E5E5A; --paper: #F2F7F6; --ink: #162725; } /* D02 Mediterranean Postcard */ [data-theme="mediterranean"] { --theme-primary: #C44536; --theme-bg: #FDF8F2; --accent: #C44536; --paper: #FDF8F2; --ink: #2A1510; } [data-theme="tropical"] { --theme-primary: #1B7A6B; --theme-bg: #F2FAF8; --accent: #1B7A6B; --paper: #F2FAF8; --ink: #0D2924; } [data-theme="desert"] { --theme-primary: #A04E18; --theme-bg: #FBF6EF; --accent: #A04E18; --paper: #FBF6EF; --ink: #2A1A0A; } /* D03 Atlas Minimal */ [data-theme="urban"] { --theme-primary: #C9A030; --theme-bg: #F7F5F0; --accent: #C9A030; --paper: #F7F5F0; --ink: #0E0E10; } [data-theme="mountain"] { --theme-primary: #2C5F8A; --theme-bg: #F2F5FA; --accent: #2C5F8A; --paper: #F2F5FA; --ink: #1A2535; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--ink); background-color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; transition: opacity var(--duration) var(--ease); } a:hover { opacity: .75; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; color: var(--ink); } h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-style: italic; } h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } /* Prose — rich text content (also applied to article bodies) */ .prose, .article-body { max-width: var(--max-w-prose); font-size: var(--text-lg); line-height: 1.75; color: var(--ink-soft); } .prose h2, .article-body h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); } .prose h3, .article-body h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); } .prose p, .article-body p { margin-bottom: var(--space-5); } .prose ul, .prose ol, .article-body ul, .article-body ol { padding-left: var(--space-6); margin-bottom: var(--space-5); } .prose li, .article-body li { margin-bottom: var(--space-2); } .prose a, .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose blockquote, .article-body blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-5); font-style: italic; color: var(--ink-muted); margin: var(--space-6) 0; } .prose img, .article-body img { border-radius: var(--radius-md); margin: var(--space-8) 0; } .prose strong, .article-body strong { color: var(--ink); font-weight: 600; } /* Article intro — lead paragraph under the hero */ .article-intro { font-size: var(--text-xl); line-height: 1.6; color: var(--ink); font-weight: 500; margin-bottom: var(--space-8); } /* Label / overline */ .overline { font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-5); } .container--narrow { max-width: 860px; margin: 0 auto; padding: 0 var(--space-5); } /* ============================================================ SITE HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid rgba(28,25,23,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--space-6); } .site-logo { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; font-style: italic; color: var(--ink); white-space: nowrap; } .site-logo span { color: var(--accent); } .site-nav { display: flex; align-items: center; gap: var(--space-6); } .site-nav a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); transition: color var(--duration) var(--ease); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); } .lang-toggle { font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) var(--space-3); border: 1px solid rgba(28,25,23,.15); border-radius: var(--radius-full); color: var(--ink-soft); transition: all var(--duration) var(--ease); } .lang-toggle:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { border-top: 1px solid rgba(28,25,23,.08); padding: var(--space-12) 0; margin-top: var(--space-24); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-footer p { font-size: var(--text-sm); color: var(--ink-muted); } /* ============================================================ HOMEPAGE HERO ============================================================ */ .hero { position: relative; height: clamp(480px, 70vh, 720px); overflow: hidden; display: flex; align-items: flex-end; padding-bottom: var(--space-16); } /* Compact section header — used on index/list pages */ .hero--compact { height: auto; min-height: 0; padding-top: var(--space-10); padding-bottom: var(--space-8); } .hero__bg { position: absolute; inset: 0; background: linear-gradient(135deg, #1C1917 0%, #2E2825 100%); } .hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } /* Themed SVG section-header background (generated by tools/gen-headers.mjs) */ .hero__placeholder-bg { position: absolute; inset: 0; background: #161311 url("/img/headers/default.svg") center/cover no-repeat; } [data-theme="mediterranean"] .hero__placeholder-bg { background-image: url("/img/headers/mediterranean.svg"); } [data-theme="urban"] .hero__placeholder-bg { background-image: url("/img/headers/urban.svg"); } [data-theme="tropical"] .hero__placeholder-bg { background-image: url("/img/headers/tropical.svg"); } [data-theme="nordic"] .hero__placeholder-bg { background-image: url("/img/headers/nordic.svg"); } [data-theme="desert"] .hero__placeholder-bg { background-image: url("/img/headers/desert.svg"); } [data-theme="mountain"] .hero__placeholder-bg { background-image: url("/img/headers/mountain.svg"); } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(28,25,23,.85) 0%, rgba(28,25,23,.3) 50%, transparent 100% ); } .hero__content { position: relative; z-index: 1; } .hero__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .hero__title { color: var(--white); margin-bottom: var(--space-4); max-width: 700px; } .hero__sub { font-size: var(--text-lg); color: rgba(247,244,238,.75); max-width: 500px; } /* ============================================================ SECTION TITLES ============================================================ */ .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(28,25,23,.08); } .section-header h2 { margin: 0; } .section-link { font-size: var(--text-sm); font-weight: 500; color: var(--accent); white-space: nowrap; } /* ============================================================ GUIDE CARDS — homepage grid ============================================================ */ .guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); } .guide-card { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); color: inherit; } .guide-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); opacity: 1; } .guide-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-warm); } .guide-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .guide-card:hover .guide-card__img img { transform: scale(1.04); } .guide-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,25,23,.7) 0%, transparent 55%); } .guide-card__city { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-4); color: var(--white); } .guide-card__city h2 { font-size: var(--text-xl); color: var(--white); margin: 0 0 var(--space-1); } .guide-card__city p { font-size: var(--text-sm); color: rgba(255,255,255,.75); margin: 0; } /* Theme dot */ .guide-card__dot { position: absolute; top: var(--space-3); right: var(--space-3); width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); } .guide-card__footer { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--ink-muted); font-weight: 500; } /* Placeholder (no cover image) */ .guide-card__placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--space-4); } .guide-card__placeholder span { font-family: var(--font-serif); font-size: 4rem; font-weight: 700; color: rgba(28,25,23,.1); line-height: 1; } /* ============================================================ CHIPS / TAGS ============================================================ */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); background: var(--white); border: 1px solid rgba(28,25,23,.12); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .chip--accent { background: var(--accent); border-color: var(--accent); color: var(--white); } /* ============================================================ GUIDE PAGE — Fiche pratique ============================================================ */ .fiche { background: var(--paper-warm); border-radius: var(--radius-lg); border: 1px solid rgba(28,25,23,.06); padding: var(--space-6); margin-bottom: var(--space-10); } .fiche__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-4); } .fiche__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ============================================================ GUIDE PAGE HERO ============================================================ */ .guide-hero { position: relative; height: clamp(320px, 50vh, 560px); overflow: hidden; } .guide-hero__img { width: 100%; height: 100%; object-fit: cover; } .guide-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 30%, rgba(28,25,23,.75) 100% ); } .guide-hero__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-8) var(--space-5); } .guide-hero__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); } .guide-hero__title { color: var(--white); margin: 0; } /* ============================================================ INTERACTIVE MAP ============================================================ */ .map-section { margin-bottom: var(--space-12); } .map-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .map-section__header h2 { margin: 0; } .view-toggle { display: flex; background: rgba(28,25,23,.06); border-radius: var(--radius-full); padding: 3px; gap: 2px; } .view-toggle__btn { padding: var(--space-1) var(--space-4); border: none; background: transparent; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: all var(--duration) var(--ease); } .view-toggle__btn.active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); } /* Filter bar */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .filter-btn { padding: var(--space-1) var(--space-3); border: 1px solid rgba(28,25,23,.15); border-radius: var(--radius-full); background: transparent; font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all var(--duration) var(--ease); white-space: nowrap; } .filter-btn:hover { border-color: var(--ink-soft); color: var(--ink); } .filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--white); } .filter-btn.active[data-color] { border-color: transparent; } /* Map container */ .map-container { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); position: relative; } .map-container__loading { position: absolute; inset: 0; background: var(--paper-warm); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--ink-muted); z-index: 10; transition: opacity .3s; } .map-container__loading.hidden { opacity: 0; pointer-events: none; } /* Export buttons */ .map-exports { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-3); } .map-exports a { font-size: var(--text-sm); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-2); transition: color var(--duration) var(--ease); } .map-exports a:hover { color: var(--ink); } /* Place list view */ .places-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } .place-card { background: var(--white); border: 1px solid rgba(28,25,23,.07); border-radius: var(--radius-md); padding: var(--space-4); transition: box-shadow var(--duration) var(--ease); } .place-card:hover { box-shadow: var(--shadow-md); } .place-card__name { font-weight: 600; font-size: var(--text-sm); color: var(--ink); margin-bottom: var(--space-1); } .place-card__tag { display: inline-block; font-size: var(--text-xs); font-weight: 500; padding: 2px var(--space-2); border-radius: var(--radius-full); background: rgba(28,25,23,.06); color: var(--ink-muted); margin-bottom: var(--space-2); text-transform: capitalize; } .place-card__desc { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .place-card__link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--accent); margin-top: var(--space-2); font-weight: 500; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq { margin-bottom: var(--space-12); } .faq__item { border: 1px solid rgba(28,25,23,.08); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; } .faq__item details { } .faq__item summary { list-style: none; padding: var(--space-4) var(--space-5); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: var(--text-base); color: var(--ink); user-select: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '▾'; color: var(--ink-muted); transition: transform var(--duration) var(--ease); flex-shrink: 0; } .faq__item details[open] summary::after { transform: rotate(180deg); } .faq__answer { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-base); color: var(--ink-soft); line-height: 1.65; } /* ============================================================ ARTICLE CARDS ============================================================ */ .articles-list { display: flex; flex-direction: column; gap: var(--space-6); } /* Type filter bar (Tout / Récits / News / Conseils) */ .article-filter { margin-bottom: var(--space-10); } /* Grouped sections by type */ .article-group { margin-bottom: var(--space-12); } .article-group.hidden { display: none; } .article-group__title { font-size: var(--text-2xl); margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(28,25,23,.1); } /* Type badge on each card */ .article-card__badge { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px var(--space-2); border-radius: var(--radius-full); margin-right: var(--space-2); color: #fff; vertical-align: middle; } .article-card__badge--news { background: #C44536; } /* terracotta */ .article-card__badge--recit { background: #C9A84C; } /* gold */ .article-card__badge--conseil { background: #2E5E5A; } /* teal */ .article-card { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(28,25,23,.07); color: inherit; } @media (min-width: 640px) { .article-card { grid-template-columns: 200px 1fr; } /* No cover image — text spans full width instead of the 200px image column */ .article-card--no-img { grid-template-columns: 1fr; } } .article-card__img { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--paper-warm); } .article-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); } .article-card:hover .article-card__img img { transform: scale(1.03); } .article-card__meta { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 500; margin-bottom: var(--space-2); } .article-card__title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); line-height: 1.25; } .article-card__excerpt { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; cursor: pointer; border: none; transition: all var(--duration) var(--ease); text-decoration: none; } .btn--primary { background: var(--ink); color: var(--white); } .btn--primary:hover { background: var(--ink-soft); opacity: 1; } .btn--accent { background: var(--accent); color: var(--white); } .btn--accent:hover { background: var(--accent-dark); opacity: 1; } .btn--outline { background: transparent; border: 1.5px solid rgba(28,25,23,.2); color: var(--ink); } .btn--outline:hover { border-color: var(--ink); } /* ============================================================ UTILITIES ============================================================ */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .section-gap { padding: var(--space-16) 0; } .section-gap-sm { padding: var(--space-10) 0; } .text-muted { color: var(--ink-muted); } .text-accent { color: var(--accent); } .text-serif { font-family: var(--font-serif); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .site-nav { display: none; } /* Simplifié — hamburger si besoin plus tard */ .guides-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); } .hero { height: 480px; } .section-gap { padding: var(--space-10) 0; } .places-grid { grid-template-columns: 1fr; } .map-section__header { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .guides-grid { grid-template-columns: 1fr; } } /* ============================================================ PRINT ============================================================ */ @media print { .site-header, .site-footer, .map-section, .view-toggle, .filter-bar, .map-exports { display: none; } body { font-size: 12pt; color: #000; background: #fff; } .hero, .guide-hero { height: 200px; } } /* ============================================================ COOKIE CONSENT BANNER ============================================================ */ .consent-banner { position: fixed; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); max-width: 560px; margin: 0 auto; z-index: 1000; background: var(--white); border: 1px solid var(--paper-warm); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(28, 25, 23, 0.18); padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; } .consent-banner p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6; flex: 1 1 280px; } .consent-banner a { color: var(--accent-dark); } .consent-banner__actions { display: flex; gap: var(--space-3); } .btn--ghost { background: transparent; color: var(--ink-muted); border: 1px solid var(--paper-warm); } .btn--ghost:hover { color: var(--ink); border-color: var(--ink-muted); } /* ============================================================ ARTICLE TILES — grille de cartes (page Articles) ============================================================ */ .filter-bar--cities { margin-top: calc(-1 * var(--space-4)); } .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 1024px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tile-grid { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); color: inherit; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); opacity: 1; } .tile__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-warm); } .tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); } .tile:hover .tile__img img { transform: scale(1.04); } .tile__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--paper-warm), var(--paper)); } .tile__placeholder span { font-family: var(--font-serif); font-size: var(--text-5xl); font-style: italic; color: var(--accent); opacity: .5; } .tile__badge { position: absolute; top: var(--space-3); left: var(--space-3); } .tile__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .tile__meta { font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; } .tile__title { font-size: var(--text-xl); line-height: 1.3; font-style: normal; margin: 0; } .tile__excerpt { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tile-grid__empty { text-align: center; color: var(--ink-muted); padding: var(--space-16) 0; }