/* ==========================================================================
   Mur'Mures — unification des retours visuels sur les elements cliquables.
   Couche additive : complete les hovers incomplets pour qu'ils atteignent le
   standard des impact-cards (bordure accent + elevation + ombre + photo en
   couleur), sans toucher aux cartes deja conformes.
   Cartes deja completes (non modifiees ici) : impact-card, home-preview-card,
   featured-banner, media-hub-tile, media-hero-card, atelier-row,
   parcours-portrait-featured, sout-action, sout-impact-card.
   ========================================================================== */

/* ── cellule-banner (bandeaux CTA Interventions + Soutenir) : il n'avait que
      la bordure. Ajout elevation + ombre. ── */
a.cellule-banner { transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
a.cellule-banner:hover,
a.cellule-banner.scroll-hover {
    border-color: var(--accent) !important;
    transform: translateY(-3px);
    box-shadow: 0 22px 55px var(--shadow, rgba(0, 0, 0, 0.25));
}

/* ── eng-card (Qui sommes-nous) : bordure + photo seulement. Ajout elevation. ── */
.eng-card { transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.eng-card:hover,
.eng-card.scroll-hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px var(--shadow, rgba(0, 0, 0, 0.2));
}

/* ── Accueil "Qui est Yannick" : seul le portrait reagissait. La section n'est
      pas cliquable en elle-meme, on garde donc une reaction discrete photo
      (existante) + rien d'excessif. En revanche le bouton en dessous doit
      reagir des l'entree dans la zone tactile. ── */

/* ── Flèches / CTA internes : glissement standard 3px (la ou il manque). ── */
.cellule-banner .btn-red span[aria-hidden],
.featured-banner .btn-red span[aria-hidden] { display: inline-block; transition: transform 0.3s ease; }
a.cellule-banner:hover .btn-red span[aria-hidden],
.featured-banner:hover .btn-red span[aria-hidden] { transform: translateX(3px); }

/* ── Equivalent tactile generalise : sur ecrans sans hover, la classe
      .scroll-hover (posee par murmures.js) reproduit l'etat survole des
      cartes qui n'en beneficiaient pas encore. ── */
@media (hover: none), (pointer: coarse) {
    .home-preview-card.scroll-hover { border-color: var(--accent); transform: translateY(-4px); }
    .home-preview-card.scroll-hover .card-img-wrap img { filter: grayscale(0%); transform: scale(1.05); }
    .featured-banner.scroll-hover { border-color: var(--accent) !important; transform: translateY(-3px); }
    .featured-banner.scroll-hover img { filter: grayscale(0%); }
    .media-hub-tile.scroll-hover { border-color: var(--accent); transform: translateY(-4px); }
    .media-hub-tile.scroll-hover .media-hub-tile-media img { transform: scale(1.05); }
    .media-hero-card.scroll-hover { border-color: var(--accent); transform: translateY(-4px); }
    .parcours-portrait-featured.scroll-hover { border-color: var(--accent); transform: translateY(-3px); }
    .parcours-portrait-featured.scroll-hover img { filter: grayscale(0); }
    .parcours-portrait-wide.scroll-hover img { filter: grayscale(0%); transform: scale(1.02); }
    .home-media-frame.scroll-hover img, .home-portrait.scroll-hover img { filter: grayscale(0%); }
}

@media (prefers-reduced-motion: reduce) {
    a.cellule-banner, a.cellule-banner:hover,
    .eng-card, .eng-card:hover {
        transform: none !important;
        transition: none;
    }
}

/* ── Icones sociales du footer : cible 44px sur tous les ecrans (WCAG 2.5.8),
      et repli SVG generique si un reseau inconnu est ajoute au dashboard. ── */
.foot-social a { width: 44px; height: 44px; }
.foot-social a i[class*="fa-"]:empty::before {
    content: "\2197";
    font-style: normal;
    font-size: 16px;
    line-height: 1;
}

/* ── Accueil "Qui est Yannick" : hover rouge complet (demande client).
      Le portrait devient cliquable vers Qui sommes-nous ; il recoit le
      standard des cartes : bordure rouge + elevation + photo en couleur. ── */
.parcours-portrait-link { display: block; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.parcours-portrait-link:hover,
.parcours-portrait-link.scroll-hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px var(--shadow, rgba(0, 0, 0, 0.2));
}
.parcours-portrait-link:hover img,
.parcours-portrait-link.scroll-hover img { filter: grayscale(0%); transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
    .parcours-portrait-link, .parcours-portrait-link:hover { transform: none !important; transition: none; }
}

/* ── Facade du fil TikTok (SociableKit) : le service externe ne se charge
      qu'au clic — zero cookie tiers sans action du visiteur. ── */
.mm-widget-facade { display: grid; justify-items: center; gap: 14px; padding: clamp(30px, 5vw, 54px) 20px; border: 1px dashed var(--border); border-radius: 20px; text-align: center; background: var(--surface, rgba(255, 255, 255, 0.02)); }
.mm-widget-facade-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(196, 0, 0, 0.12); color: var(--accent); font-size: 18px; }
.mm-widget-facade p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.mm-widget-facade .btn-red { cursor: pointer; }