/* Caisse MAHALI — pages SEO (villes et secteurs).
 *
 * Complément de v6-pages.css, qui fournit déjà l'en-tête, le héros, le pied de
 * page et les boutons. Ici : uniquement la mise en page propre à ces pages —
 * cartes de métier, listes, nuage de liens internes, bloc arabe.
 *
 * AUCUNE couleur nouvelle : tout vient des jetons de la charte V6
 * (--ivory, --wine, --action, --gold, --ink, --sub, --line). Une page ville
 * doit être indiscernable du reste du site.
 */

.seo-section { padding-block: 10px 70px; }

.seo-wrap {
  width: min(880px, calc(100% - 48px));
  margin-inline: auto;
}

.seo-wrap > article { margin-bottom: 46px; }
.seo-wrap > article:last-child { margin-bottom: 0; }

.seo-wrap h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 16px;
  color: var(--ink, #201a1c);
}

.seo-wrap h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 7px;
}

.seo-wrap p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--sub, #756b6f);
  margin-bottom: 13px;
}

.seo-quartiers {
  border-inline-start: 2px solid var(--gold, #d5a642);
  padding-inline-start: 16px;
  font-style: italic;
}

/* ── Listes ─────────────────────────────────────────────────────────────── */

.seo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 13px;
}

.seo-list li {
  font-size: 14px;
  line-height: 1.75;
  color: var(--sub, #756b6f);
  padding-inline-start: 24px;
  position: relative;
}

.seo-list li strong { color: var(--ink, #201a1c); font-weight: 600; }

.seo-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold, #d5a642);
}

.seo-list-check li::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  color: var(--action, #6f1235);
  font-weight: 700;
  font-size: 13px;
}

/* ── Cartes de métier ───────────────────────────────────────────────────── */

.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px;
}

/* `.v4-legal a:not(.v4-btn)` souligne tous les liens des pages de contenu —
   ce qui est juste pour un lien dans un paragraphe, mais pas pour une carte
   ni pour une puce de navigation. Le soulignement se propage de l'ancre a
   TOUT son contenu : un enfant qui declare `none` ne peut pas l'annuler, il
   faut le retirer sur l'ancre elle-meme, avec une specificite au moins egale. */
.v4-legal a.seo-card,
.v4-legal .seo-links a,
.v4-legal .seo-card-go {
  text-decoration: none;
}

.seo-card {
  display: block;
  border: 1px solid var(--line, #e8e1da);
  border-radius: 11px;
  padding: 20px 21px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, transform .18s;
}

.seo-card:hover {
  border-color: var(--action, #6f1235);
  transform: translateY(-2px);
}

.seo-card p {
  font-size: 12.5px;
  line-height: 1.65;
  margin-bottom: 12px;
}

.seo-card-go {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--action, #6f1235);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ── Nuage de liens internes (villes voisines, villes d'un métier) ──────── */

.seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seo-links a {
  font-size: 12.5px;
  padding: 8px 13px;
  border: 1px solid var(--line, #e8e1da);
  border-radius: 20px;
  color: var(--wine, #4a071c);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.seo-links a:hover {
  background: #fff;
  border-color: var(--action, #6f1235);
}

.seo-note { font-size: 12.5px; margin-top: 15px; }
.seo-note a { color: var(--action, #6f1235); font-weight: 600; }

/* ── Bloc arabe ─────────────────────────────────────────────────────────── */

/* Le bloc arabe est isolé en RTL au lieu de basculer toute la page : ces pages
   sont bilingues par construction, un visiteur francophone et un visiteur
   arabophone atterrissent sur la MÊME URL depuis le moteur de recherche. */
.seo-ar {
  background: #fffdfa;
  border: 1px solid var(--line, #e8e1da);
  border-radius: 12px;
  padding: 26px 28px;
}

.seo-ar h2 { font-size: 22px; }

.seo-ar p,
.seo-ar li { font-family: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif; }

.seo-ar .seo-list li { padding-inline-start: 24px; }

/* ── Appel à l'action de fin de page ────────────────────────────────────── */

.seo-cta {
  border-top: 1px solid var(--line, #e8e1da);
  padding-top: 34px;
}

.seo-cta .v4-btn { margin-top: 8px; }

/* ── Étroit ─────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .seo-wrap { width: calc(100% - 36px); }
  .seo-wrap > article { margin-bottom: 36px; }
  .seo-cards { grid-template-columns: 1fr; }
  .seo-ar { padding: 20px 19px; }
}