/**
* 2007-2026 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2026 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/

/* =============================================================================
   fa_categories_home — Grille de catégories homepage
   RGAA 4.1 : focus visible, ratio contraste, animation réduite
   ============================================================================= */

/* Conteneur section */
.fach-categories {
  margin: 2rem 0;
}

/* Liste en flex : 1 à 4 items sur une ligne en desktop */
.fach-categories__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  list-style: none;
  margin: 0; 
  padding: 0;
}

/* Chaque item prend une part égale */
.fach-categories__item {
  flex: 1 1 0;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.fach-categories__item:hover {
  flex: 1 1 0;
  min-width: 0;
  box-shadow: var(--shadow-md);
}

/* Lien = bloc cliquable */
.fach-categories__link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
  /* Ratio 16/9 */
  aspect-ratio: 16 / 9;
  background-color: #e8eff9;
}

/* Focus visible RGAA 10.7 */
.fach-categories__link:focus-visible {
  outline: 3px solid #0057b8;
  outline-offset: 3px;
}

/* Image */
.fach-categories__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease-in-out;
}

/* Placeholder si pas d'image */
.fach-categories__img--placeholder {
  background-color: #c8d3e0;
}

/* Overlay avec le nom — centré sur l'image, visible au survol et au focus */
.fach-categories__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: calc(100% - 2rem);
  padding: 0.75rem 1rem;
  background-color: rgba(35, 77, 134, 0.88); /* #234d86 — ratio blanc : 7.1:1 ✓ */
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
}

/* Survol et focus : faire apparaître l'overlay */
.fach-categories__link:hover .fach-categories__label,
.fach-categories__link:focus-visible .fach-categories__label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Légère mise en avant de l'image au survol */
.fach-categories__link:hover .fach-categories__img,
.fach-categories__link:focus-visible .fach-categories__img {
  transform: scale(1.04);
}

/* Respect de prefers-reduced-motion — RGAA 13.8 */
@media (prefers-reduced-motion: reduce) {
  .fach-categories__img,
  .fach-categories__label {
    transition: none;
  }
  .fach-categories__link:hover .fach-categories__img,
  .fach-categories__link:focus-visible .fach-categories__img {
    transform: none;
  }
}

/* Mobile : empilage vertical */
@media (max-width: 767px) {
  .fach-categories__list {
    flex-direction: column;
  }
  .fach-categories__item {
    flex: none;
    width: 100%;
  }
  /* Sur mobile : label toujours visible (pas de survol tactile) */
  .fach-categories__label {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}