/* ═══ HERO « B » (maquette 12/11/2026) : photo code + site, texte aligné à gauche ═══
   Photo : Unsplash (licence Unsplash, usage commercial gratuit) — unsplash.com/photos/LJ9KY8pIH3E */
.hero-bg-web{
  background-image:linear-gradient(90deg,rgba(5,12,12,.9) 0%,rgba(5,12,12,.6) 45%,rgba(5,12,12,.12) 100%),url('../ressources/hero_code_md.webp')!important;
  background-size:cover!important;background-position:center!important}
@media (max-width:768px){
  .hero-bg-web{background-image:linear-gradient(180deg,rgba(5,12,12,.35),rgba(5,12,12,.72) 55%,rgba(5,12,12,.88)),url('../ressources/hero_code_mobile.webp')!important}
}
/* mise en page : bloc de texte à gauche, aligné sur le menu */
.hero-bg-web > div{align-items:flex-start!important;padding:0 24px 0 max(24px,calc((100vw - 1180px)/2 + 34px))}
.hero-bg-web > div > div{margin-top:40px!important;max-width:720px}
.hero-bg-web h2,.hero-bg-web h1,.hero-bg-web p{text-align:left!important}
.hero-bg-web h1{display:block!important;font-size:clamp(38px,4.4vw,60px)!important;line-height:1.05!important;margin-top:18px!important}
.hero-bg-web p{text-transform:none!important;font-weight:500!important;font-size:18px!important;line-height:1.6;color:rgba(255,255,255,.85)!important;max-width:560px;margin-top:0!important}
.hero-bg-web p:first-of-type{margin-top:64px!important}
.hero-bg-web .flex.justify-center.gap-5{justify-content:flex-start!important;margin-top:32px!important}

/* la machine à écrire est remplacée par une apparition ligne par ligne (le titre peut passer sur plusieurs lignes) */
#line1,#line2{display:inline!important;opacity:0;white-space:normal!important;overflow:visible!important;border:0!important;padding:0!important;width:auto!important;
  animation:hero-up .9s cubic-bezier(.22,1,.36,1) forwards!important}
#line1{animation-delay:.15s!important}#line2{animation-delay:.35s!important}
.hero-bg-web h2{opacity:0;animation:hero-up .8s cubic-bezier(.22,1,.36,1) forwards}
.hero-bg-web p,.hero-bg-web .flex.justify-center.gap-5{opacity:0;animation:hero-up .9s .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes hero-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:1050px){.hero-bg-web p{font-size:15px!important}.hero-bg-web h1{font-size:clamp(34px,8vw,48px)!important}}
@media (prefers-reduced-motion:reduce){#line1,#line2,.hero-bg-web h2,.hero-bg-web p,.hero-bg-web .flex.justify-center.gap-5{animation:none!important;opacity:1!important}}

/* grands écrans / écrans haute définition : photo 3200 px */
@media (min-width:1601px),(min-width:1000px) and (min-resolution:1.5dppx){
  .hero-bg-web{background-image:linear-gradient(90deg,rgba(5,12,12,.9) 0%,rgba(5,12,12,.6) 45%,rgba(5,12,12,.12) 100%),url('../ressources/hero_code.webp')!important}
}
/* le hero fait exactement la hauteur de l'écran ; la suite apparaît en descendant */
div:has(> .hero-bg-web){height:100vh!important;height:100svh!important;min-height:600px!important;max-height:none!important}
.hero-bg-web > div > div{margin-top:0!important}
/* indication « faites défiler » */
.hero-scroll{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:28px;z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.75);text-decoration:none;font:600 12px/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:hero-up .9s 1.1s cubic-bezier(.22,1,.36,1) forwards}
.hero-scroll:hover{color:#fff}
.hero-scroll i{position:relative;width:26px;height:40px;border:2px solid currentColor;border-radius:14px}
.hero-scroll i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#2dd4bf;animation:hero-wheel 1.8s ease-in-out infinite}
@keyframes hero-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-height:640px){.hero-scroll{display:none}}
/* très grands écrans : on agrandit le texte en proportion */
@media (min-width:1800px){
  .hero-bg-web > div{padding-left:calc((100vw - 1500px)/2 + 34px)}
  .hero-bg-web > div > div{max-width:900px}
  .hero-bg-web h1{font-size:clamp(60px,3.6vw,84px)!important}
  .hero-bg-web h2{font-size:18px!important}
  .hero-bg-web p{font-size:21px!important;max-width:680px}
  .hero-bg-web .flex.justify-center.gap-5 a{font-size:18px!important;padding:18px 32px!important}
}
@media (max-width:768px){.hero-scroll{bottom:84px}}
/* ═══ Boutons du hero — style 3 « Halo lumineux » ═══ */
.hero-bg-web .hb-p,.hero-bg-web .hb-s{position:relative;display:inline-flex!important;align-items:center;gap:10px;font:700 17px/1 var(--font-text);text-decoration:none;
  padding:18px 28px!important;border-radius:14px!important;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .35s,color .35s}
.hero-bg-web .hb-p{color:#071010;background:linear-gradient(135deg,#5eead4,#14b8a6);box-shadow:0 10px 30px -10px rgba(45,212,191,.6)}
.hero-bg-web .hb-p svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hero-bg-web .hb-p:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(45,212,191,.18),0 18px 44px -10px rgba(45,212,191,.8)}
.hero-bg-web .hb-p:hover svg{transform:translate(3px,-3px)}
.hero-bg-web .hb-p:active{transform:translateY(0) scale(.98)}
.hero-bg-web .hb-s{color:#fff;background:rgba(7,16,16,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-bg-web .hb-s::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#5eead4,rgba(255,255,255,.15),#14b8a6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.hero-bg-web .hb-s:hover{background:rgba(45,212,191,.14);transform:translateY(-2px)}
.hero-bg-web .hb-p:focus-visible,.hero-bg-web .hb-s:focus-visible{outline:2px solid #5eead4;outline-offset:4px}
@media (max-width:1050px){.hero-bg-web .hb-p,.hero-bg-web .hb-s{font-size:15px;padding:15px 22px!important}}
@media (min-width:1800px){.hero-bg-web .hb-p,.hero-bg-web .hb-s{font-size:18px;padding:20px 32px!important}}