/* ==========================================================
   TY AVIS — site vitrine
   Système d'après Linear · hairlines au lieu d'ombres
   Inter 300-510, tracking serré · 3 rayons : 2 / 6 / 12
   Un seul accent chromatique : le sable. Jamais décoratif.
   Les variables sont dans tokens.css.
   ========================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--mist);
  font-family:var(--f);font-size:16px;font-weight:400;line-height:1.55;letter-spacing:0;
  font-feature-settings:"cv01" on,"ss03" on,"zero" on;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:1px solid var(--sable);outline-offset:3px;border-radius:var(--r-xs)}
.w{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:var(--m);letter-spacing:0}

/* type ---------------------------------------------------- */
h1{font-size:clamp(40px,6.2vw,72px);font-weight:510;line-height:1;letter-spacing:-.024em;color:var(--paper);font-optical-sizing:auto}
h2{font-size:clamp(30px,4vw,48px);font-weight:510;line-height:1.04;letter-spacing:-.02em;color:var(--paper);font-optical-sizing:auto}
h3{font-size:20px;font-weight:510;line-height:1.35;letter-spacing:-.014em;color:var(--paper)}
.sub{font-size:20px;font-weight:400;line-height:1.4;letter-spacing:-.012em;color:var(--fog)}
.bs{font-size:15px;line-height:1.65;letter-spacing:0;color:var(--fog)}
.cap{font-size:13px;line-height:1.45;letter-spacing:.006em;color:var(--pewter)}
.lbl{font-family:var(--m);font-size:12px;color:var(--fog);letter-spacing:.02em}

/* nav ----------------------------------------------------- */
/* --nav-p (0 -> 1) est piloté par un RESSORT dans site.js, au rythme du
   défilement. Plus de bascule au 30e pixel : le matériau s'installe
   progressivement, et s'inverse proprement si on remonte à mi-course.
   72 % d'opacité est le plancher mesuré pour que --mist, --paper et
   --sable restent AA même sur un fond clair. */
nav{position:fixed;inset:0 0 auto;z-index:60;--nav-p:0;
  background:rgba(8,11,16,calc(.72 * var(--nav-p)));
  -webkit-backdrop-filter:blur(calc(20px * var(--nav-p))) saturate(calc(100% + 80% * var(--nav-p)));
  backdrop-filter:blur(calc(20px * var(--nav-p))) saturate(calc(100% + 80% * var(--nav-p)));
  /* arête haute lumineuse = la lumière accrochée par le matériau,
     puis de la profondeur — jamais un trait de séparation */
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.07 * var(--nav-p))),
             0 8px 24px -12px rgba(0,0,0,calc(.7 * var(--nav-p)));
}
/* Bord de défilement dégradé plutôt qu'un filet de 1px. */
nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,16,.5),rgba(8,11,16,0));
  opacity:var(--nav-p)}
/* Sans backdrop-filter, on épaissit le fond : jamais de texte illisible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav{background:rgba(8,11,16,calc(.95 * var(--nav-p)))}
}
.nv{display:flex;align-items:center;justify-content:space-between;height:56px;gap:24px}
.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:510;color:var(--paper);letter-spacing:-.008em;position:relative}
.logo svg{width:15px;height:15px}
.logo path{fill:var(--sable)}
.nl{display:flex;align-items:center;gap:8px}
.nl a{font-size:13px;font-weight:400;color:var(--mist);padding:8px 12px;border-radius:var(--r-sm);position:relative;
  transition:color .2s,background .2s}
.nl .cta{background:var(--sable);color:var(--void);font-weight:510;font-size:13px;
  padding:8px 16px;border-radius:9999px;letter-spacing:0}
@media(max-width:820px){.nl a:not(.cta){display:none}}

/* sections ------------------------------------------------ */
section{padding:var(--gap) 0}
section[id]{scroll-margin-top:70px}
.hd{max-width:640px;margin-bottom:48px}
.hd .sub{margin-top:16px}
.eyebrow{font-family:var(--m);font-size:12px;letter-spacing:.02em;color:var(--sable);margin-bottom:20px;display:block}
.rule{height:.5px;background:var(--graphite)}

/* hero ---------------------------------------------------- */
.hero{padding:128px 0 var(--gap);position:relative;overflow:hidden}
.floor{position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,16,0) 10%,rgba(35,40,48,.34) 100%)}
.hero-in{position:relative;z-index:2}
.hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.hero h1{max-width:14ch}
.hero .sub{max-width:44ch;margin-top:20px}
.hero-r{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.arrow{font-size:15px;color:var(--mist);display:inline-flex;align-items:center;gap:7px;
  padding:8px 0;position:relative;transition:color .2s;letter-spacing:0}
.arrow svg{width:13px;height:13px}
.arrow path{stroke:currentColor;stroke-width:1.5;fill:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);
  font-size:14px;font-weight:510;letter-spacing:0;padding:10px 16px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;position:relative;
  transition:background .2s,color .2s,border-color .2s}
.btn-p{background:var(--sable);color:var(--void)}
.btn-g{background:transparent;border-color:var(--graphite);color:var(--mist)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* la carte produit : le hero visuel ----------------------- */
.frame{margin-top:64px;background:var(--carbon);border-radius:var(--r-md);
  box-shadow:var(--graphite) 0 0 0 1px inset;padding:var(--pad);position:relative;overflow:hidden}
.frame-in{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:stretch;min-height:320px}
@media(max-width:860px){.frame-in{grid-template-columns:1fr}}
.demo{position:relative;background:var(--void);border-radius:var(--r-sm);
  box-shadow:var(--graphite) 0 0 0 1px inset;
  display:flex;align-items:center;justify-content:center;padding:40px 20px;overflow:hidden;min-height:300px}
.wave{position:absolute;width:180px;height:180px;border-radius:9999px;
  border:1px solid rgba(217,199,169,.36);opacity:0;pointer-events:none}
.plq{position:relative;width:196px;aspect-ratio:3/4;background:var(--obsidian);
  border-radius:var(--r-sm);box-shadow:var(--graphite) 0 0 0 1px inset;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 18px;text-align:center;cursor:pointer;will-change:transform}
.plq-st{display:flex;gap:5px;margin-bottom:16px}
.plq-st svg{width:17px;height:17px}
.plq-st .s{display:inline-flex;transform:scale(.84);transform-origin:50% 50%}
.plq-st .s path{fill:var(--graphite);transition:fill .35s}
.plq-st .s.on path{fill:var(--sable)}
.plq-t{font-size:15px;font-weight:510;color:var(--paper);line-height:1.35;letter-spacing:-.006em}
.plq-s{font-size:12px;color:var(--fog);margin-top:8px}
.plq-m{margin-top:20px;padding-top:14px;width:62%;font-family:var(--m);font-size:11px;
  color:var(--sable);box-shadow:0 -1px 0 0 var(--graphite)}
.hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;
  color:var(--pewter)}
/* Le seul élément réellement flottant du hero : il se pose au-dessus
   de la plaque, donc il en est un matériau et non une carte. */
.tel{position:absolute;right:22px;bottom:26px;width:132px;
  background:rgba(15,19,25,.72);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--graphite) 0 0 0 1px inset,rgba(0,0,0,.5) 0 10px 28px -10px;
  padding:12px;opacity:0;transform:translateY(10px) scale(.96);will-change:transform,opacity}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tel{background:var(--carbon)}
}
.tel-o{font-family:var(--m);font-size:10px;color:var(--pewter)}
.tel-n{font-size:12px;font-weight:510;color:var(--paper);margin:6px 0 8px;letter-spacing:.004em}
.tel-s{display:flex;gap:2px}.tel-s svg{width:13px;height:13px}.tel-s path{fill:var(--sable)}
.tel-b{margin-top:10px;background:var(--sable);color:var(--void);border-radius:4px;
  font-size:10px;font-weight:600;padding:5px 0;text-align:center}
@media(max-width:520px){.tel{right:10px;bottom:10px;width:118px}}
/* panneau latéral façon "specs" */
.spec{background:var(--void);border-radius:var(--r-sm);box-shadow:var(--graphite) 0 0 0 1px inset;
  padding:20px;display:flex;flex-direction:column;gap:0}
.sp{padding:14px 0;box-shadow:0 -1px 0 0 var(--graphite)}
.sp:first-child{box-shadow:none;padding-top:0}
.sp .k{font-family:var(--m);font-size:11px;color:var(--pewter);display:block;margin-bottom:5px}
.sp .v{font-size:14px;font-weight:510;color:var(--paper);letter-spacing:0}
.sp .v small{font-weight:400;color:var(--fog);font-size:13px}

/* badges -------------------------------------------------- */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.bg{background:rgba(255,255,255,.05);color:var(--fog);border-radius:4px;padding:2px 8px;font-size:12px}

/* deux colonnes ------------------------------------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:32px}}
.prose p{color:var(--fog);font-size:16px;line-height:1.65;margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--mist);font-weight:510}

/* étapes : liste, pas grille ------------------------------ */
.steps{border-top:.5px solid var(--graphite)}
.st-row{display:grid;grid-template-columns:64px 260px 1fr;gap:24px;align-items:baseline;
  padding:28px 0;border-bottom:.5px solid var(--graphite);transition:background .25s}
.st-row:hover{background:rgba(255,255,255,.015)}
@media(max-width:760px){.st-row{grid-template-columns:44px 1fr;gap:16px}.st-row .d{grid-column:2}}
.st-row .n{font-family:var(--m);font-size:12px;color:var(--pewter)}
.st-row h3{margin:0}
.st-row .d{font-size:15px;color:var(--fog);line-height:1.65;letter-spacing:0}

/* offres -------------------------------------------------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:var(--carbon);border-radius:var(--r-md);box-shadow:var(--graphite) 0 0 0 1px inset;
  padding:28px;position:relative;transition:box-shadow .3s}
.card:hover{box-shadow:var(--smoke) 0 0 0 1px inset}
.card.hi{box-shadow:rgba(217,199,169,.35) 0 0 0 1px inset}
.card.hi:hover{box-shadow:rgba(217,199,169,.6) 0 0 0 1px inset}
.pill{position:absolute;top:20px;right:20px;background:rgba(217,199,169,.14);color:var(--sable);
  border-radius:9999px;padding:3px 10px;font-size:12px}
.card h3{margin-bottom:6px}
.card .who{font-size:13px;color:var(--pewter);margin-bottom:24px;min-height:36px;line-height:1.45}
.pz{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.pz .n{font-size:40px;font-weight:510;color:var(--paper);letter-spacing:-.024em;line-height:1}
.card.hi .pz .n{color:var(--sable)}
.pz .c{font-size:16px;color:var(--fog)}
.pz-n{font-size:13px;color:var(--pewter);margin-bottom:22px}
.inc{list-style:none;padding-top:18px;box-shadow:0 -1px 0 0 var(--graphite)}
.inc li{font-size:14px;color:var(--fog);padding:7px 0 7px 18px;position:relative;letter-spacing:0}
.inc li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:.5px;background:var(--smoke)}
.card.hi .inc li::before{background:var(--sable)}

/* tableau ------------------------------------------------- */
.tbl{margin-top:16px;border-radius:var(--r-md);box-shadow:var(--graphite) 0 0 0 1px inset;overflow:hidden}
.tr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 24px;
  box-shadow:0 -1px 0 0 var(--graphite);font-size:15px;letter-spacing:0}
.tr:first-child{box-shadow:none;font-family:var(--m);font-size:12px;color:var(--pewter);
  background:rgba(255,255,255,.02)}
.tr .l{color:var(--mist)}
.tr .u{color:var(--pewter);font-size:13px}
.tr b{color:var(--paper);font-weight:510}

/* abonnement ---------------------------------------------- */
.sub-card{background:var(--carbon);border-radius:var(--r-md);box-shadow:var(--graphite) 0 0 0 1px inset;padding:28px}
.sub-l{list-style:none;margin-top:20px;padding-top:18px;box-shadow:0 -1px 0 0 var(--graphite)}
.sub-l li{font-size:14px;color:var(--fog);padding:9px 0 9px 18px;position:relative;letter-spacing:0}
.sub-l li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:.5px;background:var(--sable)}
.free{display:inline-block;background:rgba(217,199,169,.12);color:var(--sable);
  border-radius:4px;padding:3px 9px;font-size:12px;margin-top:12px}

/* photos -------------------------------------------------- */
.gal{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
@media(max-width:860px){.gal{grid-template-columns:1fr}}
.gc{display:grid;gap:16px}
.sh{background:var(--carbon);border-radius:var(--r-md);box-shadow:var(--graphite) 0 0 0 1px inset;
  min-height:210px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sh.tall{min-height:436px}
.sh img{width:100%;height:100%;object-fit:cover}
.shp{text-align:center;padding:24px;color:var(--pewter);font-size:13px;line-height:1.7}
.shp b{display:block;color:var(--mist);font-weight:510;margin-bottom:4px;font-size:14px}
.shp code{font-family:var(--m);font-size:11px;background:rgba(255,255,255,.05);
  border-radius:4px;padding:2px 7px;color:var(--fog)}

/* garantie ------------------------------------------------ */
.grt{background:var(--carbon);border-radius:var(--r-md);box-shadow:var(--graphite) 0 0 0 1px inset;
  padding:44px 40px;text-align:center}
.grt h3{font-size:clamp(22px,3vw,32px);letter-spacing:-.02em;line-height:1.13;margin-bottom:14px}
.grt p{color:var(--fog);max-width:52ch;margin:0 auto;font-size:15px;line-height:1.65}

/* moi ----------------------------------------------------- */
.me{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}
@media(max-width:860px){.me{grid-template-columns:1fr;gap:32px}}
.me-ph{aspect-ratio:4/5;background:var(--carbon);border-radius:var(--r-md);
  box-shadow:var(--graphite) 0 0 0 1px inset;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.me-ph img{width:100%;height:100%;object-fit:cover}
.sig{font-size:15px;color:var(--sable);margin-top:22px;font-family:var(--m)}

/* faq ----------------------------------------------------- */
.faq{max-width:780px;border-top:.5px solid var(--graphite)}
.q{border-bottom:.5px solid var(--graphite)}
.q summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:16px;font-weight:510;color:var(--mist);letter-spacing:0;transition:color .2s}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";position:absolute;right:4px;top:31px;width:11px;height:1px;background:var(--fog)}
/* --q-open (0 -> 1) est piloté par un ressort : la barre verticale du
   « + » se rétracte au rythme de l'ouverture du panneau. */
.q{--q-open:0}
.q summary::before{content:"";position:absolute;right:9px;top:26px;width:1px;height:11px;
  background:var(--fog);transform:scaleY(calc(1 - var(--q-open)));opacity:calc(1 - var(--q-open))}
.q .a{padding:0 44px 24px 0;color:var(--fog);font-size:15px;line-height:1.65;letter-spacing:0;
  overflow:hidden}

/* contact ------------------------------------------------- */
.ct{background:var(--carbon);border-radius:var(--r-md);box-shadow:var(--graphite) 0 0 0 1px inset;
  padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.ct .glow{position:absolute;inset:auto 0 -60% 0;height:120%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 100%,rgba(217,199,169,.07),transparent 70%)}
.ct-in{position:relative;z-index:2}
.ct .sub{margin:14px auto 28px;max-width:44ch}
.ct-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ct-z{margin-top:32px;padding-top:20px;box-shadow:0 -1px 0 0 var(--graphite);
  font-size:13px;color:var(--pewter)}
.ct-z b{color:var(--mist);font-weight:400}

/* footer -------------------------------------------------- */
footer{padding:32px 0 48px;box-shadow:0 -1px 0 0 var(--graphite)}
.ft{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft-l{font-size:12px;color:var(--pewter);line-height:1.7;text-align:right;font-family:var(--m)}
/* accès CRM — discret, hors nav principale (BRIEF §3) */
.ft-l a{color:var(--pewter);border-bottom:.5px solid var(--graphite);position:relative;
  display:inline-block;transition:color .2s,border-color .2s}
@media(max-width:600px){.ft{flex-direction:column;text-align:center}.ft-l{text-align:center}}


/* ==========================================================
   §1 RÉPONSE et §2/§10 MANIPULATION DIRECTE

   « Le moment où le décalage apparaît, la sensation de
   directivité tombe d'une falaise. »

   Trois choses, dans cet ordre :
   1. supprimer toute latence sur le chemin d'entrée ;
   2. répondre à l'APPUI, jamais au relâchement ;
   3. rendre les cibles atteignables au pouce.
   ========================================================== */

/* --- 1. latence --- */
.btn,.nl a,.logo,.arrow,.plq,.q summary,.ft-l a{
  /* supprime le délai de 300 ms hérité du double-tap */
  touch-action:manipulation;
  /* on coupe le flash gris du navigateur : notre propre retour le remplace,
     et deux retours simultanés se contrarient */
  -webkit-tap-highlight-color:transparent;
}

/* --- 2. retour d'appui, instantané, sur pointer-down ---
   100 ms : assez court pour être perçu comme simultané au doigt. */
/* L'échelle d'appui est portée par un ressort (site.js) : marteler un
   bouton le re-cible depuis l'échelle courante au lieu de redémarrer.
   Ne rien déclarer ici, sinon le CSS et le ressort se disputeraient
   la même propriété transform. */
/* Le retour d'appui en opacité est lui aussi porté par un ressort
   (site.js) : plus aucune durée figée sur ce site. Rien ici, sinon le
   CSS et le ressort se disputeraient la propriété opacity. */
/* la flèche part dans le sens du geste dès l'appui (§8) : ressort, site.js */

/* --- 3. zones tactiles ---
   Les cibles font 17 à 40 px de haut, sous les 44 px confortables.
   On agrandit la zone SANS déplacer un pixel visible.
   Éléments alignés horizontalement (nav : 8 px d'écart, boutons : 12 px) :
   expansion VERTICALE seule, sinon les voisins se chevauchent et on
   touche le mauvais lien. Éléments isolés : expansion complète. */
.nl a::after,.btn::after{
  content:"";position:absolute;inset:-10px 0;border-radius:inherit;
}
/* Le logo (22 px) et le lien Connexion (17 px) sont les plus petites
   cibles du site : 10 px ne suffisaient pas à atteindre 44 px. Ils sont
   isolés, donc on peut aller à 14 px — le logo reste dans les 56 px de
   la barre, il ne déborde pas sur le contenu de la page. */
.logo::after,.arrow::after,.ft-l a::after{
  content:"";position:absolute;inset:-14px;border-radius:inherit;
}

/* --- 4. le survol n'existe que là où il y a un vrai curseur ---
   Sans ce garde, l'état survolé reste collé après un tap sur mobile. */
@media(hover:hover) and (pointer:fine){
  .nl a:hover{color:var(--paper);background:rgba(255,255,255,.04)}
  .nl .cta:hover{background:var(--paper);color:var(--void)}
  .arrow:hover{color:var(--paper)}
  .btn-p:hover{background:var(--paper)}
  .btn-g:hover{border-color:var(--smoke);color:var(--paper)}
  .q summary:hover{color:var(--paper)}
  .ft-l a:hover{color:var(--mist);border-bottom-color:var(--smoke)}
}

/* Le mouvement réduit est traité en UN SEUL endroit, plus bas :
   deux blocs séparés se contredisaient en silence. */

/* reveal -------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);will-change:transform,opacity}
.rv.in{opacity:1;transform:none;will-change:auto}

/* Le module d'animation n'a pas démarré (voir boot.js) : on montre tout
   immédiatement, sans mouvement. Mieux vaut un site sans animation
   qu'un site blanc. */
.no-anim .rv,.no-anim .tel{opacity:1!important;transform:none!important}
.no-anim .plq,.no-anim .plq-st .s,.no-anim .arrow svg{transform:none!important}
.no-anim nav{--nav-p:1}
.no-anim .hint{opacity:1}
/* Transparence réduite : on solidifie au lieu de flouter.
   La barre reste pilotée par --nav-p — elle se remplit au défilement
   au lieu de se dépolir, et reste invisible en haut de page. */
@media(prefers-reduced-transparency:reduce){
  /* Catch-all : aucun verre dépoli ne survit, y compris sur une surface
     qu'on ajouterait plus tard en oubliant ce bloc. */
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* La barre se REMPLIT au défilement au lieu de se dépolir. Elle reste
     invisible en haut de page : une barre opaque par-dessus le hero
     serait un changement de mise en page, pas une accommodation. */
  nav{background:rgba(8,11,16,var(--nav-p))}
  nav::after{opacity:0}
  .tel{background:var(--carbon)}
}
/* Contraste renforcé : fond plein et limite franche dès qu'on défile. */
@media(prefers-contrast:more){
  nav{background:rgba(8,11,16,var(--nav-p));
    box-shadow:0 1px 0 0 rgba(56,62,71,var(--nav-p))}
  nav::after{opacity:0}
  .cap,.card .who,.shp,.ct-z,.ft-l,.hint,.pz-n,.tr .u,.tr:first-child{color:var(--fog)}
}
/* §14 MOUVEMENT RÉDUIT
   Réduire le mouvement ne veut pas dire « aucun retour » : cela veut
   dire un retour NON VESTIBULAIRE. On supprime donc tout déplacement
   (glissement, échelle, parallaxe) et on le remplace par un fondu de
   150 ms : assez pour que l'œil suive le changement, trop court pour
   donner une sensation de mouvement.
   Les ressorts se posent d'eux-mêmes en une écriture (spring.js) et
   n'écrivent aucune transform (site.js) : c'est le fondu ci-dessous
   qui prend le relais. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:150ms!important}

  /* aucun déplacement ne doit subsister, d'où qu'il vienne */
  .rv,.tel,.plq,.plq-st .s,.arrow svg{transform:none!important}

  /* entrées et sorties : fondu enchaîné de 150 ms */
  .rv,.tel,.q .a{transition:opacity 150ms ease!important}

  /* le retour d'appui reste INSTANTANÉ : le §1 l'exige, et un appui
     n'est pas un mouvement vestibulaire. */
  .btn:active,.nl .cta:active,.plq:active{opacity:.6}
}