* — la classe .hn-product-card est ajoutée comme alias plus bas dans ce fichier.
*
* Fond blanc, padding 48, column gap 24, contour brushed.
* 4 variants typologiques (Article / Podcast / Guide / Webinaire) — distingués
* par le texte de l'overline + le contenu meta (date, durée, format).
*
* Structure :
* 1. Overline type (Mynerve cursive)
* 2. Titre H4 Montserrat
* 3. Body description
* 4. Meta row (date, heure, durée) primary blue
* 5. Divider 1px
* 6. CTA bouton text
*
* Usage :
*
*
* Webinaire
* Comprendre la dyslexie…
*
*
*
Un tour d'horizon…
*
*
S'inscrire
*
Examen des troubles…
*
*
*
* ========================================================================== */
.hn-product-card {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
padding: 48px;
border-radius: 24px;
box-sizing: border-box;
width: 100%;
max-width: 358px;
overflow: hidden;
--hn-brushed-color: var(--wp--preset--color--brand-dark);
--hn-brushed-width: 3px;
--hn-brushed-radius: 24px;
}
.hn-product-card::before {
content: '';
position: absolute;
inset: 0;
border: var(--hn-brushed-width) solid var(--hn-brushed-color);
border-radius: var(--hn-brushed-radius);
filter: url(#hn-roughen);
pointer-events: none;
}
.hn-product-card__head {
display: flex;
flex-direction: column;
gap: 12px;
}
.hn-product-card__overline {
margin: 0;
font-family: 'Mynerve', cursive;
font-weight: 400;
font-size: 22px;
line-height: 22.32px;
letter-spacing: -0.0082em;
color: var(--wp--preset--color--brand-dark);
}
.hn-product-card__title {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 1.2;
color: var(--wp--preset--color--brand-dark);
}
.hn-product-card__body {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: var(--wp--preset--color--muted-text);
}
.hn-product-card__divider {
height: 1px;
background: var(--wp--preset--color--brand-dark);
width: 100%;
}
.hn-product-card__footer {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.hn-product-card__status {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.4;
color: var(--wp--preset--color--brand-dark);
}
/* Variants couleur ---------------------------------------------------------- */
.hn-product-card--blanc { background: var(--wp--preset--color--surface); }
.hn-product-card--beige {
background: var(--wp--preset--color--paper);
}
.hn-product-card--bleu {
background: var(--wp--preset--color--brand-dark);
--hn-brushed-color: color-mix(in srgb, var(--wp--preset--color--brand-dark) 80%, #ffffff);
}
.hn-product-card--bleu .hn-product-card__overline { color: var(--wp--preset--color--accent); }
.hn-product-card--bleu .hn-product-card__title,
.hn-product-card--bleu .hn-product-card__status { color: var(--wp--preset--color--paper); }
.hn-product-card--bleu .hn-product-card__body { color: var(--wp--preset--color--surface); }
.hn-product-card--bleu .hn-product-card__divider { background: var(--wp--preset--color--paper); opacity: 0.4; }
@media (max-width: 768px) {
.hn-product-card { padding: 32px; max-width: 100%; }
.hn-product-card__title { font-size: 24px; line-height: 26px; }
}
/* Variante --with-image : pour les pages catégorie / archive WooCommerce.
Pas dans le Figma Component HN d'origine — ajoutée pour rendre la grille
produits e-commerce plus visuelle (image hero en haut de la card, débord
sur les côtés pour atteindre le contour brushed). */
.hn-product-card--with-image {
padding-top: 0;
}
.hn-product-card__image {
display: block;
width: calc(100% + 96px);
margin: 0 -48px;
aspect-ratio: 4 / 3;
object-fit: cover;
}
@media (max-width: 768px) {
.hn-product-card__image {
width: calc(100% + 64px);
margin: 0 -32px;
}
}
/* Conteneur grille produits filtrable (bloc happyneuron/product-cards) -------- */
.hn-product-cards {
max-width: 1184px;
margin-inline: auto;
padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 64px);
display: flex;
flex-direction: column;
gap: 32px;
}
.hn-product-filter {
justify-content: center;
}
.hn-product-grid > .hn-product-card[hidden] {
display: none;
}
/* ============================================================================
* BOUTIQUE CATEGORIES (organism) — Figma Design HN Boutique (617:6094)
*
* Section utilisée dans archive-product.html (page principale /boutique/) :
* gradient cream→white, titre mixte centré + lead, grille 3 Product Cards
* (Logiciels / Formations / Supervision). Chaque card pointe vers une
* taxonomy-product_cat WC.
* ========================================================================== */
.hn-boutique-categories {
background: linear-gradient(0deg, var(--wp--preset--color--surface) 13%, var(--wp--preset--color--paper) 90%);
padding: clamp(64px, 8vw, 96px) clamp(24px, 6vw, 128px);
}
.hn-boutique-categories__inner {
max-width: 1184px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 48px;
}
.hn-boutique-categories__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.hn-boutique-categories__title {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: clamp(36px, 5vw, 50px);
line-height: 1.1;
letter-spacing: -0.04em;
color: var(--wp--preset--color--brand-dark);
}
.hn-boutique-categories__title-script {
font-family: 'Mynerve', cursive;
font-weight: 400;
font-size: clamp(40px, 5.5vw, 55px);
line-height: 1;
color: var(--wp--preset--color--brand-dark);
margin-left: 8px;
}
.hn-boutique-categories__lead {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: var(--wp--preset--color--muted-text);
max-width: 720px;
}
.hn-boutique-categories__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
align-items: stretch;
}
.hn-boutique-categories__grid .hn-product-card {
max-width: none;
height: 100%;
}
@media (max-width: 960px) {
.hn-boutique-categories__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ============================================================================
* WOOCOMMERCE — Page catégorie produits (taxonomy-product_cat)
*
* Refonte conforme à la maquette Figma « HN- Desktop - Boutique » (node 724-6471) :
* fond dégradé blanc→beige, fil d'ariane à chevrons, titre + description à gauche,
* barre filtres/tri + compteur, chips de filtres actifs, grille de cartes SIMPLES
* (image portrait + nom + prix), pagination « page X of Y ».
* Composants dynamiques : mu-plugins/hn-shop-ui.php (shortcodes).
* ========================================================================== */
.hn-shop { --hn-shop-rail: 1184px; --hn-shop-gutter: clamp(24px, 8vw, 128px); }
.hn-shop-breadcrumb { --hn-shop-rail: 1184px; --hn-shop-gutter: clamp(24px, 8vw, 128px); }
/* Fil d'ariane (fond blanc, au-dessus du dégradé) */
.hn-shop-breadcrumb {
background: var(--wp--preset--color--surface);
padding: 24px 0 0;
}
.hn-shop-breadcrumb .woocommerce-breadcrumb {
width: min(100% - 2 * var(--hn-shop-gutter), var(--hn-shop-rail));
margin-inline: auto;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 17.16px;
color: rgba(0, 0, 0, 0.6);
text-align: left;
}
.hn-shop-breadcrumb a { color: rgba(0, 0, 0, 0.6); text-decoration: none; }
.hn-shop-breadcrumb a:hover { color: var(--wp--preset--color--brand-dark); }
.hn-bc-sep { color: rgba(0, 0, 0, 0.35); margin: 0 4px; }
/* Conteneur dégradé blanc → beige (englobe hero + grille) */
.hn-shop {
background: linear-gradient(to bottom, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--paper) 100%);
}
/* En-tête catégorie : titre + description + barre + chips, alignés à gauche */
/* Page catégorie : fond blanc (conforme maquette 724-6471), sans le dégradé de
page par défaut. */
body.tax-product_cat { background: var(--wp--preset--color--surface); }
.hn-shop__head {
width: min(100% - 2 * var(--hn-shop-gutter), var(--hn-shop-rail));
margin-inline: auto;
padding: 48px 0 0;
display: flex;
flex-direction: column;
gap: 24px;
text-align: left;
}
/* Surtitre = badge cyan au-dessus du titre (Figma 1102-7535) */
.hn-shop__eyebrow {
align-self: flex-start;
width: fit-content;
margin: 0;
display: inline-flex;
align-items: center;
background: #2fd6c9;
color: var(--wp--preset--color--brand-dark);
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
padding: 2px 10px;
border-radius: 4px;
}
.hn-shop__title {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: clamp(36px, 5vw, 50px);
line-height: 1.1;
letter-spacing: -0.04em;
color: var(--wp--preset--color--brand-dark);
text-align: left;
}
/* Partie manuscrite du titre éditorial (Figma 1102-7535 : Mynerve 55) */
.hn-shop__title-script {
font-family: 'Mynerve', cursive;
font-weight: 400;
font-size: clamp(40px, 5.5vw, 55px);
line-height: 1.05;
letter-spacing: -0.0087em;
}
.hn-shop__lead {
margin: 0;
max-width: 900px;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: var(--wp--preset--color--muted-text);
text-align: left;
}
/* Barre filtres / tri */
.hn-shop__bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-top: 8px;
}
.hn-shop__bar-left { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
/* margin-left:auto → TRIER PAR + compteur collés à droite, robuste même si wpautop
injecte un vide en fin de form (qui casserait un simple space-between). */
.hn-shop__bar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hn-shop__bar > p:empty { display: none; }
.hn-shop__dd,
.hn-shop__sort {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: 0;
/* .hn-shop__sort est un
*
*
*
*
George Costanza
*
*
*
*
Retrouvez du temps pour ce qui compte :
* soigner
*
*
Évaluez avec plus de fiabilité…
*
*
*
*
Logiciel Exalang
*
Licence solo, 12 mois
*
*
79€/mois
*
![]()
* Largeur calée sur celle du layout (pas full-bleed écran). */
.hn-rsingle__cover {
width: min(100% - 2 * var(--hn-gutter), 1184px);
margin: clamp(120px, 15vw, 180px) auto 0;
aspect-ratio: 16 / 5;
max-height: 360px;
border-radius: 24px;
overflow: hidden;
}
.hn-rsingle__cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* La cover assure le dégagement sous le header fixe à la place du layout : on
* réduit donc le padding-top du layout qui la suit (sinon double espace). */
.hn-rsingle__cover + .hn-rsingle__layout {
padding-top: clamp(40px, 6vw, 64px);
}
.hn-rsingle__toc {
position: sticky;
top: 116px;
background: var(--wp--preset--color--paper);
border-radius: 24px;
padding: 30px;
}
.hn-rsingle__toc-inner { display: flex; flex-direction: column; gap: 14px; }
.hn-rsingle__toc-link {
position: relative;
display: block;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 22.32px;
letter-spacing: -0.012em;
color: var(--wp--preset--color--muted-text);
text-decoration: none;
transition: color 150ms ease;
}
.hn-rsingle__toc-link--h3 { padding-left: 16px; }
.hn-rsingle__toc-link:hover { color: var(--wp--preset--color--brand-dark); }
.hn-rsingle__toc-link.is-active { font-weight: 500; color: var(--wp--preset--color--brand-dark); }
.hn-rsingle__toc-link.is-active::before {
content: '';
position: absolute;
left: -13px;
top: 8px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--wp--preset--color--accent);
}
.hn-rsingle__toc-link--h3.is-active::before { left: 3px; }
.hn-rsingle__main { max-width: 800px; min-width: 0; }
.hn-rsingle__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.hn-rsingle__badge {
align-self: flex-start;
margin: 0;
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--brand-dark);
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
padding: 2px 10px;
border-radius: 4px;
}
.hn-rsingle__badge a { color: inherit; text-decoration: none; }
.hn-rsingle__title {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: clamp(32px, 4.5vw, 50px);
line-height: 1.1;
letter-spacing: -0.04em;
color: var(--wp--preset--color--brand-dark);
}
.hn-rsingle__byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.hn-rsingle__author { display: inline-flex; align-items: center; gap: 12px; }
.hn-rsingle__author-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.hn-rsingle__author-avatar--empty { background: var(--wp--preset--color--paper); }
.hn-rsingle__author-name { font-family: Montserrat, ui-sans-serif, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.009em; color: #000; }
.hn-rsingle__date { font-family: Montserrat, ui-sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 25px; color: #515151; }
.hn-rsingle__content { font-family: Montserrat, ui-sans-serif, sans-serif; font-size: 18px; line-height: 25px; color: #434343; }
.hn-rsingle__content > * + * { margin-top: 24px; }
.hn-rsingle__content h2 { font-family: Montserrat, ui-sans-serif, sans-serif; font-weight: 500; font-size: 32px; line-height: 1.15; letter-spacing: -0.009em; color: var(--wp--preset--color--brand-dark); margin-top: 40px; }
.hn-rsingle__content h3 { font-family: Montserrat, ui-sans-serif, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--wp--preset--color--brand-dark); margin-top: 32px; }
.hn-rsingle__content ul, .hn-rsingle__content ol { padding-left: 1.6em; }
.hn-rsingle__content li + li { margin-top: 4px; }
.hn-rsingle__content a:not(.hn-btn) { color: var(--wp--preset--color--primary); }
.hn-rsingle__content img { border-radius: 5px; max-width: 100%; height: auto; }
.hn-rsingle__content :where(figure, .wp-block-embed) { margin-top: 24px; }
.hn-rsingle__media { margin-bottom: 24px; }
.hn-rsingle__media .hn-resource-audio { border: 0; border-radius: 12px; }
.hn-rsingle__media .hn-resource-video { position: relative; aspect-ratio: 16/9; }
.hn-rsingle__media .hn-resource-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
/* Section contact en pied de single (Figma 665-4482 / organism ContactForm
* 10:4819). Panneau beige arrondi, 2 colonnes desktop (contenu/formulaire +
* photo), empilé mobile (photo dessous). V1 : conteneur + CTA placeholder ;
* le vrai formulaire (HubSpot/Gravity, AC 30240) remplacera .hn-rsingle__contact-cta
* dans la même colonne. Markup attendu : voir contrat communiqué à la session
* Ressources. */
.hn-rsingle__contact {
width: min(100% - 2 * var(--hn-gutter), 1184px);
margin: clamp(56px, 8vw, 96px) auto 0;
}
.hn-rsingle__contact-inner {
display: grid;
grid-template-columns: 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: center;
background: var(--wp--preset--color--paper);
border-radius: 24px;
padding: clamp(28px, 4vw, 56px);
}
/* 2 colonnes uniquement si une photo accompagne le contenu. */
.hn-rsingle__contact-inner:has(.hn-rsingle__contact-media) {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.hn-rsingle__contact-title {
margin: 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-weight: 500;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--wp--preset--color--brand-dark);
}
.hn-rsingle__contact-lead {
margin: 16px 0 0;
font-family: Montserrat, ui-sans-serif, sans-serif;
font-size: 18px;
line-height: 27px;
color: #434343;
}
.hn-rsingle__contact-cta { margin-top: 28px; }
.hn-rsingle__contact-media {
margin: 0;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.hn-rsingle__contact-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.hn-rsingle__layout { padding-top: clamp(96px, 18vw, 140px); }
.hn-rsingle__cover {
margin-top: clamp(88px, 16vw, 120px);
aspect-ratio: auto;
height: clamp(180px, 48vw, 220px);
border-radius: 24px;
}
.hn-rsingle__cover + .hn-rsingle__layout { padding-top: clamp(28px, 6vw, 40px); }
.hn-rsingle__contact-inner,
.hn-rsingle__contact-inner:has(.hn-rsingle__contact-media) { grid-template-columns: 1fr; }
.hn-rsingle__contact-media { order: 2; aspect-ratio: 16 / 9; }
.hn-rsingle__layout--toc { display: block; }
.hn-rsingle__toc { position: static; margin-bottom: 32px; }
.hn-rsingle__main { max-width: none; }
.hn-rsingle__title { font-size: clamp(28px, 7vw, 40px); }
.hn-rsingle__content h2 { font-size: 26px; }
}
/* ===========================================================================
* ANNOTATIONS MANUSCRITES — texte Mynerve + flèche dessinée (cf. annotation.php)
* Posées en absolu dans la marge du bloc hôte (.hn-annot-host = relatif).
* Mobile : masquées ou remises dans le flux selon le champ par annotation.
* ======================================================================== */
.hn-annot-host { position: relative; }
/* Calque d'annotation : posé sur la COLONNE DE CONTENU centrée (et non la pleine
* largeur du bloc), pour que les positions en % restent collées au contenu quelle
* que soit la largeur de la fenêtre. La colonne par défaut = largeur « wide » du
* thème (≈ contenu rendu des sections) ; surchargeable par bloc via
* --hn-annot-frame. Chaque calque enfant (texte/flèche) est posé en absolu, en %
* de cette colonne (modèle libre piloté par le Studio). */
.hn-annotation {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(100%, var(--hn-annot-frame, 1184px));
z-index: 4;
pointer-events: none;
}
.hn-annotation__text {
position: absolute;
margin: 0;
font-family: 'Mynerve', cursive;
font-weight: 400;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.0082em;
white-space: normal;
width: max-content;
max-width: min(90vw, 22em);
text-align: center;
transform-origin: center center;
}
.hn-annotation__text--bleu { color: #364ebf; }
.hn-annotation__text--cyan { color: #2fd6c9; }
.hn-annotation__text--dark { color: var(--wp--preset--color--brand-dark, #16002f); }
.hn-annotation__text--blanc { color: #fff; }
.hn-annotation__arrow {
position: absolute;
line-height: 0;
transform-origin: center center;
}
.hn-annotation__arrow--cyan { color: #2fd6c9; }
.hn-annotation__arrow--bleu { color: #364ebf; }
.hn-annotation__arrow--dark { color: var(--wp--preset--color--brand-dark, #16002f); }
.hn-annotation__arrow--blanc { color: #fff; }
.hn-annotation__arrow svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Mobile : masquer ou remettre les calques dans le flux (centrés). */
@media (max-width: 781px) {
.hn-annotation--m-hide { display: none !important; }
.hn-annotation--m-flow { position: static !important; inset: auto !important; }
.hn-annotation--m-flow .hn-annotation__text,
.hn-annotation--m-flow .hn-annotation__arrow {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0.75rem auto !important;
display: block;
text-align: center;
width: auto;
}
.hn-annotation--m-flow .hn-annotation__arrow svg { width: 48px; }
}
/* AC 30298 — Attestation Qualiopi : visible uniquement si le panier contient
une formation (classe body posée par hn-qualiopi.php). Sinon masquée. */
body:not(.hn-cart-has-formation) .wc-block-components-address-form__hn-qualiopi-formation {
display: none;
}
/* ============================================================================
* BRUSHED BORDER v2 — filet texturé violet PROPRE (généralisé, 2026-06-17)
*
* Problème de la v1 : le contour était un `border` (anneau fin) sur un ::before
* distordu par #hn-roughen → le filtre déplace les DEUX bords de l'anneau qui
* se dédoublent (trait fantôme), surtout visible sur fond sombre (le bord net
* de la carte blanche s'ajoutait au trait brushed → double ligne).
*
* Technique v2 (comme la card solution-tabs, mais avec le trait coloré) : deux
* couches REMPLIES en arrière-plan (z-index:-1, donc le contenu reste net, sans
* filtre) →
* ::before = rectangle plein couleur du trait, distordu (UN seul bord ondulé)
* ::after = rectangle plein « surface » inséré de l'épaisseur du trait
* (masque le centre, ne laisse dépasser que le filet)
* `isolation:isolate` confine les z-index:-1 dans la carte ; fond de carte rendu
* transparent (la couleur réelle passe par --hn-brushed-surface → ::after).
*
* Override les ::before v1 (anneau) par ordre de cascade (ce bloc est en fin de
* fichier). Pour ajouter une nouvelle carte : l'ajouter aux listes ci-dessous.
* ========================================================================== */
.hn-brushed-border,
.hn-callout-card,
.hn-event-card,
.hn-ressource-card,
.hn-product-card,
.hn-solution-card,
.hn-team-card,
.hn-testimonial-card,
.hn-card-photo,
.hn-timeline__card,
.hn-comparison__card,
.hn-pricing-card {
position: relative;
isolation: isolate;
overflow: visible;
background-color: transparent;
--hn-brushed-surface: var(--wp--preset--color--surface);
}
.hn-brushed-border::before,
.hn-callout-card::before,
.hn-event-card::before,
.hn-ressource-card::before,
.hn-product-card::before,
.hn-solution-card::before,
.hn-team-card::before,
.hn-testimonial-card::before,
.hn-card-photo::before,
.hn-timeline__card::before,
.hn-comparison__card::before,
.hn-pricing-card::before {
content: '';
position: absolute;
inset: 0;
border: 0;
background: var(--hn-brushed-color, var(--wp--preset--color--brand-dark));
border-radius: var(--hn-brushed-radius, 24px);
filter: url(#hn-roughen);
z-index: -1;
pointer-events: none;
}
.hn-brushed-border::after,
.hn-callout-card::after,
.hn-event-card::after,
.hn-ressource-card::after,
.hn-product-card::after,
.hn-solution-card::after,
.hn-team-card::after,
.hn-testimonial-card::after,
.hn-card-photo::after,
.hn-timeline__card::after,
.hn-comparison__card::after,
.hn-pricing-card::after {
content: '';
position: absolute;
inset: var(--hn-brushed-width, 3px);
background: var(--hn-brushed-surface);
border-radius: calc(var(--hn-brushed-radius, 24px) - 1px);
filter: url(#hn-roughen);
z-index: -1;
pointer-events: none;
}
/* Surface intérieure selon le skin (sinon ::after reste blanc). */
.hn-event-card--beige,
.hn-ressource-card--beige,
.hn-callout-card--beige,
.hn-team-card--beige,
.hn-product-card--beige {
--hn-brushed-surface: var(--wp--preset--color--paper);
}
.hn-event-card--bleu,
.hn-ressource-card--bleu,
.hn-callout-card--bleu,
.hn-team-card--bleu,
.hn-product-card--bleu {
--hn-brushed-surface: var(--wp--preset--color--brand-dark);
}
/* Fallback sans filtre SVG : ::before plein non distordu = bordure pleine nette. */
@supports not (filter: url(#hn-roughen)) {
.hn-brushed-border::before,
.hn-callout-card::before,
.hn-event-card::before,
.hn-ressource-card::before,
.hn-product-card::before,
.hn-solution-card::before,
.hn-team-card::before,
.hn-testimonial-card::before,
.hn-card-photo::before,
.hn-timeline__card::before,
.hn-comparison__card::before,
.hn-pricing-card::before {
filter: none;
}
}
/* Cards à bord DOUX (non violet) : le trait prend la couleur de surface → bord
brushed discret au lieu du filet violet. Filtre brushed STANDARD (#hn-roughen)
conservé (l'« adouci » #hn-roughen-soft a été écarté par le client). État validé
pour témoignages / comparaison Evidence / ressources / équipe / callout /
événements. (Les essais de réglage du brush se font sur brush-lab.html, hors WP.) */
.hn-team-card,
.hn-testimonial-card,
.hn-comparison__card,
.hn-ressource-card,
.hn-callout-card,
.hn-event-card {
--hn-brushed-color: var(--hn-brushed-surface);
}