.yi-toast-host{position:fixed;z-index:2147483647;top:max(18px,env(safe-area-inset-top));right:18px;width:min(390px,calc(100vw - 28px));display:grid;gap:12px;pointer-events:none;font-family:Poppins,Arial,sans-serif}.yi-toast{--yi-accent:#089fb5;position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 32px;align-items:center;gap:12px;min-height:78px;padding:14px 13px 15px 14px;border:1px solid rgba(3,27,58,.09);border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 22px 60px rgba(3,27,58,.22),0 5px 18px rgba(3,27,58,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;pointer-events:auto;opacity:0;transform:translate3d(26px,-8px,0) scale(.96);transition:opacity .24s ease,transform .3s cubic-bezier(.2,.8,.2,1)}.yi-toast.is-visible{opacity:1;transform:none}.yi-toast.is-leaving{opacity:0;transform:translate3d(30px,0,0) scale(.97)}.yi-toast:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--yi-accent)}.yi-toast-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--yi-accent) 13%,white);color:var(--yi-accent);font-size:19px}.yi-toast-copy{min-width:0}.yi-toast-copy strong{display:block;margin:0 0 4px;color:#031b3a;font-size:12px;font-weight:900;letter-spacing:-.01em}.yi-toast-copy p{margin:0;color:#55677d;font-size:11px;font-weight:600;line-height:1.55}.yi-toast-close{width:30px;height:30px;border:0;border-radius:10px;background:#f2f5f8;color:#718096;display:grid;place-items:center;cursor:pointer}.yi-toast-close:hover{background:#e9eef3;color:#031b3a}.yi-toast-progress{position:absolute;left:5px;right:0;bottom:0;height:3px;background:var(--yi-accent);transform-origin:left;animation:yi-toast-progress linear forwards}.yi-toast-success{--yi-accent:#08966e}.yi-toast-error{--yi-accent:#d94a55}.yi-toast-warning{--yi-accent:#d99a24}.yi-toast-info{--yi-accent:#089fb5}@keyframes yi-toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:600px){.yi-toast-host{top:max(12px,env(safe-area-inset-top));left:14px;right:14px;width:auto}.yi-toast{grid-template-columns:42px minmax(0,1fr) 30px;min-height:72px;border-radius:18px;padding:12px}.yi-toast-icon{width:40px;height:40px;border-radius:13px}}

/* v10 : notifications plus brèves, sans bande de progression, et confirmations au premier plan. */
.yi-toast-progress{display:none!important}
.yi-toast-host{isolation:isolate!important}
.yi-toast{background:#fff!important;box-shadow:0 22px 60px rgba(3,27,58,.28),0 5px 18px rgba(3,27,58,.12)!important}
.yi-toast-host.yi-toast-confirm-host{position:fixed!important;inset:0!important;top:0!important;right:0!important;left:0!important;width:auto!important;max-width:none!important;padding:18px!important;background:rgba(3,27,58,.72)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;display:grid!important;place-items:center!important;pointer-events:auto!important;z-index:2147483647!important}
.yi-toast-confirm-host .yi-toast-confirm{width:min(430px,calc(100vw - 28px))!important;opacity:1!important;transform:none!important}
.yi-toast-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.yi-toast-actions button{min-height:37px;padding:0 14px;border:1px solid #dce4ec;border-radius:11px;background:#fff;color:#40546a;font:900 10px Poppins,Arial,sans-serif;cursor:pointer}
.yi-toast-actions button[data-confirm]{border-color:#075d78;background:#075d78;color:#fff}
@media(max-width:600px){.yi-toast-host.yi-toast-confirm-host{inset:0!important;width:auto!important;padding:14px!important}.yi-toast-confirm-host .yi-toast-confirm{grid-template-columns:42px minmax(0,1fr) 30px!important}}

/* yi-hide-scrollbars-sitewide */
html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}


/* Les notifications basses restent toujours au-dessus de la navigation mobile. */
@media (max-width: 900px){
  body .toast:not(.yi-toast), body [class*="toast-container"]:not(.yi-toast-host), body [id*="toast"]:not(.yi-toast-host):not(.yi-toast){
    bottom:calc(92px + env(safe-area-inset-bottom))!important;
    z-index:2147483646!important;
  }
}

/* =====================================================================
   V101.154 — Le toast rejoint l'identité Yafoye.

   Il vivait sur une charte antérieure : police Poppins, turquoise
   #089fb5, alors que tout le produit est en Sora + Manrope sur marine
   et cyan. Un message qui apparaît par-dessus l'interface est le
   moment où l'écart se voit le plus.

   On ne redessine pas la mécanique — elle fonctionne. On corrige la
   typographie, les couleurs et le relief.
   ===================================================================== */
.yi-toast-host{font-family:Manrope,system-ui,sans-serif!important}

.yi-toast{
  border-radius:18px!important;
  border:1px solid #dbe6f1!important;
  /* Ombre portée du produit : plus profonde, teintée marine. */
  box-shadow:0 20px 55px rgba(3,27,58,.20),0 4px 14px rgba(3,27,58,.10)!important;
}

/* La barre d'accent à gauche, déclarée en :before dans la feuille
   d'origine — un seul deux-points, sinon la règle ne porte pas. */
.yi-toast:before{background:var(--yi-accent)!important;width:5px!important}

.yi-toast-copy strong{
  font-family:Sora,Manrope,system-ui,sans-serif!important;
  font-weight:800!important;
  font-size:13.5px!important;
  letter-spacing:-.2px!important;
  color:#031b3a!important;
}
.yi-toast-copy p{
  font-family:Manrope,system-ui,sans-serif!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:1.55!important;
  color:#64748b!important;
}

.yi-toast-icon{border-radius:13px!important}
.yi-toast-close{border-radius:10px!important;color:#8095aa!important}
.yi-toast-close:hover{background:#eef4fa!important;color:#031b3a!important}

/* Les quatre teintes sont celles du produit, pas de la charte
   précédente. Le marine sert d'information : le cyan pur manque de
   contraste sur fond blanc. */
.yi-toast-success{--yi-accent:#07966d!important}
.yi-toast-error{--yi-accent:#c0392b!important}
.yi-toast-warning{--yi-accent:#b8801f!important}
.yi-toast-info{--yi-accent:#1565a0!important}

/* Les boutons de confirmation suivent ceux du reste du site. */
.yi-toast-actions button{
  font:800 12px Manrope,system-ui,sans-serif!important;
  border-radius:12px!important;
  border-color:#dbe6f1!important;
  color:#64748b!important;
  min-height:42px!important;
}
.yi-toast-actions button:hover{border-color:#9fe4ef!important;color:#031b3a!important}
.yi-toast-actions button[data-confirm]{
  background:#031b3a!important;border-color:#031b3a!important;color:#fff!important;
}
.yi-toast-actions button[data-confirm]:hover{background:#073568!important;border-color:#073568!important}

/* Le voile des confirmations reprend le marine du produit. */
.yi-toast-host.yi-toast-confirm-host{background:rgba(3,27,58,.62)!important}

/* V101.187 — sortie du toast remplacé. Sans transition, il disparaîtrait
   d'un coup et l'œil percevrait un clignotement plutôt qu'un
   remplacement. */
.yi-toast-out{
  opacity:0!important;
  transform:translateY(-6px) scale(.98)!important;
  transition:opacity .16s ease,transform .16s ease!important;
  pointer-events:none!important;
}

/* V101.192 — champ de saisie dans le toast, en remplacement de prompt(). */
.yi-toast-input{
  width:100%;box-sizing:border-box;min-height:46px;margin:10px 0 4px;
  border:1px solid #dbe6f1;border-radius:13px;padding:11px 13px;
  font:600 13px Manrope,system-ui,sans-serif;color:#031b3a;background:#fff;
}
.yi-toast-input:focus{outline:0;border-color:#64cad9;box-shadow:0 0 0 4px rgba(0,212,255,.13)}
.yi-toast-prompt{max-width:min(94vw,430px)}

/* =====================================================================
   V101.246 — le temps qui reste au professionnel.

   « Il reste 22 minutes » dit à quoi s'en tenir ; « en attente » laisse
   ignorer s'il faut patienter une heure ou trois jours. Et quand le
   délai tombe, on ne laisse pas le client devant un constat : on lui
   donne des biens comparables, dans le même bloc.
   ===================================================================== */
.yi-res-compte{display:flex;align-items:center;gap:7px;margin:8px 0 0;
  font-size:12px;font-weight:700;color:#8a5a12}
.yi-res-compte i{font-size:11px}

.yi-res-expire{margin:10px 0 0;padding:13px 15px;border:1px solid #f0dcc4;
  border-radius:14px;background:#fdf6ec}
.yi-res-expire b{display:block;font:800 13px Sora,Manrope,system-ui,sans-serif;color:#8a5a12}
.yi-res-expire span{display:block;margin:4px 0 11px;font-size:12px;line-height:1.55;color:#8a6c46}
.yi-res-similaires{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:12px;background:#031b3a;color:#fff;text-decoration:none;
  font:800 12px Manrope,system-ui,sans-serif}
.yi-res-similaires:hover{background:#073568}

/* =====================================================================
   V101.256 — la fenêtre de choix d'un motif.

   Une liste courte plutôt qu'un champ libre : un texte libre n'est ni
   comptable ni comparable, et personne ne l'écrit. Ici, un geste
   suffit — et les motifs deviennent exploitables.
   ===================================================================== */
.yi-motif-fond{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;
  padding:18px;background:rgba(3,27,58,.52);backdrop-filter:blur(3px)}
.yi-motif{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 26px 60px rgba(3,27,58,.3)}
.yi-motif h3{margin:0 0 6px;font:800 17px/1.3 Sora,Manrope,system-ui,sans-serif;color:#071a32}
.yi-motif p{margin:0 0 15px;font-size:12.5px;line-height:1.55;color:#6f8290}
.yi-motif-liste{display:grid;gap:7px}
.yi-motif-liste button{width:100%;text-align:left;min-height:46px;padding:11px 14px;
  border:1px solid #dbe6f1;border-radius:13px;background:#fff;color:#0b2540;
  font:700 13px Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s}
.yi-motif-liste button:hover{border-color:#031b3a;background:#f7fbfd}
.yi-motif-liste button:focus-visible{outline:2px solid #00d4ff;outline-offset:2px}
.yi-motif-fermer{width:100%;min-height:42px;margin-top:12px;border:0;background:transparent;
  color:#8095aa;font:800 12px Manrope,system-ui,sans-serif;cursor:pointer}
.yi-motif-fermer:hover{color:#031b3a;text-decoration:underline}

.yi-res-annuler{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;
  border:1px solid #f0d4d0;border-radius:12px;background:#fff;color:#b0483c;
  font:800 12px Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s}
.yi-res-annuler:hover{border-color:#d9534f;background:#fdf5f4}
.yi-res-annuler:disabled{opacity:.5;cursor:not-allowed}

/* =====================================================================
   V101.264 — le code de visite et le scanner.

   Côté client, le code doit être lisible d'un mètre : le professionnel
   scanne à bout de bras, parfois en plein soleil. D'où le fond blanc
   plein et les caractères espacés — un code qu'on doit deviner sera
   dicté de travers.
   ===================================================================== */
.yi-visite-preuve{margin:12px 0 0;padding:16px;border:1px solid #dbe6f1;
  border-radius:16px;background:#fff;text-align:center}
.yi-visite-preuve > b{display:flex;align-items:center;justify-content:center;gap:8px;
  font:800 13px Sora,Manrope,system-ui,sans-serif;color:#071a32}
.yi-visite-preuve > b i{color:var(--action2,#087f96)}
.yi-visite-preuve p{margin:6px 0 14px;font-size:12px;line-height:1.55;color:#6f8290}
.yi-visite-qr{display:flex;justify-content:center;min-height:190px;align-items:center}
.yq-code-repli{font:900 34px/1.2 'Courier New',monospace;letter-spacing:6px;color:#031b3a}
.yi-visite-code{margin:12px 0 4px;font:900 26px/1 'Courier New',monospace;
  letter-spacing:5px;color:#031b3a}
.yi-visite-preuve small{font-size:11px;color:#8095aa}

/* --- Le scanner du professionnel --- */
.yi-scan-fond{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;
  padding:18px;background:rgba(3,27,58,.62);backdrop-filter:blur(4px)}
.yi-scan{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:20px;
  box-shadow:0 26px 60px rgba(3,27,58,.32)}
.yi-scan h3{margin:0 0 5px;font:800 17px Sora,Manrope,system-ui,sans-serif;color:#071a32}
.yi-scan p{margin:0 0 14px;font-size:12.5px;color:#6f8290}
.yi-scan-video{border-radius:14px;overflow:hidden;background:#031b3a;margin-bottom:14px}
.yi-scan-video video{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.yi-scan-saisie{display:block;margin-bottom:12px}
.yi-scan-saisie span{display:block;margin-bottom:5px;font-size:11.5px;font-weight:800;color:#6f8290}
.yi-scan-saisie input{width:100%;box-sizing:border-box;min-height:52px;
  border:1px solid #dbe6f1;border-radius:13px;padding:0 15px;text-align:center;
  font:900 22px 'Courier New',monospace;letter-spacing:5px;color:#031b3a;text-transform:uppercase}
.yi-scan-saisie input:focus{outline:0;border-color:#64cad9;box-shadow:0 0 0 4px rgba(0,212,255,.13)}
.yi-scan-valider{width:100%;min-height:50px;border:0;border-radius:14px;
  background:#031b3a;color:#fff;font:800 13.5px Manrope,system-ui,sans-serif;cursor:pointer}
.yi-scan-valider:hover{background:#073568}
.yi-scan-note{display:block;margin:9px 0 0;text-align:center;font-size:11px;color:#8095aa}
.yi-scan-fermer{width:100%;min-height:42px;margin-top:8px;border:0;background:transparent;
  color:#8095aa;font:800 12px Manrope,system-ui,sans-serif;cursor:pointer}
.yi-scan-fermer:hover{color:#031b3a;text-decoration:underline}

.yi-res-scan{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 17px;
  border:0;border-radius:13px;background:#031b3a;color:#fff;
  font:800 12.5px Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s}
.yi-res-scan:hover{background:#073568}
.yi-res-confirmee{display:flex;align-items:center;gap:8px;margin:10px 0 0;
  font-size:12.5px;font-weight:800;color:#087f5b}

/* V101.270 — le bouton d'action destructrice dans une fenêtre de
   confirmation. Rouge plein : sur une action qui ne s'annule pas, la
   couleur doit dire ce que le texte dit. */
.yi-motif-danger{display:flex!important;align-items:center;justify-content:center;gap:9px;
  border-color:#d9534f!important;background:#b0483c!important;color:#fff!important}
.yi-motif-danger:hover{background:#95392f!important;border-color:#95392f!important}

/* =====================================================================
   V101.280 — la règle d'annulation, dite avant le geste.

   Découvrir après coup qu'on ne sera pas remboursé transforme une
   décision en mauvaise surprise. La note s'affiche donc sur la carte,
   pas seulement dans la fenêtre de confirmation : quelqu'un qui hésite
   doit pouvoir la lire sans cliquer sur « Annuler ».

   Ton neutre, pas alarmant. C'est une information, pas un reproche —
   et une mise en garde trop appuyée ferait renoncer des gens qui ont
   une bonne raison d'annuler.
   ===================================================================== */
.yi-res-note-annulation{display:flex;align-items:flex-start;gap:8px;
  margin:10px 0 0;padding:10px 12px;border-radius:11px;
  background:#f7fbfd;border:1px solid #e6eef6;
  font-size:11.5px;line-height:1.55;font-weight:700;color:#6f8290}
.yi-res-note-annulation i{flex:none;margin-top:1px;font-size:11px;color:#8fa4b6}

/* Une annulation après paiement se distingue : le geste n'a pas les
   mêmes suites, le bouton ne doit pas avoir la même apparence. */
.yi-res-annuler.est-payee{border-color:#d9534f;color:#b0483c}
.yi-res-annuler.est-payee:hover{background:#fdf5f4}

/* =====================================================================
   V101.283 — l'avertissement d'annulation prend du poids.

   Le ton neutre convenait quand le message ne parlait que d'argent.
   Il dit maintenant que le bien repart à la disponibilité générale —
   une conséquence qu'on ne peut pas défaire, et que le client
   découvrirait autrement une heure trop tard.

   Fond ambré plutôt que rouge : on informe, on ne réprimande pas.
   Le rouge se réserve à ce qui est déjà allé de travers.
   ===================================================================== */
.yi-res-note-annulation,
.note-annulation{
  display:flex!important;align-items:flex-start;gap:10px;
  margin:12px 0 0;padding:13px 14px;border-radius:13px;
  background:#fdf6ec;border:1px solid #f0dcc4;
  font-family:Manrope,system-ui,sans-serif;
}
.yi-res-note-annulation i,
.note-annulation i{flex:none;margin-top:2px;font-size:13px;color:#c2841f}
.yi-res-note-annulation b,
.note-annulation b{display:block;margin-bottom:3px;font-size:12.5px;font-weight:800;color:#8a5a12}
.yi-res-note-annulation span,
.note-annulation span{display:block;font-size:11.5px;line-height:1.6;font-weight:600;color:#8a6c46}

/* Le bouton se voit : caché, il pousse à écrire au support, ce qui
   coûte plus cher à tout le monde qu'un geste propre. */
.yi-res-annuler,
.actions .annuler{
  border-color:#e6a8a0!important;
  color:#b0483c!important;
  background:#fffaf9!important;
  font-weight:800!important;
}
.yi-res-annuler:hover,
.actions .annuler:hover{
  border-color:#d9534f!important;
  background:#fdeeec!important;
}
.yi-res-annuler.est-payee,
.actions .annuler.est-payee{
  border-color:#d9534f!important;
  background:#fdeeec!important;
}

/* =====================================================================
   V101.426 — la carte en attente de confirmation serveur.

   Le succès s'affiche dès le clic : la carte change AVANT que le
   serveur ait répondu. Ce voile très léger dit que l'enregistrement
   est en cours, sans rien bloquer — l'action est déjà prise, seule sa
   confirmation manque.

   Assez discret pour ne pas donner l'impression d'un chargement, assez
   visible pour qu'un geste répété paraisse inutile : c'est exactement
   ce qu'on cherche, puisque recliquer ne servirait à rien.
   ===================================================================== */
.yf-en-attente-serveur{
  opacity:.72;
  transition:opacity .18s ease;
}
/* V101.441 : `pointer-events:none` a été retiré. Il neutralisait toute
   la carte pendant l'attente — et si le redessin arrivait entre-temps
   sans remplacer l'élément, la carte restait morte à l'écran. Le bouton
   qui a déclenché l'action est déjà désactivé de son côté : c'est lui
   qu'il faut protéger d'un second clic, pas la carte entière. */
.yf-en-attente-serveur button{pointer-events:none}

/* =====================================================================
   V101.461 — l'attente affichée à la place des boutons.

   Le professionnel autorise, et l'écran le montre immédiatement. Le
   redessin arrive une seconde après avec le vrai état.
   ===================================================================== */
.yi-res-attente{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  background:rgba(0,153,230,.10);
  border:1px solid rgba(0,153,230,.20);
  color:#0b2c4d;
  font:800 12.5px/1 Manrope,sans-serif;
}
.yi-res-attente i{color:#0099e6}