/* Les deux entrées : une photographie, un choix. Styles limités à l'accueil. */
body[data-view="home"] { background:#17251e; }
body[data-view="home"] > header {
  position:absolute; inset:0 0 auto; z-index:5;
  height:156px; padding:22px 3.5vw; align-items:flex-start;
  background:linear-gradient(180deg,#10181399,transparent);
  border:0; color:#fff;
}
body[data-view="home"] .identity { color:#fff; gap:5px; }
body[data-view="home"] .brand-line { gap:12px; }
body[data-view="home"] .logo { width:37px; height:57px; }
body[data-view="home"] .brand { font-size:13px; font-weight:600; letter-spacing:0; }
body[data-view="home"] .brand small { font-size:11px; color:#eee9de; }
body[data-view="home"] .identity .signature {
  width:152px; height:auto; margin-left:23px;
  background:transparent; filter:brightness(0) invert(1);
}
body[data-view="home"] .global-nav {
  padding-top:16px; gap:28px; font-size:12px; font-weight:400; color:#f0ece3;
}
body[data-view="home"] .preview-tag,
body[data-view="home"] footer { display:none; }

#choice { position:relative; min-height:100svh; }
#choice .intro {
  position:absolute; top:68%; left:24px; right:24px; transform:translateY(-50%);
  z-index:3; padding:0; pointer-events:none; text-align:center;
}
#choice .intro h1 {
  margin:0; color:#f0e3cc;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(25px,2.25vw,34px); font-weight:400; font-style:italic;
  line-height:1.3; letter-spacing:.1px;
  text-shadow:0 2px 18px #0009;
}
#choice .split {
  display:grid; grid-template-columns:1fr 1fr;
  width:100%; max-width:none; height:100svh; min-height:620px;
  padding:0; margin:0; gap:0;
}
#choice .door { height:100%; border-radius:0; }
#choice .professional { border-right:1px solid #ffffff2b; }
#choice .door:before {
  background:linear-gradient(180deg,#1c171335,transparent 34%,#25171e20 53%,#21151dbf 80%,#21151eeb);
}
#choice .discover:before {
  background:linear-gradient(180deg,#10281e42,transparent 34%,#122b2220 53%,#10281ebf 80%,#10281eeb);
}
#choice .door-photo { object-position:64% 42%; transition:transform 1.2s ease; }
#choice .discover .door-photo { object-position:52% center; }
#choice .door:hover .door-photo { transform:scale(1.018); }
#choice .door-copy {
  position:absolute; left:7%; right:7%; bottom:clamp(28px,5.5vh,62px);
}
#choice .door h2 {
  max-width:none; margin:0; font-size:clamp(27px,2.55vw,42px);
  font-weight:400; letter-spacing:-.7px; line-height:1.2;
}
#choice .door h2:focus { outline:none; }
#choice .enter {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; min-height:56px; gap:20px; padding:8px 0;
  background:transparent; border:0; border-radius:0;
  color:#fffaf2; font:inherit; letter-spacing:inherit; text-align:left;
}
#choice .enter>span:first-child { text-wrap:balance; }
#choice .enter .arrow {
  flex:0 0 47px; width:47px; height:47px; display:grid; place-items:center;
  border:1px solid #f8f0de9c; border-radius:50%;
  font-size:24px; line-height:1; color:#f0e3cc;
  transition:background .25s,color .25s,transform .25s;
}
#choice .enter:hover .arrow,
#choice .enter:focus-visible .arrow {
  background:#f0e3cc; color:#183c32; transform:translateX(3px);
}
#choice .enter:focus-visible { outline:2px solid #f0e3cc; outline-offset:9px; }
#choice .credit {
  margin-top:22px; color:#d5d3cb; font-size:10px;
  letter-spacing:.15px; line-height:1.6;
}
#choice .credit strong { color:#f1eee7; font-weight:400; }

@media (min-width:641px) and (max-width:1000px) {
  #choice .door-copy { left:7%; right:7%; }
  #choice .door h2 { font-size:27px; }
  #choice .enter { gap:15px; }
  #choice .enter .arrow { flex-basis:42px; width:42px; height:42px; }
}
@media (max-width:640px) {
  body[data-view="home"] > header { height:126px; padding:15px 22px; }
  body[data-view="home"] .brand-line { gap:10px; }
  body[data-view="home"] .logo { width:32px; height:49px; }
  body[data-view="home"] .brand { font-size:11px; }
  body[data-view="home"] .brand small { font-size:10px; }
  body[data-view="home"] .identity .signature { width:133px; margin-left:18px; }
  #choice .intro { top:137px; left:20px; right:20px; transform:none; }
  #choice .intro h1 { max-width:350px; margin:auto; font-size:24px; text-wrap:balance; }
  #choice .split {
    height:100svh; min-height:760px;
    grid-template-columns:1fr; grid-template-rows:1.1fr 1fr;
  }
  #choice .door { min-height:0; }
  #choice .professional { border-right:0; border-bottom:1px solid #ffffff38; }
  #choice .door-copy { left:26px; right:26px; bottom:25px; }
  #choice .door h2 { font-size:27px; letter-spacing:-.5px; }
  #choice .enter { gap:16px; min-height:50px; padding:6px 0; }
  #choice .enter .arrow { flex-basis:42px; width:42px; height:42px; font-size:22px; }
  #choice .credit { margin-top:12px; font-size:9px; }
  #choice .door-photo { object-position:60% 40%; }
  #choice .discover .door-photo { object-position:50% center; }
}
@media (prefers-reduced-motion:reduce) {
  #choice .door-photo, #choice .enter .arrow { transition:none; }
  #choice .door:hover .door-photo,
  #choice .enter:hover .arrow,
  #choice .enter:focus-visible .arrow { transform:none; }
}
