/* ArcheTheme — habillage Arche Vidéos pour AVideo, sur Bootstrap 5.
 *
 * Tout est porté par la classe `.arche-theme`, posée sur le conteneur racine
 * des pages du thème (view/layout/page-start.php). Aucune règle ne fuit donc
 * dans les pages restées sous l'habillage d'AVideo (administration, connexion,
 * gestion des vidéos), qui utilisent le même Bootstrap 5.
 *
 * La première partie est le portage direct de la maquette Bootstrap 5 fournie
 * (index v2.html) ; la seconde ajoute ce dont la maquette ne traitait pas :
 * accueil, page catégorie, résultats de recherche, bandeau de visuels de
 * catégorie et infobulle d'audience des vignettes.
 */

/* ============================================================ 1. Maquette */

.arche-theme {
  --arche-brand: #001f5a;
  --arche-brand-bright: #003598;
  --arche-canvas: #f0f0f0;
  --arche-surface-soft: #f7f8fa;
  --arche-ink: #222;
  --arche-muted: #6c6c6c;
  --arche-quiet: #6c6c6c;
  --arche-line: #e6e8ec;
  --arche-shadow: 0 12px 36px rgba(0, 31, 90, 0.08);
  --bs-primary: var(--arche-brand);
  --bs-primary-rgb: 0, 31, 90;
  --bs-body-color: var(--arche-ink);
  --bs-body-bg: var(--arche-canvas);
  --bs-body-font-family: "Open Sans", Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-border-color: var(--arche-line);
  --bs-border-radius: 0.25rem;
  /* Colonne pleine hauteur : avec `main { flex: 1 0 auto }`, le pied de page
     reste collé en bas de la fenêtre même sur une page au contenu court. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--arche-canvas);
  color: var(--arche-ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.arche-theme :where(a:not(.btn)) {
  color: inherit;
  text-decoration: none;
}

.arche-theme .min-w-0 {
  min-width: 0;
}

.arche-theme .container-xl {
  --bs-gutter-x: 3rem;
  max-width: 1268px;
}

.arche-theme .btn-primary {
  --bs-btn-bg: var(--arche-brand);
  --bs-btn-border-color: var(--arche-brand);
  --bs-btn-hover-bg: var(--arche-brand-bright);
  --bs-btn-hover-border-color: var(--arche-brand-bright);
  --bs-btn-active-bg: var(--arche-brand-bright);
  --bs-btn-active-border-color: var(--arche-brand-bright);
  --bs-btn-disabled-bg: var(--arche-brand);
  --bs-btn-disabled-border-color: var(--arche-brand);
}

.arche-theme .btn-outline-primary {
  --bs-btn-color: var(--arche-brand);
  --bs-btn-border-color: rgba(0, 31, 90, 0.22);
  --bs-btn-hover-bg: var(--arche-brand);
  --bs-btn-hover-border-color: var(--arche-brand);
  --bs-btn-active-bg: var(--arche-brand-bright);
  --bs-btn-active-border-color: var(--arche-brand-bright);
}

.arche-theme .btn-outline-secondary {
  --bs-btn-color: var(--arche-muted);
  --bs-btn-border-color: var(--arche-line);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--arche-brand);
  --bs-btn-hover-border-color: var(--arche-brand);
  --bs-btn-active-bg: var(--arche-brand-bright);
  --bs-btn-active-border-color: var(--arche-brand-bright);
}

.arche-theme :focus-visible {
  outline: 3px solid rgba(0, 53, 152, 0.28);
  outline-offset: 3px;
}

.arche-theme .top-strip {
  min-height: 38px;
  color: var(--arche-muted);
}

.arche-theme .top-strip > .container-xl {
  min-height: 38px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.arche-theme .top-social-button {
  width: 25px;
  height: 25px;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 0.7rem;
  --bs-btn-font-weight: 800;
  background: rgba(255, 255, 255, 0.5);
}

.arche-theme .prototype-label {
  color: var(--arche-quiet);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.arche-theme .navbar-shell {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.035);
  backdrop-filter: blur(12px);
}

.arche-theme .navbar-shell .navbar {
  --bs-navbar-padding-y: 0;
}

.arche-theme .navbar-shell .navbar > .container-xl {
  min-height: 80px;
}

.arche-theme .brand__video {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Largeur automatique, et non les 154px de la maquette : le logo ARCHE est un
 * logotype de 1024x486 (rapport 2,1). Dans une boite de 154x44, `object-fit:
 * contain` le rend en 93x44 et le centre — soit une trentaine de pixels de vide
 * de chaque cote, qui se lisait comme un trou entre les deux logos. On fixe la
 * hauteur et on laisse la largeur suivre le rapport de limage. */
.arche-theme .brand__arche {
  width: auto;
  height: 44px;
  max-width: 190px;
  object-fit: contain;
}

.arche-theme .brand__text {
  color: var(--arche-brand);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.arche-theme .btn-icon {
  width: 42px;
  height: 42px;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
}

.arche-theme .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke: currentColor;
}

.arche-theme .search-panel {
  background: #fff;
}

.arche-theme .search-panel .input-group {
  min-height: 44px;
}

.arche-theme .search-submit {
  min-width: 112px;
}

.arche-theme .page {
  flex: 1 0 auto;
  padding-top: 26px;
  padding-bottom: 72px;
}

.arche-theme .breadcrumb {
  --bs-breadcrumb-divider: "/";
  color: var(--arche-quiet);
  font-size: 0.78rem;
  white-space: nowrap;
}

.arche-theme .breadcrumb-item.active {
  min-width: 0;
  overflow: hidden;
  color: var(--arche-quiet);
  text-overflow: ellipsis;
}

.arche-theme .player {
  overflow: hidden;
  background: #050505;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

.arche-theme .player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

/* Vidéo plus haute que large : le cadre prend ses proportions natives, mais sa
   hauteur est plafonnée pour que la vidéo tienne toujours entière à l'écran,
   téléphone tourné compris.

   Ce plafond produit le comportement voulu à la réduction de la largeur : tant
   qu'il s'applique, la hauteur ne bouge pas, donc la vidéo garde sa taille et
   ce sont les zones noires latérales qui se résorbent. Elles disparaissent
   quand la largeur atteint hauteur x proportions ; en deçà, le cadre suit
   exactement la vidéo et il n'y a plus jamais de noir.

   `aspect-ratio` et non le `padding-top` de `.ratio` : ce dernier ignore
   `max-height`, et `.player` ayant `overflow: hidden`, la vidéo serait rognée
   au lieu d'être plafonnée. */
.arche-theme .player--portrait {
  aspect-ratio: var(--arche-video-aspect);
  max-height: min(80vh, 720px);
  max-height: min(80dvh, 720px); /* dvh exclut la barre d'adresse mobile ; vh reste le repli */
}

.arche-theme .player--portrait::before {
  content: none;
}

/* Paysage court — téléphone tourné : le plafond ci-dessus laisse la vidéo sous
   la ligne de flottaison, puisqu'il ignore l'en-tête du site. On lui soustrait
   donc sa hauteur, mesurée : 182 px avec la barre sociale, 117 px sans, celle-ci
   étant masquée sous 768 px. Les valeurs retenues gardent quelques pixels de
   marge. */
.arche-theme .player--portrait {
  --arche-chrome-height: 190px;
}

@media (max-width: 767.98px) {
  .arche-theme .player--portrait {
    --arche-chrome-height: 125px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .arche-theme .player--portrait {
    max-height: calc(100vh - var(--arche-chrome-height));
    max-height: calc(100dvh - var(--arche-chrome-height));
  }
}

.arche-theme .video-header {
  border: 1px solid var(--arche-line);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  box-shadow: var(--arche-shadow);
}

.arche-theme .video-header .card-body {
  padding: 27px 30px 24px;
}

.arche-theme .eyebrow {
  color: var(--arche-brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.arche-theme .eyebrow::before {
  width: 20px;
  height: 2px;
  background: var(--arche-brand);
  content: "";
}

.arche-theme h1 {
  max-width: 970px;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.arche-theme .meta-list {
  color: var(--arche-muted);
  font-size: 0.9rem;
}

.arche-theme .video-actions__label {
  color: var(--arche-quiet);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.arche-theme .video-action {
  min-height: 38px;
  --bs-btn-padding-x: 0.6875rem;
  --bs-btn-font-size: 0.78rem;
  --bs-btn-font-weight: 700;
}

.arche-theme .network-button {
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

/* Couleur de survol par réseau.
 *
 * La maquette codait en dur trois couleurs (#1877f2, #0a66c2, #111). Ce sont
 * désormais celles de la production, relevées dans son `theme.css` et portées
 * par la variable `--arche-social-hover` qu'ArcheSocial pose en attribut
 * `style` : une seule règle suffit pour tous les réseaux, y compris ceux
 * ajoutés plus tard dans les réglages du plugin.
 *
 * Le repli sur `--arche-brand` couvre les entrées sans couleur (Citya, e-mail)
 * et le bouton « copier le lien ».
 */
.arche-theme .arche-social:hover,
.arche-theme .arche-social:focus-visible {
  border-color: var(--arche-social-hover, var(--arche-brand));
  background: var(--arche-social-hover, var(--arche-brand));
  color: #fff;
}

.arche-theme .network-mark {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--arche-brand);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.arche-theme .network-button:hover .network-mark,
.arche-theme .network-button:focus-visible .network-mark {
  color: inherit;
}

/* Pictos SVG intégrés (cf. objects/ArcheIcons.php). Ils prennent la couleur du
 * texte, donc le blanc au survol, sans règle supplémentaire. */
.arche-theme .arche-social-icon {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.arche-theme .top-social-button .arche-social-icon {
  width: 11px;
  height: 11px;
}

.arche-theme .footer-social-button .arche-social-icon {
  width: 15px;
  height: 15px;
}

.arche-theme .platform-mark__icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.arche-theme .content-card {
  box-shadow: var(--arche-shadow);
}

.arche-theme .section-kicker {
  color: var(--arche-quiet);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

/* Seul le nombre de vues est en gras : le `font-weight: 700` de la maquette
 * mettait toute la ligne en demi-gras, ce qui noyait le chiffre. */
.arche-theme .audience-total {
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 400;
  line-height: 1.3;
}

.arche-theme .audience-total strong {
  color: var(--arche-brand);
  font-weight: 800;
}

.arche-theme .disclosure-button {
  min-height: 42px;
  --bs-btn-font-size: 0.84rem;
  --bs-btn-font-weight: 700;
}

.arche-theme .disclosure-button .icon {
  transition: transform 180ms ease;
}

.arche-theme .disclosure-button[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.arche-theme .platform-grid,
.arche-theme .platform-col {
  background: var(--arche-line);
}

.arche-theme .platform-card {
  box-shadow: inset -1px -1px 0 var(--arche-line);
}

.arche-theme .platform-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(0, 31, 90, 0.13);
  border-radius: 50%;
  background: #fff;
  color: var(--arche-brand);
  font-size: 0.82rem;
  font-weight: 800;
}

.arche-theme .platform-mark--youtube {
  color: #d9232e;
  font-size: 1rem;
}

.arche-theme .platform-mark--linkedin {
  border-radius: var(--bs-border-radius);
  color: #0a66c2;
  font-size: 0.92rem;
}

.arche-theme .platform-mark--facebook {
  color: #1877f2;
  font-size: 1.1rem;
}

.arche-theme .platform-name {
  color: var(--arche-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.arche-theme .platform-views {
  font-size: 1.05rem;
  font-weight: 800;
}

.arche-theme h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.3;
}

.arche-theme .section-title-rule {
  width: 36px;
  height: 2px;
  background: var(--arche-brand);
}

.arche-theme .description-copy {
  max-width: 980px;
  color: var(--arche-muted);
}

.arche-theme .description-copy p:last-child {
  margin-bottom: 0;
}

.arche-theme .description-toggle {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 0.86rem;
  --bs-btn-font-weight: 800;
  color: var(--arche-brand);
  text-decoration: none;
}

.arche-theme .description-toggle:hover {
  color: var(--arche-brand-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.arche-theme .section-link {
  color: var(--arche-brand);
  font-size: 0.82rem;
  font-weight: 700;
}

.arche-theme .section-link:hover {
  color: var(--arche-brand-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.arche-theme .video-card {
  overflow: hidden;
  border-color: var(--arche-line);
  box-shadow: 0 8px 25px rgba(0, 31, 90, 0.06);
  transition: box-shadow 180ms ease;
}

/* Au survol : l ombre se renforce, la carte ne bouge pas. Le `translateY` de
   la maquette faisait sauter la vignette de 3 px, et avec plusieurs cartes
   alignees le deplacement se lit comme un tremblement. */
.arche-theme .video-card:hover,
.arche-theme .video-card:focus-within {
  box-shadow: 0 14px 34px rgba(0, 31, 90, 0.12);
}

.arche-theme .video-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}

.arche-theme .video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}

.arche-theme .video-card:hover .video-card__media img {
  opacity: 0.84;
}

.arche-theme .video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 31, 90, 0.88);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -43%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.arche-theme .video-card:hover .video-card__play,
.arche-theme .video-card:focus-within .video-card__play {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.arche-theme .video-card__play svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.arche-theme .duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
}

.arche-theme .video-card__title {
  display: -webkit-box;
  min-height: 2.9em;
  overflow: hidden;
  color: var(--arche-ink);
  font-size: 0.91rem;
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.arche-theme .video-card__meta {
  color: var(--arche-quiet);
  font-size: 0.73rem;
}

.arche-theme .video-card__meta .icon {
  width: 13px;
  height: 13px;
}

.arche-theme .category-list {
  scrollbar-width: thin;
}

.arche-theme .category-button {
  min-height: 40px;
  white-space: nowrap;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-font-weight: 700;
}

.arche-theme .footer {
  border-top-color: var(--arche-brand) !important;
  background: #303030;
  color: #aaa;
}

.arche-theme .footer > .container-xl {
  min-height: 150px;
}

.arche-theme .footer__brand {
  width: 150px;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.82;
}

.arche-theme .footer__network-block {
  min-width: 290px;
}

.arche-theme .footer__title {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.arche-theme .footer-social-button {
  width: 36px;
  height: 36px;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: #c8c8c8;
  --bs-btn-border-color: #4b4b4b;
  --bs-btn-hover-bg: var(--arche-brand-bright);
  --bs-btn-hover-border-color: var(--arche-brand-bright);
  --bs-btn-font-size: 0.75rem;
  --bs-btn-font-weight: 800;
  background: #3a3a3a;
}

.arche-theme .footer__legal {
  font-size: 0.78rem;
}

.arche-theme .footer__by {
  color: #aaa;
  font-size: 0.74rem;
}

.arche-theme .footer__by-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.arche-theme .embed-content {
  border-top: 3px solid var(--arche-brand) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.arche-theme .embed-code {
  min-height: 132px;
  resize: vertical;
  background: var(--arche-surface-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}

/* --- Retour en haut -----------------------------------------------------
 * Reprise des regles de la production (`footer #back-to-top`, theme.css
 * ligne 1498) : pastille fixe en bas a droite, invisible tant que la page n a
 * pas defile, bleu de marque au survol. La transition ne porte que sur
 * l opacite, jamais sur la position — cf. le parti pris sur le survol des
 * vignettes.
 */

.arche-theme .back-to-top {
  position: fixed;
  right: 40px;
  bottom: 100px;
  z-index: 1030;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 5px;
  background: #393939;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, background 200ms ease-out;
}

.arche-theme .back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

.arche-theme .back-to-top:hover,
.arche-theme .back-to-top:focus-visible {
  background: var(--arche-brand);
  color: #fff;
}

.arche-theme .back-to-top__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 767.98px) {
  .arche-theme .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

.arche-theme .toast {
  --bs-toast-max-width: 360px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  font-size: 0.84rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .arche-theme .audience-toggle-wrap {
    flex: 0 0 auto;
  }
}

@media (max-width: 767.98px) {
  .arche-theme .container-xl {
    --bs-gutter-x: 1.75rem;
  }

  .arche-theme .navbar-shell .navbar > .container-xl {
    min-height: 66px;
  }

  .arche-theme .brand__video {
    width: 34px;
    height: 34px;
  }

  .arche-theme .brand__arche {
    width: auto;
    height: 38px;
    max-width: 150px;
  }

  .arche-theme .page {
    padding-top: 14px;
    padding-bottom: 50px;
  }

  /* Pleine largeur : la boîte reprend la largeur du conteneur plus ses deux
     gouttières, et les marges négatives la débordent d'autant. Symétrique, et
     sans `vw` — `100vw` inclut l'ascenseur vertical et fait défiler la page
     horizontalement. La largeur est explicite : `.ratio` impose `width: 100%`,
     qu'une marge négative décalerait au lieu d'élargir, et `auto` ne se résout
     pas de la même façon selon le contexte de mise en page. */
  .arche-theme .player {
    width: calc(100% + var(--bs-gutter-x));
    margin-inline: calc(var(--bs-gutter-x) * -0.5);
    border-radius: 0 !important;
  }

  .arche-theme .video-header {
    margin-inline: calc(var(--bs-gutter-x) * -0.5);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .arche-theme .video-header .card-body {
    padding: 22px 18px 20px;
  }

  .arche-theme .footer > .container-xl {
    min-height: 0;
  }
}

@media (min-width: 421px) and (max-width: 767.98px) {
  /* Cette regle de la maquette rend la vignette compacte horizontale sur les
   * petits ecrans. Elle doit epargner `.video-card--wide`, qui est deja
   * horizontale : sinon la grille a deux colonnes s applique a son unique
   * enfant, qui se retrouve comprime a 42 % de la carte. */
  .arche-theme .video-card:not(.video-card--wide) {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
  }

  .arche-theme .video-card:not(.video-card--wide) .video-card__media {
    height: 100%;
    min-height: 128px;
    aspect-ratio: auto;
  }
}

@media (max-width: 420px) {
  .arche-theme .brand__arche {
    height: 32px;
    max-width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arche-theme *,
.arche-theme *::before,
.arche-theme *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================== 2. Pages non couvertes par la maquette */

/* --- Titres de section, réutilisés hors page vidéo ----------------------- */

.arche-theme .section-head h1,
.arche-theme .section-head .section-head__title {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.arche-theme .section-head .section-kicker {
  margin-bottom: 0.25rem;
}

/* --- Bandeau de visuels de catégorie (accueil / page catégorie) ---------
 * Remplace le carrousel owl.carousel + Foundation de la 4.3 : une bande à
 * défilement horizontal avec accroche, sans dépendance JavaScript. Les flèches
 * ne sont affichées que si le contenu débordent (classe posée par arche.js).
 */

.arche-theme .category-strip {
  position: relative;
}

.arche-theme .category-strip__track {
  display: grid;
  grid-auto-columns: 186px;
  grid-auto-flow: column;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.arche-theme .category-tile {
  overflow: hidden;
  border-color: var(--arche-line);
  box-shadow: 0 8px 25px rgba(0, 31, 90, 0.06);
  scroll-snap-align: start;
  transition: box-shadow 180ms ease;
}

.arche-theme .category-tile:hover,
.arche-theme .category-tile:focus-within {
  box-shadow: 0 14px 34px rgba(0, 31, 90, 0.12);
}

.arche-theme .category-tile__media {
  position: relative;
  display: grid;
  overflow: hidden;
  height: 130px;
  place-items: center;
  background: var(--arche-surface-soft);
}

.arche-theme .category-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arche-theme .category-tile__initial {
  color: var(--arche-brand);
  font-size: 2rem;
  font-weight: 800;
  opacity: 0.35;
}

.arche-theme .category-tile__name {
  color: var(--arche-ink);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.arche-theme .category-strip__nav {
  display: none;
}

.arche-theme .category-strip.is-scrollable .category-strip__nav {
  display: inline-flex;
}

/* --- Pastilles de catégorie ---------------------------------------------
 * Fond blanc au repos. On passe par la variable Bootstrap plutot que par
 * `background`, sinon la regle ecraserait aussi les etats :hover et :active du
 * bouton. Le selecteur cible la seule variante `outline` : la pastille active
 * est un `btn-primary`, qui doit garder son bleu de marque.
 */

.arche-theme .category-button.btn-outline-secondary {
  --bs-btn-bg: #fff;
}

/* --- Vignette large : accueil -------------------------------------------
 * Disposition de la production : la miniature a gauche, le titre, les meta et
 * le debut de la description a droite. Deux par ligne a partir de xl, une seule
 * en dessous — au dela, la colonne de texte devient trop etroite pour porter un
 * extrait.
 */

/* La miniature est sortie du flux et remplit sa colonne des que les deux
 * colonnes sont cote a cote. La hauteur de la carte ne depend alors QUE de la
 * colonne de texte, dont le titre et l extrait ont une hauteur reservee : elle
 * est donc la meme pour toutes les cartes.
 *
 * Sans cela la miniature gardait `aspect-ratio: auto` et `height: 100%` dans
 * une colonne a hauteur automatique : la resolution retombait sur le rapport
 * propre de l affiche, et une affiche presque carree donnait une carte de
 * 252 px la ou une affiche 16/9 en donnait 173. En dessous de 576px la
 * miniature repasse au-dessus du texte, en flux et en 16/9. */
@media (min-width: 576px) {
  .arche-theme .video-card--wide .video-card__col-media {
    position: relative;
    min-height: 132px;
  }

  .arche-theme .video-card--wide .video-card__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

/* Titre sur deux lignes et extrait sur trois, place reservee meme quand le
 * contenu est plus court : sans cela une vidéo sans description donne une carte
 * plus basse que ses voisines, et la liste devient irreguliere. */
.arche-theme .video-card--wide .video-card__title {
  min-height: 2.9em;
  font-size: 0.98rem;
}

.arche-theme .video-card__excerpt {
  display: -webkit-box;
  min-height: 4.5em;
  overflow: hidden;
  color: var(--arche-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* --- Vignette : audience cumulée ----------------------------------------
 * Affichée en plus du compteur natif quand ExternalVideoStats fournit des
 * chiffres externes ; le détail par plateforme est dans l'infobulle.
 */

.arche-theme .video-card__audience {
  color: var(--arche-brand);
  cursor: help;
  font-weight: 700;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.arche-theme .tooltip-inner {
  max-width: 260px;
  padding: 0.6rem 0.75rem;
  background: var(--arche-brand);
  font-size: 0.76rem;
  text-align: left;
}

.arche-theme .tooltip.show {
  --bs-tooltip-opacity: 1;
}

.arche-theme .tooltip .arrow,
.arche-theme .tooltip-arrow::before {
  border-top-color: var(--arche-brand) !important;
  border-bottom-color: var(--arche-brand) !important;
}

/* --- Pied de page : vidéos récentes -------------------------------------- */

.arche-theme .footer__recent-block {
  min-width: 290px;
}

.arche-theme .footer-recent {
  color: #c8c8c8;
}

.arche-theme .footer-recent__thumb {
  width: 76px;
  height: 43px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: cover;
  background: #1f1f1f;
}

.arche-theme .footer-recent__title {
  display: -webkit-box;
  overflow: hidden;
  color: #e8e8e8;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.arche-theme .footer-recent:hover .footer-recent__title {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.arche-theme .footer-recent__date {
  font-size: 0.7rem;
  opacity: 0.75;
}

.arche-theme .footer a.footer-recent {
  color: inherit;
}

/* --- États vides et pagination ------------------------------------------- */

.arche-theme .empty-state {
  color: var(--arche-muted);
  padding: 2.5rem 1rem;
  text-align: center;
}

.arche-theme .pagination {
  --bs-pagination-color: var(--arche-brand);
  --bs-pagination-border-color: var(--arche-line);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--arche-brand);
  --bs-pagination-hover-border-color: var(--arche-brand);
  --bs-pagination-active-bg: var(--arche-brand);
  --bs-pagination-active-border-color: var(--arche-brand);
  --bs-pagination-font-size: 0.85rem;
}

/* --- Bandeau « connecté en tant que » ------------------------------------
 * Le thème rend le document complet et n'appelle donc aucun hook d'interface
 * d'AVideo : ce rappel discret est le seul lien vers l'administration.
 */

.arche-theme .admin-hint {
  font-size: 0.72rem;
}

/* --- Connexion ------------------------------------------------------------
 * view/login.php, qui remplace la page de connexion du cœur.
 */

.arche-theme .login-page {
  max-width: 28rem;
}

.arche-theme .login-card {
  background: #fff;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--arche-shadow);
  padding: 1.75rem 1.5rem;
}

.arche-theme .login-card .btn-link {
  color: var(--arche-brand);
  font-size: 0.875rem;
}

.arche-theme .login-captcha__image {
  background: var(--arche-surface-soft);
  border: 1px solid var(--arche-line);
  border-radius: var(--bs-border-radius);
}