@font-face{font-family:'DM Sans';font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Syne';font-weight:800;font-display:swap;src:url(fonts/syne-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F6F4ED;font-family:'DM Sans',system-ui,sans-serif;color:#1A3C34}
img,video{max-width:100%}
a{color:#1A3C34}a:hover{color:#0f2620}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #F1C40F;outline-offset:3px}

.hero-bg{background-image:linear-gradient(90deg,rgba(15,38,32,.90) 0%,rgba(15,38,32,.65) 55%,rgba(15,38,32,.30) 100%),url(img/champ-fleurs.jpg);background-size:cover;background-position:center}
.why-bg{background:radial-gradient(ellipse at 70% 0%,#e3ebdc 0%,#F6F4ED 60%)}

/* Fenêtres (vol démo, rapport) */
dialog{padding:0;border:0;background:transparent;width:calc(100% - 32px);max-width:480px;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog.large{max-width:900px}
dialog::backdrop{background:rgba(10,22,19,.72)}
dialog .fenetre{box-shadow:0 30px 80px rgba(0,0,0,.35)}
button[data-fermer]{border:0;padding:0;cursor:pointer;background:transparent;z-index:2}
#courriel-rapport:focus-visible{outline:none}
.formulaire div:has(> #courriel-rapport:focus-visible){outline:3px solid #F1C40F;outline-offset:2px}
.formulaire input[aria-invalid="true"]{border-color:#b0302a!important}
.erreur{margin:0;color:#9b2c22;font-size:14px;font-weight:500}
.formulaire button[disabled]{opacity:.65;cursor:progress}
.succes{display:flex;flex-direction:column;gap:12px}
.succes h3{margin:0;font-size:28px;letter-spacing:-.02em}
.succes p{margin:0;font-size:17px;line-height:1.5;color:#4a5f58}
.succes a.bouton{display:inline-flex;justify-content:center;background:#F1C40F;color:#1A3C34;font-weight:700;font-size:17px;text-decoration:none;padding:15px 20px;border-radius:12px}

/* Cellulaire */
@media (max-width:900px){.ligne-etapes{display:none}}
@media (max-width:700px){
  .hero-bg{background-image:linear-gradient(180deg,rgba(15,38,32,.82) 0%,rgba(15,38,32,.78) 100%),url(img/champ-fleurs-mobile.jpg)}
  .hero-bg > div{padding-top:56px!important;padding-bottom:72px!important}
  .hero-bg nav{gap:14px!important;font-size:14px!important}
  section > div,section{padding-left:16px!important;padding-right:16px!important}
  .hero-bg header{padding-left:16px!important;padding-right:16px!important}
  dialog .fenetre{padding:32px 22px 24px!important}
  dialog.large .fenetre > div{padding:28px 22px!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
