/* ============================================================
   « DONNER MON AVIS » — la fenetre, en mouvement (site et app)
   Couleurs : uniquement les jetons de jetons.css.
   ============================================================ */
.avis-ouvert, .avis-ouvert body { overflow: hidden; }
.avis-voile {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--fond) 55%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: avis-fondu .25s ease-out backwards;
}
.avis-voile.part { animation: avis-fondu .3s ease-in reverse forwards; }
.avis-voile.part .avis-fenetre { animation: avis-monte .3s ease-in reverse forwards; }
.avis-fenetre {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--r-xl, 22px);
  box-shadow: var(--ombre-3, 0 24px 60px rgba(0,0,0,.35));
  padding: 26px 22px 22px;
  animation: avis-monte .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.avis-fermer {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 99px;
  border: 0; background: var(--surface-2); color: var(--texte-2); font-size: 15px; cursor: pointer;
}
.avis-form h2, .avis-merci h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.avis-sous { margin: 0 0 16px; color: var(--texte-2); font-size: 14px; line-height: 1.5; }
.avis-types { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.avis-type {
  font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--bord); background: none; color: var(--texte-2);
  animation: avis-glisse .4s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(.15s + var(--k) * 60ms);
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.avis-type:active { transform: scale(.95); }
.avis-type.on { background: var(--accent, var(--excel)); border-color: var(--accent, var(--excel)); color: var(--sur-accent, var(--fond)); }
.avis-etoiles { display: flex; gap: 6px; margin-bottom: 16px; }
.avis-etoile {
  font-size: 34px; line-height: 1; padding: 2px; border: 0; background: none; cursor: pointer;
  color: var(--surface-3); transition: color .15s, transform .15s;
  animation: avis-tombe .45s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(.2s + var(--k) * 60ms);
}
.avis-etoile.pleine { color: var(--or); }
.avis-etoile:hover { transform: scale(1.15); }
.avis-etoile.saute { animation: avis-saute .45s cubic-bezier(.34,1.56,.64,1); }
.avis-champ { display: block; font-size: 13px; font-weight: 700; color: var(--texte-2); margin-bottom: 12px; position: relative; }
.avis-champ em { font-style: normal; font-weight: 500; color: var(--texte-3); }
.avis-champ textarea, .avis-champ input {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; font-weight: 500; color: var(--texte);
  background: var(--fond-2, var(--surface-2)); border: 1.5px solid var(--bord); border-radius: var(--r-m, 14px);
  padding: 12px 14px; resize: vertical; transition: border-color .2s, box-shadow .2s;
}
.avis-champ textarea:focus, .avis-champ input:focus {
  outline: none; border-color: var(--accent, var(--excel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--excel)) 30%, transparent);
}
.avis-compte { position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-weight: 600; color: var(--texte-3); }
.avis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.avis-erreur { font-size: 13px; color: var(--danger); margin: 0 0 12px; line-height: 1.5; }
.avis-erreur a { color: inherit; font-weight: 700; }
.avis-envoyer {
  width: 100%; font: inherit; font-size: 16px; font-weight: 800; padding: 14px; border: 0; border-radius: var(--r-m, 14px);
  background: var(--accent, var(--excel)); color: var(--sur-accent, var(--fond)); cursor: pointer;
  box-shadow: 0 4px 0 0 var(--accent-sourd, rgba(0,0,0,.25)); transition: transform .1s, box-shadow .1s;
}
.avis-envoyer:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--accent-sourd, rgba(0,0,0,.25)); }
.avis-envoyer.envoi span { display: inline-block; animation: avis-pulse .8s ease-in-out infinite; }
.avis-envoyer.envoi span::after { content: '…'; }
.avis-merci { text-align: center; padding: 8px 4px 2px; }
.avis-merci p { color: var(--texte-2); margin: 0 0 12px; line-height: 1.5; }
.avis-bientot { font-size: 13px; }
.avis-coche { width: 92px; height: 92px; margin: 4px auto 10px; display: block; }
.avis-coche circle { fill: none; stroke: var(--succes); stroke-width: 5; stroke-dasharray: 214; stroke-dashoffset: 214; animation: avis-trace .6s .1s cubic-bezier(.65,0,.35,1) forwards; }
.avis-coche path { fill: none; stroke: var(--succes); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: avis-trace .4s .6s cubic-bezier(.65,0,.35,1) forwards; }
.avis-merci h2 { animation: avis-tombe .5s .75s cubic-bezier(.34,1.56,.64,1) backwards; }
.avis-merci p, .avis-merci .avis-envoyer { animation: avis-glisse .45s .9s cubic-bezier(.2,.8,.2,1) backwards; }

/* le bouton qui ouvre la fenetre, sur le site */
.bouton-avis { animation: avis-flotte 3s ease-in-out infinite; }

@keyframes avis-fondu { from { opacity: 0; } }
@keyframes avis-monte { from { opacity: 0; transform: translateY(40px) scale(.94); } }
@keyframes avis-glisse { from { opacity: 0; transform: translateY(10px); } }
@keyframes avis-tombe { from { opacity: 0; transform: translateY(-14px) scale(.6); } }
@keyframes avis-saute { 40% { transform: scale(1.45) rotate(-12deg); } 70% { transform: scale(.9); } }
@keyframes avis-pulse { 50% { opacity: .55; } }
@keyframes avis-trace { to { stroke-dashoffset: 0; } }
@keyframes avis-flotte { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .avis-voile *, .avis-voile, .bouton-avis { animation: none !important; }
  .avis-coche circle, .avis-coche path { stroke-dashoffset: 0; }
}

/* --- LES RAPPELS (rappels.js) : la meme fenetre, avec le robot et la cloche */
.rappel-fenetre { text-align: center; }
.rappel-tete { position: relative; width: 120px; height: 96px; margin: 0 auto 6px; }
.rappel-robot { position: absolute; left: 6px; top: 6px; animation: avis-tombe .5s .1s cubic-bezier(.34,1.56,.64,1) backwards; }
.rappel-cloche { position: absolute; right: -4px; top: -2px; font-size: 34px; transform-origin: 50% 10%;
  animation: avis-tombe .45s .35s cubic-bezier(.34,1.56,.64,1) backwards, rappel-sonne 1.2s .8s ease-in-out 2; }
.rappel-cloche.grande { position: static; display: block; font-size: 64px; margin: 6px auto 8px; animation: rappel-sonne 1.2s .2s ease-in-out 2; }
.rappel-cloche.eteinte { animation: avis-tombe .45s backwards; }
.rappel-heures { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.rappel-fenetre .lien-discret { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--texte-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
@keyframes rappel-sonne { 0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .rappel-cloche, .rappel-robot { animation: none !important; } }
/* --- LES PETITES FENETRES (dialogue.js) : saisir un pseudo, confirmer */
.dialogue { text-align: center; }
.dialogue .lien-discret { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--texte-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.dlg-ligne { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
.dlg-champ {
  flex: 1; min-width: 0; font: inherit; font-size: 18px; font-weight: 700; text-align: center; color: var(--texte);
  background: var(--fond-2, var(--surface-2)); border: 1.5px solid var(--bord); border-radius: var(--r-m, 14px); padding: 12px;
}
.dlg-champ:focus { outline: none; border-color: var(--accent, var(--excel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--excel)) 30%, transparent); }
.dlg-champ.neuf { animation: avis-tombe .4s cubic-bezier(.34,1.56,.64,1); }
.dlg-de { flex: none; width: 52px; height: 52px; border-radius: var(--r-m, 14px); border: 1.5px solid var(--bord); background: var(--surface-2); font-size: 26px; cursor: pointer; }
.dlg-de.roule { animation: dlg-roule .55s cubic-bezier(.34,1.56,.64,1); }
.avis-envoyer.danger { background: var(--danger); color: #fff; box-shadow: 0 4px 0 0 color-mix(in srgb, var(--danger) 60%, #000); }
@keyframes dlg-roule { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }