.page-header {
    background: linear-gradient(rgb(30 115 190 / 81%), rgb(0 86 168 / 52%)), url(../img/bg_cover.png) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bs-white);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--bs-white);
}


@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Style bouton listes */
.listes {
    background-color: #ff0101;
    color: white;
    width: 330px;
}
.listes:hover {
    background-color: #ff0103;
    animation: pulse 0.6s ease-in-out;
}

.btn-listes {
    background-color: #dd9c38;
    color: white;
    font-weight: bold;
    padding: 10px 50px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-size: 18px;
}

.btn-listes:hover {
    background-color: #c98a2f; /* légèrement plus foncé */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: white;
    text-decoration: none;
}

/* === Boîte principale présence obligatoire === */
.alert-presence {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(254, 198, 130);
    border: 3px solid #fec682;
    border-radius: 10px;
    padding: 15px 20px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    animation: borderFlash 1.5s infinite;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    gap: 15px;
}

/* === Icône d’information === */
.info-icon {
    font-size: 28px;
    color: #dd9c38;
    animation: iconBlink 1.2s infinite;
}

/* === Texte arabe stylé === */
.alert-presence .arabic {
    font-weight: bold;
    font-size: 17px;
    color: #000;
    font-family: "Cairo", "Amiri", sans-serif;
}

/* === Animation de l’icône === */
@keyframes iconBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.15); }
}

.blink {
    font-size: 10px;       /* texte très petit */
    color: #fec682;         /* couleur voyante */
    font-weight: normal;
    animation: flash 1s infinite;
}
.center-container{
      display: flex;
      align-items: center;        /* vertical */
      justify-content: center;    /* horizontal */
      min-height: 30px;
    }

    /* Le texte */
    .blink-date {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 0.25rem 0.5rem;
      border-radius: 6px;
      /* optionnel : petite bordure ou fond */
      /* border: 1px solid #ccc; */
      /* background: rgba(0,0,0,0.03); */
      animation: blink-animation 2s infinite; /* durée & répétition */
    }

    /* animation clignotante (douce) */
    @keyframes blink-animation {
      0%   { opacity: 1; transform: translateY(0); }
      50%  { opacity: 0; transform: translateY(-1px); }
      100% { opacity: 1; transform: translateY(0); }
    }

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

.title_page {
  border-left: 10px solid #008000;
  padding: 0 20px;
  color: #1f5793;
  margin-bottom: 30px;
}

.table-hover tbody tr:hover {
  background-color: #049cdb2e;
}
.table-primary {
  background-color: #cfe2ff;
}
.table-bordered th {
  background-color: #1f5793;
  color: white;
}

.custom-table tbody tr:nth-child(odd) {
  background-color: #dfe7f2; /* Bleu clair */
}
.custom-table tbody tr:nth-child(even) {
  background-color: white;
}

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-primary:hover{
  color: #1f5793 !important;
  background-color: #f8f8f8 !important;
}

.btn-bleu {
  color: #fff;
  background-color: #1f5793;
  border-color: #1f5793;
  width: 100%;
}
.btn-bleu:hover {
  color: #1f5793;
  background-color: #fff;
  border-color: #1f5793;
}

/* Police spécifique pour l'arabe */
[lang="ar"] {
  font-family: "Cairo", serif !important;
}

/* Sélecteur spécifique pour les caractères arabes */
h1:has( [lang="ar"] ), h2:has( [lang="ar"] ), h3:has( [lang="ar"] ),
h4:has( [lang="ar"] ), h5:has( [lang="ar"] ), h6:has( [lang="ar"] ),
h1:has(*:is([lang="ar"])), h2:has(*:is([lang="ar"])), h3:has(*:is([lang="ar"])),
h4:has(*:is([lang="ar"])), h5:has(*:is([lang="ar"])), h6:has(*:is([lang="ar"])), p:has(*:is([lang="ar"])) {
  font-family: "Cairo", sans-serif !important;
}

.cairo-<uniquifier> {
  font-family: "Cairo", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

.text-white { color: #fff; }

@media only screen and (max-width: 425px) {
  .emplois, .listes, .rosetta-stone. .aees{
    padding: 10px 5px;
    margin: 5px 5px !important;
    font-size: 13px !important;
  }
/* Style bouton emplois */
.emplois {
    width: 320px;
}
/* Style bouton listes */
.listes {
    width: 320px;
}
/* Style bouton rosetta-stone */
.rosetta-stone {
    width: 320px;
}
.aees {
    width: 320px;
}
}