/* ═══════════════════════════════════════════════════════════════
   AUTHOR PAGE — Page publique de l'auteur (gamification hero +
   liste de recettes inspirée de recipes-movie.css)
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   BODY : lever la contrainte max-width de base.css
   (même traitement que .profile-page dans user-profile.css)
   → hero, pre-footer et footer passent en full width
───────────────────────────────────────────────────── */
body.author-page {
  max-width: unset;
  padding: 0;          /* annule le padding: 2rem 1rem 0 de base.css */
}

body.author-page main {
  padding-top: var(--nav-h); /* compense la nav fixe (identique à body.film-page) */
}

/* ─────────────────────────────────────────────────────
   OVERRIDES hero : read-only (pas de formulaire)
───────────────────────────────────────────────────── */
.author-page .profile-hero {
  margin-bottom: 0;
}

/* Positionnement bas du hero */
.author-page .hero-content {
  padding-bottom: 36px;
}

/* Gap réduit entre avatar et identité */
.author-page .hero-row {
  gap: 28px;
}

/* Le pseudo est un <h1> statique — style page-hero__title (Movies) */
.author-page .hero-pseudo--static {
  font-family: var(--font-display, "Bebas Neue", cursive);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  letter-spacing: 0.08em;
  line-height: 0.95;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
  margin: 0 0 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

/* Dernier mot en doré (identique à .page-hero__title em) */
.author-page .hero-pseudo--static em {
  color: var(--or-titre, #c4a052);
  font-style: normal;
}

/* Rang / niveau */
.author-page .hero-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  background: rgba(80, 130, 255, 0.10);
  border: 1px solid rgba(120, 190, 255, 0.22);
  font-family: var(--font-title, "Cinzel", serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(120, 190, 255, 0.88);
}

.author-page .hero-rank-badge svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Variante officiel — pill rouge (admin / superadmin) */
.author-page .hero-rank-badge--official {
  color: rgba(255, 90, 90, .92);
  background: rgba(200, 40, 40, .14);
  border-color: rgba(220, 60, 60, .32);
  border-radius: 50px;
}

/* Titre rang (ex: "Explorateur Cuisinier") */
.author-page .hero-rank-title {
  font-family: var(--font-editorial, "Playfair Display", serif);
  font-style: italic;
  font-weight: 700;
  font-size: 0.88rem;
  color: rgba(196, 160, 82, 0.7);
  margin-bottom: 14px;
}

/* Stats row — flex-end pour aligner tous les labels en bas */
.author-page .hero-stats-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 14px;
}

/* XP bar dans le hero */
.author-page .hero-xp {
  max-width: 300px;
}

.author-page .hero-xp__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.author-page .hero-xp__lbl {
  font-size: 0.68rem;
  font-weight: 300;
  color: rgba(232, 232, 232, 0.38);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.author-page .hero-xp__val {
  font-family: var(--font-display, "Bebas Neue", cursive);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--dore-clair, #f2c84b);
}

.author-page .hero-xp__track {
  height: 5px;
  border-radius: 3px;
  background: rgba(65, 90, 119, 0.3);
  overflow: hidden;
}

.author-page .hero-xp__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--or-200, #b8882a), var(--dore-clair, #f2c84b));
  width: 0;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.author-page .hero-xp__fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: rgba(255, 255, 255, 0.5);
  animation: xpPulse 2s ease-in-out infinite;
}

@keyframes xpPulse {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.9; }
}

.author-page .hero-xp__remain {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 300;
  color: rgba(232, 232, 232, 0.3);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────
   SECTION RECETTES
───────────────────────────────────────────────────── */
.author-recipes-section {
  width: min(var(--cd-max, 1440px), 100% - 2 * var(--cd-px, 2rem));
  margin: 0 auto;
  padding: 40px 0 0;
}

/* Grille 4 colonnes — surcharge recipes-movie.css (3 col) */
.author-page .recipes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* ─── Toolbar (style films-toolbar de /movies) ─── */
.author-films-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 0;
  margin-bottom: 0;
}
.author-films-toolbar .tb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.author-films-toolbar .tb-label {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(196, 160, 82, 0.48);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.author-films-toolbar .tb-label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--or-titre, #c4a052);
}
.author-films-toolbar .tb-title {
  font-family: var(--font-display, "Bebas Neue", cursive);
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--or-titre, #c4a052);
  text-shadow: 0 0 28px rgba(196, 160, 82, 0.28);
  margin: 0;
}
.author-recipe-count {
  font-family: var(--font-display, "Bebas Neue", cursive);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: rgba(196, 160, 82, 0.38);
}

/* Icône + label "Filtrer" (dans tb-right) */
.af-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title, "Cinzel", serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 160, 82, 0.45);
  margin-right: 4px;
}
.af-label svg {
  color: rgba(196, 160, 82, 0.45);
}

/* Message vide */
.author-no-recipes {
  text-align: center;
  padding: 60px 20px;
  color: rgba(232, 232, 232, 0.35);
  font-style: italic;
  font-size: 0.9rem;
}


/* ─────────────────────────────────────────────────────
   CADRES GAMIFICATION — pastilles hero-stats-row
───────────────────────────────────────────────────── */
.author-page .h-stat--frames {
  gap: 5px;
}

.author-page .h-frames-row {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
  /* compense la hauteur pour aligner le label avec les autres h-stat__lbl */
  margin-bottom: 1px;
}

/* Le séparateur reste centré verticalement entre les blocs */
.author-page .hero-stats-row .h-stat-div {
  align-self: center;
}

/* Pastille ronde — état de base */
.author-page .h-frame-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 160, 82, 0.3);
  background-color: rgba(196, 160, 82, 0.07);
  background-size: cover;
  background-position: center;
  font-size: 0.82rem;
  line-height: 1;
  cursor: default;
  z-index: 1;
  transition:
    border-color  .25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-width  .25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform     .3s  cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow    .25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter        .25s ease;
}

/* Hover — flottaison + halo doré + luminosité */
.author-page .h-frame-pill:hover {
  transform: scale(1.28) translateY(-4px);
  border-color: var(--or-titre, #c4a052);
  border-width: 2px;
  box-shadow:
    0 0 0 2px rgba(196, 160, 82, 0.2),
    0 6px 18px rgba(196, 160, 82, 0.45),
    0 3px 8px  rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
  z-index: 10;
}

/* Tooltip — nom du cadre au dessus */
.author-page .h-frame-pill::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(8, 15, 28, 0.94);
  border: 1px solid rgba(196, 160, 82, 0.28);
  color: rgba(232, 232, 232, 0.88);
  font-family: var(--font-title, "Cinzel", serif);
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   .2s ease,
    transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Petite flèche sous le tooltip */
.author-page .h-frame-pill::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  border: 4px solid transparent;
  border-top-color: rgba(196, 160, 82, 0.28);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   .2s ease,
    transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.author-page .h-frame-pill:hover::after,
.author-page .h-frame-pill:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Cadre verrouillé — grisé, image désaturée, pas de hover élaboré */
.author-page .h-frame-pill--locked {
  border-color: rgba(100, 120, 150, 0.2);
  background-color: rgba(20, 30, 48, 0.5);
  filter: grayscale(1) brightness(0.45);
  cursor: default;
}

.author-page .h-frame-pill--locked:hover {
  transform: scale(1.08) translateY(-2px);
  border-color: rgba(100, 120, 150, 0.35);
  box-shadow: none;
  filter: grayscale(1) brightness(0.55);
}

/* Cadre actif — anneau doré permanent */
.author-page .h-frame-pill--active {
  border-color: var(--or-titre, #c4a052);
  border-width: 2px;
  box-shadow:
    0 0 0 1.5px rgba(196, 160, 82, 0.2),
    0 0 10px   rgba(196, 160, 82, 0.28);
}

.author-page .h-frame-pill--active:hover {
  box-shadow:
    0 0 0 2px rgba(196, 160, 82, 0.3),
    0 6px 20px rgba(196, 160, 82, 0.5),
    0 3px 8px  rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .author-page .recipes-grid { grid-template-columns: repeat(3, 1fr); }
}

/* @media (max-width: 1100px) — supprimé : gutters gérés par width: min() dans .author-recipes-section */

@media (max-width: 860px) {
  .author-page .recipes-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .author-recipes-section {
    padding-top: 24px;
  }

  .author-films-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .author-films-toolbar .tb-title { font-size: 1.8rem; }
  .author-quick-tags .quick-tags-row { gap: 6px; padding-bottom: 6px; }
}

@media (max-width: 540px) {
  .author-page .recipes-grid { grid-template-columns: 1fr; }
}

/* ar-grid-wrap imbriqué dans author-recipes-section — annule le double-gutter de all-recipes.css */
.author-page .ar-grid-wrap {
  width: 100%;
  margin: 0;
}

/* Recipe cards sur la page auteur — variante centralisée dans base.css */


/* ── CTA "Proposer un film" — copie des règles de movies.css ── */
.author-cta-wrap {
  width: min(1440px, 100% - 2 * var(--cd-px, 2rem));
  margin: 56px auto 80px;
}
.author-cta-wrap .fcard.fcard--cta { margin: 0; grid-column: unset; }
.fcard.fcard--cta { background:none; border:none; box-shadow:none; border-radius:20px; overflow:visible; }
.fcard.fcard--cta::before { display:none; }
.fcard.fcard--cta:hover { transform:none; border-color:transparent; box-shadow:none; }
.fcard--cta__link { display:flex; flex-direction:row; align-items:center; gap:0; text-decoration:none; color:inherit; width:100%; min-height:220px; padding:40px 0 40px 52px; position:relative; overflow:hidden; background:linear-gradient(135deg,#5c0b05 0%,#8b1c13 28%,#c23018 58%,#d43a20 80%,#e04422 100%); border-radius:20px; border:1px solid rgba(194,48,24,.42); box-shadow:0 20px 60px rgba(194,48,24,.30),0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07); transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease; }
.fcard--cta:hover .fcard--cta__link { transform:translateY(-5px); box-shadow:0 32px 80px rgba(194,48,24,.42),0 12px 32px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.11); border-color:rgba(194,48,24,.68); }
.fcard--cta__shimmer { position:absolute; inset:0; z-index:1; pointer-events:none; }
.fcard--cta__shimmer::after { content:''; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); transform:translateX(-120%) skewX(-18deg); }
.fcard--cta:hover .fcard--cta__shimmer::after { animation:ctaShimmer .75s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes ctaShimmer { 0%{transform:translateX(-120%) skewX(-18deg)} 100%{transform:translateX(320%) skewX(-18deg)} }
.fcard--cta__body { flex:0 0 42%; min-width:0; position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; padding-right:36px; }
.fcard--cta__eyebrow { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-title); font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.40); }
.fcard--cta__title { font-family:var(--f-display); font-size:2.8rem; letter-spacing:.06em; line-height:.92; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25); }
.fcard--cta__title em { display:block; font-style:normal; color:rgba(255,210,170,.88); }
.fcard--cta__desc { font-size:.76rem; line-height:1.65; font-weight:300; color:rgba(255,255,255,.52); max-width:460px; }
.fcard--cta__action { display:inline-flex; align-items:center; gap:9px; padding:0 22px; height:44px; border-radius:10px; background:var(--gold-gradient); color:var(--bleu-nuit); font-family:var(--f-title); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 0 24px rgba(196,160,82,.30),0 6px 20px rgba(0,0,0,.30); transition:all .3s cubic-bezier(.22,1,.36,1); align-self:flex-start; margin-top:6px; border:none; }
.fcard--cta:hover .fcard--cta__action { transform:translateY(-2px); box-shadow:0 0 40px rgba(196,160,82,.48),0 10px 28px rgba(0,0,0,.40); }
.fcard--cta__deco { flex:1; min-width:0; overflow:hidden; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:12px; opacity:.58; transition:opacity .4s ease; mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%); -webkit-mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%); }
.fcard--cta:hover .fcard--cta__deco { opacity:.90; }
.fcard--cta__poster-row { overflow:hidden; }
.fcard--cta__poster-track { display:flex; gap:12px; width:max-content; }
.fcard--cta__poster-row--left  .fcard--cta__poster-track { animation:posterScrollLeft  18s linear infinite; }
.fcard--cta__poster-row--right .fcard--cta__poster-track { animation:posterScrollRight 24s linear infinite; }
@keyframes posterScrollLeft  { from{transform:translateX(0)}   to{transform:translateX(-50%)} }
@keyframes posterScrollRight { from{transform:translateX(-50%)} to{transform:translateX(0)}   }
.fcard--cta__mini { width:90px; height:127px; border-radius:9px; overflow:hidden; flex-shrink:0; border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 20px rgba(0,0,0,.45); transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease; cursor:default; }
.fcard--cta__mini:hover { transform:scale(1.12) translateY(-5px); border-color:rgba(255,255,255,.55); box-shadow:0 16px 36px rgba(0,0,0,.65); z-index:3; }
.fcard--cta__mini img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px) { .fcard--cta__deco{display:none} .fcard--cta__link{padding:32px 36px} }
@media (max-width:600px) { .fcard--cta__title{font-size:2rem} .fcard--cta__link{padding:28px 24px} }

@media (max-width: 480px) {
  /* Pseudo : autorise le retour à la ligne sur petits écrans */
  .author-page .hero-pseudo--static {
    white-space: normal;
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }
  .author-films-toolbar .tb-title { font-size: 1.5rem; }
  .fcard--cta__link { padding: 22px 18px; }
  .fcard--cta__title { font-size: 1.7rem; }
}
@media (max-width: 420px) {
  .author-page .hero-pseudo--static { font-size: clamp(1.5rem, 8vw, 1.8rem); }
  .author-quick-tags .quick-tags-row { gap: 4px; }
}

/* ══ MOBILE FIXES — placés après les composants pour priorité CSS ══ */
@media (max-width: 480px) {
  /* 1. Banner CTA rouge — même fix que movies.css */
  .author-cta-wrap .fcard--cta__link {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
    min-height: unset;
    gap: 12px;
  }
  .author-cta-wrap .fcard--cta__body {
    flex: 1 1 100% !important;
    width: 100%;
    padding-right: 0;
  }
  .author-cta-wrap .fcard--cta__eyebrow { display: none; }
  .author-cta-wrap .fcard--cta__title { font-size: 1.6rem; line-height: 1.1; }
  .author-cta-wrap .fcard--cta__title em { display: inline; }
  .author-cta-wrap .fcard--cta__desc { font-size: 0.72rem; }
  .author-cta-wrap .fcard--cta__poster-row { display: none; }
  .author-cta-wrap .fcard--cta__action { align-self: stretch; justify-content: center; }

  /* 2. Grille recettes — moins de marges latérales */
  .author-recipes-section {
    width: min(1440px, 100% - 2 * 1rem);
  }
}