/* =========================================================
TripFriendly — Design System
Charte graphique : blanc / turquoise / bleu marine
Inspirée des captures de design fournies
========================================================= */
/* Polices chargées via dans App.razor (plus performant que @import). */
/* ── Variables CSS ────────────────────────────────────── */
:root {
/* Couleurs principales */
--color-primary: #0ABFBC; /* Turquoise TripFriendly */
--color-primary-dark: #089a97;
--color-primary-light: #e8f9f9;
--color-primary-glow: rgba(10, 191, 188, 0.15);
/* Neutres */
--color-bg: #EEF1F5; /* blanc cassé doux (moins éblouissant que le blanc pur) */
--color-surface: #FFFFFF;
--color-surface-2: #F4F6F8;
--color-border: #E8ECF0;
--color-border-light: #F0F3F6;
/* Texte */
--color-text-primary: #1A2332;
--color-text-secondary: #5A6474;
--color-text-muted: #6B7280; /* assombri pour contraste AA (lighthouse) */
/* Accents */
--color-accent-yellow: #FFD166;
--color-accent-coral: #EF6C6C;
--color-accent-purple: #8B5CF6;
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
/* Affiliation */
--color-booking: #003580;
--color-gyg: #FF5533;
--color-tripadvisor: #34E0A1;
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'DM Sans', var(--font-sans);
/* 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;
/* Border radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
--shadow-glow: 0 0 0 3px var(--color-primary-glow);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 400ms ease;
/* Layout */
--container-max: 1200px;
--navbar-height: 64px;
--sidebar-width: 280px;
}
/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--color-text-primary);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Typography ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
color: var(--color-text-primary);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
p { color: var(--color-text-secondary); line-height: 1.7; }
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
/* `:not(.btn)` crucial : un bouton stylé en lien () ne doit JAMAIS
être recoloré par le hover générique des liens — sinon, au tap mobile, le :hover
reste collé après navigation et le texte du bouton devient invisible (même teinte
que son fond). Les couleurs de hover des boutons sont gérées par .btn-* plus bas. */
a:not(.btn):hover { color: var(--color-primary-dark); }
/* FocusOnNavigate place le focus sur le