/* ==========================================================================
   Studio Lananas — la scène (scene.js), dans les trois thèmes.
   Nuit et jour, version sobre : seulement les feuillages qui se balancent et
   quelques lucioles (ou du pollen le jour).
   Tropical, version complète : coucher de soleil rétro sur le lagon, mer et reflets,
   hibiscus éclatants, lucioles.
   Toutes les couleurs passent par les variables --sc-* ci-dessous.
   ========================================================================== */

/* ---------- ambiance nuit (référence) ---------- */
:root {
  --sc-palme: #18251D;
  --sc-palme-tige: #121C16;
  --sc-avant: #0C1510;
  --sc-tige: #0A120D;
  --sc-veine: rgba(200, 230, 190, 0.1);
  --sc-s1: #2A4A33;
  --sc-s2: #14261A;
  --sc-s3: #090F0B;
  --sc-h1: #4A0B22;
  --sc-h2: #8E2445;
  --sc-h3: #C2505C;
  --sc-h4: #E08A80;
  --sc-coeur: #3A0516;
  --sc-pistil: #E9C66E;
  --sc-pollen: #F6E3A4;

  /* La lune, sa lumière, sa mer */
  --sc-astre: radial-gradient(circle at 36% 32%, #FFFBEF 0, #F6E9C6 38%, #E2CF9C 72%, #C9B27A 100%);
  --sc-cratere: radial-gradient(circle at 62% 58%, rgba(170, 145, 90, 0.35) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 70%, rgba(170, 145, 90, 0.25) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 30%, rgba(170, 145, 90, 0.22) 0 5%, transparent 6%);
  --sc-masque: none;
  --sc-ciel-1: rgba(243, 226, 175, 0.2);
  --sc-ciel-2: rgba(200, 190, 140, 0.08);
  --sc-ciel-3: rgba(120, 140, 120, 0.04);
  --sc-ciel-bas: rgba(140, 160, 130, 0.05);
  --sc-v1: rgba(110, 140, 115, 0.3);
  --sc-v2: #151E18;
  --sc-reflet-1: #F3E6C0;
  --sc-reflet-2: #C9B27A;
  --sc-luciole: #FFE7A3;
  --sc-luciole-ombre: 0 0 8px 2px rgba(255, 214, 120, 0.55), 0 0 22px 6px rgba(242, 179, 61, 0.18);
  --sc-lueur-1: rgba(243, 226, 175, 0.1);
  --sc-lueur-2: rgba(127, 192, 138, 0.06);
  --sc-contour: rgba(10, 14, 11, 0.65);
}

/* ---------- ambiance jour ---------- */
:root[data-mode="jour"] {
  --sc-palme: #A9D3B0;
  --sc-palme-tige: #8EC09A;
  --sc-avant: #3E9160;
  --sc-tige: #2A6B45;
  --sc-veine: rgba(255, 255, 255, 0.4);
  --sc-s1: #7CCB93;
  --sc-s2: #349159;
  --sc-s3: #1C5E3B;
  --sc-h1: #9E1240;
  --sc-h2: #E8345E;
  --sc-h3: #FF6F61;
  --sc-h4: #FFB199;
  --sc-coeur: #7A0A30;
  --sc-pistil: #F2B33D;
  --sc-pollen: #FFE07A;

  --sc-astre: radial-gradient(circle at 50% 50%, #FFFEF6 0, #FFF1B8 30%, #FFD66B 64%, #FFC23D 100%);
  --sc-cratere: none;
  --sc-ciel-1: rgba(255, 214, 110, 0.42);
  --sc-ciel-2: rgba(255, 190, 90, 0.16);
  --sc-ciel-3: rgba(110, 200, 190, 0.08);
  --sc-ciel-bas: rgba(120, 205, 195, 0.12);
  --sc-v1: rgba(79, 179, 166, 0.45);
  --sc-v2: #9AD9CE;
  --sc-reflet-1: #FFFFFF;
  --sc-reflet-2: #FFE7A0;
  --sc-luciole: rgba(169, 106, 14, 0.5);
  --sc-luciole-ombre: none;
  --sc-lueur-1: rgba(255, 214, 110, 0.22);
  --sc-lueur-2: rgba(79, 179, 166, 0.12);
  --sc-contour: rgba(26, 30, 26, 0.3);
}

/* ---------- ambiance tropicale ---------- */
:root[data-mode="tropical"] {
  --sc-palme: #11473A;
  --sc-palme-tige: #0E3E33;
  --sc-avant: #0A3B2E;
  --sc-tige: #05201B;
  --sc-veine: rgba(170, 245, 205, 0.16);
  --sc-s1: #2E8F67;
  --sc-s2: #0F4B3A;
  --sc-s3: #062A21;
  --sc-h1: #6E0A2E;
  --sc-h2: #D42A5B;
  --sc-h3: #FF6F61;
  --sc-h4: #FFA585;
  --sc-coeur: #5A0624;
  --sc-pistil: #FFD166;
  --sc-pollen: #FFE59A;

  --sc-astre: linear-gradient(#FFEDB0, #FFCB52 30%, #FF9A4D 62%, #FF5F6D);
  --sc-cratere: none;
  --sc-masque: linear-gradient(#000 0 52%, transparent 52%), repeating-linear-gradient(#000 0 13px, transparent 13px 19px);
  --sc-ciel-1: rgba(255, 200, 115, 0.5);
  --sc-ciel-2: rgba(255, 125, 90, 0.24);
  --sc-ciel-3: rgba(214, 70, 110, 0.1);
  --sc-ciel-bas: rgba(255, 150, 90, 0.14);
  --sc-v1: rgba(38, 140, 128, 0.42);
  --sc-v2: #0D3A37;
  --sc-reflet-1: #FFD27A;
  --sc-reflet-2: #FFB35C;
  --sc-luciole: #FFE9A8;
  --sc-luciole-ombre: 0 0 8px 2px rgba(255, 214, 120, 0.55), 0 0 22px 6px rgba(255, 170, 80, 0.18);
  --sc-lueur-1: rgba(255, 160, 95, 0.2);
  --sc-lueur-2: rgba(63, 214, 180, 0.1);
  --sc-contour: rgba(8, 36, 34, 0.6);
}

/* La scène est posée sous le contenu : le fond de la page vient de <html>.
   Les feuillages qui dépassent des bords ne doivent jamais élargir la page. */
html { overflow-x: clip; }
body { background: transparent; }

.tropique { pointer-events: none; }

/* ---------- couleurs des plantes ---------- */

.tropique .tq-limbe { fill: var(--sc-palme); }
.tq-scene .tq-tige { stroke: var(--sc-palme-tige); }
.tq-avant .tq-limbe,
.tq-cadre .tq-limbe,
.tq-bord .tq-limbe { fill: var(--sc-avant); }
.tropique .tq-tige { fill: none; stroke: var(--sc-tige); stroke-linecap: round; }
.tropique .tq-veine { fill: none; stroke: var(--sc-veine); stroke-linecap: round; }
.tropique .tq-s1 { stop-color: var(--sc-s1); }
.tropique .tq-s2 { stop-color: var(--sc-s2); }
.tropique .tq-s3 { stop-color: var(--sc-s3); }
.tropique .tq-h1 { stop-color: var(--sc-h1); }
.tropique .tq-h2 { stop-color: var(--sc-h2); }
.tropique .tq-h3 { stop-color: var(--sc-h3); }
.tropique .tq-h4 { stop-color: var(--sc-h4); }
.tropique .tq-coeur { fill: var(--sc-coeur); }
.tropique .tq-pistil { fill: none; stroke: var(--sc-pistil); stroke-linecap: round; }
.tropique .tq-pollen { fill: var(--sc-pollen); }

/* Changement de thème : les couleurs glissent de l’une à l’autre. */
.tropique path,
.tropique circle,
.tropique stop { transition: fill 700ms ease, stroke 700ms ease, stop-color 700ms ease; }

/* ---------- pièces : ancrage, profondeur, entrée, balancement ---------- */

.tq-piece {
  position: absolute;
  max-width: none;
  overflow: visible;
  translate: calc(var(--tq-x, 0) * var(--prof, 0) * -1px) calc(var(--tq-y, 0) * var(--prof, 0) * -0.6px);
  transition: translate 1400ms var(--ease);
  animation: tq-entree 1800ms var(--ease) both;
  animation-delay: var(--ent, 0ms);
}
@keyframes tq-entree { from { opacity: 0; scale: 0.8; } }

.tq-balance { animation: tq-balance var(--dur) ease-in-out var(--del) infinite alternate; }
@keyframes tq-balance {
  from { rotate: calc(var(--amp) * -1); }
  to { rotate: var(--amp); }
}

.tq-coin-hg { top: -2vw; left: -5vw; width: clamp(260px, 36vw, 640px); transform-origin: 0 0; }
.tq-coin-hd { top: -2vw; right: -5vw; width: clamp(240px, 34vw, 600px); transform-origin: 100% 0; }
.tq-sol-g { bottom: -3vw; left: -4vw; width: clamp(220px, 30vw, 560px); transform-origin: 0 100%; }
.tq-sol-d { bottom: -3vw; right: -5vw; width: clamp(200px, 26vw, 500px); transform-origin: 100% 100%; }

/* ---------- l’ouverture de l’accueil ---------- */

.page-home .fruit { z-index: 1; }
:root[data-mode="tropical"] .ouverture { padding-bottom: clamp(120px, 13vw, 180px); }
:root[data-mode="tropical"] .defiler,
:root[data-mode="tropical"] .fruit__legende { display: none; }
/* Un fin contour : l’ananas se détache sur le soleil. */
:root[data-mode="tropical"] .fruit .a-pt { stroke: var(--sc-contour); stroke-width: 2.5px; paint-order: stroke; }

.tq-scene,
.tq-avant {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  overflow: hidden;
}
.tq-scene { z-index: 0; }
.tq-avant { z-index: 1; }

/* Le ciel s’éclaire autour de l’astre, le haut reste calme pour les textes. */
.tq-ciel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(calc(var(--sr, 400px) * 1.9) calc(var(--sr, 400px) * 1.25) at var(--sx, 75%) var(--sy, 85%),
      var(--sc-ciel-1), var(--sc-ciel-2) 38%, var(--sc-ciel-3) 62%, transparent 80%),
    linear-gradient(to bottom, transparent 30%, var(--sc-ciel-bas));
  animation: tq-apparait 2000ms ease both;
  transition: background 700ms ease;
}
@keyframes tq-apparait { from { opacity: 0; } }

/* L’astre : lune la nuit, soleil le jour, soleil rétro rayé en tropical. */
.tq-soleil {
  position: absolute;
  left: var(--sx, 75%);
  top: var(--sy, 85%);
  width: var(--sr, 400px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--sc-cratere), var(--sc-astre);
  -webkit-mask: var(--sc-masque);
  mask: var(--sc-masque);
  animation: tq-leve 2400ms var(--ease) both, tq-souffle 9s ease-in-out 2400ms infinite;
}
@keyframes tq-leve { from { opacity: 0; translate: -50% -20%; } }
@keyframes tq-souffle { 50% { scale: 1.025; } }

/* La mer : deux houles qui passent devant l’astre, des reflets, puis le rivage
   de la couleur de la page, pour une transition sans couture. */
.tq-mer,
.tq-rivage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hv, 130px);
  overflow: hidden;
}
.tq-vague {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none; /* base.css limite les SVG à 100 % : la vague doit faire deux largeurs pour boucler */
  height: 100%;
  animation: tq-houle var(--houle, 20s) linear infinite;
}
@keyframes tq-houle { to { translate: -50% 0; } }
.tq-v1 { --houle: 38s; }
.tq-v1 .tq-flot { fill: var(--sc-v1); }
.tq-v15 { --houle: 27s; animation-direction: reverse; }
.tq-v15 .tq-flot { fill: color-mix(in oklab, var(--sc-v1) 50%, var(--sc-v2)); }
.tq-v2 { --houle: 21s; }
.tq-v2 .tq-flot { fill: var(--sc-v2); }
.tq-v3 { --houle: 15s; animation-direction: reverse; }
.tq-v3 .tq-flot { fill: var(--paper); }
/* Écume : un liseré de lumière sur la crête de chaque vague, plus vif près de l’horizon. */
.tq-ecume {
  fill: none;
  stroke: rgba(255, 214, 150, 0.32);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.tq-v1 .tq-ecume { stroke: rgba(255, 220, 160, 0.45); }
.tq-v2 .tq-ecume { stroke: rgba(255, 200, 140, 0.22); }
.tq-v3 .tq-ecume { stroke: rgba(63, 214, 180, 0.18); }

.tq-reflets {
  position: absolute;
  left: var(--sx, 75%);
  bottom: calc(var(--hv, 130px) * 0.2);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: calc(var(--hv, 130px) * 0.07);
}
.tq-reflets i {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--sc-reflet-1) 30%, var(--sc-reflet-2) 70%, transparent);
  animation: tq-scintille 2.6s ease-in-out infinite alternate;
}
.tq-reflets i:nth-child(1) { width: calc(var(--sr, 400px) * 0.7); }
.tq-reflets i:nth-child(2) { width: calc(var(--sr, 400px) * 0.52); animation-delay: -0.6s; }
.tq-reflets i:nth-child(3) { width: calc(var(--sr, 400px) * 0.38); animation-delay: -1.2s; }
.tq-reflets i:nth-child(4) { width: calc(var(--sr, 400px) * 0.26); animation-delay: -1.8s; }
.tq-reflets i:nth-child(5) { width: calc(var(--sr, 400px) * 0.15); animation-delay: -2.2s; }
@keyframes tq-scintille {
  from { opacity: 0.25; translate: -6px 0; }
  to { opacity: 0.9; translate: 6px 0; }
}

/* Lucioles la nuit et en tropical, pollen qui flotte le jour. */
.tq-lucioles { position: absolute; inset: 0; }
.tq-luciole {
  position: absolute;
  width: var(--t, 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sc-luciole);
  box-shadow: var(--sc-luciole-ombre);
  opacity: 0;
  animation: tq-flotte var(--dur, 12s) ease-in-out var(--del, 0s) infinite;
}
@keyframes tq-flotte {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: 0.95; }
  50% { opacity: 0.45; translate: var(--dx, 20px) -70px; }
  80% { opacity: 0.9; }
  100% { opacity: 0; translate: calc(var(--dx, 20px) * -0.5) -140px; }
}

/* ---------- feuilles au bord des sections (accueil) ---------- */

.tq-bord {
  z-index: -1;
  top: 6%;
  width: clamp(170px, 21vw, 380px);
  opacity: 0.85;
  transform: translateY(calc((var(--tq-s, 0) - var(--tq-o, 0)) * -0.1px));
}
.tq-bord-g { left: calc(50% - 50vw - 2vw); transform-origin: 0 50%; }
.tq-bord-d { right: calc(50% - 50vw - 2vw); transform-origin: 100% 50%; }
:root[data-mode="jour"] .tq-bord { opacity: 0.6; }

/* Les cartes laissent deviner le feuillage, comme à travers une vitre. */
.page-home .service {
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.page-home .service:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }

/* ---------- les autres pages : un cadre fixe ---------- */

.tq-cadre {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.tq-lueur {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 620px at 88% 6%, var(--sc-lueur-1), transparent 62%),
    radial-gradient(700px 520px at 0% 100%, var(--sc-lueur-2), transparent 60%);
  animation: tq-apparait 1600ms ease both;
  transition: background 700ms ease;
}
.tq-cadre .tq-piece { opacity: 0.75; }
:root[data-mode="jour"] .tq-cadre .tq-piece { opacity: 0.55; }
.tq-cadre .tq-coin-hd { width: clamp(200px, 27vw, 470px); }
.tq-cadre .tq-sol-g { width: clamp(180px, 22vw, 400px); }
.tq-cadre--doux .tq-lueur { opacity: 0.7; }
.tq-cadre--doux .tq-luciole { --t: 2.5px; }

/* Pages à l’horizontale : le massif se pose juste au-dessus du rail. */
.page-planche .tq-cadre .tq-sol-g { bottom: calc(var(--rail-h, 72px) - 2.2vw); }

/* Le rail des pages horizontales laisse deviner la scène. */
.page-planche .rail { background: color-mix(in oklab, var(--paper) 90%, transparent); }

/* ---------- petits écrans ---------- */

@media (max-width: 860px) {
  .tq-scene .tq-coin-hd { width: 46vw; }
  .tq-scene .tq-coin-hg { width: 50vw; }
  .tq-avant .tq-sol-d { display: none; }
  .tq-avant .tq-sol-g { width: 44vw; }
  .tq-bord { width: 30vw; opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .tq-balance,
  .tq-vague,
  .tq-luciole,
  .tq-reflets i,
  .tq-soleil,
  .tq-piece { animation: none; }
  .tq-luciole { opacity: 0.6; }
}

/* ==========================================================================
   Nuit et jour : version sobre.
   Ni astre, ni mer, ni fleurs : seulement les feuillages, plus discrets,
   qui se balancent, et quelques lucioles.
   ========================================================================== */
:root:not([data-mode="tropical"]) :is(.tq-ciel, .tq-soleil, .tq-mer, .tq-rivage, .tq-reflets, .tq-fleur) { display: none; }
:root:not([data-mode="tropical"]) .tq-lueur { opacity: 0.5; }
:root:not([data-mode="tropical"]) .tq-scene :is(.tq-coin-hg, .tq-coin-hd) { opacity: 0.55; }
:root:not([data-mode="tropical"]) .tq-avant .tq-piece { opacity: 0.6; width: clamp(180px, 22vw, 400px); }
:root:not([data-mode="tropical"]) .tq-bord { opacity: 0.45; }
:root:not([data-mode="tropical"]) .tq-cadre .tq-piece { opacity: 0.45; }
:root:not([data-mode="tropical"]) .tq-luciole:nth-child(2n) { display: none; }
:root[data-mode="jour"] .tq-scene :is(.tq-coin-hg, .tq-coin-hd) { opacity: 0.35; }
:root[data-mode="jour"] .tq-avant .tq-piece,
:root[data-mode="jour"] .tq-cadre .tq-piece { opacity: 0.4; }
:root[data-mode="jour"] .tq-bord { opacity: 0.35; }