/* ============================================================
   VENAME — Feuille de style PUBLIQUE (pages marketing + domaines)
   vp-* = design system partagé ; page-* = spécifiques ; vd-* = page domaines
   Réutilise --v-* de custom.css. Design plat, aucune ombre.
   ============================================================ */

/* ============================================================
   VENAME PUBLIC — Design système partagé pages publiques (vp-*)
   Réutilise les variables de marque --v-* déjà définies dans :root.
   Design PLAT, aucune ombre. Compatible header/footer marketing.
   ============================================================ */

/* Racine de scope : à poser sur le conteneur de contenu de page
   (ex: <div class="vp"> ... </div>). Fixe typo + variables locales. */
.vp {
  --vp-title: var(--v-ink);            /* #0f172a */
  --vp-text: #475569;
  --vp-muted: #64748b;
  --vp-border: #e6eaf2;
  --vp-bg: #ffffff;
  --vp-bg-alt: #f8fafc;
  --vp-tint: #e5ecfb;                  /* tint navy clair (jamais violet) */
  --vp-radius-card: 16px;
  --vp-radius-ctrl: 10px;
  color: var(--vp-text);
  font-family: var(--font-dm-sans, "DM Sans"), system-ui, sans-serif;
  line-height: 1.6;
}
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp img { max-width: 100%; height: auto; }

/* ---------- CONTENEUR CENTRÉ ---------- */
.vp-container { max-width: 1140px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.vp-container--narrow { max-width: 760px; }
.vp-container--wide { max-width: 1280px; }

/* ---------- SECTION ---------- */
.vp-section { padding: 64px 0; background: var(--vp-bg); }
.vp-section--alt { background: var(--vp-bg-alt); }
.vp-section--tint { background: var(--vp-tint); }
.vp-section--tight { padding: 40px 0; }
.vp-section__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.vp-section__title {
  margin: 0; color: var(--vp-title);
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.02em;
}
.vp-section__sub { margin: 14px auto 0; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--vp-muted); }

/* ---------- HERO DE PAGE ---------- */
.vp-hero {
  position: relative;
  background: linear-gradient(180deg, var(--vp-tint) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--vp-border);
  padding: 72px 0 64px;
  text-align: center;
}
.vp-hero--left { text-align: left; }
.vp-hero__title {
  margin: 0; color: var(--vp-title);
  font-size: clamp(32px, 5vw, 52px); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em; text-wrap: balance;
}
.vp-hero__lead { margin: 20px auto 0; max-width: 640px; font-size: 19px; line-height: 1.6; color: var(--vp-text); }
.vp-hero--left .vp-hero__lead { margin-left: 0; margin-right: 0; }
.vp-hero__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.vp-hero--left .vp-hero__actions { justify-content: flex-start; }

/* ---------- EYEBROW / BADGE PILL ---------- */
.vp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 18px;
  background: var(--vp-tint); color: var(--v-blue);
  border-radius: 9999px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.vp-eyebrow svg { width: 16px; height: 16px; }
.vp-eyebrow--orange { background: #fdf1e0; color: var(--v-orange-600); }

/* ---------- LEAD ---------- */
.vp-lead { font-size: 19px; line-height: 1.6; color: var(--vp-text); }

/* ---------- GRILLE RESPONSIVE ---------- */
.vp-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vp-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .vp-grid--3, .vp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vp-grid--2, .vp-grid--3, .vp-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- CARTE PLATE ---------- */
.vp-card {
  display: flex; flex-direction: column;
  background: var(--vp-bg); border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-card); padding: 28px;
}
.vp-card--alt { background: var(--vp-bg-alt); }
.vp-card--center { text-align: center; align-items: center; }
a.vp-card, .vp-card--link { transition: border-color .15s ease, background-color .15s ease; text-decoration: none; }
a.vp-card:hover, .vp-card--link:hover { border-color: var(--v-blue); }
.vp-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--vp-tint); color: var(--v-blue); margin-bottom: 16px;
}
.vp-card__icon svg { width: 24px; height: 24px; }
.vp-card__icon--orange { background: #fdf1e0; color: var(--v-orange); }
.vp-card__title { margin: 0; color: var(--vp-title); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.vp-card__desc { margin: 8px 0 0; color: var(--vp-muted); font-size: 16px; line-height: 1.55; }

/* ---------- BOUTONS ---------- */
.vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--vp-radius-ctrl);
  font-size: 15px; font-weight: 600; font-family: inherit; line-height: 1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vp-btn svg { width: 18px; height: 18px; }
.vp-btn--lg { padding: 14px 28px; font-size: 16px; }
.vp-btn--primary { background: var(--v-blue); color: #fff; }
.vp-btn--primary:hover, .vp-btn--primary:focus { background: var(--v-blue-600); color: #fff; }
.vp-btn--accent { background: var(--v-orange); color: #fff; }
.vp-btn--accent:hover, .vp-btn--accent:focus { background: var(--v-orange-600); color: #fff; }
.vp-btn--outline { background: #fff; color: var(--vp-title); border-color: var(--vp-border); }
.vp-btn--outline:hover, .vp-btn--outline:focus { border-color: var(--v-blue); color: var(--v-blue); }
.vp-btn--ghost { background: transparent; color: var(--v-blue); }
.vp-btn--ghost:hover, .vp-btn--ghost:focus { background: var(--vp-tint); }
.vp-btn--white { background: #fff; color: var(--v-navy); }
.vp-btn--white:hover, .vp-btn--white:focus { background: #f1f5f9; color: var(--v-navy); }
.vp-btn--white-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.vp-btn--white-outline:hover, .vp-btn--white-outline:focus { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- BANDEAU CTA ---------- */
.vp-cta {
  background: linear-gradient(135deg, var(--v-navy) 0%, var(--v-blue) 100%);
  border-radius: 20px; padding: 48px 32px; text-align: center; color: #fff;
}
.vp-cta__title { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 700; color: #fff; text-wrap: balance; }
.vp-cta__text { margin: 14px auto 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.85); }
.vp-cta__actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- ACTIONS (rangée de boutons) ---------- */
.vp-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.vp-actions--center { justify-content: center; }

/* ---------- LISTE À COCHES ---------- */
.vp-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vp-feature-item { display: flex; align-items: flex-start; gap: 12px; }
.vp-feature-item svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--v-green); margin-top: 1px; }
.vp-feature-item p, .vp-feature-item span { margin: 0; color: var(--vp-text); font-size: 16px; line-height: 1.5; }

/* ---------- BADGES DE STATUT ---------- */
.vp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent;
}
.vp-badge svg { width: 13px; height: 13px; }
.vp-badge--success { background: #e7f6ec; color: #15803d; border-color: #bbe7c9; }
.vp-badge--warning { background: #fdf1e0; color: #b45309; border-color: #f6d8a8; }
.vp-badge--danger  { background: #fdeaea; color: #dc2626; border-color: #f5c2c2; }
.vp-badge--info    { background: var(--vp-tint); color: var(--v-blue); border-color: #cddbfa; }
.vp-badge--neutral { background: #f1f5f9; color: var(--vp-muted); border-color: #e2e8f0; }

/* ---------- PROSE D'ARTICLE ---------- */
.vp-prose { color: var(--vp-text); font-size: 17px; line-height: 1.75; }
.vp-prose > :first-child { margin-top: 0; }
.vp-prose h2 { margin: 40px 0 16px; color: var(--vp-title); font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.vp-prose h3 { margin: 32px 0 12px; color: var(--vp-title); font-size: 22px; line-height: 1.3; font-weight: 600; }
.vp-prose h4 { margin: 24px 0 10px; color: var(--vp-title); font-size: 18px; font-weight: 600; }
.vp-prose p { margin: 0 0 18px; }
.vp-prose a { color: var(--v-blue); text-decoration: underline; text-underline-offset: 2px; }
.vp-prose a:hover { color: var(--v-blue-600); }
.vp-prose ul, .vp-prose ol { margin: 0 0 18px; padding-left: 22px; }
.vp-prose li { margin: 6px 0; }
.vp-prose ul li::marker { color: var(--v-blue); }
.vp-prose blockquote {
  margin: 24px 0; padding: 12px 20px;
  border-left: 3px solid var(--v-blue); background: var(--vp-bg-alt);
  border-radius: 0 12px 12px 0; color: var(--vp-muted); font-style: italic;
}
.vp-prose img { border-radius: 12px; border: 1px solid var(--vp-border); margin: 24px 0; }
.vp-prose code {
  background: var(--vp-bg-alt); border: 1px solid var(--vp-border);
  border-radius: 6px; padding: 2px 6px; font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--v-navy);
}
.vp-prose pre {
  background: #0f172a; color: #e2e8f0; border-radius: 12px;
  padding: 18px 20px; overflow-x: auto; margin: 24px 0;
}
.vp-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.vp-prose hr { border: 0; border-top: 1px solid var(--vp-border); margin: 32px 0; }
.vp-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.vp-prose th, .vp-prose td { border: 1px solid var(--vp-border); padding: 10px 14px; text-align: left; }
.vp-prose thead th { background: var(--vp-bg-alt); color: var(--vp-title); font-weight: 600; }

/* ---------- UTILITAIRES ---------- */
.vp-title { color: var(--vp-title); font-weight: 700; letter-spacing: -0.02em; }
.vp-muted { color: var(--vp-muted); }
.vp-center { text-align: center; }
.vp-divider { height: 1px; background: var(--vp-border); border: 0; margin: 0; }

/* ---------- RESPONSIVE GLOBAL ---------- */
@media (max-width: 768px) {
  .vp-section { padding: 48px 0; }
  .vp-hero { padding: 56px 0 44px; }
  .vp-container, .vp-container--narrow, .vp-container--wide { padding-left: 16px; padding-right: 16px; }
  .vp-cta { padding: 36px 22px; }
  .vp-card { padding: 22px; }
}


/* ========== CSS spécifiques par page publique ========== */


/* --- announcements --- */
/* ==== Annonces (page publique) — spécifique ==== */
.vp-announcements-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vp-announcements-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}
.vp-announcements-meta svg { color: var(--v-orange, #ea8e1c); flex-shrink: 0; }
.vp-announcements-title { margin: 0; line-height: 1.3; }
.vp-announcements-title a {
  color: var(--v-navy, #0f056b);
  text-decoration: none;
  transition: color .15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vp-announcements-title a:hover { color: var(--v-blue, #004ff7); }
.vp-announcements-excerpt { margin: 0; }
.vp-announcements-excerpt p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vp-announcements-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.vp-announcements-fb { max-width: 100%; overflow: hidden; }

/* État vide */
.vp-announcements-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 48px 28px;
  color: #64748b;
}
.vp-announcements-empty svg { width: 40px; height: 40px; color: #94a3b8; }
.vp-announcements-empty p { margin: 0; font-size: 15px; }

/* Pagination */
.vp-announcements-pager {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.vp-announcements-pager-form {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.vp-announcements-pageinfo {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  height: 40px;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}


/* --- contact --- */
/* ==== Contact page (vp-contact-*) — flat, bordered, DM Sans, aucune ombre ==== */

.vp-contact-methods .vp-card { display: flex; flex-direction: column; align-items: center; }
.vp-contact-methods .vp-card__desc { margin-bottom: 14px; }

.vp-contact-link {
  display: inline-block;
  font-weight: 600;
  color: var(--v-blue);
  text-decoration: none;
  word-break: break-word;
}
.vp-contact-link:hover, .vp-contact-link:focus { color: var(--v-blue-600); text-decoration: underline; }
.vp-contact-link--orange { color: var(--v-orange); }
.vp-contact-link--orange:hover, .vp-contact-link--orange:focus { color: var(--v-orange-600); }

.vp-contact-strong { font-weight: 600; color: var(--v-navy); margin: 0; }
.vp-contact-note { font-size: 13px; margin: 4px 0 0; }

/* ---- Formulaire ---- */
.vp-contact-form-card { padding: 28px; }
.vp-contact-form { display: flex; flex-direction: column; gap: 20px; }

.vp-contact-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .vp-contact-grid2 { grid-template-columns: 1fr; }
}

.vp-contact-field { display: flex; flex-direction: column; gap: 7px; }
.vp-contact-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--v-navy);
  margin: 0;
}
.vp-contact-optional { font-weight: 500; color: #64748b; }

.vp-contact-input.form-control,
.vp-contact-input {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #1e293b;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.vp-contact-input::placeholder { color: #94a3b8; }
.vp-contact-input:hover { border-color: #cbd5e1; }
.vp-contact-input:focus {
  outline: none;
  border-color: var(--v-blue);
  background: #fff;
  box-shadow: none;
}
.vp-contact-textarea { resize: vertical; min-height: 150px; }

.vp-contact-actions { display: flex; justify-content: flex-start; margin-top: 4px; }
@media (max-width: 640px) {
  .vp-contact-actions .vp-btn { width: 100%; justify-content: center; }
}

/* ---- FAQ (accordéon natif, sans JS) ---- */
.vp-contact-faq { display: flex; flex-direction: column; gap: 12px; }
.vp-contact-faq__item {
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.vp-contact-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 16px;
  color: var(--v-navy);
  cursor: pointer;
  list-style: none;
}
.vp-contact-faq__q::-webkit-details-marker { display: none; }
.vp-contact-faq__chevron { flex: 0 0 auto; color: #64748b; transition: transform .2s ease; }
.vp-contact-faq__item[open] .vp-contact-faq__chevron { transform: rotate(180deg); color: var(--v-blue); }
.vp-contact-faq__item[open] .vp-contact-faq__q { color: var(--v-blue); }
.vp-contact-faq__a {
  padding: 0 20px 18px;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}


/* --- knowledgebase --- */
/* ===== Base de connaissances — spécifique page ===== */

/* Barre de recherche du hero */
.vp-knowledgebase-search {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 28px auto 0;
}
.vp-knowledgebase-search__field {
  position: relative;
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
}
.vp-knowledgebase-search__field svg {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: var(--v-blue, #004ff7);
  pointer-events: none;
}
.vp-knowledgebase-search__field input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 46px;
  font: inherit;
  font-size: 16px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease;
}
.vp-knowledgebase-search__field input::placeholder { color: #94a3b8; }
.vp-knowledgebase-search__field input:focus {
  border-color: var(--v-blue, #004ff7);
}
.vp-knowledgebase-search .vp-btn--lg { height: 52px; }

/* Cartes catégorie / article : lien flèche en bas */
.vp-knowledgebase-cat,
.vp-knowledgebase-article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.vp-knowledgebase-count {
  align-self: flex-start;
}
.vp-knowledgebase-cat__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--v-blue, #004ff7);
}
.vp-knowledgebase-cat__link svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
.vp-knowledgebase-cat:hover .vp-knowledgebase-cat__link svg {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .vp-knowledgebase-search { flex-direction: column; }
  .vp-knowledgebase-search .vp-btn--lg { width: 100%; }
}


/* --- knowledgebasearticle --- */
.vp-knowledgebasearticle-wrap { padding-top: 32px; padding-bottom: 48px; }
.vp-knowledgebasearticle-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vp-knowledgebasearticle-back { padding-left: 4px; }
.vp-knowledgebasearticle-header { margin: 20px 0 12px; }
.vp-knowledgebasearticle-title { margin: 12px 0 0; font-size: clamp(28px, 4vw, 40px); }
.vp-knowledgebasearticle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 16px; color: var(--v-text-muted, #64748b); font-size: 13px; }
.vp-knowledgebasearticle-metaitem { display: inline-flex; align-items: center; gap: 6px; }
.vp-knowledgebasearticle-body { margin: 28px 0; }
.vp-knowledgebasearticle-rate { margin: 8px 0 40px; padding: 18px 20px; border: 1px solid #e6eaf2; border-radius: 12px; background: #f8fafc; }
.vp-knowledgebasearticle-rateform { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.vp-knowledgebasearticle-ratelabel { font-weight: 600; color: var(--v-navy, #0f056b); }
.vp-knowledgebasearticle-ratecount { color: var(--v-text-muted, #64748b); font-size: 14px; }
.vp-knowledgebasearticle-yes { background: var(--v-green, #16a34a); border: 1px solid var(--v-green, #16a34a); color: #fff; gap: 6px; }
.vp-knowledgebasearticle-yes:hover { background: #128a3d; border-color: #128a3d; color: #fff; }
.vp-knowledgebasearticle-no { gap: 6px; }
.vp-knowledgebasearticle-related { margin-top: 8px; }
.vp-knowledgebasearticle-relatedtitle { font-size: clamp(22px, 3vw, 28px); text-align: left; margin: 0 0 24px; }
.vp-knowledgebasearticle-relcard { display: flex; flex-direction: column; gap: 10px; }
.vp-knowledgebasearticle-relcardtitle { display: block; }
.vp-knowledgebasearticle-cta { margin-top: 48px; }
@media print { .hidden-print { display: none !important; } }


/* --- knowledgebasecat --- */
/* Base de connaissances — Catégorie (page knowledgebasecat) */
.vp-knowledgebasecat-back{
  gap:8px;
  padding-left:0;
  margin-bottom:18px;
}
.vp-knowledgebasecat-back svg{flex:0 0 auto;}

/* Barre de recherche intégrée au hero */
.vp-knowledgebasecat-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:640px;
  margin-top:26px;
  flex-wrap:wrap;
}
.vp-knowledgebasecat-search__ic{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  color:#64748b;
  pointer-events:none;
}
.vp-knowledgebasecat-search__input{
  flex:1;
  min-width:220px;
  height:48px;
  padding:0 16px 0 46px;
  font:inherit;
  font-size:15px;
  color:var(--v-navy,#0f056b);
  background:#fff;
  border:1px solid #e6eaf2;
  border-radius:10px;
  outline:none;
  transition:border-color .15s ease;
}
.vp-knowledgebasecat-search__input::placeholder{color:#94a3b8;}
.vp-knowledgebasecat-search__input:focus{border-color:var(--v-blue,#004ff7);}
.vp-knowledgebasecat-search .vp-btn{height:48px;}

/* Titre de carte avec compteur d'articles */
.vp-knowledgebasecat-articles .vp-card__title,
.vp-grid--3 .vp-card__title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Icône article en accent orange pour distinguer des catégories */
.vp-knowledgebasecat-article .vp-card__icon{
  background:#fdf1e0;
  color:var(--v-orange,#ea8e1c);
}

/* État vide : occupe toute la largeur de la grille */
.vp-knowledgebasecat-empty{grid-column:1 / -1;}

@media (max-width:560px){
  .vp-knowledgebasecat-search__input{width:100%;}
  .vp-knowledgebasecat-search .vp-btn{width:100%;}
}


/* --- serverstatus --- */
.vp-serverstatus-issue { padding: 24px 28px; margin-bottom: 20px; }
.vp-serverstatus-issue:last-of-type { margin-bottom: 0; }
.vp-serverstatus-issue__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.vp-serverstatus-issue__title { display: flex; align-items: center; gap: 14px; }
.vp-serverstatus-issue__title .vp-card__title { margin: 0; }
.vp-serverstatus-issue__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; padding: 18px 20px; background: #f8fafc; border: 1px solid #e6eaf2; border-radius: 12px; margin-bottom: 18px; }
.vp-serverstatus-meta-item { display: flex; flex-direction: column; gap: 6px; }
.vp-serverstatus-meta-item__k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.vp-serverstatus-meta-item__v { font-size: 15px; color: #0f056b; font-weight: 500; }
.vp-serverstatus-issue__desc { margin: 0; color: #475569; line-height: 1.65; }

.vp-serverstatus-pager { justify-content: space-between; margin-top: 28px; }
.vp-serverstatus-disabled { opacity: .45; pointer-events: none; cursor: default; }

.vp-serverstatus-table-card { padding: 0; overflow: hidden; }
.vp-serverstatus-table-wrap { overflow-x: auto; }
.vp-serverstatus-table { margin: 0; width: 100%; }
.vp-serverstatus-link { color: #004ff7; font-weight: 500; text-decoration: none; }
.vp-serverstatus-link:hover { color: #0043d6; text-decoration: underline; }

@media (max-width: 640px) {
  .vp-serverstatus-issue__head { flex-direction: column; align-items: flex-start; }
  .vp-serverstatus-pager { flex-direction: column; }
  .vp-serverstatus-pager .vp-btn { width: 100%; justify-content: center; }
}


/* --- viewannouncement --- */
.vp-viewannouncement-back{ padding-left:0; padding-right:0; margin-bottom:20px; }
.vp-viewannouncement-header{ padding-bottom:28px; margin-bottom:32px; border-bottom:1px solid var(--v-border, #e6eaf2); }
.vp-viewannouncement-title{ margin:16px 0 12px; }
.vp-viewannouncement-meta{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--v-navy, #0f056b); text-transform:capitalize; margin:0 0 8px; }
.vp-viewannouncement-meta svg{ color:var(--v-blue, #004ff7); }
.vp-viewannouncement-sub{ margin:0; }
.vp-viewannouncement-share{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.vp-viewannouncement-share__label{ font-size:14px; font-weight:600; color:var(--v-navy, #0f056b); }
.vp-viewannouncement-body{ margin-bottom:8px; }
.vp-viewannouncement-divider{ margin:36px 0 28px; }


/* --- whois --- */
.vp-whois-card { padding: 0; overflow: hidden; }
.vp-whois-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--v-border, #e6eaf2);
  background: #f8fafc;
}
.vp-whois-card__head .vp-card__title { margin: 0; }
.vp-whois-card__head .vp-card__desc { margin: 2px 0 0; }
.vp-whois-card__body {
  padding: 24px 28px;
  color: #475569;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: auto;
}
.vp-whois-card__body :is(h1, h2, h3, h4) {
  color: var(--v-navy, #0f056b);
  font-weight: 700;
}
.vp-whois-card__body pre {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--v-border, #e6eaf2);
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.vp-whois-card__body a { color: var(--v-blue, #004ff7); }
@media (max-width: 640px) {
  .vp-whois-card__head { padding: 18px 20px; }
  .vp-whois-card__body { padding: 20px; }
}

/* ============================================================
   VENAME — PAGE DOMAINES (vd-*)  — recreation façon Hostinger, couleurs Vename
   ============================================================ */
.vd{margin-top:-20px;--vd-navy:var(--v-navy);--vd-blue:var(--v-blue);--vd-orange:var(--v-orange);
    font-family:var(--font-dm-sans,"DM Sans"),system-ui,sans-serif;color:#475569;}
.vd *,.vd *::before,.vd *::after{box-sizing:border-box;}
.vd img{max-width:100%;height:auto;display:block;}
.vd-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---- Rupture pleine largeur hors du .container Bootstrap (~1140px) ---- */
.vd-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

/* ---- Sections ---- */
.vd-sec{padding:72px 0;background:#fff;}
.vd-sec--alt{background:#f8fafc;}
.vd-sec--dark{background:linear-gradient(180deg,#0f056b 0%,#160a7d 100%);color:#e8ecff;}
.vd-sec--brand{background:linear-gradient(180deg,#130a63 0%,#1a1080 100%);color:#e8ecff;}
.vd-head{max-width:720px;margin:0 auto 44px;text-align:center;}
.vd-head--left{margin-left:0;text-align:left;}
.vd-h2{margin:0;font-size:clamp(26px,3.2vw,38px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#0f172a;}
.vd-sec--dark .vd-h2,.vd-sec--brand .vd-h2{color:#fff;}
.vd-sub{margin:14px auto 0;max-width:600px;font-size:17px;line-height:1.6;color:#64748b;}
.vd-sec--dark .vd-sub,.vd-sec--brand .vd-sub{color:rgba(232,236,255,.75);}

/* ---- HERO (fidèle au design fourni) ---- */
.vd-hero{background:#0f056b;background-image:radial-gradient(95% 75% at 50% -5%,#1c108f 0%,#0f056b 48%,#0a0347 100%);color:#fff;padding:88px 0 0;text-align:center;}
.vd-hero__title{margin:0 0 36px;font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.025em;line-height:1.08;color:#fff;text-wrap:balance;}

/* barre de recherche : pilule blanche + bouton rond */
.vd-hsearch{max-width:660px;margin:0 auto;background:#fff;border-radius:999px;padding:8px 8px 8px 22px;display:flex;align-items:center;gap:10px;}
.vd-hsearch__ic{flex:0 0 auto;display:flex;color:#64748b;}
.vd-hsearch__ic svg{width:20px;height:20px;}
.vd-hsearch__input,.vd-hsearch input[type="text"]{flex:1 1 auto;min-width:0;border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;font:inherit;font-size:16px;color:#0f172a;padding:14px 4px;height:auto !important;line-height:1.4;border-radius:0 !important;}
.vd-hsearch__input:focus,.vd-hsearch input[type="text"]:focus{border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;}
.vd-hsearch__input::placeholder{color:#94a3b8;}
.vd-hsearch__go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;background:var(--v-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.vd-hsearch__go:hover{background:var(--v-blue-600);color:#fff;}
.vd-hsearch__go svg{width:20px;height:20px;}

/* cartes du hero : proportions 2:1:1 */
.vd-hcards{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;margin-top:56px;text-align:left;}
.vd-hcard{position:relative;border-radius:20px;overflow:hidden;min-height:362px;display:flex;flex-direction:column;padding:28px;}
.vd-hcard__bottom{margin-top:auto;}

/* carte 1 — offre, fond bleu vif */
.vd-hcard--promo{background:var(--v-blue);}
.vd-hcard__badge{width:56px;height:56px;border-radius:14px;background:var(--v-orange);color:#0f056b;display:inline-flex;align-items:center;justify-content:center;font-size:27px;font-weight:800;line-height:1;}
.vd-hcard__t{margin:0 0 14px;font-size:clamp(22px,2.2vw,31px);font-weight:600;line-height:1.15;color:#fff;letter-spacing:-.02em;}
.vd-hcard__note{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);}

/* carte 2 — photo plein cadre + stats superposées */
.vd-hcard--photo{padding:0;background:#1a0f8a;}
.vd-hcard--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vd-hcard__over{position:relative;margin-top:auto;padding:24px;width:100%;background:linear-gradient(to top,rgba(10,3,71,.9),rgba(10,3,71,.45) 55%,rgba(10,3,71,0));}
.vd-hstat{margin-bottom:16px;}
.vd-hstat:last-child{margin-bottom:0;}
.vd-hstat b{display:block;font-size:30px;font-weight:700;color:#fff;line-height:1.05;}
.vd-hstat span{font-size:14px;color:rgba(255,255,255,.85);}

/* carte 3 — transfert, navy + mock UI */
.vd-hcard--dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);}
.vd-hcard__arrow{position:absolute;top:22px;right:22px;color:rgba(255,255,255,.75);}
.vd-hcard__arrow svg{width:20px;height:20px;}
.vd-hmock{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:11px 14px;margin-top:auto;margin-bottom:22px;}
.vd-hmock__ic{width:26px;height:26px;border-radius:7px;background:#e5ecfb;color:var(--v-blue);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.vd-hmock__ic svg{width:15px;height:15px;}
.vd-hmock__bar{flex:1;height:9px;border-radius:999px;background:#e6eaf2;}
.vd-hmock__tld{font-size:17px;font-weight:700;color:#0f172a;}
.vd-hmock-img{width:100%;height:auto;display:block;margin-top:auto;margin-bottom:20px;}
.vd-hcard__t2{margin:0 0 8px;font-size:21px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.vd-hcard__d{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.8);}

/* bandeau avis clair, pleine largeur, bas du hero */
.vd-trust{margin-top:56px;background:#fff;padding:15px 0;}
.vd-trust__in{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;font-size:15px;color:#0f172a;}
.vd-trust__in b{font-weight:700;}
.vd-trust__stars{display:inline-flex;gap:3px;}
.vd-trust__stars i{width:23px;height:23px;background:#00b67a;display:inline-flex;align-items:center;justify-content:center;}
.vd-trust__stars svg{width:15px;height:15px;fill:#fff;}
.vd-trust__n{color:#334155;text-decoration:underline;}

@media(max-width:980px){
  .vd-hcards{grid-template-columns:1fr 1fr;}
  .vd-hcard--promo{grid-column:1/-1;min-height:270px;}
}
@media(max-width:640px){
  .vd-hcards{grid-template-columns:1fr;}
  .vd-hcard--promo{grid-column:auto;}
  .vd-hero{padding-top:56px;}
}

/* ---- SECTION POURQUOI : bento 1:2 / 2:1 (fidèle au design fourni) ---- */
.vd-why{background:#fafbff;padding:76px 0;}
.vd-why__head{max-width:760px;margin:0 auto 40px;text-align:center;}
.vd-why__title{margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.18;color:#0f172a;text-wrap:balance;}

.vd-bento2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.vd-bcard{position:relative;border-radius:16px;overflow:hidden;min-height:460px;display:flex;flex-direction:column;background:#fff;}
.vd-b-a,.vd-b-d{grid-column:span 1;}
.vd-b-b,.vd-b-c{grid-column:span 2;}

/* cartes teintées : mock flottant en haut + texte */
.vd-bcard--tint{background:#e5ecfb;}
.vd-bcard--tint .vd-bcard__visual{padding:46px 30px 0;display:flex;justify-content:center;}
.vd-bcard--tint .vd-bcard__body{padding:86px 30px 30px;}

/* cartes média : photo pleine largeur en haut + texte */
.vd-bcard--media{background:#f4f7fd;}
.vd-bcard__media{position:relative;height:302px;flex:0 0 auto;background:#dbe4f7;overflow:hidden;}
.vd-bcard__media img{width:100%;height:100%;object-fit:cover;display:block;}
.vd-bcard--media .vd-bcard__body{padding:26px 30px 30px;}

.vd-bcard__t{margin:0 0 10px;font-size:20px;font-weight:600;color:#0f172a;letter-spacing:-.01em;}
.vd-bcard__d{margin:0;font-size:14.5px;line-height:1.6;color:#475569;}
.vd-bcard__link{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;color:#0f172a;text-decoration:none;}
.vd-bcard__link:hover{color:var(--v-blue);}

/* mock barre d'URL (carte A) */
.vd-urlmock{position:relative;width:100%;background:#fff;border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:12px;}
.vd-urlmock__ic{width:34px;height:34px;border-radius:50%;background:var(--v-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.vd-urlmock__ic svg{width:18px;height:18px;}
.vd-urlmock__u{font-size:15px;color:#0f172a;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 68%,transparent);mask-image:linear-gradient(to right,#000 68%,transparent);}
.vd-cursor{position:absolute;color:#1e1b4b;pointer-events:none;}
.vd-cursor svg{width:24px;height:24px;}
.vd-cursor--a{left:52px;top:54px;}
.vd-cursor--d{right:34px;bottom:-6px;}

/* overlays sur photo (carte B) */
.vd-ovr{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;width:300px;max-width:46%;}
.vd-mcard{background:#fff;border-radius:12px;padding:14px 16px;}
.vd-mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.vd-mrow+.vd-mrow{margin-top:14px;}
.vd-mlbl{font-size:15px;font-weight:600;color:#0f172a;display:flex;align-items:center;gap:8px;}
.vd-mlbl svg{width:17px;height:17px;color:var(--v-blue);}
.vd-msw{width:46px;height:26px;border-radius:999px;background:var(--v-blue);position:relative;flex:0 0 auto;}
.vd-msw::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;}
.vd-mbadge{background:#e7f6ec;color:#15803d;font-size:13px;font-weight:700;border-radius:8px;padding:5px 12px;}

/* bulle de chat (carte C) */
.vd-chat{position:absolute;right:26px;bottom:66px;display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:12px 16px;max-width:52%;}
.vd-chat__av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#dbe4f7;}
.vd-chat__av img{width:100%;height:100%;object-fit:cover;}
.vd-chat__tx{font-size:14px;line-height:1.4;color:#0f172a;}
.vd-typing{position:absolute;right:26px;bottom:22px;background:var(--v-blue);border-radius:999px;padding:9px 14px;display:flex;gap:5px;align-items:center;}
.vd-typing span{width:6px;height:6px;border-radius:50%;background:#fff;display:block;}

/* stepper (carte D) */
.vd-steps{position:relative;background:#fff;border-radius:14px;padding:22px 24px;width:100%;}
.vd-step{display:flex;align-items:center;gap:12px;position:relative;padding-bottom:24px;}
.vd-step:last-child{padding-bottom:0;}
.vd-step::before{content:"";position:absolute;left:10px;top:21px;bottom:0;width:2px;background:#dbe4f7;}
.vd-step:last-child::before{display:none;}
.vd-step__dot{width:21px;height:21px;border-radius:50%;background:var(--v-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;z-index:1;}
.vd-step__dot svg{width:12px;height:12px;}
.vd-step--todo .vd-step__dot{background:#fff;border:2px solid #cbd5e1;}
.vd-step__l{font-size:15px;color:#0f172a;}

/* CTA bas de section */
.vd-why__cta{text-align:center;margin-top:40px;}
.vd-why__btn{display:inline-flex;align-items:center;justify-content:center;background:var(--v-blue);color:#fff;border-radius:10px;padding:14px 30px;font-size:15px;font-weight:700;text-decoration:none;}
.vd-why__btn:hover{background:var(--v-blue-600);color:#fff;}

@media(max-width:980px){
  .vd-bento2{grid-template-columns:1fr;}
  .vd-b-a,.vd-b-b,.vd-b-c,.vd-b-d{grid-column:auto;}
  .vd-bcard{min-height:0;}
  .vd-ovr{position:static;transform:none;width:auto;max-width:none;margin:16px;}
  .vd-cursor{display:none;}
}

/* ---- SECTION EXTENSIONS POPULAIRES : carrousel (fidèle au design fourni) ---- */
.vd-pop{background:#0f056b;padding:78px 0;color:#fff;overflow:hidden;}
.vd-pop__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px;}
.vd-pop__title{margin:0 0 14px;font-size:clamp(30px,3.8vw,44px);font-weight:600;line-height:1.14;letter-spacing:-.02em;color:#fff;max-width:620px;}
.vd-pop__link{font-size:14px;color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;}
.vd-pop__link:hover{color:#fff;border-bottom-color:#fff;}
.vd-pop__nav{display:flex;gap:10px;flex:0 0 auto;padding-bottom:4px;}
.vd-pop__arrow{width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,opacity .15s;}
.vd-pop__arrow:hover{background:rgba(255,255,255,.22);color:#fff;}
.vd-pop__arrow:disabled{opacity:.3;cursor:default;}
.vd-pop__arrow svg{width:20px;height:20px;}

/* piste : défilement horizontal, dernière carte volontairement coupée */
.vd-pop__track{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;margin-right:calc(50% - 50vw);padding-right:24px;}
.vd-pop__track::-webkit-scrollbar{display:none;}

.vd-tld{flex:0 0 330px;scroll-snap-align:start;background:#fff;border-radius:16px;padding:32px 30px;display:flex;flex-direction:column;text-align:left;min-height:348px;}
.vd-tld__ext{font-size:34px;font-weight:700;color:#0f172a;letter-spacing:-.02em;line-height:1;margin-bottom:14px;}
.vd-tld__d{margin:0;font-size:15px;line-height:1.55;color:#475569;}
.vd-tld__prices{margin-top:auto;padding-top:26px;}
.vd-tld__old{display:block;font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:3px;}
.vd-tld__new{display:flex;align-items:baseline;gap:1px;color:#0f172a;}
.vd-tld__new b{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.vd-tld__new span{font-size:15px;font-weight:500;color:#0f172a;}
.vd-tld__btn{margin-top:18px;display:block;text-align:center;background:var(--v-blue);color:#fff;border-radius:9px;padding:13px 10px;font-size:14.5px;font-weight:700;text-decoration:none;}
.vd-tld__btn:hover{background:var(--v-blue-600);color:#fff;}

@media(max-width:700px){
  .vd-pop__head{flex-direction:column;align-items:flex-start;}
  .vd-pop__nav{display:none;}
  .vd-tld{flex:0 0 84%;}
}

/* ---- Accordéons (comment choisir + FAQ) ---- */
.vd-acc{border:1px solid #e6eaf2;border-radius:14px;overflow:hidden;background:#fff;}
.vd-acc__item{border-bottom:1px solid #eef1f7;}
.vd-acc__item:last-child{border-bottom:0;}
.vd-acc__item[open]{background:#f8fafc;}
.vd-acc__sum{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;font-size:16px;font-weight:600;color:#0f172a;}
.vd-acc__sum::-webkit-details-marker{display:none;}
.vd-acc__num{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#e5ecfb;color:var(--vd-blue);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
.vd-acc__sum .vd-acc__plus{margin-left:auto;color:#94a3b8;transition:transform .2s;flex:0 0 auto;}
.vd-acc__item[open] .vd-acc__plus{transform:rotate(45deg);color:var(--vd-blue);}
.vd-acc__plus svg{width:20px;height:20px;}
.vd-acc__body{padding:0 22px 20px 62px;font-size:15px;line-height:1.6;color:#64748b;}
.vd-acc__body--nonum{padding-left:22px;}

/* ---- SECTION "COMMENT CHOISIR" : titre à gauche + accordéon nu (design fourni) ---- */
.vd-howto{background:#fff;padding:82px 0;}
.vd-howto__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:64px;align-items:start;}
.vd-howto__title{margin:0;font-size:clamp(29px,3.5vw,43px);font-weight:500;line-height:1.15;letter-spacing:-.022em;color:#0f172a;}

/* accordéon "nu" : filets de séparation, sans carte ni fond (réutilisé par la FAQ) */
.vd-acc2__item{border-bottom:1px solid #e6e6e6;}
.vd-acc2__item:last-child{border-bottom:0;}
.vd-acc2__sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:25px 0;font-size:19px;font-weight:400;line-height:1.35;color:#0f172a;}
.vd-acc2__sum::-webkit-details-marker{display:none;}
.vd-acc2__sum::marker{content:"";font-size:0;}
.vd-acc2__sum:hover{color:var(--v-blue);}
.vd-acc2__sign{margin-left:auto;flex:0 0 auto;width:22px;height:22px;position:relative;color:#0f172a;}
.vd-acc2__sign::before,.vd-acc2__sign::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%);}
.vd-acc2__sign::before{width:17px;height:1.6px;}
.vd-acc2__sign::after{width:1.6px;height:17px;transition:opacity .18s ease;}
.vd-acc2__item[open] .vd-acc2__sign::after{opacity:0;}
.vd-acc2__body{padding:0 0 26px;font-size:15.5px;line-height:1.6;color:#475569;max-width:660px;}

@media(max-width:900px){
  .vd-howto__grid{grid-template-columns:1fr;gap:28px;}
}

/* ---- SECTION "À SAVOIR" : 3 illustrations + texte dessous (design fourni) ---- */
/* Fond navy officiel Vename. */
.vd-know{background:var(--v-navy);padding:82px 0;color:#fff;}
.vd-know__head{max-width:780px;margin:0 auto 46px;text-align:center;}
.vd-know__title{margin:0;font-size:clamp(29px,3.5vw,43px);font-weight:500;line-height:1.16;letter-spacing:-.022em;color:#fff;text-wrap:balance;}
.vd-know__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.vd-kitem{display:flex;flex-direction:column;}
.vd-kitem__img{width:100%;height:auto;display:block;border-radius:16px;margin-bottom:26px;}
.vd-kitem__t{margin:0 0 12px;font-size:20px;font-weight:500;color:#fff;letter-spacing:-.01em;}
.vd-kitem__d{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);}
.vd-kitem__link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14px;font-weight:700;color:#fff;text-decoration:none;}
.vd-kitem__link:hover{color:var(--v-orange);}
.vd-kitem__link svg{width:15px;height:15px;}
@media(max-width:900px){.vd-know__grid{grid-template-columns:1fr;gap:34px;}}

/* ---- Tableau comparatif — DYNAMIQUE ---- */
.vd-cmp{max-width:920px;margin:0 auto;}
.vd-cmp__bar{display:flex;justify-content:center;margin-bottom:22px;}
.vd-cmp__select{border:1px solid #e6eaf2;border-radius:10px;padding:10px 40px 10px 16px;font:inherit;font-size:14px;color:#0f172a;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;cursor:pointer;}
.vd-table{width:100%;border-collapse:collapse;border:1px solid #e6eaf2;border-radius:14px;overflow:hidden;}
.vd-table thead th{background:#f8fafc;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8;font-weight:700;padding:14px 20px;border-bottom:1px solid #e6eaf2;}
.vd-table thead th:not(:first-child),.vd-table td:not(:first-child){text-align:right;}
.vd-table td{padding:15px 20px;border-bottom:1px solid #eef1f7;font-size:15px;color:#475569;}
.vd-table tbody tr:last-child td{border-bottom:0;}
.vd-table tbody tr:hover{background:#f8fafc;}
.vd-table__ext{font-weight:700;color:#0f172a;}
.vd-table__price{color:var(--vd-navy);font-weight:700;}
.vd-cmp__more{text-align:center;margin-top:24px;}

/* ---- Témoignages ---- */
.vd-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.vd-tcard{background:#fff;border:1px solid #e6eaf2;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;}
.vd-tcard__stars{display:inline-flex;gap:2px;color:#16a34a;}
.vd-tcard__stars svg{width:16px;height:16px;fill:currentColor;}
.vd-tcard__q{margin:0;font-size:14.5px;line-height:1.6;color:#475569;flex:1;}
.vd-tcard__who{display:flex;align-items:center;gap:10px;}
.vd-tcard__av{width:38px;height:38px;border-radius:50%;background:#e5ecfb;overflow:hidden;flex:0 0 auto;}
.vd-tcard__name{font-size:14px;font-weight:700;color:#0f172a;}

/* ---- Responsive ---- */
@media(max-width:960px){
  .vd-bento,.vd-know,.vd-testi{grid-template-columns:repeat(2,1fr);}
  .vd-tlds{grid-template-columns:repeat(3,1fr);}
  .vd-promos{grid-template-columns:1fr;}
  .vd-tile--wide{grid-column:auto;}
}
@media(max-width:600px){
  .vd{margin-top:-10px;}
  .vd-bento,.vd-know,.vd-testi,.vd-tlds{grid-template-columns:1fr;}
  .vd-search{flex-wrap:wrap;}.vd-search__btn{width:100%;justify-content:center;}
  .vd-sec{padding:52px 0;}
}