/* Transposé de maquettes/tiroirs.css (révision 21, 10/09/2026). Adaptations : types de projet en cases à cocher */
/* One shared edge, from navigation and project captions to the footer. */
body[data-variant="tiroirs"] { --gutter: clamp(24px, 8vw, 176px); }
body[data-variant="tiroirs"] .wrap { padding-inline: var(--gutter); }
body[data-variant="tiroirs"] .footer { background: var(--paper); padding-top: 0; }
body[data-variant="tiroirs"] .footer > .wrap { position: relative; padding-top: 70px; }
body[data-variant="tiroirs"] .footer > .wrap::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
body[data-variant="tiroirs"] .contact { padding-block: 75px clamp(180px, 18vw, 280px); }
body[data-variant="tiroirs"] .site-header,
body[data-variant="tiroirs"] .site-header.over-hero { color: #000; mix-blend-mode: normal; }
body[data-variant="tiroirs"] .site-header [data-header-contrast] { position: relative; color: #000; }
.site-header .header-ink-white { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: flex; align-items: center; gap: inherit; color: #fff; pointer-events: none; user-select: none; clip-path: inset(100%); }
.site-header a:hover > .header-ink-white { text-decoration: underline; }
body[data-variant="tiroirs"].menu-open .header-ink-white { visibility: hidden; }
body[data-variant="tiroirs"] .project-3 { width: 84%; justify-self: center; }
body[data-variant="tiroirs"] .project-3 img { aspect-ratio: 1.95; object-fit: cover; object-position: 50% 75%; transform: none; }
body[data-variant="tiroirs"] .hero::after { background: rgb(36 29 22 / 16%); }
body[data-variant="tiroirs"] .hero-logo { color: #fff; }
body[data-variant="tiroirs"] .hero-logo .brand-a { justify-self: start; }
body[data-variant="tiroirs"] .brand-name > span { display: inline-block; }
.hero-logo.intro-pending .brand-tb,
.hero-logo.intro-pending .brand > .brand-a,
.hero-logo.intro-pending .brand-name { opacity: 0; }
.hero-logo.intro-playing .brand-tb,
.hero-logo.intro-playing .brand > .brand-a { animation: tba-initials-in .6s ease-in-out both; }
.hero-logo.intro-playing .brand-name {
  mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 90%, transparent 100%);
  mask-size: 200% 100%;
  -webkit-mask-size: 200% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  will-change: transform, opacity;
  animation: tba-word-glide 2s .08s cubic-bezier(.22,.61,.36,1) both,
             tba-word-opacity 2s .08s cubic-bezier(.55,0,.65,1) both,
             tba-word-unveil 2s .08s linear both;
}
@keyframes tba-initials-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tba-word-glide {
  from { transform: translate3d(0,-1em,0); }
  to { transform: translate3d(0,0,0); }
}
@keyframes tba-word-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes tba-word-unveil {
  from { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
  to { mask-position: 0% 0; -webkit-mask-position: 0% 0; }
}
body[data-variant="tiroirs"] .header-brand { line-height: 1; }
body[data-variant="tiroirs"] .header-brand .brand { grid-template-columns: repeat(3, max-content); grid-template-rows: 1em; }
body[data-variant="tiroirs"] .header-brand .brand-name { grid-column: 3; grid-row: 1; margin-left: .23em; transform: none; }
.story-stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(36px, 5vw, 100px);
}
.story-left { width: 100%; max-width: none; }
.story-right, .is-pinned .story-right {
  width: 100%; max-width: none; justify-self: stretch;
}
.story-images, .is-pinned .story-images {
  width: 100%; aspect-ratio: .82; max-height: none;
  background: var(--paper);
}
.story-actions { display: flex; justify-content: flex-end; gap: 24px; align-items: end; }
.story-next { width: 42px; height: 42px; display: grid; place-items: center; border-bottom: 1px solid var(--muted); }
.story-next .arrow { width: 24px; transition: transform .3s var(--ease); }
.story-next:hover .arrow { transform: translateX(4px); }
.agency-copy { grid-template-rows: 1fr; }
.agency-intro-inner { min-height: 0; overflow: hidden; }
.agency-intro-inner > p { font-size: 18px; line-height: 1.6; max-width: 48ch; }
.agency-facts { display: flex; gap: clamp(32px, 5vw, 84px); padding: 0; margin: 38px 0 40px; }
.agency-facts > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.agency-facts dt { font-size: 13px; font-weight: 300; color: var(--muted); }
.agency-facts dd { font-size: 54px; letter-spacing: -.035em; line-height: 1; font-weight: 300; margin: 0; font-variant-numeric: tabular-nums; }
.intro-approach { margin-bottom: 5px; }
.drawer-reveal { display: grid; grid-template-rows: 1fr; }
.drawer { min-height: 0; overflow: hidden; }
.drawer:not(:last-child), .drawer { border-bottom: 0; }
.drawer-reveal:last-child > .drawer { border-bottom: 1px solid var(--line); }
.drawer-toggle { font-size: clamp(19px, 1.55vw, 25px); padding-block: 24px; }
.drawer-copy p { max-width: 54ch; font-size: 16px; }
.accordion-story.is-pinned .story-stage {
  align-items: start;
  align-content: center;
  padding-block: 54px 65px;
}
.is-pinned .story-left { height: min(650px, calc(100svh - 160px)); }
.is-pinned .story-left > h2,
.is-pinned .story-stage.has-step .story-left > h2 { margin-bottom: 30px; }
.is-pinned .story-images { height: min(57svh, 600px); aspect-ratio: auto; }
.is-pinned .story-right { top: 0; margin-top: 0; }
/* Fixed layers: the same horizontal wipe crosses copy, image and caption. */
.story-scenes, .story-caption-scenes { display: none; }
.is-pinned .story-left { display: flex; flex-direction: column; }
.is-pinned .story-left > .agency-copy,
.is-pinned .story-left > .drawers { display: none; }
.is-pinned .story-left > h2 { flex: none; transition: none; }
.is-pinned .story-scenes { display: block; position: relative; flex: 1; min-height: 0; }
.is-pinned .story-scene { position: absolute; inset: 0; background: var(--paper); }
.is-pinned .story-scene .approach-home { margin-bottom: 16px; }
.is-pinned .story-scene .drawer-copy { transition: none; }
.is-pinned .story-scene .drawer:last-child { border-bottom: 1px solid var(--line); }
.is-pinned .story-scene .plus:after { transition: none; }
.is-pinned .story-image,
.is-pinned .story-image.is-active,
.is-pinned .story-scene,
.is-pinned .story-caption-scene {
  opacity: 1;
  transform: none;
  transition: none;
  z-index: var(--layer-order);
  clip-path: inset(clamp(0px, calc(var(--wipe-edge, 100vh) - var(--layer-top, 0px)), 100%) 0 0);
}
.is-pinned .story-caption { position: relative; }
.is-pinned .story-caption > span { visibility: hidden; }
.is-pinned .story-caption-scenes { display: block; position: absolute; inset: 0; }
.is-pinned .story-caption-scene { position: absolute; inset: 0; background: var(--paper); }
.is-pinned .story-caption { min-height: 40px; }
.is-pinned .story-right .text-link { margin-top: 18px; }

@media (min-width:1000px) and (max-height:800px) {
  .accordion-story.is-pinned .story-stage { padding-block: 54px 48px; }
  .is-pinned .story-left { height: calc(100svh - 120px); }
  .is-pinned .story-left > h2,
  .is-pinned .story-stage.has-step .story-left > h2 { margin-bottom: 22px; font-size: 46px; }
  .agency-intro-inner > p { font-size: 16px; line-height: 1.55; }
  .agency-facts { margin-block: 28px 30px; }
  .agency-facts dd { font-size: 44px; }
  .agency-facts dt { font-size: 12px; }
  .is-pinned .story-images { height: 56svh; }
  .is-pinned .approach-home { margin-bottom: 12px; }
  .is-pinned .drawer-toggle { font-size: 19px; padding-block: 12px; }
  .is-pinned .drawer-copy p { font-size: 14px; line-height: 1.5; padding-bottom: 14px; }
}
@media (max-width:999px) {
  .story-stage { gap: 5vw; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); }
  .agency-intro-inner > p { font-size: 16px; }
  .agency-facts { gap: 28px; }
  .agency-facts dd { font-size: 42px; }
  .agency-facts dt { font-size: 11px; }
  .drawer-toggle { font-size: 18px; }
  .story-right { top: 100px; }
}
@media (max-width:600px) {
  body[data-variant="tiroirs"] { --gutter: 24px; }
  .story-stage { display: flex; gap: 0; }
  .story-right { position: sticky; top: 0; max-width: none; margin-top: 0; }
  .story-images { height: 230px; aspect-ratio: auto; }
  .story-actions { display: none; }
  .agency-facts { margin-block: 28px; gap: 45px; }
  .agency-intro-inner > p { max-width: none; }
  .intro-approach { font-size: 13px; }
  .drawers { margin-top: 35px; }
  .drawers { scroll-margin-top: 295px; }
  .drawer-toggle { font-size: 19px; }
  .drawer-copy p { font-size: 15px; }
}

/* Both columns share a stable height across every stage of the approach. */
.is-pinned .story-left,
.is-pinned .story-images { height: var(--story-height, 650px); max-height: none; }
.is-pinned .drawer-toggle { padding-block: clamp(12px, calc(12px + (100svh - 600px) * .03333), 24px); }
.story-right .text-link { margin-top: 22px; }
.is-pinned .story-right .text-link { margin-top: 22px; }
@media (max-width:600px) {
  .drawer-toggle { padding-block: 23px; }
  .story-right { padding-bottom: 10px; }
  .drawers { scroll-margin-top: 255px; }
  body[data-variant="tiroirs"] .contact { padding-block: 48px 120px; }
  body[data-variant="tiroirs"] .footer > .wrap { padding-top: 40px; }
  body[data-variant="tiroirs"] .project-3 { width: 94%; margin-inline: auto; }
  body[data-variant="tiroirs"] .project-3 img { aspect-ratio: 1.45; }
}

.contact-dialog-form { width: min(620px, calc(100vw - 32px)); padding: 48px; max-height: calc(100svh - 32px); overflow-y: auto; }
.contact-dialog-form h2 { font-size: clamp(38px, 4vw, 54px); }
.contact-dialog-form > p { font-size: 15px; line-height: 1.5; margin-top: 18px; }
.project-contact-form { display: grid; gap: 22px; margin-top: 28px; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.project-contact-form label { display: grid; gap: 10px; font-size: 14px; }
.project-contact-form input, .project-contact-form textarea { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 9px 0; }
.project-contact-form textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.project-contact-form input:focus, .project-contact-form textarea:focus { outline: 1px solid var(--ink); outline-offset: 5px; }
.project-contact-form textarea::placeholder { color: var(--muted); }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-privacy, .form-preview-note { font-size: 11px; line-height: 1.5; color: var(--muted); }
.form-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.form-submit { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--ink); color: var(--paper); font-size: 15px; }
.form-submit .arrow { width: 23px; height: 23px; }
.form-submit:hover { background: #55483d; }
.form-submit:disabled { opacity: .6; cursor: wait; }
.form-status { font-size: 14px; line-height: 1.5; }
.form-phone { display: inline-block; margin-top: 24px; font-size: 13px; }
.contact-dialog-form [hidden] { display: none; }
@media (max-width:600px) {
  .contact-dialog-form { padding: 46px 24px 28px; }
  .contact-fields { grid-template-columns: 1fr; gap: 20px; }
  .project-contact-form { gap: 20px; }
}
@media (min-width:601px) {
  .story-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .story-right { order: 0; }
  .story-left { order: 1; }
}
.contact-dialog-form { padding-block: 38px; }
.contact-dialog-form h2 { font-size: 42px; }
.contact-dialog-form > p { margin-top: 12px; }
.project-contact-form { gap: 16px; margin-top: 22px; }
.project-contact-form textarea { min-height: 64px; }
.phone-field { position: relative; }
.project-contact-form .phone-field { display: block; }
.phone-field > span { font-size: 12px; color: var(--muted); }
.phone-field input { display: block; margin-top: 5px; }
.contact-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-choices legend { font-size: 14px; padding: 0; margin-bottom: 10px; }
.choice-options { display: flex; flex-wrap: wrap; gap: 8px; }
.project-contact-form .choice { display: block; position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.choice > span { display: block; padding: 9px 13px; font-size: 13px; line-height: 1.4; border: 1px solid var(--line); cursor: pointer; }
.choice input:checked + span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.choice:hover > span { border-color: var(--ink); }
.choice input:disabled + span { opacity: .6; cursor: wait; }
@media (max-width:600px) {
  .contact-dialog-form { padding-block: 44px 26px; }
  .contact-dialog-form h2 { font-size: 36px; }
  .contact-fields { gap: 14px; }
}

/* Compact contact form: all fields remain visible on laptop-height screens. */
.contact-dialog-form{width:min(700px,calc(100vw - 32px));padding:28px 36px}
.contact-dialog-form h2{font-size:36px;line-height:1.05}
.contact-dialog-form>p{font-size:14px;margin-top:9px}
.project-contact-form{gap:10px;margin-top:16px}
.project-contact-form label{gap:3px;font-size:13px}
.project-contact-form input:not([type=radio]):not([type=checkbox]){height:30px;padding:4px 0}
.project-contact-form textarea{min-height:44px;height:44px;padding:4px 0;line-height:1.35}
.phone-field input{margin-top:3px}
.contact-choices legend{font-size:13px;margin-bottom:6px}
.choice-options{gap:6px}
.choice>span{font-size:12px;padding:7px 10px}
.form-submit{min-height:42px;padding:9px 16px;font-size:14px}
.form-phone{margin-top:12px;font-size:12px}
.form-privacy,.form-preview-note{font-size:11px;line-height:1.4}
@media(min-width:601px) and (max-height:800px){.contact-dialog-form{padding-block:24px}.contact-dialog-form h2{font-size:32px}.project-contact-form{gap:8px;margin-top:14px}}
@media(max-width:600px){.contact-dialog-form{padding:46px 24px 24px}.contact-dialog-form h2{font-size:32px}.contact-fields{gap:10px}.choice>span{padding-block:9px}}