/*
Theme Name: 3Vision Group
Theme URI: https://3vision-group.com/
Author: 3vision-group
Description: Thème WordPress sur mesure, léger, pensé pour Google et orienté conversion pour 3Vision Group — Agence Web, IA & Automatisation à Dakar.
Version: 2026.10.8
License: GNU General Public License v2 or later
Text Domain: threevision
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ============================================================
   DESIGN TOKENS — 3Vision Group 2026.10.8
   ============================================================ */
:root {
  /* Couleurs primaires */
  --3vg-navy: #0a1331;
  --3vg-navy-2: #0d183a;
  --3vg-navy-3: #071025;
  --3vg-brand: #3aa4ff;
  --3vg-brand-dark: #2b8de0;
  --3vg-green: #16c784;
  --3vg-green-dark: #0fa06a;

  /* Surfaces */
  --3vg-bg: #f7f9fc;
  --3vg-card: #ffffff;
  --3vg-border: #e6eefb;

  /* Texte */
  --3vg-ink: #0b1321;
  --3vg-ink-inv: #ffffff;
  --3vg-muted: #5b6b85;
  --3vg-muted-light: #94a3b8;

  /* Effets */
  --3vg-radius: 16px;
  --3vg-radius-sm: 10px;
  --3vg-radius-pill: 999px;
  --3vg-shadow: 0 10px 28px rgba(3, 10, 40, .10);
  --3vg-shadow-lg: 0 20px 50px rgba(3, 10, 40, .14);
  --3vg-glass: rgba(255, 255, 255, .08);
  --3vg-glass-border: rgba(255, 255, 255, .14);

  /* Gradients */
  --3vg-gradient-brand: linear-gradient(135deg, #3aa4ff, #16c784);
  --3vg-gradient-hero: linear-gradient(180deg, #0a1331, #0d183a 50%, #0a1331);
  --3vg-gradient-dark: linear-gradient(135deg, #0a1331 0%, #0d1f4a 55%, #071025 100%);

  /* Typographie */
  --3vg-font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --3vg-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--3vg-font);
  font-weight: 400;
  color: var(--3vg-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.15; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   UTILITAIRES GLOBAUX
   ============================================================ */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.grid { display: grid; gap: 22px; }
.grid > * { min-width: 0; }
.auto-fit-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.auto-fit-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--3vg-radius-pill);
  font-weight: 800;
  font-size: 14.5px;
  border: 0;
  cursor: pointer;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(.96); }
.btn:focus-visible { outline: 3px solid rgba(58, 164, 255, .45); outline-offset: 2px; }
.btn--primary {
  background: var(--3vg-brand);
  color: #fff;
  box-shadow: 0 10px 20px rgba(58, 164, 255, .25);
}
.btn--gradient {
  background: var(--3vg-gradient-brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(58, 164, 255, .3);
}
.btn--ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
}
.btn--outline {
  background: transparent;
  color: var(--3vg-brand);
  border: 2px solid var(--3vg-brand);
}
.btn--outline:hover { background: var(--3vg-brand); color: #fff; }

/* Pills / Eyebrows */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #86b7ff;
  background: rgba(58, 164, 255, .12);
  border: 1px solid rgba(58, 164, 255, .35);
  padding: 7px 13px;
  border-radius: var(--3vg-radius-pill);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #eef4ff;
  border: 1px solid #dce8ff;
  border-radius: var(--3vg-radius-pill);
  font-weight: 800;
  color: #27407a;
  font-size: 12.5px;
}

/* Gradient text */
.gradient-text {
  background: var(--3vg-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sections */
.section { padding: 64px 0; }
.section--alt { background: var(--3vg-bg); }
.section--dark {
  background: var(--3vg-gradient-dark);
  color: var(--3vg-ink-inv);
}

.sechead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}
.sechead h2 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 950;
  margin: 10px 0 12px;
}
.sechead p { color: var(--3vg-muted); line-height: 1.75; }

/* Cards */
.card {
  background: var(--3vg-card);
  border: 1px solid var(--3vg-border);
  border-radius: var(--3vg-radius);
  padding: 24px;
  box-shadow: var(--3vg-shadow);
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--3vg-shadow-lg);
}

/* Reveal animations */
/* Reveal animations — fail-open : contenu visible si JS/cache/minification bloque */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
html.vg-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
}
html.vg-reveal-ready .reveal.is-visible,
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav separator */
.vg-nav-sep {
  height: 3px;
  background: linear-gradient(90deg, var(--3vg-navy), var(--3vg-brand), var(--3vg-green), var(--3vg-brand), var(--3vg-navy));
  background-size: 200% 100%;
  animation: navSepShimmer 4s ease infinite;
}
@keyframes navSepShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding: 42px 0; }
}

/* ============================================================
   LEGACY COMPAT — preserve existing styles from v2026.8
   ============================================================ */

/* 3Vision 2026.3 — correctifs sûrs : pages Réalisations + Rendez-vous */
#real-single .rs-container{box-sizing:border-box;}
body.threevg-appt-theme-light #threevg-appointments-page,
html.threevg-appt-theme-light #threevg-appointments-page{
  background:radial-gradient(900px circle at 12% -10%, rgba(20,184,255,.16), transparent 55%),radial-gradient(820px circle at 100% 12%, rgba(11,99,206,.18), transparent 55%),linear-gradient(180deg,#020617 0%,#031021 100%) !important;
}
body.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-hero h1,
html.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-hero h1,
html[data-threevg-theme="light"] #threevg-appointments-page .threevg-appt-hero h1{
  color:#f8fafc !important;
  opacity:1 !important;
  text-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
body.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-eyebrow,
html[data-threevg-theme="light"] #threevg-appointments-page .threevg-appt-eyebrow{color:#5FD6FF !important;}
body.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-subtitle,
html[data-threevg-theme="light"] #threevg-appointments-page .threevg-appt-subtitle{color:rgba(226,232,240,.94) !important;}
html[data-threevg-theme="light"] #threevg-appointments-page .threevg-appt-step .label strong,
body.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-step .label strong{color:#0f172a !important;}
html[data-threevg-theme="light"] #threevg-appointments-page .threevg-appt-step.is-active .label strong,
body.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-step.is-active .label strong{color:#06243f !important;}
html[data-threevg-theme="light"] #threevg-appointments-page .threevg-appt-step .label span,
body.threevg-appt-theme-light #threevg-appointments-page .threevg-appt-step .label span{color:#475569 !important;}
@media (max-width:720px){
  #real-single .media .frame{max-height:460px}
  #real-single .media img{max-height:460px}
}

/* =========================================================
 * 3Vision Group 2026.5 — finitions thème + plugins
 * Objectif : corriger centrage Réalisations, lisibilité RDV,
 * éviter les conflits de classes génériques et renforcer le SEO UX.
 * ========================================================= */

/* Appointment page: force readable contrasts even if plugin/theme mode collides */
body.threevg-appt-context #threevg-appointments-page,
#threevg-appointments-page.threevg-appt-theme-light{
  background:radial-gradient(900px circle at 12% -10%, rgba(20,184,255,.16), transparent 55%),radial-gradient(820px circle at 100% 12%, rgba(11,99,206,.18), transparent 55%),linear-gradient(180deg,#020617 0%,#031021 100%) !important;
  color:#f8fafc !important;
}
#threevg-appointments-page .threevg-appt-hero h1,
#threevg-appointments-page .threevg-appt-hero .threevg-appt-title{
  color:#f8fafc !important;
  opacity:1 !important;
  text-shadow:0 14px 34px rgba(0,0,0,.34) !important;
}
#threevg-appointments-page .threevg-appt-eyebrow{color:#67d8ff !important;opacity:1 !important;}
#threevg-appointments-page .threevg-appt-subtitle{color:rgba(226,232,240,.94) !important;opacity:1 !important;}
#threevg-appointments-page .threevg-appt-step{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow:0 14px 38px rgba(2,6,23,.16) !important;
}
#threevg-appointments-page .threevg-appt-step.is-active{
  background:linear-gradient(135deg,#ffffff,#eff8ff) !important;
  border-color:rgba(20,184,255,.45) !important;
}
#threevg-appointments-page .threevg-appt-step .dot{
  background:linear-gradient(135deg,#14B8FF,#0B63CE) !important;
  color:#fff !important;
}
#threevg-appointments-page .threevg-appt-step .label strong,
#threevg-appointments-page .threevg-appt-step .label span{opacity:1 !important;}
#threevg-appointments-page .threevg-appt-step .label strong{color:#0f172a !important;}
#threevg-appointments-page .threevg-appt-step .label span{color:#475569 !important;}
#threevg-appointments-page .threevg-appt-card,
#threevg-appointments-page .threevg-cal-wrapper,
#threevg-appointments-page .threevg-appt-slot-panel,
#threevg-appointments-page .threevg-appt-duration-panel{
  background:#ffffff !important;
  color:#0f172a !important;
}
#threevg-appointments-page .threevg-appt-card h2,
#threevg-appointments-page .threevg-appt-card h3,
#threevg-appointments-page .threevg-appt-slot-summary,
#threevg-appointments-page .threevg-cal-month-label,
#threevg-appointments-page label{color:#0f172a !important;opacity:1 !important;}
#threevg-appointments-page .threevg-appt-card p,
#threevg-appointments-page .threevg-appt-slot-sub,
#threevg-appointments-page .threevg-appt-duration-help,
#threevg-appointments-page small{color:#475569 !important;opacity:1 !important;}
#threevg-appointments-page input,
#threevg-appointments-page select,
#threevg-appointments-page textarea{
  color:#0f172a !important;
  background:#ffffff !important;
  border-color:rgba(15,23,42,.16) !important;
}
#threevg-appointments-page input::placeholder,
#threevg-appointments-page textarea::placeholder{color:#94a3b8 !important;}

/* Theme RDV FAB: compact and readable without covering strategic buttons */
.rdv-fab{z-index:9990 !important;}
body.threevg-appt-context .rdv-fab{display:none !important;}
@media (max-width:560px){
  .rdv-fab{bottom:max(10px, env(safe-area-inset-bottom) + 10px) !important;right:10px !important;max-width:calc(100vw - 20px) !important;}
  .rdv-fab-label{max-width:126px !important;}
}

/* Réalisations : garde le rendu centré même si un plugin définit .container/.hero globalement */
#real-single.threevision-real-single{overflow-x:hidden;}
#real-single.threevision-real-single .rs-container{width:min(100% - 32px,1120px) !important;max-width:1120px !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;}
#real-single.threevision-real-single .rs-media-frame{max-width:1040px !important;margin:0 auto !important;}
#real-single.threevision-real-single .rs-media-frame img{display:block;margin:0 auto !important;max-width:100% !important;width:auto !important;height:auto !important;}
#real-single.threevision-real-single .rs-content-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);gap:24px;align-items:start;}
@media (max-width:980px){#real-single.threevision-real-single .rs-content-grid{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto;}}
@media (max-width:640px){#real-single.threevision-real-single .rs-container{width:min(100% - 22px,1120px) !important;}}


/* 3Vision 2026.6 — Portfolio/RDV finishing */
body.single-realisation, body.post-type-archive-realisation, body.tax-type-real, body.tax-techno{background:#07111f!important;}
body.single-realisation .rdv-fab, body.post-type-archive-realisation .rdv-fab, body.tax-type-real .rdv-fab, body.tax-techno .rdv-fab{display:none!important;}
body.threevg-appt-context .rdv-fab{display:none!important;}
#threevg-appointments-page .threevg-appt-hero h1{color:#f8fafc!important;opacity:1!important;text-shadow:0 14px 34px rgba(0,0,0,.32)!important;}
#threevg-appointments-page .threevg-appt-step .label strong,#threevg-appointments-page .threevg-appt-card h2,#threevg-appointments-page label{color:#0f172a!important;opacity:1!important;}
#threevg-appointments-page .threevg-appt-step .label span,#threevg-appointments-page .threevg-appt-card p,#threevg-appointments-page small{color:#475569!important;opacity:1!important;}
@media(max-width:640px){.rdv-fab{display:none!important;}}


/* 3Vision 2026.8 — Refonte stratégique IA + maquette 2026 */
.main-menu .ai-badge,
.mobile-menu .ai-badge{
  background:linear-gradient(135deg,#3aa4ff,#16c784)!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:10px 14px!important;
  box-shadow:0 12px 24px rgba(58,164,255,.20);
}
.main-menu .ai-badge::after{display:none!important;}
.vg-card.vg-card--ai{border:1px solid rgba(22,199,132,.28);box-shadow:0 16px 40px rgba(3,10,40,.12);}
.vg-card.vg-card--ai .vg-icon{background:rgba(22,199,132,.14)!important;color:#0f9f6e!important;}
@media (prefers-reduced-motion:no-preference){
  html.vg-reveal-ready .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
  html.vg-reveal-ready .reveal.is-visible,.reveal.is-visible{opacity:1;transform:none;}
}
@media (max-width:640px){
  .main-menu .ai-badge,.mobile-menu .ai-badge{justify-content:center;}
}


/* ============================================================
   3Vision v2026.9.2 HOTFIX AFFICHAGE
   Anti page vide : par défaut les sections .reveal restent visibles.
   L'animation ne cache les blocs que lorsque main.js est réellement prêt.
   ============================================================ */
html:not(.vg-reveal-ready) .reveal,
html.no-js .reveal,
body:not(.vg-js-ok) .reveal {
  opacity: 1 !important;
  transform: none !important;
}
html.vg-reveal-ready body.vg-js-ok .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}
html.vg-reveal-ready body.vg-js-ok .reveal.is-visible,
body .reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Appointment form: explicit consent and readable privacy link. */
.threevision-appt-consent{display:flex;align-items:flex-start;gap:12px;flex:1 1 460px;font-size:14px;line-height:1.6;color:#475569!important}
.threevision-appt-consent input{width:22px!important;height:22px!important;min-width:22px;margin:1px 0 0;accent-color:#0b63ce;cursor:pointer}
.threevision-appt-consent span{color:#475569!important}
.threevision-appt-consent a{color:#075fbd!important;text-decoration:underline;text-underline-offset:2px}
.threevision-appt-consent a:focus-visible{outline:3px solid #0b63ce;outline-offset:3px;border-radius:3px}
@media(max-width:700px){.threevg-appt-submit-row{align-items:stretch!important}.threevision-appt-consent{flex-basis:100%}.threevg-appt-btn{width:100%}}