/* =============================================
   VertiFoot — PLATEFORME SOCIALE & VOD · PAGE D'ACCUEIL
   Charte officielle (synthèse client juin 2026)
   Rouge #2F9E11 · Fond #1b1b1b · Surface cartes #141414 · Police Roboto
   ============================================= */

:root {
  --red:    #2F9E11;   /* rouge EICAR officiel */
  --black:  #f4f4f6;   /* fond de page */
  --dark:   #f7f7f9;   /* surfaces sombres (footer, partenaires) */
  --grey:   #f2f2f4;   /* cartes */
  --mid:    #ededef;
  --light:  #88888c;
  --white:  #17171b;
  --font:   'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* Barre de menu (2e ligne header) — surchargeables par client via l'admin */
  --menu-bg:     #f4f4f6;
  --menu-text:   rgba(24,24,30,0.814);
  --menu-hover:  #ffffff;
  --menu-border: var(--red);
  --menu-border-top: rgba(24,24,30,0.097);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  font-size: 16px;
  line-height: 1.6;
  /* overflow-x:clip et NON hidden : "hidden" fait du body un conteneur de
     défilement, ce qui casse position:sticky du header sur Safari iOS (il se cale
     sous la barre d'URL au lieu de top:0). "clip" coupe le débordement horizontal
     sans créer ce conteneur → le header sticky recolle bien au viewport. */
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

/* =============================================
   HEADER
   ============================================= */
.site-header {
  /* FIXED + safe-area (approche du natif lykhubs) : top prend en compte la zone
     sûre iOS (barre de statut / encoche) pour que le header ne passe pas sous la
     chrome Safari. env() = 0 hors iOS. L'espace est réservé par body{padding-top}
     (défini dans _head_critical.php, safe-area incluse). */
  position: fixed;
  top: 0; left: 0; right: 0;   /* Safari onglet : la barre d'URL couvre déjà l'encoche → top:0 */
  z-index: 1000;
  background: #161616;          /* ligne 1 (pleine largeur) */
  border-bottom: 1px solid rgba(255,255,255,.06);
  height: auto;
}
/* App installée (standalone) uniquement : décale sous la safe-area iOS. */
@media (display-mode: standalone) {
  .site-header { top: env(safe-area-inset-top, 0px); }
}
.site-header .header-inner { height: 76px; }
/* Ligne 1 : la recherche au centre prend l'espace dispo entre logo et actions */
.site-header .header-inner .wl-search { flex: 1; max-width: 560px; margin: 0 auto; visibility: visible; }
/* Recherche repliée par défaut : la barre n'apparaît qu'au clic sur la loupe
   (classe .search-open posée sur le header). Les actions restent calées à droite. */
.site-header:not(.search-open) .header-inner .wl-search { display: none; }
.site-header .header-actions { margin-left: auto; }
/* ============================================================================
   RECHERCHE DESKTOP — BANDEAU sous le header.
   Au clic sur la loupe (.search-open), la barre .wl-search sort du header et
   s'affiche dans un bandeau pleine largeur sous le header, centrée au milieu.
   La loupe en haut reste le bouton d'ouverture/fermeture.
   ============================================================================ */
@media (min-width: 961px) {
  /* Bandeau : la barre devient un bloc fixe pleine largeur sous le header (92px). */
  .site-header.search-open .header-inner .wl-search {
    position: fixed;
    left: 0; right: 0;
    top: 76px;                              /* juste sous la 1re ligne du header */
    width: 100%; max-width: none; min-width: 0;
    height: 72px;
    margin: 0;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    gap: 0;
    background: #f6f6f8;
    border: none;
    border-top: 1px solid rgba(24,24,30,0.108);
    border-bottom: 1px solid rgba(24,24,30,0.108);
    border-radius: 0;
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
    backdrop-filter: none;
    z-index: 1200;
    animation: wlSearchDrop .22s ease-out;
  }
  /* En mode menu inline, la 1re ligne peut être un peu plus basse : on garde 92px
     (hauteur réelle du header), le bandeau s'y colle. */

  /* Le contenu interne (scope + champ + loupe) forme une pilule centrée, largeur limitée. */
  .site-header.search-open .header-inner .wl-search > * { align-self: center; }
  .site-header.search-open .header-inner .wl-search-scope,
  .site-header.search-open .header-inner .wl-search-input {
    height: 46px;
  }
  .site-header.search-open .header-inner .wl-search-scope { flex: none; }
  .site-header.search-open .header-inner .wl-search-input {
    flex: 0 1 560px;                        /* barre centrée, largeur agréable */
    max-width: 560px;
    background: rgba(24,24,30,0.06);
    border: 1px solid rgba(24,24,30,0.164);
    border-radius: 0 999px 999px 0;
    color: #17171b; font-size: 16px; padding: 0 20px;
  }
  .site-header.search-open .header-inner .wl-search-input::placeholder { color: rgba(24,24,30,0.534); }
  /* Le scope « Tout » collé à gauche du champ, en pilule gauche. */
  .site-header.search-open .header-inner .wl-scope-btn {
    height: 46px;
    background: rgba(24,24,30,0.06);
    border: 1px solid rgba(24,24,30,0.164);
    border-right: none;
    border-radius: 999px 0 0 999px;
    color: rgba(24,24,30,1);
    padding: 0 16px 0 20px;
  }
  .site-header.search-open .header-inner .wl-scope-btn:hover { background: rgba(24,24,30,0.1); }
  .site-header.search-open .header-inner .wl-scope-btn svg { color: rgba(24,24,30,0.702); }
  /* Loupe « Rechercher » INTÉGRÉE dans la barre (pas de bloc rouge) : même fond
     que le champ, coin droit arrondi pour fermer proprement la pilule. */
  .site-header.search-open .header-inner .wl-search .wl-search-btn {
    display: flex; align-items: center; justify-content: center;
    height: 46px; width: 50px;
    background: rgba(24,24,30,0.06);
    border: 1px solid rgba(24,24,30,0.164);
    border-left: none;
    border-radius: 0 999px 999px 0;
    color: rgba(24,24,30,0.814);
    margin-left: -1px;                      /* colle au champ, un seul bloc */
  }
  .site-header.search-open .header-inner .wl-search .wl-search-btn:hover { color: #17171b; background: rgba(24,24,30,0.1); }
  /* Le champ ne ferme plus la pilule à droite : c'est la loupe interne qui le fait. */
  .site-header.search-open .header-inner .wl-search-input { border-radius: 0; border-right: none; }
  .site-header.search-open .header-inner .wl-search:focus-within { box-shadow: 0 16px 34px rgba(0,0,0,.45); }

  /* Les suggestions s'affichent centrées sous la barre du bandeau. */
  .site-header.search-open .header-inner .wl-suggestions {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 640px; max-width: 92vw;
    top: calc(100% + 10px);
  }

  /* Le bouton loupe du header (en haut à droite) : état « actif » discret (pas de
     rouge — on évite les 2 loupes rouges), juste un fond translucide clair. */
  .site-header.search-open .wl-search-mobile-btn {
    background: rgba(24,24,30,0.12); border-color: transparent; color: #17171b; border-radius: 999px;
  }
}
@keyframes wlSearchDrop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* 2e ligne : navigation (menu de gauche, style Allociné) — fond légèrement plus
   sombre, pleine largeur, pour séparer de la 1re ligne. */
.site-header .header-navrow {
  background: var(--menu-bg);
  border-top: 1px solid var(--menu-border-top);
  border-bottom: 1px solid var(--menu-border);   /* liseré (défaut = accent) */
}
.site-header .header-navrow .header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
/* ===== Mode MENU INLINE : le menu à droite du logo (1 seule ligne) ===== */
.site-header.header-menu-inline .header-inner .header-nav {
  display: flex; align-items: center; gap: 2px;
  height: auto; margin: 0 6px 0 18px; padding: 0; max-width: none;
}
/* La recherche + les actions se calent à droite (le menu occupe l'espace gauche) */
.site-header.header-menu-inline .header-inner .wl-search { margin-left: auto; }
.site-header.header-menu-inline:not(.search-open) .header-inner .header-actions { margin-left: auto; }
/* Items du menu inline : plus compacts, texte clair sur le fond du header */
.site-header.header-menu-inline .header-inner .header-nav a,
.site-header.header-menu-inline .header-inner .header-nav .wl-cmenu-btn,
.site-header.header-menu-inline .header-inner .header-nav .wl-commu-btn {
  font-size: 14px; padding: 7px 11px;
}
/* Menu à côté du logo : PAS de fond sur les boutons (survol ou actif) — seul le
   texte change de couleur. Un fond ferait un bloc disgracieux à côté du logo. */
.site-header.header-menu-inline .header-inner .header-nav a:hover,
.site-header.header-menu-inline .header-inner .header-nav a.active,
.site-header.header-menu-inline .header-inner .header-nav .wl-cmenu-btn:hover,
.site-header.header-menu-inline .header-inner .header-nav .wl-commu-btn:hover {
  background: transparent;
}
@media (max-width: 1100px) {
  /* Pas la place pour le menu inline : on le masque ET on affiche le hamburger
     (le menu mobile off-canvas prend le relais). Sans cette 2e règle, entre
     960 et 1100px il n'y avait AUCUN menu. */
  .site-header.header-menu-inline .header-inner .header-nav { display: none; }
  .site-header.header-menu-inline .btn-hamburger { display: flex; }
}
/* Header STICKY : il réserve déjà sa hauteur dans le flux, donc les wraps n'ont
   PLUS besoin de compenser la hauteur du header (sinon double espace). On ne garde
   qu'une petite respiration en haut du contenu. */
.pub-wrap, .auth-wrap, .com-wrap, .ct-wrap, .srch-wrap { padding-top: 10px !important; }
@media (max-width: 960px) {
  .pub-wrap, .auth-wrap, .com-wrap, .ct-wrap, .srch-wrap { padding-top: 10px !important; }
}

.header-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo EICAR+ */
.header-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.logo-name {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--white);
  text-transform: uppercase;
}
.logo-name span { color: var(--red); }
.logo-name .logo-plus {
  color: var(--red);
  font-weight: 900;
  margin-left: 4px;
}
.logo-tagline {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--light);
  line-height: 1.2;
  max-width: 120px;
}

/* Nav */
.nav-publier { display: none; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.header-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--menu-text);
  padding: 6px 14px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.header-nav a:hover {
  color: var(--menu-hover);
  background: rgba(24,24,30,0.07);
}
/* Lien actif (ex. Accueil quand on y est) : fond rouge très léger + texte rouge,
   cohérent et lisible (plus de gris sur rouge qui « bave »). */
.header-nav a.active {
  color: var(--red);
  background: rgba(47,158,17,0.12);
}

/* ===== Animation au survol des éléments du menu (desktop uniquement) =====
   Soulignement rouge qui se déploie depuis le centre + léger soulèvement.
   S'applique aux liens ET aux boutons de menu déroulant (Vidéos/Audio/Communauté). */
@media (hover: hover) and (min-width: 961px) {
  .header-nav > a,
  .header-nav .wl-cmenu-btn,
  .header-nav .wl-commu-btn {
    position: relative;
    transition: color .2s, background .2s, transform .2s ease;
  }
  /* La barre : centrée, largeur 0 au repos, pleine au survol. */
  .header-nav > a::after,
  .header-nav .wl-cmenu-btn::after,
  .header-nav .wl-commu-btn::after {
    content: '';
    position: absolute; left: 50%; bottom: 2px;
    width: 0; height: 2px; border-radius: 2px;
    background: var(--red);
    transform: translateX(-50%);
    transition: width .25s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .header-nav > a:hover,
  .header-nav .wl-cmenu:hover .wl-cmenu-btn,
  .header-nav .wl-cmenu.open .wl-cmenu-btn,
  .header-nav .wl-commu:hover .wl-commu-btn,
  .header-nav .wl-commu.open .wl-commu-btn {
    transform: translateY(-1px);
  }
  .header-nav > a:hover::after,
  .header-nav .wl-cmenu:hover .wl-cmenu-btn::after,
  .header-nav .wl-cmenu.open .wl-cmenu-btn::after,
  .header-nav .wl-commu:hover .wl-commu-btn::after,
  .header-nav .wl-commu.open .wl-commu-btn::after {
    width: calc(100% - 24px);   /* s'arrête avant les bords (padding 14px) */
  }
  /* Pas de soulignement sur le lien ACTIF (déjà en rouge) : ce serait redondant. */
  .header-nav > a.active::after { width: 0 !important; }
  /* L'icône du lien glisse légèrement avec le texte au survol. */
  .header-nav > a:hover .nav-ic,
  .header-nav .wl-cmenu-btn:hover .nav-ic,
  .header-nav .wl-commu-btn:hover .nav-ic { transition: transform .2s ease; }
}

/* Search */
.header-search {
  flex: 1;
  max-width: 340px;
  margin-left: auto;
  position: relative;
}
.header-search input {
  width: 100%;
  background: rgba(24,24,30,0.06);
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 8px 40px 8px 16px;
  color: var(--white);
  font-size: 13px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.header-search input::placeholder { color: rgba(24,24,30,0.422); }
.header-search input:focus {
  border-color: var(--red);
  background: rgba(24,24,30,0.09);
}
.header-search .search-icon {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: rgba(24,24,30,0.478);
  pointer-events: none;
}

/* Right actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* Ordre d'affichage : loupe, cloche, messagerie, PUBLIER, puis le bloc utilisateur.
   Le bouton « Publier » est ainsi placé juste à gauche de « Vous » (ordre voulu),
   sans déplacer le HTML (les autres éléments gardent leur ordre DOM = order:0). */
.header-actions .wl-publish { order: 10; }
.header-actions .wl-user,
.header-actions .btn-login,
.header-actions .btn-register { order: 20; }
/* Bouton messagerie (icône seule) — header sombre */
.wl-msg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 9px;
  color: rgba(24,24,30,0.982);
  background: transparent;
  border: 1px solid rgba(24,24,30,0.198);
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.wl-msg-btn:hover {
  background: rgba(24,24,30,0.08);
  color: #17171b;
  border-color: rgba(24,24,30,0.366);
}
.wl-msg-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red, #2F9E11);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
/* Bouton cloche notifications (composant WL partagé) — header sombre */
.lkh-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 9px;
  color: rgba(24,24,30,0.982);
  background: transparent;
  border: 1px solid rgba(24,24,30,0.198);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
  font-size: 16px;
}
.lkh-action-btn:hover {
  background: rgba(24,24,30,0.08);
  color: #17171b;
  border-color: rgba(24,24,30,0.366);
}
.lkh-action-btn .lkh-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red, #2F9E11);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
/* CTA upload — rectangulaire, inversion au survol (charte) */
.btn-upload {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 4px;
  padding: 7px 18px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-upload:hover { background: #fff; color: var(--red); border-color: var(--red); }

.btn-notif {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,24,30,0.06);
  border-radius: 50%;
  border: none;
  color: var(--white);
  cursor: pointer;
  transition: background .2s;
}
.btn-notif:hover { background: rgba(24,24,30,0.12); }
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--red);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.btn-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mid);
  border: 2px solid var(--red);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Hamburger (mobile) */
.btn-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.btn-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all .3s;
}

/* =============================================
   HERO / HALO
   ============================================= */
.hero {
  position: relative;
  height: 560px;                /* hauteur de bannière */
  margin: 113px auto 0;         /* header 2 lignes (64px + 48px + 1px liseré) : hero collé sous la nav ; centré horizontalement */
  max-width: 1400px;            /* le hero ne dépasse pas la largeur du contenu du site */
  display: flex;
  align-items: center;          /* contenu centré verticalement (respire en haut et en bas) */
  padding: 40px 0;
  overflow: hidden;
}
@media (min-width: 1448px) {
  /* Écran large : le hero atteint sa largeur max (1400px) et se détache des bords
     → coins arrondis pour l'intégrer comme une carte. */
  .hero { border-radius: 9px; }
  /* En mode overlay (header transparent par-dessus), le hero monte sous le header
     ET reste pleine largeur : on le re-détache des bords pour que l'arrondi se voie,
     tout en gardant le contenu calé sous le header. */
  .site-header.is-overlay ~ .hero {
    max-width: 1400px;
    margin-left: auto; margin-right: auto;
    border-radius: 9px;
  }
}
@media (max-width: 1448px) {
  /* Marge latérale pour que le hero ne colle pas aux bords sous 1400px + gouttières */
  .hero { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 960px) {
  /* En mobile la 2e ligne de nav est masquée → header = 64px (ligne 1 seule) */
  .hero { margin-top: 64px; height: 440px; margin-left: 16px; margin-right: 16px; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--black);
}
/* Hero vidéo : l'image poster est posée en background (inline, via index.php) et
   reste visible IMMÉDIATEMENT pendant que la vidéo charge → plus de fond noir au
   retour sur l'accueil. La vidéo apparaît en fondu par-dessus (.is-playing). */
.hero-bg-video {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--black);
}
/* Vidéo lancée : on retire le poster en background (sinon il transparaît à travers
   la vidéo opacity:.85). Transition pour un passage doux poster → vidéo. */
.hero-bg-video.video-ready {
  background-image: none !important;
  transition: background-image .3s ease;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;   /* garde le haut de l'image visible (ne coupe jamais par le haut) */
  opacity: .85;
}
/* Vidéo de fond (choisie dans l'admin) : même cadrage et même voile que l'image.
   object-position: center top → sur un écran large, le « cover » zoome et déborde
   en hauteur ; on ancre en haut pour ne JAMAIS couper le haut de l'image (visages). */
.hero-bg .hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Fondu d'apparition : la vidéo démarre invisible (le poster reste visible
     dessous) puis apparaît en douceur quand la lecture commence (classe .is-playing
     posée par le script au 1er « playing »). */
  opacity: 0;
  transition: opacity .6s ease;
  display: block;
}
.hero-bg .hero-video.is-playing { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-video { transition: none; }
}
/* Gradient overlay — assez léger pour laisser voir l'image, assez sombre pour la lisibilité du texte à gauche */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dégradé gauche→droite pour la lisibilité du texte ; léger voile en bas
     seulement (pas de grande zone sombre qui crée un vide). */
  background:
    linear-gradient(to right, rgba(244,244,246,0.92) 0%, rgba(244,244,246,0.5) 45%, rgba(244,244,246,0.05) 100%),
    linear-gradient(to top, rgba(244,244,246,0.5) 0%, transparent 18%);
}

/* Red accent halo */
.hero-halo {
  position: absolute;
  bottom: -200px; left: -150px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(47,158,17,0.18) 0%, transparent 65%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(47,158,17,0.15);
  border: 1px solid rgba(47,158,17,0.35);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.5); }
}

.hero-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 700px;
  margin-bottom: 20px;
}
.hero-title .accent { color: var(--red); }

.hero-desc {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(255,255,255,.65);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.7;
}
/* Mobile : description du hero limitée à 2 lignes */
@media (max-width: 640px) {
  .hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 24px;
  }
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* CTA primaire — rectangulaire, inversion au survol (charte) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 4px;
  border: 1.5px solid var(--red);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  letter-spacing: .02em;
}
.btn-primary:hover { background: #fff; color: var(--red); border-color: var(--red); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 4px;
  border: 1.5px solid rgba(24,24,30,0.31);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.btn-secondary:hover {
  border-color: rgba(24,24,30,0.702);
  background: rgba(24,24,30,0.05);
}

/* Hero stats */
.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero-stat-value {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}
.hero-stat-value span { color: var(--red); }
.hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}

/* =============================================
   SECTION COMMON
   ============================================= */
.section {
  padding: 40px 0;
}
.section-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 16px;
}
/* Le titre pousse le reste (« Tout voir » + « Gérer ») vers la DROITE,
   au lieu de les répartir avec space-between (qui centrait « Tout voir »). */
.section-title-group { margin-right: auto; }
.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.section-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.section-title .dot { color: var(--red); }

/* Mobile : le titre de section prend toute la largeur, les actions passent dessous
   (sinon « À ne pas manquer » s'écrase et casse sur 2 lignes à côté de Gérer) */
@media (max-width: 640px) {
  .section-header {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12px;
    margin-bottom: 20px;
  }
  .section-title-group {
    flex: 1 0 100%;
    margin-right: 0;
  }
  .section-title {
    font-size: 24px;
    line-height: 1.15;
    text-wrap: balance;
  }
  .section-link { margin-left: auto; }
}

.section-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(24,24,30,0.59);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color .2s;
}
.section-link:hover { color: var(--red); }
.section-link svg { transition: transform .2s; }
.section-link:hover svg { transform: translateX(3px); }

/* Divider */
.section + .section { border-top: 1px solid rgba(24,24,30,0.075); }

/* =============================================
   GRID CARDS
   ============================================= */

/* --- Nouveautés : grille principale ---- */
.grid-news {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Page « Contenu » (contenu.html) : 3 par ligne sur grand écran, pas 4.
   Les paliers 1200/960/640 (3/2/1) restent gérés plus bas par les media queries. */
@media (min-width: 1201px) {
  .ct-wrap .grid-news { grid-template-columns: repeat(3, 1fr); }
}

/* --- Vidéos à la une : hero + side ---- */
.grid-video {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
}
.video-main {}
.video-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Audio : liste horizontale ---- */
.grid-audio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* --- À découvrir : 2+2 ---- */
.grid-discover {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* =============================================
   CARD BASE
   ============================================= */
.card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--grey);
  transition: transform .25s, box-shadow .25s;
}
.card-cover-link { display: block; position: relative; color: inherit; text-decoration: none; }
.card-like-badge { position: absolute; bottom: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 100px; backdrop-filter: blur(2px); pointer-events: none; }
.card-menu-btn { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0; transition: opacity .15s, background .15s; backdrop-filter: blur(2px); }
.card:hover .card-menu-btn, .card-menu-btn:focus { opacity: 1; }
.card-menu-btn:hover { background: rgba(0,0,0,.8); }
@media (hover: none) { .card-menu-btn { opacity: 1; } }
.card-like-badge i { color: var(--red, #2F9E11); font-size: 10px; }
.card-cover-link .card-overlay { pointer-events: none; }
.card-body .card-title { color: inherit; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body .card-title:hover { color: var(--red); }
.card-meta a.card-author-ic { color: rgba(24,24,30,0.478); text-decoration: none; }
.card-meta a.card-author-ic:hover { color: var(--red); }
a.card-team { text-decoration: none; }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.card:hover .card-overlay { opacity: 1; }
.card:hover .card-img > img:not(.card-img-bg) { transform: scale(1.05); }

.card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--mid);
  position: relative;
}
.card-img.portrait { aspect-ratio: 3/4; }
.card-img.square   { aspect-ratio: 1/1; }
.card-img > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

/* Photo : image entière (contain) sur fond flouté de la même image */
.card-img-photo { background: #000; }
.card-img-photo .card-img-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(.7);
  transform: scale(1.15);
  transition: none;
}
.card-img-photo .card-img-fg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.card:hover .card-img-photo .card-img-fg { transform: scale(1.05); }

/* Play overlay */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.play-btn {
  width: 54px; height: 54px;
  background: var(--red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(47,158,17,0.5);
  transition: transform .2s;
}
.card:hover .play-btn { transform: scale(1.1); }
.play-btn svg { margin-left: 3px; }

/* Overlay photo : loupe/agrandir (pas de play) */
.card-overlay-photo { background: rgba(0,0,0,.32); }
.zoom-btn {
  width: 48px; height: 48px;
  background: rgba(24,24,30,0.14);
  border: 1.5px solid rgba(24,24,30,0.814);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  transition: transform .2s, background .2s;
}
.card:hover .zoom-btn { transform: scale(1.08); background: rgba(24,24,30,0.22); }

/* ===== Section « À voir » : affiches de film (swipe horizontal portrait) ===== */
.grid-poster {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.grid-poster::-webkit-scrollbar { display: none; }
/* Chaque affiche occupe une largeur fixe (≈ 5 par ligne sur grand écran) */
.grid-poster > .card-poster {
  flex: 0 0 196px;
  scroll-snap-align: start;
}
/* Grand écran : affiches plus grandes (flèches recentrées sur la hauteur de l'affiche). */
@media (min-width: 1280px) {
  .grid-poster { gap: 22px; }
  .grid-poster > .card-poster { flex-basis: 244px; }
  .section .hc-carousel:has(.grid-poster) .hc-arrow { top: 165px; }
}
@media (min-width: 1600px) {
  .grid-poster > .card-poster { flex-basis: 272px; }
  .section .hc-carousel:has(.grid-poster) .hc-arrow { top: 185px; }
}
@media (max-width: 1100px) { .grid-poster > .card-poster { flex-basis: 186px; } }
@media (max-width: 760px)  { .grid-poster { gap: 12px; } .grid-poster > .card-poster { flex-basis: 172px; } }
/* Mobile : 1 affiche entière + un aperçu PLUS LARGE de la 2e (≈ 56vw). */
@media (max-width: 520px)  { .grid-poster > .card-poster { flex-basis: calc(56vw - 14px); } }

.card-poster {
  /* Flex item de .grid-poster : on force l'empilement vertical (affiche puis texte)
     et min-width:0 pour que le texte ne pousse pas la carte en largeur. */
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: background .18s, border-color .18s, transform .18s;
}
.card-poster:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-2px);
}
body.pf-light .card-poster { background: #f6f7f9; border-color: #e7ebef; }
body.pf-light .card-poster:hover { background: #eef1f4; border-color: #dbe0e6; }
.poster-img {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 13px 13px 0 0;   /* épouse le haut de la carte, bas droit (texte en dessous) */
  overflow: hidden;
  background: var(--mid);
}
.poster-img img { transition: transform .4s ease; }
/* Affiche entière (contain) sur fond flouté de la même affiche → aucun rognage */
.poster-img .poster-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(16px) brightness(.6);
  transform: scale(1.15);
  transition: none;
}
.poster-img .poster-fg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.card-poster:hover .poster-img .poster-fg { transform: scale(1.04); }
.poster-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; opacity: .5;
}
.poster-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
}
.card-poster:hover .poster-overlay { opacity: 1; }
.poster-overlay .play-btn { width: 44px; height: 44px; }
.poster-body { padding: 12px 13px 14px; min-width: 0; }
.poster-title {
  font-size: 14.5px; font-weight: 700; color: #fff;
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body.pf-light .poster-title { color: #13151a; }
.poster-meta {
  margin-top: 5px;
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.poster-type { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.poster-type-link { cursor: pointer; }
.poster-type-link:hover { text-decoration: underline; }
.poster-sep { opacity: .6; }
/* Année · durée (ligne grise sous le type) */
.poster-sub { margin-top: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* « Réalisé par … » */
.poster-rea { margin-top: 3px; font-size: 12px; color: var(--muted);
  overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-rea-link { color: inherit; text-decoration: none; cursor: pointer; }
.poster-rea-link:hover { color: var(--red); text-decoration: underline; }

/* Cards vides (placeholder) pour combler la ligne tant qu'il manque du contenu */
.poster-ghost { pointer-events: none; }
.poster-img--ghost {
  border: 2px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center;
}
.poster-ghost-icon { font-size: 30px; opacity: .14; filter: grayscale(1); }
.poster-ghost-line {
  height: 11px; width: 60%; border-radius: 4px;
  background: rgba(255,255,255,.06); margin-top: 2px;
}
/* Thème clair : ghosts adaptés au fond blanc (section « À voir ») */
body.pf-light .poster-img--ghost { border-color: #e2e6ea; background: #f5f7f9; }
body.pf-light .poster-ghost-icon { opacity: .25; }
body.pf-light .poster-ghost-line { background: #e7ebef; }

/* ===== Section « Profils » : cartes membres mis en avant ===== */
.grid-profile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .grid-profile { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .grid-profile { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px) { .grid-profile { grid-template-columns: 1fr; } }
/* Section « Talents » de l'accueil : 5 profils par ligne (sélection admin
   illimitée → la grille passe à la ligne). */
#profils .grid-profile { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { #profils .grid-profile { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { #profils .grid-profile { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { #profils .grid-profile { grid-template-columns: repeat(2, 1fr); } }

.card-profile {
  position: relative;
  background: var(--grey);
  border-radius: 16px;
  padding: 0 20px 22px;
  text-align: center;
  overflow: hidden;
  /* Colonne verticale : le corps grandit, le bouton reste collé en bas → tous
     les boutons sont alignés même si certains membres n'ont pas de discipline. */
  display: flex;
  flex-direction: column;
}
.cp-cover {
  height: 90px;
  margin: 0 -20px 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Talent SANS image de couverture : fond dégradé sombre élégant + cercles
   décoratifs discrets (au lieu d'un rectangle noir vide ou d'un rouge trop vif).
   Teinte anthracite bleutée avec une pointe d'accent très légère. */
.cp-cover.cp-cover-empty {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ebebed 0%, #f2f2f4 60%, #f4f4f6 100%);
}
/* Halo d'accent très subtil en haut à droite (pointe de couleur, pas un aplat). */
.cp-cover.cp-cover-empty::after {
  content: ''; position: absolute; top: -40px; right: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,158,17,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.cp-cover-empty .cp-cover-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.cp-cover-empty .cp-cc1 { top: -34px; right: -24px; width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.1); }
.cp-cover-empty .cp-cc2 { top: 12px;  right: 24px;  width: 60px;  height: 60px;  border: 1px solid rgba(255,255,255,.07); }
.cp-cover-empty .cp-cc3 { bottom: -28px; left: -20px; width: 90px;  height: 90px;  border: 1px solid rgba(255,255,255,.05); }
.cp-link { display: block; margin-top: -42px; position: relative; z-index: 2; }
.cp-avatar {
  width: 84px; height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mid);
  border: 4px solid var(--grey);
  display: flex; align-items: center; justify-content: center;
}
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-av-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: rgba(24,24,30,0.59);
}
.cp-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  /* Hauteur naturelle (pas flex:1) : avec les espacements fixes et la hauteur
     réservée de .cp-role, les cartes gardent la même structure sans grand vide
     entre les stats et le bouton. */
}
/* Le bouton est poussé en bas de la carte (niveau commun à toutes les cartes),
   centré et à sa largeur naturelle (le flex-column l'étirait sinon en pleine
   largeur). min-height force l'air au-dessus quand la carte est courte. */
.cp-body .cp-btn { margin-top: 14px; align-self: stretch; width: 100%; box-sizing: border-box; text-align: center; }
/* Espacements : le nom seul garde un écart mini avec le bouton ; mais quand le
   rôle suit le nom, on COLLE le rôle sous le nom (petit écart) et c'est le rôle
   qui porte la marge basse. margin-top:auto aligne tous les boutons en bas. */
.cp-name { margin-bottom: 16px; }
.cp-name:has(+ .cp-role) { margin-bottom: 4px; }   /* rôle présent → rôle juste sous le nom */
.cp-role { margin-top: 0; margin-bottom: 0; }
.cp-name {
  display: block;
  font-size: 17px; font-weight: 700; color: #17171b;
  text-decoration: none;
  line-height: 1.25;
  /* Nom sur UNE seule ligne, tronqué par « … » si trop long. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-name:hover { color: #17171b; text-decoration: underline; }
.cp-pubs {
  margin-top: 6px; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--red);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.cp-pubs svg { opacity: .85; }
.cp-role {
  margin-top: 6px;
  font-size: 12.5px; font-weight: 500; color: #828286;   /* plus discret que le nom (blanc) */
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  /* Hauteur réservée constante : la ligne métier/statut occupe la même place
     qu'elle soit remplie ou vide → stats et bouton alignés entre les cartes. */
  min-height: 18px;
}
.cp-role.cp-role-empty { min-height: 18px; }   /* placeholder invisible, même hauteur */
.cp-role .cp-role-link { color: #6a6a6e; }
.cp-role .cp-sep { color: rgba(24,24,30,0.276); }
.cp-role .cp-status { color: #828286; }
/* Statut en badge pilule (ex. « Alumni EICAR »), sous le métier. */
.cp-statusline { display: flex; justify-content: center; margin-top: 7px; margin-bottom: 4px; min-height: 24px; }
.cp-statusline.cp-statusline-empty { min-height: 24px; margin-bottom: 4px; }   /* même hauteur si pas de statut */
.cp-status-badge {
  display: inline-flex; align-items: center;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(47,158,17,.12);
  color: var(--red); font-size: 11.5px; font-weight: 700;
  text-decoration: none; letter-spacing: .01em;
  transition: background .15s;
}
a.cp-status-badge:hover { background: rgba(47,158,17,.2); }
.cp-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 22px;
  border-radius: 999px;
  background: rgba(24,24,30,0.08);
  border: 1px solid rgba(24,24,30,0.164);
  color: #17171b; font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.cp-btn:hover { background: rgba(24,24,30,0.15); border-color: rgba(24,24,30,0.31); color: #17171b; }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.cp-btn-arrow { color: var(--red); transition: transform .18s; }
.cp-btn:hover .cp-btn-arrow { transform: translateX(3px); }

/* Pastille de présence (vert) sur l'avatar + ligne de compteurs (créations /
   abonnés). La pastille est posée dans .cp-link (et non dans .cp-avatar qui a
   overflow:hidden et la couperait). Avatar global = 84px → rayon 42px ; on place
   la pastille à ~45° en bas-droite, au bord du cercle. */
.cp-link { position: relative; }
.cp-avatar { position: relative; }
.cp-presence {
  position: absolute; z-index: 3;
  left: calc(50% + 27px); bottom: 6px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #d0d0d2; border: 2.5px solid var(--grey);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
/* Couleurs natives Lykhubs (includes/modal_edit_status.php). */
.cp-presence-available { background: #31a24c; }   /* En ligne  (vert)   */
.cp-presence-busy      { background: #2F9E11; }   /* Occupé    (rouge)  */
.cp-presence-away      { background: #f0ad4e; }   /* Absent    (orange) */
.cp-presence-offline   { background: #95a5a6; }   /* Hors ligne(gris)   */
.cp-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: nowrap;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(24,24,30,0.12);   /* séparation au-dessus des stats */
  font-size: 12.5px; font-weight: 600; color: #5b5b5f;
}
.cp-meta .cp-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cp-meta .cp-stat svg { opacity: .7; flex: none; }
/* Séparateur « · » entre les deux compteurs (garantit l'espace même si le
   flex-wrap les repasse sur une ligne). */
.cp-meta .cp-stat + .cp-stat::before {
  content: '·'; color: rgba(24,24,30,0.344); margin-right: 14px; font-weight: 700;
}

/* Card body */
.card-body {
  padding: 14px 16px 16px;
}
.card-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
/* Badge catégorie cliquable (filtre par catégorie EICAR) */
a.card-type-link { display: inline-block; text-decoration: none; transition: opacity .15s; }
a.card-type-link:hover { text-decoration: underline; opacity: .85; }
.card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #424246;   /* plus lisible que l'ancien gris translucide sur fond sombre */
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  color: rgba(24,24,30,0.478);
}
/* Spans génériques du meta (ex. stats icône+valeur) en flex. On EXCLUT les spans
   de l'auteur (nom / rôle / conteneur txt) qui doivent rester des blocs texte
   simples alignés à gauche, sinon le métier est décalé sous le nom. */
.card-meta span:not(.card-author-nm):not(.card-author-role):not(.card-author-txt):not(.card-author-meta-sep) { display: flex; align-items: center; gap: 4px; }
.card-meta .card-author-ic { display: inline-flex; align-items: center; gap: 5px; }
.card-meta .card-author-ic svg { color: var(--red); flex-shrink: 0; }
/* Avatar de l'auteur : petit rond à la place de l'icône silhouette. */
.card-meta .card-author-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ===== Cartes « maquette » : hashtags, auteur enrichi, durée avec horloge ===== */
/* Hashtags en puces sous la description. */
.card-hashtags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px; }
.card-hashtag { font-size: 12px; font-weight: 500; color: rgba(24,24,30,0.702); text-decoration: none;
  padding: 4px 11px; border-radius: 100px; background: rgba(24,24,30,0.05); border: 1px solid rgba(24,24,30,0.108);
  transition: background .15s, color .15s; white-space: nowrap; }
.card-hashtag:hover { background: rgba(24,24,30,0.1); color: #17171b; }
body.pf-light .card-hashtag { background: #f2f4f6; border-color: #e4e8ec; color: #5a6470; }
body.pf-light .card-hashtag:hover { background: #e9edf1; color: #1a1d21; }
/* Ligne auteur : avatar + (nom / métier) à gauche, action à droite. */
.card-meta { justify-content: space-between; margin-top: 12px; }
.card-meta .card-author-ic { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.card-meta .card-author-av { width: 36px; height: 36px; }
.card-author-avph { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; background: #ebebed; color: #17171b; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.card-author-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; line-height: 1.2; text-align: left; }
.card-author-nm { font-size: 13.5px; font-weight: 700; color: #17171b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pf-light .card-author-nm { color: #1a1d21; }
.card-meta a.card-author-ic:hover .card-author-nm { color: var(--red); }
.card-author-role { font-size: 12px; color: rgba(24,24,30,0.59); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pf-light .card-author-role { color: #7a8591; }
/* Nom de l'auteur cliquable (lien profil) + métier/communauté cliquables. */
.card-author-nm.card-author-namelink { text-decoration: none; color: #17171b; }
body.pf-light .card-author-nm.card-author-namelink { color: #1a1d21; }
.card-author-nm.card-author-namelink:hover { color: var(--red); }
/* Métier · communauté : TOUJOURS sur une seule ligne. */
.card-author-role { display: block; white-space: nowrap; }
.card-author-role .card-author-metalink,
.card-author-role .card-author-meta-sep { display: inline; white-space: nowrap; }
.card-author-metalink { color: inherit; text-decoration: none; }
.card-author-metalink:hover { color: var(--red); text-decoration: underline; }
.card-author-meta-sep { color: rgba(24,24,30,0.422); }
body.pf-light .card-author-meta-sep { color: #aab3bc; }
.card-meta .card-meta-right { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; }
/* Bouton « Enregistrer » (icône seule) sur la vignette. */
.card-save { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: rgba(24,24,30,0.646);
  font-size: 16px; line-height: 1; transition: color .15s, background .15s; }
.card-save:hover { color: #17171b; background: rgba(24,24,30,0.08); }
.card-save.on { color: var(--red); }
body.pf-light .card-save { color: #7a8591; }
body.pf-light .card-save:hover { color: #1a1d21; background: #eef1f4; }
body.pf-light .card-save.on { color: var(--red); }
/* Durée avec icône horloge. */
.card-duration .card-dur-ic { margin-right: 4px; vertical-align: -2px; opacity: .85; }
/* Badge de confidentialité : sous l'auteur, en boîte (pas une puce arrondie). */
.card-vis-row { margin-top: 8px; }
.card-vis { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; background: rgba(24,24,30,0.06);
  border: 1px solid rgba(24,24,30,0.142); color: rgba(24,24,30,0.926); }
.card-vis i { font-size: 11px; }
.card-vis .card-vis-chev { margin-left: 2px; opacity: .55; }
.card-vis-private { background: rgba(47,158,17,.12); border-color: rgba(47,158,17,.25); color: #ff8a9b; }
.card-vis-link, .card-vis-link_pwd { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); color: #f5b445; }
button.card-vis-edit { cursor: pointer; font-family: inherit; }
button.card-vis-edit:hover { background: rgba(24,24,30,0.1); }
body.pf-light .card-vis { background: #f4f6f8; border-color: #e0e5ea; color: #3a4149; }
body.pf-light .card-vis-private { background: #fde8ec; border-color: #f5c2ce; color: #c0392b; }
body.pf-light .card-vis-link, body.pf-light .card-vis-link_pwd { background: #fef3e2; border-color: #f6dcb0; color: #b5751a; }
body.pf-light button.card-vis-edit:hover { background: #eaeef2; }

/* Titre de carte : 2 lignes maximum, puis « … ». */
.card-audio .card-title, .card .card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; }
/* Thème clair — cards de contenu */
body.pf-light .card { background: #fff; border: 1px solid #e9edf1; box-shadow: 0 6px 24px rgba(20,30,45,.06); }
body.pf-light .card-title { color: #1a1d21; }
body.pf-light .card-desc { color: #5a6470; }
body.pf-light .card-meta { color: #8a929b; }
body.pf-light .card-meta a.card-author-ic { color: #8a929b; }
body.pf-light .card-img { background: #eef1f4; }
.card-team {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1.4; color: var(--red);
  background: none; border: none; padding: 0; cursor: pointer; transition: color .15s;
}
.card-team svg { flex-shrink: 0; }
.card-team:hover { color: #17171b; }
/* Séparateur vertical entre « Équipe » et l'icône Enregistrer. */
.card-meta-divider { width: 1px; height: 18px; background: rgba(24,24,30,0.15); flex-shrink: 0; }
body.pf-light .card-meta-divider { background: #d2d8de; }
.card-meta .card-meta-sep { color: rgba(24,24,30,0.478); }
.card-meta a { color: rgba(24,24,30,0.702); transition: color .15s; }
.card-meta a:hover { color: var(--red); }

/* --- Crédits équipe sur les cartes œuvres (esprit IMDb) --- */
.card-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 2px 0 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(24,24,30,0.59);
}
.card-credits .credit-role { color: rgba(24,24,30,0.478); }
.card-credits a {
  color: rgba(24,24,30,0.904);
  border-bottom: 1px dotted rgba(24,24,30,0.31);
  transition: color .15s, border-color .15s;
}
.card-credits a:hover { color: var(--red); border-bottom-color: var(--red); }

/* Indice "voir l'équipe" au survol de la carte */
.card-team-hint {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.card:hover .card-team-hint { opacity: 1; transform: translateY(0); }

/* Card duration badge */
.card-duration {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 100px;
  display: inline-flex; align-items: center;
}
/* Badge catégorie EICAR en surimpression (haut-gauche) : rouge SEMI-TRANSPARENT (effet verre). */
.card-cat-ov {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(47,158,17,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 13px; border-radius: 100px; letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
/* Ligne de séparation avant la ligne auteur. */
.card-sep { height: 1px; background: rgba(24,24,30,0.08); margin: 14px 0 0; }
body.pf-light .card-sep { background: #e4e8ec; }

/* Menu « ··· » des vignettes vidéo (haut-droite). */
.card-vmenu { position: absolute; top: 12px; right: 12px; z-index: 4; }
.card-vmenu-btn { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s; }
.card-vmenu-btn:hover { background: rgba(0,0,0,.72); }
.card-vmenu-pop { position: absolute; top: 40px; right: 0; min-width: 210px; width: max-content; max-width: 280px; padding: 6px;
  background: #f3f3f5; border: 1px solid rgba(24,24,30,0.142); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.card-vmenu-pop[hidden] { display: none; }
.cvm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: none;
  background: none; border-radius: 8px; color: rgba(24,24,30,0.982); font-family: inherit; font-size: 13.5px;
  font-weight: 500; cursor: pointer; text-align: left; text-decoration: none; white-space: nowrap; transition: background .12s; }
.cvm-item i { flex-shrink: 0; }
.cvm-item:hover { background: rgba(24,24,30,0.07); color: #17171b; }
.cvm-item i { width: 16px; text-align: center; color: rgba(24,24,30,0.646); font-size: 13px; }
.cvm-item:hover i { color: var(--red); }
.cvm-save.cvm-item i.fas { color: var(--red); }
body.pf-light .card-vmenu-pop { background: #fff; border-color: #e4e8ec; }
body.pf-light .cvm-item { color: #1a1d21; }
body.pf-light .cvm-item:hover { background: #f2f4f6; }
body.pf-light .cvm-item i { color: #7a8591; }
/* Séparateur + action destructive « Supprimer » dans le menu ··· */
.cvm-sep { height: 1px; margin: 5px 4px; background: rgba(24,24,30,0.08); }
body.pf-light .cvm-sep { background: #e4e8ec; }
.cvm-del, .cvm-del i { color: #e5484d !important; }
.cvm-del:hover { background: rgba(229,72,77,.12) !important; color: #9BFF3F !important; }
.cvm-del:hover i { color: #9BFF3F !important; }
/* Badge série : nombre de contenus regroupés */
.card-series {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  z-index: 2;
}
.card-series svg { opacity: .9; }

/* Card NEW badge */
.card-badge-new {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* =============================================
   VIDEO MAIN (large)
   ============================================= */
.card-video-main .card-img { aspect-ratio: 16/9; }
.card-video-main .card-body { padding: 18px 20px 20px; }
.card-video-main .card-title { font-size: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; }
.card-video-main .card-type { font-size: 11px; }

/* =============================================
   VIDEO SIDE (small horizontal)
   ============================================= */
.card-video-side {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--grey);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.card-video-side:hover { background: var(--mid); transform: translateX(4px); }
.card-video-side .thumb {
  position: relative;
  width: 180px;
  height: 101px;   /* 16/9, un peu plus grandes que les 150x88 d'avant */
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mid);
}
.card-video-side .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
/* Durée en badge, bas-gauche de la vignette */
.card-video-side .thumb-duration {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  letter-spacing: .02em;
  z-index: 2;
}
.card-video-side:hover .thumb img { transform: scale(1.06); }
.card-video-side .info { flex: 1; min-width: 0; }
.card-video-side .info .card-title { font-size: 13px; }
.card-video-side .info .card-meta { font-size: 11px; margin-top: 4px; }
.card-video-side .num {
  font-size: 22px;
  font-weight: 900;
  color: rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* =============================================
   AUDIO CARD (horizontal)
   ============================================= */
.card-audio {
  background: var(--grey);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  transition: background .2s, transform .2s;
}
.card-audio .play-circle { cursor: pointer; padding: 0; font: inherit; }
.card-audio:hover { background: var(--mid); transform: translateY(-2px); }
.card-audio .cover {
  display: block;
  width: 70px; height: 70px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mid);
}
.card-audio .cover img { width: 100%; height: 100%; object-fit: cover; }
.card-audio .info { flex: 1; min-width: 0; }
.card-audio .info .card-type { margin-bottom: 3px; }
/* Skeleton loader (placeholder animé) quand aucun contenu audio n'est publié. */
.card-audio-skel { pointer-events: none; }
.card-audio-skel .cover.skel-box { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; }
.card-audio-skel .info { display: flex; flex-direction: column; gap: 8px; }
/* Skeleton grille (photos / vidéos / news) — carte verticale. */
.card-skel { pointer-events: none; }
.card-skel .thumb.skel-box { width: 100%; aspect-ratio: 16/10; border-radius: 10px; }
.card-skel .card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.skel-box, .skel-line { position: relative; overflow: hidden; background: rgba(24,24,30,0.06); border-radius: 6px; }
.skel-line { height: 11px; }
.skel-line-sm { width: 38%; }
.skel-line-lg { width: 82%; height: 14px; }
.skel-line-md { width: 55%; }
.skel-box::after, .skel-line::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  animation: skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
body.pf-light .skel-box, body.pf-light .skel-line { background: rgba(20,30,45,.07); }
body.pf-light .skel-box::after, body.pf-light .skel-line::after { background: linear-gradient(90deg, transparent, rgba(20,30,45,.06), transparent); }
.card-audio .info .card-title { font-size: 15px; -webkit-line-clamp: 1; margin-bottom: 4px; }
.card-audio .info .card-meta { font-size: 12px; }
.card-audio .play-circle {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(47,158,17,0.15);
  border: 1.5px solid rgba(47,158,17,0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .2s;
  color: var(--red);
}
.card-audio:hover .play-circle {
  background: var(--red);
  color: #fff;
  transform: scale(1.1);
}

/* Waveform placeholder */
.waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  margin-top: 8px;
}
.waveform span {
  display: block;
  width: 3px;
  background: rgba(47,158,17,0.4);
  border-radius: 2px;
  animation: wave 1.4s ease-in-out infinite;
}
.waveform span:nth-child(2n) { animation-delay: .2s; }
.waveform span:nth-child(3n) { animation-delay: .4s; }
@keyframes wave {
  0%,100% { height: 4px; }
  50%      { height: 20px; }
}
.card-audio:not(:hover) .waveform span { animation: none; height: 8px; background: rgba(24,24,30,0.12); }

/* =============================================
   DISCOVER CARD (grande image + overlay text)
   ============================================= */
.card-discover {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.card-discover .card-img { aspect-ratio: unset; height: 240px; }
.card-discover:hover .card-img img { transform: scale(1.06); }
.card-discover .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.card-discover .card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(244,244,246,0.95) 0%, rgba(244,244,246,0.3) 60%, transparent 100%);
}
.card-discover .card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
}
.card-discover .card-content .card-type { margin-bottom: 6px; }
.card-discover .card-content .card-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.25;
}
.card-discover .card-content .card-desc {
  font-size: 13px;
  color: #d2d2d2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}
/* CTA petit — rectangulaire (charte) */
.card-discover .card-content .btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 4px;
  border: 1.5px solid var(--red);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.card-discover .card-content .btn-sm:hover { background: #fff; color: var(--red); border-color: var(--red); }

/* Coup de coeur badge */
.heart-badge {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: var(--red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(47,158,17,0.5);
}

/* =============================================
   SECTION — À DÉCOUVRIR : subtitle
   ============================================= */
.discover-header-desc {
  font-size: 14px;
  color: rgba(255,255,255,.4);
  margin-top: 6px;
}

/* =============================================
   HEADER — CONNEXION / INSCRIPTION
   ============================================= */
.btn-login,
.btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
  line-height: 1;
}
.btn-login svg, .btn-register svg { flex-shrink: 0; }
.btn-login {
  color: rgba(24,24,30,0.87);
  background: rgba(24,24,30,0.07);
  border: 1px solid rgba(24,24,30,0.164);
}
.btn-login:hover {
  color: var(--white);
  background: rgba(24,24,30,0.12);
}
/* CTA inscription — rectangulaire, inversion au survol (charte) */
.btn-register {
  color: #fff;
  background: var(--red);
  border: 1.5px solid var(--red);
}
.btn-register:hover { background: #fff; color: var(--red); border-color: var(--red); }

/* =============================================
   SECTION PROFILS À LA UNE
   ============================================= */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.profile-card {
  background: var(--grey);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform .25s, box-shadow .25s;
}
.profile-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.5); }

.profile-cover {
  height: 100px;
  background: var(--mid);
  overflow: hidden;
}
.profile-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.profile-card:hover .profile-cover img { transform: scale(1.06); }

.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid var(--grey);
  overflow: hidden;
  background: var(--mid);
  margin: -32px auto 0;
  position: relative;
  z-index: 1;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(24,24,30,0.366);
}

.profile-body {
  padding: 12px 16px 18px;
  text-align: center;
}
.profile-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}
.profile-role {
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 8px;
}
.profile-stats {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(24,24,30,0.478);
  margin-bottom: 14px;
}
/* CTA profil — rectangulaire (charte) */
.btn-profile {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: rgba(24,24,30,0.07);
  border: 1px solid rgba(24,24,30,0.164);
  padding: 7px 18px;
  border-radius: 4px;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-profile:hover { background: var(--red); border-color: var(--red); }

/* Lien filmographie explicite (esprit IMDb) */
.profile-filmo-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
}
.profile-filmo-link svg { transition: transform .2s; }
.profile-card:hover .profile-filmo-link svg { transform: translateX(3px); }

/* =============================================
   SCROLL TO TOP
   ============================================= */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(47,158,17,0.4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s;
  z-index: 500;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { opacity: .85; }

@media (max-width: 960px) {
  .btn-login { display: none; }
  .btn-register { display: none; }
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .profiles-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================
   FOOTER  — logo officiel + baseline
   ============================================= */
.site-footer {
  background: var(--dark);
  border-top: 1px solid rgba(24,24,30,0.097);
  padding: 56px 0 28px;
  margin-top: 16px;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(24,24,30,0.097);
}

/* Logo officiel EICAR + baseline (footer) */
.footer-brand .footer-logo-official {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-bottom: 14px;
}
.footer-brand .footer-logo-official .fl-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #17171b;
}
.footer-brand .footer-logo-official .fl-name span { color: var(--red); }
.footer-brand .footer-logo-official .fl-baseline {
  margin-top: 5px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(24,24,30,0.59);
}
.footer-brand .footer-logo-official .fl-baseline .fl-paris { color: var(--red); }

.footer-brand p {
  font-size: 13px;
  color: rgba(24,24,30,0.534);
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: 20px;
}
.footer-socials {
  display: flex;
  gap: 10px;
}
.social-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(24,24,30,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(24,24,30,0.59);
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.social-btn:hover { background: var(--red); color: #fff; }

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(24,24,30,0.366);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: 14px;
  color: rgba(24,24,30,0.646);
  transition: color .2s;
}
.footer-col ul a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: 12px;
  color: rgba(24,24,30,0.31);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  font-size: 12px;
  color: rgba(24,24,30,0.366);
  transition: color .2s;
}
.footer-bottom-links a:hover { color: var(--white); }

/* Red accent bar */
.footer-accent {
  height: 3px;
  background: linear-gradient(to right, var(--red), transparent);
  margin-bottom: 0;
}

/* =============================================
   SKELETON / PLACEHOLDER (image non chargée)
   ============================================= */
.img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--mid) 0%, #f1f1f3 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.1);
  font-size: 28px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) {
  .grid-news { grid-template-columns: repeat(3, 1fr); }
  .grid-video { grid-template-columns: 1fr 280px; }
}

@media (max-width: 960px) {
  /* Le menu mobile est géré par le drawer (#wlMobile) dans _header.php.
     La nav desktop (.header-navrow) est masquée par le CSS du header.
     Le hamburger est à GAUCHE du logo (1er enfant de .header-inner). */
  .btn-hamburger { display: flex; }
  .btn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .btn-hamburger.open span:nth-child(2) { opacity: 0; }
  .btn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .btn-hamburger span { transition: transform .25s, opacity .2s; }
  .btn-upload .btn-text { display: none; }
  .btn-upload { padding: 7px 10px; min-width: 0; }

  /* Layout mobile du header : ☰  Logo  …………  actions */
  .header-inner { gap: 12px; padding: 0 16px; }
  .header-logo { margin-right: auto; }   /* pousse les actions à droite */
  .logo-name { font-size: 22px; }        /* logo plus compact sur mobile */

  .grid-news { grid-template-columns: repeat(2, 1fr); }
  .grid-video { grid-template-columns: 1fr; }
  .video-side { display: grid; grid-template-columns: 1fr 1fr; }
  .grid-audio { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .grid-news { grid-template-columns: 1fr; }
  .grid-audio { grid-template-columns: 1fr; }
  .grid-discover { grid-template-columns: 1fr; }
  .video-side { grid-template-columns: 1fr; }
  /* Footer : 2 colonnes plutôt qu'une seule. Empilées, les 3 listes de liens
     + le bloc marque faisaient plusieurs écrans de haut. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-bottom: 26px; }
  .footer-brand { grid-column: 1 / -1; }   /* la marque garde toute la largeur */
  .footer-col h4 { margin-bottom: 8px; }
  .footer-col ul { gap: 7px; }
  .header-search { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}

/* ===== Header EICAR (déplacé depuis _header.php pour éviter le FOUC) ===== */
  /* ============ MENU MOBILE (drawer) ============ */
  .wl-mobile, .wl-mobile-overlay { display:none; }
  @media (max-width:960px){
    /* Le header redevient une seule ligne : on masque la 2e ligne et la recherche centrale */
    .site-header .header-navrow { display:none; }
    .site-header .header-tickerrow { display:none; }
    .site-header .header-inner .wl-search { display:none; }
    .btn-hamburger { display:flex; }

    .wl-mobile-overlay {
      display:block; position:fixed; inset:0; z-index:1099;
      background:rgba(0,0,0,.6); opacity:0; visibility:hidden;
      transition:opacity .25s, visibility .25s;
    }
    .wl-mobile-overlay.open { opacity:1; visibility:visible; }

    .wl-mobile {
      display:flex; flex-direction:column;
      position:fixed; top:0; right:0; bottom:0; z-index:1100;
      width:86%; max-width:360px;
      background:#f4f4f6; border-left:1px solid rgba(24,24,30,0.12);
      box-shadow:-12px 0 40px rgba(0,0,0,.5);
      transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
      overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
    .wl-mobile.open { transform:translateX(0); }
    /* Drill-down « Lykhubs » mobile : panneau qui glisse par-dessus le drawer */
    .wl-m-drill-panel { position:absolute; inset:0; z-index:5; background:#f4f4f6; display:flex; flex-direction:column; padding:16px 18px 28px; overflow-y:auto; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
    .wl-mobile.drill .wl-m-drill-panel { transform:translateX(0); }
    .wl-m-drill-back { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; font-family:inherit; font-size:16px; font-weight:800; color:var(--red); padding:6px 4px 14px; }
    .wl-m-drill-body { display:flex; flex-direction:column; gap:6px; }
  }
  .wl-mobile-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(24,24,30,0.108); }
  .wl-mobile-close { background:none; border:none; color:rgba(24,24,30,0.814); cursor:pointer; padding:6px; border-radius:8px; }
  .wl-mobile-close:hover { background:rgba(24,24,30,0.07); color:#17171b; }

  .wl-mobile-search { display:flex; align-items:center; gap:10px; margin:16px 20px 8px; padding:0 14px; height:46px; background:#fff; border-radius:10px; color:#777; }
  .wl-mobile-search input[type=text] { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:var(--font); font-size:16px; color:#1a1a1a; }

  .wl-mobile-nav { padding:8px 12px 4px; }
  .wl-m-link { display:block; padding:14px 14px; font-size:16px; font-weight:600; color:rgba(24,24,30,1); border-radius:10px; }
  .wl-m-link:hover, .wl-m-link:active { background:rgba(24,24,30,0.06); }
  .wl-m-ticker { display:block; margin:4px 20px 0; padding:11px 14px; border-radius:10px; background:rgba(47,158,17,0.12); border:1px solid rgba(47,158,17,0.3); color:#17171b; font-size:14px; line-height:1.35; }
  .wl-m-ticker strong { color:var(--red); }
  .wl-m-ticker.is-anim { display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap; }
  .wl-m-ticker.is-anim strong { flex-shrink:0; }

  .wl-m-acc-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 14px; background:none; border:none; cursor:pointer; font-family:var(--font); font-size:16px; font-weight:600; color:rgba(24,24,30,1); border-radius:10px; }
  .wl-m-acc-btn:hover { background:rgba(24,24,30,0.06); }
  .wl-m-acc-btn svg { transition:transform .25s; color:rgba(24,24,30,0.59); }
  .wl-m-acc.open .wl-m-acc-btn svg { transform:rotate(180deg); }
  .wl-m-acc-panel { display:none; padding:2px 0 8px 12px; }
  .wl-m-acc.open .wl-m-acc-panel { display:block; }
  .wl-m-acc-panel a { display:block; padding:11px 16px; font-size:15px; color:rgba(24,24,30,0.814); border-radius:8px; }
  .wl-m-acc-panel a:first-child { color:#17171b; font-weight:600; }
  .wl-m-acc-panel a:hover { background:rgba(47,158,17,0.14); color:#17171b; }

  .wl-mobile-foot { margin-top:auto; padding:16px 20px 28px; border-top:1px solid rgba(24,24,30,0.108); display:flex; flex-direction:column; gap:8px; }
  .wl-mobile-pub-title { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(24,24,30,0.366); margin-bottom:2px; }
  .wl-m-pub { display:block; padding:12px 14px; background:rgba(24,24,30,0.05); border-radius:10px; font-size:15px; font-weight:600; color:rgba(24,24,30,1); }
  .wl-m-pub:hover { background:rgba(47,158,17,0.16); color:#17171b; }
  .wl-m-foot-link { display:block; padding:12px 14px; font-size:15px; color:rgba(24,24,30,0.87); border-radius:10px; }
  .wl-m-foot-link:hover { background:rgba(24,24,30,0.06); color:#17171b; }
  .wl-m-logout { color:var(--red); font-weight:600; }
  /* Section Administrateur (menu mobile) */
  .wl-m-foot-label { padding:14px 14px 4px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7fb0ff; }
  .wl-m-admin-link { color:#7fb0ff; font-weight:600; }
  .wl-m-cta-ghost { display:block; text-align:center; padding:13px; border:1.5px solid rgba(24,24,30,0.254); border-radius:10px; color:#17171b; font-weight:600; font-size:15px; }
  .wl-m-cta-red { display:block; text-align:center; padding:13px; background:var(--red); border-radius:10px; color:#fff; font-weight:700; font-size:15px; }
  /* ---- Barre de recherche header (large, visible connecté ou non) ---- */
  .wl-search { position:relative; display:flex; align-items:stretch; flex:1; max-width:580px; min-width:280px; height:42px; margin:0 20px; background:var(--search-bg,#fff); border:1px solid var(--search-bg,#17171b); border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.25); transition:box-shadow .2s; }
  .wl-search:focus-within { box-shadow:0 0 0 3px rgba(47,158,17,0.35), 0 2px 10px rgba(0,0,0,.25); }
  .wl-search-scope { position:relative; flex-shrink:0; }
  .wl-scope-btn { display:flex; align-items:center; gap:6px; height:100%; background:var(--search-scope-bg,#f1f1f3); border:none; border-right:1px solid #313135; color:var(--search-text,#333); font-family:var(--font); font-size:14px; font-weight:600; padding:0 16px 0 20px; cursor:pointer; border-radius:999px 0 0 999px; white-space:nowrap; }
  .wl-scope-btn:hover { background:#e8e8ec; }
  .wl-scope-btn svg { color:#777; }
  .wl-scope-menu { position:absolute; left:0; top:calc(100% + 8px); min-width:160px; background:#fff; border:1px solid #313135; border-radius:10px; padding:6px; display:none; box-shadow:0 12px 30px rgba(0,0,0,.25); z-index:1002; }
  .wl-scope-menu.open { display:block; }
  .wl-scope-menu a { display:block; padding:10px 12px; border-radius:6px; font-size:14px; color:#333; font-weight:500; }
  .wl-scope-menu a:hover { background:transparent; color:var(--red); }
  .wl-scope-menu a.active { background:rgba(47,158,17,0.1); color:var(--red); }
  .wl-search-input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--search-text,#1a1a1a); font-family:var(--font); font-size:15px; padding:0 8px 0 16px; }
  .wl-search-input::placeholder { color:var(--search-ph-color,#747478); }
  .wl-search-btn { flex-shrink:0; background:transparent; border:none; color:#777; cursor:pointer; padding:0 18px; border-radius:0 999px 999px 0; transition:color .15s; }
  .wl-search-btn:hover { color:var(--red); }
  .wl-suggestions { position:absolute; left:0; right:0; top:calc(100% + 8px); list-style:none; margin:0; padding:6px; background:#fff; border:1px solid #313135; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.3); display:none; z-index:1001; max-height:440px; overflow-y:auto; }
  .wl-suggestions.show { display:block; }
  /* Liens rapides sous la barre de recherche (façon Allociné).
     Placés dans l'espace ajouté sous le champ (header-inner à 86px), fond sombre. */
  .wl-search-quicklinks { position:absolute; left:72px; top:calc(100% + 3px); display:flex; align-items:center; gap:8px; font-size:11px; white-space:nowrap; z-index:2; }
  .wl-ql-ex { color:rgba(24,24,30,0.534); font-weight:400; }
  .wl-ql-link { color:rgba(24,24,30,0.87); text-decoration:none; font-weight:400; }
  .wl-ql-link:hover { color:#17171b; text-decoration:underline; }
  .wl-ql-sep { color:rgba(24,24,30,0.366); }
  .wl-sug { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; cursor:pointer; color:#1a1a1a; text-decoration:none; }
  .wl-sug:hover, .wl-sug.active { background:#f3f3f5; }
  .wl-sug-img { width:46px; height:46px; border-radius:8px; object-fit:cover; background:#e8e8ec; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
  .wl-sug-img.round { border-radius:50%; }
  /* Fallback initiales (membre sans photo) : aux couleurs de la marque. */
  .wl-sug-img--ini { background:var(--red,#2F9E11); color:#fff; font-size:16px; font-weight:700; text-transform:uppercase; }
  .wl-sug-txt { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
  .wl-sug-title { font-size:14px; font-weight:700; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .wl-sug-meta { font-size:12px; color:#88888c; }
  /* Badges type de contenu : rouge EICAR (vidéo) / noir (photo, audio…).
     Couleurs réglables dans l'admin (Couleurs > Badges) via --badge-*. */
  .wl-sug-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--badge-text, #fff); background:var(--badge-other-bg, #f8f8fa); padding:3px 8px; border-radius:4px; flex-shrink:0; }
  .wl-sug-tag--video { background:var(--badge-video-bg, var(--red)); }
  .wl-sug-empty { padding:16px; text-align:center; color:#78787c; font-size:13px; }
  .wl-sug-list { list-style:none; margin:0; padding:0; }
  /* Case « Inclure le réseau Lykhubs » : en tête de la boîte de suggestions. */
  .wl-sug-scope { display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:4px; border-bottom:1px solid #27272b; font-size:12.5px; color:#555; cursor:pointer; user-select:none; }
  .wl-sug-scope input { width:15px; height:15px; accent-color:var(--red); cursor:pointer; flex-shrink:0; margin:0; }
  .wl-sug-scope:hover { color:#1a1a1a; }
  @media (max-width:860px){ .wl-search{ display:none; } }

  /* ===== Loupe recherche mobile + modal plein écran ===== */
  .wl-search-mobile-btn {
    display: inline-flex;      /* toujours visible : barre (desktop) ou modal (mobile) */
    align-items: center; justify-content: center;
    width: 42px; height: 42px; box-sizing: border-box;
    border-radius: 9px;
    color: rgba(24,24,30,0.982);
    background: transparent;
    border: 1px solid rgba(24,24,30,0.198);
    cursor: pointer; flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
  }
  .wl-search-mobile-btn:hover { background: rgba(24,24,30,0.08); color:#17171b; border-color: rgba(24,24,30,0.366); }

  /* Modal plein écran */
  .wl-searchm {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--search-modal-bg, #f9f9fb);
    display: none; flex-direction: column;
    padding: 0;
  }
  .wl-searchm.open { display: flex; animation: wlSearchmIn .18s ease; }
  @keyframes wlSearchmIn { from { opacity:0; } to { opacity:1; } }
  .wl-searchm-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 14px calc(14px + env(safe-area-inset-top, 0px));
    padding-top: max(14px, env(safe-area-inset-top, 14px));
    border-bottom: 1px solid rgba(24,24,30,0.12);
  }
  .wl-searchm-form { display: flex; align-items: center; gap: 6px; width: 100%; }
  .wl-searchm-input {
    flex: 1; min-width: 0; height: 46px;
    background: rgba(24,24,30,0.06);
    border: 1px solid rgba(24,24,30,0.187);
    border-radius: 12px; padding: 0 14px;
    color: #17171b; font-size: 16px; font-family: var(--font);
    outline: none;
  }
  .wl-searchm-input::placeholder { color: rgba(24,24,30,0.478); }
  .wl-searchm-input:focus { border-color: var(--red, #2F9E11); }
  .wl-searchm-go, .wl-searchm-close {
    flex-shrink: 0; width: 44px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: rgba(24,24,30,0.87);
    cursor: pointer; border-radius: 10px;
  }
  .wl-searchm-go { color: var(--red, #2F9E11); }
  .wl-searchm-close:hover, .wl-searchm-go:hover { background: rgba(24,24,30,0.06); color:#17171b; }
  .wl-searchm-quick { padding: 18px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .wl-searchm-quick-t { width:100%; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(24,24,30,0.478); margin-bottom:2px; }
  .wl-searchm-ql {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 100px;
    background: rgba(24,24,30,0.06); border: 1px solid rgba(24,24,30,0.164);
    color: rgba(24,24,30,0.982); font-size: 13.5px; text-decoration: none;
    transition: all .15s;
  }
  .wl-searchm-ql:hover { border-color: var(--red, #2F9E11); color:#17171b; }
  /* Liste de résultats live dans la modal (réutilise les .wl-sug* de la barre) */
  .wl-searchm-list { list-style:none; margin:0; padding:6px 8px; overflow-y:auto; flex:1; min-height:0; }
  .wl-searchm-list .wl-sug { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:#17171b; }
  .wl-searchm-list .wl-sug:hover { background:rgba(24,24,30,0.06); }
  .wl-searchm-list .wl-sug-img { width:42px; height:42px; border-radius:9px; object-fit:cover; flex-shrink:0; background:rgba(24,24,30,0.08); display:flex; align-items:center; justify-content:center; font-size:18px; }
  .wl-searchm-list .wl-sug-img.round { border-radius:50%; }
  .wl-searchm-list .wl-sug-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .wl-searchm-list .wl-sug-title { font-size:14.5px; font-weight:600; color:#17171b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wl-searchm-list .wl-sug-meta { font-size:12.5px; color:rgba(24,24,30,0.59); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wl-searchm-list .wl-sug-tag { flex-shrink:0; font-size:11px; font-weight:700; text-transform:uppercase; color:rgba(24,24,30,0.59); border:1px solid rgba(24,24,30,0.198); border-radius:100px; padding:2px 8px; }
  .wl-searchm-list .wl-sug-empty { padding:24px 12px; text-align:center; color:rgba(24,24,30,0.478); font-size:14px; }
  body.pf-light .wl-searchm-list .wl-sug { color:#1a1d21; }
  body.pf-light .wl-searchm-list .wl-sug:hover { background:#f1f3f5; }
  body.pf-light .wl-searchm-list .wl-sug-title { color:#1a1d21; }
  body.pf-light .wl-searchm-list .wl-sug-meta { color:#7a8591; }
  body.pf-light .wl-searchm-list .wl-sug-tag { color:#7a8591; border-color:#e4e8ec; }
  /* Thème clair */
  body.pf-light .wl-searchm { background:#fff; }
  body.pf-light .wl-searchm-bar { border-bottom-color:#e9edf1; }
  body.pf-light .wl-searchm-input { background:#f1f3f5; border-color:#e4e8ec; color:#1a1d21; }
  body.pf-light .wl-searchm-input::placeholder { color:#9aa4ad; }
  body.pf-light .wl-searchm-close { color:#5a6470; }
  body.pf-light .wl-searchm-quick-t { color:#9aa4ad; }
  body.pf-light .wl-searchm-ql { background:#f1f3f5; border-color:#e4e8ec; color:#3a4450; }

  /* Bouton + menu Communauté */
  .wl-commu { position:relative; display:inline-block; }
  .wl-commu-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--menu-text); font-family:var(--font); font-size:14px; font-weight:500; padding:6px 14px; border-radius:6px; cursor:pointer; }
  .wl-commu-btn:hover { color:var(--menu-hover); background:rgba(24,24,30,0.07); }
  .wl-commu-menu { position:absolute; left:0; top:calc(100% + 8px); min-width:230px; background:#f2f2f4; border:1px solid rgba(24,24,30,0.142); border-radius:12px; padding:6px; display:none; box-shadow:0 16px 40px rgba(0,0,0,.55); z-index:1002; }
  /* ===== Menu Communauté sur 2 COLONNES (Métier à gauche, Statut à droite) =====
     Plus large, pas de scroll : les deux groupes tiennent côte à côte. */
  .wl-commu-menu-2col { min-width: 440px; }
  .wl-commu-menu-2col .wl-commu-cols { display: flex; align-items: flex-start; gap: 20px; }
  /* Métier & Statut : chaque libellé sur UNE seule ligne (pas de retour). */
  .wl-commu-menu-2col .wl-commu-col { flex: 0 0 auto; min-width: 150px; }
  .wl-commu-menu-2col .wl-commu-col > a { white-space: nowrap; }
  /* La colonne profil : vignette 200px + texte dessous. */
  .wl-commu-menu-2col .wl-commu-col-profile { flex: 0 0 230px; }
  /* Colonne « Profil à la une » (max 2) : carte = photo + bandeau ROUGE (nom),
     avec le TEXTE libre à DROITE de la vignette. */
  .wl-commu-col-profile { border-left: 1px solid rgba(24,24,30,0.12); padding-left: 14px; display: flex; flex-direction: column; gap: 14px; }
  .wl-commu-col-profile .wl-commu-group-title { margin-bottom: 2px; }
  /* Vignette(s) empilée(s), puis le texte EN DESSOUS, aligné sur la vignette. */
  .wl-commu-profile-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 200px; }
  .wl-commu-profile-stack { width: 200px; display: flex; flex-direction: column; gap: 12px; }
  .wl-commu-profile-row .wl-commu-profile-note { margin-top: 0; width: 200px; }
  .wl-commu-profile {
    position: relative; display: block; width: 100%;
    margin: 0 !important; padding: 0 !important;   /* annule le padding des liens du menu */
    border-radius: 14px; overflow: hidden; background: #f3f3f5;
    transition: transform .2s;
  }
  .wl-commu-profile:hover { transform: translateY(-3px); }
  /* Texte libre sous le(s) profil(s). */
  .wl-commu-profile-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #424246; }
  /* Zone photo : portrait, visages cadrés vers le haut. */
  .wl-commu-profile-av { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: #f3f3f5; overflow: hidden; }
  .wl-commu-profile-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .35s; }
  .wl-commu-profile:hover .wl-commu-profile-av img { transform: scale(1.05); }
  .wl-commu-profile-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 46px; color: #fff; background: linear-gradient(135deg, var(--red) 0%, #f4f4f6 100%); }
  /* Bandeau ROUGE en bas : nom en blanc + métier. */
  .wl-commu-profile-name { display: block; background: var(--red); padding: 9px 12px 2px; font-weight: 800; font-size: 13.5px; color: #fff; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wl-commu-profile-role { display: block; background: var(--red); padding: 0 12px 10px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-commu-profile-name:last-child { padding-bottom: 10px; }   /* pas de métier */
  /* « Toute la communauté » reste pleine largeur en tête. */
  .wl-commu-menu-2col .wl-commu-all { display: flex; }
  /* Quand le menu passe au-delà de l'écran en largeur (petit écran), on repasse
     en 1 colonne avec défilement vertical. */
  @media (max-width: 620px) {
    .wl-commu-menu-2col { min-width: 230px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: none; }
    .wl-commu-menu-2col::-webkit-scrollbar { width: 0; }
    .wl-commu-menu-2col .wl-commu-cols { grid-template-columns: 1fr; }
  }
  .wl-commu-menu.open { display:block; transform-origin:top center; animation:wlMenuOpen .16s cubic-bezier(.16,1,.3,1); }
  .wl-commu-menu a { display:block; padding:9px 12px; border-radius:7px; font-size:14px; color:rgba(24,24,30,0.948); }
  .wl-commu-menu a:hover { background:rgba(47,158,17,0.14); color:#17171b; }
  .wl-commu-menu .wl-commu-all { font-weight:700; color:#17171b; border-bottom:1px solid rgba(24,24,30,0.12); margin-bottom:4px; padding-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  /* Flèche « cliquable » à droite de « Toute la communauté » */
  .wl-commu-menu .wl-commu-all svg { flex-shrink:0; color:var(--red); transition:transform .18s; }
  .wl-commu-menu .wl-commu-all:hover svg { transform:translateX(3px); }
  /* Titres de groupe (Métier / Statut) dans le menu Communauté : couleur EICAR. */
  .wl-commu-menu .wl-commu-group-title { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--red); padding:10px 12px 5px; }
  /* Le 1er titre (Métier) juste après le lien « Toute la communauté » : moins d'air. */
  .wl-commu-menu .wl-commu-all + .wl-commu-group-title { padding-top:6px; }
  /* Titre de groupe dans le menu mobile (accordéon) : couleur EICAR. */
  .wl-m-acc-grouptitle { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--red); padding:12px 2px 5px; }

  /* Aligner le 1er item du menu sur le logo : pas de padding gauche sur le
     premier élément (bouton ou lien), quel que soit son type. Le décalage
     interne (padding-left) est reporté en marge sur le contenu qui suit. */
  .header-nav > *:first-child .wl-cmenu-btn,
  .header-nav > .wl-cmenu:first-child .wl-cmenu-btn,
  .header-nav > .wl-commu:first-child .wl-commu-btn,
  .header-nav > a:first-child { padding-left: 0; }

  /* Icône de type devant Vidéos/Audio/Photos (discrète) */
  .nav-ic { vertical-align:-2px; margin-right:6px; opacity:.55; }
  /* Option admin « masquer les icônes du menu » (le menu mobile est déjà sans icônes) */
  .site-header.wl-hide-menu-icons .nav-ic { display:none; }
  .header-nav a:hover .nav-ic, .wl-cmenu-btn:hover .nav-ic, .wl-cmenu.open .wl-cmenu-btn .nav-ic { opacity:.9; }
  /* aligner icône + texte dans les liens simples de la nav */
  .header-nav > a { display:inline-flex; align-items:center; }

  /* Menus contenu (Vidéos / Audio / Photos) */
  .wl-cmenu { position:relative; display:inline-block; }
  .wl-cmenu-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--menu-text); font-family:var(--font); font-size:14px; font-weight:500; padding:6px 14px; border-radius:6px; cursor:pointer; }
  .wl-cmenu-btn:hover, .wl-cmenu.open .wl-cmenu-btn { color:var(--menu-hover); background:rgba(24,24,30,0.07); }
  .wl-cmenu-btn svg { transition:transform .2s; }
  .wl-cmenu.open .wl-cmenu-btn svg { transform:rotate(180deg); }
  .wl-cmenu-list { position:absolute; left:0; top:calc(100% + 8px); min-width:200px; background:#f2f2f4; border:1px solid rgba(24,24,30,0.142); border-radius:12px; padding:6px; display:none; box-shadow:0 16px 40px rgba(0,0,0,.55); z-index:1002;
    /* Trop de catégories : plafonne la hauteur et défile (barre masquée). */
    max-height: calc(100vh - 110px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: none; }
  .wl-cmenu-list::-webkit-scrollbar { width: 0; height: 0; }
  .wl-cmenu.open .wl-cmenu-list { display:block; transform-origin:top center; animation:wlMenuOpen .16s cubic-bezier(.16,1,.3,1); }
  /* Animation d'ouverture des menus déroulants du header (fondu + glissement + léger scale). */
  @keyframes wlMenuOpen {
    from { opacity:0; transform:translateY(-8px) scale(.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wl-commu-menu.open, .wl-cmenu.open .wl-cmenu-list { animation:none; }
  }
  /* Menu vidéo avec « Coup de pouce » : 2 colonnes (catégories | vidéo).
     Même pattern que Communauté : le flex est sur un wrapper interne
     (.wl-cmenu-cols), le dropdown .wl-cmenu-list reste en display:block. */
  .wl-cmenu-list-2col { min-width:440px; }
  .wl-cmenu-list-2col .wl-cmenu-cols { display:flex; align-items:flex-start; gap:20px; padding-right:14px; }
  .wl-cmenu-list-2col .wl-cmenu-main { flex:0 0 auto; min-width:180px; }
  .wl-cmenu-list-2col .wl-cmenu-main > a { white-space:nowrap; }
  /* Titre « Catégorie » au-dessus de la liste (même style que « Coup de pouce », sans pulsation).
     padding-left:12px pour s'aligner sur les liens Fiction/Documentaire… (eux à padding:9px 12px). */
  .wl-cmenu-list-2col .wl-cmenu-main .wl-commu-group-title { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--red); padding:4px 12px 10px; margin:0; }
  .wl-cmenu-list-2col .wl-cmenu-boostcol { flex:0 0 320px; border-left:1px solid rgba(24,24,30,0.12); padding-left:16px; }
  /* Titre « Coup de pouce » : même style que « PROFIL À LA UNE » (rouge, petit, majuscules).
     + halo pulsé discret pour signaler la mise en avant. */
  .wl-cmenu-list-2col .wl-cmenu-boostcol .wl-commu-group-title { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--red); padding:4px 0 10px; margin:0;
    animation: wlBoostPulse 2.2s ease-in-out infinite; }
  @keyframes wlBoostPulse {
    0%, 100% { text-shadow: 0 0 0 rgba(47,158,17,0); opacity:.9; }
    50%       { text-shadow: 0 0 10px rgba(47,158,17,0.75); opacity:1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wl-cmenu-list-2col .wl-cmenu-boostcol .wl-commu-group-title { animation: none; }
  }
  .wl-cmenu-list a { display:block; padding:9px 12px; border-radius:7px; font-size:14px; color:rgba(24,24,30,0.948); }
  .wl-cmenu-list a:hover { background:rgba(47,158,17,0.14); color:#17171b; }
  .wl-cmenu-list .wl-cmenu-all { font-weight:700; color:#17171b; border-bottom:1px solid rgba(24,24,30,0.12); margin-bottom:4px; padding-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  /* Flèche « cliquable » à droite de « Tout voir » (menus Vidéos/Audio/Photos) */
  .wl-cmenu-list .wl-cmenu-all svg { flex-shrink:0; color:var(--red); transition:transform .18s; }
  .wl-cmenu-list .wl-cmenu-all:hover svg { transform:translateX(3px); }

  /* Bandeau d'info "Dernière minute" : bande dédiée AU-DESSUS du menu.
     Le CONTENEUR reçoit le MÊME layout que .header-inner (max-width + padding),
     comme ça le contenu est aligné pixel pour pixel avec le logo/menu. */
  .header-tickerrow { background:#fff; border-bottom:1px solid rgba(0,0,0,.08); }
  .header-tickerrow-inner { max-width:1400px; margin:0 auto; padding:6px 24px; box-sizing:border-box; }
  /* Le ticker redevient un simple contenu aligné à gauche (pas de centrage propre) */
  .header-tickerrow .wl-ticker { display:flex; align-items:center; margin:0; max-width:none; padding:0; border:none; border-radius:0; background:transparent; }
  .header-tickerrow a.wl-ticker:hover { background:transparent; }
  /* Le label n'est plus un "bouton" : texte gras rouge EICAR */
  .header-tickerrow .wl-ticker-tag { background:transparent; color:var(--red); padding:0; border-radius:0; font-size:12px; font-weight:800; letter-spacing:.04em; }
  /* Fond blanc → texte de l'annonce en noir */
  .header-tickerrow .wl-ticker-txt { color:#000; }
  .header-tickerrow a.wl-ticker:hover .wl-ticker-txt { color:#000; }
  /* Bande large : le texte tient sans défiler → on fige le marquee et on masque la 2e copie */
  .header-tickerrow .wl-ticker-marquee { width:auto; max-width:none; overflow:visible; }
  .header-tickerrow .wl-ticker-track { animation:none !important; }
  .header-tickerrow .wl-ticker-track .wl-ticker-txt { padding-right:0; }
  .header-tickerrow .wl-ticker-track .wl-ticker-txt + .wl-ticker-txt { display:none; }

  /* Bandeau d'info "Dernière minute" (styles de base, hérités) */
  .wl-ticker { margin-left:auto; display:inline-flex; align-items:center; gap:9px; padding:5px 14px; border-radius:100px; background:rgba(24,24,30,0.04); border:1px solid rgba(24,24,30,0.12); font-size:13px; max-width:42%; transition:background .2s, border-color .2s; }
  a.wl-ticker:hover { background:rgba(24,24,30,0.08); border-color:rgba(24,24,30,0.232); }
  .wl-ticker-tag { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--red); padding:3px 9px; border-radius:100px; }
  .wl-ticker-ic { display:inline-flex; align-items:center; }
  .wl-ticker-ic svg { width:12px; height:12px; }
  .wl-m-ticker .wl-ticker-ic { vertical-align:-2px; margin-right:3px; }
  .wl-m-ticker .wl-ticker-ic svg { width:14px; height:14px; }
  .wl-ticker-txt { color:var(--menu-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  a.wl-ticker:hover .wl-ticker-txt { color:var(--menu-hover); }
  /* Animation défilement (marquee) */
  .wl-ticker.is-anim { max-width:none; }
  .wl-ticker-marquee { display:block; overflow:hidden; width:340px; max-width:38vw; }
  .wl-ticker-track { display:inline-flex; white-space:nowrap; animation:wlTickerScroll 12s linear infinite; will-change:transform; }
  .wl-ticker-track .wl-ticker-txt { overflow:visible; padding-right:40px; }
  a.wl-ticker.is-anim:hover .wl-ticker-track { animation-play-state:paused; }
  @keyframes wlTickerScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .wl-ticker-track { animation:none; } }
  /* Bouton + Publier — premium animé */
  .wl-publish { position:relative; }
  .wl-publish-btn {
    display:flex; align-items:center; gap:7px;
    height:42px; box-sizing:border-box;
    background:transparent;
    border:1px solid rgba(24,24,30,0.198); border-radius:8px; padding:0 12px;
    color:rgba(24,24,30,0.814); cursor:pointer; font-family:var(--font); font-size:14px; font-weight:500;
    transition:color .2s, background .2s, border-color .2s;
  }
  .wl-publish-btn:hover { color:#17171b; background:rgba(24,24,30,0.06); border-color:rgba(24,24,30,0.366); }
  .wl-publish-btn .pub-icon { color:var(--red); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
  .wl-publish-btn:hover .pub-icon { transform:translateY(-2px); }
  .wl-publish-btn[aria-expanded="true"] .pub-icon { transform:translateY(-2px); }

  .wl-publish-menu {
    position:absolute; right:0; top:calc(100% + 10px); min-width:250px;
    background:linear-gradient(180deg,#f0f0f2 0%,#f4f4f6 100%);
    border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px;
    box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(47,158,17,0.08);
    z-index:1001;
    opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top right;
    pointer-events:none; visibility:hidden;
    transition:opacity .2s ease, transform .22s cubic-bezier(.34,1.4,.64,1), visibility .2s;
  }
  .wl-publish-menu.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible; }
  /* petite flèche vers le bouton */
  .wl-publish-menu::before {
    content:''; position:absolute; top:-5px; right:24px; width:10px; height:10px;
    background:#f0f0f2; border-left:1px solid rgba(24,24,30,0.142); border-top:1px solid rgba(24,24,30,0.142);
    transform:rotate(45deg);
  }
  .wl-publish-menu .wl-pub-title {
    font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:rgba(24,24,30,0.366); padding:4px 12px 8px;
  }
  .wl-publish-menu a,
  .wl-publish-menu .wl-pub-express {
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; width:100%; box-sizing:border-box;
    font-family:inherit; font-size:14px; font-weight:600; color:rgba(24,24,30,1); position:relative; text-align:left;
    background:none; border:none; cursor:pointer; transition:background .15s, color .15s, padding-left .18s;
  }
  .wl-publish-menu a:hover,
  .wl-publish-menu .wl-pub-express:hover { background:rgba(47,158,17,0.14); color:#17171b; padding-left:16px; }
  .wl-publish-menu a .ic,
  .wl-publish-menu .wl-pub-express .ic {
    width:34px; height:34px; flex-shrink:0; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(47,158,17,0.14); color:var(--red);
    transition:background .15s, color .15s, transform .18s;
  }
  .wl-publish-menu a:hover .ic,
  .wl-publish-menu .wl-pub-express:hover .ic { background:var(--red); color:#fff; transform:scale(1.08); }
  .wl-publish-menu a .lbl small,
  .wl-publish-menu .wl-pub-express .lbl small { display:block; font-size:11px; font-weight:400; color:rgba(24,24,30,0.478); margin-top:1px; }
  .wl-publish-menu .wl-pub-sep { height:1px; background:rgba(24,24,30,0.08); margin:6px 8px; }
  @media (max-width:600px){ .wl-publish-label{ display:none; } .wl-publish-btn{ padding:9px; } }
  .wl-user { position:relative; }
  .wl-user-btn { display:flex; align-items:center; gap:8px; height:42px; box-sizing:border-box; background:rgba(24,24,30,0.06); border:1px solid rgba(24,24,30,0.142); border-radius:10px; padding:0 12px 0 6px; color:#17171b; cursor:pointer; font-family:var(--font); font-size:14px; font-weight:600; transition:background .2s; }
  .wl-user-btn:hover { background:rgba(24,24,30,0.12); }
  .wl-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .wl-avatar-fb { background:var(--red); color:#fff; font-weight:800; font-size:12px; letter-spacing:.5px; }
  .wl-user-name { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wl-user-menu { position:absolute; right:0; top:calc(100% + 8px); width:250px; background:#f2f2f4; border:1px solid rgba(24,24,30,0.142); border-radius:10px; padding:0; display:none; box-shadow:0 12px 30px rgba(0,0,0,.5); z-index:1001; overflow:hidden; }
  .wl-user-menu.open { display:block; }
  /* Drill-down : 2 pages côte à côte qui glissent horizontalement */
  .wl-user-menu .wl-menu-slider { display:flex; width:200%; transition:transform .28s cubic-bezier(.4,0,.2,1); }
  .wl-user-menu .wl-menu-slider.drill { transform:translateX(-50%); }
  .wl-user-menu .wl-menu-page { width:50%; flex:0 0 50%; box-sizing:border-box; padding:6px; }
  /* Bouton d'entrée (« Lykhubs › ») : petit titre en majuscules (style d'origine). */
  /* Entrée « Votre espace Lykhubs » : c'est un élément cliquable, pas un titre
     de section — mêmes police et espacement que .wl-acc-head et les liens. */
  .wl-user-menu .wl-drill-enter { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; font-family:inherit; font-size:14px; color:rgba(24,24,30,0.926); padding:10px 12px; border-radius:6px; transition:background .15s,color .15s; }
  .wl-user-menu .wl-drill-enter:hover { background:rgba(24,24,30,0.07); color:#17171b; }
  .wl-user-menu .wl-drill-enter:hover { color:rgba(24,24,30,0.702); }
  .wl-user-menu .wl-drill-enter svg { opacity:.7; }
  /* En-tête « ‹ Lykhubs » du panneau enfant */
  .wl-user-menu .wl-drill-back { display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:800; color:var(--red); padding:10px 12px; border-radius:6px; }
  .wl-user-menu .wl-drill-back:hover { filter:brightness(1.15); }
  .wl-user-menu a { display:block; padding:10px 12px; border-radius:6px; font-size:14px; color:rgba(24,24,30,0.926); transition:background .15s,color .15s; }
  .wl-user-menu a:hover { background:rgba(24,24,30,0.07); color:#17171b; }
  .wl-user-menu .wl-menu-label { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(24,24,30,0.422); padding:8px 12px 4px; }
  .wl-user-menu .wl-menu-sep { height:1px; background:rgba(24,24,30,0.08); margin:5px 8px; }
  .wl-user-menu .wl-admin-link { color:#7fb0ff; font-weight:600; }
  .wl-user-menu .wl-admin-link:hover { background:rgba(127,176,255,.12); color:#a9c9ff; }
  /* Accordéon « Administrateur » : même style de label que les autres (gris uppercase),
     lien Accueil neutre comme les liens du menu. */
  .wl-user-menu .wl-acc-admin .wl-admin-link { color:rgba(24,24,30,0.87); font-weight:500; display:flex; align-items:center; gap:8px; }
  .wl-user-menu .wl-acc-admin .wl-admin-link:hover { background:rgba(24,24,30,0.06); color:#17171b; }
  .wl-user-menu .wl-acc-admin .wl-admin-link svg { flex-shrink:0; opacity:.7; }
  .wl-user-menu .wl-logout { color:var(--red); font-weight:600; }
  /* Accordéon Lykhubs dans le menu compte */
  /* Têtes d'accordéon (Vos contenus / EICAR+…) : MÊME taille/couleur que les liens du menu. */
  .wl-user-menu .wl-acc-head { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; font-family:inherit; font-size:14px; color:rgba(24,24,30,0.926); padding:10px 12px; border-radius:6px; }
  .wl-user-menu .wl-acc-head:hover { background:rgba(24,24,30,0.07); color:#17171b; }
  .wl-user-menu .wl-acc-chev { transition:transform .2s; opacity:.7; }
  .wl-user-menu .wl-acc.open .wl-acc-chev { transform:rotate(180deg); }
  .wl-user-menu .wl-acc-body { display:none; }
  .wl-user-menu .wl-acc.open .wl-acc-body { display:block; }
  /* Menu « Mon Hub » en grille de tuiles (icône + label, façon appli mobile).
     Toutes les tuiles ont la MÊME hauteur ; le label est sur 1 ligne, tronqué
     avec « … » si trop long. */
  .wl-user-menu .wl-hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:4px 10px 8px; }
  .wl-user-menu a.wl-hub-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:1/1; padding:8px 6px; text-align:center; background:rgba(24,24,30,0.05); border:1px solid rgba(24,24,30,0.097); border-radius:12px; color:rgba(24,24,30,0.982); box-sizing:border-box; overflow:hidden; }
  .wl-user-menu a.wl-hub-tile:hover { background:rgba(47,158,17,.14); border-color:rgba(47,158,17,.3); color:#17171b; }
  .wl-user-menu a.wl-hub-tile i { color:var(--red); font-size:18px; flex-shrink:0; }
  .wl-user-menu a.wl-hub-tile span { font-size:11px; line-height:1.2; font-weight:600; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Version compacte des tuiles (accordéon « Vos contenus ») */
  .wl-user-menu .wl-hub-grid-sm a.wl-hub-tile { gap:5px; padding:6px 4px; border-radius:9px; }
  .wl-user-menu .wl-hub-grid-sm a.wl-hub-tile i { font-size:15px; }
  .wl-user-menu .wl-hub-grid-sm a.wl-hub-tile span { font-size:10px; }
  /* Accordéons de la section Lykhubs (« Mon Hub », « Ma bibliothèque ») */
  .wl-user-menu .wl-hub-acc + .wl-hub-acc { margin-top:4px; padding-top:4px; border-top:1px solid rgba(24,24,30,0.097); }
  .wl-user-menu .wl-hub-acc-head,
  .wl-m-drill-panel .wl-hub-acc-head { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; font-family:inherit; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(24,24,30,0.646); padding:8px 12px 6px; }
  .wl-user-menu .wl-hub-acc-head:hover,
  .wl-m-drill-panel .wl-hub-acc-head:hover { color:rgba(24,24,30,0.926); }
  .wl-user-menu .wl-hub-acc-chev { transition:transform .2s; opacity:.8; }
  .wl-user-menu .wl-hub-acc.open .wl-hub-acc-chev { transform:rotate(180deg); }
  .wl-user-menu .wl-hub-acc .wl-hub-grid { display:none; }
  .wl-user-menu .wl-hub-acc.open .wl-hub-grid { display:grid; }
  /* Lien « Personnaliser mes icônes » sous la grille du Hub (desktop + mobile) */
  .wl-user-menu .wl-hub-acc:not(.open) .wl-hub-customize,
  .wl-m-drill-panel .wl-hub-acc:not(.open) .wl-hub-customize { display:none; }
  .wl-hub-customize { display:inline-flex; align-items:center; gap:6px; margin:8px 4px 2px; background:none; border:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; color:var(--red); padding:2px 8px; }
  .wl-hub-customize:hover { text-decoration:underline; filter:brightness(1.1); }
  .wl-hub-customize i { font-size:11px; }
  @media (max-width:600px){ .wl-user-name{ display:none; } }

/* =============================================================
   BARRE DE NAVIGATION MOBILE (style application) — bas d'écran
   Icônes blanches, onglet actif rouge, Publier = bouton central rouge.
   ============================================================= */
.wl-bottombar { display:none; }
@media (max-width:768px) {
  .wl-bottombar {
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:10003;
    background:rgba(248,248,250,0.96);
    backdrop-filter:saturate(140%) blur(12px);
    -webkit-backdrop-filter:saturate(140%) blur(12px);
    border-top:1px solid rgba(24,24,30,0.12);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    /* align-items:center (pas flex-end) : la pastille « Publier » surélevée
       (margin-top négatif) ne doit pas gonfler la hauteur de la barre, sinon
       position:fixed bottom:0 se décale au scroll sur iOS Safari. */
    justify-content:space-around; align-items:center;
  }
  .wl-bn {
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    text-decoration:none; color:#17171b;            /* icônes + libellés blancs */
    font-size:10.5px; font-weight:600; line-height:1;
    padding:4px 2px; transition:color .15s;
    /* reset du style natif (l'onglet Publier est un <button>) */
    background:none; border:none; font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
  }
  .wl-bn:focus { outline:none; }
  .wl-bn svg { width:23px; height:23px; }
  .wl-bn span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .wl-bn:not(.wl-bn-pub) { color:rgba(24,24,30,1); }
  .wl-bn.active { color:var(--red); }            /* onglet courant en rouge */

  /* Bouton central « Publier » : pastille rouge surélevée */
  .wl-bn-pub { color:#17171b; }
  .wl-bn-pub .wl-bn-pub-ic {
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; margin-top:-22px; margin-bottom:1px;
    background:var(--red); border-radius:50%;
    box-shadow:0 6px 18px rgba(47,158,17,.45); border:3px solid rgba(16,16,20,.96);
    transition:transform .15s;
  }
  .wl-bn-pub .wl-bn-pub-ic svg { width:24px; height:24px; color:#17171b; }
  .wl-bn-pub:active .wl-bn-pub-ic { transform:scale(.92); }

  /* Le contenu ne doit pas passer sous la barre */
  body { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Le bouton « Publier » du header est redondant avec la barre du bas → masqué */
  .wl-publish { display:none; }
}
/* Thème clair : barre adaptée */
@media (max-width:768px) {
  body.pf-light .wl-bottombar { background:rgba(255,255,255,.97); border-top-color:#e4e8ec; }
  body.pf-light .wl-bn, body.pf-light .wl-bn:not(.wl-bn-pub) { color:#3a4250; }
  body.pf-light .wl-bn.active { color:var(--red); }
  body.pf-light .wl-bn-pub .wl-bn-pub-ic { border-color:rgba(255,255,255,.97); }
}

/* --- Feuille de choix « Publier » (bottom sheet) --- */
.wl-pubsheet-ov {
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .24s;
}
.wl-pubsheet-ov.open { opacity:1; }
.wl-pubsheet {
  position:fixed; left:0; right:0; bottom:0; z-index:1101;
  background:#f3f3f5; border-radius:20px 20px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.25,1);
  box-shadow:0 -12px 40px rgba(0,0,0,.5);
}
.wl-pubsheet.open { transform:translateY(0); }
.wl-pubsheet-grip { width:42px; height:5px; border-radius:99px; background:rgba(24,24,30,0.22); margin:6px auto 14px; }
.wl-pubsheet-title { font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:rgba(24,24,30,0.534); padding:0 4px 12px; }
.wl-pubsheet-opt {
  display:flex; align-items:center; gap:14px;
  padding:14px 12px; border-radius:14px; text-decoration:none; color:#17171b;
  transition:background .15s;
}
.wl-pubsheet-opt:active { background:rgba(24,24,30,0.06); }
.wl-pubsheet-ic { flex-shrink:0; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
.wl-pubsheet-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wl-pubsheet-txt strong { font-size:16px; font-weight:700; }
.wl-pubsheet-txt small { font-size:12.5px; color:rgba(24,24,30,0.59); }
.wl-pubsheet-chev { color:rgba(24,24,30,0.366); flex-shrink:0; }
.wl-pubsheet-cancel {
  width:100%; margin-top:8px; padding:14px; border:none; border-radius:13px;
  background:rgba(24,24,30,0.07); color:#17171b; font-size:15px; font-weight:700;
  font-family:inherit; cursor:pointer;
}
.wl-pubsheet-cancel:active { background:rgba(24,24,30,0.12); }
/* Thème clair */
body.pf-light .wl-pubsheet { background:#fff; }
body.pf-light .wl-pubsheet-grip { background:#d0d5da; }
body.pf-light .wl-pubsheet-opt { color:#13151a; }
body.pf-light .wl-pubsheet-opt:active { background:#f2f4f6; }
body.pf-light .wl-pubsheet-txt small { color:#8a929b; }
body.pf-light .wl-pubsheet-cancel { background:#f2f4f6; color:#13151a; }

/* =============================================
   HEADER — ACTIONS (version modernisée)
   Icônes rondes sans bordure, « Publier » en CTA plein, profil en pastille.
   Placé en fin de fichier : prime sur les styles d'origine plus haut.
   ============================================= */
.site-header .header-actions { gap: 6px; }

/* Icônes : loupe, cloche, messagerie — dimensions communes. */
.site-header .header-actions .wl-search-mobile-btn,
.site-header .header-actions .lkh-action-btn,
.site-header .header-actions .wl-msg-btn {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: rgba(24,24,30,0.836);
  transition: background .18s, color .18s, transform .18s;
}
/* Messagerie : icône dans le header (desktop) OU lien dans le menu compte (mobile).
   On n'affiche jamais les deux à la fois. */
.wl-menu-msg { display: none; }                 /* lien menu : masqué par défaut (desktop) */
@media (max-width: 960px) {
  .site-header .header-actions .wl-msg-btn { display: none; }  /* icône header masquée sur mobile */
  .wl-user-menu .wl-menu-msg { display: block; }               /* lien menu visible sur mobile */
  /* La loupe reste TOUJOURS visible sur mobile (on ne masque que l'enveloppe). */
  .site-header .header-actions .wl-search-mobile-btn { display: inline-flex !important; }
}
.site-header .header-actions .wl-search-mobile-btn:hover,
.site-header .header-actions .lkh-action-btn:hover,
.site-header .header-actions .wl-msg-btn:hover { background: rgba(24,24,30,0.09); color: #17171b; }
.site-header .header-actions .wl-search-mobile-btn:active,
.site-header .header-actions .lkh-action-btn:active,
.site-header .header-actions .wl-msg-btn:active { transform: scale(.93); }
/* Pastilles de compteur : collées à l'icône, détourées sur le fond du header */
.site-header .header-actions .lkh-badge,
.site-header .header-actions .wl-msg-badge {
  top: 3px; right: 1px;
  min-width: 16px; height: 16px; line-height: 16px;
  font-size: 10px; border-radius: 8px;
  box-shadow: 0 0 0 2px #161616;
}

/* Loupe quand la barre est ouverte : bouton « Rechercher » collé à la barre */
.site-header.search-open .header-actions .wl-search-mobile-btn,
.site-header.search-open .header-actions .wl-search-mobile-btn:hover {
  width: 42px; height: 42px;
  border-radius: 999px;                   /* reste ROND quand la recherche est ouverte */
  background: rgba(24,24,30,0.12); color: #17171b; border-color: transparent;
  margin-right: 0;
}

/* Publier : action principale */
.site-header .header-actions .wl-publish { margin: 0 6px; }
.site-header .header-actions .wl-publish-btn {
  height: 40px; padding: 0 17px 0 14px; gap: 7px;
  border: 0; border-radius: 999px;
  background: var(--red); color: #fff;
  font-weight: 700; letter-spacing: .1px;
  box-shadow: 0 4px 14px rgba(47,158,17,.28);
  transition: filter .18s, box-shadow .18s, transform .18s;
}
.site-header .header-actions .wl-publish-btn:hover,
.site-header .header-actions .wl-publish-btn[aria-expanded="true"] {
  color: #fff; background: var(--red);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(47,158,17,.4);
}
.site-header .header-actions .wl-publish-btn:active { transform: scale(.97); }
.site-header .header-actions .wl-publish-btn .pub-icon { color: #17171b; }

/* Profil : pastille avatar + prénom */
.site-header .header-actions .wl-user { margin-left: 4px; }
.site-header .header-actions .wl-user-btn {
  height: 40px; padding: 0 12px 0 4px; gap: 9px;
  border: 0; border-radius: 999px;
  background: rgba(24,24,30,0.07);
  transition: background .18s;
}
.site-header .header-actions .wl-user-btn:hover,
.site-header .header-actions .wl-user-btn[aria-expanded="true"] { background: rgba(24,24,30,0.13); }
.site-header .header-actions .wl-user-btn .wl-avatar { width: 32px; height: 32px; }
.site-header .header-actions .wl-user-btn > svg { opacity: .6; }

/* Connexion / S'inscrire : mêmes formes arrondies */
.site-header .header-actions .btn-login,
.site-header .header-actions .btn-register { height: 40px; padding: 0 18px; border-radius: 999px; }
.site-header .header-actions .btn-login { border: 0; background: rgba(24,24,30,0.08); color: rgba(24,24,30,0.982); }
.site-header .header-actions .btn-login:hover { background: rgba(24,24,30,0.14); color: #17171b; }

/* Petit écran : « Publier » devient un rond rouge (le libellé est déjà masqué) */
@media (max-width: 600px) {
  .site-header .header-actions .wl-publish { margin: 0 2px; }
  .site-header .header-actions .wl-publish-btn { width: 40px; padding: 0; justify-content: center; }
}

/* =============================================
   HEADER TRANSPARENT SUR LE HERO (accueil)
   .is-overlay posé côté serveur (index.php) ; .is-solid ajouté au scroll.
   ============================================= */
.site-header.is-overlay,
.site-header.is-overlay .header-navrow { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.site-header.is-overlay:not(.is-solid) { background: transparent; border-bottom-color: transparent; }
.site-header.is-overlay:not(.is-solid) .header-navrow { background: transparent; border-color: transparent; }
/* Voile dégradé derrière le header (lisibilité du logo et du menu sur l'image) */
.site-header.is-overlay::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -70px;
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none; z-index: -1;
  transition: opacity .3s ease;
}
.site-header.is-overlay.is-solid::before { opacity: 0; }
.site-header.is-overlay.is-solid { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
/* Recherche ouverte : le header ne doit PAS rester transparent (sinon la vidéo
   du hero transparaît derrière la barre de recherche). On le rend opaque comme
   en mode « solide », même sans avoir scrollé. */
.site-header.is-overlay.search-open { background: #f6f6f8; border-bottom-color: rgba(255,255,255,.06); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.site-header.is-overlay.search-open::before { opacity: 0; }
.site-header.is-overlay:not(.is-solid) .header-actions .lkh-badge,
.site-header.is-overlay:not(.is-solid) .header-actions .wl-msg-badge { box-shadow: none; }

/* Le hero remonte sous le header : même zone visible qu'avant, image jusqu'en haut. */
.site-header.is-overlay ~ .hero { margin-top: 0; height: 673px; padding-top: 183px; }
@media (max-width: 960px) {
  .site-header.is-overlay ~ .hero { margin-top: 0; height: 504px; padding-top: 133px; }
}
/* Slides et flèches positionnés en absolu sur tout le hero : on recentre le
   contenu dans la zone SOUS le header (143px desktop, 93px mobile). */
.site-header.is-overlay ~ .hero .hero-slide { padding-top: 143px; box-sizing: border-box; }
.site-header.is-overlay ~ .hero .hero-arrow { top: calc(50% + 71px); }
@media (max-width: 960px) {
  .site-header.is-overlay ~ .hero .hero-slide { padding-top: 93px; }
  .site-header.is-overlay ~ .hero .hero-arrow { top: calc(50% + 46px); }
}

/* ===== Section « Talents » en carrousel une-ligne (swipe + flèches) =====
   La grille de profils devient un rail horizontal défilable. Les cartes
   gardent une largeur fixe ; le reste déborde et se parcourt au swipe ou
   via les flèches (desktop). */
.section-profile-carousel .pcar { position: relative; }
.section-profile-carousel .pcar-track {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* inertie tactile iOS */
  scrollbar-width: none;               /* Firefox : pas de barre */
  margin: 0 -4px; padding: 4px;
  cursor: grab;                        /* indique le glisser à la souris */
}
.section-profile-carousel .pcar-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.section-profile-carousel .pcar-track.is-dragging .card-profile { pointer-events: none; }
.section-profile-carousel .pcar-track::-webkit-scrollbar { display: none; } /* WebKit */
/* Une seule ligne : on annule la grille multi-colonnes et on passe en flex. */
.section-profile-carousel .pcar-track .grid-profile,
.section-profile-carousel .pcar-track #profils.grid-profile {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px; flex-wrap: nowrap;
}
.section-profile-carousel .pcar-track .card-profile {
  flex: 0 0 240px;                  /* largeur fixe d'une carte */
  width: 240px; scroll-snap-align: start;
}
/* Flèches rondes, masquées par défaut : le JS les affiche s'il y a à défiler. */
.section-profile-carousel .pcar-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #e4e4ea; color: #13151a;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(20, 24, 40, .16); transition: background .18s, transform .18s;
}
.section-profile-carousel .pcar-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
.section-profile-carousel .pcar-arrow.prev { left: -8px; }
.section-profile-carousel .pcar-arrow.next { right: -8px; }
.section-profile-carousel .pcar.has-overflow .pcar-arrow { display: flex; }
.section-profile-carousel .pcar.at-start .pcar-arrow.prev { opacity: .35; pointer-events: none; }
.section-profile-carousel .pcar.at-end   .pcar-arrow.next { opacity: .35; pointer-events: none; }
/* Thème sombre : flèches foncées lisibles. */
.section-profile-carousel.sec-theme-dark .pcar-arrow { background: var(--grey); border-color: rgba(255,255,255,.14); color: #fff; }
/* Sur mobile, pas de flèches : le swipe suffit. Une carte occupe quasiment toute
   la largeur (1 carte pleine + une tranche de la suivante pour inviter au swipe) :
   à 180px fixe, le contenu (nom, métier, badge, stats, bouton) était écrasé/coupé.
   86vw = carte pleine ; le reste (~14vw) laisse juste entrevoir la 2e. */
@media (max-width: 700px) {
  .section-profile-carousel .pcar.has-overflow .pcar-arrow { display: none; }
  .section-profile-carousel .pcar-track .card-profile {
    flex: 0 0 86vw;
    width: 86vw;
    max-width: 360px;
  }
}

/* Comportement carrousel piloté en JS (flèches + état début/fin). */

/* ===== Bouton admin « Changer la vignette » (override cover) =====
   Visible seulement pour l'admin (rendu conditionnel). Apparaît au survol de
   la carte, en haut à gauche de l'image. */
.lkcov-btn {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.72); color: #fff; border: none; border-radius: 999px;
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s, background .18s;
}
.lkcov-btn i { font-size: 12px; }
.lkcov-btn:hover { background: var(--red); }
/* Carte principale : en haut à GAUCHE (le bouton « Changer » est en haut à droite).
   TOUJOURS visible (comme « Changer ») pour être évident. */
.lkcov-btn-main { top: 14px; left: 14px; opacity: 1; transform: none; }
/* Carte latérale : petit bouton rond (icône seule) sur la vignette. */
.lkcov-btn-side { top: 6px; left: 6px; padding: 6px; border-radius: 50%; }
.lkcov-btn-side i { font-size: 11px; }
/* Carte de section (.card) : même petit bouton rond, révélé au survol. */
.lkcov-btn-card { top: 8px; left: 8px; padding: 6px; border-radius: 50%; }
.lkcov-btn-card i { font-size: 11px; }
.card .card-img { position: relative; }
.card:hover .lkcov-btn-card,
.card:focus-within .lkcov-btn-card { opacity: 1; transform: translateY(0); }
/* Les boutons latéraux se révèlent au survol de leur carte (ou focus clavier). */
.card-video-side:hover .lkcov-btn,
.card-video-side:focus-within .lkcov-btn { opacity: 1; transform: translateY(0); }
/* Position relative garantie sur les porteurs d'image. */
.card-video-main .card-img { position: relative; }
.card-video-side .thumb { position: relative; }

/* --- Modale upload de vignette --- */
.lkcov-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 20px; }
.lkcov-modal.open { display: flex; }
.lkcov-dialog { background: #f3f3f5; color: #17171b; border-radius: 16px; width: 100%; max-width: 440px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
body.pf-light .lkcov-dialog, .pf-light .lkcov-dialog { background: #fff; color: #1a1d21; }
.lkcov-dialog h3 { margin: 0 0 4px; font-size: 18px; }
.lkcov-dialog .lkcov-sub { margin: 0 0 16px; font-size: 13px; opacity: .6; }
.lkcov-preview { width: 100%; aspect-ratio: 16/9; border-radius: 10px; background: #000 center/cover no-repeat; border: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; }
.lkcov-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lkcov-file { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 11px 14px; font-weight: 700; font-size: 14px; }
.lkcov-file input { display: none; }
.lkcov-reset { background: transparent; border: 1.5px solid rgba(24,24,30,0.254); color: inherit; border-radius: 8px; padding: 11px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.lkcov-close { background: transparent; border: none; color: inherit; font-size: 13px; opacity: .6; cursor: pointer; padding: 11px 8px; }
.lkcov-msg { font-size: 13px; margin-top: 12px; min-height: 18px; }
.lkcov-msg.err { color: #9BFF3F; }
.lkcov-msg.ok { color: #46c37b; }
.lkcov-busy { opacity: .6; pointer-events: none; }
/* Onglets de la modale (Depuis la vidéo / Envoyer une image) */
.lkcov-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: rgba(24,24,30,0.06); padding: 4px; border-radius: 10px; }
.pf-light .lkcov-tabs { background: #f0f1f4; }
.lkcov-tab { flex: 1; padding: 9px; border: none; background: transparent; color: inherit; opacity: .6; font-family: var(--font); font-size: 13px; font-weight: 700; border-radius: 7px; cursor: pointer; }
.lkcov-tab.active { background: var(--red); color: #fff; opacity: 1; }
.lkcov-tab:disabled { opacity: .3; cursor: not-allowed; }
/* Lecteur vidéo dans la modale (choix de l'image à extraire) */
.lkcov-videowrap { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.lkcov-videowrap video { width: 100%; height: 100%; display: block; background: #000; }
.lkcov-hint { font-size: 12.5px; opacity: .6; margin: 0 0 12px; }

/* ===== Menu mobile (drawer) disponible jusqu'à 1100px EN MODE INLINE =====
   En mode inline, le hamburger apparaît dès 1100px (le menu inline n'a plus la
   place). Or le drawer n'était stylé que sous 960px → entre 960 et 1100px le
   hamburger s'affichait mais le menu ne s'ouvrait pas. On réactive ici le
   drawer sur cette plage, uniquement pour le header inline. */
@media (min-width: 961px) and (max-width: 1100px) {
  .site-header.header-menu-inline ~ .wl-mobile-overlay {
    display: block; position: fixed; inset: 0; z-index: 1099;
    background: rgba(0,0,0,.6); opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }
  .site-header.header-menu-inline ~ .wl-mobile-overlay.open { opacity: 1; visibility: visible; }
  .site-header.header-menu-inline ~ .wl-mobile {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
    width: 70%; max-width: 360px;
    background: #f4f4f6; border-left: 1px solid rgba(24,24,30,0.12);
    box-shadow: -12px 0 40px rgba(0,0,0,.5);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header.header-menu-inline ~ .wl-mobile.open { transform: translateX(0); }
  /* Panneau drill « Lykhubs » : caché hors écran par défaut (sinon il s'empile
     sous le drawer dans cette plage 961-1100px — sa règle de base n'était que
     dans le media 960px). Il ne glisse que quand .wl-mobile a la classe .drill. */
  .site-header.header-menu-inline ~ .wl-mobile .wl-m-drill-panel {
    position: absolute; inset: 0; z-index: 5; background: #f4f4f6;
    display: flex; flex-direction: column; padding: 16px 18px 28px;
    overflow-y: auto; transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .site-header.header-menu-inline ~ .wl-mobile.drill .wl-m-drill-panel { transform: translateX(0); }
}

/* ===== Réorganisation des vidéos du bandeau (admin, glisser-déposer) ===== */
.lkord-toggle {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  margin-left: 14px; padding: 7px 13px; border-radius: 999px;
  background: rgba(47,158,17,0.12); color: var(--red); border: 1px solid rgba(47,158,17,0.3);
  font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .18s, color .18s;
}
.lkord-toggle i { font-size: 12px; }
.lkord-toggle:hover { background: var(--red); color: #fff; border-color: var(--red); }
.lkord-toggle.active { background: var(--red); color: #fff; border-color: var(--red); }
/* Mode réorganisation actif : cartes saisissables (glisser-déposer). */
.section-featured.lkord-on [data-bandeau-token] {
  position: relative; cursor: grab;
  outline: 2px dashed rgba(47,158,17,0.5); outline-offset: 3px; border-radius: 16px;
  touch-action: none;   /* indispensable : le pointeur pilote le drag, pas le scroll */
  user-select: none;
}
.section-featured.lkord-on [data-bandeau-token]:active { cursor: grabbing; }
/* La carte en cours de déplacement : estompée à sa place d'origine. */
.section-featured.lkord-on [data-bandeau-token].lkord-dragging { opacity: .35; }
/* La carte survolée (cible du dépôt) : liseré rouge plein. */
.section-featured.lkord-on [data-bandeau-token].lkord-over { outline-color: var(--red); outline-style: solid; outline-width: 3px; }
.section-featured.lkord-busy { opacity: .6; pointer-events: none; }
/* Fantôme qui suit le curseur pendant le drag. */
.lkord-ghost {
  position: fixed; z-index: 9999; pointer-events: none; margin: 0 !important;
  opacity: .92; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); transform: rotate(-1deg);
}

/* ===== Bouton « Gérer les catégories » (menus Communauté ET Vidéos, admin) ===== */
.wl-commu-menu .wl-commu-manage,
.wl-cmenu-list .wl-cmenu-manage {
  display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 6px;
  padding: 10px 12px; border: none; border-top: 1px solid rgba(24,24,30,0.12);
  background: none; color: var(--red); font-family: var(--font); font-size: 13px;
  font-weight: 700; cursor: pointer; border-radius: 0 0 8px 8px; text-align: left;
}
.wl-commu-menu .wl-commu-manage:hover,
.wl-cmenu-list .wl-cmenu-manage:hover { background: rgba(47,158,17,0.12); }

/* ===== Modale gestion catégories & statuts (admin) ===== */
.lkcm-modal { position: fixed; inset: 0; z-index: 9200; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 20px; }
.lkcm-modal.open { display: flex; }
.lkcm-dialog { background: #f3f3f5; color: #17171b; border-radius: 16px; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lkcm-head { display: flex; align-items: center; justify-content: space-between; }
.lkcm-head h3 { margin: 0; font-size: 18px; }
.lkcm-close { background: none; border: none; color: rgba(24,24,30,0.702); font-size: 24px; line-height: 1; cursor: pointer; }
.lkcm-close:hover { color: #17171b; }
.lkcm-sub { margin: 4px 0 18px; font-size: 12.5px; opacity: .6; }
.lkcm-section { margin-bottom: 22px; }
.lkcm-section-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.lkcm-list { display: flex; flex-direction: column; gap: 8px; }
.lkcm-row { display: flex; align-items: center; gap: 10px; }
.lkcm-row .lkcm-label { flex: 1; min-width: 0; background: rgba(24,24,30,0.06); border: 1px solid rgba(24,24,30,0.164); border-radius: 7px; padding: 9px 11px; color: #17171b; font-size: 14px; font-family: var(--font); }
.lkcm-row .lkcm-label:focus { outline: none; border-color: var(--red); }
.lkcm-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: rgba(24,24,30,0.814); white-space: nowrap; cursor: pointer; }
.lkcm-chk input { width: auto; accent-color: var(--red); }
.lkcm-ok, .lkcm-del { width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.lkcm-ok { background: var(--red); color: #fff; }
.lkcm-ok:hover { background: var(--red-dark, #b00f27); }
.lkcm-del { background: rgba(24,24,30,0.08); color: rgba(24,24,30,0.702); }
.lkcm-del:hover { background: rgba(47,158,17,0.2); color: #17171b; }
.lkcm-add { display: flex; gap: 8px; margin-top: 10px; }
.lkcm-add input { flex: 1; min-width: 0; background: rgba(24,24,30,0.06); border: 1px dashed rgba(24,24,30,0.254); border-radius: 7px; padding: 9px 11px; color: #17171b; font-size: 14px; font-family: var(--font); }
.lkcm-add input:focus { outline: none; border-color: var(--red); }
.lkcm-add-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(47,158,17,0.15); border: 1px solid var(--red); color: #17171b; border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.lkcm-add-btn:hover { background: var(--red); }
.lkcm-msg { font-size: 13px; min-height: 18px; margin-top: 4px; }
.lkcm-msg.ok { color: #46c37b; }
.lkcm-msg.err { color: #9BFF3F; }
.lkcm-busy { opacity: .6; pointer-events: none; }

/* ===== Section « Profil à la une » dans la modale Gérer ===== */
.lkcm-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(24,24,30,0.982); cursor: pointer; margin-bottom: 12px; }
.lkcm-toggle input { width: auto; accent-color: var(--red); }
.lkfp-current { margin-bottom: 12px; }
.lkfp-empty { font-size: 13px; color: rgba(24,24,30,0.478); }
.lkfp-card { display: flex; align-items: center; gap: 10px; background: rgba(24,24,30,0.05); border: 1px solid rgba(24,24,30,0.164); border-radius: 10px; padding: 8px 10px; }
.lkfp-av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--grey,#ededef); display: flex; align-items: center; justify-content: center; }
.lkfp-av img { width: 100%; height: 100%; object-fit: cover; }
.lkfp-ini { font-weight: 800; color: #fff; }
.lkfp-txt { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.lkfp-name { font-weight: 700; font-size: 14px; color: #17171b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lkfp-role { font-size: 12px; color: #424246; }
.lkfp-remove { flex-shrink: 0; background: rgba(24,24,30,0.08); border: none; color: rgba(24,24,30,0.702); width: 28px; height: 28px; border-radius: 7px; font-size: 18px; line-height: 1; cursor: pointer; }
.lkfp-remove:hover { background: rgba(47,158,17,0.25); color: #17171b; }
.lkfp-search-wrap { position: relative; }
.lkfp-search { width: 100%; box-sizing: border-box; background: rgba(24,24,30,0.06); border: 1px dashed rgba(24,24,30,0.254); border-radius: 7px; padding: 9px 11px; color: #17171b; font-size: 14px; font-family: var(--font); }
.lkfp-search:focus { outline: none; border-color: var(--red); }
.lkfp-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: #eeeef0; border: 1px solid rgba(24,24,30,0.187); border-radius: 10px; max-height: 240px; overflow-y: auto; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.lkfp-results.show { display: block; }
.lkfp-res { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: #17171b; padding: 8px 10px; cursor: pointer; text-align: left; font-family: var(--font); font-size: 14px; }
.lkfp-res:hover { background: rgba(47,158,17,0.15); }
.lkfp-res .lkfp-av { width: 30px; height: 30px; }
.lkfp-nores { padding: 12px; font-size: 13px; color: rgba(24,24,30,0.59); text-align: center; }

/* Champ texte libre du profil à la une (modale Gérer) */
.lkcm-fieldlabel { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; color: rgba(24,24,30,0.758); }
/* Champ « nom de section » éditable : input + bouton de validation côte à côte. */
.lkcm-inline-save { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.lkcm-inline-save input { flex: 1 1 auto; }
.lkcm-inline-save .lkcm-add-btn { flex: 0 0 auto; }
.lkfp-text { width: 100%; box-sizing: border-box; background: rgba(24,24,30,0.06); border: 1px solid rgba(24,24,30,0.164); border-radius: 8px; padding: 10px 12px; color: #17171b; font-size: 14px; font-family: var(--font); resize: vertical; min-height: 60px; }
.lkfp-text:focus { outline: none; border-color: var(--red); }

/* ===== Menu Vidéos « Coup de pouce » (le layout 2 colonnes est défini dans le
   même bloc que .wl-cmenu-list plus haut, pour rester dans le bon contexte). ===== */
/* Carte vidéo Coup de pouce : vignette 16/9 + titre. */
.wl-boost-card { display: block !important; width: 300px; margin: 0 !important; padding: 0 !important; border-radius: 12px; overflow: hidden; background: #f3f3f5; transition: transform .2s; }
.wl-boost-card:hover { transform: translateY(-2px); }
.wl-boost-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; background: #f8f8fa; overflow: hidden; }
.wl-boost-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.wl-boost-card:hover .wl-boost-thumb img { transform: scale(1.05); }
.wl-boost-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.wl-boost-title { background: #f7f7f9; padding: 10px 12px 11px; font-weight: 800; font-size: 13.5px; color: #17171b; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wl-boost-note { width: 300px; max-width: 100%; margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #424246; }

/* Carte « Coup de projecteur » (maquette) : eyebrow + badge sélection, image + bookmark, titre, auteur + Découvrir. */
/* Row eyebrow + badge « Sélection » : même padding-haut que le titre « Catégorie »
   de la colonne gauche (4px) pour que les deux colonnes s'alignent sur la MÊME ligne. */
.wl-boost-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 10px; }
.wl-boost-eyebrow-row .wl-boost-eyebrow { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; padding: 0 !important; }
.wl-boost-eyebrow svg { color: var(--red); flex-shrink: 0; }
.wl-boost-pick { flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: rgba(24,24,30,0.478); white-space: nowrap; text-transform: none; }
body.pf-light .wl-boost-pick { color: #8a929b; }
.wl-boost-card2 { width: 100%; text-align: left; }
.wl-boost-card2 > *, .wl-boost-eyebrow2, .wl-boost-title2, .wl-boost-desc, .wl-boost-foot { margin-left: 0; margin-right: 0; }
/* Annule le padding générique des <a> du menu (.wl-cmenu-list a { padding:9px 12px })
   qui décalait le titre et l'auteur de la carte boost vers la droite. */
.wl-cmenu-list .wl-boost-card2 a,
.wl-cmenu-list .wl-boost-title2,
.wl-cmenu-list .wl-boost-author,
.wl-cmenu-list .wl-boost-media { padding: 0 !important; }
.wl-cmenu-list .wl-boost-title2:hover,
.wl-cmenu-list .wl-boost-author:hover { background: transparent !important; }
/* La règle générique .wl-cmenu-list a { display:block } cassait le flex du bloc
   auteur (avatar + texte passaient en colonne) : on rétablit la rangée. */
.wl-cmenu-list .wl-boost-author { display: inline-flex !important; align-items: center; flex-direction: row; }
.wl-cmenu-list .wl-boost-media { display: block !important; }
/* Bouton « Découvrir » : cercle rouge net (la règle générique .wl-cmenu-list a
   { display:block; padding:9px 12px } le déformait en rectangle). */
.wl-cmenu-list .wl-boost-discover { display: inline-flex !important; align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 50% !important; background: var(--red) !important; }
.wl-cmenu-list .wl-boost-discover svg { width: 13px; height: 13px; }
.wl-cmenu-list .wl-boost-discover:hover { background: #c7003a !important; }
/* Image et texte partent EXACTEMENT du même bord gauche (largeur 100%, aucun décalage). */
.wl-boost-media { position: relative; display: block; width: 100%; margin: 0; border-radius: 12px; overflow: hidden; }
.wl-boost-media .wl-boost-thumb { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 12px; }
.wl-boost-media .wl-boost-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wl-boost-save { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.wl-boost-save:hover { background: rgba(0,0,0,.72); }
.wl-boost-save.on { color: var(--red); }
/* Eyebrow « GENRE · BANDE-ANNONCE » au-dessus du titre (rouge, petit, espacé). */
.wl-boost-eyebrow2 { margin: 13px 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--red); line-height: 1; }
.wl-boost-title2 { display: block; margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #17171b; line-height: 1.22; text-decoration: none; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-boost-title2:hover { color: var(--red); }
/* Synopsis court sous le titre. */
.wl-boost-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: rgba(24,24,30,0.646);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-boost-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(24,24,30,0.12); }
.wl-boost-author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; margin-right: auto; }
.wl-boost-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wl-boost-av-ph { display: inline-flex; align-items: center; justify-content: center; background: #ebebed; color: #17171b; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.wl-boost-authtxt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.wl-boost-eyebrow3 { font-size: 10.5px; font-weight: 600; color: rgba(24,24,30,0.478); line-height: 1; }
.wl-boost-nm { font-size: 13.5px; font-weight: 700; color: #17171b; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-boost-author:hover .wl-boost-nm { color: var(--red); }
/* Bouton « Découvrir » : cercle rouge avec flèche (façon maquette). */
.wl-boost-discover { margin-left: auto; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.wl-boost-discover:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47,158,17,.4); }
body.pf-light .wl-boost-desc { color: #6b7580; }
body.pf-light .wl-boost-eyebrow3 { color: #8a929b; }
body.pf-light .wl-boost-nm { color: #13151a; }
body.pf-light .wl-boost-foot { border-top-color: #e4e8ec; }
/* Vignette vidéo (rectangulaire) dans la modale de gestion. */
.lkfp-av-video { width: 56px !important; height: 34px !important; border-radius: 6px !important; }

/* ===== Barre de progression de navigation (type YouTube/GitHub) ===== */
.wl-page-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 100000;
  background: var(--red, #2F9E11);
  box-shadow: 0 0 10px rgba(47,158,17,0.7), 0 0 5px rgba(47,158,17,0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.wl-page-progress.is-active {
  opacity: 1;
  transition: transform .18s ease-out;
}
/* Finition : remplissage rapide jusqu'à 100% puis fondu. */
.wl-page-progress.is-done {
  transition: transform .2s ease-out, opacity .25s ease .15s;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wl-page-progress, .wl-page-progress.is-active, .wl-page-progress.is-done { transition: none; }
}

/* ===== Mobile / tactile : pas d'effets d'interaction sur les cartes =====
   Sur un écran tactile, le hover « colle » et les animations (transform, box-shadow,
   transition) sont inutiles. On les neutralise pour les cartes de contenu et affiches. */
@media (hover: none) {
  .card,
  .card-poster,
  .oc-cast,
  .card-profile {
    transition: none !important;
    box-shadow: none !important;
  }
  .card:hover,
  .card-poster:hover,
  .oc-cast:hover,
  .card-profile:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
  }
  /* L'affiche ne se zoome plus au « hover » tactile. */
  .card-poster:hover .poster-img .poster-fg { transform: none !important; }
}