/* Styles globaux */
        body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
        }

        /* Style du header */
        .tete {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px; /* Gère les marges */
            background-color: white;
            border-bottom: 0px solid #8B004F;
            height: 60px;
            width: 100%;
            position: fixed;
            top: 0;
            
            z-index: 1000;
        }

        /* Menu hamburger */
        .hamburger {
            cursor: pointer;
            width: 27px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 0; /* Marge à gauche */
        }

        .hamburger .line {
            width: 100%;
            height: 3px;
            background-color: black;
            transition: all 0.3s ease;
        }

        /* Animation du menu hamburger */
        .open .line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .open .line:nth-child(2) {
            opacity: 0;
        }

        .open .line:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

         /* Logo */
        .logo-container {
    position: absolute;
    left: 43%;
     transform: translateX(-43%);
    
}
        .logo {
            height: 18px; /* Taille du logo */
        }
        
        
        
        /* Icône S'abonner */
        .subscribe-container {
            margin: 0 auto;
            margin-right: 20px; /* Ajustez la marge en fonction de votre design */
            float: right;
        }
        
        .subscribe-icon {
            cursor: pointer;
            height: 22px; /* Taille de l'icône "S'abonner" */
            transition: transform 0.3s ease; /* Ajoute un effet de zoom au survol */
        }
        
        .subscribe-icon:hover {
            transform: scale(1.1); /* Légère mise en avant au survol */
        }
        

        /* Icône de recherche */
        .search-container {
            margin-right: 40px; /* Marge égale à celle du menu hamburger */
        }

        .search-icon {
            cursor: pointer;
            height: 30px;
        }
        
        .search-icon:hover {
            transform: scale(1.1); /* Légère mise en avant au survol */
        }

        /* Menu déroulant */
        .nav {
            display: none;
            position: fixed;
            top: 60px;
            left: 5px;
            width: 97vw;
            height: auto;
            min-height: 600px;
            max-width: 400px;
            background: #f6f1f6;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            z-index: 999;
            border-radius: 15px;
        }

        .nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        
        .nav li {
            display: flex;
            align-items: center; /* Aligne l'icône et le texte verticalement */
            padding: 22px 16px;
            font-size: 16px;
           
        }

        .nav li img {
            margin-right: 10px; /* Espacement entre l'image et le texte */
            width: 20px; /* Taille de l'icône */
            height: 20px; /* Taille de l'icône */
        }


        .nav a {
            text-decoration: none;
            color: black;
            font-weight: bold;
        }
        
        
                .nav a:hover {
            color: #8B004F;
        }
        
        
        
        /* Lien actif dans la navbar */
.nav a.active {
    color: #8B004F; /* Change la couleur à ce que tu souhaites */
    font-weight: bold;
}

/* Lien actif au survol */
.nav a.active:hover {
    color: #8B004F;  /* Une couleur plus foncée ou différente lors du survol */
}



        /* Affiche le menu quand il est ouvert */
        .show {
            display: block;
        }

        /* Progress bar au niveau du header */
        .progress-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #f3f3f3;
        }

        .progress-bar {
            height: 100%;
            width: 0;
            background-color: #8B4513;
            transition: width 0.25s ease;
        }
        
        
      
      
     /* Conteneur des articles */
        .articles-container {
            display: grid;
            gap: 20px;
            width: 100%;
            max-width: 800px;
        }

        /* Styles pour la carte d'article */
        .article-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 380px;
            padding: 10px;
            opacity: 0;
            transform: translateY(30px); /* Décalage initial */
           transition: opacity 0.6s ease, transform 0.6s ease; /* Transition douce */
           }

            .article-card.visible {
            opacity: 1;
          transform: translateY(0); /* Revenir à la position normale */
            }
        .article-header {
            flex: 1;
        }

        .publication-date {
            display: block;
            font-size: 0.8em;
            color: #333;
            margin-bottom: 10px;
        }

        .article-title {
            font-size: 1.2em;
            color: #333;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* Limite le texte à 2 lignes */
            line-clamp: 2;
            line-height: 1.4em;
            max-height: 2.8em; /* 1.4em x 2 lignes */
            text-overflow: ellipsis;
        }

        .article-image img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 8px;
        }

        .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
        }

        .reading-time, .share-icon {
            display: flex;
            align-items: center;
            color: #555;
            font-size: 0.9em;
            cursor: pointer;
        }
        
        
        .readingicon {
            width: 17px;
            height: 17px;
            margin-right: 10px;
        }
        
        .shareicon {
            width: 22px;
            height: 22px;
        }


      
      
      /* Style de base pour le bouton */
        .btn-lire-article {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background: linear-gradient(to right, #0B0B61, #8B004F); /* Fond de base */
            color: white;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: background 0.5s ease, transform 0.2s ease;
            position: relative;
            float: right;
            margin-right: 5%;
            width: 160px;
        }

        .btn-lire-article:hover {
            transform: scale(1.1);
        }

        /* Ajout d'animation pour le changement de couleur de fond */
        .btn-lire-article.change-background {
            background: linear-gradient(to right, #84004F, #8B4513); /* Changement de couleur lors du clic, hover ou scroll */
        }
      
      
        
         
      
      
      
      .tags {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #8b004f;
      font-weight: bold;
      }
      
      .tags img {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      }
      
      .ceo {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #8b004f;
      font-weight: bold;
      }
      
      .ceo img {
      margin-right: 5px;
      width: 30px;
      height: 30px;
      }
     
      
      /* Section de présentation IJURIO */
      .bio-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5px; /* espace pour le défilement */
      opacity: 0; /* Masqué par défaut */
      transform: translateY(30px); /* décalage vers le bas */
      transition: opacity 0.6s ease, transform 0.6s ease; /* transition douce */
      }
      
      .bio-section.visible {
      opacity: 1; /* visible */
      transform: translateY(0); /* repositionné */
      border-top: 0px solid #8b4513;
      border-right: 0px solid #8b4513;
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
      
      /* Cadre pour la photo */
      .profile-container {
      display: flex;
      justify-content: center;
      align-items: flex-end; /* Aligne le bas */
      transition: transform 0.6s ease; /* Transition pour le mouvement */
      }
      
      .profile-pic {
      width: 175px;
      height: 175px;
      border-radius: 50%;
      border: 4px solid #8b004f; /* Couleur de la bordure */
      object-fit: cover;
      margin-bottom: 20px;
      transform: translateY(30px); /* Départ en bas */
      opacity: 0; /* Masqué au départ */
      transition: transform 0.6s ease, opacity 0.6s ease; /* Transition */
      }
      
      /* Cadre pour la description */
      .description {
      height: auto;
      text-align: center;
      margin: 20px 0;
      transform: translateY(-30px); /* Départ en haut */
      opacity: 0; /* Masqué au départ */
      transition: transform 0.6s ease, opacity 0.6s ease; /* Transition */
      }
      
      /* Classes pour rendre visible lors du défilement */
      .profile-pic.visible,
      .description.visible {
      transform: translateY(0); /* Remonte */
      opacity: 1; /* Visible */
      }
      
      
      .contact-button {
      font-size: 15px;
      padding: 10px 20px;
      background-color: black;
      color: white;
      border: none;
      border-radius: 25px;
      min-width: 300px;
      max-width:350px;
      cursor: pointer;
      transition: background-color 0.3s ease; /* animation couleur */
      }
      
      .contact-button:hover {
      background-color: #8b004f; /* couleur au survol */
      }
      
      .video-button {
      font-size: 15px;
      font-weight: bold;
      padding: 12px 20px;
      background: linear-gradient(to right, #f5f6dc, #b99ccb );
      color: black;
      border: none;
      border-radius: 25px;
      min-width: 300px;
      max-width:350px;
      cursor: pointer;
      transition: background-color 0.3s ease; /* animation couleur */
      border: 1px solid #b99ccb;
      }
      
      .video-button:hover {
      background-color: #f6efdc; /* couleur au survol */
      Color: #c4302B;
      }
      
      
      
      .youtube-channel {
      border: 2px solid #FF0000; /* Bordure rouge typique de YouTube */
      
      padding: 20px;
      margin: 20px 0px;
      background-color: #f9f9f9;
      box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
      text-align: center;
      border-image: linear-gradient(to right, #8B004F, #000080, #8B4513) 1; /* Dégradé de gauche à droite */
      border-radius: 10px;
      }
      
      .youtube-channel p {
      font-size: 0.8em;
      color: #333;
      }
      .youtube-channel a {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 20px;
      color: #FFFFFF;
      background-color: #FF0000; /* Couleur rouge typique de YouTube */
      text-decoration: none;
      border-radius: 5px;
      }
      .youtube-channel a:hover {
      background-color: #cc0000; /* Couleur rouge plus foncé au survol */
      }
      
      
      
      
      .divintro2 {
      text-align: left;
      color: black;
      padding: 15px;
      margin : 0 auto;
      width: 49%;
      height: 200px;
      background-color: #fff6e0;
      border-radius: 15px;
      font-size: 15px;
      float:left;
      line-height: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      
      }
      
      
      .divintro3 {
      text-align: left;
      color: white;
      padding: 15px;
      margin : 0 auto;
      margin-left: 10px;
      width: 30%;
      height: 200px;
      background: linear-gradient(#581845, #182631); /* Dégradé de beige clair à pêche doux */
      border-radius: 15px;
      font-size:15px;
      float:left;
      line-height: 20px;
      }
      
      
      
      
      
      /* Conteneur principal */
.main-container {
    display: grid;
    grid-template-columns: 1fr; /* Par défaut une seule colonne pour mobile */
    gap: 20px;
    padding: 20px;
    max-width: 1200px; /* Largeur maximale pour le conteneur */
    margin: 0 auto; /* Centrer le conteneur */
}

/* Style du contenu principal */
.main-content {
    background-color: #f4f4f4;
    padding: 20px;
}

/* Styles pour les sidebars */
.sidebar-left, .sidebar-right {
    background-color: white;
    color: black;
    padding: 10px;
    border-radius: 15px;
    display: none; /* Cacher par défaut */
    font-size: 14px;
}


 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
     
	 .log {
	 margin: 0 auto;
	 width: 50px;
	 height: 50px;
	 float: center;}
	.fetichimg {
	float: right; margin-right: 20px; margin-top: -23px; width: 30px; height: 30px;
	}
	.fetichbar { 
	width: 65%; 
	border: 2px solid #CCCCCC;
	border-radius: 10px;
	font-size: 0.9em; 
	padding: 10px;
	text-align: center;
	margin : 0 auto;
	float: center;
	height: 50px;
	}
	h1 {text-align: left; line-height: 30px;}
		h3 {text-align: left; line-height: 30px;}
	.fdroite {
	width: 16px;
	height: 16px;
	margin-left: 2px;
	margin-bottom: -2px;
	}
	.fleche-droite {
	width: 20px;
	height: auto;
	margin-left: 15px;
	margin-bottom: -4px;
	}
	.toutlire {
	text-align: center;
	width: 110px;
	height: 26px;
	text-decoration:none;
	color : white;
	background-color: #2D0E20;
	float: right;
	margin : 10px;
	border-radius: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 0.8em;
	font-weight: bold;
	}
	.plus {
	width: 50px;
	height: 50px;
	margin-left: 15px;
	margin-bottom: -3px;
	}
	.imgsearch {
	float: right;
	margin: 0 auto;
	width: 30px;
	height: 30px;
	margin-left:5px;
	margin-top: 5px;
	margin-bottom: 5px;
	}
	.okbar {text-align: center;font-size: 0.9em; margin: 0 auto; margin-left:-2px; background-color: #8B4513; color: white; height: 50px; width: 55px; border: 0; border-radius: 10px;}
	 a {
	 text-decoration: none;
	 color: inherit;
	 }
	 
	
	 
	 .a8b{
	 text-decoration: none;
	 color: #8B4513;
	 }
	 .aaa {
	 text-decoration: none;
	 color: #BDBDBD;
	 font-size: 0.9em;
	 }
	 .aa {
	 text-decoration: none;
	 color: #FFFFFF;
	 font-size: 1em;
	 }
	 .a42 {text-decoration: none; color:#424242;}
	 .ac {
	 text-decoration: none;
	 color: #004444;
	 font-size: 1em;
	 font-weight: bold;
	 }
	 #menud {
	 text-align: left;
	 padding: 50%;
	 margin-top:3px;
	 background-color: #E7E7E7;
	 width: 47%;
	 height: 200px;
	 min-height:200px;
	 border: 1px solid #CCCCCC;
	 float: right;
	 }
	 #divdiv {
	 text-align: left;
	 padding:1px;
	 margin-top:1px;
	 background-color: #80CBC4;
	 width: 16 em;
	 height: 16 em;
	 border: 0px solid #CCCCCC;
	 float: left;
	 }
	 .menu2 {
	 text-align: left;
	 color: #FFFFFF;
	 padding: 1%;
	 background-color: #757575;
	 width: auto;
	 height: 1em;
	 margin: 0 auto;
	 }
	 .menumenu {
	 text-align: left;
	 color: black;
	 padding: 5px;
	 padding-left: 1%;
	 padding-right: 1%;
	 margin-top: 3px;
	 margin-left: 1px;
	 width: auto;
	 max-width: 900px;
	 height: auto;
	 min-height: 90px;
	 font-size: 1em;
	 border: 1px solid #CCCCCC;	 
	 border-top: 0;
	 border-left: 0;
	 border-right: 0;
	 }
	 .menexo {
	 text-align: left;
	 color: black;
	 padding: 5px;
	 margin-top: 3%;
	 width: auto;
	 height: auto;
	 font-size: 1em;
	} 
	 .menug {
	 text-align: left;
	 padding: 2px;
	 margin-top:1px;
	 margin-right: 5px;
	 background-color: #FFFFFF;
	 font-size: 1.2em;
	 color: #BDBDBD;
	 width: 30px;
	 height: 90px;
	 border: none;
	 float: left;
	 }
	.contenu{
	text-align: left;
	padding: 10px;
	margin: 0 auto;
	background: linear-gradient(#F1ECE0, #EEECEC, #CCCCCC,  #F1ECE0);
	width: auto;
	max-width: 800px;
	height: auto;
	border: none;
	border-radius: 15px;
	}
	 .contenusans {
	 text-align: left;
	 color: black;
	 padding: 2%;
	 margin : 0 auto;
	 width: auto;
	 max-width: 700px;
	 height: auto;
	 border: 0;
	 background-color: white;
	 line-height: 1.7em;
	 border-radius: 15px;
	 }
	 #ccc {background-color: #cccccc;}
	 .souscontenu {
	 margin-left: 3%;
	 }
	 .proposition {
	 border: 1px solid #4E342E;
	 border-radius: 10px;
	 background-color: #FFFFFF;
	 color: #263238;
	 font-size: 1em;
	 width : auto;
	 max-width: 20em;
	 height: auto;
	 min-height: 1.5em;
	 max-height: 3.3em;
	 padding: 1%;
	 text-align: left;
	 float: center;
	 margin: 0 auto;
	 line-height: 1em;
	 }
	 .central {
	 text-align: center;
	 margin: 0 auto; 
	 }
	 .autheur {
	 font-size: 0.8em;
	 color: #050019;
	 text-align: left;
	 margin: 0 auto;
	 padding: 2px;
	 line-height: 1em;
	 font-weight: bold;
	 }
	 .sommaire {
	 padding : 4%;
	 font-size: 1em;
	 background-color: #E5E5CD;
	 text-align: left;
	 border-radius: 15px;
	 }
	 .sindexp {
	 padding : 4%;
	 font-size: 1em;
	 background-color: #F5F5F5;
	 text-align: left;
	 border-radius: 0;
	 }
	 h4 {
	 color: #283238;
	 text-align: center;
	 }
	 .troispoints{
	 color: #8B4513;
	 text-align: center;
	 font-size: 1.3em;
	 }
	 h5 {
	 text-align:left;
	 text-decoration: none;
	 margin-left: 1em;
	 }
	 .bouton1 {
	 float: center;
	 margin: 0 auto;
	 width: auto;
	 max-width: 500px;
	 border-radius: 25px;
	 font-size: 1em; 
	 background-color: #616161;
	 padding: 10px;
	 text-align: center;
	 color: white;
	 }
	 .boutonorange {
	 float: center;
	 margin: 0 auto;
	 width: auto;
	 max-width: 500px;
	 border-radius: 25px;
	 font-size: 1em; 
	 background-color: #8B0000;
	 padding: 10px;
	 text-align: center;
	 color: white;
	 }
	 .bouton2 {
	 margin: 0 auto;
	 float: center;
	 width: auto; 
	 max-width: 800px;
	 font-size: 1.1em; 
	 background-color: #263238;
	 padding: 10px;
	 text-align: center;
	 color : #FFFFFF;
	 }
	 .bouton4 {
	 float: center;
	 width: auto;
	 height: 25px;
	 border-radius: 25px;
	 font-size: 1.2em;
	 background-color: #0D0363;
	 padding :10px;
	 text-align: center;
	 color : white;
	 margin: 0 auto;
	 }
	 .thebouton {
	 float: center;
	 width: auto;
	 height: 23px;
	 border-radius: 10px;
	 font-size: 1em;
	 background-color: black ;
	 padding :10px;
	 text-align: center;
	 color : white;
	 margin: 0 auto;
	 }
	 .bouton3 {
	 float: center;
	 margin: 0 auto;
	 border: 1px solid #263238;
	 width: auto;
	 max-width: 700px; 
	 font-size: 1em; 
	 background-color: #FFFFFF;
	 padding: 10px;
	 text-align: center;
	 color: #263238;
	 }
	 .boutonp1 {
	 float: center;
	 margin: 0 auto;
	 width: 280px;
	 height: 26px;
	 border-radius: 25px; 
	 font-size: 0.9em; 
	 background-color: #8B4513;
	 padding-top: 5px;
	 padding-bottom: 5px;
	 text-align: center;
	 color: white;
	 }
	 .boutonori {
	 float: right;
	 margin: 0 auto;
	 width: 80px;
	 height: 22px;
	 border-radius: 15px; 
	 font-size: 0.9em; 
	 background: linear-gradient(#8E2C6F, #5C1948);
	 padding: 5px;
	 text-align: center;
	 color: white;
	 }
	 .boutonp0 {
	 float: center;
	 margin: 0 auto;
	 width: 40px;
	 height: 40px;
	 border-radius: 50%; 
	 font-size: 35px; 
	 background-color: #8B4513;
	 padding: 2px;
	 padding-top: 5px;
	 text-align: center;
	 color: white;
	 }
	 .parenthese{
	 font-size : 0.8em;
	 color: #B22222;
	 margin-top: 1px;
	 margin-bottom: 2px;
	 text-align: left;
	 }
	 .orange {
	 text-decoration: none;
	 color: #B22222;
	 }
	 .titre {
	 font-size: 1.2em;
	 color: #8B004F;
	 text-align: center;
	 font-weight: bold;
	 border-left: 0px solid #CCCCCC;
	 }
	 .titre2 {
	 font-size: 1.3em;
	 color: #8B004F;
	 font-weight: bold;
	 border-left: 0px solid #CCCCCC;
	 }
	 .titre3 {
	 font-size: 1.2em;
	 color: black;
	 font-weight: bold;
	 border-left: 0px solid #CCCCCC;
	 }
	 .tit {
	 font-size: 1em;
	 color: #616161;
	 text-align: center;
	 }
	 .titrage {
	 font-size: 1em;
	 color: white;
	 text-align: center;
	 padding: 1%;
	 margin: 0 auto;
	 background-color: #616161;
	 }
	 .vido {
	 width: auto;
	 min-width: 18em;
	 height: 4em;
	 }
	 .orange {
	 color: orange;
	 } 
	 .formauto {
	 margin: 0 auto;
	 float : center;
	 }
	 .divarret {
	 color: #263238;
	 background-color: #FAFAFA;
	 width: 300px;
	 height: 55px;
	 border: 1px solid #CCCCCC;	 
	 font-size: 1em;
	 float: center;
	 margin: 0 auto;
	 padding: 0;
	 }
	 .menuarret {
	 font-size: 1em;
	 float: left;
	 text-align: left;
	 width: 240px;
	 height: 53px;
	 margin-top: 5px;
	 margin-left: 5px;
	 }
	 .imgarret {
	 float: right;
	 margin: 0 auto;
	 width: 54px;
	 height: 54px;
	 }
	 h6 {
	 text-align: left;
	 text-decoration: none;
	 color: black;
	 letter-spacing: 1px;
	 font-size: 0.7em;
	 margin-top: 2px;
	 margin-bottom: 2px;}
	 .mail {
	 margin: 0 auto;
	 float: center;
	 padding: 10px;
	 border-radius: 25px;
	 height: 35px;
	 border: 1px solid #CCCCCC;
	 width: 250px; 
	 font-size: 0.9em; 
	 background-color: #FFFFFF;
	 text-align: left;
	 color: black;
	 }
	 .submit {
	 float: center;
	 width: 250px;
	 height: 35px;
	 border-radius: 25px;
	 font-size: 1em;
	 background-color: #0F1E44;
	 padding-top: 5px;
	 padding-bottom: 5px;
	 text-align: center;
	 color : white;
	 margin: 0 auto;
	 }
	 .form {
	 padding : 5%;
	 background-color: #E5E5CD;
	 text-align: center;
	 width: auto;
	 float: center;
	 height: auto;
	 margin:0 auto;
	 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	 border-radius: 10px;
	 }
	 
	 .menu {
	 text-align: center;
	 color: black;
	 background-color: #FAFAFA;
	 width: 300px;
	 height: 30px;
	 border: 1px solid #CCCCCC;	 
	 border-radius: 5px;
	 font-size: 1em;
	 margin: 0 auto;
	 margin-top: 15px;
	 float: center;
	 padding: 10px;
	 padding-top: 13px;
	 padding-bottom: 8px;
	 }
    
        
	 
@media screen and (max-width: 500px) {
    
    #navgrand { display: none;}
      
      
     /* Conteneur principal */
       .main-container {
       display: grid;
       grid-template-columns: 1fr; /* Par défaut une seule colonne */
       gap: 20px;
       padding: 10px;
       }
       
       /* Blocs latéraux et principal */
       .main-content {
       padding: 0;
       }
       
       .sidebar-left, .sidebar-right {
       background-color: white;
       color: black;
       padding: 20px;
       border-radius: 8px;
       display: none; /* Cacher par défaut */
       }
       
 
       
       /* Blocs de contenu supplémentaires */
       .sidebar-left {
       background-color: #2196f3;
       }
       
       .sidebar-right {
       background-color: #4caf50;
       }
       
      
      
      
     .presentation {text-align: justify;font-size: 0.8em; color: #254348; padding : 1em;}
     .contenusans {font-size: 0.9em; padding: 3%;}
     .titrage {font-size: 0.9em}
     h1 {font-size: 1.6em;}
     h2 {font-size: 1.4em;}
     h3 {font-size: 1.1em;}
	 .menu2 { font-size: 0.8em; }
	 .menexo {
	 text-align: center;
	 color: black;
	 padding: 1px;
	 margin-top: 1%;
	 width: auto;
	 height: auto;
	 font-size: 1em;
	 }
	 .tit {
	 font-size: 0.8em;
	 color: #616161;
	 text-align: center;
	 }
	 
	 
	 
  .quote-container {
  padding: 20px; /* Ajusté pour éviter des débordements */
  width: 95%; /* Utilisation d'une largeur relative */
  max-width: 550px; /* Largeur maximale */
  margin: 10px auto;
  }


.quote-mark-container {
  top: -25px;
}

  .quote-mark {
    font-size: 100px; /* Taille de la marque réduite */
  }

  .quote {
    font-size: 22px; /* Texte de citation plus petit */
  }

  .author {
    font-size: 16px; /* Texte de l'auteur réduit */
  }


	 
	 
	 
	
	
	}	 
@media screen and (min-width: 501px) and (max-width: 800px) {
    
    #navgrand { display: none;}
    
    .main-container {
        grid-template-columns: 1fr; /* Toujours en une colonne */
        max-width: 700px; /* Largeur maximum pour les tablettes */
    }

    .sidebar-left, .sidebar-right {
        display: none; /* Afficher les sidebars */
    }
    
    
    .article-card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      max-width: 250px;
      margin: 20px auto;
      transition: box-shadow 0.3s ease;
      }
      .article-image img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 8px;
        }

    
	h1 {font-size: 1.5em; line-height: 50px;}
	h2 {font-size: 1.2em;}
	h3 {font-size: 1.1em;}
	h5 { font-size: 1.5em; text-align: center;}
	.presentation {text-align: left;font-size: 0.9em; color: #254348; margin-left: 10px; max-width: 300px; margin: 0 auto;}
	.contenusans {font-size: 1em; padding : 2%; float: center; max-width: 600px;}
	.titrage {font-size: 1em}
	.menu {width: 60%; font-size: 1em;}
	.menu2 { font-size: 1.2em; }
	.menumenu {font-size: 1.3em;}
	.menug {font-size: 1.4em; width: 45px; height: 90px; border: none;}
	.titre {font-size: 2em;}
	}
	
	
	
	 @media screen and (min-width: 801px) {
	     
	     #petit { display: none;}
	     
	     #navgrand {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            background-color: white;
            height: 70px;
            width: 100%;
            top: 0;
            position: fixed;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            
        }

        .logo {
            position: relative;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 55px;
        }

        .logo img {
            height: 60px;
            width: auto;
            transition: transform 0.5s ease;
        }

        .logo:hover img {
            transform: scale(1.1);
        }

        nav {
            flex: 1;
            margin: 0;
        }

        nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            margin: 0 15px;
            display: flex;
            align-items: center;
        }

        nav ul li a {
            text-decoration: none;
            color: black;
            font-size: 1em;
			font-weight: bold;
            display: flex;
            align-items: center;
            transition: transform 0.5s, color 0.5s;
        }

        nav ul li a img {
            height: 20px;
            margin-right: 8px;
            transition: transform 0.3s;
        }

        nav ul li a:hover img {
            transform: translateY(-3px);
        }

        nav ul li a:hover {
            transform: translateY(-5px);
        }
        

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

        .icons a {
            margin: 10px;
            font-size: 1em;
            text-decoration: none;
            position: relative;
            transition: transform 0.5s, color 0.5s;
        }

        .icons a img {
            height: 23px;
            transition: transform 0.3s;
        }

        .icons a:hover img {
            transform: translateY(-3px) rotate(10deg);
        }

        @keyframes click-effect {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 transparent;
            }
            50% {
                transform: scale(0.95);
                box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 transparent;
            }
        }

	     
    nav ul li a.active { color: #8B004F; }


	     
	     
        
      .main-container {
        grid-template-columns: 1fr 3fr 1fr; /* Deux sidebars et une colonne principale */
    }

    .sidebar-left, .sidebar-right {
        display: block; /* Afficher les sidebars */
    }

    .main-content {
        background-color: #f4f4f4;
        padding: 20px;
    }  
      
      
   .articles-container {
                grid-template-columns: 1fr 1fr;
            }
            .article-title {
                font-size: 1.4em;
            }
      
      .article-image img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 8px;
        }
      
        
        .article-card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      max-width: 250px;
      margin: 20px auto;
      transition: box-shadow 0.3s ease;
      }
	     
	 .favigrand {width: 40px; height: 40px; margin-left: 50px; margin-top: -10px; margin-right:30px}
	 .presentation {text-align: left;font-size: 0.9em; color: #254348; margin-left: 10px; max-width: 300px; margin: 0 auto;}
	 
	 h1 {font-size: 1.5em; line-height: 50px;}
	 h2 {font-size: 1.2em;}
	 h3 {font-size: 1.1em;}
	 h5 { font-size: 1.5em; text-align: center;}
	 .contenusans {font-size: 1.1em; padding : 2%; float: center; max-width: 800px;}
	 .menu {width: 60%; font-size: 1.1em;}
	 .menu2 { font-size: 1.2em; }
	 .menumenu {font-size: 1.3em; margin: 0 auto;}
	 .menug {font-size: 1.4em; width: 45px; height: 90px; border: none; margin: 0 auto;}
	 .titre {font-size: 2em;}
	 }