/* ════════════════════════════════════════════════════════════════════
   VISIMARK PRO — Charte graphique stricte
   Couleurs logo : Bleu #1E508C · Charbon #323232 · Blanc #FFFFFF
   Polices       : Playfair Display (titrage) · DM Sans (texte)
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Palette strictement dérivée du logo */
  --vm-bleu:       #1E508C;   /* bleu exact du logo */
  --vm-bleu-clair: #2A6BB5;   /* bleu éclairci pour hover */
  --vm-bleu-nuit:  #12244A;   /* bleu très foncé pour fonds sombres */
  --vm-nuit:       #0A1525;   /* quasi-noir bleuté */
  --vm-charbon:    #323232;   /* gris charbon exact du texte logo */
  --vm-gris:       #5A6070;   /* texte secondaire */
  --vm-brume:      #F2F5FA;   /* fond section clair */
  --vm-blanc:      #FFFFFF;
  --vm-trait:      #DDE3EE;   /* bordures */
  /* Typographie */
  --police-titre:  "Playfair Display", Georgia, serif;
  --police-texte:  "DM Sans", system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--police-texte);
  color: var(--vm-charbon);
  background: var(--vm-blanc);
  -webkit-font-smoothing: antialiased;
  line-height: 1.72;
}
h1, h2, h3 { font-family: var(--police-titre); color: var(--vm-charbon); }
p { color: var(--vm-gris); }
a { color: var(--vm-bleu); }
a:hover { color: var(--vm-bleu-clair); }
:focus-visible { outline: 3px solid var(--vm-bleu-clair); outline-offset: 2px; }

/* ── Boutons ─────────────────────────────────────────────────────── */
.btn-cta {
  background: var(--vm-bleu);
  color: #fff;
  font-weight: 600;
  border: 2px solid var(--vm-bleu);
  border-radius: .5rem;
  letter-spacing: .01em;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-cta:hover, .btn-cta:focus {
  background: var(--vm-bleu-clair);
  border-color: var(--vm-bleu-clair);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline-clair {
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  font-weight: 600;
  border-radius: .5rem;
}
.btn-outline-clair:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar-vm {
  background: rgba(10, 21, 37, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: .85rem;
  transition: background .25s, box-shadow .25s;
}
.navbar-vm.reduite {
  background: var(--vm-nuit);
  box-shadow: 0 4px 24px rgba(10,21,37,.4);
}
.navbar-vm .nav-link {
  color: rgba(255,255,255,.8);
  font-weight: 500;
  padding-inline: .9rem;
}
.navbar-vm .nav-link:hover { color: #fff; }
.navbar-vm .nav-link.active { color: #fff; position: relative; }
/* Accent actif : blanc pur, cohérent avec la charte */
.navbar-vm .nav-link.active::after {
  content: "";
  position: absolute; left: .9rem; right: .9rem; bottom: .1rem;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.navbar-vm .navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-vm .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Force logo entièrement blanc via filtre CSS sur fond sombre */
.navbar-vm .navbar-brand img {
  filter: brightness(0) invert(1);
}

/* ── Héros avec image PNG ────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  color: #fff;
  background:
    linear-gradient(
      105deg,
      rgba(10,21,37,.93) 0%,
      rgba(10,21,37,.72) 52%,
      rgba(10,21,37,.28) 100%
    ),
    url("../img/hero-bg.png") center / cover no-repeat;
}
/* Ligne blanche subtile en bas du héros (accent charte) */
.hero::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.hero-titre {
  font-family: var(--police-titre);
  font-size: clamp(2.5rem, 5.5vw, 4.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
/* Soulignement blanc semi-transparent */
.souligne {
  background-image: linear-gradient(transparent 80%, rgba(255,255,255,.3) 80%);
  background-repeat: no-repeat;
}
.lead-vm {
  font-size: 1.12rem;
  line-height: 1.78;
  color: rgba(255,255,255,.86);
  max-width: 38rem;
}
.entete-page .lead-vm, .section .lead-vm { color: var(--vm-gris); }
.hero-preuves li { color: rgba(255,255,255,.82); font-size: .95rem; }
/* Icônes check : blanc pur sur fond sombre */
.hero-preuves i { color: #fff; }

/* ── Eyebrow ─────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .77rem;
  font-weight: 600;
  color: var(--vm-bleu);
}
/* Sur fonds sombres : blanc */
.hero .eyebrow,
.cta-band .eyebrow,
.entete-page .eyebrow { color: rgba(255,255,255,.75); }

/* ── Sections ────────────────────────────────────────────────────── */
.section { padding: 4rem 0; }
.section-grise { background: var(--vm-brume); }
.section-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(1.85rem, 3.3vw, 2.55rem);
  color: var(--vm-charbon);
  line-height: 1.15;
}
/* En-têtes de pages intérieures */
.entete-page {
  background:
    linear-gradient(135deg, rgba(10,21,37,.97) 0%, rgba(18,36,74,.94) 100%),
    url("../img/hero-bg.png") center / cover no-repeat;
  color: #fff;
  padding: 7.5rem 0 3.25rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.entete-page::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.page-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  color: #fff;
  line-height: 1.1;
}
.lien-fleche {
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--vm-bleu);
}
.lien-fleche i { transition: transform .2s; }
.lien-fleche:hover i { transform: translateX(4px); }

/* ── Bandeau partenaires ─────────────────────────────────────────── */
.section-partenaires { padding: 2.75rem 0 3.25rem; border-bottom: 1px solid var(--vm-trait); }
.defile { overflow: hidden; position: relative; }
.defile::before, .defile::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.defile::before { left: 0;  background: linear-gradient(90deg, var(--vm-blanc), transparent); }
.defile::after  { right: 0; background: linear-gradient(-90deg, var(--vm-blanc), transparent); }
.defile-piste { display: flex; width: max-content; align-items: center; }
.defile-groupe { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; }
@media (prefers-reduced-motion: no-preference) {
  .defile-piste { animation: defilement 36s linear infinite; }
  .defile:hover .defile-piste { animation-play-state: paused; }
  @keyframes defilement { to { transform: translateX(-50%); } }
}
.partenaire-item {
  display: flex; align-items: center;
  opacity: .65;
  transition: opacity .25s, transform .2s;
  flex-shrink: 0;
}
.partenaire-item:hover { opacity: 1; transform: scale(1.05); }
.partenaire-item img { height: 50px; width: auto; max-width: 150px; border-radius: 8px; object-fit: contain; }

/* ── Statistiques ────────────────────────────────────────────────── */
.stats-ligne { border-top: 1px dashed var(--vm-trait); padding-top: 2.5rem; }
.stat-valeur {
  font-family: var(--police-titre);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--vm-bleu);
  line-height: 1;
}
.stat-claire { color: #fff; font-size: 1.9rem; }
.stat-libelle { color: var(--vm-gris); font-size: .9rem; margin-top: .4rem; }

/* ── Cartes service ──────────────────────────────────────────────── */
.carte-service {
  background: #fff;
  border: 1px solid var(--vm-trait);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex; flex-direction: column;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.carte-service:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(30,80,140,.1);
  border-color: rgba(30,80,140,.3);
}
.carte-detail { padding: 2.4rem; }
.carte-icone {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--vm-brume);
  color: var(--vm-bleu);
  font-size: 1.45rem;
}
.text-primary-vm { color: var(--vm-bleu); }

/* Coches blanches sur fond bleu — cohérent charte */
.liste-coches { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.liste-coches li {
  padding-left: 1.7rem; position: relative;
  margin-bottom: .5rem; color: var(--vm-gris); font-size: .96rem;
}
.liste-coches li::before {
  content: "✓";
  font-weight: 700;
  position: absolute; left: 0;
  color: var(--vm-bleu);
}

/* ── Atouts / étapes ─────────────────────────────────────────────── */
.atout {
  background: #fff;
  border: 1px solid var(--vm-trait);
  border-radius: 1.1rem;
  padding: 1.6rem;
  height: 100%;
}
.atout i { font-size: 1.6rem; color: var(--vm-bleu); display: block; margin-bottom: .75rem; }
/* Étapes : bordure supérieure bleu logo */
.etape {
  border-top: 3px solid var(--vm-bleu);
  background: var(--vm-brume);
  border-radius: 0 0 1rem 1rem;
  padding: 1.8rem;
  height: 100%;
}
.etape-num {
  font-family: var(--police-titre);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--vm-bleu);
  line-height: 1;
}

/* ── À propos / contact ──────────────────────────────────────────── */
.fiche-identite {
  background: var(--vm-brume);
  border-radius: 1.2rem;
  padding: 2rem 2.2rem;
}
.fiche-identite dt {
  font-size: .75rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--vm-gris); margin-top: 1rem;
}
.fiche-identite dd { font-weight: 600; color: var(--vm-charbon); margin-bottom: 0; }
.valeur { display: flex; gap: 1rem; align-items: flex-start; }
.valeur i { font-size: 1.5rem; color: var(--vm-bleu); margin-top: .1rem; }
/* Bloc bleu nuit (stats À propos) */
.bloc-bleu {
  background: linear-gradient(135deg, var(--vm-nuit), var(--vm-bleu-nuit));
  border-radius: 1.2rem;
  padding: 2rem;
}
/* Formulaire contact */
.coordonnees li { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.coordonnees i { font-size: 1.3rem; color: var(--vm-bleu); margin-top: .1rem; flex-shrink: 0; }
.formulaire-contact .form-label { font-weight: 600; color: var(--vm-charbon); }
.formulaire-contact .form-control,
.formulaire-contact .form-select {
  border-color: var(--vm-trait);
  padding: .7rem 1rem;
  border-radius: .6rem;
  font-family: var(--police-texte);
}
.formulaire-contact .form-control:focus,
.formulaire-contact .form-select:focus {
  border-color: var(--vm-bleu-clair);
  box-shadow: 0 0 0 .2rem rgba(30,80,140,.15);
}

/* ── Pages légales ───────────────────────────────────────────────── */
.page-legale { padding-top: 1.5rem; padding-bottom: 3.5rem; }
.page-legale h2 {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vm-charbon);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--vm-trait);
}
.page-legale h2:first-of-type { border-top: none; padding-top: 0; }
.page-legale p, .page-legale li { color: var(--vm-gris); }
.encart-legal {
  background: var(--vm-brume);
  border-left: 3px solid var(--vm-bleu);
  border-radius: 0 .75rem .75rem 0;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
}

/* ── CTA Band ────────────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(120deg, var(--vm-nuit) 0%, var(--vm-bleu-nuit) 60%, var(--vm-bleu) 100%);
  padding: 3.25rem 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/hero-bg.png") center / cover no-repeat;
  opacity: .06;
  pointer-events: none;
}

/* ── Pied de page ────────────────────────────────────────────────── */
.footer-vm { background: var(--vm-nuit); color: #fff; padding: 3.5rem 0 1.5rem; }
/* Logo dans le footer → blanc via filtre */
.footer-vm .footer-logo { filter: brightness(0) invert(1); }
.footer-titre {
  font-size: .78rem; text-transform: uppercase;
  letter-spacing: .14em; color: white !important;
  margin-bottom: 1.2rem; font-weight: 600;
}
.footer-liens li { margin-bottom: .6rem; color: #fff; font-size: .93rem; }
.footer-liens a { color: #fff; text-decoration: none; }
.footer-liens a:hover { color: var(--vm-bleu-clair); }
.footer-liens i { color: rgba(255,255,255,.6); }

/* ── Pages d'erreur ──────────────────────────────────────────────── */
.page-erreur {
  background:
    linear-gradient(135deg, rgba(10,21,37,.97), rgba(18,36,74,.95)),
    url("../img/hero-bg.png") center / cover no-repeat;
  color: #fff;
  padding: 8rem 0 5rem;
  min-height: 60vh;
  display: flex; align-items: center;
}
.erreur-code {
  font-family: var(--police-titre);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  opacity: .15;
  color: #fff;
  margin-bottom: 0;
}
.page-erreur .lead-vm { color: rgba(255,255,255,.82); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-vm .navbar-collapse {
    background: var(--vm-nuit); margin-top: .8rem;
    border-radius: .8rem; padding: 1rem;
  }
  .navbar-vm .nav-link.active::after { display: none; }
  .hero { padding: 7rem 0 3.5rem; min-height: auto; }
  .entete-page { padding: 7rem 0 2.5rem; margin-bottom: 2rem; }
}
@media (max-width: 575.98px) {
  .section { padding: 2.75rem 0; }
  .defile-groupe { gap: 2rem; padding-right: 2rem; }
  .page-legale { padding-top: 1.25rem; padding-bottom: 2.5rem; }
  .encart-legal { padding: 1rem 1.1rem; }
  .page-legale h2 { font-size: 1.2rem; margin-top: 1.5rem; padding-top: 1.25rem; }
}