/* =============================================================================
   agency-cmw.css — complément CMW du thème Nexsas Agency
   -----------------------------------------------------------------------------
   main.css est le build Tailwind FIGÉ et PURGÉ de la démo « AI Marketing Agency » :
   une classe absente n'a aucun effet, en silence. Ce fichier ajoute :
   1. l'accent violet du thème (variables --color-primary-*, classes va-*) ;
   2. les utilitaires absents de main.css dont les sections ont besoin.
   Chargé APRÈS main.css et AVANT la personnalisation du site (qui surcharge
   --color-primary-500 / -400 et les fonds).
   Vérifier une classe : python _check-classes.py (depuis le dossier du thème).
   ============================================================================= */

:root {
  --color-primary-500: #8d59ff;
  --color-primary-400: #b18cff;
  --color-opai-purple: var(--color-primary-500);
  --color-opai-blue: var(--color-primary-400);
}

/* --- Accent violet ---------------------------------------------------------- */
.va-body { color: rgb(255 255 255 / .9); }
.va-eyebrow svg { fill: var(--color-primary-400); width: 14px; height: 14px; }

.va-btn { cursor: pointer; text-decoration: none; }
.va-btn-primary {
  background: var(--color-primary-500);
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--color-primary-500);
}
.va-btn-primary:hover { background: var(--color-primary-400); border-color: rgb(255 255 255 / .25); }
.va-btn-light { background: var(--color-background-7); color: var(--color-background-13); }
.va-btn-light:hover { border-color: var(--color-primary-400); }
.va-btn .va-btn-dot { background: rgb(255 255 255 / .2); color: #fff; }
.va-btn-light .va-btn-dot { background: var(--color-primary-500); color: #fff; }

.va-link { color: var(--color-primary-400); text-decoration: none; }
.va-link:hover { text-decoration: underline; color: #fff; }
.va-hover-accent:hover { color: var(--color-primary-400); }

.va-icon { color: var(--color-primary-400) !important; transition: color .4s ease-in-out; }
.group:hover .va-icon { color: #fff !important; }
.va-service-bg { background: color-mix(in srgb, var(--color-primary-500) 14%, transparent); }
.va-why-glow { background: linear-gradient(190deg, var(--color-primary-500) 40%, var(--color-primary-400) 95%); }
.va-step-number {
  background: linear-gradient(180deg, var(--color-primary-400) 0%, rgb(17 20 29 / 0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.va-check { background: color-mix(in srgb, var(--color-primary-500) 22%, transparent); color: var(--color-primary-400); }
.va-chip {
  border: 1px solid color-mix(in srgb, var(--color-primary-400) 35%, transparent);
  background: color-mix(in srgb, var(--color-primary-500) 12%, rgb(13 16 23 / .6));
  backdrop-filter: blur(6px);
}
.va-logo-mark { background: var(--color-primary-500); }
.va-social:hover { color: var(--color-primary-400); }
.va-alert { background: color-mix(in srgb, var(--color-primary-500) 30%, transparent); border: 1px solid var(--color-primary-400); }

/* Halo : sous le texte du héros, au-dessus du fond. */
.va-hero .va-halo img { object-fit: cover; object-position: center bottom; opacity: .9; }
/* L'image de la démo finit en blanc (la section suivante y était claire) : ici tout le one-page est sombre, le bas du
   halo est donc fondu vers le fond de page. */
.va-hero .va-halo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--color-background-5) 70%, transparent) 72%, var(--color-background-5) 100%);
}

/* Halo de « pourquoi nous » : seule la lueur violette du haut de l'image reste, le cœur blanc est fondu (il coupait
   net contre la section sombre suivante). */
.va-halo-soft img {
  opacity: .75;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 48%);
  mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 48%);
}

/* En-tête : se densifie au défilement (classe posée par main.js sur .header-one ; ici repris sur .va-header). */
.va-header { transition: background-color .4s ease, border-color .4s ease; }

/* Panneau latéral mobile. */
.va-sidebar { transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; }
.va-sidebar.va-open { transform: translateX(0); }

/* FAQ <details>. */
.va-faq summary { list-style: none; }
.va-faq summary::-webkit-details-marker { display: none; }
.va-faq[open] summary { color: rgb(255 255 255 / .95); padding-bottom: 1rem; }
.va-faq[open] .va-faq-icon { transform: rotate(180deg); color: var(--color-primary-400); }

/* Formulaire. */
.va-input { background: rgb(255 255 255 / .03); outline: none; font-size: 1rem; }
.va-input::placeholder { color: rgb(255 255 255 / .5); }
.va-input:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent); }

/* Texte riche (pages légales, articles). Préfixe va- : une classe en ns- prendrait la police d'icônes. */
.va-prose { color: rgb(255 255 255 / .8); line-height: 1.7; }
.va-prose h1, .va-prose h2, .va-prose h3 { font-family: var(--font-instrument-serif); color: rgb(255 255 255 / .95); font-weight: 400; line-height: 1.15; }
.va-prose h1 { font-size: 2.5rem; margin: 0 0 1.25rem; }
.va-prose h2 { font-size: 1.85rem; margin: 2.5rem 0 1rem; }
.va-prose h3 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.va-prose p, .va-prose ul, .va-prose ol { margin: 0 0 1rem; }
.va-prose ul { list-style: disc; padding-left: 1.25rem; }
.va-prose ol { list-style: decimal; padding-left: 1.25rem; }
.va-prose a { color: var(--color-primary-400); text-decoration: underline; }
.va-prose strong { color: #fff; }

/* --- Utilitaires absents de main.css --------------------------------------- */
.aspect-video { aspect-ratio: 16 / 9; }
.bg-primary-500 { background-color: var(--color-primary-500); }
.border-red-400\/40 { border-color: rgb(248 113 113 / .4); }
.break-all { word-break: break-all; }
.h-\[560px\] { height: 560px; }
.hover\:bg-background-3:hover { background-color: var(--color-background-3); }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.max-h-10 { max-height: 2.5rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-\[520px\] { max-width: 520px; }
.max-w-\[618px\] { max-width: 618px; }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[680px\] { max-width: 680px; }
.max-w-\[818px\] { max-width: 818px; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[1000px\] { max-width: 1000px; }
.max-w-\[1100px\] { max-width: 1100px; }
.max-w-\[1128px\] { max-width: 1128px; }
.max-w-\[1290px\] { max-width: 1290px; }
.mb-3 { margin-bottom: .75rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.min-h-11 { min-height: 2.75rem; }
.min-h-\[300px\] { min-height: 300px; }
.min-w-0 { min-width: 0; }
.opacity-60 { opacity: .6; }
.opacity-70 { opacity: .7; }
.opacity-80 { opacity: .8; }
.p-7 { padding: 1.75rem; }
.pb-24 { padding-bottom: 6rem; }
.pl-3 { padding-left: .75rem; }
.pr-3 { padding-right: .75rem; }
.pt-12 { padding-top: 3rem; }
.rounded-3xl { border-radius: 1.5rem; }
.text-\[22px\] { font-size: 22px; }
.text-\[28px\] { font-size: 28px; }
.text-\[36px\] { font-size: 36px; }
.text-sm { font-size: .875rem; line-height: 1.5; }
.text-base { font-size: 1rem; line-height: 1.6; }
.text-lg { font-size: 1.125rem; line-height: 1.6; }
.text-xl { font-size: 1.25rem; line-height: 1.5; }
.top-4 { top: 1rem; }
.tracking-widest { letter-spacing: .1em; }
.w-5 { width: 1.25rem; }
.w-\[calc\(100\%-2rem\)\] { width: calc(100% - 2rem); }
.w-auto { width: auto; }

@media (min-width: 40rem) {
  .sm\:col-span-6 { grid-column: span 6 / span 6; }
  .sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 48rem) {
  .md\:h-\[640px\] { height: 640px; }
  .md\:mb-16 { margin-bottom: 4rem; }
  .md\:min-h-\[400px\] { min-height: 400px; }
  .md\:p-8 { padding: 2rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:pt-16 { padding-top: 4rem; }
  .md\:pt-28 { padding-top: 7rem; }
  .md\:pt-40 { padding-top: 10rem; }
  .md\:pt-\[180px\] { padding-top: 180px; }
  .md\:space-y-5 > :not(:last-child) { margin-bottom: 1.25rem; }
  .md\:space-y-16 > :not(:last-child) { margin-bottom: 4rem; }
  .md\:text-2xl { font-size: 1.5rem; line-height: 1.33; }
  .md\:top-6 { top: 1.5rem; }
}
@media (min-width: 64rem) {
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-start-7 { grid-column-start: 7; }
  .lg\:gap-x-16 { column-gap: 4rem; }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:max-w-\[440px\] { max-width: 440px; }
  .lg\:max-w-\[460px\] { max-width: 460px; }
  .lg\:max-w-\[560px\] { max-width: 560px; }
  .lg\:mt-20 { margin-top: 5rem; }
  .lg\:pb-24 { padding-bottom: 6rem; }
  .lg\:pb-\[100px\] { padding-bottom: 100px; }
  .lg\:pt-14 { padding-top: 3.5rem; }
  .lg\:pt-20 { padding-top: 5rem; }
  .lg\:pt-24 { padding-top: 6rem; }
  .lg\:pt-36 { padding-top: 9rem; }
}

/* Visuel de « pourquoi nous » : bandeau large, recadré, jamais plus haut que l'écran. */
.va-why-media { aspect-ratio: 16 / 9; max-height: 560px; width: 100%; }
@media (min-width: 64rem) { .va-why-media { aspect-ratio: 21 / 9; } }
.va-why-media img { width: 100%; height: 100%; object-fit: cover; }

/* Petits écrans : un libellé long (« Solicitar una propuesta ») tient dans le bouton. */
@media (max-width: 400px) {
  .va-btn { padding-left: 1rem; padding-right: 1rem; }
  .va-btn .text-tagline-2 { font-size: .875rem; }
}