*{margin:0;padding:0;box-sizing:border-box;}

  img{display:block;max-width:none;}

  .canvas{
    width:1440px;
    margin:0 auto;
    position:relative;
    background:#fff;
    overflow:hidden;
  }

  /* boutons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    background:#FC7244;color:#fff;
    font-weight:500;font-size:18px;
    padding:15px 30px;border-radius:5px;
    text-decoration:none;white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    border:none;cursor:pointer;transition:filter .15s ease;
  }
  a.btn {
  	color: #fff
  }
  .btn:hover{filter:brightness(.95);}
  .btn-ghost{
    background:transparent;border:1.5px solid #fff;box-shadow:none;
  }
  .deadline{font-style:italic;font-size:18px;color:#221F1F;}

  /* ============ HERO ============ */
  .hero{position:relative;height:700px;width:1440px;overflow:visible;}
  .hero .decor{
    position:absolute;top:-60px;left:835px;width:649px;height:709px;z-index:0;
  }
  .hero-left{position:absolute;left:81px;top:117px;width:600px;z-index:2;}
  .flesh-logo{width:200px;height:auto;margin-bottom:36px;}
  .hero h1{
    font-weight:700;font-size:40px;line-height:50px;width:586px;color:var(--ink);
    position:relative;margin-bottom:0;
  }
  .hero h1 .o{color:#FC7244;}
  .hero h1 .uline{
    position:absolute;left:312px;top:53px;width:148px;height:6px;
    background:#15C08D;border-radius:10px;
  }
  .hero-sub{font-weight:300;font-size:20px;line-height:1.35;width:535px;margin-top:24px;}
  .hero-sub .m{font-weight:500;color:#FC7244;}
  .hero-sub .b{font-weight:700;color:#FC7244;}
  .hero-left .btn{margin-top:30px;}
  .hero-left .deadline{display:block;margin-top:34px;}

  .hero-photo{
    position:absolute;left:723px;top:200px;width:666px;height:436px;
    border-radius:20px;overflow:hidden;z-index:1;
  }
  .hero-photo img{width:100%;height:100%;object-fit:cover;}
  .hero-photo .ov{position:absolute;inset:0;background:rgba(0,0,0,.4);border-radius:20px;}
  .hero .asset12{position:absolute;left:65px;top:636px;width:46px;height:32px;z-index:2;}

  /* ============ SECTION 2 ============ */
  .s2{position:relative;width:1440px;padding-top:48px;padding-bottom:80px;overflow:hidden;}
  .s2 .decor{position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:2530px;max-width:none;z-index:0;opacity:.9;}
  .s2 .wrap{position:relative;z-index:1;}
  .s2 h2{font-weight:700;font-size:40px;text-align:center;color:var(--ink);}
  .s2 .lead{
    font-weight:400;font-size:24px;line-height:1.3;color:#221F1F;text-align:center;
    width:1107px;margin:36px auto 0;
  }
  .s2 .btn{display:flex;margin:34px auto 0;width:max-content;}
  .s2 .photo{width:1000px;height:494px;margin:56px auto 0;border-radius:20px;overflow:hidden;}
  .s2 .photo img{width:100%;height:100%;object-fit:cover;}

  .stats{
    width:954px;margin:64px auto 0;
    display:grid;grid-template-columns:1fr 1fr;column-gap:120px;row-gap:72px;
  }
  .stat{position:relative;padding-left:86px;min-height:70px;}
  .stat .ic{position:absolute;left:0;top:0;width:70px;height:70px;background:#FC7244;border-radius:8px;}
  .stat .ic img{position:absolute;left:16px;top:16px;width:37px;height:37px;}
  .stat .t{font-weight:900;font-size:24px;color:#221F1F;}
  .stat .d{font-weight:300;font-size:24px;color:#221F1F;margin-top:18px;width:260px;line-height:1.15;}

  /* ============ SECTION 3 — Pourquoi s'inscrire ============ */
  .s3{background:#FEF4E6;width:1440px;padding:96px 108px;}
  .s3 .inner{display:flex;gap:88px;align-items:center;padding:0 60px;}
  .s3-left{width:535px;flex:none;display:flex;flex-direction:column;gap:32px;}
  .s3-left h2{font-weight:700;font-size:40px;color:var(--ink);}
  .s3-left p{font-weight:400;font-size:24px;line-height:1.3;color:#221F1F;}
  .s3-left .btn{align-self:flex-start;}
  .s3-left .deadline{margin-top:4px;}
  .avantages{width:480px;flex:none;display:flex;flex-direction:column;gap:16px;}
  .av{border-radius:16px;padding:32px 40px;display:flex;gap:24px;align-items:flex-start;}
  .av img{width:72px;height:72px;flex:none;border-radius:14px;object-fit:cover;}
  .av .tt{font-weight:700;font-size:24px;color:var(--ink);line-height:1.1;margin-bottom:14px;}
  .av .tx{font-weight:400;font-size:20px;color:var(--ink);line-height:1.25;}
  .av-5{background:#FDE7F9;} .av-4{background:#CFEDE4;} .av-3{background:#FBE6D0;}
  .av-2{background:#E0EDFE;} .av-1{background:#FFD5C7;}

  /* ============ SECTION 4 — Curriculum ============ */
  .s4{background:#6B6356;width:1440px;padding:64px 0 0;}
  .s4 h2{font-weight:700;font-size:40px;color:#fff;text-align:center;}
  .curriculum{
    width:1136px;margin:88px auto 0;
    display:grid;grid-template-columns:534px 534px;gap:34px;justify-content:center;
  }
  .cur-card{
    background:#FEF4E6;width:534px;height:262px;border-radius:20px;
    box-shadow:0 4px 24px rgba(0,0,0,.05);
    padding:40px 49px;position:relative;
  }
  .cur-card .ic{width:60px;height:60px;background:#FEF4E6;border-radius:10px;position:relative;margin-bottom:32px;}
  .cur-card .ic img{position:absolute;left:13px;top:14px;width:32px;height:32px;}
  .cur-card .tt{font-weight:700;font-size:24px;color:#000000;width:428px;}
  .cur-card .tx{font-weight:400;font-size:20px;color:#000000;margin-top:14px;width:422px;line-height:1.2;}
  .s4 .btn{display:flex;width:max-content;margin:64px auto 0;}
  .s4-bottom{height:64px;}

  /* ============ SECTION 5 — A qui s'adresse FLESH ============ */
  .s5{background:#fffded;width:1440px;padding:89px 169px 80px;}
  .s5 h2{font-weight:700;font-size:40px;color:var(--ink);}
  .s5 .lead{font-weight:400;font-size:20px;line-height:1.4;color:var(--ink);width:1121px;margin-top:32px;}
  .s5 .panels{display:grid;grid-template-columns:531px 531px;column-gap:59px;row-gap:48px;margin-top:48px;}
  .panel{border-radius:20px;padding:44px 48px;position:relative;}
  .panel .ptitle{font-weight:700;font-size:28px;color:#6B6356;margin-bottom:24px;}
  .p-profils{background:#ece1c5;min-height:653px;}
  .p-criteres{background:#f7f0d8;min-height:653px;grid-row:span 2; height: fit-content;}
  .p-process{background:transparent;border:3px dashed #6B6356;min-height:322px;}
  .p-intro{font-weight:400;font-size:20px;color:#6B6356;margin-bottom:20px;}
  .panels .checklist{list-style:none;display:flex;flex-direction:column;gap:24px;}
  .panels .checklist li{position:relative;padding-left:34px;font-weight:400;font-size:20px;color:#6B6356;line-height:1.25; border-bottom: none !important;}
  .panels .checklist li img{position:absolute;left:0;width:16px;height:16px;}
  .nb{font-style:italic;font-size:14px;color:#6B6356;margin-top:28px;line-height:1.3;}
  .nb b{font-style:italic;font-weight:700;}
  .s5 .btn{display:flex;width:max-content;margin:44px auto 0;}
  .s5 .deadline{display:block;text-align:center;margin-top:18px;}

  /* Responsivité */

  body{
    overflow-x: hidden;
  }

  /* ============================
   MOBILE FIRST (par défaut)
   ============================ */

@media (min-width: 0) and (max-width:767px) {
  .hero{
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
    padding:32px 43px;
    display:flex;
    flex-direction:column;
  }

  /* éléments décoratifs masqués sur petit écran */
  .hero .decor,
  .hero .asset12{
    display:none;
  }

  /* ordre : photo au-dessus du texte sur mobile */
  .hero-photo{
    position: static;
    order:1;
    width:100%;
    height:auto;
    aspect-ratio:666/436;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:24px;
  }

  .hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-photo .ov {
    display: none;
    background:none;
  }

  .hero-left{
    position:relative;
    order:2;
    width:100%;
    left:0;top:0;
  }

  .flesh-logo{width:140px;height:auto;margin-bottom:24px;}

  .hero h1{
    font-weight:700;
    font-size:clamp(24px,6vw,32px);
    line-height:1.3;
    width:100%;
    color:var(--ink);
    position:relative;
    margin-bottom:0;
  }
  .hero h1 .o{color:#FC7244;}
  .hero h1 .uline{
    /* le soulignement positionné en absolu ne marche plus bien en texte fluide,
      on le masque sur mobile pour éviter un décalage moche */
    display:none;
  }

  .hero-sub{
    font-weight:300;
    font-size:16px;
    line-height:1.4;
    width:100%;
    margin-top:16px;
  }
  .hero-sub .m{font-weight:500;color:#FC7244;}
  .hero-sub .b{font-weight:700;color:#FC7244;}

  .hero-left .btn{
    display:inline-block;
    margin-top:24px;
  }
  .hero-left .deadline{
    display:block;
    margin-top:20px;
    font-size:14px;
  }


  /* Quest-ce que Flesh */

  .s2,
  .s2 .lead, .s5 .lead, .stats {
    width: auto;
  }

  .s2, .s3 {
    padding: 48px 43px;
  }

  .s3 .inner {
    padding: 0 !important;
  } 

  .s2 .photo, .s3, .s3-left, .s4, .s5, .s2 .decor, .avantages  {
    width: auto;
  }



  .stats {
    column-gap: 46px;
    row-gap: 45px;
  }

    /* section 3 */
    .s3 .inner {
      display: flex;
      flex-direction: column;
    }

    /* Curriculum */

    .curriculum{  
      width: 100%;   
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 48px;
      margin-top: 48px;
    }

    /* A qui s'adresse Flesh */
    .s5 .panels{      
      display: grid;
      grid-template-columns: repeat(1, 1fr) !important;
      column-gap: 59px;
      row-gap: 48px;
      margin-top: 48px;
    }

  .s5, .s4 {
    padding: 38px 43px 42px;
  }

  .hero-photo{width:100%;margin-bottom:34px}

}

@media (min-width:0) and (max-width:394px) {
  .cur-card, .cur-card .tt, .cur-card .tx {
    width: auto;
    height: auto;
  }

  .cur-card .ic {
    width: 30px;
    height: 30px;
  }

  .curriculum {
    padding: 0 19px;
  }
}

@media (min-width:0) and (max-width:670px) {
  
  .hero, .s2, .s3{
    padding: 23px 20px;
  }
  
  .s3, .s5, .s4{
    padding: 23px 20px;
  }

  .cur-card, .cur-card .tt, .cur-card .tx {
    width: auto;
    height: auto;
  }

  .av{
    padding: 20px 5px;
  }

  .panel {
    padding: 11px 12px;
  }


  .s5 .btn {
    padding: 5px 8px;
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr !important; 
    row-gap: 72px;
  }

  .stat .d {
    width:  auto;
  }
}

@media (min-width: 0) and (max-width: 219px) {
  .av img {
    width: 43px;
    height: 49px;
  }

  .cur-card, .cur-card .tt, .cur-card .tx {
    width: auto;
    height: auto;
  }

  .cur-card {
    padding: 15px 26px;
  }

  .s4 h2 {
    font-size: 33px;
  }

  .btn {
   padding: 10px 4px;
  }

  .panels .checklist li {
    font-size: 16px;
  }

  .panel {
    padding: 11px 4px;
  }

  .s3-left h2 {
    font-size: 31px;
  }

  .s3-left p {
    font-size: 22px;
  }

  .av{
    display: flex;
    flex-direction: column;
  }

  .av .tt {
    font-size: 20px;
  }
}

/* ============================
   TABLETTE (≥768px)
   ============================ */
@media (min-width:768px) and (max-width:1199px){
  .hero{
    padding:31px;
    display: flex;
    flex-direction: column !important;
    column-gap: 40px;
    position: static;
    height: 1116px;
  }

  .hero-photo .ov {
    display: none;
    background:none;
  }

  .hero-left {
    width: 100%;
  }

  .hero-left, .hero-photo {
    position: static;
    height: 100%;
  }

  .hero .decor{
    display:none;
  }
  

  .flesh-logo{width:170px;}

  .hero h1{font-size:clamp(28px,4.5vw,36px);}

  .hero-sub{font-size:18px;width:100%;max-width:535px;}

  .hero, .inner, .s2, .s3, .s4, .s5 {
    width: 100% !important;
  }

  .hero .asset12 {
    position: absolute;
    left: 100px;
    width: 46px;
    top: auto;
    height: 32px;
    z-index: 2;
    bottom: -591px !important;
}

  .hero-photo {
    max-width: 100%;
    margin-bottom:40px ;
  }

  .inner, .stats {
    display: flex;
    flex-direction: column;
  }

  .hero {
     padding: 96px 108px 0 108px;
  }

  .s2 {
    padding: 96px 108px;
  }

  .s2 .lead, .s2 .photo {
    width: 100%;
  }

  .stats {
    width: 100%;
    align-items: center;
  }

  .curriculum {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .s5 .panels{
    display: flex;
    flex-direction: column;
  }

  .s5 .lead {
    width: 100%;
  }
 
}


/* ============================
   DESKTOP (≥1200px) — design original
   ============================ */
@media (min-width:1200px){
  .hero{
    position:relative;
    width:100%;
    max-width:100%;
    height:700px;
    margin:0 auto;
    overflow:visible;
    padding:0;
    display:block; /* on annule le flexbox mobile */
  }

  .hero .decor{
    display:none;
  }

  .hero-left{
    position:absolute;left:81px;top:117px;width:600px;
    order:initial;
  }

  .flesh-logo{width:200px;margin-bottom:36px;}

  .hero h1{
    font-size:40px;line-height:50px;width:586px;margin-bottom:0;
  }
  .hero h1 .uline{
    display:block;
    position:absolute;left:312px;top:53px;width:148px;height:6px;
    background:#15C08D;border-radius:10px;
  }

  .hero-sub{
    font-size:20px;line-height:1.35;width:535px;margin-top:24px;max-width:none;
  }

  .hero-left .btn{margin-top:30px;}
  .hero-left .deadline{display:block;margin-top:34px;font-size:16px;}

  .hero-photo{
    position:absolute;left:723px;top:200px;width:666px;height:436px;
    border-radius:20px;overflow:hidden;z-index:1;
    max-width:none;margin:0;aspect-ratio:auto;
  }
  .hero-photo .ov{border-radius:20px;}

  .hero .asset12{
    display:block;
    position:absolute;left:65px;top:636px;width:46px;height:32px;z-index:2;
  }

  .s2, .s3, .s4, .s5 {
    width: 100%;
  }
}