/* Plugins de sections du Page Builder (themes/agency/plugins/sections/*) : bandeau partagé, engagements, titres de
   section, cartes catégories, bloc mis en avant, galerie, vidéo, carte des destinations.
   Couleurs : --tl-brand (couleur principale du site par défaut), --tl-ink (texte), --tl-sec-bg (fond, réglé dans le
   plugin). Polices : --tl-font-heading / --tl-font-body (Theme Builder › Style), sinon celles du site. */

:root{
  --tl-brand: var(--main-color, #79162D);
  --tl-ink: var(--tl-text-color, #303846);
  --tl-muted: #6b7280;
  --tl-line: #e7e2dd;
  --tl-soft: color-mix(in srgb, var(--tl-brand) 8%, #fff);
  --tl-radius: 16px;
}

/* ── Titres de section : accroche + titre en deux tons ───────────────────────────────────────── */
.tl-eyebrow{
  margin: 0 0 10px; color: var(--tl-brand); font-weight: 700; font-size: 12px; line-height: 1.3; font-family: var(--tl-font-body, inherit);
  letter-spacing: .22em; text-transform: uppercase;
}
.tl-sec-title{
  margin: 0 0 12px; color: var(--tl-ink); font-family: var(--tl-font-heading, inherit);
  font-size: var(--tl-fs-h2, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
}
h1.tl-sec-title{ font-size: var(--tl-fs-hero, 3rem); }
.tl-sec-title__accent{ color: var(--tl-brand); }
.tl-sec-lead{ margin: 0 0 18px; color: var(--tl-muted); font-size: 1rem; line-height: 1.65; max-width: 46ch; }

.tl-sec-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 22px; }
.tl-sec-head .tl-sec-title{ margin-bottom: 0; }
.tl-sec-head .tl-sec-lead{ margin: 8px 0 0; }
.tl-sec-head--center{ flex-direction: column; align-items: center; text-align: center; }
.tl-sec-head--center .tl-sec-lead{ margin-inline: auto; }
.tl-link-arrow{
  display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--tl-brand) !important;
  font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap;
}
.tl-link-arrow svg{ transition: transform .15s ease; }
.tl-link-arrow:hover svg{ transform: translateX(3px); }
[dir="rtl"] .tl-link-arrow svg, [dir="rtl"] .tl-btn svg, [dir="rtl"] .tl-cat-card__arrow{ transform: scaleX(-1); }

/* ── Boutons ──────────────────────────────────────────────────────────────────────────────────── */
.tl-btn{
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: var(--tl-btn-radius, 999px);
  font-weight: 700; font-size: 14px; line-height: 1; font-family: var(--tl-font-body, inherit); text-decoration: none !important; transition: filter .15s ease, transform .15s ease;
}
.tl-btn--primary{ background: var(--tl-brand); color: #fff !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--tl-brand) 28%, transparent); }
.tl-btn--primary:hover{ filter: brightness(.94); }
.tl-btn:focus-visible, .tl-btn-video:focus-visible, .tl-link-arrow:focus-visible{ outline: 2px solid var(--tl-brand); outline-offset: 3px; }
.tl-btn-video{
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 4px; border: 0; background: none;
  color: var(--tl-brand); font-weight: 700; font-size: 14px; line-height: 1; font-family: var(--tl-font-body, inherit); cursor: pointer;
}
.tl-btn-video__play{
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--tl-brand); color: var(--tl-brand); background: #fff;
}
.tl-btn-video:hover .tl-btn-video__play{ background: var(--tl-brand); color: #fff; }

/* ── Icônes ───────────────────────────────────────────────────────────────────────────────────── */
.tl-icon-circle{
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px;
  border-radius: 50%; background: var(--tl-soft); color: var(--tl-brand);
}

/* ── Motif géométrique (étoiles à huit branches) : teinte de la marque, très discret ──────────── */
.has-pattern{ position: relative; isolation: isolate; }
.has-pattern::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background: var(--tl-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M32 6l7.5 18.5L58 32l-18.5 7.5L32 58l-7.5-18.5L6 32l18.5-7.5z'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 0l12 12M64 0L52 12M0 64l12-12M64 64L52 52'/%3E%3C/g%3E%3C/svg%3E") repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M32 6l7.5 18.5L58 32l-18.5 7.5L32 58l-7.5-18.5L6 32l18.5-7.5z'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 0l12 12M64 0L52 12M0 64l12-12M64 64L52 52'/%3E%3C/g%3E%3C/svg%3E") repeat;
  -webkit-mask-size: 64px 64px; mask-size: 64px 64px;
}

/* ── Cadres photo : arche (avec liseré fin décalé) ou coins arrondis ──────────────────────────── */
.tl-frame{ position: relative; margin: 0; }
.tl-frame img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-frame--rounded img{ border-radius: 24px; }
.tl-frame--arch img{ border-radius: 999px 999px 18px 18px / 46% 46% 18px 18px; }
.tl-frame--arch::after{
  content: ''; position: absolute; inset: -10px -10px 10px 10px; z-index: -1; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--tl-brand) 45%, transparent);
  border-radius: 999px 999px 22px 22px / 46% 46% 22px 22px;
}
[dir="rtl"] .tl-frame--arch::after{ inset: -10px 10px 10px -10px; }

/* ── Bandeau partagé ──────────────────────────────────────────────────────────────────────────── */
.tl-hero-split{ background: var(--tl-sec-bg, transparent); padding: clamp(28px, 5vw, 64px) 0 0; }
.tl-hero-split__inner{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 56px);
}
.tl-hero-split .tl-sec-lead{ font-size: 1.0625rem; }
.tl-hero-split__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 10px; }
.tl-hero-split__media{ isolation: isolate; aspect-ratio: 4 / 4.3; max-height: 560px; justify-self: end; width: 100%; }
.tl-hero-split.has-search{ padding-bottom: 0; }
/* Le bandeau (contexte d'empilement : motif) passe devant les rangées suivantes, dont les colonnes Bootstrap
   sont en position: relative — sinon les panneaux du moteur (destinations, dates…) passent dessous. */
.tl-hero-split.has-search{ position: relative; z-index: 20; }
.tl-hero-split__search{ position: relative; z-index: 5; margin-top: -42px; padding: 0 clamp(0px, 3vw, 32px); }
.tl-hero-split__search .builder-search-engine{ box-shadow: 0 18px 40px rgba(48, 56, 70, .12); border-radius: 22px; }
@media (max-width: 991px){
  .tl-hero-split__inner{ grid-template-columns: minmax(0, 1fr); }
  .tl-hero-split__media{ order: -1; justify-self: center; max-width: 440px; aspect-ratio: 4 / 3.6; }
  .tl-hero-split__search{ margin-top: 20px; padding: 0; }
}

/* ── Engagements ──────────────────────────────────────────────────────────────────────────────── */
.tl-features{
  display: grid; grid-template-columns: repeat(var(--tl-features-n, 4), minmax(0, 1fr)); gap: 18px 0;
  padding: 26px 8px; background: var(--tl-sec-bg, transparent); border-radius: var(--tl-radius);
}
.tl-features--cols-1{ --tl-features-n: 1; } .tl-features--cols-2{ --tl-features-n: 2; } .tl-features--cols-3{ --tl-features-n: 3; }
.tl-features--cols-4{ --tl-features-n: 4; } .tl-features--cols-5{ --tl-features-n: 5; } .tl-features--cols-6{ --tl-features-n: 6; }
.tl-features__item{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 18px; text-align: center; }
.tl-features--left .tl-features__item{ align-items: flex-start; text-align: left; }
.tl-features.has-dividers .tl-features__item + .tl-features__item{ border-inline-start: 1px solid var(--tl-line); }
.tl-features__title{ margin: 6px 0 0; color: var(--tl-ink); font-weight: 700 !important; font-size: 15px !important; line-height: 1.3 !important; font-family: var(--tl-font-body, inherit) !important; }
.tl-features__text{ margin: 0; color: var(--tl-muted); font-size: 13px; line-height: 1.5; max-width: 26ch; }
@media (max-width: 767px){
  .tl-features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-features.has-dividers .tl-features__item + .tl-features__item{ border-inline-start: 0; }
}

/* ── Cartes catégories ────────────────────────────────────────────────────────────────────────── */
.tl-cat-cards{ display: grid; grid-template-columns: repeat(var(--tl-cat-n, 4), minmax(0, 1fr)); gap: 18px; }
.tl-cat-cards--cols-2{ --tl-cat-n: 2; } .tl-cat-cards--cols-3{ --tl-cat-n: 3; } .tl-cat-cards--cols-4{ --tl-cat-n: 4; }
.tl-cat-card{
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius); color: var(--tl-ink) !important; text-decoration: none !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.tl-cat-card:hover{ box-shadow: 0 14px 30px rgba(48, 56, 70, .12); transform: translateY(-2px); }
a.tl-cat-card:focus-visible{ outline: 2px solid var(--tl-brand); outline-offset: 3px; }
.tl-cat-card__media{ display: block; aspect-ratio: 4 / 3; background: var(--tl-soft); overflow: hidden; }
.tl-cat-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.tl-cat-card:hover .tl-cat-card__media img{ transform: scale(1.04); }
.tl-cat-card__body{ position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 44px 16px 16px; }
[dir="rtl"] .tl-cat-card__body{ padding: 14px 16px 16px 44px; }
.tl-cat-card__head{ display: flex; align-items: center; gap: 10px; }
.tl-cat-card__icon{ display: inline-flex; color: var(--tl-brand); }
.tl-cat-card__icon .tl-icon{ width: 20px; height: 20px; }
.tl-cat-card__title{ font-weight: 700; font-size: 15px; line-height: 1.3; font-family: var(--tl-font-body, inherit); }
.tl-cat-card__text{ color: var(--tl-muted); font-size: 13px; line-height: 1.45; }
.tl-cat-card__arrow{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--tl-brand); }
[dir="rtl"] .tl-cat-card__arrow{ right: auto; left: 16px; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 991px){ .tl-cat-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ .tl-cat-cards{ grid-template-columns: minmax(0, 1fr); } }

/* ── Bloc mis en avant ────────────────────────────────────────────────────────────────────────── */
.tl-promo{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .9fr); align-items: center;
  gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--tl-radius) + 6px);
  background: var(--tl-sec-bg, var(--tl-soft)); overflow: hidden;
}
.tl-promo.no-media{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.tl-promo.no-items{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.tl-promo.no-media.no-items{ grid-template-columns: minmax(0, 1fr); }
.tl-promo__media{ isolation: isolate; aspect-ratio: 3 / 3.6; max-height: 360px; width: 100%; }
.tl-promo__items{ display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.tl-promo__item{ display: flex; align-items: center; gap: 14px; }
.tl-promo__item .tl-icon-circle{ width: 46px; height: 46px; background: #fff; }
.tl-promo__item-title{ display: block; color: var(--tl-ink); font-size: 15px; }
.tl-promo__item-text{ display: block; color: var(--tl-muted); font-size: 13px; }
@media (max-width: 991px){
  .tl-promo, .tl-promo.no-media, .tl-promo.no-items{ grid-template-columns: minmax(0, 1fr); }
  .tl-promo__media{ max-width: 320px; justify-self: center; }
}

/* ── Galerie ──────────────────────────────────────────────────────────────────────────────────── */
.tl-gallery{ display: grid; grid-template-columns: repeat(var(--tl-gal-n, 3), minmax(0, 1fr)); gap: 14px; }
.tl-gallery--cols-2{ --tl-gal-n: 2; } .tl-gallery--cols-3{ --tl-gal-n: 3; } .tl-gallery--cols-4{ --tl-gal-n: 4; } .tl-gallery--cols-5{ --tl-gal-n: 5; }
.tl-gallery__item{ margin: 0; }
.tl-gallery__open{ display: block; width: 100%; padding: 0; border: 0; border-radius: var(--tl-radius); overflow: hidden; background: var(--tl-soft); cursor: zoom-in; }
.tl-gallery__open img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.tl-gallery--square .tl-gallery__open img{ aspect-ratio: 1; }
.tl-gallery--portrait .tl-gallery__open img{ aspect-ratio: 3 / 4; }
.tl-gallery__open:hover img{ transform: scale(1.04); }
.tl-gallery__open:focus-visible{ outline: 2px solid var(--tl-brand); outline-offset: 3px; }
.tl-gallery__item figcaption{ margin-top: 6px; color: var(--tl-muted); font-size: 13px; }
.tl-gallery--carousel{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px; }
.tl-gallery--carousel .tl-gallery__item{ flex: 0 0 calc((100% - (var(--tl-gal-n, 3) - 1) * 14px) / var(--tl-gal-n, 3)); scroll-snap-align: start; }
@media (max-width: 767px){
  .tl-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-gallery--carousel .tl-gallery__item{ flex-basis: 78%; }
}

/* ── Vidéo ────────────────────────────────────────────────────────────────────────────────────── */
.tl-video{ max-width: 960px; margin: 0 auto; }
.tl-video__poster{
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--tl-radius); overflow: hidden;
  background: #1f2633; aspect-ratio: 16 / 9; cursor: pointer;
}
.tl-video--9x16{ max-width: 380px; } .tl-video--9x16 .tl-video__poster{ aspect-ratio: 9 / 16; }
.tl-video--1x1{ max-width: 560px; } .tl-video--1x1 .tl-video__poster{ aspect-ratio: 1; }
.tl-video__poster img{ width: 100%; height: 100%; object-fit: cover; }
.tl-video__play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center;
  justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: var(--tl-brand); color: #fff;
  box-shadow: 0 0 0 10px color-mix(in srgb, #fff 30%, transparent);
}
.tl-video__title{ position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; font-weight: 700; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* Fenêtre plein écran (vidéo, photo agrandie) */
.tl-lightbox{ position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 18, 24, .88); }
.tl-lightbox[hidden]{ display: none; }
.tl-lightbox__body{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tl-lightbox__frame{ position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; }
.tl-lightbox__frame--portrait{ width: min(420px, 100%); aspect-ratio: 9 / 16; }
.tl-lightbox__frame iframe, .tl-lightbox__frame video{ width: 100%; height: 100%; border: 0; border-radius: 12px; background: #000; }
.tl-lightbox__img{ max-width: 100%; max-height: 86vh; border-radius: 12px; }
.tl-lightbox__close, .tl-lightbox__nav{
  position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.tl-lightbox__close{ top: 16px; right: 16px; }
.tl-lightbox__nav--prev{ left: 16px; top: 50%; transform: translateY(-50%); }
.tl-lightbox__nav--next{ right: 16px; top: 50%; transform: translateY(-50%); }
.tl-lightbox__close:focus-visible, .tl-lightbox__nav:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
html.tl-lightbox-lock{ overflow: hidden; }

/* ── Carte des destinations ───────────────────────────────────────────────────────────────────── */
.tl-dest-map{ height: var(--tl-map-h, 460px); border-radius: var(--tl-radius); overflow: hidden; border: 1px solid var(--tl-line); background: var(--tl-soft); z-index: 0; }
.tl-dest-map__pin{ background: none; border: 0; }
.tl-dest-map__pin span{
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--tl-brand); box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.tl-dest-map__pin span::after{ content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.tl-dest-map-popup .leaflet-popup-content-wrapper{ padding: 0; border-radius: 14px; overflow: hidden; }
.tl-dest-map-popup .leaflet-popup-content{ margin: 0; width: 240px !important; }
.tl-dest-map__card img{ display: block; width: 100%; height: 120px; object-fit: cover; }
.tl-dest-map__card div{ padding: 10px 14px 14px; }
.tl-dest-map__card strong{ display: block; color: var(--tl-ink); font-size: 15px; }
.tl-dest-map__card p{ margin: 4px 0 0; color: var(--tl-muted); font-size: 12px; }
.tl-dest-map__card a{ display: inline-flex; margin-top: 10px; color: var(--tl-brand) !important; font-weight: 700; font-size: 13px; }

@media (prefers-reduced-motion: reduce){
  .tl-cat-card, .tl-cat-card__media img, .tl-gallery__open img, .tl-link-arrow svg, .tl-btn{ transition: none; }
}

/* ── Options du Theme Builder (actives seulement quand elles sont renseignées) ────────────────────
   Style : classes tl-tb-* posées sur <body> par base/front.blade.php ; Header / Footer : classes posées par
   themes/builder/partials/header|footer. */
/* Spécificité (0,0,3) : passe devant « body * » (child-themes/builder.css) mais reste derrière .fa / .fab
   (fontawesome-agency-free.css), pour garder les icônes. */
html body.tl-tb-font-body, html :where(body.tl-tb-font-body) :is(*, html body){ font-family: var(--tl-font-body) !important; }
html body.tl-tb-font-heading h1, html body.tl-tb-font-heading h2, html body.tl-tb-font-heading .tl-sec-title,
html body.tl-tb-font-heading .tl-sec-title *{ font-family: var(--tl-font-heading) !important; font-weight: 400; }
html body.tl-tb-page-bg{ background-color: var(--tl-page-bg) !important; }
html body.tl-tb-text{ color: var(--tl-text-color); }

/* En-tête fixe au défilement, lien de la page courante souligné, bouton conseiller, loupe */
body.agency .builder-header.builder-header--sticky{ position: sticky; top: 0; z-index: 900; }
body.agency .builder-header.builder-header--active-underline .builder-header-menu-link{ position: relative; }
body.agency .builder-header.builder-header--active-underline .builder-header-menu-link.is-active::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--color-primary);
}
body.agency .builder-header.builder-header--active-underline .builder-header-menu-link.is-active{ color: var(--color-primary) !important; }
body.agency .builder-header .builder-header-actions-desktop .builder-header-cta.builder-header-cta--advisor{
  gap: 8px !important; background: var(--color-primary) !important;
}
body.agency .builder-header .builder-header-icon-control.builder-header-icon-control--advisor{
  background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important;
}
body.agency .builder-header .builder-header-search-link{ background: transparent; }

/* Barre du bas du footer pleine largeur et liens légaux */
.builder-footer-legal{ display: flex; flex-wrap: wrap; gap: 6px 18px; }
.builder-footer-legal a{ font-size: 12px; }
.builder-footer-bar{ background: var(--tl-footer-bar-bg); color: #fff; }
.builder-footer-bar__inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 14px; font-size: 12px; }
.builder-footer-bar__inner p{ margin: 0; }
.builder-footer .builder-footer-bar a{ color: #fff; opacity: .9; }
.builder-footer .builder-footer-bar a:hover{ color: #fff; opacity: 1; text-decoration: underline; }
.builder-footer-bar__credit{ opacity: .75; }
@media (max-width: 767px){ .builder-footer-bar__inner{ flex-direction: column; text-align: center; } }
