.cadre-demo {
 
list-style: none;
padding: 0 1rem;
display: grid;
margin:7rem 2rem;
grid-template-columns: repeat(3, minmax(30ch, 1fr));
grid-gap: 2rem;

    



}

@media (max-width: 901px) {
    .cadre-demo {
    list-style: none;
padding: 0 1rem;
display: grid;
margin:7rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
grid-gap: 2rem;
}
    
    
}

.card {	
	
--card-gradient:248 78% 62%;
--card-gradient-1:180 64% 53%;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
padding-bottom: 1rem;
overflow: hidden;
}
	
.card:focus {
 outline: none;
}
	
	
	
.card-caption{ 
	
max-height: max(9.5rem, 30vh);
display: grid;
grid-template-areas: "card";
overflow: hidden;

	}


	
	
.card-caption img,
.caption{

grid-area: card;

}
	
	

	
.card-caption:hover .caption,
.card-caption:focus .caption{

transform: translateY(0)

}
	

	
.card-caption img {

border-radius: 0.5rem 0.5rem 0 0;
width: 100%;
object-fit: cover;
height: 30vh;
display: block

}


.card span ~ * {

  margin-left: 1rem;
  margin-right: 1rem;
  
}

	
.card > :last-child {

  margin-bottom: 0;
  
}


.caption{



display: grid;
place-items: center;

 }

	
.caption h5 {

text-decoration: none;
background-color:#00c32c;
color: hsl(0, 0%, 100%);
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
width: 25ch;
padding: 0 0.75em;
transition: .2s all ease-in-out;
text-align:center;
}
	

.caption a:hover, 
.caption a:active{
 
	--card-gradient: 248 100% 60%;
}
	

.caption a:focus {

  box-shadow: 0 0 0 4px hsl(248 100% 48%);
	
}	


details { 

background:linear-gradient(-45deg, #00c32c 0%, #606060 100%);;
clip-path: polygon(calc(50% - 5em ) calc(50% - 2em ),calc(50% + 5em ) calc(50% - 20em ), calc(50% + 5em ) calc(50% + 20em ), calc(50% - 5em ) calc( 50% + 2em ));
color: white;

}
    
details summary{
line-height:2rem;
cursor:pointer; 
display: flex;
justify-content: center;
text-transform: uppercase;

    
    }
    
summary:before{

content:'En savoir plus '
    
    }
    
details[open] summary:before{ 
    
z-index: 3;
font-size: 2rem;
content: '❌';
position: fixed;
top: 1rem;
right: 1rem;
    
}
    
details[open]  {

transition: clip-path .4s cubic-bezier(0, 0.58, 0.36, 1);   
position: fixed;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%)
    
}
    
.contenu-fenetre p{

opacity: 0;
transform: translate3d(0, -5rem, 0);

}   
    
details[open] .contenu-fenetre{
    
overflow-y: auto;
max-width: 80vw;
height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto
    
    }
    
    
details[open] .contenu-fenetre p{

overflow-y: auto;
opacity: 1;
transform: translate3D(0, 0, 0);
transition: opacity .3s .2s, transform .6s .2s cubic-bezier(0, 0.65, 0.06, 0.98);
 }

.photo .ph {
    width:300px;
    height:200px;
       justify-content: space-between;
    
shape-outside: circle(250px at 50% 50%) padding-box;
justify-items:center;
justify-content: center;
padding-left:2rem;

}
.photo1 .ph {
       justify-content: space-between;
       width:400px;
       height:200px;
    
justify-items:center;
justify-content: center;
padding-left:2rem;

}


.contrat{
    display:flex;
}
@media (max-width: 1136px) {
    
   
    .photo .ph{
       
    padding-bottom:1rem;
    padding-top:2rem;
    width:250px;
    height:200px;
        
        
    }
     .photo1 .ph{
       
    padding-bottom:1rem;
    width:300px;
    height:200px;
        
        
    }
}


@media (max-width: 901px) {
    
    .contrat{
        display:block;
    }
    
    .photo .ph{
       
        padding-bottom:1rem;
      
        
        
    }
     .photo1 .ph{
       
        padding-bottom:1rem;
        
        
    }
}