/* ===== LOADER ===== */

#loader{
  position:fixed; inset:0; z-index:9999;
  background:#f2f2f0;
  pointer-events:none;
  transition:opacity .6s ease;
}
#loader.done{ opacity:0; }
#loader-pct{
  position:absolute; bottom:6vw; left:6vw;
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(3rem, 12vw, 10rem);
  line-height:1; color:#0b0b0b;
  letter-spacing:-.02em;
}

/* ===== VARIABLES & BASE ===== */

:root{
  --bg:#0b0b0b; --fg:#e6e7ea; --muted:#9aa0a6;
  --cursor:rgba(255,255,255,.12);
  --wall-info-bg:rgba(11,11,11,.92); --wall-info-color:rgba(255,255,255,.92);
}
body.light{
  --bg:#f2f2f0; --fg:#1a1a1a; --muted:#6b7280;
  --cursor:rgba(0,0,0,.15);
  --wall-info-bg:#f2f2f0; --wall-info-color:rgba(0,0,0,.88);
}
*{ box-sizing:border-box }
html, body{ height:100% }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:bicyclette, system-ui, -apple-system, sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }


/* ===== HEADER & NAVIGATION ===== */

header{
  position:fixed; top:0; left:0; right:0; z-index:200; height:72px;
  display:flex; align-items:center; justify-content:flex-end; padding:0 20px;
  background:transparent; border:none; mix-blend-mode:difference;
}
header, header *{ color:#fff !important; fill:#fff !important; }

/* Nav principale — positionnée par JS */
.main-nav a{
  position:fixed; z-index:200;
  font-family:bicyclette,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff; mix-blend-mode:difference;
  text-decoration:none; white-space:nowrap;
  opacity:.85; transition:opacity .2s;
  pointer-events:auto;
}
.main-nav a:hover{ opacity:1; }

nav{ display:flex; gap:16px }
nav a{ opacity:.85 }
nav a:hover{ opacity:1 }

.stage{ padding-top:72px; }
.brand{ font-weight:900; letter-spacing:.06em; display:flex; gap:10px; align-items:center }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:currentColor }


/* ===== HERO LETTERS & TEXTE CENTRAL ===== */

#hero-letters{
  position:fixed; inset:0; pointer-events:none;
  transform:translateZ(0);
  mix-blend-mode:difference; z-index:90;
}
.hero-bl{
  position:fixed; font-family:'Inter',sans-serif; font-weight:900; color:#fff;
  pointer-events:none; will-change:transform,font-size;
  line-height:1; transform-origin:top left;
}
.hero-center-fixed{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center; z-index:95;
  mix-blend-mode:difference; pointer-events:none;
  opacity:1 !important;
}
.hero-center-fixed, .hero-center-fixed *{ color:#fff !important; opacity:1 !important; }
.hero-center-name{ font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:5px; }
.hero-center-role{ font-size:.68rem; font-weight:300; letter-spacing:.14em; text-transform:uppercase; }


/* ===== UI COINS (TOGGLES & PICTOS) ===== */

.hico{
  display:flex; align-items:center; justify-content:center; color:#fff;
  opacity:.72; transition:opacity .2s, transform .2s cubic-bezier(.22,.7,.2,1);
  text-decoration:none; padding:6px;
}
.hico:hover{ opacity:1; }
.hico-btn{ background:none; border:none; cursor:pointer; }
.corner-ui{
  position:fixed; bottom:20px; z-index:200;
  display:flex; align-items:center; gap:2px;
  mix-blend-mode:difference;
}
.corner-ui, .corner-ui *{ color:#fff !important; fill:#fff !important; }
.corner-left{ left:16px; }
.corner-right{ right:16px; }

/* Flèche retour en haut */
#scrollTopBtn{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:200; background:none; border:none; cursor:pointer;
  mix-blend-mode:difference; color:#fff; opacity:0;
  transition:opacity .3s ease, transform .5s cubic-bezier(.22,.7,.2,1);
  pointer-events:none;
}
#scrollTopBtn.visible{ opacity:.72; pointer-events:auto; }
#scrollTopBtn:hover{ opacity:1; }

/* Tooltips coins */
.hico[data-tip]{ position:relative; }
.hico[data-tip]::after{
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  background:#fff; color:#000 !important;
  font:600 10px/1 bicyclette,system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 6px; border-radius:4px;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s ease;
  mix-blend-mode:normal;
}
.hico[data-tip]:hover::after{ opacity:1; }


/* ===== STAGE & TILES ===== */

.stage{ position:relative; width:100vw; margin:0 auto; }

.tile{
  position:absolute; pointer-events:auto; will-change:transform;
  mix-blend-mode:screen; opacity:0.8; transition:opacity 1s ease;
  padding:0; border:0; cursor:pointer;
}
.tile:hover{ opacity:1; mix-blend-mode:normal; z-index:99 !important }

.tile img, .tile iframe{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; border:0; margin:0; padding:0;
  animation:breathe 12s ease-in-out infinite;
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none; user-select:none;
}
.tile iframe{ pointer-events:none; display:block; overflow:hidden; }

@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }


/* ===== PANNEAU INFO (REVEAL DIRECTIONNEL) ===== */

.info{
  position:absolute; top:50%; width:min(28vw,360px); max-width:92vw;
  background:transparent; color:rgba(255,255,255,.92);
  font:300 0.95rem/1.18 bicyclette, system-ui, -apple-system, sans-serif;
  pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.28);
  opacity:0; visibility:hidden;
  --dx: 0px;
  transform:translateY(-50%) translateX(var(--dx)) scale(.985);
  filter:blur(2px); clip-path:inset(0 0 0 0);
  transition:opacity .36s ease, transform .44s cubic-bezier(.22,.7,.2,1), filter .44s ease, clip-path .48s cubic-bezier(.22,.7,.2,1), visibility 0s linear .44s;
  will-change:transform, opacity, filter, clip-path;
  overflow:visible;
}
.info h3{ margin:0; font-weight:700; font-size:1.05rem; letter-spacing:.01em }
.info p{ margin:0; color:rgba(255,255,255,.78); text-transform:uppercase; font-size:.78em; letter-spacing:.08em; }
.info .muted{ display:none !important; }

.info[data-side="right"]{ left:100%; right:auto; margin-left:22px; text-align:left;  --dx:12px;  clip-path:inset(0 100% 0 0); }
.info[data-side="left"] { right:100%; left:auto;  margin-right:22px; text-align:right; --dx:-12px; clip-path:inset(0 0 0 100%); }

.info .nature, .info .tech, .info .client{
  opacity:0; transform:translateY(6px);
  transition:opacity .36s ease, transform .44s cubic-bezier(.22,.7,.2,1);
}
.info .nature{ transition-delay:.04s }
.info .tech{   transition-delay:.14s }
.info .client{ transition-delay:.24s }

.tile:hover .info.show{
  opacity:1; visibility:visible;
  transform:translateY(-50%) translateX(0) scale(1);
  filter:blur(0); clip-path:inset(0 0 0 0);
  transition-delay:0s, 0s, 0s, 0s, 0s;
}
.tile:hover .info.show .nature,
.tile:hover .info.show .tech,
.tile:hover .info.show .client{ opacity:1; transform:translateY(0); }


/* ===== FOCUS (SLIDE DES AUTRES TUILES) ===== */

.focusWrap{
  position:absolute; inset:0;
  transition:transform var(--focus-ms,420ms) cubic-bezier(.22,.7,.2,1), opacity var(--focus-ms,420ms) ease;
  will-change:transform, opacity;
}
.tile.focus-sliding .focusWrap{
  opacity:0;
  transform:translate3d(var(--focus-tx,0px), var(--focus-ty,0px), 0);
}
.tile.focus-sliding.returning .focusWrap{ opacity:1; }


/* ===== TILES WEB (SCREENSHOT + PAN VERTICAL) ===== */

.tile.isWeb{ mix-blend-mode:screen !important; opacity:1 !important; }

.webFrame{
  position:relative; width:100%; height:100%;
  overflow:hidden; border-radius:0 !important;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.08);
}
.webFrame img{
  position:absolute; top:0; left:0; width:100%; height:auto; display:block;
  animation:none !important;
  object-fit:contain !important;
  transform:translateY(0) !important;
  transition:transform .8s ease;
  pointer-events:none;
}
.tile.isWeb:hover .webFrame img{
  transform:translateY(var(--panY, -30%)) !important;
  transition:transform 28s cubic-bezier(.22,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .webFrame img{ transition:none; }
  .tile.isWeb:hover .webFrame img{ transform:none !important; }
}


/* ===== MODE MUR (SCATTER ÉDITORIAL) ===== */

body.wall-view .stage{
  display:block !important;
  padding:0 !important; min-height:unset !important;
  width:100% !important; margin-left:0 !important;
  overflow:visible !important;
}

body.wall-view .tile{
  position:absolute !important;
  height:auto !important;
  mix-blend-mode:normal !important;
  opacity:0.85; transition:opacity .25s ease;
}
body.wall-view .tile:hover{ opacity:1 !important; }
body.wall-view .tile img{ transition:transform .6s cubic-bezier(.22,.7,.2,1) !important; }
body.wall-view .tile:hover img{ transform:scale(1.12) !important; }

body.wall-view .focusWrap{
  position:relative !important; inset:auto !important;
  width:100%; height:auto; overflow:hidden;
}
body.wall-view .tile img{
  position:relative !important;
  width:100% !important; height:auto !important;
  object-fit:cover; display:block !important;
  animation:none !important;
}
body.wall-view .tile iframe{
  position:relative !important;
  width:100% !important; height:auto !important;
  aspect-ratio:16/9; display:block !important;
}
body.wall-view .tile .webFrame{ border-radius:0 !important; height:auto !important; }

/* En mur, l'image webFrame doit être en flux (position:static) sinon le conteneur s'effondre à 0.
   La règle hover (.tile.isWeb:hover .webFrame img, spécificité 0,4,1+!important) bat 0,3,2+!important
   → on utilise un sélecteur plus spécifique (0,5,2) pour bloquer le pan au hover */
body.wall-view .tile .webFrame img,
body.wall-view .tile.isWeb:hover .webFrame img{
  position:static !important;
  width:100% !important; height:auto !important;
  object-fit:unset !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}

/* Info en mode mur : ascenseur depuis le bas */
@media(min-width:1367px){ body.wall-view .tile{ overflow:hidden; } }

body.wall-view .info{
  position:absolute !important;
  top:100% !important; bottom:auto !important;
  left:0 !important; right:0 !important;
  width:100% !important; max-width:100% !important;
  transform:translateY(0) !important;
  transition:transform .38s cubic-bezier(.22,.7,.2,1) !important;
  background:var(--wall-info-bg) !important;
  color:var(--wall-info-color) !important;
  padding:8px 10px 7px !important;
  text-align:left !important; font-size:.70rem !important;
  clip-path:none !important; filter:none !important;
  opacity:1 !important; visibility:visible !important;
  --dx:0px !important; pointer-events:none !important;
}
body.wall-view .info[data-side="right"],
body.wall-view .info[data-side="left"]{ left:0 !important; right:0 !important; margin:0 !important; }

body.wall-view .tile:hover .info,
body.wall-view .tile:hover .info.show{ transform:translateY(-100%) !important; }

body.wall-view .info p{ font-size:.70rem !important; line-height:1.5 !important; }
body.wall-view .info .nature,
body.wall-view .info .tech,
body.wall-view .info .client{ opacity:1 !important; transform:none !important; transition:none !important; }

body.wall-view header #wallToggle{ opacity:1; }


/* ===== MODE LIGHT ===== */

body.light .tile{ mix-blend-mode:multiply; }
body.light .tile:hover{ mix-blend-mode:normal; }
/* Tile web (screenshot blanc) : multiply la rend invisible sur fond blanc → normal */
body.light .tile.isWeb,
body.light .tile.isWeb:hover{ mix-blend-mode:normal !important; }
body.light .webFrame{ background:#f2f2f0 !important; border-color:rgba(0,0,0,.06) !important; }

/* Info panel en light : texte sombre + fond blanc par ligne */
body.light .info{ color:rgba(0,0,0,.88); text-shadow:none; }
body.light .info h3,
body.light .info p{ margin:0; line-height:1; }
body.light .info h3 span,
body.light .info p span:not(.muted){
  background:#f2f2f0;
  box-shadow:3px 0 0 #f2f2f0, -3px 0 0 #f2f2f0;
  padding-left:2px; padding-right:2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  color:rgba(0,0,0,.88); line-height:1.05; display:inline;
}
body.light .info .muted{ color:rgba(0,0,0,.5); }

body.light.wall-view .tile{ opacity:0.85; }
/* En mur light, les spans n'ont pas besoin de box-shadow (fond géré par --wall-info-bg) */
body.light.wall-view .info h3 span,
body.light.wall-view .info p span{ background:none !important; box-shadow:none !important; }

/* Fancybox en mode light */
body.light .fancybox__container{
  --fancybox-bg:#f2f2f0; --fancybox-color:#1a1a1a;
  --f-button-bg:transparent; --f-button-color:#1a1a1a;
  --f-button-hover-bg:rgba(0,0,0,.08); --f-button-hover-color:#000;
  --f-button-active-bg:rgba(0,0,0,.14);
  --f-toolbar-bg:transparent; --f-toolbar-color:#1a1a1a;
}
body.light .fancybox__backdrop{ background:#f2f2f0 !important; }
body.light .fancybox__caption,
body.light .fancybox__caption *{ color:#1a1a1a !important; }
body.light .fancybox__toolbar{ background:transparent !important; }
body.light .fancybox__toolbar .f-button{ background:transparent !important; color:#1a1a1a !important; }
body.light .fancybox__toolbar .f-button:hover{ background:rgba(0,0,0,.08) !important; }
body.light .f-carousel__nav .f-button{ background:rgba(235,235,234,.9) !important; color:#1a1a1a !important; }

body.modal-open, body.modal-open *{ cursor:auto !important; }


/* ===== FANCYBOX ===== */

@media(min-width:769px){
  .fancybox__caption{ text-align:center !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }
}
.fancybox__thumbs{ display:none !important; }
.fancybox__slide{ padding:20px !important; }


/* ===== POPUPS CONTACT & ABOUT ===== */

/* Contact */
#contact-overlay{
  display:none; position:fixed; inset:0; z-index:2000;
  background:var(--fg); overflow:hidden;
  opacity:0; transition:opacity .5s ease;
}
#contact-overlay.open{ display:flex; flex-direction:column; justify-content:center; }
#contact-overlay.visible{ opacity:1; }

#contact-close{
  position:absolute; top:22px; right:20px; z-index:502;
  background:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:18px; font-weight:300;
  color:var(--bg); transition:opacity .2s;
}
#contact-close:hover{ opacity:.7; }

#contact-body{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#contact-inner{ text-align:center; font-family:bicyclette,sans-serif; color:var(--bg); }
#contact-inner .c-name{
  font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-bottom:5px; opacity:1;
}
#contact-inner .c-role{
  font-size:.68rem; font-weight:300; letter-spacing:.14em;
  text-transform:uppercase; display:block;
}
#contact-inner .c-sub{
  font-size:.68rem; font-weight:300; letter-spacing:.14em;
  text-transform:uppercase; display:block; margin-top:.6em;
}
#contact-inner .c-contacts{
  margin-top:1.4em; display:flex; flex-direction:column; align-items:center; gap:.3em;
}
#contact-inner .c-phone,
#contact-inner .c-email{
  font-size:.68rem; font-weight:300; letter-spacing:.14em;
  text-transform:none; text-decoration:none; color:var(--bg);
}
#contact-inner .c-phone:hover,
#contact-inner .c-email:hover{ opacity:.7; }

/* Animation ouverture contact */
@keyframes contactLineIn{
  from{ opacity:0; transform:translateY(12px); }
  to{   opacity:1; transform:translateY(0); }
}
#contact-overlay.visible #contact-inner .c-name{ animation:contactLineIn .5s cubic-bezier(.22,.7,.2,1) .15s both; }
#contact-overlay.visible #contact-inner .c-role{ animation:contactLineIn .5s cubic-bezier(.22,.7,.2,1) .28s both; }
#contact-overlay.visible #contact-inner .c-sub{  animation:contactLineIn .5s cubic-bezier(.22,.7,.2,1) .38s both; }
#contact-overlay.visible .c-contacts{            animation:contactLineIn .5s cubic-bezier(.22,.7,.2,1) .52s both; }

/* About */
#about-overlay{
  display:none; position:fixed; inset:0; z-index:2000;
  background:var(--bg); overflow:hidden;
  opacity:0; transition:opacity .6s ease;
}
#about-overlay.open{ display:flex; flex-direction:column; justify-content:flex-end; }
#about-overlay.visible{ opacity:1; }

/* Lettres animées About */
.al{
  position:fixed; pointer-events:none;
  font-family:bicyclette,sans-serif; font-weight:600;
  text-transform:uppercase; color:var(--fg);
  white-space:pre; z-index:2001;
}

#about-close{
  position:absolute; top:22px; right:20px;
  background:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:18px; font-weight:300;
  color:#fff; mix-blend-mode:difference;
  line-height:1; padding:4px 8px; opacity:.7; transition:opacity .2s;
}
#about-close:hover{ opacity:1; }

#about-text{
  margin:0; padding:0 6px 0;
  font-family:bicyclette,sans-serif; font-weight:600;
  line-height:.92; letter-spacing:-.01em;
  text-transform:uppercase;
  text-align:justify; text-align-last:left;
  color:var(--fg); hyphens:auto; flex-shrink:0;
}


/* ===== MODAL PROJETS ===== */

.modalProject{
  width:min(980px,92vw); max-height:90vh; overflow:auto;
  background:rgba(18,18,18,.98); color:#e6e7ea;
  border:1px solid rgba(255,255,255,.06); border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.45)
}
.modalProject .mp-header{
  padding:22px 22px 6px 22px; border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; background:rgba(18,18,18,.96);
  backdrop-filter:blur(6px); z-index:2;
}
.modalProject .mp-title{ margin:0; font-size:1.25rem; letter-spacing:.01em }
.modalProject .mp-sub{ margin:6px 0 0 0; color:rgba(255,255,255,.65); font-size:.95rem }
.modalProject .mp-body{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; padding:18px }
@media (max-width:900px){ .modalProject .mp-body{ grid-template-columns:1fr; } }
.modalProject .mp-media{
  position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:#0f0f0f; border:1px solid rgba(255,255,255,.06);
}
.modalProject .mp-media img, .modalProject .mp-media iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0 }
.modalProject .mp-text{ font:300 0.98rem/1.55 bicyclette, system-ui, -apple-system, sans-serif; color:rgba(255,255,255,.88) }
.modalProject .mp-text p{ margin:0 0 12px 0 }
.modalProject .mp-meta{ margin-top:12px; display:grid; gap:6px }
.modalProject .mp-meta .row{ display:flex; gap:10px }
.modalProject .mp-meta .label{ min-width:88px; color:rgba(255,255,255,.6) }

.modalSimple{
  width:min(720px,94vw); background:rgba(14,14,14,.98); color:#e6e7ea;
  border:1px solid rgba(255,255,255,.06); border-radius:16px;
  overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.modalSimple .ms-media{ max-height:62vh; overflow:hidden; background:#0a0a0a; display:flex; align-items:center; justify-content:center; }
.modalSimple .ms-media img{ width:100%; max-height:62vh; object-fit:contain; display:block; }
.modalSimple .ms-media iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }
.modalSimple .ms-text{ padding:14px 18px 16px; border-top:1px solid rgba(255,255,255,.06); }
.modalSimple .ms-title{ margin:0 0 6px; font-size:1.05rem; font-weight:700; letter-spacing:.01em; }
.modalSimple .ms-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; color:rgba(255,255,255,.65); font-size:.88rem; }
.modalSimple .ms-meta span{ display:flex; gap:6px; }
.modalSimple .ms-meta .lbl{ color:rgba(255,255,255,.42); }


/* ===== FOOTER ===== */

#footer-mid{
  display:flex; justify-content:center; gap:48px; align-items:flex-start;
  padding:60px 40px 24px;
}
.footer-col{ display:flex; flex-direction:column; }
.footer-col .footer-name{
  font-family:bicyclette,sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg); margin-bottom:5px;
}
.footer-col .footer-role{
  font-family:bicyclette,sans-serif; font-size:.68rem; font-weight:300;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
}
.footer-col .footer-sub{
  font-family:bicyclette,sans-serif; font-size:.68rem; font-weight:300;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg); margin-top:.6em;
}
.footer-col a{
  font-family:bicyclette,sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg);
  text-decoration:none; line-height:1.4; cursor:pointer;
}
.footer-col a:hover{ opacity:.6; }


/* ===== RESPONSIVE — CURSEUR (≤1366px) ===== */

@media (max-width:1366px){
  #cursor, .cursor{ display:none !important; opacity:0 !important; pointer-events:none !important; }
  html, body{ cursor:auto !important; }
}
/* Détection iOS : curseur masqué même si largeur >1366 */
@supports (-webkit-touch-callout: none){
  #cursor, .cursor{ display:none !important; opacity:0 !important; pointer-events:none !important; }
  html, body{ cursor:auto !important; }
}


/* ===== RESPONSIVE — MOBILE (≤768px) ===== */

@media (max-width:768px){
  /* Footer */
  #footer-mid{ padding-bottom:90px; padding-left:6vw; padding-right:0; position:relative; justify-content:flex-start; }
  .footer-col:not(.footer-nav){ max-width:calc(100% - 130px); }
  .footer-col.footer-nav{ position:absolute; left:calc(100% - 116px); top:60px; align-items:flex-start; }

  /* UI */
  #themeToggle{ display:none !important; }
  .hico[data-tip]::after{ display:none !important; }
  .cursor{ display:none !important; }
  body{ cursor:auto; }

  /* Fancybox caption */
  .fancybox__caption{
    background:var(--bg) !important; color:var(--fg) !important;
    text-align:center !important; width:100% !important;
    padding:10px 16px !important; box-shadow:none !important; border-radius:0 !important;
  }
  .fancybox__caption *{ color:var(--fg) !important; text-align:center !important; }

  /* Tiles web : frame 16/9 avec pan vertical piloté par JS */
  .tile.isWeb .focusWrap{
    position:relative !important;
    aspect-ratio:16/9 !important;
    overflow:hidden !important;
  }
  .tile.isWeb .focusWrap img{
    width:100% !important; height:auto !important;
    display:block !important; will-change:transform;
    transform:translateY(0);
  }
  .tile.isWeb .focusWrap iframe{
    width:100% !important; height:100% !important;
    border:0; display:block;
  }

  /* Tiles en flux : position relative pour qu'elles s'empilent verticalement */
  .tile{ position:relative; }
  .tile .focusWrap{ position:relative !important; }
  .tile .focusWrap::after,
  .tile .focusWrap::before,
  .tile::after,
  .tile::before{ content:none !important; display:none !important; }
  .tile, .tile .focusWrap, .tile img{ box-shadow:none !important; filter:none !important; }

  .tile .focusWrap img,
  .tile .focusWrap video,
  .tile .focusWrap iframe{
    display:block !important; width:100% !important; height:auto !important;
    position:relative !important; z-index:0 !important;
    visibility:visible !important; opacity:1 !important; filter:none !important;
  }

  /* Info overlay : centré sur le visuel, n'affiche que titre + nature */
  .tile .info *:not(h3):not(.nature){ display:none !important; }
  .tile .info h3,
  .tile .info .nature{
    display:block !important; margin:0 !important; padding:0 !important;
    line-height:1.2 !important; color:#fff !important; background:transparent !important;
  }
  .tile .info{
    position:absolute !important;
    left:50% !important; top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:100% !important; max-width:100% !important;
    text-align:center !important;
    color:#fff !important; background:transparent !important;
    pointer-events:none !important; z-index:2 !important;
    opacity:0; transition:opacity .6s ease;
  }
  .tile.is-vertical .info{ top:64% !important; }

  /* Apparaît quand le tile est au centre du viewport */
  .tile.atCenter .info{ opacity:1; }
  .tile.atCenter .info .nature{ opacity:1 !important; transform:none !important; }

  /* Masquer pendant l'ouverture du modal */
  body.modal-open .tile .info{ opacity:0 !important; }

  /* Garantie finale : quand le modal est fermé, le tile centré doit être visible */
  body:not(.modal-open) .tile.atCenter .info{
    opacity:1 !important; visibility:visible !important;
    display:block !important; filter:none !important;
  }

  /* forceCenter : snap immédiat après fermeture de modal */
  body:not(.modal-open) .tile.forceCenter .info{
    opacity:1 !important; filter:none !important;
    transition:opacity 0s linear !important;
  }

  /* Garde CSS-only via :has() pour masquer overlays quand le modal est visible */
  @supports selector(body:has(.modal:not([hidden]))){
    body:has(.modal:not([hidden])) .tile .info{
      opacity:0 !important; filter:none !important; visibility:hidden !important;
    }
  }

  /* Mode mur sur mobile/tablette : info masquée */
  body.wall-view .tile .info,
  body.wall-view .tile.atCenter .info,
  body:not(.modal-open).wall-view .tile.atCenter .info{
    display:none !important; opacity:0 !important; visibility:hidden !important;
  }
}


/* ===== RESPONSIVE — TABLETTE (769px–1366px) ===== */

@media (min-width:769px) and (max-width:1366px){
  /* Empêcher le scroll horizontal sans casser le scrollY */
  body{ overflow-x:hidden !important; }
  .stage, .tile, .focusWrap{ max-width:100vw; }
  .tile{ transform:translateX(var(--nudgeX, 0px)); will-change:transform; }

  /* Tile au centre : premier plan + blend normal pour que les spans soient lisibles */
  .tile.atCenter{
    z-index:1000 !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
  }

  /* Info révélée quand le tile passe au centre (mirroir du hover desktop) */
  .tile .info{ opacity:0; }
  .tile.atCenter .info.show{
    opacity:1 !important; visibility:visible !important;
    transform:translateY(-50%) translateX(0) scale(1) !important;
    filter:blur(0) !important; clip-path:inset(0 0 0 0) !important;
    transition-delay:0s !important;
    z-index:1001 !important;
    pointer-events:auto;
  }
  .tile.atCenter .info.show .nature,
  .tile.atCenter .info.show .tech,
  .tile.atCenter .info.show .client{
    opacity:1 !important; transform:translateY(0) !important;
  }

  /* Médias toujours visibles */
  .focusWrap img,
  .focusWrap video{ display:block; max-width:100%; height:auto; opacity:1 !important; visibility:visible !important; }
  .focusWrap iframe{ display:block; width:100% !important; height:100% !important; opacity:1 !important; visibility:visible !important; }
  .focusWrap{ opacity:1 !important; visibility:visible !important; }
  .tile{ overflow:visible !important; }

  /* Empêcher le hover desktop d'interférer sur tablette tactile */
  .tile:not(.atCenter):hover .info{ opacity:0 !important; visibility:hidden !important; }

  /* Mode mur sur tablette : info masquée */
  body.wall-view .tile .info,
  body.wall-view .tile.atCenter .info,
  body:not(.modal-open).wall-view .tile.atCenter .info{
    display:none !important; opacity:0 !important; visibility:hidden !important;
  }
}


/* ===== DÉSACTIVÉ — texte au scroll (garder en réserve) =====
@media (max-width:768px){
  .tile.atCenter .info h3 span,
  .tile.atCenter .info .nature span{ display:inline !important; }

  .tile.atCenter .info .nature{ opacity:1 !important; transform:none !important; }

  body.light .tile.atCenter .info h3,
  body.light .tile.atCenter .info h3 span,
  body.light .tile.atCenter .info .nature,
  body.light .tile.atCenter .info .nature span{ color:var(--fg) !important; text-shadow:none !important; }

  .tile .info{ transition: opacity .45s ease, filter .45s ease; }
  .tile.atCenter .info{ opacity:1 !important; filter:none !important; visibility:visible !important; }
  body.modal-open .tile .info{ opacity:0 !important; }
}
*/