/**
 * Zones tactiles — audit responsive du 01/09/2026.
 *
 * L'audit des 61 pages a montré une mise en page saine à toutes les largeurs
 * (aucun débordement, aucune image ni aucun champ hors cadre). Il restait UN
 * défaut, invisible à l'œil : des commandes ICÔNE trop petites pour le doigt.
 * La plus critique était la corbeille du panier, 15 × 15 px — une action
 * destructive sur l'écran le plus manipulé du site.
 *
 * ── Le principe : agrandir la CIBLE, pas le DESSIN ───────────────────────────
 * Ces règles n'ajoutent aucun pixel visible. Chaque commande reçoit un
 * pseudo-élément `::after` transparent, centré sur elle et détaché du flux :
 * la zone sensible s'étend, l'icône ne bouge pas d'un pixel et la mise en page
 * reste rigoureusement identique à la production. C'est indispensable ici, le
 * thème étant calé au pixel sur la prod.
 *
 * ── Les largeurs visées ──────────────────────────────────────────────────────
 * Rien ne s'applique au-delà de 991px : sur un écran piloté à la souris, une
 * zone sensible débordant de l'icône volerait des clics aux éléments voisins.
 *
 * ── Les dimensions ──────────────────────────────────────────────────────────
 * 44 × 44 partout où la place existe. Là où deux commandes se suivent de près,
 * la zone est bornée au PAS entre elles (l'écart mesuré + la largeur de
 * l'icône), de sorte que deux cibles ne se recouvrent jamais — un doigt qui
 * vise un crayon ne doit pas atteindre la corbeille d'à côté. Ce pas est
 * toujours supérieur au minimum de 24 px exigé par WCAG 2.5.8.
 *
 * Les liens de TEXTE en ligne (fil d'Ariane, titres de fiches, liens du pied de
 * page) sont hors de portée de cette règle par nature : leur hauteur est celle
 * de l'interlignage. Ceux qui vivent seuls sur leur ligne reçoivent tout de
 * même une hauteur de frappe correcte ; ceux qui sont noyés dans une phrase
 * relèvent de l'exception explicite de WCAG 2.5.8 et gardent leur taille, sans
 * quoi l'écart avec la production deviendrait visible.
 */

@media (max-width: 991px) {

  /* Socle commun : la zone est centrée sur la commande et ne peint rien. */
  .flaash-hit,
  .price-close,
  .carousel-dot,
  .footer-follow > li > a,
  .account-address-inline__icon,
  .account-address-inline__note-icon,
  .delivery-address-block__action,
  .breadcrumb-list a,
  .catalog-card__title a {
    position: relative;
  }

  .price-close::after,
  .carousel-dot::after,
  .footer-follow > li > a::after,
  .account-address-inline__icon::after,
  .account-address-inline__note-icon::after,
  .delivery-address-block__action::after,
  .breadcrumb-list a::after,
  .catalog-card__title a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 44px;
    /* Aucun fond, aucune bordure : rien à voir, tout à toucher. */
    background: transparent;
    pointer-events: auto;
  }

  /* ── Panier : supprimer une ligne (15 × 15) ─────────────────────────────────
     Aucune autre commande dans un rayon de 60px, et le prix — du texte, pas un
     lien — s'arrête bien avant : la zone peut prendre ses 44px sans risque de
     supprimer un article à la place d'un autre geste. */
  .price-close::after {
    width: 44px;
  }

  /* ── Accueil : points du carrousel (18 × 18, pas de 20) ─────────────────────
     Le point EST le <li> : l'élargir changerait le dessin. On écarte donc les
     points de quelques pixels — seul écart visible assumé de cette feuille, et
     seulement sous 992px — pour porter le pas à 28px, puis la zone occupe ce
     pas en entier sur 44px de haut. */
  .carousel-dot {
    margin-right: 10px !important;
  }

  .carousel-dots li:last-child {
    margin-right: 0 !important;
  }

  .carousel-dot::after {
    width: 28px;
  }

  /* ── Accueil : flèches du carrousel (17px de large) ─────────────────────────
     Elles sont déjà hautes de toute la slide ; c'est la largeur qui manque. On
     les porte à 44px, et on remonte le bouton d'achat AU-DESSUS d'elles : sans
     cela, la flèche gauche recouvrirait son bord gauche et un doigt visant
     « Acheter » ferait défiler le carrousel. */
  .carousel-arrow {
    width: 44px !important;
    z-index: 2;
  }

  .hero-carousel .buy-cta,
  .hero-slide a,
  .hero-slide button:not(.carousel-arrow) {
    position: relative;
    z-index: 3;
  }

  /* ── Pied de page : réseaux sociaux (19 × 19, pas de 32) ────────────────── */
  .footer-follow > li > a::after {
    width: 32px;
  }

  /* ── Mon compte : crayon et corbeille d'adresse (27 × 27, pas de 35) ─────
     La ligne « Livraison » porte deux commandes voisines — modifier, supprimer.
     La zone reste donc bornée au pas entre elles : 27 + 8 de gouttière. Sur la
     ligne « Facturation », le crayon est seul, mais une zone commune évite
     d'avoir deux tailles pour un même dessin. */
  .account-address-inline__icon::after {
    width: 35px;
  }

  /* ── Mon compte : « + » d'ajout d'adresse (18 × 18) ─────────────────────────
     Son voisin immédiat est le libellé qui ouvre LA MÊME fenêtre : un
     recouvrement est ici sans conséquence, la zone peut donc prendre 44px. */
  .account-address-inline__note-icon::after {
    width: 44px;
  }

  /* Le libellé qui l'accompagne est un lien à part entière : il doit se frapper
     aussi facilement que l'icône. */
  .account-address-inline__note-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── Tunnel : crayons des blocs d'adresse (20 × 20, pas de 28) ───────────── */
  .delivery-address-block__action::after {
    width: 28px;
  }

  /* ── Fil d'Ariane ───────────────────────────────────────────────────────────
     La bande fait 60px de haut : une zone de 44px y tient tout entière, sans
     mordre sur l'en-tête au-dessus ni sur le titre en dessous. La largeur reste
     celle du libellé, les entrées étant séparées par leur chevron. */
  .breadcrumb-list a::after {
    width: 100%;
    min-width: 100%;
  }

  /* ── Fiches du catalogue : le titre est un lien de 13px de haut ─────────────
     Il vit seul sur sa ligne, entre la vignette et le bouton d'achat : la zone
     de 44px reste dans cet intervalle. */
  .catalog-card__title a::after {
    width: 100%;
  }

  /* ── Commandes déjà proches du compte : on finit le travail ──────────────── */
  .mobile-toggle,
  .account-password-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .catalog-card__buy-inline,
  .catalog-card__buy {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* ── En-tête compact (768 – 991px) ──────────────────────────────────────────
     Entre le burger et la barre de bureau pleine, l'en-tête se resserre : les
     entrées de navigation tombent à 16px de haut et l'icône de recherche à
     22 × 16. Les zones sont portées à 38px de haut — la bande de l'en-tête ne
     fait que 94px et loge deux rangées, une zone de 44 mordrait sur la rangée
     voisine. 38 reste très au-dessus du minimum de 24.

     La largeur suit celle de l'entrée : les entrées se touchent (1px d'écart),
     l'élargir volerait le voisin. L'icône de recherche, elle, est bornée à
     34px : le libellé « Abonnements » commence 6px après elle. */
  .site-header__nav .dropdown-item,
  .desktop-nav a,
  .site-header__action {
    position: relative;
  }

  .site-header__nav .dropdown-item::after,
  .desktop-nav a::after,
  .site-header__action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 38px;
    background: transparent;
  }

  .site-header__action--icon::after {
    width: 34px;
  }

  /* ── Plan du site ───────────────────────────────────────────────────────────
     Les entrées se suivent tous les 19px : aucune zone ne peut grandir sans
     mordre sur la suivante. On aère donc la liste — page utilitaire, sans
     enjeu de parité — pour porter le pas à 31px. */
  .sitemap li > a {
    display: inline-block;
    padding: 6px 0;
  }

  /* ── Historique des commandes : « Détails » et « Commander à nouveau » ───────
     Deux liens d'action côte à côte dans une cellule, hauts de 19px. Le
     remplissage les épaissit et les écarte du même coup. */
  .order-actions a {
    display: inline-block;
    padding: 6px 6px;
  }

  /* ── Pied de page ───────────────────────────────────────────────────────────
     Les liens sont des blocs sur leur propre ligne : la hauteur de frappe peut
     suivre celle de la ligne sans rien déplacer. */
  .footer-links > a,
  .footer-column .footer-links a {
    display: inline-block;
    min-height: 24px;
  }

  /* ── Cases à cocher et boutons radio ────────────────────────────────────────
     Une case fait 13 à 19px : c'est le dessin natif du navigateur, l'agrandir
     changerait l'aspect du formulaire. Son libellé, lui, est associé et coche
     la case tout autant — c'est la vraie cible. On lui garantit donc une
     hauteur de frappe correcte, la case restant ce qu'elle est. */
  .account-newsletter,
  .delivery-summary__terms,
  .checkbox-line label,
  .custom-checkbox {
    min-height: 32px;
  }
  /* ── Tunnel : la ligne « ajouter / modifier l'adresse de livraison » ─────────
     Elle ne fait que 22px de haut alors que 79px la séparent de ses voisins :
     la zone peut prendre ses 44px sans rien toucher. */
  .delivery-choice--alternate {
    position: relative;
  }

  .delivery-choice--alternate::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 44px;
    background: transparent;
  }

  /* ── Historique des commandes ───────────────────────────────────────────────
     Cette page est rendue par le gabarit du cœur, que le thème ne surcharge
     pas : ses liens d'action ne portent qu'une icône Material dont la police
     n'est pas chargée ici, d'où des cibles de 6px de large. On leur rend une
     taille utilisable sans toucher au reste. */
  .order-actions a,
  .page-footer a.account-link {
    min-width: 24px;
    min-height: 24px;
  }

  /* `min-width` reste sans effet sur une boîte en ligne : l'icône doit d'abord
     devenir un bloc en ligne pour que la contrainte morde. */
  td a > i.material-icons,
  .col-xs-2 a > i.material-icons,
  a.account-link > i.material-icons {
    display: inline-block;
    min-width: 28px;
    min-height: 28px;
    line-height: 28px;
    text-align: center;
  }

  .page-footer a.account-link,
  .col-xs-10 > a,
  .col-xs-2 > div > a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
  }
}