/* =====================================================================
   Alexo — adaptation à tous les écrans : du petit mobile (320 px)
   aux écrans géants (49" et 57" ultra-larges, 4K, 5K, 8K).
   ===================================================================== */

/* ---------- Grands écrans : tout le site est agrandi proportionnellement ----------
   Le facteur dépend de la largeur ET de la hauteur, pour rester confortable
   sur les écrans ultra-larges (32:9) qui sont très larges mais peu hauts. */
@media (min-width:2200px) and (min-height:1150px){html{zoom:1.25}}
@media (min-width:2800px) and (min-height:1350px){html{zoom:1.4}}
@media (min-width:3400px) and (min-height:1800px){html{zoom:1.75}}
@media (min-width:4400px) and (min-height:2000px){html{zoom:2}}
@media (min-width:6000px) and (min-height:2800px){html{zoom:2.6}}

/* Écrans larges : le contenu prend plus de place en largeur */
@media (min-width:1700px){
  .wrap{max-width:1500px}
  header .nav{max-width:1540px}
}
/* Écrans ultra-larges (21:9, 32:9) : colonnes encore plus larges */
@media (min-width:2500px) and (min-aspect-ratio:21/9){
  .wrap{max-width:1840px}
  header .nav{max-width:1880px}
  .hero-layout{gap:120px}
  .services{gap:22px}
}
@media (min-width:4400px) and (min-aspect-ratio:3/1){
  .wrap{max-width:2100px}
  header .nav{max-width:2140px}
}

/* ---------- Mobile ---------- */
/* Petits mobiles (320–374 px) : marges et titres un peu plus compacts */
@media(max-width:374px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  header{padding:6px 8px 0}
  header .nav{padding:6px 8px 6px 12px!important}
  header .nav .logo img{width:118px!important}
  .hero-copy h1,.cabinet-copy h1,.product-layout h1{font-size:clamp(36px,11.5vw,44px)!important;letter-spacing:-.04em!important}
  .btn{padding-left:18px;padding-right:18px}
  .fx-stat strong{font-size:40px}
}
/* Mobile en paysage (écran bas) : en-tête et haut de page compacts */
@media (max-height:520px) and (orientation:landscape){
  header{padding:6px 10px 0}
  header .nav{padding:6px 10px 6px 18px!important}
  header .nav .logo img{width:112px!important}
  header .nav .links{font-size:14px!important;gap:16px!important}
  .hero-layout,.cabinet-layout,.product-layout{min-height:0!important}
  .method-panel{position:relative!important;top:auto!important}
}
/* Tablettes : la section méthode n'empile plus les cartes (trop peu de hauteur) */
@media (max-height:760px){
  .method-panel{position:relative!important;top:auto!important}
}

/* ---------- Icônes SVG (remplacent les flèches, coches, astérisques et le menu Unicode, rendus en émoji sur iPhone) ---------- */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Accessibilité : réglage système « réduire les animations » ----------
   Remplace l'ancien bouton pause. site.js ajoute aussi la classe .motion-off pour
   couper les effets pilotés en JavaScript (parallaxe, curseur, rideau, compteurs…). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto!important}
  .reveal,.fx-item,.fx-words .fx-w>span,.fx-wordmark span{opacity:1!important;transform:none!important;filter:none!important}
  .hero-copy h1 .line>span,.hero-scene{opacity:1!important;transform:none!important}
  .fx-clip{clip-path:none!important}
  .fx-scrub .fx-sw{opacity:1!important}
  .fx-curtain,.fx-cursor,.fx-cursor-dot,.fx-glow{display:none!important}
  html.fx-pending::before{display:none!important}
}