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

   layout.css
   Disposition des blocs principaux
   cf.: https://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */
@media (max-width: 768px) {
  body {
    /* Tu peux garder le padding ici si tu veux, ou le déplacer */
    /* padding-left: 15px; */
    /* padding-right: 15px; */
    /* box-sizing: border-box; */
  }

  .page { /* Cible le conteneur principal de ta page */
    padding-left: 15px;
    padding-right: 15px;
    /* box-sizing: border-box; est déjà sur .page, c'est bien */
  }

  /* Ou si la liste est plutôt dans .main et .page ne doit pas avoir de padding */
  /* .main {
    padding-left: 15px;
    padding-right: 15px;
  } */

  /* Styles pour ta liste */
  ul.ma-liste-optimisee {
    padding-left: 25px; /* Indentation interne de la liste */
    /* ... autres styles ... */
  }
  /* ... etc ... */
}
body {
    text-align: center;
    background: #fff;
    /* Assure une expérience de défilement fluide */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page {
    position: relative;
    background: #FFFFFF;
    /* Utilisation de max-width pour la responsivité */
    max-width: 1200px;
    width: 100%; /* Prendra 100% de la largeur disponible jusqu'à 1200px */
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
}

.pub {
    height: 120px;
    background: #6383c1;
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

.banniere {
    /* Correction de l'espace dans '990 px' */
    max-width: 990px;
    width: 100%; /* S'adapte à la largeur de l'écran */
    margin: 0 auto;
}

.header {
    padding-top: 10px;
    padding-bottom: 1em;
    border-bottom: 1px solid #fff;
}

.main {
    padding: 1.5em 0;
}

.footer {
    clear: both;
    padding: 1.5em 0 0;
    border-top: 2px solid;
    text-align: center;
    color: #FFF;
    /* Couleur de fond du footer pour un meilleur contraste si le texte est blanc */
    background-color: #0099CC;
}

.spip-admin-boutons {
    top: 60px;
}

.wrapper {
    clear: both;
    width: 100%;
    overflow: hidden;
}

.wrapper-jeux {
    clear: both;
    /* float: left; N'est pas toujours nécessaire avec width: 100% et clear: both */
    width: 100%;
    overflow: hidden;
}

.content {
    min-height: 350px;
    padding: 0 10px 5px 10px;
    box-sizing: border-box; /* Important pour les paddings avec width: 100% */
}

.aside {
    width: 100%;
    overflow: hidden;
}

/* Entete et barre de navigation
------------------------------------------ */
.chicle-regular {
    font-family: "Chicle", serif;
    font-weight: 400;
    font-style: normal;
}

.header #logo {
    padding: 10px 5px 0px 25px;
    display: block;
    margin: 0;
    line-height: 1;
}

.header #logo,
.header #logo a,
.header #logo a:hover {
    background: transparent;
    text-decoration: none;
    font-size: 44px;
    color: #efc74c;
    font-family: "Chicle", serif;
    font-weight: 400;
    font-style: normal;
}

.header #slogan {
    margin: 0 0 0 21px;
    color: #09C;
    letter-spacing: 0em;
}

.formulaire_menu_lang {
    position: absolute;
    right: 0;
    top: .9em;
    display: block;
    width: 30%;
}

.nav {
    padding: 8px;
    border-radius: 8px;
    line-height: 2em;
}

.nav a {
    font-size: 18px;
    color: #222;
    text-decoration: none;
}

.nav a:focus,
.nav a:hover,
.nav a:active {
    color: #09C;
    border-bottom: 4px solid #09C;
    text-decoration: none;
}

/* .nav ul {} Ces règles sont inutiles si elles sont vides */
/* .nav ul li {} */

.nav ul li a {
    float: left;
    display: block;
    padding: .5em 1em;
    border-right: 1px solid #222;
    text-decoration: none;
    /* Ajouté pour s'assurer que les liens ne sortent pas en cas de wrapping */
    box-sizing: border-box;
}

.nav ul li.on a {
    background: #EED;
    color: #222;
    font-weight: normal;
}

.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active {
    background: #d5662d;
    color: #FFF;
}

.footer {
    font-size: 0.8em;
    color: #fff;
    /* La couleur de fond est déjà définie plus haut pour .footer */
}
.footer a {
    color: #fff;
    text-decoration: none;
}

/* Styles pour .spip_logo (probablement un enfant de .footer) */
.footer .spip_logo { /* Assumant que .spip_logo est dans .footer */
    aspect-ratio: 1 / 1;
    width: 80px;
    height: auto; /* La hauteur sera déterminée par aspect-ratio et width */
    display: block; /* Ou inline-block, selon le besoin */
    margin: 0 auto; /* Si vous voulez le centrer dans le footer, par exemple */
}

/* Media query pour .spip_logo sur des écrans plus petits */
@media (max-width: 640px) {
    .footer .spip_logo {
        width: 100px; /* Ou une autre taille appropriée pour mobile */
        /* height: auto; est toujours implicite avec aspect-ratio */
    }
}
/* Styles de base pour les listes (facultatif, mais utile pour la cohérence) */
ul.ma-liste-optimisee {
  list-style-type: disc; /* Style de puce par défaut (rond plein) */
  margin-top: 1em;       /* Marge au-dessus de la liste */
  margin-bottom: 1em;    /* Marge en dessous de la liste */
  padding-left: 20px;    /* Indentation à gauche pour les puces (pour LTR) */
                         /* Pour les langues RTL (Right-To-Left), utilisez padding-right */
}

ul.ma-liste-optimisee li {
  margin-bottom: 0.5em; /* Espace vertical entre les éléments de la liste */
  line-height: 1.6;     /* Hauteur de ligne pour une meilleure lisibilité du texte dans chaque item */
}

/* --- Optimisations spécifiques pour les smartphones --- */
@media (max-width: 768px) { /* Cible les écrans jusqu'à 768px de large */
                            /* Vous pouvez ajuster cette valeur (ex: 600px) */

  ul.ma-liste-optimisee {
    padding-left: 25px; /* Augmenter un peu l'indentation pour ne pas coller au bord */
                         /* Si vous voulez supprimer les puces sur mobile : */
                         /* list-style-type: none; */
                         /* padding-left: 0; */
  }

  ul.ma-liste-optimisee li {
    font-size: 16px;       /* Taille de police confortable pour la lecture sur mobile */
                           /* Ajustez en fonction de votre design global */
    line-height: 1.5;      /* Hauteur de ligne adaptée à la taille de police mobile */
    padding-top: 10px;     /* Espace intérieur en haut de chaque item */
    padding-bottom: 10px;  /* Espace intérieur en bas de chaque item */
                           /* Ces paddings augmentent la zone cliquable si vos <li> sont des liens ou contiennent des liens */
    margin-bottom: 8px;    /* Ajuster l'espacement entre les items si nécessaire */

    /* Optionnel: pour gérer les longs mots qui pourraient déborder */
    word-break: break-word; /* Coupe les mots pour éviter le débordement horizontal */
    /* Alternative: overflow-wrap: break-word; */
  }

  /* Si vos éléments de liste (<li>) contiennent des liens (<a>) */
  ul.ma-liste-optimisee li a {
    display: block; /* Fait que le lien occupe toute la largeur/hauteur de l'espace ajouté par le padding du <li> */
                    /* Ceci est utile pour agrandir la zone cliquable */
    /* Si vous voulez un style spécifique pour les liens sur mobile */
    /* color: #0056b3; */ /* Exemple de couleur de lien */
    /* text-decoration: none; */ /* Enlever le soulignement par exemple */
  }

  /* Optionnel: Ajouter un petit effet visuel au toucher/focus pour les liens */
  ul.ma-liste-optimisee li a:hover,
  ul.ma-liste-optimisee li a:focus {
    /* background-color: #f0f0f0; */ /* Léger fond pour indiquer l'interaction */
  }
}