/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * Note: Tailwind CSS is loaded via CDN in the layout, so we don't import it here.
 */

/* Font Inter globale */
* {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Classes utilitaires pour Comic Neue */
.font-comic {
  font-family: 'Comic Neue', cursive, sans-serif;
}

.font-comic-bold {
  font-family: 'Comic Neue', cursive, sans-serif;
  font-weight: 700;
}

.font-comic-light {
  font-family: 'Comic Neue', cursive, sans-serif;
  font-weight: 300;
}

.font-comic-italic {
  font-family: 'Comic Neue', cursive, sans-serif;
  font-style: italic;
}

/* Couleurs personnalisées du site */
/* Bleu clair : #4B71C9 */
.bg-blue-light { background-color: #4B71C9; }
.bg-blue-light-50 { background-color: #E8EDF7; }
.bg-blue-light-100 { background-color: #D1DBEF; }
.bg-blue-light-200 { background-color: #A3B7DF; }
.bg-blue-light-300 { background-color: #7593CF; }
.bg-blue-light-600 { background-color: #476FBF; }
.bg-blue-light-500 { background-color: #4B71C9; }
.bg-blue-light-600 { background-color: #3C5AA1; }
.bg-blue-light-700 { background-color: #2D4379; }
.bg-blue-light-800 { background-color: #1E2C51; }
.bg-blue-light-900 { background-color: #0F1629; }

.text-blue-light { color: #4B71C9; }
.text-blue-light-50 { color: #E8EDF7; }
.text-blue-light-100 { color: #D1DBEF; }
.text-blue-light-200 { color: #A3B7DF; }
.text-blue-light-300 { color: #7593CF; }
.text-blue-light-400 { color: #476FBF; }
.text-blue-light-500 { color: #4B71C9; }
.text-blue-light-600 { color: #3C5AA1; }
.text-blue-light-700 { color: #2D4379; }
.text-blue-light-800 { color: #1E2C51; }
.text-blue-light-900 { color: #0F1629; }

.border-blue-light { border-color: #4B71C9; }
.border-blue-light-50 { border-color: #E8EDF7; }
.border-blue-light-100 { border-color: #D1DBEF; }
.border-blue-light-200 { border-color: #A3B7DF; }
.border-blue-light-300 { border-color: #7593CF; }
.border-blue-light-400 { border-color: #476FBF; }
.border-blue-light-500 { border-color: #4B71C9; }
.border-blue-light-600 { border-color: #3C5AA1; }
.border-blue-light-700 { border-color: #2D4379; }
.border-blue-light-800 { border-color: #1E2C51; }
.border-blue-light-900 { border-color: #0F1629; }

.hover\:bg-blue-light:hover { background-color: #4B71C9; }
.hover\:bg-blue-light-600:hover { background-color: #476FBF; }
.hover\:bg-blue-light-600:hover { background-color: #3C5AA1; }
.hover\:text-blue-light:hover { color: #4B71C9; }
.hover\:text-blue-light-400:hover { color: #476FBF; }
.hover\:text-blue-light-600:hover { color: #3C5AA1; }
.hover\:text-blue-light-700:hover { color: #2D4379; }

.focus\:ring-blue-light:focus { --tw-ring-color: #4B71C9; }
.focus\:border-blue-light:focus { border-color: #4B71C9; }

/* Bleu foncé : #081832 */
.bg-blue-dark { background-color: #081832; }
.bg-blue-dark-50 { background-color: #E6E9ED; }
.bg-blue-dark-100 { background-color: #CCD3DB; }
.bg-blue-dark-200 { background-color: #99A7B7; }
.bg-blue-dark-300 { background-color: #667B93; }
.bg-blue-dark-400 { background-color: #334F6F; }
.bg-blue-dark-500 { background-color: #081832; }
.bg-blue-dark-600 { background-color: #061328; }
.bg-blue-dark-700 { background-color: #050E1E; }
.bg-blue-dark-800 { background-color: #030914; }
.bg-blue-dark-900 { background-color: #02050A; }

.text-blue-dark { color: #081832; }
.border-blue-dark { border-color: #081832; }

.hover\:bg-blue-dark:hover { background-color: #081832; }

/* Positionnement du popover menu Services */
el-popover#desktop-menu-product {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem;
}