/* Tiny Bus Transition – CSS 1.9.0 */
.tbt-overlay{position:fixed;inset:0;display:none;z-index:999999;background:rgba(255,255,255,var(--tbt-backdrop,0.85));backdrop-filter:blur(2px)}
.tbt-overlay.is-active{display:block}
.tbt-stage{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:48px;pointer-events:none}
.tbt-road{position:absolute;left:-10vw;right:-10vw;top:50%;height:2px;background:#333;opacity:.15;transform:translateY(-50%)}
:root{ --tbt-bus-size: 72px; --tbt-bus-color: #1b57ba; --tbt-anim: 1s; }

/* Plein écran */
.tbt-bus{width:var(--tbt-bus-size);height:var(--tbt-bus-size);position:absolute;top:50%;
  transform:translate(-10vw,-50%);animation:tbt-drive var(--tbt-anim,1s) cubic-bezier(.25,.1,.25,1) 1}
@keyframes tbt-drive{0%{transform:translate(-10vw,-50%)}100%{transform:translate(110vw,-50%)}}
.tbt-bus svg, .tbt-bus img{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}

/* ===== BULLE bus (scène) ===== */
.tbt-overlay.tbt-bubble{background:transparent;backdrop-filter:none}
.tbt-overlay.tbt-bubble .tbt-stage{
  width:260px;height:260px;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);
  border-radius:9999px;background:transparent; /* sky layered below */
  box-shadow:0 12px 40px rgba(0,0,0,.2);overflow:hidden
}
/* Ciel */
.tbt-overlay.tbt-bubble .tbt-sky{
  position:absolute;inset:0;background:linear-gradient(#e8f5f0,#fdfdfd 60%);
}
.tbt-overlay.tbt-bubble .tbt-sun{
  position:absolute;top:18px;right:26px;width:24px;height:24px;background:#f9d776;border-radius:9999px;box-shadow:0 0 12px rgba(249,215,118,.7);
}
/* Nuages */
.tbt-cloud{position:absolute;top:36px;width:60px;height:18px;background:#fff;border-radius:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08));opacity:.85}
.tbt-cloud:before,.tbt-cloud:after{content:"";position:absolute;background:#fff;border-radius:9999px}
.tbt-cloud:before{width:30px;height:30px;left:4px;top:-10px}
.tbt-cloud:after{width:26px;height:26px;right:6px;top:-6px}
.tbt-cloud--1{left:10%;animation: tbt-clouds var(--tbt-anim,3s) linear infinite; animation-delay:-.4s}
.tbt-cloud--2{left:40%;animation: tbt-clouds var(--tbt-anim,3s) linear infinite; animation-delay:-1.2s}
.tbt-cloud--3{left:70%;animation: tbt-clouds var(--tbt-anim,3s) linear infinite; animation-delay:-.9s}
@keyframes tbt-clouds{ from{ transform:translateX(0)} to{ transform:translateX(-40%)} }

/* Route + marquage */
.tbt-overlay.tbt-bubble .tbt-road{
  left:18px;right:18px;top:50%;height:2px;opacity:.5;background:#28463b;transform:translateY(-50%);
  background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.75) 18px 28px, transparent 28px 44px);
}
/* Arbres */
.tbt-decor{position:absolute;inset:0;pointer-events:none}
.tbt-tree{position:absolute;bottom:calc(50% + 20px);width:18px;height:22px;animation: tbt-scenery var(--tbt-anim,3s) linear infinite}
.tbt-tree:before{content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:18px solid #16604d; top:0;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.1));}
.tbt-tree:after{content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:3px; height:6px; background:#b23e2f; top:18px; border-radius:1px;}
/* tailles variées */
.tbt-tree:nth-child(2){ transform-origin:bottom center; transform:scale(.9); }
.tbt-tree:nth-child(3){ transform-origin:bottom center; transform:scale(1.1); }
.tbt-tree:nth-child(4){ transform-origin:bottom center; transform:scale(.8); }
.tbt-tree:nth-child(5){ transform-origin:bottom center; transform:scale(1.2); }
.tbt-tree:nth-child(6){ transform-origin:bottom center; transform:scale(.95); }
.tbt-tree:nth-child(7){ transform-origin:bottom center; transform:scale(1.05); }
.tbt-tree:nth-child(8){ transform-origin:bottom center; transform:scale(.85); }

.tbt-tree:nth-child(1){ right:-10%; animation-delay:-.2s }
.tbt-tree:nth-child(2){ right:10%;  animation-delay:-.7s }
.tbt-tree:nth-child(3){ right:30%;  animation-delay:-1.3s }
.tbt-tree:nth-child(4){ right:50%;  animation-delay:-.9s }
.tbt-tree:nth-child(5){ right:70%;  animation-delay:-1.6s }
.tbt-tree:nth-child(6){ right:90%;  animation-delay:-1.2s }
.tbt-tree:nth-child(7){ right:110%; animation-delay:-1.8s }
.tbt-tree:nth-child(8){ right:130%; animation-delay:-.4s }

@keyframes tbt-scenery{ from{ transform:translateX(0) } to{ transform:translateX(-140%) } }

/* Bus animé dans la bulle: ratio 2:1, trajet complet avec 'left' */
.tbt-overlay.tbt-bubble .tbt-bus{
  width: calc(var(--tbt-bus-size) * 2);
  height: var(--tbt-bus-size);
  top:50%; left:-25%; transform:translateY(-50%);
  animation-name: tbt-drive-bubble;
  animation-duration: var(--tbt-anim,3s);
  animation-timing-function: cubic-bezier(.25,.1,.25,1);
  animation-iteration-count: 1;
  image-rendering: -webkit-optimize-contrast;
}
.tbt-overlay.tbt-bubble .tbt-bus img{ object-fit: contain; } /* entierement visible */
@keyframes tbt-drive-bubble{ 0%{ left:-25% } 100%{ left:115% } }

/* Deuxième bus (décalé) */
.tbt-bus--2{ display:none; }
.tbt-overlay.tbt-bubble .tbt-bus--2{ display:block; animation-delay: calc(var(--tbt-anim,3s) * .35); opacity:.98 }

/* ===== BULLE photo ===== */
.tbt-overlay.tbt-photo{background:transparent;backdrop-filter:none}
.tbt-overlay.tbt-photo .tbt-stage{
  width:260px;height:260px;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);
  border-radius:9999px;background:rgba(255,255,255,.98);
  box-shadow:0 12px 40px rgba(0,0,0,.2);overflow:hidden;display:flex;align-items:center;justify-content:center
}
.tbt-overlay.tbt-photo .tbt-road,
.tbt-overlay.tbt-photo .tbt-sky,
.tbt-overlay.tbt-photo .tbt-sun,
.tbt-overlay.tbt-photo .tbt-cloud,
.tbt-overlay.tbt-photo .tbt-decor{ display:none }
.tbt-overlay.tbt-photo .tbt-bus{left:50%;top:50%;transform:translate(-50%,-50%);animation:none;width:160px;height:160px}
.tbt-overlay.tbt-photo .tbt-bus img{border-radius:9999px;object-fit:cover}

/* Responsive */
@media (max-width: 480px){
  :root{ --tbt-bus-size: 58px; }
  .tbt-overlay.tbt-bubble .tbt-stage,
  .tbt-overlay.tbt-photo .tbt-stage{ width:210px;height:210px }
  .tbt-overlay.tbt-photo .tbt-bus{ width:140px;height:140px }
}


/* =======================================================
   Thème désert marocain réaliste + bulle 3D (override 2.0)
   ======================================================= */

/* Bulle 3D plus petite (mode bus uniquement) */
.tbt-overlay.tbt-bubble .tbt-stage{
  width:220px;
  height:220px;
  left:50%;
  right:auto;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:9999px;
  position:absolute;
  overflow:hidden;
  background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.9) 0,rgba(255,255,255,.1) 32%,rgba(255,255,255,0) 60%),
             radial-gradient(circle at 80% 82%,rgba(15,23,42,.45) 0,rgba(15,23,42,0) 55%);
  box-shadow:
    0 22px 45px rgba(15,23,42,.55),
    0 0 0 1px rgba(255,255,255,.85);
}

/* Reflets / ombres internes pour l'effet boule */
.tbt-overlay.tbt-bubble .tbt-stage::before,
.tbt-overlay.tbt-bubble .tbt-stage::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

/* reflet en haut */
.tbt-overlay.tbt-bubble .tbt-stage::before{
  background:radial-gradient(circle at 28% 14%,rgba(255,255,255,.95) 0,rgba(255,255,255,.4) 26%,rgba(255,255,255,0) 60%);
  opacity:.95;
}

/* ombre intérieure en bas */
.tbt-overlay.tbt-bubble .tbt-stage::after{
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,.7),
    inset 0 -18px 30px rgba(15,23,42,.55);
  opacity:.95;
}

/* Ciel désert réaliste : photo + léger voile chaud */
.tbt-overlay.tbt-bubble .tbt-sky{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(249,115,22,.7),rgba(248,250,252,.1)),
    url('../assets/desert-bg.png') center center / cover no-repeat;
  transform:scale(1.05);
}

/* Pas de nuages dans le désert */
.tbt-cloud{display:none !important;}

/* On n'utilise plus les anciens arbres comme décor (image déjà réaliste) */
.tbt-decor,
.tbt-tree{display:none !important;}

/* Piste sable pour le bus, légèrement intégrée à la photo */
.tbt-overlay.tbt-bubble .tbt-road{
  position:absolute;
  left:18px;
  right:18px;
  top:60%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(to right,#92400e,#fbbf24,#78350f);
  opacity:.9;
  box-shadow:0 4px 6px rgba(15,23,42,.4);
}

/* Maroc – petit drapeau animé sur le désert */
.tbt-flag{
  position:absolute;
  right:28px;
  bottom:calc(40% + 22px);
  width:26px;
  height:18px;
  background:url('../assets/flag-ma.png') center center / contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(15,23,42,.55));
  animation:tbt-flag-wave 2.4s ease-in-out infinite;
}

/* légère ondulation du drapeau */
@keyframes tbt-flag-wave{
  0%{transform:translateY(0) skewX(0deg);}
  50%{transform:translateY(-2px) skewX(-4deg);}
  100%{transform:translateY(0) skewX(0deg);}
}

/* Branding 7afila en bas de la bulle */
.tbt-brand{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:900;
  font-size:24px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0b4b2b; /* proche de la top bar */
  text-shadow:
    0 2px 0 #022c22,
    0 4px 0 #022c22,
    0 6px 8px rgba(0,0,0,.55);
  padding:2px 10px;
  border-radius:999px;
  background:linear-gradient(to bottom,#16a34a,#0d7a3b,#065f46);
  box-shadow:
    0 6px 12px rgba(15,23,42,.55),
    0 0 0 1px rgba(255,255,255,.65);
  animation:tbt-brand-breathe 2.4s ease-in-out infinite;
}

/* petite animation de respiration */
@keyframes tbt-brand-breathe{
  0%{transform:translateX(-50%) translateY(0) scale(1);}
  50%{transform:translateX(-50%) translateY(-2px) scale(1.03);}
  100%{transform:translateX(-50%) translateY(0) scale(1);}
}

/* Bus légèrement rehaussé pour bien flotter sur la piste dans la bulle */
.tbt-overlay.tbt-bubble .tbt-bus{
  bottom:auto;
  top:58%;
  transform-origin:center center;
}

/* On laisse le reste des animations (tbt-drive-bubble) tel quel */

/* =======================================================
   Fin override désert marocain réaliste
   ======================================================= */