/* =====================================================================
   Dalia Beach — Luxury coastal editorial theme
   Palette: deep marine teal · warm sand · sunset gold · cream
   ===================================================================== */

:root {
  /* Brand colours */
  --sea-900: #0c2f3a;
  --sea-800: #103e4c;
  --sea-700: #14505f;
  --sea-600: #1d6478;
  --sea-400: #4f93a5;
  --foam:    #cfe4e6;

  --sand-50:  #faf5ec;
  --sand-100: #f3e9d6;
  --sand-200: #e9d8bb;
  --sand-300: #ddc59c;

  --gold-600: #b07d3c;
  --gold-500: #c89b55;
  --gold-400: #d9b36e;
  --gold-300: #e8cd95;

  --ink:      #15302f;
  --ink-soft: #3e524f;
  --cream:    #fbf7ef;
  --white:    #ffffff;

  /* Functional */
  --calm:     #3f9d6d;
  --moderate: #d8a13a;
  --rough:    #c0492f;

  /* Typography */
  --font-display: "Fraunces", "El Messiri", Georgia, serif;
  --font-body: "Outfit", "Tajawal", system-ui, sans-serif;
  --font-ar-display: "El Messiri", "Fraunces", serif;
  --font-ar-body: "Tajawal", "Outfit", sans-serif;
  --font-tifinagh: "Noto Sans Tifinagh", "Outfit", sans-serif;

  /* Layout */
  --container: 1240px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(12, 47, 58, 0.08);
  --shadow-md: 0 18px 50px -22px rgba(12, 47, 58, 0.45);
  --shadow-lg: 0 40px 90px -40px rgba(12, 47, 58, 0.6);
  --ring: 0 0 0 1px rgba(255, 255, 255, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 76px;

  /* Real hero photo. Drop the file at assets/img/dalia-hero.jpg and it shows
     automatically; until then the SVG illustration is used as a fallback. */
  --hero-image: url("../img/dalia-hero.jpg");
}

/* ---------- Language-aware typography ---------- */
html[dir="rtl"] { --font-display: var(--font-ar-display); --font-body: var(--font-ar-body); }
html[lang="zgh"] { --font-display: var(--font-tifinagh); --font-body: var(--font-tifinagh); }

/* Hide translatable text until the saved language is applied, so a
   non-Arabic visitor never sees the default Arabic flash on refresh.
   Layout space is kept (visibility, not display) to avoid any shift. */
html.lang-loading [data-i18n],
html.lang-loading .lang__current { visibility: hidden; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--db-text, var(--ink));
  background: var(--db-bg, var(--cream));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* Grain/texture overlay for the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), height 0.4s var(--ease);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav.is-scrolled {
  height: 64px;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(12, 47, 58, 0.08), 0 14px 40px -28px rgba(12, 47, 58, 0.5);
}

/* Brand mark */
/* flex:none → le logo ne se laisse pas comprimer par des libellés de
   navigation plus longs (FR/ES), sinon « Dalia Beach » passait sur 2 lignes
   et la barre perdait son alignement. */
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--sea-600), var(--sea-800));
  color: var(--gold-300);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.12);
  flex: none;
}
.brand__mark svg { width: 22px; height: 22px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.brand__sub {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sea-600);
  font-family: var(--font-body);
  white-space: nowrap;
}
.nav:not(.is-scrolled) .brand__name { color: var(--white); }
.nav:not(.is-scrolled) .brand__sub { color: var(--gold-300); }

.brand__text { display: flex; flex-direction: column; gap: 3px; }

/* Nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.15vw, 18px);
}
.nav__link {
  position: relative;
  /* Les libellés longs (FR/ES/Tifinagh) passaient sur deux lignes : on force
     une seule ligne et la taille s'adapte à la largeur disponible. */
  white-space: nowrap;
  font-size: clamp(0.8rem, 0.92vw, 0.95rem);
  font-weight: 500;
  padding: 8px 2px;
  color: var(--white);
  transition: color 0.3s var(--ease);
}
.nav.is-scrolled .nav__link { color: var(--ink-soft); }
.nav__link::after {
  content: "";
  position: absolute;
  bottom: 0; inset-inline: 4px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform 0.35s var(--ease);
}
html[dir="rtl"] .nav__link::after { --origin: right; }
.nav__link:hover { color: var(--gold-400); }
.nav.is-scrolled .nav__link:hover { color: var(--gold-600); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 14px; }

/* Location shortcut button (next to the language switcher) */
.nav__loc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 999px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav.is-scrolled .nav__loc {
  color: var(--ink);
  background: rgba(12, 47, 58, 0.05);
  border-color: rgba(12, 47, 58, 0.14);
}
.nav__loc:hover { border-color: var(--gold-400); transform: translateY(-1px); }
.nav__loc-ic { width: 19px; height: 19px; display: block; }
.nav__loc-ic svg { width: 100%; height: 100%; }

/* =====================================================================
   LANGUAGE SWITCHER
   ===================================================================== */
.lang { position: relative; }
.lang__toggle {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav.is-scrolled .lang__toggle {
  color: var(--ink);
  background: rgba(12, 47, 58, 0.05);
  border-color: rgba(12, 47, 58, 0.14);
}
.lang__toggle:hover { border-color: var(--gold-400); }
.lang__globe { width: 17px; height: 17px; flex: none; }
.lang__current { letter-spacing: 0.01em; }
.lang__chev { width: 12px; height: 12px; transition: transform 0.35s var(--ease); flex: none; opacity: 0.8; }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  min-width: 210px;
  padding: 8px;
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(12, 47, 58, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top var(--inline-end, right);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 20;
}
html[dir="rtl"] .lang__menu { --inline-end: left; }
.lang.is-open .lang__menu {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}
.lang__option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 0.94rem;
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  text-align: start;
}
.lang__option:hover { background: rgba(20, 80, 95, 0.08); }
.lang__option.is-active { background: linear-gradient(120deg, var(--sea-700), var(--sea-600)); color: var(--white); }
.lang__opt-code {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(20, 80, 95, 0.1);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sea-700);
}
.lang__option.is-active .lang__opt-code { background: rgba(255,255,255,0.18); color: var(--gold-300); }
.lang__opt-name { font-weight: 500; }

/* Hamburger (mobile) */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.26);
}
.nav.is-scrolled .nav__burger { background: rgba(12,47,58,0.05); border-color: rgba(12,47,58,0.14); }
.nav__burger span {
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav.is-scrolled .nav__burger span { background: var(--ink); }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* Le fond est agrandi (scale 1.06) : on le découpe ici plutôt que de
     compter sur overflow-x:hidden du body. */
  overflow: hidden;
  color: var(--white);
  padding-top: var(--nav-h);
  /* Sky gradient sits behind the photo (shows if the photo is absent) */
  background: linear-gradient(180deg, var(--db-sky-top), var(--db-sky-bottom));
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  /* Photo layer first; if it 404s, the SVG illustration underneath shows. */
  background-image: var(--hero-image), url("../img/hero-dalia.svg");
  background-size: cover, cover;
  background-position: center 42%, center 40%;
  background-repeat: no-repeat, no-repeat;
  transform: scale(1.06);
  animation: heroZoom 22s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(var(--db-overlay, transparent), var(--db-overlay, transparent)),
    radial-gradient(120% 80% at 50% 0%, rgba(12,47,58,0.05), transparent 55%),
    linear-gradient(to bottom, rgba(12,47,58,0.42) 0%, rgba(12,47,58,0.12) 30%, rgba(12,47,58,0.30) 62%, rgba(8,33,42,0.78) 100%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 40% at 50% 30%, rgba(232, 205, 149, 0.22), transparent 70%);
  pointer-events: none;
}

/* Top info bar: weather + sea state */
.coastbar {
  margin-top: clamp(8px, 1.6vh, 24px);
  display: flex;
  justify-content: center;
}
.panel {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.panel__cell { background: rgba(10, 40, 50, 0.34); padding: clamp(12px, 1.7vw, 19px); }

.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.panel__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-300);
}
.panel__title svg { width: 16px; height: 16px; }
.panel__note { font-size: 0.7rem; color: rgba(255,255,255,0.6); }
.panel__note--live { color: rgba(255,255,255,0.82); display: inline-flex; align-items: center; gap: 6px; }
.panel__note--live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* Weather */
.wx { display: flex; align-items: stretch; gap: clamp(14px, 2vw, 26px); }
.wx__now { display: flex; align-items: center; gap: 14px; flex: none; }
.wx__icon { width: 50px; height: 50px; color: var(--gold-300); flex: none; }
.wx__temp { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.wx__temp sup { font-size: 1.1rem; vertical-align: super; opacity: 0.8; }
.wx__meta { font-size: 0.78rem; color: rgba(255,255,255,0.75); display: grid; gap: 2px; margin-top: 6px; }
.wx__divider { width: 1px; background: rgba(255,255,255,0.16); flex: none; }
.wx__forecast {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  flex: 1;
}
.wx__day {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.wx__day:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* Detailed conditions grid (sunrise, sunset, rain, humidity, waves, UV…) */
.wx__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-top: clamp(8px, 1.2vh, 16px);
}
.wx__details:empty { display: none; }
.wx__detail {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.wx__detail svg { width: 18px; height: 18px; color: var(--gold-300); flex: none; }
.wx__detail-txt { display: grid; gap: 1px; min-width: 0; }
.wx__detail-k { font-size: 0.64rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); white-space: nowrap; }
.wx__detail-v { font-size: 0.9rem; font-weight: 600; line-height: 1.1; }
.wx__day-name { font-size: 0.72rem; color: rgba(255,255,255,0.7); }
.wx__day svg { width: 24px; height: 24px; color: var(--foam); }
.wx__day-temp { font-size: 0.78rem; font-weight: 600; }
.wx__day-temp span { opacity: 0.55; font-weight: 400; }

/* Sea state */
.sea { display: flex; flex-direction: column; }
.sea__body { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.sea__flag {
  position: relative;
  width: 46px; height: 58px; flex: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}
.sea__pole { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: linear-gradient(var(--white), #b9c4c4); }
.sea__cloth {
  position: absolute; inset-inline-start: 3px; top: 2px;
  width: 40px; height: 28px;
  background: var(--calm);
  border-radius: 2px 8px 8px 2px;
  transform-origin: left center;
  animation: flagWave 2.4s ease-in-out infinite;
  box-shadow: inset -8px 0 14px -8px rgba(0,0,0,0.35);
  overflow: hidden;
  will-change: transform;
}
/* Moving cloth folds — a travelling sheen that sells the flutter */
.sea__cloth::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    100deg,
    rgba(255,255,255,0.22) 0 5px,
    rgba(0,0,0,0.12) 5px 11px
  );
  mix-blend-mode: soft-light;
  opacity: 0.7;
  animation: flagFolds 2.4s linear infinite;
}
html[dir="rtl"] .sea__cloth { border-radius: 8px 2px 2px 8px; transform-origin: right center; }
@keyframes flagWave {
  0%   { transform: skewY(0deg)  rotate(0deg)    scaleX(1);    }
  20%  { transform: skewY(-7deg) rotate(-1.2deg) scaleX(0.97); }
  40%  { transform: skewY(4deg)  rotate(0.8deg)  scaleX(0.99); }
  60%  { transform: skewY(-5deg) rotate(-0.8deg) scaleX(0.97); }
  80%  { transform: skewY(3deg)  rotate(0.6deg)  scaleX(0.99); }
  100% { transform: skewY(0deg)  rotate(0deg)    scaleX(1);    }
}
@keyframes flagFolds {
  from { background-position: 0 0; }
  to   { background-position: 22px 0; }
}
.sea[data-state="calm"] .sea__cloth { background: var(--calm); }
.sea[data-state="moderate"] .sea__cloth { background: var(--moderate); }
.sea[data-state="rough"] .sea__cloth { background: var(--rough); }

.sea__label { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.sea__legend { display: flex; gap: 12px; margin-top: 12px; }
.sea__chip { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: rgba(255,255,255,0.72); }
.sea__dot { width: 9px; height: 9px; border-radius: 50%; }
.sea__chip[data-s="calm"] .sea__dot { background: var(--calm); }
.sea__chip[data-s="moderate"] .sea__dot { background: var(--moderate); }
.sea__chip[data-s="rough"] .sea__dot { background: var(--rough); }
.sea__chip.is-active { color: var(--white); font-weight: 600; }

/* Hero centre content */
.hero__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Rythme vertical proportionnel à la HAUTEUR de l'écran, pour que le
     bouton principal reste visible dans le hero même sur écran court. */
  padding: clamp(16px, 2.6vh, 48px) 0 clamp(14px, 2.2vh, 36px);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-300);
  padding: 8px 18px;
  border: 1px solid rgba(232, 205, 149, 0.35);
  border-radius: 999px;
  background: rgba(12,47,58,0.2);
  backdrop-filter: blur(6px);
}
.hero__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(217,179,110,0.25); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.94;
  margin-top: clamp(10px, 1.4vh, 20px);
  /* La taille suit aussi la hauteur (min) : un titre géant sur écran court
     poussait le bouton hors de vue. */
  font-size: clamp(2.6rem, min(9vw, 10.5vh), 7.2rem);
  text-shadow: 0 24px 60px rgba(8, 33, 42, 0.5);
}
.hero__title-latin {
  display: block;
  background: linear-gradient(180deg, #fff 0%, #ffeccb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title-ar {
  display: block;
  font-family: var(--font-ar-display);
  font-size: 0.46em;
  font-weight: 600;
  color: var(--foam);
  margin-top: 0.18em;
  letter-spacing: 0;
}
.hero__tagline {
  max-width: 720px;
  margin: clamp(12px, 1.6vh, 24px) auto 0;
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; margin-top: clamp(12px, 1.8vh, 26px); }

/* Primary CTA */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 1rem;
  padding: 16px 30px;
  border-radius: 999px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn--primary {
  color: var(--sea-900);
  background: linear-gradient(110deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 16px 40px -14px rgba(200, 155, 85, 0.7), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 24px 56px -16px rgba(200, 155, 85, 0.85), inset 0 0 0 1px rgba(255,255,255,0.5); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn__arrow { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
html[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn--primary:hover .btn__arrow { transform: translateX(4px); }
html[dir="rtl"] .btn--primary:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

.hero__scroll {
  margin-top: clamp(10px, 1.6vh, 24px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hero__scroll-line { width: 1px; height: clamp(22px, 3vh, 40px); background: linear-gradient(rgba(255,255,255,0.6), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content:""; position:absolute; top:0; left:0; right:0; height: 12px; background: var(--gold-300); animation: scrollDot 2.2s var(--ease) infinite; }

/* Écrans courts (portables 768–820px) : on resserre encore un peu pour que
   le bouton principal garde une vraie marge sous lui. */
@media (max-height: 820px) {
  .hero__main { padding: clamp(10px, 1.6vh, 26px) 0 clamp(10px, 1.4vh, 22px); }
  .hero__title { font-size: clamp(2.4rem, min(8.4vw, 9.4vh), 6rem); }
  .panel__cell { padding: clamp(10px, 1.4vw, 15px); }
  .wx__detail { padding: 6px 9px; }
}
@keyframes scrollDot { 0%{ transform: translateY(-14px); opacity:0;} 40%{opacity:1;} 100%{ transform: translateY(42px); opacity:0;} }

/* =====================================================================
   TRUST / CERTIFICATION BLOCK
   ===================================================================== */
.trust {
  position: relative;
  margin-top: -1px;
  background: linear-gradient(180deg, var(--sea-900), var(--sea-800));
  color: var(--white);
  padding: clamp(46px, 7vw, 84px) 0;
}
.trust__inner { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr 1.15fr; align-items: center; }
.trust__head .kicker { color: var(--gold-300); }
.trust__title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.15; margin-top: 12px; }
.trust__sub { margin-top: 16px; color: rgba(255,255,255,0.75); max-width: 46ch; }

.trust__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.badge {
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 26px 24px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-md);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.badge:hover { transform: translateY(-6px); border-color: rgba(232,205,149,0.5); box-shadow: var(--shadow-lg); }
.badge__logo {
  height: 84px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #ffffff;
  color: var(--sea-700);
  position: relative;
  overflow: hidden;
}
.badge__logo::after {
  content: attr(data-placeholder);
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(20,80,95,0.5);
  position: absolute; bottom: 8px;
}
.badge__logo svg { width: 56px; height: 56px; margin-bottom: 12px; }
.badge__logo img { width: auto; height: 64px; max-width: 90%; object-fit: contain; }
.badge__name { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.badge__cta { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--gold-300); font-weight: 500; }
.badge__cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
html[dir="rtl"] .badge__cta svg { transform: scaleX(-1); }
.badge:hover .badge__cta svg { transform: translateX(3px); }
html[dir="rtl"] .badge:hover .badge__cta svg { transform: scaleX(-1) translateX(3px); }

/* =====================================================================
   CONTENT SECTIONS
   ===================================================================== */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--db-accent, var(--gold-600));
}
.kicker::before { content: ""; width: 26px; height: 1.5px; background: var(--gold-500); }

.section { padding: clamp(64px, 10vw, 130px) 0; position: relative; }
.section--beach { background: var(--db-bg, var(--cream)); }
.section--partners { background: var(--db-bg, var(--sand-100)); }

/* Partner cards (migrated content) */
/* 4 partenaires : paliers explicites (4 / 2×2 / 1) pour qu'aucune carte ne
   se retrouve seule sur une ligne, contrairement à un auto-fit. */
.partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 1180px;
  margin-inline: auto;
}
@media (min-width: 620px)  { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .partners-grid { grid-template-columns: repeat(4, 1fr); } }
.partner-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px;
  padding: 32px 24px 26px;
  border-radius: var(--radius);
  background: var(--db-surface, var(--white));
  border: 1px solid rgba(12,47,58,0.10);
  box-shadow: var(--shadow-sm);
  color: var(--db-text, var(--ink));
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(232,205,149,0.55); }
.partner-card__logo { height: 84px; display: grid; place-items: center; margin-bottom: 4px; }
.partner-card__logo img { max-height: 84px; max-width: 150px; width: auto; object-fit: contain; }
/* Slightly larger logo for El Sahil so it reads clearly */
.partner-card__logo--lg { height: 104px; }
.partner-card__logo--lg img { max-height: 104px; max-width: 180px; }
/* Blason vertical (Province Fahs-Anjra) : plus haut, sinon il paraît minuscule
   à côté des logos horizontaux. */
.partner-card__logo--tall { height: 132px; }
.partner-card__logo--tall img { max-height: 132px; max-width: 120px; }
.partner-card__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.partner-card__desc { font-size: 0.9rem; line-height: 1.6; color: var(--db-text-soft, var(--ink-soft)); max-width: 32ch; }
.partner-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 0.84rem; font-weight: 600; color: var(--db-accent, var(--sea-700)); }
.partner-card__cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
html[dir="rtl"] .partner-card__cta svg { transform: scaleX(-1); }
.partner-card:hover .partner-card__cta svg { transform: translateX(3px); }
html[dir="rtl"] .partner-card:hover .partner-card__cta svg { transform: scaleX(-1) translateX(3px); }
.section--news { background: var(--db-bg, var(--cream)); }
.section--activities { background: var(--db-bg, var(--sand-100)); }
.section--visitors { background: var(--db-bg, var(--cream)); }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
.feature--reverse .feature__visual { order: -1; }
.feature__title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; margin-top: 16px; color: var(--db-text, var(--ink)); }
.feature__body { margin-top: 18px; font-size: 1.06rem; color: var(--db-text-soft, var(--ink-soft)); max-width: 52ch; }
.feature__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font-weight: 600; color: var(--db-accent, var(--sea-700)); }
.feature__link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
html[dir="rtl"] .feature__link svg { transform: scaleX(-1); }
.feature__link:hover svg { transform: translateX(4px); }
html[dir="rtl"] .feature__link:hover svg { transform: scaleX(-1) translateX(4px); }
.feature__link { position: relative; }
.feature__link::after { content:""; position:absolute; bottom:-3px; inset-inline:0; height:1.5px; background: var(--gold-500); transform: scaleX(0); transform-origin: var(--origin,left); transition: transform 0.35s var(--ease); }
html[dir="rtl"] .feature__link::after { --origin: right; }
.feature__link:hover::after { transform: scaleX(1); }

/* Long beach body: keep the paragraph break from the i18n string */
.feature__body--long { white-space: pre-line; }
/* Rotate the "learn more" arrow when the details panel is open */
.feature__link .feature__link-ic { transition: transform 0.35s var(--ease); }
.feature__link.is-open .feature__link-ic { transform: rotate(90deg); }

/* ===================================================================
   BEACH DETAILS (revealed by "اعرف المزيد")
   =================================================================== */
.beach-details { background: var(--db-bg, var(--cream)); border-top: 1px solid rgba(12,47,58,0.08); }
.beach-details[hidden] { display: none; }
.bd-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(32px, 5vw, 56px); }
.bd-head .kicker { justify-content: center; color: var(--db-accent, var(--gold-600)); }
.bd-heading { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.15; margin-top: 12px; color: var(--db-text, var(--ink)); }

.bd-block { max-width: 1000px; margin-inline: auto; margin-top: clamp(34px, 5vw, 60px); }
.bd-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; line-height: 1.2;
  color: var(--db-text, var(--ink));
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 2px solid var(--db-accent, var(--gold-500));
  display: inline-block;
}
.bd-lead { color: var(--db-text-soft, var(--ink-soft)); font-size: 1.05rem; margin-bottom: 24px; max-width: 70ch; }
.bd-block > p { color: var(--db-text-soft, var(--ink-soft)); font-size: 1.02rem; line-height: 1.85; max-width: 74ch; }
.bd-block > p + p { margin-top: 16px; }

.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 8px; }
.bd-item {
  background: var(--db-surface, var(--white));
  border: 1px solid rgba(12,47,58,0.08);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-sm);
}
.bd-item h4 {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  color: var(--db-text, var(--ink)); margin-bottom: 10px;
  padding-inline-start: 12px; position: relative;
}
.bd-item h4::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px; background: var(--db-accent, var(--gold-500));
}
.bd-item p { color: var(--db-text-soft, var(--ink-soft)); font-size: 0.95rem; line-height: 1.8; }

.bd-location { text-align: center; margin-top: clamp(40px, 6vw, 68px); }
/* Embedded Google Map */
.bd-map {
  max-width: 900px;
  margin: 0 auto clamp(20px, 3vw, 28px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(12,47,58,0.12);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: rgba(12,47,58,0.06);
}
.bd-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) { .bd-map { aspect-ratio: 4 / 3; } }
.bd-location .btn--primary { display: inline-flex; align-items: center; gap: 10px; }
.bd-location__btn { margin-top: 4px; }
.bd-location .btn__arrow { transform: none !important; }
.bd-location__note { margin-top: 12px; font-size: 0.85rem; color: var(--db-text-soft, var(--ink-soft)); font-style: italic; }
/* Trafic routier en direct (Waze), sous le code QR */
.bd-traffic { margin-top: clamp(30px, 5vw, 52px); }
.bd-traffic__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.25;
  color: var(--db-text, var(--ink));
  margin-bottom: clamp(12px, 2vw, 18px);
}
.bd-traffic__map {
  height: 450px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--db-surface, var(--white));
}
.bd-traffic__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.bd-traffic .bd-location__note { margin-top: 12px; }
@media (max-width: 560px) { .bd-traffic__map { height: 340px; } }

/* Code QR sous la carte */
.bd-qr { margin-top: clamp(18px, 3vw, 30px); display: flex; justify-content: center; }
.bd-qr img {
  width: clamp(180px, 28vw, 260px);
  height: auto;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  box-shadow: var(--shadow-sm);
}

.feature__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(12,47,58,0.08);
}
.feature__visual img, .feature__visual svg { width: 100%; height: 100%; object-fit: cover; }
/* Portrait (vertical) beach image: the frame matches the image ratio so the
   whole poster is shown without cropping. Its exact ratio is set inline by JS
   (renderBeachImage). Capped + centred so it doesn't tower over the text. */
.feature__visual--portrait { max-width: 400px; margin-inline: auto; }
.feature__visual::after { content:""; position:absolute; inset:0; background: linear-gradient(var(--db-overlay, transparent), var(--db-overlay, transparent)), linear-gradient(180deg, transparent 55%, rgba(12,47,58,0.28)); }
.feature__tag {
  position: absolute; inset-inline-start: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(12,47,58,0.5); backdrop-filter: blur(8px);
  color: var(--white); font-size: 0.8rem; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.2);
}

/* =====================================================================
   BEACH SECTION IMAGE — follows the poster model:
   large (fills the column), clear (no dark veil), sharp (square) corners,
   and no text badge on the image.
   ===================================================================== */
#beach .feature__visual {
  border-radius: 0;          /* coins pointus (carrés) */
  border: none;
}
#beach .feature__visual--portrait { max-width: none; margin-inline: 0; }  /* grande */
#beach .feature__visual::after { content: none; }   /* image claire, sans voile sombre */
#beach .feature__tag { display: none; }              /* enlève le texte posé sur l'image */

/* =====================================================================
   SANTÉ & PROPRETÉ — cartes informatives (baignade)
   ===================================================================== */
.feature__title--sm { font-size: clamp(1.4rem, 3vw, 2.05rem); }
/* Infographie « horaires » : image claire, sans voile sombre. */
#news .feature__visual::after { content: none; }
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: clamp(28px, 5vw, 48px);
}
.health-card {
  background: var(--db-surface, var(--white));
  border: 1px solid rgba(12,47,58,0.08);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}
.health-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
  background: rgba(31,143,176,0.12);
  background: color-mix(in srgb, var(--db-accent, var(--sea-700)) 14%, transparent);
  color: var(--db-accent, var(--sea-700));
}
.health-card__icon svg { width: 23px; height: 23px; }
.health-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.28rem; line-height: 1.2; color: var(--db-text, var(--ink));
}
.health-card p {
  margin-top: 11px; font-size: 1rem; line-height: 1.65;
  color: var(--db-text-soft, var(--ink-soft));
}
/* Tip cards use h4 for their title (the group heading is the h3). */
.health-card h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.18rem; line-height: 1.25; color: var(--db-text, var(--ink));
}

/* Groupes de conseils (propreté / santé) */
.tips { margin-top: clamp(38px, 6vw, 66px); }
.tips__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15;
  color: var(--db-text, var(--ink));
}
.tips__lead {
  margin-top: 10px; max-width: 62ch; font-size: 1.04rem;
  color: var(--db-text-soft, var(--ink-soft));
}
.tips .health-grid { margin-top: clamp(20px, 3vw, 30px); }

/* =====================================================================
   ACTIVITÉS & ÉQUIPEMENTS — planning + contenus embarqués (FB / YouTube)
   ===================================================================== */
.planning { margin-top: clamp(34px, 5vw, 56px); }
.planning__wrap { margin-top: clamp(16px, 2.5vw, 24px); overflow-x: auto; }
.planning__table {
  width: 100%; border-collapse: collapse;
  background: var(--db-surface, var(--white));
  border: 1px solid rgba(12,47,58,0.08);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.planning__table th, .planning__table td {
  padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2vw, 22px);
  text-align: start; vertical-align: top; font-size: 1rem;
  border-bottom: 1px solid rgba(12,47,58,0.07);
}
.planning__table tr:last-child th, .planning__table tr:last-child td { border-bottom: 0; }
.planning__table th {
  white-space: nowrap; font-weight: 600;
  font-family: var(--font-display);
  color: var(--db-accent, var(--sea-700));
  background: rgba(31,143,176,0.05);
}
.planning__table td { color: var(--db-text-soft, var(--ink-soft)); }
.planning__note {
  margin-top: 12px; font-size: 0.85rem; font-style: italic;
  color: var(--db-text-soft, var(--ink-soft));
}

/* Blocs de contenu détaillé redistribués depuis l'onglet « La plage ». */
.bd-themed:empty { display: none; }
.bd-themed { margin-top: clamp(34px, 5vw, 58px); }
.bd-themed .bd-block + .bd-block { margin-top: clamp(28px, 4vw, 44px); }

/* =====================================================================
   FORMULAIRE DE CONTACT (Espace visiteurs)
   ===================================================================== */
/* Espace visiteurs : présentation à gauche, formulaire à droite */
.visitors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: start;
}
@media (max-width: 900px) { .visitors-grid { grid-template-columns: 1fr; } }
.visitors-grid .feature__link { margin-top: 26px; }
/* Dans la grille, la carte du formulaire n'a plus besoin de marge haute */
.visitors-grid .contact-block { margin-top: 0; max-width: none; }

.contact-block {
  margin-top: clamp(38px, 6vw, 66px);
  max-width: 780px;
  background: var(--db-surface, var(--white));
  border: 1px solid rgba(12,47,58,0.08);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--shadow-sm);
}
.cform { margin-top: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 20px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .cform__row { grid-template-columns: 1fr; } }
.cform__field { display: flex; flex-direction: column; gap: 8px; }
.cform__field label {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--db-text-soft, var(--ink-soft));
}
.cform__field input,
.cform__field select,
.cform__field textarea {
  width: 100%;
  font: inherit; font-size: 0.98rem;
  color: var(--db-text, var(--ink));
  background: var(--db-bg, var(--cream));
  border: 1px solid rgba(12,47,58,0.16);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cform__field textarea { resize: vertical; min-height: 120px; }
.cform__field input:focus,
.cform__field select:focus,
.cform__field textarea:focus {
  outline: none;
  border-color: var(--db-accent, var(--sea-600));
  box-shadow: 0 0 0 3px rgba(31,143,176,0.16);
}
.cform__field input.is-invalid,
.cform__field textarea.is-invalid { border-color: var(--rough); background: rgba(192,73,47,0.05); }
.cform__field ::placeholder { color: var(--db-text-soft, var(--ink-soft)); opacity: 0.6; }
/* Bouton pleine largeur, comme sur le modèle fourni */
.cform__submit {
  width: 100%; justify-content: center;
  margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase;
}
.cform__feedback:empty { display: none; }
.cform__feedback { font-size: 0.92rem; font-weight: 500; }
.cform__feedback.is-error { color: var(--rough); }
.cform__feedback.is-ok { color: var(--calm); }
.cform__legal { font-size: 0.82rem; font-style: italic; color: var(--db-text-soft, var(--ink-soft)); }

.embed-block { margin-top: clamp(38px, 6vw, 66px); }
.embed-block .tips__lead { margin-bottom: clamp(16px, 2.5vw, 24px); }
/* Titre de la vidéo « Équipements » : espacé du texte d'introduction */
.equip-video-title { margin-top: clamp(24px, 4vw, 40px); }
/* Vidéo YouTube : ratio 16/9 fluide */
.video-embed {
  margin-top: clamp(16px, 2.5vw, 24px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Flux Facebook : hauteur fixe, largeur fluide, centré */
.fb-embed {
  margin-top: clamp(16px, 2.5vw, 24px);
  display: flex; justify-content: center;
}
/* Taille native du plugin Facebook (500px de large max, imposé par Facebook).
   Pas de mise à l'échelle : le rendu reste net et de taille normale. */
.fb-embed iframe {
  width: 100%; max-width: 500px; height: 640px;
  border: 0; display: block;
  border-radius: var(--radius);
  background: var(--db-surface, var(--white));
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .fb-embed iframe { height: 560px; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: linear-gradient(180deg, var(--sea-800), var(--sea-900));
  color: rgba(255,255,255,0.8);
  padding: clamp(50px, 7vw, 80px) 0 36px;
}
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer__tagline { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--white); max-width: 22ch; line-height: 1.25; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer__nav a { font-size: 0.95rem; transition: color 0.3s var(--ease); }
.footer__nav a:hover { color: var(--gold-300); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 28px; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer__bottom .brand__name { color: var(--white); }

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }

/* Hero load stagger */
.hero__main > * { opacity: 0; transform: translateY(24px); animation: heroIn 1s var(--ease) forwards; }
.hero__eyebrow { animation-delay: 0.25s; }
.hero__title { animation-delay: 0.4s; }
.hero__tagline { animation-delay: 0.6s; }
.hero__scroll { animation-delay: 0.78s; }
.hero__actions { animation-delay: 0.95s; }
.coastbar { opacity: 0; transform: translateY(-16px); animation: heroIn 1s var(--ease) 0.15s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero__bg { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .panel { grid-template-columns: 1fr; max-width: 600px; }
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__visual { order: 0; }
  .feature__visual { aspect-ratio: 16 / 10; }
  .trust__inner { grid-template-columns: 1fr; }
}

/* Seuil relevé de 860 → 1039px : entre les deux, les libellés longs (FR/ES)
   ne tiennent plus sur une ligne à côté du logo et des raccourcis. En dessous
   de 1040px on passe donc au menu déroulant. */
@media (max-width: 959px) {
  .nav__burger { display: flex; }

  /* CRITIQUE : `backdrop-filter` sur .nav en fait le référentiel des enfants
     en position:fixed. Le panneau du menu se retrouvait alors enfermé dans la
     barre (140px de haut) au lieu de couvrir l'écran → menu invisible dès que
     l'on avait fait défiler la page. On le remplace par un fond opaque. */
  .nav.is-scrolled {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Panneau de navigation mobile. (Il dépendait d'une classe `is-mobile`
     que le JS n'ajoutait jamais : le menu ne s'ouvrait donc pas.) */
  .nav__links {
    display: flex;
    position: fixed;
    inset: 0;
    top: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 100px 32px 40px;
    background: linear-gradient(160deg, var(--sea-800), var(--sea-900));
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0s 0.5s;
    z-index: 90;
    overflow-y: auto;
  }
  html[dir="rtl"] .nav__links { transform: translateX(-100%); }
  body.menu-open .nav__links {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s var(--ease), visibility 0s 0s;
  }
  .nav__links .nav__link {
    color: var(--white) !important;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 5.5vw, 1.7rem);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
  }
  .nav__links .nav__link::after { display: none; }
  /* Le panneau est un descendant de .nav : sans cela, son z-index le place
     AU-DESSUS du bouton menu et on ne peut plus refermer. */
  .brand, .nav__right { position: relative; z-index: 95; }
  /* Empêche le défilement de la page derrière le menu ouvert */
  body.menu-open { overflow: hidden; }
}

/* Petits écrans : le nom complet de la langue faisait déborder la barre et
   coupait le bouton menu. On ne garde que le globe + la flèche. */
/* Sous 1100px, la barre manque de place (libellés FR/ES longs + 3 raccourcis).
   On n'affiche que le globe du sélecteur de langue et on resserre les marges,
   pour que tout reste sur UNE seule ligne. */
@media (max-width: 1100px) {
  .lang__current { display: none; }
  .nav__inner { padding-inline: clamp(16px, 2.4vw, 30px); }
  .nav__right { gap: 8px; }
  .nav__links { gap: 7px; }
  .nav__loc { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------------
   TÉLÉPHONES (≤600px) — la barre doit TOUJOURS tenir sur une ligne, sinon
   le bouton menu sort de l'écran et la navigation devient impossible.
   Le logo garde sa marque seule (le nom reste visible dans le héros) et
   les commandes sont compactées : tout tient dès 320px.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  .brand__text { display: none; }          /* garde le pictogramme du logo */
  .nav__inner { padding-inline: 12px; gap: 10px; }
  .nav__right { gap: 6px; }
  .nav__loc { width: 34px; height: 34px; }
  .nav__loc-ic { width: 16px; height: 16px; }
  .nav__burger { width: 40px; height: 40px; }
  .lang__toggle { padding: 8px 10px; }

  /* Zones tactiles : au moins ~44px de haut pour être confortables au doigt. */
  .feature__link { padding-block: 10px; }
  .footer__nav a { display: inline-block; padding-block: 10px; }
  .badge__cta, .partner-card__cta { padding-block: 6px; }

  /* 16px minimum : en dessous, iOS Safari zoome tout seul dès qu'on touche
     un champ, ce qui casse la mise en page. */
  .cform__field input,
  .cform__field select,
  .cform__field textarea { font-size: 16px; }
}

/* Écrans très étroits (≤360px) : on resserre encore d'un cran. */
@media (max-width: 360px) {
  .nav__loc { width: 30px; height: 30px; }
  .nav__loc-ic { width: 14px; height: 14px; }
  .nav__right { gap: 4px; }
}

@media (max-width: 560px) {
  .wx { flex-direction: column; gap: 16px; }
  .wx__divider { width: 100%; height: 1px; }
  .wx__now { justify-content: center; }
  .sea__legend { flex-wrap: wrap; }
  .trust__badges { grid-template-columns: 1fr; }
  .hero__title-ar { font-size: 0.54em; }
  .btn { width: 100%; justify-content: center; }
  .footer__top { flex-direction: column; align-items: flex-start; }
}