/* ==========================================================================
   Nine Casino en ligne FR – shared stylesheet (ninecasinoenligne-fr.com)
   --------------------------------------------------------------------------
   Theme: "Marseille, plein soleil" – white limestone of the Calanques,
   Marseille sky blue, calanque turquoise, terracotta "tomettes", Provençal
   sun and cement-tile ("carreaux de ciment") patterns, a "pointu" sailing
   boat in the logo. Mobile-first, no frameworks, all colours as tokens.

   Table of contents
   00. Fonts
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout helpers & icons
   05. Buttons & badges
   06. Header & desktop navigation
   07. Mobile menu
   08. Author bar
   09. Hero & boarding-pass card
   10. Stats strip & section nav
   11. Sections, sub-blocks & prose
   12. Tables
   13. Lists
   14. CTA band
   15. FAQ
   16. Legal pages
   17. Footer & responsible gambling
   18. Motion & accessibility preferences
   ========================================================================== */


/* 00. Fonts – DM Serif Display (headings) + Figtree (body & UI), Google
   Fonts, self-hosted: no visitor data is sent to Google (SIL Open Font License)
   ========================================================================== */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dmserif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dmserif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dmserif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dmserif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 01. Design tokens
   ========================================================================== */
:root {
  /* Limestone & paper */
  --c-bg:          #f6f0e4;
  --c-bg-2:        #efe5d2;
  --c-surface:     #fffdf8;
  --c-surface-2:   #faf5ea;
  --c-line:        #e2d6c0;
  --c-line-2:      #cdbd9f;

  /* Text */
  --c-text:        #14283b;
  --c-text-muted:  #475768;   /* ≥ 7:1 on --c-bg */
  --c-text-dim:    #63707c;   /* ≥ 4.5:1 on --c-bg */

  /* Marseille navy (header, footer, table heads) */
  --c-navy:        #0c2d4c;
  --c-navy-2:      #143d63;
  --c-navy-3:      #071c31;
  --c-on-navy:     #f2f6f9;
  --c-on-navy-2:   #b9cad9;

  /* Accents */
  --c-azur:        #1f8fcf;   /* Marseille sky blue */
  --c-azur-2:      #1574ab;
  --c-azur-soft:   #dceef8;
  --c-turq:        #10958f;   /* calanque water */
  --c-turq-soft:   #d6f0ec;
  --c-sun:         #f4b13c;   /* Provençal sun */
  --c-sun-2:       #e2961a;
  --c-sun-soft:    #fdeccb;
  --c-terra:       #c4502b;   /* tomettes & tuiles */
  --c-terra-2:     #a63e1d;
  --c-terra-soft:  #f6ddd1;
  --c-olive:       #5f7134;   /* savon de Marseille */

  /* Gradients */
  --g-terra:       linear-gradient(135deg, #d9663c 0%, #c4502b 55%, #a63e1d 100%);
  --g-sky:         linear-gradient(180deg, #bfe4f6 0%, #e4f3f9 55%, #f6f0e4 100%);
  --g-sea:         linear-gradient(180deg, #23a9c4 0%, #10958f 60%, #0b6f73 100%);
  --g-navy:        linear-gradient(160deg, #143d63 0%, #0c2d4c 55%, #071c31 100%);
  --g-ribbon:      linear-gradient(90deg, #1f8fcf 0 25%, #f4b13c 25% 50%, #10958f 50% 75%, #c4502b 75% 100%);

  /* Shadows */
  --sh-sm:         0 1px 2px rgba(12, 45, 76, 0.08), 0 2px 6px rgba(12, 45, 76, 0.06);
  --sh-md:         0 6px 18px rgba(12, 45, 76, 0.10), 0 2px 4px rgba(12, 45, 76, 0.06);
  --sh-lg:         0 22px 50px rgba(12, 45, 76, 0.18);
  --sh-terra:      0 8px 22px rgba(196, 80, 43, 0.32);

  /* Typography */
  --ff-display:    "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-body:       "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs:         0.8125rem;
  --fs-sm:         0.9375rem;
  --fs-base:       clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg:         clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  --fs-h3:         clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h2:         clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h1:         clamp(2.1rem, 1.2rem + 3.8vw, 3.9rem);

  /* Spacing & shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y:     clamp(3.25rem, 2.4rem + 3.6vw, 6rem);
  --gutter:        clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --container:     1220px;

  --r-sm:          6px;
  --r-md:          12px;
  --r-lg:          18px;
  --r-xl:          26px;
  --r-pill:        999px;

  --header-h:      70px;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:        160ms var(--ease);
  --t-med:         300ms var(--ease);

  /* Cement-tile pattern used on alternate sections */
  --tile:
    radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(196, 80, 43, 0.07) 9px 11px, transparent 11px),
    radial-gradient(circle at 0 0, rgba(31, 143, 207, 0.07) 0 14px, transparent 14px),
    radial-gradient(circle at 100% 0, rgba(31, 143, 207, 0.07) 0 14px, transparent 14px),
    radial-gradient(circle at 0 100%, rgba(31, 143, 207, 0.07) 0 14px, transparent 14px),
    radial-gradient(circle at 100% 100%, rgba(31, 143, 207, 0.07) 0 14px, transparent 14px);

  color-scheme: light;
}


/* 02. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: var(--c-azur-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-terra); }

:focus-visible {
  outline: 3px solid var(--c-sun);
  outline-offset: 3px;
  border-radius: 4px;
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

::selection { background: var(--c-sun-soft); color: var(--c-navy); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; color: #fff; }


/* 03. Typography
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--c-navy);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

p, ul, ol { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--c-navy); }

.text-accent,
.text-gold {
  color: var(--c-terra);
  font-style: italic;
}

.lead { font-size: var(--fs-lg); color: var(--c-text-muted); }
.muted { color: var(--c-text-muted); }
.small { font-size: var(--fs-sm); }


/* 04. Layout helpers & icons
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}


/* 05. Buttons & badges
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.65em 1.3em;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--g-terra);
  color: #fff;
  box-shadow: var(--sh-terra);
}
.btn--primary:hover { color: #fff; box-shadow: 0 12px 28px rgba(196, 80, 43, 0.42); }

.btn--sun {
  background: var(--c-sun);
  color: var(--c-navy);
  box-shadow: 0 8px 22px rgba(226, 150, 26, 0.3);
}
.btn--sun:hover { color: var(--c-navy); background: #f7bf55; }

.btn--outline {
  border-color: currentColor;
  color: var(--c-navy);
}
.btn--outline:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }

.btn--ghost {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--c-line-2);
  color: var(--c-navy);
}
.btn--ghost:hover { background: #fff; color: var(--c-terra); border-color: var(--c-terra); }

.btn--lg { min-height: 54px; padding: 0.85em 1.7em; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.age-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--c-terra);
  border-radius: 50%;
  color: var(--c-terra);
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1;
  background: #fff;
}
.age-badge--sm { width: 2rem; height: 2rem; font-size: 0.7rem; }


/* 06. Header & desktop navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-navy);
  color: var(--c-on-navy);
  transition: box-shadow var(--t-med);
}
.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--g-ribbon);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(7, 28, 49, 0.35); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
  flex: none;
}
.logo:hover { color: inherit; }
.logo__mark { width: 44px; height: 44px; border-radius: 12px; }
.logo__text { display: grid; line-height: 1.05; }
.logo__text > span {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  color: #fff;
}
.logo__text em { font-style: italic; color: var(--c-sun); }
.logo__text small {
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-on-navy-2);
}

.main-nav { display: none; margin-inline: auto; }
.main-nav ul { display: flex; gap: 0.15rem; padding: 0; list-style: none; }
.main-nav a {
  display: block;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-pill);
  color: var(--c-on-navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.main-nav a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.main-nav a[aria-current="page"] { color: var(--c-sun); }

.header-actions { display: none; gap: var(--space-2); }
.site-header .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.site-header .btn--outline:hover { background: #fff; color: var(--c-navy); border-color: #fff; }

.burger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.burger__lines,
.burger__lines::before,
.burger__lines::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  content: "";
}
.burger__lines { position: relative; }
.burger__lines::before { position: absolute; top: -6px; }
.burger__lines::after { position: absolute; top: 6px; width: 14px; }

@media (min-width: 720px) {
  .header-actions { display: flex; margin-left: auto; }
  .burger { margin-left: 0; }
}

@media (min-width: 1180px) {
  .main-nav { display: block; }
  .main-nav a { padding-inline: 0.6rem; }
  .header-actions { margin-left: 0; }
  .burger { display: none; }
}


/* 07. Mobile menu
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
}
.mobile-menu.is-open { visibility: visible; }

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 49, 0.55);
  opacity: 0;
  transition: opacity var(--t-med);
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: min(380px, 88vw);
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--c-navy);
  color: var(--c-on-navy);
  transform: translateX(100%);
  transition: transform var(--t-med);
}
.mobile-menu.is-open .mobile-menu__panel { transform: none; }

.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.mobile-menu__nav ul { display: grid; gap: 2px; padding: 0; list-style: none; }
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-md);
  color: var(--c-on-navy);
  font-weight: 600;
  text-decoration: none;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mobile-menu__nav .icon { color: var(--c-sun); }

.mobile-menu__cta { display: grid; gap: var(--space-3); }
.mobile-menu .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }

.mobile-menu__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--c-on-navy-2);
}


/* 08. Author bar – right-aligned at the start of the content
   ========================================================================== */
.author-bar { padding-top: var(--space-4); }
.author-bar__inner { display: flex; justify-content: flex-end; }

.author {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.author__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--g-sea);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.author__meta { display: grid; line-height: 1.25; text-align: left; }
.author__role {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-terra);
}
.author__name { font-weight: 800; color: var(--c-navy); }
.author__date { font-size: var(--fs-xs); color: var(--c-text-dim); }


/* 09. Hero & boarding-pass card
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: var(--space-4);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(5rem, 4rem + 4vw, 8rem);
  overflow: hidden;
  background: var(--g-sky);
}

/* Sun */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(1rem, 4vw, 3rem);
  right: clamp(-4rem, 8vw, 12rem);
  width: clamp(160px, 22vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a 0 55%, rgba(255, 210, 122, 0.35) 56% 66%, transparent 67%);
}

.hero__scene {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(120px, 18vw, 230px);
}

.hero__link { position: absolute; inset: 0; z-index: 1; }
.hero__grid { position: relative; display: grid; gap: var(--space-7); align-items: center; }
.hero__grid > * { position: relative; z-index: 2; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--sh-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy);
}
.hero__badge b {
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--c-navy);
  color: var(--c-sun);
}

.hero__title { margin-bottom: var(--space-5); }
.hero__lead { max-width: 62ch; margin-bottom: var(--space-4); font-size: var(--fs-lg); color: var(--c-text); }
.hero .btn-row { margin-top: var(--space-6); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-navy);
}
.hero__meta li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__meta .icon { color: var(--c-turq); stroke-width: 3; }

.hero__terms { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--c-text-dim); }

/* Boarding pass "Vieux-Port → Nine Casino" */
.pass {
  position: relative;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
  transform: rotate(-1.5deg);
}
.pass__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--g-navy);
  color: var(--c-on-navy);
}
.pass__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pass__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.pass__route span:nth-child(2) { flex: 1; height: 0; border-top: 2px dashed var(--c-line-2); }
.pass__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.pass__amount {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.2rem);
  line-height: 1;
  color: var(--c-navy);
}
.pass__amount small { display: block; margin-top: 0.35rem; font-size: 0.42em; color: var(--c-terra); font-style: italic; }

.pass__steps { display: grid; gap: var(--space-2); margin-top: var(--space-5); padding: 0; list-style: none; }
.pass__steps li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.pass__steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-azur);
  color: #fff;
  font-size: 0.75rem;
}
.pass__steps em { font-style: normal; font-weight: 800; color: var(--c-terra); }

.pass__tear {
  position: relative;
  height: 0;
  margin-inline: var(--space-5);
  border-top: 2px dashed var(--c-line-2);
}
.pass__tear::before,
.pass__tear::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d8eef7;
}
.pass__tear::before { left: calc(-1 * var(--space-5) - 12px); }
.pass__tear::after { right: calc(-1 * var(--space-5) - 12px); }

.pass__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.pass__foot strong { display: block; font-size: var(--fs-sm); }

.pass__stamp {
  position: absolute;
  right: -14px;
  top: 150px;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 3px double var(--c-terra);
  border-radius: 50%;
  color: var(--c-terra);
  background: rgba(255, 253, 248, 0.9);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(14deg);
}

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.35fr 1fr; }
}


/* 10. Stats strip & section nav
   ========================================================================== */
.stats { position: relative; z-index: 3; margin-top: calc(-1 * clamp(3rem, 2.5rem + 2vw, 4.5rem)); }
.stats__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  padding: 0;
  list-style: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-line);
  box-shadow: var(--sh-md);
}
.stats__list li {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-4) var(--space-5);
  background: var(--c-surface);
}
.stats__list b {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.05;
  color: var(--c-navy);
}
.stats__list li:nth-child(4n+1) b { color: var(--c-azur-2); }
.stats__list li:nth-child(4n+2) b { color: var(--c-terra); }
.stats__list li:nth-child(4n+3) b { color: var(--c-turq); }
.stats__list span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.stats__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .stats__list { grid-template-columns: repeat(5, 1fr); }
  .stats__list li:last-child:nth-child(odd) { grid-column: auto; }
}

.section-nav { padding-top: var(--space-6); }
.section-nav__title {
  margin-bottom: var(--space-3);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.section-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}
.section-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-navy);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.section-nav__list a span { font-size: 0.72rem; color: var(--c-terra); }
.section-nav__list a:hover { border-color: var(--c-azur); color: var(--c-azur-2); }


/* 11. Sections, sub-blocks & prose
   ========================================================================== */
.section { position: relative; padding-block: var(--section-y); }

.section--alt {
  background-color: var(--c-bg-2);
  background-image: var(--tile);
  background-size: 56px 56px;
}
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background:
    radial-gradient(circle at 10px -4px, transparent 12px, var(--c-bg-2) 13px) 0 0 / 20px 14px repeat-x;
}
.section--alt::before { top: -13px; transform: scaleY(-1); }
.section--alt::after { bottom: -13px; }

.section-head { max-width: 860px; margin-bottom: var(--space-6); }
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-terra);
}
.section-head__eyebrow b {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-sun);
  letter-spacing: 0;
}
.section-head h2::after {
  content: "";
  display: block;
  width: 96px;
  height: 10px;
  margin-top: var(--space-4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 10'%3E%3Cpath d='M0 5q6-5 12 0t12 0 12 0 12 0 12 0 12 0 12 0 12 0' fill='none' stroke='%231f8fcf' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

.prose { max-width: 860px; }
.prose > * + * { margin-top: var(--space-4); }
.prose p { color: var(--c-text); }
.prose > .table-wrap,
.prose > .check-list,
.prose > .num-list { margin-top: var(--space-5); }
.prose > .table-wrap + p { margin-top: var(--space-5); }

.section-intro { margin-bottom: var(--space-6); }

.subs {
  display: grid;
  gap: var(--space-5);
}
.sub {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.sub::before {
  content: "";
  position: absolute;
  left: clamp(1.25rem, 1rem + 1vw, 2rem);
  top: -1px;
  width: 56px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--c-azur);
}
.sub:nth-child(3n+2)::before { background: var(--c-terra); }
.sub:nth-child(3n+3)::before { background: var(--c-turq); }
.sub > h3 { margin-bottom: var(--space-3); }
.sub > * + * { margin-top: var(--space-3); }
.sub > .table-wrap,
.sub > .check-list,
.sub > .num-list { margin-top: var(--space-4); }
.sub > .table-wrap + p { margin-top: var(--space-4); }
.sub .btn-row { margin-top: var(--space-5); }

@media (min-width: 900px) {
  .subs { grid-template-columns: repeat(2, 1fr); }
  .sub--wide { grid-column: 1 / -1; }
  .subs > .sub:not(.sub--wide):last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* 12. Tables
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline-offset: 2px; }

.table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table--narrow { min-width: 0; }

.table th,
.table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}
.table thead th {
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody th {
  font-weight: 700;
  color: var(--c-navy);
}
.table tbody tr:nth-child(even) > * { background: var(--c-surface-2); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover > * { background: var(--c-azur-soft); }
.table .dash { color: var(--c-text-dim); }
.table .yes { color: var(--c-turq); font-weight: 800; }
.table .stars { color: var(--c-sun-2); letter-spacing: 0.1em; }
.table--total tbody tr:last-child > * { background: var(--c-sun-soft); font-weight: 800; color: var(--c-navy); }


/* 13. Lists
   ========================================================================== */
.check-list,
.num-list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }

.check-list li {
  position: relative;
  padding-left: 1.9rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--c-turq-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310958f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.num-list { counter-reset: step; gap: var(--space-3); }
.num-list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.9rem 0.5rem 3.2rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  counter-increment: step;
}
.num-list li::before {
  content: counter(step);
  position: absolute;
  left: 0.6rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--c-terra);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  transform: translateY(-50%);
}

@media (min-width: 720px) {
  .check-list--cols { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-6); }
}


/* 14. CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--g-navy);
  color: var(--c-on-navy);
  box-shadow: var(--sh-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 177, 60, 0.5) 0 45%, transparent 46%);
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22'%3E%3Cpath d='M0 12q10-10 20 0t20 0 20 0 20 0v10H0z' fill='%2310958f' fill-opacity='.55'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 22px;
}
.cta-band > * { position: relative; }
.cta-band__title {
  display: block;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  color: #fff;
}
.cta-band__text { margin-top: var(--space-2); color: var(--c-on-navy-2); font-size: var(--fs-sm); }
.cta-band .btn { justify-self: start; }

@media (min-width: 820px) {
  .cta-band { grid-template-columns: 1fr auto; padding-bottom: calc(2.5rem + 12px); }
}


/* 15. FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--space-3); max-width: 900px; }
.faq details {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.faq details[open] { border-color: var(--c-azur); }
.faq summary {
  position: relative;
  display: block;
  padding: 1.05rem 3.4rem 1.05rem 1.25rem;
  font-weight: 800;
  color: var(--c-navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--c-azur-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231574ab' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  transform: translateY(-50%);
  transition: transform var(--t-fast);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__answer { padding: 0 1.25rem 1.2rem; color: var(--c-text-muted); }
.faq__answer > * + * { margin-top: var(--space-3); }


/* 16. Legal pages
   ========================================================================== */
.page-hero {
  margin-top: var(--space-4);
  padding-block: var(--space-7);
  background: var(--g-sky);
}
.page-hero h1 { max-width: 20ch; margin-bottom: var(--space-4); }
.page-hero .lead { max-width: 68ch; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.breadcrumb li + li::before { content: "›"; margin-right: 0.4rem; }

.updated {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy);
}

.legal-layout {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--section-y);
}
.legal-toc {
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.legal-toc h2 { margin-bottom: var(--space-3); font-size: 1.3rem; }
.legal-toc ol { display: grid; gap: 0.35rem; padding-left: 1.2rem; font-size: var(--fs-sm); }
.legal-toc a { color: var(--c-text); text-decoration: none; }
.legal-toc a:hover { color: var(--c-terra); }

.legal { max-width: 820px; }
.legal section + section { margin-top: var(--space-6); }
.legal h2 { margin-bottom: var(--space-3); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
.legal h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.15rem; }
.legal p + p,
.legal p + ul,
.legal ul + p,
.legal .table-wrap { margin-top: var(--space-3); }
.legal ul { padding-left: 1.3rem; }
.legal li + li { margin-top: 0.3rem; }
.legal address { margin-top: var(--space-3); font-style: normal; }

.callout {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--c-sun);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-sun-soft);
}
.note { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.placeholder { padding: 0 0.3rem; border-radius: 4px; background: var(--c-terra-soft); color: var(--c-terra-2); }

@media (min-width: 960px) {
  .legal-layout { grid-template-columns: 280px 1fr; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}


/* 17. Footer & responsible gambling
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-bottom: var(--space-6);
  background: var(--c-navy-3);
  color: var(--c-on-navy-2);
  font-size: var(--fs-sm);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(60px, 9vw, 120px);
  background: url("/assets/img/calanques.svg") center bottom / cover no-repeat;
}
.site-footer a { color: var(--c-on-navy); }
.site-footer a:hover { color: var(--c-sun); }
.site-footer h2 {
  margin-bottom: var(--space-3);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-sun);
}
.site-footer ul { padding: 0; list-style: none; }

.footer-top {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-6);
}
.footer-brand p { max-width: 42ch; margin-top: var(--space-4); }
.footer-col ul { display: grid; gap: 0.45rem; }
.footer-col a { text-decoration: none; }
.footer-col .btn-row { margin-top: var(--space-4); }
.site-footer .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.site-footer .btn--outline:hover { background: #fff; color: var(--c-navy); }
.site-footer .btn--primary,
.site-footer .btn--primary:hover { color: #fff; }

@media (min-width: 720px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.rg {
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}
.rg__head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: center; }
.rg__head h2 { margin: 0; font-family: var(--ff-display); font-size: 1.35rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #fff; }
.rg__head p { grid-column: 1 / -1; }
.rg .age-badge { background: transparent; color: var(--c-sun); border-color: var(--c-sun); }

.rg__grid { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 640px) { .rg__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rg__grid { grid-template-columns: repeat(3, 1fr); } }

.rg-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: 0.7rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
.rg-link:hover { background: rgba(255, 255, 255, 0.1); }
.rg-link__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #3f4f5f;
  color: #fff;
  font-weight: 900;
  font-size: 0.78rem;
}
.rg-link__logo--teal { background: var(--c-turq); }
.rg-link__logo--blue { background: var(--c-azur-2); }
.rg-link__logo--dark { background: #23384d; }
.rg-link__logo--purple { background: #6b4aa0; }
.rg-link__logo--red { background: var(--c-terra); }
.rg-link__txt { display: grid; line-height: 1.3; }
.rg-link__txt strong { color: #fff; }
.rg-link__txt span { font-size: var(--fs-xs); color: var(--c-on-navy-2); }

.rg__hotline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: var(--space-5);
}
.rg__hotline a { font-size: 1.15rem; font-weight: 900; color: var(--c-sun); text-decoration: none; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.disclaimer { margin-top: var(--space-4); font-size: var(--fs-xs); color: #93a7b9; }


/* 18. Motion & accessibility preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .pass { transform: none; }
}

@media (max-width: 599px) {
  .pass__stamp { display: none; }
}

@media (max-width: 380px) {
  .btn--lg { padding-inline: 1.1em; white-space: normal; }
  .logo__text > span { font-size: 1.25rem; }
}

/* Long URLs in table cells (contacts) must wrap on phones */
.table td a { overflow-wrap: anywhere; }