/**
 * @file
 * Carrousel de la une (zone 6b).
 *
 * L'apparence de la carte ne change pas : le carrousel se contente
 * d'empiler trois articles en mode « lead » et de passer de l'un à l'autre.
 *
 * La transition est volontairement sobre — fondu du bloc, puis arrivée en
 * cascade du texte et léger dézoom de la photo. Un balayage rouge plein
 * cadre avait été essayé puis retiré : une surface vive traversant l'écran
 * toutes les sept secondes est inconfortable, et à proscrire vis-à-vis des
 * personnes photosensibles.
 */

.lead-carousel {
  position: relative;
  overflow: hidden;
  border: var(--ccd-rule);
  background: var(--ccd-white);
}

/* La carte interne perd son cadre : c'est le carrousel qui le porte. */
.lead-carousel .lead {
  border: 0;
}

/*
 * Les diapositives sont superposées dans une même cellule de grille plutôt
 * que masquées en display:none. La carte prend ainsi la hauteur de la plus
 * haute et ne se redimensionne plus à chaque changement : sans cela, tout
 * le bas de la colonne sauterait toutes les sept secondes.
 *
 * visibility:hidden (et non opacity seule) sort les diapositives inactives
 * de l'ordre de tabulation et de l'arbre d'accessibilité.
 */
.lead-carousel__viewport {
  display: grid;
}

.lead-carousel__slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 420ms ease, visibility 0s 420ms;
}

.lead-carousel__slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 420ms ease, visibility 0s;
}

/* ============================================================
   Arrivée du contenu, en cascade
   ============================================================ */
.lead-carousel__slide.is-entering .ph,
.lead-carousel__slide.is-entering .teaser__media img {
  animation: ccd-zoom 900ms ease-out both;
}

.lead-carousel__slide.is-entering .kicker {
  animation: ccd-rise 520ms 100ms both;
}

.lead-carousel__slide.is-entering h2 {
  animation: ccd-rise 520ms 180ms both;
}

.lead-carousel__slide.is-entering .lead__summary {
  animation: ccd-rise 520ms 260ms both;
}

.lead-carousel__slide.is-entering .meta {
  animation: ccd-rise 520ms 320ms both;
}

@keyframes ccd-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ccd-zoom {
  from {
    opacity: 0.55;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Barres de progression, à cheval sur le haut de la carte
   ============================================================ */
.lead-carousel__nav {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  gap: 3px;
}

/*
 * La barre ne fait que 4 px, mais le bouton en fait 24 : viser une cible de
 * 4 px est impraticable à la souris comme au doigt (WCAG 2.5.8). Le bouton
 * est donc transparent et plus haut que son rendu visible, qui est porté
 * par ::before pour la piste et .lead-carousel__bar pour le remplissage.
 */
.lead-carousel__dot {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 1;
  align-items: flex-start;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.lead-carousel__dot::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  content: "";
}

.lead-carousel__dot:focus-visible {
  outline-offset: -3px;
}

.lead-carousel__bar {
  position: relative;
  display: block;
  width: 0;
  height: 4px;
  background: var(--ccd-red);
}

/* Le compte à rebours EST l'animation de la barre : sa fin déclenche le
   passage à l'article suivant (voir js/lead-carousel.js). Pas de minuteur
   JS en parallèle, donc aucun risque de désynchronisation. */
.lead-carousel__dot.is-active .lead-carousel__bar {
  animation: ccd-progress var(--ccd-carousel-delay, 7000ms) linear forwards;
}

.lead-carousel__dot.is-done .lead-carousel__bar {
  width: 100%;
}

.lead-carousel.is-paused .lead-carousel__bar {
  animation-play-state: paused;
}

@keyframes ccd-progress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ============================================================
   Lecture / pause — exigé dès lors que le défilement est automatique
   ============================================================ */

/*
 * Icônes en SVG inline, pas en caractères Unicode : les glyphes « pause »
 * et « lecture » sont rendus de façon incohérente d'un navigateur et d'une
 * police à l'autre — glyphe manquant, substitution par un emoji en
 * couleur, largeur imprévisible. Le SVG suit currentColor et reste
 * identique partout.
 */
.lead-carousel__pause {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(14, 14, 16, 0.62);
  color: #fff;
  cursor: pointer;
  place-items: center;
}

.lead-carousel__pause:hover {
  background: var(--ccd-red);
}

.lead-carousel__pause svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentcolor;
  pointer-events: none;
}

/* L'icône affichée suit aria-pressed, seul état tenu par le JS. */
.lead-carousel__pause .icon-play {
  display: none;
}

.lead-carousel__pause[aria-pressed="true"] .icon-pause {
  display: none;
}

.lead-carousel__pause[aria-pressed="true"] .icon-play {
  display: block;
}

/* Un seul article : ni barres, ni bouton. */
.lead-carousel.is-single .lead-carousel__nav,
.lead-carousel.is-single .lead-carousel__pause {
  display: none;
}

/* ============================================================
   Deux articles secondaires (5ᵉ et 6ᵉ plus récents)
   ============================================================ */
.lead__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--ccd-rule);
  border-top: 0;
  background: var(--ccd-white);
}

.lead__sub > * {
  padding: 18px 20px;
}

.lead__sub > * + * {
  border-left: var(--ccd-rule);
}

.lead__sub h4 {
  font-size: 16px;
  line-height: 1.25;
}

/*
 * Animations réduites : le carrousel continue de tourner, mais sans aucun
 * mouvement.
 *
 * La préférence vise les déplacements — dézoom, glissement, parallaxe —
 * et non le renouvellement d'un contenu. Un fondu d'opacité est donc
 * conservé, le reste est supprimé. L'exigence formelle de pouvoir
 * interrompre un contenu qui défile seul reste couverte par le bouton
 * lecture/pause.
 *
 * Les deux réaffirmations ci-dessous sont indispensables : la règle
 * globale de css/base/elements.css ramène toute animation et toute
 * transition à 0,01 ms. Sans elles, le fondu disparaîtrait et surtout la
 * barre de progression se terminerait instantanément — or c'est sa fin qui
 * déclenche l'article suivant, donc les trois articles s'enchaîneraient à
 * pleine vitesse.
 */
@media (prefers-reduced-motion: reduce) {
  .lead-carousel__dot.is-active .lead-carousel__bar {
    animation-duration: var(--ccd-carousel-delay, 7000ms) !important;
  }

  .lead-carousel__slide {
    transition: opacity 420ms ease, visibility 0s 420ms !important;
  }

  .lead-carousel__slide.is-active {
    transition: opacity 420ms ease, visibility 0s !important;
  }

  /* Plus aucun déplacement : ni dézoom de la photo, ni remontée du texte. */
  .lead-carousel__slide.is-entering .ph,
  .lead-carousel__slide.is-entering .teaser__media img,
  .lead-carousel__slide.is-entering .kicker,
  .lead-carousel__slide.is-entering h2,
  .lead-carousel__slide.is-entering .lead__summary,
  .lead-carousel__slide.is-entering .meta {
    animation: none !important;
  }
}