/* =========================================================================
   assets/style.css – Styles spécifiques PFE Platform (100% offline compatible)
   Dépendances Tailwind & Icons sont dans offline-tailwind.css / offline-icons.css
   ========================================================================= */

.gradient-bg{
  background: linear-gradient(135deg,#ff6b6b 0%,#ffa502 25%,#ffd93d 50%,#6bcb77 75%,#4d96ff 100%);
  background-size:300% 300%;
  animation:gradientMove 10s ease infinite;
}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.card-hover{transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275)}
.card-hover:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 25px 50px -12px rgba(0,0,0,.35)}

.service-icon{
  width:90px;height:90px;display:flex;align-items:center;justify-content:center;
  border-radius:25px;font-size:36px;transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275)
}
.service-icon:hover{transform:scale(1.2) rotate(10deg)}

/* Effet bordure dégradée animée au hover */
.offer-card{position:relative;border:3px solid transparent;background-clip:padding-box;transition:all .35s ease}
.offer-card::before{
  content:'';position:absolute;inset:-3px;border-radius:1.1rem;
  background:linear-gradient(135deg,#ff6b6b,#ffa502,#ffd93d,#6bcb77,#4d96ff,#a56bff);
  background-size:300% 300%;z-index:-1;opacity:0;transition:opacity .35s ease;
  animation:gradientMove 6s ease infinite
}
.offer-card:hover::before{opacity:1}
.offer-card:hover{transform:translateY(-10px)}

.btn-primary{background:linear-gradient(135deg,#ff6b6b 0%,#ffa502 100%);transition:all .3s ease}
.btn-primary:hover{transform:scale(1.06);box-shadow:0 10px 25px -5px rgba(255,107,107,.6)}
.btn-yellow{background:linear-gradient(135deg,#ffd93d 0%,#ffa502 100%)}
.btn-blue{background:linear-gradient(135deg,#4d96ff 0%,#4361ee 100%)}
.btn-green{background:linear-gradient(135deg,#6bcb77 0%,#2d8c2d 100%)}

.step-number{background:linear-gradient(135deg,#6bcb77 0%,#2d8c2d 100%);transition:all .3s ease}
.step-number:hover{transform:scale(1.2) rotate(360deg)}

.pulse-badge{animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.floating{animation:floating 3s ease-in-out infinite}
@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}

.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}

.modal-overlay{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-zoom{animation:zoomBounce .4s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
@keyframes zoomBounce{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.hover-zoom{transition:transform .3s cubic-bezier(0.175,0.885,0.32,1.275)}
.hover-zoom:hover{transform:scale(1.05)}

.toast{animation:slideIn .4s ease,fadeOut .4s ease 2.6s forwards}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeOut{to{opacity:0;transform:translateX(120%)}}

.img-thumb{cursor:pointer;border:3px solid transparent;transition:all .2s ease;border-radius:.75rem;overflow:hidden}
.img-thumb:hover{transform:scale(1.05);border-color:#ffa502}
.img-thumb.selected{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.3)}

.chat-box{height:340px;overflow-y:auto;background:#f8fafc;border-radius:1rem;padding:1rem}
.bubble{max-width:78%;padding:.6rem .9rem;border-radius:1rem;margin-bottom:.5rem;font-size:.9rem;word-wrap:break-word}
.bubble-me{background:linear-gradient(135deg,#4d96ff,#4361ee);color:#fff;margin-left:auto;border-bottom-right-radius:.2rem}
.bubble-them{background:#fff;color:#333;border:1px solid #e5e7eb;margin-right:auto;border-bottom-left-radius:.2rem}
.bubble-meta{font-size:.65rem;opacity:.7;margin-top:2px}

.font-arabic{font-family:'Tajawal',system-ui,sans-serif !important}

input[type="date"]{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M8 7V3m8 4V3m-9 8h10V8H7v4h10v2H7v4h10v2H7a2 2 0 01-2-2v-6a2 2 0 012-2h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
}