@media (min-width:1024px){

  :root{
    --bord:clamp(26px,3.2vw,58px);
    --marge:var(--bord);
  }

  .env{ max-width:calc(1440px + 2 * var(--bord)); margin-inline:auto; padding:0 var(--bord) }
  .hero, .sec > .env, .final > .env{ max-width:calc(1440px + 2 * var(--bord)) }
  .entete-site .dedans{ max-width:none; padding:0 var(--bord) }

  .pied .dedans{ max-width:none; padding:0 var(--bord) }
  .pied{ padding:52px 0 40px }

  .barre-cta .dedans{ max-width:none; padding:0 }
  .annonce{ padding:10px var(--bord) }

  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    grid-template-rows:1fr auto;
    align-items:center;
    column-gap:clamp(40px,5vw,88px);
    margin-inline:auto;
    padding:40px var(--bord) 26px;
  }
  .hero .env{ grid-column:1; grid-row:1 / 3; padding:0 }
  .hero .scene{
    grid-column:2; grid-row:1; margin-top:0;

    width:min(100%, calc(var(--h) * 390 / 800 + 172px));
    margin-inline:auto;
  }
  .hero .points{ grid-column:2; grid-row:2; margin-top:16px }

  .hero .tache{ width:calc(var(--h) * .645); max-width:none }

  .titre{ font-size:clamp(46px,4vw,66px); line-height:.92 }
  .hero .chapo{ margin-top:22px; font-size:19px }

  .ruban{ padding:18px 0 }
  .gar{ font-size:14.5px }

  .sec{ padding:82px 0 }
  .final{ padding:82px 0 66px }
  .titre-sec{ font-size:clamp(38px,3.1vw,52px) }
  .sec .chapo{ font-size:17px }

  #declic .env, #comment .env, #lot .env, #recois .env,
  #offre .env, #faq .env{
    display:grid;
    column-gap:clamp(48px,5.5vw,96px);
    align-items:start;
  }

  #declic .env{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
                grid-template-rows:auto auto auto 1fr }
  #declic .surtitre { grid-area:1 / 1 }
  #declic .titre-sec{ grid-area:2 / 1 }
  #declic .chapo    { grid-area:3 / 1 }
  #declic .note     { grid-area:4 / 1 }
  #declic .releve   { grid-area:1 / 2 / 5 / 3; align-self:center; margin-top:0 }

  #comment .env{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
                 grid-template-rows:auto auto auto 1fr }
  #comment .surtitre { grid-area:1 / 1 }
  #comment .titre-sec{ grid-area:2 / 1 }
  #comment .chapo    { grid-area:3 / 1 }
  #comment .suite    { grid-area:4 / 1 }
  #comment .demo     { grid-area:1 / 2 / 5 / 3; align-self:center; margin-top:0 }

  #lot .env{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
             grid-template-rows:auto auto auto auto 1fr }
  #lot .surtitre   { grid-area:1 / 1 }
  #lot .titre-sec  { grid-area:2 / 1 }
  #lot .chapo      { grid-area:3 / 1 }
  #lot .lot-visuel { grid-area:4 / 1; margin-top:22px }
  #lot .lot-panneau{ grid-area:1 / 2 / 5 / 3; align-self:center; margin-top:0 }

  #lot .lot-etapes { grid-area:5 / 2 / 6 / 3; margin-top:26px }

  #recois .env{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                grid-template-rows:auto auto 1fr; align-items:start }
  #recois .surtitre { grid-area:1 / 1 }
  #recois .titre-sec{ grid-area:2 / 1 }
  #recois .recois   { grid-area:3 / 1; align-self:start; margin-top:26px }
  #recois .lot-img  { grid-area:1 / 2 / 4 / 3; align-self:center; width:100% }

  #offre .env{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
               grid-template-rows:auto auto 1fr }
  #offre .surtitre     { grid-area:1 / 1 }
  #offre .titre-sec    { grid-area:2 / 1 }
  #offre .offre-urgence{ grid-area:3 / 1; align-self:start; margin-top:20px }
  #offre .offre        { grid-area:1 / 2 / 4 / 3; margin-top:0 }

  #faq .env{ grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
             grid-template-rows:auto 1fr }
  #faq .surtitre { grid-area:1 / 1 }
  #faq .titre-sec{ grid-area:2 / 1 }
  #faq .faq      { grid-area:1 / 2 / 3 / 3; margin-top:0 }

  #facons .env{ max-width:none }
  #facons .chapo{ max-width:620px }
  .facon{ width:clamp(288px,21vw,336px) }
  .rail-piste{
    gap:18px;
    padding-left:max(var(--bord), calc((100vw - 1440px) / 2 + var(--bord)));
    padding-right:max(var(--bord), calc((100vw - 1440px) / 2 + var(--bord)));
  }

  .final .env{ max-width:840px; margin-inline:auto }

}