/* ============================================================
   OTTOM4T3 — contenu indexable, apres le film.
   Meme matiere que l'experience : noir, aluminium, verre.
   Beaucoup d'espace, peu d'elements, aucune boite decorative.
   ============================================================ */

.doc{
  position:relative; z-index:20;
  background:
    radial-gradient(130% 55% at 50% 0%, rgba(28,34,44,.6) 0%, transparent 62%),
    var(--ink-900);
  border-top:1px solid var(--line);
}

.sec{
  max-width:1320px; margin:0 auto;
  padding:clamp(88px,13vh,190px) var(--gut);
  border-bottom:1px solid rgba(190,205,225,.07);
}
.sec:last-of-type{border-bottom:0}

.sec__head{max-width:64ch; margin-bottom:clamp(40px,6vw,86px)}
.sec__title{
  font-size:clamp(28px,4.2vw,62px); font-weight:700; line-height:1.06;
  letter-spacing:-.018em; margin-top:18px;
}
.sec__lede{
  margin-top:22px; color:var(--fg-2); font-size:clamp(14px,1.3vw,19px);
  line-height:1.72; max-width:60ch;
}

/* ============================================================
   CAPACITES — quatre blocs, beaucoup d'air
   ============================================================ */
.caps{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(190,205,225,.09)}
.cap{
  background:var(--ink-900); padding:clamp(30px,3.4vw,58px);
  display:flex; flex-direction:column; gap:16px;
  transition:background .4s var(--ease);
}
.cap:hover{background:#0c0f13}
.cap__num{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.3em; color:var(--tech);
}
.cap__title{font-size:clamp(20px,2.2vw,31px); font-weight:700; letter-spacing:-.012em; line-height:1.16}
.cap__text{color:var(--fg-2); font-size:14.5px; line-height:1.68; max-width:46ch}
.cap__tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:14px}
.cap__tags li{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
  border:1px solid var(--line); padding:6px 10px;
}

/* ============================================================
   SELECTION
   ============================================================ */
.works{display:flex; flex-direction:column}
.work{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,66px); align-items:start;
  padding:clamp(34px,4.4vw,64px) 0;
  border-top:1px solid var(--line);
}
.work:last-child{border-bottom:1px solid var(--line)}
.work__head{display:flex; gap:clamp(16px,2vw,30px); align-items:baseline}
.work__idx{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.24em; color:var(--tech); padding-top:6px;
}
.work__title{font-size:clamp(23px,2.8vw,42px); font-weight:700; letter-spacing:-.018em; line-height:1.08}
.work__kind{
  margin-top:8px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
}
.work__text{color:var(--fg-2); font-size:14.5px; line-height:1.72; max-width:52ch}
.work__facts{margin-top:24px; display:grid; gap:12px}
.work__facts > div{display:grid; grid-template-columns:118px 1fr; gap:14px; align-items:baseline}
.work__facts dt{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
}
.work__facts dd{font-size:13px; color:var(--fg-2); line-height:1.5}
.work__link{
  display:inline-block; margin-top:26px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--fg); border-bottom:1px solid var(--line-strong); padding-bottom:6px;
  transition:border-color var(--t-fast) var(--ease);
}
.work__link:hover{border-color:var(--fg)}

/* ============================================================
   METHODE
   ============================================================ */
.steps-big{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,44px)}
.steps-big li{display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:1px solid var(--line-strong)}
.steps-big__num{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.3em; color:var(--tech);
}
.steps-big h3{font-size:clamp(17px,1.8vw,23px); font-weight:700; letter-spacing:-.008em}
.steps-big p{color:var(--fg-2); font-size:13.5px; line-height:1.66}

/* ============================================================
   ENGAGEMENT
   ============================================================ */
.modes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); align-items:stretch}
.mode{
  border:1px solid var(--line); padding:clamp(28px,3vw,44px);
  display:flex; flex-direction:column; gap:14px; position:relative;
  background:rgba(12,14,17,.7);
  transition:border-color var(--t-fast) var(--ease);
}
.mode:hover{border-color:var(--line-strong)}
.mode--featured{
  border-color:rgba(143,180,242,.4);
  background:linear-gradient(180deg,rgba(19,26,39,.9),rgba(9,12,16,.92));
  box-shadow:0 40px 100px rgba(0,0,0,.55);
}
.mode__badge{
  position:absolute; top:-11px; left:clamp(28px,3vw,44px);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  background:var(--tech); color:#06101f; padding:5px 11px; font-weight:700;
}
.mode__name{font-size:clamp(20px,2.1vw,28px); font-weight:800; letter-spacing:-.01em}
.mode__text{color:var(--fg-2); font-size:14px; line-height:1.66}
.mode__list{display:flex; flex-direction:column; gap:11px; margin-top:8px; flex:1}
.mode__list li{
  position:relative; padding-left:19px; color:var(--fg-2);
  font-size:13px; line-height:1.55;
}
.mode__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--alu-400);
}
.mode__price{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
}

.aside{
  margin-top:clamp(34px,4.4vw,68px); padding:clamp(26px,3vw,42px);
  border:1px solid var(--line); border-left:2px solid var(--tech);
  display:grid; gap:12px; max-width:88ch;
  background:linear-gradient(100deg,rgba(18,24,34,.7),rgba(10,12,15,.5));
}
.aside__kicker{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--fg-3);
}
.aside__title{font-size:clamp(17px,1.8vw,23px); font-weight:700}
.aside__text{color:var(--fg-2); font-size:14px; line-height:1.68}
.aside__text b{color:var(--fg); font-weight:700}
.aside__link{
  justify-self:start; margin-top:4px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--fg); border-bottom:1px solid var(--line-strong); padding-bottom:5px;
}
.aside__link:hover{border-color:var(--fg)}

/* ============================================================
   LIGNE
   ============================================================ */
.lines{display:grid; gap:1px; background:rgba(190,205,225,.09); max-width:96ch}
.lines li{
  background:var(--ink-900); padding:clamp(24px,2.8vw,38px);
  color:var(--fg-2); font-size:clamp(14px,1.3vw,18px); line-height:1.66;
  position:relative; padding-left:clamp(50px,5.6vw,84px);
}
.lines li::before{
  content:""; position:absolute; left:clamp(24px,2.8vw,38px);
  top:calc(clamp(24px,2.8vw,38px) + .72em);
  width:16px; height:1px; background:var(--tech);
}

/* ============================================================
   APPEL FINAL
   ============================================================ */
.sec--cta{text-align:center; max-width:900px}
.cta__title{font-size:clamp(30px,5vw,68px); font-weight:800; letter-spacing:-.022em; line-height:1.03}
.cta__lede{margin:20px auto 0; color:var(--fg-2); font-size:clamp(14px,1.35vw,18px); line-height:1.7; max-width:52ch}
.cta__row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px}
.cta__mail{margin-top:30px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.cta__mail a{color:var(--fg-2); border-bottom:1px solid var(--line)}
.cta__mail a:hover{color:var(--fg)}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.foot{
  max-width:1320px; margin:0 auto;
  padding:clamp(60px,8vh,100px) var(--gut) clamp(36px,5vh,64px);
  display:grid; gap:clamp(24px,3vw,48px);
  grid-template-columns:1.5fr repeat(4,1fr);
  border-top:1px solid var(--line);
}
.foot__brand p{margin-top:12px; color:var(--fg-3); font-size:12.5px}
.foot__col{display:flex; flex-direction:column; gap:10px}
.foot__col h3{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3);
  margin-bottom:4px;
}
.foot__col a{color:var(--fg-2); font-size:13px; transition:color var(--t-fast) var(--ease)}
.foot__col a:hover{color:var(--fg)}
.foot__legal{
  grid-column:1/-1; padding-top:clamp(24px,3vh,40px); border-top:1px solid var(--line);
  color:var(--fg-3); font-size:11.5px;
}

/* ============================================================
   BARRE HAUTE
   ============================================================ */
.chrome__nav{display:flex; align-items:center; gap:clamp(14px,1.8vw,30px)}
.chrome__link{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
  transition:color var(--t-fast) var(--ease);
}
.chrome__link:hover{color:var(--fg)}

/* l'experience filmee s'efface quand le contenu prend la main */
body.stage-off .stage,
body.stage-off .chrome--bottom{opacity:0; visibility:hidden; transition:opacity .35s var(--ease)}
body.stage-off .grade{opacity:.45}
body.stage-off .chrome--top{
  background:rgba(8,9,10,.84);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .caps{grid-template-columns:1fr}
  .work{grid-template-columns:1fr; gap:22px}
  .steps-big{grid-template-columns:repeat(2,1fr)}
  .modes{grid-template-columns:1fr; max-width:580px}
  .foot{grid-template-columns:1fr 1fr}
  .chrome__link{display:none}
}
@media (max-width:640px){
  .sec{padding:70px var(--gut)}
  .steps-big{grid-template-columns:1fr}
  .work__facts > div{grid-template-columns:1fr; gap:4px}
  .foot{grid-template-columns:1fr; gap:28px}
  .lines li{padding-left:44px}
  .lines li::before{left:20px; width:12px}
}

@media (prefers-reduced-motion:reduce){
  .cap{transition:none}
}