/*
 Theme Name:   Thème Coam
 Theme URI:    https://agence-coam.fr/
 Description:  Thème de l'Agence Coam, basé sur GeneratePress.
 Author:       Agence Coam
 Author URI:   https://agence-coam.fr/
 Template:     generatepress
 Version:      0.1
*/

/* Fichier de personnalisation du site */


/* ---------- TYPOGRAPHIE ---------- */

/* Affecte la font family définie en "headings" dans la font library à tous les titres,
 * et à tous les textes ayant pour classe additionnelle "style-hX" */
h1,h2,h3,h4,h5,h6,[class*=style-h] {
	font-family: Fira Sans;	
	line-height:1.3em;
}

/* Taille des titres et des textes ayant pour classe "style-hX".
 * Paramétré ici plutôt que dans le Customizer pour n'avoir à le changer qu'une fois
 * Ajouter les font-weight pour chaque niveau de titre. */

p {
	font-size:clamp(1.063rem, 1.001rem + 0.166vw, 1.15rem);
	line-height:1.5;
	margin-bottom:1rem;
}

h1, .style-h1 {
	font-size:clamp(2rem, 1.286rem + 1.905vw, 3rem);
}

h2, .style-h2 {
	font-size:clamp(1.802rem, 1.8423vw + .9708rem, 2.488rem);
}

h3, .style-h3 {
	font-family:Outfit;
	font-weight:600;
	font-size:clamp(1.424rem, .7412vw + 1.0896rem, 1.7rem);
}

h4, .style-h4 {
	font-size:clamp(1.266rem, .4673vw + 1.0552rem, 1.44rem);
}

h5, .style-h5 {
	font-size:clamp(1.125rem, .2014vw + 1.0341rem, 1.2rem);
	line-height:1.5rem !important;
}

/* =====================
   CARROUSEL
======================== */

/********************************** Hide carousel behavior on desktop ***********************************/
/* enable Flickity by default */
.carousel-approche:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 767px ) {
  /* disable Flickity for large devices */
	.carousel-approche:after {
    content: '';
  }
}

@media (max-width: 767px) {
	.carousel-cell-approche {
  		width: calc(90% - 1rem * 1/2);
 		margin-right: 1rem;
	}
}

/* Pagination */
.flickity-page-dots {
    width: 100%;
    bottom: -1.5rem;
    padding: 0;
    margin: 0;    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.flickity-page-dots .dot {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0;
    background: var(--charte-1);
}

/* Navigation */
.flickity-button{
    height: 2.5rem;
    width: 2.5rem;
    background: none;
    color: #000;
}

.flickity-button:hover{
    background: none;
}

.flickity-prev-next-button.previous{
    left: 0;
    transform: translateX(-3.5rem) translateY(-50%);
}

.flickity-prev-next-button.next{
    right: 0;
    transform: translateX(3.5rem) translateY(-50%);
}