/**
 * PlayAwale — La boutique Club Awalé
 * -----------------------------------------------------------------------------
 * Ce qui est propre à shop.php, et rien d'autre. Tout ce qui existait déjà est
 * repris tel quel : le fond de page et les cartes de sable (layout/page.css,
 * pages/account.css), les boutons (components/button.css), la fenêtre de
 * redirection (components/modal.css), la barre d'outils du jeu, et les variables
 * de couleur, de police et d'ombre de base/tokens.css. Aucune couleur, aucune
 * mesure n'est réinventée ici.
 *
 * TOUT EST PRÉFIXÉ « shop- »
 * Aucune autre feuille du site n'emploie ce préfixe : cette page ne peut donc ni
 * déborder sur une autre, ni recevoir un style qu'elle n'a pas demandé. Les deux
 * seules exceptions sont des AJUSTEMENTS de classes communes, et elles sont
 * explicitement portées par « .shop-page » — un bloc plus large pour le
 * catalogue, un panneau de fenêtre un peu plus généreux.
 *
 * MOBILE D'ABORD
 * Une colonne par défaut, partout. Les cartes produit ne se mettent côte à côte
 * qu'à partir de 52rem, et la fiche produit ne passe en deux colonnes qu'à 64rem :
 * un awalé mesure 45 cm de long, sa photo a besoin de largeur pour se lire.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   LA PAGE
   -----------------------------------------------------------------------------
   Elle reprend « .account-page » pour son empilement et ses marges ; ses blocs
   sont seulement plus larges, parce qu'un catalogue de photos ne tient pas dans
   la colonne de texte d'une page de compte.
   ============================================================================= */

.shop-page .account-block {
  width: min(96vw, 1080px);
}


/* =============================================================================
   L'EN-TÊTE
   -----------------------------------------------------------------------------
   Ce qu'on vend, pour qui, et où c'est livré. Trois lignes, et on passe au bon.
   ============================================================================= */

.shop-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);

  width: min(96vw, 46rem);
  text-align: center;
}

.shop-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  margin: 0;
  padding: var(--space-2xs) var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);

  background: var(--gradient-panel);
  border-radius: var(--radius-full);
}

.shop-hero__eyebrow-icon {
  width: 1.1em;
  height: 1.1em;
}

/* L'emblème du partenaire, dans la pastille.
   -----------------------------------------------------------------------------
   Un peu plus grand que le pictogramme qu'il remplace — 1,5 em contre 1,1 —
   parce qu'un logo détouré porte du dessin là où une icône ne porte qu'un
   trait, et qu'à taille égale il paraîtrait plus petit.

   LA PASTILLE SE RESSERRE À GAUCHE : le logo est rond et déjà cerné de vide,
   si bien qu'avec le remplissage d'origine l'objet paraissait décentré. */
.shop-hero__eyebrow-logo {
  width: 1.5em;
  height: 1.5em;
  flex: none;

  /* Rond dans une pastille ronde. */
  border-radius: var(--radius-full);
}

.shop-hero__eyebrow:has(.shop-hero__eyebrow-logo) {
  padding-left: var(--space-2xs);
}

/* Le verbe seul sur sa ligne — « Acheter », puis ce qu'on achète.
   Un bloc suffit : la ligne se coupe après lui, sans espace insécable ni retour
   écrit dans les textes, et la seconde ligne se replie normalement si l'écran
   est étroit. */
.shop-hero__title-verb {
  display: block;
}

.shop-hero__lead {
  margin-bottom: 0;
}

/* La mention « dans le monde entier » : ce n'est pas un détail, c'est la première
   question d'un visiteur qui n'habite pas la France. */
.shop-hero__world {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.shop-hero__world-icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--color-online);
}


/* =============================================================================
   LE BON
   -----------------------------------------------------------------------------
   Il n'a rien d'un secret : c'est lui qui donne la réduction à l'acheteur ET qui
   dit à Club Awalé d'où vient la commande. Il est donc en haut, et copiable d'un
   geste.

   IL ÉTAIT CINQ OBJETS POUR UNE SEULE INFORMATION
   Un panneau AMBRE pleine largeur — 1 080 px —, un pictogramme de 2,2 rem, un
   titre en police d'affichage, un paragraphe, puis le code dans son creux.
   Signalé : « l'encart 10 % sur votre awalé avec ce code et le code promo est
   beaucoup trop imposant ». C'est le défaut corrigé en 46.62 pour « Supprimer
   mon compte » : à force d'insister, on n'insiste plus.

   L'AMBRE PART EN PREMIER, et c'est la section 3 qui le demande : un seul accent
   par écran, et il désigne « le bouton par lequel on commence ». Ici l'ambre
   couvrait un panneau entier, juste au-dessus du catalogue et de ses trois VRAIS
   boutons ambre. Deux accents ne s'additionnent pas, ils s'annulent — le bon
   reprend donc la matière des autres panneaux du site.

   UNE LIGNE, SUR UN ÉCRAN QUI LE PERMET : le cadeau, la phrase, le code. En
   dessous de 40 rem, les trois se rangent l'un sous l'autre plutôt que de se
   serrer.
   ============================================================================= */

.shop-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);

  /* La largeur de l'en-tête, et non celle du catalogue : c'est une ligne, pas
     une affiche. */
  width: min(96vw, 46rem);
  padding: var(--space-sm) var(--space-md);
  text-align: center;

  background-image: var(--gradient-panel);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

.shop-coupon__icon {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  color: var(--color-brand-amber-deep);
}

/* Ce qui se dit : le chiffre, puis la phrase, l'une sous l'autre et serrées.
   Deux lignes courtes tiennent dans la hauteur du code posé à côté — le bloc ne
   grandit donc pas d'un pixel. */
.shop-coupon__say {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shop-coupon__title {
  margin: 0;

  /* La police du texte, et non celle des titres : ce titre n'annonce pas une
     section, il porte un chiffre qu'on lit en passant. */
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

/* La phrase : elle ne vend pas, elle situe — « un beau cadeau, et ça soutient
   PlayAwale ». Plus petite et en retrait, parce que celui qui est venu chercher
   le code doit trouver le code, pas un argument. */
.shop-coupon__text {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}

/* LE CODE EST CE QU'ON VIENT CHERCHER, ET IL DOIT SE VOIR
   -----------------------------------------------------------------------------
   Le panneau ambre parti, le bon était devenu trop discret : « rendre plus
   visible le coupon de réduction, code promo PLAYAWALE, copier le code ». Le
   creux cerné d'ambre le détache du panneau sans rien rallumer — c'est un FILET,
   pas un aplat, et l'accent de l'écran reste aux boutons de précommande.

   Ce n'est donc pas le bloc qui grossit, c'est le code qui se détache dedans. */
.shop-coupon__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-xs);

  /* LE BON A SA TAILLE AVANT QUE QUOI QUE CE SOIT NE S'EXÉCUTE
     ---------------------------------------------------------------------------
     Première tentative : « Copier le code » était posé « hidden » et le script
     différé le révélait, la ligne réservant sa HAUTEUR pour compenser. Cela ne
     suffisait pas, et c'était signalé — « à l'actualisation ça saute ». La
     hauteur était bien tenue, mais pas la LARGEUR : le bouton qui apparaît
     élargit la ligne, la ligne trop large se replie sur deux rangées, et tout le
     bloc grandit d'un coup. On réservait une dimension sur deux.

     Le bouton est donc rendu VISIBLE par le balisage : à l'arrivée, la boîte a
     déjà sa taille définitive, et le script n'a plus rien à révéler. Voir
     shop.php et shop-page.js.

     Cette hauteur minimale reste utile pour le cas où le script RETIRE le bouton,
     faute de presse-papiers : la ligne garde alors sa taille, et il reste un peu
     d'air autour du code plutôt qu'un creux.

     CE QUE CELA NE COUVRE PAS : un écran assez étroit pour que le bouton passe à
     la ligne. La hauteur réservée est celle d'UNE ligne, parce qu'un repli
     dépend de la largeur disponible et non d'une largeur d'écran connue. */
  min-height: calc(44px + var(--space-2xs) * 2);

  padding: var(--space-2xs) var(--space-sm);

  background-color: var(--color-brand-cream);
  border: 1px solid var(--color-brand-amber-deep);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hollow);
}

/* « Code promo » : petit, en capitales espacées. Ce n'est pas l'information,
   c'est son étiquette — et une étiquette qui se lit d'un coup laisse toute la
   place à ce qu'elle désigne. */
.shop-coupon__label {
  font-family: var(--font-body);

  /* Le plus petit corps du site, et pas un de moins : « --font-size-sm » existe,
     un « xs » n'existe pas — et le principe n° 3 interdit d'en inventer un ici.
     C'est la capitale espacée qui met l'étiquette en retrait, pas la taille. */
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Le code lui-même : monospace et très espacé — un code se lit signe par signe,
   et le zéro doit se distinguer du O. */
.shop-coupon__value,
.shop-modal__coupon-value {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-text);

  /* Un double-clic doit sélectionner le code entier, et lui seul. */
  user-select: all;
  -webkit-user-select: all;
}

/* SUR LA PAGE, IL TIENT DANS SA LIGNE — MAIS IL SE VOIT
   Il montait à 1,6 rem au milieu d'un panneau ambre : c'était le plus gros
   caractère de la page. Ramené à 1,15, il était devenu trop sage — signalé, et
   c'était juste. Il remonte à 1,35 : plus gros que tout ce qui l'entoure dans le
   bon, et toujours en dessous du titre de la page. Ce qu'on vient chercher se
   voit ; le bloc, lui, n'a pas grandi. */
.shop-coupon__value {
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
}

/* DANS LA FENÊTRE DE DÉPART, IL GARDE SA TAILLE
   C'est le moment où on le recopie à la main depuis un téléphone, souvent d'un
   appareil à l'autre. Ici, gros est utile. */
.shop-modal__coupon-value {
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
}

/* Le bouton de copie est rendu VISIBLE par le balisage ; le script ne le retire
   que là où le presse-papiers n'existe pas. Sans script, le code reste lisible
   et sélectionnable — rien ne manque. Voir shop-page.js.

   Et il est ASSEZ GRAND POUR UN DOIGT : 44 px de haut, la mesure que réclame
   toute cible tactile — celle que la base ui-ux-pro-max donne en priorité 2, et
   qui manquait ici. Le bouton se voit mieux, et se touche sans viser. */
.shop-copy {
  min-height: 44px;
  font-size: var(--font-size-sm);
  padding: var(--space-2xs) var(--space-sm);
}

/* LES DEUX LIBELLÉS TIENNENT LA MÊME CASE
   -----------------------------------------------------------------------------
   « Copier le code » et « Code copié ! » n'ont pas la même longueur, et dans
   certaines langues l'écart est large. Tant que le script remplaçait le texte,
   le bouton changeait de largeur à la copie, la ligne du bon se repliait, et le
   bloc changeait de forme sous le doigt — signalé.

   Les deux sont donc écrits dans le balisage et posés dans LA MÊME CASE DE
   GRILLE : la grille prend la largeur du plus long, et une classe décide lequel
   se voit. Le bouton ne bouge plus, quelle que soit la langue.

   « visibility » et non « display » : elle laisse la place prise, et retire le
   libellé masqué de l'arbre d'accessibilité — l'annonce de la zone « aria-live »
   dit donc bien « Code copié ! » sans que rien ne se déplace. */
.shop-copy__labels {
  display: grid;
  place-items: center;
}

.shop-copy__label {
  grid-area: 1 / 1;
}

.shop-copy__label--done,
.shop-copy.is-copied .shop-copy__label {
  visibility: hidden;
}

.shop-copy.is-copied .shop-copy__label--done {
  visibility: visible;
}




/* =============================================================================
   UNE GÊNE À SIGNALER
   ============================================================================= */

.shop-notice {
  width: min(96vw, 46rem);
  margin: 0;
  padding: var(--space-sm) var(--space-md);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  text-align: center;

  border-radius: var(--radius-sm);
}

.shop-notice--error {
  color: var(--color-danger);
  background-color: var(--color-danger-surface);
}


/* =============================================================================
   LE PARTENAIRE
   -----------------------------------------------------------------------------
   Qui fabrique, comment, et ce que l'achat change pour le jeu en ligne.
   ============================================================================= */

.shop-partner {
  display: grid;
  gap: var(--space-lg);
}

.shop-partner__text > .account-block__text {
  text-align: start;
}

/* Ce que le visiteur soutient en passant par ici. Dit une fois, sans insister :
   c'est une explication, pas une quête. */
.shop-partner__support {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);

  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);

  background: var(--gradient-panel);
  border-radius: var(--radius-sm);
}

.shop-partner__support-icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1em;
  color: var(--color-danger);
}

.shop-partner__link {
  margin: 0;
  text-align: center;
}

.shop-partner__figure {
  margin: 0;
}

.shop-partner__image {
  display: block;
  width: 100%;
  height: auto;

  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.shop-partner__caption {
  margin-top: var(--space-2xs);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

@media (min-width: 52rem) {

  .shop-partner {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}


/* =============================================================================
   LE CATALOGUE
   ============================================================================= */

.shop-products {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.shop-product {
  display: grid;
  gap: var(--space-md);

  padding: var(--space-md);

  /* Une carte posée sur la carte : le produit est un objet, pas un paragraphe. */
  background-color: var(--color-sand-100);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Le survol : l'ombre s'épaissit, et rien d'autre.

   C'EST LA SEULE CHOSE QUE FAIT UNE CARTE DE PRODUIT
   Le métier veut qu'elle se soulève au passage du curseur — c'est ce qui la
   désigne comme un objet et non comme un paragraphe. Ici elle ne se soulève
   pas : l'accueil vient d'apprendre qu'un déplacement de deux pixels attire
   l'œil plus qu'il ne l'informe, et ces cartes-là sont grandes. L'ombre, elle,
   dit la même chose sans bouger une ligne de texte — et une carte n'étant pas
   cliquable dans son entier, il ne faudrait pas lui en donner l'air.

   Sous « hover: hover » seulement : sur un écran tactile, un survol qui
   « colle » après le doigt laisserait une carte éclairée au hasard. */
@media (hover: hover) {

  .shop-product {
    transition: box-shadow var(--duration-base) ease;
  }

  .shop-product:hover {
    box-shadow: var(--shadow-raised);
  }
}

@media (prefers-reduced-motion: reduce) {

  .shop-product {
    transition: none;
  }
}

/* Épuisé : la carte s'efface, sans disparaître — le lien vers la fiche reste
   utile, Club Awalé y annonce ses réassorts. */
.shop-product--out {
  opacity: 0.72;
}


/* --- Les photos ------------------------------------------------------------ */

.shop-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.shop-gallery__stage {
  margin: 0;

  /* Un cadre de proportion fixe : les photos de Club Awalé sont tantôt carrées,
     tantôt panoramiques, et sans cela les cartes sauteraient l'une par rapport
     à l'autre au chargement. */
  aspect-ratio: 4 / 3;

  background-color: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.shop-gallery__image {
  width: 100%;
  height: 100%;

  /* « contain » et non « cover » : on n'ampute pas un plateau de 45 cm. */
  object-fit: contain;
}

/* La grande photo s'ouvre : le curseur le dit, et une loupe apparaît au survol.
   Sur un écran tactile, où il n'y a pas de survol, la loupe reste visible — sans
   elle, rien n'indiquerait qu'on peut agrandir. */
.shop-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: zoom-in;
}

.shop-gallery__zoom {
  position: absolute;
  inset-block-end: var(--space-xs);
  inset-inline-end: var(--space-xs);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;
  padding: 0.35rem;

  color: var(--color-brand-dark);
  background-color: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);

  opacity: 0.75;
  transition: opacity var(--duration-fast) ease;
}

.shop-gallery__open:hover .shop-gallery__zoom,
.shop-gallery__open:focus-visible .shop-gallery__zoom {
  opacity: 1;
}

@media (hover: hover) {

  .shop-gallery__zoom {
    opacity: 0;
  }
}

.shop-gallery__thumbs {
  display: flex;
  gap: var(--space-2xs);

  margin: 0;
  padding: 0;
  list-style: none;

  /* Sur un téléphone, les vignettes défilent latéralement plutôt que de se
     réduire à des timbres illisibles. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.shop-gallery__thumb {
  display: block;
  flex: none;

  width: 3.75rem;
  height: 3.75rem;
  padding: 2px;

  background-color: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);

  transition: border-color var(--duration-fast) ease;
}

.shop-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-gallery__thumb:hover,
.shop-gallery__thumb:focus-visible {
  border-color: var(--color-brand-amber-deep);
}

.shop-gallery__thumb.is-current {
  border-color: var(--color-brand-dark);
}


/* --- Le texte du produit --------------------------------------------------- */

/* Le nom vient en tête de la carte, avant même la photo : c'est ce qu'on lit
   pour savoir ce qu'on regarde. */
.shop-product__head {
  min-width: 0;
  text-align: start;
}

/* Aligné à gauche, et non centré comme le reste du site : une description de
   quatre lignes centrées se lit mal — l'œil ne retrouve pas le début de la ligne
   suivante. C'est la seule zone de la page où le texte est long. */
.shop-product__body {
  min-width: 0;
  text-align: start;
}

.shop-product__badge {
  display: inline-block;
  margin: 0 0 var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);

  background: var(--gradient-panel);
  border-radius: var(--radius-full);
}

/* Le badge d'un awalé quand le bon s'y applique : il porte alors une offre, et
   doit se voir comme telle. */
.shop-product__badge--awale {
  color: var(--color-brand-dark);
  background-color: var(--color-brand-amber);
  background-image: var(--gradient-amber-raised);
}

.shop-product__name {
  margin: 0 0 var(--space-xs);

  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.shop-product__text {
  margin: 0 0 var(--space-md);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

/* LE NOM DE BALISE N'EST PAS DÉCORATIF. base/reset.css pose
   « ul[role='list'] { margin: 0 } », qui vaut (0,1,1) : une classe seule, (0,1,0),
   perd contre lui, et la marge déclarée ici n'était jamais appliquée — les atouts
   se retrouvaient collés au tableau des mesures. Les trois listes de cette page
   portent donc leur balise. */
ul.shop-product__features {
  display: grid;
  gap: var(--space-2xs);

  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.shop-product__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.shop-product__check {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.28em;
  color: var(--color-online);
}

/* Les mesures : un tableau de deux colonnes qui reste lisible à 320 px. */
.shop-product__details {
  display: grid;
  gap: 1px;

  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);

  background-color: rgba(60, 39, 35, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.shop-product__detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);

  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-sand-100);
}

.shop-product__detail dt {
  color: var(--color-text-muted);
}

.shop-product__detail dd {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}


/* --- Le prix, et le bouton ------------------------------------------------- */

.shop-product__buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);

  padding-top: var(--space-sm);
  border-top: 1px solid rgba(60, 39, 35, 0.14);
}

.shop-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-xs);

  margin: 0;
  text-align: center;
}

.shop-product__price strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 400;
  color: var(--color-text);
}

.shop-product__price span {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.shop-order {
  width: 100%;
  margin: 0;
}

.shop-order__submit {
  width: 100%;
}

/* Le piège à robots : hors de l'écran pour tout le monde, y compris pour un
   lecteur d'écran, qui ne descend pas dans un conteneur « aria-hidden ». */
.shop-order__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Le stock ---------------------------------------------------------------
   Relu chaque jour. Il se dit AUSSI quand tout va bien : « En stock » rassure
   autant que « épuisé » retient, et c'est le genre de phrase qu'on cherche des
   yeux avant de cliquer. Vert, terre cuite : les couleurs que le site emploie
   déjà pour ce qui réussit et ce qui ne se reprend pas. */

.shop-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.shop-stock__icon {
  width: 1.05em;
  height: 1.05em;
}

.shop-stock--in {
  color: var(--color-online);
}

/* Les derniers exemplaires : l'ambre sombre de ce qui mérite un coup d'œil, et
   non le rouge de ce qui a échoué — l'article est encore là. */
.shop-stock--low {
  color: var(--color-brand-amber-deep);
}

.shop-stock--out {
  color: var(--color-danger);
}

.shop-product__out {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-danger);
}

.shop-product__partner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.shop-product__partner-icon {
  width: 1em;
  height: 1em;
}

.shop-catalogue__note {
  margin: var(--space-lg) 0 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: center;
  color: var(--color-text-muted);
}


/* --- Les deux respirations du catalogue ------------------------------------ */

/* UN SEUL ORDRE, DE 320 À 1920 PIXELS
   Au-dessus de 48 rem, la carte renvoyait le prix et le bouton APRÈS la
   description, les atouts et les mesures : l'ordre d'origine, qu'on n'avait
   remonté que sur téléphone, et pour une raison de distance. Ce « order » a
   disparu. La raison de le remonter n'était pas la distance mais la confiance —
   voir le bloc de 64 rem —, et elle vaut à toutes les largeurs. Le balisage dit
   donc partout la même chose : le nom, la photo, le prix, puis les détails.
   C'est aussi ce qu'entend un lecteur d'écran. */

/* À partir de 52rem, deux cartes côte à côte. */
@media (min-width: 52rem) {

  .shop-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* À partir de 64rem, chaque carte s'étale : la photo à gauche, et à droite le
   nom, le PRIX, puis la description. Une seule carte par rangée — un awalé
   mérite mieux qu'une vignette.

   LE PRIX EST REMONTÉ SOUS LE NOM, SUR GRAND ÉCRAN AUSSI
   Il fermait la carte, après la description, les huit atouts et le tableau des
   mesures : sept cents pixels plus bas, il fallait avoir tout lu pour savoir ce
   que coûtait l'objet. On avait jugé que le téléphone seul justifiait de le
   remonter — à tort. Ce n'est pas une affaire de distance mais de confiance :
   un marchand qui annonce son prix tout de suite n'a rien à cacher, et
   l'acheteur, lui, décide de lire la suite EN SACHANT. La description n'a pas
   perdu sa place pour autant : elle est juste dessous, à hauteur d'œil.

   LA PHOTO EST PLUS GRANDE, MAIS SON CADRE GARDE SES PROPORTIONS
   Sa colonne passe de 20 à 23 rem : le plateau gagne un sixième de largeur, et
   c'est lui qu'on regarde d'abord — c'est un objet de bois taillé à la main
   qu'on vend, et rien ne le dit mieux que lui-même. Étirer le cadre sur toute
   la hauteur de la carte a été essayé, et jeté : les photos de Club Awalé sont
   panoramiques, et « contain » les laissait flotter au milieu de deux grandes
   bandes blanches — un cadre plus grand n'y faisait pas une photo plus grande.
   Le vide qui reste sous la photo ne coûte rien, lui : c'est du fond. */
@media (min-width: 64rem) {

  .shop-products {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-product {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    grid-template-areas:
      'gallery head'
      'gallery buy'
      'gallery body';
    align-items: start;
    gap: var(--space-sm) var(--space-lg);

    padding: var(--space-lg);
  }

  .shop-gallery { grid-area: gallery; }
  .shop-product__head { grid-area: head; }
  .shop-product__body { grid-area: body; }

  .shop-product__buy {
    grid-area: buy;

    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm) var(--space-md);

    /* Le trait qui le séparait du reste n'a plus de sens là-haut : il coupait
       le nom de sa description. */
    padding-top: 0;
    border-top: 0;
  }

  .shop-product__price {
    justify-content: flex-start;
    text-align: left;
  }

  .shop-order {
    width: auto;
  }

  /* Le bouton du site est taillé pour être seul au milieu d'une page : 75 px de
     marge de chaque côté du mot. Ici il partage sa ligne avec le prix et le
     stock, et ces 150 px le faisaient passer à la ligne — en français d'abord,
     et dans toutes les langues qui disent « commander » en deux mots ensuite.
     Resserré, il reste le plus grand objet de la rangée, et la ligne tient même
     en allemand. */
  .shop-order__submit {
    width: auto;
    padding-inline: var(--space-xl);
  }

  /* Le lien vers la fiche part à la ligne, seul : il ne doit pas rivaliser avec
     le bouton qu'il suit. */
  .shop-product__partner {
    flex-basis: 100%;
  }

  /* Les atouts sur deux colonnes : huit lignes en font quatre, et la carte
     cesse d'être un mur. Chacun tient sur une ligne à cette largeur — vérifié
     sur les huit du plateau gravé. */
  ul.shop-product__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-md);
  }
}


/* =============================================================================
   CE QUE CLUB AWALÉ FAIT D'AUTRE
   -----------------------------------------------------------------------------
   Quatre activités, quatre cartes. Elles reprennent le panneau translucide des
   étapes — même matière, même arrondi : ce sont deux listes de la même page, et
   rien ne justifierait qu'elles ne se ressemblent pas.
   ============================================================================= */

ul.shop-services__list {
  display: grid;
  gap: var(--space-sm);

  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.shop-service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'icon title'
    'icon text';
  align-items: start;
  gap: var(--space-2xs) var(--space-sm);

  padding: var(--space-sm) var(--space-md);
  text-align: start;

  background: var(--gradient-panel);
  border-radius: var(--radius-sm);
}

.shop-service__icon {
  grid-area: icon;

  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15em;
  color: var(--color-brand-dark);
}

.shop-service__title {
  grid-area: title;
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.shop-service__text {
  grid-area: text;
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.shop-services__link {
  margin: 0;
  text-align: center;
}

@media (min-width: 52rem) {

  ul.shop-services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =============================================================================
   COMMENT ÇA MARCHE
   -----------------------------------------------------------------------------
   Quatre étapes. La troisième dit clairement que l'on change de site : c'est la
   seule surprise possible du parcours, et elle est annoncée avant d'y être.
   ============================================================================= */

ol.shop-steps {
  display: grid;
  gap: var(--space-md);

  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.shop-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'number title'
    'number text';
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);

  padding: var(--space-sm);

  background: var(--gradient-panel);
  border-radius: var(--radius-sm);
}

.shop-step__number {
  grid-area: number;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-brand-dark);

  background-color: var(--color-brand-amber);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

/* Le pictogramme accompagne le titre, il ne se répète pas dans sa propre
   colonne : deux symboles pour une étape, c'est un de trop. */
.shop-step__icon {
  display: none;
}

.shop-step__title {
  grid-area: title;
  align-self: end;

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.shop-step__text {
  grid-area: text;
  align-self: start;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

@media (min-width: 52rem) {

  ol.shop-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shop-step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'number'
      'title'
      'text';
    justify-items: center;
    text-align: center;

    /* Les quatre cartes ont la même hauteur, mais pas le même contenu : un titre
       qui passe à deux lignes centrerait tout le reste plus bas et décalerait sa
       pastille des trois autres. Le contenu part donc du haut. */
    align-content: start;
  }

  .shop-step__title,
  .shop-step__text {
    align-self: start;
  }
}


/* =============================================================================
   LES QUESTIONS
   -----------------------------------------------------------------------------
   Un <details> par question : elles sont dans la page pour les moteurs comme
   pour le visiteur, et se déplient sans script.
   ============================================================================= */

.shop-faq__list {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.shop-faq__item {
  padding: var(--space-sm) var(--space-md);

  background: var(--gradient-panel);
  border-radius: var(--radius-sm);
}

.shop-faq__question {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
}

/* La réponse est alignée à gauche : c'est un paragraphe, pas un titre. */
.shop-faq__answer {
  margin: var(--space-xs) 0 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: start;
  color: var(--color-text-muted);
}

.shop-privacy {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: center;
  color: var(--color-text-muted);
}

/* Un lien au milieu d'une phrase doit se voir comme un lien : sans soulignement,
   celui des mentions légales se confondait avec le texte qui le précède. */
.shop-privacy a,
.shop-product__partner {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.shop-privacy a:hover,
.shop-product__partner:hover {
  text-decoration-thickness: 2px;
}


/* =============================================================================
   QUI VEND, ET QUI NE VEND PAS
   -----------------------------------------------------------------------------
   La mise au point de fin de page. Elle se lit, mais elle n'alarme pas : ni
   encadré rouge, ni pictogramme d'avertissement. Ce n'est pas une mise en garde
   contre le partenaire, c'est la distribution honnête des rôles — et un acheteur
   qui la lit achète plus tranquille, pas moins.
   ============================================================================= */

.shop-terms__text {
  margin: 0 0 var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: start;
  color: var(--color-text-muted);
}

.shop-terms__link {
  margin: 0;
  text-align: center;
}

.shop-terms__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* =============================================================================
   LA VISIONNEUSE
   -----------------------------------------------------------------------------
   La photo en grand, sur un fond sombre — et rien d'autre. Un awalé se juge à ses
   gravures et au grain de son bois : c'est la seule chose qui compte ici, et tout
   le reste s'efface.

   Elle ne reprend pas components/modal.css : une fenêtre y est un panneau de
   sable avec un titre et des boutons, ce qui serait ici une caisse autour d'un
   tableau. Ses commandes flottent donc sur le voile, sans panneau.
   ============================================================================= */

.shop-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);

  background: rgba(24, 14, 12, 0.94);
  animation: modal-fade var(--duration-fast) ease-out;
}

.shop-lightbox__image {
  max-width: 100%;

  /* De la place pour les commandes au-dessus et en dessous, sur un téléphone. */
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);

  object-fit: contain;
  border-radius: var(--radius-sm);
}

.shop-lightbox__count {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline: 0;

  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Les commandes ---------------------------------------------------------- */

.shop-lightbox__button {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;

  color: var(--color-brand-dark);
  background-color: var(--color-brand-cream);
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  cursor: pointer;

  transition: background-color var(--duration-fast) ease;
}

.shop-lightbox__button:hover,
.shop-lightbox__button:focus-visible {
  background-color: var(--color-brand-amber);
}

.shop-lightbox__close {
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
}

.shop-lightbox__nav {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.shop-lightbox__nav--prev {
  inset-inline-start: var(--space-xs);
}

/* Le chevron du site pointe vers la droite : celui de gauche est le même, retourné. */
.shop-lightbox__nav--prev svg {
  transform: rotate(180deg);
}

.shop-lightbox__nav--next {
  inset-inline-end: var(--space-xs);
}

/* Un seul produit à une seule photo : les flèches n'ont rien à faire là. */
.shop-lightbox--seule .shop-lightbox__nav,
.shop-lightbox--seule .shop-lightbox__count {
  display: none;
}

/* Sur un téléphone, les flèches se posaient SUR la photo. On lui retire de
   chaque côté la place qu'il leur faut : mieux vaut une photo un peu plus
   étroite qu'un bouton qui cache une gravure. Là où il n'y a qu'une photo, rien
   ne mord, et elle reprend toute la largeur. */
@media (max-width: 47.99rem) {

  .shop-lightbox__image {
    max-width: calc(100% - 5.5rem);
  }

  .shop-lightbox--seule .shop-lightbox__image {
    max-width: 100%;
  }
}

/* La page ne défile plus derrière la visionneuse. */
body.shop-lightbox-ouverte {
  overflow: hidden;
}


/* =============================================================================
   LA FENÊTRE DE REDIRECTION
   -----------------------------------------------------------------------------
   Elle reprend components/modal.css : voile, panneau, titre, actions. Ne sont
   ajoutés ici que le rappel du code et l'avertissement de langue.
   ============================================================================= */

.shop-modal__panel {
  text-align: center;

  /* Une fenêtre qui porte un code, une explication et deux boutons peut dépasser
     la hauteur d'un téléphone en paysage : elle défile, plutôt que de se faire
     couper. */
  max-height: 92vh;
  overflow-y: auto;
}

/* Les <svg> du site sont en « display: block » — voir base/reset.css : celui-ci
   doit donc être recentré à la main, « text-align » ne l'atteignant pas. */
.shop-modal__icon {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto var(--space-xs);
  color: var(--color-text-muted);
}

.shop-modal__coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);

  margin-bottom: var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  background-color: var(--color-brand-amber);
  background-image: var(--gradient-amber-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-amber);
}

.shop-modal__coupon-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-brand-dark);
}

.shop-modal__why {
  margin-bottom: var(--space-md);
}

/* Le formulaire du départ n'est qu'une enveloppe : il prend toute la largeur,
   comme les boutons de la fenêtre, et ne se voit pas. */
.shop-modal__form {
  width: 100%;
  margin: 0;
}

.shop-modal__go {
  width: 100%;
}

/* Un bouton parti ne repart pas : il le dit, au lieu de paraître cassé. */
.shop-modal__go:disabled {
  cursor: default;
  opacity: 0.65;
  box-shadow: var(--shadow-sm);
}

/* La phrase qui remplace le geste : ce qui vient de se passer, et le lien direct
   si le navigateur a retenu l'onglet. */
.shop-modal__again {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.shop-modal__again a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* L'avertissement de langue, pour qui ne lit pas la page en français : la caisse
   de Club Awalé l'est. Ce n'est pas un obstacle — il livre dans le monde entier
   et le code promo s'applique quand même —, mais une surprise non annoncée fait
   abandonner un panier. */
.shop-modal__lang {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);

  margin: 0 0 var(--space-md);
  padding: var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: start;
  color: var(--color-text);

  background: var(--gradient-panel);
  border-radius: var(--radius-sm);
}

.shop-modal__lang-icon {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15em;
  color: var(--color-text-muted);
}


/* -----------------------------------------------------------------------------
   LE HAUT DE LA PAGE SUR UN TÉLÉPHONE
   -----------------------------------------------------------------------------
   TOUT CE QUI SUIT NE VAUT QUE SOUS 48 rem. Sur un ordinateur, la page est restée
   ce qu'elle était : mêmes marges, même police d'accroche, l'histoire du
   partenaire avant le catalogue.

   Un écran de téléphone fait huit cents pixels, et tout ce qui est dépensé
   au-dessus du premier awalé est dépensé contre la vente : le visiteur est venu
   voir un plateau, pas lire une enseigne. Mesuré dans un cadre de 400 × 800, la
   première photo de produit arrivait à 1 898 px — près de deux écrans et demi.
   ----------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {

  /* ---------------------------------------------------------------------
     LA RESPIRATION
     ---------------------------------------------------------------------
     Gagner de la place et manquer d'air sont deux choses différentes, et une
     première version les avait confondues : tout avait été resserré d'un cran,
     y compris ce qui n'y gagnait rien. Le remède n'est pas de rendre la page
     plus courte, c'est de lui donner un RYTHME — un écart franc entre les
     blocs, un écart moindre à l'intérieur, et jamais deux écarts si proches
     qu'on ne sache plus lequel sépare quoi.

     Trois valeurs, et trois seulement : 24 px entre les blocs, 16 px à
     l'intérieur d'un bloc, 8 px entre les lignes d'une liste. Ce qui est plus
     serré que cela se lit mal au pouce.
     --------------------------------------------------------------------- */

  .shop-page {
    padding-top: var(--space-lg);
    gap: var(--space-lg);
  }

  /* Un titre de bloc ne colle pas au texte qu'il annonce. */
  .shop-page .account-block__title {
    margin-bottom: var(--space-md);
  }

  .shop-hero {
    gap: var(--space-sm);
  }

  .shop-hero__title {
    font-size: clamp(1.5rem, 7.5vw, 2.2rem);
  }

  /* La pastille retrouve sa hauteur : deux pixels de marge en faisaient une
     étiquette écrasée, pas une pastille. */
  .shop-hero__eyebrow {
    padding: var(--space-2xs) var(--space-sm);
  }

  /* L'accroche passe à la police de LECTURE. Celle d'affichage est faite pour
     trois mots sur un bouton ; étalée sur trois lignes de téléphone, elle se
     déchiffre au lieu de se lire — et cette page demande qu'on la lise. Sur un
     écran large, où elle tient sur une ligne ou deux, elle reste comme avant. */
  .shop-hero__lead {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
  }

  /* Le bon porte l'offre : c'est le dernier endroit où rogner. Il retrouve son
     remplissage, et sa pastille de cadeau sa taille. */
  .shop-coupon {
    gap: var(--space-sm);
    padding: var(--space-lg);
  }

  .shop-coupon__code {
    padding: var(--space-sm) var(--space-md);
  }

  /* ---------------------------------------------------------------------
     LA CARTE PRODUIT
     ---------------------------------------------------------------------
     C'est elle qu'on lit le plus longtemps, et c'est elle qui était la plus
     serrée : quatre pixels entre deux atouts, du texte de quatorze pixels, des
     lignes de mesures collées les unes aux autres. On respire.
     --------------------------------------------------------------------- */

  .shop-product {
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .shop-gallery {
    gap: var(--space-sm);
  }

  .shop-product__name {
    margin-bottom: var(--space-sm);
  }

  .shop-product__text {
    margin-bottom: var(--space-lg);
  }

  /* Les atouts sont des arguments de vente, pas une notice : ils méritent
     l'interligne et la taille du texte courant. */
  ul.shop-product__features {
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
  }

  .shop-product__feature {
    font-size: var(--font-size-base);
  }

  .shop-product__check {
    margin-top: 0.34em;
  }

  .shop-product__detail {
    padding: var(--space-xs) var(--space-sm);
  }

  .shop-product__buy {
    gap: var(--space-md);
    padding-top: var(--space-md);
  }

  /* ---------------------------------------------------------------------
     LES LISTES EN CARTES
     ---------------------------------------------------------------------
     Les étapes, les activités de Club Awalé et les questions : trois listes de
     la même page, trois fois le même remplissage. Une carte de douze pixels de
     marge intérieure paraît pincée dès que son texte passe à deux lignes.
     --------------------------------------------------------------------- */

  .shop-step,
  .shop-service,
  .shop-faq__item {
    padding: var(--space-md);
  }

  ol.shop-steps,
  ul.shop-services__list,
  .shop-faq__list {
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .shop-terms__text {
    margin-bottom: var(--space-md);
  }

  /* L'HISTOIRE DU PARTENAIRE PASSAIT SOUS LE CATALOGUE PAR « ORDER »
     Elle y est maintenant DANS LE BALISAGE, pour tout le monde et non plus pour
     les seuls téléphones — voir shop.php. Le clavier et les lecteurs d'écran y
     gagnent ce que ce déplacement visuel leur coûtait : l'ordre entendu et
     l'ordre vu sont redevenus le même. */
}


/* =============================================================================
   CE QUE DEMANDE UN VISITEUR QUI N'AIME PAS LES ANIMATIONS
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  .shop-gallery__thumb,
  .shop-modal {
    transition: none;
    animation: none;
  }
}