/* Réinitialisation CSS — https://ateliers.esad-pyrenees.fr/web/pages/ressources/css/reset/ */
*, *::before, *::after { box-sizing: border-box; } body { line-height: 1.45; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }

body {
  background: #161616;
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
    margin: 2em auto; /* Centre le conteneur lui-même */
  padding-left: 5%;
  padding-right: 5%;
    max-width: 2000px; /* Limite la largeur max pour éviter l'étirement */}
  
.page {width: 90%;
background: #161616;}

.nav {padding: 0px;
margin: 0px;
align-content: left;}

.nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 0.25em;  text-decoration: none;  background: #f0f0f0; color: #db1762; }

hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: " ";
  padding: 0 4px;
  position: relative;
  top: -13px;
}


#quatrain {text-align: center;
line-height: 3em;}

#quatrains {text-align: center;
background-color: #cccccc;
color: #000000;}

#quatrains .titre a:hover { background: #db1762; 
	color: #FFFFFF;}

.qtitre {
font-family: monospace;
font-size: 40px;
text-transform: uppercase;
background-color: #eee;
color: #000000;
padding: 15px;
margin: 15px;
text-align: left; }


img {
padding: 8px;
background: #cccccc;
border: 5px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}

.wrapper {background-color: #EEE;
border: thick double #000000;
padding: 25px;
color: #000000;}

.menu {background-color: #EEE;
border: thick double #000000;
padding: 25px;
color: #000000;
 word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;}

.titraille {font-family: monospace;
font-size: 40px;
text-transform: uppercase;
 word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;
}

.texte {font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
line-height: 1.5em;
text-align: justify;}


.texte surlignable clearfix {
	font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
line-height: 1.5em;
text-align: justify;}

.spip_logo {
padding: 8px;
background: #ffffff;
border: double 1px solid #000000;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}


#header {
background-image: url("jdo.jpg");
background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
border: 5px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
display: content;
padding-top: 50px;
padding-bottom: 50px;
  padding-left: 5%;
  padding-right: 5%;
  max-width: 2000px; /* Limite la largeur max pour éviter l'étirement */}

.titre {
font-family: monospace;
font-size: 40px;
text-transform: uppercase;
background-color: #FFFFFF;
opacity: 80%;
color: #000000;
padding: 15px;
margin: 15px;
text-align: left; }

.titre a:hover { background: #db1762; 
	color: #FFFFFF;}

.small {
  font-size: 0.8em;
}

.bandeau {
background-color: #FFFFFF;
color: #000000;
text-align: right;
margin-top: 120px;
padding: 5px;
opacity: 80%;
}

.rubrique-container {
   background-color: #db1762;
opacity: 80%;
color: #FFFFFF;
padding: 15px;
margin: 15px;
}

.titre-rubrique {
    font-family: monospace;
font-size: 40px;
text-transform: uppercase;
color: #FFFFFF;

}

.titre-rubrique a {color: #FFFFFF;}
.titre-rubrique a:hover {background: #FFFFFF; color: #db1762;}

h1 a:hover { background: #db1762; 
	color: #FFFFFF;}

.texte-rubrique {
    margin: 5px 0 0 0; /* Espacement en haut du texte */
    font-family: Arial, sans-serif; /* Police personnalisée */
    color: #666; /* Couleur de texte */
    line-height: 1.4; /* Espacement entre les lignes */
color: #FFFFFF;
}
h1, h2 {
  font-size: 1em;
  margin: 0;
}
h2 {
  font-weight: normal;
}
.grid {
  margin: 2em auto; /* Centre le conteneur lui-même */
  padding-left: 5%;
  padding-right: 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center; /* Centre les colonnes dans la grille */
  gap: 20px; /* Espacement entre les images */
  max-width: 2000px; /* Limite la largeur max pour éviter l'étirement */
}


a .carre {
  color: currentColor;
  text-decoration: none;
  /* force le ratio carré */
  aspect-ratio: 1;
 
 }


/* ------------------------ L’exemple le plus simple : hover-full */
.hover-full {
  gap: 2em;
  
}
/* l’élément article a la pôsition "relative" */
.hover-full a {
  position: relative;
}
/* les images “remplissent” l’'article */
.hover-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* l’élément spanest positionné “par dessus” l’image (absolute) et est masqué */
.hover-full span {
  position: absolute;
  inset: 1px; /* inset permet de spécifier top, right, bottom et left en même temps */
  display: none;
  padding: 1em;
  background: #db1762;
  opacity: 80%;
}

/* au survol, on affiche le span */
.hover-full a:hover span {
  display: block;
}

/* ------------------------ Exemple plus complexe : hover-grid */
/* Le lien contenu dans l’article devient une grille de trois lignes */
.hover-grid a {
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: "h1" "image" "h2";
  padding: 1em 2em;  
  gap: 1em;
}
/* chaque élément se voit attribué une zone */
.hover-grid h1 { grid-area: h1 }
.hover-grid h2 { grid-area: h2 }
.hover-grid img { grid-area: image }
/* L’image est “contenue” dans sa zone */
.hover-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;

}
/* on masque les titres */
.hover-grid h1,
.hover-grid h2 {
  opacity: 0;
  /* une seule ligne, et si ça dépasse, on tronque à coup de points de suspension */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* au survol, on affiche les titres */
.hover-grid a:hover h1,


#footer {
background-image: url("footer.jpg");
background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
border: 7px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 0;
-webkit-border-radius: 0;
display: content;
padding-top: 20px;
padding-bottom: 50px;
  max-width: 2000px; /* Limite la largeur max pour éviter l'étirement */
  padding-left: 5%;
  padding-right: 5%;}
  

 #titre-mobile {
    display: none;
  }
  #titre-pasmobile {
    display: block;
  }
  
  /* Media Queries pour écrans mobiles (smartphones) */
@media only screen and (max-width: 640px) {

  /* Réinitialisation des marges et padding pour éviter le débordement */
  body {
    margin: 0.5em auto;
    padding-left: 2%;
    padding-right: 2%;
    max-width: 100%;
  }

  /* Menu de navigation : passage en colonne pour plus de lisibilité */
  .nav {
    padding: 0;
    margin: 0;
  }
  .nav li {
    display: block;
    margin: 0.25em 0;
  }
  .nav li a {
    display: block;
    padding: 0.5em;
    margin: 0 0 0.5em 0;
  }

  /* Images : réduction des marges et bordures pour gagner de la place */
  img {
    padding: 4px;
    border-width: 2px;
  }

  /* Grille d'images : passage en une seule colonne */
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 1em auto;
  }

  /* En-têtes et pieds de page : adaptation des tailles et marges */
  #header, #footer {
    padding: 20px 2% 20px;
    margin: 0;
  }

  /* Titres et textes : réduction de la taille pour une meilleure lisibilité */
  .titre, .qtitre, .titraille {
    font-size: 24px;
    padding: 10px;
    margin: 10px 0;
    word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;
  }
  .texte {
    font-size: 1em;
    line-height: 1.4em;
  }

  /* Sections spécifiques : adaptation des marges et padding */
  .wrapper, .menu {
    padding: 15px;
  }

  /* Effets de survol : désactivation ou simplification pour le tactile */
  .hover-full span,
  .hover-grid h1,
  .hover-grid h2 {
    display: none !important;
  }

  /* Bandeau : adaptation de la position et de la taille */
  .bandeau {
    margin-top: 60px;
    padding: 3px;
    font-size: 0.9em;
  }

  /* Quatrains : adaptation de la taille et de l'alignement */
  #quatrain {
    line-height: 1.8em;
  }
  #quatrains {
    font-size: 0.9em;
  }

  #titre-mobile {
    display: block;
  }
  #titre-pasmobile {
    display: none;
  }

.nav li {
    display: inline-block; /* Affichage horizontal */
    width: auto; /* Largeur automatique */
    margin: 0 0.25em; /* Espacement horizontal */
  }
  
  .nav ul a, .nav-item ul a, .nav-item li a, .nav li a {
    display: inline-block; /* Affichage horizontal */
    width: auto; /* Largeur automatique */
    margin: 0 0.25em; /* Espacement horizontal */
  }
  
 .nav ul a:hover, .nav-item ul a:hover, .nav-item li a:hover, .nav li a:hover { background: #db1762; 
	color: #FFFFFF;}
  
  /* Style de base pour tous les liens */
a {
    color: inherit; /* Hérite de la couleur du parent (optionnel, selon ton besoin) */
    text-decoration: none; /* Supprime le soulignement par défaut */
}

a:hover { background: #db1762; 
	color: #FFFFFF;}