/* WebCall design tokens — source unique bleu 2mn. Mobile-first.
 * Les pages /me/* (layout.ejs) et les nouvelles pages /, /login, /call
 * consomment ces variables. Ne pas dupliquer la palette ailleurs.
 */
:root {
  --wc-primary: rgb(16 54 91);
  --wc-primary-2: rgb(30 64 175);
  --wc-gradient: linear-gradient(135deg, rgb(16 54 91) 0%, rgb(30 64 175) 100%);
  --wc-surface: #ffffff;
  --wc-bg: #f8fafc;
  --wc-text: #1e293b;
  --wc-muted: #64748b;
  --wc-radius: 12px;
  --wc-radius-lg: 16px;
  --wc-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --wc-shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --wc-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --wc-cta-min-height: 48px;
  --wc-safe-bottom: env(safe-area-inset-bottom, 0px);
}
[data-theme="dark"] {
  --wc-surface: #1e293b;
  --wc-bg: #0f172a;
  --wc-text: #f1f5f9;
  --wc-muted: #94a3b8;
}
/* Socle composants */
.wc-card {
  background: var(--wc-surface); color: var(--wc-text);
  border-radius: var(--wc-radius-lg); box-shadow: var(--wc-shadow-sm);
  border: 1px solid rgba(16,54,91,.1);
}
.wc-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--wc-cta-min-height); padding: .7rem 1.25rem;
  border-radius: var(--wc-radius); border: none; font-weight: 600;
  background: var(--wc-gradient); color: #fff; text-decoration: none; width: 100%;
}
.wc-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--wc-cta-min-height); padding: .7rem 1.25rem;
  border-radius: var(--wc-radius); font-weight: 600; text-decoration: none;
  background: transparent; color: var(--wc-primary);
  border: 1.5px solid rgba(16,54,91,.35); width: 100%;
}
.wc-input {
  width: 100%; min-height: var(--wc-cta-min-height);
  border-radius: var(--wc-radius); border: 1.5px solid #e2e8f0;
  padding: .7rem .9rem; font-size: 1rem; background: var(--wc-surface); color: var(--wc-text);
}
.wc-input:focus { border-color: var(--wc-primary); outline: none; box-shadow: 0 0 0 3px rgba(16,54,91,.15); }
.wc-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; display: block; }
.wc-error { color: #dc2626; font-size: .85rem; min-height: 1.25em; }
.wc-hero { background: var(--wc-gradient); color: #fff; border-radius: 20px; padding: 1.75rem 1.25rem; }
.wc-grid-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .wc-grid-cards { grid-template-columns: repeat(3, 1fr); } }
.wc-sticky-cta { position: sticky; bottom: calc(12px + var(--wc-safe-bottom)); display: grid; gap: .6rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 3000; }
.skip-link:focus { left: 8px; top: 8px; }
/* Images et médias fluides (jamais de scroll horizontal) */
img, svg, video { max-width: 100%; height: auto; }
/* Boutons : le texte peut passer sur 2 lignes sur très petit écran */
.wc-btn-primary, .wc-btn-ghost { white-space: normal; text-align: center; line-height: 1.3; overflow-wrap: anywhere; }
/* ————— Très petits écrans : 280px en référence (mobile-first) ————— */
@media (max-width: 320px) {
  .wc-hero { padding: 1.25rem .9rem; border-radius: 16px; }
  .wc-card { border-radius: 12px; }
  .wc-btn-primary, .wc-btn-ghost { padding: .7rem .8rem; font-size: .9rem; }
  .wc-input { padding: .65rem .7rem; font-size: .95rem; }
  .wc-sticky-cta { gap: .5rem; bottom: calc(8px + var(--wc-safe-bottom)); }
}