/* =========================================================================
   Campy Nudge -- 21/10/2026
   Suggestions et alertes contextuelles.

   Regles de conduite, parce qu une suggestion qui derange est une publicite :
     - une seule carte visible a la fois ;
     - jamais deux fois la meme dans la session ;
     - declenchee par un signal REEL (stock, composition du panier, dates),
       jamais par un simple minuteur ;
     - toujours fermable, jamais modale, jamais au-dessus d un champ.
   ========================================================================= */

.cy-nudge-stack{
  position:fixed;left:18px;bottom:18px;z-index:9000;
  display:flex;flex-direction:column;gap:10px;
  width:min(340px, calc(100vw - 36px));pointer-events:none;
}

.cy-nudge{
  --cyn-tone:#244d31;
  --cyn-tone-soft:#eaf2ec;
  pointer-events:auto;position:relative;
  display:grid;grid-template-columns:38px minmax(0,1fr) 24px;gap:12px;
  padding:14px 14px 14px 13px;
  background:#fff;border:1px solid #e1e8e1;border-radius:16px;
  box-shadow:0 14px 38px rgba(31,61,42,.16);
  animation:cy-nudge-in .42s cubic-bezier(.2,1.1,.4,1);
  font-size:13px;line-height:1.5;color:#2b3b2f;
}
.cy-nudge.is-out{animation:cy-nudge-out .28s ease-in forwards}
@keyframes cy-nudge-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cy-nudge-out{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* Le liseré de gauche porte le ton : vert = idée, ambre = attention,
   rouge sourd = problème. Pas d icône rouge criarde, pas de majuscules. */
.cy-nudge::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cyn-tone);
}
.cy-nudge--warn{--cyn-tone:#b8762a;--cyn-tone-soft:#fbf1e2}
.cy-nudge--stop{--cyn-tone:#a64b3a;--cyn-tone-soft:#fbecea}

.cy-nudge__ico{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--cyn-tone-soft);color:var(--cyn-tone);
}
.cy-nudge__ico svg{width:19px;height:19px;display:block}

.cy-nudge__body{min-width:0}
.cy-nudge__title{margin:0 0 2px;font-size:13.5px;font-weight:700;color:#1f3d2a}
.cy-nudge__text{margin:0;color:#5d6d60}
.cy-nudge__text b{color:#1f3d2a;font-weight:600}

.cy-nudge__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cy-nudge__btn{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:7px 12px;border-radius:9px;border:1px solid var(--cyn-tone);
  background:var(--cyn-tone);color:#fff;text-decoration:none;display:inline-block;
  transition:transform .15s ease, filter .15s ease;
}
.cy-nudge__btn:hover{filter:brightness(1.08)}
.cy-nudge__btn:active{transform:translateY(1px)}
.cy-nudge__btn--ghost{background:transparent;color:var(--cyn-tone);border-color:#d6e0d6}

.cy-nudge__close{
  width:24px;height:24px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:#9aa89d;font-size:17px;line-height:1;
  display:grid;place-items:center;align-self:start;
}
.cy-nudge__close:hover{background:#f1f5f1;color:#54654f}

/* Minuterie de fermeture : on montre le temps qui reste au lieu de faire
   disparaitre la carte sans prevenir. */
.cy-nudge__life{
  position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  border-radius:2px;background:#eef2ee;overflow:hidden;
}
.cy-nudge__life i{
  display:block;height:100%;background:var(--cyn-tone);opacity:.4;
  transform-origin:left center;animation:cy-nudge-life linear forwards;
}
@keyframes cy-nudge-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* =========================================================================
   Mobile : une feuille du bas, pas une carte qui flotte.
   21/10/2026 — la carte flottante se faisait recouvrir par le bouton
   « retour en haut », qui vit au meme coin : le libelle du bouton principal
   etait coupe en deux. Mesurer ne suffisait pas (ce bouton flotte AU-DESSUS
   de la barre du bas, pas colle a l ecran). On change donc deux choses :
   la carte devient une feuille ancree au bas, pleine largeur, et les
   commandes flottantes du meme coin s effacent le temps de la lecture.

   La feuille du bas est aussi l idiome que le telephone attend : elle monte,
   elle se lit d un coup d oeil, elle se referme d un geste.
   ========================================================================= */
@media(max-width:700px){
  .cy-nudge-stack{
    left:0;right:0;width:auto;gap:0;
    /* L offset est MESURE par le JS (barre du bas + bulle du concierge).
       Les 64 px ne servent que si le script n a pas encore tourne. */
    bottom:calc(env(safe-area-inset-bottom, 0px) + var(--cy-nudge-offset, 64px));
  }
  .cy-nudge{
    grid-template-columns:40px minmax(0,1fr) 32px;
    gap:12px;
    padding:16px 16px 18px;
    border-radius:18px 18px 0 0;
    border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -12px 36px rgba(31,61,42,.20);
    animation:cy-sheet-in .34s cubic-bezier(.2,1,.3,1);
  }
  /* Le liseré passe du bord gauche au bord haut : sur une feuille, c est la
     poignée qu on regarde en premier. */
  .cy-nudge::before{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:3px;border-radius:0;
  }
  .cy-nudge__ico{width:40px;height:40px;border-radius:12px}
  .cy-nudge__ico svg{width:21px;height:21px}
  .cy-nudge__title{font-size:15px;margin-bottom:3px}
  .cy-nudge__text{font-size:13.5px}
  /* Une action franche, une sortie discrete.
     Cote a cote, « Ajouter une lampe » passait a la ligne pendant que
     « Voir la fiche » tenait sur une seule : le secondaire paraissait plus
     important que le principal. Sur une feuille du bas, on empile — et le
     secondaire redevient ce qu il est, un lien. */
  .cy-nudge__actions{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:14px}
  .cy-nudge__btn{
    min-height:46px;padding:12px 16px;font-size:14px;font-weight:700;
    display:flex;align-items:center;justify-content:center;text-align:center;
  }
  .cy-nudge__btn--ghost{
    border:0;background:transparent;min-height:40px;
    font-weight:600;font-size:13.5px;text-decoration:underline;
    text-underline-offset:3px;
  }
  .cy-nudge__btn--ghost:hover{filter:none;opacity:.78}
  .cy-nudge__close{width:32px;height:32px;font-size:20px}
  .cy-nudge__life{left:0;right:0;bottom:0;border-radius:0}
}
@keyframes cy-sheet-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

/* --- Pendant la lecture, le coin se libere ------------------------------ */
/* « Retour en haut » et autres pastilles flottantes du meme coin : elles
   reviennent des que la carte part. Ce n est pas une suppression, c est une
   priorite — la carte est transitoire et porte une decision. */
body.cy-nudge-open .cy-back-to-top,
body.cy-nudge-open .cy-top{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.92);
  transition:opacity .2s ease, transform .2s ease;
}

/* --- Variante en ligne : attachee a une ligne du panier ---------------- */
.cy-nudge--inline{
  position:static;box-shadow:none;animation:none;
  border-style:dashed;background:var(--cyn-tone-soft);margin:10px 0 0;
}
.cy-nudge--inline .cy-nudge__life{display:none}

@media(prefers-reduced-motion:reduce){
  .cy-nudge,.cy-nudge.is-out,.cy-nudge__life i{animation:none}
  .cy-nudge.is-out{display:none}
  body.cy-nudge-open .cy-back-to-top,
  body.cy-nudge-open .cy-top{transition:none;transform:none}
}