.container{
display:flex;
}

hr{
  border: none;       
  height: 1px;           
  background-color: purple; 
  margin: 20px 0;  
  margin-top: 30px;   
  margin-bottom: 30px;  
}

a {
  text-decoration: none;
  color: inherit; /* garde la couleur de ton texte */
}

.containerhautdepage{
display:flex;
gap: 50px; 
}

.colonne01{
width: 55%;
}

.colonne02{
width: 55%;
margin-top: 45px;  
}

.colonne03{
margin-top: 45px; 
margin-right: 50px;
font-family: Arial, sans-serif;
color: #7a0f7a; 
transition: 0.3s ease;
}

.colonne03:hover {
font-weight: bold;
transform: scale(1.05);
}

.catégorie{
font-family: Arial, sans-serif;
font-size: 24px;
color: #7a0f7a; 
text-align: center;
margin:15px;
transition: transition: 0.3s ease;
}


.catégorie:hover {
font-weight: bold;
transform: scale(1.05);
}

.menu{
top: 0;
left: 0;
width: 100%;
display: flex;        
gap: 80px;                 
background: transparent;   
z-index: 1000;
}

.marquee {
  width: 100%;
  overflow: hidden;        
  border: 1px solid #ccc;  
  border-color: #7a0f7a; 
  color: #7a0f7a; 
  margin-top: 20px;
  font-family: Milford, regular;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: defile-droite 40s linear infinite;
}

@keyframes defile-droite {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

.bismarquee {
  width: 100%;
  overflow: hidden;        
  border: 1px solid #ccc;  
  border-color: #7a0f7a; 
  color: #7a0f7a; 
  margin-top: 20px;
  font-family: Milford, regular;
}

.bismarquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: defile-gauche 40s linear infinite;
}

@keyframes defile-gauche {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}

.droit{
font-family: Milford, regular;
font-size: 12px;
}

.titre{
font-family: Arial, sans-serif, bold;
font-size: 26px;
color: #7a0f7a;
}


.colonne1{
width:50%;
display:flex;
margin-right: 150px;
margin-left: 50px;
margin-top: 170px;
margin-bottom: 50px;
flex-direction: column;
overflow:hidden;
}

/* cacher boutons radio */
input{
    display:none;
}

/* grande image */
.grande-image{
    position:relative;
    width:100%;
    max-width:500px;
    height:500px;
    
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;
}

.grande{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    transition:0.3s;
    
}

/* image active */
#img1:checked ~ .grande-image .photo1{
    opacity:1;
}

#img2:checked ~ .grande-image .photo2{
    opacity:1;
}
#img3:checked ~ .grande-image .photo3{
    opacity:1;
}   
#img4:checked ~ .grande-image .photo4{
    opacity:1;
}
#img5:checked ~ .grande-image .photo5{
    opacity:1;
}
#img6:checked ~ .grande-image .photo6{
    opacity:1;
}


/* miniatures */
.miniatures{
display:flex;
margin-left: 50px;
margin-top: 10px;
flex-wrap: nowrap;
overflow-x: auto;
gap:20px; 
}

.miniatures img{
    width:100px;
    cursor:pointer;
}

.colonne2{
width:50%;
display:flex;
margin-top: 170px;
margin-right: 90px;
margin-bottom: 50px;
}