/* Panorama cadré choisi par Julien. Les photos sources restent intactes. */
html[data-hero-layout="panorama"] {
  --mx-photo-tint:#fff;
  --mx-browser-tint:#fff;
  --mx-panorama-nav:96px;
  background:#fff;
}
html[data-hero-layout="panorama"] body { background:#fff; }
html[data-hero-layout="panorama"] main { padding-top:calc(var(--mx-panorama-nav) + var(--mx-safe-top)); }
html[data-hero-layout="panorama"] .mx-hero {
  display:block;
  width:calc(100% - 64px);
  max-width:1440px;
  height:auto;
  min-height:690px;
  max-height:none;
  margin:0 auto 48px;
  border-radius:20px;
}
html[data-hero-layout="panorama"] .mx-hero::after { display:none; }
html[data-hero-layout="panorama"] .mx-hero-photo {
  inset:0;
  height:100%;
}
html[data-hero-layout="panorama"] .mx-hero-photo img {
  object-fit:cover;
  object-position:70% top;
  filter:none;
  transform:none;
}
html[data-hero-layout="panorama"] .mx-hero .mx-hero-veil {
  inset:0;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.87) 32%,rgba(255,255,255,.3) 48%,transparent 67%);
}
html[data-hero-layout="panorama"] .mx-hero .mx-hero-content {
  display:block;
  width:45%;
  max-width:none;
  min-height:0;
  height:auto;
  margin:0;
  padding:64px 0 64px 56px;
}
html[data-hero-layout="panorama"] .mx-hero-copy { width:100%; max-width:none; }
html[data-hero-layout="panorama"] .mx-hero-copy h1 {
  font-size:clamp(42px,4.05vw,60px);
  line-height:1.04;
  text-wrap:balance;
}
html[data-hero-layout="panorama"] .mx-hero-copy h1 .beat { color:#686868; }
html[data-hero-layout="panorama"] .mx-hero-copy :is(.lead,.hero-copy>p:first-child) {
  max-width:470px;
  line-height:1.6;
  margin-top:20px;
}
html[data-hero-layout="panorama"] .mx-hero-copy .hook { max-width:none; }
html[data-hero-layout="panorama"] .mx-hero-copy .actions { margin-top:28px; gap:12px 16px; }
html[data-hero-layout="panorama"] .mx-hero-copy .pill { white-space:normal; gap:8px; }
html[data-hero-layout="panorama"] .mx-hero-copy .pill-line { font-size:14px; padding:8px 0; }
html[data-hero-layout="panorama"] .mx-hero-copy :is(.reassure,.reassurance) { max-width:450px; }
html[data-hero-layout="panorama"] .mx-hero-copy .inscription { margin-top:24px; max-width:100%; }
html[data-hero-layout="panorama"] .mx-hero-copy .inscription-ligne { flex-wrap:wrap; }
html[data-hero-layout="panorama"] .mx-hero-copy .inscription-champ { min-width:0; }
@media(min-width:768px) and (max-width:1100px) {
  html[data-hero-layout="panorama"] .mx-hero .mx-hero-content { width:51%; padding-left:32px; }
  html[data-hero-layout="panorama"] .mx-hero-copy h1 { font-size:42px; }
}
@media(max-width:1023px) {
  html[data-hero-layout="panorama"] { --mx-panorama-nav:80px; }
}
@media(max-width:767px) {
  html[data-hero-layout="panorama"] .mx-hero {
    width:calc(100% - 24px);
    min-height:0;
    border-radius:16px;
    margin-bottom:40px;
  }
  html[data-hero-layout="panorama"] .mx-hero-photo { position:relative; inset:auto; height:320px; z-index:0; }
  html[data-hero-layout="panorama"] .mx-hero-photo img { object-position:72% top; }
  html[data-hero-layout="panorama"][data-hero-page="resources"] .mx-hero-photo img { object-position:94% top; }
  html[data-hero-layout="panorama"] .mx-hero .mx-hero-veil {
    display:none;
    background:none;
  }
  html[data-hero-layout="panorama"] .mx-hero .mx-hero-content {
    position:relative;
    z-index:2;
    width:100%;
    padding:8px 12px 32px;
  }
  html[data-hero-layout="panorama"] .mx-hero-copy h1 { font-size:38px; line-height:1.06; }
  html[data-hero-layout="panorama"] .mx-hero-copy :is(.eyebrow,.kicker) { font-size:12px; margin-bottom:16px; }
  html[data-hero-layout="panorama"] .mx-hero-copy :is(.lead,.hero-copy>p:first-child) { line-height:1.55; }
  html[data-hero-layout="panorama"] .mx-hero-copy .actions { margin-top:24px; }
}

/* Le panneau du test conserve sa position après la disparition du panorama. */
html[data-hero-layout="panorama"][data-hero-page="quiz"] .test.commence { padding-top:24px; }
@media(max-width:760px) {
  html[data-hero-layout="panorama"].test-plein-ecran main,
  html[data-hero-layout="panorama"].test-plein-ecran .test.commence { padding-top:0; }
}