/**
 * Oniti Core – Styles des blocs
 *
 * Chargé sur le front et dans l'éditeur.
 * Utilise les custom properties du theme.json (TT5) pour rester
 * cohérent avec le design system du thème.
 * Classes préfixées .oniti-* pour éviter les collisions.
 */

/* ==========================================================================
   Encadré en desktop, pleine largeur en mobile — style de core/group
   ==========================================================================
   Enregistré dans blocks/group-encadre.php. Exige l'alignement PLEINE LARGEUR :
   ce sont les marges négatives du cœur qui donnent l'accès aux bords. Le mobile
   est l'état par défaut, seul le desktop est bridé.

   À FAIRE DANS LE THÈME ENFANT — la bibliothèque ne porte aucune mesure de
   maquette. Sans ces deux lignes, l'encadré sort à angles droits :

       :root .is-style-encadre {
           --oniti-encadre-rayon: var(--wp--custom--rayon-carte); // token dans theme.json
           --oniti-encadre-largeur: <largeur si autre que wideSize>;
       }

   Padding : celui du cœur, la gouttière racine que reçoit tout bloc alignfull.
   Elle fait le padding de l'encadré, puis le dégagement au bord de l'écran.

   Le groupe doit être enfant direct de la racine ou d'un groupe contraint ;
   plus profond, il ne remonte qu'au bord de son parent.
   -------------------------------------------------------------------------- */

.is-style-encadre {
    --oniti-encadre-largeur: var(--wp--style--global--wide-size);
    --oniti-encadre-rayon: 0;
}

/* Palier par défaut. Une media query ne lit pas une custom property : un site
   qui bascule ailleurs redéclare cette règle dans son thème enfant. */
@media (width >= 768px) {
    /* Classe doublée : (0,3,0) contre les (0,2,0) du cœur, qui pose les marges
       négatives des blocs alignfull. */
    :root .is-style-encadre.is-style-encadre {
        max-width: var(--oniti-encadre-largeur);
        margin-inline: auto;

        /* Pas le panneau Bordure : son rayon part en style en ligne et
           resterait en mobile, contre le bord de l'écran. */
        border-radius: var(--oniti-encadre-rayon);
    }
}

/* ==========================================================================
   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).

   À FAIRE DANS LE THÈME ENFANT — 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, il change à chaque site : il appartient au
   thème enfant. Ici ne restent que le `cursor: pointer` et la mécanique du
   zoom d'image, ÉTEINTE par défaut (`--oniti-carte-zoom: 1`). 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;
}