/*
Theme Name: Learts Child
Theme URI: https://learts.thememove.com/
Author: ThemeMove
Author URI: https://thememove.com/
Version: 1.0
Template: learts
*/

body a {
	color: #5c8ead;
}

body .site-footer {
	margin-top: 0 !important;
}

body .main-container {
	padding-top: 40px;
	background: #F5F5F5;
}

body .main-container .container .entry-content .wpb-content-wrapper .vc_row {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

body .post .entry-content p {
	font-weight: initial;
}

body .wpb_wrapper p {
	font-size: 18px;
	padding-bottom: 14px;
}

body .is-sticky, body .is-sticky > div, .site-header.sticky-header .site-logo img {
	height: 65px !important;
	max-height: initial;
}

.logo-mobile {
	height: 60px;
}

body #cmplz-cookiebanner-container .cmplz-buttons {
	flex-direction: row;
}

body #cmplz-cookiebanner-container .cmplz-buttons button {
	height: 40px;
    width: 120px;
}

body #page-container p {
	font-size: 18px;
}

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

.wp-block-list-item {
	margin: 30px 0;
}

.no-bullet-points {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}
/* Homepage */

#homepage--head-container {
  position: relative;
  padding: 2rem;
  padding-top: 0;
  overflow: hidden; /* Garantir que l'image de fond ne dépasse pas */
}

#homepage--head-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://premuna.com/wp-content/uploads/2025/04/logo-282x300.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 200px auto; /* Ajuste selon le rendu désiré */
  opacity: 0.2; /* Appliquer l'opacité seulement à l'image */
  z-index: 1; /* Met l'image derrière le contenu */
}

.homepage--text {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 8px;
}

.homepage--text h1 {
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.homepage--text h2 {
  font-size: 1.6rem;
  font-weight: normal;
  margin-bottom: 1rem;
}

body #main .homepage--text p {
  /*font-size: 1rem;*/
  line-height: 1.6;
}

body .premuna-presentation img {
	border-radius: 35px;
  	width: 70%;
}

body .main-container .container .wpb-content-wrapper .woocommerce  .products {
	justify-content: center;
}

body .main-container .container .title-services--homepage {
	text-align: center;
	font-size: 34px;
 	color: #344b61;
	text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.8);
	font-weight: bold;
	padding: 5px 0;
	text-decoration: underline;
}

body header.site-header {
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Safari & anciens navigateurs */
    -moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Anciennes versions de Firefox */
    position: relative;
    z-index: 1000; /* Assure que l’ombre ne soit pas cachée */
	background: #f5faff;
	/*color: #344b61;*/
}

body header.site-header a {
	/*color: #344b61;*/
    font-size: 18px;
}

body header.site-header a:hover {
	color: #4c6987!important;
}

body #page-container .site-header {
	background: #f5faff;
	color: #344b61;
}

body #page-container .site-header a:hover {
	color: #4c6987;
}

body footer {
	background: #2c3e50;
	color: #F5F5F5;
}

body #footer a {
	color: #F5F5F5;
}

body #footer .container .footer-column {
	width: 100%;
  	max-width: 100%;
  	flex: 100%;
}

body #footer .wp-block-social-links .wp-block-social-link.wp-social-link {
	width: 30px;
  	height: 30px;
  	text-align: center;
  	padding: 2px;
}

body #footer a:hover {
	color: #99caff;
}

.success-message {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}
.error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}
.loading {
    color: blue;
    font-style: italic;
    margin-top: 10px;
}

.demande-container p:nth-child(even) {
	color: #d1d1d1;
  	background: #575757;
  	padding: 40px;
  	font-size: 18px;
  	margin-bottom: 0;
}

.demande-container p:nth-child(odd) {
	color: #575757;
 	background: #d1d1d1;
 	padding: 40px;
  	margin-bottom: 0;
  	font-size: 18px;
}

/* Pagination "Mes demandes" */
.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a, .pagination span {
    padding: 2px 5px;
    margin: 0 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #0073aa;
    border-radius: 4px;
    cursor: pointer;
}

.pagination a:hover {
    background-color: #0073aa;
    color: #fff;
}

.pagination .current-page {
    font-weight: bold;
    background-color: #0073aa;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
}

/* Display "Mes demandes" in user account */
#user-questions-container ul li {
	list-style: none;
	color: #575757;
 	background: #d1d1d1;
 	padding: 40px;
  	margin-bottom: 0;
  	font-size: 18px;
}

/* See product from forms */
/* Style général de la boutique */
.boutique-jetons {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de se réorganiser quand l'écran est petit */
    justify-content: space-between;
    gap: 20px; /* Espacement entre les éléments */
}

/* Style pour chaque produit */
.produit-jeton {
    flex: 1 1 calc(25% - 20px); /* 4 colonnes par défaut, ajuste selon la taille de l'écran */
    box-sizing: border-box; /* Permet de gérer correctement les marges et le padding */
    padding: 10px;
    border: 1px solid #ddd; /* Bordure autour de chaque produit */
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
}

/* Chat page */
.background-chat {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 400px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 70px;
    overflow: hidden; /* Important pour contenir le ::before */
    z-index: 0;
}

.background-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('https://premuna.com/wp-content/uploads/2025/04/e23r43t3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: -1;
}

/* Animation de slide gauche */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Applique l'animation à h2 et p quand le conteneur est visible */
body .container-chat #main .background-chat h2,
body .container-chat #main .background-chat p {
  	opacity: 0;
  	transform: translateX(-50px);
  	animation: slideInLeft 1s ease forwards;
}

.container-chat .background-chat h2 {
	font-size: 40px;
  	color: #282828;
}

body .container-chat #main .background-chat p {
	font-size: 26px;
}
/* Responsiveness pour les petits écrans */
@media (max-width: 1024px) {
	
	/* Cart h1 size */
	body .wc-block-cart-item__product .wc-block-components-product-metadata h1 {
		font-size: 18px;
	}
	
    .produit-jeton {
        flex: 1 1 calc(33.33% - 20px); /* 3 colonnes pour les écrans moyens */
    }
	
	body .site-content .product-layout-basic .container:first-child {
		padding-top: 0;
	}
	
    body .site-content .product-layout-basic .container .row .summary {
        text-align: center;
    }
}

@media (max-width: 768px) {
    #homepage--head-container {
        padding: 5px;
    }
	
	body #homepage--head-container h2 {
		font-size: 24px;
	}
	
	body .container h1 {
		font-size: 32px;
		text-align: center;
	}
	
	body .container h2 {
		font-size: 28px;
		text-align: center;
	}
	
    .produit-jeton {
        flex: 1 1 calc(50% - 20px); /* 2 colonnes pour les petits écrans */
    }
	/* Order */
	body .is-mobile .wc-block-components-form .wc-block-components-checkout-step {
		margin-bottom: 0;
	}
	
}

@media (max-width: 480px) {
    .produit-jeton {
        flex: 1 1 100%; /* 1 colonne pour les très petits écrans */
    }
	/* Order */
	body .is-mobile .wc-block-components-form .wc-block-components-checkout-step {
		margin-bottom: 0;
	}
	
	/* Checkout */
	body .woocommerce-checkout form h3 {
		font-size: 22px !important;
	}
}

/* Style pour les liens */
.produit-jeton h4 a {
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
    font-weight: bold;
}

/* Style pour le bouton */
.button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #0073e6;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
	transition: .4s;
}

.button:hover {
    background-color: #005bb5;
}

body #cmplz-manage-consent .cmplz-btn {
	display: none;
}

/* Hide search bar */
.site-mobile-menu #mobile-searchform {
    display: none!important;
}

/* Mobile menu position */
#site-mobile-menu {
	padding-top: 50px;
}

/* Custom subtitle airy */
.subtitleAiry {
	padding: 20px 0;
}

body .site-content .product-layout-basic .container .row .summary .product_title {
	font-size: 1.7em;
}

/* Custum product page */
/* body .site-content .product-layout-basic .container div:first-child {
	position: relative;
}

body .site-content .product-layout-basic .container .row .product-images {
	position: absolute;
	top: 0;
	left: 200px;
} */

.site-content .product-layout-basic .container:first-child {
	padding-top: 80px;
	border-bottom: 1px solid #eeeeee;
}

body .site-content .product-layout-basic .wc-tabs-panel-wrapper {
	padding-top: 0px !important;
}

body .site-content .product-layout-basic .wc-tabs-panel-wrapper .container:first-child {
	padding-top: 0px;
}

/* body .woocommerce.single-product .product-layout-basic .product-tabs-wrapper .wc-tabs-panel-wrapper, body .woocommerce .single-product .product-layout-basic .product-tabs-wrapper {
	padding-top: 0;
	margin-top: 0;
}*/

body .site-content .product-layout-basic .container .row .woocommerce-product-gallery .slick-dots {
	display: none;
}

body .site-content .product-layout-basic .container .row .woocommerce-product-gallery .wp-post-image {
	margin: 0 auto;
}

body .site-content .product-layout-basic .container .row .single-nav-wrapper {
	display: none;
}

body .site-content .product-layout-basic .container .row  .product_meta {
	display: none;
}

body .site-content .product-layout-basic .product-tabs-wrapper .woocommerce-tabs .wc-tabs {
	display: none;
}

/* body .site-content .product-layout-basic .container .summary .single-nav-wrapper {
  	position: absolute;
	max-height: 50px;
  	bottom: 0;
  	left: 0;
  	max-width: 80px;
} */

/* Cart h1 size */
body .wc-block-cart-item__product .wc-block-components-product-metadata h1 {
	font-size: 20px;
}

/* Cart order button */
.wc-block-cart__submit {
	border: 1px solid #282828;
}

/* Add to cart button */
body .produit-jeton .add_to_cart_button {
	padding: 10px 25px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Order */
.woocommerce_chekout_cutom .wc-block-components-order-summary-item__total-price {
	display: none;
}

.woocommerce_chekout_cutom .wc-block-components-order-summary .wc-block-components-order-summary-item:last-child > div {
	padding: 0px;
  	margin: 5px;
}

.woocommerce_chekout_cutom, .woocommerce_chekout_cutom .wc-block-checkout__terms--with-separator {
	margin-bottom: 0;
}

.woocommerce_chekout_cutom h1 {
	font-size: 26px !important;
}

.woocommerce_chekout_cutom h3 {
	font-size: 22px !important;
	margin: 0 !important;
}

.woocommerce_chekout_cutom .wp-block-woocommerce-checkout-terms-block {
	padding: 48px 0 50px 0;
}

.woocommerce_chekout_cutom .wc-block-components-checkout-step__description {
	padding-top: 0px !important;
}

/* Restor cursor and do not enlarge the image */
.woocommerce div.product div.images a {
    pointer-events: none;
    cursor: default !important;
}

.woocommerce div.product div.images a img {
    cursor: default !important;
}

.woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

.woocommerce div.product div.images figure a {
    cursor: default !important;
}

/* Custom display products */
.product-price .woocommerce-Price-amount {
    font-weight: bold;
    font-size: 16px;
}

.product-price .woocommerce-Price-amount.original-price {
    text-decoration: line-through;
    color: #999;
}

.product-price .woocommerce-Price-amount.sale-price {
    color: #d9534f;
    font-size: 18px;
}

/* Social login */
body .nsl-container .nsl-container-buttons {
	display: flex !important;
    flex-flow: row wrap;
}

body .nsl-container .nsl-container-buttons a {
	width: auto !important;
    margin: 7px 10px !important;
}

/* Login / Sign in zone */
.premuna-auth-box {
  background: linear-gradient(90deg, #6fb1fc, #a1c4fd);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 6px 15px rgba(111, 177, 252, 0.3);
  text-align: center;
  color: #fff;
  max-width: 600px;
  margin: 0 auto 30px auto;
  font-family: "Segoe UI", sans-serif;
}

.premuna-auth-title {
  	font-size: 1.8em;
  	margin-bottom: 10px;
}

.premuna-auth-text {
  	font-size: 1em;
  	margin-bottom: 20px;
}

.premuna-auth-text a {
	color: #3e6378;
  	font-weight: bold;
}

.premuna-auth-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.premuna-auth-btn {
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.premuna-auth-btn.primary {
  background-color: #ffffff;
  color: #357ABD;
}

.premuna-auth-btn.primary:hover {
  background-color: #e4efff;
}

.premuna-auth-btn.secondary {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.premuna-auth-btn.secondary:hover {
  background-color: rgba(255,255,255,0.1);
}


/* Link above other elements */
.link-above a {
	position: absolute;
    z-index: 99999;
    height: 100%;
    width: 100%;
}

/* Ofer services area */
/* CSS Spécifique pour le responsive de l'image dans le header */
.page-header-services {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    align-items: center; /* Aligne verticalement les éléments */
    gap: 30px; /* Espace entre le texte et l'image */
}

.header-content {
    flex: 1 1 50%; /* Le texte prend la moitié de l'espace sur grand écran */
    min-width: 300px; /* Largeur minimale pour éviter un texte trop serré */
}

.header-image-container {
    flex: 1 1 300px; /* L'image prend le reste de l'espace, avec une base de 300px */
    text-align: center;
    order: 2; /* L'image est affichée après le texte par défaut */
}

/* Styles pour l'image elle-même */
.header-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Média-query pour les petits écrans */
@media (max-width: 768px) {
    .page-header-services {
        flex-direction: column;
    }
    .header-image-container {
        order: 1; /* Sur mobile, l'image est affichée au-dessus du texte */
        margin-bottom: 20px;
    }
}
/* Section des services */
.services-section {
    text-align: center;
    margin-bottom: 30px;
}

.services-section h3 {
	font-size: 34px;
	color: #344b61;
	text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.8);
	font-weight: bold;
}

/* Conteneur des services */
.boutique-services {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Carte de service */
.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(90deg, #6fb1fc, #a1c4fd);
	box-shadow: 0px 4px 15px rgba(111, 177, 252, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    width: auto;
	max-width: 400px;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(97, 150, 235, 0.35);
}

.service-card .text-right .link-more, .service-card .text-right .link-card-more {
	color: #FFF;
}

/* Image */
.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 2px solid #d4af37;
}

/* Texte */
.service-card span {
    display: block;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(90deg, #6fb1fc, #a1c4fd);
    width: 100%;
    border-radius: 0 0 10px 10px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .boutique-services {
        flex-direction: column;
        align-items: center;
    }
    .service-card {
        width: 80%;
    }
}

/* Login / Subscription / My account */
#customer_login div:nth-of-type(odd) {
    background-color: #d7d7d7; /* Couleur pour les div impaires */
}

#customer_login div:nth-of-type(odd) p {
    background-color: #d7d7d7; /* Couleur pour les div impaires */
}

#customer_login div:nth-of-type(even) {
    background-color: #e9ecef; /* Couleur pour les div paires */
}

#customer_login div:nth-of-type(even) p {
    background-color: #e9ecef; /* Couleur pour les div paires */
}

body .woocommerce-MyAccount-content input {
	background: #FFF !important;
	padding-left: 10px;
}

body .woocommerce-EditAccountForm em {
	color: #7792b8;
}

body .show-password-input {
    content: attr(aria-label);
    display: block;
    color: #282828;
    font-size: 10px;
	background: none;
  	border: none;
  	padding: 0;
  	margin-top: 10px;
	font-style: italic;
}

body .show-password-input::after {
    content: attr(aria-label);
    display: block;
    color: #282828;
    font-size: 10px;
	background: none;
  	border: none;
  	padding: 0;
  	margin-top: 10px;
}

#customer_login input {
	background: #fff !important;
  	padding: 10px 12px;
	max-width: 100%;
}

body #customer_login .woocommerce-Button {
	max-width: 280px;
}

#customer_login .woocommerce-LostPassword {
	margin: 40px 0 -20px 0;
}

body form.woocommerce-ResetPassword .woocommerce-form-row--last {
	width: 100% !important;
}

body form.woocommerce-ResetPassword .woocommerce-form-row:nth-child(even) {
	background: #edf7ff;
	padding: 10px;
}

body form.woocommerce-ResetPassword .woocommerce-form-row:nth-child(odd) {
	background: #FFF;
	padding: 10px;
	margin-bottom: 10px;
}

/* Services pages */
body .howDoesItWork {
	color: #FFF;
	font-size: 30px;
	margin-bottom: 40px;
}

body .howDoesItWork p {
	font-size: 30px !important;
}

body .howDoesItWork h2 {
	color: #FFF;
	font-size: 44px;
}

body .howDoesItWork .vc_column-inner:first-child {
	background-color: rgba(128, 128, 128, 0.3);
 	text-shadow: 1px 1px 3px rgba(128, 128, 128, 0.5);
}

/* FAQ page */
body .faq-banner img {
	max-height: 400px;
	width: auto;
}

/* Articles */
body .main-container .container article.post .entry-thumbnail {
	max-width: 500px;
	height: auto;
  	margin: 0 auto 10px auto;
}

/* Hide date and view number and style */
body .main-container .container .entry-heading .entry-meta .post-view, body .main-container .container .entry-heading .entry-meta .meta-date {
	display: none;
}

body .main-container .container .entry-body .entry-meta .post-view, body .main-container .container .entry-body .entry-meta .meta-date {
	display: none;
}

body .main-container .container .entry-header a {
	font-weight: bold;
}

/* Custom pages */
/* --- Variables de Couleurs Globales (Définir une fois au début de votre CSS) --- */
:root {
    /* Couleurs Primaires / Accent */
    --ed-color-primary-blue: #007bff; /* Bleu vibrant (boutons, accent) */
    --ed-color-primary-darkblue: #0056b3; /* Bleu plus foncé (hover) */
    --ed-color-info-cyan: #17a2b8; /* Cyan info (boutons, bordures) */
    --ed-color-info-darkcyan: #138496; /* Cyan info foncé (hover) */
    --ed-color-success-green: #28a745; /* Vert succès */
    --ed-color-success-darkgreen: #218838; /* Vert succès foncé */
    --ed-color-warning-yellow: #ffc107; /* Jaune avertissement */
    --ed-color-warning-darkyellow: #e0a800; /* Jaune avertissement foncé */

    /* Couleurs de Texte */
    --ed-color-text-main: #333; /* Texte sombre principal */
    --ed-color-text-body: #555; /* Texte courant */
    --ed-color-text-subtle: #5a7a97; /* Texte d'intro ou de sous-titre */
    --ed-color-text-white: #ffffff; /* Texte blanc */

    /* Couleurs de Fond */
    --ed-color-bg-white: #ffffff; /* Fond blanc pur */
    --ed-color-bg-light-blue: #f7fcfe; /* Fond très clair bleuté (respiration) */
    --ed-color-bg-success-light: #e6f7e6; /* Fond vert clair (résultats) */
    --ed-color-bg-info-light: #e0f2f7; /* Fond bleu clair (résultats, pied de page) */
    --ed-color-bg-emotion-detail: #eaf7f7; /* Fond détail roue émotions */

    /* Couleurs de Bordure */
    --ed-color-border-light: #f0f0f0; /* Bordure très légère */
    --ed-color-border-soft-blue: #e0eaf2; /* Bordure douce bleutée */
    --ed-color-border-accent: #a7d9f7; /* Bordure d'accent (question, roue) */
    --ed-color-border-dashed-light: #eee; /* Bordure pointillée légère */
    --ed-color-border-strong-blue: #ccddee; /* Bordure accent entrée texte */
}
/* Generic */
/* --- Utilitaires de Mise en Forme (à appliquer avec un <span> ou un <div>) --- */

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

.ed-text-center {
    text-align: center;
}

.ed-text-large { /* Pour les textes plus grands, comme les sous-titres d'intro */
    font-size: 1.2em;
    line-height: 1.5;
}

.ed-text-body { /* Pour le texte courant */
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--ed-color-text-body);
}

body .ed-text-body thead th {
	padding: 15px;
  	text-align: left;
  	text-transform: initial;
}

.ed-section-title { /* Pour les titres de section H2/H3 */
    color: var(--ed-color-text-subtle); /* Couleur d'exemple, ajustez selon votre design */
    font-weight: 600; /* Exemple de poids de police */
    margin-bottom: 30px; /* Exemple de marge */
}


/* --- Composants Génériques (à appliquer aux <div>, <section>, etc.) --- */

.ed-section-base {
    padding: 30px 20px; /* Slightly reduce vertical padding for the whole section */
    max-width: 1000px;
    margin: 0 auto;
}

.ed-card { /* Style de base pour toutes les cartes */
    background-color: var(--ed-color-bg-white);
    border-radius: 12px;
    border: 1px solid var(--ed-color-border-soft-blue);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    padding: 20px;
}

.ed-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.ed-bg-white-panel { /* Pour des panneaux ou sections avec fond blanc et ombre prononcée */
    background-color: var(--ed-color-bg-white);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border: 1px solid var(--ed-color-border-light);
}

.ed-list-unstyled { /* Pour retirer les puces des <ul> */
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.ed-button-base { /* Styles de base pour tous les boutons */
    display: inline-block;
    padding: 15px 35px;
    border: none;
    border-radius: 10px;
    font-size: 1.2em;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.ed-button-base:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    text-decoration: none;
}

.ed-button-primary { /* Couleur du bouton principal */
    background-color: var(--ed-color-primary-blue);
    color: var(--ed-color-text-white);
}
.ed-button-primary:hover {
    background-color: var(--ed-color-primary-darkblue);
	color: #FFF;
}

.ed-button-info { /* Couleur du bouton info (cyan) */
    background-color: var(--ed-color-info-cyan);
    color: var(--ed-color-text-white);
}
.ed-button-info:hover {
    background-color: var(--ed-color-info-darkcyan);
	color: #FFF;
}

.ed-button-outline { /* Style de bouton outline */
    background-color: transparent;
    border: 2px solid var(--ed-color-info-cyan);
    color: var(--ed-color-info-cyan);
    box-shadow: none;
}
.ed-button-outline:hover {
    background-color: var(--ed-color-info-cyan);
    color: var(--ed-color-text-white);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,162,184,0.3);
}

.ed-button-small { /* Taille de bouton petite */
    padding: 10px 20px;
    font-size: 0.9em;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* --- Layouts (Flexbox/Grid - souvent gérés par le constructeur, mais voici des options custom) --- */
.ed-flex-grid { /* Pour les conteneurs flex/grid personnalisés */
    display: flex; /* Ou grid */
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.ed-grid-cols-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px; /* Garder le gap que nous avions ajusté */
}

/* Pour les écrans de taille moyenne à grande (Desktop) */
@media (min-width: 769px) { /* Si votre breakpoint mobile est 768px, alors 769px est le début du desktop */
    .ed-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr); /* Force la grille à avoir EXACTEMENT 2 colonnes, chacune prenant la moitié de l'espace disponible */
        /* Si vous remarquez que les 2 cartes sont trop petites ou trop grandes,
           vous pouvez ajuster minmax ou mettre une max-width sur les .ed-card ou le conteneur ed-section-base */
    }
}


/* Conserver également cette règle pour s'assurer que les marges du constructeur ne gênent pas */
.ed-grid-cols-4 > .wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
}

.ed-col-item { /* Pour les éléments d'une colonne flex/grid */
    flex: 1 1 23%; /* Ex: Pour 4 colonnes, ajuster selon besoin */
    min-width: 280px;
}

/* The .ed-card-button-container ensures button alignment */
.ed-card-button-container {
    margin-top: auto;
    padding-top: 15px; /* This padding adds space above the button, inside the card */
}

/* --- Classes pour des composants spécifiques (si nécessaire, mais en s'appuyant sur les génériques) --- */

.ed-homepage-hero { /* Conteneur de la section d'en-tête de la page d'accueil */
    /* styles spécifiques si non couverts par ed-section-base */
}

.ed-service-block { /* Conteneur d'un bloc de service individuel */
    /* hérite de ed-card et ajoute des styles spécifiques si besoin */
}

.ed-free-tools-grid { /* Conteneur de la grille des outils gratuits */
    /* hérite de ed-flex-grid ou ed-grid-cols-4 */
}

/* Ajoutez ici d'autres classes spécifiques si une combinaison de génériques ne suffit pas */
.ed-strength-item { /* Pour les éléments de la force de Premuna/ED */
    /* Styles spécifiques si besoin */
}

/* Pour le pied de page CTA */
.ed-footer-cta-section {
    padding: 50px 20px;
    text-align: center;
    background-color: var(--ed-color-bg-info-light);
    margin-top: 60px;
    border-top: 1px solid var(--ed-color-border-strong-blue);
    border-radius: 50px 50px 0 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}
.ed-cta-text {
    font-size: 1.5em;
    color: var(--ed-color-text-subtle);
    font-weight: var(--ed-text-weight-semi-bold);
    margin-bottom: 30px;
}
.ed-footer-note {
    font-size: var(--ed-text-size-small);
    color: var(--ed-color-text-light);
    margin-top: 30px;
}

/* --- Utilitaires de marge (si non gérés par le constructeur ou flex/grid gap) --- */
.ed-mt-40 { margin-top: 40px; }
.ed-mb-40 { margin-bottom: 40px; }
.ed-p-20 { padding: 20px; }
/* ... (vous pouvez générer d'autres marges si besoin) ... */


/* --- Responsive Design (à adapter avec les media queries) --- */
@media (max-width: 768px) {
    /* Exemples d'application des classes génériques responsives */
    .ed-flex-grid, .ed-grid-cols-4 {
        flex-direction: column;
        gap: 20px;
    }
    .ed-col-item {
        flex: 1 1 100%;
        min-width: unset;
    }
    .ed-button-base { /* Boutons pleine largeur sur mobile */
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
}

/* End Générique */
/* Comparaison page */

/* Styles spécifiques pour les cartes de comparaison dans la section "Premuna vs. Thérapie Traditionnelle" */

.ed-comparison-card-premuna {
    border: 2px solid var(--ed-color-primary-blue); /* Bordure accentuée pour Premuna */
    background-color: var(--ed-color-bg-info-light); /* Fond légèrement teinté pour Premuna */
}

.ed-comparison-card-premuna .ed-section-title {
    color: var(--ed-color-primary-blue); /* Titre du critère en couleur primaire */
}

.ed-comparison-card-traditional {
    border: 1px solid var(--ed-color-border-soft-blue); /* Bordure plus discrète pour Traditionnelle */
    background-color: var(--ed-color-bg-white); /* Fond blanc par défaut */
}

.ed-comparison-card-traditional .ed-section-title {
    color: var(--ed-color-text-body); /* Titre du critère en couleur de texte normale */
}

/* Style général pour les éléments de comparaison dans les cartes */
.ed-comparison-item {
    display: flex; /* Utilise flexbox pour aligner icône et texte */
    align-items: flex-start; /* Alignement en haut si les textes sont de hauteurs différentes */
    margin-bottom: 15px; /* Espace entre les éléments de comparaison */
    gap: 10px; /* Espace entre l'icône et le texte */
}

.ed-comparison-item:last-child {
    margin-bottom: 0; /* Pas de marge en bas pour le dernier élément */
}

.ed-comparison-item-icon {
    font-size: 1.8em; /* Taille de l'icône */
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

/* Couleurs spécifiques pour les icônes de comparaison */
.ed-comparison-item-icon.premuna-color {
    color: var(--ed-color-primary-blue); /* Couleur pour les icônes de Premuna */
}

.ed-comparison-item-icon.traditional-color {
    color: var(--ed-color-text-subtle); /* Couleur plus neutre pour les icônes traditionnelles */
}

/* Petit ajustement pour la disposition des titres de critère dans les cartes de comparaison */
.ed-section-title.comparison-criterion-title {
    text-align: center; /* Centre le titre du critère */
    margin-bottom: 25px; /* Plus d'espace sous le titre */
}

/* End comparaison page */
/* --- Spécifique au Test de Bien-être Mental --- */
.test-section {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 1px solid #f0f0f0;
}
.test-intro-text {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
}
.test-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.question-block {
    background-color: #fdfdfd;
    padding: 20px;
    border-left: 5px solid #a7d9f7; /* Couleur de bordure douce */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.radio-option {
    display: block;
    margin-bottom: 10px;
    font-size: 1em;
    color: #666;
    cursor: pointer;
}
.radio-option input {
    margin-right: 8px;
    accent-color: #007bff; /* Couleur de la coche/bouton radio */
}

.test-results-container {
    padding-top: 20px;
    border-top: 1px dashed #eee;
    margin-top: 40px;
}

.result-block {
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid; /* La couleur de la bordure sera définie par les classes spécifiques */
    display: none; /* Caché par défaut, affiché par JS */
}

.result-block-success {
    background-color: #e6f7e6; /* Vert clair */
    border-color: #d4edda;
}
.result-block-warning {
    background-color: #fff3cd; /* Jaune clair */
    border-color: #ffeeba;
}
.result-block-info {
    background-color: #e0f2f7; /* Bleu clair */
    border-color: #bee5eb;
}
.is-hidden {
    display: none !important; /* Utilise !important pour assurer la priorité du masquage */
}

/* --- Styles Spécifiques à la Page : Outils Bien-être Gratuits --- */

/* En-tête de la page Outils Bien-être Gratuits */
.page-header-outils-gratuits {
    /* Hérite des propriétés de .page-header (padding, text-align, box-shadow, margin-bottom) */
    background: linear-gradient(135deg, #eaf0f7 0%, #d5e9e9 100%); /* Dégradé frais et apaisant */
    /* Assurez-vous que .page-header est bien défini avec les coins arrondis et l'ombre générale */
}

/* Cartes individuelles des outils (sur la grille principale) */
.card-tool {
    /* Hérite des propriétés de .card-item (background-color, padding, border-radius, box-shadow, transition, height, display, flex-direction, justify-content) */
    background-color: #ffffff; /* Fond blanc pur pour la clarté */
    border: 1px solid #e0eaf2; /* Bordure très fine et douce */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Ombre plus légère pour un effet "flottant" subtil */
    border-radius: 12px; /* Assure des coins arrondis */
    padding: 25px; /* S'assure d'un bon padding */
	transition: .2s;
}

.card-tool:hover {
    transform: translateY(-3px); /* Moins d'élévation au survol pour plus de subtilité */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Ombre légèrement plus prononcée au survol */
}

/* Boutons "Utiliser l'outil" / "Faire le test" sur les cartes d'outils */
.button.button-info.button-small { /* S'assure que ce style est appliqué à la bonne combinaison de classes */
    background-color: #17a2b8; /* Couleur info standard */
    color: white;
    padding: 10px 20px; /* Taille petite */
    font-size: 0.9em;
    border-radius: 6px; /* Bords légèrement moins arrondis pour les petits boutons */
    box-shadow: 0 3px 8px rgba(0,162,184,0.3); /* Ombre plus subtile pour ces petits boutons */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.button.button-info.button-small:hover {
    background-color: #138496; /* Couleur au survol */
    transform: translateY(-1px); /* Élévation minimale */
    box-shadow: 0 5px 12px rgba(0,162,184,0.4);
}

/* Texte d'alignement sur les cartes d'outils pour les liens CTA */
.card-item .text-right {
    text-align: right;
}

/* --- Styles Spécifiques à la Roue des Émotions --- */

.emotion-wheel-container {
    /* Style du conteneur principal de la roue, déjà dans le CSS global */
}

.emotion-wheel-display {
    width: 450px; /* Taille de la roue principale */
    height: 450px;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid #b0e0e6; /* Bordure bleue-verte claire */
    position: relative; /* Indispensable pour le positionnement absolu des segments */
    display: flex; /* Pour centrer les segments si besoin, ou comme base */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f5fcff; /* Arrière-plan très clair pour l'intérieur de la roue */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Ombre pour la roue */
}

.emotion-segment {
    position: absolute; /* CLÉ : Permet de positionner librement les segments */
    width: 180px; /* Taille des segments primaires */
    height: 180px;
    background-color: rgba(168, 230, 207, 0.7); /* Couleur de fond avec transparence */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background-color 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    padding: 10px;
    text-align: center;
}
.emotion-segment:hover {
    transform: scale(1.08); /* Agrandissement au survol */
}

/* Positionnement Spécifique de Chaque Segment (pour former la roue) */
/* Les valeurs top/left/right/bottom sont calculées par rapport au centre de la roue et la taille du segment */
.emotion-joie { top: 20px; left: calc(50% - 90px); background-color: #a8e6cf; }
.emotion-tristesse { bottom: 20px; left: calc(50% - 90px); background-color: #a7d9f7; }
.emotion-colere { top: calc(50% - 90px); right: 20px; background-color: #ff9999; }
.emotion-peur { top: calc(50% - 90px); left: 20px; background-color: #ffe0b2; }
.emotion-surprise { top: 80px; right: 80px; background-color: #c9b2f7; } /* Exemple de position plus angulaire */
.emotion-degout { bottom: 80px; left: 80px; background-color: #b2f7e0; } /* Exemple de position plus angulaire */

/* Ajustements Responsive pour la Roue */
@media (max-width: 768px) {
    .emotion-wheel-display {
        width: 300px;
        height: 300px;
    }
    .emotion-segment {
        width: 120px;
        height: 120px;
        font-size: 0.8em;
    }
    /* Réajuster les positions pour s'adapter à la plus petite taille de roue */
    .emotion-joie { top: 10px; left: calc(50% - 60px); }
    .emotion-tristesse { bottom: 10px; left: calc(50% - 60px); }
    .emotion-colere { top: calc(50% - 60px); right: 10px; }
    .emotion-peur { top: calc(50% - 60px); left: 10px; }
    .emotion-surprise { top: 30px; right: 30px; }
    .emotion-degout { bottom: 30px; left: 30px; }
}

/* --- Spécifique à l'Exercice de Respiration --- */
/* Styles pour le texte d'instruction de la respiration */
.instruction-text-animated {
    /* Propriétés qui transiteront */
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; 
    
    /* Assure que le texte peut se positionner sur deux lignes */
    min-height: 2.8em; /* Hauteur minimale pour 2 lignes de texte */
    display: flex; /* Utilise flexbox pour un meilleur centrage vertical */
    align-items: center;
    justify-content: center;
    text-align: center; /* Centrage horizontal du texte */
    font-weight: 600; /* Poids de police pour l'instruction */
    font-size: 1.6em; /* S'assure que la taille de police est adaptée pour 2 lignes */
    line-height: 1.4em; /* Espacement des lignes */
}

/* Classe pour l'état "disparition" du texte */
.instruction-text-animated.fade-out {
    opacity: 0;
    transform: scale(0.9); /* Texte légèrement réduit en taille pendant la transition */
}

/* Ajustements pour mobile si nécessaire pour l'instruction */
@media (max-width: 768px) {
    .instruction-text-animated {
        font-size: 1.4em; /* Adapte la taille de la police pour mobile */
        min-height: 2.6em; /* Peut être ajusté si la taille de police change */
    }
}

.respiration-tool-block {
    background-color: #f7fcfe;
    padding: 40px;
    border-radius: 15px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.03);
    border: 1px solid #e0eaf2;
}
.breathing-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 220px;
    margin: 30px auto;
    position: relative;
}
.breathing-circle {
    width: 200px;
    height: 200px;
    background-color: #007bff; /* Bleu vibrant */
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.6); /* Lumière bleue intense */
    transition: all 0.5s ease;
}
.timer-display {
    position: absolute;
    font-size: 2.5em;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.button-group .button { /* Ajuste le style des boutons dans ce groupe */
    margin: 0 8px; /* Espacement entre les boutons */
}

/* Animation CSS pour le cercle de respiration (doit être définie globalement) */
@keyframes breathe {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Utilitaires de Layout et Espacement --- */
.page-wrapper { /* Conteneur global si tout le contenu est enveloppé */
    background-color: #fcfbfb; /* Assure la couleur de fond globale */
}

.page-header {
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(135deg, #e0f2f7 0%, #dbe4e6 100%); /* Dégradé bleu-gris doux */
    border-radius: 0 0 50px 50px; /* Coins arrondis en bas pour la douceur */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Ombre douce et diffuse */
    margin-bottom: 50px;
}
/* Variations de header pour des touches de couleur spécifiques aux pages d'outils */
.page-header-respiration {
    background: linear-gradient(135deg, #e0f7f2 0%, #dbe6e9 100%); /* Vert-bleu apaisant */
}
.page-header-roue-emotions {
    background: linear-gradient(135deg, #e6f7f7 0%, #d5e9e9 100%); /* Bleu-vert clair */
}


/* Utilitaires de marge */
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }

/* Sections de contenu générales */
.section-content {
    padding: 60px 20px;
    max-width: 1000px; /* Largeur maximale pour le contenu principal */
    margin: 0 auto;
}

.section-spacing {
    margin: 50px auto; /* Marge verticale entre les sections */
}

.section-background-light {
    background-color: #ffffff; /* Fond blanc pour les sections sur fond coloré */
    border-radius: 20px; /* Coins très arrondis pour un look moderne et doux */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Ombre plus prononcée pour faire "flotter" */
    border: 1px solid #f0f0f0; /* Bordure très légère pour délimiter */
}

/* Alignements de texte */
.text-center { text-align: center; }
.text-right { text-align: right; }


/* --- Typographie --- */
.heading-primary {
    font-size: 32px;
    color: #2e4a66;
    margin-bottom: 20px;
    letter-spacing: -0.8px;
    font-weight: 700;
}

.heading-secondary {
    font-size: 28px;
    color: #3a5c7f;
    margin-bottom: 30px;
    font-weight: 600;
    text-align: center;
}

.heading-tertiary {
    font-size: 24px;
    /*color: #5a7a97;*/
    margin-bottom: 15px;
    font-weight: 500;
}

.heading-tertiary .icon-tool {
    vertical-align: middle;
    margin-right: 10px;
	margin-bottom: 5px;
}

.service-card .heading-tertiary .link-card-title {
	color: #FFF;
}

.header-intro { /* Paragraphe d'introduction sous le H1 */
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    color: #5a7a97;
    line-height: 1.5;
}

.body-text { /* Texte courant */
    font-size: 1.1em;
    /*color: #666;*/
    line-height: 1.7;
}

.strong-text { /* Texte mis en gras */
    font-weight: bold;
    color: #333; /* Rendre le gras plus sombre mais cohérent */
}

/* --- Liens & Boutons --- */
.link-secondary { color: #6c757d; text-decoration: none; }
.link-secondary:hover { text-decoration: underline; }

.link-highlight { color: #28a745; font-weight: bold; text-decoration: none; }
.link-highlight:hover { text-decoration: underline; }

.link-warning { color: #ffc107; font-weight: bold; text-decoration: none; }
.link-warning:hover { text-decoration: underline; }

.link-info { color: #17a2b8; font-weight: bold; text-decoration: none; }
.link-info:hover { text-decoration: underline; }


/* Boutons génériques */
.button {
    display: inline-block;
    padding: 15px 35px;
    border: none;
    border-radius: 10px; /* Bords plus arrondis pour un look doux */
    font-size: 1.2em;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Ombre par défaut pour les boutons */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.button:hover {
    transform: translateY(-3px); /* Effet d'élévation au survol */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Ombre plus prononcée au survol */
    text-decoration: none;
}

/* Boutons par couleur/intention */
.button-primary { background-color: #007bff; color: white; }
.button-primary:hover { background-color: #0056b3; }

.button-secondary { background-color: #6c757d; color: white; }
.button-secondary:hover { background-color: #5a6268; }

.button-success { background-color: #28a745; color: white; }
.button-success:hover { background-color: #218838; }

.button-warning { background-color: #ffc107; color: #333; }
.button-warning:hover { background-color: #e0a800; }

.button-info { background-color: #17a2b8; color: white; }
.button-info:hover { background-color: #138496; }

/* Tailles de bouton */
.button-large {
    padding: 18px 40px;
    font-size: 1.3em;
}

/* --- Layouts Avancés (Flexbox & Grid) --- */
.flex-layout {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: flex-start; /* Aligne les éléments en haut par défaut */
    gap: 40px; /* Espace généreux entre les éléments */
}

.flex-layout.align-center {
    align-items: center; /* Aligne verticalement au centre */
}

.flex-item {
    flex: 1 1 45%; /* Prise de 45% de la largeur, permet 2 colonnes par défaut */
    min-width: 280px; /* Taille minimale avant de passer en colonne unique */
}

.text-content { /* Conteneur pour le texte dans un flex/grid item */
    padding: 20px; /* Espacement interne pour le texte */
}

.image-content { /* Conteneur pour l'image dans un flex/grid item */
    text-align: center; /* Centrer l'image */
}

.grid-layout {
    display: grid;
    gap: 30px; /* Espacement généreux entre les cellules de la grille */
}

.grid-layout.two-cols {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-layout.three-cols {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-layout.four-cols {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


/* --- Composants Spécifiques des Outils --- */

/* Bloc Générateur d'Affirmations */
.affirmation-generator-block {
    background-color: #f7fcfe; /* Fond très clair pour ce bloc */
    padding: 40px;
    border-radius: 15px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.03); /* Ombre interne subtile */
    border: 1px solid #e0eaf2; /* Bordure douce */
    text-align: center;
}

.input-text {
    width: 100%;
    max-width: 300px;
    padding: 12px 15px;
    border: 1px solid #ccddee;
    border-radius: 8px;
    font-size: 1em;
    color: #555;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-text:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
    outline: none; /* Supprime l'outline par défaut du navigateur */
}

.affirmation-display {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    background-color: #e6f7e6; /* Fond vert doux pour l'affirmation */
    padding: 25px;
    border-radius: 10px;
    border: 1px dashed #a3d9a3; /* Bordure en pointillé */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.affirmation-text {
    font-size: 1.4em;
    color: #218838; /* Couleur verte pour l'affirmation */
    font-style: italic;
    font-weight: 500;
    text-align: center;
}

body #page-container .affirmation-display .affirmation-text {
	font-size: 24px;
}

@media (max-width: 768px) {
	body #page-container .affirmation-display .affirmation-text {
		font-size: 20px;
	}
}
/* Roue des Émotions */
.emotion-wheel-container {
    padding: 40px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
    text-align: center; /* Centre la roue si elle est plus petite que le conteneur */
}

.emotion-wheel-display {
    width: 450px; /* Taille de la roue principale */
    height: 450px;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid #b0e0e6; /* Bordure bleue-verte claire */
    position: relative; /* Pour positionner les segments */
    display: flex; /* Pour des centrage internes si nécessaire */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f5fcff; /* Arrière-plan très clair pour l'intérieur de la roue */
}

.emotion-segment {
    position: absolute; /* Positionnement absolu pour les segments */
    width: 180px; /* Taille des segments primaires */
    height: 180px;
    background-color: rgba(168, 230, 207, 0.7); /* Couleur de fond avec transparence */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background-color 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    padding: 10px;
    text-align: center;
	opacity: .7;
}
.emotion-segment:hover {
    transform: scale(1.08); /* Agrandissement au survol */
	opacity: 1;
	z-index: 10;
}

/* Couleurs spécifiques pour les segments de la roue */
.primary-emotion[data-emotion-type="joie"] { background-color: #a8e6cf; } /* Vert pastel */
.primary-emotion[data-emotion-type="tristesse"] { background-color: #a7d9f7; } /* Bleu clair */
.primary-emotion[data-emotion-type="colere"] { background-color: #ff9999; } /* Rouge rosé */
.primary-emotion[data-emotion-type="peur"] { background-color: #ffe0b2; } /* Orange clair */
.primary-emotion[data-emotion-type="surprise"] { background-color: #c9b2f7; } /* Violet clair */
.primary-emotion[data-emotion-type="degout"] { background-color: #b2f7e0; } /* Vert d'eau */

.emotion-details {
    background-color: #eaf7f7;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 40px;
    border: 1px solid #d4edda;
    text-align: left;
}


/* Exercice de Respiration */
.respiration-tool-block {
    background-color: #f7fcfe;
    padding: 40px;
    border-radius: 15px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.03);
    border: 1px solid #e0eaf2;
}
.breathing-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 220px;
    margin: 30px auto;
    position: relative;
}
.breathing-circle {
    width: 200px;
    height: 200px;
    background-color: #007bff; /* Bleu vibrant */
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.6); /* Lumière bleue intense */
    transition: all 0.5s ease;
}
.timer-display {
    position: absolute;
    font-size: 2.5em;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.button-group .button {
    margin: 0 8px;
}

/* Animation CSS pour le cercle de respiration (doit être définie globalement) */
@keyframes breathe {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}


/* --- Pied de page CTA (réutilisable pour plusieurs pages) --- */
.page-footer-cta {
    text-align: center;
    padding: 50px 20px;
    background-color: #e0f2f7; /* Couleur douce */
    margin-top: 60px;
    border-top: 1px solid #ccddee;
    border-radius: 50px 50px 0 0; /* Bords arrondis en haut */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05); /* Ombre douce */
}
.cta-text {
    font-size: 1.3em;
    color: #3a5c7f;
    margin-bottom: 30px;
    font-weight: 600;
}
.footer-note {
    font-size: 1em;
    color: #666;
    margin-top: 30px;
}


/* --- Responsive Design de Base --- */
@media (max-width: 768px) {
    .heading-primary { font-size: 2.2em; }
    .heading-secondary { font-size: 1.8em; }
    .heading-tertiary { font-size: 1.4em; }
    .header-intro, .body-text { font-size: 1em; }

    .flex-layout, .grid-layout {
        flex-direction: column;
        gap: 20px;
    }
    .flex-item {
        flex: 1 1 100%;
        min-width: unset;
    }
    .grid-layout.two-cols, .grid-layout.three-cols, .grid-layout.four-cols {
        grid-template-columns: 1fr;
    }

    .card-item { margin: 20px auto; }
    .button {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
    .button-group .button { /* Ajuste pour les groupes de boutons */
        margin: 0 0 10px 0;
    }
    .button-large { padding: 12px 20px; font-size: 1em; }

    .emotion-wheel-display {
        width: 300px; /* Plus petit sur mobile */
        height: 300px;
    }
    .emotion-segment {
        width: 120px;
        height: 120px;
        font-size: 0.8em;
    }
    /* Réajuster les positions des segments sur mobile si elles sont absolues (exemple simple) */
    .emotion-segment:nth-child(1) { top: 10px; left: calc(50% - 60px); }
    .emotion-segment:nth-child(2) { bottom: 10px; left: calc(50% - 60px); }
    .emotion-segment:nth-child(3) { top: calc(50% - 60px); right: 10px; }
    .emotion-segment:nth-child(4) { top: calc(50% - 60px); left: 10px; }
    .emotion-segment:nth-child(5) { top: 30px; right: 30px; transform: rotate(0deg); }
    .emotion-segment:nth-child(6) { bottom: 30px; left: 30px; transform: rotate(0deg); }


    .breathing-circle-container {
        width: 180px;
        height: 180px;
    }
    .breathing-circle {
        width: 160px;
        height: 160px;
    }
    .timer-display {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    .page-header, .section-content {
        padding: 40px 15px;
    }
}

/* End Custom pages */
/* Blog style */
.blog-container {
    max-width: 1200px;
	min-height: 700px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
	padding-bottom: 80px;
}

.blog-post {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
	padding: 10px;
}

body .blog-post h2 {
	font-size: 26px;
	text-align: center
}

.blog-post p {
	padding: 4px 10px;
}

.blog-post:hover {
    transform: scale(1.05);
}

.blog-thumbnail img {
    width: 100%;
    height: auto;
}

body .blog-container .featured-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

body .blog-container .featured-image {
	width: 400px;
  	height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
	overflow: hidden;
	position: relative;
}

body .blog-container .featured-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 15px;
}

body .blog-container .featured-excerpt {
    font-size: 16px;
    color: #666;
}

body .blog-container .articles-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Bandeau "À la une" */
body .blog-container .featured-banner {
    position: absolute;
	top: 92px;
  	left: -40px;
    background: rgba(230, 116, 34, 0.9); /* Couleur avec opacité */
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 50px;
    border-radius: 5px;
    text-transform: uppercase;
    transform: rotate(-45deg);
    transform-origin: top left;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Contenu en dessous de l’image */
body .blog-container .featured-content {
    margin-top: 15px;
    text-align: center;
}

body .blog-container .featured-title a {
    color: #333;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

body .blog-container .featured-excerpt {
    font-size: 16px;
    color: #666;
}

/* Barre de recherche sous l'article à la une */
body .blog-container .blog-search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
	margin-bottom: 50px;
}

body .blog-container .blog-search-form .search-field {
    width: 60%;
    padding: 10px;
    border: 2px solid #e67422;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
}

body .blog-container .blog-search-form .search-submit {
    background: #e67422;
    color: white;
    border: none;
    padding: 10px 15px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

body .blog-container .blog-search-form .search-submit:hover {
    background: #c85e1a;
}

/* Social network */
.fa-facebook {
    background-image: url('https://premuna.com/wp-content/uploads/2025/03/FB-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
}
.fa-twitter {
    background-image: url('https://premuna.com/wp-content/uploads/2025/03/X-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
}
.fa-pinterest {
    background-image: url('https://premuna.com/wp-content/uploads/2025/03/Pinterest-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
}
.fa-google-plus {
    background-image: url('https://premuna.com/wp-content/uploads/2025/03/Google-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.fa-facebook::before, .fa-twitter::before, .fa-pinterest::before, .fa-google-plus::before {
	content: none;
}

/* Chat service */
#fluentform_2 {
	margin-top: 10px;
}

body .fluentform #fluentform_2 .ff-el-group {
	margin-bottom: 5px;
}

body .fluentform #fluentform_2 .ff-text-left {
	margin-bottom: 20px;
}

body .fluentform #fluentform_2 .ff-el-form-check {
	margin-top: -10px;
}

.ff-el-input--content #ff_2_message_field {
	max-width: 900px;
	resize : none;
}

#timer {
	/*padding-top: 15px;*/
	position: absolute;
  	top: -35px;
  	text-align: center;
  	width: 100%;
  	max-width: 900px;
  	margin-bottom: -20px;
}

#chat-container {
    width: 100%;
    max-width: 900px;
    height: 500px;
    padding: 15px;
    border-radius: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    font-family: "Arial", sans-serif;
    position: relative;
	background-image: url('https://premuna.com/wp-content/uploads/2025/04/64534tgh-768x768.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: #f9fbfc;
}

/* Fond flouté/opaque via pseudo-élément
#chat-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://premuna.com/wp-content/uploads/2025/04/64534tgh-768x768.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 0;
    border-radius: 15px;
} */

/* Assure que le contenu passe par-dessus le fond */
.chat-message {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInMessage 0.5s ease-in-out forwards;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

/* Effet d'apparition des messages */
@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.user {
    align-self: flex-end;
    background: #007bff;
    color: white;
    border-bottom-right-radius: 0;
}

.chat-message.ai {
    align-self: flex-start;
    background: #e5e5e5;
    color: black;
    border-bottom-left-radius: 0;
}

.chat-message.typing {
    font-style: italic;
    opacity: 0.7;
}

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

/* Animation pour simuler l'écriture de l'IA */
.aiIsTyping p {
    margin: 0;
    font-style: italic;
}

.aiIsTyping {
    display: flex;
    align-items: center;
    padding: 8px 15px;
	margin: 20px auto 0 auto;
    background: #e5e5ea;
    border-radius: 20px;
    align-self: flex-start;
}

.aiIsTyping::after {
    content: "⠇";
    font-size: 18px;
    color: #666;
    display: inline-block;
    animation: typingDots 1.5s infinite;
}

/* Définir l'animation pour les points */
@keyframes typingDots {
    0% { content: "⠇"; }
    33% { content: "⠋"; }
    66% { content: "⠙"; }
    100% { content: "⠇"; }
}

/* Effet de surbrillance des messages récents */
.chat-message.new {
    animation: highlightNew 0.5s ease-in-out;
}

@keyframes highlightNew {
    from {
        transform: scale(1.05);
        box-shadow: 0px 0px 8px rgba(0, 122, 255, 0.4);
    }
    to {
        transform: scale(1);
        box-shadow: none;
    }
}

.chat-message.userTxt strong {
	width: 100%;
  	display: inline-block;
	text-align: right;
}

.chat-message.aiTxt strong {
	width: 100%;
  	display: inline-block;
	text-align: left;
}

.aiTxt {
	align-self: flex-start;
    background: #e5e5ea;
    color: #333;
    border-bottom-left-radius: 5px;
    animation-delay: 0.2s;
}

.userTxt {
	align-self: flex-end;
    background: #007aff;
    color: white;
    border-bottom-right-radius: 5px;
    animation-delay: 0.1s;
}



body #fluentform_2_errors {
    display: none !important;
}

body .byeChatMessage {
    text-align: center;
  	padding-top: 20px;
}

/* Conversation page */
/* Style pour la page de conversation */
body #active-chat {
	padding: 20px 0;
}

body #active-chat a {
	font-weight: bold;
  	color: red;
}

.area-chat-container {
	position: relative;
}

#premuna-chat-face {
	position: absolute;
  	right: 20px;
    width: auto;
    max-width: 240px;
    height: auto;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(255, 181, 107, 0.5), 0 0 20px rgba(255, 160, 90, 0.3);
    border: 3px solid #FFD8A9;
    background-color: #FFF5E1;
    padding: 5px;
    transition: transform 0.3s ease;
}

#premuna-chat-face #premuna-chat-face--presentation {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#premuna-chat-face #premuna-chat-face--presentation:hover {
    transform: scale(1.01);
    box-shadow: 0 6px 18px rgba(255, 150, 80, 0.6), 0 0 25px rgba(255, 135, 70, 0.4);
}

@media (max-width: 1200px) {
	body .premuna-presentation img {
		width: 100%;
	}
	
	.back-to-top {
		display: none;
	}
	
    #premuna-chat-face {
 		bottom: 171px;
		right: -25px;
		z-index: 998;
        max-width: 150px;
        border: 1px solid #FFD8A9; /* bordure plus fine */
        padding: 3px;
    }

    #premuna-chat-face #premuna-chat-face--presentation {
        transform: scale(0.95); /* légère réduction si nécessaire */
    }
}

@media (max-width: 1000px) {
    #premuna-chat-face {
		bottom: 185px;
		right: 2px;
        max-width: 110px;
    }
	
	body form.woocommerce-ResetPassword {
		padding: 0px;
	}
	
	body form.woocommerce-ResetPassword p, body form.woocommerce-ResetPassword label {
		font-size: 16px;
	}
	
	body form.woocommerce-ResetPassword .woocommerce-form-row {
		padding: 0px;
	}
	
	body form.woocommerce-ResetPassword .woocommerce-form-row.form-row {
		width: 100%;
	}
	
	body form.woocommerce-ResetPassword .woocommerce-form-row.woocommerce-Button {
		padding: 5px;
  		font-size: 12px;
	}
}


@media (max-width: 480px) {
	#chat-container {
  		height: 400px;
	}
	
    #premuna-chat-face {
 		bottom: 255px;
        max-width: 80px;
    }
}

.conversation-complete {
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

.conversation-complete p {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.conversation-complete strong {
    font-weight: bold;
}

.liste-conversations .button {
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 5px;
}
.liste-conversations .button:hover {
    background-color: #005177;
}

.effects-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, #2b5876, #4e4376);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	animation: fadeInOverlay 2s ease forwards, fadeOutOverlay 2s ease 7s forwards;
	opacity: 0;
	height: 100%;
  	width: 100%;
}

@keyframes fadeInOverlay {
	to {
		opacity: 1;
	}
}

@keyframes fadeOutOverlay {
	to {
		opacity: 0;
	}
}

.effects-overlay--shape {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	animation: float 7s ease-in-out infinite alternate, shapeFadeIn 2s ease forwards;
	opacity: 0;
}

.effects-overlay--shape:nth-child(1) {
	width: 200px;
	height: 200px;
	top: 10%;
	left: 20%;
	animation-delay: 1s, 1s;
}

.effects-overlay--shape:nth-child(2) {
	width: 250px;
	height: 250px;
	top: 50%;
	left: 60%;
	animation-delay: 2.2s, 2.2s;
}

.effects-overlay--shape:nth-child(3) {
	width: 150px;
	height: 150px;
	top: 70%;
	left: 30%;
	animation-delay: 2.4s, 2.4s;
}

@keyframes float {
	to {
		transform: translateY(-20px) translateX(20px);
	}
}

@keyframes shapeFadeIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.effects-overlay--text {
	text-align: center;
	color: white;
	z-index: 2;
	opacity: 1;
}

.effects-overlay--text h1, .effects-overlay--text h2 {
	opacity: 0;
	margin: 10px 0;
	color: #FFF;
}

.effects-overlay--text h1 {
	font-size: 3em;
	animation: fadeIn 1s ease forwards;
	animation-delay: 1.5s;
}

.effects-overlay--text h2:nth-of-type(1) {
	animation: fadeIn 1s ease forwards;
	animation-delay: 3s;
}

.effects-overlay--text h2:nth-of-type(2) {
	animation: fadeIn 1s ease forwards;
	animation-delay: 4.5s;
}

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