/* =========================================================
 * FFVélo · Kitcom — Styles de blocs (variations + patterns)
 *
 * - Bouton « Téléchargement » : variation de style pour core/button
 *   (icône de téléchargement + pastille de type de fichier ajoutée en JS).
 * - Carte de téléchargement (.ffv-asset-card) : visuel + titre + bouton.
 * - Lien de téléchargement compact (.ffv-dl-link) : utilisé dans les tableaux.
 * ========================================================= */

/* ---------- Bouton « Téléchargement » ---------- */

.wp-block-button.is-style-ffv-download > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    /* Jamais plus large que la colonne : le libellé replie proprement
       sur les espaces (pas de coupure en milieu de mot). */
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal; /* neutralise le break-word global de WP sur les boutons */
    text-align: center;
}

.wp-block-button.is-style-ffv-download > .wp-block-button__link::before {
    content: "";
    inline-size: 1.05em;
    block-size: 1.05em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ffv-dl-icon) center / contain no-repeat;
            mask: var(--ffv-dl-icon) center / contain no-repeat;
}

/* ---------- Boutons de navigation : icône de lien ----------
   Tout bouton qui pointe vers une page (pas un téléchargement, pas un
   mailto/tel) affiche une petite icône : flèche pour les liens internes,
   icône « lien externe » pour les autres domaines. */

.wp-block-button:not(.is-style-ffv-download) > .wp-block-button__link[href]:not([href^="mailto:"]):not([href^="tel:"]):not([href^="#"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    max-inline-size: 100%;
    white-space: normal;
    text-align: center;
}

.wp-block-button:not(.is-style-ffv-download) > .wp-block-button__link[href]:not([href^="mailto:"]):not([href^="tel:"]):not([href^="#"])::after {
    content: "";
    inline-size: 0.95em;
    block-size: 0.95em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ffv-arrow-icon) center / contain no-repeat;
            mask: var(--ffv-arrow-icon) center / contain no-repeat;
}

/* Liens sortants (absolus, hors domaine kitcommunication) */
.wp-block-button:not(.is-style-ffv-download) > .wp-block-button__link[href*="//"]:not([href*="kitcommunication.ffvelo.fr"])::after {
    -webkit-mask-image: var(--ffv-extlink-icon);
            mask-image: var(--ffv-extlink-icon);
}

/* Les boutons des cartes contact gardent leur seule icône mail */
.ffv-contact-card .wp-block-button__link::after {
    content: none;
}

/* Pastille du type de fichier (PDF, ZIP, DOCX…) injectée par download-button.js */
.ffv-dl-ext {
    flex: 0 0 auto;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    padding: 0.18em 0.5em;
    border-radius: 9999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
}

/* Icônes SVG monochromes partagées (utilisées en masque par plusieurs blocs) */
:root {
    --ffv-dl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3a1 1 0 0 1 2 0v8.6l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42L11 11.6V3Z'/%3E%3Cpath d='M5 19a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2H5Z'/%3E%3C/svg%3E");
    --ffv-mail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm8 7.2L4.4 6h15.2L12 11.2ZM4 8.3V18h16V8.3l-7.4 4.9a1 1 0 0 1-1.2 0L4 8.3Z'/%3E%3C/svg%3E");
    --ffv-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.3 4.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4l4.29-4.3H4a1 1 0 0 1 0-2h13.59l-4.3-4.3a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
    --ffv-copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h11a2 2 0 0 1 2 2v13h-2V4H8V2Z'/%3E%3Cpath d='M5 6h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v12h11V8H5Z'/%3E%3C/svg%3E");
    --ffv-extlink-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3a1 1 0 0 0 0 2h3.59l-8.3 8.3a1 1 0 0 0 1.42 1.4L19 6.41V10a1 1 0 0 0 2 0V4a1 1 0 0 0-1-1h-6Z'/%3E%3Cpath d='M5 5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-2 0v5H5V7h5a1 1 0 0 0 0-2H5Z'/%3E%3C/svg%3E");
}

/* ---------- Tableaux ----------
   Par défaut, le bloc tableau hérite de currentColor (bleu nuit) pour ses
   bordures : on impose le gris clair de la palette sur tous les tableaux. */

.wp-block-table :is(table, thead, tbody, tfoot, th, td) {
    border-color: var(--wp--preset--color--border, #e4e7ef);
}

/* ---------- Sections de page (bandes pleine largeur) ----------
   .ffv-section : bande pleine largeur avec respiration verticale.
   .ffv-section--alt : fond gris-bleu très clair pour alterner les bandes
   et rythmer visuellement les longues pages. */

.ffv-section {
    padding-block: clamp(2.75rem, 6vw, 5rem);
}

.ffv-section--alt {
    background: var(--wp--preset--color--surface-alt, #f7f8fb);
}

.ffv-section > .wp-block-heading:first-child {
    margin-block-start: 0;
}

/* Filet rouge FFVélo sous le titre de section (h2, ou h3 quand la
   section commence directement par un sous-titre). */
.ffv-section > h2.wp-block-heading,
.ffv-section > h3.wp-block-heading:first-child {
    position: relative;
    padding-block-end: 0.85rem;
}

.ffv-section > h2.wp-block-heading::after,
.ffv-section > h3.wp-block-heading:first-child::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 3.5rem;
    block-size: 4px;
    border-radius: 2px;
    background: var(--wp--preset--color--accent, #fb2726);
}

/* Respiration entre les sous-parties (h3) d'une même section */
.ffv-section > h3.wp-block-heading:not(:first-child) {
    margin-block-start: 2.75rem;
}

/* ---------- Hero (styles de bloc « FFVélo ») ----------
   Trois variantes solides partageant la même structure :
   - ffv-hero        → fond bleu nuit, texte blanc
   - ffv-hero-red    → fond rouge FFVélo, texte blanc
   - ffv-hero-light  → fond bleu pâle, texte bleu nuit
   La couleur du titre (post-title ou heading) et du chapô hérite de la
   variante, de sorte qu'un même pattern fonctionne quelle que soit la teinte. */

.is-style-ffv-hero,
.is-style-ffv-hero-red,
.is-style-ffv-hero-light {
    position: relative;
    overflow: clip;
    isolation: isolate;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.is-style-ffv-hero {
    background: var(--wp--preset--color--primary, #292675);
    color: var(--wp--preset--color--surface, #fff);
}

.is-style-ffv-hero-red {
    background: var(--wp--preset--color--accent, #fb2726);
    color: var(--wp--preset--color--surface, #fff);
}

.is-style-ffv-hero-light {
    background: var(--wp--preset--color--primary-pale, #edf0f9);
    color: var(--wp--preset--color--primary, #292675);
}

/* Le titre hérite de la couleur de la variante (bat l'élément h1 du theme.json). */
.is-style-ffv-hero :is(h1, h2, h3, .wp-block-heading, .wp-block-post-title),
.is-style-ffv-hero-red :is(h1, h2, h3, .wp-block-heading, .wp-block-post-title),
.is-style-ffv-hero-light :is(h1, h2, h3, .wp-block-heading, .wp-block-post-title) {
    color: inherit;
}

/* Taille de titre uniforme dans les heros. !important : certaines pages ont
   un font-size figé en style inline dans leur contenu (anciens patterns) ;
   on force le preset « display » pour homogénéiser tout le site. */
.is-style-ffv-hero :is(h1, .wp-block-post-title),
.is-style-ffv-hero-red :is(h1, .wp-block-post-title),
.is-style-ffv-hero-light :is(h1, .wp-block-post-title),
.wp-block-cover.is-style-ffv-hero-image h1 {
    font-size: var(--wp--preset--font-size--display, 2.5rem) !important;
}

.is-style-ffv-hero > :first-child,
.is-style-ffv-hero-red > :first-child,
.is-style-ffv-hero-light > :first-child {
    margin-block-start: 0;
}

/* Cercles décoratifs signature FFVélo (pseudo-éléments, sans image) */
.is-style-ffv-hero::before,
.is-style-ffv-hero::after,
.is-style-ffv-hero-red::before,
.is-style-ffv-hero-red::after,
.is-style-ffv-hero-light::before,
.is-style-ffv-hero-light::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    aspect-ratio: 1;
    inline-size: clamp(12rem, 28vw, 25rem);
    pointer-events: none;
}

/* Cercles blancs sur fonds foncés (bleu nuit, rouge). */
.is-style-ffv-hero::before,
.is-style-ffv-hero::after,
.is-style-ffv-hero-red::before,
.is-style-ffv-hero-red::after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--wp--preset--color--surface, #fff) 14%, transparent) 60%, transparent 61%);
}

/* Cercles bleu nuit (discrets) sur fond bleu pâle. */
.is-style-ffv-hero-light::before,
.is-style-ffv-hero-light::after {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--wp--preset--color--primary, #292675) 9%, transparent) 60%, transparent 61%);
}

.is-style-ffv-hero::before,
.is-style-ffv-hero-red::before,
.is-style-ffv-hero-light::before {
    inset-block-start: -7rem;
    inset-inline-start: -6rem;
}

.is-style-ffv-hero::after,
.is-style-ffv-hero-red::after,
.is-style-ffv-hero-light::after {
    inset-block-end: -8rem;
    inset-inline-end: -2rem;
}

.is-style-ffv-hero .ffv-hero__chapo,
.is-style-ffv-hero-red .ffv-hero__chapo,
.is-style-ffv-hero-light .ffv-hero__chapo {
    /* Aucune contrainte de largeur ici : le layout contraint donne au chapô
       exactement la même boîte centrée que le titre → bords alignés
       quelle que soit la largeur d'écran.
       Volontairement bien plus petit que le H1 (~18 px contre ~40 px) pour
       creuser la hiérarchie titre / sous-titre. */
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.5;
    opacity: 0.95;
}

/* Sur fond clair, le chapô passe en texte atténué pour rester lisible. */
.is-style-ffv-hero-light .ffv-hero__chapo {
    color: var(--wp--preset--color--text-muted, #6b6b78);
    opacity: 1;
}

/* Hero avec image : superposition + cercle gris discret */
.wp-block-cover.is-style-ffv-hero-image {
    overflow: clip;
}

.wp-block-cover.is-style-ffv-hero-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    inline-size: clamp(10rem, 24vw, 23rem);
    aspect-ratio: 1;
    border-radius: 50%;
    inset-block-start: -6rem;
    inset-inline-end: -5rem;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--wp--preset--color--surface, #fff) 12%, transparent) 60%, transparent 61%);
    pointer-events: none;
}

/* ---------- Lien de téléchargement compact (tableaux régionaux) ---------- */

.ffv-dl-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ffv-dl-link::before {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ffv-dl-icon) center / contain no-repeat;
            mask: var(--ffv-dl-icon) center / contain no-repeat;
}

.ffv-dl-link:hover,
.ffv-dl-link:focus-visible {
    text-decoration: underline;
    color: var(--wp--preset--color--accent);
}

/* ---------- Carte de téléchargement ---------- */

.ffv-asset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    block-size: 100%;
    padding: clamp(1rem, 2vw + 0.5rem, 1.5rem);
    text-align: center;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    box-shadow: var(--wp--preset--shadow--soft);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    /* Conteneur de requête : la zone média se dimensionne selon la largeur
       réelle de la carte (grille 2 colonnes = image plus grande). */
    container-type: inline-size;
}

.ffv-asset-card:hover {
    box-shadow: var(--wp--preset--shadow--medium);
    transform: translateY(-2px);
}

/* Zone média à hauteur fixe : les titres, textes et boutons des cartes
   d'une même grille restent alignés quel que soit le format de l'image. */
.ffv-asset-card__media {
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 10rem; /* fallback sans container queries */
    block-size: clamp(10rem, 38cqi, 14rem);
    inline-size: 100%;
}

/* Vidéo intégrée dans une carte (webinaires) : pleine largeur de la carte */
.ffv-asset-card .wp-block-embed {
    inline-size: 100%;
    margin: 0;
}

.ffv-asset-card__media img {
    max-block-size: 100%;
    max-inline-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
}

.ffv-asset-card .wp-block-heading {
    margin: 0;
    font-size: 1.125rem;
}

/* Pousse le bouton en bas pour aligner toutes les cartes d'une grille.
   Largeur naturelle, centré : un CTA pleine largeur paraît démesuré dans
   les cartes larges (grilles 2 colonnes). */
.ffv-asset-card .wp-block-buttons {
    margin-block-start: auto;
    inline-size: 100%;
    justify-content: center;
}

.ffv-asset-card .wp-block-button {
    inline-size: auto;
}

.ffv-asset-card .is-style-ffv-download > .wp-block-button__link {
    inline-size: 100%;
    font-size: 0.875rem;
    padding-block: 0.55rem;
}

/* Liste de téléchargements dans une carte : rangées compactes, pleine largeur */
.ffv-asset-card .ffv-downloads {
    align-self: stretch;
    inline-size: 100%;
    margin-block-start: auto;
}

.ffv-asset-card .ffv-downloads__list {
    gap: 0.6rem;
    grid-template-columns: 1fr; /* toujours empilé dans une carte, quel que soit l'attribut colonnes */
}

.ffv-asset-card .ffv-download__inner {
    min-block-size: 0;
    padding: 0.8rem 1.15rem;
    gap: 0.75rem;
    border-radius: 10px;
}

.ffv-asset-card .ffv-download__title {
    font-size: 0.85rem;
}

.ffv-asset-card .ffv-download__icon {
    inline-size: 1.2rem;
    block-size: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .ffv-asset-card {
        transition: none;
    }
}

/* ==========================================================================
   Liste numérotée de canaux (.ffv-steps)

   Présentation éditoriale en rangées pleine largeur : pastille numérotée
   (01, 02…) générée en CSS (compteur), titre et contenu libre à droite.
   Pensée pour des contenus de longueurs inégales, là où une grille de
   cartes créerait des trous.

   Structure attendue (blocs core uniquement) :
   group.ffv-steps > group.ffv-steps__item > group.ffv-steps__body > …
   ========================================================================== */

.ffv-steps {
    counter-reset: ffv-step;
    margin-block-start: clamp(0.75rem, 2vw, 1.25rem);
}

.ffv-steps__item {
    counter-increment: ffv-step;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: start;
    padding-block: clamp(1rem, 2.2vw, 1.4rem);
}

/* Filet séparateur entre les rangées (jamais avant la première) */
.ffv-steps__item + .ffv-steps__item {
    border-block-start: 1px solid var(--wp--preset--color--border, #e4e7ef);
}

/* Pastille numérotée bleu nuit (01, 02, …) */
.ffv-steps__item::before {
    content: counter(ffv-step, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(2.25rem, 4vw, 2.875rem);
    block-size: clamp(2.25rem, 4vw, 2.875rem);
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #292675);
    color: var(--wp--preset--color--surface, #fff);
    font-weight: 700;
    font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.ffv-steps__body > :first-child {
    margin-block-start: 0;
}

.ffv-steps__body > :last-child {
    margin-block-end: 0;
}

/* Le titre s'aligne optiquement sur le centre de la pastille */
.ffv-steps__body > .wp-block-heading:first-child {
    padding-block-start: 0.3rem;
    margin-block-end: 0.5rem;
}

/* ==========================================================================
   Carte contact (pattern ffvelo-kitcom/contact-card)
   ========================================================================== */

.ffv-contact-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    background-color: var(--wp--preset--color--primary-pale);
    border-radius: 16px;
    padding: 2rem 2.5rem;
}

/* Cercle décoratif, même langage visuel que le hero */
.ffv-contact-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -4rem;
    inset-block-start: -5rem;
    inline-size: 14rem;
    block-size: 14rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
    pointer-events: none;
}

.ffv-contact-card__avatar {
    flex: 0 0 auto;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ffv-contact-card__avatar p {
    margin: 0;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.02em;
}

.ffv-contact-card__body {
    flex: 1 1 auto;
    min-inline-size: 0;
    position: relative;
    z-index: 1;
}

.ffv-contact-card__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}

.ffv-contact-card__role {
    margin: 0.15rem 0 0;
    opacity: 0.8;
}

.ffv-contact-card .wp-block-buttons {
    margin-block-start: 1rem;
}

.ffv-contact-card .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--wp--preset--color--primary);
    color: #fff;
    /* Bouton compact : action secondaire dans une carte, pas un CTA de page */
    font-size: 0.875rem;
    padding: 0.5rem 1.15rem;
}

.ffv-contact-card .wp-block-button__link::before {
    content: "";
    inline-size: 1.05em;
    block-size: 1.05em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ffv-mail-icon) center / contain no-repeat;
            mask: var(--ffv-mail-icon) center / contain no-repeat;
}

@media (max-width: 600px) {
    .ffv-contact-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.75rem;
    }
}

/* ---------- Médiathèque vidéo (.ffv-videos) ----------
   Galerie de vidéos façon plateforme de replay : vignette 16:9
   (miniature YouTube) avec bouton play, titre et description dessous.
   La vidéo ne se charge qu'au clic (façade) : la page reste légère
   même avec beaucoup de vidéos. JS : assets/js/video-facade.js */

.ffv-videos {
    display: grid;
    gap: 2.25rem clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    margin-block-start: 2rem;
}

.ffv-video {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

/* Vignette cliquable */
.ffv-video__poster {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--wp--preset--color--primary-pale, #EDF0F9);
    box-shadow: var(--wp--preset--shadow--soft, 0 1px 2px rgba(41, 38, 117, 0.06), 0 4px 12px rgba(41, 38, 117, 0.08));
    transition: box-shadow 0.25s ease;
}

.ffv-video__poster img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover; /* recadre les bandes noires des miniatures YouTube 4:3 */
    display: block;
    transition: transform 0.3s ease;
}

.ffv-video__poster:hover,
.ffv-video__poster:focus-visible {
    box-shadow: var(--wp--preset--shadow--medium, 0 4px 8px rgba(41, 38, 117, 0.08), 0 12px 28px rgba(41, 38, 117, 0.12));
}

.ffv-video__poster:hover img,
.ffv-video__poster:focus-visible img {
    transform: scale(1.04);
}

.ffv-video__poster:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #fb2726);
    outline-offset: 3px;
}

/* Pastille play rouge, centrée */
.ffv-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 50%;
    background: var(--wp--preset--color--accent, #fb2726);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.ffv-video__play::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 0;
    block-size: 0;
    border-block: 0.55rem solid transparent;
    border-inline-start: 0.9rem solid #fff;
    translate: 0.1rem 0;
}

.ffv-video__poster:hover .ffv-video__play,
.ffv-video__poster:focus-visible .ffv-video__play {
    transform: scale(1.12);
}

/* Lecteur injecté au clic (remplace la vignette) */
.ffv-video__player {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--wp--preset--shadow--medium, 0 4px 8px rgba(41, 38, 117, 0.08), 0 12px 28px rgba(41, 38, 117, 0.12));
}

.ffv-video__player iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
}

/* Texte sous la vignette */
.ffv-video__title {
    margin: 0.9rem 0 0;
    color: var(--wp--preset--color--primary, #292675);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.ffv-video__text {
    margin: 0.45rem 0 0;
    color: var(--wp--preset--color--text, #222222);
    font-size: var(--wp--preset--font-size--medium, 0.9375rem);
    line-height: 1.55;
}

/* Actions (diaporama, liens utiles) : liens discrets avec flèche */
.ffv-video__actions {
    margin: 0.65rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ffv-video__action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    color: var(--wp--preset--color--accent-dark, #C81E1D);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    text-decoration: none;
}

.ffv-video__action:hover,
.ffv-video__action:focus-visible {
    text-decoration: underline;
}

.ffv-video__action::after {
    content: "";
    inline-size: 0.8em;
    block-size: 0.8em;
    background-color: currentColor;
    /* --ffv-arrow-icon défini plus haut dans ce fichier */
    -webkit-mask: var(--ffv-arrow-icon) center / contain no-repeat;
            mask: var(--ffv-arrow-icon) center / contain no-repeat;
}

/* Vidéo seule (hors grille) : largeur réduite et centrée */
.ffv-video--solo {
    max-inline-size: min(100%, 42rem);
    margin-inline: auto;
}

/* Variante compacte : vignettes plus petites, pour faire tenir
   4 vidéos par ligne dans la largeur de contenu standard. */
.ffv-videos--compact {
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

@media (prefers-reduced-motion: reduce) {
    .ffv-video__poster,
    .ffv-video__poster img,
    .ffv-video__play {
        transition: none;
    }
}

/* ---------- Texte à copier (.ffv-copytext) ----------
   Panneau pour les textes « prêts à l'emploi » (argumentaires, éléments
   de langage…) : filet rouge à gauche et bouton « Copier le texte ».
   JS : assets/js/copy-text.js */

.ffv-copytext {
    background: var(--wp--preset--color--surface, #fff);
    border-inline-start: 4px solid var(--wp--preset--color--accent, #fb2726);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    box-shadow: var(--wp--preset--shadow--soft, 0 1px 2px rgba(41, 38, 117, 0.06), 0 4px 12px rgba(41, 38, 117, 0.08));
    margin-block-start: 1.5rem;
}

.ffv-copytext__body > h3 {
    margin: 0 0 0.85rem;
    color: var(--wp--preset--color--primary, #292675);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35;
}

.ffv-copytext__body > p,
.ffv-copytext__body > ul {
    margin: 0 0 0.75rem;
    font-size: var(--wp--preset--font-size--medium, 0.9375rem);
    line-height: 1.65;
}

.ffv-copytext__body > :last-child {
    margin-block-end: 0;
}

.ffv-copytext__body > ul {
    padding-inline-start: 1.25rem;
}

.ffv-copytext__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-start: 1.1rem;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--wp--preset--color--primary, #292675);
    border-radius: 9999px;
    background: transparent;
    color: var(--wp--preset--color--primary, #292675);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ffv-copytext__copy::before {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    background-color: currentColor;
    -webkit-mask: var(--ffv-copy-icon) center / contain no-repeat;
            mask: var(--ffv-copy-icon) center / contain no-repeat;
}

.ffv-copytext__copy:hover,
.ffv-copytext__copy:focus-visible {
    background: var(--wp--preset--color--primary, #292675);
    color: var(--wp--preset--color--surface, #fff);
}

.ffv-copytext__copy.is-copied {
    border-color: var(--wp--preset--color--accent, #fb2726);
    background: var(--wp--preset--color--accent, #fb2726);
    color: var(--wp--preset--color--surface, #fff);
}

/* Grille pour poser deux panneaux côte à côte */
.ffv-copytext-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    margin-block-start: 1.5rem;
}

.ffv-copytext-grid .ffv-copytext {
    margin-block-start: 0;
}