@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

@font-face {
	font-family: 'inter-classic';
	src: url('../fonts/inter-classic/inter-variable.woff') format('woff'),
		url('../fonts/inter-classic/inter-variable.woff2') format('woff2'),
		url('../fonts/inter-classic/inter-variable.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* CONSULTATION ETAP 2 */
/* content form */
.bg-red{background-color: #E30045}
.bg-yellow{background:#FE758F}
.pad-5{padding:5px}
.pad-10{padding:10px}

/* RGPD */
.container-rgpd{padding-top:8px;width:740px;font-size:11px}
.container-rgpd p{color:#2a343b}

#content-form .pad-top-25{padding-top:25px}
#overlay, #content-form{min-height:595px;}
#overlay {background-color: rgba(0, 0, 0, 0.4)}
#content-form {background-image: url(../../images/consultation/bg-form/bg-cartes.jpg);background-repeat: no-repeat;background-position: bottom center;background-size: cover;border-top: 8px solid #FE758F;border-bottom: 8px solid #FE758F;color: #fff}
#content-form.form-0{background-image: url(../../images/consultation/bg-form/bg-cartes.jpg);border-color:#FE758F}
#content-form.form-0 #overlay {background-color: rgba(0, 0, 0, 0.2)}
#content-form.form-1{background-image: url(../../images/consultation/bg-form/bg-woman-pontoon.jpg);border-color:#E60047}
#content-form.form-2{background-image: url(../../images/consultation/bg-form/bg-padlock.jpg);border-color:#FF0000}
#content-form.form-3{background-image: url(../../images/consultation/bg-form/bg-couple.jpg);border-color:#FE758F}

#content-form h1, #content-form h2, #content-form p{color:#FFF}
#content-form.form-1 h1, #content-form.form-1 h2{color:#E60047}
#content-form.form-2 h1, #content-form.form-2 h2{color:#FF0000}
#content-form h1{text-transform:uppercase;font-size:29px;margin-top:0;font-size:9rem;font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}
#content-form #etap-2 h2{color:#FFF}
#content-form p{text-transform:uppercase;font-size:25px;margin-bottom:0}
/*tarot*/
.cartes-tapis{border-radius: 7px;border: 2px solid #03BCB9;}
#content-form.form-0 .cartes-tapis{border-color:#FE758F}
#content-form.form-1 .cartes-tapis{border-color:#E60047}
#content-form.form-2 .cartes-tapis{border-color:#FF0000}
#content-form.form-3 .cartes-tapis{border-color:#FE758F}
/* form */
#content-form #etap-2 .form-container {background-color: rgba(255, 255, 255, 0.5);border-radius: 4px;margin-top:20px}
#content-form #etap-2 .form-title {position: relative;margin-bottom: 25px;padding: 15px 0;border-top-left-radius: 4px;border-top-right-radius: 4px}
.form-title:after {top: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events:none;border-color: rgba(136, 183, 213, 0);border-top-color: #E30045;border-width: 20px;margin-left: -20px;}
#content-form #etap-2 .form-title h2 {margin: 0;font-weight: normal;font-size: 18px;text-transform: uppercase;}
#content-form .form-box{padding:0 10px}
#content-form #etap-2 .form-control{width:100%}
#content-form #etap-2 .btn{margin:10px 0;padding:10px 0;width:100%;font-size:20px}

#content-form #etap-2 .form-control::-webkit-input-placeholder { color:#e30045; }
#content-form #etap-2 .form-control::-moz-placeholder { color:#e30045; } /* firefox 19+ */
#content-form #etap-2 .form-control:-ms-input-placeholder { color:#e30045; } /* ie */
#content-form #etap-2 .form-control:-moz-placeholder { color:#e30045; }

#content-form #etap-2 .label-control-birthday{line-height:17px}

/* content proposal */
#content-proposal{margin:0;padding:5em 0;}
#content-proposal h2{margin:0;font-size:22px;line-height:1.46em}
#content-proposal h3{font-size:22px}
#content-proposal p{font-size:16px}

#z-is-typing{padding-left:2px;height:23px}

#content-consultant #bt-valider .btn-success{background-color: #FE758F;border:0 none}

.form-condition{position: relative;}
.form-condition label{font-size: 12px; font-weight: normal;line-height: 115%;}
.form-condition label a{color:#FFF;text-decoration: underline;}
.message-error1{position: absolute;top: 30px;left: -15px;z-index: 1000000}
#msg-error1{color: #000;background-color: #fff;padding: 5px 10px;border-radius: 5px;position: relative;font-weight: bold;font-style: italic;}
#msg-error1 .triangle-code1{position: absolute;top: -12px;left: 14px;display: inline-block;height: 0;width: 0;border-right: 13px solid transparent;border-bottom: 17px solid #fff;border-left: 7px solid transparent;}

.message-error2{position: absolute;top: 15px;left: 0px;z-index: 1000000}
#msg-error2{color: #000;background-color: #fff;padding: 5px 10px;border-radius: 5px;position: relative;top: 13px;left: -15px;font-weight: bold;font-style: italic;}
#msg-error2 .triangle-code2{position: absolute;top: -12px;left: 14px;display: inline-block;height: 0;width: 0;border-right: 13px solid transparent;border-bottom: 17px solid #fff;border-left: 7px solid transparent;}

/* CONSULTATION VALIDE */
#tchat-title h2{text-transform:uppercase;font-size:30px}
#loader{height:280px}
#loader .loader-text{padding-top:10%;font-size:24px;color:#00BADE}
#text-tchat{height:280px;overflow:auto}
#text-tchat .para{padding:0.3em 0}
.para:nth-child(odd) {background: #D0EFFB none repeat scroll 0 0;border-top: 1px solid #F0F0F0;}
.para:nth-child(even) {background: #FFF none repeat scroll 0 0;border-top: 1px solid #F0F0F0;}
#ch-input{width:100%}
#blk-tchat.border-yellow{border-bottom-width:25px}


/*********************************/

/* ajout new consultation 05/2025 */

.blk-head-profil{background: rgb(242,74,198);background: linear-gradient(90deg, rgba(242,74,198,1) 0%, rgba(248,118,104,1) 100%);color:#fff;font-weight: bold;font-size: 18px;min-height: 40px;line-height: 37px;}
.blk-head-profil button{background: white;border-radius: 50%;border: white;color: #F24AC6;margin: 5px;width: 30px;
font-weight: bold;font-size: 19px;}
.blk-head-profil #btn-back{max-height: 32px;}

#phone-button{display: flex;flex-wrap: nowrap;flex-direction: row;align-content: space-between;justify-content: space-evenly;align-items: flex-start;border: 1px solid #263C6A;border-radius: 15px;padding-top:7px;max-width: 300px;	margin: 20px auto;	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4)}
#phone-button a{font-size: 25px;color:#263C6A;}

.container-plateforme {display: flex;flex-wrap: wrap;gap: 10px; /* Espacement entre les vignettes */
	padding: 20px; justify-content: space-around;}
.container-plateforme-profil {display: flex;flex-wrap: wrap;gap: 10px;padding: 20px 0px 20px 45px;align-content: space-around;justify-content: space-around;text-align: center;}

.blk-all-produits {margin: 0 auto;}
h1#title-consultation{color:#FF66C4;font-size: 25px;font-family: 'inter-classic', Arial sans-serif;padding-left: 20px;font-size: 20px;font-weight: 500;text-align: center;padding-top: 50px;padding-bottom:10px}
.point-vert{background-color: #00D42F;width: 16px;height: 16px;border-radius: 50%;margin-right: 8px;border: 1px solid #fff;}
.blk-infos-profil{display: flex;flex-wrap: nowrap;flex-direction: row;align-content: center;align-items: center;
justify-content: space-around;}
.blk-profil{display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;padding: 5px 0 7px;}
.blk-img-profil{position: relative;}
.blk-img-profil img{box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-webkit-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-moz-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);}
.blk-img-profil .btn-tel{position: absolute;bottom: -14%;right: 37%;max-width: 25%;box-shadow: none;}

.etape-3 .blk-img-profil img{box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-webkit-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-moz-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);}
.blk-img-produit img{box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-webkit-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-moz-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);}

.etape-2 .blk-img-profil{padding: 0 20px;}
.etape-3 .blk-img-profil{padding: 0 10%;}

.blk-profil-data {text-align: left;padding-left: 5%;}
.blk-profil-data h2{font-family: 'inter-classic', Arial sans-serif;color: #FF66C4;text-align: left;padding-top: 10%;font-weight: bold;}
.etape-3 .blk-profil-data h2{color: #263C6A;text-align: center;padding-bottom: 5%;padding-top: 0;}
.blk-profil-data .blk-tarif-profil{font-family: 'inter-classic', Arial sans-serif;color: #FF66C4;font-size:16px;    text-align: left;}
.blk-profil-data h3{font-family: 'inter-classic', Arial sans-serif;font-size: 18px;font-weight: lighter;color:#000;    margin-top: 10px;text-align: left;}
.bouton-appel-tel{background: rgb(242, 74, 198);background: linear-gradient(90deg, rgba(242, 74, 198, 1) 0%, rgba(248, 118, 104, 1) 100%);margin-top: 70px;border: 0;font-weight: bold;padding: 5px 20px;max-width: 250px;width: 250px;border-radius: 10px;box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);
	-webkit-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);
	-moz-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);}
.bouton-appel-tel a{color: #fff;font-size: 20px;}

.bouton-appel-tel-desktop{border: 1px solid #263C6A;border-radius: 10px;padding: 0 10px 10px;margin-top: 50px;text-align: center;}
.bouton-appel-tel-desktop a{color: #263C6A;font-size: 25px;}
.bouton-appel-tel-desktop .ico-phone{transform: scaleX(-1);width: 35px;position: relative;top: 13px;}


.blk-dispo-green{display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;align-content: space-around;
justify-content: flex-start;color:#263C6A;font-size: 16px;padding-top: 20px;}
.blk-dispo-green-desktop{display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;align-content: space-around;justify-content: flex-end;color:#263C6A;font-size: 16px;padding-right:50px}

.blk-profil-informations {font-family: 'inter-classic', Arial sans-serif;text-align: left;color:#000;padding-left: 5%;padding-right: 5%; max-width: 400px;margin: 0 auto;}
.blk-profil-informations h4{font-size: 15px;color:#263C6A;font-weight: bold;padding-top:20px}

.blk-profil-informations .text-profil-plus {padding: 15px 0;color:#FF808B;}
.blk-profil-informations .text-profil-plus a{color:#FF808B;}
.blk-profil-informations .text-profil{color:#263C6A;font-weight: normal;}
.blk-profil-informations #text-next{display:none}

.blk-profil-informations.etape-3 {font-weight: normal;color:#263C6A;}
.blk-profil-informations.etape-3 h4{color:#263C6A}
.blk-profil-informations.etape-3 b{font-weight: normal;}

.blk-info-produit{font-family: 'inter-classic', Arial sans-serif;text-align:left;;color: #263C6A;font-weight: normal;padding-top: 20px;font-size: 15px;}
.blk-info-produit h4{color: #263C6A;font-size: 18px}
.blk-info-produit span{color:#FF66C4}

.blk-img-produit {padding: 50px 15px 10px}
.etape-3 .blk-img-produit {padding: 50px 10% 10px 10%}

.container-plateforme-profil .etape-3 .blk-dispo-green, .container-plateforme-profil .etape-3 .blk-info-produit {padding-left: 10%;}

.owl-carousel .owl-item .blk-produit img {width: 25% !important;padding: 0 10px;}

.blk-img-produit-3 {padding-top: 50px;}
.blk-img-produit-3 img{max-height: 250px;	box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
-webkit-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
-moz-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);}

/* slider */
.header-item{display: flex;flex-direction: row;flex-wrap: nowrap;align-content: space-around;justify-content: space-between;align-items: center;}
.text-item{max-width: 400px;margin: 0 auto;}
.border-chevron{fill: #000;min-width: 25px;max-width: 25px;position: relative;top: 10px;}
.text-item .text-title:hover {transform: scale(1.05);}
.hidden-text {overflow: hidden;max-height: 0;transition: max-height 0.5s ease, padding 0.5s ease;color: #263C6A;}

.display-vertical{margin-left: 120px;}





/**** domaines *****/
.button-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columns, each taking 1 fraction of space */
	gap: 15px; /* Space between buttons */
	padding: 20px 20px 20px 0; /* Padding around the grid itself */
	max-width: 420px; /* Optional: limit the maximum width of the grid */
	width: 100%; /* Make the grid take full width up to max-width */
}

.button {
	padding: 5px 20px; /* Vertical and horizontal padding inside buttons */
	border-radius: 8px; /* Rounded corners for buttons */
	border: 1px solid #263C6A; /* Dark purple border, consistent with the image */
	font-size: 14px; /* Slightly larger font size */
	font-weight: 500; /* Medium font weight */
	cursor: pointer; /* Indicates a clickable element */
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.1s ease; /* Smooth transitions for hover effects */
	text-align: center;
	color: #263C6A; /* Dark grey text color */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
	white-space: nowrap; /* Prevents text from wrapping to the next line */
	overflow: hidden; /* Hides overflowing content */
	text-overflow: ellipsis; /* Adds "..." if text is too long */
	display: flex; /* Use flexbox to center content vertically/horizontally */
	justify-content: center;
	align-items: center;
}

/* Specific background colors for each button, based on the image */
.amour, .famille {
	background-color: #f7eff7; /* Light pinkish/lavender */
}

.rencontre, .finances {
	background-color: #ffffff; /* White */
}

.mariage, .mon-ex {
	background-color: #f5f0ed; /* Light beige/tan */
}

/**** MA BOUTIQUE *****/
.boutique-container {
	display: flex;
	flex-direction: column; /* Empile l'en-tête et le soulignement verticalement */
	align-items: flex-start; /* Aligne le contenu à gauche dans le conteneur */
	background-color: #ffffff; /* Fond blanc pour le conteneur */
	padding: 50px 20px 20px 20px; /* Espacement intérieur du conteneur */
	border-radius: 8px; /* Coins légèrement arrondis pour le conteneur */
	margin: 0 auto;
	max-width: 400px;
	margin-bottom:25px;
	font-family: 'inter-classic', Arial sans-serif;
}

.boutique-header {
	display: flex;
	align-items: center; /* Aligne verticalement le texte et l'icône */
	margin-bottom:5px
}

.boutique-text {
	font-size: 20px; /* Grande taille de police pour "Ma Boutique" */
	font-weight: bold; /* Texte en gras */
	color: #3b3f63; /* Couleur bleu-violet foncé, correspondant à l'image */
	margin-right: 15px; /* Espacement entre le texte et l'icône */
}

.boutique-icon {
	font-size: 2.5em; /* Grande taille pour l'icône de loupe */
	color: #e03290; /* Couleur rose/magenta pour l'icône */
}

.boutique-underline {
	width: 50%; /* La ligne de soulignement prend toute la largeur de son parent (.boutique-container) */
	height: 3px; /* Épaisseur de la ligne de soulignement */
	background-color: #3b3f63; /* Couleur bleu-violet foncé, correspondant au texte */
	margin-top: 5px; /* Ajuster si plus d'espace est nécessaire sous la ligne */
}

/*****  Mes Forfaits  ******/
.forfaits-section-container {
    max-width: 430px;
    margin: 0 auto;
	width: 100%;
	background-color: #ffffff; /* Fond blanc pour la section principale */
	padding: 30px 20px 30px 40px;
	border-radius: 12px;
	font-family: 'inter-classic', Arial sans-serif;
	padding-left: 5%;
}

/* Titre principal */
.main-title-wrapper {
	position: relative; /* Pour positionner le soulignement */
	display: inline-block; /* Pour que le soulignement ne prenne pas toute la largeur */
	margin-bottom: 15px;
}

.main-title-wrapper h1 {
	font-size: 20px; /* Grande taille de police pour le titre */
	color: #263C6A; /* Couleur foncée pour "Mes Forfaits" */
	margin: 0;
	font-weight: 700;
}

.highlight-pink {
	color: #FF66C4;
}

.underline {
	position: absolute;
	bottom: -15px; /* Positionne la ligne sous le texte */
	left: 0;
	width: 50%; /* La ligne ne couvre qu'une partie de "Mes Forfaits" */
	height: 3px;
	background-color: #263C6A; /* Couleur foncée pour le soulignement */
	/* Pour aligner la ligne sous "Mes Forfaits" spécifiquement */
	/* Vous pourriez ajuster 'width' et 'left' ou utiliser un pseudo-élément sur h1 */
}

/* Paragraphe descriptif */
.description-text {
	font-size: 1.1em;
	color: #263C6A;
	margin-bottom: 30px;
	margin-top: 20px;
	line-height: 1.6;
	font-weight: normal;
}

/* Grille des cartes de forfaits */
.forfait-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales par défaut */
	gap: 20px; /* Espacement entre les cartes */
	justify-content: center; /* Centre les éléments de la grille */
}

.blk-card-grid{max-width: 350px;}

/* Style des cartes individuelles */
.forfait-card {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #F246CE;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column; /* Empile le contenu verticalement */
	align-items: flex-start; /* Aligne le texte à gauche dans la carte */
	text-align: left; /* Assure que le texte est aligné à gauche */
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative; /* Pour positionner le radio bouton */
	font-family: 'times', Arial sans-serif;
	font-weight: bold;
	font-size: 18px;
	max-height: 70px;
	padding: 4px 10px 0;
	max-width: 130px;
	min-width: 130px;
}

.forfait-card:last-child {
  max-width: 90%;
}

.forfait-card:hover {
	transform: translateY(-5px); /* Effet de soulèvement au survol */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

/* Style des couleurs de fond des cartes */
.card-pink { background-color: #FDE3E6; } /* Rose clair */
.card-beige { background-color: #F6ECD8; } /* Beige clair */
.card-blue-purple { background-color: #D9EAFF; } /* Bleu-violet clair */
.card-green { background-color: #D3FFDD; } /* Vert clair */
.card-yellow { background-color: #FFFAC2;padding-top: 15px !important;padding-bottom: 15px !important;} /* Jaune très clair */

/* Style du bouton radio */
.forfait-card input[type="radio"] {
	/* Cache le bouton radio par défaut */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute; /* Positionne le radio bouton en haut à gauche */
	top: 15px;
	left: 15px;
	width: 25px;
	height: 25px;
	border: 2px solid #ccc;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	background-color: #fff; /* Fond blanc pour le cercle */
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Style du point central du radio bouton quand il est coché */
.forfait-card input[type="radio"]:checked {
	border-color: #e03290; /* Bordure rose quand coché */
	background-color: #fff; /* Garde le fond blanc */
}

.forfait-card input[type="radio"]:checked::before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
	background-color: #e03290; /* Cercle intérieur rose */
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Style du contenu de la carte */
.forfait-duration {
	color: #000;
	font-size: 16px;
	font-weight: normal;
	position: relative;
	left: 7px;
}

.forfait-bonus {
	color: #000;
	margin-bottom: 5px;
	font-weight: lighter;
	font-size: 12px;
	position: relative;
	top: -7px;
}

.forfait-bonus.last-bonus{
	top: 0;
}

.forfait-price {
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	color: #FF66C4; /* Couleur rose pour le prix */
	align-self: flex-end; /* Aligne le prix à droite dans la carte */
	margin-top: auto; /* Pousse le prix vers le bas */
	font-family: 'inter-classic', Arial sans-serif;
	display: block;
	text-align: right;
	padding-right: 15%;
	font-size: 13px;
	position: relative;
	font-weight: normal;
	top: -14px;
	right: 1px;
}
.forfait-price.last-price{top: -7px;}

/* Carte spéciale qui prend toute la largeur */
.full-width-card {
	grid-column: 1 / -1; /* S'étend sur toutes les colonnes disponibles */
	text-align: center; /* Centre le texte dans cette carte spéciale */
	align-items: center; /* Centre le contenu verticalement dans cette carte */
	flex-direction: row; /* Met les éléments côte à côte pour cette carte */
	justify-content: center; /* Centre horizontalement si flex-direction row */
	padding-left: 50px; /* Plus d'espace pour le radio bouton */
	position: relative; /* Pour positionner le radio bouton */
}

.full-width-card .forfait-duration {
	margin-top: 0;
	margin-right: 15px; /* Espace entre durée et bonus */
}
.full-width-card .forfait-bonus {
	margin-bottom: 0;
}
.full-width-card .forfait-price {
	margin-top: 0;
	align-self: auto; /* Réinitialise l'alignement pour cette carte */
}

.full-width-card input[type="radio"] {
	position: absolute;
	left: 15px; /* Garde le radio bouton à gauche */
	top: 50%;
	transform: translateY(-50%);
}

/**** button call tel ****/
.blk-call-tel {
	font-family: 'inter-classic', Arial sans-serif;
	text-align: left;
	padding-left: 20px;
	color: #000;
	max-width: 400px;
  margin: 0 auto;
}
.blk-call-tel h2 {
	color: #263C6A;
	font-weight: bold;
	font-size: 16px;
}

/**** videos ****/
#display-mobile .videos, #display-mobile .img-profil-header-desktop{padding: 30% 15px;}
#display-mobile .video-responsive, #display-mobile .img-profil-header-desktop img {
	width: 100%;
	max-width: 450px;
		margin: 0 auto;
	height: auto;
	display: block; /* évite un petit espace sous la vidéo */
	box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
	-webkit-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
	-moz-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
}

/*** desktop  ***/
.blk-theme-consultation{padding-top:10px}
#display-desktop {display:none}
#display-desktop .title-desktop{font-family: 'inter-classic', Arial sans-serif;color:#263C6A;font-size: 28px;font-weight: normal;}
#display-desktop {padding-top: 30px;}
#display-desktop .bk-display-desktop{display: flex;}
#display-desktop .bk-display-desktop .container-plateforme-profil{padding-top: 0;}
#display-desktop .bk-display-desktop .container-plateforme-profil .blk-img-profil img{border-radius: 0;}
#display-desktop .bk-display-desktop .videos{max-width: 60%;}
#display-desktop .video-responsive, #display-desktop .img-profil-header-desktop {
  width: 600px;
  height: auto;
  display: block; /* évite un petit espace sous la vidéo */
	box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
-webkit-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
-moz-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);
}
#display-desktop .video-responsive.video-monica {
  width: 270px;margin-left:100px
}
#display-desktop .blk-profil-data h3{font-size: 16px;}
#display-desktop .blk-txt-tarif-desktop{display: flex;margin-top: 10px;}
#display-desktop .blk-txt-tarif-desktop .blk-all-produits{display: block;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container{max-width: 310px;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .main-title-wrapper {padding: 25px 0 0;display: block;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .main-title-wrapper span{display: block;font-size: 15px;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .description-text{margin-top: 0;padding-top: 10px;font-size: 12px;margin-bottom: 20px;}
#display-desktop .blk-txt-tarif-desktop .boutique-container {padding: 60px 20px 20px;}
#display-desktop .blk-txt-tarif-desktop .vignettes-profil {padding-top: 45px;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .forfait-cards-grid {gap: 10px;}

#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .forfait-bonus {font-size: 12px;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .forfait-card {padding: 5px 10px 0px 20px;font-size: 18px;max-height: 70px;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .forfait-price {display: block;text-align: right;padding-right: 15%;}
#display-desktop .blk-txt-tarif-desktop .forfaits-section-container .forfait-price.last-price{padding-right: 10%;}

#display-desktop .img-profil-header-desktop{width: 600px;}


/**** vignette ***/
.vignette-medium {border: 1px solid #FF66C4;border-radius: 10px;padding: 0;text-align: center;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);flex: 1 0 calc(50% - 10px); /* Par défaut, deux vignettes par ligne sur les petits écrans */
	margin-bottom: 10px; /* Espacement entre les lignes sur les petits écrans */}
.vignette-medium img {max-width: 100%;height: auto;border-radius: 5px;box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);-webkit-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);-moz-box-shadow: -1px 6px 5px -4px rgba(114,114,114,0.75);}
.nom {color: #263C6A;font-weight: bold;margin-top: 5px;text-align: left;font-size: 15px;}
.specialite {font-size: 11px;color: #263C6A;display: block;}
.bouton-appel {background: transparent;border: 0;}

.blk-produit{display:flex;flex-direction: row;flex-wrap: nowrap;align-content: space-around;justify-content: space-around;align-items: center;border: 1px solid #FF66C4;max-width: 375px;margin: 0 auto;padding: 4px 0;border-radius: 10px;font-family: 'inter-classic', Arial sans-serif;color:#263C6A;margin-bottom: 15px;box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);-webkit-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);
	-moz-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);}
.blk-produit .title-produit{font-size: 15px;font-weight: bold;}
.blk-produit .subtitle-produit{font-weight: normal;}
.blk-produit .price-produit{font-size:16px;font-weight: bold;}
.blk-produit .price-produit span{color:#FF66C4}
.blk-produit .btn-produit{background: rgb(255, 102, 196);background: linear-gradient(90deg, rgba(255, 102, 196, 1) 0%, rgba(255, 128, 139, 1) 100%);padding: 4px 15px;border-radius: 5px;color: white;font-size: 14px;margin-top: 40px;box-shadow: -1px 6px 5px -4px rgba(43, 43, 43, 0.75);-webkit-box-shadow: -1px 6px 5px -4px rgba(43, 43, 43, 0.75);
-moz-box-shadow: -1px 6px 5px -4px rgba(43,43,43,0.75);margin-right: 7px;}
.blk-all-produits{display: block;}

h1#title-boutique{color:#FF66C4;font-size: 25px;font-family: 'inter-classic', Arial sans-serif;padding-left: 20px;font-size: 20px;font-weight: 500;text-align: center;padding-top: 50px;padding-bottom:30px}

.vignettes-profil .blk-produit img{padding: 0 5px;border-radius: 10px;}
.vignettes-profil .blk-produit .btn-produit{margin-bottom: 5px;}


/* .blk-theme-consultation{display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: stretch;padding-top: 20px;}*/

/** menu **/
.blk-theme-consultation .theme-all {
	border: 2px solid #FF7361;
	border-radius: 15px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 15px;
}


.menu {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}
.menu-item {
	padding: 10px 15px;
	cursor: pointer;
	border-radius: 5px;
	background-color: white;
	color: black;
	border: 0 none;
}

.menu-item:hover {
	background-color: white;
	border-color: black;
	color: black;
}
.menu-item.active-menu {
	background-color: white;
	border-color: black;
	color: black;
}

.blk-theme-consultation .vignette-container {
	overflow: hidden; /* Cache la barre de défilement native */
	width: 100%; /* Le conteneur peut prendre toute la largeur disponible */
	/* OU définissez une largeur fixe qui affichera 1, 2 ou 3 vignettes selon vos besoins */
	/* Exemple pour une largeur fixe: width: 320px; */
}

.blk-theme-consultation .vignette-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap; /* Très important: les vignettes restent sur une seule ligne */
	overflow-x: hidden; /* Le overflow est géré par le conteneur parent */
	/* Pas besoin de scroll-snap-type si le défilement est purement JS */
	transition: transform 0.5s ease-in-out; /* Pour une transition douce */
	/* Le width: fit-content; que vous aviez précédemment empêcherait le défilement */
}

.blk-theme-consultation .vignette-group .vignette {
	flex-shrink: 0; /* Empêche les vignettes de rétrécir */
	margin-right: 10px; /* Espacement entre les vignettes */
	white-space: normal; /* Permet au texte de passer à la ligne */
	/* Définir une largeur ici est CRUCIAL pour un défilement précis. */
	/* Choisissez une valeur en fonction de votre design pour afficher 1, 2, 3... vignettes */
	width: 280px; /* Exemple: si chaque vignette fait 280px */
	/* Ou si vous voulez qu'elles s'adaptent à un certain nombre par ligne sur des écrans plus grands */
	/* width: calc(33.33% - 10px); si vous voulez 3 vignettes par ligne sur grand écran, mais cela rend le calcul de défilement plus complexe */

	/* Styles pour vos vignettes */
	background-color: #f0f0f0;
	padding: 15px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	box-sizing: border-box; /* Inclure padding et border dans la width */
}

.blk-theme-consultation .vignette-group .vignette:last-child {
	margin-right: 0;
}

.blk-theme-consultation .vignette-group.hidden {
	display: none;
}

.blk-theme-consultation .vignette-group.active {
	display: flex;
}
/*********************************/


.no-display-mob{display: none;}
.no-display{display: none;}
/*********************************/

.theme-ico {
	/* max-width: 22%; */
	max-width: 27%;
}

.theme-menu {
  margin-bottom: 20px;
  overflow-x: auto;
}

#category-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: 0;
}

#category-tabs li {
  padding: 10px 15px;
	padding-left:5px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

#category-tabs li.active {
  /* background-color: #ff7f50;
  color: white; */
	border: 1px solid #FF7361;
}

.theme-container {
  width: 100%;
  overflow: hidden;
	text-align: center;
}

.themes {
	margin:0 auto;
	max-width: 300px;
}

.theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  margin: 8px 0;
	text-align: center;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4)
}

.theme-icon {
  width: 28px;
  height: 28px;
}

.theme-item.tous{color: #FF66C4;border:1px solid #FF66C4;border-radius:15px;padding-left:15px;}
.theme-item.amour{color: #FF1D00;border:1px solid #FF1D00;border-radius:15px;padding-left:15px;}
.theme-item.rencontre{color: #F246CE;border:1px solid #F246CE;border-radius:15px;padding-left:15px;}
.theme-item.mon-ex{color: #FF66C4;border:1px solid #FF66C4;border-radius:15px;padding-left:15px;}
.theme-item.famille{color: #972B92;border:1px solid #972B92;border-radius:15px;padding-left:15px;}
.theme-item.mariage{color: #F17ECA;border:1px solid #F17ECA;border-radius:15px;padding-left:15px;}
.theme-item.carriere{color: #0A6FE5;border:1px solid #0A6FE5;border-radius:15px;padding-left:15px;}
.theme-item.finances{color: #F19E50;border:1px solid #F19E50;border-radius:15px;padding-left:15px;}


.themes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.slide-in {
  animation: fadeIn 0.4s ease-in forwards;
}

.slide-out {
  animation: fadeOut 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-40px); }
}




/*********************************/

@media (min-width: 655px) {
	.vignette-medium{margin-right: 10px;max-width: 160px;}
}


@media (min-width: 655px) {
	.blk-card-grid{max-width: 350px;width: 100%;margin: 0 auto;}
	.vignette-medium{max-width: 180px;}
	.forfaits-section-container.desktop{padding-right: 5%;}

}

@media (min-width: 700px) {
	.no-display-mob{display: block;}
}

@media (min-width: 768px) {
	.vignette-medium {flex: 1 0 calc(33.33% - 10px);}

	/** menu **/
}

@media (min-width: 800px) {
	.vignette-medium{max-width: 210px;}
}

@media (min-width: 991px) {
	h1#title-consultation{font-size: 25px;padding-left: 20px;}
	.vignette-medium {flex: 1 0 calc(25% - 10px);margin-bottom: 0;max-width: 190px;margin-right: 25px;}
	.blk-all-produits{display: flex;flex-direction: row;flex-wrap: nowrap;align-content: space-around;justify-content: space-around;align-items: center;}
	.blk-produit{max-width: 300px;}
	.blk-produit img{width: 22%;}
	.blk-text-produit{padding-left: 5px;}
	.blk-produit .subtitle-produit{font-size: 12px;}
	.blk-produit .title-produit{font-size: 12px;}
	.blk-produit .price-produit{font-size: 13px;}
	.blk-produit .btn-produit{padding: 2px 15px;}
	.forfaits-section-container{padding-left: 20%;padding-right: 20%;}
	h1#title-consultation{text-align: left;}
	h1#title-boutique{text-align: left;}
	.display-desk{margin-top:40px}

	/* carousel */
	.owl-carousel .owl-item .blk-produit img {width: 25% !important;padding: 0 5px;}

	/* visuel */
	#display-desktop {display:block}
	#display-mobile {display:none}

	.forfait-card:last-child {max-width: 100%;}
	.blk-head-profil {background: none;color:#F24AC6}
	.blk-head-profil #btn-back{background: #F24AC6;border-radius: 20px;border: 2px solid #F24AC6;}
	.blk-profil-informations{padding-left: 50px;}
	.blk-profil-data{padding-left: 0;}

	.bouton-appel-tel{width: 200px;margin-top: 0;}
	.blk-call-tel{padding-left: 15%;}

	.blk-profil-informations.etape-3.desktop-style{max-width: 600px;padding-left: 0;padding-top: 50px;}
	.blk-profil-informations.etape-3.desktop-style .text-item{max-width: 580px}
	.blk-txt-tarif-desktop-3 .blk-call-tel {padding-left: 0;max-width: inherit;}
	.bk-display-desktop .blk-txt-tarif-desktop-3 .blk-call-tel{margin-top: 100px;}
	.blk-consult-restant{color:#FF66C4;font-family: 'inter-classic', Arial sans-serif;font-weight: lighter;font-size: 18px;}


	.bk-display-desktop .boutique-container {max-width: inherit;padding-left: 0;}
	.bk-display-desktop .blk-all-produits.desktop{display: block;position: relative;left: -150px;}

	.blk-reseaux-sociaux{display: flex;flex-direction: row;flex-wrap: nowrap;align-content: space-around;justify-content: flex-start;align-items: flex-start;padding-top: 10px;}
	.blk-reseaux-sociaux p{border: 1px solid #000;border-radius: 50%;margin-left:5px;margin-right:10px}
	.blk-reseaux-sociaux p a span{font-size: 28px;position: relative;top: 2px;}

	.themes {display: grid;gap: 40px;grid-template-columns: repeat(3, 1fr);max-width: inherit;}
	.theme-ico {max-width: 22%;}

	#category-tabs li {padding: 10px 15px}
}
@media (max-width: 991px) {
	/* .boutique-container{padding: 50px 20px 20px 40px;} */
	.container-plateforme-profil{padding: 20px 0px 20px 0;}
}


@media (max-width: 767px) {
	#content-consultant h3{font-size: 17px;}
	#content-form h1{font-size:36px}
	#content-form p{font-size:14px}

	#content-proposal{padding:2rem 0}
	#content-proposal h2, #content-proposal h3{font-weight: normal;text-align: center;}
	#content-proposal h2 {font-size: 18px;}
	#content-proposal h3 {font-size: 16px;line-height: 2em;}

	#etude-etap-1 h4 {font-size: 17px;}

	#tchat-title h2{font-size:17px}

	/* menu */
	.vignette-group.slider .vignette {
		width: calc(100% - 10px);
		/* Une vignette par écran */
		margin-right: 0;
	}
    .content{padding: 0 0px 5px;}

}

@media (max-width: 680px) {
	.main-title-wrapper h1 {
			font-size: 20px;
	}
	.forfait-card {
		padding: 5px 15px;
	}
	.forfait-duration {
			font-size: 16px;
	}
	.forfait-bonus {
		font-size: 13px;
	}
	/* .forfait-price {
			font-size: 16px;
	} */
	 .container{padding-left: 0;padding-right: 0;}
}

@media (max-width:420px){
  /* RGPD */
  .container-rgpd{width:385px;}
}

@media (max-width: 400px) {
	/* .button-grid {
			grid-template-columns: 1fr;
			padding: 5px;
			gap: 8px;
	} */
	.button {
			padding: 10px 15px;
			font-size: 0.95em;
	}
	.vignette-medium{max-width: 160px;}
}

@media (max-width:360px){
  /* RGPD */
  .container-rgpd{width:330px;}
}

@media (max-width:320px){
  /* RGPD */
  .container-rgpd{width:295px;}
}