/* ============================================================
   WENERTECH — Correctifs visuels (avec gestion Dark/Light)
   ============================================================ */

/* ---- 1. POLICE INTER PARTOUT ---- */
html, body, *, h1, h2, h3, h4, h5, h6, p, span, a, button, div,
input, textarea, select, article, section, header, footer {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   MODE SOMBRE (par défaut sur WENERTECH)
   ============================================================ */
html.dark,
html.dark body {
  --background: oklch(0.16 0.02 264);
  --foreground: oklch(0.96 0.005 250);
  --card: oklch(0.21 0.025 264);
  --card-foreground: oklch(0.96 0.005 250);
  --primary: oklch(0.96 0.005 250);
  --primary-foreground: oklch(0.21 0.025 264);
  --secondary: oklch(0.27 0.03 264);
  --secondary-foreground: oklch(0.96 0.005 250);
  --muted: oklch(0.24 0.025 264);
  --muted-foreground: oklch(0.68 0.02 257);
  --accent: oklch(0.78 0.16 68);
  --accent-foreground: oklch(0.16 0.02 264);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 16%);
  --ring: oklch(0.78 0.16 68);
  background-color: #0b1220;
  color: #f8fafc;
}

/* ============================================================
   MODE CLAIR
   ============================================================ */
html.light,
html.light body {
  --background: oklch(0.985 0.002 247);
  --foreground: oklch(0.21 0.02 256);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.21 0.02 256);
  --primary: oklch(0.26 0.04 264);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.96 0.01 250);
  --secondary-foreground: oklch(0.26 0.04 264);
  --muted: oklch(0.96 0.01 250);
  --muted-foreground: oklch(0.52 0.02 257);
  --accent: oklch(0.75 0.15 65);
  --accent-foreground: oklch(0.21 0.02 256);
  --border: oklch(0.9 0.01 250);
  --input: oklch(0.9 0.01 250);
  --ring: oklch(0.75 0.15 65);
  background-color: oklch(0.985 0.002 247);
  color: oklch(0.21 0.02 256);
}

/* ---- 2. LOGO : point orange rond ---- */
header a[aria-label*="WENERTECH"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

header a[aria-label*="WENERTECH"] > span:first-child {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 0.625rem !important;
  height: 0.625rem !important;
  min-width: 0.625rem !important;
  min-height: 0.625rem !important;
  border-radius: 9999px !important;
  background-color: oklch(0.78 0.16 68) !important;
}

/* ---- 3. NAVBAR : texte gris clair en dark / foncé en light ---- */
header nav a,
header nav button {
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

html.dark header nav a,
html.dark header nav button {
  color: oklch(0.68 0.02 257) !important;
}

html.dark header nav a:hover,
html.dark header nav button:hover {
  color: #f8fafc !important;
}

html.light header nav a,
html.light header nav button {
  color: oklch(0.52 0.02 257) !important;
}

html.light header nav a:hover,
html.light header nav button:hover {
  color: oklch(0.21 0.02 256) !important;
}

/* ---- 4. CARTES sombres ---- */
html.dark article.bg-card,
html.dark article.group.bg-card {
  background-color: #101728 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

html.dark article.bg-card:hover,
html.dark article.group.bg-card:hover {
  border-color: oklch(0.78 0.16 68 / 0.5) !important;
}

html.dark article.bg-card .bg-primary\/5,
html.dark article.bg-card > div > div:first-child {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #f8fafc !important;
}

html.dark article.bg-card:hover .bg-primary\/5,
html.dark article.bg-card:hover > div > div:first-child {
  background-color: oklch(0.78 0.16 68 / 0.12) !important;
  color: oklch(0.78 0.16 68) !important;
}

html.dark article.bg-card h3 {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

html.dark article.bg-card p {
  color: oklch(0.68 0.02 257) !important;
}

/* ---- 5. HERO : assombrir l'image en dark ---- */
html.dark #accueil .bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    rgba(11, 18, 32, 0.7) 0%,
    rgba(11, 18, 32, 0.55) 50%,
    #0b1220 100%
  ) !important;
}

html.dark #accueil .bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    rgba(11, 18, 32, 0.8) 0%,
    rgba(11, 18, 32, 0.3) 60%,
    transparent 100%
  ) !important;
}

/* En mode light, voile crème clair sur le hero */
html.light #accueil .bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    rgba(250, 250, 252, 0.85) 0%,
    rgba(250, 250, 252, 0.7) 50%,
    oklch(0.985 0.002 247) 100%
  ) !important;
}

html.light #accueil .bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    rgba(250, 250, 252, 0.9) 0%,
    rgba(250, 250, 252, 0.5) 60%,
    transparent 100%
  ) !important;
}

/* Titres du hero */
html.dark #accueil h1 {
  color: #f8fafc !important;
}

html.light #accueil h1 {
  color: oklch(0.21 0.02 256) !important;
}

#accueil h1 {
  letter-spacing: -0.03em !important;
}

#accueil h1 .text-accent {
  color: oklch(0.78 0.16 68) !important;
}

/* ---- 6. BOUTONS PRIMAIRES ---- */
html.dark a.bg-primary,
html.dark button.bg-primary {
  background-color: oklch(0.96 0.005 250) !important;
  color: oklch(0.21 0.025 264) !important;
  font-weight: 500 !important;
}

html.dark a.bg-primary:hover,
html.dark button.bg-primary:hover {
  background-color: oklch(0.88 0.005 250) !important;
}

html.light a.bg-primary,
html.light button.bg-primary {
  background-color: oklch(0.21 0.02 256) !important;
  color: oklch(0.985 0 0) !important;
}

html.light a.bg-primary:hover,
html.light button.bg-primary:hover {
  background-color: oklch(0.35 0.03 256) !important;
}

/* Bouton outline du hero */
html.dark #accueil a.bg-background {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

html.dark #accueil a.bg-background:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

html.light #accueil a.bg-background {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: oklch(0.21 0.02 256) !important;
}

html.light #accueil a.bg-background:hover {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* ---- 7. SECTIONS avec fond muted ---- */
html.dark #secteurs,
html.dark section.bg-muted\/40 {
  background-color: #0a1018 !important;
}

html.light #secteurs,
html.light section.bg-muted\/40 {
  background-color: oklch(0.96 0.01 250) !important;
}

/* ---- 8. SECTION "EXPERTISES" (contraste inversé comme Bolt) ---- */

/* En dark : section CLAIRE, texte FONCÉ */
html.dark #expertises {
  background-color: oklch(0.96 0.005 250) !important;
  color: oklch(0.21 0.025 264) !important;
  --primary: oklch(0.96 0.005 250) !important;
  --primary-foreground: oklch(0.21 0.025 264) !important;
}

html.dark #expertises h2,
html.dark #expertises h3 {
  color: oklch(0.21 0.025 264) !important;
}

html.dark #expertises p {
  color: oklch(0.45 0.02 257) !important;
}

html.dark #expertises .font-mono {
  color: oklch(0.60 0.02 257) !important;
}

html.dark #expertises .text-accent\/90 {
  color: oklch(0.70 0.15 65) !important;
}

html.dark #expertises .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.dark #expertises .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

html.dark #expertises article:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* En light : section FONCÉE, texte CLAIR (inversé) */
html.light #expertises {
  background-color: oklch(0.26 0.04 264) !important;
  color: oklch(0.985 0 0) !important;
  --primary: oklch(0.26 0.04 264) !important;
  --primary-foreground: oklch(0.985 0 0) !important;
}

html.light #expertises h2,
html.light #expertises h3 {
  color: oklch(0.985 0 0) !important;
}

html.light #expertises p {
  color: rgba(255, 255, 255, 0.75) !important;
}

html.light #expertises .font-mono {
  color: rgba(255, 255, 255, 0.4) !important;
}

html.light #expertises .text-accent\/90 {
  color: oklch(0.78 0.16 68 / 0.9) !important;
}

html.light #expertises .border-white\/10 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.light #expertises .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html.light #expertises article:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}


/* ---- 9. FOOTER ---- */
footer {
  transition: background-color 0.2s ease, color 0.2s ease;
}

html.light footer {
  background-color: oklch(0.96 0.005 250) !important;
  color: oklch(0.21 0.02 256) !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

html.light footer h3 {
  color: oklch(0.21 0.02 256) !important;
  font-weight: 600 !important;
}

html.light footer p,
html.light footer li,
html.light footer span {
  color: oklch(0.45 0.02 257) !important;
}

html.light footer a {
  color: oklch(0.35 0.02 257) !important;
}

html.light footer a:hover {
  color: oklch(0.60 0.14 65) !important;
}

html.light footer .border-t,
html.light footer [class*="border-white"] {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ---- 10. BADGES ---- */
span[data-slot="badge"] {
  border-color: oklch(0.78 0.16 68 / 0.4) !important;
  font-weight: 500 !important;
}

/* ---- 11. BOUTON SECONDAIRE (CTA "Parler de mon projet") ---- */
html.dark a.bg-secondary,
html.dark button.bg-secondary {
  color: oklch(0.96 0.005 250) !important;   /* texte blanc en dark */
}

html.light a.bg-secondary,
html.light button.bg-secondary {
  color: oklch(0.26 0.04 264) !important;    /* texte foncé en light */
}

/* Effet hover : légèrement transparent */
html.dark a.bg-secondary:hover,
html.dark button.bg-secondary:hover {
  color: oklch(0.96 0.005 250) !important;
  opacity: 0.9;
}

html.light a.bg-secondary:hover,
html.light button.bg-secondary:hover {
  color: oklch(0.26 0.04 264) !important;
  opacity: 0.9;
}
/* ---- 12. CHAMPS DE FORMULAIRE (input/textarea/select) ---- */
html.dark input,
html.dark textarea,
html.dark select,
html.dark button[data-slot="select-trigger"] {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus,
html.dark button[data-slot="select-trigger"]:focus {
  border-color: oklch(0.78 0.16 68 / 0.6) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Light : version claire */
html.light input,
html.light textarea,
html.light select,
html.light button[data-slot="select-trigger"] {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: oklch(0.21 0.02 256) !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}
/* ---- 13. LOGO DU FOOTER : point orange rond aussi ---- */
footer a[aria-label*="WENERTECH"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

footer a[aria-label*="WENERTECH"] > span:first-child {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 0.625rem !important;
  height: 0.625rem !important;
  min-width: 0.625rem !important;
  min-height: 0.625rem !important;
  border-radius: 9999px !important;   /* cercle parfait */
  background-color: oklch(0.78 0.16 68) !important;
}

/* ---- 14. LIEN EMAIL EN ORANGE (dans le footer et le contact) ---- */
footer a[href^="mailto:"],
#contact a[href^="mailto:"] {
  color: oklch(0.78 0.16 68) !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

footer a[href^="mailto:"]:hover,
#contact a[href^="mailto:"]:hover {
  color: oklch(0.85 0.17 68) !important;
  text-decoration: underline !important;
}

/* ---- 15. TRAITS DE SÉPARATION ENTRE SECTIONS ---- */
html.dark section.border-y,
html.dark section.border-t,
html.dark section.border-b {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark .border-border\/60 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ---- 16. FOND "VOS ENJEUX" et autres sections bg-muted/40 ---- */
/* En dark : plus CLAIR que le fond principal */
html.dark section.bg-muted\/40 {
  background-color: oklch(0.21 0.025 264) !important;   /* #1a1f2e - plus clair */
}

/* Light : gris très clair */
html.light section.bg-muted\/40 {
  background-color: oklch(0.96 0.01 250) !important;
}

/* ---- 17. SECTION "SECTEURS" (une autre bg-muted/40) ---- */
html.dark #secteurs {
  background-color: oklch(0.21 0.025 264) !important;
}

html.light #secteurs {
  background-color: oklch(0.96 0.01 250) !important;
}

/* ---- 18. BORDURE entre "Méthode" et "À propos" + section À propos ---- */

/* Bordure supérieure des sections avec border-y plus visible */
html.dark #a-propos,
html.dark section#a-propos {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  background-color: oklch(0.19 0.025 264) !important;   /* plus clair que le fond noir */
}

/* Badge "Fondateur — WENERTECH" : en gris foncé, pas en blanc */
html.dark #a-propos span[data-slot="badge"] {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: oklch(0.68 0.02 257) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Texte "Fondateur" et sous-titre dans l'image */
html.dark #a-propos .absolute p:first-child {
  color: #f8fafc !important;
}

html.dark #a-propos .absolute p:last-child {
  color: oklch(0.68 0.02 257) !important;
}

/* Light : version symétrique */
html.light #a-propos {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  background-color: oklch(0.96 0.005 250) !important;
}

html.light #a-propos span[data-slot="badge"] {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: oklch(0.45 0.02 257) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* ---- 19. PHOTO DU FONDATEUR (section À propos) ---- */
/* Conteneur de la photo : bordure grise */
html.dark #a-propos .rounded-2xl,
html.dark #a-propos .overflow-hidden.rounded-2xl {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: transparent !important;
}

/* Dégradé noir en bas de la photo (renforcé) */
html.dark #a-propos .absolute.bottom-0 {
  background-image: linear-gradient(
    to top,
    rgba(11, 18, 32, 0.95) 0%,
    rgba(11, 18, 32, 0.6) 40%,
    transparent 100%
  ) !important;
}

/* Texte "Fondateur" sur la photo */
html.dark #a-propos .absolute.bottom-0 p:first-child {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

/* Sous-titre "WENERTECH — Conseil & optimisation" */
html.dark #a-propos .absolute.bottom-0 p:last-child {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Light : bordure et dégradé adaptés */
html.light #a-propos .rounded-2xl,
html.light #a-propos .overflow-hidden.rounded-2xl {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html.light #a-propos .absolute.bottom-0 {
  background-image: linear-gradient(
    to top,
    rgba(250, 250, 252, 0.95) 0%,
    rgba(250, 250, 252, 0.5) 40%,
    transparent 100%
  ) !important;
}

html.light #a-propos .absolute.bottom-0 p:first-child {
  color: oklch(0.21 0.02 256) !important;
}

html.light #a-propos .absolute.bottom-0 p:last-child {
  color: oklch(0.45 0.02 257) !important;
}

/* ============================================================
   CORRECTIONS LIGHT MODE UNIQUEMENT (n'affecte pas le dark)
   ============================================================ */

/* ---- 1. HERO : voile blanc moins opaque (comme Bolt) ---- */
html.light #accueil .bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    rgba(250, 250, 252, 0.55) 0%,
    rgba(250, 250, 252, 0.4) 50%,
    oklch(0.985 0.002 247) 100%
  ) !important;
}

html.light #accueil .bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    rgba(250, 250, 252, 0.65) 0%,
    rgba(250, 250, 252, 0.25) 60%,
    transparent 100%
  ) !important;
}

/* ---- 2. FOOTER : NOIR en light (comme Bolt) ---- */
html.light footer {
  background-color: #0b1220 !important;
  color: #f8fafc !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html.light footer h3 {
  color: #f8fafc !important;
}

html.light footer p,
html.light footer li,
html.light footer span {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.light footer a {
  color: rgba(255, 255, 255, 0.6) !important;
}

html.light footer a:hover {
  color: oklch(0.78 0.16 68) !important;
}

/* Logo footer en light : texte blanc + point orange */
html.light footer a[aria-label*="WENERTECH"] {
  color: #f8fafc !important;
}

html.light footer .border-t,
html.light footer [class*="border-white"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- 3. BOUTON TOGGLE (soleil/lune) : fond blanc + bordure visible ---- */
html.light header button[data-slot="dropdown-menu-trigger"] {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: oklch(0.21 0.02 256) !important;
}

html.light header button[data-slot="dropdown-menu-trigger"]:hover {
  background-color: oklch(0.96 0.005 250) !important;
}

html.light header button[data-slot="dropdown-menu-trigger"] svg {
  color: oklch(0.21 0.02 256) !important;
  stroke: oklch(0.21 0.02 256) !important;
}

/* ---- 4. EFFET HOVER ORANGE sur les cartes en light ---- */
/* Section "Vos enjeux" */
html.light article.bg-card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

html.light article.bg-card:hover {
  border-color: oklch(0.75 0.15 65 / 0.6) !important;
  background-color: rgba(251, 146, 60, 0.02) !important;
}

/* Icône de la carte : change en orange au survol */
html.light article.bg-card .bg-primary\/5,
html.light article.bg-card > div > div:first-child {
  background-color: oklch(0.96 0.01 250) !important;
  color: oklch(0.45 0.02 257) !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

html.light article.bg-card:hover .bg-primary\/5,
html.light article.bg-card:hover > div > div:first-child {
  background-color: oklch(0.75 0.15 65 / 0.12) !important;
  color: oklch(0.65 0.14 65) !important;
}

/* Titres des cartes restent foncés */
html.light article.bg-card h3 {
  color: oklch(0.21 0.02 256) !important;
}

html.light article.bg-card p {
  color: oklch(0.45 0.02 257) !important;
}

/* "Deux parcours" (paths cards) */
html.light article.group:hover {
  border-color: oklch(0.75 0.15 65 / 0.6) !important;
}

/* "Secteurs" cards */
html.light #secteurs article.bg-card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light #secteurs article.bg-card:hover {
  border-color: oklch(0.75 0.15 65 / 0.6) !important;
}

html.light #secteurs article.bg-card .bg-primary\/5 {
  background-color: oklch(0.96 0.01 250) !important;
  color: oklch(0.45 0.02 257) !important;
}

html.light #secteurs article.bg-card:hover .bg-primary\/5 {
  background-color: oklch(0.75 0.15 65 / 0.12) !important;
  color: oklch(0.65 0.14 65) !important;
}

/* "Méthode" (4 temps) cards */
html.light ol li.bg-card,
html.light ol li.group {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transition: border-color 0.2s ease !important;
}

html.light ol li.bg-card:hover,
html.light ol li.group:hover {
  border-color: oklch(0.75 0.15 65 / 0.6) !important;
}

html.light ol li .bg-primary\/5 {
  background-color: oklch(0.96 0.01 250) !important;
  color: oklch(0.45 0.02 257) !important;
}

html.light ol li:hover .bg-primary\/5 {
  background-color: oklch(0.75 0.15 65 / 0.12) !important;
  color: oklch(0.65 0.14 65) !important;
}

/* ---- 5. BOUTON "Découvrir nos expertises" dans le hero (light) ---- */
html.light #accueil a.bg-background {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: oklch(0.21 0.02 256) !important;
}

html.light #accueil a.bg-background:hover {
  background-color: oklch(0.96 0.005 250) !important;
}

/* ---- 20. BOUTON OUTLINE HERO EN LIGHT : blanc au repos, orange au survol ---- */
html.light #accueil a.bg-background {
  background-color: #ffffff !important;
  color: oklch(0.21 0.02 256) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

html.light #accueil a.bg-background:hover,
html.light #accueil a.bg-background:focus,
html.light #accueil a.bg-background:focus-visible {
  background-color: oklch(0.75 0.15 65) !important;
  color: oklch(0.21 0.02 256) !important;
  border-color: oklch(0.75 0.15 65) !important;
}

/* La flèche suit la couleur du texte */
html.light #accueil a.bg-background:hover svg {
  color: oklch(0.21 0.02 256) !important;
  stroke: oklch(0.21 0.02 256) !important;
}