/* ========================================================================== Satofly — surface RÉSULTATS (public/results.html) S'appuie sur satofly.css (tokens + composants). Ne redéfinit aucun token. Reproduit « Satofly Site - Résultats.dc.html » avec le kit. ========================================================================== */ /* ---- Largeur de page ---------------------------------------------------- L'en-tête et le pied de base.html sont en .wrap (1280 px) ; la maquette Résultats les veut alignés sur le moteur de recherche (1360 px). On agit par la classe posée sur plutôt qu'en modifiant base.html. ------------------------------------------------------------------------ */ .page-results .site-header .wrap, .page-results .site-footer .wrap { max-width: var(--w-results); } /* ---- Bandeau sarcelle compact (prolonge l'en-tête solide) --------------- */ .sf-topband { background: var(--sarcelle-900); padding-block: 4px 26px; } /* Le moteur commun (satofly.css) occupe toute la largeur du bandeau. */ .sf-topband .engine { width: 100%; } /* `.sarcelle-section` rogne ses débordements ; ici la liste d'autocomplétion du moteur descend sous le bandeau et se ferait couper. Les deux halos sont en `inset: 0` : ils ne débordent jamais, le rognage est donc inutile. */ .sf-topband { overflow: visible; } .sf-topband::before { background: radial-gradient(800px 300px at 80% 0%, rgba(235,175,134,0.20), transparent 70%); } .sf-topband::after { background: none; } /* Pastille de rappel de la remise, au-dessus du moteur. */ .sf-bandnote { display: flex; justify-content: flex-end; margin-bottom: 12px; } .sf-bandnote .pill { font-size: 12.5px; } .sf-bandnote .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--abricot-500); flex: none; } /* ---- Corps : filtres + liste ------------------------------------------- */ .sf-body { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-block: 28px 80px; } /* Colonne filtres */ .sf-filters { flex: 0 1 268px; min-width: 240px; display: flex; flex-direction: column; gap: 16px; } .sf-fcard { background: #fff; border-radius: var(--r-card); padding: 22px; box-shadow: var(--sh-card); } .sf-flabel { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin-bottom: 16px; } /* Curseur budget DOUBLE : piste 6 px, segment sarcelle entre deux bornes, deux poignées blanches 18 px (maquette l.72-76). Les deux sont superposés sur la piste : la piste native est rendue transparente, seule la poignée reste cliquable. */ .sf-range-vals { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .sf-range-vals span { font-family: var(--mono); font-weight: 500; font-size: 14px; } .sf-range2 { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--creme-200); margin: 0 9px 8px; } .sf-range2-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--r-pill); background: var(--sarcelle-900); } .sf-range { -webkit-appearance: none; appearance: none; position: absolute; left: -9px; top: -6px; width: calc(100% + 18px); height: 18px; margin: 0; background: transparent; pointer-events: none; } .sf-range:focus { outline: none; } .sf-range::-webkit-slider-runnable-track { height: 18px; background: transparent; border: 0; } .sf-range::-moz-range-track { height: 18px; background: transparent; border: 0; } .sf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(3,31,37,0.24); border: 0; cursor: pointer; transition: box-shadow .15s ease-out; } .sf-range::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(3,31,37,0.24); border: 0; cursor: pointer; transition: box-shadow .15s ease-out; } .sf-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sarcelle-300); } .sf-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--sarcelle-300); } /* Empilement des deux poignées : la haute est au-dessus par défaut ; le JS fait passer la basse devant dès qu'elle dépasse le milieu de la piste, sinon les deux bornes réunies deviendraient impossibles à séparer. */ .sf-range-lo { z-index: 3; } .sf-range-hi { z-index: 4; } /* Cases à cocher « maquette » : carré 20px, coché = sarcelle + check abricot */ .sf-checks { display: flex; flex-direction: column; gap: 12px; } .sf-check { display: flex; align-items: center; gap: 11px; font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--encre); cursor: pointer; } .sf-check input { position: absolute; opacity: 0; pointer-events: none; } .sf-box { width: 20px; height: 20px; border-radius: 6px; background: var(--creme-200); display: flex; align-items: center; justify-content: center; flex: none; } .sf-box .sf-icon { color: transparent; } .sf-check input:checked ~ .sf-box { background: var(--sarcelle-900); } .sf-check input:checked ~ .sf-box .sf-icon { color: var(--abricot-500); } .sf-check-price { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--gris); } /* Note voyageurs + étoiles (hôtels / séjours) */ .sf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sf-chip { display: inline-flex; align-items: center; font-weight: 700; font-size: 12.5px; color: var(--sarcelle-900); background: var(--creme-200); border-radius: var(--r-pill); padding: 8px 12px; cursor: pointer; transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; } .sf-chip input { position: absolute; opacity: 0; pointer-events: none; } .sf-chip:hover { background: var(--sarcelle-100); } .sf-chip:active { transform: scale(0.98); } .sf-chip.is-on { background: var(--sarcelle-900); color: var(--creme); } .sf-chip.is-on:hover { background: var(--encre); } .sf-starfilter { display: flex; gap: 6px; } .sf-starbtn { width: 38px; height: 34px; border: 0; border-radius: 10px; background: var(--creme-200); color: var(--abricot-800); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; } .sf-starbtn:hover { background: var(--abricot-200); } .sf-starbtn:active { transform: scale(0.98); } .sf-starbtn.is-on { background: var(--abricot-200); } .sf-starbtn.is-min { background: var(--sarcelle-900); color: var(--abricot-500); } /* Cases à cocher : mêmes transitions et même appui que les boutons. */ .sf-check .sf-box { transition: background .15s ease-out; } .sf-check .sf-box .sf-icon { transition: color .15s ease-out; } .sf-check:active .sf-box { transform: scale(0.98); } /* Carte « Alerte prix » */ .sf-alert { background: var(--sarcelle-900); border-radius: var(--r-card); padding: 22px; } .sf-alert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--abricot-500); } .sf-alert-head b { font-weight: 800; font-size: 15px; color: var(--creme); } .sf-alert p { margin-bottom: 16px; font-size: 14px; line-height: 1.55; color: var(--creme-86); } /* ---- Liste -------------------------------------------------------------- */ .sf-list { flex: 1 1 620px; min-width: 0; } .sf-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .sf-list-head h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; } .sf-list-head h1 .arrow { color: var(--sarcelle-300); font-weight: 700; margin: 0 2px; } .sf-list-sub { margin-top: 5px; font-family: var(--mono); font-weight: 400; font-size: 14px; color: var(--gris); } .sf-sort { display: flex; flex-wrap: wrap; gap: 6px; } .sf-sortpill { font-family: var(--ui); font-weight: 700; font-size: 13px; line-height: 1; border: 0; border-radius: var(--r-pill); padding: 10px 16px; cursor: pointer; color: var(--gris); background: #fff; box-shadow: 0 4px 14px rgba(3,31,37,0.05); transition: background .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; } .sf-sortpill:hover { color: var(--sarcelle-900); box-shadow: 0 6px 18px rgba(3,31,37,0.09); } .sf-sortpill:active { transform: scale(0.98); } .sf-sortpill.is-on { color: var(--creme); background: var(--sarcelle-900); box-shadow: none; } .sf-sortpill.is-on:hover { color: var(--creme); background: var(--encre); box-shadow: none; } .sf-cards { display: flex; flex-direction: column; gap: 14px; } /* Cartes de résultats : toute la carte est cliquable, l'ombre s'élève au survol (README §Interactions : 0 10px 30px -> 0 16px 40px, 150 ms). */ .result-card { transition: box-shadow .15s ease-out; } .result-card.is-clickable { cursor: pointer; } .result-card:hover { box-shadow: 0 16px 40px rgba(3,31,37,0.10); } /* Les zones interactives gardent leur propre curseur. */ .result-card input, .result-card select, .result-card textarea { cursor: auto; } .result-card a, .result-card button, .result-card label { cursor: pointer; } .sf-nomatch { display: none; text-align: center; color: var(--gris); font-weight: 600; background: #fff; border-radius: var(--r-card); padding: 28px; box-shadow: var(--sh-card); } /* Bloc prix crème (commun vol / hôtel / séjour) */ .sf-price { background: var(--creme); border-radius: var(--r-field); padding: 20px; text-align: right; } .sf-price-badge { display: flex; justify-content: flex-end; margin-bottom: 8px; } .sf-price .old { display: block; font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--gris); text-decoration: line-through; margin-bottom: 6px; } .sf-price .now { display: block; font-family: var(--mono); font-weight: 500; color: var(--sarcelle-900); margin-bottom: 4px; } .sf-price .now-lg { font-size: 32px; line-height: 1; } .sf-price .now-md { font-size: 30px; line-height: 1; } .sf-price .sub { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--gris); margin-bottom: 16px; } .sf-price .btn { border-radius: var(--r-pill); } /* Carte VOL */ .sf-flight { background: #fff; border-radius: 22px; padding: 24px 26px; box-shadow: var(--sh-card); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } .sf-fmain { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; } .sf-trip { display: flex; align-items: center; gap: 18px; } .sf-airsq { width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--ui); font-weight: 800; font-size: 13px; background: var(--sarcelle-100); color: var(--sarcelle-900); } .sf-airsq.is-ret { background: var(--creme-200); color: var(--gris); } .sf-timept { display: flex; flex-direction: column; gap: 4px; } .sf-timept.arr { text-align: right; } .sf-timept .t { font-family: var(--mono); font-weight: 500; font-size: 21px; line-height: 1; } .sf-timept .t sup { font-size: 11px; color: var(--gris); } .sf-timept .iata { font-size: 12px; } .sf-axis { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; } .sf-axis .dur { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--gris); } .sf-rail { width: 100%; height: 2px; background: var(--creme-300); position: relative; display: block; } .sf-rail::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sarcelle-900); } .sf-rail .stopdot { position: absolute; top: -3px; left: 46%; width: 8px; height: 8px; border-radius: 50%; background: var(--abricot-500); } .sf-axis .lab { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; } .sf-axis .lab.direct { color: var(--confirme); } .sf-axis .lab.stop { color: var(--gris); } /* 2e ligne de trajet dont la source ne publie pas encore les horaires : la ligne EXISTE (le retour est bien réservé), mais rien n'est inventé. */ .sf-axis .lab.soft { color: var(--sarcelle-700); font-size: 10px; text-align: center; } .sf-trip.is-soft .sf-timept .t { color: var(--sarcelle-700); } .sf-rail.is-soft { background: repeating-linear-gradient(90deg, var(--creme-300) 0 6px, transparent 6px 12px); } .sf-rail.is-soft::after { background: var(--sarcelle-300); } .sf-airname { font-size: 13px; line-height: 1.4; color: var(--gris); flex: none; } .sf-flight .sf-price { flex: 0 0 200px; } /* Ligne d'informations complémentaires sous le trajet : une pastille par donnée réellement publiée (n° de vol, cabine, appareil, bagages, CO2). Le retrait négatif la rapproche du trajet auquel elle se rapporte, sans toucher au `gap: 18px` qui sépare aller et retour. */ .sf-fmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; } .sf-metapill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-weight: 600; font-size: 12px; line-height: 1.25; color: var(--sarcelle-900); background: var(--creme-200); border-radius: var(--r-pill); padding: 6px 11px; max-width: 100%; min-width: 0; } .sf-metapill .sf-icon { color: var(--sarcelle-700); flex: none; } .sf-metapill .txt { min-width: 0; } .sf-metapill .mono { font-family: var(--mono); font-weight: 500; font-size: 12px; } /* Repère « sous la moyenne » : le vert « confirmé », réservé aux bonnes nouvelles. */ .sf-metapill .is-eco { font-weight: 700; color: var(--confirme); } /* Carte HÔTEL */ .sf-hotel { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--sh-card); display: flex; flex-wrap: wrap; } .sf-media { flex: 0 0 268px; min-height: 220px; position: relative; } .sf-media .photo { position: absolute; inset: 0; } .sf-media-badge { position: absolute; top: 14px; left: 14px; z-index: 1; font-weight: 700; font-size: 12px; color: var(--encre); background: var(--abricot-500); border-radius: var(--r-pill); padding: 8px 12px; pointer-events: none; } .sf-hbody { flex: 1 1 320px; min-width: 0; padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .sf-hinfo { flex: 1 1 220px; min-width: 0; } .sf-hname { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sf-hname h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.025em; } .sf-hname h3 a { color: var(--encre); } .sf-hname h3 a:hover { color: var(--sarcelle-900); } .sf-haddr { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--gris); margin-bottom: 16px; } .sf-haddr .sf-icon { color: var(--sarcelle-700); flex: none; } /* Dates et occupation du séjour, juste sous l'adresse : même ton que l'adresse, chiffres en JetBrains Mono. */ .sf-hmeta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--gris); margin: -10px 0 14px; } .sf-hmeta .sf-icon { color: var(--sarcelle-700); flex: none; } /* Le texte reste À CÔTÉ de l'icône et se replie sur lui-même quand la carte est étroite : sans `min-width: 0`, il passerait tout entier à la ligne et laisserait l'icône orpheline. */ .sf-hmeta .txt { flex: 1 1 auto; min-width: 0; } .sf-hmeta .mono { font-family: var(--mono); font-weight: 400; font-size: 12.5px; } .sf-amen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .sf-amenpill { font-weight: 600; font-size: 12px; color: var(--sarcelle-900); background: var(--creme-200); border-radius: var(--r-pill); padding: 8px 12px; } .sf-scorerow { display: flex; align-items: center; gap: 10px; } .sf-scorerow .score { border-radius: var(--r-badge); } /* Note moyenne (< 8,5/10) : sarcelle 700 et non le vert « confirmé », réservé aux très bonnes notes (maquette l.245-247 vs l.306-308). */ .score.is-mid { background: var(--sarcelle-700); } .sf-scorerow .txt { font-size: 13px; line-height: 1.4; color: var(--gris); } .sf-hotel .sf-price { flex: 0 0 190px; align-self: flex-start; } /* Carte SÉJOUR */ .sf-package { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--sh-card); } .sf-package-row { display: flex; flex-wrap: wrap; } .sf-pmedia { flex: 0 0 240px; min-height: 200px; position: relative; } .sf-pmedia .photo { position: absolute; inset: 0; } .sf-pbody { flex: 1 1 340px; min-width: 0; padding: 24px; } .sf-ptitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 18px; } .sf-ptitle h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; } .sf-vhbadge { font-weight: 700; font-size: 12px; color: var(--encre); background: var(--abricot-500); border-radius: var(--r-pill); padding: 7px 11px; } .sf-plines { display: flex; flex-direction: column; gap: 14px; } .sf-pline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sf-psq { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--sarcelle-100); color: var(--sarcelle-900); } .sf-proute { font-family: var(--mono); font-weight: 500; font-size: 15px; } .sf-pmeta { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--gris); } .sf-photel { font-weight: 600; font-size: 15px; line-height: 1.3; } .sf-pprice { flex: 0 0 210px; padding: 24px; } .sf-pfoot { background: var(--creme); padding: 14px 24px; font-size: 13px; line-height: 1.4; color: var(--gris); } /* Bandeau final « prix final » + crypto */ .sf-finalband { margin-top: 20px; background: var(--sarcelle-900); border-radius: 22px; padding: 26px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .sf-finalband .txt { flex: 1 1 300px; } .sf-finalband .txt b { display: block; font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--creme); margin-bottom: 6px; } .sf-finalband .txt p { font-size: 14px; line-height: 1.55; color: var(--creme-86); } /* État vide / erreur — garde son titre de niveau 1 et le reste de la page */ .sf-empty { background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 48px 32px; text-align: center; } .sf-empty .sf-icon { color: var(--sarcelle-300); margin-bottom: 12px; } .sf-empty h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 8px; } .sf-empty h2 { font-size: 24px; margin-bottom: 8px; } .sf-empty p { color: var(--gris); max-width: 48ch; margin-inline: auto; } .sf-empty .sf-empty-cta { margin-top: 20px; } .sf-empty .sf-empty-cta .sf-icon { color: inherit; margin: 0; } .sf-fcount { font-size: 13px; padding-left: 2px; } .sf-error { display: flex; align-items: center; gap: 10px; background: var(--alerte-bg); color: var(--alerte); font-weight: 700; border-radius: var(--r-field); padding: 14px 18px; margin-bottom: 16px; } /* ---- Adaptations écran étroit ------------------------------------------ */ @media (max-width: 900px) { .sf-filters { flex: 1 1 100%; } .sf-airname { display: none; } } @media (max-width: 620px) { .sf-flight .sf-price, .sf-hotel .sf-price, .sf-pprice { flex: 1 1 100%; } .sf-media, .sf-pmedia { flex: 1 1 100%; } .sf-list-head h1 { font-size: 22px; } } /* ---- Équivalent crypto + lien fiche (ajouts post-build) ---- */ .sf-approx { display:block; margin-top:4px; font-size:12px; color:var(--gris); } .sf-seelink { display:block; text-align:center; margin-top:8px; font-weight:700; font-size:13px; color:var(--sarcelle-700); } .sf-seelink:hover { color:var(--sarcelle-900); } /* ---- Logo compagnie dans le carré (ajout images) ---- */ .sf-airsq.has-logo { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Filtres VOLS : compteur, remise à zéro, tranches horaires --------- Le compteur « N vols sur M » et le bouton de remise à zéro coiffent la colonne. Le bouton n'apparaît (attribut `hidden` retiré par le JS) que lorsqu'au moins un filtre s'écarte de son état d'origine. */ .sf-freset { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-inline: 2px; } .sf-fcnt { font-size: 13px; font-weight: 600; color: var(--gris); } .sf-fcnt b { font-family: var(--mono); font-weight: 500; color: var(--encre); } .sf-resetbtn { display: inline-flex; align-items: center; border: 0; cursor: pointer; font-family: var(--ui); font-weight: 700; font-size: 12.5px; line-height: 1; color: var(--sarcelle-900); background: var(--creme-200); border-radius: var(--r-pill); padding: 8px 13px; transition: background .15s ease-out, color .15s ease-out; } .sf-resetbtn:hover { background: var(--sarcelle-900); color: var(--creme); } .sf-resetbtn:active { transform: scale(0.98); } .sf-resetbtn[hidden] { display: none; } /* Tranches horaires (départ / arrivée) : quatre pastilles rectangulaires en deux colonnes, chacune avec son compte de vols. Une tranche sans vol est grisée et désactivée — elle dit qu'il n'y a rien à cette heure-là. */ .sf-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sf-slot { display: block; cursor: pointer; min-width: 0; } .sf-slot input { position: absolute; opacity: 0; pointer-events: none; } .sf-slot-in { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 6px; row-gap: 2px; background: var(--creme-200); border-radius: 12px; padding: 9px 11px; transition: background .15s ease-out, color .15s ease-out; } .sf-slot .lab { font-weight: 700; font-size: 13px; line-height: 1.2; } .sf-slot .hrs { grid-column: 1; font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--gris); } .sf-slot .n { grid-column: 2; grid-row: 1; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--gris); } .sf-slot:hover .sf-slot-in { background: var(--sarcelle-100); } .sf-slot input:checked ~ .sf-slot-in { background: var(--sarcelle-900); color: var(--creme); } .sf-slot input:checked ~ .sf-slot-in .hrs { color: var(--creme-66); } .sf-slot input:checked ~ .sf-slot-in .n { color: var(--abricot-500); } .sf-slot:active .sf-slot-in { transform: scale(0.98); } .sf-slot input:focus-visible ~ .sf-slot-in { box-shadow: 0 0 0 3px var(--sarcelle-300); } /* Tranche vide : rien à cocher, et elle le montre. */ .sf-slot.is-empty { cursor: default; opacity: 0.45; } .sf-slot.is-empty:hover .sf-slot-in, .sf-slot.is-empty:active .sf-slot-in { background: var(--creme-200); transform: none; } /* Sous-titre d'un bloc qui en réunit deux (aéroports de départ / d'arrivée) */ .sf-subtitle { font-weight: 700; font-size: 12.5px; color: var(--encre); margin-bottom: 10px; } .sf-subtitle.is-next { margin-top: 16px; } /* Libellé d'aéroport : code IATA en JetBrains Mono, nom au fil du texte, le compte de vols reste calé à droite. */ .sf-aplab { min-width: 0; overflow-wrap: anywhere; font-weight: 600; } .sf-aplab b { font-family: var(--mono); font-weight: 500; } /* ---- Facettes hôtel / séjour : équipements, quartier, repas, avis ---- Le libellé peut passer à la ligne (certains repères de quartier sont des noms de monuments entiers) ; le compte reste calé à droite, en JetBrains Mono comme tous les chiffres du site. */ .sf-check-lab { min-width: 0; overflow-wrap: anywhere; } .sf-check-count { margin-left: auto; padding-left: 10px; flex: none; font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--gris); }