/* Le LAB présente deux concepts à l’échelle d’un écran, chacun avec sa propre
   identité (voir concepts.css). Ici : la section, les calques et le dialogue. */
section.lab {padding-bottom:100px}
section.lab .lab-heading {margin-bottom:74px;align-items:start}
section.lab .lab-heading h2 {font-size:clamp(66px,8.6vw,138px);line-height:.94;max-width:1000px}
section.lab .lab-heading h2 em {font-family:var(--serif);font-weight:400;letter-spacing:-.045em}
.lab-intro {max-width:44ch;margin-top:clamp(26px,3vw,40px);font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:#c8c5bd}
section.lab .lab-lottie {width:120px;height:120px;flex:0 0 auto;margin-top:54px}
.project-list {display:grid;grid-template-columns:minmax(0,1fr);gap:108px}
.project-list>article {min-width:0}
.project-topline {display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px;align-items:center;margin-bottom:20px;font-size:12px;letter-spacing:.035em;text-transform:uppercase;color:#c8c5bd}
.project-topline>span:first-child {display:flex;align-items:center;gap:18px}

.concept-surface {position:relative;overflow:hidden;isolation:isolate}
.concept-preview {display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid currentColor;text-align:left;font-size:13px;line-height:1.3;padding:16px 0;min-height:52px;width:100%;max-width:220px;margin-top:28px}
.concept-preview>span:last-child {font-size:25px;transition:transform .2s}
.concept-preview:hover>span:last-child,.concept-preview:focus-visible>span:last-child {transform:translate(4px,-4px)}
.project-media {position:relative;overflow:hidden;min-width:0}
.project-media .photo-frame {position:absolute;inset:-4%;overflow:hidden}
.photo-frame img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}

.project-food {margin-left:8.33%}
.photo-credit {display:block;font-size:10px;color:#a7a39b;margin-top:16px;line-height:1.5}
.photo-credit a {text-decoration:underline;text-underline-offset:3px}

/* L’aperçu agrandi reprend le vrai HTML de la maquette. Le dialogue natif
   garde Escape et le focus clavier. Aucun faux restaurant n’est publié. */
.concept-dialog {width:100%;height:100dvh;margin:0;padding:24px 40px;background:#191a17;color:var(--paper)}
.concept-dialog:not([open]) {display:none}
.concept-dialog .dialog-header {border-color:#55534e;position:relative;z-index:3}
.concept-dialog .preview-content {max-width:1180px;margin:32px auto 0}
.concept-dialog .preview-note {font-size:13px;margin-top:25px;max-width:620px;color:#c8c5bd}
.concept-dialog .preview-description {display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid #55534e;padding-top:28px;margin-top:28px}
.concept-dialog .preview-description h3 {font-family:var(--serif);font-size:46px;font-weight:400;line-height:1.05}
.concept-dialog .preview-description p {font-size:16px;color:#c8c5bd;line-height:1.55;max-width:600px}
.hero-letter.is-hot {color:var(--orange)}
.hero-letter {transition:color .18s}
@media (max-width:999px) {
  section.lab .lab-lottie {width:86px;height:86px;margin-top:32px}
  section.lab .lab-heading {gap:32px}
  section.lab .lab-heading h2 {font-size:clamp(64px,8.5vw,95px)}
  .project-food {margin-left:0}
  .project-list {gap:80px}
  
  .concept-dialog {padding:20px 28px}
}
@media (max-width:599px) {
  section.lab {padding-bottom:64px}
  section.lab .lab-heading {display:block;margin-bottom:44px}
  section.lab .lab-heading h2 {font-size:clamp(56px,16.5vw,82px)}
  .project-topline {font-size:10px;margin-bottom:14px;gap:12px}
  .project-topline>span:first-child {gap:12px}
  
  .project-list {gap:64px}
  .concept-dialog {padding:18px}
  .concept-dialog .preview-description {display:block;margin-top:24px}
  .concept-dialog .preview-description h3 {font-size:36px;margin-bottom:16px}
  .concept-dialog .preview-content {margin-top:24px}
}
/* Calques : trois interrupteurs. Le point se remplit quand le calque est
   actif; l’annotation reste aux couleurs de GR, par-dessus le concept. */
.layers {display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0}
.layers[hidden] {display:none}
.layers-label {margin-right:10px;font-size:12px;color:#a7a39b}
.layers button {display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 14px 0 12px;border:1px solid #6d6a63;color:var(--paper);font-size:13px;line-height:1;transition:background-color .25s,border-color .25s,color .25s}
.layers button::before {content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background-color .25s,box-shadow .25s,transform .5s var(--ease-out)}
.layers button:hover {border-color:var(--paper)}
.layers button[aria-pressed=true] {background:var(--orange);border-color:var(--orange);color:var(--ink)}
.layers button[aria-pressed=true]::before {background:var(--ink);box-shadow:none;transform:scale(1.2)}
.layers button:focus-visible {outline-color:var(--paper);outline-offset:3px}

.spec {position:absolute;inset:0;z-index:5;pointer-events:none}
.spec[hidden] {display:none}
.spec-grid {--spec-cols:12;--spec-gap:0px;--spec-inset:0px;display:grid;grid-template-columns:repeat(var(--spec-cols),minmax(0,1fr));column-gap:var(--spec-gap);padding-inline:var(--spec-inset)}
.spec-grid>i {background:rgba(255,79,32,.1);box-shadow:inset 1px 0 0 rgba(255,79,32,.75),inset -1px 0 0 rgba(255,79,32,.75)}
.spec-grid-label {position:absolute;left:0;top:0;transform:translate(var(--label-left,12px),var(--label-top,12px))}
.spec-grid-label::before {content:var(--spec-label);display:block;padding:5px 8px 4px;background:var(--orange);color:var(--ink);font:600 11px/1.2 var(--body);white-space:nowrap;animation:spec-label .6s .35s both}
@keyframes spec-label {from {opacity:0;transform:translateY(-6px)}}

/* Typo : cadre pointillé, point au coin, mesure au-dessus. */
.spec-mark {position:absolute;left:0;top:0}
.spec-box {position:absolute;inset:-5px;border:1px dashed var(--orange)}
.spec-mark>i {position:absolute;left:-9px;top:-9px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.spec-tag {position:absolute;left:-5px;bottom:calc(100% + 9px);translate:var(--tag-shift,0px) 0;padding:4px 7px 3px;background:var(--orange);color:var(--ink);font:600 10.5px/1.25 var(--body);letter-spacing:.005em;white-space:nowrap}
.spec-mark[data-align=end] .spec-tag {left:auto;right:-5px}
.spec-mark[data-align=end]>i {left:auto;right:-9px}
.spec-mark[data-place=below] .spec-tag {bottom:auto;top:calc(100% + 9px)}
.spec-mark[data-place=side] .spec-tag {left:calc(100% + 14px);right:auto;bottom:auto;top:50%;margin-top:calc(-.625em - 3.5px)}
/* Sans place autour du texte : l’étiquette se range dans le cadre, contre son bord. */
.spec-mark[data-place=top-in] .spec-tag {bottom:auto;top:-5px}
.spec-mark[data-place=bottom-in] .spec-tag {bottom:-5px}

/* Couleurs : le tiroir sous le concept et les épingles sur la photo. */
.spec-palette {color:var(--paper)}
.spec-palette[hidden] {display:none}
.spec-palette-inner {display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px clamp(32px,5vw,88px);padding:26px 0 22px;border-bottom:1px solid #3b3a36}
.spec-palette-title {font-size:12px;color:#a7a39b;margin-bottom:10px}
.spec-swatches {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.spec-swatch {display:grid;grid-template-columns:44px auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;min-height:56px;padding:6px 10px 6px 0}
.spec-swatch>i {grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(242,240,234,.22);transition:transform .45s var(--ease-out)}
.spec-swatch-name {align-self:end;font-size:14px;font-weight:600;line-height:1.2}
.spec-swatch-hex {align-self:start;min-width:7ch;font-size:12px;line-height:1.35;color:#c8c5bd;font-variant-numeric:tabular-nums}
.spec-swatch:hover>i {transform:scale(1.08)}
.spec-swatch:focus-visible {outline-offset:2px}
.spec-contrast {margin-top:8px;font-size:13px;line-height:1.45;color:#c8c5bd;max-width:44ch}
.spec-pin {position:absolute;z-index:3;width:0;height:0;pointer-events:none}
.spec-pin[hidden] {display:none}
.spec-pin>i {position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink),0 8px 22px rgba(0,0,0,.35);transition:transform .5s var(--ease-out),box-shadow .3s}
.spec-pin>span {position:absolute;left:22px;top:-10px;padding:4px 7px 3px;background:var(--ink);color:var(--paper);font:600 11px/1.2 var(--body);white-space:nowrap}
.spec-pin[data-side=start]>span {left:auto;right:22px}
.spec-pin.is-linked>i {transform:scale(1.4);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--orange),0 8px 22px rgba(0,0,0,.35)}


@media (max-width:599px) {
  .layers {width:100%}
  .layers-label {display:none}
  .layers button {flex:1;justify-content:center;min-height:44px;padding:0 10px}
  .spec-tag {font-size:9.5px}
  .spec-swatches {gap:2px 14px}
}
@media (prefers-reduced-motion:reduce) {.hero-letter {transition:none}}
html[data-motion=reduce] .hero-letter {transition:none}
html[data-motion=reduce] .spec-grid-label::before {animation:none}
html[data-motion=reduce] :is(.spec-pin>i,.spec-swatch>i) {transition:none}
html[data-motion=reduce] .layers button::before {transition:none}