/*
 * WS Banniere - VITRINE
 *
 * Une RANGEE DE PANNEAUX. Chaque panneau est une porte d'entree : une image
 * ou un aplat, un titre, un badge, un bouton. C'est la banniere des pages
 * d'accueil qui envoient vers plusieurs univers d'un coup, la ou Classique
 * n'en propose qu'un.
 *
 * Source de verite du design : `design-banniere-vitrine.html`. Pour retoucher
 * une forme ou un dosage, on y cherche la valeur, puis on la reporte ici.
 *
 * CHAQUE `var()` PORTE SON REPLI.
 * Ces variables viennent des `selectors` d'Elementor, donc d'une feuille
 * engendree. Partout ou elle n'est pas encore la (apercu sans styles, page
 * lue avant la fin du chargement, cache vide), un `var()` nu serait
 * INVALIDE, pas vide : les panneaux s'ecraseraient en un filet de quelques
 * pixels. Avec un repli, la banniere tient debout toute seule.
 *
 * SPECIFICITE FAIBLE, ET C'EST VOULU.
 * Elementor ecrit `.elementor-element-XXX .classe`, en 0-2-0, et doit
 * toujours gagner. Seule exception assumee : le SVG des fleches, dont la
 * taille fait partie du dessin (voir plus bas).
 */

.wsbn-vitrine{
  position:relative;
}

/* --------------------------------------------------------------------------
   LA RANGEE

   `grid` et pas `flex` : on veut des panneaux de LARGEUR EGALE quel que soit
   leur contenu. En flex, un titre plus long elargirait son panneau et la
   rangee perdrait son rythme.
   -------------------------------------------------------------------------- */

.wsbn-vitrine__piste{
  position:relative;
}

.wsbn-vitrine__rangee{
  display:grid;
  grid-template-columns:repeat(var(--wsbn-vit-cols, 3), 1fr);
  gap:var(--wsbn-vit-gap, 10px);
}

/* --------------------------------------------------------------------------
   UN PANNEAU

   `isolation:isolate` cree un contexte d'empilement propre : le voile et le
   contenu se rangent l'un par rapport a l'autre sans jamais passer derriere
   ce qui entoure la banniere.
   -------------------------------------------------------------------------- */

.wsbn-vitrine__panneau{
  position:relative;
  display:flex;
  flex-direction:column;

  /* LA POSITION DU CONTENU SE REGLE A DEUX NIVEAUX.
     `--wsbn-vit-v-moi` est pose sur le panneau lui-meme et gagne, parce
     qu'il est lu plus bas dans l'arbre. Sans lui, on retombe sur le reglage
     de la rangee. C'est ce qui permet aux panneaux photo de caler leur texte
     en bas, sur la partie assombrie par le voile, pendant qu'un aplat centre
     le sien. Un reglage global seul ne sait pas faire ca. */
  justify-content:var(--wsbn-vit-v-moi, var(--wsbn-vit-v, flex-end));

  align-items:var(--wsbn-vit-h, center);
  text-align:var(--wsbn-vit-align, center);
  min-height:var(--wsbn-vit-h-min, 520px);
  padding:var(--wsbn-vit-pad, 34px);
  border-radius:var(--wsbn-vit-radius, 0px);
  overflow:hidden;
  isolation:isolate;
  background:var(--wsbn-vit-fond-moi, var(--wsbn-vit-fond, #F7EFE7));
  color:var(--wsbn-vit-encre-moi, var(--wsbn-vit-encre, #FFFFFF));
  text-decoration:none;
}

/* LE PANNEAU SANS PHOTO PORTE DU TEXTE SOMBRE.
   Sur une photo, le texte est blanc parce qu'il se pose sur une image
   assombrie par le voile. Sans photo il n'y a pas de voile, et le blanc
   devient invisible sur un fond clair.
   Les deux restent reglables, ensemble par la rangee ou panneau par
   panneau : `--wsbn-vit-encre-moi` l'emporte sur les deux. */
.wsbn-vitrine__panneau--aplat{
  color:var(--wsbn-vit-encre-moi, var(--wsbn-vit-encre-aplat, #1B2A4A));
}

/* Un panneau peut etre un lien. Le reset `a{color:inherit}` de beaucoup de
   themes bat une classe simple posee sur un <a> : on qualifie donc par `a.`
   pour reprendre la main sur la couleur et le soulignement. */
a.wsbn-vitrine__panneau{
  color:var(--wsbn-vit-encre-moi, var(--wsbn-vit-encre, #FFFFFF));
  text-decoration:none;
}

/* CELLE-CI VIENT APRES, ET CE N'EST PAS DECORATIF.
   `a.wsbn-vitrine__panneau` et `a.wsbn-vitrine__panneau--aplat` ont la MEME
   specificite : un element et une classe, soit 0-1-1. A egalite, c'est la
   derniere ecrite qui gagne. Placee avant, elle perdait, et un panneau sans
   photo mais cliquable reprenait du texte blanc sur fond clair. */
a.wsbn-vitrine__panneau--aplat{
  color:var(--wsbn-vit-encre-moi, var(--wsbn-vit-encre-aplat, #1B2A4A));
}

/* --------------------------------------------------------------------------
   LA PHOTO

   Une vraie balise `img` et pas un fond CSS : c'est ce qui permet le
   `srcset`, le `fetchpriority` et le texte de remplacement. Jamais
   `loading="lazy"` sur l'image d'une banniere, c'est la plus grosse de
   l'ecran d'accueil et la differer retarde l'affichage percu.
   -------------------------------------------------------------------------- */

.wsbn-vitrine__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* `<picture>` est EN LIGNE par defaut, et une hauteur en pourcentage ne se
   resout pas contre une boite en ligne : l'image tomberait a sa hauteur
   naturelle au lieu de remplir le panneau. */
.wsbn-vitrine__picture{
  display:block;
  width:100%;
  height:100%;
}

.wsbn-vitrine__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--wsbn-vit-pos-moi, var(--wsbn-vit-pos, 50% 50%));

  /* Le zoom au survol est un `transform` : compose par la carte graphique,
     il ne refait pas la mise en page. Animer `width` la referait a chaque
     image, et une banniere n'a pas le droit de couter ca. */
  transition:transform var(--wsbn-vit-duree, .6s) cubic-bezier(.2,.6,.2,1);
}

.wsbn-vitrine--survol-zoom .wsbn-vitrine__panneau:hover .wsbn-vitrine__media img{
  transform:scale(var(--wsbn-vit-zoom, 1.06));
}

/* --------------------------------------------------------------------------
   LE VOILE

   Un degrade qui monte du bas, pas un aplat : le texte est en bas, c'est la
   qu'il faut assombrir. Un voile uniforme ternirait la photo entiere pour
   rien.
   -------------------------------------------------------------------------- */

.wsbn-vitrine__voile{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(0,0,0,var(--wsbn-vit-voile, .5)) 0%,
    rgba(0,0,0,calc(var(--wsbn-vit-voile, .5) * .55)) var(--wsbn-vit-voile-mi, 38%),
    rgba(0,0,0,0) var(--wsbn-vit-voile-fin, 72%)
  );
}

/* --------------------------------------------------------------------------
   LE CONTENU
   -------------------------------------------------------------------------- */

.wsbn-vitrine__corps{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:var(--wsbn-vit-h, center);
  gap:var(--wsbn-vit-corps-gap, 16px);
  max-width:var(--wsbn-vit-corps-w, 420px);
  width:100%;
}

.wsbn-vitrine__badge{
  display:inline-flex;
  align-items:center;
  padding:var(--wsbn-vit-badge-py, 9px) var(--wsbn-vit-badge-px, 20px);
  border-radius:var(--wsbn-vit-badge-radius, 8px);
  background:var(--wsbn-vit-badge-fond, #1B2A4A);
  color:var(--wsbn-vit-badge-encre, #FFFFFF);
  font-size:var(--wsbn-vit-badge-taille, 15px);
  font-weight:800;
  letter-spacing:.02em;
}

/* LA RACINE DEVANT, ET `inherit` : SANS CA LE THEME COLORE LE TITRE.
   Le titre d'un panneau est un `<h2>` par defaut, et les themes ecrivent
   `h2{color:...}`. Blocksy pose `h2{color:var(--theme-heading-color,...)}`.

   Une regle DIRECTE, meme en 0-0-1, bat toujours une couleur HERITEE, quelle
   que soit la specificite du parent : l'heritage n'entre pas dans le calcul,
   il ne sert que s'il n'y a aucune declaration. La couleur blanche posee sur
   le panneau ne descendait donc jamais jusqu'au titre, et un titre en bleu
   nuit sortait sur une photo assombrie, prevue pour du blanc.

   Mesure du 2026-09-23 sur me4you : titre en rgb(25,42,61) la ou le panneau,
   le badge, la ligne sous le titre et le bouton etaient bien en blanc. C'est
   le titre SEUL qui decrochait, ce qui rend le defaut difficile a nommer.

   Pire, il se deplace : la balise du titre est au choix. En `div` ou en `p`
   la regle `h2` du theme ne mord pas, et le meme reglage s'affiche juste.

   `.wsbn-vitrine` devant donne 0-2-0, qui bat aussi un `.entry-content h2`. */
.wsbn-vitrine .wsbn-vitrine__titre{
  color:inherit;
}

.wsbn-vitrine__titre{
  margin:0;
  font-size:var(--wsbn-vit-titre-taille, 40px);
  line-height:var(--wsbn-vit-titre-inter, 1.12);
  font-weight:var(--wsbn-vit-titre-gras, 700);
}

.wsbn-vitrine__sous{
  margin:0;
  font-size:var(--wsbn-vit-sous-taille, 13.5px);
  line-height:1.5;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.92;
}

/* --------------------------------------------------------------------------
   LE BOUTON

   Quand le panneau entier est un lien, le bouton n'est qu'une ETIQUETTE :
   deux liens imbriques ne sont pas du HTML valide, et le clavier ne saurait
   plus ou aller. Quand le panneau n'est pas cliquable, c'est un vrai lien,
   qui ouvre sans script.
   -------------------------------------------------------------------------- */

/* LA BOITE DES BOUTONS.
   Elle porte desormais la marge haute, que le bouton portait lui-meme :
   avec deux boutons, chacun aurait pousse la sienne et le second serait
   descendu d'un cran sans raison visible. La marge appartient au groupe,
   pas a chaque bouton. */
.wsbn-vitrine__btns{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--wsbn-vit-btns-gap, 10px);
  margin-top:var(--wsbn-vit-btn-haut, 6px);
}

.wsbn-vitrine__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:var(--wsbn-vit-btn-py, 11px) var(--wsbn-vit-btn-px, 26px);
  border-radius:var(--wsbn-vit-btn-radius, 4px);
  background:var(--wsbn-vit-btn-fond, #E0B25C);
  color:var(--wsbn-vit-btn-encre, #FFFFFF);
  font-size:var(--wsbn-vit-btn-taille, 14.5px);
  font-weight:700;
  text-decoration:none;
  transition:background var(--wsbn-vit-btn-duree, .22s) ease,
             scale var(--wsbn-vit-btn-duree, .22s) ease;
}

a.wsbn-vitrine__btn{
  color:var(--wsbn-vit-btn-encre, #FFFFFF);
  text-decoration:none;
}

/* LE SECOND BOUTON D'UN PANNEAU : la meme boite, une autre matiere.
   Il vient APRES la base et apres sa variante `a.`, parce qu'il doit defaire
   leur fond et leur couleur. A specificite egale c'est la derniere regle qui
   gagne, et `a.wsbn-vitrine__btn` est en 0-1-1 : le selecteur du second est
   donc qualifie de la meme facon pour ne pas perdre sur un panneau
   cliquable.

   LA BORDURE SUIT `currentColor`, ET C'EST NECESSAIRE. Sur un panneau photo
   le texte est blanc, sur un aplat il est sombre : une couleur en dur aurait
   disparu dans l'un des deux cas. */
.wsbn-vitrine .wsbn-vitrine__btn--sec,
.wsbn-vitrine a.wsbn-vitrine__btn--sec{
  background:transparent;
  color:inherit;
  /* Ombre INTERIEURE et non bordure : une bordure de 2 px s'ajoute a la
     boite, et le second bouton faisait 54 px contre 51 au premier. */
  box-shadow:inset 0 0 0 2px var(--wsbn-vit-btn2-bord, currentColor);
}

.wsbn-vitrine__panneau:hover .wsbn-vitrine__btn--sec{
  background:var(--wsbn-vit-btn2-fond-survol, transparent);
}

.wsbn-vitrine__panneau:hover .wsbn-vitrine__btn{
  background:var(--wsbn-vit-btn-fond-survol, #C9963F);
}

/* `scale` et non `transform` : la propriete individuelle s'AJOUTE a un
   `transform` existant au lieu de l'ecraser. */
.wsbn-vitrine--survol-souleve .wsbn-vitrine__panneau:hover .wsbn-vitrine__btn{
  scale:1.03;
}

/* --------------------------------------------------------------------------
   L'APPARITION EN CASCADE

   Les panneaux arrivent UN A UN. Demande le 2026-10-05 : l'animation
   d'entree d'Elementor s'applique a l'ENVELOPPE du widget, donc la
   banniere entiere apparait d'un bloc. Elle n'a aucun decalage entre
   enfants, et aucun reglage exterieur ne lui en donnera : l'effet doit
   vivre ici.

   LE RETARD DE CHAQUE PANNEAU EST SON RANG, pose en ligne par le rendu,
   multiplie par le decalage. Le rang vient du rendu et non de regles
   `nth-child` : les panneaux sont un repeteur, leur nombre est libre, et
   des regles ecrites a la main plafonneraient au nombre prevu le jour ou
   on les a ecrites. C'est le mecanisme de WS Booster, pas celui
   d'Hephaistos, dont les sept retards sont ecrits a la main parce que sa
   structure est fixe.

   C'EST LE SCRIPT QUI MASQUE, JAMAIS LA FEUILLE SEULE.
   `wsbn-apparition` est posee par `ws-banniere-apparition.js` des le
   chargement, `wsbn-apparition-vu` a l'entree dans l'ecran. Si le script
   ne se charge pas, aucune classe n'arrive et la banniere s'affiche
   entiere : un panneau invisible est le seul defaut qu'on ne rattrape pas
   depuis l'admin.

   CES IMAGES CLES N'ECRIVENT QUE `opacity` ET `transform`, jamais
   `translate` : le soulevement au survol utilise `translate`, et les
   proprietes individuelles se composent avec `transform` au lieu de
   l'ecraser. Mesure dans la maquette : apres l'entree, `transform` vaut
   `none`, et le survol souleve encore.

   `backwards` et non `both` : `both` laisserait la derniere image
   inscrite sur l'element, et un `transform` fige bloquerait ensuite tout
   le reste.
   -------------------------------------------------------------------------- */

.wsbn-vitrine.wsbn-apparition:not(.wsbn-apparition-vu) .wsbn-vitrine__panneau{
  opacity:0;
}

.wsbn-vitrine.wsbn-apparition-vu .wsbn-vitrine__panneau{
  animation:var(--wsbn-vit-in, wsbn-vit-in-up)
            var(--wsbn-vit-in-dur, .7s)
            var(--wsbn-vit-in-ease, cubic-bezier(.16,1,.3,1))
            calc(var(--wsbn-vit-in-gap, 90ms) * var(--wsbn-vit-rang, 0))
            backwards;
}

.wsbn-vitrine--in-up   { --wsbn-vit-in:wsbn-vit-in-up; }
.wsbn-vitrine--in-fade { --wsbn-vit-in:wsbn-vit-in-fade; }
.wsbn-vitrine--in-left { --wsbn-vit-in:wsbn-vit-in-left; }
.wsbn-vitrine--in-zoom { --wsbn-vit-in:wsbn-vit-in-zoom; }

@keyframes wsbn-vit-in-up{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:none; }
}
@keyframes wsbn-vit-in-fade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes wsbn-vit-in-left{
  from{ opacity:0; transform:translateX(-32px); }
  to  { opacity:1; transform:none; }
}
@keyframes wsbn-vit-in-zoom{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:none; }
}

/* Le visiteur qui demande moins d'animations ne recoit rien : ni
   masquage, ni mouvement. Le socle ne pose meme pas la classe, mais la
   feuille le redit, parce qu'elle doit tenir seule. */
@media (prefers-reduced-motion: reduce){
  .wsbn-vitrine.wsbn-apparition .wsbn-vitrine__panneau,
  .wsbn-vitrine.wsbn-apparition-vu .wsbn-vitrine__panneau{
    opacity:1;
    animation:none;
  }
}

/* Le panneau se souleve : `translate`, pas `margin-top`, qui refait la mise
   en page de toute la rangee. */
.wsbn-vitrine--survol-souleve .wsbn-vitrine__panneau{
  transition:translate var(--wsbn-vit-duree, .6s) cubic-bezier(.2,.6,.2,1),
             box-shadow var(--wsbn-vit-duree, .6s) ease;
}

.wsbn-vitrine--survol-souleve .wsbn-vitrine__panneau:hover{
  translate:0 -6px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

/* --------------------------------------------------------------------------
   LES PUCES ET LES FLECHES

   MASQUEES PAR DEFAUT, ALLUMEES PAR LE SCRIPT.
   C'est le sens du contrat retenu partout dans ce projet : la classe POSEE
   agit, son absence ne casse rien. Sans script, ni puces ni fleches, et le
   glissement du doigt marche quand meme puisqu'il est natif. L'inverse
   aurait laisse des boutons inertes a l'ecran le jour ou un cache aurait
   avale le fichier.

   Elles ne s'affichent qu'en diaporama : ailleurs tous les panneaux sont
   visibles et une pagination ne voudrait rien dire.
   -------------------------------------------------------------------------- */

.wsbn-vitrine__puces{
  display:none;
  position:absolute;
  z-index:3;
  right:var(--wsbn-vit-puces-x, 18px);
  bottom:var(--wsbn-vit-puces-y, 16px);
  /* L'ECART N'EST PAS QUE DU DESSIN : c'est lui qui donne sa largeur a la
     zone tactile de chaque puce, qui vaut la puce PLUS l'ecart. A sept
     pixels d'ecart la zone faisait quatorze pixels de large ; a dix-huit
     elle en fait vingt-cinq, au-dessus du minimum de vingt-quatre. */
  gap:var(--wsbn-vit-puces-gap, 18px);
  padding:7px 10px;
  border-radius:999px;
  /* Un fond discret : les puces se posent sur une photo dont on ne connait
     pas la couleur, et un blanc sur blanc ne se voit pas. */
  background:var(--wsbn-vit-puces-fond, rgba(255,255,255,.82));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.wsbn-vitrine__puce{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  cursor:pointer;
  position:relative;
  width:var(--wsbn-vit-puce-d, 7px);
  height:var(--wsbn-vit-puce-d, 7px);
  border-radius:999px;
  background:var(--wsbn-vit-puce, rgba(27,42,74,.3));
  /* `width` s'anime ici, et c'est assume : sept pixels qui en deviennent
     dix-huit, sur trois elements, au doigt. Ce n'est pas une boucle, ca ne
     tourne pas soixante fois par seconde. */
  transition:width .25s ease, background .25s ease;
}

/* LA ZONE TACTILE N'EST PAS LA PUCE.
   Une puce fait sept pixels de haut. C'est une cible que le doigt rate, et
   ces commandes n'existent QUE sur ecran tactile : elles sont cachees sur
   ordinateur, ou la souris viserait pourtant juste.

   La zone est donc etendue par un calque TRANSPARENT, qui ne prend aucune
   place dans la mise en page. Grossir la puce elle-meme, ou la remplir de
   marge interieure, ferait tripler la hauteur du bandeau : la puce serait
   confortable et le dessin perdu.

   Sa largeur vaut la puce PLUS l'ecart, donc elle deborde d'un demi-ecart de
   chaque cote : deux zones voisines se rejoignent exactement au milieu, sans
   jamais se chevaucher. Deux zones qui se chevauchent, c'est le doigt qui
   reveille la mauvaise puce, et personne ne comprend pourquoi. */
.wsbn-vitrine__puce::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  width:calc(100% + var(--wsbn-vit-puces-gap, 18px));
  height:var(--wsbn-vit-puce-touche, 44px);
}

.wsbn-vitrine__puce[aria-current="true"]{
  width:var(--wsbn-vit-puce-active-l, 18px);
  background:var(--wsbn-vit-puce-active, #1B2A4A);
}

.wsbn-vitrine__fleche{
  display:none;
  position:absolute;
  z-index:3;
  top:50%;
  translate:0 -50%;
  /* QUARANTE-QUATRE, ET PAS QUARANTE. Une fleche de diaporama ne se clique
     qu'au doigt : elle est cachee sur ordinateur. Quarante pixels etaient le
     reflexe de la souris. */
  width:var(--wsbn-vit-fleche-d, 44px);
  height:var(--wsbn-vit-fleche-d, 44px);
  align-items:center;
  justify-content:center;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  cursor:pointer;
  border-radius:999px;
  background:var(--wsbn-vit-fleche-fond, rgba(255,255,255,.86));
  color:var(--wsbn-vit-fleche-encre, #1B2A4A);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}

.wsbn-vitrine__fleche--avant{ left:var(--wsbn-vit-fleche-x, 10px); }
.wsbn-vitrine__fleche--apres{ right:var(--wsbn-vit-fleche-x, 10px); }

/* Au bout de la course, la fleche ne sert plus a rien : on la grise au lieu
   de la retirer, pour que les deux cotes gardent leur place. */
.wsbn-vitrine__fleche[disabled]{
  opacity:.35;
  cursor:default;
}

/* LE SVG PORTE SA TAILLE, DONC LA RACINE PASSE DEVANT.
   Les themes normalisent les icones d'Elementor avec `.elementor-element
   svg{width:1em}`, en 0-1-1. Un selecteur a nous en 0-1-0 perdrait, et la
   fleche tomberait a la taille d'un caractere. C'est exactement ce qui a
   fait << disparaitre >> la courbe d'Arc sur un site en Blocksy. */
.wsbn-vitrine .wsbn-vitrine__fleche svg{
  width:var(--wsbn-vit-fleche-ico, 17px);
  height:var(--wsbn-vit-fleche-ico, 17px);
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   TABLETTE

   Deux colonnes par defaut. Trois panneaux a 768 px donnent des colonnes de
   250 px, ou plus rien ne tient.

   Le diaporama vaut aussi pour la tablette, puisque les fleches y sont
   offertes : il faut donc qu'il y ait quelque chose a faire defiler. Le
   panneau y est plus etroit qu'en mobile, sinon un seul occuperait 768 px
   pour un contenu qui en demande quatre cents.
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .wsbn-vitrine__rangee{
    grid-template-columns:repeat(var(--wsbn-vit-cols-tab, 2), 1fr);
  }

  .wsbn-vitrine__panneau{
    min-height:var(--wsbn-vit-h-min-tab, 420px);
  }

  .wsbn-vitrine--mob-defile .wsbn-vitrine__rangee{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:var(--wsbn-vit-tab-largeur, 62%);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Le defilement ne doit pas remonter a la page quand on arrive au bout. */
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .wsbn-vitrine--mob-defile .wsbn-vitrine__rangee::-webkit-scrollbar{display:none}
  .wsbn-vitrine--mob-defile .wsbn-vitrine__panneau{scroll-snap-align:start}

  .wsbn-vitrine--puces-on.wsbn-vitrine--mob-defile .wsbn-vitrine__puces{display:flex}
  .wsbn-vitrine--fleches-on.wsbn-vitrine--mob-defile .wsbn-vitrine__fleche{display:flex}
}

/* --------------------------------------------------------------------------
   MOBILE

   Trois dispositions, et le choix a un prix chacun :

   DIAPORAMA   un panneau par ecran, avec accrochage. Le defaut, et ce que
               fait le site de reference. Garde les panneaux lisibles, au
               prix d'un contenu qu'on ne voit pas d'emblee.
   EMPILE      l'un sous l'autre. Le plus lisible, le plus long a parcourir.
   DEUX        deux colonnes etroites. Tient dans un ecran, titres coupes.

   << Diaporama >> et << defilement avec apercu >> sont le meme montage a une
   valeur pres, la largeur du panneau : a 100 % on voit un panneau, en
   dessous on apercoit le suivant. Un curseur couvre les deux.
   -------------------------------------------------------------------------- */

@media (max-width:767px){
  .wsbn-vitrine__panneau{
    min-height:var(--wsbn-vit-h-min-mob, 420px);
    padding:var(--wsbn-vit-pad-mob, 24px);
  }

  .wsbn-vitrine--mob-empile .wsbn-vitrine__rangee{
    grid-template-columns:1fr;
    grid-auto-flow:row;
    overflow-x:visible;
  }

  .wsbn-vitrine--mob-deux .wsbn-vitrine__rangee{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-flow:row;
    overflow-x:visible;
  }

  .wsbn-vitrine--mob-defile .wsbn-vitrine__rangee{
    grid-auto-columns:var(--wsbn-vit-mob-largeur, 100%);
  }
}

/* --------------------------------------------------------------------------
   VEILLE DES ANIMATIONS

   `wsbn-hors-vue` est posee sur la banniere par ws-banniere-veille.js quand
   elle quitte l'ecran, `wsbn-onglet-cache` sur <html> quand l'onglet passe
   en arriere-plan. Une boucle qu'on ne voit pas ne doit pas composer
   d'image.

   L'avance automatique, elle, n'est pas une animation CSS : son minuteur est
   arrete par le script lui-meme, qui surveille les memes evenements.
   -------------------------------------------------------------------------- */

.wsbn-hors-vue,
.wsbn-hors-vue *,
.wsbn-hors-vue::before,
.wsbn-hors-vue::after,
.wsbn-hors-vue *::before,
.wsbn-hors-vue *::after,
.wsbn-onglet-cache .wsbn-vitrine * {
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   ANIMATIONS REDUITES

   Rien ne tourne en boucle ici, mais les mouvements PROVOQUES comptent
   aussi : la preference vaut pour eux.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .wsbn-vitrine__media img,
  .wsbn-vitrine__panneau,
  .wsbn-vitrine__btn,
  .wsbn-vitrine__puce{
    transition:none !important;
  }

  .wsbn-vitrine--survol-zoom .wsbn-vitrine__panneau:hover .wsbn-vitrine__media img{
    transform:none;
  }

  .wsbn-vitrine--survol-souleve .wsbn-vitrine__panneau:hover{
    translate:none;
  }

  /* Le saut d'un panneau a l'autre se fait sans glissement. Le script le dit
     aussi de son cote : l'option JavaScript l'emporte sur cette regle. */
  .wsbn-vitrine__rangee{
    scroll-behavior:auto !important;
  }
}