/* ---------- Polices auto-hebergees (voir src/fonts/LICENCES.txt) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* * Jetons de design de Viticole du monde. Voir docs/design.md. * * Le theme est porte par `[data-theme]` sur , avec trois etats : * - absent -> on suit le systeme (prefers-color-scheme) * - data-theme=light -> force clair * - data-theme=dark -> force sombre * * Deux ecarts assumes pour le tactile : base 16 px (sous iOS, un champ de saisie * sous 16 px declenche un zoom automatique a la mise au point) et cibles de 44 px. */ :root { /* ---------- Palette claire ---------- */ --fond: #f7f3ee; --surface: #fffdfa; --surface-2: #f1ebe3; --surface-3: #e9e1d7; --bordure: #e6ddd2; --bordure-2: #d6cabd; --encre: #2a1a1f; --encre-2: #6b5a5f; --encre-3: #9a8a8f; --primaire: #7b1e3a; --primaire-2: #651730; --primaire-pale: #f3e4e8; --sur-primaire: #ffffff; --or: #b8862b; --or-pale: #f4e9d2; --succes: #3f7d4e; --succes-pale: #e3efe5; --erreur: #b23a3a; --erreur-pale: #f6e1e1; --info: #3b6ea5; --info-pale: #e2ebf5; --avert: #c98a1e; --avert-pale: #fbf1df; --voile: rgb(42 26 31 / 45%); --ombre-rgb: 42 26 31; --ombre-s: 0 1px 2px rgb(var(--ombre-rgb) / 6%); --ombre-m: 0 2px 8px rgb(var(--ombre-rgb) / 10%); --ombre-l: 0 8px 24px rgb(var(--ombre-rgb) / 16%); /* ---------- Codes de lecture (identiques dans les deux themes) ---------- */ --vin-rouge: #7b1e3a; --vin-blanc: #d9b85c; --vin-rose: #e39aa8; --vin-effervescent: #9fb7c9; --vin-doux: #c8842a; --vin-jaune: #d1a30f; /* ---------- Typographie ---------- Deux polices auto-hebergees (src/fonts, licence OFL, sous-ensemble latin) : Playfair Display pour les titres, Inter pour l'interface. Piles systeme en secours pendant le chargement. */ --font-texte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-titre: "Playfair Display", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif; --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-titre: 1.75rem; /* ---------- Espacements, grille de 4 px ---------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; /* ---------- Rayons ---------- */ --r-s: 4px; --r-m: 6px; --r-l: 10px; --r-xl: 14px; --r-pill: 9999px; /* ---------- Mouvement ---------- */ --duree: 120ms; --duree-lente: 240ms; --courbe: cubic-bezier(0.33, 1, 0.68, 1); /* ---------- Controles ---------- */ --controle: 44px; --controle-s: 36px; /* ---------- Chrome de l'application ---------- */ --entete-h: 56px; --tabbar-height: 56px; /* Encoche et barre d'accueil iOS. Vaut 0 hors PWA installee. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Hauteur reelle de l'ecran. Dans un onglet, `dvh` suit la barre d'adresse qui se retracte, la ou `vh` compte toujours la hauteur maximale. */ --app-height: 100dvh; /* Ecart entre le viewport annonce et l'ecran. Nul partout, sauf iOS installe. */ --viewport-drift: 0px; } /* ---------- Correction iOS en mode installe ---------- * Une fois l'application ajoutee a l'ecran d'accueil, iOS calcule `dvh` en RETRANCHANT * l'encoche : sur un iPhone 11, `100dvh` vaut 848 px pour un ecran de 896. Comme la barre * d'onglets est en `position: fixed; bottom: 0`, elle laisserait une bande de fond nu sous * elle. En mode installe il n'y a plus de barre d'adresse : `vh` decrit exactement l'ecran. * `--viewport-drift` vaut la difference : negative sur iPhone, zero partout ailleurs. La * correction s'annule d'elle-meme la ou elle n'a pas lieu d'etre, sans detection d'appareil. */ @media (display-mode: standalone) { :root { --app-height: 100vh; --viewport-drift: calc(100dvh - 100vh); } } /* Distance entre le bas du viewport et le HAUT de la barre d'onglets. Sert au `bottom:` de ce qui flotte au-dessus d'elle et au `padding-bottom:` du contenu defilant. A utiliser tel quel plutot que de recomposer le calcul. */ :root { --above-tabbar: calc(var(--tabbar-height) + var(--safe-bottom) + var(--viewport-drift)); } /* ---------- Palette sombre ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond: #17121a; --surface: #221a24; --surface-2: #2d232f; --surface-3: #382c3b; --bordure: #3a2e3d; --bordure-2: #4a3c4e; --encre: #f3ebe6; --encre-2: #b8a9ae; --encre-3: #857a7f; --primaire: #c9647f; --primaire-2: #d47e95; --primaire-pale: #3a1f29; --sur-primaire: #1b0d12; --or: #d9a94b; --or-pale: #3a2f1a; --succes: #6cb07d; --succes-pale: #1f3324; --erreur: #e07070; --erreur-pale: #3d1f1f; --info: #7fa7d6; --info-pale: #1e2b3b; --avert: #e0a94a; --avert-pale: #3b2f17; --voile: rgb(0 0 0 / 55%); --ombre-rgb: 0 0 0; --ombre-s: 0 1px 2px rgb(var(--ombre-rgb) / 35%); --ombre-m: 0 2px 8px rgb(var(--ombre-rgb) / 50%); --ombre-l: 0 8px 24px rgb(var(--ombre-rgb) / 65%); } } /* Bascule manuelle : doit l'emporter sur la preference systeme, dans les deux sens. */ :root[data-theme="dark"] { --fond: #17121a; --surface: #221a24; --surface-2: #2d232f; --surface-3: #382c3b; --bordure: #3a2e3d; --bordure-2: #4a3c4e; --encre: #f3ebe6; --encre-2: #b8a9ae; --encre-3: #857a7f; --primaire: #c9647f; --primaire-2: #d47e95; --primaire-pale: #3a1f29; --sur-primaire: #1b0d12; --or: #d9a94b; --or-pale: #3a2f1a; --succes: #6cb07d; --succes-pale: #1f3324; --erreur: #e07070; --erreur-pale: #3d1f1f; --info: #7fa7d6; --info-pale: #1e2b3b; --avert: #e0a94a; --avert-pale: #3b2f17; --voile: rgb(0 0 0 / 55%); --ombre-rgb: 0 0 0; --ombre-s: 0 1px 2px rgb(var(--ombre-rgb) / 35%); --ombre-m: 0 2px 8px rgb(var(--ombre-rgb) / 50%); --ombre-l: 0 8px 24px rgb(var(--ombre-rgb) / 65%); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; /* Le doigt fait defiler, il ne zoome pas. `pan-x pan-y` autorise le defilement et RIEN d'autre : ni pincement, ni zoom par double tape. Couvre Chrome et Android ; Safari demande un traitement en JavaScript (js/gestes.js). */ touch-action: pan-x pan-y; scroll-behavior: smooth; } /* Echappatoire pour ce qui gere ses propres gestes (la carte Leaflet). `none` rend la main complete a l'element, qui devient responsable de tout, defilement compris. */ [data-allow-gestures] { touch-action: none; } @media (min-width: 768px) { html { font-size: 15px; } } body { margin: 0; font-family: var(--font-texte); font-size: var(--fs-md); line-height: 1.5; color: var(--encre); background: var(--fond); /* Pas de rebond elastique : en PWA plein ecran, il fait apparaitre une bande vide sous la barre d'onglets. */ overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-titre); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; } p { margin: 0; } a { color: var(--primaire); } button, a { -webkit-tap-highlight-color: transparent; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }