/* public/styles.css — today.paris */ :root { --paris-blue: #000C5C; --paris-red: #CC0000; --bg: #f6f5f2; --card: #ffffff; --ink: #1c1b1a; --muted: #6b6862; --line: #e6e3dd; /* Le logo conserve le rouge du drapeau. L'accent interactif est volontairement plus sombre pour atteindre un contraste de 5,66:1 avec le blanc (WCAG AA, texte normal). */ --accent: #c82032; --accent-ink: #ffffff; --chip: #f1efe9; --chip-active: #1c1b1a; --chip-active-ink: #ffffff; --good: #2e7d5b; --warn-bg: #fff3cd; --warn-ink: #6b5300; --warn-line: #f2d98a; /* Mot-marque bleu-blanc-rouge (souhait de Gérald, 04/08/2026) : bleu et rouge du drapeau de Paris (rendu de référence #002395 / #ED2939), point en ivoire — un blanc assez foncé pour rester visible sur le fond crème, entouré de deux couleurs vives il se lit « blanc ». */ --logo-bleu: #002395; --logo-point: #ddd1b2; --logo-rouge: #ed2939; --radius: 16px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06); --maxw: 720px; } @media (prefers-color-scheme: dark) { :root { --bg: #17161a; --card: #201f24; --ink: #ecebe8; --muted: #a09c96; --line: #33313a; --accent: #ff4d5e; /* en thème sombre : le même rouge éclairci, comme le logo */ --accent-ink: #1a1113; --chip: #2a2930; --chip-active: #ecebe8; --chip-active-ink: #1a1113; /* Sur fond sombre, le bleu marine exact serait illisible : on éclaircit les teintes en gardant les mêmes tons — le rendu exact du drapeau vit en mode clair. */ --logo-bleu: #5c7fe6; --logo-point: #fff9ec; --logo-rouge: #ff4d5e; --good: #6cd6a4; --warn-bg: #3a3212; --warn-ink: #f2d98a; --warn-line: #5c5020; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); } /* COULEUR DE BASE DES LIENS, EN THÈME SOMBRE SEULEMENT — WCAG 2.1 AA, mesuré le 09/09/2026 sur https://today.paris (Playwright + axe-core 4.13.0). Cette feuille ne donne de couleur qu'à SIX familles de liens : .langswitch a, .crumb a, .pmeta a, .prelated a, .pwiki a et .partner-fallback a. Tous les autres héritent du bleu par défaut du navigateur, #0000EE — une couleur que personne n'a choisie. En thème CLAIR ce bleu passe largement (8,62:1 sur --bg, 9,40:1 sur --card) : rien à corriger, donc rien n'est repeint. En thème SOMBRE il s'effondre, pour un seuil AA de 4,5:1 : 1,92:1 liens du pied de page (mentions légales, confidentialité, Open-Meteo), sur les six pages auditées, en français comme en japonais et en arabe 1,74:1 le NOM DU LIEU sur les pages de quartier (a.pnom > strong) — le contenu principal de la page, quasi invisible 1,49:1 le crédit photo des pages de lieu (#0606B9 : le bleu délavé par l'opacité de .pcredit, retirée plus bas) POURQUOI SEULEMENT LE SOMBRE (09/09/2026). Hors de ce bloc, la même règle repeint aussi le thème clair, là où aucune mesure ne trouve de défaut : relevé sur le site publié à 1440 px, 34 liens changent de couleur sur /marais/ — dont 30 noms de lieux, « Cathédrale Notre-Dame de Paris » passe du bleu au rouge de la maison — 6 sur /mentions-legales/, 5 sur une page de lieu, 4 sur l'accueil. Étendre le rouge au thème clair est un CHOIX VISUEL : il revient à Gérald, pas à la mesure. Le jour où il le veut, la règle sort de ce bloc : --accent tient 5,19:1 sur --bg et 5,66:1 sur --card en clair. Le thème sombre n'a pas d'autre déclencheur que cette requête média : aucun attribut data-theme n'existe dans la feuille ni dans les pages servies (vérifié le 09/09). Épreuve : test/contraste-aa.test.mjs — elle relit ces jetons et refait le calcul. */ a { color: var(--accent); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; } /* Bandeau démo */ .demo-banner { background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--warn-line); font-size: 13px; text-align: center; padding: max(8px, calc(env(safe-area-inset-top, 0px) + 4px)) 16px 8px; } /* En-tête */ .hero { max-width: var(--maxw); margin: 0 auto; padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 20px 8px; text-align: center; } .langswitch { text-align: right; margin: 0 0 6px; font-size: 13px; } .langswitch ul { list-style: none; margin: 0; padding: 0; } .langswitch a, .langswitch .cur { color: var(--muted); text-decoration: none; padding: 2px 7px; /* Cible tactile 44×44 (Gérald, 28/08/2026, balayage 320-1400px) : un code de langue court (« IT », « FR ») ne faisait que ~26px de large malgré les 44px de haut. */ min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .langswitch a:hover { color: var(--accent); } .langswitch .cur { color: var(--ink); font-weight: 700; } .hero-tools { display: flex; justify-content: flex-end; margin: 0 0 2px; } .passport-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; } .passport-toggle:hover, .passport-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); } .logo { font-size: clamp(30px, 7vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 0; } /* « Plus que 3 jours » : la seule mention qui a le droit d'attirer l'œil, parce qu'elle sert l'urgence du visiteur — pas la mise en avant d'un lieu. */ .offer-meta .urgent { color: var(--accent); font-weight: 600; } .logo .l-bleu { color: var(--logo-bleu); } /* LE POINT DU LOGO (choix « B » de Gérald, 26/09/2026) : le « . » reste dans le titre, transparent ; le rond ::after le dessine, retiré en contraste forcé. Pourquoi : test/logo-point-dessine.test.mjs. */ .logo:has(> .l-point) { white-space: nowrap; } .logo .l-point { color: transparent; } .logo .l-point::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: -1em; vertical-align: baseline; border-radius: 50%; background: var(--logo-point); transform-origin: 0 100%; transform: translate(0.796em, 0.009em) scale(0.181); -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (forced-colors: active) { .logo .l-point::after { content: none; } } .logo .l-rouge { color: var(--logo-rouge); } .tagline { color: var(--muted); max-width: 30rem; margin: 8px auto 0; font-size: 15px; } .clock { color: var(--muted); font-size: 13px; margin: 6px 0 0; font-variant-numeric: tabular-nums; min-height: 1.5em; } main, .ici-page-body { max-width: var(--maxw); margin: 0 auto; padding: 12px 16px max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px)); } .passport-panel { margin: 0 0 16px; padding: 17px 18px; } .passport-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .passport-panel-head h2 { margin: 0; font-size: 20px; line-height: 1.25; } .passport-panel-head .btn-ghost { flex: none; padding: 8px 11px; font-size: 12px; } .passport-panel-count { margin: 7px 0 0; color: var(--muted); font-size: 13px; } .passport-list { margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .passport-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; } .passport-list time { color: var(--muted); white-space: nowrap; } .passport-panel-privacy { margin: 12px 0 0; color: var(--muted); font-size: 12px; } /* LA REPRISE EST UNE BANDE, PLUS UN BARRAGE (29/08/2026). Elle occupait une carte pleine hauteur au-dessus de tout ; elle tient maintenant sur une ligne qui accompagne la page. */ .resume-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; padding: 9px 13px; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 11px; background: var(--card); } .resume-bar[hidden], .passport-panel[hidden], .first-offer[hidden], .adventure-fatigue[hidden] { display: none; } .resume-bar-text { margin: 0; min-width: 0; flex: 1 1 15rem; } .resume-bar-title { display: block; font-size: 14px; font-weight: 750; line-height: 1.3; } .resume-bar-note { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; } .resume-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .btn-resume, .btn-resume-ghost { min-height: 44px; padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 750; line-height: 1.2; } .btn-resume { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); } .btn-resume-ghost { border: 1px solid var(--line); background: transparent; color: var(--muted); } .btn-resume-ghost:hover { color: var(--ink); border-color: var(--ink); } /* LE BANDEAU DE LA PREMIÈRE PROPOSITION. Il annonce d'où part le programme affiché juste dessous et combien de temps il prend — jamais une position devinée du visiteur. */ .first-offer { margin: 4px 0 10px; } .first-offer-title { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* Une ligne réservée : la phrase « depuis … · 1 h » arrive avec app.js, elle ne doit pas pousser le bouton et tout ce qui suit (audit vitesse du 17/09/2026). */ .first-offer-body { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; min-height: 1.45em; } .first-offer-adjust { margin-top: 9px; min-height: 44px; font-size: 13px; } /* Les cinq territoires editoriaux : une identité visible, sans rendre ce choix obligatoire. */ .territories { margin: 10px 0 18px; padding: 18px 20px; border-block: 1px solid var(--line); } .territories-copy { max-width: 34rem; } .territories-kicker { margin: 0 0 3px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .territories h2 { margin: 0; font-size: clamp(20px, 4.5vw, 25px); line-height: 1.2; } .territories-copy > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 13px; } .territory-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 14px; } .territory { min-width: 0; min-height: 58px; padding: 9px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 720; line-height: 1.2; text-align: start; transition: border-color .15s ease, background .15s ease, transform .08s ease; } .territory:hover { border-color: var(--accent); transform: translateY(-1px); } .territory[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card)); box-shadow: inset 0 3px 0 var(--accent); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* Formulaire */ .form { padding: 20px; margin-top: 12px; } .field { margin-bottom: 18px; } .field-label { display: block; font-weight: 650; font-size: 14px; margin-bottom: 8px; } .duration-field { border: 0; min-width: 0; padding: 0; margin-inline: 0; } .duration-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .duration-chips .chip { border-radius: 12px; padding: 12px 8px; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; } .duration-chips[aria-invalid="true"] { padding: 4px; border: 2px solid var(--accent); border-radius: 14px; } /* flex-wrap : sur un écran étroit, le bouton passe sous le menu au lieu de sortir de l'écran. */ .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .select { flex: 1; /* Sans min-width:0, un menu déroulant refuse de rétrécir sous la largeur de sa plus longue option (« 4ᵉ — Marais / Hôtel de Ville ») : il poussait le bouton « Me localiser » hors de l'écran, et toute la page se mettait à défiler latéralement sur téléphone. */ min-width: 0; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 16px; appearance: none; /* chevron intégré (SVG en data-URI, teinté via --muted) pour signaler que c'est un menu */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6862' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .btn-ghost { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 14px; cursor: pointer; white-space: nowrap; } .btn-ghost:hover { border-color: var(--accent); } .geo-status { font-size: 13px; color: var(--good); margin: 8px 0 0; } /* Chips (choix) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 14px; cursor: pointer; transition: transform .06s ease, background .15s ease, color .15s ease; user-select: none; } .chip:hover { transform: translateY(-1px); } .chip[aria-checked="true"] { background: var(--chip-active); color: var(--chip-active-ink); border-color: var(--chip-active); } .toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin: 4px 0 20px; cursor: pointer; } .toggle input { width: 18px; height: 18px; accent-color: var(--accent); } /* Criteres secondaires replies : le parcours principal reste lieu → envie → reponse. */ .advanced { border: 1px solid var(--line); border-radius: 12px; margin: 2px 0 16px; background: color-mix(in srgb, var(--bg) 72%, transparent); } .advanced > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 650; } .advanced > summary::marker { color: var(--muted); } .advanced-body { border-top: 1px solid var(--line); padding: 16px 14px 2px; } .advanced-body .field:last-of-type { margin-bottom: 12px; } .btn-primary { width: 100%; padding: 15px 18px; border: none; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; cursor: pointer; transition: filter .15s ease; } .btn-primary:hover { filter: brightness(1.05); } .btn-primary:disabled { opacity: .6; cursor: progress; } .decision-note { margin: 10px 2px 0; color: var(--muted); font-size: 12px; text-align: center; } .decision-note.form-error { color: var(--accent); font-weight: 700; } /* Le produit principal : un programme unique, chronometre et faisable a pied. */ .plan { margin-top: 22px; } .plan:empty { display: none; } .plan:focus { outline: none; } /* LA PLACE DE LA RÉPONSE EST PRISE AVANT QU'ELLE N'ARRIVE (audit vitesse du 17/09/2026). Seule dans #plan, la carte d'attente écrite par le build occupe la hauteur d'un écran : les territoires et le formulaire commencent sous le pli, et le parcours qui arrive les remplace sans rien déplacer sous les yeux du visiteur — c'était 0,76 des 0,78 de CLS mesurés sur mobile. La même carte sert de sablier à une recherche demandée : la place de la réponse est alors, elle aussi, déjà prise quand le parcours arrive. */ .plan > .loading-status:only-child { min-height: 100vh; min-height: 100svh; } .adventure { padding: 20px; overflow: hidden; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .adventure::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); } [dir="rtl"] .adventure::before { inset: 0 0 0 auto; } .adventure-kicker { margin: 0 0 5px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .adventure h2 { margin: 0; font-size: clamp(22px, 5vw, 28px); line-height: 1.2; } .adventure-window { margin: 8px 0 0; color: var(--muted); font-size: 14px; } .adventure-promise { margin: 9px 0 0; color: var(--ink); font-size: 15px; line-height: 1.55; } .adventure-fit { margin: 5px 0 0; color: var(--muted); font-size: 12px; } .adventure-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; padding: 0; list-style: none; } .adventure-metrics li { min-width: 0; padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); text-align: center; color: var(--muted); font-size: 12px; } .adventure-metrics strong { display: block; color: var(--ink); font-size: 15px; } /* La ligne de budget disparaît quand aucun tarif n'est connu (jamais de tiret sous un libellé qui promet un chiffre) : les trois mesures restantes se partagent alors toute la largeur, au lieu de laisser une colonne vide à droite. */ .adventure-metrics:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .adventure-timeline { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; } .adventure-step { display: grid; grid-template-columns: 42px 64px minmax(0, 1fr); gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); } .adventure-step:first-child { border-top: 0; } /* LE VISAGE D'UNE ÉTAPE (29/08/2026). Photo et plaque occupent la MÊME case de grille : l'image est posée par-dessus, et si elle ne se charge pas, la plaque déjà en place apparaît d'elle-même. Aucune image de secours à télécharger, aucun cadre vide. */ .astep-visuel { display: grid; width: 64px; height: 64px; } .astep-visuel > * { grid-area: 1 / 1; } .astep-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--line); } /* LA PLAQUE ÉMAILLÉE DE PARIS — le visuel digne d'une étape sans photo libre (34 % des étapes proposées : cafés, librairies, pâtisseries, galeries, que Wikimédia n'a pas). Entièrement dessinée en CSS : zéro octet sur le réseau, jamais cassée. Émail vert sombre et filet blanc comme dans la rue ; elle garde ses couleurs en thème clair comme en thème sombre — une plaque de rue est un objet, pas une surface d'interface. Contraste du blanc sur cet émail : 8,9:1, très au-dessus du minimum AA. */ .plaque { --plaque-email: #123f37; display: grid; place-content: center; gap: 3px; overflow: hidden; background: radial-gradient(118% 132% at 28% -12%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%), var(--plaque-email); box-shadow: inset 0 0 0 3px var(--plaque-email), inset 0 0 0 4px rgba(255, 255, 255, .72); color: #fff; text-align: center; } .plaque b { display: block; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .plaque i { display: block; font-style: normal; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; opacity: .82; } .plaque-med { width: 64px; height: 64px; border-radius: 10px; } .plaque-med b { font-size: 23px; } .plaque-med i { font-size: 10px; padding: 0 4px; } .plaque-bande { width: 100%; height: 168px; margin-bottom: 12px; border-radius: 12px; box-shadow: inset 0 0 0 5px var(--plaque-email), inset 0 0 0 6px rgba(255, 255, 255, .72); } .plaque-bande b { font-size: clamp(30px, 8vw, 42px); } .plaque-bande i { font-size: 12px; padding: 0 18px; } .adventure-chapter-photo { height: 168px; } .adventure-step-number { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-active); color: var(--chip-active-ink); font-weight: 800; } .adventure-step-time { margin: 0 0 2px; color: var(--accent); font-size: 12px; font-weight: 750; } .adventure-step h3 { margin: 0; font-size: 17px; line-height: 1.25; } .adventure-place-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent); text-underline-offset: 3px; } .adventure-place-link:hover { color: var(--accent); text-decoration-color: currentColor; } .adventure-step-action { margin: 5px 0; color: var(--ink); font-size: 14px; } .adventure-step-meta { margin: 0; color: var(--muted); font-size: 12px; } /* Les agréments d'une étape (08/09/2026) : « Banc (20 m) · Sanisette (33 m) », dans le ton de la méta. Séparateur DANS LE TEXTE depuis le 09/09 : pas de flex ici, son gap doublerait l'écart autour du « · ». */ .adventure-step-agrements { margin: 3px 0 0; color: var(--muted); font-size: 12px; } /* Un repère cliquable (02/10/2026) : même gris que le texte, souligné en pointillé pour dire « lien » sans crier, bleu au survol et au clavier. CIBLE TACTILE D'AU MOINS 44 PX (revue Copilot de #1348, 06/10/2026 ; la règle de la maison, celle de .chip, .btn-action et .partner-fallback a) : le lien est une boîte inline-flex de 44 px de haut au minimum, le texte centré, et une adresse longue passe à la ligne DANS la boîte au lieu d'être coupée. */ .adventure-step-agrements a.agrement-itineraire { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; white-space: normal; } .adventure-step-agrements a.agrement-itineraire:hover, .adventure-step-agrements a.agrement-itineraire:focus-visible { color: var(--paris-blue); text-decoration-style: solid; } .adventure-step-agrements a.agrement-itineraire:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .adventure-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; } .adventure-actions .btn-primary, .adventure-actions .btn-ghost { text-align: center; text-decoration: none; } .adventure-actions .btn-ghost { white-space: normal; } .adventure-secondary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .adventure-honesty { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } /* LE PARCOURS RACCOURCI SE DIT, ET SE REFUSE (09/09/2026). Une ligne discrète sous les chiffres du parcours : elle n'apparaît QUE lorsqu'une étape a réellement été retirée. */ .adventure-fatigue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .adventure-fatigue-refus { padding: 2px 10px; font-size: 12px; min-height: 32px; } .adventure-now { margin: 4px 0 12px; padding: 13px 14px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); } .adventure-now p { margin: 0; font-size: 13px; } .adventure-now .adventure-now-label { margin-bottom: 3px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .adventure-trust { margin: 0 0 14px; padding: 11px 12px; border-inline-start: 3px solid var(--good); border-radius: 9px; background: color-mix(in srgb, var(--good) 7%, transparent); } .adventure-trust p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .adventure-trust .adventure-trust-label { margin-bottom: 3px; color: var(--ink); } .adventure-trust.trust-estimated { border-inline-start-color: var(--warn-ink); background: color-mix(in srgb, var(--warn-bg) 62%, transparent); } /* Le guidage principal reste dans today.paris. Maps n'est qu'un outil secondaire. */ .adventure-player { padding-top: 18px; } .adventure-progress-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; } .adventure-progress-head p { margin: 0; } .adventure-progress-head > strong { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .adventure-progress-label { color: var(--ink); font-size: 14px; font-weight: 750; } .adventure-progress { height: 7px; margin: 10px 0 19px; overflow: hidden; border-radius: 999px; background: var(--line); } .adventure-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; } .adventure-chapter { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--bg) 72%, var(--card)); } .adventure-chapter h2 { font-size: clamp(24px, 6vw, 32px); } .adventure-chapter-label { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } .adventure-chapter .adventure-step-action { margin: 14px 0 7px; } .adventure-chapter .adventure-trust { margin: 15px 0 0; background: var(--card); } .adventure-player-actions { margin-top: 13px; display: grid; gap: 9px; } .adventure-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .adventure-tools .btn-ghost { min-width: 0; white-space: normal; text-align: center; text-decoration: none; } .adventure-map-link { display: inline-flex; align-items: center; justify-content: center; } .adventure-share { width: 100%; } .adventure-overview { margin-top: 14px; border-top: 1px solid var(--line); } .adventure-overview > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 700; } .adventure-overview .adventure-timeline { margin-bottom: 0; } .adventure-step.is-complete .adventure-step-number { background: var(--good); color: #fff; } .adventure-complete { text-align: start; } .adventure-recap { margin-top: 17px; } .adventure-passport { margin-top: 17px; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); } .adventure-passport .adventure-passport-title { margin: 0 0 4px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .adventure-passport strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.35; } .adventure-passport p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .next-adventure { margin-top: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .next-adventure p { margin: 0; color: var(--muted); font-size: 12px; } .next-adventure h3 { margin: 3px 0 13px; font-size: 20px; } .next-adventure .next-adventure-origin { margin: -5px 0 13px; color: var(--ink); font-size: 13px; line-height: 1.45; } .next-adventure .next-adventure-status { min-height: 18px; margin: 6px 0 0; color: var(--muted); font-size: 12px; } .next-adventure .adventure-share { margin-top: 8px; } .plan-empty { padding: 24px 20px; text-align: center; } .plan-empty h2 { margin: 0 0 8px; font-size: 20px; } .plan-empty p { color: var(--muted); font-size: 14px; } .explore-more { margin-top: 4px; } .explore-more > summary { min-height: 48px; display: flex; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 700; } .explore-more[open] > summary { border-radius: 12px 12px 0 0; } .explore-list { display: grid; gap: 12px; margin-top: 12px; } /* Résultats */ .results { margin-top: 22px; display: grid; gap: 14px; } .results-head { font-size: 14px; color: var(--muted); margin: 4px 2px; } .offer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; position: relative; animation: rise .28s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .offer-top { display: flex; align-items: baseline; gap: 8px; } .offer-emoji { font-size: 22px; line-height: 1; } .offer-name { font-size: 18px; font-weight: 750; margin: 0; flex: 1; } .offer-demo-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 6px; padding: 2px 6px; text-transform: uppercase; } .offer-desc { color: var(--muted); font-size: 14px; margin: 6px 0 10px; } .offer-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink); margin-bottom: 10px; } .offer-meta span { display: inline-flex; align-items: center; gap: 4px; } .offer-meta .price { font-weight: 700; } .now-proof { display: grid; gap: 5px; margin: 2px 0 12px; padding: 10px 12px; border-inline-start: 3px solid var(--good); border-radius: 8px; background: color-mix(in srgb, var(--good) 8%, transparent); color: var(--muted); font-size: 12px; line-height: 1.45; } .now-proof strong { color: var(--ink); font-size: 12px; } .now-proof-line { display: flex; flex-wrap: wrap; gap: 4px 10px; } .reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .reason { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } @supports not (background: color-mix(in srgb, red, blue)) { .reason { background: var(--chip); color: var(--ink); border-color: var(--line); } } .offer-actions { display: flex; flex-wrap: wrap; gap: 8px; } .btn-action { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-weight: 650; font-size: 14px; cursor: pointer; } .btn-action:hover { background: var(--accent); color: var(--accent-ink); } .btn-action.done { background: var(--good); border-color: var(--good); color: #fff; cursor: default; } .btn-share { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; } .btn-share:hover { border-color: var(--accent); color: var(--accent); } .btn-fallback { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; } .btn-fallback:hover { border-color: var(--warn-ink); color: var(--ink); } .fallback-note { margin: 0 0 10px; color: var(--good); font-size: 13px; font-weight: 700; } .empty, .error { text-align: center; color: var(--muted); padding: 30px 16px; border: 1px dashed var(--line); border-radius: var(--radius); } .error { color: var(--accent); } /* PARIS SANS RÉSEAU (07/10/2026) : la dernière sélection, relue hors réseau (web/hors-ligne.js). Les classes de la carte d'aventure, plus une liste sobre ; l'étape en cours porte l'accent. */ /* La barre des onglets est collée en bas de l'écran : « Réessayer » ne passe jamais dessous. */ .hors-ligne { margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .hors-ligne-releve { margin: 8px 0 0; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: 8px 10px; font-size: 14px; line-height: 1.45; } .hors-ligne-etapes { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 8px; } .hors-ligne-etape { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; } .hors-ligne-etape[aria-current="step"] { border-color: var(--accent); } .hors-ligne-num { flex: none; min-width: 24px; height: 24px; border-radius: 12px; background: var(--chip); font-weight: 800; font-size: 13px; line-height: 24px; text-align: center; } .hors-ligne-corps { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .hors-ligne-meta { color: var(--muted); font-size: 13px; } .hors-ligne-encours { color: var(--accent); font-size: 12px; font-weight: 800; } .hors-ligne-lien { font-size: 13px; font-weight: 700; } /* Carte des lieux */ .map { height: 340px; margin: 22px 0 0; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; z-index: 0; } .pin-wrap { background: none !important; border: none !important; } .pin { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; background: var(--card); border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .leaflet-popup-content { font-family: inherit; font-size: 13px; } .leaflet-container { background: var(--bg); } /* Contenu "À propos" / FAQ (utile + indexable) */ .about { margin: 34px 4px 0; color: var(--muted); } .about h2 { font-size: 18px; color: var(--ink); margin: 0 0 8px; } .about > p { font-size: 14px; line-height: 1.6; margin: 0 0 14px; } .about details { border-top: 1px solid var(--line); padding: 10px 0; } .about summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); } .about details p { font-size: 14px; margin: 8px 0 0; } /* Pages piliers (contenu SEO) */ .crumb { font-size: 13px; color: var(--muted); margin: 0 0 6px; } .crumb a { color: var(--muted); } .pcta { display: inline-block; width: auto; padding: 12px 20px; margin-top: 6px; text-decoration: none; } .page { max-width: var(--maxw); margin: 8px auto 0; } .page h2 { font-size: 17px; margin: 26px 0 10px; } /* Plan du site (RGAA 12.1, lib/page-plan-du-site.js). */ .plan-liste { columns: 2 15rem; column-gap: 32px; margin: 0; padding-inline-start: 20px; } .plan-liste li { break-inside: avoid; padding-block: 4px; } .plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pcard { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .pemoji { font-size: 20px; line-height: 1.2; } /* Photo libre (Wikimedia Commons) d'un grand lieu, à la place de l'emoji */ .pphoto { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; background: var(--line); } /* Le crédit photo était délavé par `opacity: .75`, qui composait sa couleur avec le fond et la faisait tomber sous le seuil DANS LES DEUX THÈMES (axe-core, 09/09/2026, sur https://today.paris/marais/ — 19 crédits en clair, 53 en sombre) : clair : #C82032 à 75 % sur blanc -> #D65865 = 3,85:1 sombre : #FF4D5E à 75 % sur #201F24 -> #C74250 = 3,37:1 soit sous les 4,5:1 exigés pour du texte de 12 px. On garde la discrétion voulue, mais avec le jeton qui est fait pour ça : --muted donne 5,55:1 sur --card en clair et 5,99:1 en sombre. Le soulignement du navigateur reste, donc le lien ne se reconnaît pas à sa seule couleur (WCAG 1.4.1). LA SPÉCIFICITÉ, RELEVÉE PAR CODEX SUR #679 (09/09/2026). Sur les cartes de liste, le crédit est un À L'INTÉRIEUR d'un (build-pages.mjs:754). `.pmeta a` (0,1,1) l'emporte donc sur `.pcredit` (0,1,0) : le crédit y recevait --accent, et --muted seulement sur la fiche de lieu, où il n'a pas cet ancêtre. Deux couleurs pour le même élément selon la page. Aucune des deux ne viole AA une fois l'opacité retirée, mais la discrétion voulue n'était pas tenue : on nomme donc explicitement le cas gagnant. */ .pcredit, .pmeta a.pcredit { font-size: 12px; color: var(--muted); } .pbody { display: flex; flex-direction: column; gap: 2px; font-size: 15px; } .pmeta { font-size: 13px; color: var(--muted); } .pmeta a { color: var(--accent); } /* EXCEPTION CULTURELLE : « horaires inconnus » sur la fiche d'une église publiée sans horaire connu. Une phrase franche mérite d'être vue, jamais d'être un gris de plus. */ .pmeta.pinconnu { color: var(--ink); font-weight: 600; } /* LE LOGO ₿ SUR LA LIGNE DE TEXTE (07/10/2026). Un SVG inline se pose sur la ligne de base : sur une fiche de lieu, le rond de 16 px montait 4 px au-dessus de « On paie en bitcoin ici ». La règle ne vivait que dans le module de la carte (web/bitcoin-lieux.js), que les fiches ne chargent jamais : elle vit ici, une ligne pour les fiches comme pour l'appli. */ .logo-bitcoin { vertical-align: -3px; } .prelated { margin: 28px 0 6px; font-size: 14px; color: var(--muted); } .prelated a { box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-height: 64px; margin: 0; padding: 14px 16px; border: 1px solid var(--paris-blue); border-radius: 16px; background: #fff; color: var(--paris-blue); font-size: 15px; font-weight: 650; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; } .prelated-primary, .prelated-all, .prelated-deferred { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; } /* « Explorer » de l'accueil (dialogue ⓘ), en liste (RGAA 9.3). */ .prelated-pile { display: grid; gap: 10px; list-style: none; margin: 8px 0 0; padding: 0; } .prelated :is(.prelated-primary,.prelated-all,.prelated-deferred) > li { display: flex; flex-direction: column; min-width: 0; } .prelated a:hover { border-color: var(--paris-red); text-decoration: underline; text-underline-offset: 4px; } .prelated a.prelated-adventure { background: var(--paris-blue); color: #fff; } .prelated a:focus-visible { outline: 3px solid var(--paris-red); outline-offset: 3px; } @media (min-width: 800px) { .prelated-primary, .prelated-all, .prelated-deferred { grid-template-columns: repeat(4,minmax(0,1fr)); } } .prelated-more { margin-top: 12px; border-top: 1px solid var(--line); } .prelated-more > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--ink); font-weight: 700; } .prelated-all { padding-bottom: 8px; } .pnote { font-size: 13px; color: var(--muted); margin: 20px 0 0; line-height: 1.6; } .footer { max-width: var(--maxw); margin: 0 auto; padding: 20px 20px max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px)); text-align: center; color: var(--muted); font-size: 12px; } /* Liens légaux (mentions légales, confidentialité, contact) : même pied de page que le reste du site, sur les 3 pages elles-mêmes et sur toutes les pages qui y renvoient. */ .footer-legal { margin-top: 8px; } /* RGAA 9.3 : liste sur une ligne, « · » décoratif (non lu). */ .footer-legal ul { list-style: none; margin: 0; padding: 0; } .footer-legal li { display: inline; } .footer-legal li + li::before { content: " · "; content: " · " / ""; } /* ₿ Volet bitcoin replié (07/10/2026) ; le reste à l'ouverture : web/bitcoin-prix.css. */ .btc-zone { margin-bottom: 12px; text-align: start; } .btc-zone > summary { padding-block: 12px; cursor: pointer; font-weight: 600; } .btc-logo { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #F7931A; color: #fff; transform: rotate(14deg); } .spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } .loading-status { min-height: 70px; display: grid; place-items: center; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @keyframes spin { to { transform: rotate(360deg); } } /* Photo réelle de l'événement (CDN paris.fr). Bannière en haut de la carte ; se retire seule si l'image casse. */ .offer-img { display: block; width: 100%; height: 168px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; background: var(--chip); } /* Extrait Wikipédia sous la liste des monuments (attribution CC BY-SA liée). */ .pwiki { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 10px 2px 0; } .pwiki-extrait { display: inline; margin: 0; } .pwiki a { color: var(--accent); font-size: 12px; } /* Points utilitaires de la carte (fontaines, toilettes) : petits et discrets. */ .pin-mini { font-size: 12px; transform: scale(.8); opacity: .9; } /* Météo du moment : discrète, sous l'accroche. Une ligne est réservée même vide : la météo arrive après un aller-retour réseau et ne doit pas pousser l'en-tête (audit du 17/09/2026). */ .meteo { font-size: 14px; color: var(--muted); margin: 2px 0 0; font-variant-numeric: tabular-nums; min-height: 1.5em; } /* Crédit d'une photo Wikimedia Commons (attribution CC obligatoire), discret sous l'image. */ .img-credit { display: block; font-size: 12px; color: var(--muted); margin: -8px 0 10px; text-decoration: none; } .img-credit:hover { text-decoration: underline; } /* Accessibilité : contour de focus visible sur tous les contrôles personnalisés. */ .chip:focus-visible, .territory:focus-visible, .passport-toggle:focus-visible, .btn-ghost:focus-visible, .btn-primary:focus-visible, .btn-action:focus-visible, .btn-share:focus-visible, .btn-fallback:focus-visible, .select:focus-visible, .langswitch a:focus-visible, .toggle input:focus-visible, .advanced > summary:focus-visible, .about summary:focus-visible, .explore-more > summary:focus-visible, .adventure-overview > summary:focus-visible, .prelated-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Cibles tactiles : au moins 44px de haut. */ .chip { min-height: 44px; } .btn-action { min-height: 44px; display: inline-flex; align-items: center; } .btn-ghost, .btn-primary, .select, .toggle, .about summary { min-height: 44px; } /* Respect de « mouvement réduit » : on coupe animations et défilement doux. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } /* Arabe — écriture de droite à gauche. `dir="rtl"` sur retourne déjà le sens du texte et des flex ; on ne corrige ici que les éléments à ancrage PHYSIQUE (gauche/droite en dur). */ [dir="rtl"] .langswitch { text-align: left; } [dir="rtl"] .select { padding: 12px 14px 12px 40px; background-position: left 14px center; } [dir="rtl"] .geo-status, [dir="rtl"] .about summary, [dir="rtl"] .about details p { text-align: right; } /* Le badge démo et les emojis de préfixe restent lisibles ; la carte Leaflet reste en LTR. */ [dir="rtl"] .map { direction: ltr; } /* Section affiliée (GetYourGuide) — encadré CLAIREMENT distinct des recommandations réelles. */ .affiliate { max-width: var(--maxw); margin: 22px auto 0; padding: 18px 20px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; } .affiliate > p { margin: 0 0 12px; font-size: 15px; color: var(--ink); } .partner-load { width: 100%; white-space: normal; line-height: 1.35; } .partner-fallback { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.5; } .partner-fallback a { color: var(--accent); font-weight: 750; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; } .affiliate-note { color: var(--muted); font-size: 12px; margin: 12px 0 0 !important; } .gyg-widget.partner-loading { min-height: 64px; display: grid; place-items: center; } .gyg-widget.partner-ready { min-height: 300px; } .gyg-widget > span { color: var(--muted); font-size: 12px; } [dir="rtl"] .gyg-widget { direction: ltr; } /* le widget GetYourGuide reste en LTR */ /* Bouton « voir plus » sous les premiers résultats */ .btn-more { display:block; width:100%; margin:14px 0 4px; padding:14px; font-size:16px; } @media (max-width: 560px) { .hero { padding: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) 16px 4px; } .langswitch { margin-bottom: 2px; white-space: nowrap; overflow-x: auto; } main, .ici-page-body { padding: 8px 12px max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px)); } .form { padding: 16px; margin-top: 8px; } .territories { margin: 5px 0 13px; padding: 15px 4px 17px; } .resume-bar { padding: 9px 11px; } .resume-bar-actions { width: 100%; } .btn-resume { flex: 1 1 auto; } .passport-list li { align-items: flex-start; } .territory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .territory:last-child { grid-column: 1 / -1; min-height: 50px; } .field { margin-bottom: 15px; } .row > .btn-ghost, .row > .select { width: 100%; flex-basis: 100%; } .duration-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .duration-chips .chip { min-height: 50px; } .duration-chips .chip[data-val="day"] { grid-column: 1 / -1; } /* Grille pleine : la dernière durée en minutes s'étale si leur nombre est impair. */ .duration-chips .chip:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; } .advanced { margin-bottom: 14px; } .adventure { padding: 18px 16px; } .adventure-metrics, .adventure-metrics:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adventure-actions, .adventure-secondary { grid-template-columns: 1fr; } .adventure-secondary { grid-column: auto; } .adventure-tools { grid-template-columns: 1fr; } .adventure-chapter { padding: 16px 14px; } .map { height: 300px; } } /* Les cinq portes — rangée de pastilles sous l'horloge (variante A choisie par Gérald, 27/08/2026). Elle défile du doigt si la langue est longue ; jamais de retour à la ligne. */ .portes { overflow-x: auto; padding: 12px 2px 2px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* RGAA 9.3 : la rangée passe sur la liste. */ .portes > ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } .portes > ul > li { flex: 0 0 auto; display: flex; } .portes::-webkit-scrollbar { display: none; } /* Cible tactile 44px de haut (Gérald, 28/08/2026, balayage 320-1400px) : ces pastilles ne faisaient que 37px malgré le padding — comme .chip et .btn-ghost plus haut. */ .porte { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); border-radius: 999px; padding: 9px 14px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .12s ease; } .porte:active { transform: scale(.96); } @media (prefers-reduced-motion: reduce) { .porte { transition: none; } .porte:active { transform: none; } } /* Présentation A « Ici, Paris », choisie par Gérald le 26 septembre 2026. Palette du drapeau SVG fourni par Gérald : bleu #000C5C, rouge #CC0000, fond blanc. Même habillage pour tous les rendus ; les couleurs sémantiques restent distinctes. */ body[data-presentation="ici-paris"] { --bg: #fff; --card: #fff; --ink: #000C5C; --muted: #536178; --line: #d9dfe8; --accent: #CC0000; --accent-ink: #fff; --chip: #f4f6fa; --chip-active: #000C5C; --chip-active-ink: #fff; --logo-bleu: #000C5C; --logo-point: #CC0000; --logo-rouge: #CC0000; --good: #256248; --warn-bg: #fff3cd; --warn-ink: #6b5300; --warn-line: #f2d98a; --radius: 18px; --shadow: 0 12px 36px #000C5C08; --maxw: 1120px; --paris-blue: #000C5C; --paris-red: #CC0000; background: var(--bg); color: var(--ink); color-scheme: light; -webkit-font-smoothing: antialiased; } [data-presentation="ici-paris"] a { color: var(--paris-blue); text-underline-offset: 4px; } [data-presentation="ici-paris"] :focus-visible { outline: 3px solid var(--paris-blue); outline-offset: 4px; } [data-presentation="ici-paris"] :is(button, select, input, a) { touch-action: manipulation; } [data-presentation="ici-paris"] :is(main, .ici-page-body, .hero, .footer) { padding-inline: clamp(20px, 4vw, 48px); } [data-presentation="ici-paris"] main, [data-presentation="ici-paris"] .ici-page-body { padding-block: 28px 48px; } /* Un seul repère principal englobe le hero et le corps, sans additionner leurs marges. Le corps garde exactement la boîte de l'ancien main ; le hero garde la sienne. */ [data-presentation="ici-paris"] main.ici-page-main { max-width: none; padding: 0; } [data-presentation="ici-paris"] .hero { text-align: start; padding-block: 40px 16px; } [data-presentation="ici-paris"] .hero .logo { color: var(--paris-blue); letter-spacing: -.035em; line-height: 1.12; } [data-presentation="ici-paris"] .tagline { margin-inline: 0; max-width: 40rem; font-size: 16px; line-height: 1.7; } [data-presentation="ici-paris"] :is(.btn-primary, .btn-resume) { border-radius: 10px; background: var(--paris-red); color: white; } [data-presentation="ici-paris"] .btn-primary:hover { background: var(--paris-blue); filter: none; } [data-presentation="ici-paris"] :is(.btn-ghost, .passport-toggle, .btn-action, .btn-share) { border-radius: 10px; color: var(--paris-blue); } [data-presentation="ici-paris"] .btn-action:is(:hover, .done) { color: var(--accent-ink); } [data-presentation="ici-paris"] .chip.active { background: var(--paris-blue); color: white; border-color: var(--paris-blue); } [data-presentation="ici-paris"] .card { box-shadow: var(--shadow); } [data-presentation="ici-paris"] .ici-compose { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 54px; align-items: center; margin: 16px 0 40px; } [data-presentation="ici-paris"] .ici-compose > .hero { padding: 0; margin: 0; max-width: none; min-width: 0; } [data-presentation="ici-paris"] .ici-title { font-size: clamp(38px, 4.8vw, 68px); font-weight: 700; letter-spacing: -.05em; line-height: 1.08; margin: 20px 0; color: var(--paris-blue); } [data-presentation="ici-paris"] .ici-title em { display: block; color: var(--paris-red); font-family: Georgia, serif; font-weight: 400; } [data-presentation="ici-paris"] .ici-compose .form { position: relative; margin: 0; padding: 28px; min-width: 0; } [data-presentation="ici-paris"] .ici-compose .form::before { content: ""; position: absolute; height: 4px; width: 62px; background: var(--paris-red); inset-block-start: -1px; inset-inline-start: 28px; border-radius: 2px; } [data-presentation="ici-paris"] .ici-compose .duration-chips { grid-template-columns: repeat(3,minmax(0,1fr)); } [data-presentation="ici-paris"] .ici-compose .duration-chips .chip { min-height: 44px; font-size: 14px; padding: 10px 5px; } [data-presentation="ici-paris"] .ici-compose .duration-chips .chip[data-val="day"] { grid-column: auto; } [data-presentation="ici-paris"] .ici-compose .portes { overflow: visible; } [data-presentation="ici-paris"] .ici-compose .portes > ul { flex-wrap: wrap; } [data-presentation="ici-paris"] .porte { font-size: 12px; background: white; color: var(--paris-blue); border-radius: 9px; } [data-presentation="ici-paris"] .first-offer { border-top: 1px solid var(--line); padding-top: 22px; } [data-presentation="ici-paris"] :is(.plan, .results, .page) { min-width: 0; } [data-presentation="ici-paris"] .plan > .adventure { max-width: 820px; margin-inline: auto; } [data-presentation="ici-paris"] .territories { margin-inline: 0; padding-inline: 0; padding-block: 28px; } [data-presentation="ici-paris"] .territory-list { gap: 12px; } [data-presentation="ici-paris"] .territory { min-height: 80px; border-radius: 14px; padding: 18px 14px; font-size: 14px; color: var(--paris-blue); } [data-presentation="ici-paris"] .page { max-width: 860px; margin-inline: 0; } [data-presentation="ici-paris"] .page h2 { font-size: clamp(21px,3vw,28px); letter-spacing: -.025em; color: var(--paris-blue); } [data-presentation="ici-paris"] .plist { gap: 14px; } [data-presentation="ici-paris"] .pcard { padding: 20px; border-radius: 16px; gap: 16px; } [data-presentation="ici-paris"] .pbody { min-width: 0; overflow-wrap: anywhere; gap: 5px; } [data-presentation="ici-paris"] .pnom { display: inline-flex; align-items: center; min-height: 44px; } [data-presentation="ici-paris"] .footer { border-top: 1px solid var(--line); text-align: start; padding-block: 24px 32px; } [data-presentation="ici-paris"] .footer a { min-height: 44px; display: inline-flex; align-items: center; } [data-presentation="ici-paris"] .langswitch { white-space: normal; } [data-presentation="ici-paris"] .about { max-width: 820px; } @media (max-width: 800px) { [data-presentation="ici-paris"] .ici-compose { grid-template-columns: 1fr; gap: 26px; margin-top: 0; } [data-presentation="ici-paris"] .ici-compose .form { padding: 24px 20px; box-shadow: none; } [data-presentation="ici-paris"] .ici-title { max-width: 600px; font-size: clamp(38px,7vw,54px); } [data-presentation="ici-paris"] .hero { padding-top: 26px; } [data-presentation="ici-paris"] .territory-list { grid-template-columns: repeat(2,minmax(0,1fr)); } [data-presentation="ici-paris"] .territory:last-child { grid-column: 1 / -1; } } @media (max-width: 700px) { body[data-presentation="ici-paris"] { padding-bottom: calc(76px + env(safe-area-inset-bottom,0px)); } [data-presentation="ici-paris"] :is(main, .ici-page-body, .hero, .footer) { padding-inline: 20px; } [data-presentation="ici-paris"] main, [data-presentation="ici-paris"] .ici-page-body { padding-top: 20px; } [data-presentation="ici-paris"] .ici-compose .hero { padding-inline: 0; } [data-presentation="ici-paris"] .tagline { font-size: 15px; } [data-presentation="ici-paris"] .pcard { padding: 16px; gap: 12px; } [data-presentation="ici-paris"] .pphoto { width: 60px; height: 60px; } [data-presentation="ici-paris"] .territory { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { [data-presentation="ici-paris"] *, [data-presentation="ici-paris"] *::before, [data-presentation="ici-paris"] *::after { scroll-behavior: auto; } } [data-presentation="ici-paris"] .ici-header { max-width: var(--maxw); margin-inline: auto; padding: max(18px, env(safe-area-inset-top,0px)) clamp(20px,4vw,48px) 18px; min-height: 92px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); } [data-presentation="ici-paris"] .ici-brand { display: inline-flex; align-items: baseline; white-space: nowrap; gap: 1px; font-size: 27px; font-weight: 800; letter-spacing: -1.2px; text-decoration: none; min-height: 44px; line-height: 44px; } .ici-brand > span:first-child { color: var(--logo-bleu); } .ici-brand > span:last-child { color: var(--logo-rouge); } .ici-brand-dot { fill: var(--paris-red); margin-inline: 1px; } .ici-mainnav { display: flex; align-items: center; gap: 24px; margin-inline-start: auto; } .ici-mainnav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; } .ici-mainnav a[aria-current] { box-shadow: inset 0 -2px var(--paris-red); font-weight: 700; } /* LES QUATRE ÉTAPES, MÊMES ONGLETS PARTOUT (Gérald, 30/09/2026). Un onglet sans destination est un grisé (jamais un lien mort) ; sa phrase vraie reste lue à voix haute et s'affiche au survol ou au toucher (focus), sans ouvrir d'écran. */ .ici-mainnav > .ici-nav-off { position: relative; display: flex; align-items: center; min-height: 44px; font-size: 14px; color: #6d7186; cursor: default; } /* Chaque onglet de l'en-tête se touche au doigt : 44 × 44 au moins, même « चुनें » ou « 选择 ». */ .ici-mainnav > :is(a, .ici-nav-off) { min-width: 44px; justify-content: center; } .ici-mainnav-open { padding-inline-start: 14px; border-inline-start: 1px solid var(--line); } .ici-nav-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .ici-mainnav > .ici-nav-off:is(:hover, :focus-visible) .ici-nav-note { width: max-content; max-width: 260px; height: auto; clip: auto; clip-path: none; white-space: normal; z-index: 60; inset-block-start: calc(100% + 4px); inset-inline-start: 0; padding: 8px 12px; border-radius: 10px; background: var(--paris-blue); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; } .ici-languages { position: relative; margin-inline-start: auto; font-size: 13px; } .ici-languages summary { cursor: pointer; min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; } .ici-languages summary span { font-weight: 700; } .ici-languages nav { position: absolute; z-index: 50; inset-inline-end: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; width: min(300px,calc(100vw - 40px)); max-height: 65vh; overflow-y: auto; } /* RGAA 9.3 : la grille passe sur la liste. */ .ici-languages nav > ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } .ici-languages nav a { min-height: 44px; display: flex; justify-content: center; align-items: center; text-decoration: none; } .ici-languages nav a[aria-current] { background: var(--chip); border-radius: 6px; font-weight: 700; } .ici-mobile-nav { display: none; } /* RGAA 9.3 : chaque élément de la liste est une cellule que l'onglet remplit. */ .ici-mobile-nav > ul { list-style: none; margin: 0; padding: 0; } .ici-mobile-nav li { display: grid; min-width: 0; } /* RGAA 10.7 : le focus reste au-dessus de la barre fixe (pages construites ; l'appli a sa marge). */ @media (max-width: 700px) { html:has(> body[data-presentation="ici-paris"]:not(.ep-enabled)) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom,0px)); } } @media (min-width: 701px) { html:has(> body[data-presentation="ici-paris"]:not(.ep-enabled)) { scroll-padding-bottom: 112px; } } .ici-skip { position: fixed; z-index: 100; inset-inline-start: 16px; top: -100px; padding: 12px 18px; background: #fff; border: 2px solid var(--paris-blue); border-radius: 8px; } .ici-skip:focus { top: max(12px,env(safe-area-inset-top,0px)); } @media (max-width: 900px) { .ici-mainnav { gap: 14px; } [data-presentation="ici-paris"] .ici-header { gap: 16px; } } @media (max-width: 700px) { [data-presentation="ici-paris"] .ici-header { min-height: 76px; padding-block: max(12px,env(safe-area-inset-top,0px)) 12px; } [data-presentation="ici-paris"] .ici-header { gap: 10px; } [data-presentation="ici-paris"] .ici-brand { font-size: 24px; } /* « OUVERT MAINTENANT » RESTE VISIBLE SUR TÉLÉPHONE (revue du 30/09/2026) : il a quitté la barre du bas (quatre étapes), il ne quitte pas l'écran. Sous 700 px, l'en-tête ne garde que ce lien ; les quatre étapes sont dans la barre du bas. Rien n'est retiré en silence (invariant 23). */ .ici-mainnav { display: flex; gap: 0; min-width: 0; } .ici-mainnav > :not(.ici-mainnav-open) { display: none; } .ici-mainnav > .ici-mainnav-open { padding-inline: 4px 0; border-inline-start: 0; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; } .ici-languages { margin-inline-start: 0; } .ici-languages summary { font-size: 12px; padding-inline: 9px; } /* La barre de l'application (accueil-v2/page-3-finale.html) : quatre colonnes, icône au-dessus du nom, l'étape active en pastille bleu nuit, les étapes sans destination en gris. */ .ici-mobile-nav { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); display: block; padding: 7px max(6px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px)); } .ici-mobile-nav > ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; } /* UN NOM D'ÉTAPE N'EST JAMAIS COUPÉ AU MILIEU D'UN MOT (revue du 30/09/2026 : « Предложени / е »). Il passe à la ligne entre deux mots ; un mot seul trop long (classe ici-nav-mot-, posée par lib/presentation-paris.js) prend une police calculée sur la largeur de sa colonne : (100vw - 21 px) / 4 - 4 px = 25vw - 9,25 px, divisée par la largeur du mot (≈ 0,66 em par lettre en gras). Plafond 12,5 px, comme les autres noms. */ .ici-mobile-nav li > :is(a, .ici-nav-off) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px; padding: 6px 2px 7px; font-size: 12.5px; font-weight: 800; text-align: center; line-height: 16px; text-decoration: none; border-radius: 16px; overflow-wrap: normal; word-break: normal; hyphens: manual; } .ici-mobile-nav [class^="ici-nav-mot-"] { font-size: min(12.5px, calc((25vw - 9.25px) / var(--mot) / .66)); white-space: nowrap; } .ici-nav-mot-8 { --mot: 8; } .ici-nav-mot-9 { --mot: 9; } .ici-nav-mot-10 { --mot: 10; } .ici-nav-mot-11 { --mot: 11; } .ici-nav-mot-12 { --mot: 12; } .ici-nav-mot-13 { --mot: 13; } .ici-nav-mot-14 { --mot: 14; } .ici-mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } [data-presentation="ici-paris"] .ici-mobile-nav a[aria-current] { color: #fff; background: var(--paris-blue); font-weight: 800; } .ici-mobile-nav li > .ici-nav-off { color: #6d7186; cursor: default; -webkit-tap-highlight-color: transparent; border: 1.5px dashed currentColor; padding: 4.5px .5px 5.5px; } /* RGAA 10.7 : au clavier, le contour seul (le fond pâle, 1,08:1, noyait l'indicateur). */ .ici-mobile-nav .ici-nav-off:is(:hover, :focus:not(:focus-visible)) { background: var(--chip); } .ici-mobile-nav .ici-nav-off:focus:not(:focus-visible) { outline: none; } .ici-mobile-nav .ici-nav-off:is(:hover, :focus) .ici-nav-note { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; z-index: 41; inset-inline: 12px; bottom: calc(100% + 8px); padding: 10px 14px; border-radius: 16px; background: var(--paris-blue); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: start; } /* RGAA 10.13.2 : un pont invisible couvre les 15 px entre la note et l'onglet (8 px + marge de la barre). */ .ici-mobile-nav .ici-nav-off:is(:hover, :focus) .ici-nav-note::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 16px; } } /* RGAA 3.1 : cadre en pointillés de l'onglet grisé (ci-dessus). RGAA 10.13 : Échap masque sa note (explorer-lanceur.js). */ .ici-mobile-nav .ici-nav-off.ici-note-fermee:is(:hover, :focus) .ici-nav-note { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Explorer commun (15/10/2026) : le champ écrit est réel après chargement du pont. Le lien précédent reste utilisable sans script ; les quatre étapes sont en bas. */ .ici-explorer[hidden], .ici-explorer [hidden] { display: none !important; } .ici-explorer { flex: 1 1 320px; min-width: 0; max-width: 640px; margin: 0; } .ici-explorer > label.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ici-explorer-champ { display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--paris-blue); border-radius: 14px; background: #fff; } .ici-explorer-champ input { flex: 1; width: 100%; min-width: 0; min-height: 44px; padding: 9px; border: 0; border-radius: 8px; font: inherit; font-size: 16px; color: var(--paris-blue); background: #fff; } .ici-explorer-champ input::placeholder { color: #667085; opacity: 1; } .ici-explorer-champ button { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; background: #fff; color: var(--paris-blue); cursor: pointer; } .ici-explorer-champ svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } [data-presentation="ici-paris"] .ici-explorer-champ :focus-visible { outline-offset: -3px; } .ici-explorer-proximite { display: block; margin-top: 4px; font-size: 14px; } /* Le message est une alerte vide avant le geste : pas de ligne réservée, sans retirer la région accessible. */ .ici-explorer [data-explorer-status] { font-size: 13px; margin-block: 6px 0; } .ici-explorer [data-explorer-status]:empty { margin-block: 0; } .ici-explorer-dialog { width: min(560px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 24px; border: 1px solid var(--paris-blue); border-radius: 20px; background: #fff; color: var(--paris-blue); overflow: auto; box-sizing: border-box; } .ici-explorer-dialog::backdrop { background: #000c5c66; } .ici-explorer-dialog h2 { margin-block: 16px 12px; font-size: 24px; line-height: 1.2; } .ici-explorer-dialog p { font-size: 15px; line-height: 1.5; } .ici-explorer-dialog textarea { box-sizing: border-box; width: 100%; min-height: 112px; padding: 12px; border: 1px solid var(--paris-blue); border-radius: 10px; font: inherit; color: var(--paris-blue); background: #fff; } .ici-dictee-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ici-dictee-actions button { border: 1px solid var(--paris-blue); background: #fff; color: var(--paris-blue); } .ici-explorer-dialog [hidden] { display: none !important; } .ici-explorer-dialog button { font: inherit; cursor: pointer; min-height: 44px; border-radius: 10px; padding: 10px 14px; } .ici-explorer-fermer { display: block; margin-inline-start: auto; border: 1px solid var(--paris-blue); background: #fff; color: var(--paris-blue); } .ici-explorer-choix { display: grid; gap: 8px; margin: 16px 0; } .ici-explorer-choix label { font-weight: 700; margin-top: 4px; } .ici-explorer-choix select { min-height: 48px; width: 100%; padding: 10px; border: 1px solid var(--paris-blue); border-radius: 8px; font: inherit; font-size: 16px; color: var(--paris-blue); background: #fff; } .ici-explorer-choix button { margin-top: 12px; border: 0; } /* V12/V13 validées le 25/10 : le même formulaire et son vrai bouton associé, blanc et bleu nuit, sur ordinateur comme sur téléphone. Le lien est le repli sans script ; il reparaît après une erreur, sans dupliquer la commande normale. */ body[data-presentation="ici-paris"] .ici-header { align-items: flex-start; } body[data-presentation="ici-paris"] .ici-header .ici-brand { height: 56px; min-height: 56px; line-height: 56px; } body[data-presentation="ici-paris"] .ici-header .ici-languages { display: block; align-self: flex-start; } .ici-header .ici-languages summary { box-sizing: border-box; min-height: 56px; height: 56px; line-height: 30px; white-space: nowrap; } .ici-header .ici-mainnav { align-self: flex-start; margin-top: 0; padding-block: 0; flex-direction: column; gap: 6px; } body[data-presentation="ici-paris"] .ici-header .ici-mainnav-open:not([hidden]), .ici-header .ici-explorer-valider { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 56px; min-height: 56px; padding: 10px 22px; border: 1px solid var(--paris-blue); border-radius: 12px; background: var(--paris-blue); color: #fff; font: 750 16px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor: pointer; text-decoration: none; } .ici-header .ici-explorer-valider:not([hidden]) + .ici-mainnav-open:not([hidden]) { height: auto; min-height: 44px; padding: 4px; border: 0; background: transparent; color: var(--paris-blue); font-size: 13px; text-decoration: underline; } .ici-header .ici-mainnav > [hidden] { display: none !important; } @media (max-width: 1100px) { body[data-presentation="ici-paris"] .ici-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 12px; padding: max(12px,env(safe-area-inset-top,0px)) 20px 14px; align-items: center; } body[data-presentation="ici-paris"] .ici-header .ici-brand { grid-row: 1; grid-column: 1; height: 44px; min-height: 44px; line-height: 44px; align-self: center; } body[data-presentation="ici-paris"] .ici-header .ici-languages { grid-row: 1; grid-column: 2; margin: 0; } .ici-header .ici-languages summary { height: 44px; min-height: 44px; line-height: 18px; } .ici-header .ici-explorer { display: contents; } .ici-explorer-champ { grid-row: 2; grid-column: 1 / -1; } .ici-explorer-champ input { font-size: 14px; } .ici-explorer-proximite { grid-row: 3; grid-column: 1; margin: 0; align-self: center; } .ici-header .ici-mainnav { display: flex; grid-row: 3; grid-column: 2; margin: 0; padding: 0; } body[data-presentation="ici-paris"] .ici-header .ici-mainnav-open:not([hidden]), .ici-header .ici-explorer-valider { height: 44px; min-height: 44px; padding: 10px 18px; border-radius: 10px; font-size: 15px; } .ici-explorer [data-explorer-status] { grid-row: 4; grid-column: 1 / -1; } } @media (min-width: 701px) { body[data-presentation="ici-paris"] { padding-bottom: 112px; } .ici-mobile-nav { position: fixed; z-index: 40; bottom: 16px; inset-inline: 0; margin-inline: auto; width: min(600px,calc(100% - 36px)); padding: 8px; border: 1px solid var(--paris-blue); border-radius: 22px; background: #fff; box-shadow: var(--shadow); display: block; } .ici-mobile-nav > ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; } .ici-mobile-nav li > :is(a, .ici-nav-off) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 58px; padding: 7px 3px; border-radius: 14px; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; text-decoration: none; overflow-wrap: normal; word-break: normal; } .ici-mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } [data-presentation="ici-paris"] .ici-mobile-nav a[aria-current] { color: #fff; background: var(--paris-blue); } .ici-mobile-nav li > .ici-nav-off { color: var(--paris-blue); cursor: default; border: 1.5px dashed currentColor; padding: 5.5px 1.5px; } .ici-mobile-nav .ici-nav-off:is(:hover, :focus) .ici-nav-note { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; inset-inline: 12px; bottom: calc(100% + 8px); padding: 10px 14px; border-radius: 12px; background: var(--paris-blue); color: #fff; font-size: 14px; text-align: start; } .ici-mobile-nav .ici-nav-off:is(:hover, :focus) .ici-nav-note::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 17px; } } .ici-univers { margin-top: 12px; color: var(--muted); font-size: 14px; } .ici-univers > summary { min-height: 44px; padding-block: 12px; cursor: pointer; color: var(--paris-blue); font-weight: 600; } [data-presentation="ici-paris"] .ici-univers .territories { margin: 0; padding-block: 12px; } [data-presentation="ici-paris"] .ici-univers .territory-list { grid-template-columns: repeat(2,minmax(0,1fr)); } [data-presentation="ici-paris"] .ici-univers .territory:last-child { grid-column: 1 / -1; } [data-presentation="ici-paris"] a.pcredit { color: var(--muted); } /* LE PREMIER ÉCRAN D'UNE FICHE DE LIEU, À L'AIR DE LA PAGE 3 (Gérald, 30/09/2026 ; accueil-v2/page-3-finale.html). Grande photo et son crédit (ou la plaque de rue), le nom et « catégorie · arrondissement » posés sur la photo, une phrase, l'heure avec sa source, le métro, le bouton d'aventure et l'itinéraire à pied sur une seule ligne. Tout tient sans défiler dans la FENÊTRE d'un vrai téléphone (iPhone 15 : 393 × 659, iPhone 17 Pro : 402 × 681, Pixel 10 : 360 × 732 ; mesuré, revue du 30/09/2026) : la photo cède la place (plancher 120 px), jamais un texte coupé. Le nom est dans le flux, en bas d'une boîte qui peut grandir : un nom très long agrandit la photo, il n'est jamais rogné. Le fil d'Ariane et le texte pour les moteurs restent dessous. */ [data-presentation="ici-paris"] .hero:has(.ici-fiche) { padding-block: 8px 6px; } .ici-fiche { display: flex; flex-direction: column; gap: 9px; max-width: 440px; } .ici-fiche-photo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: max(120px, min(calc(100vw - 40px), 440px, calc(100svh - 510px - max(0px, (400px - 100vw) * 1.6)))); border-radius: 22px; overflow: hidden; background: #1c2150; } .ici-fiche-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ici-fiche-plaque { position: absolute; inset: 0; border-radius: 22px; place-content: start center; padding-top: 12px; box-shadow: inset 0 0 0 6px var(--plaque-email), inset 0 0 0 7px rgba(255, 255, 255, .72); } .ici-fiche-plaque b { font-size: 56px; line-height: 1; } .ici-fiche-plaque i { font-size: 13px; padding: 0 24px; } .ici-fiche-titre { position: relative; padding: 30px 16px 12px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78) 46%); color: #fff; text-align: start; border-radius: 0 0 22px 22px; } [data-presentation="ici-paris"] .ici-fiche-titre .logo { color: #fff; font-size: clamp(24px, 6.6vw, 30px); letter-spacing: -.025em; line-height: 1.08; margin: 0; overflow-wrap: break-word; } [data-presentation="ici-paris"] .ici-fiche-titre-long .logo { font-size: clamp(20px, 5.4vw, 25px); } [data-presentation="ici-paris"] .ici-fiche-titre-tres-long .logo { font-size: clamp(17px, 4.5vw, 21px); line-height: 1.12; } [data-presentation="ici-paris"] .ici-fiche-titre .tagline { color: #fff; margin: 4px 0 0; max-width: none; font-size: 15px; line-height: 1.3; } .ici-fiche-credit { margin: -4px 0 0; font-size: 11px; line-height: 1.3; text-align: start; } .ici-fiche-corps { display: flex; flex-direction: column; gap: 9px; text-align: start; min-width: 0; } [data-presentation="ici-paris"] .ici-fiche-phrase { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); } /* L'heure : l'état dit par le script (étiquette + valeur) à gauche, le lien vers la semaine à droite, jamais remplacé ; sans script, le lien seul. La source dessous. */ .ici-heure { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 6px 12px 7px; } .ici-heure.est-dit { grid-template-columns: minmax(0, 1fr) auto; } .ici-heure.est-dit .ici-heure-sem { grid-column: 2; grid-row: 1 / span 2; } .ici-heure.est-dit .ici-heure-semaine { font-size: 13px; max-width: 9.5em; text-align: end; line-height: 1.25; } .ici-heure > :is(.ici-heure-lib, .ici-heure-val) { grid-column: 1; } .ici-heure-src { grid-column: 1 / -1; } .ici-heure-sem { margin: 0; } .ici-heure-lib { margin: 0; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .ici-heure-val { margin: 0; font-size: 26px; font-weight: 900; color: var(--paris-blue); letter-spacing: -.02em; line-height: 1.15; } .ici-heure:is(.est-ferme, .est-inconnu, .est-24) .ici-heure-val { font-size: 18px; letter-spacing: 0; } .ici-heure.est-ferme .ici-heure-val { color: var(--paris-red); } .ici-heure.est-inconnu .ici-heure-val { font-size: 16px; font-weight: 750; line-height: 1.35; } .ici-heure-semaine { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 750; letter-spacing: 0; } .ici-heure-src { margin: 1px 0 0; font-size: 12px; color: var(--muted); } .ici-fiche-metro { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding-inline-start: 2px; font-size: 14px; color: var(--ink); } .ici-fiche-mot { margin-inline-end: 3px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* Ligne 3 : encre noire (4,69:1 sur l'olive #837902) ; le blanc n'y tenait que 4,47:1, sous le seuil AA (RGAA 3.2, maquette 3, 21/10/2026). */ .ici-ligne { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 11px; font-weight: 900; background: var(--ligne-fond, #000C5C); color: var(--ligne-encre, #fff); } .ici-ligne-1 { --ligne-fond: #FFCD00; --ligne-encre: #000C5C; } .ici-ligne-2 { --ligne-fond: #003CA6; --ligne-encre: #fff; } .ici-ligne-3 { --ligne-fond: #837902; --ligne-encre: #000; } .ici-ligne-3b { --ligne-fond: #6EC4E8; --ligne-encre: #000C5C; } .ici-ligne-4 { --ligne-fond: #CF009E; --ligne-encre: #fff; } .ici-ligne-5 { --ligne-fond: #FF7E2E; --ligne-encre: #000C5C; } .ici-ligne-6 { --ligne-fond: #6ECA97; --ligne-encre: #000C5C; } .ici-ligne-7 { --ligne-fond: #FA9ABA; --ligne-encre: #000C5C; } .ici-ligne-7b { --ligne-fond: #6ECA97; --ligne-encre: #000C5C; } .ici-ligne-8 { --ligne-fond: #E19BDF; --ligne-encre: #000C5C; } .ici-ligne-9 { --ligne-fond: #B6BD00; --ligne-encre: #000C5C; } .ici-ligne-10 { --ligne-fond: #C9910D; --ligne-encre: #000C5C; } .ici-ligne-11 { --ligne-fond: #704B1C; --ligne-encre: #fff; } .ici-ligne-12 { --ligne-fond: #007852; --ligne-encre: #fff; } .ici-ligne-13 { --ligne-fond: #6EC4E8; --ligne-encre: #000C5C; } .ici-ligne-14 { --ligne-fond: #62259D; --ligne-encre: #fff; } /* Les deux boutons sur une ligne. L'AVENTURE D'ABORD, pleine (contrat adventure-first de CLAUDE.md) ; l'itinéraire à pied ensuite, neutre, rouge seulement quand le script a prouvé l'ouverture avec sa marge (« J'y vais »). */ .ici-fiche-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; } .ici-fiche-actions > :only-child { grid-column: 1 / -1; } .ici-fiche-aller { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 10px 7px; border: 2px solid var(--paris-blue); border-radius: 18px; background: #fff; color: var(--paris-blue); font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; } .ici-fiche-aller small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; } .ici-fiche-aller.est-ouvert { border-color: var(--paris-red); background: var(--paris-red); color: #fff; font-size: 17px; } [data-presentation="ici-paris"] .ici-fiche .pcta { display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 0; padding: 6px 10px; border: 2px solid var(--paris-blue); border-radius: 18px; background: var(--paris-blue); color: #fff; font-size: 14px; line-height: 1.25; text-align: center; } [data-presentation="ici-paris"] .ici-fiche .pcta:hover { filter: brightness(1.12); } [data-presentation="ici-paris"] .ici-fiche-crumb { margin: 10px 0 0; } @media (min-width: 900px) { .ici-fiche { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 40px; row-gap: 8px; max-width: 1000px; align-items: start; } .ici-fiche-photo { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 1 / 1; overflow: clip; } .ici-fiche-credit { grid-column: 1; grid-row: 2; margin: 0; } .ici-fiche-corps { grid-column: 2; grid-row: 1 / span 2; gap: 14px; padding-top: 6px; } [data-presentation="ici-paris"] .ici-fiche-phrase { font-size: 17px; } } /* SIGNALER EN UN GESTE (07/10/2026, top 3 %, ligne 17) : un lien discret sous les horaires d'une fiche ou au bas d'une étape, trois choix, et la note « signalé … — à confirmer sur place » (web/signaler.js). Le bloc garde l'attribut hidden tant que le module n'a pas tourné : aucune règle ne pose son display. */ .tp-signaler { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); } .tp-signaler summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .tp-signaler-question, .tp-signaler-vie, .tp-signaler-retour { margin: 4px 0; } .tp-signaler-ligne { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .tp-signaler-choix { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; } .tp-signaler-choix:disabled, .tp-signaler-choix[aria-disabled="true"] { opacity: .55; cursor: default; } .tp-signaler-retour:empty { display: none; } .tp-signale { margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--warn-line); border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; font-weight: 600; line-height: 1.35; } /* ₿ La page « Paris en bitcoin » (13/10/2026) : les cartes du site (.pcard), le doute en ocre comme dans le panneau ₿, le sûr en vert, les étapes des parcours, le pli « tous les autres lieux » qui ne s'ouvre qu'au geste. */ .btc-page .btc-bloc { margin-top: 26px; } .btc-page h2 { display: flex; align-items: center; gap: 8px; } .btc-page h3 { font-size: 15px; margin: 18px 0 6px; } .btc-page .btc-note, .btc-page .btc-source { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 6px 0 10px; } .btc-page .btc-doute { color: #8a4b00; } .btc-page .btc-sur { color: #1b6b2a; font-weight: 600; } .btc-page .btc-bilan { font-size: 13px; font-weight: 600; margin: 0 0 6px; } .btc-page .btc-etapes { padding-inline-start: 20px; margin: 0; } .btc-page .btc-etapes li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; } .btc-page .btc-moment { display: block; font-size: 12px; font-weight: 700; color: var(--muted); } .btc-page .btc-trajet { font-size: 12px; color: var(--muted); } .btc-page .btc-tous { margin-top: 10px; border-top: 1px solid var(--line); } .btc-page .btc-tous > summary { padding: 10px 0; min-height: 32px; cursor: pointer; font-weight: 600; } .btc-page .btc-tous > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btc-page .btc-tous .plist { padding-top: 8px; } .btc-page-lien { font-size: 13px; margin: 10px 0 0; } /* Fiches de lieu : réserver le premier écran après l’en-tête Explorer commun. La densité ne concerne que les fiches mobiles : mêmes textes et commandes, nom entier dans la photo (120 px au minimum), sans déplacer l’accueil V12/V13. */ @media (max-width: 700px) { body[data-presentation="ici-paris"]:has(.ici-fiche) .ici-header { row-gap: 4px; padding-block: max(4px,env(safe-area-inset-top,0px)) 4px; } body:has(.ici-fiche) .ici-explorer [data-explorer-status]:empty { position: absolute; } body:has(.ici-fiche) .ici-fiche, body:has(.ici-fiche) .ici-fiche-corps { gap: 2px; } body:has(.ici-fiche) .ici-fiche-photo { min-height: max(120px, min(calc(100vw - 40px), 440px, calc(100svh - 540px - max(0px, (400px - 100vw) * 1.6)))); } /* Le texte commence plus haut : un fond uniforme protège aussi une photo blanche. */ body:has(.ici-fiche) .ici-fiche-titre { padding-block: 4px 8px; background: rgba(0,0,0,.72); } body:has(.ici-fiche) .ici-heure { padding-block: 4px; } /* Un libellé sur trois lignes conserve sa taille et la cible de 56 px, sans pousser les actions sous la navigation fixe. */ [data-presentation="ici-paris"] .ici-fiche .pcta { padding-block: 0; } } /* En consultation d'un lieu, le téléphone réserve la hauteur aux faits et aux actions. Les trois commandes restent visibles, avec leurs cibles de 44 px ; l'accueil ne change pas. */ @media (min-width: 400px) and (max-width: 700px) { body.ep-onglet-lieu .lieu { --lieu-ecart: 4px; } body[data-presentation="ici-paris"].ep-onglet-lieu .ici-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 4px 8px; padding-block: max(4px,env(safe-area-inset-top,0px)) 4px; } body[data-presentation="ici-paris"].ep-onglet-lieu .ici-header .ici-mainnav { grid-row: 1; grid-column: 2; } body[data-presentation="ici-paris"].ep-onglet-lieu .ici-header .ici-languages { grid-row: 1; grid-column: 3; } } /* La question entière reste lisible et uniformément grise, même sur deux lignes. Le vrai input et son nom accessible restent inchangés ; aucune superposition après saisie. */ .ici-explorer-saisie{display:grid;flex:1;min-width:0;align-items:stretch} .ici-explorer-saisie>input,.ici-explorer-invite{grid-area:1/1;min-width:0;box-sizing:border-box} .ici-explorer-saisie>input{align-self:stretch;background:transparent} .ici-explorer-saisie>input::placeholder{color:transparent} .ici-explorer-invite{display:flex;align-items:center;padding:9px;pointer-events:none;color:#687387;font-size:16px;line-height:1.25;overflow-wrap:anywhere} .ici-explorer-saisie>input:not(:placeholder-shown)+.ici-explorer-invite{visibility:hidden}