/* ==========================================================================
   MISE EN PAGE (pas de typographie ici : voir typography.css)
   Cible : écran d'ordinateur 4:3 (1024x768, 1280x960), AUCUN scroll.
   ========================================================================== */
:root{
  --bg:#ffffff;
  --ink:#25243b;
  --gutter:max(16px, calc(3.4 * var(--u)));
  --gap:calc(2.2 * var(--u));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body,"DM Sans",sans-serif);
  display:grid; grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #6b6bd6;outline-offset:3px}

/* ---------- En-tête ---------- */
.site-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:calc(2.6 * var(--u)) var(--gutter) calc(1.6 * var(--u)); position:relative; z-index:5;
}
.site-header nav{display:flex; align-items:flex-start; gap:calc(2.2 * var(--u))}
.site-header nav > a, .has-sub > a{display:block; padding-bottom:.2em}
.has-sub{position:relative}
.submenu{
  list-style:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:max-content; padding-top:calc(.5 * var(--u)); display:flex; flex-direction:column; gap:calc(.3 * var(--u));
  z-index:6;
}
.submenu li{display:none; white-space:nowrap}
.submenu a{display:block; padding:.1em .6em .1em 1.1em; position:relative; background:var(--bg)}
.submenu a::before{content:"•"; position:absolute; left:0}
.submenu a.is-current{color:var(--ink); font-weight:600}
/* série courante toujours visible sous "Works" ; tout le sous-menu au survol */
.submenu li.is-current{display:block}
.has-sub:hover .submenu li, .has-sub:focus-within .submenu li{display:block}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{background:var(--bg); box-shadow:0 calc(.6 * var(--u)) calc(1.6 * var(--u)) rgba(37,36,59,.08)}

body[data-route="home"] .site-header{display:none}
body[data-route="home"]{grid-template-rows:minmax(0,1fr)}

/* ---------- Scène ---------- */
#stage{position:relative; min-height:0; min-width:0}
.screen{position:absolute; inset:0; padding:0 var(--gutter) calc(2.4 * var(--u)); min-height:0; min-width:0}
.screen[hidden]{display:none}

/* ---------- Accueil ---------- */
.screen.home{padding:0}
.home-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.home-enter{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(5 * var(--u)); padding-bottom:calc(6 * var(--u))}
.home-title{display:flex; gap:.9em; align-items:baseline; white-space:nowrap}
.home-sub{display:block}
.home-footer{position:absolute; left:0; right:0; bottom:calc(2.2 * var(--u)); text-align:center}
.home-footer a:hover{text-decoration:underline}

/* ---------- News ---------- */
.screen.news{display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,34%) minmax(0,1fr); gap:calc(4 * var(--u))}
.news-img{width:100%; height:100%; object-fit:cover}
.news-text{display:flex; flex-direction:column; gap:calc(1.5 * var(--u)); min-height:0; padding-top:calc(.4 * var(--u)); overflow:hidden}
.news-text .t-h2{margin-top:calc(.4 * var(--u))}
.news-text .t-h2 + .flyer-slot{margin-top:-.2u}
.news-text .t-year{align-self:flex-start; margin-top:calc(.4 * var(--u))}
.flyer-slot{border:1px dashed currentColor; padding:.6em .8em; align-self:flex-start; opacity:.85}
.flyer{max-height:calc(24 * var(--u)); width:auto; align-self:flex-start}
.news-text p{text-align:var(--text-align)}

/* ---------- About ---------- */
.screen.about{display:grid; grid-template-rows:minmax(0,29%) minmax(0,1fr); gap:calc(2.4 * var(--u))}
.about-banner{width:100%; height:100%; object-fit:cover}
.about-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.46fr); gap:var(--gap) calc(3.4 * var(--u)); height:100%; min-height:0; overflow:hidden; position:relative}
.about-body .col{display:flex; flex-direction:column; align-items:flex-start; gap:calc(1.6 * var(--u)); min-height:0}
.about-body .col p + p, .col .t-body-en p + p, .col .t-body-fr p + p{margin-top:1em}
.about-portrait{grid-column:3; align-self:end; justify-self:end; max-height:100%; max-width:100%; width:auto; object-fit:contain}
.cv{display:inline-block; background:#000; padding:.55em 1.3em; border-radius:2em}
.cv:hover{background:#2a2a52}

/* ---------- Séries : galerie images ---------- */
.screen.series{display:flex; flex-direction:column; gap:calc(1.4 * var(--u))}
.gallery{flex:1; min-height:0; display:flex; align-items:flex-start; justify-content:center; gap:var(--gap); padding-top:calc(3.4 * var(--u))}
.gallery img{height:var(--gh,100%); width:auto; max-width:100%; cursor:zoom-in}
.view-toggle{align-self:flex-end; flex:none; padding:.2em 0; border-bottom:1px solid transparent}
.view-toggle:hover{border-bottom-color:currentColor}

/* ---------- Séries : texte ---------- */
.text-view{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:calc(4.2 * var(--u)); align-content:start; overflow:hidden; padding-top:calc(3.2 * var(--u))}
.text-view.has-side{grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1fr)}
.text-view .side{height:100%; min-height:0; display:flex; align-items:flex-start}
.text-view .side img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:zoom-in}
.col p + p{margin-top:1em}
.t-strong{font-style:inherit}

/* ---------- OPAD galerie ---------- */
.screen.opad-gallery{display:flex; flex-direction:column; gap:calc(1.4 * var(--u)); padding-top:calc(2 * var(--u))}
.opad-grid{flex:1; min-height:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:calc(.5 * var(--u))}
.tile{position:relative; overflow:hidden; display:block; background:#e9e9ee; border:0; padding:0; cursor:zoom-in}
.tile img{width:100%; height:100%; object-fit:cover; filter:grayscale(.1)}
.tile .cap{position:absolute; inset:auto 0 0 0; padding:calc(3.6 * var(--u)) calc(1.2 * var(--u)) calc(1.1 * var(--u)); background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); opacity:0; transition:opacity .18s}
.tile:hover .cap, .tile:focus-visible .cap{opacity:1}
.opad-bar{flex:none; display:flex; align-items:center; justify-content:space-between}
.pager{display:flex; gap:calc(1.6 * var(--u)); align-items:center}
.pager button{background:none; border:0; font:inherit; color:inherit; letter-spacing:inherit; cursor:pointer; padding:.1em .2em; border-bottom:1px solid transparent}
.pager button:hover:not(:disabled){border-bottom-color:currentColor}
.pager button[aria-current="true"]{border-bottom-color:currentColor}
.pager button:disabled{opacity:.3; cursor:default}

/* ---------- Catalogue ---------- */
.screen.catalogue{display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:calc(6 * var(--u)); align-items:center; padding-top:calc(3 * var(--u))}
.cat-text{display:flex; flex-direction:column; gap:calc(4 * var(--u))}
.cat-text p + p{margin-top:1.2em}
.t-cta{text-decoration:underline; text-underline-offset:.2em}
.cat-img{max-width:100%; max-height:100%; width:auto; height:auto; justify-self:center; align-self:center; object-fit:contain; cursor:zoom-in}
.screen.catalogue .cat-img{max-height:100%}

/* ---------- Contact ---------- */
.screen.contact{display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:auto minmax(0,1fr); gap:calc(3.4 * var(--u)); padding-top:calc(2 * var(--u))}
.contact-img{height:100%; width:auto; max-width:42vw; object-fit:cover}
.contact-body{display:flex; flex-direction:column; justify-content:space-between; padding:calc(.4 * var(--u)) 0 calc(.6 * var(--u))}
.links{list-style:none; display:flex; flex-direction:column; gap:calc(.6 * var(--u)); margin-top:calc(2.6 * var(--u))}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline; text-underline-offset:.2em}
.contact-bottom .links{margin-top:calc(2 * var(--u))}

/* ---------- Privacy ---------- */
.screen.privacy{padding-top:calc(6 * var(--u))}
.privacy-body{display:flex; flex-direction:column; gap:calc(2 * var(--u)); max-width:calc(60 * var(--u))}

/* ---------- Liens à renseigner ---------- */
a.todo{cursor:not-allowed}

/* ---------- Plein écran ---------- */
.lightbox{position:fixed; inset:0; background:rgba(8,8,14,.94); z-index:50; display:flex; align-items:center; justify-content:center}
.lightbox figure{display:flex; flex-direction:column; align-items:center; gap:calc(1.4 * var(--u)); max-width:92vw}
.lightbox img{max-width:92vw; max-height:86vh; width:auto; height:auto; object-fit:contain}
.lightbox button{position:absolute; background:none; border:0; color:#fff; cursor:pointer; font-size:max(28px,calc(4 * var(--u))); line-height:1; padding:.4em .6em; opacity:.75}
.lightbox button:hover{opacity:1}
.lb-close{top:calc(1 * var(--u)); right:calc(1.4 * var(--u))}
.lb-prev{left:calc(1 * var(--u)); top:50%; transform:translateY(-50%)}
.lb-next{right:calc(1 * var(--u)); top:50%; transform:translateY(-50%)}
.lightbox[data-single="true"] .lb-prev,.lightbox[data-single="true"] .lb-next{display:none}

/* ---------- Panneau typo (outil de réglage, touche T) ---------- */
body.typo-open [data-typo-hl]{outline:1.5px dashed #e0245e; outline-offset:2px}

/* ---------- Petits écrans : retour au défilement normal ---------- */
@media (max-width:760px){
  html,body{height:auto}
  body{display:block; overflow:auto}
  #stage{position:static}
  .screen{position:static; padding-bottom:calc(6 * var(--u))}
  .screen[hidden]{display:none}
  .screen.home{position:fixed; inset:0}
  .site-header{flex-direction:column; gap:calc(1.4 * var(--u))}
  .site-header nav{flex-wrap:wrap; gap:calc(1.4 * var(--u)) calc(2.2 * var(--u))}
  .screen.news,.screen.about,.screen.catalogue,.screen.contact{display:flex; flex-direction:column}
  .news-img,.about-banner,.contact-img{height:auto; max-height:46vh}
  .about-body,.text-view,.text-view.has-side{display:flex; flex-direction:column; overflow:visible; height:auto}
  .about-portrait{max-height:40vh}
  .gallery{flex-wrap:wrap; padding-top:calc(2 * var(--u))}
  .gallery img{height:auto; max-height:70vh; width:auto}
  .opad-grid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:34vh}
  .text-view .side img{max-height:46vh}
  :root{--min-font:13px}
}