/* Sylvestre UI — page d'accueil (hub de contenu). */

.home-hero { position: relative; text-align: center; overflow: visible; }
.home-hero .inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }

/* Vidéo à la une */
.feature-video {
  position: relative;
  max-width: 880px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  aspect-ratio: 16/9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(76,203,99,0.16), transparent 60%),
    linear-gradient(160deg, #16241b, #080808 80%);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(76,203,99,0.12);
  display: flex; align-items: center; justify-content: center;
}
a.feature-video { text-decoration: none; color: inherit; cursor: pointer; }
.feature-video .fv-eyebrow { position: absolute; top: 18px; left: 22px; }
.feature-video .play-orb { width: 78px; height: 78px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.feature-video .play-orb:hover,
a.feature-video:hover .play-orb { transform: scale(1.06); }
.feature-video .fv-foot { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
/* Titre superposé masqué (la vignette porte déjà le titre) — on garde juste la durée */
.feature-video .fv-title { display: none; }
.feature-video .fv-dur { font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }
.feature-video .v-img { z-index: 0; }
.feature-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.5)); z-index: 0; pointer-events: none; }
.feature-video .fv-eyebrow, .feature-video .play-orb, .feature-video .fv-foot { z-index: 1; }
a.fv-title { transition: color var(--dur-fast); }
a.fv-title:hover { color: var(--accent); }

/* Marquee outils */
.marquee { position: relative; overflow: hidden; }
/* Fondu des bords par dégradés superposés au lieu de `mask-image` : sur Android,
   le masque crée une couche de compositing persistante qui corrompt le repaint
   du reste de la page pendant le scroll (bande noire). */
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 13%; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-base), rgba(5, 5, 5, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-base), rgba(5, 5, 5, 0)); }
/* Défilement piloté en JS via scrollLeft (ui.js) — PAS d'animation CSS sur
   `transform` : une couche compositée animée en continu provoque des artefacts de
   repaint au scroll sur certains GPU Android. Le scroll programmatique évite ça,
   et le bandeau peut donc rester affiché aussi sur mobile. */
.marquee-track { display: inline-flex; align-items: center; gap: clamp(28px, 5vw, 64px); white-space: nowrap; }
.marquee .brand-logo { height: 30px; opacity: 0.72; }
.marquee .brand-logo:hover { opacity: 1; filter: brightness(0) invert(0.88); }
/* Sur mobile, tout défilement continu du bandeau (CSS transform OU JS scrollLeft)
   déclenche des artefacts de compositing sur certains GPU Android. On remplace donc
   le bandeau défilant par des logos STATIQUES sur mobile (aucune couche animée). */
.tools-static { display: none; }
@media (max-width: 900px) {
  .marquee { display: none; }
  .tools-static {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 20px 30px;
  }
  .tools-static .brand-logo { height: 26px; opacity: 0.72; }
}

/* Cartes "pourquoi" */
.why-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); padding: clamp(24px, 3vw, 32px); transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.why-card:hover { border-color: var(--border-accent); box-shadow: 0 0 32px rgba(76,203,99,0.08); }
.why-card .ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--icon-frame); border: 1px solid var(--border-default); color: var(--text-secondary); margin-bottom: 18px; }
.why-card h3 { font-size: 1.18rem; margin: 0 0 10px; }
.why-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* Grille vidéos */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
.video-card { display: flex; flex-direction: column; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.video-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 0 32px rgba(76,203,99,0.1); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(160deg, #16241b, #0a0a0a 78%); display: flex; align-items: center; justify-content: center; }
.video-thumb .play-orb { width: 52px; height: 52px; }
.video-thumb .v-dur { position: absolute; bottom: 10px; right: 10px; padding: 2px 8px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.65); font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.video-card .v-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.video-card .v-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.video-card .v-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); }

/* Shorts */
.shorts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.shorts-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.5vw, 18px); }
.short-card { position: relative; aspect-ratio: 9/16; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); background: linear-gradient(165deg, #16241b, #0a0a0a 80%); display: flex; align-items: flex-end; cursor: pointer; transition: border-color var(--dur-base), transform var(--dur-base); }
.short-card:hover { border-color: var(--border-accent); transform: translateY(-3px); }
.short-card .play-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
.short-card .s-cap { position: relative; z-index: 1; padding: 14px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.4; background: linear-gradient(transparent, rgba(0,0,0,0.6)); width: 100%; }

/* Explorer (liste numérotée) */
.explore-list { display: flex; flex-direction: column; gap: 10px; }
.explore-row { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 28px); padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 30px); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); transition: border-color var(--dur-base), background var(--dur-base); }
.explore-row:hover { border-color: var(--border-accent); background: radial-gradient(120% 200% at 0% 50%, rgba(76,203,99,0.06), var(--surface-card) 60%); }
.explore-row .num { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--text-secondary); width: 40px; flex: none; }
.explore-row .ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--icon-frame); border: 1px solid var(--border-default); color: var(--text-secondary); }
.explore-row .ex-body { flex: 1; min-width: 0; }
.explore-row .ex-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; }
.explore-row .ex-desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }
.explore-row .ex-cta { flex: none; font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

/* Blog */
.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-card); transition: border-color var(--dur-base), box-shadow var(--dur-base); cursor: pointer; }
.blog-featured:hover { border-color: var(--border-accent); box-shadow: 0 0 40px rgba(76,203,99,0.08); }
.blog-featured .b-media { position: relative; min-height: 280px; background: linear-gradient(155deg, #1a2a1f, #0a0a0a 76%); border-right: 1px solid var(--border-subtle); }
.blog-featured .b-body { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); transition: border-color var(--dur-base), transform var(--dur-base); cursor: pointer; }
.blog-card:hover { border-color: var(--border-accent); transform: translateY(-3px); }
.blog-card .b-media { position: relative; aspect-ratio: 16/9; background: linear-gradient(155deg, #1a2a1f, #0a0a0a 76%); border-bottom: 1px solid var(--border-subtle); }
.blog-card .b-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.blog-meta .date { color: var(--text-tertiary); font-weight: 500; letter-spacing: 0.04em; }
.blog-tag { position: absolute; top: 14px; left: 14px; padding: 4px 11px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.5); border: 1px solid var(--border-default); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* Newsletter */
.newsletter { border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); background: radial-gradient(80% 160% at 0% 0%, rgba(76,203,99,0.08), var(--surface-card) 55%); padding: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form .input { flex: 1; height: 50px; border-radius: var(--radius-pill); padding: 0 22px; }
.newsletter-form .btn { height: 50px; padding: 0 26px; }
.newsletter-ok { font-size: 14px; color: var(--accent); font-weight: 600; margin-top: 12px; }

/* Module blog (home) — éditorial : 1 article à la une + liste des suivants */
.home-blog { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.bl-feature {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl);
  background: radial-gradient(95% 80% at 100% 0%, rgba(76, 203, 99, 0.1), var(--surface-card) 58%);
  padding: clamp(28px, 3vw, 40px);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.bl-feature:hover { border-color: var(--border-accent); box-shadow: 0 0 40px rgba(76, 203, 99, 0.08); transform: translateY(-2px); }
.bl-feature .deco { position: absolute; right: -18px; bottom: -26px; color: rgba(76, 203, 99, 0.07); pointer-events: none; }
.bl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid var(--border-accent); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.bl-feature h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.16; letter-spacing: -0.02em; margin: 16px 0 0; }
.bl-feature .ex { font-size: 1rem; color: var(--text-secondary); line-height: 1.62; margin: 12px 0 0; }
.bl-feature .more { font-size: 14px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }

.bl-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--surface-card); overflow: hidden; }
.bl-row { display: flex; align-items: center; gap: 14px; padding: clamp(15px, 1.7vw, 19px) clamp(18px, 2vw, 24px); border-top: 1px solid var(--border-subtle); transition: background var(--dur-fast); }
.bl-row:first-child { border-top: none; }
.bl-row:hover { background: rgba(255, 255, 255, 0.02); }
.bl-row .content { flex: 1; min-width: 0; }
.bl-row .meta { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 7px; }
.bl-row .meta .cat { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bl-row .meta .dt { color: var(--text-tertiary); }
.bl-row .ttl { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); transition: color var(--dur-fast); }
.bl-row:hover .ttl { color: var(--accent); }
.bl-row .arr { flex: none; color: var(--text-tertiary); transition: color var(--dur-fast), transform var(--dur-fast); }
.bl-row:hover .arr { color: var(--accent); transform: translateX(2px); }

/* Miniatures YouTube sur les vignettes vidéo + shorts */
.v-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.42)); z-index: 0; pointer-events: none; }
.video-thumb .play-orb { position: relative; z-index: 1; }
.video-thumb .v-dur { z-index: 1; }
.short-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.5)); z-index: 0; pointer-events: none; }
.short-card .play-orb { z-index: 1; }
.short-card .s-cap { z-index: 1; }

/* Recherche tutoriels */
.tuto-search { position: relative; max-width: 440px; margin: 0 auto clamp(18px, 2.5vw, 26px); }
.tuto-search .input { height: 46px; padding-left: 44px; border-radius: var(--radius-pill); }
.tuto-search .s-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; display: inline-flex; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(28px, 4vw, 40px); }
.pagination button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-default); color: var(--text-secondary); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.pagination button:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-accent); }
.pagination button.is-on { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); box-shadow: var(--glow-sm); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .dots { color: var(--text-tertiary); padding: 0 2px; }

/* Modal lecteur de short (vertical) */
.short-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(8px); }
.short-modal.open { display: flex; }
.short-modal-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.short-modal-inner { position: relative; width: min(420px, 90vw); aspect-ratio: 9/16; max-height: 82vh; border-radius: var(--radius-xl); overflow: hidden; background: #000; border: 1px solid var(--border-default); box-shadow: var(--shadow-xl); }
.short-modal-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.short-modal-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.short-modal-yt { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast); }
.short-modal-yt:hover { color: var(--accent); }
.short-modal-close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(12px); color: #fff; cursor: pointer; z-index: 2; }
.short-modal-close:hover { background: rgba(255, 255, 255, 0.18); }

@media (max-width: 980px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .shorts-row { grid-template-columns: repeat(3, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured .b-media { border-right: none; border-bottom: 1px solid var(--border-subtle); min-height: 200px; }
  .home-blog { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .video-grid { grid-template-columns: 1fr; }
  .shorts-row { grid-template-columns: repeat(2, 1fr); }
  .explore-row { flex-wrap: wrap; }
  .explore-row .ex-cta { width: 100%; justify-content: flex-end; }
  .newsletter-form { flex-direction: column; }
  /* En colonne, `flex: 1` écraserait la HAUTEUR de l'input (axe principal) ; on le
     remet à `none` pour qu'il garde ses 50 px. Input + bouton en pleine largeur. */
  .newsletter-form .input { flex: none; width: 100%; }
  .newsletter-form .btn { width: 100%; }
}