/* ══════════════════════════════════════════════════════
   PORTFOLIO — thèmes par domaine (se charge après pages.css)
   ══════════════════════════════════════════════════════ */

/* ── Palettes ── */
.theme-mariage {            /* Ivoire & Henné — identité @sirka_wedding */
  --pf-bg: #F5F0E8; --pf-bg2: #EDE5D8; --pf-ink: #2B2722; --pf-ink2: #6B6157;
  --pf-accent: #A65A3A; --pf-accent-d: #8A4729; --pf-on-accent: #F5F0E8;
  --pf-line: rgba(43,39,34,0.12); --pf-cta-bg: #9C8C7C; --pf-cta-ink: #FBF8F3;
  --pf-dark: #2B2722; --pf-radius: 8px; --pf-gap: 16px; --pf-cols: 3;
}
.theme-immobilier {         /* Marbre & Laiton */
  --pf-bg: #F6F5F2; --pf-bg2: #ECEAE5; --pf-ink: #1E2226; --pf-ink2: #5E636A;
  --pf-accent: #A8834A; --pf-accent-d: #8A6A36; --pf-on-accent: #FFFFFF;
  --pf-line: rgba(30,34,38,0.12); --pf-cta-bg: #1E2226; --pf-cta-ink: #F6F5F2;
  --pf-dark: #1E2226; --pf-radius: 2px; --pf-gap: 22px; --pf-cols: 3;
}
.theme-sport {              /* Nuit & Rouge */
  --pf-bg: #0F1012; --pf-bg2: #16181B; --pf-ink: #F4F4F2; --pf-ink2: #A3A6AB;
  --pf-accent: #E63A2E; --pf-accent-d: #C22A20; --pf-on-accent: #FFFFFF;
  --pf-line: rgba(255,255,255,0.10); --pf-cta-bg: #E63A2E; --pf-cta-ink: #FFFFFF;
  --pf-dark: #0A0B0C; --pf-radius: 0px; --pf-gap: 6px; --pf-cols: 3;
}
.theme-business {           /* Papier & Moutarde */
  --pf-bg: #F7F4EE; --pf-bg2: #EFEAE0; --pf-ink: #15202B; --pf-ink2: #5A6470;
  --pf-accent: #B87F0D; --pf-accent-d: #966607; --pf-on-accent: #FFFFFF;
  --pf-line: rgba(21,32,43,0.12); --pf-cta-bg: #15202B; --pf-cta-ink: #F7F4EE;
  --pf-dark: #15202B; --pf-radius: 14px; --pf-gap: 18px; --pf-cols: 3;
}
.theme-court {              /* Pellicule — noir cinéma & tungstène */
  --pf-bg: #0B0B0C; --pf-bg2: #121214; --pf-ink: #EDE8DF; --pf-ink2: #9A958C;
  --pf-accent: #D9A441; --pf-accent-d: #B98625; --pf-on-accent: #0B0B0C;
  --pf-line: rgba(237,232,223,0.10); --pf-cta-bg: #17150F; --pf-cta-ink: #EDE8DF;
  --pf-dark: #070708; --pf-radius: 0px; --pf-gap: 12px; --pf-cols: 3;
}
.theme-youtube {            /* Studio */
  --pf-bg: #0F0F10; --pf-bg2: #161618; --pf-ink: #F5F5F5; --pf-ink2: #A0A0A6;
  --pf-accent: #FF3B3B; --pf-accent-d: #E02424; --pf-on-accent: #FFFFFF;
  --pf-line: rgba(255,255,255,0.10); --pf-cta-bg: #FF3B3B; --pf-cta-ink: #FFFFFF;
  --pf-dark: #0A0A0B; --pf-radius: 14px; --pf-gap: 20px; --pf-cols: 2;
}
.theme-humanitaire {        /* Lin & Pétrole */
  --pf-bg: #F3F0EA; --pf-bg2: #E9E5DC; --pf-ink: #1C2B33; --pf-ink2: #5B676D;
  --pf-accent: #2E6B6B; --pf-accent-d: #22504F; --pf-on-accent: #F3F0EA;
  --pf-line: rgba(28,43,51,0.12); --pf-cta-bg: #1E3A44; --pf-cta-ink: #F3F0EA;
  --pf-dark: #16252C; --pf-radius: 4px; --pf-gap: 18px; --pf-cols: 2;
}

.theme-brand {              /* Ardoise & Or — identité SirkaProd (Tarifs) */
  --pf-bg: #1e2a32; --pf-bg2: #243040; --pf-ink: #f0ede8; --pf-ink2: #9aa5aa;
  --pf-accent: #c8b89a; --pf-accent-d: #dfd3c0; --pf-on-accent: #1e2a32;
  --pf-line: rgba(210,195,175,0.12); --pf-cta-bg: #243040; --pf-cta-ink: #f0ede8;
  --pf-dark: #1a242c; --pf-radius: 6px; --pf-gap: 16px; --pf-cols: 3;
}

/* ── Socle ── */
body.pf { background: var(--pf-bg); animation: none; }
#navbar.scrolled { background: color-mix(in srgb, var(--pf-dark) 92%, transparent); }
#main-menu-bg {
  background:
    radial-gradient(ellipse 55% 70% at 85% 10%, color-mix(in srgb, var(--pf-accent) 24%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--pf-dark) 85%, #000) 0%, var(--pf-dark) 55%, color-mix(in srgb, var(--pf-dark) 80%, #000) 100%);
}

/* Menu animé en CSS (remplace GSAP) */
#main-menu { transition: visibility 0s linear 0.6s; }
#main-menu.is-open { visibility: visible; pointer-events: all; transition-delay: 0s; }
#main-menu-bg { transition: clip-path 0.55s cubic-bezier(0.83, 0, 0.17, 1) 0.1s; }
#main-menu.is-open #main-menu-bg { clip-path: inset(0 0 0% 0); transition-delay: 0s; }
#main-menu-header, #main-menu-footer, #main-menu .menu-link, #main-menu .menu-sub {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#main-menu.is-open #main-menu-header,
#main-menu.is-open #main-menu-footer { opacity: 1; transition: opacity 0.4s ease 0.35s; }
#main-menu.is-open .menu-link {
  opacity: 1; transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i, 0) * 0.07s),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i, 0) * 0.07s);
}
#main-menu.is-open .menu-sub { opacity: 1; transform: none; transition: opacity 0.45s ease 0.65s, transform 0.45s ease 0.65s; }

/* ── Hero photo ── */
.pf-hero { min-height: 86vh; background: var(--pf-dark); --gold: #F2EBDF; --glow-cream: #FBF8F3; --gold-d: rgba(255,255,255,0.5); --text: #FFFFFF; }
.pf-hero .page-hero-grid { display: none; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center); z-index: 0; }
.hero-shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-dark) 66%, transparent) 0%,
              color-mix(in srgb, var(--pf-dark) 30%, transparent) 45%,
              color-mix(in srgb, var(--pf-dark) 62%, transparent) 100%);
}
.pf-hero::after { background: linear-gradient(to bottom, transparent 0%, var(--pf-bg) 100%); height: 140px; }
.pf-hero .page-hero-title { text-shadow: 0 2px 30px rgba(0,0,0,0.25); }
.pf-hero .btn-solid { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-on-accent); }
.pf-hero .btn-solid:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--pf-dark); }
.pf-hero .btn-outline { border-color: rgba(255,255,255,0.6); color: #FFFFFF; }
.pf-hero .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #FFFFFF; }

/* Entrée du hero en CSS */
@keyframes pfUp { from { opacity: 0; transform: translateY(var(--pf-up, 24px)); } to { opacity: 1; transform: none; } }
.pf-hero .page-hero-label, .pf-anim .page-hero-label    { animation: pfUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
.pf-hero .page-hero-title, .pf-anim .page-hero-title { animation: pfUp 1.0s cubic-bezier(0.16,1,0.3,1) 0.3s both; --pf-up: 46px; }
.pf-hero .page-hero-accroche, .pf-anim .page-hero-accroche { animation: pfUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.pf-hero .page-hero-ctas, .pf-anim .page-hero-ctas     { animation: pfUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.75s both; }
.hero-photo { animation: pfZoom 1.6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes pfZoom { from { transform: scale(1.06); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pf-hero *, .pf-anim *, .hero-photo { animation: none !important; }
}

/* ── Sections de contenu ── */
.pf-sec {
  --text: var(--pf-ink); --text2: var(--pf-ink2); --gold: var(--pf-accent);
  --glow-cream: var(--pf-accent-d); --gold-d: var(--pf-line); --border: var(--pf-line);
  color: var(--pf-ink);
}
.pf-sec::before { display: none; }
.page-desc.pf-sec { background: var(--pf-bg); }
.page-gallery.pf-sec { background: linear-gradient(180deg, var(--pf-bg2) 0%, color-mix(in srgb, var(--pf-bg2) 92%, var(--pf-ink)) 100%); }
.pf-sec .section-title em { font-style: italic; color: var(--pf-accent); }
.pf-sec .btn-solid { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-on-accent); }
.pf-sec .btn-solid:hover { background: var(--pf-accent-d); border-color: var(--pf-accent-d); }
.pf-sec .btn-outline { border-color: color-mix(in srgb, var(--pf-accent) 50%, transparent); color: var(--pf-accent); }
.pf-sec .btn-outline:hover { background: color-mix(in srgb, var(--pf-accent) 8%, transparent); border-color: var(--pf-accent); }
.pf-sec .video-card, .pf-sec .yt-embed-wrap { box-shadow: 0 24px 60px rgba(0,0,0,0.22); border-radius: var(--pf-radius); }

/* ── Galerie ── */
.pf-grid { display: flex; gap: var(--pf-gap); align-items: flex-start; }
.pf-col { flex: 1; min-width: 0; }
.pf-grid .masonry-item { margin: 0 0 var(--pf-gap); border-radius: var(--pf-radius); box-shadow: 0 4px 18px rgba(0,0,0,0.10); }
.pf-grid .photo-slot { border-radius: var(--pf-radius); background: color-mix(in srgb, var(--pf-bg2) 80%, var(--pf-ink)); }
@media (hover: hover) {
  .pf-grid .masonry-item:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.25), 0 0 0 1px color-mix(in srgb, var(--pf-accent) 35%, transparent); }
}
.pf-grid .pf-video { cursor: default; }
.pf-grid .pf-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-grid .pf-video .video-sound-btn { position: absolute; bottom: 10px; right: 10px; z-index: 2; }
.gallery-more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; }
.gallery-more[hidden] { display: none; }
.gallery-count { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pf-ink2); }

/* ── CTA ── */
.page-cta.pf-cta {
  background: var(--pf-cta-bg);
  --text: var(--pf-cta-ink); --text2: color-mix(in srgb, var(--pf-cta-ink) 82%, transparent);
  --gold: var(--pf-cta-ink); --border: color-mix(in srgb, var(--pf-cta-ink) 25%, transparent);
}
.page-cta.pf-cta::before { display: none; }
.pf-cta .btn-solid { background: var(--pf-cta-ink); border-color: var(--pf-cta-ink); color: var(--pf-cta-bg); }
.pf-cta .btn-solid:hover { background: transparent; color: var(--pf-cta-ink); }
.pf-cta .btn-outline { border-color: color-mix(in srgb, var(--pf-cta-ink) 60%, transparent); color: var(--pf-cta-ink); }
.pf-cta .btn-outline:hover { background: color-mix(in srgb, var(--pf-cta-ink) 10%, transparent); }

body.pf > footer { background: var(--pf-dark); }
body.pf > footer::before { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--pf-accent) 60%, transparent) 50%, transparent); }
body.pf #lightbox { background: color-mix(in srgb, var(--pf-dark) 96%, transparent); }
.lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 10.5px; letter-spacing: 0.26em; color: rgba(255,255,255,0.6); }
body.pf .lb-nav { color: #FFFFFF; border-color: rgba(255,255,255,0.25); }

/* ══════════════════════════════════════════════════════
   Particularités par domaine
   ══════════════════════════════════════════════════════ */

/* Immobilier : lignes nettes, respiration */
.theme-immobilier .pf-grid .masonry-item { box-shadow: none; }
.theme-immobilier .page-gallery.pf-sec { background: var(--pf-bg2); }
.theme-immobilier .section-label { letter-spacing: 0.5em; }

/* Sport & YouTube : titres sans-serif, énergiques */
.theme-sport .page-hero-title, .theme-sport .section-title,
.theme-youtube .page-hero-title, .theme-youtube .section-title {
  font-family: 'DM Sans', sans-serif; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase;
}
.theme-sport .page-hero-title { letter-spacing: 0.02em; }
.theme-sport .section-title { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.02; }
.theme-youtube .section-title { font-size: clamp(28px, 4.2vw, 50px); line-height: 1.05; text-transform: none; }
.theme-youtube .page-hero-title { text-transform: none; letter-spacing: -0.02em; }
.theme-sport .pf-sec .section-title em, .theme-youtube .pf-sec .section-title em { font-style: normal; }
.theme-sport .section-sep { height: 3px; width: 56px; background: var(--pf-accent); }
.theme-sport .pf-grid .masonry-item { box-shadow: none; }
@media (hover: hover) { .theme-sport .pf-grid .masonry-item:hover { transform: none; box-shadow: inset 0 0 0 2px var(--pf-accent); } }

/* Court-métrage : letterbox + grain + numéros de plan */
.theme-court .pf-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-top: 9vh solid #000; border-bottom: 9vh solid #000;
}
.theme-court .hero-shade::after {
  content: ''; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.theme-court .pf-grid .masonry-item::after {
  content: attr(data-n); position: absolute; top: 10px; left: 12px; z-index: 2;
  font: 500 9px/1 'DM Sans', sans-serif; letter-spacing: 0.3em; color: var(--pf-accent);
  background: rgba(0,0,0,0.55); padding: 5px 8px; pointer-events: none;
}

/* YouTube : vignettes façon lecteur */
.theme-youtube .pf-grid .masonry-item::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px;
  border-radius: 12px; background: var(--pf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center/26px no-repeat;
  opacity: 0; transform: scale(0.85); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
@media (hover: hover) { .theme-youtube .pf-grid .masonry-item:hover::after { opacity: 1; transform: none; } }
.hero-logo {
  position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(255,0,0,0.20) 0%, transparent 70%), var(--pf-dark);
}
.hero-logo svg {
  width: min(620px, 78vw); height: auto; opacity: 0.42;
  filter: drop-shadow(0 30px 80px rgba(255,0,0,0.35));
  animation: pfZoom 1.6s cubic-bezier(0.16,1,0.3,1) both;
}
.theme-youtube .hero-shade { background: color-mix(in srgb, var(--pf-dark) 35%, transparent); }
.theme-youtube .pf-hero .page-hero-title { text-shadow: 0 4px 40px rgba(0,0,0,0.55); }

/* ── Éléments repris des anciennes pages ── */
.biz-cascade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.biz-cascade .video-card { aspect-ratio: 3/4; }
.biz-cascade .video-card:nth-child(2), .biz-cascade .video-card:nth-child(4) { margin-top: 32px; }
@media (max-width: 900px) {
  .biz-cascade { grid-template-columns: repeat(4, 1fr); }
  .biz-cascade .video-card { aspect-ratio: 9/16; }
  .biz-cascade .video-card:nth-child(2), .biz-cascade .video-card:nth-child(4) { margin-top: 0; }
}
@media (max-width: 600px) { .biz-cascade { grid-template-columns: 1fr 1fr; } }
.theme-court .page-desc-inner { align-items: start; }
.theme-court .page-desc-inner .video-card { max-width: 300px; margin: 0 auto; aspect-ratio: 3/4; }
.cm-steps { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cm-steps li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--pf-ink2); letter-spacing: 0.04em; }
.cm-steps li::before { content: ''; display: block; width: 18px; height: 1px; background: var(--pf-accent); flex-shrink: 0; }
.theme-youtube .yt-cover { background: #000 url("https://i.ytimg.com/vi/qn6mW9mDArg/hqdefault.jpg") center/cover; }
.theme-youtube .yt-cover::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.25); }
.theme-youtube .yt-play-btn { position: relative; z-index: 1; background: var(--pf-accent); border-color: var(--pf-accent); }
.theme-youtube .yt-play-btn svg { fill: #FFFFFF; }