/* ============================================================
   SWIPSTUDIO — Sous-pages (Projets, Équipe)
   ============================================================ */

/* La nav des sous-pages est posée sur fond plein (pas de vidéo) → toujours solide */
body[data-page] .nav-links a{color:var(--text-soft)}
body[data-page] .nav .theme-toggle{color:var(--text);border-color:var(--line)}
body[data-page] .nav .nav-burger{color:var(--text);border-color:var(--line)}

/* ---------- Page head ---------- */
.page-head{
  position:relative;overflow:hidden;
  padding:clamp(132px,18vh,180px) 0 clamp(40px,6vh,64px);
  background:
    radial-gradient(120% 90% at 50% -10%,var(--red-tint),transparent 55%),
    var(--bg);
  border-bottom:1px solid var(--line-2);
}
.page-head .back{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--muted);
  margin-bottom:22px;transition:color .3s var(--ease), gap .3s var(--ease);
}
.page-head .back svg{width:16px;height:16px}
.page-head .back:hover{color:var(--red);gap:13px}
/* 68 px plutot que 90 : le titre occupait a lui seul un tiers de l'ecran
   avant que la page ne commence. Les deux pages du pole partagent cette
   taille - l'ancienne surcharge de la page Projets disparait. */
.page-head h1{font-size:clamp(32px,4.8vw,68px);line-height:1.0;letter-spacing:-0.04em;margin-top:14px;color:var(--text)}
.page-head h1 em{font-style:normal;color:var(--red)}
.page-lead{margin-top:20px;font-size:clamp(15px,1.4vw,19px);font-weight:300;color:var(--text-soft);max-width:56ch;line-height:1.65}

/* ---------- Filtres par type ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:clamp(14px,2.5vh,24px) 0 8px;
}
.filter{
  appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--text);
  padding:9px 18px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.01em;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.filter:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.filter.active{background:var(--red);border-color:var(--red);color:#fff}
.filter.active:hover{color:#fff;transform:translateY(-2px)}
.filter-count{font-size:12px;opacity:.6;margin-left:7px}

/* ---------- Grille projets (page) ---------- */
.projects-page{
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:0;--vgap:20px;
  padding:34px 0 clamp(40px,6vh,70px);
}
.projects-page{grid-auto-rows:4px;grid-auto-flow:dense}
.projects-page > .prod-card{grid-row-end:span var(--rspan,51)}
@media (max-width:920px){.projects-page{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.projects-page{grid-template-columns:1fr}}
.projects-page.grid-shorts{grid-template-columns:repeat(5,1fr)}
@media (max-width:920px){.projects-page.grid-shorts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.projects-page.grid-shorts{grid-template-columns:repeat(2,1fr)}}
.projects-page .prod-card{transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
.prod-card.hide{display:none}

/* Bouton « Voir plus » sous la grille — révèle 3 rangées de plus par clic */
.load-more{display:flex;justify-content:center;padding-bottom:clamp(40px,6vh,70px)}
.load-more[hidden]{display:none}   /* display:flex ne doit pas écraser l'attribut hidden */
.load-more .btn svg{transition:transform .4s var(--ease)}
.load-more .btn:hover svg{transform:translateY(3px)}

/* ============================================================
   ÉQUIPE — page complète
   ============================================================ */
.team-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:clamp(14px,2.5vh,26px) 0 0}
@media (max-width:820px){.team-values{grid-template-columns:1fr}}
.tval{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 26px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.tval:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow)}
.tval-ic{width:48px;height:48px;border-radius:13px;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tval-ic svg{width:24px;height:24px}
.tval h3{font-size:18px;letter-spacing:-0.01em}
.tval p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--text-soft)}

/* Grille membres (page équipe) */
.members{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:clamp(50px,7vh,80px) 0 clamp(80px,11vh,140px)}
@media (max-width:1080px){.members{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.members{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.members{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.members{grid-template-columns:1fr}}
.member{
  --ty:#E62837;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--ty);border-radius:20px;overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.member[data-type="edit"]{--ty:#E07B2C}
.member[data-type="motion"]{--ty:#9B5DE5}
.member[data-type="shoot"]{--ty:#2D9CDB}
.member[data-type="sound"]{--ty:#1F9E6E}
.member:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ty) 45%,var(--line));border-top-color:var(--ty);box-shadow:0 20px 40px -22px color-mix(in srgb,var(--ty) 55%,#000)}
.member-photo{position:relative;aspect-ratio:4/5;background:var(--bg-2);overflow:hidden}
.member-photo image-slot{position:absolute;inset:0;width:100%;height:100%}
.member-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--ty) 26%,transparent),transparent 58%)}
.member-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 50%);opacity:0;transition:opacity .5s var(--ease)}
.member:hover .member-photo::after{opacity:1}
.member-body{padding:16px 18px 18px}
.member-name{font-size:16px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.member-detail{margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.member-pill{
  position:absolute;left:9px;bottom:9px;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:color-mix(in srgb,var(--ty) 90%,#000);padding:4px 10px;border-radius:7px;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5);
}

/* Fondu vers le CTA final : la section au-dessus se réchauffe vers le bas,
   et reprend exactement la valeur d'ouverture du .final-cta (vp.css) */
.pre-cta{background:linear-gradient(to bottom,transparent 55%,color-mix(in srgb,var(--red-tint-2) 50%,transparent) 100%)}

/* La grille de projets déborde du .wrap en desktop -> cartes plus grandes */
@media (min-width:1100px){
  .projects-page{
    width:min(1400px, calc(100vw - 56px));
    margin-left:50%;
    transform:translateX(-50%);
  }
}

/* Page Projets : le CTA final colle moins à la grille */
body[data-page="projets"] .final-cta{padding-top:clamp(56px,8vh,96px)}

/* Page Équipe : séparateur entre les valeurs et la grille, et pas de
   ligne sous le haut de page (réduit au lien retour) */
.team-sep{height:1px;background:var(--red);margin-top:clamp(56px,8vh,90px)}
body[data-page="equipe"] .page-head,
/* La barre de navigation flotte au-dessus du haut de page : une bonne
   part de cette marge passe DERRIERE elle et ne se voit pas. Le calage
   d'origine ne laissait donc que 33 px entre la pilule et les capitales
   du titre - trop peu pour un titre de 68 px, dont les accents montent
   encore au-dessus. Resserrer, essaye avant, allait dans le mauvais
   sens : a 26 px le titre se collait a la barre.
   On descend donc l'ensemble du haut de page : 46 px de vide a 900 px de
   haut, et l'ecart suit la hauteur d'ecran comme avant. */
body[data-page="projets"] .page-head{border-bottom:none;padding:clamp(100px,12vh,126px) 0 clamp(8px,1.5vh,16px)}

/* Filtres en menu déroulant sur mobile (page Projets) */
.filters-select{display:none}
@media (max-width:680px){
  .filters{display:none}
  .filters-select{display:flex;justify-content:center;margin-bottom:16px}
  .filters-select select{
    width:auto;appearance:none;-webkit-appearance:none;
    background:var(--surface) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23938c96%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M6 9l6 6 6-6%22/></svg>') no-repeat right 13px center/15px;
    border:1px solid var(--line);border-radius:999px;color:var(--text);
    font:inherit;font-size:13.5px;font-weight:500;padding:9px 38px 9px 16px;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .filters-select select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px var(--red-tint)}
  .filters-select select option{background:var(--surface);color:var(--text)}
}