@import url('https://fonts.googleapis.com/css2?family=Satisfy&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&family=Noto+Naskh+Arabic:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lateef:wght@200;300;400;500;600;700;800&family=Mirza:wght@400;500;600;700&family=Scheherazade+New:wght@400;500;600;700&display=swap');

:root {
   font-family: "Open Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-variation-settings: "wdth"100;
   font-size: 11pt;
}

body {
   background: #fff;
   font-weight: 400;
   font-size: 13pt;
   margin-top: 90px;
}

.link {
   text-decoration: none;
   color: #0d6efd;
}

.link:hover {
   color: #d33;
}

.labelBlue {
   font-size: 10pt;
   color: #0d6efd;
   font-weight: 500;
}

img {
   pointer-events: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-user-drag: none;
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
   user-drag: none;
}

#page-wrapper {
   min-height: 70vh !important;
}

/*
*	FONTS 
*/
.openSans {
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.satisfy {
   font-family: "Satisfy", cursive;
   font-weight: 400;
   font-style: normal;
}

.sofia {
   font-family: "Sofia Sans Condensed", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   direction: ltr;
}

.noto {
   font-family: "Noto Naskh Arabic", serif;
   font-optical-sizing: auto;
   font-style: normal;
   direction: ltr;
}

.mirza {
   font-family: "Mirza", serif;
   font-optical-sizing: auto;
   font-style: normal;
   direction: ltr;
}

.sherazad {
   font-family: "Scheherazade New", serif;
   font-optical-sizing: auto;
   font-style: normal;
   direction: ltr;
}

.lateef {
   font-family: "Lateef", serif;
   font-optical-sizing: auto;
   font-style: normal;
   direction: ltr;
}

.flashy {
   margin: -10px 10px 0;
   cursor: pointer;
}

.pabla {
   color: #1c5ed8;
   font-weight: bold;
   font-size: 18pt;
   margin: 3px 5px 0 10px;
   padding: 0 !important;
}

.pabla span {
   color: #0c2f70;
}

.pabla:hover {
   color: #0c2f70;
}

.pabla:hover>span {
   color: #1c5ed8;
}

.titre-page {
   color: #555;
}

.pointer {
   cursor: pointer;
}

.not-allowed {
   cursor: not-allowed;
}

.grady-blue {
   background: -webkit-linear-gradient(#86d1fc, #133470);
   background: -moz-linear-gradient(#86d1fc, #133470);
   background: -o-linear-gradient(#86d1fc, #133470);
   background: linear-gradient(#86d1fc, #133470);
   color: #fff !important;
}

.grady-bird {
   background: -webkit-linear-gradient(#3194fd, #0151a7);
   background: -moz-linear-gradient(#3194fd, #0151a7);
   background: -o-linear-gradient(#3194fd, #0151a7);
   background: linear-gradient(#3194fd, #0151a7);
   color: #fff !important;
}

.grady-red {
   background: -webkit-linear-gradient(#f00, #7c0000);
   background: -moz-linear-gradient(#f00, #7c0000);
   background: -o-linear-gradient(#f00, #7c0000);
   background: linear-gradient(#f00, #7c0000);
   color: #fff !important;
}

.grady-orange {
   background: -webkit-linear-gradient(#ffb223, #db8f02);
   background: -moz-linear-gradient(#ffb223, #db8f02);
   background: -o-linear-gradient(#ffb223, #db8f02);
   background: linear-gradient(#ffb223, #db8f02);
   color: #fff !important;
}

.grady-light {
   background: -webkit-linear-gradient(#fff, #ddd);
   background: -moz-linear-gradient(#fff, #ddd);
   background: -o-linear-gradient(#fff, #ddd);
   background: linear-gradient(#fff, #ddd);
}

.grady-dark {
   background: -webkit-linear-gradient(#777, #000);
   background: -moz-linear-gradient(#777, #000);
   background: -o-linear-gradient(#777, #000);
   background: linear-gradient(#777, #000);
   color: #fff !important;
}

.grady-green {
   background: -webkit-linear-gradient(#34d399, #065f46);
   background: -moz-linear-gradient(#34d399, #065f46);
   background: -o-linear-gradient(#34d399, #065f46);
   background: linear-gradient(#34d399, #065f46);
   color: #fff !important;
}

.shadow-light {
   box-shadow: rgba(0, 0, 0, 0.514) 0px 3px 8px;
}

.error-message {
   color: #f00;
   font-size: 11pt;
   margin-left: 5px;
}

.bx-icons>div {
   display: inline-block;
   vertical-align: top;
   width: 200px;
   margin-bottom: 5px;
}

.bx-icons>div>i {
   margin-right: 10px;
   font-size: 23pt !important;
   font-weight: 100 !important;
   color: #3d73b9;
}

.bx-icons>div>span {
   font-size: 10pt !important;
   color: #aaa;
}

.inputsForm {
   border: none;
   background: transparent;
   width: 100%;
   outline: none;
   border-radius: 0 !important;
}

.inputsForm:focus {
   color: #000 !important;
   background: #bbbbbb91;
}

.btn-action {
   display: inline-block;
   color: #3d73b9;
   text-decoration: none;
   transition: color 0.3s ease;
}

.btn-action:hover {
   transform: scale(1.1);
   color: #ffaf37;
}

.btn-action i {
   font-size: 1.7em;
   transition: color 0.3s ease;
}

.cardTheme {
   display: inline-block;
   vertical-align: top;
   width: 300px;
   margin: 0 10px 20px 0;
   text-align: left;
}

.cardTheme img {
   width: 100%;
}

.cardTexteTheme {
   font-size: 11pt;
   color: #777;
}

.footer {
   color: #fff;
   box-shadow: 0 -5px 10px #ddd;
}

.saisieArabic {
   direction: rtl;
   font-family: "Sofia Sans Condensed", sans-serif;
   font-size: 28px !important;
   line-height: 10px;
   padding: 2px 8px;
}

.formatArabic {
   direction: rtl;
   font-size: 28px !important;
   line-height: 10px;
   padding: 2px 8px;
}

.div-counter {
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.counter {
   font-size: 4rem;
   color: #fff;
   text-shadow: 2px 2px 4px #333;
}

.majuscule {
   color: #ff3131;
   font-size: 18pt;
}

.mat {
   font-size: 11pt;
   font-style: italic;
   margin-top: 5px;
}

.mat span {
   color: #ff3131;
}

.linkWeb {
   text-decoration: none;
   color: #fff;
   transition: all .4s;
   display: block;
}

.linkWeb:hover {
   color: #0ff;
   margin-left: 40px;
   transform: scale(1.1);
}

.DZSIL {
   color: #0ff;
   text-decoration: none;
   transition: all .4s;
}

.DZSIL:hover {
   color: #ff0;
}

.illustrationTheme {
   height: 215px;
   background: -webkit-radial-gradient(#fff, #3194fd);
   background: -moz-radial-gradient(#fff, #3194fd);
   background: -o-radial-gradient(#fff, #3194fd);
   background: radial-gradient(#fff, #3194fd);
}

.checkFormWeb {
   width: 23px !important;
   height: 23px !important;
   vertical-align: middle;
   cursor: pointer;
}

.isGood {
   color: green !important;
}

.isNoGood {
   color: red !important;
}

.btn-index3 {
   width: 100%;
   text-decoration: none;
   vertical-align: middle !important;
   display: inline-block;
   transition: all .2s;
   border: 1px solid #ccc !important;
   background: -webkit-linear-gradient(#fff, #ddd);
   background: -moz-linear-gradient(#fff, #ddd);
   background: -o-linear-gradient(#fff, #ddd);
   background: linear-gradient(#fff, #ddd);
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.btn-index3 i {
   vertical-align: middle !important;
   background: -webkit-linear-gradient(#86d1fc, #133470);
   background: -moz-linear-gradient(#86d1fc, #133470);
   background: -o-linear-gradient(#86d1fc, #133470);
   background: linear-gradient(#86d1fc, #133470);
   color: #fff !important;
}

.btn-index3 div {
   display: inline-block;
   font-size: 14pt;
   padding-left: 7px;
   vertical-align: middle;
}

.btn-index3 span {
   float: right;
   margin-right: 7px;
   color: #0c2f70;
   font-weight: 500;
}

.btn-index3:hover {
   transform: scale(.97);
   cursor: pointer;
   color: #d00;
   font-weight: 500;
}

.catalogue-img {
   width: 90px;
   height: 65px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   background: #fff;
   border-radius: 5px;
}

.scaled,
.scale-in {
   transition: all .3s;
}

.scaled:hover {
   transform: scale(1.5);
}

.scale-in:hover {
   transform: scale(.95);
   border-color: #999 !important;
}

.cardExo {
   display: inline-block;
   margin: 2px !important;
   width: 30%;
   transition: all .2s;
}

.cardExo:hover {
   border-color: #0151a7 !important;
   cursor: pointer;
   transform: scale(.97);
}

.cardExo img {
   width: 100%;
}

.griser {
   filter: grayscale(100%);
   opacity: 0.5;
}

.noClic {
   pointer-events: none;
}

.btn-nav-pabla {
   border: 1px solid #ddd;
   padding: 15px 10px;
   border-radius: 5px;
   width: 100%;
   max-width: 220px;
   background: transparent;
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   transition: all .4s !important;
   text-decoration: none;
   color: #0d6efd;
}

.btn-nav-pabla:hover {
   background: linear-gradient(#f4faff, #91d7ff);
   border: 1px solid #09538f;
   color: #00345f;
   transform: scale(.95) !important;
}

.btn-nav-pabla img {
   width: 6vw;
   min-width: 70px;
   height: auto;
   display: block;
   margin: 0 auto 5px;
}

.btn-nav-pabla-grey {
   background: linear-gradient(#fffdfa, #ffefdd);
}

/*Profile Card 3*/
.profile-card-3 {
   font-family: 'Open Sans', Arial, sans-serif;
   position: relative;
   float: left;
   overflow: hidden;
   width: 100%;
   text-align: center;
   height: 368px;
   border: none;
}

.profile-card-3 .background-block {
   float: left;
   width: 100%;
   height: 200px;
   overflow: hidden;
}

.profile-card-3 .background-block .background {
   width: 100%;
   vertical-align: top;
}

.profile-card-3 .card-content {
   width: 100%;
   padding: 15px 15px 0;
   color: #232323;
   float: left;
   height: 50%;
   border-radius: 0 0 5px 5px;
   position: relative;
   z-index: 2;
}

.profile-card-3 .card-content::before {
   content: '';
   background: linear-gradient(.50turn, #fff 25%, #aaa);
   width: 150%;
   height: 150%;
   left: -50px;
   bottom: -30px;
   position: absolute;
   z-index: -1;
   transform: rotate(-13deg);
}

.profile-card-3 .profile {
   border-radius: 50%;
   position: absolute;
   bottom: 50%;
   left: 50%;
   max-width: 130px;
   opacity: 1;
   box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
   border: 2px solid rgba(255, 255, 255, 1);
   -webkit-transform: translate(-50%, 0%);
   transform: translate(-50%, 0%);
   z-index: 3;
   background: linear-gradient(#fff, #aaa);
   padding: 5px;
}

.avatarConnected {
   height: 70px;
   border: 1px solid #777;
   background: #fff;
   border-radius: 50%;
   padding: 5px;
   margin: 0 15px;
}

#colonne1,
#colonne2 {
   overflow-y: scroll;
   height: 470px;
}

.assoCard {
   border: 1px solid #ddd;
   border-radius: 5px;
   padding: 8px;
   margin-bottom: 5px;
   background: #eee;
   text-align: center;
   font-size: 27pt;
   font-family: "Scheherazade New", serif;
   height: 11vh;
   line-height: 11vh;
   padding: 5px;
   transition: all .3s;
}

.assoCard:hover {
   cursor: pointer;
   background: #fff;
   border: 1px solid #aaa;
   transform: scale(.95);
}

.assoCard img {
   height: 100%;
   margin-top: -15px;
}

.caseRoulette {
   text-align: center;
   font-size: 35pt !important;
   font-family: "Scheherazade New", serif;
}

.gallery-item {
   position: relative;
   display: inline-block;
   overflow: hidden;
   cursor: pointer;
   margin: 20px 30px;
   border: 1px solid #aaa;
   border-radius: 5px;
   padding: 5px;
   max-width: 120px;
   max-height: 160px !important;
}

.gallery-item img {
   max-width: 100%;
   height: 150px;
   transition: transform 0.3s ease;
   border-radius: 5px;
}

.gallery-item:hover img {
   transform: scale(1.1);
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   opacity: 0;
   transition: opacity 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 15pt;
}

.gallery-item:hover .overlay {
   opacity: 1;
}

.zoom-gallery {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.zoom-gallery.visible {
   visibility: visible;
   opacity: 1;
}

.zoom-image {
   max-width: 90%;
   max-height: 90%;
   border-radius: 5px;
}

#civilite {
   display: none;
}

.letter-box {
   flex: 0 0 60px !important;
   width: 60px !important;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

.letter-box:hover {
   height: 65px;
   box-shadow: inset rgba(83, 83, 83, 0.25) 0px 3px 6px, inset rgba(78, 78, 78, 0.35) 0px 3px 6px;
}


/*-----------------------------------------------
 	STYLES POUR L'IMPRESSION 
-----------------------------------------------*/
@media print {
   body {
      padding: 0;
      margin: 0;
   }

   .no-print {
      display: none !important;
   }

   @page {
      size: A4;
      margin: 10mm;
   }
}

/*-----------------------------------------------
    RUBAN
-----------------------------------------------*/
.ribbon {
   position: absolute;
   left: -5px;
   top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 130px;
   height: 130px;
   text-align: right;
}

.ribbon span {
   font-size: 11pt;
   padding: 7px 0;
   color: #fff;
   text-align: center;
   line-height: 17px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   width: 200px;
   display: block;
   background: -webkit-linear-gradient(#ffe463, #ed3700);
   background: -moz-linear-gradient(#ffe463, #ed3700);
   background: -o-linear-gradient(#ffe463, #ed3700);
   background: linear-gradient(#ffe463, #ed3700);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0);
   position: absolute;
   border-top: 2px solid #fff;
   border-bottom: 2px solid #fff;
   top: 21px;
   right: -21px;
   font-weight: 500;
}

.ribbon-sm {
   font-size: 14px;
   font-weight: bold;
   color: #ff0000;
   text-align: center;
   width: 120px;
}

.ribbon-sm {
   --f: .7em;
   position: relative;
   top: -7px;
   left: -15px;
   line-height: 1.9;
   padding-bottom: var(--f);
   border-image: conic-gradient(#0008 0 0) 51%/var(--f);
   clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
   transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
   transform-origin: 100% 100%;
   background: #ffe23d;
}

.cardHourouf {
   display: inline-block;
   vertical-align: top;
   width: 100px;
   background: #fff;
   text-align: center;
   margin: 5px 2px;
}

.cardHourouf section {
   cursor: pointer;
   transition: all .3s;
   border: 2px solid #fff;
   color: #333;
}

.cardHourouf section:hover {
   transform: scale(.9);
   border: 2px solid #3b74b4;
   color: #cf0a0a;
   font-weight: 500;
}

/*-----------------------------------------------
    LOADER
-----------------------------------------------*/
#Wait {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   min-height: 100vh;
   text-align: center;
   width: 100%;
   color: #00d;
}

#Wait section {
   margin: 40vh auto 0;
}

#Wait section div {
   font-weight: 600;
}

#Wait section span {
   color: #777;
}

.Div_loader {
   width: 120px;
   height: 120px;
   margin: 20px auto;
}

.Div_loader img {
   position: absolute;
   width: 110px;
   margin: 20px 0 0 -55px;
   z-index: 5;
}

.loader {
   border: 1px solid #aaa;
   border-radius: 50%;
   border-top: 2px solid #00d;
   width: 120px;
   height: 120px;
   -webkit-animation: loader_spin 1s linear infinite;
   -moz-animation: loader_spin 1s linear infinite;
   -o-animation: loader_spin 1s linear infinite;
   animation: loader_spin 1s linear infinite;
   background: -webkit-radial-gradient(#fff 50%, #aaa);
   background: -moz-radial-gradient(#fff 50%, #aaa);
   background: -o-radial-gradient(#fff 50%, #aaa);
   background: radial-gradient(#fff 50%, #aaa);
}

@-webkit-keyframes loader_spin {
   0% {
      -webkit-transform: rotate(360deg);
   }

   100% {
      -webkit-transform: rotate(0deg);
   }
}

@-moz-keyframes loader_spin {
   0% {
      -moz-transform: rotate(360deg);
   }

   100% {
      -moz-transform: rotate(0deg);
   }
}

@-o-keyframes loader_spin {
   0% {
      -o-transform: rotate(360deg);
   }

   100% {
      -o-transform: rotate(0deg);
   }
}

@keyframes loader_spin {
   0% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/*-----------------------------------------------
	TIMELINE
-----------------------------------------------*/
/* Container principal */
.timeline-container {
   position: relative;
}

/* Wrapper de la timeline */
.timeline-wrapper {
   position: relative;
   padding: 2rem 0;
}

/* Ligne de la timeline */
.timeline-line {
   position: absolute;
   background-color: #0d6efd;
   z-index: 1;
}

/* Conteneur des événements */
.timeline-events {
   display: flex;
   flex-direction: column;
   position: relative;
   z-index: 2;
}

/* Événement individuel */
.timeline-event {
   margin-bottom: 2rem;
   position: relative;
}

/* Carte d'événement */
.event-card {
   background: white;
   border-radius: 0.5rem;
   padding: 1.5rem;
   position: relative;
   transition: transform 0.3s ease;
}

.event-card:hover {
   transform: translateY(-5px);
}

/* Icône d'événement */
.event-icon {
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
}

.event-icon i {
   margin-top: -5px;
}

/* Date d'événement */
.event-date {
   font-weight: 600;
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
}

/* Version Desktop (horizontale) */
@media (min-width: 992px) {
   .timeline-line {
      height: 4px;
      width: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .timeline-events {
      flex-direction: row;
      justify-content: space-between;
   }

   .timeline-event {
      width: 30%;
      margin-bottom: 0;
   }
}

/* Version Mobile (verticale) */
@media (max-width: 991.98px) {
   .timeline-line {
      width: 4px;
      height: 80%;
      top: 10%;
      left: 2rem;
   }

   .timeline-event {
      padding-left: 4rem;
   }

   .event-icon {
      position: absolute;
      left: -1rem;
      top: 0;
   }
}

/*-----------------------------------------------
	PADDLE
-----------------------------------------------*/
#padAbjadiya,
#padHouroufs,
#padHarakates,
#padControls {
   direction: rtl;
   margin-top: 10px;
}

.btn-paddle {
   min-width: 3.7rem;
   margin-bottom: 4px;
   padding: 3px 0;
   font-size: 30pt !important;
   font-family: "Lateef", serif;
   border: 1px solid #bbb;
   border-radius: 5px;
   transition: all .4s;
}

.btn-paddle:hover {
   color: #d00;
   border: 1px solid #d00;
   background: #fff;
   transform: scale(1.09);
}

.btn-paddle-abjadiya {
   background: linear-gradient(#fff, #ddd);
}

.btn-paddle-hourouf {
   background: linear-gradient(#fff, #dcefff);
}

.btn-paddle-harakate {
   background: linear-gradient(#fff, #ffdcdc);
}

#paddleDisplay {
   direction: rtl;
   text-align: right;
   font-family: "Scheherazade New", serif;
   font-size: 30pt !important;
   height: 90px;
   line-height: 80px;
}

.writing-area {
   font-size: 110pt !important;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   font-family: 'Scheherazade', serif;
   z-index: 3;
}

.writing-area::before {
   content: "";
   position: absolute;
   left: 6%;
   right: 6%;
   top: 41%;
   border-bottom: 1px dashed #aaa;
   z-index: -1;
   /* première ligne */
}

.writing-area::after {
   content: "";
   position: absolute;
   left: 6%;
   right: 6%;
   top: 62%;
   border-bottom: 1px solid #60b2d9;
   z-index: -1;
   /* deuxième ligne */
}

.writing-area .line3 {
   position: absolute;
   left: 6%;
   right: 6%;
   top: 83%;
   border-bottom: 1px dashed #aaa;
   z-index: -1;
   content: "";
   /* Troisième ligne */
}

.harakete-disabled {
   opacity: 0.5;
   cursor: not-allowed;
}