/* ====== Index — styles spécifiques à la page d’accueil ====== */

/* Hero */
.hero{margin:16px 0 20px;text-align:center}
.hero h1{font-size:clamp(1.6rem,4vw,2rem);margin:0 0 8px;font-weight:800}
.hero .ia{color:var(--primary)}
.hero p{margin:6px 0 0;color:var(--muted);font-size:1.05rem}

/* Bandeaux (pills) */
.pills{
  list-style:none;
  padding:0;
  margin:12px auto 0;
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:nowrap;
  max-width:980px;
}

.pills li{
  background:var(--pill-bg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:.95rem;
  white-space:nowrap;
  text-align:center;
}

/* ✅ Dès que la largeur devient trop faible, on autorise les retours */
@media (max-width:780px){
  .pills{ flex-wrap:wrap; }           /* passe en lignes multiples si besoin */
  .pills li{ white-space:normal; }    /* permet le retour à la ligne interne */
}
@media (max-width:420px){
  .pills{ gap:10px; }
  .pills li{ text-align:center; word-break:break-word; }
}

/* Bandeau “Bientôt disponible” */
.soon{
  display: table;
  margin:14px auto 0;
  padding:8px 12px;
  background:#fff;
  border:1px dashed var(--border);
  box-shadow:var(--shadow);
  border-radius:10px;
  line-height:1.35;
  width:auto;
  max-width:92vw;
  color:var(--ink);
}

/* Zone CTA (boutons désactivés) */
.cta-zone{display:flex;gap:10px;justify-content:center;margin:16px 0 6px}
.cta-zone .cta{
  padding:10px 14px;border:1px solid var(--border);border-radius:10px;
  background:#fff;color:var(--ink);box-shadow:var(--shadow);
  cursor:not-allowed;opacity:.7
}

/* Grille 2 colonnes -> 1 colonne en mobile */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
@media (max-width:780px){ .grid{grid-template-columns:1fr} }

/* Cartes (Pourquoi / Fonctionnalités) */
.card{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:16px
}
.card h2{
  margin:0 0 8px;
  text-align:center;
  font-size:clamp(1.05rem, 2.6vw, 1.25rem);
  font-weight:700;
}
.card ul{margin:0;padding-left:20px}
.card li{margin:6px 0}

/* Vision / Mission (bloc texte simple) */
.vision-mission{margin:18px 0 6px}
.vision-mission h2{margin:0 0 8px}
.vision-mission p{margin:8px 0}

/* Variables (fallbacks au cas où) */
:root{
  --primary: #3b82f6;
  --ink: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --pill-bg: rgba(59,130,246,.10);
}

/* Centrage du contenu de la section Vision / Mission */
.vision-mission{
  text-align:center;
}