/* ============================================================
   PAGE — LES PUBLICITÉS UGC (métier 05)
   Mécanique signature : LE MUR D'ACCROCHES — six cadres 9:16
   construits en CSS pur, révélés en décalé, dont un porte une
   boucle vidéo muette. On montre l'anatomie d'une accroche,
   jamais une performance. Aucun chiffre, aucune preuve inventée.
   ============================================================ */

/* ---------- héros ---------- */
.ugc-hero { display: flex; align-items: flex-end; padding-bottom: 12vh; }
.ugc-hero .statement { padding: 0 clamp(1.25rem, 5vw, 4rem); }
.ugc-hero .kicker { display: block; margin-bottom: 1.6rem; }
.ugc-hero .sub {
  margin-top: 1.8rem; max-width: 34rem; font-size: 1rem; line-height: 1.7; color: var(--cream);
  opacity: 0.92;
}
.ugc-hero .hero-cta { margin-top: 2.4rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.ugc-second {
  position: absolute; right: clamp(1.25rem, 5vw, 4rem); bottom: 12vh; z-index: 3; max-width: 15rem;
  font-family: var(--font-d); font-weight: 340; font-size: clamp(3.4rem, 10vw, 8rem); line-height: 0.9;
  color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; opacity: 0.92;
}
.ugc-second i { font-style: italic; font-size: 0.42em; margin-left: 0.06em; }
.ugc-second small {
  display: block; font-family: var(--font-b); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; line-height: 1.8; color: var(--cream-mut); margin-top: 0.7rem; text-align: right;
}

/* ---------- (01) le mur d'accroches : la mécanique signature ---------- */
.wall { padding: 15vh clamp(1.25rem, 5vw, 4rem) 12vh; }
.wall-inner { max-width: 74rem; margin: 0 auto; }
.wall-head { margin-bottom: 4rem; }
.wall-head .statement { margin-top: 1.4rem; }
.wall-lead { margin-top: 1.6rem; max-width: 40rem; font-size: 0.9375rem; line-height: 1.75; color: var(--cream-mut); }

.wall-grid {
  display: grid; gap: 1.1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.hook:nth-child(even) { margin-top: 2.2rem; }

.frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  display: flex; align-items: center; padding: 1.6rem 0.95rem 2.2rem;
  border: 1px solid rgb(198 165 108 / 0.22);
  background: linear-gradient(168deg, #151b20 0%, var(--noir) 48%, var(--noir-deep) 100%);
  transition: border-color 0.45s var(--ease), transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 70% at 50% 110%, rgb(198 165 108 / 0.1), transparent 62%);
}
.hook:hover .frame { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 14px 40px rgb(0 0 0 / 0.45); }

/* la barre « story » en haut du cadre : la première seconde qui file */
.frame-bar { position: absolute; top: 0.6rem; left: 0.75rem; right: 0.75rem; height: 2px; background: rgb(234 226 216 / 0.16); z-index: 3; }
.frame-bar i { display: block; height: 100%; width: 14%; background: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .frame-bar i { animation: scrub 7s var(--ease) infinite; }
  .hook:nth-child(2) .frame-bar i { animation-delay: 0.5s; }
  .hook:nth-child(3) .frame-bar i { animation-delay: 1s; }
  .hook:nth-child(4) .frame-bar i { animation-delay: 1.5s; }
  .hook:nth-child(5) .frame-bar i { animation-delay: 2s; }
  .hook:nth-child(6) .frame-bar i { animation-delay: 2.5s; }
  @keyframes scrub {
    0% { width: 8%; opacity: 1; }
    72% { width: 97%; opacity: 1; }
    88%, 100% { width: 100%; opacity: 0.25; }
  }
}

.hook-line {
  position: relative; z-index: 2;
  font-family: var(--font-d); font-weight: 340; font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  line-height: 1.32; letter-spacing: -0.01em; color: var(--cream);
}
.frame-t { position: absolute; left: 0.9rem; bottom: 0.85rem; z-index: 3; font-size: 0.5625rem; letter-spacing: 0.22em; color: var(--cream-mut); font-variant-numeric: tabular-nums; }

/* le cadre qui porte la boucle vidéo (fichier local, muet, sans son ni tiers) */
.frame.has-media { align-items: flex-end; }
.frame.has-media img,
.frame.has-media video.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* opacity 0 UNIQUEMENT sous .js (c'est le shell qui lance la lecture et pose .on).
   Sans JavaScript la vidéo disparaît et l'image locale reste visible : rien ne se vide. */
html:not(.js) .frame.has-media video.vid { display: none; }
.js .frame.has-media video.vid { opacity: 0; transition: opacity 1.2s var(--ease); }
.js .frame.has-media video.vid.on { opacity: 1; }
.frame-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(9 12 14 / 0.55) 0%, rgb(9 12 14 / 0.15) 40%, rgb(9 12 14 / 0.88) 100%); }
@media (prefers-reduced-motion: reduce) { .frame.has-media video.vid { display: none; } }

.hook-form { margin-top: 0.8rem; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.hook-src { margin-top: 0.35rem; font-size: 0.75rem; line-height: 1.55; color: var(--cream-mut); transition: color 0.35s var(--ease); }
.hook:hover .hook-src { color: var(--cream); }

.wall-note { margin-top: 3.2rem; max-width: 42rem; font-size: 0.8125rem; line-height: 1.75; color: var(--cream-mut); border-left: 1px solid var(--gold-soft); padding-left: 1.1rem; }

/* ---------- (02) d'où viennent les mots ---------- */
.roots { padding: 12vh clamp(1.25rem, 5vw, 4rem); background: var(--noir-deep); }
.roots-inner { max-width: 74rem; margin: 0 auto; }
.roots-head { margin-bottom: 3.5rem; }
.roots-head .statement { margin-top: 1.4rem; }
.roots-grid { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.root { border-top: 1px solid var(--gold-soft); padding-top: 1.3rem; }
.root .mark { display: block; font-family: var(--font-d); font-size: 2.8rem; line-height: 0.7; color: var(--gold); margin-bottom: 0.9rem; }
.root h3 { font-family: var(--font-d); font-weight: 340; font-size: 1.35rem; margin-bottom: 0.6rem; }
.root p { font-size: 0.9rem; line-height: 1.7; color: var(--cream-mut); }
.stop { margin-top: 3.4rem; border: 1px solid var(--gold-soft); background: rgb(198 165 108 / 0.04); padding: 2rem 1.8rem; max-width: 46rem; }
.stop .tag { display: inline-block; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); padding: 0.35rem 0.7rem; margin-bottom: 1.2rem; }
.stop p { font-size: 0.9375rem; line-height: 1.75; color: var(--cream); }

/* ---------- (03) ce que vous recevez ---------- */
.deliver { padding: 12vh clamp(1.25rem, 5vw, 4rem); }
.deliver-inner { max-width: 74rem; margin: 0 auto; }
.deliver-head { margin-bottom: 2.6rem; }
.deliver h3 { font-family: var(--font-d); font-weight: 340; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.4rem; }
.deliver-list { list-style: none; display: grid; gap: 0.85rem 3rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.deliver-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.65; color: var(--cream-mut); }
.deliver-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.deliver-list li b { color: var(--cream); font-weight: 400; }
.deliver .own { margin-top: 2.4rem; font-size: 0.8125rem; line-height: 1.7; color: var(--cream); border-left: 1px solid var(--gold-soft); padding-left: 1.1rem; max-width: 38rem; }

/* ---------- (04) ce que nous ne faisons pas ---------- */
.never { padding: 12vh clamp(1.25rem, 5vw, 4rem); background: var(--noir-deep); }
.never-inner { max-width: 74rem; margin: 0 auto; }
.never-head { margin-bottom: 3.2rem; }
.never-head .statement { margin-top: 1.4rem; }
.nots { list-style: none; display: grid; gap: 1px; background: rgb(198 165 108 / 0.18); border: 1px solid rgb(198 165 108 / 0.18); }
.not { background: var(--noir-deep); padding: 1.4rem 1.6rem; display: flex; gap: 1.2rem; align-items: baseline; }
.not .x { color: var(--gold); font-size: 0.85rem; line-height: 1.6; flex: 0 0 auto; }
.not .d { flex: 1 1 auto; font-size: 0.9rem; line-height: 1.65; color: var(--cream-mut); }
.not.last { background: var(--noir); }
.not.last .d { color: var(--cream); }
.never-ask { margin-top: 2.4rem; }

/* ---------- (05) commencer petit ---------- */
.small { padding: 12vh clamp(1.25rem, 5vw, 4rem); }
.small-inner { max-width: 74rem; margin: 0 auto; }
.small-head { margin-bottom: 3rem; }
.small-head .statement { margin-top: 1.4rem; }
.small-panel { border: 1px solid var(--gold-soft); background: rgb(198 165 108 / 0.04); padding: 2rem 1.8rem; max-width: 46rem; }
.small-panel .tag { display: inline-block; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); padding: 0.35rem 0.7rem; margin-bottom: 1.2rem; }
.small-panel p { font-size: 0.9rem; line-height: 1.7; color: var(--cream-mut); margin-bottom: 0.9rem; }
.small-panel p:last-child { margin-bottom: 0; }
.small .honest { margin-top: 2.4rem; max-width: 46rem; font-size: 0.8125rem; line-height: 1.75; color: var(--cream-mut); border-left: 1px solid var(--gold-soft); padding-left: 1.1rem; }

/* ---------- (06) contact ---------- */
.ugc-contact { padding: 14vh clamp(1.25rem, 5vw, 4rem) 10vh; }
.ugc-contact-inner { max-width: 74rem; margin: 0 auto; }
.ugc-contact .note { margin-top: 1.6rem; font-size: 0.8125rem; line-height: 1.7; color: var(--cream-mut); max-width: 38rem; }
.ugc-contact .note a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.back-home { display: inline-block; margin-top: 3rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-mut); text-decoration: none; }
.back-home:hover { color: var(--gold); }

/* ---------- révélations (JS-gated : plancher sans-JS) ----------
   Sans JavaScript, .js n'existe pas : rien ne part à opacity 0,
   la page reste entièrement lisible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.3rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: 0.09s; }
  .js .reveal.d2 { transition-delay: 0.18s; }
  .js .reveal.d3 { transition-delay: 0.27s; }
}

@media (max-width: 47rem) {
  .ugc-hero { padding-bottom: 8vh; }
  .ugc-second { position: static; margin: 2.4rem clamp(1.25rem, 5vw, 4rem) 0; max-width: none; text-align: left; }
  .ugc-second small { text-align: left; }
  .wall, .roots, .deliver, .never, .small { padding-top: 9vh; padding-bottom: 9vh; }
  .ugc-contact { padding-top: 9vh; }
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .hook:nth-child(even) { margin-top: 1.4rem; }
  .frame { padding: 1.4rem 0.7rem 1.9rem; }
  .hook-line { font-size: 0.875rem; }
  .deliver-list { grid-template-columns: minmax(0, 1fr); }
  .not { flex-wrap: wrap; gap: 0.7rem; }
}