/* ============================================================
   MG Apps — couche design partagée (embellissement + animations)
   Chargée APRÈS les styles propres à chaque page : ne contient
   que de la présentation. Aucun contenu, prix ou lien modifié.
   ============================================================ */

::selection{background:rgba(139,92,246,.55);color:#fff}

/* ---------- Arrière-plan : aurore lente sur les halos existants ---------- */
.halo{will-change:transform,opacity}
.h1{animation:mgDrift1 30s ease-in-out infinite alternate}
.h2{animation:mgDrift2 38s ease-in-out infinite alternate}
.h3{animation:mgDrift3 24s ease-in-out infinite alternate}
@keyframes mgDrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,46px) scale(1.14)}}
@keyframes mgDrift2{from{transform:translate(0,0) scale(1.06)}to{transform:translate(-64px,-40px) scale(.94)}}
@keyframes mgDrift3{from{transform:translate(0,0);opacity:.22}to{transform:translate(-46px,34px);opacity:.4}}

/* ---------- Logo Créations MG : transparent, halo, flottement ---------- */
.mg-logo{position:relative;display:inline-flex;flex:none;width:58px;height:58px;align-items:center;justify-content:center}
.mg-logo::before{content:"";position:absolute;inset:-18px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.5) 0%,rgba(139,92,246,.42) 42%,rgba(139,92,246,0) 70%);
  filter:blur(7px);animation:mgBreathe 5s ease-in-out infinite}
.mg-logo .logo-img{position:relative;z-index:1;width:58px;height:58px;object-fit:contain;background:transparent;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 6px 16px rgba(139,92,246,.55)) drop-shadow(0 0 22px rgba(34,211,238,.22));
  animation:mgFloat 5s ease-in-out infinite}
@keyframes mgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes mgBreathe{0%,100%{opacity:.62;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}

/* ---------- Ancres : compensation du décalage des révélations ---------- */
[id]{scroll-margin-top:22px}

/* ---------- Tuiles en vol : pas de défilement horizontal pendant l'arrivée ---------- */
html.mg-flyx{overflow-x:hidden}

/* ---------- Révélation au défilement (activée par JS : html.mgd) ---------- */
html.mgd .rv{opacity:0;transform:translateY(16px);transition:opacity .65s ease var(--rd,0s),transform .65s cubic-bezier(.22,.8,.3,1) var(--rd,0s)}
html.mgd .rv.in{opacity:1;transform:none}

/* ---------- Micro-interactions : cartes, tuiles, boutons ---------- */
.tile,.card,.cat-card,.step-card,.install-zone,.featured,.codebox{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.tile:active,.card:active,.cat-card:active{transform:scale(.97)}
.tile-ico img,.app-ico img,.shots img{transition:transform .45s ease,box-shadow .45s ease}
.btn{position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.btn::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-190%) skewX(-20deg);transition:transform .65s ease}
.chip,.more-btn,.tag,.lang-switch,.lang-switch button,.badge{transition:all .3s ease}
.more-btn:hover{border-color:var(--cyan);background:rgba(34,211,238,.13);transform:translateY(-1px)}
.chip:hover{border-color:rgba(139,92,246,.65)}
.featured input,.featured select,.featured textarea{transition:border-color .3s ease,box-shadow .3s ease}
.featured input:focus,.featured select:focus,.featured textarea:focus{box-shadow:0 0 0 4px rgba(139,92,246,.18)}
.codebox{animation:mgCodeGlow 4.5s ease-in-out infinite}
@keyframes mgCodeGlow{0%,100%{box-shadow:0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 34px rgba(139,92,246,.22)}}
@media (hover:hover){
  .tile:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.65);box-shadow:0 14px 34px rgba(109,40,217,.35)}
  .card:hover,.cat-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.6);box-shadow:0 18px 42px rgba(76,29,149,.38)}
  .step-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(76,29,149,.3)}
  .install-zone:hover,.featured:hover{border-color:rgba(139,92,246,.75);box-shadow:0 16px 40px rgba(76,29,149,.32)}
  .tile:hover .tile-ico img,.card:hover .app-ico img{transform:scale(1.07)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(109,40,217,.45)}
  .btn:hover::after{transform:translateX(340%) skewX(-20deg)}
  .shots img:hover{transform:scale(1.02);box-shadow:0 14px 34px rgba(7,6,14,.55)}
}

/* ---------- Galerie : défilement doux + lightbox ---------- */
.shots{scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.5) transparent;scroll-behavior:smooth}
.shots::-webkit-scrollbar{height:6px}
.shots::-webkit-scrollbar-thumb{background:rgba(139,92,246,.45);border-radius:99px}
.shots img{cursor:zoom-in}
.mg-lb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(5,4,12,.92);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.mg-lb.open{opacity:1;pointer-events:auto}
.mg-lb img{max-width:94vw;max-height:86vh;border-radius:16px;border:1px solid rgba(139,92,246,.4);
  box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.955);transition:transform .35s ease}
.mg-lb.open img{transform:scale(1)}
.mg-lb button{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(139,92,246,.5);background:rgba(18,16,33,.85);color:#fff;cursor:pointer;
  font-size:22px;line-height:1;transition:all .3s ease}
.mg-lb button:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(34,211,238,.35)}
.mg-lb-x{top:18px;right:18px;width:46px;height:46px}
.mg-lb-p,.mg-lb-n{top:50%;transform:translateY(-50%);width:46px;height:56px;border-radius:16px}
.mg-lb-p{left:14px}.mg-lb-n{right:14px}

/* ---------- FAQ : accordéon animé (structure créée par JS) ---------- */
.faq-item{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);margin:0 0 10px;overflow:hidden;max-width:820px}
.faq-q{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:var(--text);
  font:inherit;font-weight:700;text-align:left;padding:15px 18px;cursor:pointer}
.faq-chev{margin-left:auto;flex:none;color:var(--cyan);transition:transform .4s ease;font-size:15px}
.faq-item.open .faq-chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s ease}
.faq-a-in{padding:0 18px 16px;color:#d9d5f5}
.faq-a-in span{color:#d9d5f5}

/* ---------- Mouvement réduit : on coupe toutes les animations ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .h1,.h2,.h3,.mg-logo::before,.mg-logo .logo-img,.codebox{animation:none !important}
  html.mgd .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .btn::after{display:none}
  .tile,.card,.cat-card,.step-card,.btn,.shots img,.mg-lb,.mg-lb img,.faq-a,.faq-chev{transition:none !important}
}

/* ============ En-tête aux couleurs de la composition officielle ============ */
/* Petite ligne cyan sous « MG Apps », slogan cyan espacé dessous (comme l'image de Mathieu) */
header.top h1{position:relative;padding-bottom:8px}
header.top h1::after{content:"";position:absolute;left:2px;bottom:0;height:3px;width:118px;max-width:70%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,rgba(34,211,238,0))}
header.top p{letter-spacing:.26em}
/* ============ En-tête « île flottante » : bulle vitrée qui flotte sur le fond aurore ============ */
header.top{margin:-12px 0 20px;padding:14px 18px;border-radius:26px;
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(34,211,238,.06)),rgba(13,11,26,.58);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);
  border:1px solid rgba(139,92,246,.38);
  box-shadow:0 18px 42px rgba(2,0,12,.55),0 4px 14px rgba(2,0,12,.42),inset 0 1px 0 rgba(255,255,255,.08),0 0 26px rgba(139,92,246,.13)}
@media (max-width:480px){header.top{padding:12px 14px;border-radius:24px;gap:10px}
  header.top p{letter-spacing:.19em}}
/* Préparation/atterrissage de l'intro : titre et slogan glissent à leur place */
header.top .mg-logo,header.top h1,header.top p{transition:opacity .45s ease,transform .45s ease}
html.mg-intro-prep header.top .mg-logo{opacity:0}
html.mg-intro-prep header.top h1{opacity:0;transform:translateX(16px)}
html.mg-intro-prep header.top p{opacity:0;transform:translateX(16px);transition-delay:.07s}
html.mg-intro-lock{overflow:hidden}

/* ============ Animation d'arrivée (accueil seulement) ============
   Les styles de l'écran d'intro vivent en CSS critique inline dans le
   <head> de l'accueil (premier rendu sans flash, fond transparent sur
   le fond de la boutique). Ici : seulement l'atterrissage de l'en-tête. */
@media (prefers-reduced-motion: reduce){
  header.top .mg-logo,header.top h1,header.top p{transition:none}
}