/* =========================================================
   LaMesaQr — Design System v2 (polish layer)
   S'appuie sur les tokens existants de style.css
   (bleu marine --green-900 / orange QR --gold-600)
   Charge APRÈS style.css sur chaque page.
   ========================================================= */

:root{
  /* Échelle d'espacement cohérente (8pt grid) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  /* Élévation (au-dessus des shadow-sm/md/lg existants) */
  --elevation-hover:0 16px 40px rgba(15,24,35,.16);
  --elevation-focus:0 0 0 4px rgba(255,90,0,.18);

  /* Rayon supplémentaire pour petits éléments (badges, chips, inputs) */
  --radius-xs:8px;
  --radius-pill:100px;

  /* Easing signature (léger rebond, cohérent partout) */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.18s;
  --dur-base:.3s;
  --dur-slow:.5s;
}

/* ---------- Focus visible unifié, accessible partout ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
.price-cta:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible{
  outline:2px solid var(--gold-600);
  outline-offset:3px;
  border-radius:var(--radius-xs);
  box-shadow:var(--elevation-focus);
}

/* ---------- Boutons : micro-interaction cohérente ---------- */
.btn-primary,.btn-secondary,.price-cta{
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-fast) ease;
}
.btn-primary:active,.btn-secondary:active,.price-cta:active{
  transform:translateY(0) scale(.98);
}

/* ---------- Cartes : élévation au survol harmonisée ---------- */
.price-card,.feature-card,.step-card,.plan-mini-card,.pricing-card{
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) ease;
}
.price-card:hover,.feature-card:hover,.pricing-card:hover{
  box-shadow:var(--elevation-hover);
}

/* ---------- Liens texte : soulignement animé ---------- */
.link-underline{
  position:relative;display:inline-block;
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--gold-600);transition:width var(--dur-base) var(--ease-out);
}
.link-underline:hover::after{width:100%;}

/* ---------- Badges "muted" (fonctionnalités non incluses) : plus lisibles ---------- */
.price-feature-muted{
  opacity:.55;
}
.price-feature-muted i.fa-xmark{
  color:var(--ink-soft);
}

/* ---------- Champs de formulaire : style unifié ---------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
textarea,select{
  border:1.5px solid var(--line);
  border-radius:var(--radius-xs);
  padding:12px 16px;
  font-family:var(--ff-body);
  font-size:.95rem;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  background:var(--white);
  color:var(--ink);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--gold-600);
  box-shadow:0 0 0 3px rgba(255,90,0,.12);
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:.7;}

/* ---------- Séparateurs de section discrets ---------- */
.section-divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
  border:none;
  margin:0;
}

/* ---------- Skeleton loader (pour états de chargement génériques) ---------- */
.skeleton{
  position:relative;overflow:hidden;background:var(--cream-2);border-radius:var(--radius-xs);
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);
  animation:skeletonShimmer 1.4s infinite;
}
@keyframes skeletonShimmer{100%{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none;}}

/* ---------- Toast / notifications légères (utilisable partout) ---------- */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:2000;
  background:var(--green-900);color:#fff;
  padding:14px 20px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  font-size:.9rem;font-weight:600;
  display:flex;align-items:center;gap:10px;
  transform:translateY(20px);opacity:0;
  transition:transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) ease;
  pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{background:#1E7A46;}
.toast.error{background:#B3261E;}
html[dir="rtl"] .toast{right:auto;left:24px;}

/* ---------- Scroll reveal fallback (si AOS absent) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- Accessibilité : cible tactile minimale ---------- */
@media (max-width:768px){
  a.btn-nav,button.btn-nav,.price-cta,.btn-primary,.btn-secondary{
    min-height:44px;
  }
}