[Résolu] 2 modals qui ne s'apprécient guère !

Bonjour à nouveau.

Je reviens vers vous pour essayer de voir ce qui ne va pas dans mon code.
C'est une page qui doit pourvoir afficher 4 fenêtres modales à la demande avec diaporama sur quelques images chacune et un peu de texte.
Mes diaporamas fonctionnent très bien (enfin comme je veux...) s'ils sont pris séparément...:
* Si leurs fenêtres modal sont prévues logiquement 1 puis 2 dans le déroulement de la page la fenêtre 2 s'affichent sans problème avec son diaporama.
* Mais si je renverse l'ordre dans le fil de la page, donc 2 puis 1, c'est le 1 qui va être parfait (enfin etc.)

Je me dis qu'il y a un truc du premier, donc en amont du second, qui est embêté par le truc du second (le dernier dans le déroulement de la page) : le second s'affiche bien quel qu'il soit.
Et ce truc empêche uniquement l'affichage du diaporama !

Voici le code pour lequel j'ai fait ... plus d'efforts que la dernière fois :
1e partie : l'appel des modals

		<br /><br />
		<span style="text-align:center;"><a href ="/hebergement.php#N1">
		<img class ="450" src = "fichier image N1" ></a></span>
		
		<br /><br />
		<span style="text-align:center;"><a href ="/hebergement.php#Al">
		<img class ="450" src = "fichier image Al" ></a></span>
		

2e partie : le code des modals

<div id="Al" class="oModal"> 			                                        <!-- DÉBUT modal Al  -->
	<div class="omodal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 40px; margin-bottom:50px;" >
	
		<div id = "diapo3" style ="background-color:#A9D0F5;">
			
			<div class= "paquet">   		<!-- c'est une div flex reliant les deux suivantes -->
				<div class = "intro">    	<!-- 1er flex  -->
					blabla
				</div>
		
				<div class = "slide">		<!-- 2e flex  -->
					<ul id="corps3">
	
						<input type="radio" name="radio-btn" id="imag3-1" checked />
    
						<li id="li-container3">
							<div id="contimg3">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>

							<label for="imag3-2" class="nav" title="Next">&#x203a;</label>
						</li>
	
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
etc.	
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

	
						<input type="radio" name="radio-btn" id="imag3-12"  />
    
						<li id="li-container3">
							<div id="contimg3">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>
							<label for="imag3-11" class="nav" title="Previous">&#x2039;</label>

						</li>
					</ul>
				</div> <!-- fin slide  -->
			</div>	<!-- fin paquet  -->
			
			<div class="detail">
				blabla		
			</div>  <!-- fin detail  -->
		</div>	<!-- fin diapo3  -->
		
      <a href="#fermer" class="milieu_droite" title="Fermer">Fermer modal1</a>
		
				
	</div> 			<!-- omadal dialog  -->
</div>			                                                                                    <!-- FIN modal Al  -->





<div id="N1" class="oModal">					                    <!-- DÉBUT modal N1  -->
	<div class="omodal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 40px; margin-bottom:50px;" >
	
		<div id="diapo1" style ="background-color:#F5A9BC;">
			
			<div class= "paquet">
				<div class = "intro">
					blabla
				</div>
	
				<div class = "slide">
					<ul id="corps1">
	
						<input type="radio" name="radio-btn" id="imag1-1" checked />
    
						<li class="li-container1">
							<div id="contimg1">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>
							<label for="imag1-2" class="nav" title="Next">&#x203a;</label>
						</li>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
etc.	
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	
						<input type="radio" name="radio-btn" id="imag1-10"  />
    
						<li class="li-container1">
							<div id="contimg1">
								<picture>
									blabla
									<img src="fichier + style" >
								</picture>
							</div>
							<label for="imag1-9" class="nav" title="Next">&#x203a;</label>
						</li>	
					</ul>
				</div>
			</div>	
			<div class="detail">
				blabla			
			</div> 							<!-- fin détail  -->
		</div>								<!-- fin diapo1  -->
      <a href="#fermer" class="milieu_droite" title="Fermer">Fermer modal2 </a>

	</div> 			<!-- omadal dialog  -->
</div>			                                                                                    <!-- FIN modal N1  -->

Je peux fournir la css mais je me dis que cela doit être le html qui coincent puisque tout ce qui est mise en page permet l'affichage normal (à condition de n'appeler que le second).

Je vous soumets ce défi qui ne tient peut-être (et même sans doute) qu'à peu de chose.
Avec mes remerciement pour l'intérêt que vous aurez à fouiller ce boulot.