body {
  font-family: 'Georgia', serif;
  background-image: repeating-linear-gradient(
    45deg,
    #e0f7fa,
    #e0f7fa 2px,
    #f0e6f6 2px,
    #f0e6f6 4px
  );
  margin: 0;
  line-height: 1.8em;
}

* { box-sizing: border-box;}

p {  text-align: justify;
  text-justify: inter-word; hyphens: auto; /* réduit l’espace entre les mots */}
/* Styles pour le header, articles, etc. (vos règles existantes) */

/* --- Media queries pour le responsive --- */

@media (max-width: 767px) {
  /* Styles pour mobiles petits */
  header {
    flex-direction: column;
    height: 10%;
    padding: 10px;
  .large-screen {display: none;}

  .header-top {
    flex-direction: column;
    width: 100%;
  }
  .logo {
    width: 90%; height: 125px;
    margin-bottom: 10px;
  }
  /* Ajuster la navigation mobile si nécessaire */
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: block;width: 100%;
  }
  /* SMART-SCREEN */
    .smart-screen {
        width: 100%; 
        display: flex; 
        height: 7em;
    }

    .smart-screen .top-nav {
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        
        color: #FFF;
        height: auto;
    }

    .menu {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative; /* Position relative pour le menu */
    }

    .menu > li {
        margin: 0 1rem;
        overflow: hidden;
    }

    .menu-button-container {
        display: none; 
        height: 100%;
        width: 25%;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;margin:10px 15px 20px 0;
    }

    #menu-toggle {
        display: none; 
    }

    .menu-button,
    .menu-button::before,
    .menu-button::after {
        display: block;
        background-color: whitesmoke;
        position: absolute; 
        height: 4px;
        width: 60px;
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 2px; 
        margin-right: 3px; 
    }

    .menu-button::before {
        content: '';
        margin-top: -18px;
    }

    .menu-button::after {
        content: '';
        margin-top: 18px;
    }

    /* Animation du bouton de menu */
    #menu-toggle:checked + .menu-button-container .menu-button::before {
        margin-top: 0px;
        transform: rotate(405deg);
    }

    #menu-toggle:checked + .menu-button-container .menu-button {
        background: rgba(255, 255, 255, 0);
    }

    #menu-toggle:checked + .menu-button-container .menu-button::after {
        margin-top: 0px;
        transform: rotate(-405deg);
    }

    /* Styles pour les écrans entre 481px et 800px */
    .menu-button-container {
        display: flex; 
    }

     .menu {
    position: absolute;
    top: 8em;
    left: 0;
    width: 100%;
    background: linear-gradient(to left, gray, white);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  .menu {
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  /* Afficher le menu quand le checkbox est coché */
  #menu-toggle:checked ~ .menu {
    max-height: 1200px; /* ajustez selon le contenu */
    opacity: 1;
    pointer-events: auto;
  }

    #menu-toggle ~ .menu li { 
        height: 0; 
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li {
        border: 1px solid white; 
        height: 3.5em; 
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle ~ .menu li a {
        margin-top: -8px; 
        font-size: 1.8em; 
        color: #060353;
    }

    .menu > li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background: linear-gradient(180deg, #DAECF9, #f0e6f6);
    }

    .menu > li:not(:last-child) {
        border-bottom: 1px solid #444; 
    }
/*----------------\ Moteur Smart-Screen /--------------*/
    .moteur-recherche {
        display: block; 
        width: 50%; 
        height: 6em; 
        margin: 5px 0 0 0; 
        padding: 0; 
        align-items: center;
    }

    .moteur-recherche form {
        display: flex; 
        flex-direction: column; 
        width: 100%; 
        height: 50px; 
        margin: 0; 
        padding: 0; 
        align-items: center;
    }

    .moteur-recherche #search-input  {
        width: 120px;
    margin: 0px 0;
    padding: 10px;
        color: black; 
        text-align: center; 
        
        align-items: center;
    }
    .moteur-recherche #search-icon {
    background-color: #fff;
    border: none;
    padding: 10px; 
    margin: 10px 0 0 0;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    height: 40px; /* Uniformiser la hauteur */
    font-size: 28px; /* Uniformiser la taille de la police */
    display: flex;
    align-items: center; /* Centrer l'icône verticalement */
    justify-content: center; /* Centrer l'icône horizontalement */
}

    .moteur-recherche #search-icon:hover {
    background-color: #ddd; /* Éclaircissement au survol */
}

    /* Masquer les éléments spécifiques */
    .phrase, .text p, section.bandeau, section.band, section.aside {
        display: none; 
    }
    img.scaled { display:none; }
}
/*---------------------------*/
 

/* Pour les tablettes (768px à 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Ajustez la mise en page pour tablettes */
  /* Par exemple, réduire la taille des polices, ajuster la disposition */
  header {
    height: auto;
  }
  img.scaled
  /* Autres ajustements */

}

/* Pour les grands écrans (large screens) */
@media (min-width: 1200px) {
  /* Styles pour grand écran, desktop */
  /* Réinitialisez ou affinez si nécessaire */
}
/*-------------------------------*/
/* Styles pour bandeau */
article.bandeau { display: none;
  width: 100%; 
  background: linear-gradient(180deg, #DAECF9, #f0e6f6);
  border-bottom: 0.01rem solid #026b9c;
}
.band {
  display: flex;
  width: 100%;
  height: 3.5em;
  justify-content: center;
  align-items: center;
}
/* ... autres styles du bandeau ... */

/* Textes et titres */
h1 { font-size: 1.4rem; /* ... autres styles ... */ }
h2 { font-size: 1.3rem; /* ... autres styles ... */ }
h3, h4, h5, h6 { font-size: 1.15rem; /* ... */ }
p { font-size: 1.15rem; line-height: 1.7; /* ... */ }
a.liens { font-size: 1.04em; /* ... */ }

/* Listes */
ul, ol { margin: 0 20px; list-style: none; }
article ol li { font-size: 1.15rem; /* ... */ }

@media (max-width: 767px) {
  /* Mobile : tout doit s'ajuster pour petit écran */
  body {
    font-size: 0.9em; /* Réduire la taille globale si besoin */
  }
  h1 { font-size: 1.1rem; }
  h2 { font-size: 1.05rem; }
  h3, h4, h5, h6 { font-size: 1rem; }
  p { font-size: 1.15rem; }
  /* Bandeau, titre, texte, etc. */
  /* Ajuster la taille des textes, marges, paddings, et dispositions */
  .text {
    flex-direction: column;
    margin-left: 10px;
  }
  .band {
    flex-direction: column;
    height: auto;
  }
  /* Réduire la taille des polices, centrer ou ajuster la disposition */
  article {
    padding: 10px;
  }
  /* Articles, Grilles, etc. */
  .article-container { display: flex;
    flex-direction: column;
  }
  .article-container .item-1,
  .article-container .item-2,
  .article-container .item-3,
  .article-container .item-4,
  .article-container .item-5,
  .article-container .item-6,
  .article-container .item-7,
  .article-container .item-8 {
    width: 100% !important;
    display: block !important;
    flex: 1 1 100% !important;
    margin: 10px 0;
  }
  /* Modifier la taille de l'iframe si présente */
  .responsive-iframe {
    height: auto;
  }
}

/* Tablettes (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Ajustements pour tailles intermédiaires */
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.2rem; }
  p { font-size: 1.1rem; }
  /* Dispositions possibles */
}

/* Grands écrans (plus de 1200px) */
@media (min-width: 1200px) {
  /* Styles pour grands écrans */
  /* Par exemple, agrandir les titres, marges, etc. */
}
/*---------------------------------*/
/* Styles pour section aside (normal) */
section.aside {
  width: 15%;
  min-height: 100vh;
  /* autres styles */
}

/* Styles pour la classe container (menu et autres) */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.6em;
  background: linear-gradient(white, darkgray);
  border-radius: 0.625em;
  width: 100%;
}

/* --- Media queries pour le responsive --- */

@media (max-width: 767px) {
  /* Tout en mode mobile */
  
  /* La section aside devient en pleine largeur */
  section.aside { display: none;}
  .content{
    width: 100%;
    min-height: auto;
    border: none;
    padding: 10px;
  }
article { display: flex; width: 100%; margin: 2px; padding: 0; box-sizing: border-box;}
  /* La classe container (menu) passe en colonne si nécessaire */
  .container {
    flex-direction: column;
    height: auto;
  }
.parent-container {display: none;}
  /* La hauteur de menu sticky ou fixe peut être ajustée */
  .menu-aside {
    position: relative; /* ou static pour mobile */
    max-height: none;
    overflow-y: visible;
  }

  /* Ajuster la taille des titres et texte */
  h2.titre-aside,
  a.titre-aside,
  a.lettre-aside {
    font-size: 1.2em; /* plus petit pour mobile */
    padding: 10px;
  }

  /* Réduire la taille des polices dans les menus */
  .menu-aside a {
    font-size: 1em;
  }

  /* Les menus déroulants deviennent en colonne, sous le bouton */
  .menu-principes,
  .menu-spirituel,
  .menu-langage,
  .menu-sagesse,
  .menu-science,
  .menu-philosophie,
  .menu-dictionnaire,
  .menu-langage-spirituel,
  .menu-contes,
  .menu-dico {
    position: static;
    max-height: none;
    width: 100%;
    padding: 0;
  }

  /* Ajuster la position du menu fixe si présent */
  .fixed-menu,
  .fixed-menu-1,
  .fixed-menu-2 {
    position: static;
    width: 100%;
    max-width: 100%;
    top: auto;
    left: auto;
  }

  /* La hauteur des menus déroulants doit s'adapter */
  .menu-principes,
  .menu-spirituel,
  /* autres menus */
  {
    max-height: none;
    overflow: visible;
  }

  /* Modifier la taille de tout le contenu si nécessaire */
  /* Par exemple, réduire la taille des titres, marges, paddings */
  h2.titre-aside {
    font-size: 1.2em;
  }
  /* ... autres ajustements ... */
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Mise en page pour tablettes */
  section.aside {
    width: 20%; /* un peu plus large si besoin */
  }

  img.scaled
}

/* Pour les grands écrans (1200px et plus) */
@media (min-width: 1200px) {
  /* Restaurez la disposition initiale ou ajustez si besoin */
  section.aside {
    width: 15%;
  }
  /* Autres styles pour grands écrans */
}
/*-------------------------------*/
/* --- Media queries pour mobile --- */
@media (max-width: 767px) {

  /* Menu-le-Style : ajustement pour petits écrans */
  .menu-principes li,
  .menu-spirituel li,
  .menu-langage li,
  .menu-sagesse li,
  .menu-science li,
  .menu-philosophie li,
  .menu-contes li,
  .menu-contes-soufis li,
  .menu-dictionnaire li,
  .menu-langage-spirituel li,
  .menu-dico li {
    width: 100%; /* La liste devient pleine largeur */
    font-size: 1em; /* Taille de police réduite */
    margin: 8px 0; /* Espacement vertical */
  }

  /* Menu flottant : position fixed en haut/bas pour mobile */
  .menu-flottant,
  .menu-flottant-2,
  .menu-flottant-3,
  .menu-flottant-4 {
    position: fixed;
    bottom: auto;
    top: 10px; /* ou 50px si vous voulez laisser de l'espace en haut */
    right: 10px;
    width: auto;
    max-width: 90%;
    font-size: 1em;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border-radius: 8px;
    overflow-y: auto;
    max-height: 80vh; /* Limite la hauteur pour éviter de déborder */
  }

  /* Positionner les menus déroulants en colonne si nécessaire */
  .menu-principes,
  .menu-spirituel,
  .menu-langage,
  .menu-sagesse,
  .menu-science,
  .menu-philosophie,
  .menu-contes,
  .menu-dico {
    position: static;
    max-height: none;
    width: 100%;
    padding: 0;
    margin: 10px 0;
  }

  /* Ajuster la taille des textes dans les tooltips et autres éléments */
  .tooltip-term {
    font-size: 1.2em;
    padding: 4px 8px;
  }

  /* Ajustements pour les titres et textes */
  h2.titre-aside,
  a.titre-aside,
  a.lettre-aside {
    font-size: 1.2em;
  }

  /* Pour tous les textes, réduire la taille si nécessaire */
  p,
  span {
    font-size: 1.25em;
  }
}

/* --- Pour les tablettes (768px - 1199px) --- */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Ajustements intermédiaires, si besoin */
  section.aside {
    width: 20%;
  }

  img.scaled
}

/* --- Pour grands écrans (1200px et plus) --- */
@media (min-width: 1200px) {
  /* Restaurez la disposition normale ou affinez */
}
/*-------------------------------*/
@media (max-width: 767px) {
  /* Video container : vidéo en pleine largeur */
  .video-container {
    padding-bottom: 56.25%; /* Ratio 16:9, inchangé */
  }
  .video-container video {
    width: 100%;
    height: auto;
  }

  /* Images générales : fluide */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Adaptation spécifique pour images flottantes */
  img.flot-acceuil-1,
  img.flot-acceuil-2,
  img.flot-acceuil-3,
  img.flot-acceuil-4,
  img.flot-acceuil-5,
  img.flot,
  img.emotion,
  img.emotion-2,
  img.phil,
  img.creation,
  img.conte,
  img.opti {
    float: none; /* Supprime le float */
    width: 100%; /* Prend toute la largeur du conteneur */
    height: auto; /* Ajuste la hauteur automatiquement */
    max-width: 100%; /* Limite la largeur à celle du parent */
    margin: 10px 0; /* Marges verticales pour espacement */
  }
  img.scaled
  /* Pour les conteneurs avec une largeur fixe (ex : 20%, 25%) */
  .flex-container {
    flex-direction: column; /* Disposition en colonne */
  }
  /* Si vous avez des images dans une grille, utilisez flexbox ou grid pour l'alignement */
  /* Si vous avez des classes spécifiques, ajustez leur largeur */
  .parent-container,
  .parent-container-2 {
    max-width: 100%; /* Prend toute la largeur */
    height: auto; /* La hauteur s’adapte */
  }
  /* Peut-être aussi ajuster la taille des éléments comme les titres, paddings, etc. */
}
/*--------------------------------*/
@media (max-width: 767px) {
  table.index-fm-large {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
  /* Redimensionner ou ajuster la police si besoin */
  table.index-fm-large thead {
    font-size: 0.9em;
  }
  th, td {
    font-size: 1em;
    padding: 8px;
  }
}
/*------------------------------*/
img {
  max-width: 100%;
  height: auto;
}
img.scaled {display: none;}

@media (max-width: 767px) {
  .image img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 767px) {
  ul.dico li {
    width: 100%;
    height: auto;
    font-size: 1em;
    margin: 10px 0;
  }
  ul.dico .title {
    font-size: 1em;
    margin: 0 10px 10px 10px;
  }
  article strong.sous-titre,
  article strong.titre1,
  strong.citation,
  span.sous-titre,
  span.sous-titre1,
  span.sous-titre-2 {
    font-size: 1em;
  }
  article em {
    font-size: 1em;
  }
}
/*-------------------------*/
@media (max-width: 767px) {
  .int {
    flex-direction: column;
    width: 100%;
  }
  .int ul {
    margin-left: 0;
    font-size: 1em;
  }
  .flex-container {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  img.flot,
  img.flot1,
  img.emotion,
  img.emotion-2,
  img.phil,
  img.creation,
  img.conte,
  img.fleur-de-vie,
  img.cle-de-vie,
  img.cle-de-vie-1,
  img.cle-de-vie-2,
  img.cle-de-vie-3,
  img.liberté,
  img.principes,
  img.spirit {
    float: none;
    width: 100%;
    height: auto;
    margin: 10px 0;
  }
}
/*--------------------------------*/
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
  th, td {
    font-size: 1em;
    padding: 8px;
  }
  table.index-fm-large-2 {
    font-size: 0.9em;
  }
}

@media (max-width: 767px) {
  img.flot,
  img.flot1,
  img.emotion,
  img.emotion-2,
  img.phil,
  img.creation,
  img.conte,
  img.fleur-de-vie,
  img.cle-de-vie,
  img.cle-de-vie-1,
  img.cle-de-vie-2,
  img.cle-de-vie-3,
  img.liberté,
  img.principes,
  img.spirit {
    float: none;
    width: 100%;
    height: auto;
    margin: 10px 0;
  }
}
/*---------------------------------*/
@media (max-width: 767px) {
  article .penses,
  article .citations {
    font-size: 1em;
  }
  footer {
    flex-direction: column;
    height: auto;
  }
  #footer-menu li {
    width: 100%;
    margin: 5px 0;
  }
  #footer-menu ul {
    flex-direction: column;
    width: 100%;
  }
  #footer-menu li {
    width: 100%;
    text-align: center;
  }
}
/*----------------------------------*/
/* Styles pour les écrans en mode paysage */

@media (min-width: 360px) and (max-width: 767px) and (orientation: landscape) {
    header {
    display: flex;
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    background: linear-gradient(#4A90E2, #DAECF9);
    height: auto; /* Ajuste la hauteur en fonction du contenu */
    padding: 10px; 
    }

    .large-screen {
        display: none; /* Masquer le menu desktop */
    }
    .smart-screen {display: flex; width: 100%;}
    
    .top-nav{width: 100%;
    display: flex; /* Active le mode flex */
    flex-direction: row; /* Alignement horizontal */
    justify-content: space-between; /* Espace entre les éléments */
    }

  .top-nav .item {
      margin: 10px; /* Espacement autour des éléments */
  }

    .logo {
    width: 100%; /* Logo prend 80% de la largeur */
    display: flex;
    justify-content: center; /* Centre le logo */
  }

  .smart-logo {
      width: 100%; /* Logo prend toute la largeur de son conteneur */
      height: auto; /* Ajuste la hauteur automatiquement */
  }
  #menu-toggle {display: none;}
  }

  .mobile-nav {
      width: 100%;
      display: flex;
      flex-direction: column; /* Alignement en colonne */ 
  }
  /* Top nav */
  .top-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
  }
  .menu-button-container {
      display: flex; 
      flex-direction: column; 
      cursor: pointer; 
      width: 20%; 
      height: 6em;
      
      align-items: center;
  }

  .menu-button {
      width: 120px; /* Ajustez la largeur pour le hamburger */
      height: 10px; /* Ajustez la hauteur pour le hamburger */
      background-color: whitesmoke; /* Couleur des boutons */
      margin: 18px 0 0 10px; /* Espacement entre les boutons */
      transition: all 0.3s; /* Transition douce */
  }
  #search-form {
    display: flex;
    margin: 0 0 0 40%;
  }
  .mobile-nav .menu {
      display: none; /* Cacher le menu par défaut */
      flex-direction: column; /* Alignement en colonne */
  }

}
@media only screen and (min-width: 800px) and (max-width: 1024px) and (orientation: landscape) {
  article.bandeau {
      display: none ; 
  }
  section.aside {display: none;}
  header {
    display: flex;
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    background: linear-gradient(#4A90E2, #DAECF9);
    height: auto; /* Ajuste la hauteur en fonction du contenu */
    padding: 10px; 
    }

    .large-screen {
        display: none; /* Masquer le menu desktop */
    }
    .smart-screen {display: flex; width: 100%;}
    
    .top-nav{width: 100%;
    display: flex; /* Active le mode flex */
    flex-direction: row; /* Alignement horizontal */
    justify-content: space-between; /* Espace entre les éléments */
    }

  .top-nav .item {
      margin: 10px; /* Espacement autour des éléments */
  }

    .logo {
    width: 100%; /* Logo prend 80% de la largeur */
    display: flex;
    justify-content: center; /* Centre le logo */
  }
  .smart-logo {
      width: 100%; /* Logo prend toute la largeur de son conteneur */
      height: auto; /* Ajuste la hauteur automatiquement */
  }
  #menu-toggle {display: none;}
  }

  .mobile-nav {
      width: 100%;
      display: flex;
      flex-direction: column; /* Alignement en colonne */ 
  }
  /* Top nav */
  .top-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
  }
  .menu-button-container {
      display: flex; 
      flex-direction: column; 
      cursor: pointer; 
      width: 20%; 
      height: 6em;
      margin: 0 10px 0 0;
      align-items: center;
  }

  .menu-button {
      width: 120px; /* Ajustez la largeur pour le hamburger */
      height: 10px; /* Ajustez la hauteur pour le hamburger */
      background-color: whitesmoke; /* Couleur des boutons */
      margin: 18px 0 0 10px; /* Espacement entre les boutons */
      transition: all 0.3s; /* Transition douce */
  }
  .moteur-recherche #search-form {
    display: flex;
    margin: 0;
  }
  .mobile-nav .menu {
      display: none; /* Cacher le menu par défaut */
      flex-direction: column; /* Alignement en colonne */
  }

  .menu {
    position: static; /* ou autre */
    max-height: none;
    opacity: 1 !important;
    pointer-events: auto;
    display: flex ; /* ou autre, selon votre layout */
  }
  #menu-toggle:checked ~ .menu {
  display: flex; 
  margin: 0 10px 0 0;
  text-align: center;
  }
  .mobile-nav .menu {
    display: none; /* Cacher le menu par défaut */
    flex-direction: column; /* Alignement en colonne */
    position: absolute; /* Positionnement absolu */
    top: 200px; /* Ajustez selon vos besoins */
    left: 0;
    right: 0;
    z-index: 1000; /* S'assurer que le menu soit au-dessus */
  }
  .mobile-nav .menu ul li {
      list-style-type: none; /* Enlève les puces */
      padding: 0; /* Enlève le padding par défaut */
  }
  .mobile-nav ul.menu li {
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;
      color: white;
      background: linear-gradient(180deg, #DAECF9, #f0e6f6);
      border: 1px solid #dac1f9;
      list-style: none; /* Supprimer les puces */
      
  }
  .mobile-nav ul li.menu  {
      border: 1px solid red; /* Bordure pour chaque élément */
      padding: 10px; /* Espacement interne */
      text-align: center; /* Centre le texte */
  }
  #menu-toggle ~ .menu li a {
        margin-top: -8px; 
        font-size: 1.8em; 
        color: #060353;
   
  }
  </*--fin du header--*/

  /* Styles pour les termes avec tooltip */
  .tooltip-term {
      background-color: #dfdede; /* Couleur de fond légère pour les termes */
      box-shadow: 0.073em 0.073em 0.073em rgba(0, 0, 0, 0.5); /* ombre */
      border-bottom: 1px dotted #007bff; /* Soulignement pour indiquer qu'il s'agit d'un terme */
      padding: 2px 4px; /* Ajoute un peu d'espace autour du texte */
      border-radius: 4px; /* Coins arrondis */
      cursor: pointer; /* Indique que c'est cliquable */
      font-size: 20px;
  }

  .data-tippy-content {
      text-decoration: underline; /* Pas de soulignement supplémentaire */
      color: #0056b3; /* Utilise la couleur par défaut du texte */
  }

  .content  article { 
      display: flex; 
      flex-direction: column;
      width: 100%;
      height: auto;
    }
    .fleche-flottante {
      position: fixed;
      bottom: 1px;
      right: 20px;
      z-index: 1000;
    }
}

/*----------------------------------------------------*/


/* Cibler Nest Hub Max (1280px en largeur) */
@media (max-width: 1280px) {
  /* Styles spécifiques pour Nest Hub Max */
  header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* pour éviter le débordement */
}
  logo img {
    width: 60px; /* logo adapté */
    height: auto;
  }

  .large-screen {
  max-width: 1200px; /* ou une autre valeur appropriée */
  margin: 0 auto;    /* centre la page */
  padding: 0 20px;   /* espace intérieur */
  }
  .header-top {
    font-size: 14px; /* taille de police adaptée */
  }
   .desktop-nav ul.menu {
    font-size: 14px;
  }
}

@media only screen 
  and (min-width: 1280px) 
  and (max-width: 1300px) 
  and (orientation: landscape) { 

  * {
    box-sizing: border-box;
  }

  header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* pour éviter le débordement */
  }
  .logo  {
    width: 30%; /* logo adapté */
    height: auto; margin: 0 !important;
  padding: 0 !important;
  }

  .large-screen {
  max-width: 1200px; /* ou une autre valeur appropriée */
  margin: 0;    /* centre la page */
  padding: 0;   /* espace intérieur */
  }
  .header-top {
    font-size: 14px; /* taille de police adaptée */
  }
   .desktop-nav ul.menu {
    font-size: 1.3em;
  }

  /* Si le problème vient du <li> dans le menu */
  .desktop-nav ul.menu li {
    margin: 0; /* ou ajustez si nécessaire */
    padding: 0; /* par exemple, pour espacer uniformément */
  }

  /* Si le <ul> a une marge ou padding par défaut */
  .desktop-nav ul.menu {
    margin: 0;
    padding: 0;
  }
  .phrase p {font-size: 1.09em;}
  .moteur-recherche {
  display: flex;
  width: 15%;
  height: 90px;
  margin: 0 0 0 45%;
  align-self: center;
  }
/*-------------------------------*/
  section.aside {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 16%;
    min-height: 100vh;
    border: 1px solid #176db3;
    padding: 0 0 40px 0;
    margin: 8px 0;
    background: linear-gradient(90deg, #f0e6f6, #f0f4f8);
  }

  .menu-toggle {
  width: 120px;            /* taille exacte du fond */
  height: 50px;          /* hauteur désirée */
  background-color: #eee; /* couleur de fond, à ajuster */
  border: 1px solid blue; /* pour voir le contour, à supprimer si inutile */
  display: flex;          /* pour centrer le contenu */
  align-items: center;    /* verticalement */
  justify-content: center;/* horizontalement */
  cursor: pointer;        /* pointeur pour clic */
  padding: 0;             /* supprimer paddings pour précision */
  box-sizing: border-box; /* pour que la taille inclut padding/border si ajoutés */
  }

  .menu-toggle-2 {
  width: 120px;            /* taille exacte du fond */
  height: 50px;          /* hauteur désirée */
  background-color: #eee; /* couleur de fond, à ajuster */
  border: 1px solid blue; /* pour voir le contour, à supprimer si inutile */
  display: flex;          /* pour centrer le contenu */
  align-items: center;    /* verticalement */
  justify-content: center;/* horizontalement */
  cursor: pointer;        /* pointeur pour clic */
  padding: 0;             /* supprimer paddings pour précision */
  box-sizing: border-box; /* pour que la taille inclut padding/border si ajoutés */
  }

  .fixed-menu {
  position: fixed;
  top: 330px; /* ou ajustez selon votre design */
  left: 0px; /* position à gauche, en accord avec votre aside */
  z-index: 1000;
  padding: 10px;
  border-radius: 4px;
  max-width: 250px; /* ou votre largeur souhaitée */
  }
  
  .fixed-menu-1 { /*<---------------- ce menu n'est valable que sur site distant ne pas modifier------------>*/
    position: fixed;
    top: 405px; /* ou ajustez selon votre design */
    left: 0px; /* position à gauche, en accord avec votre aside */
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
    max-width: 250px; /* ou votre largeur souhaitée */
  }
  
  .fixed-menu-2 {
    position: fixed;
    top: 190px; /* ou ajustez selon votre design */
    left: 0px; /* position à gauche, en accord avec votre aside */
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
    max-width: 250px; /* ou votre largeur souhaitée */
  }
  
  .fixed-menu-3 { /*<---------------- ce menu n'est valable que sur site distant ne pas modifier------------>*/
    position: fixed;
    top: 325px; /* ou ajustez selon votre design */
    left: 0px; /* position à gauche, en accord avec votre aside */
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
    max-width: 250px; /* ou votre largeur souhaitée */
  }
    
  .menu-container.active .menu-principes, 
  .menu-container.active .menu-spirituel, 
  .menu-container.active .menu-langage, 
  .menu-container.active .menu-sagesse, 
  .menu-container.active .menu-science, 
  .menu-container.active .menu-philosophie, 
  .menu-container.active .menu-contes, 
  .menu-container.active .menu-dictionnaire, 
  .menu-container.active .menu-langage-spirituel, 
  .menu-container.active .menu-dico

 {
    display: block;
  }

  .menu-principes li,
  .menu-spirituel li, 
  .menu-langage li, 
  .menu-sagesse li, 
  .menu-science li, 
  .menu-philosophie li, 
  .menu-contes li, 
  .menu-contes-soufis li, 
  .menu-dictionnaire li, 
  .menu-langage-spirituel li, 
  .menu-dico li
 {
    background-color: #c8dff5;
    border: 0.5px solid #4A90E2;
    border-radius: 0.625em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 140px;
    height: 3.5em;
    margin: 10px 15px 0 0;
    padding: 2px 0 0 0;
    font-size: 1.25em;
  }
  
  .menu-principes,
   .menu-spirituel,
    .menu-langage,
     .menu-sagesse,
      .menu-science,
       .menu-philosophie,
        .menu-dictionnaire,
         .menu-langage-spirituel {
    display: none;
    position: absolute;
    top: auto;
    left: 0;
    max-height: 400px;
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 15px;
    z-index: 1000;
    overflow-y: auto;
  }

}
/*-------------------------------------------------------------------------------------------*/
/* Cibler Kindle Fire HDX (2560px en largeur) */
@media screen and (min-width: 800px) and (max-width: 1280px) and (orientation: portrait)  {
  /* Styles spécifiques pour Kindle Fire HDX */
  * {
    box-sizing: border-box;
  }
  

  section.aside {display: none;}
  .article-container {
        flex-direction: column !important;  
        margin-top: 0px; 
        padding: 0;
    }
  header {
    flex-direction: column;
    height: 10%;
    padding: 10px;
  
  .large-screen {display: none;}

  .header-top {
    flex-direction: column;
    width: 100%;
  }
  .logo {
    width: 90%; height: 125px;
    margin-bottom: 10px;
  }
  
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: block;width: 100%;
  }
  /* SMART-SCREEN */
    .smart-screen {
        width: 100%; 
        display: flex; 
        height: 7em;
    }

    .smart-screen .top-nav {
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        
        color: #FFF;
        height: auto;
    }

    .menu {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative; /* Position relative pour le menu */
    }

    .menu > li {
        margin: 0 1rem;
        overflow: hidden;
    }

    .menu-button-container {
        display: none; 
        height: 100%;
        width: 25%;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;margin:10px 15px 20px 0;
    }

    #menu-toggle {
        display: none; 
    }

    .menu-button,
    .menu-button::before,
    .menu-button::after {
        display: block;
        background-color: whitesmoke;
        position: absolute; 
        height: 4px;
        width: 60px;
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 2px; 
        margin-right: 3px; 
    }

    .menu-button::before {
        content: '';
        margin-top: -18px;
    }

    .menu-button::after {
        content: '';
        margin-top: 18px;
    }

    /* Animation du bouton de menu */
    #menu-toggle:checked + .menu-button-container .menu-button::before {
        margin-top: 0px;
        transform: rotate(405deg);
    }

    #menu-toggle:checked + .menu-button-container .menu-button {
        background: rgba(255, 255, 255, 0);
    }

    #menu-toggle:checked + .menu-button-container .menu-button::after {
        margin-top: 0px;
        transform: rotate(-405deg);
    }

    /* Styles pour les écrans entre 481px et 800px */
    .menu-button-container {
        display: flex; 
    }

     .menu {
    position: absolute;
    top: 8em;
    left: 0;
    width: 100%;
    background: linear-gradient(to left, gray, white);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  .menu {
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  /* Afficher le menu quand le checkbox est coché */
  #menu-toggle:checked ~ .menu {
    max-height: 1200px; 
    opacity: 1;
    pointer-events: auto;
  }

    #menu-toggle ~ .menu li { 
        height: 0; 
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li {
        border: 1px solid white; 
        height: 3.5em; 
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle ~ .menu li a {
        margin-top: -8px; 
        font-size: 1.8em; 
        color: #060353;
    }

    .menu > li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background: linear-gradient(180deg, #DAECF9, #f0e6f6);
    }

    .menu > li:not(:last-child) {
        border-bottom: 1px solid #444; 
    }
/*----------------\ Moteur Smart-Screen /--------------*/
    .moteur-recherche {
        display: block; 
        width: 50%; 
        height: 6em; 
        margin: 5px 0 0 0; 
        padding: 0; 
        align-items: center;
    }

    .moteur-recherche form {
        display: flex; 
        flex-direction: column; 
        width: 100%; 
        height: 50px; 
        margin: 0; 
        padding: 0; 
        align-items: center;
    }

    .moteur-recherche #search-input  {
        width: 120px;
    margin: 0px 0;
    padding: 10px;
        color: black; 
        text-align: center; 
        
        align-items: center;
    }
    .moteur-recherche #search-icon {
    background-color: #fff;
    border: none;
    padding: 10px; 
    margin: 10px 0 0 0;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    height: 40px; /* Uniformiser la hauteur */
    font-size: 28px; /* Uniformiser la taille de la police */
    display: flex;
    align-items: center; /* Centrer l'icône verticalement */
    justify-content: center; /* Centrer l'icône horizontalement */
    }

    .moteur-recherche #search-icon:hover {
    background-color: #ddd; /* Éclaircissement au survol */
    }

    /* Masquer les éléments spécifiques */
    .phrase, .text p, section.bandeau, section.band, section.aside {
        display: none; 
    }
    
}