/* Cartes produits du thème agency : bouton commun (partials/card-cta, tl-cards.js) et présentation commune. Bouton : rond avec flèche (body.tl-card-cta-round, par défaut) ou texte (body.tl-card-cta-text), réglé dans Admin V2 › Theme Builder › Style. Couleur : var(--main-color). */ /* ── Bouton ───────────────────────────────────────────────────────────────────────────────────── */ a.tl-cta, button.tl-cta, span.tl-cta{ position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; flex: none; width: auto; min-width: 0; margin: 0; border: 0 !important; background: var(--main-color, #e8483b) !important; color: #fff !important; font: 700 14px/1.1 'Open Sans', sans-serif; text-decoration: none !important; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .tl-cta__arrow{ flex: none; transition: transform .15s ease; } [dir="rtl"] .tl-cta__arrow{ transform: scaleX(-1); } a.tl-cta:hover, button.tl-cta:hover{ filter: brightness(.94); } a.tl-cta:hover .tl-cta__arrow, button.tl-cta:hover .tl-cta__arrow{ transform: translateX(3px); } [dir="rtl"] a.tl-cta:hover .tl-cta__arrow, [dir="rtl"] button.tl-cta:hover .tl-cta__arrow{ transform: scaleX(-1) translateX(3px); } a.tl-cta:focus-visible, button.tl-cta:focus-visible{ outline: 3px solid var(--main-color, #e8483b); outline-offset: 3px; } span.tl-cta.is-disabled{ opacity: .45; cursor: default; } /* Rond avec flèche (par défaut) : le libellé reste lu par les lecteurs d'écran */ body:not(.tl-card-cta-text) a.tl-cta, body:not(.tl-card-cta-text) button.tl-cta, body:not(.tl-card-cta-text) span.tl-cta{ width: 46px !important; height: 46px; padding: 0 !important; border-radius: 50% !important; box-shadow: 0 6px 16px rgba(15, 23, 42, .16); } body:not(.tl-card-cta-text) .tl-cta__label{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body:not(.tl-card-cta-text) a.tl-cta:hover, body:not(.tl-card-cta-text) button.tl-cta:hover{ transform: scale(1.06); } /* Bouton texte */ body.tl-card-cta-text a.tl-cta, body.tl-card-cta-text button.tl-cta, body.tl-card-cta-text span.tl-cta{ min-height: 44px; padding: 11px 18px !important; border-radius: 12px !important; } body.tl-card-cta-text .tl-cta__arrow{ width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce){ .tl-cta, .tl-cta__arrow{ transition: none; } } /* ── Carte commune ────────────────────────────────────────────────────────────────────────────── */ .tl-card{ position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid #e8eaef !important; border-radius: 16px !important; box-shadow: none; transition: box-shadow .2s ease, transform .2s ease; } .tl-card:hover{ box-shadow: 0 12px 30px rgba(15, 23, 42, .10) !important; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce){ .tl-card, .tl-card:hover{ transition: none; transform: none; } } /* Carte entièrement cliquable par le lien du bouton ; les autres liens et boutons restent au-dessus */ .tl-cta--stretch::after{ content: ''; position: absolute; inset: 0; z-index: 1; } .tl-card .tl-cta--stretch{ position: static !important; } .tl-card a:not(.tl-cta--stretch), .tl-card button:not(.tl-cta--stretch), .tl-card .tl-card__above{ position: relative; z-index: 2; } /* Pied de carte : prix à gauche, bouton à droite, toujours en bas */ .tl-card__footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eef0f4; } .tl-card__footer > :first-child{ min-width: 0; } /* ── Familles de cartes existantes : corps extensible, pied toujours en bas ───────────────────── */ .tl-card.cv-hotel-card .cv-hotel-body{ flex: 1; display: flex; flex-direction: column; } .tl-card.cv-hotel-card .cv-hotel-footer{ margin-top: auto; } .tl-card.bcs-card{ border: 0 !important; box-shadow: 0 4px 20px rgba(15, 23, 42, .08); } .tl-card.bcs-card .bcs-card-footer{ display: flex; justify-content: flex-end; } /* Hôtels (liste de résultats) : bouton sous le prix en liste, à droite du prix en grille et sur mobile */ .cv-hotel-pricebox .tl-cta{ align-self: flex-end; } .hotel-item-search-list.tl-card{ height: auto; } #hotel-results.is-grid .hotel-item-search-list.tl-card{ height: 100%; } /* Activités (liste de résultats) : la carte garde sa hauteur au lieu de prendre toute la colonne */ .tl-result-card.tl-card{ height: auto; } /* Packages et circuits (liste de résultats) : image à gauche du contenu ; les pages repassent en colonne sur mobile */ .trs-card.tl-card{ flex-direction: row; height: auto; } .tl-hmap-popup .tl-cta{ position: static; } /* Vols : « Voir plus » (détail du vol) et bouton côte à côte ; le bouton envoie le formulaire de la carte */ .volFilter div:has(> .tl-cta){ flex-direction: row !important; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } .volFilter div:has(> .tl-cta) > a[data-toggle="modal"]{ flex: 1; width: auto !important; } .volFilter div:has(> .tl-cta) > .tl-cta:only-child{ margin-inline-start: auto; } /* Transferts : bouton à droite du prix */ .trl-card-price .tl-cta{ align-self: flex-end; } /* ── Plugin « Offres » (plugins/deals) ─────────────────────────────────────────────────────────── */ .tl-deals__filter{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; } .tl-deals__chip{ padding: 8px 16px; border: 1px solid #e3e6ec; border-radius: 999px; background: #fff; color: #1f2633; font: 600 13px/1.2 'Open Sans', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease; } .tl-deals__chip:hover{ border-color: var(--main-color, #e8483b); } .tl-deals__chip.is-active{ background: var(--main-color, #e8483b); border-color: var(--main-color, #e8483b); color: #fff; } .tl-deals__chip:focus-visible{ outline: 2px solid var(--main-color, #e8483b); outline-offset: 2px; } .tl-deals [data-tl-deal-type][hidden]{ display: none !important; } .tl-deals__badge{ background: var(--second-color, #0f766e); } .tl-deals__discount{ position: absolute; top: 12px; right: 12px; z-index: 3; padding: 5px 10px; border-radius: 999px; background: #dc2626; color: #fff; font: 800 12px/1 'Open Sans', sans-serif; } [dir="rtl"] .tl-deals__discount{ right: auto; left: 12px; } .tl-deals__old{ display: block; font-size: .78em; font-weight: 500; color: #9ca3af; text-decoration: line-through; } .tl-deals__ends{ margin: -2px 0 8px; font-size: 12px; font-weight: 600; color: #b45309; } .tl-deals__more{ display: flex; justify-content: center; margin-top: 8px; } .tl-deals__more-link{ display: inline-flex; align-items: center; padding: 12px 22px; border: 1px solid var(--main-color, #e8483b); border-radius: 12px; color: var(--main-color, #e8483b) !important; font-weight: 700; text-decoration: none !important; } .tl-deals__more-link:hover{ background: var(--main-color, #e8483b); color: #fff !important; } /* Page « Toutes les offres » */ .tl-deals-page{ padding-top: 8px; padding-bottom: 48px; } .tl-deals-page__head{ text-align: center; margin: 12px 0 22px; } .tl-deals-page__title{ font-size: 28px; font-weight: 800; color: #1f2633; margin: 0 0 6px; } .tl-deals-page__subtitle{ margin: 0; color: #6b7280; } .tl-deals-page .tl-results-count{ margin: 0 0 14px; } a.tl-deals__chip{ text-decoration: none !important; display: inline-flex; align-items: center; } .tl-deals-page__pagination{ display: flex; justify-content: center; margin-top: 12px; } /* ══ Carte produit commune (components/cards/product-card) ══════════════════════════════════════════ Emplacements à hauteur fixe : les cartes d'une même rangée restent alignées (titre long, 5 étoiles, sans description…), quel que soit le thème enfant. Variables surchargeables : --tl-pcard-*. */ .tl-pcard{ --tl-pcard-accent: var(--main-color, #2563eb); --tl-pcard-ink: #0f172a; --tl-pcard-muted: #64748b; --tl-pcard-title-lh: 1.3; --tl-pcard-title-fs: 17px; border-radius: 16px !important; } .tl-pcard .tl-pcard__media{ position: relative; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; background: linear-gradient(135deg, #e2e8f0, #cbd5e1); } .tl-pcard .tl-pcard__media img{ display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .35s ease; } .tl-pcard:hover .tl-pcard__media img{ transform: scale(1.04); } .tl-pcard .tl-pcard__badge{ position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--second-color, #0f766e); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; } .tl-pcard .tl-pcard__body{ display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 16px; } /* Titre : toujours 2 lignes réservées, coupé au-delà (le nom complet reste dans l'info-bulle) */ .tl-pcard .tl-pcard__title{ display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(var(--tl-pcard-title-fs) * var(--tl-pcard-title-lh) * 2); margin: 0 !important; color: var(--tl-pcard-ink); font-size: var(--tl-pcard-title-fs) !important; line-height: var(--tl-pcard-title-lh) !important; font-weight: 700; overflow-wrap: anywhere; } /* Ligne étoiles / note / lieu : une seule ligne, réservée même vide */ .tl-pcard .tl-pcard__sub{ display: flex; align-items: center; gap: 10px; min-height: 20px; min-width: 0; color: var(--tl-pcard-muted); font-size: 13px; line-height: 20px; white-space: nowrap; } .tl-pcard .tl-pcard__stars{ display: inline-flex; flex: none; gap: 2px; } .tl-pcard .tl-pcard__stars i{ color: #f5b301 !important; font-size: 12px; } .tl-pcard .tl-pcard__rating{ display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--tl-pcard-ink); font-weight: 700; } .tl-pcard .tl-pcard__rating i{ color: #f5b301 !important; font-size: 12px; } .tl-pcard .tl-pcard__rating small{ color: var(--tl-pcard-muted); font-weight: 500; } .tl-pcard .tl-pcard__loc{ display: inline-flex; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; } .tl-pcard .tl-pcard__loc svg{ flex: none; color: var(--tl-pcard-accent); } .tl-pcard .tl-pcard__loc span{ overflow: hidden; text-overflow: ellipsis; } .tl-pcard .tl-pcard__stars + .tl-pcard__loc::before, .tl-pcard .tl-pcard__rating + .tl-pcard__loc::before{ content: ""; width: 3px; height: 3px; margin-inline-end: 4px; border-radius: 50%; background: currentColor; opacity: .5; } .tl-pcard .tl-pcard__chips{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .tl-pcard .tl-pcard__chips li{ display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: var(--tl-pcard-ink); font-size: 12px; } .tl-pcard .tl-pcard__chips i{ color: var(--tl-pcard-accent); } .tl-pcard .tl-pcard__options .hotel-options-icons{ margin-top: 0 !important; } /* Description : 2 lignes maximum */ .tl-pcard .tl-pcard__desc{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; color: var(--tl-pcard-muted); font-size: 13.5px; line-height: 1.45; } .tl-pcard .tl-pcard__footer{ margin-top: auto; } .tl-pcard .tl-pcard__price{ display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .tl-pcard .tl-pcard__price-label{ color: var(--tl-pcard-muted); font-size: 12px; } .tl-pcard .tl-pcard__price-value{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--tl-pcard-ink); font-size: 18px; } .tl-pcard .tl-pcard__price-value strong{ color: var(--tl-pcard-accent); font-weight: 800; white-space: nowrap; } .tl-pcard .tl-pcard__price-old{ color: #9ca3af; font-size: 13px; font-weight: 500; } .tl-pcard .tl-pcard__price-alt{ color: var(--tl-pcard-ink); font-size: 14px; font-weight: 700; } @media (prefers-reduced-motion: reduce){ .tl-pcard .tl-pcard__media img, .tl-pcard:hover .tl-pcard__media img{ transition: none; transform: none; } } /* Grille commune des cartes : 1 colonne (mobile) → 2 (tablette) → nombre choisi dans le plugin (1 à 4) */ .tl-pgrid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 576px){ .tl-pgrid--cols-2, .tl-pgrid--cols-3, .tl-pgrid--cols-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px){ .tl-pgrid--cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .tl-pgrid--cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 4 cartes par ligne : titre un peu plus petit pour garder des cartes lisibles */ @media (min-width: 992px) and (max-width: 1199.98px){ .tl-pgrid--cols-4 .tl-pcard{ --tl-pcard-title-fs: 15.5px; } } .tl-pgrid--center > :only-child{ max-width: 420px; justify-self: center; width: 100%; } /* Option « 6 par ligne » (plugin Offres) : 4 sur écran moyen, 6 sur grand écran */ @media (min-width: 576px){ .tl-pgrid--cols-6{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px){ .tl-pgrid--cols-6{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px){ .tl-pgrid--cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .tl-pgrid--cols-6 .tl-pcard{ --tl-pcard-title-fs: 15px; } } .tl-pgrid__item{ min-width: 0; } .tl-pgrid__item[hidden]{ display: none !important; } .tl-pcard .tl-pcard__discount{ position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; padding: 4px 9px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.3; } /* Produits similaires (shared/_similar-products) : en-tête de section */ .sp-section{ margin-top: 2.5rem; margin-bottom: 2.5rem; } .sp-section__title{ margin-bottom: 4px; color: #0f172a; font-size: 1.5rem; font-weight: 800; } .sp-section__subtitle{ margin-bottom: 1.4rem; color: #64748b; font-size: .9rem; } /* Destinations sur l'image (pastille en bas à gauche, liste au survol) — présentation historique des cartes, anciennement copiée en