/* V9 — The Living Gallery. Overrides scoped to work section, previous motion and CRO kept. */
.work.section-wrap{max-width:1600px;width:calc(100% - clamp(32px,7vw,124px));}
.work-heading{margin-bottom:32px;}
.work-heading p{max-width:490px;}
.work .filterbar{margin-top:24px;margin-bottom:27px;padding:0 0 22px;border-bottom:1px solid #292929;}
.work .filters{flex-wrap:wrap;gap:8px;}
.work .filter{border-radius:99px;padding:11px 17px;}
.work .filter.active{background:#ffc400;color:#080808;border-color:#ffc400;}
.work .journey-intro{margin:0 0 15px;padding:0;border:0;opacity:.8;}
.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#9e9e9e;padding:14px 0 18px;font-size:9px;letter-spacing:.095em;}
.gallery-live-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:#ffc400;box-shadow:0 0 13px #ffc4007c;margin-right:10px;vertical-align:middle;}
.work .dribbble-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 17px;align-items:start;}
.work .dribbble-grid .work-card{min-width:0;overflow:visible;transition:transform .35s cubic-bezier(.2,.7,.25,1);}
.work .dribbble-grid .work-card:hover{transform:translateY(-5px);}
.work .dribbble-grid .card-image{aspect-ratio:1.28;border-radius:11px;overflow:hidden;position:relative;background:var(--card-bg,#222);box-shadow:none;}
.work .dribbble-grid .card-image .journey{inset:0;border-radius:0;transform:none!important;box-shadow:none;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.work .dribbble-grid .work-card:hover .card-image .journey{transform:scale(1.045)!important;}
.work .dribbble-grid .journey-browser{inset:5%;border-radius:6px;}
.work .dribbble-grid .journey-chrome{height:19px;font-size:6px;}
.work .dribbble-grid .journey-screen strong{font-size:clamp(14px,1.45vw,28px);}
.work .dribbble-grid .journey-section{min-height:175px;}
.work .dribbble-grid .journey-overlay{z-index:3;}
.work .dribbble-grid .journey-media{position:absolute;inset:0;background-size:cover;background-position:center;}
.work .dribbble-grid .work-card:has(.journey-video) .journey-browser{display:none;}
.work .dribbble-grid .work-card:has(.journey-video) .journey-media{z-index:1;}
.work .dribbble-grid .journey-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
.work .dribbble-grid .work-card .card-arrow{z-index:9;width:31px;height:31px;border-radius:100%;top:11px;right:11px;background:#0d0d0dcc;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;}
.work .dribbble-grid .work-card:hover .card-arrow,.work .dribbble-grid .work-card:focus-visible .card-arrow{opacity:1;transform:none;}
.work .dribbble-grid .card-info{padding:11px 0 0;display:flex;align-items:start;justify-content:space-between;gap:7px;}
.work .dribbble-grid .card-info h3{font-size:14px;letter-spacing:-.025em;font-weight:800;line-height:1.3;margin:0 0 4px;}
.work .dribbble-grid .card-info p{font-size:10px;line-height:1.3;color:#8f8f8f;}
.work .dribbble-grid .card-number{font:500 8px/1.5 var(--mono);color:#ffc400;white-space:nowrap;padding-top:2px;}
.work .dribbble-grid .card-cta-row{margin-top:10px;padding-top:10px;border-top:1px solid #272727;font-size:9px;letter-spacing:.045em;opacity:.55;transition:opacity .2s,color .2s;}
.work .dribbble-grid .work-card:hover .card-cta-row{opacity:1;}
.work .dribbble-grid .journey-label{font-size:7px;padding:6px 7px;}
.work .dribbble-grid .journey-hint,.work .dribbble-grid .journey-steps{display:none;}
.work .dribbble-grid .journey-overlay{padding:10px;}
.work .dribbble-grid .journey-progress{bottom:0;left:0;right:0;height:3px;}
.work .dribbble-grid .journey-screen{min-height:180px;}
.work .dribbble-grid .journey-object{font-size:40px;}
@media(min-width:1450px){.work .dribbble-grid{gap:40px 22px}.work .dribbble-grid .card-info h3{font-size:16px}}
@media(max-width:1100px){.work .dribbble-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 15px;}.work .dribbble-grid .journey-screen strong{font-size:clamp(16px,2vw,28px)}}
@media(max-width:780px){.work.section-wrap{width:calc(100% - 36px)}.work .dribbble-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 13px}.gallery-toolbar span:last-child{display:none}.work .dribbble-grid .card-info h3{font-size:13px}.work .dribbble-grid .card-info p{font-size:9px}.work .dribbble-grid .card-number{font-size:7px}.work .dribbble-grid .card-image{aspect-ratio:1.2}}
@media(max-width:480px){.work .dribbble-grid{grid-template-columns:1fr;gap:30px}.work .dribbble-grid .card-image{aspect-ratio:1.5}.work .dribbble-grid .card-info h3{font-size:18px}.work .dribbble-grid .card-info p{font-size:11px}.work .dribbble-grid .card-number{font-size:9px}}
@media(hover:none){.work .dribbble-grid .card-arrow{opacity:1;transform:none}.work .dribbble-grid .journey-label{display:none}}
@media(prefers-reduced-motion:reduce){.work .dribbble-grid .work-card,.work .dribbble-grid .card-image .journey{transform:none!important;transition:none!important}}

/* V11 — Larger project previews, preserve the full site hero */
.work.section-wrap{max-width:1720px;}
.work .dribbble-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 22px;}
.work .dribbble-grid .card-image{aspect-ratio:8 / 5;background:#151513;}
.work .dribbble-grid .journey-media{background-size:contain;background-repeat:no-repeat;background-position:center;}
.work .dribbble-grid .journey-video{object-fit:contain;object-position:center;}
.work .dribbble-grid .journey-screen strong{font-size:clamp(20px,2vw,35px);}
.work .dribbble-grid .card-info h3{font-size:clamp(15px,1.1vw,18px);}
@media(max-width:1050px){
  .work .dribbble-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px;}
}
@media(max-width:620px){
  .work .dribbble-grid{grid-template-columns:1fr;gap:30px;}
  .work .dribbble-grid .card-image{aspect-ratio:8 / 5;}
  .work .dribbble-grid .card-info h3{font-size:17px;}
}

/* V12 — Toujours afficher la première image réelle du site avant le survol. */
.work .dribbble-grid .work-card:has(.journey-video) .journey-media {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f4f3ef;
}
.work .dribbble-grid .work-card:has(.journey-video) .journey-video {
  object-fit: contain;
  object-position: center;
}

/* V13: fixed visual cover for projects without real video. */
.work .dribbble-grid .journey-poster-only .journey-browser{display:none;}
.work .dribbble-grid .journey-poster-only .journey-media{z-index:1;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#151515;transform:scale(1);transition:transform .65s cubic-bezier(.2,.8,.2,1);}
.work .dribbble-grid .work-card:hover .journey-poster-only .journey-media{transform:scale(1.045);}
.work .dribbble-grid .journey-poster-only .journey-label{display:none;}
.work .dribbble-grid .journey-poster-only .journey-overlay{pointer-events:none;}

/* V16 — Correction: le poster reste visible jusqu'au premier frame décodé. */
.work .dribbble-grid .work-card:has(.journey-video) .journey-media {
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.work .dribbble-grid .journey-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
  display:block;
}
.work .dribbble-grid .work-card.is-video-playing .journey-video {
  opacity:1;
  visibility:visible;
  transition:opacity .25s ease;
}
.work .dribbble-grid .work-card.is-video-playing .journey-media {
  background-image:none !important;
}
/* Aucun mode d'accessibilité ne doit désactiver complètement la lecture au survol. */
@media(prefers-reduced-motion:reduce){
  .work .dribbble-grid .work-card.is-video-playing .journey-video {opacity:1;visibility:visible;}
}

/* V17 — Keep static cover artwork visible on cards that have no video.
   Base style.css hides .journey-media:not(:has(video)), which previously
   hid ASEESIM, BOBO and OMEZA despite their posters being available. */
.work .dribbble-grid .journey-poster-only .journey-media:not(:has(video)) {
  display:block;
  visibility:visible;
  opacity:1;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
/* Maintain readable static artwork, avoid browser mock-up obscuring covers. */
.work .dribbble-grid .journey-poster-only .journey-browser {display:none;}
/* The WhatsApp qualification headline remains white on its dark panel. */
.contact-motion .wa-panel .wa-panel-heading {color:#ffffff !important;-webkit-text-fill-color:#ffffff;}


/* V19 — Interactive project video player inside the project detail drawer */
.modal-preview.modal-has-video {height:auto;display:block;min-height:0;background:#080808;overflow:visible;}
.modal-video-wrap{position:relative;width:100%;background:#080808;isolation:isolate;}
.modal-project-video{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#080808;max-height:58vh;}
.modal-play-overlay{position:absolute;inset:0 0 56px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;border:0;background:linear-gradient(180deg,transparent 35%,#0003);color:white;cursor:pointer;transition:opacity .22s ease,visibility .22s ease;}
.modal-play-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.modal-play-symbol{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#ffc400;color:#111;font-size:28px;padding-left:4px;box-shadow:0 10px 40px #0007;transition:transform .2s ease;}
.modal-play-overlay:hover .modal-play-symbol{transform:scale(1.1);}
.modal-play-label{font:700 11px/1.3 var(--mono,monospace);letter-spacing:.14em;text-shadow:0 1px 10px #000;}
.modal-video-controls{height:56px;display:flex;align-items:center;gap:12px;padding:8px 14px;background:#171717;color:white;}
.modal-control{white-space:nowrap;color:#fff;background:transparent;border:1px solid #444;border-radius:5px;padding:8px 9px;cursor:pointer;font-size:13px;}
.modal-control:hover,.modal-control:focus-visible{color:#ffc400;border-color:#ffc400;}
.modal-control span{font:700 10px var(--mono,monospace)}
.modal-video-time{font:10px var(--mono,monospace);white-space:nowrap;color:#bbb}
#modalVideoSeek{width:100%;min-width:25px;flex:1;accent-color:#ffc400;cursor:pointer;}
.modal-image-wrap{position:relative;width:100%;}
.modal-image-wrap img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block;background:#111;}
.modal-preview-caption{position:absolute;left:18px;bottom:15px;background:#111d;color:#fff;padding:8px 10px;font:10px var(--mono,monospace);letter-spacing:.1em;}
@media(max-width:600px){.modal-project-video{aspect-ratio:16/10;max-height:48vh}.modal-video-controls{gap:6px;padding:6px}.modal-play-symbol{width:58px;height:58px;font-size:22px}.modal-control{padding:7px}.modal-video-time{font-size:9px}}