/* Reset de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Colors*/
.gray3 {color: #333;}

.gray5 {color:#555;}

.gray8 {color: #888;}

/*Taille, épaisseur, alignement*/
.size1-15rem {font-size: 1.15rem;} 

.size1-3rem {font-size: 1.3rem;}

.size1-4rem {font-size: 1.4rem;}

.size2rem {font-size: 2rem;}

.size2-5rem {font-size: 2.5rem;}

.bold {	font-weight: bold;}

.textcenter {text-align: center;}

.italic {font-style: italic;}

/*Marges*/
.pad5-15px {padding: 5px 15px;}

.pad5-30px {padding: 5px 30px;}

.pad10-15px {padding: 10px 15px;}

.pad5-25-10-5px {padding: 5px 25px 10px 5px;}

.padB-2 {padding-bottom: 8%;}

.margT-2 {margin-top: 2%;}

.margB-2 {margin-bottom: 2%;}

.margB-3 {margin-bottom: 3%;}

.margB-5 {margin-bottom: 5%;}

.margL-4 {margin-left: 4%}


.marg2dot5-auto-4 {margin: 2.5% auto 4%;}

/*Styles puces*/
.list-unstyled {list-style:none;}

.style-puce-3::before {
	content: "—";
	margin-right: 2%;
}

/* Corps du site */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #333;
    line-height: 1.6;
    padding: 20px;
	min-height: 100vh; /* Garantir que le body prend toute la hauteur de la vue */
    display: flex;
    flex-direction: column;
	max-width: 70%;
	margin: 0 auto;
}

/* INPUT INVISIBLES */
input[type="radio"],
input[type="checkbox"] {
    display: none;
}

label {
  cursor: pointer;
}

/* Contenu principal */
main {
    flex-grow: 1; /* Laisse le contenu prendre tout l'espace restant */
	font-size: 1.08rem;
	color: #555;
}

/* Couleur orange discrète pour l'interactivité */
#bascul-asso:checked ~ header label[for="bascul-asso"],
#bascul-publi:checked ~ header label[for="bascul-publi"] {
    color: #f2820d; /* Jaune-orange */
	text-decoration: underline;
}

/* CACHER TOUT PAR DÉFAUT */
.page {display: none;}

/* AFFICHAGE SELON ONGLET */
#bascul-asso:checked ~ main #asso {
    display: block;
}

#bascul-publi:checked ~ main #publi {
    display: block;
}

/* modification couleur au survol  */
.survol:hover {
    color: #f59e42; /* Changer de couleur au survol pour l'interaction */
}


/* ===== VUE LISTE ===== */

.bend-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.container-blanc {
    background-color: #fff;
    padding: 3% 4%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ===== VUE LECTURE ===== */

.lecture {
  display: none;
}
 
.lecture article {
  background-color: #fff;
  padding: 3% 4% 4%;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} 
/* ===== LOGIQUE D’AFFICHAGE ASSO===== */

/* Quand un article est ouvert → cacher la liste */
#A1-Charte:checked ~ .bend-page,
#A2-Why:checked ~ .bend-page,
#A3-Who:checked ~ .bend-page {
  display: none;
}

/* Afficher uniquement l’article correspondant */
#A1-Charte:checked ~ .lecture-A1,
#A2-Why:checked ~ .lecture-A2,
#A3-Who:checked ~ .lecture-A3 {
  display: block;
}

/* ===== LOGIQUE D’AFFICHAGE Publi===== */

/* Quand un article est ouvert → cacher la liste */
#P1-AltImpact:checked ~ .bend-page,
#P2:checked ~ .bend-page {
  display: none;
}

/* Afficher uniquement l’article correspondant */
#P1-AltImpact:checked ~ .lecture-P1,
#P2:checked ~ .lecture-P2 {
  display: block;
}

/* Contenu des articles */
.article-lien {
	text-decoration: none; /* Supprime la mise en forme par défaut */
}

#article-transition {
	margin-top: 6%;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
    color: #666;
	padding-bottom: 1% auto;
}

footer a {
	color: #f2820d;
    text-decoration: none; /* Supprime la mise en forme par défaut */
}

/* Responsive: Sur les petits écrans, passer tout en une colonne */
@media (max-width: 768px) {
    .article-main {
        max-width: 90%; /* Le premier article prend toute la largeur */
    }

}