/* accueil.css : accroche, groupes et grille de tuiles. */
.accroche, .accueil {
  max-width: calc(var(--mesure-lecture) + 2 * var(--marge-laterale));
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

/* L'accroche, sous l'en-tête commun : le seul H1 de la page, puis deux ou trois
   phrases d'introduction (référencement, mission « LIBRA public 03 »). */
.accroche {
  padding-block: var(--espace-3);
  text-align: center;
}
.accroche-titre {
  font-size: var(--taille-titre);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-serre);
  color: var(--bleu-marque);
}
.accroche-texte {
  max-width: var(--mesure-panneau);
  margin: var(--espace-1) auto 0;
  color: var(--texte-secondaire);
}

.accueil { padding-bottom: var(--espace-4); }
.groupe + .groupe { margin-top: var(--espace-4); }
.groupe-entete { margin-bottom: var(--espace-2); }
.groupe-entete h2 { font-size: var(--taille-intertitre); font-weight: var(--graisse-semi); }
.groupe-aide { color: var(--texte-secondaire); font-size: var(--taille-petite); margin-top: var(--espace-1); }

/* --- Section IA en accordéon (<details>, mission « LIBRA public 04 ») ------- */
.groupe-ia { margin-top: var(--espace-4); }
.groupe-ia-resume {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: var(--pilule-hauteur);
  padding: var(--espace-1) 0;
  border-bottom: var(--trait) solid var(--bordure);
  cursor: pointer;
  list-style: none;                       /* le triangle natif : remplacé à droite */
}
.groupe-ia-resume::-webkit-details-marker { display: none; }
.groupe-ia-resume:focus-visible {
  outline: var(--trait-focus) solid var(--focus);
  outline-offset: var(--trait-epais);
  border-radius: var(--rayon);
}
.groupe-ia-textes { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.groupe-ia-titre { font-size: var(--taille-intertitre); font-weight: var(--graisse-semi); }
.groupe-ia-textes .groupe-aide { margin-top: 0; }
/* L'indicateur : un chevron discret, vers le bas fermé, vers le haut ouvert. */
.groupe-ia-indicateur {
  flex: none;
  width: var(--espace-1);
  height: var(--espace-1);
  margin-right: var(--espace-1);
  border-right: var(--trait-epais) solid var(--texte-secondaire);
  border-bottom: var(--trait-epais) solid var(--texte-secondaire);
  transform: rotate(45deg);
  transition: transform var(--duree-courte) var(--courbe);
}
.groupe-ia[open] .groupe-ia-indicateur { transform: rotate(-135deg); }
.groupe-ia-explication {
  max-width: var(--mesure-lecture);
  margin: var(--espace-2) 0;
  color: var(--texte-secondaire);
}
.groupe-ia-explication a { color: var(--bleu-lien); font-weight: var(--graisse-semi); }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tuile-largeur-min), 100%), 1fr));
  gap: var(--espace-3);
}

.tuile {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  padding: var(--tuile-marge-interieure);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-grand);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-tuile);
  text-align: left;
  animation: apparition var(--duree) var(--courbe) both;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.tuile:hover, .tuile:focus-within {
  transform: translateY(var(--levee-survol));
  box-shadow: var(--ombre-tuile-survol);
}
.tuile-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--illustration-ratio);
  border-radius: var(--rayon);
  margin-bottom: var(--espace-1);
}
.tuile-nom { font-size: var(--taille-intertitre); font-weight: var(--graisse-semi); }
.tuile-texte { color: var(--texte-secondaire); flex: 1; }
/* Le nom de la tuile est un lien vers la page propre de l'outil. */
.tuile-lien { color: inherit; text-decoration: none; }
.tuile-lien:hover { color: var(--bleu-lien); text-decoration: underline; }
/* Compteur public, discret, affiché seulement au-delà du seuil. */
.tuile-compteur { color: var(--texte-secondaire); font-size: var(--taille-petite); }
.tuile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-1);
  margin-top: var(--bouton-distance-cadre);
}
.bouton-ouvrir { min-height: var(--pilule-hauteur); }

@keyframes apparition {
  from { opacity: 0; transform: translateY(var(--espace-1)); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 48rem) {
  .accroche, .accueil {
    max-width: calc(var(--mesure-lecture) + 2 * var(--marge-laterale-large));
    padding-inline: var(--marge-laterale-large);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tuile { animation: none; }
}