header{
	position: fixed;
	width: 100%;
	z-index: 10000;
}
.icos_header{
	font-size: 30px;
}
.alerts_lmd{
	background-color: #9DD4E6 !important;
	border: 1px solid #4D97B0;
}

.lmd_common_bg{
	background-image: url('images/back_letter_choice.png');
	background-size: cover;
}
body{
	font-family: "Montserrat", sans-serif;
}

h1{
	font-weight: bold;
	color: #00003A;
}
h2{
	font-weight: bold;
}

.overlapable_logo{
	margin-top: -50px;
}

.lmd_btn{
	background-color: #BEB2EB;
	font-weight: bold;
	border: none;
}
.lmd_btn:hover{
	background-color: #7868B4;
}

.btn_validate_adress{
	background-color: #9DD4E6 !important;
	border: none !important;
	font-weight: bold !important;
	color: white !important;
}
.btn_validate_adress:hover{
	background-color: #61A3B8 !important;
}

.cta_btn{
	background: linear-gradient(135deg,
        #fbc2eb 0%,     /* rose clair coin haut gauche */
        #dcbaf6 20%,    /* violet pastel */
        #b7aef5 40%,    /* violet-bleu */
        #a3b9f7 60%,    /* bleu clair */
        #9ad5eb 80%,    /* turquoise */
        #aee7f5 100%    /* bleu ciel coin bas droit */
      );
	color: white;
	padding: 15px 40px;
	border-radius: 15px;
	text-decoration: none;
	font-weight: 800;
	transition: all 0.4s ease;
	width: 280px;
	display: block;
}

.cta_btn:hover{
	background: linear-gradient(135deg,
    #e79fcf 0%,     /* rose foncé */
    #b88adf 20%,    /* violet plus soutenu */
    #8e94e0 40%,    /* violet-bleu foncé */
    #6f8ed2 60%,    /* bleu plus profond */
    #62b9cc 80%,    /* turquoise foncé */
    #7fc9da 100%    /* bleu ciel plus dense */
  );
}

.centered_titles{
	text-align: center;
}
.left_titles{
	text-align: left;
}
.unstyled_links{
	text-decoration: none;$
	color: none;
}

.global_content{
	margin: 100px 5% 50px 5%;
	z-index: 100;
}
.global_content_with_bg{
	padding: 100px 5% 50px 5%;
	z-index: 100;
	background-image: url('images/back_letter_choice.png');
	background-size: cover;
}

.cancel_btn{
	background-color: white !important;
	color: #EBC2E7 !important;
	border: 2px solid #EBC2E7 !important;
}
.cancel_btn:hover {
	background-color: #EBC2E7 !important;
	color: white !important;
}









/*HEADER*/
.top_navbar{
	width: 100%;
	height: 30px;
	background-color: #010142;
	color: white;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 5px 20px;
}
.top_navbar a{
	color: white;
	text-decoration: none;
}
.top_navbar_left{
	font-weight: bold;
}
.top_navbar_right > *{
	margin-right: 10px;
}

.navbar{
	color: black;
	font-weight: bold;
	border-bottom: 5px solid #010142;
	padding-left: 2%;
	padding-right: 2%;
	background-color: rgba(255, 255, 255, 0.5) !important;
	transition: background-color 0.7s ease, box-shadow 0.4s ease;
}
#navbar_back.scrolled {
  background: white !important; /* ta couleur après scroll */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.nav-item{
	margin-left: 20px;
}
.nav-item a{
	color: black;
}
.nav-item a:hover{
	color: #010142;
}
.d-flex{
	color: #010142;
}
.d-flex > * {
	margin-left: 20px;
	font-size: 20px;
	color: #010142;
}
.header_centered_links{
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	justify-content: space-evenly;
}
/*HEADER*/







/*CONCEPT*/
.concept_content{
	margin-top: 40px;
	padding: 100px 10% 50px 10%;
	z-index: 100;
	background-image: url('images/back_concept.png');
	background-size: cover;
}
.concept_steps_section{
	margin: 0 0 0 0;
	padding: 0 0 50px 0;
	color: #00003A;       
}

.concept_steps{
	margin: 0px 0 25px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.concept_step{
	display: flex;
	flex-direction: column;
	border-radius: 25px;
	width: 300px;
	height: 350px;
	margin-top: 50px;
	padding: 30px;
	text-align: center;
	box-shadow: 0px 0px 15px #9f9f9d;
}
.concept_numbers{
	font-weight: bold;
  font-size: 100px;
  margin-top: -105px;
  text-shadow: 2px 2px 5px black;
}


.faq_links{
	font-weight: bold;
	color: #010142;
	/*text-decoration:	 none;*/
}
.concept_faq{
	margin: 0 0 0 0;
	padding: 50px 10% 50px 10%;
	background-color: #BEB2EB;
	color: #010142;
}
.accordion-button{
	background-color: rgba(190, 178, 235, 0.7);
	/*background-color: rgba(252, 252, 252, 0.35) !important;*/
	color: #010142;
}
.accordion-collapse{
	background-color: #d2d4fd;
}
.accordion-item{
	color: #010142;
}
.accordion-body{
	background-color: rgba(252, 252, 252, 0.35);
}

.cta_bottom{
	display: flex;
	justify-content: center;
}
.cta_bottom_box{
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 25px;
	 /* 🎨 Empilement d’arrière-plans */
  background-image:
    url('images/cta_grid.png'),
    linear-gradient(135deg,
      #fbc2eb 0%,
      #dcbaf6 20%,
      #b7aef5 40%,
      #a3b9f7 60%,
      #9ad5eb 80%,
      #aee7f5 100%
    );

  /* 📏 Paramètres des backgrounds */
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
	width: 700px;
	margin: 50px auto 50px auto;
	padding: 50px;
}
.cta_bottom_btn{
	color: white;
	font-weight: bold;
	background-color: #010142;
}
.cta_bottom_btn:hover{
	background-color: #2323b3;
	color: white;
}

.concept_cta{
	text-align: center;
  margin-top: -60px !important;
}

#concept_experience{
	color: white;
	background-color: #010141;
}
.concept_experience_container{
	margin: 50px 0 50px 0;
	display: flex;
	flex-direction: row;
}
.concept_experience_container > *{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	width: 50%;
}
.concept_experience_left{
	padding-right: 20px;
}
.concept_experience_right{
}
.cta_btn_concept{
	width: 300px;
}
.concept_faq_box{
	display: flex;
	flex-direction: row;
}
.concept_faq_left{
	width: 20%;
	display: flex;
	flex-direction: column;
}
.concept_faq_left span{
	margin: 10px 0 10px 0;
	padding: 10px;
	transition: all 0.2s;
}
.concept_faq_left span:hover{
	color: white;
	background-color:  rgba(255,255,255,0.35);
	cursor: pointer;
	font-weight: bold;
}

.concept_faq_right{
	width: 80%;
	padding: 0 0 0 25px;
}
.concept_faq_answer{
	margin: 0 0 20px 0;
  background-color: rgba(255,255,255,0.35);
  border: 3px solid #00003A;
  border-radius: 15px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.concept_faq_answer:hover{
	cursor: pointer;
}
.concept_faq_answer_left{
	width: 90%;
	transition: all 0.5s;
}
.concept_faq_answer_left strong{
	color: white;
}	
.concept_faq_answer_right{
	width: 10%;
	text-align: center;
	font-size: 25px;
}
.concept_faq_answer_right i{
	color: white;
}

/* Animation FAQ (smooth) */
.concept_faq_answer_left p {
  overflow: hidden;
  margin: 0;
  transition: all 0.5s ease; /* effet fluide */
}

/* Quand visible */
.faq_content_on {
  max-height: 600px; /* adapte à la taille de ton texte */
  opacity: 1;
  margin-top: 10px;
}

/* Quand caché */
.faq_content_off {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* Bouton actif à gauche */
.concept_faq_left_activated {
  background-color: rgba(255,255,255,0.35);
  color: white;
  transition: all 0.3s ease;
  font-weight: 600;
}
/* Style de base : flèche droite */
.concept_faq_answer_right img {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

/* Quand la question est ouverte → flèche tourne */
.concept_faq_answer.active .concept_faq_answer_right img {
  transform: rotate(90deg);
}

/*CONCEPT*/








/*CONNEXION*/
.connexion_form{
	display: flex;
	flex-direction: row;
	border-radius: 20px;
	border: 1px solid #ccc;
}

.connexion_form_left{
	width: 40%;
	padding: 25px;
	background-image:
    linear-gradient(135deg,
      #fbc2eb 0%,
      #dcbaf6 20%,
      #b7aef5 40%,
      #a3b9f7 60%,
      #9ad5eb 80%,
      #aee7f5 100%
    );

  /* 📏 Paramètres des backgrounds */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.connexion_form_left img{
	width: 50%;
}
.connexion_form_right{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px;
	width: 60%;
}
.connexion_form_right_for_account{
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: left;
	padding: 25px;
	width: 60%;
}
/*CONNEXION*/











/*MON COMPTE*/
.account_card{
	border-radius: 20px;
	box-shadow: 0 0 10px #e3e3e3;
	padding: 20px;
}
.account_links{
	font-weight: bold;
	text-decoration: none;
	color: #9DD4E6;
	transition: all 0.5s;
}
.account_links:hover{
	color: #61A3B8;
}
.account_btn{
	display: flex;
	flex-direction: row;
	margin: 10px 0 0 0;
}
.account_btn>*{
	margin-right: 25px;
}
/*MON COMPTE*/








/*HOME*/
.landing_home{
	min-height: 100vh;
	height: 100vh;
	display: flex;
	align-items: center;
	padding: 0 0 0 5%;
	background: linear-gradient(90deg, rgba(1, 1, 66, 0.7), rgba(0, 0, 0, 0));
}
.landing_home_title{
	font-weight: 700;
	color: white;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* la vidéo couvre toute la section */
  z-index: -1; /* passe derrière le contenu */
}
/*HOME*/







/*LETTER TYPE CHOICE*/
.letter_type_page{
	min-height: 100vh;
	padding: 100px 50px 0 50px;
	background-image: url('images/back_letter_choice.png');
	background-size: cover;
}
.letter_type {
  position: relative; /* 👈 nécessaire pour contenir le fond */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 50px 0 0 0;
  padding: 25px 0 75px 0;
  overflow: hidden; /* évite que l’image dépasse */
}

.letter_type_bg {
  position: absolute;
  top: -100px;   /* on décale l'image au-dessus */
  left: 0;
  right: 0;
  bottom: -100px; /* on laisse dépasser en bas aussi */
  background: url("images/letter_type_bg.png") no-repeat center;
  background-size: 130%; /* ou cover */
  z-index: 0;
}

.letter_type_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  position: relative;
  text-align: center;
  border: 2px solid white;
  border-radius: 25px;
  margin: 25px;
  padding: 20px;
  background-color: rgba(1, 1, 66, 0.6);
  color: white;
  height: 300px;
  width: 400px;
  z-index: 1;
  transition: all 0.2s;
}
.letter_type_item h2{
	font-size: 25px;
}
.letter_type_item h3{
	font-weight: bold;
	font-size: 20px;
}
.letter_type_item:hover{
	margin: 0;
	height: 350px;
	width: 450px;
  background-color: rgba(1, 1, 66, 0.9);
}
.letter_type_ico{
	width: 75px;
	margin: 15px 0 15px 0;
}
/*LETTER TYPE CHOICE*/






/*AUTHENTIC LETTER*/
.authentic_section{
	display: flex;
	flex-direction: row;
}
.authentic_section_left{
	/*background-image:
    linear-gradient(135deg,
      #fbc2eb 0%,
      #dcbaf6 20%,
      #b7aef5 40%,
      #a3b9f7 60%,
      #9ad5eb 80%,
      #aee7f5 100%
    );
  background-repeat: no-repeat;
  background-size: cover;*/
	width: 40%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.authentic_section_right{
	width: 60%;
	padding: 5px 5px 5px 15px;
}
/*AUTHENTIC LETTER*/










/*CREATE LETTER*/
.create_letter_section{
	display: flex;
	flex-direction: row;
}

.create_letter_left {
  width: 300px;        /* largeur fixe du bloc gauche */
  background: #f8f9fa; /* couleur de fond claire */
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  margin-right: 15px;
}
.create_letter_buttons_area{
	display: flex;
	flex-direction: row;
	justify-content: left;
	flex-wrap: wrap;
}
.create_letter_color_btns{
	width: 30px;
	height: 30px;
	border-radius: 500px;
	margin: 5px;
	cursor: pointer;
	border: 1px solid #d6d6d6;
}
.create_letter_font_btns{
	border-radius: 100px;
  cursor: pointer;
  background-color: #ececec;
  padding: 5px 10px;
  margin: 2px;
  font-size: 14px;
}
.create_letter_right {
  flex: 1;
  width: 100px;/* prend tout l’espace restant */
}

.style_pill{
	width: 200px;
	text-align: center;
	margin-bottom: 5px;
	padding: 5px 10px;
	border-radius: 100px;
	transition: all 0.3s;
}
.style_pill:hover{
	cursor: pointer;
	box-shadow: 0 0 10px grey;
}

.preview_section{
	display: flex;
	flex-direction: row;
}
#preview-container{
	width: 50%;
}
.preview_section_right{
	width: 50%;
	margin: 20px 0 0 20px;
}
/*CREATE LETTER*/













/*UPLOAD LETTER*/
.after_upload_section{
	display: flex;
	flex-direction: row;
}
#pdf-preview{
	width: 700px;
	width: 100%;
}
.validation_section{
	margin: 0 0 0 25px;
	max-width: 50%;
}

.upload_letter_section{
	text-align: center;
	margin: 50px 0 100px 0;
}
#loader_upload_letter {
  display: none;
  margin: 20px auto;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px; height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
#output_upload_letter {
  margin-top: 20px;
  width: 80%;
  max-width: 800px;
  height: 400px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  white-space: pre-wrap;
  font-family: 'Montserrat', sans-serif;
}
/*UPLOAD LETTER*/







/*CUSTOMIZER*/
.customizer{
	display: flex;
	flex-direction: row;
}

.customizer_left{
	display: flex;
	flex-direction: column;
	width: 50%;
}

.customizer_right{
	width: 50%;
	height: 100%;
}

#customizer_textarea{
	width: 100%;
	height: 50vh;
	padding: 25px;
  font-family: 'Montserrat', sans-serif;
}
.customizer_colors{
	display: flex;
	flex-direction: row;
}
.customizer_btn{
	background-color: #010142;
	color: white;
	font-size: 20px;
	transition: all 0.2s;
	cursor: pointer;
	border-radius: 100px;
	margin: 0 10px 10px 0;
	padding: 5px 10px 5px 15px;
	width: 40px;
	height: 40px;

}
.customizer_btn:hover{
	background-color: #0314CC;
	color: white;
	box-shadow: 0px 0px 30px grey;
}
/*CUSTOMIZER*/











/*CONTROL LETTER*/
.control_section{
	display: flex;
	flex-direction: row;
}
.disabled_btn{
  cursor: not-allowed;
  background-color: lightgray;
}
.control_btns{
	width: 300px;
}
/*CONTROL LETTER*/






/*LETTER PAYMENT*/
.letter_type_payment_col{
	justify-content: space-evenly;
}
.letter_type_payment {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  position: relative;
  text-align: center;
  border: 2px solid white;
  border-radius: 25px;
  margin: 25px;
  padding: 20px;
  background-color: rgba(1, 1, 66, 0.6);
  color: white;
  height: 400px;
  width: 500px;
  z-index: 1;
  transition: all 0.2s;
}
.letter_type_payment h2{
	font-size: 25px;
}
.letter_type_payment h3{
	font-weight: bold;
	font-size: 20px;
}
.letter_type_payment:hover{
	margin: 0;
	height: 450px;
	width: 550px;
  background-color: rgba(1, 1, 66, 0.9);
}


.payment_price_pill{  
	background-color: white;
  color: #010142;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 50px;
}
.payment_table{
	font-size: 25px;
	font-weight: bold;
}
#payment_free{
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	max-width: 400px;
	margin: 40px auto;
}
#payment_free_btn{
	background-color: #5469d4;
	border-radius: 5px;
	padding: 15px;
	width: 100%;
	display: block;
  text-align: center;
  font-size: 20px;
}

#payment_free_btn a{
	color: white;
	text-decoration: none;
}

#before_payment,#after_payment{
	display: flex;
	width: 50%;
	margin: 50px auto 50px auto;
	padding: auto;
	text-align: center;
}
.after_payment_links{
	width: 200px;
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.after_payment_links>*{
	font-size: 30px;
}
/*LETTER PAYMENT*/





















footer{
	background-color: #010142;
	width: 100%;
	height: 300px;
	padding: 50px 5%;
}

footer ul{
	padding: 0;
	margin: 0;
}
footer li{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.footer_links{
	display: flex;
	justify-content: space-between;
	text-decoration: none;
	color: white;	
}
footer > * {
	list-style: none;
}
.footer_title{
	color: white;
	font-weight: bold;
}
.footer_socials{
	display:flex;
	flex-direction: row;
	justify-content: space-around;
}
footer a{
	text-decoration: none;
	color: white;
}
footer a:hover{
	text-decoration: underline;
}