/**
 * LudiversIA Design System - WordPress/Elementor Edition
 * Version 2.0 - Optimise pour Elementor
 *
 * COMMENT UTILISER CE FICHIER :
 * 1. Dans WordPress, allez dans : Elementor > Reglages du site > CSS personnalise
 * 2. Collez TOUT le contenu de ce fichier
 * 3. Cliquez sur "Mettre a jour"
 *
 * Ce fichier contient :
 * - Variables CSS avec valeurs HEX directes (compatibles Elementor)
 * - Animations et keyframes
 * - Classes utilitaires pour vos widgets
 * - Styles de composants (boutons, cartes, badges)
 * - Regles responsive et accessibilite
 */
/* ============================================
   1. VARIABLES CSS GLOBALES
   Compatibles avec tous les navigateurs
   ============================================ */
:root {
/* --- Couleurs de marque LudiversIA --- */
/* --- Couleurs de fond et texte --- */
/* --- Couleurs du blog (LudoBlog) --- */
/* --- Degrades (utilisables via var()) --- */
/* --- Ombres --- */
/* --- Transitions --- */
/* --- Border Radius --- */
}

/* ============================================
   2. POLICES GOOGLE FONTS
   Importation des 5 polices du design system
   ============================================ */
/* ============================================
   3. STYLES DE BASE DU SITE
   S'appliquent a tout le site WordPress
   ============================================ */
body {
	background-color: var(--cream-bg);
	color: var(--slate-text);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ============================================
   4. ANIMATIONS - KEYFRAMES
   Copiees depuis le design system Lovable
   ============================================ */
/* Flottement KLIA (mascotte) */
@keyframes klia-floating {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}
	
	50% {
		transform: translateY(-10px) rotate(2deg);
	}
}

/* Rotation spirale (logo) */
@keyframes spiral-swirl {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

/* Rebond doux */
@keyframes bounce-gentle {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	
	40% {
		transform: translateY(-8px);
	}
	
	60% {
		transform: translateY(-4px);
	}
}

/* Apparition en fondu */
@keyframes fade-in {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Apparition avec zoom */
@keyframes scale-in {
	0% {
		transform: scale(0.95);
		opacity: 0;
	}
	
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Revele de gauche a droite */
@keyframes reveal-wipe {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	}
	
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

/* ============================================
   5. CLASSES D'ANIMATION
   Ajoutez ces classes via le champ
   "Classes CSS" dans Elementor > Avance
   ============================================ */
/* Flottement continu (pour KLIA) */
.ludi-float {
	animation: klia-floating 3s ease-in-out infinite;
}

/* Rotation continue (pour spirale) */
.ludi-spiral {
	animation: spiral-swirl 8s linear infinite;
}

/* Rebond leger */
.ludi-bounce {
	animation: bounce-gentle 2s infinite;
}

/* Apparition au chargement */
.ludi-fade-in {
	animation: fade-in .5s ease-out;
}

/* Zoom a l'apparition */
.ludi-scale-in {
	animation: scale-in .3s ease-out;
}

/* ============================================
   6. EFFETS HOVER (SURVOL)
   ============================================ */
/* Inclinaison 3D au survol */
.ludi-hover-tilt {
	transition: var(--transition-smooth);
}

.ludi-hover-tilt:hover {
	transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
}

/* Zoom au survol */
.ludi-hover-scale {
	transition: transform .2s ease;
}

.ludi-hover-scale:hover {
	transform: scale(1.05);
}

/* Lueur au survol (une par couleur) */
.ludi-hover-glow-red:hover {
	box-shadow: var(--shadow-glow-ludi);
}

.ludi-hover-glow-green:hover {
	box-shadow: var(--shadow-glow-vers);
}

.ludi-hover-glow-blue:hover {
	box-shadow: var(--shadow-glow-ia);
}

/* ============================================
   7. STYLE COMIC PANEL (Cartes style BD)
   Pour les cards avec effet "planche de BD"
   ============================================ */
.ludi-comic-panel {
	background: white;
	border: 3px solid var(--slate-text);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-comic);
	padding: 1.5rem;
	position: relative;
	transition: var(--transition-smooth);
}

.ludi-comic-panel:hover {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

/* ============================================
   8. BOUTONS PERSONNALISES
   Ajoutez la classe via Elementor > Avance
   ============================================ */
/* Bouton degrade Ludi (rouge > orange) */
.elementor-widget-button .ludi-btn-ludi .elementor-button,
a.ludi-btn-ludi,
.ludi-btn-ludi {
	background: var(--gradient-ludi) !important;
	color: white !important;
	border: none !important;
	border-radius: var(--radius-xl) !important;
	box-shadow: var(--shadow-md);
	transition: var(--transition-smooth);
}

.ludi-btn-ludi:hover {
	box-shadow: var(--shadow-glow-ludi) !important;
	transform: translateY(-2px);
}

/* Bouton degrade Vers (vert) */
.elementor-widget-button .ludi-btn-vers .elementor-button,
a.ludi-btn-vers,
.ludi-btn-vers {
	background: var(--gradient-vers) !important;
	color: white !important;
	border: none !important;
	border-radius: var(--radius-xl) !important;
	box-shadow: var(--shadow-md);
	transition: var(--transition-smooth);
}

.ludi-btn-vers:hover {
	box-shadow: var(--shadow-glow-vers) !important;
	transform: translateY(-2px);
}

/* Bouton degrade IA (bleu) */
.elementor-widget-button .ludi-btn-ia .elementor-button,
a.ludi-btn-ia,
.ludi-btn-ia {
	background: var(--gradient-ia) !important;
	color: white !important;
	border: none !important;
	border-radius: var(--radius-xl) !important;
	box-shadow: var(--shadow-md);
	transition: var(--transition-smooth);
}

.ludi-btn-ia:hover {
	box-shadow: var(--shadow-glow-ia) !important;
	transform: translateY(-2px);
}

/* Bouton Ghost (transparent avec bordure) */
.ludi-btn-ghost {
	background: transparent !important;
	border: 2px solid var(--slate-text) !important;
	color: var(--slate-text) !important;
	border-radius: var(--radius-xl) !important;
	transition: var(--transition-smooth);
}

.ludi-btn-ghost:hover {
	background: var(--slate-text) !important;
	color: white !important;
}

/* ============================================
   9. BADGES
   Pour les etiquettes sur les cards
   ============================================ */
.ludi-badge {
	display: inline-flex;
	align-items: center;
	padding: .25rem .75rem;
	border-radius: 9999px;
	font-size: .875rem;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
}

.ludi-badge-red {
	background-color: rgba(255, 58, 58, 0.1);
	color: var(--ludi-red);
}

.ludi-badge-green {
	background-color: rgba(16, 187, 130, 0.1);
	color: var(--vers-green);
}

.ludi-badge-blue {
	background-color: rgba(31, 138, 255, 0.1);
	color: var(--ia-blue);
}

.ludi-badge-yellow {
	background-color: rgba(255, 204, 0, 0.15);
	color: #B8860B;
}

.ludi-badge-mulberry {
	background-color: rgba(204, 0, 126, 0.1);
	color: var(--blog-mulberry);
}

/* ============================================
   10. CARTES PORTAILS (Ludi'K, Vers'L, IA)
   ============================================ */
.ludi-portal-card {
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
	box-shadow: var(--shadow-lg);
	transition: var(--transition-smooth);
}

.ludi-portal-card:hover {
	transform: scale(1.02) rotate(-0.5deg);
	box-shadow: var(--shadow-xl);
}

/* Overlay sombre sur l'image de fond */
.ludi-portal-card .elementor-widget-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
	z-index: 1;
}

/* ============================================
   11. SECTION HERO
   ============================================ */
.ludi-hero-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cream-bg);
	position: relative;
	overflow: hidden;
}

/* Titre tricolore du hero */
.ludi-hero-title-red {
	color: var(--ludi-red) !important;
}

.ludi-hero-title-blue {
	color: var(--ia-blue) !important;
}

.ludi-hero-title-green {
	color: var(--vers-green) !important;
}

/* ============================================
   12. SECTION BLOG (LudoBlog)
   ============================================ */
/* Hero du blog */
.ludi-blog-hero {
	background: var(--gradient-blog-hero);
	color: white;
	padding: 4rem 2rem;
	text-align: center;
}

/* Barre de categories sticky */
.ludi-blog-categories {
	position: sticky;
	top: 0;
	z-index: 100;
	background: white;
	padding: .75rem 1rem;
	box-shadow: var(--shadow-sm);
	overflow-x: auto;
	white-space: nowrap;
}

/* Card article blog */
.ludi-blog-card {
	background: white;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: var(--transition-smooth);
}

.ludi-blog-card:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-4px);
}

/* Texte style "tips" avec Caveat */
.ludi-tips-text {
	font-family: 'Caveat', cursive;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--blog-mulberry);
}

/* ============================================
   13. BARRE RAINBOW (separateur degrade)
   ============================================ */
.ludi-rainbow-bar {
	height: 4px;
	background: var(--gradient-rainbow);
	border-radius: 2px;
	width: 100%;
}

.ludi-rainbow-bar-thick {
	height: 6px;
	background: var(--gradient-rainbow);
	border-radius: 3px;
	width: 100%;
}

/* ============================================
   14. COULEURS UTILITAIRES
   Pour le texte et les fonds
   ============================================ */
.ludi-text-red {
	color: var(--ludi-red);
}

.ludi-text-green {
	color: var(--vers-green);
}

.ludi-text-blue {
	color: var(--ia-blue);
}

.ludi-text-yellow {
	color: var(--sun-yellow);
}

.ludi-text-orange {
	color: var(--warm-orange);
}

.ludi-text-slate {
	color: var(--slate-text);
}

.ludi-bg-red {
	background-color: var(--ludi-red);
}

.ludi-bg-green {
	background-color: var(--vers-green);
}

.ludi-bg-blue {
	background-color: var(--ia-blue);
}

.ludi-bg-yellow {
	background-color: var(--sun-yellow);
}

.ludi-bg-orange {
	background-color: var(--warm-orange);
}

.ludi-bg-cream {
	background-color: var(--cream-bg);
}

/* Texte en degrade rainbow */
.ludi-text-rainbow {
	background: var(--gradient-rainbow);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ============================================
   15. RESPONSIVE
   ============================================ */
/* Tablette */
@media (max-width: 1024px) {
	.ludi-hero-section {
		min-height: auto;
		padding: 3rem 1.5rem;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.ludi-hero-section {
		min-height: auto;
		padding: 2rem 1rem;
	}
	
	.ludi-comic-panel {
		padding: 1rem;
	}
	
	.ludi-blog-categories {
		padding: .5rem;
	}
}

/* ============================================
   16. ACCESSIBILITE
   ============================================ */
/* Reduit les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
	*,
	  ::before,
	  ::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Focus visible pour navigation clavier */
:focus-visible {
	outline: 2px solid var(--ia-blue);
	outline-offset: 2px;
}

/* Classe pour la police accessible Atkinson */
.ludi-accessible-font {
	font-family: 'Atkinson Hyperlegible', sans-serif;
}

/* ============================================
   FIN DU FICHIER - ludiversia-elementor.css
   ============================================ */

/* =============================================
   LUDIKBLOG — Poppins Font Family
   Charte graphique Ludi'K Store
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Manrope:wght@400;600;700&display=swap');

/* Titres en Poppins Bold */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.wp-block-heading {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Corps de texte en Poppins Regular */
body,
p,
.entry-content,
.entry-content p,
.wp-block-paragraph,
li, td, th, span {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400;
  line-height: 1.8;
}

/* Navigation en Poppins SemiBold */
nav, 
.main-navigation,
.nav-links a,
.menu-item a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

/* Boutons en Poppins SemiBold */
button,
.wp-block-button__link,
.btn,
a.button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

/* ===== LUDIK — hierarchie titres articles (06/09/2026) ===== */
.single-post .entry-content h2,
.single-post .wp-block-post-content h2,
.single-post .entry-content h2.wp-block-heading {
  font-size: clamp(21px, 4.6vw, 27px) !important;
  line-height: 1.28 !important;
  margin-top: 2.1em !important;
  margin-bottom: 0.55em !important;
}
.single-post .entry-content h3,
.single-post .wp-block-post-content h3,
.single-post .entry-content h3.wp-block-heading {
  font-size: clamp(17px, 3vw, 20px) !important;
  line-height: 1.32 !important;
  margin-top: 1.7em !important;
  margin-bottom: 0.45em !important;
}