@font-face{
  font-family:"DIN Pro";
  src:url("assets/fonts/DINPro.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"DIN Pro";
  src:url("assets/fonts/DINPro-Medium.otf") format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"DIN Pro";
  src:url("assets/fonts/DINPro-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"DIN Pro";
  src:url("assets/fonts/DINPro-Black.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Another Shabby";
  src:url("assets/fonts/Anothershabby_trial.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue:#014b94;
  --yellow:#ffee00;
  --pink:#ef2850;
  --text-blue:#064b91;
  --max:1600px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f2f2f2;font-family:"DIN Pro",Arial,Helvetica,sans-serif;color:var(--text-blue)}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto}
.page{width:min(100%,var(--max));margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.18);container-type:inline-size}
.script{font-family:"Another Shabby","DIN Pro",Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:0;line-height:.86}
.section-blue{background:var(--blue);position:relative;color:#fff;overflow:hidden}

/* Header */
.site-header{height:7.2cqw;background:#fff;position:relative;z-index:20}
.logo{position:absolute;left:20.15cqw;top:1.25cqw;width:8.65cqw;display:block;z-index:3}
.logo img{width:100%}
.menu{position:absolute;left:30.8cqw;top:2.25cqw;height:2cqw;display:flex;align-items:center;gap:2.55cqw;white-space:nowrap;z-index:3}
.menu a{font-size:.82cqw;line-height:1;font-weight:900;letter-spacing:.035em;text-transform:uppercase;color:#000;text-decoration:none}
.menu a:hover,.menu a:focus,.menu a:active{color:#000;text-decoration:none;background:transparent;outline:0}
.socials{position:absolute;left:76.25cqw;top:2.03cqw;display:flex;align-items:center;gap:.42cqw;z-index:3}
.socials a{width:2cqw;height:2cqw;display:block}
.socials img{width:100%;height:100%}
.burger{display:none;position:absolute;border:0;background:transparent;padding:0;cursor:pointer;z-index:5}
.burger span{display:block;background:var(--pink);border-radius:999px;transition:.25s}

/* Hero */
.hero{height:43.475cqw}
.hero-visual{position:absolute;left:0;top:0;width:54.58cqw;max-width:none;z-index:1}
.gift{position:absolute;z-index:2;filter:drop-shadow(.18cqw .18cqw .2cqw rgba(0,0,0,.12))}
.gift-hero-top{right:5.35cqw;top:2.35cqw;width:7.6cqw;transform:rotate(13deg)}
.gift-hero-mid{right:8.1cqw;top:21.1cqw;width:6.1cqw;transform:rotate(-13deg)}
.gift-hero-right{right:1.4cqw;top:8.7cqw;width:5.45cqw;transform:rotate(-6deg)}
.hero-content{position:absolute;left:48.2cqw;top:5.1cqw;width:33.6cqw;text-align:center;z-index:5}
.hero-date{margin:0 0 1.1cqw;color:var(--yellow);font-weight:900;font-size:2.05cqw;line-height:1}
.hero-small{margin:0;color:var(--yellow);font-size:2.05cqw}
.hero h1{margin:.15cqw 0 1.05cqw;color:var(--yellow);font-size:5.72cqw;line-height: 1;text-transform:uppercase;text-shadow:0 .16cqw 0 rgba(0,0,0,.06)}
.hero-logo{width:18.7cqw;margin:0 auto 2.2cqw;filter:none}
.hero-text{margin:0 0 1.15cqw;color:#fff;font-weight:900;font-size:1.25cqw;line-height:1.12}
.play-btn{display:inline-flex;align-items:center;justify-content:center;min-width:8.2cqw;height:1.95cqw;padding:0 1.25cqw;border-radius:999px;background:var(--yellow);color:var(--blue);font-weight:900;text-transform:uppercase;font-size:.73cqw;line-height:1;box-shadow:0 .18cqw 0 rgba(0,0,0,.14)}

/* Comment jouer */
.how{height:36.6cqw;background:#fff;position:relative;overflow:hidden;color:var(--text-blue)}
.how h2{position:absolute;left:0;right:0;top:3.9cqw;margin:0;text-align:center;color:var(--text-blue);font-size:4.08cqw;text-transform:uppercase}
.step{position:absolute;top:12.2cqw;width:17.2cqw;text-align:center;color:var(--text-blue);font-weight:700}
.step-1{left:22.3cqw}.step-2{left:41.6cqw}.step-3{left:60.9cqw}
.step h3{display:inline-flex;align-items:center;justify-content:center;margin:0 0 .75cqw;min-width:7.75cqw;height:2.15cqw;border:.16cqw solid var(--text-blue);border-radius:.45cqw;background:#fff;font-size:1.08cqw;font-weight:900;line-height:1}
.step p{margin:0;font-size:.86cqw;line-height:1.15;font-weight:700}
.step strong{display:block;margin:.55cqw 0 0;font-size:.88cqw;line-height:1.12;font-weight:900}
.arrow{display:grid;place-items:center;width:1.58cqw;height:1.58cqw;margin:.68cqw auto .12cqw;border-radius:50%;background:var(--text-blue);color:#fff;font-size:.95cqw;font-weight:900;line-height:1}

/* Cadeaux */
.prizes{height:69.175cqw}
.container-gifts{position:absolute;left:-.1cqw;top:0;width:100.15cqw;max-width:none;z-index:3}
.conf{position:absolute;pointer-events:none;z-index:4}.conf-prize-left{left:-5.1cqw;bottom:3.4cqw;width:26.9cqw}.conf-prize-right{right:-5.6cqw;top:1.3cqw;width:27.7cqw}.conf-prize-fall{left:-2.8cqw;top:4.8cqw;width:34cqw;opacity:.95;z-index:4}
.prizes h2{position:absolute;top:1.95cqw;left:23.15cqw;margin:0;color:var(--yellow);font-size:3.48cqw;text-transform:uppercase;z-index:5;text-shadow:0 .08cqw 0 rgba(0,0,0,.08)}
.prize-text{position:absolute;top:9.7cqw;left:53.18cqw;width:24cqw;margin:0;text-align:center;color:#fff;font-size:1,3cqw;line-height:1.05;font-weight:900;z-index:5}
.man{position:absolute;left:21.85cqw;bottom:-.05cqw;width:19.1cqw;z-index:7}.woman{position:absolute;left:61.85cqw;bottom:.18cqw;width:16.35cqw;z-index:8}
.draw-card{position:absolute;left:35cqw;bottom:7.85cqw;width:31.75cqw;height:8.25cqw;background:var(--yellow);border-radius:.55cqw;text-align:center;color:var(--text-blue);z-index:7;box-shadow:0 .25cqw .85cqw rgba(0,0,0,.14);padding-top:2.8cqw}
.draw-title{position:absolute;left:13.7%;top:-1.36cqw;width:72.6%;height:2.22cqw;display:flex;align-items:center;justify-content:center;border-radius:.32cqw;background:#fff;color:var(--text-blue);font-size:1.18cqw;font-weight:900;box-shadow:0 .15cqw .5cqw rgba(0,0,0,.18)}
.draw-card strong{display:block;margin:.18cqw 0 0;text-transform:uppercase;font-size:1.18cqw;line-height:1;font-weight:900}.draw-card span{display:block;font-size:.76cqw;line-height:1.05;font-weight:700}

/* Voiture */
.car-section{
  height:41.475cqw;
  background:var(--yellow);
  position:relative;
  overflow:hidden;
  color:var(--text-blue);
}

.car-section h2{
  position:absolute;
  top:3.08cqw;
  left:0;
  right:0;
  margin:0;
  text-align:center;
  color:var(--text-blue);
  font-size:3.72cqw;
  text-transform:uppercase;
  z-index:8;
}

.exceptional-title{
  position:absolute;
  left:5.15cqw;
  top:13.15cqw;
  width:35.8cqw;
  max-width:none;
  z-index:9;
}

.bow{
  position:absolute;
  left:53.05cqw;
  top:7.85cqw;
  width:19.05cqw;
  max-width:none;
  z-index:10;
  transform:translateX(-50%);
}

.car{
  position:absolute;
  left:33.15cqw;
  bottom:2.05cqw;
  width:50.35cqw;
  max-width:none;
  z-index:6;
}

.conf-car-left{
  left:-5.6cqw;
  top:-4.55cqw;
  width:28.6cqw;
}

.conf-car-right{
  right:-5cqw;
  top:-.8cqw;
  width:23.5cqw;
}

@media (min-width:981px){
  .car-section{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:5334/2212 !important;
    padding:0 !important;
    background:var(--yellow) url("assets/last-section-reference-crop.png") no-repeat center center / 100% 100% !important;
    overflow:hidden !important;
  }

  .car-section .conf,
  .car-section h2,
  .car-section .exceptional-title,
  .car-section .bow,
  .car-section .car{
    display:none !important;
  }
}

@media (max-width:980px){
  body{
    background:#fff;
  }

  .page{
    width:100%;
    box-shadow:none;
    overflow:hidden;
    container-type:normal;
  }

  body,
  button,
  .menu a,
  .hero-date,
  .hero-text,
  .play-btn,
  .step,
  .draw-card,
  .draw-title,
  .prize-text{
    font-family:"DIN Pro",Arial,Helvetica,sans-serif;
  }

  .script{
    font-family:"Another Shabby","DIN Pro",Arial,sans-serif;
    font-style:normal;
    font-weight:400;
    letter-spacing:0;
    word-spacing:.09em;
  }

  .mobile-break{
    display:block;
  }

  /* Header */
  .site-header{
    height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 22px;
    background:#fff;
    position:relative;
    z-index:50;
  }

  .logo{
    position:static;
    width:126px;
    display:block;
  }

  .logo img{
    width:100%;
  }

  .socials{
    display:none;
  }

  .burger{
    display:flex;
    position:static;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    margin-left:auto;
    border:0;
    background:transparent;
    padding:0;
  }

  .burger span{
    display:block;
    width:28px;
    height:4px;
    background:var(--pink);
    border-radius:999px;
    transition:.25s;
  }

  .menu{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:70px;
    height:auto;
    background:#fff;
    flex-direction:column;
    gap:18px;
    padding:20px 18px 24px;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    z-index:40;
  }

  .site-header.menu-open .menu{
    display:flex;
  }

  /* +2px : 16px → 18px */
  .menu a{
    font-size:18px;
  }

  .site-header.menu-open .burger span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
  }

  .site-header.menu-open .burger span:nth-child(2){
    opacity:0;
  }

  .site-header.menu-open .burger span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
  }

  /* Hero */
  .hero{
    height:auto;
    min-height:clamp(650px,170vw,810px);
    padding:0 18px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:relative;
  }

  .hero-content{
    position:relative;
    left:auto;
    top:auto;
    z-index:6;
    width:min(100%,390px);
    margin:-2px auto 0;
    padding:0 4px;
    text-align:center;
  }

  /* +2px : clamp(19px,5.7vw,25px) → clamp(21px,5.7vw,27px) */
  .hero-date{
    margin:0 0 6px;
    font-size:clamp(21px,5.7vw,27px);
    line-height:1;
  }

  /* +2px : clamp(22px,6.1vw,28px) → clamp(24px,6.1vw,30px) */
  .hero-small{
    font-size:clamp(24px,6.1vw,30px);
    line-height:1;
  }

  /* +2px : clamp(34px,9.5vw,48px) → clamp(36px,9.5vw,50px) */
  .hero h1{
    max-width:100%;
    margin:4px auto 12px;
    font-size:clamp(36px,9.5vw,50px);
    line-height:.92;
    white-space:nowrap;
  }

  .hero-logo{
    width:clamp(142px,42vw,182px);
    margin:0 auto 14px;
  }

  /* +2px : clamp(12px,3.55vw,15px) → clamp(14px,3.55vw,17px) */
  .hero-text{
    margin:0 0 12px;
    font-size:clamp(14px,3.55vw,17px);
    line-height:1.08;
  }

  /* +2px : 11px → 13px */
  .play-btn{
    min-width:104px;
    height:31px;
    font-size:13px;
    margin-bottom:30px;
  }

  .hero-visual{
    position:relative;
    z-index:1;
    left:50%;
    top:auto;
    bottom:auto;
    width:clamp(560px,136vw,730px);
    max-width:none;
    margin-top:10px;
    transform:translateX(-50%);
  }

  .gift{
    display:none;
  }

  /* Comment jouer */
  .how{
    height:auto;
    padding:34px 22px 42px;
  }

  /* +2px : clamp(32px,8.7vw,46px) → clamp(34px,8.7vw,48px) */
  .how h2{
    position:static;
    width:100%;
    margin:0 auto 30px;
    text-align:center;
    font-size:clamp(34px,8.7vw,48px);
    line-height:.86;
    white-space:nowrap;
  }

  .step{
    position:static;
    width:min(100%,285px);
    margin:0 auto 42px;
  }

  .step:last-child{
    margin-bottom:0;
  }

  /* +2px : 14px → 16px */
  .step h3{
    min-width:96px;
    height:29px;
    border-width:2px;
    border-radius:8px;
    font-size:16px;
  }

  /* +2px : 12.4px → 14.4px */
  .step p,
  .step strong{
    font-size:14.4px;
    line-height:1.08;
  }

  .arrow{
    width:25px;
    height:25px;
    font-size:18px;
  }

  /* Cadeaux */
  .prizes{
    position:relative;
    height:900px;
    min-height:900px;
    padding:0;
    overflow:hidden;
  }

  /* +2px : clamp(34px,8.6vw,48px) → clamp(36px,8.6vw,50px) */
  .prizes h2{
    position:absolute;
    top:32px;
    left:50%;
    width:92%;
    max-width:430px;
    margin:10;
    text-align:center;
    transform:translateX(-50%);
    z-index:12;
    font-size:clamp(36px,8.6vw,50px);
    line-height:.92;
  }

  .container-gifts{
    position:absolute;
    top:122px;
    left:50%;
    width:760px;
    max-width:none;
    transform:translateX(-50%);
    z-index:3;
  }

  /* +2px : clamp(15px,4.2vw,21px) → clamp(17px,4.2vw,23px) */
  .prize-text{
    position:absolute;
    top:340px;
    left:50%;
    width:86%;
    max-width:390px;
    margin:0;
    text-align:center;
    transform:translateX(-50%);
    z-index:14;
    font-size:clamp(17px,4.2vw,23px);
    line-height:1.08;
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.24);
  }

  .draw-card{
    position:absolute;
    top:450px;
    left:50%;
    bottom:auto;
    width:min(88%,420px);
    height:130px;
    padding-top:44px;
    transform:translateX(-50%);
    z-index:15;
    border-radius:12px;
  }

  /* +2px : 20px → 22px */
  .draw-title{
    top:-22px;
    height:44px;
    font-size:22px;
    border-radius:4px;
  }

  /* +2px : 20px → 22px */
  .draw-card strong{
    font-size:22px;
    line-height:.95;
  }

  /* +2px : 15px → 17px */
  .draw-card span{
    font-size:17px;
    line-height:1;
  }

  .man{
    position:absolute;
    left:3%;
    bottom:0;
    width:44%;
    max-width:245px;
    z-index:8;
  }

  .woman{
    position:absolute;
    left:auto;
    right:2%;
    bottom:0;
    width:37%;
    max-width:215px;
    z-index:8;
  }

  .conf-prize-left{
    left:-140px;
    bottom:40px;
    width:360px;
  }

  .conf-prize-right{
    right:-170px;
    top:85px;
    width:360px;
  }

  .conf-prize-fall{
    left:-120px;
    top:105px;
    width:420px;
  }

  /* Dernière section mobile */
  .car-section{
    position:relative !important;
    height:600px !important;
    min-height:600px !important;
    padding:0 !important;
    overflow:hidden !important;
    background:var(--yellow) !important;
  }

  .car-section .conf,
  .car-section h2,
  .car-section .exceptional-title,
  .car-section .bow,
  .car-section .car{
    display:block !important;
  }

  .car-section .conf-car-left{
    left:-34% !important;
    top:-6% !important;
    width:72% !important;
    z-index:2 !important;
  }

  .car-section .conf-car-right{
    right:-34% !important;
    top:-4% !important;
    width:66% !important;
    z-index:2 !important;
  }

  /* +2px : clamp(38px,10vw,58px) → clamp(40px,10vw,60px) */
  .car-section h2{
    position:absolute !important;
    top:34px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    text-align:center !important;
    color:var(--text-blue) !important;
    font-size:clamp(40px,10vw,60px) !important;
    line-height:.92 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    transform:none !important;
    z-index:20 !important;
  }

  .car-section .exceptional-title{
    position:absolute !important;
    top:118px !important;
    left:50% !important;
    width:min(74%,360px) !important;
    min-width:0 !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    z-index:18 !important;
  }

  .car-section .car{
    position:absolute !important;
    left:50% !important;
    bottom:4px !important;
    width:560px !important;
    max-width:132% !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
    z-index:10 !important;
  }

  .car-section .bow{
    position:absolute !important;
    left:50% !important;
    top:auto !important;
    bottom:182px !important;
    width:165px !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    z-index:22 !important;
  }
}

@media (max-width:760px){
  .mobile-break{
    display:block;
  }

  /* +2px : clamp(34px,8.7vw,42px) → clamp(36px,8.7vw,44px) */
  .hero h1{
    font-size:clamp(36px,8.7vw,44px);
  }

  /* +2px : clamp(27px,6.5vw,33px) → clamp(29px,6.5vw,35px) */
  .how h2{
    font-size:clamp(29px,6.5vw,35px);
    word-spacing:.04em;
  }

  /* +2px : clamp(25px,6.4vw,32px) → clamp(27px,6.4vw,34px) */
  .prizes h2{
    width:min(92%,320px);
    font-size:clamp(27px,6.4vw,34px);
    word-spacing:.02em;
  }
}

@media (max-width:420px){
  .site-header{
    height:64px;
    padding:0 18px;
  }

  .logo{
    width:112px;
  }

  .menu{
    top:64px;
  }

  .burger{
    width:38px;
    height:38px;
  }

  .burger span{
    width:26px;
    height:3px;
  }

  .hero{
    min-height:655px;
    padding-inline:14px;
  }

  /* +2px : 36px → 38px */
  .hero h1{
    font-size:38px;
    line-height:.94;
  }

  .hero-visual{
    width:548px;
    margin-top:8px;
  }

  /* +2px : 27px → 29px */
  .how h2{
    font-size:29px;
  }

  .prizes{
    height:860px;
    min-height:860px;
  }

  /* +2px : 37px → 39px */
  .prizes h2{
    top:52px;
    font-size:39px;
  }

  .container-gifts{
    top:122px;
    width:675px;
  }

  /* +2px : 17px → 19px */
  .prize-text{
    top:440px;
    max-width:330px;
    font-size:19px;
  }

  .draw-card{
    top:518px;
    width:min(88%,340px);
    height:126px;
    padding-top:42px;
  }

  /* +2px : 18px → 20px */
  .draw-title{
    height:42px;
    top:-21px;
    font-size:20px;
  }

  /* +2px : 18px → 20px */
  .draw-card strong{
    font-size:20px;
  }

  /* +2px : 14px → 16px */
  .draw-card span{
    font-size:16px;
  }

  .man{
    max-width:210px;
  }

  .woman{
    max-width:178px;
  }

  .car-section{
    height:480px !important;
    min-height:480px !important;
  }

  /* +2px : 40px → 42px */
  .car-section h2{
    top:32px !important;
    font-size:42px !important;
    line-height:.92 !important;
  }

  .car-section .exceptional-title{
    top:60px !important;
    left:50% !important;
    width:300px !important;
    max-width:80% !important;
    min-width:0 !important;
    transform:translateX(-50%) !important;
  }

  .car-section .car{
    bottom:4px !important;
    width:505px !important;
    max-width:134% !important;
  }

  .car-section .bow{
    bottom:190px !important;
    left:48% !important;
    width:148px !important;
  }
}

/* PATCH MOBILE — masquer les paillettes bleues dans la section voiture */
@media (max-width:980px){
  .car-section .conf-car-left,
  .car-section .conf-car-right{
    display:none !important;
  }
}

@media (max-width:980px){
  /* patch vide conservé */
}

/* ICÔNES ÉTAPES EN IMAGES */
.step-icon{
  display:block;
  object-fit:contain;
  max-width:none;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}

.step-icon-kiosk{
  width:4.85cqw;
  margin-top:1.4cqw;
}

.step-icon-container{
  width:12.8cqw;
  margin-top:1.25cqw;
}

.step-icon-phone{
  width:7.4cqw;
  margin-top:1.25cqw;
}

@media (max-width:980px){
  /* +2px : 78px → 80px */
  .step-icon-kiosk{
    width:80px !important;
    margin-top:18px !important;
  }

  /* +2px : 190px → 192px (largeur, pas du texte, non modifié) */
  .step-icon-container{
    width:190px !important;
    margin-top:26px !important;
  }

  /* +2px : 108px → 110px (largeur, pas du texte, non modifié) */
  .step-icon-phone{
    width:108px !important;
    margin-top:20px !important;
  }
}

@media (max-width:420px){
  .step-icon-kiosk{
    width:74px !important;
    margin-top:18px !important;
  }

  .step-icon-container{
    width:178px !important;
    margin-top:28px !important;
  }

  .step-icon-phone{
    width:102px !important;
    margin-top:20px !important;
  }
}