/*
Theme Name: Sitiz Template
Theme URI: 
Author: Léo Laville
Author URI: 
Description: Thème pour le site Happy Citiz
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: sitiztemplate
*/

body.mon-body {
	font-family: 'Montserrat', sans-serif;
    width: 80%;
    margin: auto;
	overflow-x: hidden; 

}

.flex-items-center{
	display: flex;
	align-items: center;
}

.rouge-script-regular {
  font-family: "Rouge Script", cursive;
  font-weight: 400;
  font-style: normal;
	color : #DA6163;
}

.margin-top{
	margin-top: 24px !important;
}

main{
	max-width: 1000px;
   margin: 0 auto 50px auto;
}

.h2-home{
	text-align: center; 
	font-size: 3.5em; 
	margin: 10px;
}

.category-article{
	font-size: 1.3em;
    width: 55%;
    margin: 10px auto;
    font-weight: normal;
}

.home-article{
	justify-content: space-around;
	text-align: center;
	gap:50px;
}

.row {
    display: flex;
}

header {
    margin: auto;
    text-align: center;
    padding: 30px 0;
}

footer {
    max-width: 1000px;
    margin: auto;
	text-align:center;
}

.social-footer {
    justify-content: space-between;
    padding: 0 20px;
	    align-items: center;
}

.social {
    width: 36px;
    height: 36px;
}

.social-contain {
    align-items: center;
    gap: 7px;
}

.footer-ul {
    list-style-type: none;
    justify-content: center;
    padding: 0;
	align-items: center;
}

.footer-ul li {
    border-right: 1px solid black;
    padding: 0 40px
}

a {
    text-decoration: none;
    color: black;
}

hr {
    width: 1000px;
}

/* PAGE TOUS LES NUMEROS */

/* container */
.swiper-container {
  position: relative;
  width: 100%;
/*   overflow: hidden; */
  box-sizing: border-box;
}

/* wrapper/slide */
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  width: 25%; /* 4 slides visibles */
  margin-right: 24px;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .swiper-slide { width: 50%; margin-right: 24px; } /* 2 par ligne */
}
@media (max-width: 480px) {
  .swiper-slide { width: 100%; margin-right: 0; } /* 1 par ligne */
}

.swiper-slide img { 
	width: 100%; 
	height: auto; 
	display: block; 
	border-radius: 6px; }

.swiper-button-custom-prev,
.swiper-button-custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  cursor: pointer;
  z-index: 10;
}

.swiper-button-custom-prev { 
	background-image: url('https://happy-sitiz.fr/wp-content/uploads/2025/10/chevron.svg');
	transform: rotate(180deg);
	transform-origin: 22px 10px;
}
.swiper-button-custom-next { 
	right: 0px; 
		background-image: url('https://happy-sitiz.fr/wp-content/uploads/2025/10/chevron.svg');
}

/* état normal */
.swiper-button-custom-prev,
.swiper-button-custom-next {
  opacity: 0.4;           /* bouton visible mais léger */
  transition: all 0.3s; /* transition fluide */
}

/* état désactivé (pas possible de swiper) */
.swiper-button-custom-prev.swiper-button-disabled,
.swiper-button-custom-next.swiper-button-disabled {
  opacity: 0.1;           /* quasiment transparent */
  cursor: default;         /* facultatif : change le curseur */
}


@media (min-width: 769px) {
.article-thumbnail img {
    width: 312px;      /* l'image prend toute la largeur de son conteneur */
    height: auto;     /* l'image garde ses proportions */
}
.swiper-button-custom-prev { 
	left: -60px; 
}
.swiper-button-custom-next { 
	right: -60px; 
}
}
@media (max-width: 768px) {
    .footer-ul {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 5px;
        margin: 15px 0;
    }

    .footer-ul li {
        border-right: 0;
    }

    hr {
        margin: 0;
        width: 100%;
    }

    header img {
        width: 60%;
    }
	.home-article{
		flex-direction: column;
	}
	.h2-home{
		font-size: 3em;
	}
	.social-footer{
		flex-direction:column;
	}
	.article-thumbnail a img{
		max-width: 312px;
		height: auto;
	}
	.calameo-mobile{
		width: 100%;
		height: 100%;
	}
	.articles-row{
		flex-direction: column;
	}
}

/* ARTICLE */

.single-article {
    width: 80%;
    margin: auto;
    padding: 20px 0;
}

.article-title {
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px;
}

.calameo-block {
    margin: 30px 0;
    text-align: center;
}