/*
Theme Name: YJ Concept
Theme URI: https://yandjconcept.fr
Author: YJ Concept
Author URI: https://yandjconcept.fr
Description: Thème WordPress pour l'agence d'architecture d'intérieur YJ Concept. Direction éditoriale chaude, grotesque, photos pleine page, animations cinématiques (parallax, curseur custom, reveals au scroll). Inclut deux vues de galerie (grille et liste), des Custom Post Types pour les projets et les actualités, et des pages dédiées Agence / Services / Contact.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yjconcept
Tags: portfolio, architecture, interior-design, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ─────────────────────────────────────────────────────────────
   YJ CONCEPT — DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  --yj-bg:    #E8E3D7;
  --yj-card:  #DED7C5;
  --yj-ink:   #0E0E0C;
  --yj-muted: #605B51;
  --yj-rule:  #B8B1A1;
  --yj-light: #F2EFE7;
  --yj-pad-x: 56px;
  --yj-font:  'Hanken Grotesk','Geist','Helvetica Neue',system-ui,sans-serif;
  --yj-mono:  'Geist Mono','JetBrains Mono','IBM Plex Mono',monospace;
}

/* ─── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--yj-bg);
  color: var(--yj-ink);
  font: 400 16px/1.5 var(--yj-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -.025em; }
p { margin: 0; }

/* ─── Containers ───────────────────────────────────────────── */
.yj-wrap { padding: 0 var(--yj-pad-x); }
.yj-section { padding: 96px var(--yj-pad-x); }
.yj-rule-t { border-top: 1px solid var(--yj-rule); }
.yj-rule-b { border-bottom: 1px solid var(--yj-rule); }
.yj-rule-ink { border-top: 1px solid var(--yj-ink); }

/* ─── Custom logo (uploaded via Apparence → Personnaliser) ── */
.yj-logo img,
.yj-logo .custom-logo,
.custom-logo-link img {
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}
.custom-logo-link { display: inline-flex; align-items: center; }

/* ─── Header ───────────────────────────────────────────────── */
.yj-header {
  padding: 28px var(--yj-pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky; top: 0;
  z-index: 50;
  background: rgba(232,227,215,.88);
  backdrop-filter: blur(8px);
}
.yj-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; letter-spacing: -.01em;
}
.yj-logo svg { display: block; }
.yj-nav { display: flex; gap: 32px; font-size: 15px; }
.yj-nav a {
  color: var(--yj-muted);
  position: relative;
  transition: color .3s ease;
}
.yj-nav a:hover { color: var(--yj-ink); }
.yj-nav a.is-active { color: var(--yj-ink); }
.yj-nav a.is-active::after {
  content:''; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--yj-ink);
}
.yj-utilities { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 14px; }
.yj-lang { color: var(--yj-muted); }
.yj-lang.is-active { color: var(--yj-ink); }
.yj-lang-sep { color: var(--yj-rule); }

/* ─── Pill buttons ─────────────────────────────────────────── */
.yj-pill {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--yj-ink);
  color: var(--yj-ink);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.yj-pill:hover { background: var(--yj-ink); color: var(--yj-light); }
.yj-pill.is-dark { border-color: var(--yj-light); color: var(--yj-light); }
.yj-pill.is-dark:hover { background: var(--yj-light); color: var(--yj-ink); }
.yj-pill.is-filled { background: var(--yj-ink); color: var(--yj-light); border-color: var(--yj-ink); }
.yj-pill.is-filled:hover { background: var(--yj-light); color: var(--yj-ink); }
.yj-pill.is-sm { padding: 8px 16px; font-size: 12px; }
.yj-pill.is-lg { padding: 14px 28px; font-size: 14px; }

/* ─── Circle arrow button ──────────────────────────────────── */
.yj-circle {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--yj-ink);
  color: var(--yj-ink);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background .25s ease, color .25s ease;
}
.yj-circle:hover { background: var(--yj-ink); color: var(--yj-light); }
.yj-circle[disabled] { border-color: var(--yj-rule); color: var(--yj-rule); cursor: not-allowed; }

/* ─── Chips / filters ──────────────────────────────────────── */
.yj-chip {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--yj-rule);
  border-radius: 999px;
  font-size: 13.5px;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
  background: transparent; color: var(--yj-ink);
}
.yj-chip:hover { border-color: var(--yj-ink); }
.yj-chip.is-active { background: var(--yj-ink); color: var(--yj-light); border-color: var(--yj-ink); }

/* ─── Type scale ───────────────────────────────────────────── */
.yj-eyebrow {
  font-family: var(--yj-mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yj-muted);
}
.yj-meta {
  font-family: var(--yj-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yj-muted);
}
.yj-display-xl { font-size: 144px; line-height: .92; letter-spacing: -.035em; }
.yj-display-lg { font-size: 108px; line-height: .95; letter-spacing: -.035em; }
.yj-display-md { font-size: 80px;  line-height: .98; letter-spacing: -.03em;  }
.yj-display-sm { font-size: 60px;  line-height: 1;   letter-spacing: -.025em; }
.yj-display-xs { font-size: 44px;  line-height: 1.05; letter-spacing: -.02em;  }
.yj-lede        { font-size: 28px;  line-height: 1.3; letter-spacing: -.01em; }
.yj-body        { font-size: 16px;  line-height: 1.65; color: var(--yj-muted); }

/* ─── Photo frame with hover zoom + clip reveal ────────────── */
.yj-photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 100%;
  min-height: 200px;
}
.yj-photo-frame > * { transition: transform 1.1s cubic-bezier(.2,.7,.3,1); }
.yj-photo-frame:hover > * { transform: scale(1.035); }
.yj-photo {
  width: 100%; height: 100%;
  position: relative;
}
.yj-photo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
.yj-photo-label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--yj-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(2px);
  border-radius: 2px;
  color: rgba(0,0,0,.6);
  z-index: 2;
}
.yj-photo.is-dark .yj-photo-label {
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.7);
}

/* Photo tones — used when no featured image set */
.yj-tone-gold     { background: radial-gradient(120% 90% at 70% 75%, #f3c98a 0%, #b88247 25%, #4a2c1c 65%, #18110b 100%); }
.yj-tone-dusk     { background: radial-gradient(110% 90% at 30% 30%, #cfb597 0%, #8b6e54 35%, #2c2722 75%, #15120f 100%); }
.yj-tone-daylight { background: radial-gradient(120% 90% at 50% 30%, #ece4d6 0%, #c4b69e 45%, #7a6e5c 100%); }
.yj-tone-northern { background: radial-gradient(120% 90% at 50% 50%, #d6dbd3 0%, #a3a89a 40%, #54584c 100%); }
.yj-tone-twilight { background: linear-gradient(160deg, #1d2230 0%, #44363b 35%, #a36849 65%, #d2a36b 100%); }
.yj-tone-studio   { background: linear-gradient(160deg, #f1ebde 0%, #d8cbb3 50%, #a0917a 100%); }
.yj-tone-forest   { background: radial-gradient(120% 90% at 50% 70%, #adb29c 0%, #6a7060 35%, #2e3128 80%); }
.yj-tone-shadow   { background: linear-gradient(135deg, #18140f 0%, #2a241c 50%, #4b3f30 100%); }

/* ─── Hero ─────────────────────────────────────────────────── */
.yj-hero {
  padding: 8px var(--yj-pad-x) 0;
}
.yj-hero-photo {
  height: 760px;
  border-radius: 8px;
  overflow: hidden;
}

/* ─── Layouts ──────────────────────────────────────────────── */
.yj-grid       { display: grid; gap: 24px; }
.yj-grid-12    { grid-template-columns: repeat(12, 1fr); }
.yj-grid-3     { grid-template-columns: repeat(3, 1fr); }
.yj-grid-2     { grid-template-columns: 1fr 1fr; }
.yj-grid-stat-rh { grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: end; }
.yj-grid-stat-lh { grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; }

/* ─── Project cards ────────────────────────────────────────── */
.yj-project-card { display: flex; flex-direction: column; }
.yj-project-card .yj-photo-frame { height: 480px; }
.yj-project-card-body { margin-top: 22px; }
.yj-project-card-title { font-size: 24px; letter-spacing: -.015em; }
.yj-project-card-loc   { font-size: 14.5px; color: var(--yj-muted); margin-top: 6px; }
.yj-project-card-cta   { margin-top: 18px; }

/* ─── Project list (row layout) ────────────────────────────── */
.yj-list-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--yj-rule);
  align-items: center;
}
.yj-list-row .yj-photo-frame { height: 220px; }

/* ─── Service blocks (full-width alternating) ──────────────── */
.yj-service-block {
  position: relative;
  padding: 120px var(--yj-pad-x);
  border-top: 1px solid var(--yj-rule);
}
.yj-service-block-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.yj-service-block.is-reversed .yj-service-block-row { direction: rtl; }
.yj-service-block.is-reversed .yj-service-block-row > * { direction: ltr; }
.yj-service-block .yj-photo-frame { height: 540px; }
.yj-service-num-bg {
  position: absolute; top: 32px;
  font-size: 200px; line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--yj-rule);
  pointer-events: none; user-select: none;
}
.yj-service-num-bg.is-right { right: var(--yj-pad-x); }
.yj-service-num-bg.is-left  { left: var(--yj-pad-x); }

/* ─── Process timeline (horizontal) ────────────────────────── */
.yj-timeline {
  position: relative;
  padding: 40px 0 8px;
}
.yj-timeline::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--yj-rule);
}
.yj-timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 24px; row-gap: 64px;
}
.yj-timeline-step { position: relative; text-align: left; }
.yj-timeline-step.is-above { grid-row: 1; padding-bottom: 32px; }
.yj-timeline-step.is-below { grid-row: 2; padding-top: 32px; }
.yj-timeline-step::before {
  content: ''; position: absolute; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--yj-ink); border: 2px solid var(--yj-bg);
}
.yj-timeline-step.is-above::before { bottom: -6px; }
.yj-timeline-step.is-below::before { top: -6px; }

/* ─── Magazine grid (Journal) ──────────────────────────────── */
.yj-mag-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; row-gap: 80px; }
.yj-mag-grid article .yj-photo-frame { height: 320px; }
.yj-mag-grid article.is-large .yj-photo-frame { height: 480px; }
.yj-mag-grid article.is-wide .yj-photo-frame { height: 420px; }
.yj-mag-grid article h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.015em; margin-top: 24px; }
.yj-mag-grid article.is-large h3 { font-size: 38px; max-width: 720px; }

/* ─── Dark band ────────────────────────────────────────────── */
.yj-dark-band {
  background: var(--yj-ink);
  color: var(--yj-light);
  padding: 100px var(--yj-pad-x);
  border-radius: 8px;
  margin: 80px var(--yj-pad-x);
}
.yj-dark-band blockquote {
  font-size: 64px; line-height: 1.12; letter-spacing: -.025em;
  margin: 0; text-align: center; max-width: 1100px; margin-inline: auto;
}

/* ─── Footer ───────────────────────────────────────────────── */
.yj-footer { padding: 120px var(--yj-pad-x) 36px; }
.yj-footer-grid {
  border-top: 1px solid var(--yj-rule);
  padding-top: 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
}
.yj-footer h2 { font-size: 80px; line-height: .95; letter-spacing: -.03em; }
.yj-footer-col h4 { font-family: var(--yj-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--yj-muted); margin-bottom: 18px; font-weight: 400; }
.yj-footer-col li { list-style: none; padding: 0; }
.yj-footer-col ul { padding: 0; margin: 0; }
.yj-footer-col li { font-size: 14.5px; line-height: 2; }
.yj-footer-bottom {
  margin-top: 80px;
  display: flex; justify-content: space-between;
  font-family: var(--yj-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yj-muted);
}

/* ─── Marquee ──────────────────────────────────────────────── */
@keyframes yj-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.yj-marquee-wrap {
  height: 64px;
  overflow: hidden;
  border-top: 1px solid var(--yj-rule);
  border-bottom: 1px solid var(--yj-rule);
  display: flex; align-items: center;
}
.yj-marquee {
  display: flex; gap: 48px;
  animation: yj-marquee 60s linear infinite;
  width: max-content;
}
.yj-marquee span {
  display: inline-flex; align-items: center; gap: 48px;
  font-family: var(--yj-mono);
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}

/* ─── Animations ───────────────────────────────────────────── */
@keyframes yj-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes yj-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yj-float { 0%,100% { transform: scale(1) translate3d(0,0,0); } 50% { transform: scale(1.015) translate3d(0,-4px,0); } }
@keyframes yj-clip { from { clip-path: inset(0 30% 30% 0 round 8px); transform: scale(1.08); } to { clip-path: inset(0 round 8px); transform: scale(1); } }
@keyframes yj-char { from { opacity: 0; transform: translateY(60%) rotate(2deg); } to { opacity: 1; transform: none; } }

/* Static (always-on) animation hooks */
.yj-fade  { animation: yj-fade 1.4s cubic-bezier(.2,.7,.3,1) backwards; }
.yj-float { animation: yj-float 12s ease-in-out infinite; will-change: transform; }

/* Scroll-driven reveal (toggled by JS via .is-visible).
   Progressive enhancement: visible by default; JS hides + reveals on scroll. */
.js-loaded .yj-rise,
.js-loaded .yj-clip { opacity: 0; }
.js-loaded .yj-rise.is-visible { animation: yj-rise 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
.js-loaded .yj-clip.is-visible { animation: yj-clip 1.4s cubic-bezier(.4,0,.1,1) forwards; opacity: 1; }
.yj-rise.is-visible,
.yj-clip.is-visible { animation-delay: var(--yj-delay, 0s); }

/* Mouse-driven parallax */
.yj-parallax-hero {
  transform: translate3d(calc(var(--mx,0) * -14px), calc(var(--my,0) * -10px), 0) scale(1.04);
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
  width: 100%; height: 100%;
  will-change: transform;
}
.yj-parallax-light {
  transform: translate3d(calc(var(--mx,0) * -6px), calc(var(--my,0) * -4px), 0);
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}

/* Custom cursor */
.yj-cursor {
  position: fixed; top: 0; left: 0;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 1px solid var(--yj-ink);
  border-radius: 50%;
  pointer-events: none; z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease, width .35s cubic-bezier(.2,.7,.3,1), height .35s cubic-bezier(.2,.7,.3,1), background .25s ease;
  mix-blend-mode: difference;
}
.yj-cursor.is-active { opacity: .85; }
.yj-cursor.is-hover-img { width: 80px; height: 80px; margin: -40px 0 0 -40px; background: rgba(232,227,215,.15); border-color: var(--yj-light); }
.yj-cursor.is-hover-link { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.yj-cursor-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--yj-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yj-light); opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.yj-cursor.is-hover-img .yj-cursor-label { opacity: 1; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .yj-rise, .yj-clip, .yj-fade, .yj-float, .yj-marquee, .yj-parallax-hero {
    animation: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important;
  }
  .yj-cursor { display: none; }
}

/* ─── Responsive — tablette & mobile ───────────────────────── */
@media (max-width: 1100px) {
  :root { --yj-pad-x: 32px; }
  .yj-display-xl { font-size: 120px; }
  .yj-display-lg { font-size: 96px; }
  .yj-display-md { font-size: 80px; }
  .yj-display-sm { font-size: 64px; }
  .yj-grid-stat-rh, .yj-grid-stat-lh, .yj-service-block-row, .yj-grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .yj-list-row { grid-template-columns: 1fr; gap: 16px; }
  .yj-list-row .yj-photo-frame { height: 280px; }
  .yj-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  :root { --yj-pad-x: 20px; }
  .yj-display-xl { font-size: 72px; }
  .yj-display-lg { font-size: 56px; }
  .yj-display-md { font-size: 48px; }
  .yj-display-sm { font-size: 40px; }
  .yj-lede        { font-size: 24px; }
  .yj-hero-photo  { height: 480px; }
  .yj-nav { display: none; }
  .yj-header { grid-template-columns: 1fr auto; }
  .yj-grid-3 { grid-template-columns: 1fr; }
  .yj-footer-grid { grid-template-columns: 1fr; }
  .yj-footer h2 { font-size: 48px; }
  .yj-mag-grid > article { grid-column: 1 / -1 !important; }
  .yj-timeline-grid { grid-template-columns: 1fr 1fr; }
  .yj-timeline-step.is-below, .yj-timeline-step.is-above { grid-row: auto !important; padding: 12px 0; }
  .yj-timeline::before { display: none; }
}