/* La carte entierement cliquable.
 *
 * ⚠️ POURQUOI CES REGLES VIVENT DANS UNE FEUILLE A PART
 * Elles etaient dans `mist-grille.css`, qui n'est mis en file que par le widget
 * `Mist_Grille`. Or les 34 pages de contenu rendent leurs cartes via
 * `mist_bloc`, sans aucune grille : les cartes ancrees y sortaient donc SANS
 * STYLE. Mesure du 03/08 sur /employeurs/pourquoi-adherer/ a 390 px — un
 * `<a class="card">` en `display: inline` (valeur par defaut du navigateur pour
 * une ancre), largeur 381 px dans une fenetre de 390, debordement de 11 px.
 *
 * C'est la meme famille que le defaut du 31/07 : `mist_child_replay_assets()`
 * sortait avant de mettre les assets en file, et le formulaire replay
 * s'affichait sans CSS ni JS sur la page catalogue. Le symptome etait laid, la
 * cause emportait la fonction.
 *
 * La parade est la meme : la feuille est ENREGISTREE sans condition, et chaque
 * widget qui rend une carte la DECLARE (`get_style_depends()`). Elementor la met
 * en file au moment du rendu, quelle que soit la page — et ca reste juste le
 * jour ou un widget est pose ailleurs.
 */

/* Une ancre englobante ne doit prendre ni la couleur ni le soulignement d'un
   lien. Ça, c'est vrai de TOUTES les cartes cliquables. */
a.card {
	color: inherit;
	text-decoration: none;
}

/* ⚠️ ET LA MISE EN PAGE NE VAUT QUE POUR LES CARTES QUI N'EN ONT PAS DÉJÀ UNE.
   Ma première version posait `display:flex; flex-direction:column` sur TOUT
   `a.card`. Or `.card` ne déclare aucun `display` : c'est la classe de mise en
   page portée à côté (`.grid grid-2`) qui le fait. À spécificité supérieure,
   `a.card` écrasait donc `.grid{display:grid}` — et toute carte à deux colonnes
   devenue cliquable s'effondrait en une colonne.

   Mesuré le 03/08 sur 30 pages : 3 cartes concernées, dont DEUX empilées —
   le bloc certification de /mist-normandie/ et le bloc « à la une » de
   /actualites/. C'est ce dernier qui donnait l'impression d'un article « trop
   gros, sur deux hauteurs d'écran » : ce n'était pas un choix de mise en page,
   c'était ce défaut.

   ⚠️ ET IL ÉTAIT INVISIBLE À TOUTE SONDE : la page reste en 200, sans
   débordement, sans image cassée, sans erreur. Une carte empilée est une carte
   valide — elle est juste au mauvais endroit. Il a fallu qu'un visuel arrive
   dedans pour que ça se voie. */
a.card:not(.grid) {
	display: flex;
	flex-direction: column;
}

/* Le libelle du bas n'est plus une ancre : il garde son affordance au survol
   de la CARTE, sinon plus rien n'indique qu'on peut cliquer. */
a.card .link-text,
a.card .btn {
	transition: color .15s ease, background-color .15s ease;
}
a.card:hover .link-text,
a.card:focus-visible .link-text {
	color: var(--orange, #e94e1b);
}

/* Un <span class="btn"> doit rester un bouton : `.btn` est stylee par la
   classe, pas par la balise, mais un <span> est `inline` par defaut. */
span.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Accessibilite : la carte devient une cible de tabulation, elle doit donc
   montrer son focus. Sans ca, la navigation au clavier devient invisible. */
a.card:focus-visible {
	outline: 3px solid var(--orange, #e94e1b);
	outline-offset: 3px;
}