/* ============================================================ emmenezmoi.com — Design System Inspiré de Komoot (épuré, outdoor) × Aventurevelo (bleu marine) ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); /* ── Tokens ── */ :root { /* Couleurs de marque */ --color-brand: #002f3f; /* bleu marine aventurevelo */ --color-brand-light: #004d66; --color-brand-dark: #001f2b; --color-accent: #e24944; /* corail aventurevelo */ --color-accent-hover: #c73d39; --color-green: #4f6814; /* vert Komoot */ --color-green-light: #889753; /* Surfaces (light mode) */ --color-bg: #faf9f4; /* beige naturel Komoot */ --color-surface: #ffffff; --color-surface-alt: #f3f2ed; --color-border: #e5e3dc; /* Textes (light mode) */ --color-text: #1c1a18; /* Komoot */ --color-text-muted: #6b6860; --color-text-light: #9b9890; /* Typographie */ --font-display: 'Shantell Sans', cursive; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; /* Espacements */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; /* Ombres */ --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); } /* ── Dark mode ── Activé par classe .dark sur (switcher JS) Le JS dans theme.js lit localStorage ET prefers-color-scheme pour ajouter .dark avant le premier rendu → pas de flash ── */ html.dark { --color-bg: #0d1a20; --color-surface: #162530; --color-surface-alt: #1e3040; --color-border: #2a3d4a; --color-text: #f0ede6; --color-text-muted: #9aada8; --color-text-light: #6b8a8a; } html.dark body { background-image: none; } html.dark .activity-card .icon { color: #ffffff; } html.dark .flip-slot { background: #ffffff; color: var(--color-brand); } html.dark .flip-slot::after { background: rgba(0,0,0,.15); } html.dark .flip-slot.flip-space { background: var(--color-brand); } html.dark .cat-picker-menu li.selected a { color: #ffffff; } /* Leaflet zoom controls — dark mode */ html.dark .leaflet-bar a, html.dark .leaflet-bar a:hover { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } html.dark .leaflet-bar a:hover { background-color: var(--color-surface-alt); } html.dark .leaflet-bar { border-color: var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,.4); } html.dark .leaflet-control-attribution { background: rgba(22,37,48,.85) !important; color: var(--color-text-muted) !important; } /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); background-color: var(--color-bg); background-image: url('/images/natural-paper.png'); background-repeat: repeat; background-size: auto; color: var(--color-text); line-height: 1.6; margin: 0; } /* ── Typographie ── */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); } h4 { font-size: 1.125rem; } p { margin: 0 0 1rem; } a { color: var(--color-brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Boutons ── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.25rem; border-radius: var(--radius-md); font-family: var(--font-body); font-size: .875rem; font-weight: 600; cursor: pointer; border: none; transition: background .15s, transform .1s; text-decoration: none; line-height: 1.5; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-hover); } .btn-brand { background: var(--color-brand); color: #fff; } .btn-brand:hover { background: var(--color-brand-light); } .btn-outline { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); } .btn-outline:hover { border-color: var(--color-brand); color: var(--color-brand); } .btn-sm { padding: .375rem .875rem; font-size: .8125rem; } .btn-lg { padding: .75rem 1.75rem; font-size: 1rem; } /* ── Cards ── */ .card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s, transform .2s; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-body { padding: 1.25rem; } /* ── Badge difficulté ── */ .badge { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 600; letter-spacing: .02em; } .badge-easy { background: #d4edda; color: #155724; } .badge-medium { background: #fff3cd; color: #856404; } .badge-hard { background: #f8d7da; color: #721c24; } .badge-sub { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); } @media (prefers-color-scheme: dark) { .badge-easy { background: #1a3a25; color: #6fcf97; } .badge-medium { background: #3a2e0a; color: #f2c94c; } .badge-hard { background: #3a1219; color: #eb5757; } } /* ── Stats parcours ── */ .stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; } .stat-item { display: flex; flex-direction: column; gap: .125rem; } .stat-value { font-size: 1.125rem; font-weight: 700; color: var(--color-brand); font-variant-numeric: tabular-nums; } .stat-label { font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; } /* ── Carte Leaflet ── */ .map-container { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); } /* ── Formulaire ── */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; color: var(--color-text); } .form-input, .form-select, .form-textarea { width: 100%; padding: .5rem .75rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: .875rem; background: var(--color-surface); color: var(--color-text); transition: border-color .15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-brand); } .form-textarea { resize: vertical; min-height: 100px; } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 1100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 1.5rem; height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); } @media (max-width: 600px) { .site-header { grid-template-columns: 1fr; justify-items: stretch; padding: 0 .75rem; gap: 0 !important; } .header-brand-center { width: 100%; min-width: 0; padding-right: 2.75rem; /* place pour le bouton connexion */ } .header-brand-center .cat-picker { margin-left: auto; flex-shrink: 0; } /* flip-board : prend l'espace restant, clips si nécessaire */ .cat-picker-btn .flip-board { max-width: calc(100vw - 11rem); overflow: hidden; gap: 1px !important; } .cat-picker-btn { padding-left: 0 !important; padding-right: 0 !important; } .cat-caret { margin-left: 0 !important; } } /* ── Brand (gauche) ── */ .header-brand-center { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; } .emmenez-moi-label { font-family: var(--font-display); font-size: 1.375rem; color: var(--color-brand); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; } .dark .emmenez-moi-label { color: #fff; } .emmenez-moi-label:hover { text-decoration: none; } @media (max-width: 600px) { .emmenez-moi-label { font-size: 1.075rem; } } /* ── Category picker (custom select) ── */ .cat-picker { position: relative; } .cat-picker-btn { display: flex; align-items: center; gap: .5rem; padding: .3rem .65rem .3rem .5rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); color: var(--color-text); height: 40px; transition: background .15s, border-color .15s; } .cat-picker-btn:hover { background: var(--color-surface-alt); border-color: var(--color-border); } .cat-caret { font-size: .7rem; color: var(--color-text-muted); margin-left: .2rem; transition: transform .2s; flex-shrink: 0; } .cat-picker.open .cat-caret { transform: rotate(180deg); } .cat-picker-menu { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 230px; max-width: calc(100vw - 1.5rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: .5rem; z-index: 999; } /* Sur mobile, ancrer à droite pour éviter le débordement */ @media (max-width: 600px) { .cat-picker-menu { right: 0; left: auto; transform: none; min-width: min(230px, calc(100vw - 1.5rem)); } } .cat-picker.open .cat-picker-menu { display: block; } .cat-picker-menu li a { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: var(--radius-md); text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--color-text); transition: background .12s; } .cat-picker-menu li a:hover { background: var(--color-surface-alt); text-decoration: none; } .cat-picker-menu li.selected a { color: var(--color-brand); font-weight: 600; } .cat-picker-menu .cat-opt-icon { font-size: 1.1rem; flex-shrink: 0; } .cat-picker-menu .cat-opt-check { margin-left: auto; width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; } /* ── Category name (static, on category page) ── */ .cat-current { display: flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; } .cat-current-icon { font-size: 1.15rem; } /* ── Flip board (split-flap display) ── */ .flip-board { display: flex; align-items: center; gap: 2px; } .flip-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.9rem; padding: 0 3px; background: var(--color-brand); color: var(--color-bg); font-family: var(--font-display); font-size: .9rem; letter-spacing: 0; border-radius: 3px; position: relative; overflow: hidden; user-select: none; } /* Split-flap horizontal line */ .flip-slot::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(0,0,0,.35); pointer-events: none; } .flip-slot.flip-space { background: transparent; min-width: .6rem; } .flip-slot.flip-space::after { display: none; } .flip-slot.flip-shuffling { color: var(--color-green-light); } @media (max-width: 600px) { .flip-slot { font-size: .72rem; height: 1.55rem; min-width: .95rem; } .flip-slot.flip-space { min-width: .45rem; } } @media (max-width: 380px) { .flip-slot { font-size: .62rem; height: 1.4rem; min-width: .8rem; padding: 0 2px; } .flip-slot.flip-space { min-width: .3rem; } } /* ── Legacy (conservé pour compatibilité) ── */ .site-logo { font-family: var(--font-display); font-size: 1.375rem; color: var(--color-brand); text-decoration: none; letter-spacing: -0.02em; } .site-logo:hover { text-decoration: none; } .site-logo span { color: var(--color-accent); } /* ── Univers activité hero ── */ .activity-hero { padding: 3rem 1.5rem 2rem; border-bottom: 1px solid var(--color-border); } .activity-hero h1 { margin: 0 0 .5rem; } /* ── Grille parcours ── */ .routes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .route-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--color-surface-alt); } /* ── Split view (carte + liste) ── */ .split-view { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 64px); overflow: hidden; } .split-list { overflow-y: auto; border-right: 1px solid var(--color-border); padding: 1rem; } .split-map { height: 100%; } /* ── Profil altimétrique ── */ .elevation-bar { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: .75rem 1rem; height: 100px; } /* ── Utilitaires ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .text-muted { color: var(--color-text-muted); } .text-brand { color: var(--color-brand); } .text-accent { color: var(--color-accent); } .mt-auto { margin-top: auto; } /* ══════════════════════════════════════════════════════════ ROUTE CARD — composant partagé (activity.ejs + article.ejs) ══════════════════════════════════════════════════════════ */ .route-card { display: grid; grid-template-columns: 80px 1fr auto; gap: .625rem; align-items: stretch; padding: .625rem; border-radius: var(--radius-md); border: 1.5px solid var(--color-border); background: var(--color-surface); text-decoration: none; color: inherit; margin-bottom: .375rem; cursor: pointer; transition: border-color .12s, box-shadow .12s; position: relative; } .route-card:hover, .route-card.highlighted, .route-card.hovered { border-color: var(--color-brand-light); box-shadow: 0 2px 8px rgba(0,0,0,.07); text-decoration: none; color: inherit; } .route-card.map-focused { border-color: var(--color-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 20%, transparent); } .route-card.hidden { display: none; } .card-thumb { width: 80px; height: 68px; border-radius: 6px; background: var(--color-surface-alt); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); position: relative; } .card-thumb img { width:100%; height:100%; object-fit:cover; object-position:left center; display:block; } .card-thumb.sk { background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 50%, var(--color-surface-alt) 75%); background-size: 200% 100%; animation: sk-shimmer 1.2s infinite; } .card-thumb.sk > i { display: none; } @keyframes sk-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } } .loop-badge { display: inline-flex; align-items: center; gap: .18rem; font-size: .6rem; font-weight: 700; background: rgba(37,99,235,.1); color: #2563eb; border-radius: 4px; padding: .08rem .3rem; white-space: nowrap; } html.dark .loop-badge { background: rgba(96,165,250,.15); color: #60a5fa; } .card-body { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .card-title { font-size: .825rem; font-weight: 600; color: var(--color-text); margin: 0 0 .3rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-rating-inline { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--color-accent); margin-right: .3rem; vertical-align: middle; white-space: nowrap; } .card-rating-inline i { font-size: .75rem; } .card-meta { font-size: .7rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; } .card-meta-item { display: flex; align-items: center; gap: .2rem; } .card-desc { font-size: .72rem; color: var(--color-text-muted); line-height: 1.5; margin-top: .35rem; } .card-actions { display: flex; gap: .375rem; margin-top: .5rem; flex-wrap: wrap; } .card-action-btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; padding: .28rem .65rem; border-radius: 5px; border: 1.5px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text-muted); cursor: pointer; text-decoration: none; transition: all .12s; white-space: nowrap; } .card-action-btn:hover { border-color: var(--color-brand); color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 6%, transparent); } .card-action-btn.primary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); } .card-action-btn.primary:hover { background: color-mix(in srgb, var(--color-brand) 85%, #000); border-color: color-mix(in srgb, var(--color-brand) 85%, #000); } .card-zoom-btn { display: flex; align-items: center; justify-content: center; padding: .25rem; color: var(--color-text-muted); border: none; background: none; cursor: pointer; border-radius: 5px; transition: color .12s, background .12s; flex-shrink: 0; font-size: 1rem; } .card-zoom-btn:hover { color: var(--color-brand); background: var(--color-surface-alt); } /* ── Carousels — swipe tactile ──────────────────────────────── */ .carousel-track, .similar-routes-track, .em-track, [class*="carousel"], [class*="-track"] { touch-action: pan-x; }