Modification de Modèle:Caroussel test

<noinclude>
== Carrousel d'images (test) ==
Ce modèle affiche un carrousel CSS sans JavaScript.
=== Paramètres ===
* <code>Image1</code> — première image
* <code>Image2</code> — deuxième image
* <code>Image3</code> — troisième image
</noinclude><includeonly>
<div class="carousel-container" style="width: 100%; max-width: 300px; margin: auto;">

<!-- Radios -->
<input type="radio" name="carousel" id="carousel-1" checked style="display: none;">
<input type="radio" name="carousel" id="carousel-2" style="display: none;">
<input type="radio" name="carousel" id="carousel-3" style="display: none;">

<!-- Slides -->
<div class="carousel-slide" style="position: relative; height: auto; overflow: hidden;">
  <div style="display: flex; width: 300%; transition: transform 0.5s ease;">
    <div class="carousel-image" style="flex: 1 0 100%; text-align:center;">
      [[File:{{{Image1|Example1.jpg}}}|300px]]
    </div>
    <div class="carousel-image" style="flex: 1 0 100%; text-align:center;">
      [[File:{{{Image2|Example2.jpg}}}|300px]]
    </div>
    <div class="carousel-image" style="flex: 1 0 100%; text-align:center;">
      [[File:{{{Image3|Example3.jpg}}}|300px]]
    </div>
  </div>
</div>

<!-- Boutons -->
<div class="carousel-buttons" style="text-align: center; margin-top: 5px;">
  <label for="carousel-1" style="cursor:pointer; padding:5px;">●</label>
  <label for="carousel-2" style="cursor:pointer; padding:5px;">●</label>
  <label for="carousel-3" style="cursor:pointer; padding:5px;">●</label>
</div>

<style>
  #carousel-1:checked ~ .carousel-slide div { transform: translateX(0%); }
  #carousel-2:checked ~ .carousel-slide div { transform: translateX(-100%); }
  #carousel-3:checked ~ .carousel-slide div { transform: translateX(-200%); }
</style>

</div>
</includeonly>