/*
Theme Name: Christophe Gouazé
Theme URI: https://christophegouaze.com
Author: Christophe Gouazé
Description: "Creative System" — minimal, futuristic dark portfolio theme. Three disciplines (AI Films, Filmmaking, Photography), system-bar navigation, autoplay showreel viewport, floating video previews, spec-sheet project cards. English-first, Polylang-ready.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: christophe-gouaze
*/

:root{
  --bg:#0B0B0D;
  --ink:#EDEDE9;
  --mute:#7C7C84;
  --line:#232329;
  --blue:#4553FF;
  --blue-soft:rgba(69,83,255,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(circle,#1C1C22 1px,transparent 1px);
  background-size:56px 56px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}
.mono{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.blue{color:var(--blue)}

/* ---------- SYSTEM BAR ---------- */
.sysbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 2.5vw;background:rgba(11,11,13,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.sysbar .id b{font-weight:700}
.sysbar .menu{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.sysbar .menu a{color:var(--mute);transition:color .2s}
.sysbar .menu a:hover{color:var(--ink)}
.sysbar .status{display:flex;gap:1.4rem;align-items:center;color:var(--mute)}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:.45rem;animation:blink 1.6s infinite;vertical-align:1px}
@keyframes blink{50%{opacity:.15}}
.lang .current,.lang b{color:var(--ink);font-weight:700}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;z-index:70}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.sysbar.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sysbar.open .nav-toggle span:nth-child(2){opacity:0}
.sysbar.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .sysbar .nav-wrap{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.6rem;padding:0 8vw;z-index:65}
  .sysbar.open .nav-wrap{display:flex}
  .sysbar .menu{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .sysbar.open .menu a{font-size:1.05rem}
  .sysbar .status .hide-m{display:none}
}

/* ---------- HERO ---------- */
.hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:12vh 2.5vw 7vh;position:relative}
.hero .coord{position:absolute;font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.c-tl{top:12vh;left:2.5vw}.c-tr{top:12vh;right:2.5vw}.c-bl{bottom:6vh;left:2.5vw}.c-br{bottom:6vh;right:2.5vw}
.hero .cross{position:absolute;width:14px;height:14px;color:#2E2E36}
.hero .cross::before,.hero .cross::after{content:"";position:absolute;background:currentColor}
.hero .cross::before{left:50%;top:0;bottom:0;width:1px;margin-left:-0.5px}
.hero .cross::after{top:50%;left:0;right:0;height:1px;margin-top:-0.5px}
.x1{top:24%;left:18%}.x2{top:30%;right:22%}.x3{bottom:26%;left:30%}.x4{bottom:32%;right:14%}
.hero h1{font-weight:500;font-size:clamp(2.1rem,5vw,4.6rem);line-height:1.06;letter-spacing:-.03em;max-width:18ch}
.hero h1 .thin{font-weight:300;color:var(--mute)}
.hero h1 .caret{display:inline-block;width:.55em;height:.06em;background:var(--blue);margin-left:.12em;vertical-align:.08em;animation:blink 1s steps(1) infinite}
.hero .meta-row{display:flex;gap:3rem;flex-wrap:wrap;margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.4rem;max-width:920px}
.hero .meta-row div{min-width:150px}
.hero .meta-row .k{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:.3rem}
.hero .meta-row .v{font-size:.95rem;font-weight:500}

/* ---------- SHOWREEL VIEWPORT ---------- */
.reelport{position:relative;margin-top:3rem;border:1px solid var(--ink);background:#000;width:100%;aspect-ratio:21/9;max-height:58vh;overflow:hidden}
.reelport video{width:100%;height:100%;object-fit:cover;display:block}
.reelbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 2rem;font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.reelbar .dotl{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:.45rem;animation:blink 1.6s infinite;vertical-align:1px}
.sndbtn{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.45);padding:.3rem .65rem;cursor:pointer;transition:background .2s,border-color .2s}
.sndbtn:hover{background:var(--blue);border-color:var(--blue)}
.rcorner{position:absolute;width:15px;height:15px;border:1px solid var(--blue);z-index:2}
.rcorner.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.rcorner.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.rcorner.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.rcorner.br{bottom:8px;right:8px;border-left:0;border-top:0}
@media(max-width:760px){.reelport{aspect-ratio:16/10;max-height:none}.reelbar{padding:.55rem 1.6rem}}

/* ---------- SECTION LABEL ---------- */
.slab{display:flex;align-items:center;gap:1rem;padding:0 2.5vw;margin-bottom:2.6rem}
.slab .n{font-family:'Space Mono',monospace;font-size:.66rem;color:var(--blue);letter-spacing:.1em}
.slab .t{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.slab .rule{flex:1;height:1px;background:var(--line)}

/* ---------- INDEX (disciplines) ---------- */
.index{padding:7rem 0}
.irow{display:grid;grid-template-columns:90px 1fr auto;gap:2.5rem;align-items:center;padding:2.6rem 2.5vw;border-top:1px solid var(--line);position:relative;transition:background .25s}
.irow:last-of-type{border-bottom:1px solid var(--line)}
.irow:hover{background:var(--blue-soft)}
.irow .num{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--mute)}
.irow h2{font-weight:500;font-size:clamp(1.9rem,4.6vw,4rem);letter-spacing:-.02em;line-height:1.05;transition:transform .3s}
.irow:hover h2{transform:translateX(10px)}
.irow .arr{font-size:1.6rem;color:var(--mute);transition:color .25s,transform .3s}
.irow:hover .arr{color:var(--blue);transform:translate(6px,-6px)}
.irow .sub{display:block;margin-top:.4rem;font-size:.9rem;color:var(--mute);font-weight:400;max-width:52ch}
@media(max-width:760px){.irow{grid-template-columns:1fr;gap:.6rem}.irow .num,.irow .arr{display:none}}

/* aperçu flottant */
.preview{position:fixed;z-index:70;width:min(360px,34vw);aspect-ratio:16/10;pointer-events:none;opacity:0;transform:scale(.92);transition:opacity .25s,transform .25s;border:1px solid var(--ink);background:#000;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.preview.on{opacity:1;transform:scale(1)}
.preview video,.preview img,.preview .ph{width:100%;height:100%;object-fit:cover;display:block}
.preview .ptag{position:absolute;bottom:0;left:0;font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:#fff;background:var(--blue);padding:.3rem .55rem;text-transform:uppercase}
.ph{background-size:cover;background-position:center}
.ph-video{background-image:linear-gradient(150deg,#25313A 0%,#0D1114 80%)}
.ph-photo{background-image:radial-gradient(ellipse at 30% 25%,#4E4C46 0%,#171613 75%)}
@media(hover:none){.preview{display:none}}

/* ---------- WORKS GRID ---------- */
.works{padding:5rem 0 8rem}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wcell{background:var(--bg);padding:2rem 2.5vw 2.4rem;transition:background .25s;display:block}
.wcell:hover{background:#121218}
.wcell .wv{border:1px solid var(--ink);background:#000;overflow:hidden;position:relative}
.wcell .wv video,.wcell .wv img,.wcell .wv .ph{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.wcell:hover .wv video,.wcell:hover .wv img,.wcell:hover .wv .ph{transform:scale(1.03)}
.wcell .wv .live{position:absolute;top:.6rem;right:.6rem;font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.1em;color:#fff;background:rgba(13,13,15,.7);padding:.25rem .5rem;text-transform:uppercase}
.wcell table{width:100%;margin-top:1.1rem;border-collapse:collapse;font-size:.8rem}
.wcell table td{padding:.45rem 0;border-bottom:1px solid var(--line)}
.wcell table td:first-child{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);width:34%}
.wcell table td:last-child{text-align:right;font-weight:500}
.wcell h3{margin-top:1.2rem;font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
@media(max-width:860px){.wgrid{grid-template-columns:1fr}}

/* ---------- SPEC SHEET ---------- */
.spec{padding:7rem 2.5vw;display:grid;grid-template-columns:1fr 1fr;gap:4rem;border-top:1px solid var(--line)}
.spec .lead{font-weight:400;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.45;letter-spacing:-.01em;max-width:30ch}
.spec .lead b{font-weight:600;color:var(--blue)}
.spec table{width:100%;border-collapse:collapse;font-size:.9rem}
.spec table td{padding:.8rem 0;border-bottom:1px solid var(--line)}
.spec table td:first-child{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.spec table td:last-child{text-align:right;font-weight:500}
@media(max-width:860px){.spec{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- ARCHIVE / SINGLE ---------- */
.page-head{padding:10rem 2.5vw 3rem}
.page-head h1{font-weight:500;font-size:clamp(2.2rem,5.5vw,4.6rem);letter-spacing:-.03em;line-height:1.05}
.page-head .mono{margin-top:1rem;display:block}
.single-wrap{padding:10rem 2.5vw 5rem;max-width:1100px;margin:0 auto}
.single-wrap .stag{margin-bottom:1rem;display:block;color:var(--blue)}
.single-wrap h1{font-weight:500;font-size:clamp(2rem,4.6vw,3.8rem);letter-spacing:-.03em;line-height:1.08;margin-bottom:2rem}
.single-wrap .pmedia{position:relative;border:1px solid var(--ink);background:#000;margin-bottom:2rem}
.single-wrap .pmedia video,.single-wrap .pmedia img{width:100%;display:block}
.single-wrap .spec-inline{max-width:520px;margin-bottom:2.5rem}
.single-wrap .spec-inline table{width:100%;border-collapse:collapse;font-size:.85rem}
.single-wrap .spec-inline td{padding:.6rem 0;border-bottom:1px solid var(--line)}
.single-wrap .spec-inline td:first-child{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.single-wrap .spec-inline td:last-child{text-align:right;font-weight:500}
.single-wrap .content{font-size:1.05rem;max-width:70ch;color:rgba(237,237,233,.85)}
.single-wrap .content p{margin-bottom:1.2rem}
.back-link{display:inline-block;margin-top:3rem;font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--blue);padding-bottom:2px}
.pagination{padding:2rem 2.5vw;font-family:'Space Mono',monospace;font-size:.75rem}
.pagination .page-numbers{margin-right:1rem;color:var(--mute)}
.pagination .current{color:var(--blue)}

/* ---------- BLOG FALLBACK ---------- */
.bloc{padding:4rem 2.5vw}
.bloc article{margin-bottom:3rem;border-bottom:1px solid var(--line);padding-bottom:2rem;max-width:760px}
.bloc article h3{font-weight:500;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.8rem}
.bloc article h3 a:hover{color:var(--blue)}

/* ---------- CONTACT / FOOTER ---------- */
.contact{padding:9rem 2.5vw 3rem;border-top:1px solid var(--line)}
.contact .slab{padding:0;margin-bottom:2.4rem}
.contact .big{font-weight:500;font-size:clamp(1.5rem,5.4vw,4.8rem);letter-spacing:-.03em;line-height:1.05;display:inline-block;position:relative;word-break:break-all}
.contact .big::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:0;background:var(--blue);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.contact .big:hover::after{width:100%}
.contact .hint{display:block;margin-top:1.6rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:6rem;border-top:1px solid var(--line);padding-top:1.3rem}
.foot a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .rec,.hero h1 .caret,.reelbar .dotl{animation:none}
  html{scroll-behavior:auto}
}