/**
 * Style « Carte cliquable » de core/group, enregistré dans blocks/group-carte-cliquable.php.
 * Chargé sur le site et dans l'éditeur par oniti-core.php (tout fichier blocks/*.css).
 */

/* ==========================================================================
   Carte cliquable — style de core/group
   ==========================================================================
   Enregistré dans blocks/group-carte-cliquable.php. Toute la surface de la
   carte mène à l'article : la zone de clic est celle d'un lien unique, étendue
   par un ::after absolu. Pas de JavaScript, donc rien à hydrater — une carte
   ajoutée au DOM après le chargement fonctionne telle quelle.

   LE LIEN DOIT ÊTRE LE SEUL DE LA CARTE. Deux accroches possibles :
   celui de core/post-title, ou un lien dans un bloc portant la classe
   `oniti-carte-lien` (classe sur le BLOC qui contient le lien, pas sur le
   lien lui-même — Gutenberg pose les className sur le wrapper).

   DÉFAUTS DANS LE THÈME PARENT — oniti-base fournit
   l'apparence de carte, la couleur de focus (rôle `focus`), l'effet de survol
   (ombre et soulèvement, réglables par `--oniti-carte-survol-ombre` et
   `--oniti-carte-survol-decalage`) et la couleur du titre relié. Toute carte
   cliquable a donc un effet de survol sans rien écrire (règle de la méthode,
   oniti-base/docs/adrs/2026-10-29-cartes-cliquables.md).

   Sans oniti-base, à faire dans le thème — la bibliothèque ne porte aucune
   mesure de maquette, et `currentColor` ne garantit PAS les 3:1 exigés par le
   RGAA 1.4.11 / WCAG 1.4.11 :

       :root .is-style-carte-cliquable {
           --oniti-carte-focus-color: <couleur contrastée>;
           --oniti-carte-image-rayon: var(--wp--custom--rayon--carte);
       }

   SURVOL — l'effet est décoratif : son défaut est dans oniti-base, un site
   le règle ou le remplace. Ici ne restent que le `cursor: pointer` et la
   mécanique du zoom d'image, ÉTEINTE par défaut (`--oniti-carte-zoom: 1`).
   Pour aller plus loin, deux voies, au choix ou cumulées :

       // 1. Activer le zoom fourni. Rien d'autre à écrire : le recadrage du
       //    débord et le rayon de la figure sont déjà gérés.
       :root .is-style-carte-cliquable {
           --oniti-carte-zoom: 1.03;
           --oniti-carte-duration: 250ms;
       }

       // 2. Écrire son propre effet, dans le thème enfant.
       .is-style-carte-cliquable:hover {
           box-shadow: …;
       }

   Deux obligations pour un effet écrit à la main, que la voie 1 remplit déjà :

   - lui donner SON PROPRE `prefers-reduced-motion` (WCAG 2.3.3). Celui d'ici
     ne connaît que le zoom et ne neutralisera pas une animation ajoutée.
   - le retirer sur une carte sans lien, en reprenant le
     `:not(:has(:is(.wp-block-post-title, .oniti-carte-lien) a))` employé plus
     bas — sinon la carte promet un clic qu'elle ne tient pas.
   -------------------------------------------------------------------------- */

.is-style-carte-cliquable {
    --oniti-carte-focus-color: currentColor;
    --oniti-carte-focus-width: 2px;
    --oniti-carte-focus-offset: 3px;

    /* Éteint : le survol est à la charge du thème enfant, voir l'en-tête. */
    --oniti-carte-zoom: 1;
    --oniti-carte-duration: 250ms;

    /* Doit valoir le rayon posé sur le bloc « Image mise en avant » dans
       l'éditeur : le cœur écrit ce rayon sur l'`<img>` et jamais sur la
       `<figure>`, or c'est la figure qui recadre le zoom. */
    --oniti-carte-image-rayon: 0;

    position: relative;

    /* Contexte d'empilement propre : les z-index ci-dessous ne fuient pas. */
    isolation: isolate;
}

/* La zone de clic étendue. Le lien doit rester `position: static` pour que
   `inset: 0` se cale sur la carte et non sur le lien lui-même. */
.is-style-carte-cliquable :is(.wp-block-post-title, .oniti-carte-lien) a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/*
 * Les autres éléments interactifs de la carte repassent au-dessus de la zone
 * étendue, sans quoi ils seraient inaccessibles à la souris.
 * Le lien de la carte est exclu : `position: relative` casserait son ::after.
 */
.is-style-carte-cliquable :is(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex^="-"])
):not(:is(.wp-block-post-title, .oniti-carte-lien) a) {
    position: relative;
    z-index: 1;
}

/* Classe doublée sur les deux règles suivantes : elles doivent battre les
   règles de lien du thème, chargé APRÈS ce fichier. */

/* Ce lien n'est pas un lien ordinaire : c'est la carte entière qui porte
   l'affordance. Il perd donc le soulignement de la règle `a` globale — le zoom
   de l'image au survol et le contour au focus, plus bas, suffisent au RGAA. */
.is-style-carte-cliquable.is-style-carte-cliquable
    :is(.wp-block-post-title, .oniti-carte-lien) a {
    text-decoration: none;
}

/* Un survol qui souleverait ce lien ferait deux dégâts : soulever le seul
   titre, et surtout lui poser `position: relative`, qui ré-ancrerait le
   ::after sur lui — la zone de clic se rétracterait au survol. Sous `static`,
   `inset-block-start` est inerte. */
.is-style-carte-cliquable.is-style-carte-cliquable
    :is(.wp-block-post-title, .oniti-carte-lien) a:hover {
    position: static;
    text-decoration: none;
}

/* Affordance de survol : l'image grossit, son cadre ne bouge pas. C'est
   `overflow: hidden` sur la figure qui recadre le débord — sans lui, l'image
   agrandie mordrait sur le titre. */
.is-style-carte-cliquable .wp-block-post-featured-image {
    overflow: hidden;
    border-radius: var(--oniti-carte-image-rayon);
}

.is-style-carte-cliquable .wp-block-post-featured-image img {
    display: block;
    transition: transform var(--oniti-carte-duration) ease;
}

.is-style-carte-cliquable:hover {
    cursor: pointer;
}

.is-style-carte-cliquable:hover .wp-block-post-featured-image img {
    transform: scale(var(--oniti-carte-zoom));
}

/* WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    .is-style-carte-cliquable .wp-block-post-featured-image img {
        transition-duration: 1ms;
    }

    .is-style-carte-cliquable:hover .wp-block-post-featured-image img {
        transform: none;
    }
}

/* Le contour de focus se déporte du lien vers la carte, qui est la vraie
   cible. */
.is-style-carte-cliquable:has(
    :is(.wp-block-post-title, .oniti-carte-lien) a:focus-visible
) {
    outline: var(--oniti-carte-focus-width) solid var(--oniti-carte-focus-color);
    outline-offset: var(--oniti-carte-focus-offset);
}

.is-style-carte-cliquable :is(.wp-block-post-title, .oniti-carte-lien) a:focus-visible {
    outline: none;
}

/* Carte sans lien — le contenu n'a pas de destination, ou le lien a été retiré
   au rendu. La carte se reconnaît à cette absence, sans classe à injecter. Il
   faut alors retirer les promesses de clic, sinon elle a l'air en panne plutôt
   que simplement non cliquable. */
.is-style-carte-cliquable:not(:has(:is(.wp-block-post-title, .oniti-carte-lien) a)):hover {
    cursor: default;
}

.is-style-carte-cliquable:not(:has(:is(.wp-block-post-title, .oniti-carte-lien) a)):hover
    .wp-block-post-featured-image img {
    transform: none;
}