/* Composant commun « Tuiles » (docs/specs/accueils-modules.md §4.3).
   Exemplaire UNIQUE servi sous /commun/ (Alias des vhosts) ; gabarit
   compagnon : lib/views/_tuiles.html.twig.

   Origine : section « tuiles de synthèse » du kanban de projet (recette
   Finexo réécrite maison, ui-inspiration-finexo.md §4), extraite ici et
   généralisée : lien englobant, note, variantes par jetons.

   CONTRAT DE JETONS attendu du module (tous déjà au contrat de menu.css
   et laterale.css) : --surface, --trait, --rayon-carte, --ombre,
   --encre-douce, --bleu-pale, --bleu-texte, --rouge-pale, --rouge,
   --focus. Les variantes utilisent des jetons plus fins quand le module
   les déclare (--neutre-pale, --ambre-pale, --ambre) et retombent sinon
   sur des jetons universels : une variante inconnue d'un module donne
   une tuile correcte, jamais une couleur cassée. */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.tuile {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre);
  margin: 0;
  /* Plafond de largeur : une rangée qui ne porte qu'une ou deux tuiles
     (l'ouverture au public de registres, par exemple) les étirait sinon
     sur toute la largeur de l'écran, un chiffre de deux caractères perdu
     dans une carte de mille pixels. Assez haut pour ne jamais borner une
     rangée bien remplie, dont les colonnes restent plus étroites. */
  max-width: 22rem;
  /* conteneur flex pour que le corps s'étire à toute la hauteur de la
     carte : les tuiles d'une même rangée sont alignées par la grille,
     et sans cela le bas de la carte la plus haute n'était ni cliquable
     ni entouré par l'anneau de focus (relevé au contrôle du 16/08/2026) */
  display: flex;
}
/* le corps porte le padding (et non la tuile) : le lien remplit alors
   toute la carte, et son anneau de focus en épouse le contour */
.tuile-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .85rem 1rem;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.tuile-libelle {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--encre-douce);
  /* hauteur RÉSERVÉE de deux lignes (retour d'Yves du 16/08/2026) : le
     chiffre se pose ainsi toujours à la même hauteur, que le libellé
     tienne sur une ligne ou deux, et les tuiles d'une rangée restent
     alignées entre elles. La hauteur de ligne est FIGÉE ici plutôt
     qu'héritée : sans cela, deux lignes mesurent 40,7 px là où 2,5 rem
     n'en réservent que 40, et le chiffre retombait 0,7 px plus bas.
     Le minimum couvre aussi la pastille (1,9 rem). */
  line-height: 1.25;
  min-height: 2.5em;
}
.tuile-pastille {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem;
  background: var(--tuile-fond, var(--bleu-pale));
  color: var(--tuile-accent, var(--bleu-texte));
  flex: none;
}
.tuile-pastille svg { width: 1.05rem; height: 1.05rem; }
.tuile-valeur {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tuile-note {
  font-size: .78rem;
  color: var(--encre-douce);
}

/* ------------------------------------------------------- tuile cliquable
   Affordance sans risque de contraste : le contour se renforce et le
   libellé se souligne (aucun fond ne change sous le texte). L'anneau de
   focus est celui du module, posé sur le lien qui occupe toute la carte
   (RGAA 10.7 : focus visible, ici sur la tuile entière). */
.tuile-lien:hover { border-color: var(--bleu-texte); }
a.tuile-corps:hover .tuile-libelle { text-decoration: underline; }
a.tuile-corps:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- variantes
   Couples déjà déclarés dans outils/rgaa/contraste.php ; la pastille est
   décorative, le libellé et la valeur restent en texte de page. */
.tuile-neutre    { --tuile-fond: var(--neutre-pale, var(--bleu-pale));
                   --tuile-accent: var(--encre-douce); }
.tuile-accent    { --tuile-fond: var(--bleu-pale);
                   --tuile-accent: var(--bleu-texte); }
.tuile-attention { --tuile-fond: var(--ambre-pale, var(--code-fond, var(--bleu-pale)));
                   --tuile-accent: var(--ambre, var(--orange, var(--encre-douce))); }

/* ---------------------------------------------------- variante « alerte »
   Tuile PLEINE, réservée au compteur qui doit tirer l'oeil (tâches en
   retard) : fond soutenu et texte blanc, au lieu d'une simple pastille
   colorée (retour d'Yves du 16/08/2026, inspiration du template).
   La teinte du jeton --tuile-alerte-fond est un rouge orangé ASSOMBRI
   jusqu'à 4,5:1 avec le blanc : le rouge vif du template (#ff401c) n'y
   atteint que 3,50:1, insuffisant pour le libellé et la note, qui sont
   du texte de petite taille (RGAA 3.2). L'écran n'appelle cette variante
   que lorsque le compteur est non nul : une tuile à zéro reste neutre,
   la couleur ne crie pas pour rien. */
.tuile-alerte {
  background: var(--tuile-alerte-fond, #d63410);
  border-color: var(--tuile-alerte-fond, #d63410);
  --tuile-fond: rgba(255, 255, 255, .18);
  --tuile-accent: #ffffff;
}
.tuile-alerte .tuile-corps,
.tuile-alerte .tuile-libelle,
.tuile-alerte .tuile-note { color: #ffffff; }
/* l'affordance de survol du lien passe au blanc : une bordure sarcelle
   sur fond rouge serait illisible */
.tuile-alerte.tuile-lien:hover { border-color: #ffffff; }

/* ---------------------------------------------------------- tuile différée
   Repli officiel d'une tuile coûteuse (spec §4.4) : la tuile est rendue
   en attente et se remplace au chargement. Le fond ne clignote pas, seul
   l'emplacement de la valeur reste vide le temps du fragment. */
.tuile[aria-busy="true"] .tuile-valeur { visibility: hidden; }

/* --------------------------------------------------------------- impression
   Les tuiles s'impriment (un fond ne s'imprime pas, une bordure si :
   la carte reste lisible), sans ombre. */
@media print {
  .tuile { box-shadow: none; }
}