/*
 * Film d'accueil lacker.fr — styles du bloc. Aucune ressource extérieure au site.
 * Source : film-accueil/src/integration.css (copié dans integration/film-accueil.css par construire-integration.js).
 *
 * Trois états :
 *   1. sans JavaScript : l'image fixe, puis les quatre textes en liste ;
 *   2. lecteur en marche (classe film-accueil--anime) : le canvas, un seul texte à la fois, et sous l'image le bouton
 *      (pause, lecture, revoir) et la barre de progression par chapitre ; les mots du film sont des liens ;
 *   3. sous 700 px de large : format 4:5, le texte passe sous l'image.
 * Si le système demande moins de mouvement, c'est l'état 2, arrêté sur l'image d'arrêt : rien ne démarre seul.
 */

/* Roboto Mono, réduite aux caractères du film (le site ne la charge pas). Roboto, elle, est celle du site. */
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("polices/RobotoMono-film.woff") format("woff");
}

.film-accueil {
  position: relative;
  max-width: 1140px;          /* largeur du contenu du site */
  margin: 0 auto;
  background: #fff;
  color: #2F2E42;
  container-type: inline-size;
}
.film-accueil__ecran { position: relative; }    /* l'image et son texte ; les commandes viennent dessous */
.film-accueil__scene {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
}
.film-accueil__image,
.film-accueil__image img,
.film-accueil__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.film-accueil__image img { object-fit: cover; }
.film-accueil__canvas { visibility: hidden; }
.film-accueil--anime .film-accueil__canvas { visibility: visible; }
.film-accueil--anime .film-accueil__image { visibility: hidden; }

/* Les bords se fondent dans le blanc de la page. Dans le MP4 et dans l'image fixe, ce voile est dessiné dans l'image. */
.film-accueil__voile {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, #fff 0, rgba(255, 255, 255, .82) 3.15%, rgba(255, 255, 255, 0) 9%),
    linear-gradient(to left, #fff 0, rgba(255, 255, 255, .82) 3.15%, rgba(255, 255, 255, 0) 9%),
    linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, .82) 5.6%, rgba(255, 255, 255, 0) 16%),
    linear-gradient(to top, #fff 0, rgba(255, 255, 255, .82) 7%, rgba(255, 255, 255, 0) 20%);
}
.film-accueil--anime .film-accueil__voile { display: block; }

/* La phrase de description : lue par les lecteurs d'écran, invisible à l'œil. */
.film-accueil__description {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Les cinq textes, dans l'ordre. État 1 : une simple liste sous l'image. */
.film-accueil__textes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  color: #2F2E42;
  font: 400 18px/1.4 Roboto, Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.film-accueil__textes li { margin: 0; padding: 0; }
.film-accueil__textes a,
.film-accueil__textes a:hover,
.film-accueil__textes a:focus { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* État 2 : un seul texte à la fois, posé sur l'image, en bas à gauche (même place que dans le MP4). */
.film-accueil--anime .film-accueil__textes {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 6.3%;
  margin: 0;
  pointer-events: none;
}
.film-accueil--anime .film-accueil__textes li {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: 28px;                           /* navigateurs sans unités de conteneur */
  font-size: clamp(18px, 3.33cqw, 44px);     /* 18 px au moins, 44 px au plus */
  font-weight: 300;                          /* Roboto Light au-dessus de 28 px affichés */
  line-height: 1.1;
}
/* les verbes sont des liens : rien ne les distingue au repos ; au survol, un soulignement fin ; au clavier, un cadre */
.film-accueil--anime .film-accueil__textes a { pointer-events: auto; text-decoration: none; cursor: pointer; }
.film-accueil--anime .film-accueil__textes a:hover,
.film-accueil--anime .film-accueil__textes a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }
.film-accueil__textes a:focus-visible,
.film-accueil__lien:focus-visible { outline: 2px solid #2F2E42; outline-offset: 3px; border-radius: 4px; }

/* Les étiquettes des tuiles (INPI, EUIPO, OMPI, Tribunal judiciaire) : des liens transparents posés sur le canvas, à la place
   du mot. Le lecteur les place à chaque image et ne les montre que pendant que le mot est affiché. */
.film-accueil__liens { display: none; }
.film-accueil--anime .film-accueil__liens { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.film-accueil__lien { display: none; position: absolute; pointer-events: auto; cursor: pointer; }
.film-accueil__lien span {                     /* le mot : lu par les lecteurs d'écran, invisible (il est dessiné dans l'image) */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.film-accueil__lien i { position: absolute; height: 0; border-bottom: 1px solid #4A4960; opacity: 0; }
.film-accueil__lien:hover i,
.film-accueil__lien:focus-visible i { opacity: 1; }
@container (max-width: 840px) {
  .film-accueil--anime .film-accueil__textes li { font-weight: 400; }   /* Roboto Regular en dessous de 28 px */
}

/* Les commandes, sous l'image : le bouton (pause, lecture, revoir) et la barre de progression par chapitre. */
.film-accueil__commandes { display: none; }
.film-accueil--anime .film-accueil__commandes {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  z-index: 3;
  padding: 2px 5% 0;                           /* alignées sur le texte du temps, comme lui à 5 % du bord */
}
/* Le bouton : 44 × 44 px, utilisable au clavier (Entrée ou Espace). */
.film-accueil__pause {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1.5px solid #2F2E42;
  border-radius: 50%;
  background: #2F2E42;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-appearance: none;
  appearance: none;
}
.film-accueil__pause:hover,
.film-accueil__pause:focus-visible { background: #fff; color: #2F2E42; }
.film-accueil__pause:focus-visible,
.film-accueil__barre:focus-visible { outline: 2px solid #2F2E42; outline-offset: 2px; }
.film-accueil__pause svg { display: block; fill: currentColor; pointer-events: none; }
.film-accueil__pause path { display: none; }
.film-accueil__pause[data-etat="pause"] .film-accueil__i-pause,
.film-accueil__pause[data-etat="lecture"] .film-accueil__i-lecture,
.film-accueil__pause[data-etat="revoir"] .film-accueil__i-revoir { display: inline; }

/* La barre : un segment par chapitre, large comme sa durée ; il se remplit pendant qu'il passe (l'orange est celui de la
   jauge du film) ; le nom du chapitre est dessous. 44 px de haut : on peut la toucher, la tirer. */
.film-accueil__barre {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  min-height: 44px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: pan-y;                         /* tirer de gauche à droite déplace le film ; de haut en bas, la page défile */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.film-accueil__chapitre { flex: 1 1 0; min-width: 0; display: block; padding-top: 13px; }
.film-accueil__piste { display: block; height: 6px; margin-right: 3px; border-radius: 3px; background: #E6E6EA; overflow: hidden; }
.film-accueil__chapitre:last-of-type .film-accueil__piste { margin-right: 0; }
.film-accueil__jauge { display: block; height: 100%; background: #FF2619; transform: scaleX(0); transform-origin: 0 50%; }
.film-accueil__nom {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  white-space: nowrap;
  color: #73727F;
  font: 500 12px/1.2 Roboto, Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.film-accueil__chapitre--courant .film-accueil__nom { color: #2F2E42; }
@media (hover: hover) { .film-accueil__chapitre:hover .film-accueil__nom { color: #2F2E42; } }
.film-accueil__repere {                        /* où l'on en est : un anneau, comme le curseur de l'avocat */
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  box-sizing: border-box;
  border: 3px solid #FF2619;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

/* État 3 : sous 700 px de large. */
@media (max-width: 699.98px) {
  .film-accueil__scene { aspect-ratio: 4 / 5; }
  .film-accueil__voile {
    background:
      linear-gradient(to right, #fff 0, rgba(255, 255, 255, .82) 2.45%, rgba(255, 255, 255, 0) 7%),
      linear-gradient(to left, #fff 0, rgba(255, 255, 255, .82) 2.45%, rgba(255, 255, 255, 0) 7%),
      linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, .82) 4.55%, rgba(255, 255, 255, 0) 13%),
      linear-gradient(to top, #fff 0, rgba(255, 255, 255, .82) 5.6%, rgba(255, 255, 255, 0) 16%);
  }
  .film-accueil__textes { margin: 12px 16px 0; }
  .film-accueil--anime .film-accueil__textes {      /* le texte du temps passe sous le canvas */
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    height: 3em;
    margin: 12px 16px 0;
  }
  .film-accueil--anime .film-accueil__textes li {
    top: 0;
    bottom: auto;
    white-space: normal;
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 400;
    line-height: 1.3;
  }
  .film-accueil--anime .film-accueil__textes a { padding: 11px 0; }    /* 44 px de haut à toucher */
  .film-accueil--anime .film-accueil__commandes { gap: 10px; padding: 0 16px; }
  .film-accueil__nom { font-size: 11.5px; letter-spacing: .02em; }
}