/* ==========================================================================
   Attente — design system
   Thème : "tableau des départs" — la nuit tombe sur le parc, les panneaux
   d'attraction s'allument comme un tableau d'aéroport.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* Jetons neutres, partagés par tous les thèmes */
  --radius-s:   10px;
  --radius-m:   16px;
  --radius-l:   26px;
  --radius-xl:  34px;

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-ui:      'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ══════════════════ THÈME 1 — NUIT DORÉE (par défaut) ══════════════════ */
:root,
[data-theme="nuit"]{
  --bar-bg:     rgba(11,12,29,.94);
  --ink:        #0B0C1D;
  --ink-2:      #16183A;
  --ink-3:      #1F2250;
  --ink-4:      #2B2F66;
  --line:       rgba(245,243,238,.13);
  --line-soft:  rgba(245,243,238,.075);

  --gold:       #F5B800;
  --gold-2:     #FFD25A;
  --gold-soft:  rgba(245,184,0,.18);
  --gold-ink:   #14152E;

  --green:      #5FE3B4;
  --green-soft: rgba(95,227,180,.18);
  --amber:      #FFC145;
  --amber-soft: rgba(255,193,69,.18);
  --red:        #FF7C6B;
  --red-soft:   rgba(255,124,107,.18);
  --grey:       #9A9CC2;
  --grey-soft:  rgba(154,156,194,.18);

  --text:       #F7F5F0;
  --text-dim:   #C6C7E0;
  --text-faint: #9092BE;

  --shadow-card: 0 1px 0 rgba(245,243,238,.04) inset, 0 12px 30px -14px rgba(0,0,0,.55);
  --shadow-pop:  0 20px 60px -20px rgba(0,0,0,.7);

  /* fonds d'ambiance */
  --bg-glow-1: rgba(245,184,0,.14);
  --bg-glow-2: rgba(95,227,180,.09);
  --bg-glow-3: rgba(255,95,162,.06);
  --stars-opacity: 1;

  /* couleurs de graphiques */
  --chart-grid:        rgba(245,243,238,.07);
  --chart-grid-strong: rgba(245,243,238,.14);
  --chart-label:       rgba(198,199,224,.65);
  --chart-ghost:       rgba(154,156,194,.95);
  --chart-fill-top:    rgba(245,184,0,.28);
  --chart-fill-bottom: rgba(245,184,0,.02);
  --chart-glow:        rgba(245,184,0,.5);
  --chart-down-top:    rgba(255,124,107,.05);
  --chart-down-bottom: rgba(255,124,107,.30);
  --chart-down-line:   rgba(255,124,107,.75);
  --chart-now:         rgba(245,243,238,.3);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* ══════════════════ THÈME 2 — GRAND JOUR (clair) ══════════════════ */
[data-theme="jour"]{
  --bar-bg:     rgba(244,241,232,.94);
  --ink:        #F4F1E8;
  --ink-2:      #FFFFFF;
  --ink-3:      #F2EEE2;
  --ink-4:      #E2DCCB;
  --line:       rgba(38,34,24,.14);
  --line-soft:  rgba(38,34,24,.08);

  --gold:       #9C6A04;
  --gold-2:     #7E5403;
  --gold-soft:  rgba(156,106,4,.14);
  --gold-ink:   #FFFFFF;

  --green:      #0A7350;
  --green-soft: rgba(10,115,80,.13);
  --amber:      #8F5B00;
  --amber-soft: rgba(178,113,0,.13);
  --red:        #AE2F1B;
  --red-soft:   rgba(174,47,27,.12);
  --grey:       #5C594E;
  --grey-soft:  rgba(110,106,94,.13);

  --text:       #221F17;
  --text-dim:   #4E4A3E;
  --text-faint: #6E6A5E;

  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 26px -16px rgba(60,50,25,.4);
  --shadow-pop:  0 22px 60px -24px rgba(60,50,25,.45);

  --bg-glow-1: rgba(156,106,4,.13);
  --bg-glow-2: rgba(10,115,80,.08);
  --bg-glow-3: rgba(160,90,180,.06);
  --stars-opacity: 0;

  --chart-grid:        rgba(38,34,24,.09);
  --chart-grid-strong: rgba(38,34,24,.2);
  --chart-label:       rgba(78,74,62,.8);
  --chart-ghost:       rgba(110,106,94,.85);
  --chart-fill-top:    rgba(156,106,4,.26);
  --chart-fill-bottom: rgba(156,106,4,.03);
  --chart-glow:        rgba(156,106,4,.32);
  --chart-down-top:    rgba(174,47,27,.06);
  --chart-down-bottom: rgba(174,47,27,.24);
  --chart-down-line:   rgba(174,47,27,.7);
  --chart-now:         rgba(38,34,24,.4);
  --grade-1: #0A8F5E;
  --grade-2: #5A8F1E;
  --grade-3: #A87400;
  --grade-4: #C4521A;
  --grade-5: #B32424;
}


*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 12% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--bg-glow-2), transparent 55%),
    radial-gradient(700px 500px at 90% 60%, var(--bg-glow-3), transparent 60%),
    var(--ink);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before{
  /* Poussière d'étoiles : deux couches de particules qui dérivent lentement,
     comme la traînée de la Fée Clochette au-dessus du château. */
  content:"";
  position:fixed; inset:-10% -10% 0 -10%; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 10% 18%, rgba(245,184,0,.85), transparent),
    radial-gradient(1.4px 1.4px at 82% 12%, rgba(245,243,238,.6), transparent),
    radial-gradient(2px 2px at 70% 32%, rgba(245,184,0,.7), transparent),
    radial-gradient(1.4px 1.4px at 25% 55%, rgba(245,243,238,.5), transparent),
    radial-gradient(2px 2px at 92% 68%, rgba(124,224,198,.6), transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(245,184,0,.55), transparent),
    radial-gradient(1.3px 1.3px at 60% 5%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.7px 1.7px at 33% 92%, rgba(183,140,255,.55), transparent);
  animation:drift 24s linear infinite, twinkle 4s ease-in-out infinite;
  opacity:var(--stars-opacity);
}
@keyframes drift{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-3%, -22px, 0); }
}
@keyframes twinkle{
  0%,100%{ opacity:calc(var(--stars-opacity) * .55); }
  50%{ opacity:var(--stars-opacity); }
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:inherit; }
::selection{ background:var(--gold-soft); color:var(--text); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------------------------- shell -------------------------------- */

.app{
  max-width:640px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding-bottom:calc(28px + var(--safe-bottom));
  position:relative;
  z-index:1;
}

/* ---------------------------------- header ------------------------------- */

.topbar{
  position:sticky; top:0; z-index:40;
  padding:calc(14px + var(--safe-top)) 18px 12px;
  background:linear-gradient(180deg, var(--bar-bg) 70%, transparent);
  backdrop-filter:blur(10px);
}
.topbar__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  min-width:0; flex:1 1 auto;
}
.brand__mark{
  width:40px; height:40px; border-radius:11px; flex:none;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px -3px rgba(120,90,200,.5), 0 0 0 1px rgba(120,110,160,.35);
}
.brand__mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand__mark svg{ width:19px; height:19px; color:var(--gold-ink); }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand__title{
  font-family:var(--font-display);
  font-size:18px; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(100deg, #F5F3EE 20%, #FFD25A 50%, #F5F3EE 80%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmerText 7s linear infinite;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@keyframes shimmerText{
  from{ background-position:200% center; }
  to{ background-position:-200% center; }
}
.brand__mark{
  position:relative;
}
.brand__mark::after{
  content:"";
  position:absolute; inset:-6px; border-radius:16px;
  background:radial-gradient(circle, rgba(245,184,0,.45), transparent 70%);
  animation:breathe 4.5s ease-in-out infinite;
  pointer-events:none; z-index:-1;
}
.brand__sub{ font-size:11px; color:var(--text-faint); font-weight:500; letter-spacing:.3px; }

.topbar__actions{ display:flex; align-items:center; gap:6px; flex:none; }

.iconbtn{
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line);
  background:var(--ink-2);
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.iconbtn svg{ width:17px; height:17px; }
.iconbtn:hover{ background:var(--ink-3); color:var(--text); }
.iconbtn:active{ transform:scale(.92); }
.iconbtn[data-active="true"]{ color:var(--gold); border-color:rgba(245,184,0,.4); background:var(--gold-soft); }

.status-dot{
  position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--grey); border:2px solid var(--ink);
}
.status-dot[data-state="live"]{ background:var(--green); }
.status-dot[data-state="offline"]{ background:var(--red); }

/* park switcher */
.parkswitch[data-park="park"] .parkswitch__btn[data-target="park"],

/* ---------------------------------- board (hero) ------------------------- */

.board{
  margin:18px 16px 6px;
  border-radius:var(--radius-xl);
  padding:22px 20px 20px;
  background:
    linear-gradient(160deg, rgba(245,184,0,.13), rgba(245,184,0,0) 55%),
    var(--ink-2);
  border:1px solid rgba(245,184,0,.16);
  box-shadow:var(--shadow-card), 0 0 40px -24px rgba(245,184,0,.6);
  position:relative;
  overflow:hidden;
}
.board::after{
  /* Silhouette du château, en filigrane au fond du panneau */
  content:"";
  position:absolute; right:-6px; bottom:-8px;
  width:150px; height:110px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'><g fill='%23F2B705'><path d='M20 110V64h10V50l6-10 6 10v14h9V44h12V30l7-12 7 12v14h12v20h9V50l6-10 6 10v14h10v46z'/><path d='M60 110V78a15 15 0 0 1 30 0v32z' fill='%230F1026'/><circle cx='75' cy='14' r='2.5'/><circle cx='42' cy='34' r='1.8'/><circle cx='108' cy='34' r='1.8'/></g></svg>") no-repeat bottom right;
  background-size:contain;
  opacity:.11;
  pointer-events:none;
}
.board::before{
  /* halo doré qui respire : la « magie » du tableau */
  content:"";
  position:absolute; top:-30%; right:-15%;
  width:55%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(245,184,0,.2), transparent 70%);
  pointer-events:none;
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:.75; }
  50%{ transform:scale(1.15); opacity:1; }
}


.stat__value{ font-family:var(--font-mono); font-weight:700; font-size:19px; }
.stat__label{ font-size:11px; color:var(--text-faint); margin-top:3px; letter-spacing:.1px; line-height:1.3; }
.board__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.board__eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-faint);
  display:flex; align-items:center; gap:6px;
}
.board__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--grey); }
.board__eyebrow[data-open="true"] .dot{ background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.board__eyebrow[data-open="false"] .dot{ background:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.board__hours{ font-size:12px; color:var(--text-dim); font-weight:500; }



.board__stats{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.stat{
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  padding:10px 12px;
}

/* ---------------------------------- favorites ----------------------------- */

.favorites{ margin:22px 16px 0; }
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.section-title h2{
  font-family:var(--font-display); font-size:16px; font-weight:600; margin:0;
  display:flex; align-items:center; gap:6px;
}
.section-title span.count{
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
}
.favorites__track{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
  scroll-snap-type:x proximity;
  -ms-overflow-style:none; scrollbar-width:none;
}
.favorites__track::-webkit-scrollbar{ display:none; }
.favcard{
  scroll-snap-align:start;
  flex:0 0 auto; width:150px;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:12px;
}
.favcard__name{ font-size:13px; font-weight:600; line-height:1.25; margin-bottom:10px; min-height:32px; }
.favcard__wait{ font-family:var(--font-mono); font-weight:700; font-size:22px; }
.favcard__wait small{ font-family:var(--font-ui); font-size:11px; color:var(--text-faint); font-weight:500; }

/* ---------------------------------- controls ------------------------------ */

.controls{
  margin:22px 16px 4px;
  display:flex; gap:8px; align-items:center;
}
.search{
  flex:1;
  display:flex; align-items:center; gap:8px;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:10px 14px;
}
.search svg{ width:16px; height:16px; color:var(--text-faint); flex:none; }
.search input{
  border:0; background:transparent; color:var(--text);
  font-family:var(--font-ui); font-size:14px; width:100%; outline:none;
}
.search input::placeholder{ color:var(--text-faint); }

.select{
  appearance:none;
  background:var(--ink-2); border:1px solid var(--line); color:var(--text-dim);
  border-radius:var(--radius-l); padding:10px 30px 10px 14px;
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23A7A9C4' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  cursor:pointer;
}

.chips{
  display:flex; gap:8px; overflow-x:auto; margin:12px 16px 0; padding-bottom:2px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  border:1px solid var(--line); background:var(--ink-2); color:var(--text-dim);
  border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:all .15s ease;
}
.chip[aria-pressed="true"]{
  background:var(--gold-soft); border-color:rgba(245,184,0,.45); color:var(--gold-2);
}

/* ---------------------------------- list ----------------------------------- */

.lands{ margin:18px 16px 0; }
.land{ margin-bottom:22px; }
.land__title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-faint); margin:0 0 8px 4px;
  display:flex; align-items:center; gap:8px;
}
.land__title::after{ content:""; flex:1; height:1px; background:var(--line); }

.ride{
  display:flex; align-items:center; gap:13px;
  padding:15px 15px;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  margin-bottom:9px;
  transition:border-color .15s ease, transform .1s ease, background .15s ease;
}
.ride:active{ transform:scale(.99); }
.ride[data-status="down"], .ride[data-status="closed"], .ride[data-status="refurb"]{ opacity:.55; }

.ride__name{ font-size:15.5px; font-weight:600; line-height:1.3; letter-spacing:-.1px; }
.ride__meta:empty{ display:none; }
.ride__meta{ margin-top:5px; }

.ride__wait{
  flex:none; text-align:right;
  font-family:var(--font-mono); font-weight:700; font-size:26px;
  min-width:60px; line-height:1;
  color:var(--text-dim);
}
.ride__wait small{
  display:block; font-family:var(--font-ui); font-size:9.5px; font-weight:600;
  color:var(--text-faint); margin-top:3px; letter-spacing:.4px; text-transform:uppercase;
}
.ride__wait[data-level="short"]{ color:var(--green); text-shadow:0 0 16px rgba(95,227,180,.3); }
.ride__wait[data-level="medium"]{ color:var(--amber); text-shadow:0 0 16px rgba(245,184,0,.28); }
.ride__wait[data-level="long"]{ color:var(--red); text-shadow:0 0 16px rgba(255,124,107,.28); }
.ride__wait[data-level="down"]{ color:var(--grey); }

.ride__fav{
  flex:none; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); cursor:pointer;
}
.ride__fav svg{ width:16px; height:16px; }
.ride__fav[aria-pressed="true"]{
  color:var(--gold); border-color:rgba(245,184,0,.4); background:var(--gold-soft);
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 18px -4px rgba(245,184,0,.6);
}
@keyframes pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.28) rotate(14deg); }
  100%{ transform:scale(1) rotate(0); }
}

/* Les attractions se révèlent en cascade au chargement */
.land .ride{ animation:reveal .45s ease-out backwards; }
.land .ride:nth-child(2){ animation-delay:.03s; }
.land .ride:nth-child(3){ animation-delay:.06s; }
.land .ride:nth-child(4){ animation-delay:.09s; }
.land .ride:nth-child(5){ animation-delay:.12s; }
.land .ride:nth-child(6){ animation-delay:.15s; }
.land .ride:nth-child(n+7){ animation-delay:.18s; }
@keyframes reveal{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.ride__body{ flex:1; min-width:0; }
.ride__name{ font-size:14.5px; font-weight:600; line-height:1.25; }
.ride__meta{
  margin-top:3px; font-size:11.5px; color:var(--text-faint);
  display:flex; align-items:center; gap:6px;
}
.pill{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  padding:2px 7px; border-radius:999px;
}
.pill[data-level="short"]{ color:var(--green); background:var(--green-soft); }
.pill[data-level="medium"]{ color:var(--amber); background:var(--amber-soft); }
.pill[data-level="long"]{ color:var(--red); background:var(--red-soft); }
.pill[data-level="down"]{ color:var(--grey); background:var(--grey-soft); }

/* ---------------------------------- empty / error --------------------------- */

.empty{
  margin:40px 16px; text-align:center; color:var(--text-dim);
  padding:30px 20px; border:1px dashed var(--line); border-radius:var(--radius-l);
}
.empty svg{ width:30px; height:30px; margin:0 auto 10px; color:var(--text-faint); }
.empty h3{ font-family:var(--font-display); font-size:16px; margin:0 0 6px; color:var(--text); }
.empty p{ font-size:13px; margin:0; line-height:1.5; }

.skeleton{ position:relative; overflow:hidden; background:var(--ink-3); }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(245,243,238,.06), transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
.ride.skeleton-row .ride__name{ height:14px; width:60%; border-radius:4px; background:var(--ink-3); }
.ride.skeleton-row .ride__meta{ height:10px; width:30%; margin-top:6px; border-radius:4px; background:var(--ink-3); }

/* ---------------------------------- sheet / drawer --------------------------- */

.scrim{
  position:fixed; inset:0; background:rgba(6,6,16,.6); backdrop-filter:blur(2px);
  z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.scrim.is-open{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  max-width:640px; margin:0 auto;
  max-height:92vh;
  display:flex; flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:10px 20px calc(20px + var(--safe-bottom));
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--shadow-pop);
}
.sheet.is-open{ transform:translateY(0); }
.sheet__handle{
  width:44px; height:5px; border-radius:3px;
  background:rgba(245,243,238,.28);
  margin:8px auto 14px;
  transition:background .15s ease;
}
.sheet__handle::after{
  /* zone de préhension élargie, invisible */
  content:""; position:absolute; left:0; right:0; top:0; height:56px;
}
.sheet{ touch-action:pan-y; }
.sheet h3{ font-family:var(--font-display); font-size:18px; margin:0 0 4px; }
.sheet p.hint{ font-size:12.5px; color:var(--text-faint); margin:0 0 16px; line-height:1.5; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.rangewrap{ display:flex; align-items:center; gap:12px; }
.rangewrap input[type="range"]{
  flex:1; -webkit-appearance:none; height:4px; border-radius:2px;
  background:var(--ink-4); outline:none;
}
.rangewrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--gold); border:3px solid var(--ink-2); box-shadow:0 2px 8px rgba(0,0,0,.4);
  cursor:pointer;
}
.rangewrap output{ font-family:var(--font-mono); font-weight:700; min-width:44px; text-align:right; }

.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line-soft); }
.toggle-row:first-of-type{ border-top:none; }
.toggle-row div p{ margin:2px 0 0; font-size:12px; color:var(--text-faint); }
.switch{
  position:relative; width:42px; height:24px; border-radius:999px;
  background:var(--ink-4); border:1px solid var(--line); flex:none;
  cursor:pointer;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--text-dim); transition:transform .2s ease, background .2s ease;
}
.switch[aria-checked="true"]{ background:var(--gold-soft); border-color:rgba(245,184,0,.4); }
.switch[aria-checked="true"]::after{ transform:translateX(18px); background:var(--gold); }

.btn{
  width:100%; padding:13px; border-radius:var(--radius-l); border:0;
  font-family:var(--font-ui); font-weight:700; font-size:14px; cursor:pointer;
  margin-top:4px;
}
.btn--primary{ background:linear-gradient(145deg, var(--gold-2), var(--gold)); color:var(--gold-ink); }
.btn--ghost{ background:var(--ink-3); color:var(--text-dim); border:1px solid var(--line); }

.credit{
  margin:26px 16px 4px; text-align:center; font-size:11px; color:var(--text-faint); line-height:1.7;
}
.credit a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }

/* install toast */
.toast{
  position:fixed; left:12px; right:12px; bottom:calc(96px + var(--safe-bottom));
  max-width:616px; margin:0 auto; z-index:45;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:12px 14px; display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-pop);
  transform:translateY(120%); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.toast.is-open{ transform:translateY(0); }
.toast p{ margin:0; font-size:12.5px; flex:1; line-height:1.4; color:var(--text-dim); }
.toast strong{ color:var(--text); }
.toast button{ border:0; border-radius:10px; padding:8px 12px; font-weight:700; font-size:12.5px; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ---------------------------------- sparkles (favoris) ------------------------------- */

.sparkle{
  position:fixed; z-index:200; pointer-events:none;
  width:6px; height:6px; border-radius:50%;
  margin:-3px 0 0 -3px;
  animation:sparkleOut .7s ease-out forwards;
  box-shadow:0 0 8px currentColor;
}
@keyframes sparkleOut{
  0%{ transform:translate(0,0) scale(0); opacity:1; }
  35%{ transform:translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) scale(1.3); opacity:1; }
  100%{ transform:translate(var(--dx), var(--dy)) scale(0); opacity:0; }
}

@media (min-width:480px){
  .board__stats{ grid-template-columns:repeat(3,1fr); }
}

/* ---------------------------------- bottom tab bar --------------------------- */

/* Réserve la hauteur réelle de la barre d'onglets (icône + libellé + marges)
   pour que le dernier élément ne passe jamais dessous. */
.app{ padding-bottom:calc(112px + var(--safe-bottom)); }

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:640px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--bar-bg); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:8px 6px calc(8px + var(--safe-bottom));
}
.tabbar__btn{
  border:0; background:transparent; color:var(--text-faint);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 2px; cursor:pointer; font-family:var(--font-ui);
  font-size:11px; font-weight:600; letter-spacing:0;
  border-radius:14px;
  min-width:0; white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.tabbar__btn svg{ width:22px; height:22px; flex:none; }
/* icônes PNG dorées : plein éclat sur l'onglet actif, atténuées sinon */
.tabbar__img{
  width:24px; height:24px; flex:none;
  object-fit:contain;
  opacity:.5;
  transition:opacity .18s ease, filter .18s ease;
}
.tabbar__btn[aria-current="true"] .tabbar__img{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(200,180,255,.6));
}

/* Icônes pastel sur thèmes CLAIRS : sans cadre. On fonce et sature l'icône
   elle-même (contrast + saturate + un peu plus sombre) pour qu'elle ressorte
   directement sur fond blanc/ivoire, sans médaillon. */
[data-theme="jour"] .tabbar__img,
[data-theme="parchemin"] .tabbar__img,
[data-theme="bonbon"] .tabbar__img,
[data-theme="sable"] .tabbar__img,
[data-theme="ardoise"] .tabbar__img{
  opacity:.85;
  filter:saturate(1.8) brightness(.82) contrast(1.15);
}
[data-theme="jour"] .tabbar__btn[aria-current="true"] .tabbar__img,
[data-theme="parchemin"] .tabbar__btn[aria-current="true"] .tabbar__img,
[data-theme="bonbon"] .tabbar__btn[aria-current="true"] .tabbar__img,
[data-theme="sable"] .tabbar__btn[aria-current="true"] .tabbar__img,
[data-theme="ardoise"] .tabbar__btn[aria-current="true"] .tabbar__img{
  opacity:1;
  filter:saturate(2) brightness(.75) contrast(1.2) drop-shadow(0 1px 2px rgba(120,90,180,.4));
}

.tabbar__btn[aria-current="true"]{
  color:var(--gold-2);
  background:var(--gold-soft);
}
.tabbar__btn[aria-current="true"] svg{ filter:drop-shadow(0 0 10px rgba(245,184,0,.5)); }

.view{ display:none; }
.view.is-active{ display:block; }

/* ---------------------------------- shows / restaurants ----------------------------- */

.viewhead{ margin:18px 16px 12px; }
.viewhead h1{ font-family:var(--font-display); font-size:20px; font-weight:600; margin:0 0 2px; }
.viewhead p{ font-size:12.5px; color:var(--text-faint); margin:0; }

.showcard{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; margin:0 16px 8px;
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:var(--radius-m);
}
.showcard__name{ font-size:14.5px; font-weight:600; margin-bottom:4px; }
.showcard__land{ font-size:11.5px; color:var(--text-faint); margin-bottom:8px; }
.showtimes{ display:flex; flex-wrap:wrap; gap:6px; }
.showtime-pill{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:999px; background:var(--ink-3); color:var(--gold-2);
  border:1px solid var(--line-soft);
}
.showtime-pill[data-past="true"]{ color:var(--text-faint); opacity:.5; }

.restocard{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin:0 16px 8px;
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:var(--radius-m);
}
.restocard__body{ flex:1; min-width:0; }
.restocard__name{ font-size:14px; font-weight:600; }
.restocard__meta{ font-size:11.5px; color:var(--text-faint); margin-top:3px; }

/* ---------------------------------- premier access / single rider badges ----------- */

.pill[data-level="premier"]{ color:var(--gold-2); background:var(--gold-soft); }
.pill[data-level="single"]{ color:var(--green); background:var(--green-soft); }
.pill[data-level="deal"]{ color:#7CE0C6; background:rgba(124,224,198,.12); }

.pill--land{
  color:var(--land-color, var(--text-dim));
  background:transparent;
  border:1px solid var(--land-color, var(--line));
  opacity:.9;
  text-transform:none; letter-spacing:.1px; font-weight:600;
}

/* ---------------------------------- quick actions grid ------------------------------ */

.quickgrid{
  margin:18px 16px 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.quickbtn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 4px 12px;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius-l);
  color:var(--text-dim); cursor:pointer;
  font-family:var(--font-ui); font-size:11.5px; font-weight:700;
  transition:transform .12s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.quickbtn svg{ width:22px; height:22px; }
.quickbtn:active{ transform:scale(.94); }
.quickbtn[aria-pressed="true"]{
  color:var(--gold-2); border-color:rgba(245,184,0,.45);
  background:linear-gradient(160deg, rgba(245,184,0,.16), var(--ink-2));
  box-shadow:0 0 0 1px rgba(245,184,0,.15) inset, 0 8px 18px -10px rgba(245,184,0,.5);
}
.quickbtn#qa-alert[data-active="true"]{
  color:var(--gold-2); border-color:rgba(245,184,0,.45);
  background:linear-gradient(160deg, rgba(245,184,0,.16), var(--ink-2));
}

/* ---------------------------------- land chips (zones, multicolores) ---------------- */

.chips--lands{ margin:16px 16px 0; }
.chip--all{
  font-weight:800;
  background:var(--green-soft); border-color:rgba(95,227,180,.4); color:var(--green);
}
.chip--all[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#062A20; }
.chip--land{ display:inline-flex; align-items:center; gap:7px; }
.chip--land[aria-pressed="true"]{
  background:var(--gold-soft);
  border-color:var(--land-color, var(--gold));
  color:var(--text);
}
@supports (background: color-mix(in srgb, red 20%, blue)){
  .chip--land[aria-pressed="true"]{
    background:color-mix(in srgb, var(--land-color, var(--gold)) 22%, var(--ink-2));
  }
}
.chipdot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--land-color, var(--gold));
}

.liststatus{
  margin:14px 16px 10px; font-size:12px; color:var(--text-faint); font-weight:500;
}

/* ---------------------------------- colored land accents on cards ------------------- */

.land__title{ display:flex; align-items:center; gap:8px; }
.land__title .chipdot{ width:9px; height:9px; }

.ride{ border-left:4px solid var(--land-color, var(--line)); }

/* ---------------------------------- park picker ------------------------------------- */

.parkpick{
  display:grid; gap:8px;
  grid-template-columns:1fr;
  margin:16px 0 18px;
}
.parkbtn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  color:var(--text-dim);
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  cursor:pointer; text-align:left;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.parkbtn:active{ transform:scale(.985); }
.parkbtn__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.parkbtn__count{
  flex:none;
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:999px;
  background:rgba(245,243,238,.07); color:var(--text-faint);
}
.parkbtn[aria-pressed="true"]{
  background:linear-gradient(145deg, var(--gold-2), var(--gold));
  border-color:transparent;
  color:var(--gold-ink);
  box-shadow:0 10px 24px -12px rgba(245,184,0,.8);
  position:relative; overflow:hidden;
}
.parkbtn[aria-pressed="true"]::after{
  /* éclat qui balaie le bouton actif, comme un coup de baguette */
  content:"";
  position:absolute; top:0; bottom:0; left:-60%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg);
  animation:sweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%, 62%{ left:-60%; }
  92%, 100%{ left:130%; }
}
.parkbtn[aria-pressed="true"] .parkbtn__count{
  background:rgba(20,21,46,.22); color:var(--gold-ink);
}

/* ---------------------------------- week bars (sélecteur de jour) ------------------ */

.weekbars{
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
  align-items:end; height:126px;
}
.weekbar{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  height:100%; justify-content:flex-end;
  background:transparent; border:0; padding:0 1px;
  cursor:pointer; font-family:var(--font-ui);
  border-radius:8px;
  transition:transform .12s ease;
}
.weekbar:active{ transform:scale(.95); }
.weekbar[disabled]{ cursor:default; opacity:.45; }
.weekbar__val{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--text-dim);
}
.weekbar__col{
  position:relative;
  width:100%; flex:1; display:flex; align-items:flex-end;
  background:rgba(245,243,238,.04); border-radius:6px; overflow:hidden;
}
.weekbar__fill{
  width:100%; border-radius:6px;
  background:var(--grey);
  animation:growUp .5s cubic-bezier(.34,1.2,.64,1) backwards;
  transition:filter .15s ease;
}
.weekbar__fill[data-level="short"]{ background:linear-gradient(180deg,#7CEBC4,var(--green)); }
.weekbar__fill[data-level="medium"]{ background:linear-gradient(180deg,#FFD25A,var(--amber)); }
.weekbar__fill[data-level="long"]{ background:linear-gradient(180deg,#FF9D8E,var(--red)); }
.weekbar__down{
  position:absolute; top:5px; left:0; right:0;
  margin:0 auto;
  width:7px; height:7px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px rgba(255,124,107,.9);
  z-index:2;
}
.weekbar__day{
  font-size:9.5px; color:var(--text-faint); font-weight:600; white-space:nowrap;
}
.weekbar[aria-pressed="true"] .weekbar__col{
  box-shadow:inset 0 0 0 2px var(--gold);
}
.weekbar[aria-pressed="true"] .weekbar__fill{ filter:brightness(1.25); }
.weekbar[aria-pressed="true"] .weekbar__day{ color:var(--gold-2); }
.weekbar[aria-pressed="true"] .weekbar__val{ color:var(--gold-2); }

@keyframes growUp{ from{ height:0!important; } }

.nodata{
  margin:0; padding:18px 6px; text-align:center;
  font-size:12.5px; color:var(--text-faint); line-height:1.6;
}

/* ---------------------------------- tooltip extra ------------------------------- */

.tooltip__extra{
  font-size:9.5px; color:var(--text-faint); text-align:center; line-height:1.2;
}
.tooltip{ width:auto; min-width:78px; }

/* ---------------------------------- forecast : courbe ---------------------------- */

.curvebox{
  margin:14px 16px 0;
  padding:6px 8px 10px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
}
.curvebox canvas{
  /* hauteur imposée en CSS : sans elle, la hauteur d'affichage découle du
     ratio des pixels internes et explose si la largeur est mal mesurée. */
  width:100%; height:200px; display:block; touch-action:none;
}
.curvebox__legend{
  display:flex; gap:14px; justify-content:center;
  margin-top:2px; font-size:10.5px; color:var(--text-faint);
}
.curvebox__legend span{ display:inline-flex; align-items:center; gap:5px; }
.curvebox__legend .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot--best{ background:var(--green); }
.dot--peak{ background:var(--red); }
.dot--now{ background:var(--text); }

/* ---------------------------------- forecast : day switch ---------------------------- */

.dayswitch{
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
  margin:0 16px;
  padding:5px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:18px;
}
.daybtn{
  position:relative;
  padding:9px 2px; border-radius:13px;
  border:0; background:transparent;
  color:var(--text-faint); font-family:var(--font-ui);
  font-size:11.5px; font-weight:600; cursor:pointer;
  text-transform:capitalize;
  transition:all .18s ease;
}
.daybtn[aria-pressed="true"]{
  background:linear-gradient(145deg, var(--gold-2), var(--gold));
  color:var(--gold-ink);
  box-shadow:0 6px 16px -8px rgba(245,184,0,.9);
}
.daybtn__dot{
  position:absolute; top:4px; right:5px;
  width:5px; height:5px; border-radius:50%; background:var(--green);
}
.daybtn[aria-pressed="true"] .daybtn__dot{ background:var(--gold-ink); }

/* ---------------------------------- chart box + tooltip ------------------------------ */

.chartbox{
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  padding:14px 12px 8px;
  margin-bottom:18px;
}
.chartbox__head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:0 4px 10px;
}
.chartbox__title{ font-size:12.5px; font-weight:600; color:var(--text-dim); }
.chartbox__hint{ font-size:10.5px; color:var(--text-faint); }

.chartwrap{ position:relative; }
.chartwrap canvas{
  width:100%; height:128px; display:block; touch-action:none;
}

.tooltip{
  position:absolute; z-index:2; pointer-events:none;
  width:78px;
  background:var(--ink);
  border:1px solid rgba(245,184,0,.4);
  border-radius:10px;
  padding:6px 4px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.8);
}
.tooltip[hidden]{ display:none; }
.tooltip__wait{
  font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--gold-2);
}
.tooltip__time{
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
}

/* ---------------------------------- park headings ----------------------------------- */

.parkhead{
  display:flex; align-items:center; gap:10px;
  margin:22px 16px 12px;
  font-family:var(--font-display); font-size:17px; font-weight:600;
}
.parkhead::after{ content:""; flex:1; height:1px; background:var(--line); }
.parkhead__count{
  order:3;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--gold-2); background:var(--gold-soft);
  padding:3px 9px; border-radius:999px;
}

/* badges : ne débordent plus, restent sur une ligne lisible */
.ride__meta{ flex-wrap:wrap; row-gap:5px; }
.pill{ white-space:nowrap; line-height:1.5; }

/* ══════════════════ Ajustements propres au thème clair ══════════════════ */

[data-theme="jour"] .tabbar{
  border-top-color:rgba(38,34,24,.12);
  box-shadow:0 -8px 24px -18px rgba(60,50,25,.5);
}
[data-theme="jour"] .brand__title{
  background:linear-gradient(100deg, #221F17 20%, #9C6A04 50%, #221F17 80%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="jour"] .brand__mark{
  background:linear-gradient(145deg, #C9932A, #9C6A04);
}
[data-theme="jour"] .brand__mark::after{ display:none; }

/* Les surfaces dorées passent en texte blanc pour rester lisibles */
[data-theme="jour"] .parkbtn[aria-pressed="true"],
[data-theme="jour"] .daybtn[aria-pressed="true"],
[data-theme="jour"] .btn--primary,
[data-theme="jour"] .toast button{
  background:linear-gradient(145deg, #B07705, #7E5403);
  color:#FFFFFF;
}
[data-theme="jour"] .parkbtn[aria-pressed="true"] .parkbtn__count{
  background:rgba(255,255,255,.24); color:#FFFFFF;
}
[data-theme="jour"] .tabbar__btn[aria-current="true"]{
  color:#7E5403; background:rgba(156,106,4,.14);
}
[data-theme="jour"] .tabbar__btn[aria-current="true"] svg{ filter:none; }

[data-theme="jour"] .board{
  background:linear-gradient(160deg, var(--gold-soft), transparent 55%), var(--ink-2);
  border-color:rgba(156,106,4,.24);
  box-shadow:var(--shadow-card);
}
[data-theme="jour"] .board::after{ opacity:.09; }
[data-theme="jour"] .board::before{ display:none; }

[data-theme="jour"] .advice{
  background:linear-gradient(155deg, var(--green-soft), var(--ink-2) 62%);
  border-color:rgba(10,115,80,.3);
  box-shadow:var(--shadow-card);
}
[data-theme="jour"] .ride__wait[data-level]{ text-shadow:none; }

[data-theme="jour"] .ride,
[data-theme="jour"] .favcard,
[data-theme="jour"] .showcard,
[data-theme="jour"] .restocard{
  box-shadow:0 1px 2px rgba(60,50,25,.06);
}
[data-theme="jour"] .stat{ background:var(--ink-3); }
[data-theme="jour"] .scrim{ background:rgba(40,34,20,.34); }
[data-theme="jour"] .sheet__handle{ background:rgba(38,34,24,.22); }
[data-theme="jour"] .sparkle{ mix-blend-mode:multiply; }

/* ══════════════════ Sélecteur de thème (réglages) ══════════════════ */

.themecard{
  position:relative; overflow:hidden;
  padding:12px 12px 11px;
  border-radius:var(--radius-m);
  border:2px solid var(--line);
  background:var(--ink-3);
  cursor:pointer; text-align:left;
  font-family:var(--font-ui);
  transition:border-color .18s ease, transform .12s ease;
}
.themecard:active{ transform:scale(.98); }
.themecard[aria-pressed="true"]{ border-color:var(--gold); }
.themecard__swatch{
  display:flex; gap:4px; margin-bottom:9px;
}
.themecard__swatch i{
  width:100%; height:26px; border-radius:7px; display:block;
  border:1px solid rgba(128,128,128,.25);
}
.themecard__name{ display:block; font-size:13px; font-weight:700; color:var(--text); }
.themecard__hint{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; line-height:1.35; }
.themecard__check{
  position:absolute; top:8px; right:8px;
  width:18px; height:18px; border-radius:50%;
  background:var(--gold); color:var(--gold-ink);
  display:none; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.themecard[aria-pressed="true"] .themecard__check{ display:flex; }

/* bouton de bascule de thème (en-tête) */
#btn-theme .ico-sun{ display:none; }
[data-theme="jour"] #btn-theme .ico-moon{ display:none; }
[data-theme="jour"] #btn-theme .ico-sun{ display:block; }

/* ---------------------------------- restaurants (enrichis) ------------------------ */

.restocard{
  display:block;
  padding:13px 14px 11px;
}
.restocard__top{ display:flex; align-items:flex-start; gap:11px; }
.restocard__fav{
  flex:none; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); cursor:pointer; margin-top:1px;
}
.restocard__fav svg{ width:16px; height:16px; }
.restocard__fav[aria-pressed="true"]{
  color:var(--gold); border-color:var(--gold); background:var(--gold-soft);
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
}
.restocard__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px;
  margin-top:4px; font-size:11.5px; color:var(--text-faint);
}
.svc{
  font-size:10px; font-weight:700; letter-spacing:.2px;
  padding:2px 7px; border-radius:999px;
}
.svc[data-svc="table"]{ color:var(--gold-2); background:var(--gold-soft); }
.svc[data-svc="comptoir"]{ color:var(--green); background:var(--green-soft); }
.svc[data-svc="snack"]{ color:var(--grey); background:var(--grey-soft); }

.bookingrow{
  margin:11px 0 0; padding:10px 11px;
  background:var(--ink-3); border-radius:12px;
  border:1px solid var(--line-soft);
}
.slots{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:6px; }
.slots__label{
  font-size:9.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--text-faint);
}
.slot{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  padding:4px 9px; border-radius:8px;
  background:var(--green-soft); color:var(--green);
  border:1px solid rgba(95,227,180,.32);
}
.slot--more{ background:transparent; color:var(--text-faint); border-color:var(--line); }
[data-theme="jour"] .slot{ border-color:rgba(10,115,80,.3); }

.restoactions{
  display:flex; gap:7px; margin-top:11px;
}
.ract{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:11px;
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  text-decoration:none;
  border:1px solid var(--line); background:var(--ink-3); color:var(--text-dim);
  transition:transform .12s ease, background .15s ease;
}
.ract:active{ transform:scale(.97); }
.ract svg{ width:14px; height:14px; flex:none; }
.ract--primary{
  background:linear-gradient(145deg, var(--gold-2), var(--gold));
  color:var(--gold-ink); border-color:transparent; font-weight:700;
}
[data-theme="jour"] .ract--primary{
  background:linear-gradient(145deg, #B07705, #7E5403); color:#FFFFFF;
}
.ract--muted{ opacity:.6; cursor:default; }


/* le bloc 7 jours garde sa place même sans données */
.weekbars:empty::after,
#week-bars:has(.nodata){ min-height:0; }
.weekbars{ min-height:126px; }

/* légende « arrêt » du bloc 7 jours */
.legend-down{ display:inline-flex; align-items:center; gap:4px; }
.legend-down i{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  display:inline-block; box-shadow:0 0 6px rgba(255,124,107,.8);
}

/* ══════════════════ THÈME 3 — NÉON (cyber, contrasté) ══════════════════ */
[data-theme="neon"]{
  --bar-bg:rgba(5,5,16,.94);
  --ink:#050510; --ink-2:#0D0D22; --ink-3:#151534; --ink-4:#232352;
  --line:rgba(0,240,255,.18); --line-soft:rgba(0,240,255,.09);
  --gold:#00E5FF; --gold-2:#6BF3FF; --gold-soft:rgba(0,229,255,.16); --gold-ink:#04121A;
  --green:#3DFFA8; --green-soft:rgba(61,255,168,.16);
  --amber:#FFD447; --amber-soft:rgba(255,212,71,.16);
  --red:#FF3D8B; --red-soft:rgba(255,61,139,.16);
  --grey:#8A8ACB; --grey-soft:rgba(138,138,203,.16);
  --text:#F2F6FF; --text-dim:#B9C4EA; --text-faint:#8189BE;
  --shadow-card:0 1px 0 rgba(0,229,255,.08) inset, 0 14px 34px -16px rgba(0,0,0,.8);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.85);
  --bg-glow-1:rgba(0,229,255,.16); --bg-glow-2:rgba(255,61,139,.12); --bg-glow-3:rgba(123,97,255,.10);
  --stars-opacity:.9;
  --chart-grid:rgba(0,229,255,.09); --chart-grid-strong:rgba(0,229,255,.2);
  --chart-label:rgba(185,196,234,.7); --chart-ghost:rgba(138,138,203,.95);
  --chart-fill-top:rgba(0,229,255,.3); --chart-fill-bottom:rgba(0,229,255,.02);
  --chart-glow:rgba(0,229,255,.65);
  --chart-down-top:rgba(255,61,139,.06); --chart-down-bottom:rgba(255,61,139,.34);
  --chart-down-line:rgba(255,61,139,.8); --chart-now:rgba(242,246,255,.32);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* ══════════════════ THÈME 4 — PARCHEMIN (vintage Main Street) ══════════════════ */
[data-theme="parchemin"]{
  --bar-bg:rgba(237,227,208,.94);
  --ink:#EDE3D0; --ink-2:#FBF6EA; --ink-3:#F1E7D4; --ink-4:#DFD0B4;
  --line:rgba(74,52,28,.18); --line-soft:rgba(74,52,28,.09);
  --gold:#8C5A16; --gold-2:#6E4410; --gold-soft:rgba(140,90,22,.14); --gold-ink:#FFF8EC;
  --green:#2F6B45; --green-soft:rgba(47,107,69,.14);
  --amber:#8A6212; --amber-soft:rgba(138,98,18,.14);
  --red:#9E3320; --red-soft:rgba(158,51,32,.12);
  --grey:#6B5B45; --grey-soft:rgba(107,91,69,.14);
  --text:#2C2013; --text-dim:#57462F; --text-faint:#7A674C;
  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -16px rgba(80,55,20,.5);
  --shadow-pop:0 22px 60px -24px rgba(80,55,20,.5);
  --bg-glow-1:rgba(140,90,22,.14); --bg-glow-2:rgba(47,107,69,.08); --bg-glow-3:rgba(158,51,32,.05);
  --stars-opacity:0;
  --chart-grid:rgba(74,52,28,.1); --chart-grid-strong:rgba(74,52,28,.22);
  --chart-label:rgba(87,70,47,.8); --chart-ghost:rgba(107,91,69,.85);
  --chart-fill-top:rgba(140,90,22,.26); --chart-fill-bottom:rgba(140,90,22,.03);
  --chart-glow:rgba(140,90,22,.3);
  --chart-down-top:rgba(158,51,32,.06); --chart-down-bottom:rgba(158,51,32,.26);
  --chart-down-line:rgba(158,51,32,.7); --chart-now:rgba(44,32,19,.4);
  --grade-1: #0A8F5E;
  --grade-2: #5A8F1E;
  --grade-3: #A87400;
  --grade-4: #C4521A;
  --grade-5: #B32424;
}

/* ══════════════════ THÈME 5 — BONBON (pastel, doux) ══════════════════ */
[data-theme="bonbon"]{
  --bar-bg:rgba(255,240,246,.94);
  --ink:#FFF0F6; --ink-2:#FFFFFF; --ink-3:#FDE9F1; --ink-4:#F6D2E2;
  --line:rgba(120,40,80,.14); --line-soft:rgba(120,40,80,.07);
  --gold:#C2185B; --gold-2:#98104A; --gold-soft:rgba(194,24,91,.12); --gold-ink:#FFFFFF;
  --green:#0F7A63; --green-soft:rgba(15,122,99,.12);
  --amber:#9A6100; --amber-soft:rgba(154,97,0,.12);
  --red:#B32424; --red-soft:rgba(179,36,36,.12);
  --grey:#6D5F68; --grey-soft:rgba(109,95,104,.12);
  --text:#2B1B25; --text-dim:#57414E; --text-faint:#7A6470;
  --shadow-card:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -18px rgba(150,40,100,.45);
  --shadow-pop:0 22px 60px -24px rgba(150,40,100,.4);
  --bg-glow-1:rgba(194,24,91,.12); --bg-glow-2:rgba(15,122,99,.08); --bg-glow-3:rgba(120,90,220,.07);
  --stars-opacity:0;
  --chart-grid:rgba(120,40,80,.1); --chart-grid-strong:rgba(120,40,80,.22);
  --chart-label:rgba(87,65,78,.8); --chart-ghost:rgba(109,95,104,.85);
  --chart-fill-top:rgba(194,24,91,.24); --chart-fill-bottom:rgba(194,24,91,.02);
  --chart-glow:rgba(194,24,91,.3);
  --chart-down-top:rgba(179,36,36,.06); --chart-down-bottom:rgba(179,36,36,.24);
  --chart-down-line:rgba(179,36,36,.7); --chart-now:rgba(43,27,37,.4);
  --grade-1: #0A8F5E;
  --grade-2: #5A8F1E;
  --grade-3: #A87400;
  --grade-4: #C4521A;
  --grade-5: #B32424;
}

/* ══════════════════ THÈME 6 — ENCRE (sobre, sans fioriture) ══════════════════ */
[data-theme="encre"]{
  --bar-bg:rgba(16,16,18,.94);
  --ink:#101012; --ink-2:#1A1A1E; --ink-3:#232329; --ink-4:#33333B;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.07);
  --gold:#E8E8EC; --gold-2:#FFFFFF; --gold-soft:rgba(255,255,255,.12); --gold-ink:#101012;
  --green:#5BD08A; --green-soft:rgba(91,208,138,.15);
  --amber:#E5B85C; --amber-soft:rgba(229,184,92,.15);
  --red:#E8705F; --red-soft:rgba(232,112,95,.15);
  --grey:#8E8E99; --grey-soft:rgba(142,142,153,.15);
  --text:#F5F5F7; --text-dim:#C2C2CC; --text-faint:#8E8E99;
  --shadow-card:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -16px rgba(0,0,0,.7);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.8);
  --bg-glow-1:rgba(255,255,255,.05); --bg-glow-2:rgba(255,255,255,.03); --bg-glow-3:rgba(255,255,255,.02);
  --stars-opacity:0;
  --chart-grid:rgba(255,255,255,.08); --chart-grid-strong:rgba(255,255,255,.18);
  --chart-label:rgba(194,194,204,.7); --chart-ghost:rgba(142,142,153,.9);
  --chart-fill-top:rgba(255,255,255,.16); --chart-fill-bottom:rgba(255,255,255,.01);
  --chart-glow:rgba(255,255,255,.3);
  --chart-down-top:rgba(232,112,95,.06); --chart-down-bottom:rgba(232,112,95,.3);
  --chart-down-line:rgba(232,112,95,.75); --chart-now:rgba(245,245,247,.35);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* Les thèmes clairs partagent les mêmes ajustements que « jour » */

[data-theme="parchemin"] .board::before,
[data-theme="bonbon"] .board::before,
[data-theme="encre"] .board::before{ display:none; }
[data-theme="parchemin"] .brand__mark::after,
[data-theme="bonbon"] .brand__mark::after,
[data-theme="encre"] .brand__mark::after{ display:none; }
[data-theme="parchemin"] .brand__title,
[data-theme="bonbon"] .brand__title{
  background:none; -webkit-text-fill-color:var(--text); color:var(--text); animation:none;
}
[data-theme="encre"] .brand__title{
  background:none; -webkit-text-fill-color:var(--text); color:var(--text); animation:none;
}
[data-theme="parchemin"] .brand__mark,
[data-theme="parchemin"] .ride__wait[data-level],
[data-theme="bonbon"] .ride__wait[data-level],
[data-theme="encre"] .ride__wait[data-level]{ text-shadow:none; }
[data-theme="parchemin"] .scrim,
[data-theme="bonbon"] .scrim{ background:rgba(40,25,15,.32); }

/* grille du sélecteur d'apparence */
.themegrid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:14px; padding:2px;
}
/* Avec douze palettes, la feuille défile d'un seul bloc plutôt que
   d'imbriquer deux zones de défilement. */
#theme-sheet .sheet__scroll{
  flex:1; overflow-y:auto; margin:0 -4px; padding:0 4px;
  -webkit-overflow-scrolling:touch;
}

/* ══════════════════════════════════════════════════════════════════════
   MISES EN PAGE — axe indépendant des couleurs (attribut data-layout)
   Par défaut : "cartes" (l'actuel).
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────── Sélecteur de mise en page ─────────── */
.layoutgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.layoutcard{
  position:relative; overflow:hidden;
  padding:11px; border-radius:var(--radius-m);
  border:2px solid var(--line); background:var(--ink-3);
  cursor:pointer; text-align:left; font-family:var(--font-ui);
  transition:border-color .18s ease, transform .12s ease;
}
.layoutcard:active{ transform:scale(.98); }
.layoutcard[aria-pressed="true"]{ border-color:var(--gold); }
.layoutcard__preview{
  display:flex; flex-direction:column; gap:3px;
  height:36px; margin-bottom:9px; justify-content:center;
}
.layoutcard__preview i{
  display:block; height:5px; border-radius:2px;
  background:var(--text-faint); opacity:.5;
}
.layoutcard[data-layout="compact"] .layoutcard__preview i{ height:3px; }
.layoutcard[data-layout="compact"] .layoutcard__preview{ gap:2px; }
.layoutcard[data-layout="editorial"] .layoutcard__preview i:nth-child(1){ height:9px; width:70%; }
.layoutcard[data-layout="editorial"] .layoutcard__preview{ gap:6px; }
.layoutcard[data-layout="board"] .layoutcard__preview i{ height:6px; border-radius:1px; }
.layoutcard__name{ display:block; font-size:13px; font-weight:700; color:var(--text); }
.layoutcard__hint{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; line-height:1.35; }
.layoutcard__check{
  position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%;
  background:var(--gold); color:var(--gold-ink);
  display:none; align-items:center; justify-content:center; font-size:11px; font-weight:800;
}
.layoutcard[aria-pressed="true"] .layoutcard__check{ display:flex; }

.sheet__section{
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-faint); margin:18px 0 9px;
}

/* ligne « Apparence » dans les réglages */
.settingsrow{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; margin:14px 0 4px;
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--radius-m);
  color:var(--text); font-family:var(--font-ui);
  cursor:pointer; text-align:left;
  transition:transform .12s ease, border-color .15s ease;
}
.settingsrow:active{ transform:scale(.99); }
.settingsrow__icon{
  flex:none; width:36px; height:36px; border-radius:10px;
  background:var(--gold-soft); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.settingsrow__icon svg{ width:19px; height:19px; }
.settingsrow__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.settingsrow__body strong{ font-size:14px; font-weight:600; }
.settingsrow__body span{ font-size:11.5px; color:var(--text-faint); }
.settingsrow__chev{ width:16px; height:16px; color:var(--text-faint); flex:none; }

/* pastille du thème actif sur le bouton d'en-tête */
#btn-theme{ position:relative; }
#btn-theme::after{
  content:""; position:absolute; right:-2px; bottom:-2px;
  width:10px; height:10px; border-radius:50%;
  background:var(--gold); border:2px solid var(--ink);
}
.versiontag{
  margin:14px 0 8px; text-align:center;
  font-size:11px; color:var(--text-faint);
}
.versiontag b{ font-family:var(--font-mono); color:var(--text-dim); }

/* zone de toucher élargie sur les boutons d'en-tête */
.iconbtn{ position:relative; }
.iconbtn::before{
  content:""; position:absolute; inset:-6px;
}

/* aperçus distincts dans le sélecteur de mise en page */
.layoutcard[data-layout="grille"] .layoutcard__preview{
  display:grid; grid-template-columns:1fr 1fr; gap:3px; height:36px;
}
.layoutcard[data-layout="grille"] .layoutcard__preview i{ height:100%; border-radius:3px; }
.layoutcard[data-layout="board"] .layoutcard__preview i:nth-child(even){ width:60%; }
.layoutcard[data-layout="editorial"] .layoutcard__preview i:nth-child(2){ width:45%; }
.layoutcard[data-layout="editorial"] .layoutcard__preview i:nth-child(3),
.layoutcard[data-layout="editorial"] .layoutcard__preview i:nth-child(4){ display:none; }


/* ══════════════════════════════════════════════════════════════════════
   MISES EN PAGE — partis pris radicaux (attribut data-layout)
   Chacune traite la donnée autrement : barre, rail, billet, terminal.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────── BAROMÈTRE : la file devient une barre remplie ─────────────── */
[data-layout="barres"] .lands{ margin:16px 16px 0; }
[data-layout="barres"] .land{ margin-bottom:20px; }
[data-layout="barres"] .ride{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:10px; padding:15px 14px; margin-bottom:6px;
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-left:0; border-radius:10px;
}
/* la barre de remplissage est le fond même de la ligne */
[data-layout="barres"] .ride::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:var(--wait-pct, 0%);
  background:linear-gradient(90deg, var(--land-color, var(--gold)) 0%, transparent 340%);
  opacity:.3;
  transition:width .5s cubic-bezier(.32,.72,0,1);
}
[data-layout="barres"] .ride[data-level="short"]::before{ background:linear-gradient(90deg, var(--green), transparent 340%); }
[data-layout="barres"] .ride[data-level="medium"]::before{ background:linear-gradient(90deg, var(--amber), transparent 340%); }
[data-layout="barres"] .ride[data-level="long"]::before{ background:linear-gradient(90deg, var(--red), transparent 340%); }
[data-layout="barres"] .ride > *{ position:relative; z-index:1; }
[data-layout="barres"] .ride__fav{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; width:26px; height:26px; z-index:2;
}
[data-layout="barres"] .ride__body{ padding-right:34px; }
[data-layout="barres"] .ride__name{ font-size:14px; font-weight:700; }
[data-layout="barres"] .ride__wait{
  font-size:17px; min-width:auto; margin-right:30px;
  display:flex; align-items:baseline; gap:3px;
}
[data-layout="barres"] .ride__wait small{ display:inline; font-size:9px; margin:0; }
[data-layout="barres"] .land__title{ font-size:11px; letter-spacing:1.2px; }
[data-layout="barres"] .board{ border-radius:12px; }
[data-layout="barres"] .parkbtn,[data-layout="barres"] .quickbtn,
[data-layout="barres"] .chip,[data-layout="barres"] .search,
[data-layout="barres"] .select,[data-layout="barres"] .tabbar__btn{ border-radius:8px; }

/* ─────────────── BILLET : souche de ticket perforée ─────────────── */
[data-layout="ticket"] .lands{ margin:16px 16px 0; }
[data-layout="ticket"] .ride{
  position:relative;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:12px;
  padding:14px 16px 14px 15px; margin-bottom:11px;
  background:var(--ink-2);
  border:0; border-radius:6px;
  /* encoches latérales, comme un ticket détaché */
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  box-shadow:var(--shadow-card);
}
/* le talon détachable, à droite */
[data-layout="ticket"] .ride__wait{
  border-left:2px dashed var(--line);
  padding-left:13px; margin-left:2px;
  min-width:66px; font-size:23px;
  display:flex; flex-direction:column; align-items:center;
}
[data-layout="ticket"] .ride__wait small{
  letter-spacing:1.5px; font-size:8px; margin-top:2px;
}
[data-layout="ticket"] .ride__fav{
  position:absolute; left:10px; top:8px;
  width:22px; height:22px; border:0; background:transparent;
}
[data-layout="ticket"] .ride__body{ padding-left:26px; }
[data-layout="ticket"] .ride__name{
  font-family:var(--font-display); font-size:15.5px; font-weight:600;
}
[data-layout="ticket"] .ride__meta{ margin-top:5px; }
[data-layout="ticket"] .land__title{
  font-size:10.5px; letter-spacing:2px;
}
[data-layout="ticket"] .board{
  border-radius:6px;
  -webkit-mask:
    radial-gradient(circle 10px at 0 62%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 62%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 10px at 0 62%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 62%, transparent 98%, #000) right/51% 100% no-repeat;
}
[data-layout="ticket"] .parkbtn,[data-layout="ticket"] .quickbtn,
[data-layout="ticket"] .chip,[data-layout="ticket"] .search,
[data-layout="ticket"] .select{ border-radius:5px; }
[data-layout="ticket"] .tabbar__btn{ border-radius:5px; }
[data-layout="ticket"] .stat{ border-radius:5px; border-style:dashed; }

/* aperçus du sélecteur */
.layoutcard[data-layout="barres"] .layoutcard__preview i:nth-child(1){ width:85%; }
.layoutcard[data-layout="barres"] .layoutcard__preview i:nth-child(2){ width:45%; }
.layoutcard[data-layout="barres"] .layoutcard__preview i:nth-child(3){ width:65%; }
.layoutcard[data-layout="barres"] .layoutcard__preview i:nth-child(4){ width:30%; }
.layoutcard[data-layout="ticket"] .layoutcard__preview i{ height:8px; border-radius:1px; }
.layoutcard[data-layout="ticket"] .layoutcard__preview i:nth-child(3),
.layoutcard[data-layout="ticket"] .layoutcard__preview i:nth-child(4){ display:none; }

/* ══════════════════ Signalement des pannes dans la liste ══════════════════ */

/* Pastille « En panne » avec point qui pulse — distincte d'une fermeture. */
.pill--down{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--red); background:var(--red-soft);
  border:1px solid var(--red);
  font-weight:800;
}
.pill__pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--red); flex:none;
  animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 currentColor; }
  50%{ opacity:.55; transform:scale(.82); box-shadow:0 0 0 4px transparent; }
}

/* La ligne entière signale l'arrêt : liseré rouge et fond très légèrement teinté. */
.ride[data-status="down"]{
  opacity:1;
  border-color:rgba(255,124,107,.35);
  background:
    linear-gradient(90deg, var(--red-soft), transparent 45%),
    var(--ink-2);
}
.ride[data-status="down"] .ride__name{ opacity:.75; }
.ride[data-status="down"] .ride__wait{ color:var(--red); }

/* — Cartes : bande diagonale discrète sur le côté du chiffre — */
[data-layout="cartes"] .ride[data-status="down"]{
  border-left-color:var(--red);
}

/* — Baromètre : la jauge devient une zone hachurée animée — */
[data-layout="barres"] .ride[data-status="down"]{
  background:var(--ink-2);
  border-color:rgba(255,124,107,.4);
}
[data-layout="barres"] .ride[data-status="down"]::before{
  width:100%;
  opacity:.22;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 9px,
    transparent 9px 18px
  );
  animation:hazardSlide 1.1s linear infinite;
}
@keyframes hazardSlide{
  from{ background-position:0 0; }
  to{ background-position:25.5px 0; }   /* 18px * √2 : un motif complet */
}
[data-layout="barres"] .ride[data-status="down"] .ride__wait{
  font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--red); font-weight:800;
}
[data-layout="barres"] .ride[data-status="down"] .ride__wait small{ display:none; }

/* — Billet : le talon est tamponné « ARRÊT » — */
[data-layout="ticket"] .ride[data-status="down"] .ride__wait{
  color:var(--red);
  border-left-color:var(--red);
}
[data-layout="ticket"] .ride[data-status="down"]{
  background:
    linear-gradient(90deg, var(--red-soft), transparent 55%),
    var(--ink-2);
}

/* Pas d'animation si la personne les a désactivées */
@media (prefers-reduced-motion: reduce){
  .pill__pulse,
  [data-layout="barres"] .ride[data-status="down"]::before{ animation:none; }
}

/* ══════════ BILLET — déclinaison sur les autres onglets ══════════ */

/* Encoches latérales réutilisables */
[data-layout="ticket"] .showcard,
[data-layout="ticket"] .restocard,

/* ── Spectacles : les horaires deviennent des coupons détachables ── */
[data-layout="ticket"] .showcard{
  padding:14px 16px; border:0; box-shadow:var(--shadow-card);
}
[data-layout="ticket"] .showcard__name{
  font-family:var(--font-display); font-size:15.5px; font-weight:600;
}
[data-layout="ticket"] .showcard__land{
  font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
}
[data-layout="ticket"] .showtimes{
  padding-top:9px; margin-top:9px;
  border-top-width:2px; border-top-style:dashed; border-top-color:var(--line);
}
[data-layout="ticket"] .showtime-pill{
  border-radius:4px; border:1px dashed var(--line);
  background:transparent; font-weight:700; letter-spacing:.5px;
}

/* ── Restos : la carte devient une addition, avec talon d'état ── */
[data-layout="ticket"] .restocard{
  padding:14px 16px; border:0; box-shadow:var(--shadow-card);
}
[data-layout="ticket"] .restocard__name{
  font-family:var(--font-display); font-size:15.5px; font-weight:600;
}
[data-layout="ticket"] .restocard__meta{
  font-size:10.5px; letter-spacing:.8px; text-transform:uppercase;
}
[data-layout="ticket"] .bookingrow{
  border-radius:0; background:transparent; border:0;
  border-top-width:2px; border-top-style:dashed; border-top-color:var(--line);
  padding:10px 0 2px; margin-top:11px;
}
[data-layout="ticket"] .slot{
  border-radius:4px; border-style:dashed; font-weight:700;
}
[data-layout="ticket"] .ract{ border-radius:4px; border-style:dashed; }
[data-layout="ticket"] .ract--primary{ border-style:solid; }
[data-layout="ticket"] .svc{
  border-radius:3px; letter-spacing:.6px; text-transform:uppercase;
}

/* ── Prévisions : conseil et graphiques en souches ── */
[data-layout="ticket"] .curvebox,
[data-layout="ticket"] .chartbox{ border:0; box-shadow:var(--shadow-card); }
[data-layout="ticket"] .daybtn{ border-radius:4px; }
[data-layout="ticket"] .dayswitch{ border-radius:6px; border-style:dashed; }
[data-layout="ticket"] .weekbar__col{ border-radius:3px; }
[data-layout="ticket"] .weekbar__fill{ border-radius:3px; }

/* ── Fiches et sélecteurs ── */
[data-layout="ticket"] .sheet{ border-radius:8px 8px 0 0; }
[data-layout="ticket"] .btn{ border-radius:5px; }
[data-layout="ticket"] .themecard,
[data-layout="ticket"] .layoutcard{ border-radius:5px; }
[data-layout="ticket"] .settingsrow{ border-radius:5px; border-style:dashed; }
[data-layout="ticket"] .viewhead h1{ font-family:var(--font-display); }
[data-layout="ticket"] .viewhead p{ font-size:11.5px; letter-spacing:.4px; }

/* ══════════════════ THÈME 7 — FORÊT (vert profond, Adventureland) ══════════════════ */
[data-theme="foret"]{
  --bar-bg:rgba(9,19,15,.94);
  --ink:#091310; --ink-2:#12211B; --ink-3:#1A2E26; --ink-4:#274037;
  --line:rgba(240,245,241,.13); --line-soft:rgba(240,245,241,.07);
  --gold:#7FD9A6; --gold-2:#A8E9C6; --gold-soft:rgba(127,217,166,.16); --gold-ink:#08150F;
  --green:#5FE0AE; --green-soft:rgba(95,224,174,.16);
  --amber:#F2C56B; --amber-soft:rgba(242,197,107,.16);
  --red:#FF8E7A; --red-soft:rgba(255,142,122,.16);
  --grey:#93AC9D; --grey-soft:rgba(147,172,157,.16);
  --text:#F0F5F1; --text-dim:#C3D6CA; --text-faint:#93AC9D;
  --shadow-card:0 1px 0 rgba(240,245,241,.04) inset, 0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.75);
  --bg-glow-1:rgba(127,217,166,.13); --bg-glow-2:rgba(242,197,107,.08); --bg-glow-3:rgba(95,224,174,.07);
  --stars-opacity:.7;
  --chart-grid:rgba(240,245,241,.07); --chart-grid-strong:rgba(240,245,241,.15);
  --chart-label:rgba(195,214,202,.7); --chart-ghost:rgba(147,172,157,.9);
  --chart-fill-top:rgba(127,217,166,.28); --chart-fill-bottom:rgba(127,217,166,.02);
  --chart-glow:rgba(127,217,166,.5);
  --chart-down-top:rgba(255,142,122,.05); --chart-down-bottom:rgba(255,142,122,.3);
  --chart-down-line:rgba(255,142,122,.75); --chart-now:rgba(240,245,241,.32);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* ══════════════════ THÈME 8 — CRÉPUSCULE (violet chaud) ══════════════════ */
[data-theme="crepuscule"]{
  --bar-bg:rgba(24,16,32,.94);
  --ink:#181020; --ink-2:#241A2E; --ink-3:#31243F; --ink-4:#463357;
  --line:rgba(247,241,250,.14); --line-soft:rgba(247,241,250,.075);
  --gold:#FFB35C; --gold-2:#FFC98A; --gold-soft:rgba(255,179,92,.17); --gold-ink:#1C1226;
  --green:#6FE0C0; --green-soft:rgba(111,224,192,.16);
  --amber:#FFC978; --amber-soft:rgba(255,201,120,.16);
  --red:#FF7E9D; --red-soft:rgba(255,126,157,.16);
  --grey:#A897B4; --grey-soft:rgba(168,151,180,.16);
  --text:#F7F1FA; --text-dim:#D6C8E0; --text-faint:#A897B4;
  --shadow-card:0 1px 0 rgba(247,241,250,.04) inset, 0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.75);
  --bg-glow-1:rgba(255,179,92,.15); --bg-glow-2:rgba(255,126,157,.11); --bg-glow-3:rgba(111,224,192,.07);
  --stars-opacity:1;
  --chart-grid:rgba(247,241,250,.07); --chart-grid-strong:rgba(247,241,250,.15);
  --chart-label:rgba(214,200,224,.7); --chart-ghost:rgba(168,151,180,.9);
  --chart-fill-top:rgba(255,179,92,.28); --chart-fill-bottom:rgba(255,179,92,.02);
  --chart-glow:rgba(255,179,92,.5);
  --chart-down-top:rgba(255,126,157,.05); --chart-down-bottom:rgba(255,126,157,.3);
  --chart-down-line:rgba(255,126,157,.75); --chart-now:rgba(247,241,250,.32);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* ══════════════════ THÈME 9 — OCÉAN (bleu marine, Nautilus) ══════════════════ */
[data-theme="ocean"]{
  --bar-bg:rgba(8,20,32,.94);
  --ink:#081420; --ink-2:#0E1E2E; --ink-3:#152B40; --ink-4:#1F3F5C;
  --line:rgba(238,246,252,.13); --line-soft:rgba(238,246,252,.07);
  --gold:#59C8F5; --gold-2:#8FDCFA; --gold-soft:rgba(89,200,245,.16); --gold-ink:#06131E;
  --green:#4FE0C4; --green-soft:rgba(79,224,196,.16);
  --amber:#F5C86B; --amber-soft:rgba(245,200,107,.16);
  --red:#FF8A7A; --red-soft:rgba(255,138,122,.16);
  --grey:#8FAAC2; --grey-soft:rgba(143,170,194,.16);
  --text:#EEF6FC; --text-dim:#BFD6E8; --text-faint:#8FAAC2;
  --shadow-card:0 1px 0 rgba(238,246,252,.04) inset, 0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.75);
  --bg-glow-1:rgba(89,200,245,.13); --bg-glow-2:rgba(79,224,196,.09); --bg-glow-3:rgba(143,170,194,.06);
  --stars-opacity:.55;
  --chart-grid:rgba(238,246,252,.07); --chart-grid-strong:rgba(238,246,252,.15);
  --chart-label:rgba(191,214,232,.7); --chart-ghost:rgba(143,170,194,.9);
  --chart-fill-top:rgba(89,200,245,.28); --chart-fill-bottom:rgba(89,200,245,.02);
  --chart-glow:rgba(89,200,245,.5);
  --chart-down-top:rgba(255,138,122,.05); --chart-down-bottom:rgba(255,138,122,.3);
  --chart-down-line:rgba(255,138,122,.75); --chart-now:rgba(238,246,252,.32);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* ══════════════════ THÈME 10 — RUBIS (rouge velours, Phantom Manor) ══════════════════ */
[data-theme="rubis"]{
  --bar-bg:rgba(26,11,17,.94);
  --ink:#1A0B11; --ink-2:#26121A; --ink-3:#341A25; --ink-4:#4B2634;
  --line:rgba(251,240,243,.14); --line-soft:rgba(251,240,243,.075);
  --gold:#FF6B8E; --gold-2:#FF9BB3; --gold-soft:rgba(255,107,142,.16); --gold-ink:#1E0A11;
  --green:#5FE0AE; --green-soft:rgba(95,224,174,.16);
  --amber:#FFB35C; --amber-soft:rgba(255,179,92,.16);
  --red:#FFB35C; --red-soft:rgba(255,179,92,.16);
  --grey:#B295A0; --grey-soft:rgba(178,149,160,.16);
  --text:#FBF0F3; --text-dim:#E3C7D0; --text-faint:#B295A0;
  --shadow-card:0 1px 0 rgba(251,240,243,.04) inset, 0 12px 30px -14px rgba(0,0,0,.65);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.8);
  --bg-glow-1:rgba(255,107,142,.14); --bg-glow-2:rgba(255,179,92,.08); --bg-glow-3:rgba(178,149,160,.06);
  --stars-opacity:.8;
  --chart-grid:rgba(251,240,243,.07); --chart-grid-strong:rgba(251,240,243,.15);
  --chart-label:rgba(227,199,208,.7); --chart-ghost:rgba(178,149,160,.9);
  --chart-fill-top:rgba(255,107,142,.28); --chart-fill-bottom:rgba(255,107,142,.02);
  --chart-glow:rgba(255,107,142,.5);
  --chart-down-top:rgba(255,179,92,.05); --chart-down-bottom:rgba(255,179,92,.3);
  --chart-down-line:rgba(255,179,92,.75); --chart-now:rgba(251,240,243,.32);
  --grade-1: #31C48D;
  --grade-2: #8FD14F;
  --grade-3: #E0A800;
  --grade-4: #F0743C;
  --grade-5: #E23D42;
}

/* ══════════════════ THÈME 11 — SABLE (désert clair, Adventureland) ══════════════════ */
[data-theme="sable"]{
  --bar-bg:rgba(250,243,231,.94);
  --ink:#F5EDDD; --ink-2:#FAF3E7; --ink-3:#F0E6D3; --ink-4:#DCCDB2;
  --line:rgba(36,28,16,.15); --line-soft:rgba(36,28,16,.08);
  --gold:#9C5A12; --gold-2:#7A430B; --gold-soft:rgba(156,90,18,.13); --gold-ink:#FFFFFF;
  --green:#0B7350; --green-soft:rgba(11,115,80,.12);
  --amber:#8A6212; --amber-soft:rgba(138,98,18,.12);
  --red:#B33A1E; --red-soft:rgba(179,58,30,.12);
  --grey:#736550; --grey-soft:rgba(115,101,80,.13);
  --text:#241C10; --text-dim:#4F4232; --text-faint:#736550;
  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -16px rgba(80,60,20,.45);
  --shadow-pop:0 22px 60px -24px rgba(80,60,20,.45);
  --bg-glow-1:rgba(156,90,18,.12); --bg-glow-2:rgba(11,115,80,.07); --bg-glow-3:rgba(179,58,30,.05);
  --stars-opacity:0;
  --chart-grid:rgba(36,28,16,.1); --chart-grid-strong:rgba(36,28,16,.22);
  --chart-label:rgba(79,66,50,.8); --chart-ghost:rgba(115,101,80,.85);
  --chart-fill-top:rgba(156,90,18,.26); --chart-fill-bottom:rgba(156,90,18,.03);
  --chart-glow:rgba(156,90,18,.3);
  --chart-down-top:rgba(179,58,30,.06); --chart-down-bottom:rgba(179,58,30,.26);
  --chart-down-line:rgba(179,58,30,.7); --chart-now:rgba(36,28,16,.4);
  --grade-1: #0A8F5E;
  --grade-2: #5A8F1E;
  --grade-3: #A87400;
  --grade-4: #C4521A;
  --grade-5: #B32424;
}

/* ══════════════════ THÈME 12 — ARDOISE (gris-bleu clair, sobre) ══════════════════ */
[data-theme="ardoise"]{
  --bar-bg:rgba(242,244,246,.94);
  --ink:#E9ECEF; --ink-2:#F7F9FA; --ink-3:#EDF0F3; --ink-4:#D5DBE1;
  --line:rgba(21,26,32,.15); --line-soft:rgba(21,26,32,.08);
  --gold:#2E6FA8; --gold-2:#1F5583; --gold-soft:rgba(46,111,168,.12); --gold-ink:#FFFFFF;
  --green:#0A7350; --green-soft:rgba(10,115,80,.12);
  --amber:#8A6212; --amber-soft:rgba(138,98,18,.12);
  --red:#B33A28; --red-soft:rgba(179,58,40,.12);
  --grey:#5E6B78; --grey-soft:rgba(94,107,120,.13);
  --text:#151A20; --text-dim:#3C4650; --text-faint:#5E6B78;
  --shadow-card:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -16px rgba(20,35,50,.4);
  --shadow-pop:0 22px 60px -24px rgba(20,35,50,.4);
  --bg-glow-1:rgba(46,111,168,.11); --bg-glow-2:rgba(10,115,80,.06); --bg-glow-3:rgba(94,107,120,.05);
  --stars-opacity:0;
  --chart-grid:rgba(21,26,32,.1); --chart-grid-strong:rgba(21,26,32,.22);
  --chart-label:rgba(60,70,80,.8); --chart-ghost:rgba(94,107,120,.85);
  --chart-fill-top:rgba(46,111,168,.24); --chart-fill-bottom:rgba(46,111,168,.02);
  --chart-glow:rgba(46,111,168,.3);
  --chart-down-top:rgba(179,58,40,.06); --chart-down-bottom:rgba(179,58,40,.24);
  --chart-down-line:rgba(179,58,40,.7); --chart-now:rgba(21,26,32,.4);
  --grade-1: #0A8F5E;
  --grade-2: #5A8F1E;
  --grade-3: #A87400;
  --grade-4: #C4521A;
  --grade-5: #B32424;
}

/* Les thèmes clairs partagent les mêmes ajustements */
[data-theme="sable"] .board::before,
[data-theme="ardoise"] .board::before,
[data-theme="sable"] .brand__mark::after,
[data-theme="ardoise"] .brand__mark::after{ display:none; }
[data-theme="sable"] .brand__title,
[data-theme="ardoise"] .brand__title{
  background:none; -webkit-text-fill-color:var(--text); color:var(--text); animation:none;
}
[data-theme="sable"] .brand__mark,
[data-theme="sable"] .ride__wait[data-level],
[data-theme="ardoise"] .ride__wait[data-level]{ text-shadow:none; }
[data-theme="sable"] .scrim,
[data-theme="ardoise"] .scrim{ background:rgba(40,34,20,.32); }
[data-theme="sable"] .btn--primary,
[data-theme="ardoise"] .btn--primary,
[data-theme="sable"] .parkbtn[aria-pressed="true"],
[data-theme="ardoise"] .parkbtn[aria-pressed="true"],
[data-theme="sable"] .daybtn[aria-pressed="true"],
[data-theme="ardoise"] .daybtn[aria-pressed="true"]{
  background:linear-gradient(145deg, var(--gold), var(--gold-2)); color:#FFFFFF;
}
[data-theme="sable"] .parkbtn[aria-pressed="true"] .parkbtn__count,
[data-theme="ardoise"] .parkbtn[aria-pressed="true"] .parkbtn__count{
  background:rgba(255,255,255,.24); color:#FFFFFF;
}

/* ══════════════════ « À faire maintenant » ══════════════════ */

.nownext{ margin:18px 16px 0; }
.nownext__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.nownext__head h2{
  font-family:var(--font-display); font-size:16px; font-weight:600; margin:0;
}
.nownext__hint{ font-size:10.5px; color:var(--text-faint); text-align:right; }
.nownext__list{ display:flex; flex-direction:column; gap:7px; }
.nownext__item{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:12px 13px;
  background:linear-gradient(100deg, var(--green-soft), var(--ink-2) 55%);
  border:1px solid rgba(95,227,180,.28);
  border-left:3px solid var(--land-color, var(--green));
  border-radius:var(--radius-m);
  color:var(--text); font-family:var(--font-ui);
  cursor:pointer; text-align:left;
  transition:transform .12s ease;
}
.nownext__item:active{ transform:scale(.99); }
.nownext__rank{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--green); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; font-weight:800;
}
.nownext__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.nownext__name{
  font-size:14px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nownext__meta{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:11px; color:var(--text-faint);
}
.nownext__gain{
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px;
  background:var(--green-soft); color:var(--green);
}
.nownext__gain--flat{ background:var(--grey-soft); color:var(--grey); font-weight:600; }
.nownext__wait{
  flex:none; font-family:var(--font-mono); font-weight:700; font-size:20px;
  text-align:right; line-height:1;
}
.nownext__wait small{
  display:block; font-family:var(--font-ui); font-size:8.5px;
  font-weight:600; color:var(--text-faint); margin-top:2px;
  text-transform:uppercase; letter-spacing:.4px;
}
.nownext__wait[data-level="short"]{ color:var(--green); }
.nownext__wait[data-level="medium"]{ color:var(--amber); }
.nownext__wait[data-level="long"]{ color:var(--red); }

/* déclinaisons par mise en page */
[data-layout="barres"] .nownext__item{ border-radius:10px; }
[data-layout="ticket"] .nownext__item{
  border:0; border-radius:6px;
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
}
.board__stats--two{ grid-template-columns:1fr 1fr; }

/* ══════════════════ Fiche spectacle ══════════════════ */

.showcard{ cursor:pointer; transition:transform .12s ease; }
.showcard:active{ transform:scale(.99); }

.nextshow{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:3px;
  padding:18px 20px 16px; margin-bottom:16px;
  border-radius:var(--radius-l);
  background:linear-gradient(150deg, var(--gold-soft), var(--ink-2) 62%);
  border:1px solid rgba(245,184,0,.3);
}
.nextshow__label{
  font-size:10.5px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--gold);
}
.nextshow__time{
  font-family:var(--font-mono); font-weight:700; font-size:34px; line-height:1.05;
  color:var(--text);
}
.nextshow__countdown{ font-size:13px; color:var(--text-dim); }

/* la prochaine séance ressort dans la liste des horaires */
.showtime-pill[data-next="true"]{
  background:var(--gold-soft); color:var(--gold);
  border-color:var(--gold); font-weight:800;
}
.showtime-pill[data-past="true"][data-next="false"]{ text-decoration:line-through; }

[data-layout="ticket"] .nextshow{
  border:0; border-radius:6px;
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
}
[data-layout="ticket"] .nextshow__time{ font-family:var(--font-display); }

/* description du spectacle */
.shownote{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  margin:14px 0 16px; padding:15px 17px 15px 18px;
  font-size:13.5px; line-height:1.62; color:var(--text-dim);
  background:var(--ink-3);
  border-radius:var(--radius-m);
  border-left:3px solid var(--gold);
}
.shownote__facts{
  display:flex; flex-wrap:wrap; gap:6px;
}
.shownote__facts span{
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
  padding:3px 9px; border-radius:999px;
  background:var(--gold-soft); color:var(--gold);
}
.shownote__tip{
  display:block; padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--text-faint); line-height:1.5;
}
.shownote__tip::before{ content:"→ "; color:var(--gold); font-weight:700; }
.shownote::before{
  content:"✦";
  position:absolute; top:11px; right:13px;
  font-size:12px; color:var(--gold); opacity:.55;
}
.shownote:empty{ display:none; }
[data-layout="ticket"] .shownote{
  border-left-style:dashed; border-radius:5px;
}
[data-layout="editorial"] .shownote{
  background:transparent; border-left:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; padding:14px 2px; font-style:italic;
}

/* horaires d'ouverture dans la fiche attraction */
.ridehours{
  display:inline-flex; align-items:center; gap:6px;
  margin:2px 0 14px; padding:6px 12px;
  font-size:12px; font-weight:600; color:var(--text-dim);
  background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:999px;
}
.ridehours::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--green); flex:none;
}
.ridehours[hidden]{ display:none; }

/* ══════════════════ Tendance en haut de la fiche attraction ══════════════════ */

.ridetrend{
  display:flex; align-items:center; gap:12px;
  margin:2px 0 16px; padding:13px 15px;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
}
.ridetrend[hidden]{ display:none; }
.ridetrend__icon{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; font-family:var(--font-mono);
}
.ridetrend__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ridetrend__head{ font-size:13.5px; font-weight:700; line-height:1.25; }
.ridetrend__sub{ font-size:11.5px; color:var(--text-faint); }
.ridetrend__delta{
  flex:none; font-family:var(--font-mono); font-weight:800; font-size:17px;
  padding:5px 10px; border-radius:10px;
}

/* Palette selon le niveau — vert = bon moment, rouge = à éviter */
.ridetrend[data-level="great"]{ background:var(--green-soft); border-color:var(--green); }
.ridetrend[data-level="great"] .ridetrend__icon,
.ridetrend[data-level="great"] .ridetrend__delta{ background:var(--green); color:var(--ink); }
.ridetrend[data-level="great"] .ridetrend__head{ color:var(--green); }

.ridetrend[data-level="good"]{ background:var(--green-soft); }
.ridetrend[data-level="good"] .ridetrend__icon,
.ridetrend[data-level="good"] .ridetrend__delta{ background:var(--green-soft); color:var(--green); }

.ridetrend[data-level="flat"] .ridetrend__icon,
.ridetrend[data-level="flat"] .ridetrend__delta{ background:var(--grey-soft); color:var(--grey); }

.ridetrend[data-level="bad"]{ background:var(--amber-soft); }
.ridetrend[data-level="bad"] .ridetrend__icon,
.ridetrend[data-level="bad"] .ridetrend__delta{ background:var(--amber-soft); color:var(--amber); }

.ridetrend[data-level="awful"]{ background:var(--red-soft); border-color:var(--red); }
.ridetrend[data-level="awful"] .ridetrend__icon,
.ridetrend[data-level="awful"] .ridetrend__delta{ background:var(--red); color:#fff; }
.ridetrend[data-level="awful"] .ridetrend__head{ color:var(--red); }

[data-layout="ticket"] .ridetrend{
  border:0; border-radius:6px;
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
}

/* ══════════════════ Fiche défilable, compacte sur petit écran ══════════════════ */

/* Le contenu défile entre le titre (haut, fixe) et les boutons (bas, fixes). */
.sheet__scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  margin:0 -4px; padding:0 4px;
}
/* les boutons ne rétrécissent pas et restent visibles */
.sheet > .btn{ flex:none; }

/* marges resserrées dans la fiche attraction pour tenir sur un écran */
#ride-sheet .ridetrend{ margin:2px 0 12px; padding:11px 13px; }
#ride-sheet .board__stats{ margin:4px 0 12px !important; }
#ride-sheet .stat{ padding:9px 10px; }
#ride-sheet .chartbox{ padding:12px 11px 9px; margin-bottom:12px; }
#ride-sheet .chartbox:last-of-type{ margin-bottom:6px; }
#ride-sheet .weekbars{ height:104px; }
#ride-sheet .ridehours{ margin:0 0 12px; }
#ride-sheet .btn{ margin-top:8px; }
#ride-sheet .btn + .btn{ margin-top:6px; }

/* la poignée reste bien visible en haut */
#ride-sheet .sheet__handle{ margin:4px auto 10px; }
#ride-sheet h3{ margin-bottom:2px; }

/* ══════════════════ Fiche compacte — mini-stats + graphique à onglets ══════════════════ */

/* trois chiffres sur une ligne, sans cartes */
.ministats{
  display:flex; align-items:baseline; gap:0;
  margin:0 0 14px; padding:2px 0;
}
.ministat{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:1px;
  position:relative;
}
.ministat + .ministat::before{
  content:""; position:absolute; left:0; top:15%; bottom:15%;
  width:1px; background:var(--line);
}
.ministat__v{ font-family:var(--font-mono); font-weight:700; font-size:22px; line-height:1; color:var(--text); }
.ministat:first-child .ministat__v{ color:var(--gold-2); }
.ministat__l{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; }

/* onglets du graphique */
/* fiche compacte : tendance + 3 chiffres + 2 graphiques, sans défiler */
#ride-sheet .ridetrend{ margin:0 0 10px; padding:9px 12px; }
#ride-sheet .ridehours{ margin:0 0 9px; }
#ride-sheet .ministats{ margin:0 0 11px; }
#ride-sheet .chartbox{ padding:10px 12px 7px; margin-bottom:10px; }
#ride-sheet .chartbox:last-of-type{ margin-bottom:2px; }
#ride-sheet .chartbox__head{ margin-bottom:7px; }
#ride-sheet .weekbars{ height:84px; }
#ride-sheet .weekbar__val{ font-size:9.5px; }
#ride-sheet .weekbar__day{ font-size:8.5px; }
#ride-sheet .btn{ margin-top:7px; padding:11px; }
#ride-sheet .btn + .btn{ margin-top:5px; }

/* ══════════════════ Prévisions — bannière conseil compacte ══════════════════ */

.fcadvice{
  display:flex; align-items:center; gap:12px;
  margin:0 16px 14px; padding:12px 14px;
  border-radius:var(--radius-m);
  background:linear-gradient(120deg, var(--green-soft), var(--ink-2) 60%);
  border:1px solid rgba(95,227,180,.28);
}
.fcadvice[hidden]{ display:none; }
.fcadvice__badge{
  flex:none; font-family:var(--font-mono); font-weight:700; font-size:15px;
  padding:7px 11px; border-radius:10px;
  background:var(--green); color:var(--ink);
}
.fcadvice__badge[data-level="medium"]{ background:var(--amber); }
.fcadvice__badge[data-level="long"]{ background:var(--red); color:#fff; }
.fcadvice__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fcadvice__text b{ font-size:14px; font-weight:700; line-height:1.25; }
.fcadvice__text span{ font-size:12px; color:var(--text-faint); line-height:1.4; }

[data-layout="ticket"] .fcadvice{
  border:0; border-radius:6px;
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
}

/* ══════════════════ Prévisions — liste d'attractions cliquables ══════════════════ */

#forecast-list{ margin:14px 16px 0; }
.fcrow{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:13px 14px; margin-bottom:7px;
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-left:3px solid var(--land-color, var(--line));
  border-radius:var(--radius-m);
  color:var(--text); cursor:pointer; text-align:left;
  font-family:var(--font-ui);
  transition:transform .1s ease, border-color .15s ease;
}
.fcrow:active{ transform:scale(.99); }
.fcrow__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fcrow__name{ font-size:14.5px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fcrow__land{ font-size:11.5px; color:var(--text-faint); }
.fcrow__wait small{ font-family:var(--font-ui); font-size:8.5px; color:var(--text-faint); margin-left:1px; }
.fcrow__wait[data-level="short"]{ color:var(--green); }
.fcrow__wait[data-level="medium"]{ color:var(--amber); }
.fcrow__wait[data-level="long"]{ color:var(--red); }
.fcrow__chev{ width:16px; height:16px; color:var(--text-faint); flex:none; }

/* dans la fiche prévision, la courbe et le conseil sont resserrés */
#forecast-sheet .dayswitch{ margin:0 0 12px; }
#forecast-sheet .fcadvice{ margin:0 0 12px; }
#forecast-sheet .curvebox{ margin:0; }


/* ══════════════════ Prévisions — deux chiffres : maintenant vs d'habitude ══════════════════ */

.fcrow{ align-items:center; padding:12px 12px 12px 14px; }
#forecast-list .fcrow__body{ gap:2px; }

.cmp{
  flex:none; display:flex; align-items:stretch; gap:0;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--line);
}
.cmp-col{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 11px; min-width:62px;
  background:var(--ink-3);
}
.cmp-col--now{ background:var(--ink-2); }
.cmp-col + .cmp-col{ border-left:1px solid var(--line); }
.cmp-col__v{ font-family:var(--font-mono); font-weight:700; font-size:17px; line-height:1; color:var(--text); }
.cmp-col__v small{ font-family:var(--font-ui); font-size:9px; font-weight:600; color:var(--text-faint); }
.cmp-col__l{ font-size:9px; color:var(--text-faint); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.cmp-col--empty .cmp-col__v{ color:var(--text-faint); }

/* la colonne « maintenant » se colore selon la comparaison */
.cmp[data-state="good"] .cmp-col--now{ background:var(--green-soft); }
.cmp[data-state="good"] .cmp-col--now .cmp-col__v{ color:var(--green); }
.cmp[data-state="bad"] .cmp-col--now{ background:var(--red-soft); }
.cmp[data-state="bad"] .cmp-col--now .cmp-col__v{ color:var(--red); }

.fcrow__chev{ width:16px; height:16px; color:var(--text-faint); flex:none; margin-left:4px; }

/* ══════════════════ Billet — déclinaison sur les Prévisions ══════════════════ */

/* les lignes de la liste deviennent des tickets perforés */
[data-layout="ticket"] .fcrow{
  border:0; border-radius:6px; margin-bottom:9px;
  -webkit-mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
}
[data-layout="ticket"] .fcrow__name{ font-family:var(--font-display); }
/* le comparatif est séparé comme un talon détachable */
[data-layout="ticket"] .cmp{
  border:0; border-left:2px dashed var(--line); border-radius:0;
  overflow:visible;
}
[data-layout="ticket"] .cmp-col{ background:transparent; border-left:0; }
[data-layout="ticket"] .cmp-col + .cmp-col{ border-left:1px dashed var(--line); }
[data-layout="ticket"] .cmp-col__v{ font-family:var(--font-mono); }
[data-layout="ticket"] .fchint{ font-style:italic; }

/* fiche prévision : conseil et courbe perforés (déjà pour .fcadvice/.curvebox
   via les règles génériques, on ajoute la ligne de titre) */
[data-layout="ticket"] #forecast-sheet h3{ font-family:var(--font-display); }

/* ══════════════════ Prévisions — 5 nuances de temps ══════════════════ */
/* g1 ≤10 · g2 ≤25 · g3 ≤40 · g4 ≤60 · g5 >60 min — via variables de thème */

.cmp-col__v[data-grade="g1"]{ color:var(--grade-1); }
.cmp-col__v[data-grade="g2"]{ color:var(--grade-2); }
.cmp-col__v[data-grade="g3"]{ color:var(--grade-3); }
.cmp-col__v[data-grade="g4"]{ color:var(--grade-4); }
.cmp-col__v[data-grade="g5"]{ color:var(--grade-5); }

/* la colonne « habituel » garde ses nuances mais atténuées (référence) */
.cmp-col:not(.cmp-col--now) .cmp-col__v{ opacity:.72; }


/* ═══════════════════ Le conte de la veille ═══════════════════ */

/* pastille "nouveau conte" sur le bouton d'en-tête */
.iconbtn__pip{
  position:absolute; top:-2px; right:-2px;
  width:10px; height:10px; border-radius:50%;
  background:var(--gold); border:2px solid var(--ink);
  animation:pulseDot 1.8s ease-in-out infinite;
}
.iconbtn__pip[hidden]{ display:none; }

.storysheet{ padding-top:8px; }
.story__head{
  text-align:center; padding:6px 4px 14px;
  border-bottom:1px solid var(--line-soft); margin-bottom:6px;
}
.story__kicker{
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin:0 0 4px;
}
.story__head h3{
  font-family:var(--font-display); font-size:22px; font-weight:600;
  margin:0; letter-spacing:-.3px;
}
.story__date{
  font-size:12.5px; color:var(--text-faint); margin:4px 0 0;
  text-transform:capitalize; font-style:italic;
}
.story__loading, .story__empty{
  text-align:center; color:var(--text-faint); padding:32px 16px; line-height:1.6;
}

.storycard{
  display:flex; gap:13px; align-items:flex-start;
  padding:15px 4px;
  border-bottom:1px dashed var(--line-soft);
}
.storycard:last-of-type{ border-bottom:0; }
.storycard__icon{
  flex:none; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(245,184,0,.2);
}
.storycard__text{ flex:1; min-width:0; }
.storycard__text h4{
  font-family:var(--font-display); font-size:15px; font-weight:600;
  margin:2px 0 6px;
}
.storycard__facts{
  font-size:13.5px; line-height:1.55; color:var(--text-dim); margin:0 0 6px;
}
.storycard__facts b{ color:var(--text); font-weight:700; }
.storycard__mood{
  font-size:12.5px; line-height:1.5; color:var(--text-faint);
  font-style:italic; margin:0;
  padding-left:10px; border-left:2px solid var(--gold);
}
.story__foot{
  text-align:center; font-family:var(--font-display); font-style:italic;
  color:var(--gold); font-size:13px; margin:18px 0 4px; letter-spacing:.5px;
}

/* déclinaison billet : le livre devient parcheminé */
[data-layout="ticket"] .storycard__icon{
  border-radius:6px;
  -webkit-mask:radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
}

/* ═══════════════ Conte enrichi : hero, répartition, podium ═══════════════ */

.storyhero{ padding:6px 4px 16px; border-bottom:1px dashed var(--line-soft); }
.story__hero{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.story__big{ display:flex; flex-direction:column; align-items:center; flex:none; }
.story__big b{ font-family:var(--font-mono); font-weight:700; font-size:40px; line-height:1; color:var(--gold-2); }
.story__big small{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
.story__meta{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-dim); }

/* barre de répartition de la journée */
.story__bar{ display:flex; height:12px; border-radius:6px; overflow:hidden; margin:4px 0 8px; background:var(--ink-3); }
.story__bar span{ height:100%; transition:width .4s ease; }
.story__bar span[data-lvl="green"]{ background:var(--green); }
.story__bar span[data-lvl="amber"]{ background:var(--amber); }
.story__bar span[data-lvl="red"]{ background:var(--red); }
.story__barleg{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--text-faint); }
.story__barleg i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.story__barleg i[data-lvl="green"]{ background:var(--green); }
.story__barleg i[data-lvl="amber"]{ background:var(--amber); }
.story__barleg i[data-lvl="red"]{ background:var(--red); }

/* podium */
.podium{ display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.podium__row{ display:flex; align-items:center; gap:9px; }
.podium__m{ font-size:16px; flex:none; }
.podium__n{ flex:1; font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium__v{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--text-dim); flex:none; }

/* ═══════════════ Conte : le grand registre (détail par attraction) ═══════════════ */

.storycard--full{ display:block; }
.dt-table{ display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border-radius:10px; overflow:hidden; }
.dt-row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:9px 11px; background:var(--ink-2);
}
.dt-row:has(.dt-badges){ grid-template-columns:1fr auto; }
.dt-main{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.dt-name{ font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-land{ font-size:10.5px; color:var(--text-faint); }
.dt-nums{ display:flex; align-items:baseline; gap:12px; flex:none; }
.dt-avg{ font-family:var(--font-mono); font-weight:700; font-size:16px; display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.dt-avg small, .dt-max small{ font-family:var(--font-ui); font-size:8px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }
.dt-avg[data-level="short"]{ color:var(--green); }
.dt-avg[data-level="medium"]{ color:var(--amber); }
.dt-avg[data-level="long"]{ color:var(--red); }
.dt-max{ font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--text-dim); display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.dt-badges{ grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.dt-badge{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; }
.dt-down{ background:var(--red-soft); color:var(--red); }
.dt-high{ background:var(--amber-soft); color:var(--amber); }

/* ═══════════════════ Le brief du jour ═══════════════════ */

.brief-hrow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; font-size:13px; }
.brief-hrow span{ color:var(--text-dim); }
.brief-hrow b{ font-family:var(--font-mono); color:var(--text); font-size:13px; }

.brief-weather{ display:flex; flex-direction:column; gap:2px; }
.bw-temp{ font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--gold-2); }
.bw-desc{ font-size:12.5px; color:var(--text-dim); }

.brief-crowd{ display:flex; flex-direction:column; gap:3px; padding:8px 11px; border-radius:10px; }
.brief-crowd[data-c="green"]{ background:var(--green-soft); }
.brief-crowd[data-c="amber"]{ background:var(--amber-soft); }
.brief-crowd[data-c="red"]{ background:var(--red-soft); }
.brief-crowd b{ font-size:14px; }
.brief-crowd[data-c="green"] b{ color:var(--green); }
.brief-crowd[data-c="amber"] b{ color:var(--amber); }
.brief-crowd[data-c="red"] b{ color:var(--red); }
.brief-crowd span{ font-size:11.5px; color:var(--text-faint); }

.brief-note{ font-size:11px; color:var(--text-faint); font-style:italic; margin:6px 0 0; }
.brief-empty-line{ font-size:12.5px; color:var(--text-faint); margin:0; }

.brief-closedlist{ display:flex; flex-direction:column; gap:1px; margin-top:2px; }
.brief-closed{ display:flex; flex-direction:column; gap:1px; padding:7px 0; border-bottom:1px dashed var(--line-soft); }
.brief-closed:last-child{ border-bottom:0; }
.bc-name{ font-size:13px; font-weight:600; color:var(--text); }
.bc-meta{ font-size:11px; color:var(--text-faint); }

/* météo enrichie */
.bw-slices{ display:flex; gap:8px; margin-top:10px; }
.bw-slice{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; background:var(--ink-3); border-radius:10px; }
.bw-sl-ic{ font-size:17px; }
.bw-sl-t{ font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--text); }
.bw-sl-l{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.2px; }
.bw-sl-r{ font-size:9px; color:var(--blue,#5FD1FF); font-weight:700; }
.bw-alert{ margin:10px 0 0; padding:8px 10px; background:var(--amber-soft); border-radius:8px; font-size:11.5px; color:var(--amber); line-height:1.4; }
.bw-details{ display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; font-size:11.5px; color:var(--text-dim); }

/* tags vacances/fériés */
.eh-tags{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.eh-tag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.eh-ferie{ background:var(--red-soft); color:var(--red); }
.eh-vacances{ background:var(--amber-soft); color:var(--amber); }