/* JoceOffice Projets Widget — projets.css */

:root {
  --jopw-f:    'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
  --jopw-ease: cubic-bezier(.25,.46,.45,.94);
  --jopw-gap:  4px;
  --jopw-bd:   rgba(255,255,255,.08);
}

/* ── BARRE PROGRESSION HAUT ── */
.jopw-progress {
  position:fixed; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.05); z-index:9999; pointer-events:none;
}
.jopw-progress__bar { height:100%; width:0%; background:#fafafa; transition:width .08s linear; }

/* ── POURCENTAGE BAS DROITE ── */
.jopw-scroll-pct {
  position:fixed; bottom:2rem; right:2rem;
  font-family:var(--jopw-f);
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:500; letter-spacing:-.04em; line-height:1;
  color:rgba(255,255,255,.15);
  pointer-events:none; z-index:9998;
  transition:color .25s;
}
.jopw-scroll-pct.active { color:rgba(255,255,255,.55); }

/* ── FILTRES ── */
.jopw-filters {
  display:flex; flex-wrap:wrap; gap:5px;
  padding:1.5rem 0; border-bottom:1px solid var(--jopw-bd); margin-bottom:2rem;
}
.jopw-filter {
  display:inline-flex; align-items:center; gap:5px; padding:5px 13px;
  border:1px solid rgba(255,255,255,.1); border-radius:2px;
  background:transparent; color:rgba(255,255,255,.45);
  font-family:var(--jopw-f); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  cursor:pointer; transition:all .18s var(--jopw-ease);
}
.jopw-filter:hover { border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.85); }
.jopw-filter--active { background:#fafafa; border-color:#fafafa; color:#0a0a0a; }
.jopw-filter--active .jopw-filter__n { color:rgba(0,0,0,.4); }
.jopw-filter__n { font-size:9px; color:rgba(255,255,255,.25); }

/* ── GRILLE ── */
.jopw-grid-wrap { display:flex; flex-direction:column; gap:var(--jopw-gap); }

/* ════ LAYOUT ASYMÉTRIQUE ════ */
.jopw-row { display:grid; gap:var(--jopw-gap); }
.jopw-row--a    { grid-template-columns: var(--jopw-col-a, 2fr 1fr); }
.jopw-row--b    { grid-template-columns: var(--jopw-col-b, 1fr 2fr); }
.jopw-row--c    { grid-template-columns: var(--jopw-col-c, repeat(3,1fr)); }
.jopw-row--full { grid-template-columns: 1fr; }

.jopw-row--a .jopw-cell,
.jopw-row--b .jopw-cell  { height: var(--jopw-h-ab, 380px); }
.jopw-row--c .jopw-cell  { height: var(--jopw-h-c, 260px); }
.jopw-row--full .jopw-cell { height: var(--jopw-h-full, 480px); }

/* Grande cellule — titre plus grand */
.jopw-row--a .jopw-cell:first-child .jopw-cell__title,
.jopw-row--b .jopw-cell:last-child  .jopw-cell__title,
.jopw-row--full .jopw-cell__title { font-size:1.3rem !important; }

/* ════ LAYOUT BENTO ════ */
.jopw-bento-group {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows: var(--jopw-h-ab, 280px) var(--jopw-h-c, 200px);
  gap:var(--jopw-gap);
}
.jopw-bento-group .jopw-cell:nth-child(1) { grid-column:1; grid-row:1/3; }
.jopw-bento-group .jopw-cell:nth-child(2) { grid-column:2; grid-row:1; }
.jopw-bento-group .jopw-cell:nth-child(3) { grid-column:3; grid-row:1; }
.jopw-bento-group .jopw-cell:nth-child(4) { grid-column:2/4; grid-row:2; }
.jopw-bento-group .jopw-cell { height:100% !important; }
.jopw-bento-group .jopw-cell:nth-child(1) .jopw-cell__title { font-size:1.25rem !important; }

/* ════ LAYOUT ÉDITORIAL ════ */
.jopw-ed-group { display:flex; flex-direction:column; gap:var(--jopw-gap); margin-bottom:calc(var(--jopw-gap)*8); }
.jopw-ed-row1 .jopw-cell { height: calc(var(--jopw-h-ab, 380px) + 40px); }
.jopw-ed-row2 { display:grid; grid-template-columns:3fr 2fr; gap:var(--jopw-gap); }
.jopw-ed-row2 .jopw-cell { height: var(--jopw-h-ab, 320px); }
.jopw-ed-row3 { display:grid; grid-template-columns: var(--jopw-col-c, repeat(3,1fr)); gap:var(--jopw-gap); }
.jopw-ed-row3 .jopw-cell { height: var(--jopw-h-c, 240px); }
.jopw-ed-row1 .jopw-cell__title { font-size:1.4rem !important; }

/* Carte texte éditoriale */
.jopw-text-card {
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:2rem 1.75rem; background:#111; border:1px solid var(--jopw-bd);
  text-decoration:none; color:#fafafa; height:320px;
  opacity:0; filter:blur(8px); transform:translateY(10px);
  transition: opacity .9s var(--jopw-ease), filter .9s var(--jopw-ease), transform .7s var(--jopw-ease);
}
.jopw-text-card.on { opacity:1; filter:blur(0); transform:translateY(0); }
.jopw-text-card:hover { border-color:rgba(255,255,255,.2); }
.jopw-text-card__cat  { font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.3); margin-bottom:.6rem; }
.jopw-text-card__title { font-size:clamp(1rem,2vw,1.5rem); font-weight:500; letter-spacing:-.03em; line-height:1.1; color:#fafafa; margin-bottom:.8rem; }
.jopw-text-card__acc  { font-size:.82rem; color:rgba(255,255,255,.4); line-height:1.6; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.jopw-text-card__meta { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.2); }

/* ── CELLULE BASE ── */
.jopw-cell {
  display:block; position:relative; overflow:hidden;
  background:#1a1a1a; text-decoration:none; color:#fafafa;
  opacity:0; filter:blur(10px); transform:translateY(10px);
  transition: opacity .9s var(--jopw-ease), filter .9s var(--jopw-ease), transform .7s var(--jopw-ease);
}
.jopw-cell.on  { opacity:1; filter:blur(0); transform:translateY(0); }
.jopw-cell.off {
  opacity:0; filter:blur(4px); transform:translateY(-6px);
  transition: opacity .4s var(--jopw-ease), filter .4s var(--jopw-ease), transform .4s var(--jopw-ease);
}

/* Image — couvre toute la cellule (hauteur fixe) */
.jopw-cell__img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  filter:blur(12px) brightness(.6); transform:scale(1.05); opacity:0;
  transition: filter 1.3s var(--jopw-ease), transform 1.3s var(--jopw-ease), opacity .6s ease;
}
.jopw-cell.on .jopw-cell__img    { filter:blur(0) brightness(.88); transform:scale(1); opacity:1; }
.jopw-cell:hover .jopw-cell__img {
  transform:scale(1.03); filter:blur(0) brightness(1);
  transition: transform .7s var(--jopw-ease), filter .4s ease;
}

/* Image Pinterest — suit la hauteur naturelle */
.jopw-cell--natural .jopw-cell__img {
  position:relative; inset:auto;
  width:100%; height:auto;
  display:block;
}

.jopw-cell__bg { position:absolute; inset:0; background:#1c1c1c; }

.jopw-cell::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,0); transition:background .3s; pointer-events:none;
}
.jopw-cell:hover::after { background:rgba(0,0,0,.12); }

.jopw-cell__foot {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:3.5rem 1.1rem 1rem;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,transparent 100%);
  pointer-events:none;
  display:flex; flex-direction:column; gap:5px;
}
/* Pinterest : footer relatif (pas absolu) */
.jopw-cell--natural .jopw-cell__foot {
  position:relative;
  background:none;
  padding:.75rem .9rem .9rem;
}
.jopw-cell--natural .jopw-cell__title { color:#fafafa; }
.jopw-cell--natural .jopw-cell__sub   { color:rgba(255,255,255,.38); }

.jopw-cell__title {
  font-size:.95rem; font-weight:500; letter-spacing:-.02em; line-height:1.2; color:#fff;
}
.jopw-cell__sub {
  font-size:9px; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.38);
}
.jopw-cell__pin {
  position:absolute; top:.8rem; left:.8rem; z-index:3;
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2); border-radius:2px;
  padding:2px 7px; font-size:9px; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.8);
  font-family:var(--jopw-f);
}

/* ════ LAYOUT GRILLE UNIFORME ════ */
.jopw-grid-uniform {
  display:grid;
  grid-template-columns: var(--jopw-col-grid, repeat(3,1fr));
  gap:var(--jopw-gap);
}
.jopw-grid-uniform .jopw-cell { height: var(--jopw-h-ab, 380px); }

/* ════ LAYOUT PINTEREST ════ */
.jopw-pinterest {
  columns: var(--jopw-col-grid, 3);
  column-gap: var(--jopw-gap);
}
.jopw-pinterest .jopw-cell {
  display:block;
  break-inside:avoid;
  margin-bottom: var(--jopw-gap);
  height:auto !important;
}
.jopw-pinterest .jopw-cell__img {
  position:relative; inset:auto;
  width:100%; height:auto;
  transform:scale(1) !important;
  filter:blur(12px) brightness(.6); opacity:0;
  transition: filter 1.3s var(--jopw-ease), opacity .6s ease;
}
.jopw-pinterest .jopw-cell.on .jopw-cell__img {
  filter:blur(0) brightness(1); opacity:1;
}
.jopw-pinterest .jopw-cell:hover .jopw-cell__img {
  filter:blur(0) brightness(1.05);
}
.jopw-pinterest .jopw-cell__foot {
  position:relative; inset:auto;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(0);
  padding:.75rem .9rem .9rem;
}
.jopw-pinterest .jopw-cell::after { display:none; }

/* ── VIDE ── */
.jopw-empty {
  padding:4rem 0; font-size:10px; text-transform:uppercase;
  letter-spacing:.16em; color:rgba(255,255,255,.2); text-align:center;
  font-family:var(--jopw-f);
}

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .jopw-row--a .jopw-cell,
  .jopw-row--b .jopw-cell  { height:300px; }
  .jopw-row--c .jopw-cell  { height:210px; }
  .jopw-row--full .jopw-cell { height:360px; }
  .jopw-bento-group { grid-template-columns:1fr 1fr; grid-template-rows:240px 180px 160px; }
  .jopw-bento-group .jopw-cell:nth-child(1) { grid-column:1/3; grid-row:1; }
  .jopw-bento-group .jopw-cell:nth-child(2) { grid-column:1; grid-row:2; }
  .jopw-bento-group .jopw-cell:nth-child(3) { grid-column:2; grid-row:2; }
  .jopw-bento-group .jopw-cell:nth-child(4) { grid-column:1/3; grid-row:3; }
  .jopw-ed-row2 { grid-template-columns:1fr; }
  .jopw-text-card { height:200px; }
}
@media (max-width:680px) {
  .jopw-scroll-pct { font-size:1.4rem; bottom:1.25rem; right:1.25rem; }
  .jopw-row--a,
  .jopw-row--b { grid-template-columns:1fr; }
  .jopw-row--a .jopw-cell,
  .jopw-row--b .jopw-cell { height:260px; }
  .jopw-row--c { grid-template-columns:1fr 1fr; }
  .jopw-row--c .jopw-cell { height:200px; }
  .jopw-row--full .jopw-cell { height:280px; }
  .jopw-ed-row3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:420px) {
  .jopw-row--c { grid-template-columns:1fr; }
  .jopw-bento-group { grid-template-columns:1fr; grid-template-rows:repeat(4,220px); }
  .jopw-bento-group .jopw-cell { grid-column:1 !important; grid-row:auto !important; }
  .jopw-ed-row3 { grid-template-columns:1fr; }
}