.accueil_desktop {
  display: none; /* Masqué par défaut */
}
.accueil_mobile {
  display: block; /* Visible par défaut */
}

@media screen and (min-width: 500px) {
    .accueil_desktop {
        display: block;
    }
    .accueil_mobile {
        display: none;
    }
	.temoignage_mobile{
		display: none;
	}
}
@media screen and (max-width: 500px) {
	body{
		padding: 0;
	}
	main.accueil{
		width: 100%;
		margin: 88px 0 20px 0;
		padding: 10px 0 10px 0;
		background: none;
		text-align: center;
	}
	main.accueil_mobile{
		width: 100%;
		margin: 88px 0 20px 0;
		padding: 10px 0 10px 0;
	}
	img.photo_mobile{
		overflow:hidden;
		-webkit-border-radius:75px;
		-moz-border-radius:75px;
		border-radius:75px;
		width:150px;
		height:150px;
		object-fit: cover;
		box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
	}
	h1.accueil_mobile{
		font-size: 2em;
		font-weight: 200;
		padding-top: 0;
		margin-top: 0;
		margin-bottom: 0.25em;
	}
	h2.accueil_mobile{
		font-size: 1.15em;
		font-weight: 200;
		padding-top: 0;
		margin-top: 0.25em;
		margin-bottom: 0.25em;
	}
	strong.accroche_mobile{
		font-size: 1.25em;
		font-weight: 200;
		padding-top: 0;
		margin-top: 0.25em;
		margin-bottom: 0.5em;
	}
	strong.signature_mobile{
		font-size: 1.25em;
		font-weight: 800;
		margin-top: 2em;
		margin-bottom: 0;
	}

	div.photo_mobile{
		display: block;
		margin: 10px;
	}
	div.accueil_mobile{
		display: block;
		margin: 15px;
	}
	div.accueil_mobile h3.accueil{
		font-size: 0.95em;
		text-align: left;
	}
	div.resume_mobile{
		width: 80%;
		margin: auto;
		font-size: 0.95em;
		font-weight: 400;
	}
	div.liens_mobile{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: space-around;
		gap: 5px;
		justify-content: center;
		padding-bottom: 20px;
		width: 100%;
		margin: auto;
	}
	p.accueil_mobile{
		font-size: 0.9em;
		text-align: left;
	}
	p.prix_mobile{
		font-weight: 400;
		text-align: center;
	}
	a.ardv-mobile{
		padding: 5px 10px 5px 0;
	}
	a.ardv, label.ardv{
	  text-decoration:none;
	  text-indent: 0;
	  font-weight: 600;
	  color:white;
	  background-color: var(--p-glycine2);
	  display: inline-box;
	  min-width: 100px;
	  border-radius: 16px;
	  border: 2px outset #aaa;
	  font-size: 0.85em;
	  margin: auto;
	  cursor: pointer;
	}
	.ardv>i{
		margin: auto;
		padding: 8px;
		text-align: center;
		vertical-align: middle;
	}
	.ardv:hover{
	  transform: scale(1.1);
	  background-color: var(--p-violet);
	  border: 2px outset #fff;
	}
	.ardv:active{
		position:relative;
		top: 1px;
	}
	div.diaporama_mobile{
		padding-bottom: 20px;
		margin: 0 auto;
		width: 75%;
		max-width: 500px;
	}
	/* Rendre le titre cliquable et lui donner un curseur pointer */
    .accordion-title {
        background-color: #f7f7f7; /* Léger fond pour le titre (optionnel) */
        padding: 15px;
        margin-bottom: 0;
        cursor: pointer;
        display: flex; /* Permet à la flèche de s'aligner à droite */
        justify-content: space-between; /* Espace le titre et la flèche */
        align-items: center;
		border-radius: 10px;
        border-bottom: 1px solid #ddd;
    }
	.accordion-title .icon-arrow {
		/* Assure que la transformation fonctionne */
		display: inline-block;
		
		/* Conserver l'espacement et l'animation */
		margin-left: 10px;
		transition: transform 0.3s ease;
		
		/* La flèche (fa-caret-down) pointe déjà vers le bas (0 degrés) */
		transform: rotate(0deg); 
	}
	/* Rotation de 180° lorsque le bloc est déplié, pour que la flèche pointe vers le haut */
	.block-accordion.active .icon-arrow {
		transform: rotate(180deg);
	}
    /* Style du contenu - C'est ce qui cache/montre le contenu */
    .accordion-content {
        max-height: 0; /* Contenu caché par défaut */
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Animation douce */
        padding: 0 15px; /* Pas de padding quand masqué */
    }
    /* Style du contenu lorsque le bloc est actif (déplié) */
    .accordion-item.active .accordion-content {
        max-height: 1000px; /* Doit être une valeur suffisamment grande pour contenir tout le contenu */
        padding: 15px;
        border: 1px solid #eee;
        border-top: none;
    }
	/* Rotation de la flèche lorsque le bloc est actif (déplié) */
	.block-accordion.active .icon-arrow::before {
		transform: rotate(90deg);
	}

	/* Style du contenu lorsque le bloc est actif (déplié) */
	.block-accordion.active .accordion-content {
		max-height: 2000px; /* Assurez-vous que cette valeur est assez grande */
		padding: 15px;
		border: 1px solid #eee;
		border-top: none;
	}
	p.moyens_paiement_mobile{
		text-align: center;
	}
	div.prestations{
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}
	div.prestation_mobile{
		width: 95%;
		margin: auto;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: space-around;
		gap: 10px;
		text-align: center;
	}
	div.prestation_mobile > div {
		flex-basis: 38%; 
	}
	div.prestation_mobile > div:nth-child(3) {
		flex-basis: 100%;
	}
	div.seance_mobile{
		margin: 10px auto;
		padding: 15px;
		border: solid 0px;
		border-color: #fff;
		box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		background-image: linear-gradient(
			-45deg/*to bottom*/,
			var(--p-saumon) 0%,
			var(--p-rose) 100%
		);
	}
	div.prestations{
		
	}
	h1.prestations{
		font-size: 1.15em;
		margin-top: 0;
		padding-top: 0;
		margin-bottom: 0.25em;
		text-align: center;
	}
	h2.prestations{
		font-size: 1em;
		margin-top: 0;
		padding-top: 0;
		margin-bottom: 0.25em;
		text-align: left;
	}
	p.prestations{
		font-size: 0.9em;
	}
	ul.prestations{
		font-size: 0.9em;
		text-align: left;	
		margin-left: 0;
		padding: 0;
		text-align: left;
		list-style-position: inside;
		font-weight: 200;
	}
	li.prestations{
		padding-left: 0.5em;
		text-indent: -1em;
	}
	b.prestations{
		font-weight: 600;
	}
}

.header-toggle {
    display: flex;
    justify-content: space-between; /* Aligne le h3 à gauche et le bouton à droite */
    align-items: center;
    margin-bottom: 10px;
}

/* 1. État par défaut : contenu masqué */
.content-to-toggle.collapsed {
    max-height: 0;
    overflow: hidden; /* Cache ce qui dépasse de la hauteur 0 */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out; /* Ajoute une animation douce */
    opacity: 0;
}

/* 2. État actif : contenu affiché */
.content-to-toggle:not(.collapsed) {
    max-height: 2000px; /* Une grande valeur pour s'assurer que tout le contenu est visible */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}

/* Style du bouton pour l'icône (petit triangle ou signe +) */
#toggle-pourquoi::after {
    content: '+'; /* Icône "Afficher plus" */
    display: inline-block;
    margin-left: 5px;
    font-size: 1.2em;
    transition: transform 0.3s ease-out;
}

/* Rotation de l'icône lorsque le contenu est affiché */
#toggle-pourquoi[aria-expanded="true"]::after {
    content: '−'; /* Icône "Afficher moins" */
    transform: rotate(0deg); /* Annule la rotation pour le signe moins */
}
@media screen and (max-width:390px){
	i.bouton-rv-accueil-mobile{
		display: none;
	}
	a.ardv-reserver{
		padding: 10px 5px 10px 5px;
	}
}