:root 
{
    --couleur_texte_principale:rgb(83, 80, 80);
}

html 
{
  font-size: 16px; /* Desktop */
}

@media (max-width: 768px) 
{
  html {
    font-size: 14px; /* Mobile : 1rem = 14px */
  }
}

header 
{ 
    background-color: black; 
    background-size:cover; 
    width: 100%; 
}

body 
{ 
    background-color: rgb(250, 248, 251);
    color: var(--couleur_texte_principale);
    font-family: Verdana, sans-serif; 
    text-align: center;
    font-size: 1.6rem; /* Réinitialise à 16px */
}

textarea
{
    width: 100%;
}

.ligne
{
    display: block;
    width: 100%;
}

.cadreNoir
{
    background-color: black;
    color:rgba(255, 255, 255, 0.748);
}
.cadreGris , .cadreGrisClair
{
    background-color: #7F7F7F;
    color:  #CECECE;
}
.cadreBleuGris
{
    background-color: #34495e;
    color:rgba(255, 255, 255, 0.748);
}
.rouge
{
    color:red;
}
.noir
{
    color:black;
}
.cadreLogements , .cadreRegion , .formContact , .cadreIntro
{
    display: block;
    width: 100%;
}

.cadreLogements img
{
    max-width: 90%;
}

.cadreLogements .col1Tab , .cadreLogements .col2Tab
{
    border : 1px white solid;
}

.classOrange
{
	color:orange;
}



/*--------------MENU----------------*/
.blason 
{ 
    text-align: left;
    padding: 2px;
}
.menu
{
    margin: auto;
}
.grandEcran
{
    display: none;
}
.petitEcran .ligneTab2Col
{
    grid-template-columns: 40% 60%;
}
.menuPrincipal, .menuPrincipal ul 
{
    padding:0;
    margin:0;
    list-style:none;
    background-color:black; 
}
.menuPrincipal {
    float:right;
    position:relative;
    width: 100%;
}
.menuPrincipal ul {
    position:absolute;
    display:none;
    right:2px;
    top:0;
}
.menuPrincipal li:hover ul {
    display:block;
}
.menuPrincipal ul a {
    display:block;
}
.menuPrincipal li a 
{
    color:#ffd900e7;
    text-decoration:none; 
    padding:2px; 
    font-size:1.2rem;
}
.menuPrincipal li a:hover 
{ 
    color: rgba(223, 45, 39, 0.795); 
    width: 350px;
}
.sousMenu li
{
	width: 100%;
}

footer 
{ 
    background-color: black; 
    background-size:cover; 
    width: 100%; 
    color:white; 
    padding:1vh;
}

.liens_pied 
{ 
    display:inline-block; 
    width:49%; 
    vertical-align: middle; 
}

.liens_pied ul 
{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    text-align:left; 
}

.bouton_action 
{
    background-color: #C1BFB1;
    border: 2px double #cccccc; 
    color: black;
    text-align: center;  
    width: 50%;
    padding: 1vh;
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s;
     cursor: pointer; 
     margin: auto;
     text-decoration: none;
     /* margin-bottom: 2vh; */
}


/************Portable ou tablette ******************/
@media only screen and (min-device-width:480px)  
{
    .grandEcran
    {
        display: block;
    }   
    .petitEcran
    {
        display: none;
    }
    .menuPrincipal li 
    {
        display: inline-block;
    }
    .formContact
    {
        display: grid;
        margin: auto;
    }   
}

/****************Tablette*****************/
@media only screen and (min-device-width:720px)  
{
    /* .container
    {
        grid-template-rows: 300px auto ;
        gap: 5px;
    } */
    .ligne
    {
        display: inline-block;
    }
    .cadreLogements , .cadreRegion , .cadreIntro
    {
        display: grid;
    }
    .cadreRegion , .cadreIntro
    {
        margin: 30px 0;
    }

    .cadreIntro img
    {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cadreIntro .cadreBlanc
    {
        height: 180px;
    }
    .cadreIntro .cadreBlanc div
    {
        margin: auto;
    }
    .cadreIntro .cadreNoir
    {
        height: 120px;
        margin: 0;
    }

    .cadreLogements .container
    {
        grid-template-rows: auto 250px auto;
        padding-bottom: 20px;
    }
    .cadreLogements img
    {
        width: 90%;
        height: 100%;
        object-fit: cover;
    }
    .cadreRegion .container
    {
        grid-template-rows: auto 150px auto;
        gap : 0;
    }
    .cadreRegion p
    {
       margin : 10px 0;
    }
    .cadreRegion img
    {
        width: 80%;
        height:100%;
        object-fit: cover;
    } 

    .formContact
    {
       width: 80%;
       margin: auto;
    } 
}

@media screen and (min-width: 860px)
{
    /* .container
    {
        grid-template-rows: 320px auto;
    } */
    .cadreIntro .cadreBlanc
    {
        height: 190px;
    }
    .cadreIntro .cadreNoir
    {
        height: 130px;
    }

    .cadreLogements .container
    {
        grid-template-rows: auto 280px auto;
    }

    .cadreRegion .container
    {
        grid-template-rows: auto 180px auto;
    }

    .formContact
    {
       width: 70%;
    }
    
   
}


@media only screen and (min-width: 1024px)
{
    /* h1 
    {
        font-size: 2rem; 
    } */
    /* .container
    {
        grid-template-rows: 400px 50vh auto;
    } */
    .cadreIntro .cadreBlanc
    {
        height: 220px;
    }
    .cadreIntro .cadreNoir
    {
        height: 180px;
    }

    .cadreLogements .container
    {
        grid-template-rows: auto 350px auto;
    }

    .cadreRegion .container
    {
        grid-template-rows: auto 230px auto;
    }

    .formContact
    {
       width: 60%;
    }
    
  

    
}