/* ===============================
   POLICES ET TYPOGRAPHIE GLOBALE
   =============================== */

/* Police d'écriture personnalisée */
.font-titre {
  font-family: "Exo 2", sans-serif;
}

.font-l_fr {
  font-family: "Exo 2", sans-serif;
}

.font-l_ar {
  font-family: Cairo, sans-serif;
}

/* Typographie responsive globale */
html {
  font-size: 14px; /* mobile par défaut */
}

body {
  font-family: "Exo 2", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* sx (petits écrans larges) */
@media (min-width: 480px) {
  html {
    font-size: 14px;
  }
}

/* sm */
@media (min-width: 640px) {
  html {
    font-size: 0.85rem;
  }
}

/* md */
@media (min-width: 768px) {
  html {
    font-size: 0.9rem;
  }
}

/* lg */
@media (min-width: 1024px) {
  html {
    font-size: 0.95rem;
  }
}

/* xl */
@media (min-width: 1280px) {
  html {
    font-size: 1rem;
  }
}

/* ===============================
   COULEURS PERSONNALISÉES PERMIA
   =============================== */

.text-permia-bleufonce { color: #082E54; }
.bg-permia-bleufonce { background-color: #082E54; }
.border-permia-bleufonce { border-color: #082E54; }

.text-permia-bleu { color: #0B3C6D; }
.bg-permia-bleu { background-color: #0B3C6D; }
.border-permia-bleu { border-color: #0B3C6D; }
.hover\:bg-permia-bleu:hover { background-color: #0B3C6D; }


.text-permia-bleu2 { color: #1E6DA9; }
.bg-permia-bleu2 { background-color: #1E6DA9; }
.border-permia-bleu2 { border-color: #1E6DA9; }
.hover\:bg-permia-bleu2:hover { background-color: #1E6DA9; }

.text-permia-bleuclair { color: #1FA6E0; }
.bg-permia-bleuclair { background-color: #1FA6E0; }
.border-permia-bleuclair { border-color: #1FA6E0; }

.text-permia-bleuclair2 { color: #d9e6f4; }
.bg-permia-bleuclair2 { background-color: #d9e6f4; }
.border-permia-bleuclair2 { border-color: #d9e6f4; }

.text-permia-overlay { color: #f9fbfd; } /*   #f8fafb  #f9fbfd */
.bg-permia-overlay { background-color: #f9fbfd; }
.border-permia-overlay { border-color: #f9fbfd; }
 
.text-permia-orange { color: #F36A21; }
.bg-permia-orange { background-color: #F36A21; }
.border-permia-orange { border-color: #F36A21; }
.hover\:bg-permia-orange:hover { background-color: #F36A21; }

.text-permia-orangehover { color: #E85F1A; }
.bg-permia-orangehover { background-color: #E85F1A; }
.border-permia-orangehover { border-color: #E85F1A; }
.hover\:bg-permia-orangehover:hover { background-color: #E85F1A; }


.text-permia-orangeclair { color: #FF8A3D; }
.bg-permia-orangeclair { background-color: #FF8A3D; }
.border-permia-orangeclair { border-color: #FF8A3D; }
.hover\:bg-permia-orangeclair:hover { background-color: #FF8A3D; }


.text-permia-orangeclair2 { color: #FFF2E8; }
.bg-permia-orangeclair2 { background-color: #FFF2E8; }
.border-permia-orangeclair2 { border-color: #FFF2E8; }
.hover\:bg-permia-orangeclair2:hover { background-color: #FFF2E8; }

.text-permia-orangefonce { color: #C84B14; }
.bg-permia-orangefonce { background-color: #C84B14; }
.border-permia-orangefonce { border-color: #C84B14; }
.hover\:bg-permia-orangefonce:hover { background-color: #C84B14; }

.text-permia-bg { color: #F5F7FA; }
.bg-permia-bg { background-color: #F5F7FA; }
.border-permia-bg { border-color: #F5F7FA; }

.text-permia-bgclair { color: #F2F4F7; }
.bg-permia-bgclair { background-color: #F2F4F7; }
.border-permia-bgclair { border-color: #F2F4F7; }

.text-permia-text { color: #1F2937; }
.bg-permia-text { background-color: #1F2937; }
.border-permia-text { border-color: #1F2937; }

.text-permia-muted { color: #6B7280; }
.bg-permia-muted { background-color: #6B7280; }
.border-permia-muted { border-color: #6B7280; }

.text-permia-gris { color: #6B7280; }
.bg-permia-gris { background-color: #6B7280; }
.border-permia-gris { border-color: #6B7280; }

.text-permia-gris1 { color: #374151; }
.bg-permia-gris1 { background-color: #374151; }
.border-permia-gris1 { border-color: #374151; }

.text-permia-success { color: #22C55E; }
.bg-permia-success { background-color: #22C55E; }
.border-permia-success { border-color: #22C55E; }

.text-permia-error { color: #EF4444; }
.bg-permia-error { background-color: #EF4444; }
.border-permia-error { border-color: #EF4444; }

/* ===============================
   UTILITAIRES ET COMPOSANTS
   =============================== */

/* Border radius personnalisé */
.rounded-permia {
  border-radius: 16px;
}

/* Box shadow personnalisé */
.shadow-card {
  box-shadow: 0 10px 25px rgba(11, 60, 109, 0.08);
}

/* Animations */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-blinkFast {
  animation: blink 0.3s infinite;
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Bouton Permia - Outline Bleu */
.btn-bleu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #1E6DA9;
  color: #1E6DA9;
  background-color: transparent;
  padding: 0.5rem 1.25rem;
  border-radius:2rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-bleu:hover {
  background-color: #1E6DA9;
  color: #ffffff;
  transform: translateY(-4px);
}

/* Bouton Permia - Outline Rouge */
.btn-rouge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #DC2626;
  color: #DC2626;
  background-color: transparent;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-rouge:hover {
  background-color: #DC2626;
  color: #ffffff;
  transform: translateY(-4px);
}

/* Bouton Permia - Primary (1) */
.btn-permia-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  background: linear-gradient(135deg, #0B3C6D 0%, #1E6DA9 100%);

  color: #ffffff;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;

  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  font-weight: 600;

  min-width: 10px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}

.btn-permia-primary:hover {
  background: linear-gradient(135deg, #0B3C6D 0%, #0B3C6D 100%);
  transform: translateY(-2px);
}

.btn-permia-primary2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;

  color: #1E6DA9;

  border: 2px solid transparent; /* 🔥 obligatoire */

  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #0B3C6D, #1E6DA9) border-box;

  padding: 0.4rem 0.8rem;
  border-radius: 9999px;

  font-weight: 600;
  transition: all 0.3s ease;

  min-width: 30px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}


.btn-permia-primary2:hover {
  background:
    linear-gradient(#F2F4F7, #F2F4F7) padding-box,
    linear-gradient(135deg, #0B3C6D, #1E6DA9) border-box;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.btn-permia-primary3 {
  display: inline-block;

  background: linear-gradient(135deg, #0B3C6D 0%, #1E6DA9 100%);
  color: #ffffff;

  border: none;

  font-weight: 700;
  padding: 0.5rem 0.5rem;

  border-radius: 9999px;

  transition: all 0.3s ease;
}

.btn-permia-primary3:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
}


/* Bouton Permia - Primary */
.btn-permia-primary-xs {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #0B3C6D 0%, #1E6DA9 100%);
  color: #ffffff;
  padding: 0.1rem 1rem;
  border-radius: 2rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.btn-permia-primary-xs:hover {
  background: linear-gradient(135deg, #0B3C6D 0%, #0B3C6D 100%);
  transform: translateY(-2px);
}


/* Bouton Permia - Bleu Foncé */
.btn-permia-bleu {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: #0B3C6D;
  color: #ffffff;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  font-size: 1rem;
  min-width: 70px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}

.btn-permia-bleu:hover {
  background-color: #082E54;
  transform: translateY(-2px);
}


/* Bouton Permia - Danger */
.btn-permia-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, #C2410C 0%, #F97316 100%);
  color: #ffffff;
  padding: 0.4rem 0.8rem;

  border-radius: 2rem;
  box-shadow: 0 10px 15px rgba(194, 65, 12, 0.35);
  transition: all 0.3s ease;
  font-size: 1rem;
  min-width: 30px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}

.btn-permia-danger:hover {
  background: linear-gradient(135deg, #C2410C 0%, #C2410C 100%);
  transform: translateY(-2px);
}

.btn-permia-danger2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;

  color: #F97316;

  border: 2px solid transparent; /* 🔥 obligatoire */

  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #C2410C, #F97316) border-box;

  padding: 0.4rem 0.8rem;
  border-radius: 9999px;

  font-weight: 600;
  transition: all 0.3s ease;

  min-width: 70px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}


.btn-permia-danger2:hover {
  background:
    linear-gradient(#F2F4F7, #F2F4F7) padding-box,
    linear-gradient(135deg, #C2410C, #F97316) border-box;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px lch(30.19% 51.63 32.04 / 0.2);
}

.btn-permia-danger-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;

  color: #F97316;

  border: 2px solid transparent; /* 🔥 obligatoire */

  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #C2410C, #F97316) border-box;

  padding: 0.2rem 0.2rem;
  border-radius: 9999px;

  font-weight: 600;
  transition: all 0.3s ease;

  justify-content: center; /* centre le texte si largeur plus grande */
}


.btn-permia-danger-min:hover {
  background:
    linear-gradient(#F2F4F7, #F2F4F7) padding-box,
    linear-gradient(135deg, #C2410C, #F97316) border-box;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px lch(30.19% 51.63 32.04 / 0.2);
}


/* Bouton Permia - Gray */
.btn-permia-gray {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
  color: #ffffff;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  box-shadow: 0 10px 15px rgba(166, 188, 218, 0.35);
  transition: all 0.3s ease;
  font-size: 1rem;
  min-width: 70px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}

.btn-permia-gray:hover {
  background: linear-gradient(135deg, #6B7280 0%, #6B7280 100%);
  transform: translateY(-2px);
}

.btn-permia-gray2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;

  color: #6B7280;

  border: 2px solid transparent; /* 🔥 obligatoire */

  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6B7280, #9CA3AF) border-box;

  padding: 0.4rem 0.8rem;
  border-radius: 9999px;

  font-weight: 600;
  transition: all 0.3s ease;

  min-width: 70px; /* 👈 largeur minimum */
  justify-content: center; /* centre le texte si largeur plus grande */
}

.btn-permia-gray2:hover {
  background:
    linear-gradient(#F2F4F7, #F2F4F7) padding-box,
    linear-gradient(135deg, #6B7280, #9CA3AF) border-box;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}