/* =====================================================================
   sejourantilles-fixes.css
   Correctifs responsive + composition du séjour.
   → Ajouter à la fin de public/css/sejourantilles.css
   ===================================================================== */

/* ---- ISSUE 4 : burger caché par spécificité CSS ------------------- */
/* Ancienne règle : .header-tools .icon-btn{display:none} cachait .burger */
/* Correction ciblée : cacher uniquement les icon-btn non-burger       */
@media(max-width:760px){
  .header-tools .icon-btn:not(.burger){ display:none; }
  .header-tools .burger{ display:grid; }
}

/* ---- ISSUE 3 : FABs au-dessus de la bottom-nav mobile ------------- */
@media(max-width:760px){
  .hp-fab-stack{ bottom: 82px; } /* 64px bottom-nav + 18px gap */
}

/* ---- ISSUE 1 : barre sticky séjour au-dessus de la bottom-nav ----- */
@media(max-width:860px){
  .sa-mobile-bar{
    bottom: 64px; /* au-dessus de la bottom-nav */
  }
}

/* ---- COMPOSITION DU SÉJOUR ---------------------------------------- */
.sa-composition{display:flex;flex-direction:column;gap:12px}
.sa-comp-item{
  display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:flex-start;
  padding:14px;border:1.5px solid var(--c-line);border-radius:var(--r);
  background:var(--c-surface);transition:.2s
}
.sa-comp-item:hover{border-color:var(--c-turquoise);box-shadow:var(--shadow-s)}
.sa-comp-item--opt{opacity:.8;border-style:dashed}
.sa-comp-icon{
  width:44px;height:44px;border-radius:10px;background:var(--c-sand);
  display:grid;place-items:center;flex:none
}
.sa-comp-icon i{width:20px;height:20px;color:var(--c-turquoise)}
.sa-comp-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sa-comp-type{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-turquoise)}
.sa-comp-label{font-weight:600;font-size:.95rem;color:var(--c-ink)}
.sa-comp-detail{font-size:.83rem;color:var(--c-ink-soft)}
.sa-comp-day{display:flex;align-items:center;gap:5px;font-size:.78rem;
  color:var(--c-ink-soft);margin-top:2px}
.sa-comp-day i{width:12px;height:12px}
.sa-comp-price{flex:none;text-align:right;font-size:.85rem;font-weight:600}
.sa-comp-included{display:flex;align-items:center;gap:5px;color:var(--c-turquoise)}
.sa-comp-included i{width:14px;height:14px}
.sa-comp-optional{display:flex;align-items:center;gap:5px;color:var(--c-ink-soft)}
.sa-comp-optional i{width:14px;height:14px}

@media(max-width:600px){
  .sa-comp-item{grid-template-columns:38px 1fr;gap:10px}
  .sa-comp-price{grid-column:2;text-align:left}
}

/* ===== Conformité maquette Adobe (SejourAntilles) ===== */
/* Newsletter : overlay allégé pour laisser vivre la vidéo turquoise */
.hp-newsletter::after{background:linear-gradient(180deg,rgba(8,74,86,.30),rgba(8,48,60,.46))!important}
/* Hero : titre principal droit, accent en italique (comme la maquette) */
.hp-hero__title{font-style:normal}
.hp-hero__accent{font-style:italic}


/* ===== Logo image (colibri + wordmark) — clair sur hero, foncé au scroll ===== */
.logo-img{height:44px;width:auto;display:block}
.logo-img--dark{display:none}
.site-header.is-solid .logo-img--light{display:none}
.site-header.is-solid .logo-img--dark{display:block}


/* ===== Lot 1 conformite maquette : hero + destinations ===== */
/* Hero : accent BLANC (maquette), le cercle reste colore */
.hp-hero__accent{color:#fff!important}
/* Note manuscrite du hero */
.hp-hero__note{position:absolute;right:5%;bottom:20%;z-index:3;max-width:230px;
  font-family:var(--font-script);font-size:1.9rem;line-height:1.05;color:#fff;
  transform:rotate(-6deg);text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.32);pointer-events:none}
.hp-hero__note-arrow{display:block;width:52px;margin:0 auto 2px;transform:rotate(6deg)}
@media(max-width:900px){.hp-hero__note{display:none}}
/* Destinations : decor avion + oiseaux */
.hp-destinations{position:relative;overflow:hidden}
.hp-destinations .wrap{position:relative}
.hp-deco-plane{position:absolute;left:-6px;top:-6px;width:150px;opacity:.95;pointer-events:none;z-index:0}
.hp-deco-birds{position:absolute;right:10px;top:6px;width:170px;opacity:.95;pointer-events:none;z-index:0}
@media(max-width:820px){.hp-deco-birds{display:none}.hp-deco-plane{width:110px}}


/* ===== Lot 2 : "Pourquoi choisir" (usp) — version claire maquette ===== */
:root{--font-serif:"Playfair Display",Georgia,serif}
.hp-usp{background:#fff!important;color:var(--c-ink)!important;position:relative;overflow:hidden}
.hp-usp__grid{grid-template-columns:1.05fr .95fr;gap:56px;align-items:start!important}
.hp-usp__title{color:var(--c-navy)!important;font-size:clamp(2rem,3.4vw,2.7rem);margin:0}
.hp-usp__title em{font-style:italic;background:linear-gradient(100deg,#E88B00,#DA1C21 55%,#842E5E);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-usp__photo{position:relative;margin-top:26px}
.hp-usp__photo .imgfill{height:330px;border-radius:26px;overflow:hidden}
.hp-usp__hibiscus{position:absolute;left:-24px;top:-24px;width:92px;z-index:2}
.hp-usp__support-title{color:var(--c-navy)!important;font-family:var(--font-display);font-style:normal;font-weight:800;letter-spacing:.02em;font-size:1.05rem;margin:26px 0 10px;text-transform:uppercase}
.hp-usp__support-text{color:var(--c-ink-soft);max-width:450px;margin:0}
.hp-usp__col--right{position:relative}
.hp-usp__swoosh{position:absolute;right:-90px;top:60px;width:120%;z-index:0;opacity:.9;pointer-events:none}
.hp-usp__intro{position:relative;z-index:1;color:var(--c-ink-soft);max-width:360px;font-size:1.05rem;margin:0}
.hp-usp__stats{position:relative;z-index:1;margin-top:38px;display:block}
.hp-usp__stat{margin-bottom:26px}
.hp-usp__stat b{display:block;font-family:var(--font-serif);font-style:normal;font-weight:700;font-size:2.6rem;line-height:1;background:linear-gradient(100deg,#E4571F,#B4295A 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-usp__stat small{display:block;color:var(--c-ink);font-weight:500;margin-top:2px;font-size:1rem}
@media(max-width:900px){.hp-usp__grid{grid-template-columns:1fr!important;gap:34px}.hp-usp__swoosh{display:none}}


/* ===== Lot 5 : titres Trust (Paiement / Partenaires) en MAJUSCULES non-italique ===== */
.hp-trust-content h2{font-style:normal!important;text-transform:uppercase;color:var(--c-navy)!important;letter-spacing:.01em;font-size:clamp(1.35rem,2.2vw,1.7rem)}
.hp-trust-content h2 em{font-style:normal;color:var(--c-navy)}

/* ===== Lot 4 : barre de filtres "Experiences en vedette" ===== */
.hp-exp-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin:6px 0 34px}
.hp-exp-filter-dd{display:inline-flex;align-items:center;gap:10px;background:var(--c-navy);color:#fff;border-radius:999px;padding:12px 22px;font-family:var(--font-display);font-style:normal;font-weight:600;font-size:.92rem;cursor:pointer}
.hp-exp-filter-dd i{width:16px;height:16px}
.hp-exp-tab{border:1.5px solid #e3e7ee;background:#fff;color:var(--c-ink-soft);border-radius:999px;padding:11px 22px;font-family:var(--font-display);font-style:normal;font-weight:600;font-size:.92rem;cursor:pointer;transition:all .18s}
.hp-exp-tab:hover{border-color:#c9d2de}
.hp-exp-tab.is-active{border-color:var(--c-navy);color:var(--c-navy)}

/* ------------------------------------------------------------------ *
 * Lot 3 — widget de recherche (hero) : etat "Bientot"
 * Onglets a venir (soon) et bouton de recherche desactive quand
 * l'onglet actif n'est pas encore ouvert a la recherche.
 * ------------------------------------------------------------------ */
.hp-search-tab.is-soon{ opacity:.85; }
.hp-search .btn-sunset[disabled]{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.35);
  box-shadow:none;
}
.hp-search .btn-sunset[disabled]:hover{ transform:none; }

/* ------------------------------------------------------------------ *
 * Header — anti-debordement de la navigation
 * Les libelles ne reviennent plus a la ligne (nowrap). Le conteneur du
 * header est legerement elargi et l'espacement resserre pour tenir les
 * 5 liens + le CTA sur une seule ligne. La loupe du header est masquee
 * sur desktop (redondante : la recherche est dans le widget du hero).
 * En dessous de 1320px on bascule sur le menu burger, avant tout
 * debordement (le layout telephone <=760px reste geré plus bas).
 * ------------------------------------------------------------------ */
.site-header .wrap{ max-width:1340px; gap:20px; }
.main-nav{ gap:2px; }
.main-nav a{ white-space:nowrap; padding:9px 10px; font-size:.9rem; gap:5px; }
.main-nav a i{ width:14px; height:14px; }
.header-tools .icon-btn[aria-label="Rechercher"]{ display:none; }

@media (max-width:1320px){
  .site-header .main-nav{ display:none; }
  .site-header .header-tools .icon-btn:not(.burger){ display:none; }
  .site-header .header-tools .burger{ display:grid; }
}

/* ------------------------------------------------------------------ *
 * Pages statiques (CMS) — en-tete + prose (mentions legales, CGV...).
 * ------------------------------------------------------------------ */
.wrap--narrow{ max-width:820px; margin-left:auto; margin-right:auto; }
.hp-page-head{
  padding:120px 0 28px;
  background:linear-gradient(180deg,var(--c-navy,#0c2747),var(--c-navy,#0c2747));
  color:#fff;
}
.hp-page-crumb{ font-size:.85rem; opacity:.8; margin-bottom:10px; }
.hp-page-crumb a{ color:#fff; text-decoration:none; }
.hp-page-crumb a:hover{ text-decoration:underline; }
.hp-page-title{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; margin:0;
}
.hp-prose-block{ padding:44px 0 72px; }
.hp-prose-block__title{ font-size:1.4rem; margin:0 0 18px; color:var(--c-ink,#12263a); }
.hp-prose{ color:#33475b; line-height:1.75; font-size:1rem; }
.hp-prose h2{ font-size:1.3rem; margin:34px 0 12px; color:var(--c-ink,#12263a); }
.hp-prose h3{ font-size:1.08rem; margin:26px 0 10px; color:var(--c-ink,#12263a); }
.hp-prose p{ margin:0 0 14px; }
.hp-prose ul{ margin:0 0 14px; padding-left:20px; }
.hp-prose li{ margin:6px 0; }
.hp-prose a{ color:var(--c-coral,#e0533d); }
.hp-prose strong{ color:var(--c-ink,#12263a); }

/* Footer — coordonnées editables (charte agence) */
.footer-contact{ display:flex; flex-direction:column; gap:8px; margin:14px 0 4px; }
.footer-contact a, .footer-contact span{
  display:flex; align-items:center; gap:9px;
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.9rem; line-height:1.4;
}
.footer-contact a:hover{ color:#fff; }
.footer-contact i{ width:16px; height:16px; flex:none; color:var(--c-coral,#e0533d); }
.footer-reg{ opacity:.7; }

/* ===================================================================
   Transferts — front public (fiche + simulateur). Registre éditorial :
   titres alignés à gauche, intitulé en capitales espacées, blocs pleins,
   pas de pastille ni de badge.
   =================================================================== */
.tr{ padding:0 0 4rem; }
.tr-bread{ display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:var(--c-ink-soft,#8a8a8a); padding-top:1.5rem; }
.tr-bread a{ color:var(--c-ink-soft,#8a8a8a); text-decoration:none; }
.tr-bread a:hover{ color:var(--c-coral,#e0533d); }
.tr-bread b{ color:var(--c-ink,#2b2b2b); font-weight:600; }

.tr-head{ padding-top:1.6rem; padding-bottom:1.2rem; border-bottom:1px solid var(--c-line,#eadfce); margin-bottom:2rem; }
.tr-eyebrow{ margin:0 0 .5rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-coral,#e0533d); font-weight:600; }
.tr-title{ margin:0; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.15; color:var(--c-navy,#1f3a4d); font-weight:700; }
.tr-title span{ color:var(--c-coral,#e0533d); font-weight:400; margin:0 .15em; }
.tr-sub{ margin:.8rem 0 0; max-width:60ch; color:var(--c-ink-soft,#6a6a6a); font-size:1.02rem; line-height:1.6; }

.tr-grid{ display:grid; grid-template-columns:1fr 360px; gap:2.5rem; align-items:start; }
.tr-main{ min-width:0; }
.tr-prose{ color:var(--c-ink,#2b2b2b); line-height:1.7; font-size:1.02rem; }
.tr-prose p{ margin:0 0 1rem; }
.tr-facts{ list-style:none; margin:1.8rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--c-line,#eadfce); display:grid; gap:.9rem; }
.tr-facts li{ display:flex; align-items:center; gap:.6rem; color:var(--c-ink,#2b2b2b); font-size:.98rem; }
.tr-facts i{ width:18px; height:18px; flex:none; color:var(--c-turquoise,#2a9d8f); }

.tr-side{ position:sticky; top:1.5rem; }
.tr-quote{ border:1px solid var(--c-line,#eadfce); background:var(--c-surface,#fff); border-radius:14px; padding:1.5rem; }
.tr-quote__label{ margin:0 0 1.1rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-navy,#1f3a4d); font-weight:700; }
.tr-field{ display:block; margin:0 0 1rem; }
.tr-field > span{ display:block; margin:0 0 .35rem; font-size:.85rem; color:var(--c-ink-soft,#6a6a6a); }
.tr-field select, .tr-field input{ width:100%; padding:.6rem .7rem; border:1px solid var(--c-line,#eadfce); border-radius:9px; font-size:1rem; background:#fff; color:var(--c-ink,#2b2b2b); }
.tr-field select:focus, .tr-field input:focus{ outline:none; border-color:var(--c-coral,#e0533d); }
.tr-quote__go{ width:100%; margin:.3rem 0 0; }

.tr-result{ margin:1.3rem 0 0; padding:1.1rem 0 0; border-top:1px solid var(--c-line,#eadfce); }
.tr-result__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 0 .5rem; }
.tr-result__row span{ color:var(--c-ink-soft,#6a6a6a); font-size:.92rem; }
.tr-result__row b{ color:var(--c-ink,#2b2b2b); font-weight:600; font-size:1.05rem; }
.tr-result__row--total b{ color:var(--c-navy,#1f3a4d); font-size:1.5rem; font-weight:700; }
.tr-result__note{ margin:.4rem 0 0; font-size:.8rem; color:var(--c-ink-soft,#9a9a9a); }
.tr-result__na{ margin:0; color:var(--c-ink,#2b2b2b); font-size:.95rem; }
.tr-quote__cta{ display:block; width:100%; text-align:center; margin:1.1rem 0 0; }

@media (max-width:860px){
  .tr-grid{ grid-template-columns:1fr; gap:2rem; }
  .tr-side{ position:static; }
}