/* ==========================================================================
   Zyganium Nuit Doree - design system
   Charge uniquement sur les gabarits du theme Zyganium.
   ========================================================================== */

:root{
  --zyg-bg:#0A0A0B;
  --zyg-surface:#121214;
  --zyg-ink:#E9E5DD;
  --zyg-muted:#99948A;
  --zyg-line:#2A2822;
  --zyg-accent:#D8A93F;
  --zyg-accent-deep:#885A24;
  --zyg-accent-soft:#FCD376;

  --zyg-font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --zyg-font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --zyg-font-mono:"JetBrains Mono",SFMono-Regular,Consolas,monospace;

  --zyg-xs:8px; --zyg-sm:14px; --zyg-md:24px; --zyg-lg:48px; --zyg-xl:96px;
  --zyg-radius:2px;
  --zyg-container:1280px;
}

/* --- base, portee au gabarit Zyganium uniquement --- */
body.zyg{
  margin:0;
  background:var(--zyg-bg);
  color:var(--zyg-ink);
  font-family:var(--zyg-font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.zyg *,.zyg *::before,.zyg *::after{box-sizing:border-box;}

/* Neutralise les defauts UA sans battre les regles de composant. */
.zyg :where(h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){margin:0;padding:0;border:0;}
.zyg :where(ul,ol){list-style:none;}
.zyg :where(img,video){display:block;max-width:100%;height:auto;}

/* --- conteneur unique, partage par toutes les sections --- */
.zyg-wrap{
  width:100%;
  max-width:var(--zyg-container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,56px);
}
.zyg-section{padding-block:var(--zyg-xl);}
.zyg-section + .zyg-section{border-block-start:1px solid var(--zyg-line);}

/* --- typographie --- */
.zyg-display{
  font-family:var(--zyg-font-display);
  font-stretch:118%;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
.zyg-h1{font-size:clamp(2.4rem,6vw,4.4rem);}
.zyg-h2{font-size:clamp(1.8rem,3.6vw,2.7rem);}
.zyg-h3{font-size:clamp(1.2rem,2vw,1.5rem);}
.zyg-lead{color:var(--zyg-muted);max-width:62ch;font-size:1.06rem;}
.zyg-body{max-width:68ch;}
.zyg-body + .zyg-body{margin-block-start:var(--zyg-sm);}

.zyg-label{
  font-family:var(--zyg-font-mono);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--zyg-accent);
}
.zyg-figure{
  font-family:var(--zyg-font-display);
  font-stretch:118%;
  font-weight:600;
  font-size:clamp(2.6rem,6vw,4.2rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--zyg-ink);
}

.zyg a{color:var(--zyg-accent-soft);text-decoration:none;}
.zyg a:hover{color:var(--zyg-accent);}
.zyg a:focus-visible,.zyg button:focus-visible,.zyg input:focus-visible,.zyg textarea:focus-visible{
  outline:2px solid var(--zyg-accent);outline-offset:3px;
}

/* --- boutons --- */
.zyg-btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--zyg-font-body);font-weight:600;font-size:.95rem;
  padding:.85em 1.6em;border-radius:var(--zyg-radius);border:1px solid transparent;
  background:var(--zyg-accent);color:var(--zyg-bg);
  transition:background .2s ease,border-color .2s ease;
}
.zyg-btn:hover{background:var(--zyg-accent-soft);color:var(--zyg-bg);}
.zyg-btn--ghost{background:transparent;color:var(--zyg-ink);border-color:var(--zyg-line);}
.zyg-btn--ghost:hover{background:transparent;border-color:var(--zyg-accent);color:var(--zyg-ink);}

/* --- fiche d'identite client --- */
.zyg-facts{border-block-start:1px solid var(--zyg-line);max-width:760px;}
.zyg-facts div{
  display:grid;grid-template-columns:200px 1fr;gap:var(--zyg-md);
  padding-block:var(--zyg-sm);border-block-end:1px solid var(--zyg-line);
}
.zyg-facts dt{margin:0;}
.zyg-facts dd{margin:0;font-weight:500;}
@media(max-width:640px){.zyg-facts div{grid-template-columns:1fr;gap:4px;}}

/* --- lecteur video en facade --- */
.zyg-video{position:relative;background:var(--zyg-surface);overflow:hidden;}
.zyg-video[data-ratio="16:9"]{aspect-ratio:16/9;}
.zyg-video[data-ratio="9:16"]{aspect-ratio:9/16;}
.zyg-video[data-ratio="1:1"]{aspect-ratio:1/1;}
.zyg-video img,.zyg-video video{width:100%;height:100%;object-fit:cover;}
.zyg-video__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(10,10,11,.72),rgba(10,10,11,0) 55%);
  border:0;cursor:pointer;width:100%;color:var(--zyg-ink);
}
.zyg-video__play span{
  width:64px;height:64px;border:1px solid var(--zyg-accent);border-radius:50%;
  display:grid;place-items:center;transition:background .2s ease;
}
.zyg-video__play:hover span{background:var(--zyg-accent);color:var(--zyg-bg);}

/* --- grille portfolio : regulière, la variation vient des images --- */
.zyg-grid{display:grid;gap:var(--zyg-md);grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.zyg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.zyg-grid{grid-template-columns:1fr;}}

/* --- filtres --- */
.zyg-filters{display:flex;flex-wrap:wrap;gap:var(--zyg-md);}
.zyg-filters a{
  color:var(--zyg-muted);padding-block-end:4px;border-block-end:1px solid transparent;
  font-family:var(--zyg-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
}
.zyg-filters a[aria-current="true"]{color:var(--zyg-accent);border-block-end-color:var(--zyg-accent);}

/* --- reveal au scroll, degrade en visible sans JS --- */
.zyg-js .zyg-reveal{opacity:0;transform:translateY(12px);}
.zyg-js .zyg-reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}
@media(prefers-reduced-motion:reduce){
  .zyg-js .zyg-reveal{opacity:1;transform:none;transition:none;}
  .zyg *{animation:none !important;}
}

/* ==========================================================================
   Composants des gabarits client et portfolio
   ========================================================================== */

.zyg-section--tight{padding-block:var(--zyg-lg);}
.zyg-client__head{padding-block-end:var(--zyg-lg);}
.zyg-client__head .zyg-label{display:block;margin-block-end:var(--zyg-sm);}
.zyg-client__head .zyg-lead{margin-block-start:var(--zyg-md);}

/* La scene video deborde du conteneur : c'est le seul element qui casse le cadre. */
.zyg-client__stage{padding-block-end:var(--zyg-lg);}
.zyg-client__stage .zyg-video{max-height:82vh;}
.zyg-client__stage .zyg-video[data-ratio="9:16"]{max-width:min(440px,86vw);margin-inline:auto;}

.zyg-video.is-empty{display:grid;place-items:center;
  background:linear-gradient(140deg,#141414 0%,#1C1913 55%,#0E0E0F 100%);}
.zyg-video__pending{margin:0;}
.zyg-video__title{
  position:absolute;inset-inline-start:var(--zyg-md);inset-block-end:var(--zyg-md);
  font-style:normal;font-size:.9rem;font-weight:500;text-align:start;
}
.zyg-video__play{flex-direction:column;gap:var(--zyg-sm);}

/* Vignettes des autres videos d'un meme client. */
.zyg-thumbs{display:flex;gap:var(--zyg-sm);overflow-x:auto;padding-block-start:var(--zyg-sm);}
.zyg-thumbs button{
  flex:0 0 132px;background:none;border:0;padding:0;cursor:pointer;text-align:start;
  color:var(--zyg-muted);font-family:var(--zyg-font-body);font-size:.8rem;
}
.zyg-thumbs img{width:132px;height:78px;object-fit:cover;
  border-block-end:2px solid transparent;}
.zyg-thumbs button[aria-current="true"]{color:var(--zyg-ink);}
.zyg-thumbs button[aria-current="true"] img{border-block-end-color:var(--zyg-accent);}
.zyg-thumbs span{display:block;padding-block-start:6px;}

/* Prose des blocs redactionnels. */
.zyg-prose p{margin-block-end:var(--zyg-sm);}
.zyg-prose p:last-child{margin-block-end:0;}
.zyg-prose strong{color:#fff;}

/* Citation client. */
.zyg-quote{margin:0;max-width:72ch;border-inline-start:2px solid var(--zyg-accent);
  padding-inline-start:var(--zyg-md);}
.zyg-quote__text{font-size:1.15rem;}
.zyg-quote footer{margin-block-start:var(--zyg-sm);}
.zyg-quote footer strong{display:block;}

/* Vignette client. */
.zyg-card{display:block;color:inherit;}
.zyg-card__media{
  display:block;background:linear-gradient(140deg,#141414 0%,#1C1913 55%,#0E0E0F 100%);
  overflow:hidden;
}
.zyg-card__media{aspect-ratio:4/5;}
.zyg-card__media img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease;}
.zyg-card:hover .zyg-card__media img{opacity:.72;}
.zyg-card__body{display:block;padding-block-start:var(--zyg-sm);}
.zyg-card__body strong{display:block;font-weight:600;color:var(--zyg-ink);}
.zyg-card__body .zyg-label{display:block;margin-block-start:4px;color:var(--zyg-muted);}
.zyg-card:hover .zyg-card__body .zyg-label{color:var(--zyg-accent);}

/* Filtres empiles : secteur puis service. */
.zyg-filters + .zyg-filters{margin-block-start:var(--zyg-sm);}

.zyg-pagination{display:flex;gap:var(--zyg-sm);margin-block-start:var(--zyg-lg);
  font-family:var(--zyg-font-mono);font-size:12px;}
.zyg-pagination .current{color:var(--zyg-accent);}

.zyg-cta .zyg-lead{margin-block:var(--zyg-sm) var(--zyg-md);}

/* Lecteur externe injecté au clic (solution d'attente avant l'auto-hébergement). */
.zyg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Grille insérée dans une page Elementor : le design system reste confiné ici. */
.zyg-shortcode{color:var(--zyg-ink);font-family:var(--zyg-font-body);}
.zyg-shortcode .zyg-h2{margin-block-end:var(--zyg-md);}
.zyg-shortcode__more{margin-block-start:var(--zyg-md);}

/* Libellé de chaque rangée de filtres. */
.zyg-filters{align-items:baseline;}
.zyg-filters > b{
  font-family:var(--zyg-font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--zyg-muted-2,#6E6A62);font-weight:400;
  min-width:70px;
}