/*
	Theme Name: Hello Biz
	Theme URI: https://elementor.com/products/hello-biz/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Biz is a free, user-friendly Hybrid WordPress Theme that was crafted for seamless integration with the Elementor site builder and tailored specifically for business websites. Perfect for beginners, but far from limited to just them, it features a dedicated beginner-oriented “Home” screen to simplify and streamline the web-building process. Hello Biz also integrates with Elementor’s premium features, giving you access to tools like AI, and accessibility enhancements in one place. Whether launching a startup site or refining a company portfolio, Hello Biz offers a solid, responsive foundation for all web creators. Report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team validates, triages, and handles vulnerabilities. Report here: https://patchstack.com/database/wordpress/theme/hello-biz/vdp.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 1.1.1
	Stable tag: 1.1.1
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-biz
	Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready, style-variations
*/
/* ==============================================
   AXA OFFRE CITOYENNE - TEMPLATE ELEMENTOR
   ============================================== */

/* Variables CSS pour cohérence */
:root {
  /* Couleurs AXA */
  --axa-blue-primary: #00008F;
  --axa-blue-secondary: #1C1C8F;
  --axa-blue-light: #E6E6FF;
  --axa-green-success: #00C851;
  --axa-green-light: #B8E6D1;
  --axa-orange-warning: #FF8C00;
  --axa-orange-light: #FFE4B8;
  --axa-red-error: #FF3547;
  --axa-red-light: #FFB8C1;
  --axa-gray-dark: #333333;
  --axa-gray-medium: #666666;
  --axa-gray-light: #F5F5F5;
  --axa-white: #FFFFFF;
  
  /* Typographie */
  --font-primary: 'Arial', 'Helvetica', sans-serif;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  
  /* Espacements */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Rayons de bordure */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
}

/* ==============================================
   TYPOGRAPHIE GÉNÉRALE
   ============================================== */

h1, .elementor-heading-title.elementor-size-default {
  font-family: var(--font-primary);
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--axa-gray-dark);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h2, .elementor-heading-title.elementor-size-medium {
  font-family: var(--font-primary);
  font-size: var(--font-size-h2);
  font-weight: 600;
  color: var(--axa-gray-dark);
  line-height: 1.3;
  margin-bottom: var(--spacing-sm);
}

h3, .elementor-heading-title.elementor-size-small {
  font-family: var(--font-primary);
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--axa-gray-dark);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

p, .elementor-text-editor {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--axa-gray-medium);
  margin-bottom: var(--spacing-sm);
}

/* ==============================================
   BOUTONS AXA
   ============================================== */

.elementor-button-wrapper .elementor-button,
.axa-button {
  font-family: var(--font-primary);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: var(--font-size-body);
}

/* Bouton principal AXA */
.axa-button-primary,
.elementor-button.elementor-button-primary {
  background-color: var(--axa-blue-primary);
  color: var(--axa-white);
}

.axa-button-primary:hover,
.elementor-button.elementor-button-primary:hover {
  background-color: var(--axa-blue-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 143, 0.3);
}

/* Bouton secondaire */
.axa-button-secondary,
.elementor-button.elementor-button-secondary {
  background-color: transparent;
  color: var(--axa-blue-primary);
  border: 2px solid var(--axa-blue-primary);
}

.axa-button-secondary:hover,
.elementor-button.elementor-button-secondary:hover {
  background-color: var(--axa-blue-primary);
  color: var(--axa-white);
}

/* Bouton succès */
.axa-button-success {
  background-color: var(--axa-green-success);
  color: var(--axa-white);
}

.axa-button-success:hover {
  background-color: #00A043;
}

/* ==============================================
   CARTES ET CONTENEURS
   ============================================== */

.axa-card,
.elementor-widget-container .card {
  background-color: var(--axa-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.axa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Carte avec statut */
.axa-card-status {
  position: relative;
  overflow: hidden;
}

.axa-card-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--axa-blue-primary);
}

/* ==============================================
   SYSTÈME DE SCORING/NOTATION
   ============================================== */

.axa-score-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--axa-blue-primary), var(--axa-blue-secondary));
  border-radius: 50%;
  width: 120px;
  height: 120px;
  color: var(--axa-white);
  font-weight: 700;
  font-size: 2.5rem;
  position: relative;
}

.axa-score-container::after {
  content: '/100';
  font-size: 1rem;
  font-weight: 400;
  position: absolute;
  bottom: 20px;
  right: 15px;
}

/* Piliers de notation */
.axa-pilier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  background-color: var(--axa-white);
}

.axa-pilier-nom {
  font-weight: 600;
  color: var(--axa-gray-dark);
  text-transform: uppercase;
  font-size: var(--font-size-small);
}

.axa-pilier-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--axa-white);
  font-weight: 700;
  font-size: var(--font-size-small);
}

.axa-pilier-badge.grade-a { background-color: var(--axa-green-success); }
.axa-pilier-badge.grade-b { background-color: var(--axa-orange-warning); }
.axa-pilier-badge.grade-c { background-color: var(--axa-red-error); }
.axa-pilier-badge.grade-d { background-color: var(--axa-gray-medium); }

/* ==============================================
   FORMULAIRES
   ============================================== */

.elementor-field-group input,
.elementor-field-group select,
.elementor-field-group textarea,
.axa-form-field {
  font-family: var(--font-primary);
  padding: var(--spacing-sm);
  border: 2px solid #E0E0E0;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-body);
  transition: border-color 0.3s ease;
  width: 100%;
}

.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus,
.axa-form-field:focus {
  border-color: var(--axa-blue-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 143, 0.1);
}

.elementor-field-label {
  font-weight: 600;
  color: var(--axa-gray-dark);
  margin-bottom: var(--spacing-xs);
  display: block;
}

/* ==============================================
   ALERTES ET NOTIFICATIONS
   ============================================== */

.axa-alert {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-primary);
}

.axa-alert-success {
  background-color: var(--axa-green-light);
  color: #155724;
  border-left: 4px solid var(--axa-green-success);
}

.axa-alert-warning {
  background-color: var(--axa-orange-light);
  color: #856404;
  border-left: 4px solid var(--axa-orange-warning);
}

.axa-alert-error {
  background-color: var(--axa-red-light);
  color: #721c24;
  border-left: 4px solid var(--axa-red-error);
}

.axa-alert-info {
  background-color: var(--axa-blue-light);
  color: #004085;
  border-left: 4px solid var(--axa-blue-primary);
}

/* ==============================================
   NAVIGATION ET HEADER
   ============================================== */

.axa-header {
  background-color: var(--axa-white);
  border-bottom: 1px solid #E0E0E0;
  padding: var(--spacing-sm) 0;
}

.axa-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-lg);
}

.axa-nav-menu li a {
  color: var(--axa-gray-dark);
  text-decoration: none;
  font-weight: 500;
  padding: var(--spacing-sm);
  transition: color 0.3s ease;
}

.axa-nav-menu li a:hover {
  color: var(--axa-blue-primary);
}

.axa-nav-menu li.active a {
  color: var(--axa-blue-primary);
  font-weight: 600;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 768px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }
  
  .axa-card {
    padding: var(--spacing-md);
  }
  
  .axa-score-container {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
  }
  
  .axa-nav-menu {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* ==============================================
   UTILITAIRES ELEMENTOR
   ============================================== */

/* Conteneurs avec espacement AXA */
.elementor-section.axa-section-padding {
  padding: var(--spacing-xl) 0;
}

.elementor-column.axa-column-padding {
  padding: var(--spacing-md);
}

/* Classes d'aide pour les couleurs */
.axa-bg-primary { background-color: var(--axa-blue-primary); }
.axa-bg-secondary { background-color: var(--axa-blue-light); }
.axa-bg-success { background-color: var(--axa-green-light); }
.axa-bg-warning { background-color: var(--axa-orange-light); }
.axa-bg-gray { background-color: var(--axa-gray-light); }

.axa-text-primary { color: var(--axa-blue-primary); }
.axa-text-success { color: var(--axa-green-success); }
.axa-text-warning { color: var(--axa-orange-warning); }
.axa-text-error { color: var(--axa-red-error); }

/* Classes d'espacement */
.axa-mb-sm { margin-bottom: var(--spacing-sm); }
.axa-mb-md { margin-bottom: var(--spacing-md); }
.axa-mb-lg { margin-bottom: var(--spacing-lg); }
.axa-mt-sm { margin-top: var(--spacing-sm); }
.axa-mt-md { margin-top: var(--spacing-md); }
.axa-mt-lg { margin-top: var(--spacing-lg); }

/* ==============================================
   ÉLÉMENTS SPÉCIFIQUES AU PROJET
   ============================================== */

/* Questions du questionnaire */
.axa-question-block {
  background-color: var(--axa-white);
  border: 2px solid #E0E0E0;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  position: relative;
}

.axa-question-block.has-error {
  border-color: var(--axa-red-error);
}

.axa-question-points {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background-color: var(--axa-blue-primary);
  color: var(--axa-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-small);
  font-weight: 600;
}

/* Atouts citoyens */
.axa-atout-card {
  background-color: var(--axa-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-bottom: 4px solid var(--axa-green-success);
  margin-bottom: var(--spacing-sm);
}

.axa-atout-pilier {
  display: inline-block;
  background-color: var(--axa-blue-light);
  color: var(--axa-blue-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-small);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}