/* Habillage propre à Runornot, construit sur les tokens du design system Foulée (css/theme.css : couleurs, typo, cadence, ombres). --go/--stop/--wait/--state restent des noms locaux : js/app.js pose `--state: var(--go|--stop|--wait)` directement sur , donc ces trois variables doivent continuer d'exister sous ce nom. */ :root { --go: var(--j6n-accent); --stop: var(--j6n-danger); --wait: var(--j6n-warning); --state: var(--j6n-text-muted); } html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; padding: clamp(var(--j6n-space-4), 5vw, var(--j6n-space-5)); padding-bottom: max(clamp(var(--j6n-space-4), 5vw, var(--j6n-space-5)), env(safe-area-inset-bottom)); background-image: repeating-linear-gradient( 90deg, oklch(0.24 0.015 155 / 0.035) 0 2px, transparent 2px 42px ); } /* Écrans courts (mobile en paysage, petites fenêtres) : on évite de couper le haut du contenu quand tout ne tient pas en hauteur. */ @media (max-height: 680px) { body { align-items: flex-start; } } .track-line { position: fixed; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient( 90deg, var(--state) 0 34px, transparent 34px 68px ); opacity: 0.85; transition: background var(--j6n-dur-2) var(--j6n-ease); } main { width: 100%; max-width: 460px; margin: 0 auto; } .theme-switch-row { display: flex; justify-content: center; margin-bottom: var(--j6n-space-4); } .theme-switch label { min-height: 34px; padding: 0 var(--j6n-space-3); font-size: var(--j6n-text-xs); } .kicker { font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--j6n-text-muted); text-align: center; margin: 0 0 var(--j6n-space-3); font-weight: 400; } .lead { font-size: var(--j6n-text-sm); line-height: var(--j6n-leading-body); color: var(--j6n-text-muted); text-align: center; max-width: 38ch; margin: 0 auto var(--j6n-space-5); } /* Le dossard : élément signature de la page */ .bib { position: relative; background: var(--j6n-surface); border: 3px solid var(--state); border-radius: var(--j6n-radius-lg); padding: clamp(var(--j6n-space-6), 8vw, var(--j6n-space-7)) clamp(var(--j6n-space-4), 5vw, var(--j6n-space-6)) var(--j6n-space-6); text-align: center; box-shadow: var(--j6n-shadow-md); transition: border-color var(--j6n-dur-3) var(--j6n-ease), opacity var(--j6n-dur-2) var(--j6n-ease); } /* Progressive enhancement : le dossard interactif attend d'avoir de vraies données avant de s'afficher (évite le flash du texte de chargement), et le repli sans JS ne s'affiche que si besoin. */ .js #bib { opacity: 0; } .js #bib.is-ready { opacity: 1; } .js .no-js-fallback { display: none; } .no-js #bib { display: none; } .bib::after { content: ""; position: absolute; left: var(--j6n-space-4); right: var(--j6n-space-4); bottom: -1px; height: 0; border-bottom: 2px dashed var(--j6n-border-strong); } .grommet { position: absolute; top: var(--j6n-space-4); width: 20px; height: 20px; border-radius: 50%; background: var(--j6n-bg); border: 2px solid var(--state); transition: border-color var(--j6n-dur-3) var(--j6n-ease); } .grommet::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--j6n-text-muted); opacity: 0.5; } .grommet.left { left: var(--j6n-space-4); } .grommet.right { right: var(--j6n-space-4); } .bib-number { font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-xs); color: var(--j6n-text-muted); letter-spacing: 0.05em; margin-bottom: var(--j6n-space-5); } /* Habillage ajouté uniquement sur l'image générée pour le partage (voir js/share.js) : masqué à l'écran, révélé le temps de la capture via la classe .is-capturing pour identifier le dossard hors contexte. */ .bib-share-header, .bib-share-footer { display: none; } /* html2canvas rend très mal le flou du box-shadow (grosse tache grise irrégulière plutôt qu'une ombre nette, surtout visible dans les coins du rectangle exporté) : on le désactive le temps de la capture. */ .bib.is-capturing { box-shadow: none; } .is-capturing .bib-share-header { display: block; font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-sm); letter-spacing: 0.04em; color: var(--j6n-text); font-weight: 600; margin: 0 0 var(--j6n-space-5); } .is-capturing .bib-share-footer { /* Pas de `gap` flexbox : html2canvas (utilisé pour la capture) ne le supporte pas et désaligne les enfants. space-between calé sur les deux extrémités s'en passe sans problème. */ display: flex; align-items: center; justify-content: space-between; margin-top: var(--j6n-space-5); padding-top: var(--j6n-space-4); border-top: var(--j6n-border-width) solid var(--j6n-border); font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-sm); letter-spacing: 0.02em; color: var(--j6n-text-muted); } .bib-share-footer__logo { display: block; width: 38px; height: 38px; flex-shrink: 0; } .answer { font-family: var(--j6n-font-sans), serif; font-weight: 700; font-size: clamp(3rem, 15vw, 5rem); line-height: 0.95; letter-spacing: var(--j6n-tracking-tight); color: var(--state); margin: 0 0 var(--j6n-space-3); transition: color var(--j6n-dur-3) var(--j6n-ease); } .phrase { font-size: var(--j6n-text-lg); line-height: var(--j6n-leading-body); margin: 0 0 var(--j6n-space-1); max-width: 34ch; margin-left: auto; margin-right: auto; min-height: 3.1em; } .countdown { font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-xs); color: var(--j6n-text-muted); margin-top: var(--j6n-space-4); padding-top: var(--j6n-space-4); border-top: var(--j6n-border-width) solid var(--j6n-border); } .countdown strong { color: var(--j6n-text); } .countdown[hidden] { display: none; } .meteo-toggle { margin-top: var(--j6n-space-5); padding-top: var(--j6n-space-4); border-top: var(--j6n-border-width) solid var(--j6n-border); } .locate-btn { font-family: var(--j6n-font-sans), serif; font-weight: 600; font-size: var(--j6n-text-sm); color: var(--j6n-text-invert); background: var(--j6n-text); border: none; border-radius: var(--j6n-radius-md); padding: 12px var(--j6n-space-5); min-height: 44px; width: 100%; max-width: 280px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--j6n-space-2); transition: background var(--j6n-dur-1) var(--j6n-ease); } .locate-btn:hover { background: var(--stop); } .locate-btn:disabled { opacity: 0.55; cursor: progress; } .status { font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-xs); color: var(--j6n-text-muted); margin-top: var(--j6n-space-3); min-height: 1.1em; } .specs { margin-top: var(--j6n-space-4); padding-top: var(--j6n-space-4); border-top: var(--j6n-border-width) solid var(--j6n-border); font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-xs); color: var(--j6n-text-muted); text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: var(--j6n-space-2) var(--j6n-space-3); } .specs[hidden] { display: none; } @media (max-width: 360px) { .specs { grid-template-columns: 1fr; } .specs dd { text-align: left; } } .specs dt { color: var(--j6n-text-muted); } .specs dd { margin: 0; color: var(--j6n-text); font-weight: 600; text-align: right; } /* --- Partage du dossard --- */ .share-row { margin-top: var(--j6n-space-5); padding-top: var(--j6n-space-4); border-top: var(--j6n-border-width) solid var(--j6n-border); display: flex; justify-content: center; } .share-btn { font-family: var(--j6n-font-sans), serif; font-weight: 600; font-size: var(--j6n-text-sm); color: var(--j6n-text); background: var(--j6n-surface); border: 2px solid var(--j6n-text); border-radius: var(--j6n-radius-md); padding: 12px var(--j6n-space-5); min-height: 44px; width: 100%; max-width: 280px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--j6n-space-2); transition: background var(--j6n-dur-1) var(--j6n-ease), color var(--j6n-dur-1) var(--j6n-ease), border-color var(--j6n-dur-1) var(--j6n-ease), transform var(--j6n-dur-1) var(--j6n-ease); } .share-btn:hover:not(:disabled) { background: var(--j6n-text); color: var(--j6n-text-invert); } .share-btn:active:not(:disabled) { transform: scale(0.97); } .share-btn:disabled { opacity: 0.55; cursor: not-allowed; } a.share-btn { text-decoration: none; } .share-btn__icon { display: flex; width: 18px; height: 18px; flex-shrink: 0; } .share-btn__icon svg { display: none; width: 18px; height: 18px; } .share-btn__icon-share { display: block; } .share-btn.is-loading .share-btn__icon-share, .share-btn.is-done .share-btn__icon-share { display: none; } .share-btn.is-loading .share-btn__icon-spinner { display: block; animation: j6n-spin 700ms linear infinite; } .share-btn.is-done .share-btn__icon-check { display: block; } /* Le succès du partage réutilise le vert sémantique du design system (contraste >= 4.5:1 déjà vérifié en clair et en sombre, RGAA 3.2). */ .share-btn.is-done { border-color: var(--j6n-success); color: var(--j6n-success); } .share-btn.is-error { border-color: var(--j6n-danger); color: var(--j6n-danger); animation: share-btn-shake 0.3s ease; } @keyframes share-btn-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* --- Contenu éditorial (comment ça marche, FAQ) --- */ .info-block { margin-top: var(--j6n-space-6); padding-top: var(--j6n-space-5); border-top: var(--j6n-border-width) solid var(--j6n-border); } .info-block h2 { font-family: var(--j6n-font-mono), serif; font-size: var(--j6n-text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--j6n-text-muted); text-align: center; margin: 0 0 var(--j6n-space-4); font-weight: 400; } .info-block > p { font-size: var(--j6n-text-sm); line-height: var(--j6n-leading-body); color: var(--j6n-text); margin: 0; } .info-block a { color: var(--j6n-text); } .faq-item { border-top: var(--j6n-border-width) solid var(--j6n-border); padding: var(--j6n-space-3) 0; } .faq-item:first-of-type { border-top: none; padding-top: 0; } .faq-item summary { font-weight: 600; font-size: var(--j6n-text-sm); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "+ "; color: var(--j6n-text-muted); } .faq-item[open] summary::before { content: "– "; } .faq-item p { margin: var(--j6n-space-2) 0 0; font-size: var(--j6n-text-xs); line-height: var(--j6n-leading-body); color: var(--j6n-text-muted); } footer { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--j6n-space-5); font-size: var(--j6n-text-xs); color: var(--j6n-text-muted); line-height: var(--j6n-leading-body); } .logo { display: block; width: 40px; height: 40px; margin: 0 auto var(--j6n-space-3); } .no-js .no-js-fallback { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .bib, .grommet, .answer { transition: none; } .js #bib { opacity: 1; } .share-btn.is-loading .share-btn__icon-spinner, .share-btn.is-error { animation: none; } } :focus-visible { outline: none; box-shadow: var(--j6n-ring); }