/* ==============================================
   OUKIWEB - CHARTE GRAPHIQUE GLOBALE CORRIGÉE
   ============================================== */

/* Import des polices OukiWeb */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Ubuntu:wght@300;400;500;700&display=swap');

/* Variables CSS Système OukiWeb */
:root {
  /* Couleurs principales */
  --ow-primary: #10B981;
  --ow-accent: #34D399;
  
  /* Arrière-plans sombres */
  --ow-bg: #0B0F1A;
  --ow-bg-secondary: #0D121C;
  --ow-bg-tertiary: #0A0E18;
  
  /* Textes */
  --ow-text: #E6EAF2;
  --ow-text-secondary: #B8C4D0;
  --ow-muted: #9AA3B2;
  
  /* Surfaces & bordures */
  --ow-card: #111827;
  --ow-border: rgba(255, 255, 255, 0.08);
  --ow-border-accent: color-mix(in oklab, var(--ow-primary) 18%, transparent);
  
  /* Glassmorphism */
  --ow-glass-bg: color-mix(in oklab, var(--ow-card) 85%, transparent);
  --ow-glass-border: color-mix(in oklab, var(--ow-primary) 15%, transparent);
  
  /* Dégradés harmonisés */
  --ow-edge-gradient: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ow-primary) 50%, transparent), transparent);
  --ow-gradient-primary: linear-gradient(135deg, var(--ow-primary), var(--ow-accent));
  --ow-gradient-radial: radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--ow-primary) 8%, transparent), transparent 60%),
						radial-gradient(900px 500px at 110% 10%, color-mix(in oklab, var(--ow-accent) 6%, transparent), transparent 60%);
  
  /* Effets & transitions */
  --blur: blur(24px) saturate(180%);
  --radius: 16px;
  --radius-sm: 8px;
  --spacing: 1.25rem;
  --spacing-sm: 0.75rem;
  --spacing-lg: 2rem;
  --transition: all 0.3s ease;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px color-mix(in oklab, var(--ow-primary) 8%, transparent);
  
  /* Typographie */
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Ubuntu", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", monospace;
}

/* Classes Utilitaires OukiWeb */
.ow-card {
  background: var(--ow-glass-bg);
  border: 1px solid var(--ow-glass-border);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  position: relative;
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow), var(--shadow-glow);
  transition: var(--transition);
}

.ow-card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.85;
}

.ow-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow), 0 0 30px color-mix(in oklab, var(--ow-primary) 15%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
}

.ow-btn--primary {
  background: var(--ow-gradient-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-primary);
  font-weight: 600;
  transition: var(--transition);
  animation: ow-btn-pulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.ow-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  opacity: 0.7;
}

.ow-btn--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow), 0 0 40px color-mix(in oklab, var(--ow-accent) 40%, transparent);
  background: linear-gradient(135deg, var(--ow-accent), var(--ow-primary));
}

.ow-btn--secondary {
  background: var(--ow-glass-bg);
  color: var(--ow-text);
  border: 1px solid var(--ow-glass-border);
  backdrop-filter: blur(12px) saturate(130%);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: 500;
  transition: var(--transition);
}

.ow-btn--secondary:hover {
  transform: translateY(-2px);
  border-color: var(--ow-border-accent);
  box-shadow: var(--shadow-glow);
}

.ow-btn--ghost {
  background: transparent;
  color: var(--ow-text-secondary);
  border: 1px solid var(--ow-border);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  transition: var(--transition);
}

.ow-btn--ghost:hover {
  background: var(--ow-glass-bg);
  color: var(--ow-text);
  border-color: var(--ow-glass-border);
}

.edge-top::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.85;
}

/* Animations OukiWeb */
@keyframes ow-btn-pulse {
  0%, 100% { 
	box-shadow: var(--shadow), 0 0 20px color-mix(in oklab, var(--ow-primary) 25%, transparent); 
  }
  50% { 
	box-shadow: var(--shadow), 0 0 25px color-mix(in oklab, var(--ow-primary) 30%, transparent); 
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  * {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
  }
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body avec arrière-plan OukiWeb */
body {
  font-family: var(--font-secondary);
  line-height: 1.6;
  color: var(--ow-text);
  background: var(--ow-bg);
  background-image: var(--ow-gradient-radial);
  min-height: 100vh;
  font-size: 16px;
}

/* Layout */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* Header OukiWeb Signature */
.header {
  background: var(--ow-glass-bg);
  border: 1px solid var(--ow-glass-border);
  backdrop-filter: var(--blur);
  color: var(--ow-text);
  padding: var(--spacing-lg);
  border-radius: var(--radius) var(--radius) 0 0;
  text-align: center;
  box-shadow: var(--shadow), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

.header::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.85;
}

.company-info {
  margin-bottom: var(--spacing-lg);
}

.company-name {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: var(--spacing-sm);
  color: var(--ow-text);
  text-shadow: 0 0 30px color-mix(in oklab, var(--ow-primary) 30%, transparent);
}

.tagline {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--ow-accent);
  font-weight: 500;
  font-family: var(--font-primary);
}

.services {
  font-size: 1rem;
  color: var(--ow-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.location {
  font-size: 0.9rem;
  color: var(--ow-muted);
  font-style: italic;
}

/* Main Content avec glassmorphism */
.main-content {
  background: var(--ow-glass-bg);
  backdrop-filter: var(--blur);
  border: 1px solid var(--ow-glass-border);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow), var(--shadow-glow);
  color: var(--ow-text);
  position: relative;
}

/* Sections */
.section {
  margin-bottom: calc(var(--spacing-lg) * 1.5);
}

.section-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ow-text);
  margin-bottom: var(--spacing);
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--ow-primary);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--ow-accent);
}

.document-title {
  font-family: var(--font-primary);
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--ow-glass-border);
  background: var(--ow-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Info boxes avec glassmorphism */
.info-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing);
  background: var(--ow-glass-bg);
  backdrop-filter: blur(15px) saturate(140%);
  border: 1px solid var(--ow-glass-border);
  border-radius: var(--radius);
  border-left: 4px solid var(--ow-primary);
  color: var(--ow-text);
  position: relative;
  transition: var(--transition);
}

.info-box::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.6;
}

.info-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.info-box strong {
  color: var(--ow-accent);
}

/* Tables avec style OukiWeb */
.oukiweb-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  background: var(--ow-glass-bg);
  backdrop-filter: var(--blur);
  border: 1px solid var(--ow-glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow), var(--shadow-glow);
  color: var(--ow-text);
  position: relative;
}

.oukiweb-table::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.85;
  z-index: 1;
}

.oukiweb-table th,
.oukiweb-table td {
  padding: 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--ow-border);
}

.oukiweb-table th {
  background: var(--ow-gradient-primary);
  color: white;
  font-family: var(--font-primary);
  font-weight: 600;
  position: relative;
}

.oukiweb-table tbody tr {
  transition: var(--transition);
}

.oukiweb-table tbody tr:hover {
  background: color-mix(in oklab, var(--ow-primary) 5%, transparent);
  transform: translateY(-1px);
}

.total-row {
  background: var(--ow-glass-bg) !important;
  color: var(--ow-text);
  font-weight: 600;
  border-top: 2px solid var(--ow-primary) !important;
}

/* Cards avec effet OukiWeb */
.card {
  background: var(--ow-glass-bg);
  backdrop-filter: blur(15px) saturate(140%);
  border: 1px solid var(--ow-glass-border);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing);
  border-radius: var(--radius);
  border-left: 4px solid var(--ow-primary);
  color: var(--ow-text);
  transition: var(--transition);
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.6;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow), 0 0 25px color-mix(in oklab, var(--ow-primary) 15%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
}

/* Highlight boxes */
.highlight-box {
  background: color-mix(in oklab, var(--ow-primary) 10%, transparent);
  border: 1px solid var(--ow-border-accent);
  padding: var(--spacing);
  border-radius: var(--radius);
  margin: var(--spacing) 0;
  border-left: 4px solid var(--ow-primary);
  position: relative;
  backdrop-filter: blur(8px);
}

.highlight-box::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: var(--ow-edge-gradient);
  opacity: 0.5;
}

.alert-box {
  background: color-mix(in oklab, #EF4444 10%, transparent);
  border: 1px solid color-mix(in oklab, #EF4444 30%, transparent);
  padding: var(--spacing);
  border-radius: var(--radius);
  margin: var(--spacing) 0;
  border-left: 4px solid #EF4444;
  backdrop-filter: blur(8px);
}

/* Footer harmonisé */
.footer {
  background: var(--ow-glass-bg);
  color: var(--ow-text);
  padding: var(--spacing-lg);
  border-radius: 0 0 var(--radius) var(--radius);
  text-align: center;
  border: 1px solid var(--ow-glass-border);
  border-top: none;
  backdrop-filter: blur(12px) saturate(130%);
}

/* Responsive avec optimisations mobiles */
@media (max-width: 768px) {
  .container {
	padding: var(--spacing);
  }

  .header, .main-content {
	padding: var(--spacing);
	backdrop-filter: blur(16px) saturate(120%);
  }

  .company-name {
	font-size: 2.2rem;
  }

  .document-title {
	font-size: 1.6rem;
  }

  .info-box {
	grid-template-columns: 1fr;
	gap: var(--spacing-sm);
  }

  .oukiweb-table {
	font-size: 0.85rem;
  }

  .oukiweb-table th,
  .oukiweb-table td {
	padding: 0.8rem 0.5rem;
  }
}

/* Fallback pour navigateurs sans support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .ow-card,
  .header,
  .main-content,
  .info-box,
  .card,
  .oukiweb-table {
	background: var(--ow-card);
	border-color: var(--ow-border);
  }
}

/* Utilities OukiWeb */
.hidden { display: none; }
.text-center { text-align: center; }
.ow-accent-primary { color: var(--ow-primary); }
.ow-accent-secondary { color: var(--ow-accent); }

/* Performance optimizations */
.ow-card,
.card,
.ow-btn--primary,
.ow-btn--secondary,
.ow-btn--ghost {
  will-change: transform;
}

.oukiweb-table tbody tr:hover {
  will-change: transform, background-color;
}