/* toutes pages */
html, body { width: 100%; overflow-x: hidden; }  ********  pas de barre de défilement ******************
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #E3E3E3; margin: 0; padding: 0; }
.page-wrapper { padding: 20px; } ****** espace de 20 px entre bord et contenu ******
* { margin: 0; padding: 0; box-sizing: border-box; }  /* etoile = tous les elements de la page. garde la taille définie, peu importe padding et border */

/* Boutons tout en haut du site  boutons-haut.html */
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; gap: 15px; flex-wrap: wrap; }
.nav-button { flex: 1; min-width: 150px; padding: 20px 30px; background: linear-gradient(135deg, #fecc50 0%, #fecc50 100%); color: #000000; border: none; border-radius: 12px; font-size: 0.8em; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: block; }
.nav-button:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25); background: linear-gradient(135deg, #9d8f73 0%, #7e725a 100%); }
.nav-button:active { transform: translateY(-1px); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); }
.nav-button { animation: slideIn 0.5s ease-out backwards; }
.nav-button:nth-child(1) { animation-delay: 0.1s; }
.nav-button:nth-child(2) { animation-delay: 0.2s; }
.nav-button:nth-child(3) { animation-delay: 0.3s; }
.nav-button:nth-child(4) { animation-delay: 0.4s; }
.nav-button:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 768px) and (max-width: 1024px) { .nav-button { font-size: 0.6em; padding: 5px 5px; } }
@media (min-width: 1025px) { .nav-button { font-size: 1.2em; padding: 5px 5px; } }
@media (max-width: 768px) { .nav-container { flex-direction: column; gap: 6px; } .nav-button { font-size: 0.9em; padding: 5px 5px; width: 100%; } }


/* pour boutons reseau sociaux  social-bouton.html */
.social-buttons { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin: 30px 0; }
.social-buttons img { max-width: 390px; width: 100%; height: auto; transition: transform 0.2s ease; }
.social-buttons a:hover img { transform: scale(1.02); }

/* pour boutons autres asso bas de page index */
.assos-buttons { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin: 30px 0; }
.assos-buttons img { max-width: 300px; width: 100%; height: auto; transition: transform 0.2s ease; }
.assos-buttons a:hover img { transform: scale(1.05); }