/* V183 (proposition) — illustration d'accueil en haute définition et parcours sur une ligne défilante.
   - L'image est choisie selon la densité de l'écran : 1920 px (1x), 2880 px (1,5x), 3840 px (2x et plus).
     La zone d'illustration peut atteindre 1920 px de large : 3840 px couvrent un écran haute densité à cette largeur.
   - Sur téléphone et petite tablette (720 px et moins), la même image horizontale, avec le cadrage de la V182.
   - Les cinq parcours sont regroupés dans .v88-topics : invisible sur ordinateur (display:contents),
     une seule ligne défilante sur téléphone. */
.v88-art{
  background-image:url("img/hero-art-v99-1920.webp");
  background-image:-webkit-image-set(url("img/hero-art-v99-1920.webp") 1x,url("img/hero-art-v99-2880.webp") 1.5x,url("img/hero-art-v99-3840.webp") 2x);
  background-image:image-set(url("img/hero-art-v99-1920.webp") 1x,url("img/hero-art-v99-2880.webp") 1.5x,url("img/hero-art-v99-3840.webp") 2x);
}
.v88-topics{display:contents}
/* Sélection au clavier : contour net (la V182 le supprimait et ne changeait que la couleur). */
.v88-brand:focus-visible,.v88-topic:focus-visible,.v88-nav a:focus-visible{outline:2px solid #704c0f;outline-offset:2px}

@media (max-width:720px){
  .v88-top{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;padding:10px 0 8px}
  .v88-topics{
    display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    margin:0 -17px;padding:5px 44px 6px 17px;scroll-padding-inline:44px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent 100%);
  }
  .v88-topics::-webkit-scrollbar{display:none}
  .v88-topic,.v88-topic+.v88-topic{flex:0 0 auto;margin:0;min-height:44px;box-sizing:border-box;padding:9px 13px;justify-content:flex-start;scroll-snap-align:start}
  .v88-topic b{white-space:nowrap}
  .v88-subtitle{text-shadow:0 2px 12px rgba(255,252,246,.95)} /* halo léger, comme celui du titre dans la V182 */
  .v88-nav{width:100%;margin:0;justify-content:space-between}
  .v88-nav a{display:inline-flex;align-items:center;min-height:36px}
  .v88-art{top:96px;background-position:66% 50%} /* cadrage de la V182 : à 76 %, la chapelle passait sous le sous-titre */
}

/* Variante « voile allégé » : derrière les textes, le voile garde exactement la valeur de la V182 ;
   il s'allège seulement dans les zones dégagées.
   Ordinateur : bandes du haut et du bas, et transition à droite de la colonne de texte (au-delà de 55 %).
   Téléphone : bande entre le bandeau et le titre (7-13 %) et bas de l'image, derrière et sous les boutons (après 72 %). */
.v88-art::after{background:
  linear-gradient(90deg,rgba(255,252,246,.94) 0,rgba(255,252,246,.76) 32%,rgba(255,252,246,.18) 55%,transparent 64%),
  linear-gradient(180deg,rgba(251,246,236,.38) 0,rgba(251,246,236,.138) 14%,transparent 18%,transparent 82%,rgba(246,238,225,.42) 100%)}
@media (max-width:720px){
  .v88-art::after{background:
    linear-gradient(90deg,rgba(255,252,246,.98) 0,rgba(255,252,246,.9) 50%,rgba(255,252,246,.35) 78%),
    linear-gradient(180deg,rgba(251,246,236,.7) 0,rgba(251,246,236,.5) 6.5%,rgba(251,246,236,.2) 9.5%,rgba(251,246,236,.29) 13%,rgba(251,246,236,.255) 14%,transparent 22%,rgba(250,245,235,.5) 72%,rgba(250,245,235,.22) 100%)}
}