/**
 * Numeria Widget — Card (Section cibles)
 * D'après Figma (node 2250:358) :
 *  - une plaque colorée INCLINÉE derrière (seule elle est tournée) ;
 *  - la photo, droite, posée par-dessus (coins arrondis) ;
 *  - un fin liseré coloré (la plaque qui dépasse) entre la photo et le texte ;
 *  - un cadre blanc arrondi contenant le texte ;
 *  - le macaron (sceau rose + couronne) à cheval sur la jointure photo / texte.
 *
 * TAILLES IDENTIQUES :
 *  - .numeria-card fait 100% de la hauteur de sa colonne/cellule.
 *    En grille (voir .grille_de_cards) avec align-items:stretch, toutes les
 *    cartes d'une même ligne ont la même hauteur.
 *  - La photo a une hauteur fixe (--numeria-card-media-h) et le cadre blanc
 *    occupe le reste : les macarons et les textes s'alignent d'une carte à l'autre.
 */

.numeria-card {
    --numeria-card-bg: #d7eadb;       /* Vert amande / Parme #d5cde7 */
    --numeria-card-media-h: 300px;    /* hauteur fixe de la photo */
    --numeria-card-gap: 0px;          /* espace photo / texte (0 = collés) */
    --numeria-card-inset: 5px;       /* retrait latéral du contenu => plaque plus visible */
    --numeria-card-radius: 15px;
    --numeria-card-plate-radius: 20px;
    --numeria-card-plate-tilt: -2.7deg;
    --numeria-card-min-h: 0px;

    position: relative;
    height: 100%;
    min-height: var(--numeria-card-min-h);
    /* marge pour que la plaque inclinée puisse dépasser sans être rognée */
    padding: 18px 12px 12px 12px;
    max-width: 350px;
}

/* Orientation = sens d'inclinaison de la plaque (valeurs Figma) */
.numeria-card--right { --numeria-card-plate-tilt: 2.04deg; }
.numeria-card--left  { --numeria-card-plate-tilt: -2.7deg; }
.numeria-card--none  { --numeria-card-plate-tilt: 0deg; }

/* Plaque colorée inclinée, derrière tout le reste */
.numeria-card__plate {
    position: absolute;
    inset: 0;
    background: var(--numeria-card-bg);
    border-radius: var(--numeria-card-plate-radius);
    transform: rotate(var(--numeria-card-plate-tilt));
    z-index: 0;
}

/* Contenu droit (non incliné). Le retrait latéral rend la plaque plus visible. */
.numeria-card__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 var(--numeria-card-inset);
}

/* Photo */
.numeria-card__media {
    flex: 0 0 auto;
    height: var(--numeria-card-media-h);
    border-radius: var(--numeria-card-radius);
    overflow: hidden;
}

.numeria-card__img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 15px;
    object-fit: cover;
}

/* Macaron : à cheval sur la jointure photo / cadre blanc */
.numeria-card__badge {
    position: absolute;
    left: 50%;
    top: calc(var(--numeria-card-media-h) - 35px);
    width: 72px;
    height: 69px;
    transform: translateX(-50%);
    z-index: 3;
}

.numeria-card__badge svg,
.numeria-card__badge img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cadre blanc du texte : sous la photo, laisse voir le liseré coloré */
.numeria-card__text {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;               /* remplit le reste => hauteurs égales */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--numeria-card-gap);
    padding: 30px 28px;
    background: #fff;
    border-radius: var(--numeria-card-radius);
    text-align: center;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.25;
    color: #122945;
    flex-direction: column;
}