/* MGI Normandie : micro-interactions "laser" : curseur point + halo magnétique, étincelles au clic.
   Respecte prefers-reduced-motion et ne s'active que sur pointeur précis (pas tactile). */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body{cursor:none}
  a,button,select,input,textarea,summary,label,.burger{cursor:none}
  #lzr-dot{position:fixed;left:-100px;top:-100px;z-index:9999;width:8px;height:8px;border-radius:50%;
    background:#c80873;box-shadow:0 0 10px 2px rgba(200,8,115,.85),0 0 24px 7px rgba(200,8,115,.35);
    pointer-events:none;transform:translate(-50%,-50%);transition:background .18s,box-shadow .18s}
  #lzr-ring{position:fixed;left:-100px;top:-100px;z-index:9998;width:34px;height:34px;border-radius:50%;
    border:1.5px solid rgba(200,8,115,.5);pointer-events:none;transform:translate(-50%,-50%);
    transition:width .25s cubic-bezier(.3,1.2,.4,1),height .25s cubic-bezier(.3,1.2,.4,1),
      border-radius .25s,border-color .25s}
  body.lzr-hover #lzr-dot{background:#6fbf9e;box-shadow:0 0 10px 2px rgba(111,191,158,.9),0 0 20px 6px rgba(111,191,158,.35)}
  body.lzr-down #lzr-dot{transform:translate(-50%,-50%) scale(.6)}
}
.lzr-spark{position:fixed;z-index:9997;width:5px;height:5px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
@keyframes lzrs{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1);opacity:0}}
/* trait de titre : se "grave" au défilement */
@media (prefers-reduced-motion:no-preference){
  .reveal .bar{width:0;transition:width .9s cubic-bezier(.25,.8,.25,1) .25s}
  .reveal.in .bar{width:72px}
}

#menu a.cta.cta-boutique{background:linear-gradient(100deg,#e6007e,#f7a600 55%,#35b78f);color:#fff}


/* --- 17/08/2026 : pied de page collé en bas sur les pages courtes (espace client, pages sans contenu) --- */
html { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; }
body > footer { margin-top: auto; }


/* ------------------------------------------------------------------
   Espacement sous les filets degrades.

   Le filet (span.bar dans h2.title) n avait pas de marge basse :
   l ecart venait du bloc suivant (.mo-grid, 26 px). Partout ailleurs
   panneau de la bibliotheque, encart « ce que nous ne faisons pas »,
   paragraphe d introduction du formulaire : le filet se retrouvait
   pose sur le bloc. On met l espace sur le titre : les marges
   adjacentes se regroupent, donc les sections deja correctes gardent
   leurs 26 px.
   ------------------------------------------------------------------ */
body h2.title { margin-bottom: 26px; }

/* Les cartes de chiffres etaient collees au bas de la photo principale
   (aucune marge haute, alors qu il y a 110 px sous les cartes). */
body header.page-hero + section.specs { padding-top: 72px; }

/* ---------------------------------------------------------------
   30/08/2026 - debordement horizontal sur mobile.
   Le corps de page est un conteneur flex en colonne : ses enfants
   ne sont pas etires, ils sont dimensionnes par leur contenu. Une
   grille en repeat(auto-fit, minmax(...)) se deploie alors sur sa
   largeur maximale au lieu de se replier -- 1038 px de large dans
   un ecran de 386 px sur la page tampons. On force la largeur des
   blocs de premier niveau et on autorise le retrait sous la
   largeur mini du contenu. Les elements flottants en position
   fixed sont volontairement exclus.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  body > main, body > header, body > section, body > article,
  body > footer, body > div[class] {
    width: 100%;
    min-width: 0;
  }
  main, main > section, main section, main article,
  main fieldset, main .panneau, main .config-grid {
    min-width: 0;
  }
}

/* Tableaux larges : on les rend defilables au doigt plutot que de
   laisser la page deborder (grille de prix des plaques de rue). */
@media (max-width: 700px) {
  .grille-qte, div:has(> table) {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Barre de navigation : sur les pages ou elle reste en ligne, les
   liens depassaient a droite (constate sur livraison.html). */
@media (max-width: 700px) {
  nav.nav { flex-wrap: wrap; max-width: 100%; }
}