@charset "UTF-8";

/*
 * « De quoi avez-vous besoin ? » — grille de cartes d'entrée par besoin.
 *
 * Aucune surcharge de template : le balisage est celui du layout par défaut de
 * mod_menu, enveloppé par le chrome « noCard » de Cassiopeia. Les trois crochets
 * ci-dessous sont posés dans les réglages du module 115, pas dans du PHP :
 *
 *   moduleclass_sfx  → .sema-besoins        (le <nav>)
 *   header_class     → .sema-besoins__titre (le <h2>)
 *   class_sfx        → .sema-besoins__liste (le <ul>, onglet Avancé de mod_menu)
 *
 * Aucune couleur n'est portée par le contenu : la teinte d'une carte découle de
 * son rang dans le menu (cycle de six). Réordonner les entrées dans Joomla
 * recompose donc la grille sans toucher au code.
 *
 * Ces feuilles sont chargées après template.min.css et mod-menu.min.css : à
 * spécificité égale, c'est l'ordre qui tranche, d'où des sélecteurs volontairement
 * courts plutôt que renforcés.
 */

.sema-besoins {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.sema-besoins__titre {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Trois colonnes sur deux rangs, comme la maquette : le nombre de colonnes est
   fixé plutôt que laissé à auto-fit, qui en composait quatre sur grand écran.
   `display: grid` doit l'emporter sur le `display: flex` de .nav (Bootstrap) :
   même spécificité, mais cette feuille est chargée après. */
.sema-besoins__liste {
  display: grid;
  grid-template-columns: 1fr;
  /* L'ombre portée dure déborde de 0,5rem : la gouttière doit lui laisser la place. */
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width >= 40rem) {
  .sema-besoins__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 62rem) {
  .sema-besoins__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------- Carte */

.sema-besoins__liste > li {
  display: flex;
}

.sema-besoins__liste > li > a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  inline-size: 100%;
  padding: 1.25rem 1.4rem;
  color: var(--carte-texte, var(--rem-encre));
  background-color: var(--carte-fond, var(--rem-kraft));
  font-family: var(--rem-police-display);
  /* Mesuré sur la maquette : ~27 px à 1440. Une valeur plus basse casse le
     rapport de force avec le titre de section. */
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  text-wrap: balance;
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--rem-encre);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* La flèche est décorative : un pseudo-élément, donc absent du DOM et du contenu
   copié. Il reste un item de flex, d'où l'alignement en bas à droite. */
.sema-besoins__liste > li > a::after {
  content: "\2192";
  margin-block-start: auto;
  align-self: flex-end;
  font-size: 1.25rem;
  line-height: 1;
}

/* Même geste que les boutons : la carte s'enfonce vers son ombre. */
.sema-besoins__liste > li > a:hover,
.sema-besoins__liste > li > a:focus-visible {
  transform: translate(0.2rem, 0.2rem);
  box-shadow: 0.3rem 0.3rem 0 var(--rem-encre);
}

.sema-besoins__liste > li > a:focus-visible {
  outline: var(--rem-trait) solid var(--rem-terre);
  outline-offset: var(--rem-trait);
}

/* ------------------------------------------------------------- Cycle de six */

.sema-besoins__liste > li:nth-child(6n + 1) > a {
  --carte-fond: var(--rem-kraft);
}

.sema-besoins__liste > li:nth-child(6n + 2) > a {
  --carte-fond: var(--rem-olive);
  --carte-texte: var(--rem-creme);
}

.sema-besoins__liste > li:nth-child(6n + 3) > a {
  --carte-fond: var(--rem-terre);
  /* Le crème ne tient que 4,3:1 sur terre cuite, sous le seuil AA pour un texte
     de cette taille. Le blanc pur monte à 5:1 : c'est la seule carte qui s'en écarte. */
  --carte-texte: #fff;
}

.sema-besoins__liste > li:nth-child(6n + 4) > a {
  --carte-fond: var(--rem-foret);
  --carte-texte: var(--rem-creme);
}

.sema-besoins__liste > li:nth-child(6n + 5) > a {
  --carte-fond: var(--rem-moutarde);
}

.sema-besoins__liste > li:nth-child(6n + 6) > a {
  /* Carte « papier » : un crème plus clair que le fond de page, sinon elle
     disparaîtrait dans la section. */
  --carte-fond: color-mix(in oklab, var(--rem-creme) 72%, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .sema-besoins__liste > li > a {
    transition: none;
  }

  .sema-besoins__liste > li > a:hover,
  .sema-besoins__liste > li > a:focus-visible {
    transform: none;
  }
}