/* ════════════════════════════════════════════════════════════════
   Archive catégorie / thématique « comme la home » (07/10/2026)
   Aperçu admin : /thematique/masculin/?archive=d. Chargée avec la
   feuille de la home D (scène de la une, en-têtes de rubrique).
   Balisage : category.php + its_archive_d_*() dans its-tpl-home-d.php.
   ════════════════════════════════════════════════════════════════ */

/* La une : un cran moins haute que sur la home, la rubrique suit. */
.hd--archive .hd-cine-scene { min-height: clamp(420px, 62vh, 640px); }
.hd--archive .hd-une { padding-bottom: 8px; }

/* En-tête de la grille : titre de la page façon bloc de la home. */
.hd.hd--archive-tete { background: none; margin: 0 0 22px; }
.hd--archive-tete .hd-rub-tete { margin-bottom: 8px; }
.hd--archive-tete .ar-desc { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: rgba(28, 61, 52, .72); }

/* Grille : 1re carte (et dernière si elle resterait seule) sur toute la largeur. */
.its-article-grid--cine > .its-article-card--grande { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.its-article-grid--cine > .its-article-card--grande .its-article-card-body { padding: 28px 30px; gap: 12px; max-width: 760px; }
.its-v2 .its-article-grid--cine > .its-article-card.its-article-card--grande .its-article-card-title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.02em; }

/* Colonne de droite : en-têtes des blocs de la home, sans cadres blancs. */
.its-cat-sidebar--d .its-cat-sidebar-box.arch-spot__card { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 28px; }
.its-v2 .its-cat-sidebar--d .its-cat-sidebar-title.arch-spot__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0; border: 0;
  font-size: 22px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--teal);
}
.its-cat-sidebar--d .its-cat-sidebar-title.arch-spot__eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(28, 61, 52, .22); }
.its-cat-sidebar--d .its-cat-pop-item { border-top: 1px solid rgba(28, 61, 52, .1); }
.its-cat-sidebar--d .its-cat-pop-link { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0; }
.its-v2 .its-cat-sidebar--d .its-cat-pop-num { width: auto; height: auto; padding: 0; background: none; font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--teal); }
.its-v2 .its-cat-sidebar--d .its-cat-pop-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--teal); }

@media (max-width: 800px) {
  .hd--archive .hd-cine-scene { min-height: min(70svh, 500px); }
  /* Sur mobile, la grande du bas reprend la taille des autres cartes cinéma. */
  .its-article-grid--cine > .its-article-card--grande:not(:first-child) { aspect-ratio: 16 / 10; }
  .its-article-grid--cine > .its-article-card--grande:not(:first-child) .its-article-card-body { padding: 16px; max-width: none; }
  .its-v2 .its-article-grid--cine > .its-article-card.its-article-card--grande:not(:first-child) .its-article-card-title { font-size: 18px; line-height: 1.18; letter-spacing: 0; }
  .its-article-grid--cine > .its-article-card--grande:first-child { aspect-ratio: 16 / 10; }
  .its-v2 .its-article-grid--cine > .its-article-card.its-article-card--grande:first-child .its-article-card-title { font-size: 22px; }
  .its-article-grid--cine > .its-article-card--grande:first-child .its-article-card-body { padding: 18px; }
}

/* Titre de la rubrique dans la une (Félix, 07/10 : « remonter le titre sur le
   hero ») : en haut à gauche sur la photo, au-dessus du voile. */
.hd--archive .ar-une { position: relative; }
.hd--archive .ar-une-tete { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-top: 28px; pointer-events: none; }
.hd--archive .ar-une-titre { display: block; font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--hd-vanilla); text-shadow: 0 2px 18px rgba(28, 61, 52, .7); }
.hd--archive .ar-une-desc { margin: 10px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.5; color: var(--hd-second); text-shadow: 0 1px 10px rgba(28, 61, 52, .8); }
/* Fondu teal en haut pour lire le titre sur n'importe quelle photo. */
.hd--archive .ar-une::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 200px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(28, 61, 52, .85), rgba(28, 61, 52, 0)); }
/* La liste de droite descend un peu pour ne pas croiser le titre. */
@media (min-width: 1101px) { .hd--archive .hd-cine-liste { top: calc(50% + 40px); } }
@media (max-width: 800px) {
  .hd--archive .ar-une-tete { padding-top: 18px; }
  .hd--archive .ar-une-titre { font-size: 28px; }
  .hd--archive .ar-une-desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hd--archive .ar-une::before { height: 150px; }
}
.hd--archive .ar-une-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Bandeau titre sur toute la largeur (Félix, 07/10 : « améliorer le titre,
   dans toute la largeur ») : titre · trait · description, sur une ligne. */
.hd--archive .ar-une-tete { display: flex; align-items: center; gap: 20px; padding-top: 22px; }
.hd--archive .ar-une-tete .hd-h { flex: 0 0 auto; }
.hd--archive .ar-une-titre { font-size: clamp(26px, 2.4vw, 34px); }
.hd--archive .ar-une-trait { flex: 1 1 auto; min-width: 40px; height: 1px; background: rgba(242, 229, 210, .45); }
.hd--archive .ar-une-desc { flex: 0 1 auto; max-width: 46ch; margin: 0; font-size: 13px; line-height: 1.45; text-align: right; }
.hd--archive .ar-une::before { height: 150px; }
@media (min-width: 1101px) { .hd--archive .hd-cine-liste { top: calc(50% + 24px); } }
@media (max-width: 800px) {
  .hd--archive .ar-une-tete { flex-wrap: wrap; gap: 6px 14px; padding-top: 16px; }
  .hd--archive .ar-une-titre { font-size: 26px; }
  .hd--archive .ar-une-desc { flex-basis: 100%; max-width: none; text-align: left; }
}
/* Sans intertitre, la grille respire sous le fil des brèves. */
.its-article-grid.its-article-grid--cine { margin-top: 8px; }

/* Même largeur que la une et les brèves (Félix, 07/10 : « la largeur utilisée
   n'est pas harmonisée ») : le conteneur du thème prend la mesure de .hd-wrap. */
.hd--archive ~ main .container.container--page-body {
  max-width: calc(1412px + 2 * clamp(16px, 4vw, 78px));
  padding-left: clamp(16px, 4vw, 78px);
  padding-right: clamp(16px, 4vw, 78px);
  box-sizing: border-box;
}

/* Colonne de droite, 2e passe (Félix, 07/10 : « améliore un peu le design »).
   Populaires : n° 1 en carte photo façon home, les suivants en lignes fines. */
.its-cat-sidebar--d .its-cat-pop-item:first-child { border-top: 0; }
.its-cat-sidebar--d .its-cat-pop-item:first-child .its-cat-pop-link { position: relative; display: block; padding: 0; margin-bottom: 4px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--teal); isolation: isolate; }
.its-cat-sidebar--d .its-cat-pop-img,
.its-cat-sidebar--d .its-cat-pop-img picture { position: absolute; inset: 0; z-index: -2; display: block; }
.its-cat-sidebar--d .its-cat-pop-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.its-cat-sidebar--d .its-cat-pop-item:first-child .its-cat-pop-link:hover .its-cat-pop-img img { transform: scale(1.04); }
.its-cat-sidebar--d .its-cat-pop-item:first-child .its-cat-pop-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(28, 61, 52, .95) 0%, rgba(28, 61, 52, .6) 45%, rgba(28, 61, 52, .1) 80%); }
.its-v2 .its-cat-sidebar--d .its-cat-pop-item:first-child .its-cat-pop-num { position: absolute; top: 12px; left: 14px; font-size: 40px; color: var(--vanilla); text-shadow: 0 2px 12px rgba(28, 61, 52, .6); }
.its-v2 .its-cat-sidebar--d .its-cat-pop-item:first-child .its-cat-pop-title { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 16px; line-height: 1.25; color: var(--vanilla); }
.its-v2 .its-cat-sidebar--d .its-cat-pop-item:not(:first-child) .its-cat-pop-num { font-size: 22px; font-weight: 800; color: rgba(28, 61, 52, .45); }
.its-cat-sidebar--d .its-cat-pop-item:not(:first-child) { border-top-color: rgba(28, 61, 52, .08); }
.its-cat-sidebar--d .its-cat-pop-item:not(:first-child) .its-cat-pop-link:hover .its-cat-pop-title { text-decoration: underline; text-underline-offset: 3px; }

/* Autres catégories / thématiques : lignes simples, comme la liste des
   compétitions de la home (les pastilles ont été refusées, Félix 07/10). */
.its-cat-sidebar--d .its-cat-sidebar-box ul { display: block; }
.its-cat-sidebar--d .its-cat-other-item { margin: 0; padding: 0; border: 0; border-top: 1px solid rgba(28, 61, 52, .1); }
.its-cat-sidebar--d .its-cat-other-item:last-child { border-bottom: 1px solid rgba(28, 61, 52, .1); }
.its-cat-sidebar--d .its-cat-other-link { display: block; padding: 12px 0; border: 0; background: none; }
.its-cat-sidebar--d .its-cat-other-row { display: flex; align-items: baseline; gap: 10px; }
.its-v2 .its-cat-sidebar--d .its-cat-other-row > span:first-child { flex: 1 1 auto; font-size: 15px; font-weight: 800; color: var(--teal); }
.its-v2 .its-cat-sidebar--d .its-cat-other-count { font-size: 12px; font-weight: 600; color: rgba(28, 61, 52, .55); font-variant-numeric: tabular-nums; }
.its-cat-sidebar--d .its-cat-other-count::after { content: " articles"; }
.its-cat-sidebar--d .its-cat-other-row::after { content: "→"; font-weight: 800; color: var(--teal); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.its-cat-sidebar--d .its-cat-other-link:hover .its-cat-other-row::after,
.its-cat-sidebar--d .its-cat-other-link:focus-visible .its-cat-other-row::after { opacity: 1; transform: none; }
.its-cat-sidebar--d .its-cat-other-desc { display: none; }
/* La colonne collante (sticky, top 80 px) est plus haute que l'écran depuis la
   carte du n° 1 : son bas n'apparaissait qu'en fin de grille. Elle défile. */
.its-cat-sidebar.its-cat-sidebar--d { position: static; }

/* Passage menu → une sans coupure (Félix, 07/10 : « la séparation entre le hero
   et le menu est trop brute ») : l'image part du teal plein du menu et
   s'éclaircit progressivement. */
.hd--archive .ar-une::before {
  height: 240px;
  background: linear-gradient(to bottom, rgba(28, 61, 52, 1) 0%, rgba(28, 61, 52, .88) 18%, rgba(28, 61, 52, .55) 45%, rgba(28, 61, 52, .2) 75%, rgba(28, 61, 52, 0) 100%);
}
@media (max-width: 800px) { .hd--archive .ar-une::before { height: 170px; } }

/* Image moins verte (Félix, 07/10 : « on ne voit plus les images, trop vert
   l'overlay ») : fondu du haut court (net au contact du menu, effacé vite),
   plus de voile uniforme sur la photo, voile gauche limité à la zone du texte. */
.hd--archive .ar-une::before {
  height: 160px;
  background: linear-gradient(to bottom, rgba(28, 61, 52, 1) 0%, rgba(28, 61, 52, .55) 22%, rgba(28, 61, 52, .15) 55%, rgba(28, 61, 52, 0) 100%);
}
@media (min-width: 801px) {
  .hd--archive .hd-cine-voile {
    background:
      linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .75) 6%, rgba(28, 61, 52, .3) 16%, rgba(28, 61, 52, 0) 28%),
      linear-gradient(90deg, rgba(28, 61, 52, .78) 0%, rgba(28, 61, 52, .5) 34%, rgba(28, 61, 52, 0) 58%, rgba(28, 61, 52, 0) 64%, rgba(28, 61, 52, .55) 84%, rgba(28, 61, 52, .7) 100%);
  }
}
@media (max-width: 800px) {
  .hd--archive .ar-une::before { height: 120px; }
  .hd--archive .hd-cine-voile { background: linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .8) 28%, rgba(28, 61, 52, .3) 55%, rgba(28, 61, 52, 0) 75%); }
}

/* Fondu menu → image, 3e passe (Félix, 07/10 : « pas très beau le fondu ») :
   courbe adoucie (ease-out, une dizaine de paliers) au lieu d'un dégradé
   linéaire qui laissait voir une bande. */
.hd--archive .ar-une::before {
  height: 230px;
  background: linear-gradient(to bottom,
    rgba(28, 61, 52, 1) 0%,
    rgba(28, 61, 52, .82) 8%,
    rgba(28, 61, 52, .64) 17%,
    rgba(28, 61, 52, .48) 26%,
    rgba(28, 61, 52, .35) 36%,
    rgba(28, 61, 52, .24) 46%,
    rgba(28, 61, 52, .15) 57%,
    rgba(28, 61, 52, .08) 69%,
    rgba(28, 61, 52, .03) 83%,
    rgba(28, 61, 52, 0) 100%);
}
@media (max-width: 800px) { .hd--archive .ar-une::before { height: 160px; } }


/* Images de la une (Félix, 07/10) : recadrage calé sur le haut de la photo
   (visages) plutôt que sur le centre ; bandeau un peu moins étiré sur les
   très grands écrans pour moins rogner. */
.hd--archive .hd-cine-img { object-position: 50% 22%; }
.hd--archive .hd-cine-scene { min-height: clamp(420px, 58vh, 600px); }
/* Hero un peu plus haut (Félix, 07/10). */
.hd--archive .hd-cine-scene { min-height: clamp(480px, 68vh, 700px); }
@media (max-width: 800px) { .hd--archive .hd-cine-scene { min-height: min(76svh, 560px); } }

/* Voile, juste milieu (Félix, 07/10 : « trop clair » après « trop vert ») :
   léger partout, dense sous le texte (gauche) et sous la liste (droite). */
@media (min-width: 801px) {
  .hd--archive .hd-cine-voile {
    background:
      linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .8) 8%, rgba(28, 61, 52, .35) 22%, rgba(28, 61, 52, 0) 38%),
      linear-gradient(rgba(28, 61, 52, .12), rgba(28, 61, 52, .12)),
      linear-gradient(90deg, rgba(28, 61, 52, .88) 0%, rgba(28, 61, 52, .66) 32%, rgba(28, 61, 52, .12) 56%, rgba(28, 61, 52, .12) 63%, rgba(28, 61, 52, .7) 80%, rgba(28, 61, 52, .86) 100%);
  }
}
@media (max-width: 800px) {
  .hd--archive .hd-cine-voile { background: linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .85) 30%, rgba(28, 61, 52, .4) 58%, rgba(28, 61, 52, .1) 80%); }
}

/* Voile horizontal SYMÉTRIQUE (Félix, 07/10 : « l'overlay n'est pas au centre
   de l'image ») : dégagé au milieu (40 → 60 %), là où le recadrage place le
   sujet ; dense sur les deux bords, sous le texte et sous la liste. */
@media (min-width: 801px) {
  .hd--archive .hd-cine-voile {
    background:
      linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .8) 8%, rgba(28, 61, 52, .35) 22%, rgba(28, 61, 52, 0) 38%),
      linear-gradient(rgba(28, 61, 52, .12), rgba(28, 61, 52, .12)),
      linear-gradient(90deg, rgba(28, 61, 52, .86) 0%, rgba(28, 61, 52, .6) 26%, rgba(28, 61, 52, .12) 40%, rgba(28, 61, 52, .12) 60%, rgba(28, 61, 52, .6) 74%, rgba(28, 61, 52, .86) 100%);
  }
  .hd--archive .hd-cine-titre { text-shadow: 0 2px 18px rgba(28, 61, 52, .75); }
  .hd--archive .hd-cine-chapo { text-shadow: 0 1px 10px rgba(28, 61, 52, .85); }
}

/* Voile UNIFORME sur toute l'image (Félix, 07/10 : « le mettre sur l'image
   complète ») : même teinte partout, plus de bords plus sombres ; seul le
   fondu du bas vers le fil des brèves reste. */
.hd--archive .hd-cine-voile {
  background:
    linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .7) 9%, rgba(28, 61, 52, 0) 30%),
    linear-gradient(rgba(28, 61, 52, .42), rgba(28, 61, 52, .42));
}
.hd--archive .hd-cine-titre { text-shadow: 0 2px 18px rgba(28, 61, 52, .75); }
.hd--archive .hd-cine-chapo, .hd--archive .hd-cine-item-titre { text-shadow: 0 1px 10px rgba(28, 61, 52, .85); }

/* Liste de droite (Félix, 07/10 : panneau refusé) : voile uniforme un cran
   plus dense et ombre portée marquée sous les titres, sans fond ajouté. */
.hd--archive .hd-cine-voile {
  background:
    linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .7) 9%, rgba(28, 61, 52, 0) 30%),
    linear-gradient(rgba(28, 61, 52, .5), rgba(28, 61, 52, .5));
}
.hd--archive .hd-cine-item-titre { text-shadow: 0 1px 3px rgba(18, 40, 34, .9), 0 0 14px rgba(18, 40, 34, .8); }
.hd--archive .hd-cine-item .hd-cine-item-titre { opacity: .95; }
.hd--archive .hd-cine-item.is-on .hd-cine-item-titre, .hd--archive .hd-cine-item:hover .hd-cine-item-titre { opacity: 1; }

/* Plus de halo derrière le texte (Félix, 07/10 : « le fond derrière le texte
   c'est moche ») : ombre fine seulement, le voile uniforme assure le contraste. */
.hd--archive .hd-cine-titre,
.hd--archive .hd-cine-chapo,
.hd--archive .hd-cine-meta,
.hd--archive .hd-cine-item,
.hd--archive .hd-cine-item-titre,
.hd--archive .ar-une-titre { text-shadow: 0 1px 2px rgba(18, 40, 34, .55); }
/* Aucune ombre autour du texte (Félix, 07/10 : « non, l'ombre autour du texte »). */
.hd--archive .hd-cine-titre,
.hd--archive .hd-cine-chapo,
.hd--archive .hd-cine-meta,
.hd--archive .hd-cine-txt,
.hd--archive .hd-cine-item,
.hd--archive .hd-cine-item-titre,
.hd--archive .ar-une-titre { text-shadow: none; }
/* Voile uniforme plus dense (Félix, 07/10 : « un voile plus vert ») : le texte
   n'a plus d'ombre, c'est le voile qui fait le contraste. */
.hd--archive .hd-cine-voile {
  background:
    linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .78) 9%, rgba(28, 61, 52, 0) 30%),
    linear-gradient(rgba(28, 61, 52, .62), rgba(28, 61, 52, .62));
}
/* Contraste RGAA (Félix, 07/10 : voile uniforme à 80 %) : texte vanilla sur la
   pire zone de photo (blanc) = 5,19:1, au-dessus du 4,5:1 exigé pour le texte
   courant (chapô, liste, signature) ; le grand titre a ≥ 3:1. Ne pas descendre
   sous 76 % sans retirer le petit texte. */
.hd--archive .hd-cine-voile {
  background:
    linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .9) 9%, rgba(28, 61, 52, 0) 30%),
    linear-gradient(rgba(28, 61, 52, .8), rgba(28, 61, 52, .8));
}

/* Voile « là où il y a du texte » (Félix, 07/10 : à 80 % uniforme « on perd
   l'intérêt de la photo ») : conforme RGAA sous le texte, photo nette ailleurs.
   - bas (titre, chapô, signature) : ≥ 85 % → ≥ 5,9:1 sur zone blanche ;
     le grand titre (3:1 exigé) reste au-dessus de 65 % ;
   - droite (liste) : ≥ 80 % sur la largeur de la liste → ≥ 5,2:1 ;
   - haut et centre : dégagés (visages, recadrage à 22 %). */
@media (min-width: 1101px) {
  .hd--archive .hd-cine-voile {
    background:
      linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .9) 12%, rgba(28, 61, 52, .86) 34%, rgba(28, 61, 52, .66) 50%, rgba(28, 61, 52, .3) 64%, rgba(28, 61, 52, .08) 78%, rgba(28, 61, 52, 0) 90%),
      linear-gradient(90deg, rgba(28, 61, 52, 0) 62%, rgba(28, 61, 52, .55) 68%, rgba(28, 61, 52, .82) 72%, rgba(28, 61, 52, .82) 100%);
  }
}
@media (max-width: 1100px) {
  .hd--archive .hd-cine-voile {
    background: linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .9) 14%, rgba(28, 61, 52, .86) 40%, rgba(28, 61, 52, .66) 55%, rgba(28, 61, 52, .25) 70%, rgba(28, 61, 52, 0) 85%);
  }
}
/* Sujet un peu plus bas, juste au-dessus du titre (Félix, 07/10). */
.hd--archive .hd-cine-img { object-position: 50% 10%; } /* % bas = image calée plus haut → le sujet descend vers le titre */

/* ── Mobile (08/10, Félix) ───────────────────────────────────────────────
   1. Le trait passait à la ligne sous le titre (flex-wrap) : on aurait dit un
      titre sur deux lignes. Il rétrécit maintenant, jusqu'à disparaître.
   2. Bouton retour vers l'accueil devant le titre, comme l'ancien haut
      d'archive et les articles (carré teal translucide, chevron vanilla). */
.hd--archive .ar-une-retour { display: none; }
@media (max-width: 899px) {
  .hd--archive .ar-une-tete { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .hd--archive .ar-une-tete .hd-h { flex: 0 1 auto; min-width: 0; }
  .hd--archive .ar-une-trait { flex: 1 1 0; min-width: 0; }
  .hd--archive .ar-une-retour {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 36px; height: 36px; box-sizing: border-box; pointer-events: auto; text-decoration: none;
    background: rgba(28, 61, 52, .55); border: 1px solid rgba(242, 229, 210, .18); color: var(--hd-vanilla);
  }
  .hd--archive .ar-une-retour::before { content: "\2039"; font-size: 26px; line-height: 1; position: relative; top: -2px; color: var(--hd-vanilla); }
}
html.is-app .hd--archive .ar-une-retour {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 36px; height: 36px; box-sizing: border-box; pointer-events: auto; text-decoration: none;
  background: rgba(28, 61, 52, .55); border: 1px solid rgba(242, 229, 210, .18); color: var(--hd-vanilla);
}

/* App iOS : le menu du site est masqué, c'est le premier bloc à fond qui
   s'étire sous l'heure (règle d'its-app-shell.css). La une d'archive n'y était
   pas : titre de la catégorie et bouton retour passaient sous l'horloge
   (Félix, 08/10). Même principe : bordure teal de la hauteur de l'encoche. */
html.is-app .hd--archive .ar-une { border-top: env(safe-area-inset-top, 0px) solid #1C3D34; }