/* Showcase — styles repris de la page de référence (planche contact) */
:root{
  --bg:#eeeeee; --bg-card:#ffffff; --ink:#1c1a16; --muted:#6f6a5e;
  --accent:#d1352b; --amber:#0f7fa8; --line:#d8d3c6;
  --btn:#34312b; --btn-hover:#4a463e;          /* boutons de navigation : foncés, ≠ tags */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
*{ box-sizing:border-box; }
html{ background:var(--bg); color:var(--ink); }
body{
  margin:0; font-family:'Open Sans Condensed','Arial Narrow',sans-serif; min-height:100vh;
  background:var(--bg)
    radial-gradient(circle at 15% 8%, rgba(15,127,168,.06), transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(209,53,43,.06), transparent 45%);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.lock{ overflow:hidden; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* ---------- En-tête ---------- */
/* Bandeau du haut : l'intro à gauche (30 %), les filtres à droite (70 %) ; il reste collé en haut au défilement */
.top-band{
  position:sticky; top:0; z-index:20; background:rgba(238,238,238,.95);
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px);
}
.top-in{ max-width:1180px; margin:0 auto; padding:.7em 1.5em .6em; display:grid; grid-template-columns:30% minmax(0,1fr); gap:0 2em; align-items:center; }
.top{ padding:0; text-align:left; min-width:0; }
.rec{
  display:inline-flex; align-items:center; gap:.5em; font-size:.72em; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.6em;
}
.rec i{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px 1px rgba(209,53,43,.5); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
h1, .site-title{ font-weight:300; font-size:clamp(3em,9vw,5.2em); line-height:.85; margin:0 0 .3em; letter-spacing:-.01em; }
.top h1, .top .site-title{ font-size:clamp(1.9em,2.7vw,2.6em); line-height:.95; margin:0 0 .15em; }
h2{
  font-size:clamp(1.3em,3vw,1.7em); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink); margin:0 0 1.2em;
}
/* comme sur la page de référence : sous-titre en gris, premier mot en noir */
.top h2{ font-size:.88em; letter-spacing:.08em; color:var(--muted); margin:0 0 .45em; line-height:1.25; }
.top h2 span{ color:var(--ink); }
.top .rec{ margin:0 0 .4em; font-size:.66em; }
.top > p:last-child{ max-width:none; margin:0; color:var(--muted); font-size:.84em; line-height:1.4; letter-spacing:.02em; }

/* ---------- Filtres ---------- */
.filters{ min-width:0; padding:0; }
/* Ligne 1 : types de projet (principaux) */
.filters-main{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.1em 1.2em; margin:0 0 .35em; }
.cat{
  background:none; border:0; border-bottom:2px solid transparent; padding:.25em .1em .2em;
  font-size:.92em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  transition:color .2s, border-color .2s;
}
.cat small{ font-weight:300; font-size:.78em; margin-left:.35em; }
.cat:hover{ color:var(--ink); }
.cat[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.cat:disabled{ opacity:.35; cursor:default; }
/* « Tout » : bouton plein, distinct des types ; remet tous les filtres à zéro */
.cat.cat-all{ border:1px solid var(--ink); border-radius:3px; padding:.28em .9em; color:var(--ink); }
.cat.cat-all small{ opacity:.7; }
.cat.cat-all:hover{ background:var(--ink); color:#fff; }
.cat.cat-all[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* Ligne 2 : clients */
.filters-clients{ display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:.1em .9em; margin:0 0 .4em; }
.cli{ background:none; border:0; border-bottom:1px solid transparent; padding:.1em 0; font-size:.8em; letter-spacing:.04em; color:var(--muted); transition:color .2s, border-color .2s; }
.cli small{ font-size:.82em; opacity:.7; margin-left:.3em; }
.cli:hover{ color:var(--ink); }
.cli[aria-pressed="true"]{ color:var(--ink); font-weight:700; border-bottom-color:var(--amber); }
.cli:disabled{ opacity:.35; cursor:default; }
/* Ligne 3 : tags thématiques */
.filters-row{ display:flex; flex-wrap:wrap; gap:.35em; justify-content:flex-start; margin:0; }
.chip{
  background:transparent; border:1px solid var(--line); border-radius:3px; padding:.22em .6em;
  font-size:.78em; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  transition:background .2s, border-color .2s, color .2s;
}
.chip small{ font-size:.85em; opacity:.7; margin-left:.35em; }
.chip:hover{ border-color:var(--amber); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); color:#fff; }
.chip.more{ border-style:dashed; }
.filters-count{ margin:.3em 0 0; text-align:left; font-size:.72em; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- Grille ---------- */
main{ max-width:1180px; margin:0 auto; padding:1.2em 1.5em 5em; }
.sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4em; list-style:none; margin:0; padding:0; }
.frame{ position:relative; margin:0; }
.frame > .card{
  all:unset; color:var(--ink); box-sizing:border-box; cursor:pointer; width:100%; height:100%;
  display:flex; flex-direction:column; gap:.8em; text-align:left;
  background:var(--bg-card); border:1px solid var(--line); border-radius:2px; padding:1.1em 1.1em 1.3em;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.frame > .card:hover{ transform:translateY(-4px); border-color:var(--amber); box-shadow:0 14px 30px -18px rgba(0,0,0,.18); }
.frame > .card:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.frame-top{ display:flex; justify-content:space-between; gap:1em; font-size:.7em; letter-spacing:.12em; color:var(--muted); }
.year{ display:inline-block; padding:.2em .55em; border-radius:3px; background:var(--btn); color:#f2efe8; font-weight:700; letter-spacing:.08em; line-height:1.2; }
.frame-top{ align-items:center; }
.frame-no{ display:flex; align-items:center; gap:.7em; min-width:0; }
.frame-no, .frame-exif{ white-space:nowrap; }
.frame-exif{ flex:none; }
.frame-client{ letter-spacing:.08em; text-transform:uppercase; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.v-client{ color:var(--ink); font-weight:700; }
.frame-exif{ letter-spacing:.1em; color:var(--amber); text-align:right; font-weight:700; }
/* badge du client : tronqué proprement s'il est long */
.badge-client{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; text-transform:uppercase; }
.v-no .badge-client{ max-width:60vw; }
.shot{ display:block; aspect-ratio:8/5; overflow:hidden; background:#e4e2dc; border:1px solid var(--line); }
.shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .5s var(--ease-out); }
.frame > .card:hover .shot img{ transform:scale(1.04); }
.frame h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.25em; line-height:1.25; margin:0; }
.frame p{ margin:0; color:var(--muted); font-size:1em; line-height:1.5; letter-spacing:.03em; flex-grow:1; }
.tags{ display:flex; flex-wrap:wrap; gap:.4em; list-style:none; margin:.2em 0 0; padding:0; }
.tags li{
  font-size:.74em; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line);
  border-radius:3px; padding:.2em .55em; color:var(--muted);
}
.tags li.is-cat{ color:var(--ink); border-color:#bdb7a8; font-weight:700; }
.tags li.on{ border-color:var(--amber); color:var(--amber); }
.frame[hidden]{ display:none; }
.more-wrap{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.8em 1em; margin-top:2.4em; }
.more-btn{ border:0; border-radius:3px; background:var(--btn); color:#f2efe8; padding:.75em 1.6em; font-size:.95em; letter-spacing:.08em; text-transform:uppercase; }
.more-btn:hover{ background:var(--amber); }
.more-btn[hidden]{ display:none; }
/* « Voir les projets archivés » : bouton discret (contour) à côté du bouton principal */
.more-archived{ background:transparent; color:var(--muted); border:1px solid #bdb7a8; }
.more-archived:hover{ background:var(--ink); border-color:var(--ink); color:#f2efe8; }
.frame.is-archived .shot img{ filter:grayscale(.35); opacity:.9; }
.empty,.error{ text-align:center; color:var(--muted); letter-spacing:.03em; margin:3em auto; max-width:34em; line-height:1.6; }
.error{ color:var(--accent); }
footer{ text-align:center; padding:2em 1.5em 4em; color:var(--muted); font-size:.78em; letter-spacing:.08em; }

/* ---------- Popup : tout tient sur un écran ---------- */
.viewer{
  border:0; padding:0; margin:0; width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none;
  background:var(--bg); color:var(--ink); overflow:hidden;
}
.viewer[open]{ display:flex; flex-direction:column; animation:vin .35s var(--ease-out); }
.viewer::backdrop{ background:rgba(28,26,22,.55); }
@keyframes vin{ from{ opacity:0; translate:0 24px; } to{ opacity:1; translate:0 0; } }
.v-bar{ flex:none; display:flex; justify-content:space-between; align-items:center; gap:1em; padding:.55em 1.2em; background:rgba(238,238,238,.95); border-bottom:1px solid var(--line); }
.v-no{ margin:0; font-size:.72em; letter-spacing:.12em; color:var(--muted); }
.v-close{ flex:none; white-space:nowrap; background:transparent; border:1px solid var(--line); border-radius:3px; padding:.35em .9em; font-size:.82em; letter-spacing:.05em; text-transform:uppercase; }
.v-close:hover{ background:var(--amber); border-color:var(--amber); color:#fff; }
.v-body{ flex:1; min-height:0; width:100%; max-width:1760px; margin:0 auto; padding:1.2em 1.5em 1em; display:grid; grid-template-columns:minmax(210px,270px) 1fr; gap:2em; }
@media (max-width:1500px){ .v-body{ grid-template-columns:230px 1fr; gap:1.6em; padding-left:1.2em; padding-right:1.2em; } .v-info h3{ font-size:1.5em; } .v-text p{ font-size:1em; } }
.v-info{ min-height:0; overflow:auto; padding-right:.4em; scrollbar-width:thin; }
.v-info h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.7em; line-height:1.15; margin:.1em 0 .55em; }
.v-text p{ margin:.8em 0 0; color:var(--muted); line-height:1.6; letter-spacing:.03em; font-size:1.05em; }
.v-text .lead{ color:var(--ink); }
.v-hint{ margin:1.4em 0 0; font-size:.78em; letter-spacing:.06em; color:var(--muted); border-top:1px dashed var(--line); padding-top:.8em; }
.v-hint:empty{ display:none; }

.v-stage{ min-width:0; min-height:0; display:flex; justify-content:center; align-items:center; gap:var(--gap,44px); }
.v-stage > .v-group{ align-self:center; }
.v-stage.row{ align-items:flex-end; align-content:center; }
.v-group{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.v-device{ display:flex; align-items:flex-end; justify-content:center; }

/* Filet : relie les boutons de pages à leur mockup */
.v-rule{ align-self:stretch; display:flex; align-items:center; gap:.7em; margin:1em 0 .55em; font-size:.72em; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.v-rule::before, .v-rule::after{ content:""; flex:1; height:1px; background:var(--ink); opacity:.35; }
.v-rule b{ color:var(--ink); font-weight:700; display:inline-flex; align-items:center; gap:.45em; }
.v-rule b svg{ width:1.35em; height:1.35em; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.v-rule em{ font-style:normal; letter-spacing:.08em; }

/* Navigation : ← pages → sur une seule ligne */
.v-nav{ align-self:stretch; display:flex; align-items:center; justify-content:center; gap:.4em; min-width:0; }
.v-nav > button{ flex:none; width:2.2em; height:2.2em; border:0; border-radius:3px; background:var(--btn); color:#f2efe8; }
.v-nav > button:hover{ background:var(--amber); }
.v-nav > button:disabled{ opacity:.3; cursor:default; background:var(--btn); }
.v-pages{
  flex:0 1 auto; min-width:0; display:flex; gap:.35em; list-style:none; margin:0; padding:2px;
  overflow-x:auto; scrollbar-width:none;
  --fl:0px; --fr:14px;
  mask-image:linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.v-pages.at-start{ --fl:0px; } .v-pages:not(.at-start){ --fl:14px; } .v-pages.at-end{ --fr:0px; }
.v-pages::-webkit-scrollbar{ display:none; }
.v-pages.fits{ justify-content:center; mask-image:none; }
.v-pages button{
  white-space:nowrap; height:2.2em; border:0; border-radius:3px; background:var(--btn); color:#d9d4c8;
  padding:0 .8em; font-size:.84em; letter-spacing:.04em; transition:background .2s, color .2s;
}
.v-pages button:hover{ background:var(--btn-hover); color:#fff; }
.v-pages button[aria-current="true"]{ background:var(--amber); color:#fff; }

/* Mockup laptop */
.laptop{ display:flex; flex-direction:column; align-items:center; }
.laptop-screen{ position:relative; background:#16181c; border-radius:14px 14px 4px 4px; padding:12px 12px 16px; box-shadow:0 30px 50px -30px rgba(0,0,0,.45); }
.laptop-screen::before{ content:""; position:absolute; top:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#3a3d44; }
.laptop-view, .phone-view{ overflow:auto; background:#fff; overscroll-behavior:contain; }
.laptop-view{ border-radius:2px; scrollbar-width:thin; }
.laptop-view img, .phone-view img{ display:block; width:100%; height:auto; }
.laptop-base{ position:relative; height:14px; width:108%; background:linear-gradient(#e0e1e4,#a9acb2); border-radius:0 0 16px 16px; box-shadow:0 14px 20px -14px rgba(0,0,0,.4); }
.laptop-base::before{ content:""; position:absolute; top:0; left:50%; width:16%; height:5px; margin-left:-8%; background:#9a9da4; border-radius:0 0 8px 8px; }

/* Mockup téléphone */
.phone{ position:relative; background:#16181c; border-radius:38px; padding:10px; box-shadow:0 30px 50px -30px rgba(0,0,0,.5), inset 0 0 0 2px #2b2e34; }
.phone::before{ content:""; position:absolute; z-index:2; top:17px; left:50%; width:76px; height:20px; margin-left:-38px; border-radius:12px; background:#16181c; }
.phone-view{ border-radius:29px; scrollbar-width:none; }
.phone-view::-webkit-scrollbar{ display:none; }

/* Mockup print : feuille posée, ombre portée, pli central optionnel */
.print-box{ display:flex; align-items:flex-end; justify-content:center; }
.sheet-paper{ position:relative; display:block; box-shadow:0 1px 1px rgba(0,0,0,.08), 0 24px 40px -22px rgba(0,0,0,.45), 0 6px 14px -8px rgba(0,0,0,.2); background:#fff; }
.sheet-paper img{ display:block; width:100%; height:100%; }
.sheet-paper::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.18), transparent 40%, rgba(0,0,0,.04)); }
.sheet-paper.fold::after{ content:""; position:absolute; top:0; bottom:0; left:50%; width:9%; translate:-50% 0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.07) 42%, rgba(0,0,0,.16) 50%, rgba(255,255,255,.12) 51%, rgba(0,0,0,.05) 60%, transparent); }
.sheet-format{ position:absolute; right:0; bottom:-1.7em; font-size:.68em; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* Mockup publication réseaux sociaux (carte de fil générique) */
.post{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 24px 40px -26px rgba(0,0,0,.4); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
.post-head{ display:flex; align-items:center; gap:.55em; height:46px; padding:0 .8em; font-size:.82em; }
.post-av, .story-av{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; font-size:.72em; font-weight:700; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.post-head b, .story-head b{ font-weight:600; }
.post-head span{ margin-left:auto; letter-spacing:.1em; color:#888; }
.post-img{ background:#f2f2f2; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.post-img img{ display:block; width:100%; height:100%; object-fit:contain; }
.post-foot{ height:64px; padding:.5em .8em; font-size:.8em; line-height:1.35; }
.post-actions{ display:flex; gap:.9em; margin-bottom:.3em; }
.post-actions svg{ width:20px; height:20px; stroke:#222; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.post-actions svg:last-child{ margin-left:auto; }
.post-cap{ margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#333; }

/* Mockup story (format 9:16) */
.story{ position:relative; background:#16181c; border-radius:22px; padding:8px; box-shadow:0 30px 50px -30px rgba(0,0,0,.5), inset 0 0 0 2px #2b2e34; }
.story-view{ position:relative; overflow:hidden; border-radius:15px; background:#000; }
.story-view img{ display:block; width:100%; height:100%; object-fit:cover; }
.story-top{ position:absolute; inset:0 0 auto; padding:10px 10px 22px; background:linear-gradient(rgba(0,0,0,.35), transparent); color:#fff; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:.78em; }
.story-bars{ display:flex; gap:3px; margin-bottom:8px; }
.story-bars i{ flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.4); }
.story-bars i.done{ background:#fff; }
.story-head{ display:flex; align-items:center; gap:.5em; }
.story-av{ width:26px; height:26px; box-shadow:0 0 0 1.5px #fff; }

/* Petits écrans : le popup défile, les mockups s'empilent */
@media (max-width:900px){
  .viewer{ overflow:auto; }
  .viewer[open]{ display:block; }
  .v-body{ display:block; padding-top:1em; }
  .v-info{ overflow:visible; margin-bottom:1.5em; }
  .v-stage{ flex-direction:column; align-items:center; gap:2.2em; }
}
/* Tablette / mobile : l'intro passe au-dessus des filtres et le bandeau ne reste plus collé */
@media (max-width:900px){
  .top-band{ position:static; }
  .top-in{ grid-template-columns:1fr; gap:1em; padding-top:1.6em; }
}
@media (max-width:560px){
  .filters-main{ gap:.1em 1em; }
  .cat{ font-size:.9em; }
}
@media (prefers-reduced-motion:reduce){
  .rec i, .viewer[open]{ animation:none; }
  .frame > .card, .shot img{ transition:none; }
  .v-pages{ scroll-behavior:auto; }
}
.v-row{ display:flex; justify-content:center; align-items:flex-end; gap:var(--gap,44px); }
@media (max-width:900px){ .v-row{ flex-direction:column; align-items:center; gap:2.2em; } }

/* ---------- Mobile à côté du desktop ----------
   Téléphone collé au laptop et surélevé ; son menu tient sur une ligne dans l'espace
   libéré au-dessus du laptop, relié au téléphone par un filet fléché. */
.v-row{ position:relative; }
.v-mmenu{ position:absolute; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:.7em; }
.v-mmenu .v-rule{ flex:none; margin:0; }
.v-mmenu .v-rule::before, .v-mmenu .v-rule::after{ display:none; }
.v-mmenu .v-nav{ flex:0 1 auto; align-self:auto; }
.v-mline{ position:relative; flex:0 0 34px; height:1px; background:rgba(28,26,22,.45); margin-right:2px; }
.v-mline::after{
  content:""; position:absolute; right:-2px; top:50%; translate:0 -50%;
  border-left:8px solid rgba(28,26,22,.7); border-top:5px solid transparent; border-bottom:5px solid transparent;
}
@media (max-width:900px){
  .v-mmenu{ position:static; flex-direction:column; align-self:stretch; gap:0; margin-top:1em; }
  .v-mmenu .v-rule{ align-self:stretch; margin:0 0 .55em; }
  .v-mmenu .v-rule::before, .v-mmenu .v-rule::after{ display:block; }
  .v-mmenu .v-nav{ align-self:stretch; }
  .v-mline{ display:none; }
  .v-group.side{ margin-bottom:0 !important; }
}

/* Contenu statique des pages projet (lu par les moteurs, retiré dès que le script démarre) */
.seo-project{ max-width:760px; margin:2em auto; }
.seo-project h1{ font-family:'Fraunces',Georgia,serif; font-weight:500; }
.seo-project img{ max-width:100%; height:auto; display:block; margin:1em 0; border:1px solid var(--line); }

/* ---------- Planche : visuels montés sur carton, en quinconce ---------- */
/* Planche : le projet devient le contenu de la page (html.page-mode) et défile avec le navigateur ;
   la grille est masquée pendant ce temps et retrouvée à sa position à la fermeture */
html.page-mode body > :not(.viewer){ display:none !important; }
html.page-mode .viewer{ position:static; width:100%; height:auto; min-height:100vh; overflow:visible; }
html.page-mode .v-bar{ position:sticky; top:0; z-index:5; }
.viewer.is-board .v-body{ flex:none; height:auto; }
.viewer.is-board .v-info{ position:sticky; top:4.2em; align-self:start; max-height:calc(100vh - 5.5em); }
.v-stage.is-board{ display:block; height:auto; min-height:calc(100vh - 6em); overflow:visible; padding:.6em 1.2em 4em; }
/* un carton ne dépasse jamais ~80 % de la hauteur d'écran (visuels très hauts) */
.v-stage.is-board .mount img, .v-stage.is-board .mount video{ width:auto; max-width:100%; max-height:78vh; margin:0 auto; }
.board{ display:flex; justify-content:center; align-items:flex-start; max-width:1240px; margin:0 auto; }
.board-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:38px; }
.board-item figcaption{ margin-top:.8em; }
.board-item figcaption small{ display:block; margin-top:.25em; font-size:.88em; letter-spacing:.1em; color:var(--amber); }
/* colonne de texte un peu plus large en mode planche */
.viewer.is-board .v-body{ grid-template-columns:minmax(270px, 350px) 1fr; }
@media (max-width:1500px){ .viewer.is-board .v-body{ grid-template-columns:300px 1fr; } }
.board-item{ margin:0; width:100%; display:flex; flex-direction:column; }
/* le carton : large marge blanche, tranche visible, ombre douce */
.mount{
  position:relative; display:block; width:100%; padding:8%; border:0; border-radius:2px; cursor:zoom-in;
  background:linear-gradient(160deg, #ffffff 0%, #fbfaf7 55%, #f3f1ec 100%);
  box-shadow:
    0 1px 0 #ebe8e1, 0 2px 0 #e3dfd6, 0 3px 0 #dad5cb, 0 4px 0 #d1cbbf, 0 5px 0 #c8c1b3,   /* épaisseur */
    1px 0 0 #efece6, -1px 0 0 #f3f1ec,
    0 8px 12px -4px rgba(40,35,25,.18), 0 30px 46px -22px rgba(40,35,25,.42);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.mount img, .mount video{ display:block; width:100%; height:auto; box-shadow:0 0 0 1px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.08); }
.mount:hover{ transform:translateY(-4px); }
.mount-fold{ position:absolute; top:8%; bottom:8%; left:8%; right:8%; pointer-events:none;
  background:linear-gradient(90deg, transparent 45%, rgba(0,0,0,.08) 49%, rgba(0,0,0,.16) 50%, rgba(255,255,255,.14) 50.6%, rgba(0,0,0,.05) 53%, transparent 56%); }
.board-item figcaption{ margin-top:1.1em; font-size:.8em; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){
  .v-stage.is-board{ overflow:visible; padding:0 0 2em; min-height:0; }
  .viewer.is-board .v-info{ position:static; max-height:none; }
}
@media (prefers-reduced-motion:reduce){ .mount{ transition:none; } }

/* Planche « simple » : images déjà mises en scène (mockups photo), sans carton */
.v-stage.is-plain .mount{ padding:0; background:none; border-radius:6px; overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 22px 40px -24px rgba(40,35,25,.45); }
.v-stage.is-plain .mount img{ box-shadow:none; max-height:80vh; }

/* ---------- Planche « Réseaux sociaux » : chaque visuel dans une carte de publication ---------- */
.post-card{
  display:flex; flex-direction:column; width:100%; padding:0; text-align:left; cursor:zoom-in;
  background:#fff; border:1px solid #e3e0d8; border-radius:14px; overflow:hidden;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:#222;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 34px -22px rgba(40,35,25,.38);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 26px 40px -22px rgba(40,35,25,.45); }
.pc-head{ display:flex; align-items:center; gap:.6em; height:52px; padding:0 .9em; font-size:.84em; min-width:0; }
.pc-head b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-av{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff;
  font-style:normal; font-size:.72em; font-weight:700; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.pc-more{ margin-left:auto; letter-spacing:.1em; color:#999; }
.post-card img, .post-card video{ display:block; width:100%; height:auto; background:#f2f2f2; }
.pc-foot{ display:block; padding:.65em .9em .85em; font-size:.82em; line-height:1.4; }
.pc-actions{ display:flex; gap:1em; margin-bottom:.45em; }
.pc-actions svg{ width:22px; height:22px; fill:none; stroke:#222; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pc-actions .pc-save{ margin-left:auto; }
.pc-cap{ display:block; color:#333; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pc-cap b{ font-weight:600; }
.v-stage.is-board.is-social .post-card img{ max-height:72vh; object-fit:contain; }
@media (prefers-reduced-motion:reduce){ .post-card{ transition:none; } }

/* Agrandissement */
.zoom{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:1em; padding:3em 1.5em;
  background:rgba(238,238,238,.97); }
.zoom[hidden]{ display:none; }
.zoom figure{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; min-width:0; }
.zoom video{ display:block; max-width:min(100%, 1400px); max-height:calc(100vh - 9em); background:#000; box-shadow:0 30px 50px -28px rgba(0,0,0,.5); }
.zoom video[hidden], .zoom img[hidden]{ display:none; }
.zoom img{ display:block; max-width:min(100%, 1400px); max-height:calc(100vh - 9em); object-fit:contain; background:#fff;
  box-shadow:0 30px 50px -28px rgba(0,0,0,.5); }
.zoom figcaption{ margin-top:1em; font-size:.85em; letter-spacing:.06em; color:var(--muted); white-space:pre; }
.zoom button{ flex:none; border:0; border-radius:3px; background:var(--btn); color:#f2efe8; width:2.4em; height:2.4em; }
.zoom button:hover{ background:var(--amber); }
.zoom-close{ position:absolute; top:1em; right:1.2em; }
@media (max-width:900px){ .zoom{ padding:3.5em .5em 1em; } .zoom-prev, .zoom-next{ position:absolute; bottom:1em; } .zoom-prev{ left:1em; } .zoom-next{ right:1em; } }