/* ============================================================
   Pygmalion Visual — accueil
   ============================================================ */

/* ---------- HERO ---------- */
#hero{
  background:var(--navy); color:var(--cream);
  min-height:100vh; position:relative;
  display:flex; flex-direction:column;
  padding-right:32px; padding-top:26px; padding-bottom:48px;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 22% 18%, rgba(201,106,62,0.34), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(31,92,99,0.3), transparent 52%),
    linear-gradient(150deg, #23255e 0%, #121566 55%, #0b0c22 100%);
}
.hero-video-el{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
@media (prefers-reduced-motion:reduce){
  .hero-video-el{ display:none; }
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(8,9,26,0.55) 0%, rgba(8,9,26,0) 22%),
    linear-gradient(to top, rgba(8,9,26,0.9) 0%, rgba(8,9,26,0.22) 42%, rgba(8,9,26,0.42) 100%);
}
.corner{
  position:absolute; z-index:2; width:26px; height:26px;
  border-color:rgba(246,242,232,0.55); border-style:solid; border-width:0;
}
.corner.tl{ top:26px; left:64px; border-top-width:1.5px; border-left-width:1.5px; }
.corner.tr{ top:26px; right:32px; border-top-width:1.5px; border-right-width:1.5px; }
.corner.bl{ bottom:26px; left:64px; border-bottom-width:1.5px; border-left-width:1.5px; }
.corner.br{ bottom:26px; right:32px; border-bottom-width:1.5px; border-right-width:1.5px; }
@media (max-width:820px){ .corner{ display:none; } }

.topbar{ position:relative; z-index:2; }

.hero-center{
  flex:1; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  margin:24px 0;
}
.hero-center .badge{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  color:rgba(246,242,232,0.65); border:1px solid rgba(246,242,232,0.32); padding:4px 9px;
}
.play{
  width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(246,242,232,0.55);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:none;
}
.play::after{
  content:''; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--cream); margin-left:3px;
}
.hero-bottom{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-left:24px;
}
.hero-tag{ font-style:italic; font-size:13px; color:rgba(246,242,232,0.6); margin-bottom:10px; }
h1.brand{ font-family:var(--disp); font-size:clamp(48px, 9vw, 128px); line-height:0.92; letter-spacing:-0.01em; }
.hero-side{ text-align:right; max-width:260px; padding-bottom:8px; }
.hero-side p{ font-size:14px; color:rgba(246,242,232,0.75); line-height:1.5; }
.hero-side p+p{ margin-top:4px; color:rgba(246,242,232,0.5); font-size:13px; }
.cta-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:13px; letter-spacing:0.03em; color:var(--cream); text-decoration:none;
  border-bottom:1px solid rgba(246,242,232,0.4); padding-bottom:3px;
}
.cta-link:hover{ border-color:var(--rust); color:var(--rust); }
@media (max-width:560px){
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
  .hero-side{ text-align:left; }
}

.fthumb::before, .vcard::before, .cell::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.07), transparent 55%);
}

/* ---------- SECTION TRANSITIONS ---------- */
#formats, #methode, #real, #footcta{ position:relative; isolation:isolate; }
#formats::before, #methode::before, #real::before, #footcta::before{
  content:''; position:absolute; top:0; left:0; right:0; height:210px;
  pointer-events:none; z-index:-1;
}
#formats::before{
  background:
    radial-gradient(ellipse 55% 100% at 32% 0%, rgba(201,106,62,0.06), transparent 65%),
    linear-gradient(to bottom, rgba(18,21,102,0.8) 0%, rgba(18,21,102,0.2) 55%, transparent 100%);
}
#methode::before{
  background:
    radial-gradient(ellipse 55% 100% at 68% 0%, rgba(31,92,99,0.09), transparent 65%),
    linear-gradient(to bottom, rgba(250,249,249,0.8) 0%, rgba(250,249,249,0.2) 55%, transparent 100%);
}
#real::before{
  background:
    radial-gradient(ellipse 55% 100% at 68% 0%, rgba(31,92,99,0.07), transparent 65%),
    linear-gradient(to bottom, rgba(18,21,102,0.8) 0%, rgba(18,21,102,0.2) 55%, transparent 100%);
}
#footcta::before{
  background:
    radial-gradient(ellipse 55% 100% at 32% 0%, rgba(201,106,62,0.07), transparent 65%),
    linear-gradient(to bottom, rgba(250,249,249,0.8) 0%, rgba(250,249,249,0.2) 55%, transparent 100%);
}

/* ---------- SECTION HEADERS ---------- */
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; padding:230px 32px 48px 24px;
}
.sec-head h2{ font-family:var(--disp); font-size:clamp(34px, 5vw, 56px); line-height:0.95; }
.sec-head p{ max-width:340px; font-size:14px; line-height:1.6; opacity:0.75; padding-bottom:6px; }
@media (max-width:820px){ .sec-head{ padding-top:150px; } }

/* ---------- NOS FORMATS ---------- */
#formats{ background:var(--paper); padding-bottom:60px; }
.vedettes{ display:flex; gap:24px; flex-wrap:wrap; padding:0 24px 52px 24px; }
.vcard{
  position:relative; flex:1 1 380px; aspect-ratio:16/9;
  border-radius:1px; overflow:hidden; display:flex; align-items:flex-end;
}
.vcard .vcard-label{
  position:relative; z-index:2; width:100%; padding:26px;
  background:linear-gradient(to top, rgba(8,9,26,0.8), transparent);
}
.vcard .vcard-label .fname{ color:var(--cream); font-size:23px; letter-spacing:0.01em; margin-top:0; }
.vcard .vcard-label .fdesc{ color:rgba(246,242,232,0.72); margin-top:6px; }
.play-lg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(246,242,232,0.5);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, transform .2s;
}
.vcard:hover .play-lg{ border-color:rgba(246,242,232,0.85); transform:translate(-50%,-50%) scale(1.06); }
.play-lg::after{
  content:''; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--cream); margin-left:3px;
}

.filmstrip-label{ font-size:12px; letter-spacing:0.04em; opacity:0.5; padding:0 24px 16px 24px; }
.filmstrip{
  display:flex; gap:26px; align-items:flex-end; overflow-x:auto; padding:0 24px 28px 24px;
  scrollbar-width:thin;
}
.fcard{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; }
.fthumb{
  height:150px; aspect-ratio:16/9; position:relative; border-radius:1px;
  display:flex; align-items:center; justify-content:center;
}
.fcard[data-ratio="9:16"] .fthumb{ aspect-ratio:9/16; }
.fthumb .ratio-badge{
  position:absolute; top:10px; right:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.05em; color:rgba(246,242,232,0.6);
}
.fthumb .mini-play{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(246,242,232,0.6);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s;
}
.fcard:hover .mini-play{ border-color:rgba(246,242,232,0.9); }
.fthumb .mini-play::after{
  content:''; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--cream); margin-left:2px;
}
.fname{ font-family:var(--disp); font-size:16px; margin-top:16px; }
.fdesc{ font-size:12.5px; opacity:0.55; margin-top:4px; line-height:1.5; }

.format-cta{
  flex:0 0 190px; height:150px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  text-decoration:none; color:var(--navy);
  border:1px solid var(--line-on-cream); padding:0 20px;
  transition:border-color .2s, background .2s;
}
.format-cta:hover{ border-color:var(--navy); background:rgba(20,21,58,0.03); }
.format-cta span:first-child{ font-size:12.5px; opacity:0.6; line-height:1.4; }
.format-cta span:last-child{ font-family:var(--disp); font-size:14px; color:var(--rust); }

.formats-note{ padding:12px 24px 0 24px; }
.formats-note a{ color:var(--rust); font-weight:500; text-decoration:none; border-bottom:1px solid var(--rust); }

/* ---------- METHODE ---------- */
#methode{ background:var(--navy); color:var(--cream); padding-bottom:140px; position:relative; }
#methode .sec-head p{ color:rgba(246,242,232,0.65); }
.storyboard{
  position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:40px;
  padding:60px 32px 0 24px;
}
.story-frame{ position:relative; padding-top:22px; border-top:1px solid var(--line-on-navy); }
.story-frame:nth-child(2){ transform:translateY(34px); }
.story-frame:nth-child(3){ transform:translateY(-8px); }
.story-frame:nth-child(4){ transform:translateY(28px); }
.story-num{
  font-family:var(--disp); font-size:72px; color:rgba(246,242,232,0.09);
  position:absolute; top:-2px; right:0; line-height:1;
}
.story-frame h3{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:0.08em;
  color:var(--rust); margin-bottom:14px;
}
.story-frame p{ font-size:13.5px; line-height:1.7; color:rgba(246,242,232,0.78); max-width:220px; }
@media (max-width:900px){
  .storyboard{ grid-template-columns:1fr 1fr; }
  .story-frame:nth-child(n){ transform:none !important; }
}
@media (max-width:560px){ .storyboard{ grid-template-columns:1fr; } }

/* ---------- REALISATIONS ---------- */
#real{ background:var(--paper); padding-bottom:100px; }
.contact-sheet{
  display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:90px;
  grid-auto-flow:dense; gap:10px; padding:10px 24px 0 24px;
}
.cell{ position:relative; border-radius:1px; display:flex; align-items:flex-end; overflow:hidden; }
.cell .tag{ font-family:var(--mono); font-size:9.5px; color:rgba(246,242,232,0.85); padding:6px 8px; letter-spacing:0.04em; }
.cell .mini-play{
  position:absolute; top:8px; right:8px;
  width:20px; height:20px; border-radius:50%; border:1px solid rgba(246,242,232,0.6);
  display:flex; align-items:center; justify-content:center;
}
.cell .mini-play::after{
  content:''; border-style:solid; border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent var(--cream); margin-left:1px;
}
.g1{ grid-column:1/3; grid-row:1/4; background:linear-gradient(150deg,#2a2c6b,#121566);}
.g2{ grid-column:3/5; grid-row:1/3; background:linear-gradient(150deg,#3c6f75,#121566);}
.g3{ grid-column:5/7; grid-row:1/4; background:linear-gradient(160deg,#b25a35,#121566);}
.g4{ grid-column:3/5; grid-row:3/6; background:linear-gradient(150deg,#121566,#1F5C63);}
.g5{ grid-column:1/3; grid-row:4/6; background:linear-gradient(150deg,#5a3c8f,#121566);}
.g6{ grid-column:5/7; grid-row:4/6; background:linear-gradient(150deg,#121566,#c96a3e33);}
@media (max-width:820px){ .contact-sheet{ grid-template-columns:repeat(3,1fr); } }

/* ---------- FOOTER TEASER ---------- */
#footcta{ background:var(--navy); color:var(--cream); padding:210px 32px 40px 24px; }
.foot-links{ display:flex; gap:60px; flex-wrap:wrap; margin-bottom:90px; }
.foot-links a{
  font-family:var(--disp); font-size:clamp(26px,4vw,42px);
  color:var(--cream); text-decoration:none; display:inline-flex; align-items:center; gap:14px;
}
.foot-links a span{ font-family:var(--mono); font-size:13px; color:var(--rust); }
.foot-links a:hover{ color:var(--rust); }