/* =======================================================================
   KAUG — Page: Aide & contact  (copie de base commune)
   ======================================================================= */
/* Fallbacks (si non définis dans common.css) */
:root{
  --primary: #3b82f6;
  --ink: var(--ink, #111827);
  --muted: var(--muted, #6b7280);
  --card: var(--card, #ffffff);
  --border: var(--border, #e5e7eb);
  --shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.06));
}

/* Titre de page & intro */
.page-title{ text-align:center; margin:24px 0 10px; font-weight:800; font-size:clamp(1.4rem, 3vw, 1.7rem); }
.page-intro{ text-align:center; color:var(--muted); max-width:760px; margin:0 auto 22px; }

/* Grille avec plus d’air entre les cartes */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;          /* 🔹 plus d’espace horizontal et vertical */
  margin:20px 0;     /* 🔹 ajoute un peu d’air autour de la grille */
}
@media (max-width:980px){ .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:700px){ .cards{ grid-template-columns: 1fr; } }

/* Encadrés blancs harmonisés pour toutes les cartes */
.card{
  background:#fff;                          /* fond blanc net */
  border:1px solid var(--border);           /* liseré gris léger */
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);    /* ombre douce */
  padding:22px 18px;                        /* plus d’air interne */
  transition:transform .2s ease, box-shadow .2s ease; /* mise en valeur au survol */
}

/* Survol/focus : légère élévation (desktop & clavier) */
.card:hover,
.card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Accessibilité : pas d’animation si l’utilisateur préfère réduire les effets */
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .card:hover, .card:focus-within{
    transform:none;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
  }
}

/* Titre de carte : bleu + centré, un peu plus d’air */
.card h2{
  margin:0 0 10px;
  text-align:center;
  color:var(--primary);     /* 🔹 bleu principal défini dans :root */
  font-weight:700;
  font-size:clamp(1.02rem, 2.2vw, 1.18rem);
}

.card p{
  margin:6px 0 0;
  color:var(--ink);
  text-align:center;
  line-height:1.45;
}