/* ============================================================
   Home - hero CTA + services section
   Partage par principal.html et app/pages/home.html.
   Tout est scope sous .hero-cta / .services pour ne pas
   deborder sur le reste de la page Bootstrap.
   ============================================================ */

/* ------------------------------------------------------------
   Hero : Get Started + Sign In / Logout
   ------------------------------------------------------------ */
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; }
.hero-cta--end { justify-content:flex-end; }

.hero-btn {
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 30px;
  border-radius:8px; border:2px solid transparent; text-decoration:none;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:15.5px; line-height:1;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hero-btn:focus-visible { outline:3px solid #9CC0FF; outline-offset:3px; }

.hero-btn--start { background:#3368C6; color:#fff; }
.hero-btn--start:hover,
.hero-btn--start:focus { background:#2554A8; color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28); }

.hero-btn--auth {
  background:linear-gradient(135deg,#1B4396 0%,#3F8AE0 100%);
  color:#fff; border-color:rgba(255,255,255,.55);
}
.hero-btn--auth:hover,
.hero-btn--auth:focus {
  background:linear-gradient(135deg,#153574 0%,#2F73C8 100%);
  color:#fff; border-color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28);
}

@media (max-width: 575.98px) {
  .hero-btn { height:46px; padding:0 20px; font-size:14px; }
}

/* ------------------------------------------------------------
   Grille "Reliable & High-Quality Service"
   Icones SVG (antibiotique, helice) : meme gabarit que les <i>
   Bootstrap Icons voisines, qui sont en font-size:60px.
   ------------------------------------------------------------ */
.icon-box-primary .service-icon,
.icon-box-light .service-icon { display:block; width:60px; height:60px; }

/* --- Survol : la carte se remplit de bleu et le texte passe en blanc ---
   style.css fait deja monter un aplat uni ; on le remplace par un degrade,
   une trame de points qui defile et un leger soulevement. */
.container-service .service-item {
  overflow:hidden;
  transition:transform .45s ease, box-shadow .45s ease;
}
.container-service .service-item:hover {
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(20,50,110,.22);
}
.container-service .service-item::before {
  background:linear-gradient(160deg,#3F7BD8 0%,#2554A8 55%,#173A80 100%);
}
.container-service .service-item::after {
  position:absolute; content:""; inset:0; z-index:0; opacity:0; pointer-events:none;
  background-image:
    radial-gradient(120% 80% at 85% 8%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.30) 1.5px, transparent 1.7px);
  background-size:100% 100%, 20px 20px;
  transition:opacity .45s ease .18s;
}
.container-service .service-item:hover::after {
  opacity:1;
  animation:svcDrift 8s linear infinite;
}
@keyframes svcDrift {
  from { background-position:0 0, 0 0; }
  to   { background-position:0 0, 40px -40px; }
}

/* icones : blanches sur le bleu, et le repere rouge de l'helice s'eclaircit */
.container-service .service-item:hover .icon-box-primary i,
.container-service .service-item:hover .icon-box-primary svg { color:#fff !important; }
.container-service .service-item:hover .icon-box-primary::before { background:rgba(255,255,255,.22); }
.service-icon .helix-hot { transition:stroke .4s ease; }
.container-service .service-item:hover .service-icon .helix-hot { stroke:#FFC9C9; }

/* soulignement ambre qui se deploie sous le titre */
.container-service .service-item h5 { padding-bottom:12px; }
.container-service .service-item h5::after {
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:#FFD37A; border-radius:999px; transition:width .45s ease .12s;
}
.container-service .service-item:hover h5::after { width:48px; }

/* --- Titres : apparition mot a mot (pilote par home.js) ---
   Tous les mots sont dans le DOM des le depart, seul leur rendu est differe :
   le titre occupe sa place definitive et la grille ne bouge pas. `both` retient
   l'etat initial pendant le delai, sinon le mot clignoterait avant de partir. */
.rise__w { display:inline-block; opacity:0; transform:translateY(9px); }
.rise.is-in .rise__w { animation:wordRise .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes wordRise { to { opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .container-service .service-item,
  .container-service .service-item::after { animation:none !important; transition:none !important; }
}

/* ------------------------------------------------------------
   Services : "Three engines, one workspace"
   ------------------------------------------------------------ */
.services {
  --blue:#3368C6; --blue-dark:#1B4396; --navy:#0E2A5C; --navy-text:#12284C;
  --grey-text:#5C6B85; --muted:#8FA6CC; --bg:#F5F7FB; --tint:#EDF3FE;
  --border:#E6EBF4; --border-strong:#C9D8F2; --green:#5BE49B; --amber:#FFD37A;
}
.services, .services * { box-sizing:border-box; }
.services a { text-decoration:none; }

@keyframes riseIn   { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes ringPulse{ 0% { transform:scale(.9); opacity:.5; } 70% { transform:scale(1.45); opacity:0; } 100% { opacity:0; } }
@keyframes spinSlow { to { transform:rotate(360deg); } }
@keyframes floatY   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes sweep    { 0% { left:-45%; } 55%,100% { left:120%; } }
@keyframes dashFlow { to { stroke-dashoffset:-120; } }
@keyframes soonBar  { 0% { transform:translateX(-100%); } 100% { transform:translateX(320%); } }

.services {
  padding:74px 0 84px; background:var(--bg);
  font-family:'Nunito Sans',sans-serif; color:var(--navy-text);
  scroll-margin-top:20px;   /* cible du bouton Get Started */
}
.services__inner { max-width:1320px; margin:0 auto; padding:0 44px; }

/* header */
.services__head { text-align:center; max-width:680px; margin:0 auto 52px; animation:riseIn .6s ease both; }
.services__eyebrow {
  display:inline-flex; align-items:center; gap:10px; padding:8px 20px; border-radius:999px;
  background:var(--tint); border:1px solid #D5E3FA; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--blue);
}
.services__eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--blue); animation:ringPulse 2.6s ease-out infinite; }
.services__title {
  font-family:'Poppins',sans-serif; font-weight:800; font-size:44px; line-height:1.12;
  letter-spacing:-1.4px; margin:20px 0 0; color:var(--navy); text-wrap:balance;
}
.services__title span { color:var(--blue); }
.services__rule { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; }
.services__rule i { width:26px; height:2px; border-radius:999px; background:var(--border-strong); }
.services__rule i:nth-child(2) { width:56px; height:3px; background:var(--blue); }
.services__sub { font-size:17px; line-height:1.65; color:var(--grey-text); margin:20px 0 0; text-wrap:pretty; }

/* grid */
.services__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:26px; align-items:stretch; }

/* card */
.svc {
  position:relative; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; gap:20px;   /* aligne tous les boutons */
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:38px 32px 32px;
  box-shadow:0 10px 28px rgba(20,50,110,.07);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  animation:riseIn .65s ease both;
}
.svc:nth-child(1) { animation-delay:.05s; }
.svc:nth-child(2) { animation-delay:.18s; }
.svc:nth-child(3) { animation-delay:.31s; }
.svc:not(.svc--soon):hover {
  transform:translateY(-8px);
  box-shadow:0 26px 54px rgba(20,50,110,.22);
  border-color:transparent;
}

/* --- Survol : la carte se remplit d'un degrade bleu vivant ---
   Le degrade vit dans un ::after plutot que dans `background` : une couche
   qu'on fait apparaitre en opacite se transitionne proprement, alors qu'un
   degrade ne s'interpole pas d'un etat a l'autre.
   background-size a 220% laisse de la course au deplacement : sans marge, le
   degrade n'aurait nulle part ou glisser. */
.svc:not(.svc--soon)::after {
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:
    radial-gradient(115% 85% at 84% 6%, rgba(255,255,255,.17), transparent 58%),
    linear-gradient(150deg, #4A86E0 0%, #2F62C4 38%, #1B4396 72%, #12306E 100%);
  background-size:100% 100%, 220% 220%;
  background-position:0 0, 0% 0%;
  transition:opacity .42s ease;
}
.svc:not(.svc--soon):hover::after {
  opacity:1;
  animation:svcTide 9s ease-in-out infinite alternate;
}
@keyframes svcTide {
  from { background-position:0 0,   0%   0%; }
  to   { background-position:0 0, 100% 100%; }
}

/* Le contenu repasse au-dessus de la couche de degrade. */
.svc > * { position:relative; z-index:1; }

.svc:not(.svc--soon) .svc__label,
.svc:not(.svc--soon) .svc__name,
.svc:not(.svc--soon) .svc__glyph,
.svc:not(.svc--soon) .svc__ring,
.svc:not(.svc--soon) .svc__orbit,
.svc:not(.svc--soon) .svc__btn {
  transition:color .35s ease, background .35s ease, border-color .35s ease,
             transform .22s ease, box-shadow .3s ease;
}
.svc:not(.svc--soon):hover .svc__label { color:rgba(255,255,255,.78); }
.svc:not(.svc--soon):hover .svc__name  { color:#fff; }
.svc:not(.svc--soon):hover .svc__ring  { border-color:rgba(255,255,255,.34); }
.svc:not(.svc--soon):hover .svc__orbit { border-color:rgba(255,255,255,.26); }
.svc:not(.svc--soon):hover .svc__glyph { background:rgba(255,255,255,.15); color:#fff; }
/* Le bouton s'inverse : sur un fond bleu, un bouton bleu disparaitrait. */
.svc:not(.svc--soon):hover .svc__btn { background:#fff; color:var(--blue-dark); }
.svc:not(.svc--soon) .svc__btn .shine { transition:opacity .3s ease; }
.svc:not(.svc--soon):hover .svc__btn .shine { opacity:0; }

/* --- Bouton : l'affordance tient dans la fleche ---
   Elle avance de 5 px au survol : c'est le geste qui dit "on part quelque part",
   la ou un simple changement de couleur ne dit que "je suis survolable".
   Le bouton se souleve avec elle, et retombe au clic — l'appui doit se sentir. */
.svc__btn svg { transition:transform .28s cubic-bezier(.16,1,.3,1); }
.svc__btn:hover svg,
.svc__btn:focus-visible svg { transform:translateX(5px); }

.svc__btn:hover,
.svc__btn:focus-visible { transform:translateY(-2px); box-shadow:0 12px 24px rgba(6,26,74,.3); }
.svc__btn:active { transform:translateY(0); box-shadow:0 4px 10px rgba(6,26,74,.22); }
.svc__btn:focus-visible { outline:3px solid rgba(255,255,255,.8); outline-offset:3px; }

/* Hors survol de la carte, le bouton est bleu : c'est le halo qui doit etre
   bleu, pas blanc, sinon il disparait sur le fond clair. */
.svc:not(:hover) .svc__btn:focus-visible { outline-color:var(--blue-dark); }
.svc__top { position:absolute; top:0; left:0; right:0; height:4px; }
.svc:nth-child(1) .svc__top { background:linear-gradient(90deg,var(--blue),#7FB0FF); }
.svc:nth-child(2) .svc__top { background:linear-gradient(90deg,var(--blue-dark),var(--green)); }
.svc:nth-child(3) .svc__top { background:linear-gradient(90deg,#6366f1,#0ea5e9); }

/* icon */
.svc__icon { position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center; }
.svc__ring  { position:absolute; inset:0; border-radius:50%; border:1.5px solid #C9DBF8; animation:ringPulse 3.6s ease-out infinite; }
.svc__orbit { position:absolute; inset:4px; border-radius:50%; border:1.5px dashed #DCE8FC; animation:spinSlow 20s linear infinite; }
.svc:nth-child(2) .svc__ring  { animation-delay:.9s; }
.svc:nth-child(2) .svc__orbit { animation-duration:24s; animation-direction:reverse; }
.svc:nth-child(3) .svc__orbit { animation-duration:26s; }
.svc__glyph {
  position:relative; width:60px; height:60px; border-radius:18px; background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; animation:floatY 5.4s ease-in-out infinite;
}
.svc:nth-child(2) .svc__glyph { color:var(--blue-dark); animation-delay:.5s; }
.svc__glyph .flow  { stroke-dasharray:4 4; animation:dashFlow 6s linear infinite; }
.svc__glyph .check { stroke-dasharray:12;  animation:dashFlow 4s linear infinite; }
.svc__glyph .hand  { transform-origin:12px 12px; animation:spinSlow 8s linear infinite; }

/* labels */
.svc__label {
  display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--blue); margin-bottom:10px;
}
.svc:nth-child(2) .svc__label { color:var(--blue-dark); }
.svc__label i { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.svc__name {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; line-height:1.34;
  letter-spacing:-.4px; margin:0; color:var(--navy); text-wrap:balance;
}

/* button */
.svc__btn {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px;
  height:54px; border-radius:10px; background:var(--blue); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; transition:background .18s;
}
.svc__btn:hover { background:var(--blue-dark); color:#fff; }
.svc__btn .shine {
  position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation:sweep 3.8s ease-in-out infinite;
}
.svc:nth-child(2) .svc__btn .shine { animation-delay:1.2s; }

/* coming soon */
.svc--soon { background:#FBFCFE; border:1px dashed var(--border-strong); box-shadow:none; }
.svc--soon .svc__top { background:#E1E8F4; overflow:hidden; }
.svc--soon .svc__top i {
  position:absolute; top:0; bottom:0; width:32%;
  background:linear-gradient(90deg,var(--blue),#7FB0FF); animation:soonBar 2.8s ease-in-out infinite;
}
.svc--soon .svc__glyph { background:#EEF3FB; color:var(--muted); animation:none; }
.svc--soon .svc__label { color:var(--muted); }
.svc--soon .svc__name  { color:var(--grey-text); }
.svc__btn--disabled {
  display:flex; align-items:center; justify-content:center; gap:10px; height:54px; border-radius:10px;
  background:#EEF3FB; color:#A7B4C9; font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; cursor:not-allowed;
}

@media (max-width: 767.98px) {
  .services { padding:56px 0 60px; }
  .services__inner { padding:0 20px; }
  .services__title { font-size:32px; letter-spacing:-.8px; }
}

/* `.services *` ne touche pas les pseudo-elements : le degrade du survol vit
   dans un ::after et continuerait de deriver sans les deux selecteurs ajoutes. */
@media (prefers-reduced-motion: reduce) {
  .services *,
  .services *::before,
  .services *::after {
    animation:none !important;
    transition:none !important;
  }
}