/* AKG · Les transformations comme parcours · 31 octobre 2026 */
:root { --exp-yellow: var(--brand); --exp-rule: color-mix(in oklch,var(--paper) 25%,transparent); }
.photo-window { display:block; width:100%; height:100%; overflow:hidden; background:var(--ink-soft); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { border-bottom:1px solid oklch(98% .008 90 / .12); background:var(--ink); }
.site-logo { --logo-h:60px; }
.site-header__inner { min-height:70px; }
.experience-hero { padding-top:var(--header-h); background:var(--ink); color:var(--paper); }
.experience-hero__grid { display:grid; grid-template-columns:46% 54%; min-height:min(710px,calc(100svh - var(--header-h))); }
.experience-hero__copy { padding:clamp(40px,5vw,80px) clamp(30px,4vw,65px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; position:relative; z-index:2; }
.experience-hero__kicker { color:var(--brand); font-size:12px; font-weight:700; margin-bottom:24px; }
.experience-hero h1 { font-size:clamp(48px,5.4vw,86px); font-weight:700; line-height:1.01; letter-spacing:-.055em; max-width:13ch; text-wrap:pretty; }
.experience-hero h1 span { color:var(--brand); }
.experience-hero__intro { color:var(--mute); font-size:17px; max-width:39ch; margin:25px 0; }
.experience-hero .btn { min-height:54px; font-size:15px; }
.experience-hero .text-link { color:var(--paper); font-size:13px; }
.experience-hero__reassurance { font-size:12px; color:var(--mute); margin-top:22px; }
.experience-hero__reassurance span + span::before { content:'·'; margin:0 10px; }
.experience-hero__visual { min-width:0; display:flex; flex-direction:column; position:relative; }
.experience-hero__visual .compare-scene { flex:1; min-height:520px; }
.experience-hero__caption { padding:17px 24px; background:var(--brand); color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:12px; }
.experience-hero__caption a { font-weight:700; text-decoration:underline; text-underline-offset:4px; min-height:30px; display:flex; align-items:center; white-space:nowrap; }
.compare-scene { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--ink-soft); --position:35%; }
.compare-scene__layer { position:absolute; inset:0; }
.compare-scene__after { clip-path:inset(0 0 0 var(--position)); }
.compare-scene__line { position:absolute; top:0; bottom:0; left:var(--position); width:2px; background:var(--paper); pointer-events:none; z-index:3; }
.compare-scene__line::after { content:'↔'; display:grid; place-items:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; background:var(--brand); color:var(--ink); border:1px solid var(--ink); border-radius:50%; font-size:23px; }
.compare-scene__range { appearance:none; position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; touch-action:pan-y; }
.compare-scene:has(input:focus-visible) { outline:3px solid var(--brand); outline-offset:4px; }
.compare-scene__labels { position:absolute; inset:18px 18px auto; display:flex; justify-content:space-between; gap:12px; z-index:2; pointer-events:none; }
.compare-scene__labels span { background:var(--ink); color:var(--paper); font-size:11px; font-weight:700; padding:7px 11px; }
.compare-scene__guide { position:absolute; bottom:18px; left:18px; right:18px; text-align:center; z-index:2; pointer-events:none; color:var(--paper); font-size:11px; text-shadow:0 1px 4px var(--ink); }
.compare-actions { display:flex; gap:8px; position:absolute; bottom:18px; left:18px; z-index:5; }
.compare-actions button { background:var(--paper); color:var(--ink); font-size:12px; font-weight:700; min-height:40px; padding:10px 14px; border:1px solid var(--ink); }
.compare-actions button[aria-pressed="true"] { background:var(--brand); }
.experience-strip { background:var(--paper-soft); border-bottom:1px solid var(--line); }
.experience-strip__inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; padding-block:23px; font-size:13px; }
.experience-strip strong { color:var(--ink); font-size:15px; }
.experience-strip span { color:var(--mute-soft); }
.experience-section { padding-block:clamp(64px,8vw,120px); }
.experience-heading { display:grid; grid-template-columns:1.1fr .8fr; align-items:end; gap:70px; margin-bottom:42px; }
.experience-heading h2 { font-size:clamp(34px,4.2vw,62px); font-weight:700; line-height:1.04; letter-spacing:-.045em; max-width:20ch; }
.experience-heading p { color:var(--mute-soft); font-size:16px; max-width:47ch; }
.experience-heading .eyebrow { margin-bottom:14px; color:var(--mute-soft); }
.need-explorer { display:grid; grid-template-columns:.62fr 1.38fr; gap:44px; align-items:start; }
.need-tabs { display:flex; flex-direction:column; border-top:1px solid var(--line-strong); }
.need-tab { text-align:left; padding:23px 20px 23px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:24px 1fr 18px; gap:12px; align-items:start; }
.need-tab__number { color:var(--mute-soft); font-size:12px; padding-top:5px; }
.need-tab strong { font-size:22px; line-height:1.18; font-weight:700; letter-spacing:-.025em; display:block; }
.need-tab small { display:block; margin-top:9px; font-size:13px; line-height:1.5; color:var(--mute-soft); max-width:24ch; }
.need-tab[aria-selected="true"] { background:var(--brand); padding-left:18px; padding-right:18px; border-color:var(--ink); }
.need-tab__arrow { font-size:20px; }
.need-tab[aria-selected="true"] .need-tab__number,.need-tab[aria-selected="true"] small { color:var(--ink); }
.need-panel { min-width:0; }
.js .need-panel[hidden] { display:none; }
.need-panel__photo { aspect-ratio:1.65; }
.need-panel__body { padding-top:23px; display:grid; grid-template-columns:1fr auto; gap:22px; align-items:start; }
.need-panel h3 { font-size:27px; font-weight:700; line-height:1.15; letter-spacing:-.03em; }
.need-panel p { font-size:15px; color:var(--mute-soft); margin-top:12px; max-width:52ch; }
.need-panel .text-link { margin-top:10px; }
.need-panel__actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.site-proof { background:var(--ink); color:var(--paper); padding-block:clamp(60px,7vw,100px); }
.site-proof__grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:70px; }
.site-proof__image { aspect-ratio:1.6; position:relative; }
.site-proof__image::after { content:'AKG BÂTIMENT, sur le chantier.'; position:absolute; bottom:16px; left:16px; color:var(--ink); background:var(--brand); padding:9px 12px; font-size:11px; font-weight:700; }
.site-proof h2 { font-size:clamp(32px,3.8vw,54px); font-weight:700; line-height:1.06; letter-spacing:-.035em; }
.site-proof p { color:var(--mute); max-width:44ch; font-size:16px; margin-block:22px; }
.site-proof .text-link { color:var(--paper); }
.proof-points { display:flex; flex-wrap:wrap; gap:10px 24px; color:var(--brand); font-size:12px; margin-top:22px; }
.project-selection { display:grid; grid-template-columns:1.25fr 1fr; gap:38px; }
.project-teaser { display:block; min-width:0; }
.project-teaser:nth-child(2) { margin-top:80px; }
.project-teaser__image { aspect-ratio:1.5; overflow:hidden; }
.project-teaser__image svg { transition:transform 500ms var(--ease); }
.project-teaser:hover svg { transform:scale(1.025); }
.project-teaser__meta { display:flex; justify-content:space-between; gap:15px; margin-top:17px; font-size:12px; color:var(--mute-soft); }
.project-teaser h3 { font-size:clamp(23px,2.8vw,36px); font-weight:700; line-height:1.12; letter-spacing:-.035em; margin-top:10px; max-width:24ch; }
.project-teaser p { font-size:14px; color:var(--mute-soft); margin-top:10px; max-width:50ch; }
.experience-more { margin-top:40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.experience-more p { max-width:48ch; font-size:15px; color:var(--mute-soft); }
.lead-reassurance { display:flex; flex-wrap:wrap; gap:10px 25px; font-size:12px; margin-top:24px; color:var(--brand); }
.lead-context { margin-bottom:22px; background:var(--paper); color:var(--ink); padding:16px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.lead-context span { display:block; color:var(--mute-soft); font-size:11px; margin-bottom:5px; }
.lead-context strong { font-size:15px; line-height:1.35; }
.lead-context button { min-height:44px; padding-left:14px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.form__legal { margin-top:22px; font-size:12px; max-width:60ch; }
.project-form fieldset { scroll-margin-top:calc(var(--header-h) + 24px); }
.project-hero { padding-top:calc(var(--header-h) + 54px); padding-bottom:40px; }
.project-hero__top { display:flex; justify-content:space-between; align-items:center; gap:22px; margin-bottom:28px; }
.project-hero__top a { font-size:13px; min-height:40px; display:flex; align-items:center; }
.project-hero__head { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:end; }
.project-hero h1 { font-size:clamp(42px,5.3vw,78px); font-weight:700; letter-spacing:-.045em; line-height:1.03; max-width:17ch; }
.project-hero__intro { color:var(--mute-soft); font-size:17px; max-width:44ch; margin-bottom:22px; }
.project-hero__visual { margin-top:40px; }
.project-hero__visual .compare-scene { aspect-ratio:1.8; }
.project-observations { display:grid; grid-template-columns:1fr 1fr; gap:60px; border-top:1px solid var(--line); padding-top:30px; margin-top:30px; }
.project-observations span { color:var(--mute-soft); font-size:12px; }
.project-observations h2 { font-size:26px; line-height:1.15; font-weight:700; margin-top:10px; }
.project-observations p { max-width:58ch; font-size:15px; color:var(--mute-soft); margin-top:14px; }
.project-angles { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.project-angles figure { margin:0; }
.project-angles__image { aspect-ratio:1.35; }
.project-angles figcaption { margin-top:12px; font-size:13px; color:var(--mute-soft); }
.project-bridge { display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; padding-block:42px; border-block:1px solid var(--line); }
.project-bridge h2 { font-size:clamp(28px,3vw,42px); line-height:1.1; font-weight:700; letter-spacing:-.03em; max-width:24ch; }
.project-bridge p { color:var(--mute-soft); font-size:15px; margin-top:12px; max-width:58ch; }
.project-index { display:grid; grid-template-columns:1fr 1fr; gap:50px 35px; }
.project-index .project-teaser:nth-child(2) { margin-top:0; }
.project-index .project-teaser__image { aspect-ratio:1.45; }
.project-index .project-teaser { border-top:1px solid var(--line); padding-top:18px; }
.project-phase { position:relative; background:var(--ink); }
.project-phase__photo { aspect-ratio:1.8; }
.phase-controls { display:flex; gap:10px; padding:16px; background:var(--ink); }
.phase-controls button { background:var(--paper); color:var(--ink); padding:10px 18px; min-height:44px; font-size:13px; font-weight:700; }
.phase-controls button[aria-pressed="true"] { background:var(--brand); }
.phase-note { color:var(--mute-soft); font-size:12px; margin-top:10px; }
.bottom-bar { grid-template-columns:1fr 1.2fr; padding-inline:10px; }
.bottom-bar__item { flex-direction:row; gap:10px; font-size:12px; padding:10px; }
.bottom-bar__item span:last-child { font-size:12px; text-transform:none; letter-spacing:0; }
@media (max-width:1100px) {
  .experience-hero__copy { padding:38px 30px; }
  .experience-hero h1 { font-size:clamp(44px,5.5vw,60px); }
  .experience-hero__intro { font-size:16px; }
  .experience-hero__visual .compare-scene { min-height:580px; }
  .experience-hero__caption { flex-direction:column; align-items:flex-start; gap:4px; padding:14px 18px; }
  .need-explorer { grid-template-columns:.65fr 1.35fr; gap:28px; }
  .need-tab strong { font-size:19px; }
  .need-panel__body { grid-template-columns:1fr; }
  .need-panel__actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
  .site-proof__grid { gap:40px; }
}
@media (max-width:767px) {
  .site-logo { --logo-h:56px; }
  .experience-hero__grid { grid-template-columns:1fr; min-height:0; }
  .experience-hero__visual { order:0; }
  .experience-hero__visual .compare-scene { flex:none; min-height:0; height:320px; aspect-ratio:auto; }
  .experience-hero__copy { order:1; padding:26px 22px 32px; }
  .experience-hero h1 { font-size:clamp(42px,10.5vw,65px); max-width:17ch; }
  .experience-hero__kicker { font-size:11px; margin-bottom:15px; }
  .experience-hero__intro { margin-block:18px; font-size:15px; max-width:46ch; }
  .experience-hero .button-row { gap:12px 22px; }
  .experience-hero .btn { min-height:49px; padding:13px 18px; font-size:14px; }
  .experience-hero .text-link { min-height:38px; font-size:12px; }
  .experience-hero__reassurance { margin-top:17px; font-size:11px; }
  .experience-hero__caption { flex-direction:row; align-items:center; padding:11px 16px; font-size:10px; }
  .experience-hero__caption span { max-width:20ch; }
  .compare-scene__labels { inset:12px 12px auto; }
  .compare-scene__labels span { font-size:10px; padding:6px 9px; }
  .compare-actions { bottom:12px; left:12px; }
  .compare-actions button { padding:8px 11px; min-height:38px; font-size:11px; }
  .compare-scene__line::after { width:42px; height:42px; }
  .experience-strip__inner { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:11px; }
  .experience-strip strong { font-size:13px; }
  .experience-strip__inner span:last-child { display:none; }
  .experience-heading { grid-template-columns:1fr; gap:20px; margin-bottom:30px; }
  .experience-heading h2 { font-size:36px; }
  .experience-heading p { font-size:15px; }
  .need-explorer { grid-template-columns:1fr; gap:24px; }
  .need-tabs { flex-direction:row; overflow-x:auto; gap:8px; border:0; padding-bottom:6px; scroll-snap-type:x proximity; }
  .need-tab { border:1px solid var(--line); flex:0 0 76%; padding:17px 14px; gap:8px; grid-template-columns:18px 1fr 15px; scroll-snap-align:start; }
  .need-tab[aria-selected="true"] { padding:17px 14px; }
  .need-tab strong { font-size:18px; }
  .need-tab small { font-size:12px; }
  .need-panel__photo { aspect-ratio:1.3; }
  .need-panel__body { gap:16px; padding-top:20px; }
  .need-panel h3 { font-size:26px; }
  .site-proof__grid { grid-template-columns:1fr; gap:30px; }
  .site-proof__image { aspect-ratio:1.3; }
  .site-proof h2 { font-size:35px; }
  .site-proof p { font-size:15px; }
  .project-selection,.project-index { grid-template-columns:1fr; gap:35px; }
  .project-teaser:nth-child(2) { margin-top:0; }
  .project-teaser__image { aspect-ratio:1.35; }
  .experience-more { margin-top:28px; }
  .project-hero { padding-top:calc(var(--header-h) + 26px); padding-bottom:24px; }
  .project-hero__top { margin-bottom:24px; font-size:11px; }
  .project-hero__head { grid-template-columns:1fr; gap:20px; }
  .project-hero h1 { font-size:43px; max-width:18ch; }
  .project-hero__intro { font-size:16px; margin-bottom:18px; }
  .project-hero__visual { margin-top:28px; }
  .project-hero__visual .compare-scene,.project-phase__photo { aspect-ratio:1.25; }
  .project-observations { grid-template-columns:1fr; gap:25px; }
  .project-observations h2 { font-size:24px; }
  .project-angles { grid-template-columns:1fr; gap:28px; }
  .project-bridge { grid-template-columns:1fr; gap:22px; padding-block:30px; }
  .lead-context { grid-template-columns:1fr; gap:8px; }
  .lead-context button { justify-self:start; padding-left:0; }
}
@media (max-width:360px) {
  .experience-hero__visual .compare-scene { height:260px; }
  .experience-hero h1 { font-size:40px; }
  .experience-hero__reassurance span { display:block; }
  .experience-hero__reassurance span + span::before { content:none; }
  .experience-hero__caption { font-size:10px; gap:10px; }
}
@media (prefers-reduced-motion:no-preference) {
  .experience-hero h1 { animation:hero-type-in 650ms var(--ease) both; }
  @keyframes hero-type-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } }
}
html:not(.js) .need-tabs,html:not(.js) .compare-actions,html:not(.js) .phase-controls { display:none; }
html:not(.js) .need-panel { margin-bottom:40px; }

.need-panel__photo .compare-scene { height:100%;aspect-ratio:auto; }
.need-panel__photo:has(.project-phase) { aspect-ratio:auto; }
.need-panel__photo .project-phase__photo { aspect-ratio:1.65; }
.real-card__media .photo-window { height:100%; }
.archive-set { border-block:1px solid var(--line);padding-block:20px; }
.archive-set>summary { cursor:pointer;font-size:20px;font-weight:700;display:flex;justify-content:space-between;gap:20px;min-height:44px;align-items:center; }
.archive-set[open]>summary { margin-bottom:32px; }
html:not(.js) .gallery-filters { display:none; }
@media(max-width:767px){.need-panel__photo .project-phase__photo{aspect-ratio:1.3}}