/* LE VEILLEUR — l'assistant de nuit de Web Léman.
   Toutes les classes sont prefixees « vl- » : le site a deja des .offre, .prix,
   .page, .fil… et rien ici ne doit les toucher. */
.vl-lanceur,.vl-nuit{
  --vl-nuit:#0B1439; --vl-bleu:#12225C; --vl-bleu-clair:#A8B6E0; --vl-or:#F2B705;
  --vl-encre:#12141A; --vl-gris:#5E6270; --vl-ligne:#DFDFE3; --vl-fond:#FAFAF8;
  --vl-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --vl-mono:"IBM Plex Mono",Consolas,monospace;
}
.vl-lanceur{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;align-items:center;gap:12px;
  background:var(--vl-nuit);color:#fff;border:0;border-radius:999px;padding:11px 20px 11px 12px;cursor:pointer;
  font:700 15px/1.2 var(--vl-sans);text-align:left;box-shadow:0 10px 30px rgba(11,20,57,.28)}
.vl-lanceur:hover{background:var(--vl-bleu)}
.vl-lanceur:focus-visible{outline:3px solid var(--vl-or);outline-offset:3px}
.vl-lanceur .vl-pastille{width:36px;height:36px;border-radius:50%;background:var(--vl-bleu);display:grid;place-items:center;flex:none}
.vl-lanceur small{display:block;font:500 11px var(--vl-mono);color:var(--vl-bleu-clair);margin-top:2px}
/* sur telephone : au-dessus de la barre WhatsApp / Appeler du site (54 px),
   un simple rond ; plus haut encore quand le panier est ouvert */
.vl-lanceur{transition:transform .3s ease,opacity .3s ease}
.vl-lanceur.vl-cache{transform:translateY(160%);opacity:0;pointer-events:none}
@media (max-width:820px){
  .vl-lanceur{bottom:74px;right:14px;padding:10px}
  .vl-lanceur .vl-texte{display:none}
  body:has(#panier:not([hidden])) .vl-lanceur{bottom:150px}
}

/* la pastille « Assistant » dans la barre du site (toujours visible, collee en haut) */
.vl-barre{--vl-nuit:#0B1439;appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  background:#0B1439;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 13px 7px 10px;
  font:600 .72rem/1 "IBM Plex Mono",Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;align-self:center}
.vl-barre:hover{background:#12225C}
.vl-barre:focus-visible{outline:3px solid #F2B705;outline-offset:2px}
.vl-barre-tel{display:none;margin-left:auto;margin-right:12px}
@media (max-width:820px){ .vl-barre-tel{display:inline-flex} .nav .vl-barre-nav{align-self:flex-start;margin-top:8px} }
/* ═══ LA MISE EN AVANT SUR L'ACCUEIL : une bande de nuit sous le haut de page
   (le meme monde que le widget : nuit, lune creme, or de la marque) ═══ */
.vl-une{background:#0B1439;color:#fff;padding:76px 0;position:relative;overflow:hidden}
.vl-une::before{content:"";position:absolute;right:4%;top:22px;width:50px;height:50px;border-radius:50%;background:#EFEBDD}
.vl-une-w{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative}
.vl-une-etq{display:inline-block;font:600 .68rem/1 "IBM Plex Mono",Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#F2B705;margin-bottom:18px}
.vl-une h2{color:#fff;margin:0 0 18px;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.vl-une h2 em{font-style:normal;color:#F2B705}
.vl-une-txt p{color:#C9D3F0;font-size:1.05rem;line-height:1.55;max-width:44ch;margin:0 0 26px}
.vl-une-actes{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.vl-une-btn{appearance:none;border:0;cursor:pointer;background:#F2B705;color:#0B1439;font-family:inherit;font-weight:800;font-size:1rem;line-height:1;padding:16px 22px;border-radius:999px}
.vl-une-btn:hover{background:#FFD23F}
.vl-une-lien{color:#fff;font-weight:700;text-underline-offset:4px}
.vl-une-niveaux{display:grid;gap:10px}
.vl-une-niv{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:4px;align-items:baseline;padding:18px 20px;border-radius:18px;
  background:rgba(168,182,224,.08);box-shadow:inset 0 0 0 1px rgba(168,182,224,.22);color:#fff;text-decoration:none;transition:background .15s}
.vl-une-niv:hover{background:rgba(168,182,224,.16)}
.vl-une-nom{grid-column:1;grid-row:1;font-weight:900;font-size:1.25rem;letter-spacing:-.02em}
.vl-une-quoi{grid-column:1;grid-row:2;font:500 .75rem "IBM Plex Mono",Consolas,monospace;color:#A8B6E0}
.vl-une-prix{grid-column:2;grid-row:1;font-weight:900;font-size:1.6rem;letter-spacing:-.03em;text-align:right;white-space:nowrap}
.vl-une-mois{grid-column:2;grid-row:2;font:500 .75rem "IBM Plex Mono",Consolas,monospace;color:#A8B6E0;text-align:right;white-space:nowrap}
.vl-une-phare{background:#EFEBDD;color:#0B1439;box-shadow:none}
.vl-une-phare:hover{background:#fff}
.vl-une-phare .vl-une-quoi,.vl-une-phare .vl-une-mois{color:#5E6270}
.vl-une-note{margin:6px 2px 0;font:500 .75rem "IBM Plex Mono",Consolas,monospace;color:#8E9BC7}
.vl-une-niv:focus-visible,.vl-une-btn:focus-visible,.vl-une-lien:focus-visible{outline:3px solid #F2B705;outline-offset:3px}
@media (max-width:900px){
  .vl-une{padding:56px 0}
  .vl-une-w{grid-template-columns:1fr;gap:30px}
  .vl-une::before{width:30px;height:30px;top:12px;right:14px}
}
/* le lien « Chatbot IA » du menu, marque « nouveau » */
.vl-nav-ia::after{content:"nouveau";margin-left:6px;font-size:.55rem;letter-spacing:.1em;background:#F2B705;color:#0B1439;padding:2px 5px;vertical-align:1px}

/* les 3 cartes du Veilleur sur Tarifs : TOUJOURS en une colonne. Sur telephone,
   la page met ses cartes sur deux colonnes (prix | texte) ; la mention
   « Installation, 1re annee comprise » elargissait la colonne du prix et
   ecrasait le texte (essai du 12/09). */
.offres .offre.vl-niv{display:flex;flex-direction:column}
/* le lien « Voir la demo » sur la carte de l'offre (page Tarifs) */
.vl-voir-demo{display:inline-block;margin-top:12px;font:600 .8rem "IBM Plex Mono",Consolas,monospace;letter-spacing:.04em;color:inherit;text-decoration:underline;text-underline-offset:3px}
/* le son, dans le coin du ciel */
.vl-droite{display:flex;align-items:center;gap:14px}
.vl-son{appearance:none;border:0;cursor:pointer;background:transparent;color:#A8B6E0;font:500 12px "IBM Plex Mono",Consolas,monospace;padding:4px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(168,182,224,.35)}
.vl-son[aria-pressed="false"]{color:#5E6A99}
.vl-son:focus-visible{outline:2px solid #F2B705}
.vl-son,.vl-c-nom,.vl-c-date{white-space:nowrap}
/* sur telephone, le haut du ciel tient sur une ligne : le nom, puis le son (la date saute) */
@media (max-width:520px){ .vl-c-date{display:none} .vl-c-nom{overflow:hidden;text-overflow:ellipsis;min-width:0} }

.vl-nuit{position:fixed;inset:0;z-index:1000;background:var(--vl-nuit);color:#fff;display:grid;
  grid-template-columns:1fr minmax(0,460px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.vl-nuit.vl-ouverte{opacity:1;visibility:visible;transition:opacity .4s ease}
.vl-ciel{position:relative;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;font-family:var(--vl-sans)}
.vl-ciel .vl-haut{display:flex;justify-content:space-between;font:500 13px var(--vl-mono);color:var(--vl-bleu-clair)}
.vl-ciel .vl-heure{font:600 clamp(80px,13vw,190px)/.9 var(--vl-mono);letter-spacing:-.06em;color:#fff}
.vl-ciel .vl-legende{font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;max-width:22ch;margin:14px 0 0;color:#fff}
.vl-ciel .vl-legende span{color:var(--vl-or)}
/* le lac est dessine dans un canvas sous tout le reste */
.vl-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.vl-ciel>*:not(.vl-scene){position:relative;z-index:1}
.vl-centre{margin-bottom:28vh}
.vl-ciel .vl-promesses{display:flex;flex-wrap:wrap;gap:10px;font:500 12px var(--vl-mono);color:var(--vl-bleu-clair)}
.vl-ciel .vl-promesses i{font-style:normal;padding:6px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(168,182,224,.35)}

.vl-panneau{background:#fff;color:var(--vl-encre);display:flex;flex-direction:column;min-height:0;height:100%;font:400 16px/1.45 var(--vl-sans)}
.vl-tete{padding:18px 18px 12px;border-bottom:1px solid var(--vl-ligne);display:grid;gap:12px}
.vl-id{display:flex;align-items:center;gap:12px}
.vl-avatar{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:800 17px var(--vl-sans);color:#fff;flex:none}
.vl-id b{display:block;font-size:17px;letter-spacing:-.01em}
/* l'en-tete tient sur UNE ligne a toutes les tailles (sur ordinateur, le statut
   passait a la ligne a cause du bouton « Demo ») */
.vl-qui{min-width:0}
.vl-id b,.vl-id small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.vl-id small{font:500 12px var(--vl-mono);color:var(--vl-gris)}
.vl-id small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1FA463;margin-right:6px;vertical-align:1px}
.vl-fermer{margin-left:8px;appearance:none;border:0;background:#EEEFF3;width:38px;height:38px;border-radius:50%;cursor:pointer;font:700 18px var(--vl-sans);color:var(--vl-encre);flex:none}
.vl-demo{margin-left:auto;appearance:none;border:0;cursor:pointer;background:var(--vl-nuit);color:#fff;border-radius:999px;padding:9px 13px;font:700 12.5px var(--vl-sans);white-space:nowrap;flex:none}
.vl-demo:hover{background:var(--vl-bleu)}
.vl-chip.vl-presse{background:var(--vl-encre);color:#fff;transform:scale(.96)}
/* l'arrivee : le panneau glisse pendant que l'eau monte */
.vl-panneau{transform:translateX(28px);transition:transform .7s cubic-bezier(.2,.8,.2,1) .15s}
.vl-ouverte .vl-panneau{transform:none}
.vl-onglets{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.vl-onglets::-webkit-scrollbar{display:none}
.vl-onglet{appearance:none;border:0;white-space:nowrap;cursor:pointer;font:600 13px var(--vl-sans);padding:8px 12px;border-radius:999px;background:#EEEFF3;color:#3a3d48}
.vl-onglet[aria-pressed="true"]{background:var(--vl-encre);color:#fff}
.vl-fil{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:8px;min-height:0;background:var(--vl-fond)}
.vl-m{max-width:84%;padding:11px 14px;border-radius:18px;font-size:15.5px;line-height:1.45;animation:vl-entre .28s ease both}
.vl-m.vl-v{background:var(--vl-couleur,#12225C);color:#fff;border-bottom-left-radius:6px}
.vl-m.vl-c{background:#fff;box-shadow:inset 0 0 0 1px var(--vl-ligne);margin-left:auto;border-bottom-right-radius:6px}
.vl-m .vl-h{display:block;font:500 11px var(--vl-mono);opacity:.65;margin-top:4px}
.vl-m.vl-sys{align-self:center;background:transparent;color:var(--vl-gris);font:500 12px var(--vl-mono);text-align:center;max-width:100%;padding:4px}
.vl-ondule{align-self:flex-start;background:var(--vl-couleur,#12225C);border-radius:18px;border-bottom-left-radius:6px;padding:10px 14px}
.vl-ondule svg{display:block}
/* jamais d'opacite nulle au depart : si l'animation ne tourne pas, le texte reste lisible */
@keyframes vl-entre{from{transform:translateY(6px)}to{transform:none}}
.vl-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 12px;background:var(--vl-fond)}
.vl-chip{appearance:none;cursor:pointer;border:0;border-radius:999px;padding:9px 14px;font:600 14px var(--vl-sans);background:#fff;color:var(--vl-encre);box-shadow:inset 0 0 0 1.5px var(--vl-encre)}
.vl-chip:hover{background:var(--vl-encre);color:#fff}
.vl-saisie{display:flex;gap:8px;padding:12px;border-top:1px solid var(--vl-ligne);margin:0}
.vl-saisie input{flex:1;font:500 16px var(--vl-sans);border:0;background:#EEEFF3;border-radius:999px;padding:13px 16px;min-width:0;color:var(--vl-encre)}
.vl-saisie input:focus{outline:2px solid var(--vl-encre)}
.vl-saisie button{appearance:none;border:0;cursor:pointer;background:var(--vl-encre);color:#fff;border-radius:50%;width:48px;height:48px;font:700 18px var(--vl-sans);flex:none}
.vl-mention{font:500 11px/1.4 var(--vl-mono);color:var(--vl-gris);padding:0 16px 12px;text-align:center}
.vl-rappel{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--vl-encre);padding:14px;display:grid;gap:9px;max-width:92%;animation:vl-entre .28s ease both;margin:0}
.vl-rappel b{font-size:15px}
.vl-rappel input[type=text],.vl-rappel input[type=tel]{font:500 15px var(--vl-sans);border:0;background:#EEEFF3;border-radius:10px;padding:11px 12px;color:var(--vl-encre)}
.vl-rappel label{font-size:12.5px;color:#4a4d58;display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.vl-rappel button{appearance:none;border:0;cursor:pointer;background:#1FA463;color:#fff;border-radius:10px;padding:12px;font:700 15px var(--vl-sans)}
.vl-rappel button:disabled{background:#B9C0CC;cursor:not-allowed}
.vl-chip:focus-visible,.vl-onglet:focus-visible,.vl-fermer:focus-visible,.vl-saisie button:focus-visible{outline:3px solid var(--vl-or);outline-offset:2px}
/* SUR TELEPHONE (le format des reels) : le lac en haut, la conversation en bas */
@media (max-width:900px){
  .vl-nuit{grid-template-columns:1fr;grid-template-rows:minmax(200px,34vh) 1fr}
  .vl-ciel{padding:14px 18px}
  .vl-ciel .vl-heure{font-size:clamp(50px,15vw,78px)}
  .vl-ciel .vl-legende{font-size:15px;margin-top:6px;max-width:30ch}
  .vl-centre{margin-bottom:auto;margin-top:4px}
  .vl-ciel .vl-promesses{display:none}
  .vl-panneau{transform:translateY(24px);border-radius:18px 18px 0 0;overflow:hidden}
  .vl-tete{padding:14px 14px 10px}
  .vl-demo{padding:8px 11px;font-size:12px}
  /* en-tete sur UNE ligne : au 1er essai, nom sur 2 lignes et statut sur 3 */
  .vl-long{display:none}
  .vl-qui{min-width:0}
  .vl-id b,.vl-id small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* les propositions sur une seule ligne qui defile : elles mangeaient la conversation */
  .vl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .vl-chips::-webkit-scrollbar{display:none}
  .vl-chip{white-space:nowrap;flex:none}
}
/* ═══ v3 (12/09, sa demande « rends le chat + immersif ») : LE CHAT DANS LA NUIT.
   Le panneau n'est plus une feuille blanche posee a cote : c'est le lac qui
   continue. Fond d'eau de nuit, textes clair de lune ; le client ecrit dans
   une bulle cerclee d'ocre (sa fenetre allumee), le Veilleur repond dans la
   couleur du commerce. Aucun flou, aucun degrade flou : des aplats nets. */
.vl-panneau{background:linear-gradient(180deg,#0C1640 0%,#070E2A 100%);color:#EFEBDD}
.vl-tete{border-bottom:1px solid rgba(168,182,224,.16)}
.vl-id b{color:#fff}
.vl-id small{color:#A8B6E0}
.vl-avatar{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.vl-demo{background:#F2B705;color:#0B1439}
.vl-demo:hover{background:#FFD23F}
.vl-fermer{background:rgba(168,182,224,.14);color:#EFEBDD}
.vl-fermer:hover{background:rgba(168,182,224,.28)}
.vl-onglet{background:rgba(168,182,224,.12);color:#C9D3F0}
.vl-onglet[aria-pressed="true"]{background:#EFEBDD;color:#0B1439}
.vl-fil,.vl-chips{background:transparent}
.vl-m.vl-v{background:var(--vl-couleur,#1B2E7A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vl-m.vl-c{background:rgba(242,183,5,.07);color:#EFEBDD;box-shadow:inset 0 0 0 1.5px #F2B705}
.vl-m .vl-h{color:#A8B6E0;opacity:1}
.vl-m.vl-v .vl-h{color:rgba(255,255,255,.7)}
.vl-m.vl-sys{color:#8E9BC7}
.vl-ondule{background:var(--vl-couleur,#1B2E7A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vl-chip{background:transparent;color:#EFEBDD;box-shadow:inset 0 0 0 1.5px rgba(239,235,221,.7)}
.vl-chip:hover{background:#EFEBDD;color:#0B1439}
.vl-chip.vl-presse{background:#F2B705;color:#0B1439;box-shadow:none}
.vl-saisie{border-top:1px solid rgba(168,182,224,.16)}
.vl-saisie input{background:rgba(168,182,224,.12);color:#EFEBDD}
.vl-saisie input::placeholder{color:#8E9BC7}
.vl-saisie input:focus{outline:2px solid #F2B705}
.vl-saisie button{background:#F2B705;color:#0B1439}
.vl-mention{color:#7F8BB8}
.vl-rappel{background:#101B4A;color:#EFEBDD;box-shadow:inset 0 0 0 1.5px #F2B705}
.vl-rappel input[type=text],.vl-rappel input[type=tel]{background:rgba(168,182,224,.14);color:#fff}
.vl-rappel input::placeholder{color:#8E9BC7}
.vl-rappel input:focus{outline:2px solid #F2B705;outline-offset:0}
.vl-rappel label{color:#C9D3F0}
.vl-rappel button:disabled{background:rgba(168,182,224,.22);color:rgba(255,255,255,.55)}
/* QUITTER : un vrai bouton, ecrit, en haut de la nuit (sa demande). Le « × »
   du panneau, Echap et le retour du telephone ferment aussi. */
.vl-quitter{appearance:none;border:0;cursor:pointer;background:#EFEBDD;color:#0B1439;border-radius:999px;
  padding:7px 13px;font:700 12px var(--vl-mono);letter-spacing:.04em;white-space:nowrap}
.vl-quitter:hover{background:#fff}
.vl-quitter:focus-visible{outline:3px solid #F2B705;outline-offset:2px}
@media (max-width:900px){ .vl-droite{gap:8px} .vl-son{padding:4px 7px} }

/* ═══ v4 (12/09, « rends l'entree du Veilleur ultra immersive ») : L'ENTREE EN SCENE.
   La nuit s'ouvre en cercle depuis le doigt ; le ciel s'allume ensuite (canvas :
   etoiles une a une, lune qui se leve, fenetres en vague, vague or qui se
   dessine), l'horloge file jusqu'a l'heure, la legende monte et le panneau sort
   du lac. Aplats nets, aucun flou. */
.vl-nuit{opacity:1;clip-path:circle(0px at var(--vl-ox,92%) var(--vl-oy,92%));
  transition:clip-path .55s cubic-bezier(.7,0,.3,1),visibility 0s linear .55s}
.vl-nuit.vl-ouverte{clip-path:circle(150% at var(--vl-ox,92%) var(--vl-oy,92%));
  transition:clip-path .85s cubic-bezier(.65,0,.25,1)}
.vl-ouverte .vl-haut{animation:vl-monte .5s cubic-bezier(.2,1,.3,1) .25s both}
.vl-ouverte .vl-heure{animation:vl-monte .8s cubic-bezier(.2,1.25,.3,1) .3s both}
.vl-ouverte .vl-legende{animation:vl-monte .6s cubic-bezier(.2,1,.3,1) .75s both}
.vl-ouverte .vl-promesses{animation:vl-monte .6s cubic-bezier(.2,1,.3,1) 1s both}
@keyframes vl-monte{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.vl-panneau{transform:translateX(104%);transition:transform .8s cubic-bezier(.2,1.05,.3,1) .8s}
.vl-ouverte .vl-panneau{transform:none}
.vl-nuit:not(.vl-ouverte) .vl-panneau{transition-delay:0s}
@media (max-width:900px){
  /* (essai 1 : a .9 s de retard, les 2/3 bas de l'ecran restaient vides ~1 s :
     le panneau monte plus tot, le ciel reste en haut et n'est pas cache) */
  .vl-panneau{transform:translateY(104%);transition:transform .9s cubic-bezier(.2,1.12,.3,1) .45s}
  .vl-ouverte .vl-panneau{transform:none}
}
/* la recompense du commercant (demo) : sa notification glisse dans le ciel */
.vl-notif{position:absolute;left:14px;right:14px;top:56px;z-index:3;display:grid;gap:6px;animation:vl-notif .6s cubic-bezier(.2,1.3,.3,1) both}
.vl-notif small{font:600 11px var(--vl-mono);letter-spacing:.06em;color:#F2B705;text-transform:uppercase}
.vl-notif-carte{display:flex;gap:10px;align-items:flex-start;background:#F1F1F4;color:#111;border-radius:18px;padding:11px 12px;max-width:430px}
.vl-notif-ico{flex:none;width:34px;height:34px;border-radius:9px;background:#25D366;display:grid;place-items:center}
.vl-notif-app{display:flex;justify-content:space-between;font:500 11px var(--vl-sans);color:#6b6b73;letter-spacing:.05em}
.vl-notif b{display:block;font-size:14px;margin:1px 0}
.vl-notif p{margin:0;font-size:14px;line-height:1.35}
.vl-notif.vl-notif-part{animation:vl-notif-part .5s ease both}
/* (essai 1 : la regle « .vl-ciel > * { position:relative } » la renvoyait dans le
   flux, en bas du ciel, coupee par le panneau) */
.vl-ciel > .vl-notif{position:absolute;z-index:3}
/* pendant la notification, l'horloge et la legende s'effacent (essai 1 : le
   titre « Sur le telephone du commercant » passait sur « 02:47 ») */
.vl-centre{transition:opacity .3s ease}
.vl-avec-notif .vl-centre{opacity:0}
@keyframes vl-notif{from{transform:translateY(-120%) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes vl-notif-part{to{transform:translateY(-130%);opacity:0}}
@media (min-width:901px){ .vl-notif{left:48px;right:auto;top:84px;width:420px} }

@media (prefers-reduced-motion:reduce){
  .vl-nuit,.vl-m,.vl-rappel{animation:none!important;transition:none!important}
  .vl-nuit,.vl-nuit.vl-ouverte{clip-path:none!important}
  .vl-ouverte .vl-haut,.vl-ouverte .vl-heure,.vl-ouverte .vl-legende,.vl-ouverte .vl-promesses,.vl-notif{animation:none!important}
  .vl-panneau{transition:none!important;transform:none!important}
}