/* Hero commun aux pages intérieures : titre et texte uniquement. */
body > .nav{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  background:var(--bone)!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
body > .nav .wrap{
  height:84px!important;
  padding-inline:var(--gut)!important;
}
body > .nav .logo,
.title-panel > .nav .logo{
  color:var(--ink)!important;
}

.hero{
  padding:clamp(.35rem,.7vw,.7rem) var(--gut) 0!important;
}
.panel.ipanel{
  min-height:clamp(220px,16vw,260px)!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:clamp(24px,2.4vw,36px)!important;
  background:var(--ink)!important;
  color:var(--paper)!important;
  box-shadow:none!important;
}
.ipanel > .wrap{
  min-height:clamp(220px,16vw,260px)!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding-block:clamp(2rem,3vw,2.8rem)!important;
}
.ipanel .ihead{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  gap:clamp(.8rem,1.5vw,1.35rem)!important;
  text-align:center!important;
}
.ipanel .fil,
.ipanel .ivis,
.ipanel .ifoot,
.ipanel .blob,
.ipanel .note-main,
.ipanel .ctas{display:none!important}
.ipanel h1{
  max-width:22ch!important;
  margin:0!important;
  color:var(--paper)!important;
  font-size:clamp(2.8rem,4.8vw,4.8rem)!important;
  line-height:.96!important;
}
.ipanel .lede{
  max-width:76ch!important;
  margin:0!important;
  color:rgba(255,255,255,.68)!important;
  font-size:clamp(1.08rem,1.45vw,1.3rem)!important;
  line-height:1.55!important;
}
.ipanel h1 .pill,
.cpanel h1 .pill,
.title-panel h1 span{
  display:inline!important;
  padding:0!important;
  background:none!important;
  color:inherit!important;
  box-shadow:none!important;
  transform:none!important;
}
.ipanel h1[data-reveal],
.ipanel .lede[data-reveal],
.title-panel h1[data-reveal],
.title-panel .title-intro[data-reveal],
.cpanel h1[data-reveal],
.cpanel .lede[data-reveal]{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.ipanel h1 *,
.ipanel .lede *,
.title-panel h1 *,
.title-panel .title-intro *,
.cpanel h1 *,
.cpanel .lede *{
  transition:none!important;
  animation:none!important;
}
.mode-hero{display:none!important}

/* Le début du contenu reste visible dans le premier écran. */
body > main > section:first-child:not(.hero){
  padding-top:clamp(2.75rem,4vw,4rem)!important;
}
body > main > section:first-child:not(.hero) [data-reveal],
.cpanel .next,
.cpanel .form{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}

.shell{
  padding-top:calc(84px + clamp(.35rem,.7vw,.7rem))!important;
  padding-inline:var(--gut)!important;
}
.title-panel{
  min-height:clamp(220px,16vw,260px)!important;
  border-radius:clamp(24px,2.4vw,36px)!important;
}
.title-panel > .nav,
.title-panel > .nav .wrap{
  height:84px!important;
}
.title-panel .breadcrumb{display:none!important}
.title-panel .title-content{
  min-height:clamp(220px,16vw,260px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(.8rem,1.5vw,1.35rem)!important;
  padding-block:clamp(2rem,3vw,2.8rem)!important;
  text-align:center!important;
}
.title-panel h1{
  max-width:22ch!important;
  margin:0!important;
  font-size:clamp(2.8rem,4.8vw,4.8rem)!important;
  line-height:.96!important;
}
.title-panel .title-intro{
  max-width:76ch!important;
  margin:0!important;
  color:rgba(255,255,255,.68)!important;
  font-size:clamp(1.08rem,1.45vw,1.3rem)!important;
  line-height:1.55!important;
}

/* Contact : le premier rang est le hero, les étapes et le formulaire passent dessous. */
.panel.cpanel{
  position:relative!important;
  padding:0!important;
  overflow:visible!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
.panel.cpanel:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 auto;
  height:clamp(220px,16vw,260px);
  border-radius:clamp(24px,2.4vw,36px);
  background:var(--ink);
}
.cpanel > .cgrid{
  position:relative;
  z-index:1;
  min-height:clamp(220px,16vw,260px);
  display:grid!important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr)!important;
  grid-template-rows:clamp(121px,8.8vw,143px) clamp(99px,7.2vw,117px) auto!important;
  column-gap:clamp(2rem,8vw,9rem)!important;
  row-gap:0!important;
}
.cpanel > .cgrid > div:first-child{display:contents!important}
.cpanel h1{
  grid-column:1/-1!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:center!important;
  max-width:22ch!important;
  margin:0!important;
  color:var(--paper)!important;
  font-size:clamp(2.8rem,4.8vw,4.8rem)!important;
  line-height:.96!important;
  text-align:center!important;
}
.cpanel > .cgrid > div:first-child > .lede{
  grid-column:1/-1!important;
  grid-row:2!important;
  align-self:start!important;
  justify-self:center!important;
  max-width:76ch!important;
  margin:clamp(.8rem,1.5vw,1.35rem) 0 0!important;
  color:rgba(255,255,255,.68)!important;
  font-size:clamp(1.08rem,1.45vw,1.3rem)!important;
  line-height:1.55!important;
  text-align:center!important;
}
.cpanel .next{
  grid-column:1!important;
  grid-row:3!important;
  align-self:start!important;
  margin:clamp(2.75rem,4vw,4rem) 0!important;
}
.cpanel .next strong{color:var(--ink)!important}
.cpanel .next span{color:var(--ink-70)!important}
.cpanel .form{
  grid-column:2!important;
  grid-row:3!important;
  align-self:start!important;
  margin:clamp(2.75rem,4vw,4rem) 0!important;
}

@media (max-width:900px){
  body > .nav .wrap{height:84px!important}
  .hero{padding-inline:clamp(.5rem,3vw,1rem)!important}
  .shell{padding-inline:clamp(.5rem,3vw,1rem)!important}
  .ipanel h1,.title-panel h1{font-size:clamp(2.8rem,12vw,4.8rem)!important}
  .cpanel > .cgrid{
    grid-template-columns:1fr!important;
    grid-template-rows:190px 160px auto auto!important;
    padding-block:0!important;
  }
  .panel.cpanel:before{height:350px}
  .cpanel h1{
    grid-column:1!important;
    grid-row:1!important;
    align-self:end!important;
    padding-top:2.5rem;
  }
  .cpanel > .cgrid > div:first-child > .lede{
    grid-column:1!important;
    grid-row:2!important;
    align-self:start!important;
    justify-self:start!important;
    padding-bottom:2.5rem;
  }
  .cpanel .next{grid-column:1!important;grid-row:3!important;margin:3rem 0 0!important}
  .cpanel .form{grid-column:1!important;grid-row:4!important;margin:2.5rem 0 4rem!important}
}