/* Espace client — extrait de styles.css du site potentieel-cgv (CRM 1) : uniquement ce que espace-client.html, auth.html et
   reset.html utilisent encore (variables, remise à zéro, corps de page, focus clavier, curseur des boutons).
   Copie à l'identique des lignes d'origine ; le reste de la feuille appartient au site vitrine. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,400;1,600;1,700&family=Caveat:wght@600;700&display=swap&font-display=swap');

:root {
  --bg:           #ffffff;
  --bg-card:      #f7f6f3;
  --bg-card-2:    #f0eee7;
  --bg-card-3:    #eae7de;
  --orange:       #c1531e;
  --orange-light: #f4926a;
  --orange-btn:   #f5a07a;
  --lime:         #4c6f18;
  --lime-dim:     #3a5511;
  --white:        #18170f;
  --gray-light:   #514f47;
  --gray:         #6b6862;
  --gray-dark:    #d6d2c7;
  --border:       #e7e3d9;
  --border-card:  #ded9cc;
  --radius:       16px;
  --radius-sm:    10px;
  --radius-pill:  999px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.skip-link:focus { top: 16px; }

/* Keyboard focus ring — visible only for keyboard nav */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }


button, [role="button"], label[for],
.btn-primary, .btn-secondary, .btn-crm,
.contact-method, .faq-q, .wa-dot,
.testimonial-card, .tilt-card { cursor: pointer; }


button { touch-action: manipulation; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-anim, .scroll-anim-left {
    opacity: 1 !important;
    transform: none !important;
  }
  .ticker-track { animation: none !important; }
}

/* ---- Installation en application (installer-espace.js) ---- */
[data-installer][hidden] { display: none !important; }
.inst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
  background: var(--bg-card-2); color: var(--white); border: 1px solid var(--border-card);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
}
.inst-btn:hover { background: var(--bg-card-3); }
.inst-carte { margin-top: 14px; text-align: center; }
.inst-carte .inst-btn { width: 100%; }
.inst-bandeau {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 6px 4px 6px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--gray-light);
}
.inst-bandeau .inst-btn { padding: 8px 14px; background: var(--orange); color: #fff; border-color: var(--orange); flex: 0 0 auto; }
.inst-bandeau-texte { flex: 1; min-width: 0; }
.inst-fermer {
  flex: 0 0 44px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--gray); font-size: 22px; line-height: 1; border-radius: 10px;
}
.inst-voile { position: fixed; inset: 0; z-index: 1000; background: rgba(24,23,15,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.inst-voile[hidden] { display: none; }
.inst-fenetre { background: var(--bg); color: var(--white); border-radius: 18px; padding: 24px 20px; width: 100%; max-width: 380px; box-shadow: 0 12px 48px rgba(0,0,0,.3); }
.inst-fenetre h2 { font-size: 18px; margin: 0 0 6px; }
.inst-intro { font-size: 13px; color: var(--gray); margin: 0 0 16px; }
.inst-etapes { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; padding: 0; font-size: 14px; }
.inst-etapes li { display: flex; gap: 12px; align-items: flex-start; }
.inst-etapes li > span { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.inst-etapes svg { vertical-align: -3px; }
.inst-ok { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: var(--orange); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }