/** * Styles du planificateur de voyage NYC. * * Personnalisation indispensable : --nyctp-font-family et --nyctp-font-size * doivent reprendre les valeurs calculées du corps du texte de * voyage-new-york.net (à relever dans l'inspecteur du navigateur : onglet * "Computed", propriétés font-family et font-size sur ou sur un * paragraphe d'article). Tout le reste de la feuille est exprimé en unités * relatives (em) à partir de cette taille de base, donc s'adapte * automatiquement une fois ces deux variables réglées. */ #nyc-trip-planner-app { --nyctp-font-family: 'Montserrat', sans-serif; --nyctp-font-size: 16px; --nyctp-line-height: 1.6; --nyctp-primary: #0b2545; --nyctp-primary-light: #13355e; --nyctp-accent: #d99a2b; --nyctp-bg: #f7f8fa; --nyctp-card-bg: #ffffff; --nyctp-border: #e3e6ea; --nyctp-text: #1c1f26; --nyctp-text-muted: #6b7280; --nyctp-radius: 14px; --nyctp-shadow: 0 4px 16px rgba(11, 37, 69, 0.08); font-family: var(--nyctp-font-family); font-size: var(--nyctp-font-size); line-height: var(--nyctp-line-height); color: var(--nyctp-text); max-width: 1100px; margin: 0 auto; padding: 1rem 0 3rem; } #nyc-trip-planner-app * { box-sizing: border-box; } /* Les champs de formulaire n'héritent pas de la police/taille de la page par défaut dans les navigateurs (ils prennent la police système) : on force l'héritage pour qu'ils se fondent dans le reste du texte du site. */ #nyc-trip-planner-app input, #nyc-trip-planner-app select, #nyc-trip-planner-app button, #nyc-trip-planner-app textarea { font: inherit; } .nyctp-hero { text-align: center; margin-bottom: 2em; } .nyctp-hero h1 { color: var(--nyctp-primary); font-size: 1.9em; line-height: 1.25; margin: 0 0 0.4em; } .nyctp-hero p { color: var(--nyctp-text-muted); font-size: 1.05em; margin: 0; } .nyctp-intro { max-width: 720px; margin: 0 auto 2em; text-align: center; font-size: 1em; line-height: 1.6; color: var(--nyctp-text); } .nyctp-card { background: var(--nyctp-card-bg); border: 1px solid var(--nyctp-border); border-radius: var(--nyctp-radius); box-shadow: var(--nyctp-shadow); padding: 1.4em 1.6em; margin-bottom: 1.5em; } .nyctp-card h2 { font-size: 1.3em; line-height: 1.3; color: var(--nyctp-primary); margin: 0 0 0.8em; display: flex; align-items: center; gap: 0.4em; } .nyctp-card > p { font-size: 0.95em; } .nyctp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2em; } .nyctp-field label { display: block; font-weight: 600; font-size: 1em; margin-bottom: 0.4em; color: var(--nyctp-text); } .nyctp-field input[type="date"], .nyctp-field input[type="time"], .nyctp-field input[type="number"], .nyctp-field select { width: 100%; padding: 0.6em 0.75em; border: 1px solid var(--nyctp-border); border-radius: 8px; font-size: 1em; background: #fff; color: var(--nyctp-text); } .nyctp-field input:focus, .nyctp-field select:focus { outline: none; border-color: var(--nyctp-primary); box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.12); } .nyctp-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.6em 0; border-bottom: 1px solid var(--nyctp-border); } .nyctp-pref-row:last-child { border-bottom: none; } .nyctp-pref-row span.nyctp-pref-label { font-weight: 500; font-size: 1.05em; } .nyctp-pref-levels { display: flex; gap: 0.4em; } .nyctp-pref-levels button { width: 2.2em; height: 2.2em; border-radius: 50%; border: 1px solid var(--nyctp-border); background: #fff; cursor: pointer; font-size: 1em; color: var(--nyctp-text-muted); transition: all 0.15s ease; } .nyctp-pref-levels button.is-active { background: var(--nyctp-primary); border-color: var(--nyctp-primary); color: #fff; } .nyctp-radio-group, .nyctp-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.6em; } .nyctp-radio-group label, .nyctp-checkbox-group label { display: flex; align-items: center; gap: 0.45em; padding: 0.55em 1em; border: 1px solid var(--nyctp-border); border-radius: 999px; cursor: pointer; font-size: 1em; font-weight: 500; } .nyctp-radio-group input:checked + span, .nyctp-checkbox-group input:checked + span { color: var(--nyctp-primary); } .nyctp-radio-group label:has(input:checked), .nyctp-checkbox-group label:has(input:checked) { border-color: var(--nyctp-primary); background: rgba(11, 37, 69, 0.06); } .nyctp-submit-bar { position: sticky; bottom: 0; display: flex; justify-content: center; padding: 1em 0; background: linear-gradient(to top, var(--nyctp-bg) 60%, transparent); } .nyctp-btn { display: inline-flex; align-items: center; gap: 0.5em; background: var(--nyctp-primary); color: #fff; border: none; border-radius: 999px; padding: 0.9em 1.8em; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .nyctp-btn:hover { background: var(--nyctp-primary-light); } .nyctp-btn:active { transform: scale(0.98); } .nyctp-btn.nyctp-btn-accent { background: var(--nyctp-accent); color: #241a04; } .nyctp-btn.nyctp-btn-secondary { background: transparent; color: var(--nyctp-primary); border: 1px solid var(--nyctp-border); } .nyctp-btn[disabled] { opacity: 0.6; cursor: not-allowed; } .nyctp-error { color: #b3261e; background: #fdecea; border: 1px solid #f5c6c2; border-radius: 8px; padding: 0.8em 1em; margin-bottom: 1em; font-size: 1em; } /* Résultats */ .nyctp-day-tabs { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em; } .nyctp-day-tabs button { padding: 0.55em 1.1em; border-radius: 999px; border: 1px solid var(--nyctp-border); background: #fff; cursor: pointer; font-weight: 600; font-size: 1em; } .nyctp-day-tabs button.is-active { background: var(--nyctp-primary); color: #fff; border-color: var(--nyctp-primary); } .nyctp-map { height: 380px; border-radius: var(--nyctp-radius); overflow: hidden; margin-bottom: 1.25em; border: 1px solid var(--nyctp-border); } .nyctp-timeline { display: flex; flex-direction: column; gap: 0; } .nyctp-item { display: flex; gap: 1em; padding: 1em 0; border-bottom: 1px dashed var(--nyctp-border); } .nyctp-item:last-child { border-bottom: none; } .nyctp-item-time { flex: 0 0 4.2em; font-weight: 700; color: var(--nyctp-primary); font-size: 1em; } .nyctp-item-badge { flex: 0 0 2.4em; height: 2.4em; border-radius: 50%; background: var(--nyctp-bg); display: flex; align-items: center; justify-content: center; font-size: 1.1em; } .nyctp-item-body h3 { margin: 0 0 0.25em; font-size: 1.15em; line-height: 1.3; } .nyctp-item-body p { margin: 0; font-size: 1em; color: var(--nyctp-text-muted); } .nyctp-item-meta { font-size: 0.92em; color: var(--nyctp-text-muted); margin-top: 0.3em; } .nyctp-item.nyctp-item-trajet .nyctp-item-body p, .nyctp-item.nyctp-item-trajet .nyctp-item-time { color: var(--nyctp-text-muted); font-weight: 400; } .nyctp-item.nyctp-item-pause .nyctp-item-badge { background: rgba(217, 154, 43, 0.15); } .nyctp-day-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; font-size: 1em; color: var(--nyctp-text-muted); } .nyctp-save-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em; margin-top: 1em; } .nyctp-save-link { flex: 1 1 260px; padding: 0.65em 0.9em; border: 1px dashed var(--nyctp-border); border-radius: 8px; font-size: 0.95em; word-break: break-all; background: var(--nyctp-bg); } .nyctp-item-link { display: inline-block; margin-top: 0.5em; font-size: 0.95em; font-weight: 600; color: var(--nyctp-accent); text-decoration: none; } .nyctp-item-link:hover { text-decoration: underline; } .nyctp-map-pin-wrapper { background: transparent; border: none; } .nyctp-map-pin { width: 30px; height: 30px; border-radius: 50%; background: var(--nyctp-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95em; line-height: 1; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .nyctp-map-pin-origine { background: var(--nyctp-accent); color: #241a04; font-size: 1.05em; } .nyctp-loading { text-align: center; padding: 2em; font-size: 1.05em; color: var(--nyctp-text-muted); } @media (max-width: 600px) { #nyc-trip-planner-app { font-size: calc(var(--nyctp-font-size) * 0.95); } .nyctp-item-time { flex-basis: 3.4em; } .nyctp-map { height: 280px; } }