@charset "utf-8";
/* CSS Document - MIS À JOUR pour AS2 - Couleurs Logo */

/* ------------------------------------------- */
/* --- 1. DÉFINITION DES COULEURS DU LOGO --- */
/* ------------------------------------------- */
:root {
    --as2-gris: #63656a;  /* Le Gris Anthracite du logo (Structure/Fonds) */
    --as2-vert: #a3d55f;  /* Le Vert Pomme du logo (Accentuation/CTA) */
}


html {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	/* On garde l'arrière-plan du corps si vous avez un background.jpg, sinon vous pouvez le supprimer */
	/*background: url('../images/background.jpg') top center no-repeat #FFF; */
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
a:hover {
	text-decoration: none;
}
p strong {
	font-size: 1.1em;
}
img, a img {
	border: 0px;
}
.entete {
	width: 100%;
	height: 168px;
	/* Ancien: border-top: 3px solid #398c2f; */
	border-top: 3px solid var(--as2-vert); /* Ligne d'entête Verte Logo */
	background: #FFF;
}
.entete h1 {
	text-indent: -9999px;	
}
.contenantEntete {
	width: 960px;
	height: 140px;
	margin: 0 auto;
	background: url('../images/bgEntete.jpg') no-repeat top right;	
}
.logo {
    width: 211px;
    height: 130px;
    position: absolute;
    background: url('../images/logo.svg') no-repeat center center;
    background-size: contain; 
}

/* ------------------------------------------- */
/* --- 2. BARRE DE NAVIGATION (MENU) --- */
/* ------------------------------------------- */
.navigation {
	height: 27px;
	width: 100%;
	position: relative;
	bottom: 2px;
	/* Ancien: background: url('../images/navigation.jpg') repeat-x top left; */
	background: var(--as2-gris); /* Fond Gris Anthracite */
	/* Ancien: border-bottom: 2px solid #397961; */
	border-bottom: 2px solid var(--as2-vert); /* Ligne de séparation Verte */
}
.navigation ul {
	padding: 0px;
	width: 960px;
	margin: 0 auto;
	list-style-type: none;
}
.navigation ul li {
	height: 27px;
	position: relative;
	float: left;	
}
.navigation ul li a {
	float: left;
	padding: 6px 20px 5px;
	color: #FFF;
	display: block;
	/* Ancien: background: url('../images/separateur.gif') no-repeat; */
	background: none; /* Suppression de l'image de séparateur */
	border-right: 1px solid rgba(255,255,255,0.15); /* Séparateur discret */
}
.navigation li:hover > a {
	/* Ancien: background-color: #429b37; */
	background-color: var(--as2-vert); /* Survol en Vert Pomme */
	text-decoration: none;	
}
.navigation li:hover > ul{
	display: block;
}
.navigation li > ul {
	list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 27px;
    left: 0;
    z-index: 99999;    
    background: #444; /* Garde un gris sombre pour le sous-menu */
	width: 170px;
}
.navigation li > ul a {
	width: 160px;
	padding: 5px !important;
    display: block;
    white-space: nowrap;
    float: left;
    text-transform: none;
	background-image: none;
}
.navigation li > ul a:hover {
	padding: 5px !important;
}
#contenant {
	margin: 0 auto;
	height: auto;
	width: 960px;
}
.contenu {
	float: left;
	width: 940px;
	background: #FFF;
	padding: 10px;
}
.colGauche {
	float: left;
	background: #FFF;
	width: 620px;	
}
.colGauche .therapeute {
	float: left;
	padding: 5px;
	margin-top: 5px;
	width: 113px;
	height: 255px;
}
.colGauche .therapeutes {
	float: left;
	width: 620px;
	margin-bottom: 10px;
}
.colGauche .therapeutes img {
	margin-top: 10px;
}
.colGauche img {
	float: left;
}
.colGauche .noms {
	float: left;
	padding-left: 15px;
	padding-top: 12px;
	width: 605px;	
	height: 50px;
	background: #e5e3e3; /* Old browsers */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(to right,  #ffffff 0%,#e5e5e5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */
}
.colGauche .noms a {
	color: #000;	
}
.colGauche .noms a:hover {
	/* Ancien: color: #3e9534; */
	color: var(--as2-vert); /* Hover Vert Logo */
	text-decoration: none;
}
.colGauche .nom {
	width: 100px;
	float: left;
	margin-top: 7px;
	text-align: center;
}
.colGauche .nomTrp {
	width: 113px;
	float: left;
	margin-top: 7px;
	text-align: center;
}
.colGauche .nom a, .colGauche .nomTrp a {
	font-weight: bold;
	color: #000;
}
.colGauche .nom p, .colGauche .nomTrp p {
	margin-top: 3px;
}
.colGauche .noms ul {
	line-height: 1.5em;
	padding-left: 13px;	
}
.colGauche .noms div {
	width: 150px;
	margin-right: 20px;
	float: left;
}
.colGauche .autre {
	float: left;
	padding: 5px;
	margin-top: 5px;
	width: 100px;	
}
.colGauche .autre img {
	width: 100px;	
}
.colGauche .description {
	float: left;
	line-height: 1.4em;
}
.colGauche .description .liste {
	padding: 10px;
	padding-left: 25px;
	margin-top: 0px;
	float: left;
	background: #E8E8E8;
	width: 370px;
}
.colGauche .description .photo {
	float: left;
	width: 180px;
	height: auto;
	margin: 10px 10px 10px 0px;
}
.colGauche .description p a {
	/* Ancien: color: #3e9534; */
	color: var(--as2-vert);
}
.colGauche .chronique ul {
	width: 307px;
	float: left;
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-right: 3px;
}
.colGauche .chronique ul li a {
	display: block;
	padding: 4px;
	color: #000;
	margin-top: 2px;
}
.colGauche .chronique ul li a:hover {
	/* Ancien: color: #3e9534; */
	color: var(--as2-vert);
	text-decoration: none;
}
.colGauche .carte {
	float: left;
	width: 600px;
	height: 415px;
	margin-top: 10px;
}
.colGauche .coordonnees {
	float: left;
	width: 600px;
	height: 75px;
	margin-top: 10px;
	margin-left: 10px;
}
.colGauche .coordonnees p {
	margin-top: 1px;
	margin-bottom: 1px;	
}
.colGauche .conteneurCoord {
	width: 200px;
	height: 75px;
	float: left;
	line-height: 1.5em;
}
.colGauche .general {
	float: left;
	/*height: 270px;*/
	height: auto;
	width: 425px;
}
.colGauche .signature {
	float: left;
	width: 620px;
	border-bottom: 1px solid #CCC;
	min-height: 55px;
	text-align: right;
	display: block;
}
.colGauche .resteContenu {
	width: 620px;
	float: left;
}
.colGauche .signature span {
	font-size: 1.4em;
	font-style: italic;
	font-weight: bold;
}
.colGauche .table {
	width: 300px;
	float: left;
}
.colGauche .grandConteneur {
	width: 620px;
	float: left;
}
.colGauche .petitConteneur {
	width: 300px;
	float: left;
	margin-right: 20px;
}
.colGauche .section {
	float: left;
	width: 620px;
	/* Ancien: color: #3a8e30; */
	color: var(--as2-gris);
	font-weight: bold;
	font-size: 1.3em;
	padding-bottom: 2px;
	margin-top: 10px;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--as2-gris);
}
.colGauche .section:first-child {
	margin-top: 5px;
}
.colGauche .texteChronique {
	width: 620px;
	line-height: 1.5em;
	float: left;
}
.colGauche .texteChronique h2 {
	font-size: 1.2em;
	margin: 15px 0px 0px 0px;
}
.colGauche #listeChroniques {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 620px;
	margin-top: 2px;
}
.colGauche #listeChroniques li a {
	padding: 8px 5px;
	margin-bottom: 2px;
	background: #eaeaea;
	display: block;
	color: #000;
	font-weight: bold;
}
.colGauche .therapeutesSection {
	padding-top: 10px;
	border-top: 1px dotted #CCC;
}
.colGauche .therapeutesSection a {
	color: #000;	
}
.colGauche .therapeutesSection a:hover {
	/* Ancien: color: #3e9534; */
	color: var(--as2-vert);
}

/* ------------------------------------------- */
/* --- 3. TITRES DES COLONNES (Gauche) --- */
/* ------------------------------------------- */
.titreGauche {
	float: left;
	padding: 4px 10px;
	width: 600px;
	/* Ancien: background: #3e9534; */
	background: var(--as2-gris); /* Fond Gris Anthracite */
	/* Ancien: border-bottom: 2px solid #3a7861; */
	border-bottom: 2px solid var(--as2-vert); /* Souligné Vert */
	color: #FFF;	
}
.titreGauche h2 {
	margin: 0;
	padding: 0;
	font-weight: normal;	
}
.titreGauche h2 div {
	float: right;
	font-size: 0.7em;
	margin-top: 3px;	
}
.titreGauche h3 {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;	
}
.colDroite {
	float: right;
	background: #FFF;
	width: 300px;	
}

/* ------------------------------------------- */
/* --- 4. TITRES DES COLONNES (Droite) --- */
/* ------------------------------------------- */
.colDroite h3 {
	font-size: 1.2em;	
	margin: 0;
	padding-bottom: 1px;
	width: 300px;
	/* Ancien: color: #3a7861; */
	color: var(--as2-gris); /* Texte Gris Anthracite */
	/* Ancien: border-bottom: 2px solid #3a7861; */
	border-bottom: 2px solid var(--as2-vert); /* Souligné Vert */
}
.colDroite img {
	margin-top: 5px;	
}
.colDroite p {
	margin-top: 7px;
	margin-bottom: 7px;
}
.colDroite p a {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}
.colDroite span {
	color: #333;
	font-size: 0.9em;
}
.colDroite span a {
	color: #333;
	font-weight: normal;
	text-decoration: underline;
}
#carte {
	border: 0;	
}

/* ------------------------------------------- */
/* --- 5. PIED DE PAGE (Footer) --- */
/* ------------------------------------------- */
.piedPage {
	width: 960px;
	float: left;
	/* Ancien: border-bottom: 1px solid #3e9534; */
	border-bottom: 1px solid rgba(255,255,255,0.15); /* Séparateur léger */
	height: 198px;
}
.piedPage .colonne:first-child {
	width: 200px;
	margin-left: 25px;
	border-left: none;
	padding: 0;
}
.piedPage .colonne:first-child ul {
	width: 180px;
}
.piedPage .colonne {
	width: 480px;
	height: 170px;
	float: left;
	margin-top: 15px;
	/* Ancien: border-right: 1px solid #57b548; border-left: 1px solid #3e9534; */
	border-right: 1px solid rgba(255,255,255,0.15); /* Séparateurs légers */
	border-left: 1px solid rgba(255,255,255,0.15); /* Séparateurs légers */
	padding-left: 20px;
}
.piedPage .colonne:last-child {
	width: 200px;
	border-right: none !important;
}
.piedPage h4 {
	margin: 0px 0px 0px 0px;
	color: #FFF;
	font-size: 1.8em;
	font-weight: normal;
}
.piedPage ul {
	width: 160px;
	float: left;
	list-style-type: none;
	padding: 0px;
	margin-top: 5px;
}
.piedPage ul li a {
	display: block;
	padding: 4px 3px 4px 0px;
	color: #FFF;
	text-decoration: underline;
}
.piedPage ul li a:hover {
	text-decoration: none;
	color: var(--as2-vert); /* Liens footer en Vert Logo */
}
.piedPage p {
	color: #FFF;
}
.errChronique {
	width: 570px;
	float: left;
	margin: 10px 0px 7px 17px;
	background: #8db7d1;
	border: 1px solid #194968;
	color: #194968;
	padding: 6px;
	text-align: center;
}
.errEvenement {
	width: 250px;
	float: left;
	margin: 10px 0px 7px 17px;
	background: #8db7d1;
	border: 1px solid #194968;
	color: #194968;
	padding: 6px;
	text-align: center;
}
.message{
    width: 90%;
	padding:10px 15px;
	margin: 0 auto 10px auto;
    text-align: justify;
    color: #000;
    /*font-size: 1.2em;*/
    font-weight: bold;
    border: 2px solid #F00;
    display: block;
}
.contMessage{
	height: 350px;
	overflow-y: scroll;
	margin-bottom: 20px;
}
.zonePiedPage {
	width: 960px;
	float: left;
	/* Ancien: background: url('../images/pied.jpg') repeat-x; */
	background: var(--as2-gris); /* Fond Gris Anthracite */
	/* Ancien: border-top: 1px solid #3e9534; */
	border-top: 4px solid var(--as2-vert); /* Ligne de démarcation Verte */
	height: 270px;
}
.zonePiedPage .note {
	color: #fff;
    float: left;
    /* Ancien: background-color: #3e9534; */
    background-color: var(--as2-vert); /* Bande d'avis en Vert Logo */
    padding: 0px 20px 2px 20px;
    /* Ancien: border-top: 1px solid #2848246b; */
    border-top: none; 
}
/* Le reste du CSS pour les thérapeutes (grid, card, etc.) */

/* Conteneur de toutes les cartes */
.therapeute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    padding: 20px 0px ;
	width: 100%;
}

/* Carte individuelle */
.therapeute-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.therapeute-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.therapeute-card a {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* Image */
.therapeute-image {
    width: 100%;
    height: 150px; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.therapeute-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Infos */
.therapeute-info {
    padding: 10px;
    text-align: center;
}

.therapeute-info h4 {
    margin: 0 0 5px 0;
    font-size: 1em;
}

.therapeute-info p {
    margin: 0;
    font-size: 0.9em;
    color: #666;
}

/* Supprime l'animation et l'ombre au passage de la souris */
.therapeute-card.no-hover {
    transition: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.therapeute-card.no-hover:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


/* ------------------------------------------- */
/* --- 6. MODERNISATION DES BOUTONS CTA --- */
/* Cible les boutons qui sont en style inline dans droite.php */
/* ------------------------------------------- */

.colDroite a[style*="background-color"] {
    background-color: var(--as2-vert) !important;
    color: #fff !important;
    border-radius: 4px !important; 
    border: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
    transition: all 0.3s ease;
    padding: 10px 15px !important; /* S'assurer d'un padding uniforme */
}

.colDroite a[style*="background-color"]:hover {
    background-color: var(--as2-gris) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}