/* =========================================================
   Smile Tunisia — Global Styles
   - Keeps hero background at /assets/img/hero.jpg
   - Adds per-card slideshow for trust cards
   ========================================================= */

:root{
  --lav:#EDE6F7;
  --turq:#5AC3CC;
  --blue:#3B5BA7;
  --violet:#7A5FA7;
  --text:#1D1D3B;
  --muted:#6b7280;
  --bg:#ffffff;

  /* navbar logo tuning */
  --logo-scale: 1.25;     /* try 1.20–1.35 */
  --logo-shift-x: -50px;  /* move left without pushing links */
}

/* Reset & base */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg);
  scroll-behavior:smooth;
}
.container{ max-width:1100px; margin:0 auto; padding:20px }
.section{ padding:72px 0 }
.lead{ color:var(--muted); font-size:18px; line-height:1.5 }
.badge{
  display:inline-block; background:var(--lav); color:var(--blue);
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
}
.card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Buttons */
.btn{ display:inline-block; background:var(--blue); color:#fff; border:none;
  border-radius:999px; padding:12px 18px; font-weight:700; text-decoration:none }
.btn-outline{ background:transparent; border:2px solid var(--violet); color:var(--violet) }
.btn-turq{ background:var(--turq); color:#063b3f }
.btn:focus{ outline:3px solid rgba(0,0,0,.15) }

/* Grids */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media (max-width: 900px){
  .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr }
}

/* Header / Nav */
header{ position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:20 }
nav .container{ display:flex; align-items:center; gap:1px; font-size:92% }
nav .brand{ font-weight:800; color:var(--blue); letter-spacing:.2px; display:inline-flex; align-items:center }
nav .brand img{
  height:80px; width:auto; display:block;
  transform: translateX(var(--logo-shift-x)) scale(var(--logo-scale));
  transform-origin:left center;
}
nav a{ color:var(--text); text-decoration:none; margin:0 8px; font-weight:600; white-space:nowrap }
nav .spacer{ flex:1 }
nav a.cta{ margin-left:12px }

/* Hero (keeps your URL) */
.hero{ background:linear-gradient(180deg, var(--lav), #fff) }
.hero .wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center }
.hero h1{ font-size:40px; margin:0 0 12px }

.hero.hero-photo{
  position:relative;
  background:
    linear-gradient(90deg,
      rgba(237,230,247,.95) 0%,
      rgba(255,255,255,.92) 45%,
      rgba(255,255,255,.60) 70%,
      rgba(255,255,255,0) 100%
    ),
    url('../img/hero.jpg') center / cover no-repeat;
}
.hero.hero-photo .wrap{ min-height:520px; align-items:center }
@media (max-width: 1200px){
  .hero.hero-photo{
    background:
      linear-gradient(90deg,
        rgba(237,230,247,.96) 0%,
        rgba(255,255,255,.92) 55%,
        rgba(255,255,255,.65) 75%,
        rgba(255,255,255,0) 100%
      ),
      url('../img/hero.jpg') center / cover no-repeat;
  }
}
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr }
  .hero.hero-photo .wrap{ min-height:420px }
  .hero.hero-photo{
    background:
      linear-gradient(180deg,
        rgba(237,230,247,.96) 0%,
        rgba(255,255,255,.90) 65%,
        rgba(255,255,255,0) 100%
      ),
      url('../img/hero.jpg') center 25% / cover no-repeat;
  }
}

/* KPI chips */
.kpis{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px }
.kpi{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px 16px; min-width:140px }

/* Lists */
.list{ list-style:none; padding:0; margin:0 }
.list li{ margin:8px 0; padding-left:28px; position:relative }
.list li::before{ content:"•"; position:absolute; left:8px; color:var(--violet) }

/* Proof, table, steps, callouts */
.trust h2,.proof h2,.prices h2,.process h2,.tourism h2,.qualifs h2{ margin-top:0; font-size:28px }

.review{ background:var(--lav); border-radius:16px; padding:16px }
.stars{ color:var(--turq); font-size:18px }

.table{ width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden }
.table th,.table td{ padding:12px; border-bottom:1px solid #eee; text-align:left }
.table thead{ background:#f7f7fb }
.table .tn{ background:var(--turq); color:#063b3f; font-weight:800 }

.step{ background:#fff; border:1px solid #eee; border-radius:16px; padding:16px; display:flex; gap:12px; align-items:flex-start }
.step .em{ font-size:24px }

.callout{ background:var(--turq); color:#063b3f; border-radius:12px; padding:12px 16px }
.callout em{ font-style:normal; font-weight:800 }
.callout.warn{ background:#fde68a; color:#7c2d12 }

/* Footer */
footer{ background:#0f172a; color:#e5e7eb; padding:24px 0 }
footer a{ color:#e5e7eb }
.footer-col{ font-size:14px }

/* Galleries */
.gallery{ display:flex; gap:10px; flex-wrap:wrap }
.gallery img{ width:100%; border-radius:12px; border:1px solid #eee }

/* Notes */
.note{ font-size:12px; color:var(--muted) }

/* ---------------------------------------------------------
   “Pourquoi” section
   --------------------------------------------------------- */
.why{ position:relative }
.why::before{
  content:""; position:absolute; inset:-60px 0 auto 0; height:260px;
  background: radial-gradient(1200px 260px at 20% 50%, rgba(122,95,167,.07), transparent 60%);
  pointer-events:none; z-index:0;
}
.why .container{ position:relative; z-index:1 }
.why .points{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.why .point{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.04);
}
.why .point h3{ margin:0 0 8px; font-size:20px }
.why .point ul{ margin:8px 0 0; padding-left:20px; color:var(--muted) }
.why .point .icn{
  width:36px; height:36px; color:var(--violet);
  background:rgba(122,95,167,.08);
  border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.why .point .icn svg{ width:22px; height:22px }
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 18px }
.chip{
  background:var(--lav); color:var(--blue);
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px;
  border:1px solid rgba(59,91,167,.18);
}
.mini-reviews{ display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 6px }
.review-mini{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #eee; border-radius:999px; padding:8px 12px;
}
.review-mini .avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--turq); color:#063b3f; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.review-mini .txt{ font-size:14px; color:#111827 }
.why-cta{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr }
  .why .points{ grid-template-columns:1fr }
}
/* === WHY: interactive background aura that follows the hovered card === */
.why{ position: relative; overflow: hidden; }
.why::before{
  content:"";
  position:absolute; inset:-60px 0 auto 0; height:300px;
  background:
    radial-gradient(1200px 300px at 50% 50%, rgba(122,95,167,.08), transparent 62%),
    linear-gradient(180deg, rgba(237,230,247,.45), rgba(237,230,247,0) 70%);
  pointer-events:none; z-index:0;
  transition: background .35s ease, opacity .35s ease, filter .35s ease;
}
.why .container{ position: relative; z-index: 1; }

/* Lift/feedback on the cards themselves */
.why .point{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.why .point:hover,
.why .point:focus-within,
.why .point.active{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  border-color: rgba(122,95,167,.20);
}

/* Themed auras – left/middle/right anchors for a nice motion feel */
.why.theme-expertise::before{
  background:
    radial-gradient(1200px 300px at 18% 50%, rgba(122,95,167,.18), transparent 62%),
    linear-gradient(180deg, rgba(237,230,247,.50), rgba(237,230,247,0) 70%);
}
.why.theme-tech::before{
  background:
    radial-gradient(1200px 300px at 50% 50%, rgba(59,91,167,.18), transparent 62%),
    linear-gradient(180deg, rgba(237,230,247,.50), rgba(237,230,247,0) 70%);
}
.why.theme-care::before{
  background:
    radial-gradient(1200px 300px at 82% 50%, rgba(90,195,204,.22), transparent 62%),
    linear-gradient(180deg, rgba(237,230,247,.50), rgba(237,230,247,0) 70%);
}

@media (max-width: 900px){
  .why::before{ height:380px; }
}

/* ---------------------------------------------------------
   TRUST section — Card slideshows (hover/tap)
   --------------------------------------------------------- */
#trust{ position:relative }            /* no section-wide image; card-only photos */

.trust-card{                           /* base card and lift */
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.95);
  border:1px solid #eee; border-radius:16px; padding:16px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.06); outline:none;
}
.trust-card:hover,
.trust-card:focus,
.trust-card.active{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 16px 44px rgba(59,91,167,.18);
  border-color:rgba(59,91,167,.28);
}

/* slideshow layers inside each card (injected by JS) */
.trust-card > *{ position:relative; z-index:1 } /* keep text above */
.trust-card .photo-slideshow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
}
.trust-card .photo-slideshow .ph{
  position:absolute; inset:0; border-radius:inherit;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.03);
  opacity:0; transition:opacity .45s ease;
}
/* readability overlay */
.trust-card .photo-slideshow::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.66) 60%,
    rgba(255,255,255,.25) 100%);
  pointer-events:none;
}
/* current image visibility (tweak .28–.42 to taste) */
.trust-card .photo-slideshow .ph.show{ opacity:.34 }
/* ---- Clinic mosaic (compact, elegant) ---- */
.clinic-mosaic{
  display:grid; gap:12px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 170px 170px;      /* ~340px total height */
  margin:14px 0 22px;
}
.clinic-mosaic .tile{
  position:relative; border:none; padding:0; cursor:pointer;
  border-radius:16px; overflow:hidden; background:#f3f4f6;
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}
.clinic-mosaic .tile.lg{ grid-row: 1 / span 2; }
.clinic-mosaic .tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition: transform .35s ease, filter .35s ease;
  filter:saturate(1.03) contrast(1.03);
}
.clinic-mosaic .tile:hover img{ transform:scale(1.06); filter:saturate(1.08) contrast(1.06); }

.clinic-mosaic .tile::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(100% 120% at 20% 80%, rgba(0,0,0,.35), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.38) 70%);
  opacity:.85; transition:opacity .25s ease;
}
.clinic-mosaic .tile:hover::after{ opacity:1; }

.clinic-mosaic .cap{
  position:absolute; left:12px; bottom:10px;
  color:#fff; font-weight:700; font-size:14px;
  background: rgba(0,0,0,.45);
  padding:6px 10px; border-radius:10px;
  backdrop-filter: blur(2px);
}

/* Mobile: stack tiles */
@media (max-width: 900px){
  .clinic-mosaic{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 120px 120px;
  }
  .clinic-mosaic .tile.lg{
    grid-column: 1 / span 2; grid-row: 1 / span 1;   /* big image on top */
  }
}

/* ---- Lightbox ---- */
.lb[hidden]{ display:none; }
.lb{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.8);
  display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:1fr auto 1fr;
  place-items:center;
}
.lb-img{
  grid-column:1 / -1; grid-row:1 / -1;
  max-width:min(92vw,1200px); max-height:86vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lb-close,.lb-prev,.lb-next{
  position:relative; z-index:1; border:none; cursor:pointer; color:#fff;
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.lb-close{ position:absolute; top:18px; right:18px; }
.lb-prev{ grid-column:1; grid-row:2; }
.lb-next{ grid-column:3; grid-row:2; }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.25); }

/* ---- Make the 3 service cards equal height & aligned ---- */
.trust .grid-3{ align-items:stretch; }
.trust-card{
  height:100%; display:flex; flex-direction:column;
}
.trust-card h3{ margin:0 0 8px; }
.trust-card .list{ margin:8px 0 0; }


/* === BEFORE / AFTER – remove blue bars and make image = box === */

/* 1) The outer wrapper should not show; no padding, no bg */
#results .ba-viewport{
  background: transparent !important;  /* was #0f172a */
  padding: 0 !important;
  box-shadow: none;                     /* optional */
  max-width: 980px;                     /* keep it reasonably narrow */
  margin-inline: auto;                  /* center it */
  position: relative;                   /* for absolute-positioned UI */
}

/* 2) The visible box is the frame; make it the exact size you want */
#results .ba-frame{
  --pos:50%;
  width: 100%;
  height: clamp(200px, 30vw, 340px);   /* smaller & responsive */
  border-radius: 16px;
  overflow: hidden;
  background: #111;                    /* or transparent if you prefer */
  position: relative;
  isolation: isolate;
  margin: 0;                           /* kill any default gaps */
}

/* 3) Images always fill the frame (no blue edges / letterbox) */
#results .ba__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fx,50%) var(--fy,50%); /* optional per-slide focus */
  display: block;
}

/* 4) Keep BEFORE mask + handle logic unchanged */
#results .ba__after{ z-index: 0; }
#results .ba__before{
  z-index: 1;
  clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
}

/* 5) UI elements are overlays (don’t add height) */
#results .ba__handle{
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none; cursor: ew-resize;
  color: #fff; background: rgba(59,91,167,.98);
  box-shadow: 0 8px 20px rgba(59,91,167,.38);
  z-index: 3;
}
#results .ba__handle::before{
  content: ""; position: absolute; left: 50%;
  top: -1000px; bottom: -1000px; width: 2px;
  transform: translateX(-50%); background: #fff; opacity: .9;
}

#results .ba-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #0f172a; border: 0;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  z-index: 4;
}
#results .ba-prev{ left: 12px; }
#results .ba-next{ right: 12px; }

#results .ba-dots{
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 4;
}

/* Defensive: remove any margins that could reveal wrapper bg */
#results .ba-slide{ margin: 0; }
/* === Results slider layout === */
#results .ba-viewport{
  position: relative;
  overflow: hidden;              /* hide slides outside view */
  border-radius: 18px;           /* same as frame for a clean silhouette */
}

#results .ba-track{
  display: flex;                 /* slides side-by-side */
  will-change: transform;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

#results .ba-slide{
  flex: 0 0 100%;                /* each slide = 100% width of viewport */
  padding: 0;                    /* no gaps */
}

/* dots UI */
#results .ba-dots{ display:flex; gap:8px; }
#results .ba-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.7);
  border: 2px solid rgba(255,255,255,.95);
  transform: scale(1);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
#results .ba-dot.is-active{
  background: var(--turq);
  border-color: var(--turq);
  transform: scale(1.35);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #results .ba-track{ transition: none; }
}
/* the white vertical line shouldn’t catch clicks */
#results .ba__handle::before{ pointer-events:none; }

/* nav must be above slides/handle */
#results .ba-nav{ z-index: 10; }

/* better touch behavior while dragging the handle */
#results .ba__handle{ touch-action: none; }
#results .ba-frame{ touch-action: pan-y; } /* allow vertical scroll, not horizontal */

/* Make sure nav & dots are clickable and above everything */
#results .ba-nav,
#results .ba-dots button{
  pointer-events:auto;
  z-index: 20;
}

/* the vertical line of the handle should not block clicks */
#results .ba__handle::before{ pointer-events:none; }

/* handle drag should not trigger browser gestures */
#results .ba__handle{ touch-action:none; }
#results .ba-frame{ touch-action:pan-y; }

/* (keep your other CSS as-is) */
/*==========================================================================*/
/* --- Tourism hero carousel --- */
.tour-hero .banner-vp{
  --hero-h: clamp(260px, 46vw, 520px);
  position: relative;
  height: var(--hero-h);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15,23,42,.18);
}

.banner-slide{
  position: absolute; inset: 0;
  background: var(--img) center / cover no-repeat;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s ease, transform 1.2s ease;
  will-change: opacity, transform;
}
.banner-slide::after{
  /* soft vignette + bottom gradient for text readability */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(140% 120% at 10% 90%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.50) 95%);
  pointer-events:none;
}
.banner-slide.is-active{
  opacity: 1; transform: scale(1.0);
}

/* Caption block */
.banner-cap{
  position: absolute; left: 26px; right: 26px; bottom: 24px;
  max-width: 620px;
  color: #fff;
}
.banner-cap h3{ margin:0 0 6px; font-size: clamp(20px, 3.2vw, 32px); line-height:1.15; }
.banner-cap p { margin:0 0 12px; font-size: clamp(14px, 1.7vw, 18px); opacity:.95; }
.banner-cap .btn{ box-shadow: 0 10px 24px rgba(90,195,204,.35); }

/* Arrows */
.banner-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:#0f172a;
  display:grid; place-items:center; cursor:pointer; z-index:2;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.banner-nav.prev{ left:12px; }
.banner-nav.next{ right:12px; }
.banner-nav:hover{ background:#fff; }

/* Dots */
.banner-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.banner-dots button{
  width:10px; height:10px; border-radius:50%; border:2px solid #fff;
  background: rgba(255,255,255,.65);
  transform: scale(1); transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.banner-dots button[aria-selected="true"]{
  background: var(--turq); border-color: var(--turq); transform: scale(1.3);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .banner-slide{ transition:none; transform:none !important; }
}
/* --- Tourism hero carousel --- */
.hero-tourism { padding-top: 0; padding-bottom: 0; }
.hero-tourism .tourism-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  max-width: 1100px;
  margin: 0 auto;
  background:#000;
}
.tourism-track{ display:flex; transition:transform .55s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.t-slide{
  position: relative;
  flex: 0 0 100%;   /* exact width, no rounding */
  width: 100%;
  height: clamp(320px, 48vw, 520px);
}
.tourism-track{ display:flex; gap:0; }  /* ensure no gaps */

.t-bg{
  position:absolute; inset:0;
  background:var(--img) center / cover no-repeat;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.04);
}
.t-slide::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(15,23,42,.72) 0%,
    rgba(15,23,42,.45) 45%,
    rgba(0,0,0,0) 78%);
}

.t-copy{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; }
.t-copy h3{ color:#fff; font-size: clamp(24px, 3.2vw, 36px); margin:8px 0 6px; }
.t-copy .lead{ color:#e5e7eb; max-width: 560px; }
.t-copy .badge{ background:rgba(255,255,255,.18); color:#fff; backdrop-filter: blur(2px); }
.t-copy .btn{ margin-top:12px; }

.t-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; border: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.9);          /* chevron only */
  width: 44px; height: 44px;            /* keep tap target */
  display: grid; place-items: center;
  transform: none;
}
.t-prev{ left:14px; } .t-next{ right:14px; }
.t-nav:hover{  border-color: rgba(255,255,255,.45);  }

.t-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.t-dot{ width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.6); border:2px solid rgba(255,255,255,.95);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.t-dot.is-active{ background:var(--turq); border-color:var(--turq); transform:scale(1.3); }

/* mobile: stronger overlay + larger hit targets */
@media (max-width: 900px){
  .t-slide::after{
    background: linear-gradient(180deg,
      rgba(15,23,42,.70) 0%, rgba(15,23,42,.55) 40%, rgba(0,0,0,0) 100%);
  }
  .t-nav{ width:40px; height:40px; }
}
/* --- once (safety) --- */
#tourism .tourism-viewport{ overflow:hidden; border-radius:22px; }
#tourism .tourism-track{ display:flex; gap:0; }
#tourism .t-slide{ flex:0 0 100%; width:100%; } /* exact width → no edge peeking */

/* --- 3rd banner overrides --- */
#tourism .tourism-track .t-slide:nth-child(3)::after{
  /* lighter overlay than your default so the collage pops */
  background: linear-gradient(90deg,
    rgba(15,23,42,.38) 0%,
    rgba(15,23,42,.20) 45%,
    rgba(0,0,0,0) 78%);
}
@media (max-width:900px){
  #tourism .tourism-track .t-slide:nth-child(3)::after{
    background: linear-gradient(180deg,
      rgba(15,23,42,.45) 0%,
      rgba(15,23,42,.25) 40%,
      rgba(0,0,0,0) 100%);
  }
}

/* give the image a small lift */
#tourism .tourism-track .t-slide:nth-child(3) .t-bg{
  filter: brightness(1.10) contrast(1.03) saturate(1.05);
}

/* keep headings crisp on a lighter background */
#tourism .tourism-track .t-slide:nth-child(3) .t-copy h3{
  text-shadow: 0 2px 14px rgba(0,0,0,.22);
}
#tourism .tourism-track .t-slide:nth-child(3) .badge{
  background: rgba(255,255,255,.15);
}
/* base */
.hover-ink{
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hover-ink > *{ position: relative; z-index: 1; }   /* content above overlay */

/* soft color overlay */
.hover-ink::before{
  content:""; position:absolute; inset:0; border-radius:16px; z-index:0; pointer-events:none;
  background:
    radial-gradient(500px 180px at var(--mx,50%) var(--my,50%), var(--hover, rgba(90,195,204,.18)), transparent 70%),
    linear-gradient(180deg, rgba(237,230,247,.12), rgba(237,230,247,0));
  opacity:0; transition: opacity .25s ease;
}
.hover-ink:hover{ transform: translateY(-3px); box-shadow:0 14px 40px rgba(59,91,167,.18); border-color:rgba(59,91,167,.28); }
.hover-ink:hover::before{ opacity:1; }

/* quick themes (choose per card with data-theme) */
.hover-ink[data-theme="turq"]  { --hover: rgba(90,195,204,.22); }
.hover-ink[data-theme="violet"]{ --hover: rgba(122,95,167,.22); }
.hover-ink[data-theme="blue"]  { --hover: rgba(59,91,167,.22); }
/* simple fill on hover */
.hover-card{
  transition: background-color .25s ease, box-shadow .18s ease, transform .18s ease;
}
.hover-card:hover{
  background: #f7f6e6;                 /* your lilac */
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(59,91,167,.18);
}
/* layout */
.qgrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
@media (max-width: 980px){ .qgrid{ grid-template-columns:1fr; } }

/* trust belt */
.trust-rail{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 16px; }
.t-badge{
  background:var(--lav); color:var(--blue); border:1px solid rgba(59,91,167,.18);
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px;
}

/* chips under treatment select */
.quick-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.quick-chips button{
  border:1px solid #e6e6f0; background:#fff; padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600;
}
.quick-chips button:hover{ background:var(--lav); }

/* reassurance column */
.reassure{ display:flex; flex-direction:column; gap:12px; }
.r-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.r-card.doctor{ display:flex; gap:12px; align-items:center; }
.r-card.doctor img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }

.r-card.reviews .stars{ color:var(--turq); font-size:18px; margin-bottom:6px; }

/* FAQ */
.r-faq{ background:#fff; border:1px solid #eee; border-radius:12px; padding:10px 14px; }
.r-faq summary{ cursor:pointer; font-weight:700; }
.r-faq p{ margin:8px 0 0; }

/* subtle hover interaction on cards (trust cue) */
.r-card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(59,91,167,.18); border-color:rgba(59,91,167,.28); }
.form:hover{ transform:none; }

/* honeypot hidden */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
#countryField .other { margin-top: 6px; }
/* ===== Mobile header: burger + overlay menu (desktop unaffected) ===== */

/* Keep desktop behavior exactly the same */
.nav-links{ display:flex; align-items:center; gap:1px; flex:1; } /* desktop */

/* Burger icon (hidden on desktop) */
.burger{
  display:none; position:relative; width:42px; height:42px;
  border:0; background:transparent; cursor:pointer;
}
.burger span{
  position:absolute; left:10px; right:10px; height:2px;
  background:var(--text); border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Mobile layout only */
@media (max-width: 900px){
  /* Make header smaller on mobile */
  nav .container{ gap:8px; }
  nav .brand img{
    height:65px;                         /* smaller logo */
    transform: translateX(0) scale(1);   /* neutralize --logo-* on mobile */
  }

  .burger{ display:block; margin-left:auto; }

  /* Turn links into a full-screen slide-down panel */
  .nav-links{
    position:fixed; inset:0; z-index:60;
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    padding:88px 16px 24px;               /* space for header area */
    background:#ffffff;
    transform:translateY(-100%);          /* hidden by default */
    transition:transform .25s ease;
  }
  body.menu-open .nav-links{ transform:translateY(0); }

  .nav-links .spacer{ display:none; }     /* not needed on stacked menu */
  .nav-links .btn{ width:100%; }          /* full-width CTAs on mobile */
}

/* Prevent background scroll when the menu is open */
body.menu-open{ overflow:hidden; }
/* ===== Prices table: compact mobile layout (desktop unchanged) ===== */
@media (max-width: 700px){
  #prices .card{ overflow-x:auto; }
  #prices .table{ min-width:640px; } /* keeps a readable width; scrolls horizontally */
  #prices .table th, #prices .table td{ padding:10px; font-size:14px; }
}
/* --- Trust video: compact, premium look --- */
.trust-video-card{
  position: relative;
  max-width: 760px;                 /* <- smaller, attractive size */
  margin: 14px auto 10px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(15,23,42,.12);
  background:#000;
}
.trust-video{
  width:100%;
  aspect-ratio: 16 / 9;             /* responsive height */
  object-fit: cover;
  display:block;
  background:#000;
  border:0; outline:none;
}

/* Overlay play button (clickable) */
.v-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:12px;
  border:0; background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.45) 100%);
  cursor:pointer;
}
.v-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:#0f172a; font-size:22px; font-weight:800;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.v-cap{
  color:#fff; font-weight:700; font-size:12px;
  background:rgba(0,0,0,.55);
  padding:6px 10px; border-radius:10px;
}

/* Hide overlay when playing */
.trust-video-card.playing .v-overlay{ display:none; }

@media (max-width:900px){
  .trust-video-card{ max-width: 100%; border-radius: 16px; }
  .v-play{ width:56px; height:56px; font-size:20px; }
}
/* space around the tourism banner */
.hero-tourism {               /* the whole section */
  padding-block: 24px;        /* top + bottom gap (purple shows here) */
}

/* (optional) make the gap a bit larger on desktop */
@media (min-width: 1024px){
  .hero-tourism { padding-block: 28px; }

}
/* ===== QUALIFS (générique & rassurant) ===== */
.q3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
@media (max-width: 980px){ .q3{ grid-template-columns:1fr; } }

.qcard{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  position:relative;
}

.qcard h3{ margin:6px 0 8px; }
.qcard .list li+li{ margin-top:6px; }

.q-icon{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  color:#063b3f;
  background:linear-gradient(135deg, #EDE6F7, #dff7f9);
  box-shadow:0 8px 20px rgba(59,91,167,.10) inset;
}
.q-icon svg{ width:26px; height:26px; }

.q-stamps{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.stamp{
  background:#0f172a; color:#e5e7eb;
  padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:12px;
  box-shadow:0 8px 18px rgba(15,23,42,.18);
}
/* ===== QUALIFS cards — same visual system as TRUST cards ===== */
.qcard{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.95);
  border:1px solid #eee; border-radius:16px; padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* keep content above background layers */
.qcard > *{ position:relative; z-index:1 }

/* slideshow layers (injected by JS) */
.qcard .photo-slideshow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
}
.qcard .photo-slideshow .ph{
  position:absolute; inset:0; border-radius:inherit;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.06) brightness(1.03);
  opacity:0; transition:opacity .45s ease;
}
/* visibility of current image (same as TRUST) */
.qcard .photo-slideshow .ph.show{ opacity:.72; }

/* readability mask (same gradient as TRUST, no blur) */
.qcard .photo-slideshow::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.54) 52%,
    rgba(255,255,255,.10) 78%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* optional: ease the mask a bit more when “active” */
.qcard:hover .photo-slideshow::after,
.qcard.active .photo-slideshow::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.84) 0%,
    rgba(255,255,255,.44) 50%,
    rgba(255,255,255,.06) 76%,
    rgba(255,255,255,0) 100%);
}
/* WHY · slideshow layer (scoped so it won't affect TRUST) */
.why .point{ position:relative; overflow:hidden; }
.why .point > *{ position:relative; z-index:2; }           /* text above */

.why .point .photo-slideshow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:1;
  opacity:0;                               /* hidden when not hovered */
  transition:opacity .22s ease;
}
.why .point:hover .photo-slideshow,
.why .point:focus-within .photo-slideshow,
.why .point.active .photo-slideshow{ opacity:1; }

/* two cross-fading planes */
.why .point .photo-slideshow .ph{
  position:absolute; inset:0; border-radius:inherit;
  background:center/cover no-repeat;
  opacity:0; transition:opacity .38s ease;
  filter:saturate(1.06) contrast(1.06);
}
/* current image */
.why .point .photo-slideshow .ph.show{ opacity:.50; }      /* 0.45–0.58 to taste */

/* subtle readability film */
.why .point .photo-slideshow::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.60) 55%,
      rgba(255,255,255,.16) 85%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.14) 100%);

}
/* === RTL fixes === */
html[dir="rtl"] .section * { text-align: start; }      /* keep natural alignment */
html[dir="rtl"] .prices .table { direction: ltr; }     /* DO NOT reverse columns for the prices table */
html[dir="rtl"] .prices .table th,
html[dir="rtl"] .prices .table td { text-align: right; }

/* Keep numbers/currencies, phones, emails left-to-right even in RTL */
.ltr-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.trust-center-photos{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;
}
.trust-center-photos figure{ margin:0 }
.trust-center-photos img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.1)
}
.trust-center-photos figcaption{
  font-size:12px; color:#64748b; margin-top:6px;
}
@media (max-width:900px){
  .trust-center-photos{ grid-template-columns:1fr }
}
/* ==== Mobile layout polish for the quote page ==== */

/* Slightly tighter shell on small screens */
@media (max-width: 820px){
  .wrap{ margin:18px auto; }
}

/* Phones */
@media (max-width: 680px){
  /* 1) Form becomes single-column, comfy spacing */
  form{ grid-template-columns: 1fr; gap: 12px; }
  .form{ padding:14px; border-radius:14px; }

  /* Inputs feel bigger; avoid iOS zoom */
  input, select, textarea{ font-size:16px; }

  /* 2) Actions stacked, full-width */
  .actions{ flex-direction: column; align-items: stretch; gap:10px; }
  .actions .btn, .actions progress{ width:100%; }

  /* 3) Treatment cards: 2 columns on phones (then 1 on very small) */
  .treat-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .tcard .visual{ min-height:56px; padding:10px; }

  /* 4) Urgency chips: each on its own line, easy to tap */
  .seg{ gap:6px; }
  .seg label{ flex:1 1 100%; }           /* rows */
  .seg span{ width:100%; text-align:center; padding:10px 12px; }

  /* 5) Dropzone: stack help + button */
  .files .drop{ flex-direction: column; align-items: flex-start; gap:6px; }
  .files .drop .btn-mini{ width:100%; text-align:center; }
  .gallery img{ height:72px; }           /* slightly bigger thumbs */

  /* 6) Trust badges: horizontal scroll so they don’t wrap messily */
  .trust-rail{ overflow:auto; -webkit-overflow-scrolling:touch; gap:6px; padding-bottom:4px; }
  .t-badge{ padding:6px 10px; font-size:12px; white-space:nowrap; box-shadow:0 6px 18px rgba(15,23,42,.16); }

  /* 7) Reassurance column: no sticky on phones */
  .reassure{ position: static; }
  .r-card{ padding:12px; }

  /* 8) Header button a bit smaller on mobile */
  header nav .btn.btn-outline{ padding:8px 12px; }

  /* 9) Language FAB nudged inward a touch */
  #langFab{ right:12px; bottom:12px; }
}

/* Very small phones */
@media (max-width: 420px){
  .treat-grid{ grid-template-columns: 1fr; }  /* 1 column */
  .t-badge{ font-size:11px; padding:6px 9px; }
  label{ font-size:15px; }
}
/* --- Fix card overflow inside the form on phones --- */
@media (max-width: 680px){
  /* allow grid items to actually shrink inside the columns */
  .treat-grid > .tcard{ min-width: 0; }
  .tcard .visual{ min-width: 0; }

  /* let long labels break nicely instead of forcing width */
  .tcard .visual b{ overflow-wrap: anywhere; word-break: break-word; }

  /* tiny extra gutter + clip tile shadows so they don't look "outside" */
  .form{ padding-inline: 16px; }
  .treat-grid{ overflow: hidden; border-radius: 12px; padding: 2px; gap: 8px; }

  /* keep two columns on phones; drop to one on very small screens */
  .treat-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
  .treat-grid{ grid-template-columns: 1fr; }
}
/* --- Mobile: make treatment choices look like pill buttons --- */
@media (max-width: 540px){
  /* one column */
  .treat-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* pill look */
  .tcard .visual{
    border-radius: 999px;
    padding: 14px 16px;
    min-height: 58px;
    justify-content: flex-start;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e6e6f0;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
  }
  /* selected state */
  .tcard input:checked + .visual{
    background: var(--lav);           /* your light violet */
    border-color: var(--turq);
    box-shadow: 0 10px 26px rgba(90,195,204,.25);
    color: #0a2d30;
  }
  /* icon + label sizing */
  .ticon{ width: 24px; height: 24px; }
  .tcard .visual b{
    font-size: 17px;
    line-height: 1.2;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;  /* break only at spaces/hyphens */
    hyphens: auto;
  }
  /* allow content to shrink inside the pill */
  .treat-grid > .tcard, .tcard .visual{ min-width: 0; }
}

/* Small phones: slightly tighter */
@media (max-width: 360px){
  .tcard .visual{ padding: 12px 14px; min-height: 54px; }
  .tcard .visual b{ font-size: 16px; }
}
/* ===== Fix treatment cards on mobile ===== */
@media (max-width: 768px){
  /* 1 column, full-width pills */
  .treat-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .tcard, .tcard .visual{ min-width: 0; }
  .tcard .visual{
    border-radius: 999px;
    padding: 14px 16px;
    justify-content: flex-start;
    gap: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
  }

  /* stop ugly word splitting */
  .tcard .visual b{
    font-size: 17px;
    line-height: 1.25;
    white-space: nowrap;           /* keep on one line */
    word-break: keep-all;          /* do not split words */
    overflow-wrap: normal;         /* no forced wrapping */
    hyphens: none;                 /* disable auto-hyphenation */
    text-overflow: ellipsis;       /* safety if someone zooms a lot */
    overflow: hidden;
  }

  .ticon{ width: 24px; height: 24px; flex: 0 0 24px; }
}

/* Very small phones */
@media (max-width: 360px){
  .tcard .visual{ padding: 12px 14px; }
  .tcard .visual b{ font-size: 16px; }
}

/* Mobile: bump the logo size, bar stays the same height */
@media (max-width: 680px){
  header nav .brand img{
    height: 100px;                 /* try 42–48px; adjust to taste */
    width: auto;
    display: block;
  }
}