/* ============================================================
   DORIS CREATIVE — PORTFOLIO, thème "Instagram éditorial"
   À charger après styles.css et theme-instagram.css.
   ============================================================ */
html body.portfolio-page{background:var(--ig-paper)}

/* ---------- Header ---------- */
html body.portfolio-page .site-header{
  background:linear-gradient(to bottom,rgba(60,16,12,.94),rgba(60,16,12,0));
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;   /* un flou fixe par-dessus une vidéo qui joue = saccades */
}
.portfolio-page .desktop-nav a.active::after{right:0}

/* ---------- Hero : bordeaux + grille animée (couche fournie par .continuous-red-bg) ---------- */
html body.portfolio-page .portfolio-hero{
  background:none !important;background-image:none !important;animation:none !important;
  min-height:0;padding:176px 6vw 96px;color:var(--ig-cream);
}
html body.portfolio-page .portfolio-hero .eyebrow{
  color:#eba797;font-family:var(--ig-sans);font-weight:700;letter-spacing:.2em;margin-bottom:20px;
}
html body.portfolio-page .portfolio-hero h1{
  font-family:var(--ig-serif);font-weight:400;text-transform:none;
  font-size:clamp(46px,6.2vw,100px);line-height:1.1;letter-spacing:-.055em;
  color:var(--ig-cream);max-width:1100px;margin:0 0 34px;
}
html body.portfolio-page .portfolio-hero h1 em{
  position:relative;display:inline-block;
  padding:.12em .38em .2em;margin:.18em .1em;
  border:1.5px dashed rgba(255,255,255,.9);
  font-family:var(--ig-serif);font-style:normal;font-weight:800;letter-spacing:-.05em;color:#fff;
  line-height:1.08;white-space:nowrap;
}
html body.portfolio-page .portfolio-hero h1 em::before{
  content:"";position:absolute;inset:-5.25px;pointer-events:none;
  background:
    linear-gradient(#fff,#fff) 0 0/9px 9px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/9px 9px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/9px 9px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/9px 9px no-repeat;
}
html body.portfolio-page .portfolio-hero > p:last-child{
  font-family:var(--ig-sans);color:rgba(243,230,211,.9);font-size:18px;line-height:1.5;max-width:620px;
}

/* ---------- Zone crème : grille animée + filtres + projets ---------- */
html body.portfolio-page .continuous-cream-bg{overflow:clip}   /* clip (et non hidden) pour garder les filtres collants */

/* Filtres */
html body.portfolio-page .filter-row{
  top:84px;
  background:rgba(242,228,208,.86);
  border-bottom:1px solid rgba(143,20,15,.16);
}
html body .filter-row .filter-btn{
  border:1px solid var(--ig-burg) !important;
  color:var(--ig-burg) !important;
  border-radius:0 !important;
  font-family:var(--ig-sans) !important;
  transition:background .25s ease,color .25s ease,transform .25s ease !important;
}
html body .filter-row .filter-btn:hover{
  background:var(--ig-burg) !important;color:var(--ig-cream) !important;
}
/* filtre actif = petit morceau de scotch rouge */
html body .filter-row .filter-btn.active{
  background:linear-gradient(180deg,#e4533f,#d03a29) !important;
  border-color:transparent !important;color:#fff !important;
  transform:rotate(-1.6deg);
}

/* ---------- Cartes projets : photos épinglées sur papier déchiré ---------- */
html body.portfolio-page .portfolio-grid{gap:56px 40px !important;padding-top:54px !important}
@keyframes pfIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
html body.portfolio-page .portfolio-item.project-card{
  --rot:-1.6deg;--lift:0px;--tape-x:38%;--tape-rot:-4deg;--torn:polygon(0.0% 1.5%,6.0% 1.8%,12.0% 1.9%,18.0% 2.3%,24.0% 1.8%,30.0% 2.2%,36.0% 0.1%,42.0% 1.1%,48.0% 2.3%,54.0% 1.6%,60.0% 2.2%,66.0% 0.3%,72.0% 1.1%,78.0% 0.6%,84.0% 1.3%,90.0% 1.4%,96.0% 0.0%,100.0% 0.5%,99.6% 16.0%,98.8% 34.0%,99.0% 52.0%,99.8% 70.0%,99.0% 86.0%,100.0% 99.5%,97.0% 97.9%,94.0% 99.6%,91.0% 100.0%,88.0% 97.0%,85.0% 99.3%,82.0% 99.3%,79.0% 96.7%,76.0% 97.0%,73.0% 99.0%,70.0% 96.7%,67.0% 98.2%,64.0% 97.7%,61.0% 99.3%,58.0% 96.8%,55.0% 97.7%,52.0% 96.7%,49.0% 97.0%,46.0% 99.0%,43.0% 98.8%,40.0% 99.4%,37.0% 99.5%,34.0% 99.8%,31.0% 99.0%,28.0% 97.9%,25.0% 100.0%,22.0% 97.7%,19.0% 98.9%,16.0% 98.9%,13.0% 97.2%,10.0% 98.4%,7.0% 98.9%,4.0% 98.4%,1.0% 97.6%,0.1% 84.0%,1.3% 66.0%,0.0% 48.0%,1.0% 30.0%,1.1% 14.0%);
  position:relative;isolation:isolate;overflow:visible;
  background:none !important;
  transform:perspective(900px) translateY(var(--lift)) rotate(var(--rot)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  filter:drop-shadow(0 12px 12px rgba(90,40,20,.22)) drop-shadow(0 2px 2px rgba(90,40,20,.16));
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease !important;
  animation:pfIn .7s cubic-bezier(.22,.61,.36,1) both;
  cursor:pointer;
}
html body.portfolio-page .portfolio-item.project-card:nth-child(4n+1){--rot:-1.6deg;--tape-x:14%;--tape-rot:-5deg;--torn:polygon(0.0% 1.5%,6.0% 1.8%,12.0% 1.9%,18.0% 2.3%,24.0% 1.8%,30.0% 2.2%,36.0% 0.1%,42.0% 1.1%,48.0% 2.3%,54.0% 1.6%,60.0% 2.2%,66.0% 0.3%,72.0% 1.1%,78.0% 0.6%,84.0% 1.3%,90.0% 1.4%,96.0% 0.0%,100.0% 0.5%,99.6% 16.0%,98.8% 34.0%,99.0% 52.0%,99.8% 70.0%,99.0% 86.0%,100.0% 99.5%,97.0% 97.9%,94.0% 99.6%,91.0% 100.0%,88.0% 97.0%,85.0% 99.3%,82.0% 99.3%,79.0% 96.7%,76.0% 97.0%,73.0% 99.0%,70.0% 96.7%,67.0% 98.2%,64.0% 97.7%,61.0% 99.3%,58.0% 96.8%,55.0% 97.7%,52.0% 96.7%,49.0% 97.0%,46.0% 99.0%,43.0% 98.8%,40.0% 99.4%,37.0% 99.5%,34.0% 99.8%,31.0% 99.0%,28.0% 97.9%,25.0% 100.0%,22.0% 97.7%,19.0% 98.9%,16.0% 98.9%,13.0% 97.2%,10.0% 98.4%,7.0% 98.9%,4.0% 98.4%,1.0% 97.6%,0.1% 84.0%,1.3% 66.0%,0.0% 48.0%,1.0% 30.0%,1.1% 14.0%)}
html body.portfolio-page .portfolio-item.project-card:nth-child(4n+2){--rot:1.4deg;--tape-x:60%;--tape-rot:5deg;--torn:polygon(0.0% 1.3%,6.0% 1.9%,12.0% 2.3%,18.0% 0.7%,24.0% 1.8%,30.0% 1.7%,36.0% 1.6%,42.0% 0.3%,48.0% 0.1%,54.0% 0.9%,60.0% 1.8%,66.0% 0.6%,72.0% 1.2%,78.0% 0.8%,84.0% 2.0%,90.0% 2.3%,96.0% 1.0%,100.0% 2.4%,99.9% 16.0%,98.9% 34.0%,98.9% 52.0%,99.8% 70.0%,99.1% 86.0%,100.0% 98.1%,97.0% 96.8%,94.0% 99.3%,91.0% 98.2%,88.0% 97.0%,85.0% 97.8%,82.0% 98.9%,79.0% 99.7%,76.0% 96.8%,73.0% 98.4%,70.0% 96.6%,67.0% 99.5%,64.0% 97.2%,61.0% 97.2%,58.0% 96.9%,55.0% 99.9%,52.0% 98.7%,49.0% 99.8%,46.0% 97.4%,43.0% 98.8%,40.0% 96.7%,37.0% 98.7%,34.0% 97.4%,31.0% 97.0%,28.0% 99.2%,25.0% 98.1%,22.0% 96.7%,19.0% 98.2%,16.0% 98.8%,13.0% 99.1%,10.0% 97.3%,7.0% 99.3%,4.0% 97.9%,1.0% 98.1%,0.7% 84.0%,0.2% 66.0%,0.9% 48.0%,1.2% 30.0%,0.4% 14.0%)}
html body.portfolio-page .portfolio-item.project-card:nth-child(4n+3){--rot:-0.9deg;--tape-x:36%;--tape-rot:3deg;--torn:polygon(0.0% 1.3%,6.0% 0.8%,12.0% 2.0%,18.0% 0.7%,24.0% 1.2%,30.0% 0.8%,36.0% 1.0%,42.0% 2.3%,48.0% 0.2%,54.0% 1.1%,60.0% 0.5%,66.0% 0.8%,72.0% 2.4%,78.0% 0.8%,84.0% 1.5%,90.0% 1.0%,96.0% 1.8%,100.0% 1.1%,99.8% 16.0%,99.4% 34.0%,99.5% 52.0%,99.0% 70.0%,99.3% 86.0%,100.0% 99.3%,97.0% 97.7%,94.0% 99.0%,91.0% 98.3%,88.0% 99.3%,85.0% 98.6%,82.0% 97.3%,79.0% 98.2%,76.0% 97.4%,73.0% 97.4%,70.0% 98.0%,67.0% 97.8%,64.0% 98.6%,61.0% 97.9%,58.0% 97.4%,55.0% 99.7%,52.0% 96.8%,49.0% 98.8%,46.0% 99.5%,43.0% 99.5%,40.0% 98.8%,37.0% 99.8%,34.0% 98.6%,31.0% 98.6%,28.0% 97.8%,25.0% 98.4%,22.0% 96.8%,19.0% 97.8%,16.0% 98.9%,13.0% 97.0%,10.0% 97.6%,7.0% 96.7%,4.0% 97.5%,1.0% 96.7%,0.3% 84.0%,0.4% 66.0%,1.3% 48.0%,0.0% 30.0%,1.2% 14.0%)}
html body.portfolio-page .portfolio-item.project-card:nth-child(4n+4){--rot:1.8deg;--tape-x:68%;--tape-rot:-4deg;--torn:polygon(0.0% 0.9%,6.0% 0.6%,12.0% 0.4%,18.0% 2.2%,24.0% 1.4%,30.0% 1.7%,36.0% 1.3%,42.0% 0.9%,48.0% 1.8%,54.0% 1.4%,60.0% 1.9%,66.0% 1.6%,72.0% 2.0%,78.0% 1.1%,84.0% 0.4%,90.0% 0.4%,96.0% 1.7%,100.0% 0.4%,99.1% 16.0%,99.2% 34.0%,99.9% 52.0%,99.0% 70.0%,100.0% 86.0%,100.0% 97.1%,97.0% 97.1%,94.0% 99.3%,91.0% 97.5%,88.0% 97.5%,85.0% 99.6%,82.0% 97.7%,79.0% 99.6%,76.0% 96.9%,73.0% 97.7%,70.0% 96.7%,67.0% 99.8%,64.0% 98.9%,61.0% 97.9%,58.0% 97.9%,55.0% 99.4%,52.0% 97.0%,49.0% 97.1%,46.0% 99.0%,43.0% 99.5%,40.0% 97.7%,37.0% 98.6%,34.0% 97.7%,31.0% 98.3%,28.0% 98.7%,25.0% 99.9%,22.0% 99.5%,19.0% 98.4%,16.0% 97.5%,13.0% 98.6%,10.0% 97.5%,7.0% 98.2%,4.0% 97.0%,1.0% 97.8%,0.4% 84.0%,0.2% 66.0%,0.1% 48.0%,0.1% 30.0%,1.1% 14.0%)}
html body.portfolio-page .portfolio-item.project-card:nth-child(2){animation-delay:.07s}
html body.portfolio-page .portfolio-item.project-card:nth-child(3){animation-delay:.14s}
html body.portfolio-page .portfolio-item.project-card:nth-child(4){animation-delay:.21s}
html body.portfolio-page .portfolio-item.project-card:nth-child(5){animation-delay:.28s}
html body.portfolio-page .portfolio-item.project-card:nth-child(6){animation-delay:.35s}

/* le papier */
html body.portfolio-page .portfolio-item.project-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 7%,rgba(255,255,255,0) 93%,rgba(255,255,255,.68) 100%),
    linear-gradient(160deg,#f9efdb,#f0dfc1);
  clip-path:var(--torn);
}
/* le scotch */
html body.portfolio-page .portfolio-item.project-card::after{
  content:"";position:absolute;z-index:3;top:-17px;left:var(--tape-x);width:96px;height:32px;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.24) 0 6%,transparent 6% 26%,rgba(90,0,0,.11) 26% 30%,transparent 30% 58%,rgba(255,255,255,.17) 58% 63%,transparent 63% 84%,rgba(90,0,0,.09) 84% 88%,transparent 88%),
    linear-gradient(180deg,#e4533f,#d03a29);
  clip-path:polygon(0 0,100% 0,98% 20%,100% 40%,97% 60%,100% 80%,98% 100%,0 100%,2% 80%,0 60%,3% 40%,0 20%);
  transform:rotate(var(--tape-rot));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  opacity:.94;
}
/* la photo, cadrée dans le papier */
html body.portfolio-page .portfolio-item.project-card > img{
  position:absolute;top:14px;left:14px;right:auto;bottom:auto;
  width:calc(100% - 28px) !important;height:calc(100% - 38px) !important;
  object-fit:cover;transition:filter .5s ease;
}
html body.portfolio-page .portfolio-item.project-card:hover > img{transform:none;filter:brightness(1.05) contrast(1.03)}
/* le titre, en bas de la photo */
/* calque foncé : recouvre toute l'image d'aperçu (plus sombre vers le bas, là où est le titre) */
html body.portfolio-page .portfolio-item.project-card .item-meta{
  position:absolute;inset:14px 14px 24px 14px;padding:0 22px 20px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(34,8,7,.18) 0%,rgba(34,8,7,.42) 45%,rgba(34,8,7,.9) 100%);
  transform:none;pointer-events:none;
}
html body.portfolio-page .portfolio-item.project-card .item-meta span{
  font-family:var(--ig-sans);font-weight:700;font-size:11px;letter-spacing:.16em;color:#f3cfc4;
}
html body.portfolio-page .portfolio-item.project-card .item-meta h2{
  font-family:var(--ig-serif);font-weight:800;text-transform:none;
  font-size:27px;line-height:1.08;letter-spacing:-.045em;color:var(--ig-cream);margin:6px 0 0;
}
html body.portfolio-page .portfolio-item.project-card:hover{
  --rot:0deg;--lift:-12px;
  filter:drop-shadow(0 26px 22px rgba(90,40,20,.28)) drop-shadow(0 3px 3px rgba(90,40,20,.2));
}
html body.portfolio-page .portfolio-item.project-card:hover::after{
  transform:rotate(calc(var(--tape-rot) * -.6)) translateY(-3px);
}
html body.portfolio-page .portfolio-item.project-card:hover .item-meta{transform:none}

/* ---------- Fenêtre projet ---------- */
html body .project-modal{
  background:rgba(34,8,7,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html body .project-modal-panel{
  background:#f6ead4;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
html body .project-modal-panel::before{
  content:"";position:absolute;top:-17px;left:calc(50% - 55px);width:110px;height:34px;z-index:3;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.24) 0 6%,transparent 6% 26%,rgba(90,0,0,.11) 26% 30%,transparent 30% 58%,rgba(255,255,255,.17) 58% 63%,transparent 63% 84%,rgba(90,0,0,.09) 84% 88%,transparent 88%),
    linear-gradient(180deg,#e4533f,#d03a29);
  clip-path:polygon(0 0,100% 0,98% 20%,100% 40%,97% 60%,100% 80%,98% 100%,0 100%,2% 80%,0 60%,3% 40%,0 20%);
  transform:rotate(-2.5deg);opacity:.94;
}
html body .project-modal-close{background:#7a0d0c;color:var(--ig-cream);transition:background .25s ease,transform .25s ease}
html body .project-modal-close:hover{background:var(--ig-red);transform:rotate(90deg)}
html body .project-modal-head p{
  color:var(--ig-red);font-family:var(--ig-sans);font-weight:700;font-size:12px;letter-spacing:.16em;
}
html body .project-modal-head h2{
  font-family:var(--ig-serif);font-weight:800;color:var(--ig-red);letter-spacing:-.055em;
}
html body .project-modal-gallery img{background:#efe0c6}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  html body.portfolio-page .portfolio-hero{padding:116px 22px 56px !important}
  html body.portfolio-page .portfolio-hero h1{font-size:clamp(38px,10.6vw,54px) !important;line-height:1.1 !important;margin-bottom:26px !important}
  html body.portfolio-page .portfolio-hero > p:last-child{font-size:16px !important}
  html body.portfolio-page .filter-row{top:70px}
  html body.portfolio-page .portfolio-grid{gap:48px !important;padding:44px 22px 90px !important}
  html body.portfolio-page .portfolio-item.project-card h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  html body.portfolio-page .portfolio-item.project-card{animation:none !important}
}

/* ============================================================
   PORTFOLIO : fond beige sans grille + menu des catégories « sommaire éditorial »
   Les catégories sont écrites en grand, entre deux filets pointillés ;
   la catégorie choisie est entourée du cadre de sélection pointillé (signature du site).
   ============================================================ */
html body.portfolio-page .continuous-cream-bg::before,
html body.portfolio-page .continuous-cream-bg::after{content:none !important;display:none !important}
html body.portfolio-page .continuous-cream-bg{padding-bottom:100px}

html body.portfolio-page .filter-row{
  counter-reset:ft;
  position:static !important;top:auto !important;
  display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;
  gap:10px 46px !important;
  max-width:1180px;margin:76px auto 0 !important;padding:30px 24px !important;
  background:none !important;background-image:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;overflow:visible !important;
  border:0 !important;
  border-top:1.5px dashed rgba(74,22,18,.32) !important;
  border-bottom:1.5px dashed rgba(74,22,18,.32) !important;
}
html body.portfolio-page .filter-row .filter-btn{
  counter-increment:ft;
  position:relative;
  display:inline-flex !important;align-items:flex-start;gap:9px;
  min-width:0 !important;margin:0;
  padding:14px 22px !important;
  border:0 !important;border-radius:0 !important;
  background:none !important;background-image:none !important;box-shadow:none !important;
  transform:none !important;filter:none !important;
  outline:1.5px dashed transparent;outline-offset:0;
  color:rgba(74,22,18,.6) !important;
  font-family:var(--ig-serif) !important;font-weight:600 !important;font-style:normal !important;
  font-size:clamp(20px,2vw,27px) !important;letter-spacing:-.035em !important;
  text-transform:none !important;line-height:1.1 !important;text-align:left;
  cursor:pointer;
  transition:color .25s ease,outline-color .25s ease !important;
}
html body.portfolio-page .filter-row .filter-btn::before{
  content:counter(ft,decimal-leading-zero);
  margin-top:.2em;
  font-family:var(--ig-serif);font-style:italic;font-weight:500;font-size:14px;letter-spacing:0;
  color:rgba(74,22,18,.5);
  transition:color .25s ease;
}
/* poignées aux 4 coins du cadre de sélection */
html body.portfolio-page .filter-row .filter-btn::after{
  content:"";position:absolute;inset:-4.5px;pointer-events:none;opacity:0;
  background:
    linear-gradient(#4a1612,#4a1612) 0 0/9px 9px no-repeat,
    linear-gradient(#4a1612,#4a1612) 100% 0/9px 9px no-repeat,
    linear-gradient(#4a1612,#4a1612) 0 100%/9px 9px no-repeat,
    linear-gradient(#4a1612,#4a1612) 100% 100%/9px 9px no-repeat;
  transform:none;clip-path:none;top:auto;left:auto;width:auto;height:auto;
  transition:opacity .25s ease;
}
html body.portfolio-page .filter-row .filter-btn:hover{
  background:none !important;color:#4a1612 !important;
  outline-color:rgba(74,22,18,.4);
}
html body.portfolio-page .filter-row .filter-btn:hover::after{opacity:.4}
html body.portfolio-page .filter-row .filter-btn.active{
  background:none !important;color:#4a1612 !important;font-weight:800 !important;
  outline-color:#4a1612;
}
html body.portfolio-page .filter-row .filter-btn.active::before{color:#8f140f}
html body.portfolio-page .filter-row .filter-btn.active::after{opacity:1}

/* les projets : plus bas sous le menu */
html body.portfolio-page .portfolio-grid{padding-top:72px !important}

@media (max-width:760px){
  html body.portfolio-page .filter-row{margin-top:48px !important;padding:20px 8px !important;gap:6px 10px !important}
  html body.portfolio-page .filter-row .filter-btn{font-size:19px !important;padding:12px 14px !important}
  html body.portfolio-page .filter-row .filter-btn::before{font-size:12px}
  html body.portfolio-page .portfolio-grid{padding-top:52px !important}
}

/* ============================================================
   MENU DES CATÉGORIES : plus petit (une seule ligne), sans numéros, police sans-serif claire
   ============================================================ */
html body.portfolio-page .filter-row .filter-btn::before{content:none !important;display:none !important}
html body.portfolio-page .filter-row .filter-btn{
  font-family:var(--ig-sans) !important;font-style:normal !important;font-weight:700 !important;
  font-size:clamp(14px,1.4vw,18px) !important;
  letter-spacing:0 !important;text-transform:none !important;
  padding:14px 20px !important;gap:0;
  white-space:nowrap;
}
html body.portfolio-page .filter-row .filter-btn.active{font-weight:700 !important}
@media (min-width:901px){
  html body.portfolio-page .filter-row{flex-wrap:nowrap !important;gap:6px 30px !important;max-width:1240px}
}
@media (max-width:900px){
  html body.portfolio-page .filter-row{gap:8px 14px !important}
  html body.portfolio-page .filter-row .filter-btn{font-size:15px !important;padding:12px 16px !important}
}
@media (max-width:760px){
  html body.portfolio-page .filter-row .filter-btn{font-size:14px !important;padding:11px 14px !important}
}

/* ============================================================
   VERSION TÉLÉPHONE : même menu des catégories que sur ordinateur + fond beige sans aucune grille
   (styles.css impose sur mobile une grille 2×2 de boutons pleine largeur : on la remplace ici)
   ============================================================ */
/* beige : aucune grille, quel que soit l'écran */
html body.portfolio-page .continuous-cream-bg{
  --grid-line:transparent;--grid-hi:transparent;--grid-glow:transparent;
  background-image:none !important;
}

@media (max-width:900px){
  html body.portfolio-page .filter-row{
    display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;
    width:auto !important;box-sizing:border-box;
    margin:44px 16px 0 !important;padding:16px 4px !important;
    gap:4px 6px !important;
    grid-template-columns:none !important;
  }
  html body.portfolio-page .filter-row .filter-btn{
    display:inline-flex !important;align-items:center;justify-content:flex-start;
    width:auto !important;min-width:0 !important;min-height:0 !important;flex:0 0 auto;
    padding:11px 12px !important;
    font-size:13px !important;letter-spacing:0 !important;line-height:1.1 !important;
    text-align:left;white-space:nowrap !important;text-transform:none !important;
    border:0 !important;border-radius:0 !important;
  }
}
@media (max-width:360px){
  html body.portfolio-page .filter-row .filter-btn{font-size:12px !important;padding:10px 10px !important}
}
/* écrans tactiles : pas de cadre « fantôme » qui reste après un appui */
@media (hover:none){
  html body.portfolio-page .filter-row .filter-btn:not(.active):hover{
    color:rgba(74,22,18,.6) !important;outline-color:transparent !important;
  }
  html body.portfolio-page .filter-row .filter-btn:not(.active):hover::after{opacity:0 !important}
}

/* ============================================================
   MENU DES CATÉGORIES — « sélecteur » : une pastille bordeaux pleine qui glisse d'une catégorie à l'autre
   Plus de pointillés (ni autour du menu, ni sur la catégorie choisie). Même rendu sur ordinateur et téléphone.
   La pastille est créée par theme-portfolio.js ; sans JavaScript, la catégorie active reste surlignée.
   ============================================================ */
html body.portfolio-page .filter-row{
  position:relative !important;
  display:flex !important;flex-wrap:nowrap !important;justify-content:center !important;align-items:center !important;
  width:fit-content !important;max-width:calc(100% - 32px);box-sizing:border-box;
  margin:76px auto 0 !important;padding:6px !important;gap:2px !important;
  background:rgba(74,22,18,.07) !important;
  border:0 !important;border-radius:999px !important;
  grid-template-columns:none !important;
}
html body.portfolio-page .filter-row .filter-btn{
  position:relative;z-index:1;
  outline:none !important;
  padding:13px 22px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:rgba(74,22,18,.72) !important;
  font-size:clamp(14px,1.3vw,17px) !important;
  transition:color .3s ease,background-color .3s ease !important;
}
html body.portfolio-page .filter-row .filter-btn::before,
html body.portfolio-page .filter-row .filter-btn::after{content:none !important;display:none !important}
html body.portfolio-page .filter-row .filter-btn:hover{
  color:#4a1612 !important;background:rgba(74,22,18,.07) !important;outline:none !important;
}
html body.portfolio-page .filter-row .filter-btn.active,
html body.portfolio-page .filter-row .filter-btn.active:hover{
  color:#f6ead4 !important;background:#4a1612 !important;outline:none !important;
}
/* avec la pastille glissante, c'est elle qui porte la couleur */
html body.portfolio-page .filter-row.has-pill .filter-btn.active,
html body.portfolio-page .filter-row.has-pill .filter-btn.active:hover{background:transparent !important}

.ig-filter-pill{
  position:absolute;left:0;top:0;z-index:0;width:0;height:0;
  border-radius:999px;background:#4a1612;
  box-shadow:0 10px 22px rgba(74,22,18,.28);
  opacity:0;pointer-events:none;
}
.filter-row.has-pill .ig-filter-pill{opacity:1}
.filter-row.is-ready .ig-filter-pill{
  transition:transform .5s cubic-bezier(.2,.85,.25,1),width .5s cubic-bezier(.2,.85,.25,1),height .5s cubic-bezier(.2,.85,.25,1);
}

/* projets : un peu d'air sous le menu */
html body.portfolio-page .portfolio-grid{padding-top:64px !important}

@media (max-width:900px){
  html body.portfolio-page .filter-row{
    flex-wrap:wrap !important;width:auto !important;max-width:none;
    margin:40px 16px 0 !important;padding:6px !important;gap:2px !important;
    border-radius:28px !important;
  }
  html body.portfolio-page .filter-row .filter-btn{
    padding:12px 15px !important;font-size:13px !important;border-radius:999px !important;
  }
  html body.portfolio-page .portfolio-grid{padding-top:48px !important}
}
@media (max-width:360px){
  html body.portfolio-page .filter-row .filter-btn{padding:11px 11px !important;font-size:12px !important}
}
@media (hover:none){
  html body.portfolio-page .filter-row .filter-btn:not(.active):hover{background:transparent !important;color:rgba(74,22,18,.72) !important}
}
@media (prefers-reduced-motion:reduce){
  .filter-row.is-ready .ig-filter-pill{transition:none !important}
}

/* ============================================================
   FENÊTRE PROJET : vidéos verticales (reels 9:16) à la bonne taille
   script.js impose width:100% + hauteur max 75vh sur chaque <video> : une vidéo verticale
   se retrouvait dans un grand rectangle noir. On remplace par un vrai cadre 9:16, centré,
   qui tient toujours dans l'écran. Plusieurs vidéos se placent côte à côte sur ordinateur.
   Les photos gardent leur pleine largeur.
   ============================================================ */
html body .project-modal-gallery{
  display:flex !important;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:26px !important;
}
html body .project-modal-gallery img{flex:0 0 100%;width:100%}
html body .project-modal-gallery video{
  flex:0 0 auto;
  width:min(100%,360px,calc(78vh * 9 / 16)) !important;
  height:auto !important;max-height:none !important;
  aspect-ratio:9 / 16;
  object-fit:contain !important;
  background:#1b0a09 !important;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(74,22,18,.28);
}
/* vidéo horizontale (si ça arrive) : pleine largeur en 16:9 */
html body .project-modal-gallery video[data-orient="landscape"]{
  width:100% !important;aspect-ratio:16 / 9;
}
html body .project-modal-gallery video[data-orient="square"]{
  width:min(100%,560px,78vh) !important;aspect-ratio:1 / 1;
}
@media (max-width:760px){
  html body .project-modal-gallery{gap:18px !important}
  html body .project-modal-gallery video{width:min(100%,calc(78vh * 9 / 16)) !important;border-radius:10px}
}

/* ============================================================
   CATÉGORIE VIDÉO : les réels sont visibles directement dans la page
   (plus de miniature ni de fenêtre projet). Chaque réel = une vidéo 9:16 posée sur
   un papier déchiré avec du scotch, comme les autres cartes.
   Ordinateur : 3 par ligne, le 4e centré dessous. Téléphone : 2 par 2.
   Les cartes sont créées par theme-portfolio.js à partir de portfolio-projects.js.
   ============================================================ */
html body.portfolio-page .reel-card{
  --rot:-1.6deg;--lift:0px;--tape-x:38%;--tape-rot:-4deg;--torn:polygon(0.0% 1.5%,6.0% 1.8%,12.0% 1.9%,18.0% 2.3%,24.0% 1.8%,30.0% 2.2%,36.0% 0.1%,42.0% 1.1%,48.0% 2.3%,54.0% 1.6%,60.0% 2.2%,66.0% 0.3%,72.0% 1.1%,78.0% 0.6%,84.0% 1.3%,90.0% 1.4%,96.0% 0.0%,100.0% 0.5%,99.6% 16.0%,98.8% 34.0%,99.0% 52.0%,99.8% 70.0%,99.0% 86.0%,100.0% 99.5%,97.0% 97.9%,94.0% 99.6%,91.0% 100.0%,88.0% 97.0%,85.0% 99.3%,82.0% 99.3%,79.0% 96.7%,76.0% 97.0%,73.0% 99.0%,70.0% 96.7%,67.0% 98.2%,64.0% 97.7%,61.0% 99.3%,58.0% 96.8%,55.0% 97.7%,52.0% 96.7%,49.0% 97.0%,46.0% 99.0%,43.0% 98.8%,40.0% 99.4%,37.0% 99.5%,34.0% 99.8%,31.0% 99.0%,28.0% 97.9%,25.0% 100.0%,22.0% 97.7%,19.0% 98.9%,16.0% 98.9%,13.0% 97.2%,10.0% 98.4%,7.0% 98.9%,4.0% 98.4%,1.0% 97.6%,0.1% 84.0%,1.3% 66.0%,0.0% 48.0%,1.0% 30.0%,1.1% 14.0%);
  position:relative;isolation:isolate;overflow:visible;
  background:none !important;
  transform:perspective(900px) translateY(var(--lift)) rotate(var(--rot)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  filter:drop-shadow(0 12px 12px rgba(90,40,20,.22)) drop-shadow(0 2px 2px rgba(90,40,20,.16));
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease !important;
  animation:pfIn .7s cubic-bezier(.22,.61,.36,1) both;
  cursor:pointer;
}
html body.portfolio-page .reel-card:nth-child(4n+1){--rot:-1.6deg;--tape-x:14%;--tape-rot:-5deg;--torn:polygon(0.0% 1.5%,6.0% 1.8%,12.0% 1.9%,18.0% 2.3%,24.0% 1.8%,30.0% 2.2%,36.0% 0.1%,42.0% 1.1%,48.0% 2.3%,54.0% 1.6%,60.0% 2.2%,66.0% 0.3%,72.0% 1.1%,78.0% 0.6%,84.0% 1.3%,90.0% 1.4%,96.0% 0.0%,100.0% 0.5%,99.6% 16.0%,98.8% 34.0%,99.0% 52.0%,99.8% 70.0%,99.0% 86.0%,100.0% 99.5%,97.0% 97.9%,94.0% 99.6%,91.0% 100.0%,88.0% 97.0%,85.0% 99.3%,82.0% 99.3%,79.0% 96.7%,76.0% 97.0%,73.0% 99.0%,70.0% 96.7%,67.0% 98.2%,64.0% 97.7%,61.0% 99.3%,58.0% 96.8%,55.0% 97.7%,52.0% 96.7%,49.0% 97.0%,46.0% 99.0%,43.0% 98.8%,40.0% 99.4%,37.0% 99.5%,34.0% 99.8%,31.0% 99.0%,28.0% 97.9%,25.0% 100.0%,22.0% 97.7%,19.0% 98.9%,16.0% 98.9%,13.0% 97.2%,10.0% 98.4%,7.0% 98.9%,4.0% 98.4%,1.0% 97.6%,0.1% 84.0%,1.3% 66.0%,0.0% 48.0%,1.0% 30.0%,1.1% 14.0%)}
html body.portfolio-page .reel-card:nth-child(4n+2){--rot:1.4deg;--tape-x:60%;--tape-rot:5deg;--torn:polygon(0.0% 1.3%,6.0% 1.9%,12.0% 2.3%,18.0% 0.7%,24.0% 1.8%,30.0% 1.7%,36.0% 1.6%,42.0% 0.3%,48.0% 0.1%,54.0% 0.9%,60.0% 1.8%,66.0% 0.6%,72.0% 1.2%,78.0% 0.8%,84.0% 2.0%,90.0% 2.3%,96.0% 1.0%,100.0% 2.4%,99.9% 16.0%,98.9% 34.0%,98.9% 52.0%,99.8% 70.0%,99.1% 86.0%,100.0% 98.1%,97.0% 96.8%,94.0% 99.3%,91.0% 98.2%,88.0% 97.0%,85.0% 97.8%,82.0% 98.9%,79.0% 99.7%,76.0% 96.8%,73.0% 98.4%,70.0% 96.6%,67.0% 99.5%,64.0% 97.2%,61.0% 97.2%,58.0% 96.9%,55.0% 99.9%,52.0% 98.7%,49.0% 99.8%,46.0% 97.4%,43.0% 98.8%,40.0% 96.7%,37.0% 98.7%,34.0% 97.4%,31.0% 97.0%,28.0% 99.2%,25.0% 98.1%,22.0% 96.7%,19.0% 98.2%,16.0% 98.8%,13.0% 99.1%,10.0% 97.3%,7.0% 99.3%,4.0% 97.9%,1.0% 98.1%,0.7% 84.0%,0.2% 66.0%,0.9% 48.0%,1.2% 30.0%,0.4% 14.0%)}
html body.portfolio-page .reel-card:nth-child(4n+3){--rot:-0.9deg;--tape-x:36%;--tape-rot:3deg;--torn:polygon(0.0% 1.3%,6.0% 0.8%,12.0% 2.0%,18.0% 0.7%,24.0% 1.2%,30.0% 0.8%,36.0% 1.0%,42.0% 2.3%,48.0% 0.2%,54.0% 1.1%,60.0% 0.5%,66.0% 0.8%,72.0% 2.4%,78.0% 0.8%,84.0% 1.5%,90.0% 1.0%,96.0% 1.8%,100.0% 1.1%,99.8% 16.0%,99.4% 34.0%,99.5% 52.0%,99.0% 70.0%,99.3% 86.0%,100.0% 99.3%,97.0% 97.7%,94.0% 99.0%,91.0% 98.3%,88.0% 99.3%,85.0% 98.6%,82.0% 97.3%,79.0% 98.2%,76.0% 97.4%,73.0% 97.4%,70.0% 98.0%,67.0% 97.8%,64.0% 98.6%,61.0% 97.9%,58.0% 97.4%,55.0% 99.7%,52.0% 96.8%,49.0% 98.8%,46.0% 99.5%,43.0% 99.5%,40.0% 98.8%,37.0% 99.8%,34.0% 98.6%,31.0% 98.6%,28.0% 97.8%,25.0% 98.4%,22.0% 96.8%,19.0% 97.8%,16.0% 98.9%,13.0% 97.0%,10.0% 97.6%,7.0% 96.7%,4.0% 97.5%,1.0% 96.7%,0.3% 84.0%,0.4% 66.0%,1.3% 48.0%,0.0% 30.0%,1.2% 14.0%)}
html body.portfolio-page .reel-card:nth-child(4n+4){--rot:1.8deg;--tape-x:68%;--tape-rot:-4deg;--torn:polygon(0.0% 0.9%,6.0% 0.6%,12.0% 0.4%,18.0% 2.2%,24.0% 1.4%,30.0% 1.7%,36.0% 1.3%,42.0% 0.9%,48.0% 1.8%,54.0% 1.4%,60.0% 1.9%,66.0% 1.6%,72.0% 2.0%,78.0% 1.1%,84.0% 0.4%,90.0% 0.4%,96.0% 1.7%,100.0% 0.4%,99.1% 16.0%,99.2% 34.0%,99.9% 52.0%,99.0% 70.0%,100.0% 86.0%,100.0% 97.1%,97.0% 97.1%,94.0% 99.3%,91.0% 97.5%,88.0% 97.5%,85.0% 99.6%,82.0% 97.7%,79.0% 99.6%,76.0% 96.9%,73.0% 97.7%,70.0% 96.7%,67.0% 99.8%,64.0% 98.9%,61.0% 97.9%,58.0% 97.9%,55.0% 99.4%,52.0% 97.0%,49.0% 97.1%,46.0% 99.0%,43.0% 99.5%,40.0% 97.7%,37.0% 98.6%,34.0% 97.7%,31.0% 98.3%,28.0% 98.7%,25.0% 99.9%,22.0% 99.5%,19.0% 98.4%,16.0% 97.5%,13.0% 98.6%,10.0% 97.5%,7.0% 98.2%,4.0% 97.0%,1.0% 97.8%,0.4% 84.0%,0.2% 66.0%,0.1% 48.0%,0.1% 30.0%,1.1% 14.0%)}
html body.portfolio-page .reel-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 7%,rgba(255,255,255,0) 93%,rgba(255,255,255,.68) 100%),
    linear-gradient(160deg,#f9efdb,#f0dfc1);
  clip-path:var(--torn);
}
html body.portfolio-page .reel-card::after{
  content:"";position:absolute;z-index:3;top:-17px;left:var(--tape-x);width:96px;height:32px;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.24) 0 6%,transparent 6% 26%,rgba(90,0,0,.11) 26% 30%,transparent 30% 58%,rgba(255,255,255,.17) 58% 63%,transparent 63% 84%,rgba(90,0,0,.09) 84% 88%,transparent 88%),
    linear-gradient(180deg,#e4533f,#d03a29);
  clip-path:polygon(0 0,100% 0,98% 20%,100% 40%,97% 60%,100% 80%,98% 100%,0 100%,2% 80%,0 60%,3% 40%,0 20%);
  transform:rotate(var(--tape-rot));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  opacity:.94;
}
html body.portfolio-page .reel-card:hover{
  --rot:0deg;--lift:-12px;
  filter:drop-shadow(0 26px 22px rgba(90,40,20,.28)) drop-shadow(0 3px 3px rgba(90,40,20,.2));
}
html body.portfolio-page .reel-card:hover::after{
  transform:rotate(calc(var(--tape-rot) * -.6)) translateY(-3px);
}

html body.portfolio-page .portfolio-grid.is-reels{
  display:flex !important;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  grid-template-columns:none !important;
  width:100% !important;max-width:1120px !important;
  gap:64px 44px !important;
  padding:64px 28px 110px !important;
}
html body.portfolio-page .reel-card{
  --lift:0px;
  flex:0 0 calc((100% - 88px) / 3);max-width:calc((100% - 88px) / 3);
  box-sizing:border-box;margin:0;padding:16px 16px 28px;cursor:default;
  transform:translateY(var(--lift)) rotate(var(--rot)) !important;   /* pas d'inclinaison 3D : on garde les commandes de la vidéo faciles à utiliser */
}
html body.portfolio-page .reel-card:hover{--rot:0deg;--lift:-10px}
html body.portfolio-page .reel-card video{
  display:block;width:100%;height:auto;aspect-ratio:9 / 16;
  object-fit:cover;background:#2a0d0b;
}
@media (max-width:850px){
  html body.portfolio-page .portfolio-grid.is-reels{gap:40px 22px !important;padding:48px 18px 90px !important}
  html body.portfolio-page .reel-card{
    flex:0 0 calc((100% - 22px) / 2);max-width:calc((100% - 22px) / 2);
    padding:10px 10px 20px;
  }
  html body.portfolio-page .reel-card::after{width:64px;height:24px;top:-13px}
}

/* ============================================================
   RÉELS : performance. Aucun filtre / ombre portée sur un parent de la vidéo
   (un filtre au-dessus d'une vidéo en lecture force un redessin à chaque image).
   L'ombre est portée par un calque « papier » séparé, frère de la vidéo.
   ============================================================ */
html body.portfolio-page .reel-card{
  filter:none !important;
  transition:transform .5s cubic-bezier(.2,.7,.2,1) !important;
}
html body.portfolio-page .reel-card::before{content:none !important;display:none !important}
html body.portfolio-page .reel-card .reel-paper{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 12px 12px rgba(90,40,20,.22)) drop-shadow(0 2px 2px rgba(90,40,20,.16));
  transition:filter .5s ease;
}
html body.portfolio-page .reel-card .reel-paper::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 7%,rgba(255,255,255,0) 93%,rgba(255,255,255,.68) 100%),
    linear-gradient(160deg,#f9efdb,#f0dfc1);
  clip-path:var(--torn);
}
html body.portfolio-page .reel-card:hover .reel-paper{
  filter:drop-shadow(0 26px 22px rgba(90,40,20,.28)) drop-shadow(0 3px 3px rgba(90,40,20,.2));
}
html body.portfolio-page .reel-card .reel-warn{
  position:absolute;left:16px;right:16px;bottom:34px;z-index:2;
  padding:10px 12px;border-radius:6px;
  background:rgba(34,8,7,.92);color:#f6ead4;
  font:600 12px/1.35 var(--ig-sans);text-align:center;
}