/* 
Theme Name: Productions LAKLAK
Theme URI: https://lesproductionslaklak.com/
Description: Un super theme ben trop cool pour les productions Laklak
Author: Alexandre Alves aka Le Caribou
Author URI: https://le-caribou.ca
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* BRANDING */

/* Bouton primaire — CTA principal (inscriptions, etc.) */ .elementor-button.btn-primary, .btn-cta { background: linear-gradient(135deg, #FF2768, #F87ABB); color: #FFFFFF; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 14px 32px; border: none; border-radius: 8px; box-shadow: 0 4px 16px rgba(255, 39, 104, 0.3); transition: all 0.3s ease; cursor: pointer; } .elementor-button.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255, 39, 104, 0.45); }

/* Bouton secondaire — outline cyan */ .elementor-button.btn-secondary { background: transparent; color: #00D9D1; border: 2px solid #00D9D1; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; padding: 14px 32px; border-radius: 8px; transition: all 0.3s ease; } .elementor-button.btn-secondary:hover { background: #00D9D1; color: #1A1A2E; }

/* Bouton ghost — fond mauve léger */ .elementor-button.btn-ghost { background: rgba(183, 140, 237, 0.1); color: #B78CED; border: none; font-family: 'Montserrat', sans-serif; font-weight: 700; padding: 14px 32px; border-radius: 8px; transition: all 0.3s ease; } .elementor-button.btn-ghost:hover { background: rgba(183, 140, 237, 0.2); }

/* ═══ Formulaires — Elementor Forms ═══ */ /* Labels */ .elementor-form .elementor-field-label { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: #1A1A2E; margin-bottom: 6px; } /* Champs input, select, textarea */ .elementor-form .elementor-field { padding: 12px 16px; border: 2px solid #e0dfd8; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: #1A1A2E; background: #F5F4F0; transition: border-color 0.2s, box-shadow 0.2s; } /* Focus state — glow cyan */ .elementor-form .elementor-field:focus { border-color: #00D9D1; box-shadow: 0 0 0 3px rgba(0, 217, 209, 0.15); background: #FFFFFF; outline: none; } /* Bouton submit */ .elementor-form .elementor-button[type="submit"] { background: linear-gradient(135deg, #FF2768, #F87ABB); color: #FFFFFF; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; padding: 14px 32px; border-radius: 8px; border: none; box-shadow: 0 4px 16px rgba(255, 39, 104, 0.3); transition: all 0.3s ease; } .elementor-form .elementor-button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255, 39, 104, 0.45); }

/* ═══════════════════════════════════════════ RAYONNE — Variables CSS globales Brand Guide 2026 ═══════════════════════════════════════════ */ :root { /* Couleurs primaires (projecteurs du logo) */ --rayonne-pink: #F87ABB; --rayonne-purple: #B78CED; --rayonne-cyan: #00D9D1; /* Couleurs d'accent */ --rayonne-hot-pink: #FF2768; --rayonne-turquoise: #4DC8D0; /* Neutres */ --rayonne-dark: #1A1A2E; --rayonne-charcoal: #2D2D3F; --rayonne-text: #3A3A4E; --rayonne-text-muted: #6B6B7E; --rayonne-off-white: #F5F4F0; --rayonne-white: #FFFFFF; /* Dégradés */ --rayonne-gradient: linear-gradient(135deg, #F87ABB, #B78CED, #00D9D1); --rayonne-gradient-cta: linear-gradient(135deg, #FF2768, #F87ABB); --rayonne-gradient-soft: linear-gradient(135deg, #B78CED, #00D9D1); /* Ombres */ --rayonne-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --rayonne-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --rayonne-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --rayonne-shadow-cta: 0 4px 16px rgba(255, 39, 104, 0.3); /* Rayons (border-radius) */ --rayonne-radius-sm: 4px; --rayonne-radius-md: 8px; --rayonne-radius-lg: 12px; --rayonne-radius-xl: 16px; /* Transitions */ --rayonne-transition: all 0.3s ease; }