*{
                    box-sizing: border-box;
                    padding: 0;
                    margin: 0;
                }
                .body{
                    color: rgb(239, 241, 243);
                }
                
                
                iframe {
                  display: block;
                  margin: 50px; }
                
                 @media (max-width: 600px) {
                  iframe {
                    width: 90%;
                    margin: auto; } }
                
                
                
                a {
                    text-decoration: none;
                    color: inherit;
                }
                
                
                /* ceci concerne le sidebar qui est visible seulement sur pc */
                
                .side{
                    width: 25%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 30px;
                    float: right;
                    margin-right: 40px;
                    margin-top: 20px;
                    margin-bottom: 60px;
                }
                
                aside {
                  opacity: 0;
                  transform: translateX(100px); /* décale l’aside à droite au départ */
                  animation: slideIn 1s ease-out forwards;
                }
                
                @keyframes slideIn {
                  to {
                    opacity: 1;
                    transform: translateX(0); /* revient à sa place */
                  }
                }
                
                
                .element {
                    width: 100%;
                    height: auto;
                    
                }
                
                .element img {
                    width: 80%;       /* largeur relative au parent */
                    height: auto;     /* hauteur automatique pour garder les proportions */
                    border-radius: 10px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                    object-fit: cover; /* si tu veux que l'image remplisse son conteneur sans déformation */
                }
                
                
                
                
                
                @media (max-width: 600px) {
                    .side{ 
                        display: none;
                    }
                }
                
                @media (min-width: 601px) and (max-width: 900px) {
                   .side{ 
                        display: none;
                    }
                }
                
                @media (min-width: 901px) and (max-width: 1200px) {
                   .side{ 
                        display: none;
                    }
                }
                   
                
                
                /* ceci agit sur la page pel */
                
                .titre_pel{
                    font-size: 2rem;
                    color: rgb(10, 88, 243);
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: 0 auto;
                    font-style: normal;
                    margin-bottom: 0.5em;
                    text-align: center;
                    margin-top: 1em;
                }
                @media (max-width: 600px) {
                    .titre_pel{ 
                        font-size: 1.2rem;
                        margin-top: 1em;
                    }
                }
                
                .info_pel{
                    font-size: 1.2rem;
                    color: rgb(0, 0, 0);
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: 0 auto;
                    font-style: normal;
                    margin-bottom: 0.5em;
                    text-align: center;
                    line-height: 1.6;
                }
                @media (max-width: 600px) {
                    .info_pel{ 
                        font-size: 1rem;
                    }
                }
                
                
                
                
                
                /* ceci agit sur la page contact */
                
                .presentation{
                    width: 50%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 20px;
                    float: left;
                    margin-left: 5em;
                    margin-top: 4em;
                    margin-bottom: 4em;
                }
                .presentation p{
                    text-align: justify;
                    font-size: 1.2rem;
                    line-height: 1.6;
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: 0 auto;
                    font-style: normal;
                }
                
                .presentation h1{
                    font-size: 2.5rem;
                    color: rgb(17, 44, 97);
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: 0 auto;
                    font-style: normal;
                    margin-bottom: 0.5em;
                    text-align: center;
                }
                
                
                @media (max-width: 600px) {
                    .presentation{ 
                        width: 90%;
                        margin: auto;
                        margin-top: 2em;
                        margin-left: 20px;
                    }
                    .presentation p{
                        font-size: 1rem;
                        margin-bottom: 10em;
                    }
                    .presentation h1{
                        font-size: 2rem;
                        margin-bottom: 0.5em;
                    }
                }
                
                
                
             
                /* modal */
                .modal {
                  display: none; /* cachée par défaut */
                  position: fixed;
                  z-index: 1000;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  background-color: rgba(0,0,0,0.5);
                }
                
                .modal-content {
                  background-color: #fff;
                  margin: 20% auto;
                  padding: 20px;
                  border-radius: 8px;
                  width: 80%;
                  max-width: 400px;
                  text-align: center;
                }
                
                .modal-content button {
                  padding: 12px 25px;
                  margin-top: 15px;
                  cursor: pointer;
                  font-size: 16px;
                  border: none;
                  background-color: #007bff;
                  color: #fff;
                  border-radius: 5px;
                  transition: background 0.3s ease;
                }
                
                .modal-content button:hover {
                  background-color: #0056b3;
                }
                
                /* responsive */
                @media (max-width: 480px) {
                  .modal-content {
                    width: 90%;
                    margin-top: 40%;
                    padding: 15px;
                  }
                
                  .modal-content button {
                    width: 100%;
                    font-size: 14px;
                    padding: 10px;
                  }
                }
                
                                
                                
                
                
                /* ceci concerne les images au mileu des articles */
                
                .img_article {
                  width: 100%;
                  display: flex;
                  justify-content: center;   /* centre horizontalement */
                  margin: 2rem 0;            /* espace autour de l’image */
                }
                
                .img_article img {
                  width: 100%;               /* s’adapte à la largeur du conteneur */
                  max-width: 600px;          /* limite la taille maximale de l’image */
                  height: auto;              /* conserve les proportions */
                  border-radius: 30px;       /* coins légèrement arrondis */
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* ombre douce */
                  object-fit: cover;         /* rogne proprement si nécessaire */
                  transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
                
                /* Petit effet au survol */
                .img_article img:hover {
                  transform: scale(1.03);
                  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
                }
                
                /* Responsive */
                @media (max-width: 768px) {
                  .img_article img {
                    max-width: 100%;
                    border-radius: 6px;
                  }
                }