/*
Theme Name: Kookla
Theme URI: https://www.kookla.com
Author: Kookla Team
Author URI: https://www.kookla.com
Description: Marketplace de Centres d'Épilation Laser
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kookla
*/

/* =============================================================================
   HTML5 Reset
   ========================================================================== */

	audio:not([controls]) {display:none;}
	[hidden] {display:none;}
	
	abbr[title] {border-bottom:1px dotted;}
	b, strong {font-weight:500;}
	.clear {clear:both;}
	dfn {font-style:italic;}
	hr {display:block;height:1px;border:0;border-top:1px solid #CCC;margin:1em 0;padding:0;}
	ins {background:#FF9;color:#000;text-decoration:none;}
	mark {background:#FF0;color:#000;font-style:italic;font-weight:bold;}
	pre, code, kbd, samp {font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}
	pre {white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
	q {quotes:none;}
	q:before, q:after {content:"";content:none;}
	small {font-size:90%;}
	blockquote {background-color:#EEE;border:1px solid #DDD;margin:10px 0;padding:10px 30px;border-radius:3px;}
	
	dd {margin:0 0 0 40px;}
	nav ul, nav ol {list-style:none;list-style-image:none;margin:0;padding:0;}
	
	img {border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}

	
	figure {margin:0;}
	
	form {margin:0;}
	fieldset {border:0;margin:0;padding:0;}
	label {cursor:pointer;}
	button, input {line-height:normal;}
	button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:none;*overflow:visible;}
	button[disabled], input[disabled] { cursor: default; }
	input[type="search"] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
	input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance:none;}
	button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0;}
	textarea {overflow:auto;vertical-align:top;resize:vertical;}
	
	table {border-collapse:collapse;border-spacing:0;}
	td {vertical-align:top;}

    .z-100{z-index:100;}

/* =============================================================================
   General Styles
   ========================================================================== */
	
/* =============================================================================
   Structure
   ========================================================================== */

/* Header Sticky Styles */
html {
    scroll-behavior: smooth;
}

.topbar {
    position: relative;
    z-index: 51;
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.admin-bar header {
    top: 32px;
}

.bg-dark{
	background-color: #303030;
}

.bglightgrey{
	background-color: #f6f6f6;
}

.bgorange{
	background-color: #DAA520;
}

.dark-title{
	color: #444;
}

.radius-20{
	border-radius: 20px;
}

.button{
	border-radius: 30px;
	font-size: 14px;
    padding: 4px 16px;
    font-weight: 600;
}

.button-light{
	background-color: #fff;
	color: #303030;
}

.button.icon{
	display: flex;
	align-items: center;
	gap: 5px;
}

/** HEADER */

header a.account svg{
	font-size: 20px;
}

.logo-title{
	font-family: 'Prompt', sans-serif;
	font-weight: 500;
}

.logo-title a{
	color: #000;
}

.socials a:last-child{
	position: relative;
	margin-left: 25px !important;
}

.socials a:last-child:before{
    content: '';
    background-color: #fff;
    position: absolute;
    left: -14px;
    width: 1px;
    height: 18px;
    color: #fff;
}

.topbar .help a {
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
}

.topbar .help a:first-child{
	/*margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #fff;*/
}

/** MENU **/

#menu-menu-principal li a{
	text-transform: uppercase;
	font-weight: 300;
	color: #000;
}

#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16rem;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 70;
    display: flex;
    align-items: center;
}

#mobile-menu.open {
    transform: translateX(0);
}

#mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 55;
    display: none;
}

#mobile-overlay:not(.hidden) {
    display: block;
}

/** FORMS / BUTTONS **/

.acf-button.button {
	background-color: #000000; /* black */
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	transition: background-color 0.2s ease-in-out;
	border: none;
	cursor: pointer;
}

.hover\:bg-gray-300.bg-blue-600:hover{
	background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}

.acf-button.button:hover {
	background-color: #333333; /* dark gray */
}

.acf-form .acf-fields>.acf-field{
	padding-right: 0;
	padding-left: 0;
	border: none;
}

.acf-form input[type="text"],
.acf-form input[type="email"],
.acf-form input[type="number"],
.acf-form input[type="url"],
.acf-form input[type="password"],
.acf-form textarea,
.acf-form select {
	border: 1px solid #7e8993 !important;
	border-radius: px;
}

.acf-form ::placeholder,
.select2-selection__placeholder{
	color: #444 !important;
	opacity: 1;
}

.acf-form :-ms-input-placeholder { color: #444 !important; }     /* IE 10-11 */
.acf-form ::-ms-input-placeholder { color: #444 !important; }    /* Edge */

.acf-form .acf-field[data-width]+.acf-field[data-width]{
	border: none;
}

.acf-form .acf-field[data-width]+.acf-field[data-width].alignleft{
	margin-left: 4%;
}

/* Responsive pour les champs ACF à 50% de largeur */
@media (max-width: 767px) {
	.acf-form .acf-field[data-width] {
		width: 100% !important;
		margin-left: 0 !important;
	}
	
	.acf-form .acf-field[data-width]+.acf-field[data-width].alignleft {
		margin-left: 0 !important;
	}
}

.acf-form .select2-container .select2-selection--single{
	height: auto;
}

.acf-form .select2-container--default .select2-selection--single .select2-selection__rendered{
	height: inherit;
	line-height: inherit;
}

/** CONTACT **/

.cform{
    margin-top: -40px;
}

/** HOME **/

.main-slider {
    width: 100%;
    height: 700px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-content {
    margin: 0 auto;
    display: flex;
    align-items: center;
	height: 100%;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.slide-image {
	position: relative;
	height: 100%;
    flex: 1;
}

.slide-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
	position: absolute;
    bottom: -22%;
    top: inherit;
    left: -30px;
}

.slide-text {
    flex: 1;
	height: 100%;
	justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px;
}

.slide-text .title{
	font-size: 4em;
    line-height: 1em;
    font-weight: 600;
}

.slide-text .soustitre{
    font-size: 1.4em;
    margin: 30px 0;
}

/** LASERISTE / CENTRE **/

#booking-details-panel{
    z-index: 100;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-slider {
        height: 600px;
    }
    
    .slide-text .title {
        font-size: 3em;
    }
    
    .slide-text .soustitre {
        font-size: 1.2em;
        margin: 25px 0;
    }
    
    .slide-text {
        padding-left: 30px;
    }

    /** CONTACT **/

    .cform{
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .main-slider {
        height: 500px;
    }
    
    .slide-content {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .slide-image {
        flex: none;
        height: 200px;
        margin-bottom: 20px;
    }
    
    .slide-image img {
        position: relative;
        bottom: 0;
        left: 0;
        height: 100%;
        object-fit: contain;
    }
    
    .slide-text {
        flex: none;
        height: auto;
        padding-left: 0;
        align-items: center;
    }
    
    .slide-text .title {
        font-size: 2.5em;
        text-align: center;
    }
    
    .slide-text .soustitre {
        font-size: 1.1em;
        margin: 20px 0;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .main-slider {
        height: 450px;
    }
    
    .slide-content {
        padding: 15px;
    }
    
    .slide-image {
        height: 150px;
        margin-bottom: 15px;
    }
    
    .slide-text .title {
        font-size: 2em;
    }
    
    .slide-text .soustitre {
        font-size: 1em;
        margin: 15px 0;
    }
}

.slide-button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 1rem;
    transition: all 0.3s ease;
	text-transform: uppercase;
    font-weight: 500;
}

.slide-button:hover {
    background-color: #333;
}

.main-slider .swiper-slide:nth-child(even) .slide-content{
	flex-direction: row-reverse;
}

.main-slider .swiper-slide:nth-child(even) .slide-content .slide-text{
	padding-left: 3em;
}

.swiper-pagination-bullet-active {
    background: #000;
}

.presentation-wrapper{
	display: flex;
	gap: 1rem;
	height: 620px;
}

.presentation-content{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background-color: #f3f3f3;
	text-align: center;
	flex: 1;
	overflow: hidden;
}

.presentation-content svg{
	position: absolute;
}

.presentation-content:nth-child(1) svg:nth-child(1){
	top: 72%;
    left: 16%;
}

.presentation-content:nth-child(1) svg:nth-child(2){
	top: 65%;
    left: 12%;
    width: 15px;
    height: 15px;
}

.presentation-content:nth-child(1) svg:nth-child(3){
	top: 50%;
    right: 19%;
	width: 22px;
	height: 22px;
}

.presentation-content:nth-child(1) img{
	position: absolute;
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
}

.presentation-content:nth-child(2) svg:nth-child(1){
	top: 47%;
}

.presentation-content:nth-child(2) svg:nth-child(2){
	top: 82%;
    right: 38%;
    width: 15px;
    height: 15px;
    z-index: 1;
}

.presentation-content:nth-child(2) svg:nth-child(3),
.presentation-content:nth-child(3) svg:nth-child(3){
	display: none;
}

.presentation-content:nth-child(2) img{
	position: absolute;
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
}

.presentation-content:nth-child(3) svg:nth-child(1){
    top: 49%;
    left: 7%;
    width: 27px;
}

.presentation-content:nth-child(3) svg:nth-child(2){
    bottom: 29%;
    right: 15%;
    width: 18px;
}

.presentation-content:nth-child(3) img{
	position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    max-width: 90%;
}

h2 span{
	display: block;
}

.bonus-wrapper {
	display: grid; 
	grid-auto-columns: 1fr; 
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 1fr 1fr; 
	gap: 1rem; 
	grid-template-areas: 
	  "bonus1 bonus2"
	  "bonus1 bonus3"; 
  }

.bonus1 { grid-area: bonus1; aspect-ratio: 1 / 1; }
.bonus2 { grid-area: bonus2; background-color: #fff; }
.bonus3 { grid-area: bonus3; }

.bonus1 svg{
	position: absolute;
    top: 20%;
    left: 0;
    z-index: 0;
}

.bonus1 img{
	position: absolute;
}

.bonus1 p{
	font-size: 2em;
    font-weight: 400;
    margin-top: 10px;
}

.bonus1 a{
    position: relative;
    z-index: 1;
    margin-top: 20px;
    display: inline-block;
}

.bonus2{
	display: flex;
	flex-direction: column;
	gap: 20px;
    align-items: baseline;
}

.bonus2 svg{
	position: absolute;
    top: 0;
    left: -7%;
}

.bonus2 img{
	position: absolute;
    right: 5px;
    bottom: -38px;
}

.bonus2 p{
	font-size: 5em;
    line-height: 52px;
	color: #E61F7F;
}

.bonus2 span{
	display: block;
    font-size: 0.57em;
    font-weight: 400;
}

.bonus2 a{
    z-index: 1;
    position: relative;
    display: inline-block;
}

.bonus3 svg{
	position: absolute;
    right: -10%;
    top: 0;
}

.bonus3 img{
    position: absolute;
    left: 50%;
    top: 65%;
    width: 270px;
    transform: translate(-50%, -50%);
}

.bonus-content h2,
.bonus-content p{
	position: relative;
	z-index: 1;
}

.faq-question:hover {
    background-color: #f9fafb;
    border-radius: .5rem;
}

.faq-question[aria-expanded="true"] {
    border-radius: .5rem .5rem 0 0;
    background-color: #f9fafb;
}

.faq-answer {
    transition: all 0.3s ease-in-out;
}

.faq-item {
    border: 1px solid #e5e7eb;
}

/** HOME ZONES **/

#home-zones svg[data-partie="visage"] {
    height: 322px;
    width: auto;
}

#home-zones svg[data-partie="corps"] {
    height: 390px;
    width: auto;
}

#home-zones svg[data-partie="jambes"] {
    height: 390px;
    width: auto;
}

#home-zones svg[data-partie="intimite"] {
    height: 280px;
    width: auto;
}

#modal-agenda-centre{
	z-index: 100;
}


/** CENTRES **/

/* Liste déroulante du code postal */
.cp-suggestions {
	position: relative;
	z-index: 999;
	background: white;
	border: 1px solid #d1d5db; /* gray-300 */
	border-radius: 0.375rem;
	width: 100%;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
	margin-top: 4px;
	padding: 0;
	list-style: none;
}

.cp-suggestions li {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	transition: background 0.2s ease-in-out;
}

.cp-suggestions li:hover {
	background-color: #e0f2fe; /* blue-100 */
}

.cp-loader {
	font-style: italic;
	padding-left: 0.25rem;
}

/** LOADER **/

/* Styles pour les spinners et les états de chargement */
.spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	border-top-color: #3b82f6;
	animation: spin 1s ease-in-out infinite;
	margin-right: 8px;
	vertical-align: middle;
}

.spinner-large {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	border-top-color: #3b82f6;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

button.loading {
	opacity: 0.7;
	cursor: not-allowed;
}

#loading-overlay {
	transition: opacity 0.3s ease;
}

/** WOOCOMMERCE **/

.woocommerce form.login, .woocommerce form.register{
	border: none;
	padding: 0;
	margin: 0;
}

.woocommerce form.login h2, .woocommerce form.register h2{
	margin-bottom: 1rem;
}

/** CHECKOUT STYLES **/

#add_payment_method #payment ul.payment_methods li,
.woocommerce-cart #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li{
	margin-bottom: 10px;
}

#add_payment_method #payment ul.payment_methods li input,
.woocommerce-cart #payment ul.payment_methods li input,
.woocommerce-checkout #payment ul.payment_methods li input{
	margin: -4px 0 0;
	vertical-align: middle;
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img{
	display: inline-block;
}

/* Container principal du checkout */
.woocommerce-checkout {
    background: transparent;
}

/* Contrainte de largeur pour les éléments WooCommerce */
.woocommerce-form-coupon-toggle,
.woocommerce-notices-wrapper {
    max-width: 1280px !important; /* max-w-7xl */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important; /* Suppression du padding */
    padding-right: 0 !important;
}

@media (max-width: 1024px) {
    .woocommerce-form-coupon-toggle,
    .woocommerce-notices-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Style pour le bouton "choisir un autre pack" */
.btn-change-kcoin-pack {
    background-color: #f3f4f6 !important; /* gray-100 */
    color: #374151 !important; /* gray-700 */
    padding: 1rem 2rem !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.btn-change-kcoin-pack:hover {
    background-color: #e5e7eb !important; /* gray-200 */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: #374151 !important;
    text-decoration: none !important;
}

.btn-change-kcoin-pack:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* Style pour le bouton d'application du code promo */
.woocommerce-form-coupon .button {
    background-color: #f3f4f6 !important; /* gray-100 */
    color: #374151 !important; /* gray-700 */
    padding: 1rem 2rem !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.woocommerce-form-coupon .button:hover {
    background-color: #e5e7eb !important; /* gray-200 */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: #374151 !important;
    text-decoration: none !important;
}

.woocommerce-form-coupon .button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* Titres des sections */
.woocommerce-checkout h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

/* Champs de formulaire */
.woocommerce-checkout .form-row label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.woocommerce-checkout .form-row input[type="text"]:focus,
.woocommerce-checkout .form-row input[type="email"]:focus,
.woocommerce-checkout .form-row input[type="tel"]:focus,
.woocommerce-checkout .form-row input[type="password"]:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Bouton de commande */
.woocommerce-checkout .place-order .button {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-top: 20px;
}

.woocommerce-checkout .place-order .button:hover {
    background-color: #374151 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.woocommerce-checkout .place-order .button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* Tableau du récapitulatif */
.woocommerce-checkout .shop_table {
    border: none;
    background: transparent;
}

.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: transparent;
}

.woocommerce-checkout .shop_table th {
    font-weight: 600;
    color: #374151;
}

.woocommerce-checkout .shop_table td {
    color: #6b7280;
}

/* Total de la commande */
.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td {
    font-weight: 700;
    font-size: 1.125rem;
    color: #1f2937;
    border-bottom: 2px solid #000000;
    padding-top: 1rem;
}

/* Messages d'erreur et de succès */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border: none;
}

.woocommerce-error {
    background-color: #fef2f2;
    color: #dc2626;
    border-left: 4px solid #dc2626;
}

.woocommerce-message {
    background-color: #f0fdf4;
    color: #16a34a;
    border-left: 4px solid #16a34a;
}

.woocommerce-info {
    background-color: #eff6ff;
    color: #2563eb;
    border-left: 4px solid #2563eb;
    padding-left: 3rem !important;
}

#confirmation-popup,
#cancellation-modal{
    z-index:101 !important;
}

#creneau-popup{
    z-index: 51;
}



/* Amélioration des checkboxes et radios */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.woocommerce-checkout input[type="radio"] {
    border-radius: 50%;
}

/* Style pour les champs requis */
.woocommerce-checkout .required {
    color: #dc2626;
}

/* Animation pour les champs en focus */
.woocommerce-checkout .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-checkout .form-row:last-child {
    margin-bottom: 0;
}

/* Forcer l'affichage vertical des colonnes de facturation */
.woocommerce-checkout .col2-set {
    display: block !important;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 2rem;
}

.woocommerce-checkout .col2-set .col-2:last-child {
    margin-bottom: 0;
}

/** PACK KCOINS **/

.kcoins-packs-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}


.kcoins-packs-list li.product {
    display: flex;
    flex-direction: column;
    gap: 2em;
}


.kcoins-packs-list li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    text-align: center;
	color: #000;
}

.manquant-wrapper .manquant{
    display: flex;
    gap: 10px;
    align-items: center;
}

/** CONTENT **/

/** FOOTER */

#newsletter{
	margin-bottom: -180px;
    position: relative;
}

.newsletter{
	overflow: hidden;
    position: relative;
}

.newsletter svg,
.newsletter .newsletter-bg-svg{
	position: absolute;
    bottom: 0;
    left: -20%;
	top: 0;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}

@media (max-width: 640px) {
	.newsletter svg,
	.newsletter .newsletter-bg-svg{
		left: -40%;
		width: 180%;
	}
}

.newsletter-content{
	position: relative;
	z-index: 1;
}

.newsletter-content button{
	border: 3px solid #303030;
}

.sib-form{
	font-family: 'Prompt', sans-serif !important;
	width: 100%;
	max-width: 100%;
}

.sib-form-container{
	width: 100%;
	max-width: 100%;
}

.sib-form a,
.sib-form-container a{
	color: #266E9E !important;
	text-decoration: none !important;
}

@media (max-width: 640px) {
	.newsletter-content .sib-form-container {
		padding: 0;
	}
	
	.newsletter-content input[type="text"] {
		font-size: 16px !important; /* Évite le zoom sur iOS */
	}
	
	.newsletter-content button {
		font-size: 14px !important;
		padding: 10px 16px !important;
	}
}

#sib-form input[type="text"]{
    height: inherit;
	padding: .75rem .75rem .75rem 2.5rem;
	border: 1px solid rgba(209, 213, 219, var(--tw-border-opacity));
	width: 86%;
	font-size: .875rem;
    line-height: 1.25rem;
}

.footer-content-left{
    text-align: center;
}

.footer-content-left h3{
    font-size: 3em;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

/** MY ACCOUNT **/

form.lost_reset_password{
	width: 100%;
}

.mes-reservations{
	border: none;
	padding: 0;
}

.woocommerce-MyAccount-navigation-link.is-active {
    font-weight: 500;
}

/** SINGLE POST **/

.article-content {
    font-size: 1.125rem;
    line-height: 1.75;
}

.article-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1f2937;
}

.article-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content ul, .article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 1rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6b7280;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 2rem 0;
}

.article-content a.wp-block-button__link,
.article-content a.wp-block-button__link:hover{
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

/* Animation d'apparition pour les articles récents */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bg-gray-50 article {
    animation: fadeInUp 0.6s ease-out;
}

/* Amélioration des liens de navigation */
.article-content a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.article-content a:hover {
    color: #1d4ed8;
}

/* Style pour les tags */
.article-content .tag {
    display: inline-block;
    background-color: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    margin: 0.25rem;
    transition: background-color 0.2s ease;
}

.article-content .tag:hover {
    background-color: #e5e7eb;
}

/* =============================================================================
   Mobile First Media Queries
   ========================================================================== */

   /* 320px and greater */
   @media only screen and (min-width: 320px) {
	/* Styles here */
   }
   
   /* 480px and greater */
   @media only screen and (min-width: 480px) {
	/* Styles here */
   }
   
   /* 768px and greater */
   @media only screen and (min-width: 768px) {
	/* Styles here */
   }
   
   /* 1024px and greater */
   @media only screen and (min-width: 1024px) {
	/* Styles here */
   }
   
   /* Retina screens */
   @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
	/* Style adjustments for high resolution devices */
}

/* =============================================================================
   Non-Semantic Classes
   ========================================================================== */
   
   /* Custom Selection Styles */
   ::selection {background:#D31245;color:#FFF;text-shadow:none;}
   ::-webkit-selection {background:#D31245;color:#FFF;text-shadow:none;}
   ::-moz-selection {background:#D31245;color:#FFF;text-shadow:none;}
   
   /* Input focus styles */
   input:focus {outline:0;border:1px solid #0091BD;} /* Gets rid of blue glow on field focus, adds border color instead */
   
/* =============================================================================
   WordPress Core CSS Styles
   ========================================================================== */
   
   .alignnone {margin:5px 20px 20px 0;}
   .aligncenter,div.aligncenter {display:block;margin:5px auto 5px auto;}
   .alignright {float:right;margin:5px 0 20px 20px;}
   .alignleft {float:left;margin:5px 20px 20px 0;}
   .aligncenter {display:block;margin:5px auto 5px auto;}
   a img.alignright {float:right;margin:5px 0 20px 20px;}
   a img.alignnone {margin:5px 20px 20px 0;}
   a img.alignleft {float:left;margin:5px 20px 20px 0;}
   a img.aligncenter {display:block;margin-left:auto;margin-right:auto;}
   .wp-caption {background:#FFF;border:1px solid #F0F0F0;max-width:96%;padding:5px 3px 10px;text-align:center;}
   .wp-caption.alignnone {margin:5px 20px 20px 0;}
   .wp-caption.alignleft {margin:5px 20px 20px 0;}
   .wp-caption.alignright {margin:5px 0 20px 20px;}
   .wp-caption img {border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto;}
   .wp-caption p.wp-caption-text,.gallery-caption {font-size:11px;line-height:17px;margin:0;padding:0 4px 5px;}
   .sticky {}
   .bypostauthor {}

/* ==========================================================================
   Print styles
   ========================================================================== */

   @media print {
	* {background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;}
	a,a:visited {text-decoration:underline;}
	a[href]:after {content:" (" attr(href) ")";}
	abbr[title]:after {content:" (" attr(title) ")";}
	.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content:"";}
	pre,blockquote {border:1px solid #999;page-break-inside:avoid;}
	thead {display:table-header-group;}
	tr,img {page-break-inside:avoid;}
	img {max-width:100% !important;}
	@page {margin:0.5cm;}
	p,h2,h3 {orphans:3;widows:3;}
	h2,h3 {page-break-after:avoid;}
   }

/* Responsive */

@media (max-width: 1080px){

    /** HOME **/

    .bonus1{
        aspect-ratio: inherit;
    }

}

@media (max-width: 1024px) {
    .woocommerce-checkout .grid {
        grid-template-columns: 1fr;
    }

    .woocommerce-checkout .sticky {
        position: static;
    }

    /** HOME **/

    #home-slider,
    #home-presentation,
    #home-zones,
    #home-bonus,
    #rassurances,
    #home-blog,
    #newsletter,
    .content-recharger{
        padding-left: 30px;
        padding-right: 30px;
    }

    .presentation-wrapper{
        height: inherit;
    }

    .presentation-content img,
    .presentation-content svg{
        display: none !important;
    }

    .bonus3 img{
        width: 210px;
    }

    /** RECHARGER **/

    .kcoins-packs-list{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    /** HEADER **/

    .title_button{
        display: none;
    }

    /** HOME **/
    .presentation-wrapper{
        flex-direction: column;
    }

    .presentation-wrapper h2 span{
        display: inline;
    }

    .bonus-wrapper{
        display: flex;
        flex-direction: column;
    }

    .bonus1 {
        height: 250px;
    }

    .bonus1 img {
        width: 250px;
        right: 25px;
        bottom: -61px;
    }

}

@media (max-width: 782px){

    /** HEADER **/

    .admin-bar header {
        top: 46px;
    }
}

@media (max-width: 768px) {

    /** HOME **/

    #home-slider .slide-content{
        justify-content: center;
    }

    .bonus1,
    .bonus2,
    .bonus3{
        height: 200px;
    }

    .bonus1 img{
        width: 200px;
        bottom: -61px;
        right: 10px;
    }

    .bonus1 svg{
        left: -40%;
    }

    .bonus2 img {
        right: -10px;
        bottom: -70px;
        height: 260px;
    }

    .bonus2 p {
        font-size: 2em;
        line-height: 0.5rem;
        font-weight: 400;
    }

    .bonus2 span{
        display: inline;
        font-size: inherit;
    }

    .bonus2 svg{
        left: -20%;
    }

    .bonus3 img {
        top: inherit;
        width: 140px;
        transform: translateX(-50%);
        bottom: 20px;
    }

    /** FOOTER **/

    .footer-bottom p.copyright{
        text-align: center;
    }
}

@media (max-width: 639px){

    /** NL **/

    #sib-form input[type="text"]{
        width: calc(100% - 55px);
    }

}

@media (max-width: 600px){

    /** HEADER **/

    .admin-bar header {
        top: 0;
    }

    /** RECHARGER **/

    .manquant-wrapper{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .manquant-wrapper .manquant{
        flex-direction: column !important;
    }

    #montant-manquant-eur {
        flex-basis: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 500px){

    /** HOME **/

    .bonus1,
    .bonus2,
    .bonus3{
        display: flex;
        flex-direction: column;
        height: 320px;
        text-align: center;
        justify-content: flex-start;
    }

    .bonus1 img,
    .bonus2 img,
    .bonus3 img{
        right: inherit;
        left: 50%;
        transform: translateX(-50%);
    }

    .bonus2{
        height: 380px;
    }

    .bonus2 svg{
        height: 100%;
    }

    .bonus2 img{
        height: 280px;
    }

    .bonus2 h2,
    .bonus2 .text-base{
        margin: 0 auto;
    }

    .bonus2 a{
        width: 100%;
    }

    .bonus3 img{
        width: 280px;
        top: 35%;
    }

    /** RESA **/

    .filters-bar .filters{
        flex-direction: column;
        gap: 0.5rem;
    }

    .filters-bar .filters .filter-btn{
        width: 100%;
        justify-content: center;
    }

    #modal-agenda-centre .fc .fc-toolbar.fc-header-toolbar{
        flex-direction: column;
        gap: 5px;
    }

    #modal-agenda-centre .calendar-legend{
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /** RECHARGER **/

    .kcoins-packs-list{
        grid-template-columns: repeat(1, 1fr);
    }

    .manquant-wrapper .manquant{
        flex-direction: column !important;
        gap: 5px !important;
    }

    #montant-manquant-eur {
        flex-basis: 100% !important;
        text-align: center !important;
    }

}

/* =============================================================================
   Dashboard Gestionnaire Centre - Menu Toggle Responsive
   ========================================================================== */

@media (max-width: 1023px) {
    /* Animation de la flèche du menu toggle */
    #menu-arrow {
        transition: transform 0.3s ease;
    }
    
    /* Animation du menu qui s'ouvre/se ferme */
    #menu-container {
        transition: max-height 0.4s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
        overflow: hidden;
    }
    
    /* Menu caché sur mobile */
    #menu-container.menu-mobile-hidden {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        visibility: hidden;
    }
    
    /* Menu visible sur mobile */
    #menu-container:not(.menu-mobile-hidden) {
        max-height: 2000px; /* Assez grand pour contenir tout le menu */
        opacity: 1;
        margin-bottom: 1rem;
        visibility: visible;
    }

    #menu-container.closed{
        padding: 0;
    }
    
    /* Style du bouton toggle */
    #menu-toggle-btn {
        cursor: pointer;
        user-select: none;
    }
    
    /* Style du bouton fermer */
    #menu-close-btn {
        cursor: pointer;
        user-select: none;
    }

    /** LASERISTE **/

    #laseriste-calendar .fc-toolbar-title{
        font-size: 1.25em;
    }
}