/*==========================================
  Styles pour la partie <main>
===========================================*/

/*=================================
 CHEVRON <img> et <a>
==================================*/
div.groupe-liens
{
  /* pour positionner la flèche en absolute */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 40rem;
}

div.groupe-liens.laposte
{
  margin-top : -2rem;
}
/*==============================================
  DISPLAY
==============================================*/
.none
{
  display: none;
}

.block
{
  display: block;
}

.flex
{
  display: flex;
}

.grid
{
  display: grid;
}

/*==============================================
  GRAS
==============================================*/
section#contact strong
{
  font-weight: 500;
}

strong
{
  font-weight: 500;
}
/*===================================================
  BORDER
====================================================*/
.border-vert
{
  border : 1px solid #00C900;
}


/*==============================================
  POSITION
==============================================*/

.relative
{
  position: relative;
  line-height: 1.7;
}

/*==============================================
  MARGIN
==============================================*/

/* TOP */

.mt0
{
  margin-top: 0;
}

.mt10
{
  margin-top: 1rem;
}

.mt20
{
  margin-top: 2rem;
}

.mt30
{
  margin-top: 3rem;
}

.mt40
{
  margin-top: 4rem;
}

.mt50
{
  margin-top: 5rem;
}

.mt60
{
  margin-top: 5rem;
}

/* BOTTOM */
.mb0
{
  margin-bottom: 0;
}

.mb20
{
  margin-bottom: 2rem;
}

.mb30
{
  margin-bottom: 3rem;
}

.mb40
{
  margin-bottom: 4rem;
}

.mb45
{
  margin-bottom: 4.5rem;
}

/* LEFT */
.ml23
{
  margin-left: 2.3rem;
}

/*==============================================
  PADDING
==============================================*/
.pr20
{
  padding-right: 2rem;
}

.pr30
{
  padding-right: 3rem;
}

.pr40
{
  padding-right: 4rem;
}



h1.entete
{
  font-size: 2.4rem;
}

/*=======================================
  LARGEUR WIDTH
========================================*/

.w30
{
  max-width : 30%;
}

.w40
{
  max-width : 30%;
}

.w50
{
  max-width : 50%;
}

.w55
{
  max-width : 55%;
}

.w60
{
  max-width : 60%;
}

.w65
{
  max-width : 65%;
}

.w70
{
  max-width : 70%;
}

.w75
{
  max-width : 75%;
}

.w80
{
  max-width : 80%;
}

.w85
{
  max-width : 85%;
}

.w90
{
  max-width : 90%;
}

/*=======================================
  TEXTE
========================================*/

.gauche
{
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.paragraphe
{
  font-family: "Segoe UI", Arial, Verdana, "sans-serif";
  font-size: 2.2rem;
  text-align: left;
  color: #163860; /* bleu foncé */
  line-height: 2.9rem;
}

.paragraphe:first-child
{
  margin-top: 2rem;
}

.paragraphe:last-child
{
  margin-bottom: 2rem;
}

/* Met la première lettre de chaque page en grandre lettre vert */
article > p:first-of-type::first-letter
{
  color: var(--vert-titre);
  font-size: 180%;
  font-weight: 500;
  line-height: 1;
}

.autobus > p:first-of-type::first-letter
{
  color: var(--vert-titre);
  font-size: 180%;
  font-weight: 500;
  line-height: 1;
}

.cpam
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size : 2.4rem;
  line-height: 1.4;
}

.cpam h2
{
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 2rem;
}

.texte_approches_psy strong
{
  color: #009900;
}

.strong-vert
{
  color : var(--vert-titre);
}

/*=======================================
  Chevron vert
========================================*/
.chevron_image
{
  position: absolute;
  display: inline-block;
  top: 0.9rem;
  left: -3rem;
  transform: scale(140%);
}

.chevron_ancre:link,
.chevron_ancre:visited
{
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.chevron_ancre:hover,
.chevron_ancre:active
{
  font-weight: 500;
  border-radius: 0;
  text-align: inherit;
  line-height: inherit;
  color: #009900;
  text-decoration: none;
  background-image: none;
  border: 0;
}

.cpam-adresse
{
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-weight: 600;
  text-align: center;
  border: 0.2rem solid #009900;
  padding: 2rem;
  line-height: 3.5rem;
}


div.consult
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap : 7rem;
}

div.consult .qui
{
  align-self: flex-start;
  line-height: 1.6;
}

.tableau_tarifs
{
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  color: #163860;
  background-image: linear-gradient(to bottom, #8EC7CC 0%, #48AEB1 100%);
  margin-bottom: -1rem;
  max-width : 70%;
  line-height: 4rem;
  font-size: 2rem;
  font-weight: 500;
  margin-top : 2rem;
}

/* Largeur colonne 1 tableau Tarifs */
td.col1
{
  max-width : 90%;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Largeur colonne 2 tableau Tarifs */
td.col2
{
  max-width : 10%;
  text-align : center;
  padding : 1rem 1.5rem;
}

/*===================================================================
  Section Accueil
===================================================================*/
section#bienvenue,
section#thierry_senjean_bio,
section#mon_parcours_pro,
section#diplomes,
section#travaux,
section#liens
{
  grid-column: 2 / -2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Images du menu Accueil (index.html) */
section#bienvenue img,
section#thierry_senjean_bio img,
section#mon_parcours_pro img,
section#diplomes img,
section#travaux img,
section#liens img
{
  max-width: 100%;
  border-radius: 2rem;
  margin-bottom: 2rem;
}

/*===================================================================
  2- Section Cabinet
===================================================================*/
section#cabinet_adresse,
section#cabinet_photos,
section#maps,
section#pages_jaunes,
section#acces_voiture,
section#acces_bus
{
  grid-column: 2 / -2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 2- Images du menu Le Cabinet */
section#cabinet_adresse img,
section#cabinet_photos img,
section#maps img,
section#pages_jaunes img,
section#acces_voiture img,
section#acces_bus img
{
  max-width: 100%;
  border-radius: 2rem;
  margin-bottom: 2rem;
}

/* Mettre de l'espace avec le google maps */
section#cabinet_photos
{
  margin-bottom: 5rem;
}

/*===================================================================
  3- Section Mon Soutien Psy
===================================================================*/
section#dispositif,
section#consulter,
section#professionnel,
section#seances,
section#paiement,
section#remboursement,
section#continuer,
section#documents
{
  grid-column: 2 / -2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Images du menu Mon Soutien Psy */
section#dispositif img,
section#consulter img,
section#professionnel img,
section#seances img,
section#paiement img,
section#remboursement img,
section#continuer img,
section#documents img
{
  max-width: 100%;
  border-radius: 2rem;
  margin-bottom: 2rem;
}

/*===================================================================
  4- Section Consultations
===================================================================*/
section#pourqui,
section#pourquoi,
section#rdv,
section#duree_tarifs,
section#approches,
section#analytique,
section#tcc,
section#integrative
{
  grid-column: 2 / -2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Images du menu Consultations */
section#pourqui img,
section#pourquoi img,
section#rdv img,
section#duree_tarifs img,
section#approches img,
section#analytique img,
section#tcc img,
section#integrative img
{
  max-width: 100%;
  border-radius: 2rem;
  margin-bottom: 2rem;
}

/*===================================================================
  5- Section Contact
===================================================================*/

/* Ligne 1*/
.contact_titre
{
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: center;
}

/* Ligne 2 */
.contact_img_tel1
{
  grid-column: 1 / 2 ;
  grid-row: 2 / 3;
  align-self: center;
  justify-self: center;
}

.contact_tel1
{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: center;
  justify-self: left;
  font-weight: 500;
}

/* Ligne 3 */
.contact_img_tel2
{
  grid-column: 1 / 2 ;
  grid-row: 3 / 4 ;
  align-self: center;
  justify-self: center;
}

.contact_tel2
{
  grid-column: 2 / 3 ;
  grid-row: 3 / 4 ;
  align-self: center;
  justify-self: left;
  font-weight: 500;
}

.contact_img_mail
{
  grid-column: 1 / 2 ;
  grid-row: 4 / 5 ;
  align-self: center;
  justify-self: center;
}

.contact_mail1
{
  grid-column: 2 / 3 ;
  grid-row: 4 / 5 ;
  align-self: center;
  justify-self: center;
  font-weight: 500;
}

/*======  Fin sections 1 à 5 ================================*/

/* 1- Titre avec un cadre vert */
h2.cadre-vert.first-cadre,
h1.cadre-vert.first-cadre
{
  font-size: 3.2rem;
  font-weight: 400;
  border: 0.1rem solid var(--vert-titre4);
  padding: 2rem;
  max-width: 90rem;
  max-height: 8rem;
  color: var(--vert-titre5);
  line-height: 3.5rem;
  border-radius: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h2.cadre-vert,
h1.cadre-vert
{
  /* cadre vert : Bienvenue */
  font-size: 3rem;
  font-weight: 400;
  border: 0.1rem solid var(--vert-titre4);
  padding: 2rem;
  max-width: 90rem;
  max-height: 8rem;
  color: var(--vert-titre5);
  line-height: 3.5rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
}

h3.cadre-vert
{
  /* cadre vert : Bienvenue */
  font-size: 2.2rem;
  font-weight: 400;
  border: 0.1rem solid var(--vert-titre4);
  padding: 2rem;
  max-width: 90rem;
  max-height: 8rem;
  color: var(--vert-titre5);
  line-height: 2.5rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
}

/*===================================================================
  1) Section Accueil > Bienvenue
===================================================================*/

/* 3- Le <h1> de la page index.html */
#bienvenue h1
{
  max-width: 75%;
  font-size: var(--texte-police-h1);
  font-weight: 600;
  text-align: justify;
  line-height: 1.5;
  color: var(--texte-paragraphe1);
  margin-bottom: 2rem;
  word-spacing: 0.3rem;
}

/* 4- Paragraphes */
/* Les paragraphes sont centrés dans le parent */
article
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Paragraphes dans un article */
article p,
/* Themes dans la section consultations#approches*/
article div.themes
{
  max-width: 70%;
  font-size: 2.2rem;
  line-height: 1.5;
  text-align: left;
  color: var(--texte-paragraphe1);
  margin-bottom: 2rem;
  font-weight: 400;
}

/* Chevron Div*/
article div
{
  max-width: 90%;
  font-size: 2.2rem;
  line-height: 1.5;
  text-align: left;
  color: var(--texte-paragraphe1);
  font-weight: 400;
}

article div.laposte
{
  max-width: 100%;
  justify-content: left;
}

article a
{
  max-width: 100%;
  font-size: 2.2rem;
  line-height: 1.5;
  /*text-align: left;*/
  color: var(--texte-paragraphe1);
  margin-bottom: 2rem;
  font-weight: 400;

}


.article_bus
{
  margin : 0;
  padding: 0;
}

.article_bus p
{
  margin-left : 2rem;

}

article#gauche
{
  max-width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: yellow;
}

div.autobus
{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap : 2rem;
  max-width: 70%;
}

div.contacter
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(20rem, auto)  minmax(20rem, auto)
  minmax(20rem, auto);
  justify-content: center;
  align-items: center;
  max-width: 40%;
  border: 0.1rem solid #196861; /*  vert niveau 3  */
  border-radius: 0.5rem;
  box-shadow: 0.2rem 0.1rem 0.6rem -0.1rem #333333;
  padding: 2rem;
  margin-bottom: 4rem;
  gap : 2rem;
}

.contacter .tel
{
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.contacter .msg
{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

.contacter .mail
{
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}