/*** 

====================================================================
	adds
====================================================================
 color table back
 color table 
 color tabletr
 color tabletd
 
 
 ***/

.imageInNotif {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto; /* center the container itself if needed */
  background-color: transparent;
}

.imageInNotif img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}



 
 .disabled-div {
  pointer-events: none;   /* Prevents mouse interaction */
  opacity: 0.5;           /* Optional: makes it look inactive */
  user-select: none;      /* Prevents text selection */
}

#more {display: none;}
.CursorHand {cursor: hand;}
.lienLight {color: #E3CD8B;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),0 0 10px #E3CD8B; font-weight: bold; }.lienLight:hover{color: rgb(68, 47, 8);text-shadow: 0 0 10px #E3CD8B, 0 0 20px #E3CD8B; }
.lienDark {color: red;cursor: hand;text-shadow: 0 0 10px #E3CD8B, 0 0 20px #E3CD8B; }.lienDark:hover {color: rgba(26, 13, 0,0.7);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),0 0 10px #E3CD8B; font-weight: bold; }

.padding20{padding: 20px;}
 
.CssFaute{text-align: center;color: rgba(26, 13, 0,0.9);font-weight:700;}
.CssQuoteLight{color:#ebcda7 ;	 text-align: center;font-weight:700;}
.CssQuoteDark{color: color: rgba(68, 47, 8,0.8); text-align: center;font-weight:700;}.CssQuoteDark:hover{color: #E3CD8B;}
 
.fancy-list {
  line-height: 1.6; 
  text-align: right;
  list-style: disc;
  list-style-position: outside;
  font-size: clamp(18px, 2.5vw, 26px);

  padding-right: 1.5em; /* 👈 Changed from 0 */
  margin: 20px 0;
  /*padding-left: 0;
   ... other styles ... */
}
.fancy-list li {
  position: relative;
  padding-right: 1.5em; /* Space for custom bullet */
  list-style: none; /* Hide default bullet */
}
.fancy-list li::before {
  content: "•";
  position: absolute;
  right: 0;
  color: white;
}
.fancy-list ul {
  margin-right: 40px;
}
.fancy-list ul ul {
  margin-right: 60px;
}
.clignote {color: yellow;animation: clignoter 1s linear infinite;}@keyframes clignoter {0%, 100% { opacity: 1; }50% { opacity: 0; }}
#notification-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #BC9558;
    color: white;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    font-size: clamp(18px, 2.5vw, 26px);/*18px*/
    z-index: 9999;
	text-align: center;
}
#notification-box::before{
	left: 0px;
	top: 0px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Ensure solid style */	
position: absolute;  
content: "\f0f3"; 
 width: 25px; height: 30px;  
-webkit-transition: 2s all ease;  transition: .2s all ease;	
}
.colorBrown1 {color: #473c2f;}.backgroundBrown1{background: #473c2f;}
.colorBrown2 {color: #806e58;}.backgroundBrown2{background: #806e58;}
.colorBrown3 {color: #c7b49b;}.backgroundBrown3{background: #c7b49b;}
.colorBrown4 {color: #ebcda7;}.backgroundBrown4{background: #ebcda7;}
.colorBrown6 {color: #BC9558;}.backgroundBrown6{background: #BC9558;}
.colorBrown7 {color: rgb(68, 47, 8);}
.colorGold {color: #E3CD8B;}.backgroundGold {background: #E3CD8B;}
.colorGoldSombre{color: rgba(26, 13, 0,0.9);}.backgroundGoldSombre{background: rgba(26, 13, 0,0.9);}
.colorBlack {color: 000;}
.colorYellow {color: yellow;}
.colorWhite {color: white;}
.colorBlack {color: black;}
.padding10all{padding: 10px;}
.paddingHautEtBas{padding-top: 30px;padding-bottom: 30px;}


/* deb carousel */
			.slideshow-container {  max-width: 100%;  position: relative;  margin: 3vh;}
			.mySlides {width: 100%;    display: none;}
			.mySlides_show {  display: block;}
			
	
			.mySlides_text {  width:100%;  height: 400px; box-shadow: 0 0 15px black;  color: #f2f2f2;  background-color: rgba(0,0,0, .4);  font-size: clamp(18px, 2.5vw, 26px);/*2.5vw*/  padding: 8px 15px;  position: absolute;  bottom: 5px;  right: 0;  text-align: center;}
			.numbertext {  color: #f2f2f2;  font-size: clamp(18px, 2.5vw, 26px);/*2.5vw;*/  padding: 8px 12px; position: absolute;  top: 0;}
			#dots-cont { width: 100%; display: flex;  justify-content: center;}
			.mySlides_dot { cursor: pointer;  height: 2.5vw;  width: 2.5vw; margin: 0 10px;  background-color: #bbb;  border-radius: 50%;  display: inline-block;  transition: background-color 0.3s ease;}
			.mySlides_active, .mySlides_dot:hover {  background-color: #444;}
			.mySlides_fade {  -webkit-animation-name: fade;  -webkit-animation-duration: .3s;  animation-name: fade;  animation-duration: .3s;}
			@-webkit-keyframes mySlides_fade {  from {opacity: .6}  to {opacity: 1}}
			@keyframes mySlides_fade {  from {opacity: .6}  to {opacity: 1}}
			#slider {  width: 65px;  height: 40px;  background-color: #ddd;  padding: 5px;  box-shadow: inset 0 0 3px black;}
			#slider::before {  position: absolute;  content: "";  width: 25px; height: 30px;  background-color: #444;  box-shadow: 0 0 1px black;  -webkit-transition: 2s all ease;  transition: .2s all ease;}
/* fin carousel */


.background1 	{background-image: url(../images/background/555.jpg);background-size: cover; background-position: center; background-repeat: no-repeat;}
.background2 	{background-image: url(../images/background/666.jpg);background-size: cover; background-position: center; background-repeat: no-repeat;}
.background3 	{background-image: url(../images/background/777.jpg);background-size: cover; background-position: center; background-repeat: no-repeat;}
.background4 	{background-image: url(../images/main-slider/po1.jpg);background-size: cover; background-position: center; background-repeat: no-repeat;}
.background5 	{background-image: url(../images/main-slider/5.jpg);background-size: cover; background-position: center; background-repeat: no-repeat;}
.background6 	{background-image: url(../images/backsound.png);background-size: cover; background-position: center; background-repeat: no-repeat;}

.font40{font-size: clamp(18px, 2.5vw, 26px);/*40px*/line-height: 1.5;}
.font26{font-size: clamp(18px, 2.5vw, 26px);/*26px*/line-height: 1.5;}
.font22{font-size: clamp(18px, 2.5vw, 26px);/*22px*/line-height: 1.5;}
.font18{font-size: clamp(18px, 2.5vw, 26px);/*16px;*/line-height: 1.5;}
.fontBold{font-weight: bold;}
.center			{text-align: center;}
.left			{text-align: left;}
.right			{    direction: rtl; /* Set the text direction to right-to-left */
            unicode-bidi: isolate;

}

.aa{padding-left: 10px; padding-right: 10px;color: yellow;}
.aa:hover{box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3),inset -3px -3px 5px rgba(255, 221, 170, 0.4);font-weight:700;color: yellow;}

/* texte clignotant */ 
.texte-clignotant {animation: effet-clignotant 0.5s infinite;font-size: clamp(18px, 2.5vw, 26px);/*3vw;*/font-weight: bold;}@keyframes effet-clignotant {0%, 100% { visibility: visible; } 50% { visibility: hidden; }}
/* fin texte clignotant */ 



.sculpted-brown {
  background: #996633;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 
    inset 3px 3px 5px rgba(0, 0, 0, 0.3),
    inset -3px -3px 5px rgba(255, 221, 170, 0.4);
  border-radius: 6px;
  color: #fff8e6; /* Light cream text for contrast */
  padding: 20px;
}

.sculpted-brown-dark {
  background: #884422; /* Darker base */
  border: none;
  border-radius: 8px;
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.4),
    inset -4px -4px 8px rgba(204, 153, 102, 0.3);
  color: #ffeedd;
}
.sculpted-brown-light {
  background: #E3CD8B;
  border: 1px solid rgba(153, 102, 51, 0.5);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.2),
    inset -2px -2px 4px rgba(255, 234, 204, 0.3);
}
.brown-container {
  background: linear-gradient(145deg, #aa7744, #774422);
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.2),
    -2px -2px 5px rgba(255, 221, 170, 0.1);
}



















.center-screen-box {top; 100px;height: 50px; width: 100%;background: transparent;padding: 0 auto; margin: 0 auto;}






.div-in-bottom{
    position: absolute;
    bottom: 0; /* Lock at the bottom */
    left: 0;
    height: 48px;
	width: 100%; /* Full width */
    background-color: #dfb162;
    text-align: center;
    padding: 10px;
	border-radius: 0 0 10px 10px; /* Rounded bottom corners */
	font-weight:700;
	cursor: hand;
	font-size: clamp(18px, 2.5vw, 26px);/*1em;*/
}


.div-in-bottom:hover {  background:  brown;color: #E3CD8B;    transition: all 0.4s ease-in-out;}

 /* card 2 */ 
			.card2-body { width: 100%;display: grid;  background: #E3CD8B;font-family: 'Tajawal', sans-serif;color:white; }
 			.card2-container {  
				position: relative;  margin: auto;  overflow: hidden;  width: 70%;  text-align: center; background: #806e58;  border-radius: 10px;
				opacity: 0.8; animation: fadeIn .1s ease-in-out forwards;box-shadow: 5px 5px 15px rgba(186, 126, 126, 0.4);
			}
			.card2-hr {position:relative; left: 5%;right: 5%;width: 90%;border: none;height: 1px;background: linear-gradient(to right, #E3CD8B, rgba(26, 13, 0,0.5));margin: 20px 0;}
			.card2-shadow{box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);}
			@keyframes fadeIn {from {opacity: 0.8;}to {opacity: 1;}}			
			.card2-div {display: flex;width: 100%;align-items: center; justify-content: center;
			color: #E3CD8B;text-align: center;font-size: clamp(18px, 2.5vw, 26px);/*1.8vw;*/}
			.left-span {flex: 1;}
			.right-span {width: 100px; }
			
			.card2-h1 { font-size: clamp(18px, 2.5vw, 26px);/*2.5vw;*/  color: #E3CD8B;  text-align: center;width: 100%;}
			.card2-h2 {  color: #E3CD8B; }

			.card2-button {margin-top: 10px; background: transparent;color: #E3CD8B;  padding: 10px;  display: inline-block;  outline: 0;  border: 0;  margin: -1px;  border-radius: 2px;  color: white;  cursor: pointer;}
			.card2-button:hover {  background: rgba(26, 13, 0,0.9);color: white;    transition: all 0.4s ease-in-out;}
			.card2-pick {  margin-top: 11px;  margin-bottom: 0;  margin-left: 20px;}
.text-poesie-right{position: relative; float: right;text-align: right;display: inline-block;font-weight: bold;}
.text-poesie-left{position: relative; float: left;right: 90px; text-align: left;display: inline-block;font-weight: bold;}

			@media screen and (max-width: 600px){.card2-container {width: 90%;  max-width: 90%;}.card2-div{font-size: clamp(18px, 2.5vw, 26px);/*20px;*/}.card2-h1 {font-size: clamp(18px, 2.5vw, 26px);/*22px;*/} }

			.mySlides_prev{  left: 0; }
			.mySlides_next {  right: 0;  border-radius: 15px 0 0 15px;}

			.mySlides_prev, .mySlides_next { vertical-align: top; padding-bottom:  30px;
			height:100%;
			cursor: pointer;  position: absolute;    width: auto;  margin-top: 0px;  padding: 16px;  color: white;  font-weight: bold; 
			font-size: clamp(18px, 2.5vw, 26px);/*2vw;*/  transition: 0.6s ease;  border-radius: 0 3px 3px 0;  user-select: none;}
			.mySlides_prev:hover, .mySlides_next:hover {  background-color: rgba(255, 255, 255, 0.2);}
			.card2-button-text{position: relative;top: -15px;}

 /* fin card 2 */ 
			.span_button {  
			cursor: pointer;  position: absolute;   width: auto;  margin-top: 0px;
			transition: 0.6s ease;  border-radius: 0 3px 3px 0;  user-select: none;
			margin-bottom: 40px;
			padding-bottom: 16px;  
			left: 20px;
			}
			.span_button:hover{ color: rgb(68, 47, 8);}
			.span_button a{color: rgba(26, 13, 0,0.7);text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);font-size: clamp(18px, 2.5vw, 26px);/*19px;*/  font-weight: bold; }
			.span_button a:hover{color: rgb(68, 47, 8);text-shadow: 0 0 10px #ff7e5f, 0 0 20px #feb47b;font-size: clamp(18px, 2.5vw, 26px);/*20px;*/ }

    .basic-text-shadow{ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
    .glowing-text-shadow{ text-shadow: 0 0 10px #ff7e5f, 0 0 20px #feb47b;}
    .embossed-text-shadow{ text-shadow: 2px 2px 0px #999, -2px -2px 0px #fff;}
 
.section-adds{
	text-align: center;
	position:relative;
	padding: 50px 20px 20px;
	background-color:#dfb162;
    display: table;
    width: 100%;
}
.section-adds .centered-object {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.centered-container {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering (optional) */
}

.centered-box {
  width: 33%; 
  max-width: 33%;
  padding: 20px;
}
@media screen and (max-width: 600px){.centered-container {display: block;}.centered-box {width: 100%;  max-width: 100%;}}

.shadowed{box-shadow:  0 0 5px 5px rgb(236,188,98);}/*E3CD8B  ecbc62*/
.shadowed2{box-shadow: 0 0 5px 5px #BC9558;} 

.cadre80{widht: 80%;}

.paddingTop50{padding-top: 150px;}

.paddingTopTrue50{padding-top: 50px;}
.paddingLeftRight50{padding-left: 50px;padding-right: 50px;}

.buttonTransparent{padding-left: 25px;padding-right: 25px;background-color: transparent;}




.floatcenter	{float: center;text-align: center;}

/*nouveaux */ 
.image200 {text-align: center;width: 200px;height: 300px; }

.list-image {text-align: center;width: 100px;height: 60px; }
.list-text {text-align: center;  color: white;}

.AccordeonWrap				{margin: 50px auto;width: 60%;text-align:right;}
.AccordeonList 				{background: #806e58;padding: 0;font-size: clamp(18px, 2.5vw, 26px);/*18px;font-size: 1.125rem;*/list-style: none;}
.AccordeonList li a 		{background: #65542F;color: #fff;display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.2);border-top: 1px solid rgba(255, 255, 255, 0.2);text-decoration: none;text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);filter: dropshadow(color=#000, offx=1, offy=0);padding: 10px;padding-left: 20px;}
.AccordeonList li a:hover 	{background: red;color: #000;}

.AccordeonItem 				{margin: 0;padding: 0;height: 0;overflow: hidden;listAccordeon-style: none;transition: 1s;}
.AccordeonItem li a 		{background: #ecbc62;color: #000;font-size: clamp(18px, 2.5vw, 26px);/*14px;font-size: 0.875rem;*/text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.5);filter: dropshadow(color=#000, offx=1, offy=0);}
.AccordeonItem li a:hover 	{background: #fcf5e8;height: 100px; }
.AccordeonList li:hover ul 	{height: 100px;overflow: hidden;}
.AccordeonList li div{ display: flex;align-items: center; height: 60px; justify-content: flex-end; color: white;}

@media screen and (max-width: 760px){
	.imageshadow60 {width:25%px;height:25%px;}
	.AccordeonWrap{width: 70%;right: 300px;text-align:right;}
}
	
.LiAsA{background: #9c897c;color: #fff;display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.2);border-top: 1px solid rgba(255, 255, 255, 0.2);text-decoration: none;text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);filter: dropshadow(color=#000, offx=1, offy=0);padding: 10px;padding-left: 20px;}} 
.LiAsA:hover 	{background: #d9c1b2;color: #000;}
.parent_div {
	background-color:#dfb162;

    width: 100%;
  margin: 0 auto; /* This centers the div itself horizontally if it's a block element */
  display: flex;
  flex-direction: column; /* Stack children vertically (default) */
  align-items: center; /* Center children horizontally */
  justify-content: center; /* Center children vertically (if you want vertical centering too) */
  
  /* Optional: Add some padding if needed */
	padding:100px 20px 20px;
  
  /* Optional: Add a border or background to visualize the div */
  box-sizing: border-box; /* Include padding and border in width calculation */
}
.imageshadow {position:relative;width:100%;border-radius:7px;display:block;}
.imageshadow:hover {opacity:0.7;display:block;}

.imageshadow60 {position:relative;min-width:80px;width:80px;height: 80px;border-radius:7px;
  display: inline-block; /* Changed from block to inline-block */
  vertical-align: middle; /* Aligns the image properly with text */

}
.imageshadow60:hover {box-shadow: 0 0 5px 5px;	opacity:0.7;display:block;}

.max_width_600{text-align: center; max-width: 600px !important;}
.max_width_400{text-align: center; max-width: 400px !important;}
.width_400{text-align: center; width: 400px;  max-width: 400px !important;}
.max_width_200{text-align: center; max-width: 200px !important;}
.width_200{text-align: center; width: 200px;  max-width: 200px !important;}
.max_width_100{text-align: center; max-width: 100px !important;}
.width_100{text-align: center; height: 100px; width: 100px !important;}

.padding_bottom50{padding-bottom: 50;}
.padding_bottom100{padding-bottom: 100;}

.playerback {width: 90%;text-align: center;padding: 4px 4px;margin-bottom: 4px;background-color: rgba(242, 243, 250,0.1);color: gray;vertical-align: middle;box-shadow: 0 0 10px 5px;border-radius: 4px;}/* box-shadow: 0 10px 10px -5px;*/

/* progress bar */
input[type='range']{
  -webkit-appearance: none !important;
  background: rgba(26, 13, 0,0.4);
  height: 20px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(26, 13, 0,0.4);
  box-shadow: inset 0px 1px 1px 0px rgba(26, 13, 0,0.4);
 border: 1px solid rgba(255, 153, 0,0.5);
}
input[type='range']::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAaCAYAAABsONZfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAq9JREFUeNqsVMtqFEEUrUd36XRPXk4QUWeSGEJGXejajQju5gP8AgV/RMEPiP8hBONON8KQlbMwJoIIA4kzZl6ZpN9V5blNeogTJQgWXG7VrXNu3Vc3397eZsPh8OFoNHq+urr6wHXdaq/XY5ubm6zRaLBKpcLiOG7v7u5+9Dzvdblc/iAYYw3Ie8iTVqtVXV5eZvV6na2treWazmSn+1Ncg0iv2Omy1jJjDEvTlHU6nVzTmeTMekmk9bMWAmRZxrrdbq6nCLTuEEn+iTQYDM6RKBLCi2k3Wus8rPF4nGs6F4tznutzpOIlWn8J7z+RKBySjY2NyX56OdMG8k7Adrs9cXIhaTr5JEkuJhHon0mYs9+Sp/M5UhiG5EoVBpqEIAgmANxPO41ktVZtLNWWbpJHkoODg5zY7/dzwfQzTP5EdnZ23srWp9aMX/ZrCwsLM6iYs7e3x+jTKIQGl8ZHKRU0m83PW1vvXmAy+GMhxCMYbyDpOewdKoSUsii5cR03TNLkEOSvt+vrb6Rf8hQOjuDccCFSgCP06hg2CBujKH04/gH7d+y/eGX/m5z1fSqGNBhGa4zGRUKhAETEI7zcc5W7j3Mbd23GWU/Oz/gsjGNrrCVCCq8xAAHAR9iPoLtwtY+md4QUhybTgZyTi4hjbBnGDMYIaZAQaQgnPYR6iLx+wsEAzsZcyMRJ5XWTJfuBFBxNtYm1hprkAqwBotGIQA5AikCOXUcYqbyIxVFgETciNBqXqeM4IYAhqhlAHwvBIyFkbFDJyuKslaWSh6ZGTHJp1SVFpIyKQWOHbzVWyk3waHpZCaPmr1oltRUrtsbuz92zpSslfXJ8kiGvFFWjkCLPK6VporPa0qx5+uwu/SDyn4RQ1WuMhAwrK7dMcBIgnQwd4Bqt0MbqAmyL+fslwADoLPoqD85X7AAAAABJRU5ErkJggg==);
  width: 13px;
  height: 26px;
  position: relative;
  top: 4px;
}
input[type='range'][readonly]{background-color: red;-webkit-box-shadow: none; box-shadow: none;}
/* fin progress bar*/

.ButtonBasic{
background-color: E3CD8B;
color: rgb(179, 107, 0);
display: flex; justify-content: center;align-items: center;text-align: center;
padding-left: 2px;
padding-right: 2px;
margin-left: 5px;
margin-right: 5px;
width :var(--ButtonWidth);
font-size:clamp(18px, 2.5vw, 26px);font-weight: 600;border-radius: 4px;
}	
.ButtonBasic:hover{
  background: #E3CD8B;
  border: 1px solid rgba(153, 102, 51, 0.5);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.2),
    inset -2px -2px 4px rgba(255, 234, 204, 0.3);


}
.ButtonBasic.active::before{color: rgba(255, 153, 0,0.9);} 	
.ButtonBasic.active{background: rgba(26, 13, 0,0.9);color: rgba(255, 153, 0,0.9);}


.ButtonPlayPause::before			{content: "\f0d9";}.ButtonPlayPause.active::before 	{content: "\f04c";}
.ButtonHome::before 				{content: "\f015";}
.ButtonStop::before 				{content: "\f04d";}
.ButtonOpenRecorder::before 		{content: "\f130";}
.ButtonCloseRecorder::before 	{content: "\f131";}
.ButtonPedagogie::before 		{content: "\f05a";}
.ButtonOk::before 				{content: "\f00c";}
.ButtonCancel::before 			{content: "\f00d";}
.ButtonToggleLoop::before 		{content: "\f021";}.ButtonToggleLoop.active::before{content: "\f021";}
.ButtonToggleRate::before 		{content: "0.5X";} .ButtonToggleRate.active::before{content: "1X";}
.ButtonBasic:disabled {background: #ccc;}


/* Table */
.table-wrapper {-webkit-overflow-scrolling: touch;overflow-x: auto;color: black;}
.tables {margin: 0 0 0rem 0;width: 100%; border: 1px solid #BC9558;}
.tables tbody tr {background:#E3CD8B ; height: 30px; transition: background 0.25s ease; }
.tables tbody tr:hover {background:  #BC9558;}												
.tables tbody tr td {padding: 0em 0.25em;color: black;white-space: nowrap; overflow: hidden;}
@media screen and (max-width: 1000px) {.tables tbody tr {height: 20px;}}
@media screen and (max-width: 480px) {.tables tbody tr {height: 20px;}}

.tablesCadre {width: 100%; margin: 2 auto;background:#b08968;}
.tablesCadre tbody tr {height: 30px; transition: background 0.25s ease; }
.tablesCadre tbody tr td {padding: 0em 0.25em;color: black;}

.HugeDiv{display: flex;align-items: center;text-align:center;justify-content: center;margin-top: 2px;margin-bottom: 4px;background-color: rgba(242, 243, 250,0.1);color: var(--TextColor);font-family: 'Tajawal', sans-serif;font-size:clamp(18px, 2.5vw, 26px);/*20px;*/text-align: center;}
.HugeDiv span{flex: 1;text-align:center;justify-content: center;color:white ; background: var(--BgBackColor);border-color:#d6ccb8;
border-width: 1px;border-style: solid;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);min-width: 50px;margin-left : 1px;margin-right: 1px;
cursor: pointer;}
.HugeDiv span:hover{color: blue;}

@media screen and (max-width: 1680px){.HugeDiv{font-size: clamp(18px, 2.5vw, 26px);/*20px;*/}.TitleMetre,.MiniTitle{font-size: 1.5rem;}}
@media screen and (max-width: 1180px){.HugeDiv{font-size: clamp(18px, 2.5vw, 26px);/*20px;*/}.TitleMetre,.MiniTitle{font-size: 1.2rem;}}
@media screen and (max-width: 736px){.HugeDiv{font-size: clamp(18px, 2.5vw, 26px);/*16px;*/}.TitleMetre,.MiniTitle{font-size: 1rem;}}
@media screen and (max-width: 400px){.HugeDiv{font-size: clamp(18px, 2.5vw, 26px);/*12px;*/}.TitleMetre,.MiniTitle{font-size: 0.8rem;}}

/*mizanres*/


			.listAccordeon 				{margin-bottom: 10px; background: #787785;padding: 0;border: 1px solid rgba(0, 0, 0, 0.8);
			font-size: clamp(18px, 2.5vw, 26px);/*1.4em;*/list-style: none;}
			.listAccordeon li a 		{background: #787785;color: #fff;display: block;border-bottom: 1px solid rgba(0, 0, 0, 0.2);border-top: 1px solid rgba(255, 255, 255, 0.2);text-decoration: none;text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);filter: dropshadow(color=#000, offx=1, offy=0);padding: 10px;padding-left: 20px;}
			.listAccordeon li a:hover 	{color: #f5f5fa;}
			.itemAccordeon 						{margin: 0;padding: 0;height: 0;overflow: hidden;listAccordeon-style: none;transition: 1s;}
			.itemAccordeon li a 					{background: #b4cad6;color: #000;font-size: clamp(18px, 2.5vw, 26px);/*1em;*/text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.5);filter: dropshadow(color=#000, offx=1, offy=0);}
			.itemAccordeon li a:hover 			{background: #dddce3;}
			.itemAccordeon li a table 			{font-size: clamp(18px, 2.5vw, 26px);/*0.8em;*/color: #000;text-align:center;}
			.listAccordeon li:hover ul 	{min-height: 240px;overflow: hidden;}/*190 au lieu 200 */
			.ButtonPrev 				{width: 40px;height: 40px;cursor: hand;}
			.ButtonPrev:hover 			{box-shadow: inset 0 0 0 1px #353535, 0 0 0 1px #353535, 1px -1px 30px #e3dad3, -1px 1px 30px #353535;}
/* Animation Seven */
			.container2 {width: 100%;margin: 10px auto;font-weight: 600;text-transform: uppercase;text-align: center;padding: 0 0 0px;}
			.animateSeven {font-size: clamp(18px, 2.5vw, 26px);/*20px;*/margin: 0px 0 0;border-bottom: 0px solid #353535;}
			.animateSeven span {display: inline-block;}
			.seven span {margin-left: 10px; color: blue;opacity: 0;transform: translate(-150px, 0) scale(.3);animation: leftRight .5s forwards;}
			@keyframes leftRight {40% {transform: translate(50px, 0) scale(.7);opacity: 1;color: #b5aa74;}60% {color: #b5aa74;}80% {transform: translate(0) scale(2);opacity: 0;}100% {transform: translate(0) scale(1);opacity: 1;}}


/*for divs */ 
			.NormDiv{font-size: clamp(18px, 2.5vw, 26px);/*20px; */color: black; font-weight: 400;}


/* 2 divs cote by cote */
.twoDivsSideBySideContainer{display: flex;text-align:center;  flex-wrap: wrap;width:100%;justify-content: center;
	margin-left: 0px;
	padding-left: 0px;
}
.twoDivsSideBySideContainer .twoDivsSideBySideChild	{padding-top: 0px;padding-bottom: 0px;text-align: center; width: 50%;height: 210px}

.iframe{
	min-width: 300px;max-width: 640px;width: 100%;
	min-height: 200px;max-height: 480px;height: 100%;
	float: center;
}

canvas {
	background: transparent; width: 100%;height: 80px;cursor: pointer;margin-left: auto; margin-right: auto; margin-top : 5px;margin-bottom: 5px;display: block;}
/*for accordeon */ 
.dropdown-inner {margin-left: 0px;padding-left: 0px;color : black;display: none;}
.dropdown-inner.open {display: block;color : blue;}
.dropdown-inner.close {display: none;color : blue;}
.aStyle {background:rgba(255, 255, 255, 0.5) ;border: 1px solid rgba(0, 0, 0, 0.2); font-family: 'Tajawal';cursor: pointer;font-size: clamp(18px, 2.5vw, 26px);/*1.5em;*/font-weight: bold;display: block;padding: 5px 10px;margin: 5px auto;}
.click{}

/*for accordeon2 */ 
.explanationContainer {width: 90%;margin: 20px auto;}
.explanationToggle {display: none;}
.explanationLabel {background:#c7b49b; display: block;color: white;padding: 10px;margin-bottom: 5px;cursor: pointer;border-radius: 5px;transition: background 0.3s;}
.explanationLabel:hover {background: #e0b030;}
.explanationContent {text-align: right;margin-bottom: 5px;background:#473c2f;max-height: 300px;overflow-y: auto;transition: max-height 0.3s ease, padding 0.3s ease;border-radius: 5px;padding: 0 10px;}
/*
.explanationContent ul {
  line-height: 1.6; 
  text-align: right;
  list-style: disc;
  list-style-position: outside;
  font-size: clamp(18px, 2.5vw, 26px);
  padding-right: 1.5em; 
  margin: 20px 0;

}
.explanationContent ul li {position: relative;padding-right: 1.5em;margin-bottom: 6px;list-style-type: disc;}
.explanationContent ul li ul {
  line-height: 1.6; 
  text-align: right;
  list-style: disc;
  list-style-position: outside;
  font-size: clamp(18px, 2.5vw, 26px);
  padding-right: 1.5em; 
  margin: 20px 0;

}

.explanationContent ul li ul li {position: relative;padding-right: 1.5em;margin-bottom: 6px;list-style-type: disc;}
*/






























@media screen and (max-width: 1200px) {
	.twoDivsSideBySideContainer .twoDivsSideBySideChild{ 
	width: 90%;
	text-align: center;
	}
	.paddingTop50{padding-top: 50px;}
	canvas{ width: 100%;
	}
	.text-poesie-right{min-width: 280px;width: 85%;padding-left: 10px;}
	.text-poesie-left{min-width: 280px;width: 85%;padding-right: 10px;}
}

.sans_color	{background: rgba(0,0,0,0);background-color: rgba(0,0,0,0)}
.float-container {border: 0px solid #fff;padding: 0px;}
.float-child {width: 25%;float: right;padding: 0px;border: 0px solid red;}

/* kachaf */ 

/* deb notif */
			#dialogoverlay{background: #707070;display: none;opacity: .8;position: fixed;top: 0px;left: 0px;width: 100%;z-index: 10;}
			#dialogbox{width: 80%;display: none;position: absolute;top:0;left: 0;right: 0;background: rgb(58, 88, 138,0.2);border-radius:7px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575);transition: 0.3s;z-index: 10;margin: auto;}
			#dialogbox:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);}
			.container1 {padding: 2px 16px;}
			#dialogbox > div{ background:#FFF; margin:8px; }
			#dialogbox > div > #dialogboxhead{ background: rgba(58, 88, 138,0.8); font-size:clamp(18px, 2.5vw, 26px);/*19px;*/ padding:10px; color:rgb(255, 255, 255); font-family: 'Tajawal', sans-serif ;}
			#dialogbox > div > #dialogboxbody{ background:rgba(58, 88, 138,0.5); padding:20px; color:#FFF; font-family: 'Tajawal', sans-serif ;}
			#dialogbox > div > #dialogboxfoot{ background: rgba(58, 88, 138,0.5); padding:10px; text-align:left; }
			#dialogRedbox{position: fixed;bottom:0;left: 0;right: 0;width: 100%;margin: auto;display: none;background: rgba(255, 5, 5,0.2);border-radius:7px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575);transition: 0.3s;z-index: 10;}
			#dialogRedbox:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);}
			#dialogRedbox > div{ background:#FFF; margin:0px; }
			#dialogRedbox > div > #dialogRedboxhead{ background: rgba(255, 5, 5,0.4); font-size:clamp(18px, 2.5vw, 26px);/*19px;*/ padding:10px; color:rgb(255, 255, 255); font-family: 'Tajawal', sans-serif ;}
			#dialogRedbox > div > #dialogRedboxbody{ background:rgba(255, 5, 5,1); padding:20px;color:#FFF; font-family: 'Tajawal', sans-serif ;}
			#dialogRedbox > div > #dialogRedboxfoot{ background: rgba(255, 5, 5,1); padding:10px; text-align:right; }

			#dialogGreenbox{position: fixed;bottom:0;left: 0;right: 0;width: 100%;margin: auto;display: none;background: rgba(10, 133, 4,0.2);border-radius:7px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575);transition: 0.3s;z-index: 10;}
			#dialogGreenbox:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);}
			#dialogGreenbox > div{ background:#FFF; margin:0px; }
			#dialogGreenbox > div > #dialogGreenboxhead{ background: rgba(10, 133, 4,0.4); font-size:clamp(18px, 2.5vw, 26px);/*19px;*/ padding:10px; color:rgb(255, 255, 255); font-family: 'Tajawal', sans-serif ;}
			#dialogGreenbox > div > #dialogGreenboxbody{ background:rgba(10, 133, 4,1); padding:20px;color:#FFF; font-family: 'Tajawal', sans-serif ;}
			#dialogGreenbox > div > #dialogGreenboxfoot{ background: rgba(10, 133, 4,1); padding:10px; text-align:right; }
			.slit-in-vertical {-webkit-animation: slit-in-vertical 0.45s ease-out both;animation: slit-in-vertical 0.45s ease-out both;}
			@-webkit-keyframes slit-in-vertical {0% {-webkit-transform: translateZ(-800px) rotateY(90deg);transform: translateZ(-800px) rotateY(90deg);opacity: 0;}54% {-webkit-transform: translateZ(-160px) rotateY(87deg);transform: translateZ(-160px) rotateY(87deg);opacity: 1;}100% {-webkit-transform: translateZ(0) rotateY(0);transform: translateZ(0) rotateY(0);}}
			@keyframes slit-in-vertical {0% {-webkit-transform: translateZ(-800px) rotateY(90deg);transform: translateZ(-800px) rotateY(90deg);opacity: 0;}54% {-webkit-transform: translateZ(-160px) rotateY(87deg);transform: translateZ(-160px) rotateY(87deg);opacity: 1;}100% {-webkit-transform: translateZ(0) rotateY(0);transform: translateZ(0) rotateY(0);}}


/* fin notif */
			.jump {position: relative;white-space: nowrap;/*text-shadow: 0 0 3px rgba(0,0,0,1);*/ }
			.jump::after {content: attr(data-text);position: absolute;left: 0;top: 0;color: blue ;overflow: hidden;width: 100%;animation: run-text .5s 1 linear; /*text-shadow: 0 0 3px rgba(255,255,255,1);*/ }
			@keyframes run-text {from {width: 0; left: 100% }to {width:100%, left: 100% }}
			.jump {color: #ffe6ff;text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;animation: shine 2s forwards, flicker 1s infinite;}
			@keyframes blink {0%,22%,36%,75% {color: #ffe6ff;text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;}28%,33% {color: #ff65bd;text-shadow: none;}82%,97% {color: #ff2483;text-shadow: none;}}
			.jump1 {animation: shine 2s forwards, blink 3s 2s infinite;}
			.jump4 {animation: shine 2s forwards, blink 10s 1s infinite;}
			@keyframes shine {0% {color: #6b1839;text-shadow: none;}100% {color: #ffe6ff;text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;}}
			@keyframes flicker {from {opacity: 1;}4% {opacity: 0.9;}6% {opacity: 0.85;}8% {opacity: 0.95;}10% {opacity: 0.9;}11% {opacity: 0.922;}12% {opacity: 0.9;}14% {opacity: 0.95;}16% {opacity: 0.98;}17% {opacity: 0.9;}19% {opacity: 0.93;}20% {opacity: 0.99;}24% {opacity: 1;}26% {opacity: 0.94;}28% {opacity: 0.98;}37% {opacity: 0.93;}38% {opacity: 0.5;}39% {opacity: 0.96;}42% {opacity: 1;}44% {opacity: 0.97;}46% {opacity: 0.94;}56% {opacity: 0.9;}58% {opacity: 0.9;}60% {opacity: 0.99;}68% {opacity: 1;}70% {opacity: 0.9;}72% {opacity: 0.95;}93% {opacity: 0.93;}95% {opacity: 0.95;}97% {opacity: 0.93;}to {opacity: 1;}}
			.flipContainer {display: flex;width: 100%;justify-content: center;align-items: center;perspective: 1000px;}
			.flipcard {position: relative;margin: 2px;height: 8rem;line-height: 8rem;text-align: center;color: #eaf5f7;border-radius: 0.8rem;transform-style: preserve-3d;}
			.flipface {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 0.8rem;background-size: cover;background-position: center center;-webkit-backface-visibility: hidden;backface-visibility: hidden;transition: transform 0.5s ease-in-out;}
			.face--front {background: var(--BgBackColor);font-size: clamp(18px, 2.5vw, 26px);/*1.5rem;*/}
			.face--back {background: #2c3e50;font-size: clamp(18px, 2.5vw, 26px);/*1.5rem;*/transform: rotateY(180deg);}
			.flipcard:hover .face--front {transform: rotateY(-180deg);}
			.flipcard:hover .face--back {transform: rotateY(0deg);}
			.disabled-link {color : black;pointer-events: none;}

			
/*deb frame_style.php */
			.poemframe 		{float: center;border: 1px solid rgba(211, 220, 50, .6);background-image: url("./imgs/frame01.jpg");float : center;font-family: 'Tajawal';width : 100%;height: 50%;display: block;background-size:100% 100%;}			
			.consigneframe 	{position: absolute; float: center;top: 170px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.sadrframe 		{position: absolute; float: center;top: 210px; left: 0px; right: 0px;text-align: center;font-size: clamp(18px, 2.5vw, 26px);/*30px;*/display: inline-block;font-weight: bold;}			
			
			.sadrframeRight	{position: relative; float: right;top: 110px; right: 50px;text-align: right;font-size: clamp(18px, 2.5vw, 26px);/*30px;*/display: inline-block;font-weight: bold;}			
			.ajozframeLeft	{position: relative; float: left;top: 140px; left: 50px; text-align: left;font-size: clamp(18px, 2.5vw, 26px);/*30px;*/display: inline-block;font-weight: bold;}			

			.poetframe 		{position: absolute; float: center;top: 260px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.restframe 		{position: absolute; float: center;top: 300px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.metreframe 	{text-decoration: none;}
			.Generatedby	{position: absolute; float: center;top: 360px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*8px;*/font-weight: bold;}			
			.fontcolor		{color: black;font-family: 'Tajawal';font-weight: bold;}
			.tdcolor		{vertical-align: middle;color: black;font-family: 'Tajawal';font-weight: bold;font-size: clamp(18px, 2.5vw, 26px);/*16px;*/text-align:center;}
			.redcolor		{color: red;}


			.consigneframe1 {position: absolute; float: center;top: 130px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.sadrframe 		{position: absolute; float: center;top: 180px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*30px;*/font-weight: bold;}			
			.poetframe1 	{position: absolute; float: center;top: 230px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.restframe 		{position: absolute; float: center;top: 270px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.Generatedby1	{position: absolute; float: center;top: 320px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/* 9px;*/font-weight: bold;}			

			.consigneframe2	{position: absolute; float: center;top: 140px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.sadrframeRight	{position: relative; float: right; top: 130px; 			  right: 60px;text-align: right;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*30px;*/font-weight: bold;}			
			.ajozframeLeft	{position: relative; float: left;  top: 170px; left: 60px; 			 text-align: left;  display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*30px;*/font-weight: bold;}			
			.poetframe2 	{position: absolute; float: center;top: 260px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/font-weight: bold;}			
			.Generatedby2	{position: absolute; float: center;top: 100px; left: 0px; right: 0px;text-align: center;display: inline-block;font-size: clamp(18px, 2.5vw, 26px);/*9px;*/font-weight: bold;}			



/* beforestyle*/

		
.jump {position: relative;white-space: nowrap;/*text-shadow: 0 0 3px rgba(0,0,0,1);*/ }
.jump::after {content: attr(data-text);position: absolute;left: 0;top: 0;color: blue ;overflow: hidden;width: 100%;animation: run-text .5s 1 linear;
/*text-shadow: 0 0 3px rgba(255,255,255,1);*/ }
@keyframes run-text {from {width: 0; left: 100% }to {width:100%, left: 100% }}

/*
.jump2 {position: relative;white-space: nowrap;color: black;text-shadow: 0 0 3px rgba(0,0,0,1); }.jump2::after {content: attr(data-text);position: absolute;left: 0;top: 0;color: blue;overflow: hidden;width: 100%;animation: run-text 2s 1 linear;text-shadow: 0 0 3px rgba(255,255,255,1); }
.jump3 {position: relative;white-space: nowrap;color: black;text-shadow: 0 0 3px rgba(0,0,0,1); }.jump3::after {content: attr(data-text);position: absolute;left: 0;top: 0;color: blue;overflow: hidden;width: 100%;animation: run-text 3s 1 linear;text-shadow: 0 0 3px rgba(255,255,255,1); }
.jump4 {position: relative;white-space: nowrap;color: black;text-shadow: 0 0 3px rgba(0,0,0,1); }.jump4::after {content: attr(data-text);position: absolute;left: 0;top: 0;color: blue;overflow: hidden;width: 100%;animation: run-text 4s 1 linear;text-shadow: 0 0 3px rgba(255,255,255,1); }
.jump5 {position: relative;white-space: nowrap;color: black;text-shadow: 0 0 3px rgba(0,0,0,1); }.jump5::after {content: attr(data-text);position: absolute;left: 0;top: 0;color: blue;overflow: hidden;width: 100%;animation: run-text 1s 1 linear;text-shadow: 0 0 3px rgba(255,255,255,1); }
*/
.jump {color: #ffe6ff;text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;animation: shine 2s forwards, flicker 1s infinite;}
@keyframes blink {0%,22%,36%,75% {color: #ffe6ff;text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;}28%,33% {color: #ff65bd;text-shadow: none;}82%,97% {color: #ff2483;text-shadow: none;}}
.jump1 {animation: shine 2s forwards, blink 3s 2s infinite;}
.jump4 {animation: shine 2s forwards, blink 10s 1s infinite;}
@keyframes shine {0% {color: #6b1839;text-shadow: none;}100% {color: #ffe6ff;text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;}}
@keyframes flicker {from {opacity: 1;}4% {opacity: 0.9;}6% {opacity: 0.85;}8% {opacity: 0.95;}10% {opacity: 0.9;}11% {opacity: 0.922;}12% {opacity: 0.9;}14% {opacity: 0.95;}16% {opacity: 0.98;}17% {opacity: 0.9;}19% {opacity: 0.93;}20% {opacity: 0.99;}24% {opacity: 1;}26% {opacity: 0.94;}28% {opacity: 0.98;}37% {opacity: 0.93;}38% {opacity: 0.5;}39% {opacity: 0.96;}42% {opacity: 1;}44% {opacity: 0.97;}46% {opacity: 0.94;}56% {opacity: 0.9;}58% {opacity: 0.9;}60% {opacity: 0.99;}68% {opacity: 1;}70% {opacity: 0.9;}72% {opacity: 0.95;}93% {opacity: 0.93;}95% {opacity: 0.95;}97% {opacity: 0.93;}to {opacity: 1;}}

.flipContainer {display: flex;width: 100%;justify-content: center;align-items: center;perspective: 1000px;}
.flipcard {position: relative;margin: 2px;height: 8rem;line-height: 8rem;text-align: center;color: #eaf5f7;border-radius: 0.8rem;transform-style: preserve-3d;}
.flipface {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 0.8rem;background-size: cover;background-position: center center;-webkit-backface-visibility: hidden;backface-visibility: hidden;transition: transform 0.5s ease-in-out;}
.face--front {background: var(--BgBackColor);font-size: clamp(18px, 2.5vw, 26px);/*1.5rem;*/}
.face--back {background: #2c3e50;font-size: clamp(18px, 2.5vw, 26px);/*1.5rem;*/transform: rotateY(180deg);}
.flipcard:hover .face--front {transform: rotateY(-180deg);}
.flipcard:hover .face--back {transform: rotateY(0deg);}

.disabled-link {color : black; pointer-events: none;}

/* examples */
			.slider_container {margin: 20px auto;width: 500px;height: 400px;overflow: hidden;position: relative;}
			.example_slider {display: flex;transition: transform 0.5s ease-in-out;height: 100%;width: 500%;}
			.example_carousel {list-style: none;flex-shrink: 0;flex-basis: 20%;height: 100%;padding-bottom: 0;background-color: #ebeced;}
			.div_slider{display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;}
			.controls .btn_prev {margin-top: 0;padding:10px;position: absolute;right: 0px;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;outline: none;color: #fbf9f9;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/}
			.controls .btn_next{margin-top: 0;padding:10px;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;outline: none;color: #fbf9f9;font-size: clamp(18px, 2.5vw, 26px);/*24px;*/}
			.controls button:hover {background: #7b666663;}
			.is-hidden {display: none;}
			@media screen and (max-width: 768px) {.slider_container{float: none;width: 100%}.slider_container {min-height: 400px;max-height: 400px}.slider_container img {height: 400px}.controls .btn_next,.controls .btn_prev{background: #7b666663 !important;}}

			.bordered{border-bottom: 1px dotted rgba(60,64,67,0.149);}
			.div_num{display: inline-block;width: 100%;position: relative;margin-top: 2px;margin-bottom: 2px;text-align: center;}
			.spanTitre{font-weight: bold;}
			.spanRight{position: absolute;right: 10px; text-align: center;}
			.spanLeft{position: absolute;left: 10px;text-align: center;}

			.cardexamplescene {max-width: 100%;min-height: 70vh;margin: auto;padding: 20px 20px;}
			.cardexampleswrap {display: block;width: 400px;max-width: 100%;height: 300px;margin: 0 auto;margin-bottom: 15px;}
			.cardexample, .back {width: 100%;height: 100%;}
			.cardexample {background:rgba(60,64,67,0.302);position: relative;transform-style: preserve-3d;transition: transform 1s, box-shadow .4s;box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);border-radius: 10px;}
			.cardexample:hover {box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);}
			.back {background: rgba(255,255,255,0.302); text-align: center;color: black;border-radius: 10px;font-weight: 600;}
			@media screen and (min-width: 960px) {.cardexamplescene {display: flex;justify-content: space-around;}}
			.sans_color	{background: rgba(0,0,0,0);background-color: rgba(0,0,0,0)}


/* للحركات */.Buttonharaka{margin: 2px; width: 30px;height: 40px;	background-color: white;justify-content: center;align-items: center;
text-align: center;
padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
	cursor:pointer;

font-size:clamp(18px, 2.5vw, 26px);/*30px;*/font-weight: 400;border-radius: 4px;border: transparent 0px;}	
.Buttonharaka:hover{background-color: #f2eeb6;}
/* للحد من عرض div */.maxwidth500{max-width: 500px;}
.minwidth200{min-width: 200px;}



.scrollable-div {
  /*height: 60vh;  Fixed height */
  overflow-y: auto; /* Adds vertical scroll bar */
  border: 1px solid #ccc; /* Optional: Add a border for better visibility */
  padding: 10px;
  	width: 100%;text-align: center;margin-bottom: 4px;background-color: rgba(242, 243, 250,0.1);/*vertical-align: middle;*/
	box-shadow: 0 0 10px 5px;border-radius: 4px;
}
@media screen and (max-width: 1000px) {
.scrollable-div {
 /* height: 400px;  Fixed height */
}
}

/* ........ */
/*** 


====================================================================
	Reset
====================================================================

 ***/

*{
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
	font-size: 100%;
}