/* ============================================================================
   Modul@net — utilities.css
   ----------------------------------------------------------------------------
   Adaptations aux petites largeurs et neutralisation du mouvement.
   Chargé en dernier : c'est ce qui doit gagner la cascade.
   ============================================================================ */

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .shift{grid-template-columns:1fr}
  .report .cols{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .auditgrid{grid-template-columns:1fr}
  .refus li{grid-template-columns:1fr;gap:12px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .grid4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .brow,.axis{grid-template-columns:84px 1fr 48px;gap:12px}
  .jlist a{grid-template-columns:1fr;gap:10px}
  .jlist .meta{flex-direction:row;gap:16px;align-items:center}
  .fgrid{grid-template-columns:1fr}
  .aform .row{grid-template-columns:1fr}
  .btn{width:100%;justify-content:space-between}
  .hero .acts{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1;transform:none}
  .js .tt[data-rv]{clip-path:none}
}

/* ============================================================================
   Neutralisation du mouvement
   ----------------------------------------------------------------------------
   Deux voies, et elles doivent faire exactement la même chose :
     · prefers-reduced-motion — le réglage système du visiteur ;
     · data-motion="off" — la commande de pause visible en pied de page,
       exigée par le brief §4 (WCAG 2.2.2).

   Y COMPRIS SUR LES PSEUDO-ÉLÉMENTS : c'est la précision du brief, et c'est
   ce que la plupart des implémentations oublient — le bandeau et les lueurs
   vivent dans des ::before et des ::after.
   ============================================================================ */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  /* Le délai compte autant que la durée, et il manquait : `both` garde
     l’état de départ pendant tout le délai. */
  animation-delay:0s!important;
  transition-duration:.001ms!important;
  transition-delay:0s!important;
  scroll-behavior:auto!important;
}
html[data-motion="off"] [data-rv]{opacity:1!important;transform:none!important}
html[data-motion="off"] .tt[data-rv]{clip-path:none!important}
html[data-motion="off"] .units span{opacity:1!important;transform:none!important}
html[data-motion="off"] .plan ul li{opacity:1!important;transform:none!important}

/* ============================================================================
   Sans JavaScript, TOUT reste lisible
   ----------------------------------------------------------------------------
   Recette §10 du handoff : « JavaScript désactivé : tout le contenu reste
   visible et lisible. » C'est ce filet-ci qui le garantit — pas une promesse
   dans un document.
   ============================================================================ */
.no-js [data-rv]{opacity:1;transform:none}
.no-js .tt[data-rv]{clip-path:none}
.no-js .units span{opacity:1;transform:none}
.no-js .plan ul li{opacity:1;transform:none}
/* `.no-js .hero h1 .ln>span` retiré au lot 1 : reveal.js ne pose plus de
   transform en ligne, il n’y avait plus rien à annuler. */
.no-js #field,.no-js #signe{display:none}

/* ============================================================================
   LISIBILITÉ DU HERO EN PETITE LARGEUR
   ----------------------------------------------------------------------------
   Constaté au navigateur à 400 px : la colonne de texte se superpose à la
   partie la plus claire de la sculpture, et le chapô devient difficile à lire.
   En grand écran, le texte est à gauche et l'objet à droite — le problème
   n'existe pas. En colonne, il faut assombrir davantage.

   On renforce le voile plutôt que de rétrécir le texte : la sculpture est le
   LCP du site, on ne la remplace pas par un aplat.
   ============================================================================ */
@media (max-width:1000px){
  .hero .veil{
    background:
      linear-gradient(180deg,rgba(9,10,12,.88) 0%,rgba(9,10,12,.80) 42%,rgba(9,10,12,.94) 78%),
      linear-gradient(0deg,var(--mn-bg) 2%,transparent 34%);
  }
  .hero .glow{opacity:.5}
}

/* La commande de pause et Modu sont fixes en bas d'écran. Sans cette réserve,
   ils recouvrent la dernière ligne du pied de page, qu'on ne peut alors plus
   lire ni cliquer. */
@media (max-width:900px){
  footer.site{padding-bottom:96px}
}