/* ============================================================================
   MWF — Design profil « CINÉMA / FESTIVAL » (démo)
   Surcouche optionnelle activée par ?design=cinema. Chargée APRÈS le CSS inline
   du profil → surcharge les classes pf-* sans toucher au HTML ni à la logique.
   Univers : affiche de film, bannière immersive, magenta MWF.
   ========================================================================== */

/* --- Conteneur : pleine largeur immersive (au lieu de la carte 960px) --- */
.pf-card-wrap {
  max-width: 1240px !important;   /* MÊME largeur que le header/menu (mwf-nav-inner 1240px) */
  padding: 16px 24px 0 !important;/* padding latéral = ne pas dépasser + espace sous la backbar */
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* --- Corps du profil (stats, onglets, publications) : MÊME largeur que la
   cover/le header (1240px), sinon le contenu reste étroit (960px) sous une
   cover large. --- */
.pf-wrap {
  max-width: 1240px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* --- Zone publications élargie : main plus large, aside plus fine --- */
.pf-fp-layout { grid-template-columns: 1fr 320px !important; gap: 34px !important; }

/* Aligner le HAUT de l'aside (À propos) sur la 1re carte de gauche : la colonne
   gauche a un titre « PUBLICATIONS » (h2 + marge) au-dessus des cartes ; on
   décale l'aside de la même hauteur pour que les deux démarrent au même niveau. */
.pf-fp-aside { margin-top: 41px !important; }
@media (max-width: 1080px) { .pf-fp-aside { margin-top: 0 !important; } }

/* --- Cartes de contenu HORIZONTALES, disposées en 2 COLONNES --- */
.pf-fp-main .grid-news,
.pf-panel .grid-news {
  grid-template-columns: repeat(2, 1fr) !important;   /* 2 cartes par ligne */
  gap: 16px !important;
}
.pf-fp-main .card,
.pf-panel .card {
  display: grid !important;
  grid-template-columns: 150px 1fr !important;  /* vignette | texte (plus compact en 2 col) */
  align-items: stretch !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.pf-fp-main .card .card-img,
.pf-panel .card .card-img {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 100px !important;
}
.pf-fp-main .card .card-body,
.pf-panel .card .card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 14px 16px !important;
}
.pf-fp-main .card .card-title,
.pf-panel .card .card-title {
  font-size: 1rem !important;
  -webkit-line-clamp: 2 !important;
}
/* 1 colonne quand la zone principale devient étroite (aside encore présente) */
@media (max-width: 1080px) {
  .pf-fp-main .grid-news, .pf-panel .grid-news { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .pf-fp-main .card, .pf-panel .card { grid-template-columns: 1fr !important; }
  .pf-fp-main .card .card-img, .pf-panel .card .card-img { aspect-ratio: 16/9 !important; min-height: 0 !important; }
}
.pf-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* --- Cover : bannière cinéma. Hauteur contenue + max-width pour ne pas
   sur-agrandir une image basse résolution (sinon pixelisation en pleine
   largeur). L'image garde son cadrage (cover) mais s'étale moins. --- */
.pf-cover {
  height: 340px !important;
  max-height: 42vh !important;        /* borne relative à l'écran */
  border-radius: 16px !important;     /* coins arrondis = look carte, pas plein bord */
  border-bottom: none !important;
  margin: 0 !important;               /* reste dans le conteneur (pas de débordement) */
  background-size: cover !important;
  background-position: center 30% !important;
}
.pf-cover::after {
  background: linear-gradient(to top,
    var(--mwf-bg) 2%,
    color-mix(in srgb, var(--mwf-accent) 42%, transparent) 40%,
    transparent 78%) !important;
  inset: 0 !important;
}
.pf-cover.no-img {
  background:
    radial-gradient(120% 90% at 78% 20%, color-mix(in srgb, var(--mwf-accent) 62%, #12030c) 0%, transparent 60%),
    linear-gradient(135deg, #12030c 0%, #0a0e1a 62%) !important;
}

/* --- Entête : avatar + nom qui chevauchent la bannière, style affiche --- */
.pf-head {
  margin-top: -110px !important;
  padding: 0 !important;
  gap: 14px !important;
  z-index: 3 !important;
}

/* Avatar : carré à coins arrondis (façon vignette de casting), grande taille */
.pf-avatar, .pf-avatar-ph {
  width: 148px !important;
  height: 148px !important;
  border-radius: 20px !important;
  border: 3px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.55) !important;
  font-size: 54px !important;
  margin-top: 0 !important;
}
.pf-avatar-wrap { align-self: flex-start; }

/* Nom : très grand, majuscules serrées, façon générique de film */
.pf-name {
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.pf-tagline {
  font-size: 1.05rem !important;
  color: var(--mwf-accent) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
.pf-role .pf-badge {
  background: color-mix(in srgb, var(--mwf-accent) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--mwf-accent) 45%, transparent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .74rem;
}

/* --- Boutons d'action : pilules pleines, plus grosses --- */
.pf-btn {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}
/* Bouton bascule thème : aligné sur la taille/forme des pilules (carré→rond 42px). */
.pf-theme-toggle {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.16) !important;
  flex-shrink: 0 !important;
}
.pf-btn.ghost {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.pf-btn.ghost:hover {
  border-color: var(--mwf-accent) !important;
  color: var(--mwf-accent) !important;
}

/* --- Stats : en cartes séparées (façon billetterie) au lieu d'une ligne --- */
.pf-stats {
  gap: 12px !important;
  padding: 22px 0 0 !important;
  flex-wrap: wrap !important;
}
.pf-stat {
  background: var(--mwf-bg-soft) !important;
  border: 1px solid var(--mwf-line) !important;
  border-radius: 14px !important;
  padding: 12px 22px !important;
  min-width: 96px;
}
.pf-stat b { color: var(--mwf-accent) !important; font-size: 1.4rem !important; }
.pf-stat span { display: block; margin-left: 0 !important; }

/* --- Onglets : pilules au lieu de soulignés --- */
.pf-tabs {
  border-top: none !important;
  gap: 8px !important;
  padding: 26px 0 0 !important;
}
.pf-tab {
  border: 1px solid var(--mwf-line) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: .88rem !important;
  color: var(--mwf-muted) !important;
}
.pf-tab:hover { border-color: color-mix(in srgb, var(--mwf-accent) 40%, transparent) !important; color: #fff !important; }
.pf-tab.active {
  background: var(--mwf-accent) !important;
  border-color: var(--mwf-accent) !important;
  color: #fff !important;
}

/* --- Corps des panneaux : espace au-dessus (entre onglets et contenu) --- */
.pf-panel { padding: 24px 0 40px !important; }
/* État vide (ex. « Aucune publication ») : plus aéré */
.pf-empty { padding: 60px 20px !important; }

/* --- Responsive : recadrer les marges sur mobile --- */
@media (max-width: 760px) {
  .pf-cover { height: 240px !important; }
  .pf-head { margin-top: -90px !important; padding: 0 18px !important; }
  .pf-avatar, .pf-avatar-ph { width: 110px !important; height: 110px !important; font-size: 40px !important; }
  .pf-stats, .pf-tabs, .pf-panel { padding-left: 18px !important; padding-right: 18px !important; }
}

/* --- Mobile : le layout publications (main + aside) repasse en UNE colonne.
   Le design cinema force 1fr 320px !important ; sans surcharge mobile, l'aside
   « Top vu » écrasait le contenu principal. --- */
@media (max-width: 860px) {
  .pf-fp-layout { grid-template-columns: 1fr !important; gap: 22px !important; }
  .pf-fp-main, .pf-fp-aside { min-width: 0 !important; max-width: 100% !important; }
  .pf-fp-aside { margin-top: 0 !important; }
  .pf-fp-main .grid-news, .pf-panel .grid-news { grid-template-columns: 1fr !important; }
  /* Garde-fou : rien ne dépasse horizontalement l'écran sur le profil. */
  .pf-card-wrap, .pf-wrap, .pf-panel { overflow-x: hidden !important; }
  .pf-panel .card { grid-template-columns: 1fr !important; }
}

/* --- Mobile : stats et actions sur UNE seule ligne, swipe horizontal
   (surcharge le flex-wrap:wrap du design cinema). --- */
@media (max-width: 860px) {
  .pf-stats {
    flex-wrap: nowrap !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 6px !important;
  }
  .pf-stats::-webkit-scrollbar { display: none; }
  .pf-stats > * { flex-shrink: 0 !important; }
  .pf-actions {
    flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%;
  }
  .pf-actions::-webkit-scrollbar { display: none; }
  .pf-actions > * { flex-shrink: 0 !important; }
  /* Onglets : chaque pilule sur une seule ligne, pas de compression
     (sinon « À propos » se casse en deux lignes). */
  .pf-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  .pf-tabs::-webkit-scrollbar { display: none; }
  .pf-tab { flex-shrink: 0 !important; white-space: nowrap !important; }
}