.content 
{
	padding-bottom: 4em;
	font-family: 'open sans';
}

.content * 
{
	font-family: 'Open Sans';
}

.hero_banner
{
	display:flex;
	justify-content: center;
}

.paiement_mode_block .bt {
    margin: 0.6em;
}

h1 
{
	text-align: center;
	font-weight: bold;
	font-family: 'zilla_slab_semibold', serif !important;
}

.s_abonner_content_form_wrapper 
{
	max-width: 90vw;
	margin: auto;
	font-family: 'open sans';
}

/* center.deja_abonne_block 
{} */

center.deja_abonne_block a 
{
	color: var(--turquoise);
	font-weight: bold;
	/*     text-decoration: underline; */
}

center.deja_abonne_block a:hover 
{
	text-decoration: underline;
}

.annuel_mensuel_wrapper 
{
	/* width: 40em; */
	margin: auto;
	max-width: 100%;
	/* background-color: #ff000029; */
	text-align: center;

	font: var(--unnamed-font-style-normal) normal 600 var(--unnamed-font-size-20)/var(--unnamed-line-spacing-20) Outfit;
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-ffffff);
text-align: center;
font: normal normal 600 20px/20px Outfit;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

.periodicite_choice_block 
{
	width: 16em;
	display: inline-block;
	background-color: var(--background_color_transparent);
	margin: 1em;
	font-family: 'Brandon_Grotesque', sans-serif;
	padding: 1em;
	padding-bottom: 0;
	border-radius: var(--border_radius);
	transition: var(--transition_medium);
	transform: scale(.95);
	cursor: pointer;
	height: 13em;
}

.periodicite_choice_block:hover,
.periodicite_choice_block.selected 
{
	transform: scale(1);
	box-shadow: var(--box_shadow);
}

.periodicite_choice_block.unselected 
{
	opacity: .5;
	transform: scale(.8);
}

.black_circle 
{
	border-radius: 100%;
	display: inline-block;
	background-color: #303030;
	color: white;
	height: 8em;
	width: 8em;
	/* padding: 1em; */
	line-height: 1em;
	position: relative;
	transform: scale(.8);
	position: relative;
	top: 1em;
}

.black_circle::before 
{
	content: '';
	content: '\f394';
	font-family: 'uicons-solid-rounded' !important;
	/* background-color: white; */
	height: 1em;
	width: 1em;
	display: inline-block;
	position: relative;
	top: 0em;
	border-radius: 100%;
	font-size: 4em;
	/* padding-top: 1em; */
	z-index: 2;
}

.annuel_wrapper .black_circle::before 
{
	color: #ED9911;
}

.mensuel_wrapper .black_circle::before 
{
	color: #1CA19A;
}

.black_circle::after 
{
	content: '';
	background-color: white;
	height: 2.1em;
	width: 2.1em;
	display: inline-block;
	position: absolute;
	top: -0.6em;
	left: 3em;
	z-index: 0;
}

.v_center>div 
{
	margin: -0.4em;
}

.v_center 
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}

.promo_25_sept 
{
	background-color: var(--background_color);
	color: var(--text_color);
	line-height: 1.2em;
	padding-bottom: 0.6em;
}

.selection_circle 
{
	display: inline-block;
	/* background-color: red; */
	height: 1.6em;
	width: 1.6em;
	border-radius: 100%;
	border: var(--turquoise) 1px solid;
	margin-top: .4em;
}

.selected .selection_circle::before 
{
	opacity: 100%;
	transform: scale(1);
}

.selection_circle::before 
{
	content: '';
	display: inline-block;
	width: 70%;
	height: 70%;
	background-color: var(--rose);
	border-radius: 100%;
	position: relative;
	top: 8%;
	transform: scale(0);
	opacity: 0;
	transition: var(--transition_medium);
}

.titre_bloc_sous_periodicite 
{
	font-family: 'zilla_slab_semibold';
	font-size: 1.2em;
}

.mensuel_wrapper.periodicite_choice_block 
{
	background-color: #137873;
}

.annuel_wrapper.periodicite_choice_block 
{
	background-color: #FEF783;
}

.periodicite_choice_block .prix 
{
	font-family: 'Brandon_Grotesque', sans-serif;
	font-size: 2em;
	color: white;
}

.annuel_choices_wrapper,
.mensuel_choices_wrapper 
{
	text-align: center;
}

.tarif_block 
{
	display: inline-block;
	width: 13em;
	margin: 1em;
	vertical-align: middle;
	/* padding: 1em; */
	height: 12em;
	position: relative;
	background-color: var(--background_color);
	transition: var(--transition_medium);
	transform: scale(.9);
	border-radius: var(--border_radius);
	cursor: pointer;
	border-radius: var(--border_radius);
}

.tarif_block.selected,
.tarif_block:hover 
{
	transform: scale(1);
}

.tarif_block.selected 
{
	border-width: 3px;
	box-shadow: var(--box_shadow);
}

.mensuel_choices_wrapper .tarif_block.selected 
{
	background-color: var(--turquoise);
	color: white;
}

/* .annuel_choice_wrapper .tarif_block.selected 
{} */

.tarif_block.unselected 
{
	transform: scale(.8);
	opacity: .8;
}

.tarif_block em 
{
	display: block;
}

.tarif_block .v_center 
{
	padding: 1em;
}

.tarif_block .v_center .libelle::before 
{
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background-color: transparent;
	border-width: 2px;
	display: block;
	margin: auto;
	border-radius: 100%;
}

.tarif_block.selected .v_center .libelle::before 
{
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
	background-color: var(--rose);
	display: block;
	margin: auto;
	border-radius: 100%;
	border-width: 0px !important;
	transition: var(--transition_medium);
}

.annuel_choices_wrapper .tarif_block .v_center .libelle::before 
{
	border: orange 2px solid;
}

.mensuel_choices_wrapper .tarif_block .v_center .libelle::before 
{
	border: var(--turquoise) 2px solid;
}

.annuel_choices_wrapper .tarif_block 
{
	border: #E19D3A 3px solid;
	/* border-radius: var(--border_raduis); */
}

.annuel_choices_wrapper .tarif_block.selected 
{
	background-color: #fef783;
	color: white;
	border-color: #fef783;
	color: var(--noir_antracite);
}

.mensuel_choices_wrapper .tarif_block 
{
	border: var(--turquoise) 3px solid;
	/* border-radius: var(--border_raduis); */
}

table,
th,
td 
{
	border: 1px solid;
	border-collapse: collapse;
	border-radius: var(--border_raduis);
}

.tarifs_reduits_wrapper table 
{
	margin: auto;
	border: var(--turquoise) 4px solid;
	width: 40em;
	max-width: 100%;
}

.tarifs_reduits_wrapper table th 
{
	background-color: var(--turquoise);
	color: white;
}

.annuel_choices_wrapper .tarifs_reduits_wrapper table th 
{
	background-color: #FEF783;
	color: var(--noir_antracite);
	line-height: 1.2em;
	padding: .4em;
}

.tarifs_reduits_wrapper table tr 
{
	border: var(--turquoise) 1px solid;
}

.annuel_choices_wrapper .tarifs_reduits_wrapper table 
{
	border: #FEF783 4px solid;
}

.annuel_choices_wrapper .tarifs_reduits_wrapper table tr 
{
	border: #FEF783 1px solid;
}

em.tarifs_reduits_bt,
.retour_tarif_normal 
{
	cursor: pointer;
}

em.tarifs_reduits_bt 
{
	margin: 1.4em auto;
	display: inline-block;
	color: var(--turquoise);
	text-decoration: underline;
	font-size: 0.8em;
}

.tarifs_reduits_wrapper 
{
	width: 40em;
	margin: 1em auto;
	max-width: 90vw;
}

.retour_tarif_normal.bt 
{
	display: inline-block;
	width: auto;
	margin: 1em 0;
	margin-left: -3em;
}

.retour_tarif_normal 
{
	width: 100%;
	text-align: left;
	max-width: 40em;
	margin: auto;
}

.tarif_bloque_info 
{
	width: 90%;
	margin: auto;
}

.tarif_bloque_info>.pub 
{
	width: 90%;
	margin: auto;
	display: block;
}

.cadre 
{
	max-width: 90%;
	margin: auto;
	border: var(--text_color) 1px solid;
	border-radius: var(--border_radius);
	padding: 2em 1em;
	text-align: center;
}

.cadre h4 
{
	font-family: 'zilla_slab_semibold';
	font-size: 1.7em;
}

.icone_LSF_trad 
{
	display: inline-block;
	width: 2em;
	height: 2em;
	cursor: pointer;
}

.icone_LSF_trad::before 
{
	display: none;
}

.dark_mode .icone_LSF_trad 
{
	filter: invert(1);
	display: inline-block;
}

.LSF_trad_wrapper .slideToggler_content 
{
	margin: 2em auto;
}

.LSF_trad_video.video 
{
	padding: 0;
}

.user_info_form_wrapper 
{
	width: auto;
	max-width: 100%;
	width: 40em;
	margin: auto;
	margin-bottom: 4em;
	text-align: center;
	position: relative;
}

.user_info_form_wrapper h3 
{
	font-family: 'zilla_slab_semibold';
}

.s_abonner_content_form_wrapper .input_wrapper:not(.type_radio) 
{
	width: 100%;
	margin: auto;
	height: 4em;
	padding-top: 0.4em;
	height: auto;
	margin-bottom: 0.9em;
}
@media screen and ( min-width: 600px) 
{
	.s_abonner_content_form_wrapper .input_placeholder 
	{
		display: inline-block;
		width: 11em;
		position: relative;
		left: 0;
		transform: unset;
		margin: 0;
		padding: 0;
		font-style: normal;
		font-family: 'open sans';
		opacity: 100%;
		height: auto;
	}
	.s_abonner_content_form_wrapper input 
{
	display: inline-block;
	width: calc(100% - 11.3em);
	font-family: 'open sans';
	/* float: right; */
}
}




.field_set_label 
{
	/* display: flex; */
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-content: center;
	position: relative;
	width: 100%;
	text-align: left;
}

.field_set_label .txt 
{
	font-family: 'zilla_slab_semibold';
	font-size: 1.8em;
	width: auto;
	position: relative;
	z-index: 2;
	background-color: var(--background_color);
	display: inline-block;
	padding-right: 0.6em;
}

.field_set_label::after 
{
	content: '';
	display: inline-block;
	background-color: var(--jaune);
	height: 4px;
	width: auto;
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
@media screen and ( min-width: 600px) 
{
	.user_info_form_wrapper .input_wrapper:not(.type_radio) 
	{
		display: inline-block;
		margin: 0.6em 0em;
		text-align: left;
		width: 100%;
		max-width: 100%;
		/* display: flex; */
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 2em;
		align-content: center;
		align-items: center;
	}
}


.user_info_form_wrapper .input_wrapper:not(.type_radio) * 
{
	vertical-align: middle;
	/* vertical-align: unset; */
}

/* .input_wrapper.text.type_text.billing_address.required 
{
	width: 30em;
	max-width: 100%;
} */

@media screen and ( max-width: 600px) 
{
	.input_wrapper.text.type_text.billing_address.required 
	{
		width: 30em;
		max-width: 100%;
		width: 14em;
	}
}

/* .input_wrapper.text.type_text.billing_address_complement 
{
	width: 14em;
} */

.user_info_form_wrapper .error_block 
{
	text-align: center;
	font-style: italic;
	opacity: .5;
	display: block;
	width: 20em;
	float: right;
	position: relative;
	right: 0em;
}

/* .input_wrapper.email.type_email.email.required,
.input_wrapper.email.type_email.billing_email 
{
	width: 20em;
	margin: .6em auto;
	display: block;
} */

/* .input_wrapper.text.type_text.display_name 
{
	display: block;
	width: 20em;
	margin: .6em auto;
} */

/* .input_wrapper.text.type_text.first_name.required,
.input_wrapper.text.type_text.billing_first_name 
{}

.input_wrapper.text.type_text.last_name.required,
.input_wrapper.text.type_text.billing_name 
{}

.input_wrapper.phone.type_phone.phone.required 
{}

.input_wrapper.text.type_text.adresse.required,
.input_wrapper.text.type_text.billing_adresse.required 
{
	width: 30em;
}

.input_wrapper.text.type_text.adress_complement,
.input_wrapper.text.type_text.billing_cplmt_adresse 
{}

.input_wrapper.text.type_text.CP.required,
.input_wrapper.text.type_text.billing_CP.required 
{}

.input_wrapper.text.type_text.ville.required,
.input_wrapper.text.type_text.billing_Ville.required 
{}

.input_wrapper.text.type_text.pays.required,
.input_wrapper.text.type_text.billing_Pays.required 
{}

fieldset.checkBox_multi_wrapper.facturation_idem 
{} */

.inline_checkbox_wrapper 
{
	text-align: center;
	width: 100%;
	display: block;
}

/* .input_wrapper.text.type_text.billing_company 
{} */

.justif_label:not(.justif_aucun) 
{
	width: 20em;
	margin: auto;
	margin-bottom: 1em;
	max-width: 100%;
}

.justif_label:not(.justif_aucun) 
{
	background-color: var(--turquoise);
	border-radius: var(--border_radius);
	color: white;
}

input#ok_CGU 
{
	display: inline-block;
	width: auto;
	width: 1em;
	height: 1em;
	display: none;
}

/* input#ok_CGU 
{} */

.inline_checkbox_wrapper 
{
	display: inline-block;
	text-align: center;
	text-align: left;
	margin: 1em auto;
	position: relative;
	width: 24em;
	position: relative;
	padding-left: 3em;
	margin-bottom: 3em;
	max-width: 100%;
}

.inline_checkbox_wrapper.ok_CGU_wrapper a 
{
	text-decoration: underline;
	font-size: .8em;
}

.inline_checkbox_wrapper input:checked+label::before 
{
	content: '✓';
	font-weight: bold;
	/* font-size: 2em; */
	color: var(--turquoise);
	transition: var(--transition_medium);
}

/* .inline_checkbox_wrapper label 
{} */

.inline_checkbox_wrapper label::before 
{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: var(--turquoise) 1px solid;
	border-radius: var(--border_radius);
	vertical-align: middle;
	margin-right: 1em;
	line-height: 0.5em;
	color: #1ca19a00;
	font-size: 2em;
	transition: var(--transition_medium);
	position: absolute;
	left: 0;
	top: 0.1em;
}

.payment_form 
{
	width: 40em;
	margin: auto;
	margin-bottom: 4em;
	text-align: center;
	max-width: 100%;
}

.payment_form .error_block 
{
	margin: 1em auto;
	width: 18em;
	margin-top: 0;
}

.payment_block 
{
	border: var(--turquoise) 1px solid;
	border-radius: var(--border_radius);
	padding: 1em;
	text-align: center;
	margin: 1em auto;
	/* min-width: 23em; */
	width: auto;
	max-width: calc(100% - 4em);
	/* overflow: auto; */
	max-width: 100%;
}

.payment_block .bt_payment_mode 
{
	cursor: pointer;
	background-color: var(--turquoise);
	display: block;
	padding: .4em;
	border-radius: var(--border_radius);
	color: white;
	height: 6em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

/* .bt_payment_mode * 
{
	vertical-align: top;
} */

.bt_payment_mode label 
{
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	width: 19em;
	line-height: 1.3em;
	padding: 1em;
}

.bt_payment_mode .tarif_payment_mode 
{
	/* background-color: blue; */
	display: inline-block;
	height: 1em;
	width: 5rem;
	font-weight: bold;
	vertical-align: middle;
	text-align: right;
}

.bt_payment_mode .logo_payment 
{
	display: inline-block;
	width: 5em;
	/* background-color: red; */
	height: 100%;
	vertical-align: middle;
	background-size: contain;
	/* margin: 0 1rem; */
	margin-left: 0.5rem;
}

.logo_payment.SEPA 
{
	background-image: url(../../_theme/Jess_boroy_V1/icons/icone_SEPA.png);
}
.payment_block .waiting {
    display: block;
    background-image: url(../../_theme/icons/loader_ping_white.gif);
    height: 100%;
    width: 100%;
    /* background-color: red; */
    padding: 1em;
    background-position: top center;
    padding-top: 0em;
    /* background-size: 8em; */
    margin: auto;
}

.logo_payment.CB 
{
	background-image: url(../../_theme/Jess_boroy_V1/icons/icone_CB.png);
}

.STRIPE_ABO_CB_pay_bt.bt 
{
	width: 18em;
	margin-top: 1em;
	max-width: 100%;
}

.STRIPE_ABO_CB_pay_bt.bt.waiting::before,
.bt.sepa_pay_bt.waiting::before
{
	content: '';
	/* background-color: red; */
	height: 2em;
	width: 2em;
	background-image: url(../../_theme/icons/loading_simple.gif);
	background-size: contain;
	/* background-image: url(../../_theme/icons/loading_rolling_cube.gif); */
	/* mix-blend-mode: color-dodge; */
	/* filter: invert(1); */
	/* background-image: url(../../_theme/icons/loading_playing_dots.gif); */
	/* width: 6em; */
	/* background-size: cover; */
	background-position: center;
}

.paiement_form 
{
	padding: 2em 0;
}

.sepa_pay_bt_wrapper 
{
	display: block;
	clear: both;
	margin: 1em;
	margin-top: 2em;
}

.bt.save_chq 
{
	margin: 1em auto;
}
/* 
div#ABO_SEPA 
{} */

div#ABO_CB,
div#ABO_SEPA 
{
	background-color: #f0f0f0;
	padding: .4em;
	border-radius: var(--border_radius);
	text-align: center;
	width: 18em;
	margin: auto;
	border: var(--turquoise) 1px solid;
}

.OK_abonnement_confirm 
{
	text-align: center;
	/* background-color: var(--turquoise); */
	width: 40em;
	margin: 2em auto;
	border-radius: var(--border_radius);
	padding: 1em;
	/* color: white; */
	display: block;
	padding-bottom: 4em;
	border: var(--turquoise) 1px solid;
	max-width: 100%;
}

a.last_article_block {
    width: 100%;
    height: auto;
    position: relative;
    margin: 2em auto;
    display: inline-block;
}

a.last_article_block h2 {
    font-family: 'zilla_slab_semibold';
    margin: 0;
}

a.last_article_block .last_article_infos_wrapper {
    display: inline-block;
    margin: 1em;
    background-color: var(--background_color);
    color: var(--text_color);
    height: auto;
    width: 30em;
    border-radius: var(--border_radius);
}
a.last_article_block .article_thumb {
    width: 8em;
    height: 5em;
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

a.last_article_block .article_text_wrapper {
    display: inline-block;
    width: calc(100%  - 9em);
    vertical-align: middle;
    padding: .4em;
}

a.last_article_block .article_title {
    font-family: 'zilla_slab_semibold';
    font-size: 1.4em;
    line-height: 1em;
    text-align: left;
}

@media screen and ( max-width:600px)
{
	.hero_banner img 
	{
		content: url(../../_theme/images/2024_Promo_Banniere_site_mobile.png);
	}
}























/* ========================
CSS JULIEN PROVISOIRE  2025
======================== */



.bouton-modifier-produit button {
    display: block;
    width: 20%;
    padding: 10px;
    background-color: #ED9911;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px auto; /* Centrage horizontal */
    font-size: 18px;
    text-align: center; /* S'assure que le texte est bien centré */
}




/* Style de base du bouton */
.bouton-suivant button {
    display: block;
    width: 20%;
    padding: 10px;
    background-color: #137873; /* Fond vert */
    color: white; /* Texte blanc */
    border: 2px solid #137873; /* Bordure de couleur verte */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur de pointeur */
    font-size: 18px;
    transition: none; /* Pas de transition pour éviter le mouvement */
}

/* Au survol du bouton (changement de fond uniquement) */
.bouton-suivant button:hover {
    background-color: #115d58; /* Fond plus foncé lors du survol */
    color: white; /* Le texte reste blanc */
    border: 2px solid #115d58; /* La bordure devient la même couleur que le fond au survol */
}

/* Lors du clic (état actif) */
.bouton-suivant button:active {
    background-color: #0c4d47; /* Fond encore plus foncé lors du clic */
    color: white; /* Le texte reste blanc */
    border: 2px solid #0c4d47; /* Bordure plus foncée pour rester cohérent */
}

/* Lors du focus sur le bouton */
.bouton-suivant button:focus {
    background-color: #0c4d47; /* Fond plus foncé lors du focus */
    color: white; /* Le texte reste blanc */
    outline: none; /* Retirer le contour du focus */
    border: 2px solid #0c4d47; /* Bordure plus foncée lors du focus */
}







.bouton-choixproduit {
    display: flex;
    align-items: center;
    gap: 20px; /* Espacement entre les éléments */
    padding: 10px 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.titre-produit {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0;
}



.tarif_block_produit {

   padding: 1%;

 display: inline-block;
	width: 13em;
	margin: 1em;
	vertical-align: middle;
	/* padding: 1em; */
	position: relative;


}



.tarif_block_produit.selected,
.tarif_block_produit:hover 
{

	color: #ffffff; 
}


/* Chaque produit */
.tarif_block_produit > div {
    background-color: #fff; /* Fond blanc */
    border: 1px solid #ddd; /* Bordure fine pour chaque produit */
    border-radius: 8px; /* Coins arrondis */
    padding: 20px;
    width: 100%; /* Largeur de chaque produit */
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Ajouter un espacement vertical entre les lignes si besoin */
}

/* Titre du produit */
.titre-produit {
	font-family: 'open sans';
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
 width: 100%; 


}

/* Prix du produit */
.prix-produit {
	font-family: 'open sans';
    font-size: 1.7em;
    font-weight: bold;
    color: #2d9cdb; /* Une couleur pour le prix */
  width: 100%; 
}

/* Bouton Choisir */
.bouton-produit {
    background-color: #007bff; /* Bleu vif */
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 100%; /* Le bouton prend toute la largeur */
}

/* Effet de survol du bouton */
.bouton-produit:hover {
    background-color: #0056b3; /* Bleu plus foncé */
    transform: scale(1.05); /* Effet de survol légèrement plus grand */
}




/* Style de base du bouton */
button {
    background-color: transparent; /* Fond transparent */
    color: #4CAF50; /* Couleur du texte par défaut (vert) */
    border: 2px solid #137873; /* Bordure verte et fine par défaut */
    cursor: pointer; /* Curseur qui change au survol */
    border-radius: 10px; /* Coins arrondis */
    padding: 4%; /* Ajuste l'espacement interne du bouton */
    transition: all 0.3s ease; /* Transition fluide pour tous les changements */
}

/* Au survol du bouton (changement de taille de la bordure) */
button:hover {
    border-width: 10px; /* La bordure devient plus épaisse */
    border-color: #137873; /* Bordure verte au survol */
    color: #137873; /* Texte vert au survol */
}

/* Lors du clic (état actif) */
button:active {
    background-color: #1CA19A; /* Fond vert lors du clic */
    color: white; /* Texte blanc */
}

/* Lors du focus sur le bouton (par exemple, après avoir cliqué ou utilisé Tab) */
button:focus {
    outline: none; /* Retirer le contour de focus */
    background-color: #1CA19A; /* Fond vert lors du focus */
    color: white; /* Texte blanc */
}




@media (max-width: 600px) {
	button {
        width: 100%; 
    }


    .bouton-modifier-produit button {

    width: 100%;
	}

	.bouton-suivant button {

    width: 100%;
	}


}








/* ========================
CSS JULIEN PROVISOIRE  2025
======================== */

       .formulaire-compte {
                padding: 5%;
                background: #f9f9f9;
                border-radius: 8px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            }

            .formulaire-compte .form-group {
                margin-bottom: 15px;
            }

            .formulaire-compte label {
                font-weight: bold;
                display: block;
                margin-bottom: 5px;
            }

            .formulaire-compte input[type="text"],
            .formulaire-compte input[type="email"],
            .formulaire-compte input[type="tel"],
            .formulaire-compte input[type="password"],
            .formulaire-compte textarea,
            .formulaire-compte select {
                width: 100%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                margin-top: 5px;
            }

            .formulaire-compte .radio-group {
                display: flex;
                align-items: center;
                gap: 15px;
                margin-top: 5px;
            }

            .formulaire-compte input[type="radio"] {
                margin-right: 5px;
            }

            .formulaire-compte button {
                display: block;
                width: 100%;
                padding: 10px;
                background-color: #137873;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                margin-top: 20px;
                 font-size: 18px;
            }

            .formulaire-compte button:hover {
                background-color: #137873;
                  color: white;
            }


            .formulaire-compte .checkbox-group {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .formulaire-compte input[type="checkbox"] {
                width: 18px;
                height: 18px;
                margin: 0;
            }

            .formulaire-compte a {
                text-decoration: none;
                color: #137873;
            }

            .formulaire-compte a:hover {
                color: #137873;
            }











/* /////////////////////// CSS uniquement la 1er page */


/* Style de base */
* {
  box-sizing: border-box;
}

.pourquoisabonner {
  font: bold 32px/28px 'Zilla Slab', sans-serif;  /* Utilisation d'une police fixe */
  letter-spacing: 0px;
  color: #303030;
  text-align: center;
  opacity: 1;
  padding-bottom: 2%;
}

.fond_gris {
  width: 100%;
  padding: 2%;
  background: transparent linear-gradient(135deg, #D9D7D733 0%, #EDEDED 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
}

/* Wrapper principal contenant tous les cadres */
.image-text-container-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 249px); /* 3 colonnes pour les grands écrans */
  gap: 20px;
  justify-content: center;  /* Centre les colonnes */
  justify-items: center;    /* Centre chaque cadre individuellement */
  align-items: center;      /* Centre verticalement chaque cadre */
  margin-bottom: 40px;
}

/* Wrapper pour la deuxième ligne avec 2 éléments centrés */
.second-row {
  display: grid;
  grid-template-columns: repeat(2, 249px); /* 2 colonnes pour la deuxième ligne */
  gap: 20px;
  justify-content: center;  /* Centre les colonnes */
  justify-items: center;    /* Centre chaque cadre individuellement */
  align-items: center;      /* Centre verticalement chaque cadre */
  margin-bottom: 40px;
}

/* Chaque cadre individuel */
.image-text-container {
  width: 249px;
  height: 318px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Image de l'icône */
.icon-img {
  width: 70%;
  margin-bottom: -5%;
}

/* Texte dans le cadre blanc */
.text-overlay {
  margin-top: 20px;
  text-align: center;
  background-color: transparent;
}

.description {
  color: black;
  font-size: 14px;
  line-height: 1.5;
  font: normal normal normal 14px/20px Open Sans;
  letter-spacing: 0px;
  color: #303030;
}

.highlight-text {
  font-weight: bold;
}

/* Image d'arrière-plan dans chaque cadre */
.image-trac {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -1; /* Assurez-vous que l'image est derrière le texte */
  background: #FFFFFF;
  box-shadow: 0px 3px 6px #00000029;
  opacity: 1;
}

/* Media Queries pour les petits écrans */

/* Pour les tablettes et petits écrans (max-width: 768px) */
@media (max-width: 768px) {
  .image-text-container-wrapper {
    grid-template-columns: 1fr; /* 1 colonne sur les petits écrans */
  }

  .second-row {
    grid-template-columns: 1fr; /* 1 colonne sur les petits écrans */
  }

  .icon-img {
    width: 80%; /* Ajuster la largeur de l'image pour les petits écrans */
  }

  .description {
    font-size: 12px; /* Réduire la taille du texte pour les petits écrans */
  }

  .highlight-text {
    font-size: 14px; /* Ajuster la taille du texte en gras */
  }
}

/* Pour les très petits écrans (max-width: 480px) */
@media (max-width: 480px) {
  .image-text-container-wrapper {
    grid-template-columns: 1fr; /* 1 colonne */
  }

  .icon-img {
    width: 85%; /* Ajuster encore la largeur de l'icône pour les très petits écrans */
  }

  .description {
    font-size: 11px; /* Réduire encore la taille du texte */
  }

  .highlight-text {
    font-size: 13px; /* Ajuster la taille du texte en gras pour les petits écrans */
  }
}






/* Conteneur principal */
.sabonner-container {
  display: flex;
  justify-content: center; /* Centre les colonnes */
  align-items: center; /* Aligne verticalement */
  gap: 30px; /* Réduit l'espace entre les colonnes */
  width: 100%;
  max-width: 900px; /* Largeur max pour éviter trop d'écart */
  margin: auto; /* Centre le bloc */
}

/* Colonne gauche (Titre + checkboxes) */
.sabonner-left-column {
  flex: 1; /* Prend l'espace dispo */
  max-width: 50%; /* Limite la largeur */
}

/* Titre "Accédez à l'info en LSF" */
.sabonner-accdez-linfo-en-lsf {
  font: bold 24px/32px 'Open Sans', sans-serif;
  color: #000;
  margin-bottom: 15px;
}

/* Groupe des checkboxes */
.sabonner-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espacement entre les cases */
}

/* Chaque case à cocher */
.sabonner-checkbox {
  display: flex;
  align-items: center;
  gap: 10px; /* Réduit l'espace entre l'icône et le texte */
}

/* Image checkbox */
.sabonner-checkbox img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0; /* Empêche l'image de se réduire en mobile */
}

/* Texte des checkboxes */
.sabonner-checkbox label {
  font: normal normal normal 18px/25px Open Sans;
  color: #000000;
  text-align: left;
  cursor: pointer;
  flex: 1; /* Permet au texte de s'ajuster proprement */
}

/* Colonne droite (Image) */
.sabonner-right-column {
  flex: 1;
  display: flex;
  justify-content: center; /* Centre l'image */
  align-items: center;
}

/* Image principale */
.sabonner-right-column img {
  max-width: 80%; /* Ajuste la taille */
  height: auto;
}

/* 📱 RESPONSIVE : Ajustement sur mobile */
@media (max-width: 768px) {

	  .pourquoisabonner {
    font-size: 24px; /* Réduction pour éviter le saut de ligne */
    line-height: 32px;
  }

  
  .sabonner-container {
    flex-direction: column; /* Passe en colonne */
    text-align: center;
    gap: 20px; /* Ajuste l'espace entre les éléments */
  }

  .sabonner-left-column,
  .sabonner-right-column {
    max-width: 100%;
    text-align: left; /* Remet le texte à gauche */
  }

  .sabonner-checkbox {
    justify-content: flex-start; /* Aligne correctement */
    gap: 8px;
  }

  .sabonner-right-column {
    justify-content: center; /* Centre l'image */
  }

  .sabonner-right-column img {
    max-width: 70%; /* Ajuste la taille */
  }
}