/* Atelier Digital TN — V8.16 — galerie études de cas raffinée */
html.layout-grid-modal-open,html.layout-grid-modal-open body{overflow:hidden}
.case-layout-grid-section{
  position:relative;
  padding:clamp(96px,9vw,144px) 0;
  background:#f4f5f2;
  color:#071018;
}
.case-layout-grid-head{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);
  gap:clamp(34px,6vw,88px);
  align-items:end;
  padding-bottom:clamp(34px,4vw,52px);
  margin-bottom:clamp(32px,4vw,48px);
  border-bottom:1px solid rgba(7,16,24,.13);
}
.case-layout-grid-head .section-index{display:block;margin:0 0 18px}
.case-layout-grid-head h2{
  margin:0;
  max-width:15ch;
  color:#071018;
  font-size:clamp(40px,4.8vw,68px);
  line-height:.98;
  letter-spacing:-.052em;
}
.case-layout-grid-head p{
  margin:0;
  max-width:58ch;
  color:#617077;
  font-size:14px;
  line-height:1.78;
}
.case-layout-grid{display:block}

/* La vue principale donne le rythme de la galerie. Aucune hauteur imposée. */
.case-gallery-feature,
.case-gallery-card{
  margin:0;
  min-width:0;
}
.layout-grid-trigger{
  appearance:none;
  display:block;
  width:100%;
  padding:0;
  border:0;
  color:inherit;
  background:transparent;
  text-align:left;
  cursor:zoom-in;
}
.case-gallery-feature .layout-grid-trigger{
  padding:clamp(12px,1.5vw,20px);
  border:1px solid rgba(7,16,24,.14);
  border-radius:24px;
  background:#071018;
  box-shadow:0 28px 72px rgba(7,16,24,.12);
}
.case-gallery-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  overflow:hidden;
  border-radius:16px;
  background:#0b151c;
}
.case-gallery-media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .3s ease;
}
.case-gallery-feature .case-gallery-media img{width:100%}
.case-gallery-caption{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:center;
  padding:18px 4px 2px;
  color:#fff;
}
.case-gallery-caption>div{display:flex;align-items:center;gap:14px;min-width:0}
.case-gallery-caption span{
  flex:0 0 auto;
  color:#72ad9a;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
}
.case-gallery-caption strong{
  min-width:0;
  color:inherit;
  font-size:14px;
  line-height:1.35;
  font-weight:760;
}
.case-gallery-caption small{
  color:#9fadb3;
  font-size:10px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.11em;
  white-space:nowrap;
}
.case-gallery-caption i{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#fff;
  font-style:normal;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}

/* Secondaires : simples planches éditoriales, pas de faux bento. */
.case-gallery-secondary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,34px);
  margin-top:clamp(26px,3vw,38px);
  align-items:start;
}
.case-gallery-card .layout-grid-trigger{
  padding:10px;
  border:1px solid rgba(7,16,24,.12);
  border-radius:19px;
  background:#fff;
  box-shadow:0 10px 32px rgba(7,16,24,.045);
  transition:border-color .25s ease,box-shadow .25s ease,transform .3s cubic-bezier(.22,.8,.24,1);
}
.case-gallery-card .case-gallery-media{
  border-radius:12px;
  background:#eef1ee;
}
.case-gallery-card .case-gallery-caption{
  grid-template-columns:1fr auto;
  padding:15px 7px 5px;
  color:#071018;
}
.case-gallery-card .case-gallery-caption small{display:none}
.case-gallery-card .case-gallery-caption i{
  width:30px;height:30px;
  border-color:rgba(7,16,24,.13);
  color:#071018;
}
@media(hover:hover) and (pointer:fine){
  .case-gallery-feature .layout-grid-trigger:hover .case-gallery-media img{transform:scale(1.006)}
  .case-gallery-card .layout-grid-trigger:hover{
    transform:translateY(-4px);
    border-color:rgba(79,139,121,.36);
    box-shadow:0 18px 44px rgba(7,16,24,.075);
  }
  .case-gallery-card .layout-grid-trigger:hover .case-gallery-caption i,
  .case-gallery-feature .layout-grid-trigger:hover .case-gallery-caption i{background:#fff;color:#071018;transform:translate(1px,-1px)}
}
.layout-grid-trigger:focus-visible{outline:3px solid #4f8b79;outline-offset:5px;border-radius:20px}

/* Viewer : sobre, focalisé sur l'image. */
.layout-grid-dialog{
  width:min(96vw,1540px);
  max-width:none;
  height:auto;
  max-height:94vh;
  padding:0;
  border:0;
  border-radius:22px;
  overflow:hidden;
  color:#fff;
  background:#071018;
  box-shadow:0 42px 130px rgba(0,0,0,.58);
  opacity:0;
  transform:scale(.982) translateY(8px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,.8,.24,1);
}
.layout-grid-dialog.is-open{opacity:1;transform:none}
.layout-grid-dialog::backdrop{
  background:rgba(1,6,9,.82);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .2s ease;
}
.layout-grid-dialog.is-open::backdrop{opacity:1}
.layout-grid-dialog-inner{display:flex;flex-direction:column;max-height:94vh;min-height:0}
.layout-grid-dialog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:15px 18px 15px 22px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:#08131a;
}
.layout-grid-dialog-copy{min-width:0}
.layout-grid-dialog-copy strong{display:block;color:#fff;font-size:14px;line-height:1.3;font-weight:760}
.layout-grid-dialog-copy span{display:block;margin-top:4px;color:#79ad9d;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
.layout-grid-close{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 8px 0 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#fff;
  background:#111d25;
  font:inherit;
  font-size:11px;
  font-weight:760;
  cursor:pointer;
}
.layout-grid-close b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#071018;font-size:18px;font-weight:500;line-height:1}
.layout-grid-close:hover{border-color:rgba(255,255,255,.34)}
.layout-grid-close:focus-visible{outline:3px solid #79b6a2;outline-offset:3px}
.layout-grid-dialog-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  flex:1;
  padding:clamp(10px,2vw,28px);
  overflow:auto;
  background:#040b10;
}
.layout-grid-dialog-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(94vh - 100px);
  object-fit:contain;
  object-position:center;
  user-select:none;
}

@media(max-width:900px){
  .case-layout-grid-head{grid-template-columns:1fr;gap:18px}
  .case-layout-grid-head h2{max-width:17ch}
  .case-gallery-secondary{grid-template-columns:1fr}
  .case-gallery-caption small{white-space:normal;text-align:right}
}
@media(max-width:620px){
  .case-layout-grid-section{padding:78px 0}
  .case-layout-grid-head{padding-bottom:28px;margin-bottom:26px}
  .case-layout-grid-head h2{font-size:clamp(36px,12vw,50px)}
  .case-layout-grid-head p{font-size:13px}
  .case-gallery-feature .layout-grid-trigger{padding:8px;border-radius:17px}
  .case-gallery-media{border-radius:11px}
  .case-gallery-caption{grid-template-columns:1fr auto;padding:14px 5px 3px}
  .case-gallery-feature .case-gallery-caption small{display:none}
  .case-gallery-card .layout-grid-trigger{padding:7px;border-radius:15px}
  .case-gallery-caption strong{font-size:12px}
  .case-gallery-caption span{font-size:9px}
  .layout-grid-dialog{width:97vw;max-height:92vh;border-radius:15px}
  .layout-grid-dialog-toolbar{gap:12px;padding:11px 10px 11px 14px}
  .layout-grid-dialog-copy strong{font-size:12px}
  .layout-grid-close{min-height:40px;padding-left:12px}
  .layout-grid-close span{display:none}
  .layout-grid-dialog-stage{padding:8px}
  .layout-grid-dialog-stage img{max-height:calc(92vh - 78px)}
}
@media(prefers-reduced-motion:reduce){
  .case-gallery-media img,.case-gallery-card .layout-grid-trigger,.case-gallery-caption i,.layout-grid-dialog{transition:none!important}
  .case-gallery-card .layout-grid-trigger:hover{transform:none}
}