/* -------------------------------------------------------------------------
 * Ecran de chargement : logo Groupe Montauban trace de gauche a droite sur
 * fond blanc. Il masque le hero pendant que la video se met en tampon, et
 * s'efface des qu'elle est prete a etre lue.
 * ---------------------------------------------------------------------- */

#mm-splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 30px;
  transition: opacity .55s ease, visibility .55s;
}

#mm-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mm-splash-logo {
  position: relative;
  width: min(52vw, 280px);
  aspect-ratio: 896 / 425;
}

/* Le logo sert de masque a un aplat marine : on decouvre l aplat de gauche
   a droite, ce qui donne l impression que le logo se dessine. */
.mm-splash-fill {
  position: absolute;
  inset: 0;
  background: #0E2438;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  clip-path: inset(0 100% 0 0);
  animation: mmSplashDraw 1.15s cubic-bezier(.45,.05,.2,1) .1s forwards;
}

@keyframes mmSplashDraw {
  to { clip-path: inset(0 0 0 0); }
}

.mm-splash-bar {
  width: min(52vw, 280px);
  height: 2px;
  background: rgba(14,36,56,.10);
  overflow: hidden;
}

.mm-splash-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: #2D7DD2;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}

/* Tant que l ecran est la, la page ne defile pas. */
html.mm-splash-on,
html.mm-splash-on body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mm-splash-fill { animation: none; clip-path: none; }
  #mm-splash { transition: none; }
}

/* Repli : si le script ne s execute pas, l ecran ne doit pas rester bloque. */
@media (scripting: none) {
  #mm-splash { display: none; }
}

/* -------------------------------------------------------------------------
 * iOS affiche un bouton de lecture par-dessus la video des que le systeme
 * refuse le demarrage automatique. On le retire, ainsi que tout habillage
 * natif : la video du hero est un decor, pas un lecteur.
 * ---------------------------------------------------------------------- */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
#mm-hero-video::-webkit-media-controls,
#mm-hero-video::-webkit-media-controls-panel,
#mm-hero-video::-webkit-media-controls-panel-container,
#mm-hero-video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-panel,
#mm-hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}

#mm-hero-video { pointer-events: none; }


/* -------------------------------------------------------------------------
 * Le bouton de lecture d iOS vit dans une arborescence fermee que Safari ne
 * laisse plus styler de facon fiable. On ne cherche donc plus a le cacher :
 * la video est transparente par defaut et ne devient visible qu une fois la
 * lecture reellement engagee. Tant qu elle ne l est pas, l element entier
 * est invisible, habillage natif compris.
 * ---------------------------------------------------------------------- */
#mm-hero-video { opacity: 0; transition: opacity .7s ease; }
#mm-hero-media.mm-video-on #mm-hero-video { opacity: 1; }

/* Fond de repli : la trame de plan reprise de la charte, sans aucun
   telechargement supplementaire. */
#mm-hero-media {
  background-color: #0E2438;
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(45,125,210,0.30), transparent 62%),
    linear-gradient(rgba(156,200,242,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,200,242,0.07) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px, 30px 30px;
}