/* Le carnet de chantier : une liste, deux cadrages et des volets qui s'ouvrent. */
.atelier{padding-top:32px;padding-bottom:65px;overflow:clip}
.atelier-topline{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);padding:24px 0 48px}
.atelier-topline>span{font-size:9px;letter-spacing:.12em}
.atelier-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.5fr);gap:6%}
.atelier-index h2{font-size:clamp(36px,3.9vw,62px);line-height:1.04;letter-spacing:-.055em;margin:0 0 25px}
.atelier-index h2 span{color:var(--brand-violet)}
.atelier-intro{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:40px}
.atelier-nav{display:none}
.atelier-ready .atelier-nav{display:flex;flex-direction:column}
.atelier-nav button{display:flex;align-items:center;gap:20px;position:relative;width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;padding:24px 8px 24px 0;cursor:pointer;transition:background .25s,color .25s}
.atelier-nav button:last-child{border-bottom:1px solid var(--line)}
.atelier-nav button:before{content:'';position:absolute;left:-13px;width:3px;height:0;background:var(--accent);transition:height .4s var(--ease)}
.atelier-nav button[aria-pressed=true]{color:var(--brand-violet)}
.atelier-nav button[aria-pressed=true]:before{height:60%}
.atelier-nav button:disabled{opacity:.4;cursor:default}
.atelier-nav-number{font-family:Bricolage,sans-serif;font-weight:600;font-size:52px;line-height:1;letter-spacing:-.08em}
.atelier-nav-label{font-family:Bricolage,sans-serif;font-size:24px;line-height:1.08;letter-spacing:-.04em}
.atelier-nav-label small{display:block;font-family:Onest,sans-serif;font-size:11px;letter-spacing:0;font-weight:400;margin-top:8px;color:var(--muted)}
.atelier-nav-arrow{margin-left:auto;font-size:26px;transform:translate(-3px,3px);transition:transform .35s var(--ease)}
.atelier-nav button[aria-pressed=true] .atelier-nav-arrow{transform:translate(0,0);color:var(--accent-text)}
.atelier-index-foot{margin-top:42px;font-size:9px;letter-spacing:.15em;display:flex;align-items:center;justify-content:space-between}
.atelier-index-foot span{font-size:42px;line-height:1;color:var(--accent)}
.atelier-panel{scroll-margin-top:120px;margin-bottom:60px}
.atelier-ready .atelier-panel{margin-bottom:0}
.atelier-panel[hidden]{display:none}
.atelier-panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:23px}
.atelier-panel-head .eyebrow{font-size:9px;letter-spacing:.1em}
.atelier-panel-head .tiny{font-size:8px;letter-spacing:.08em;text-align:right}
.atelier-plate{position:relative;height:clamp(360px,39vw,540px);padding:20px 35px 45px 20px;background-color:var(--soft);background-image:linear-gradient(#2c3e500b 1px,transparent 1px),linear-gradient(90deg,#2c3e500b 1px,transparent 1px);background-size:28px 28px;margin-bottom:40px;isolation:isolate}
.atelier-main-photo{position:relative;display:block;width:94%;height:100%;overflow:hidden;background:var(--soft)}
.atelier-main-photo>img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.atelier-main-photo:hover>img{transform:scale(1.025)}
.atelier-expand{position:absolute;left:18px;bottom:18px;background:var(--paper);color:var(--ink);font-size:11px;display:flex;align-items:center;gap:24px;padding:13px 17px;border-radius:2px;transition:background .25s}
.atelier-expand i{font-size:22px;font-style:normal;color:var(--brand-violet)}
.atelier-main-photo:hover .atelier-expand{background:var(--accent)}
.atelier-detail-photo{position:absolute;right:-5px;bottom:-24px;width:32%;height:45%;padding:7px 7px 0;background:var(--paper);box-shadow:0 8px 30px #1a1a2e20;transform:rotate(3deg);transition:transform .4s var(--ease);z-index:2}
.atelier-detail-photo:hover{transform:rotate(0) translateY(-6px)}
.atelier-detail-photo img{width:100%;height:calc(100% - 30px);object-fit:cover}
.atelier-detail-photo>span{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:7px;letter-spacing:.03em;height:30px}
.atelier-detail-photo i{font-size:19px;font-style:normal}
.atelier-shutters{display:flex;position:absolute;inset:0;pointer-events:none}
.atelier-shutters i{flex:1;transform:scaleX(0);transform-origin:right;background:var(--brand-violet)}
.atelier-shutters i:nth-child(2){background:var(--brand-blue)}
.atelier-shutters i:nth-child(3){background:var(--accent)}
.atelier-panel.entering .atelier-shutters i{animation:atelier-shutter .68s var(--ease) both}
.atelier-panel.entering .atelier-shutters i:nth-child(2){animation-delay:.055s}
.atelier-panel.entering .atelier-shutters i:nth-child(3){animation-delay:.11s}
.atelier-panel.entering .atelier-main-photo>img{animation:atelier-image .85s var(--ease) both}
.atelier-panel.entering .atelier-detail-photo{animation:atelier-detail .7s .15s var(--ease) both}
.atelier-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
.atelier-caption p{font-size:12px;line-height:1.8;max-width:330px;color:var(--muted)}
.atelier-caption .text-link{font-size:10px;white-space:nowrap;margin-top:3px}
.atelier-pagination{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding-top:16px}
.atelier-pagination[hidden]{display:none}
.atelier-pagination>span{font-size:9px;letter-spacing:.03em}
.atelier-pagination>div{display:flex;gap:9px}
.atelier-pagination button{width:44px;height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:23px;cursor:pointer}
.atelier-pagination button:hover:not(:disabled){background:var(--accent)}
.atelier-pagination button:disabled{opacity:.28;cursor:default}
@keyframes atelier-shutter{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes atelier-image{from{transform:scale(1.065);filter:saturate(.65)}to{transform:scale(1);filter:saturate(1)}}
@keyframes atelier-detail{from{opacity:0;transform:rotate(-3deg) translate(20px,20px)}to{opacity:1;transform:rotate(3deg) translate(0,0)}}

/* Vue complète : grand cadre clair et pellicule numérotée, sans empilement. */
#gallery-dialog{width:1440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:2px}
#gallery-dialog[open]{animation:none}
#gallery-dialog .gallery-shell{padding:24px}
#gallery-dialog .gallery-top{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:24px}
#gallery-dialog .gallery-layout{grid-template-columns:minmax(0,1.9fr) minmax(220px,.8fr);gap:32px}
#gallery-dialog .gallery-photo{height:min(65dvh,650px);min-height:300px;padding:26px 26px 72px;background-color:var(--soft);background-image:linear-gradient(#2c3e500b 1px,transparent 1px),linear-gradient(90deg,#2c3e500b 1px,transparent 1px);background-size:32px 32px;touch-action:pan-y}
#gallery-image{object-fit:contain;width:100%;height:100%;max-height:100%;animation:none;will-change:auto}
#gallery-dialog .gallery-controls{background:transparent;bottom:8px;height:56px}
#gallery-dialog .gallery-controls button{width:44px;height:44px;border-radius:0}
#gallery-dialog .gallery-info h2{font-size:clamp(28px,3.2vw,45px);letter-spacing:-.05em;line-height:1.08}
#gallery-dialog .gallery-info>p{font-size:12px}
#gallery-thumbnails{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
#gallery-thumbnails button{position:relative;width:66px;height:auto;overflow:hidden;border:1px solid transparent;padding:3px 3px 20px;background:var(--paper);border-radius:0}
#gallery-thumbnails .gallery-thumb-photo{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden}
#gallery-thumbnails img{width:100%;height:100%;object-fit:cover}
#gallery-thumbnails button:after{content:attr(data-number);position:absolute;bottom:2px;left:5px;font-size:9px;color:var(--muted)}
#gallery-thumbnails button[aria-pressed=true]{border-color:var(--brand-violet);background:var(--soft)}
#gallery-dialog .gallery-contact{margin-top:25px;font-size:11px;padding:15px 18px}

@media(max-width:900px){
  .atelier-layout{grid-template-columns:1fr 1.5fr;gap:35px}
  .atelier-nav-number{font-size:42px}.atelier-nav-label{font-size:21px}
  .atelier-panel-head{align-items:flex-start}.atelier-panel-head .tiny{max-width:105px}
  .atelier-caption{flex-direction:column;gap:8px}.atelier-caption p{max-width:none}
  #gallery-dialog .gallery-layout{gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(200px,.8fr)}
}
@media(max-width:700px){
  .atelier{padding-top:10px;padding-bottom:35px}
  .atelier-topline{padding:20px 0 30px}.atelier-topline>span{font-size:7px;text-align:right;max-width:95px}
  .atelier-layout{grid-template-columns:1fr;gap:28px}
  .atelier-index h2{font-size:43px;margin-bottom:16px}.atelier-intro{margin-bottom:24px;font-size:11px}
  .atelier-ready .atelier-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .atelier-nav button{padding:15px 10px;gap:9px;flex-direction:column;align-items:flex-start;border:1px solid var(--line);min-height:122px}
  .atelier-nav button:last-child{border:1px solid var(--line)}
  .atelier-nav button[aria-pressed=true]{background:var(--soft);border-bottom:3px solid var(--accent)}
  .atelier-nav button:before,.atelier-nav-arrow,.atelier-index-foot{display:none}
  .atelier-nav-number{font-size:29px}.atelier-nav-label{font-size:17px;letter-spacing:-.03em}
  .atelier-nav-label small{font-size:8px;margin-top:7px;line-height:1.4}
  .atelier-panel-head{padding-bottom:15px}.atelier-panel-head .eyebrow{font-size:8px}.atelier-panel-head .tiny{font-size:7px;max-width:100px}
  .atelier-plate{height:340px;padding:12px 18px 30px 12px;margin-bottom:45px}
  .atelier-main-photo{width:94%}.atelier-expand{left:10px;bottom:13px;font-size:10px;padding:11px;gap:15px}
  .atelier-detail-photo{width:36%;height:38%;right:0;bottom:-23px;padding:5px 5px 0}
  .atelier-detail-photo>span{font-size:5px;gap:3px}.atelier-detail-photo i{font-size:15px}
  .atelier-caption p{font-size:11px}.atelier-pagination{margin-top:20px}
  #gallery-dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  #gallery-dialog .gallery-shell{padding:16px}
  #gallery-dialog .gallery-top{padding-bottom:12px;margin-bottom:16px}
  #gallery-dialog .gallery-layout{grid-template-columns:1fr;gap:22px}
  #gallery-dialog .gallery-photo{height:48dvh;min-height:270px;padding:14px 14px 70px}
  #gallery-dialog .gallery-info h2{font-size:30px}#gallery-thumbnails{margin-top:15px}
}
@media(prefers-reduced-motion:reduce){
  .atelier *{animation:none!important;transition:none!important}
}
@media print{.atelier-nav,.atelier-pagination,.atelier-shutters,.atelier-expand{display:none!important}.atelier-ready .atelier-panel[hidden]{display:block!important}.atelier-layout{display:block}.atelier-plate{break-inside:avoid}}