:root {
    /* polices */
    --police-corp-principal: 'Merienda', sans-serif;
    --police-titre: 'Aclonica', serif;


    /* coleurs */
    --blue-principal : #0047EA;
    --gre-secondaire : #ADA9BB;
    --gre-principal : #787586;
    --rouge-principal : #D20016;
    --rouge-secondaire : #FF1041;


    --texte-principal: #221f1f;
    --texte-gre: #484848;
    --texte-blanc-casse: #e1dfe9;
    --texte-blanc: #fff;

    /* font-size et gutter, source type-scale.com #####################################################################*/
    /* font size scale, 1.250 – Major Third ###########################################################################*/
    --texte-1000: 4.5rem;
    --texte-900: 3.052rem;
    --texte-800: 2.441rem;
    --texte-700: 1.953rem;
    --texte-600: 1.563rem;
    --texte-500: 1.25rem;
    --texte-400: 1rem;
    --texte-300: 0.8rem;
    --texte-200: 0.64rem;
    --texte-100: 0.512rem;


    /* gutter 1.414 – Augmented Fourth ##################################################################################*/
    --goutiere-1000: 5.653rem;
    --goutiere-800: 3.998rem;
    --goutiere-600: 2.827rem;
    --goutiere-400: 1.999rem;
    --goutiere-300: 1.414rem;
    --goutiere-200: 1rem;
    --goutiere-100: 0.707rem;

    line-height: 1.5625;
    color: var(--texte-principal);
}


*{
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
}

body{
    padding: 4rem 5rem 1rem 5rem;
    display: flex;
    flex-direction: column;
    gap: var(--goutiere-600);

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

img{
    width: 100%;
    display: block;
    object-fit: cover;
    padding: 0.2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25;
    font-weight: 500;
    max-width: 40ch;
    color: var(--texte-gre);
}

h1 {
    font-size: var(--texte-900);
    max-width: 40ch;
    font-weight: 900;
}

h2 {
    font-size: var(--texte-700);
}

h3 {
    font-size: var(--texte-600);
}

h4 {
    font-size: var(--texte-400);
}


main, main article {
    display: flex;
    flex-direction: column;
}

main{
    gap: var(--goutiere-1000);
}

main article {
    gap: var(--goutiere-400);
    margin-top: var(--goutiere-300);
}

main article  + article {
    margin-top: var(--goutiere-800);
}

main article > header {
    border-bottom: 2px solid lightgray;
    padding: 0 0 var(--goutiere-100) 0;
}

article > section{
    display: flex;
    gap: var(--goutiere-400);
}

.interface-insperation a{
    width: 25%;
    height: 18rem;
    overflow: hidden;
    box-shadow: 0 0 6px 0px #d9d4d4;
}

.palette > div{
    flex: 0 0 7rem;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 1rem;
    font-weight: 600;
    font-size: .8em;
}

.pictogrammes {
    flex-direction: column;
}

.pictogrammes div{
    display: flex;
    gap: 1rem;
    justify-content: space-around;
}

.pictogrammes div span{
    padding: 2rem;
}

.pictogrammes div:nth-of-type(2) span{
    padding: 1.25rem;    
}
.pictogrammes div:nth-of-type(3) span{
    padding: .75rem;    
}


.facebook{
    background-image: url("imgs/facebook.svg");
}

.twitter{
    background-image: url("imgs/twitter.svg");
}

.google{
    background-image: url("imgs/google.svg");
}

.signin{
    background-image: url("imgs/signin.svg");
}

.search{
    background-image: url("imgs/search.svg");
}

.special{
    background-image: url("imgs/special.svg");
}

.bid{
    background-image: url("imgs/bid.svg");
}

.email{
    background-image: url("imgs/email.svg");
}

.phone{
    background-image: url("imgs/phone.svg");
}

.home{
    background-image: url("imgs/home.svg");
}

.favourite{
    background-image: url("imgs/favourite.svg");
}

.images, .insperation{
    flex-wrap: wrap;
}

.images img{
    flex: 0 0 14rem;
    height: 14rem;
    border-radius: 0.25rem;
}

.insperation{
    background-color: #f3f3f3;
    padding: 1rem;
}

.insperation img{
    max-width: 40rem;
    margin-top: 1rem;
}

.typography{
    flex-flow: column;
    }

.typography *{
    color: var(--texte-gre);
}

.typography h1{
    font-family: 'Merienda', serif;
    font-size: 2.1rem;
}

.typography h2{
    font-family: 'Merienda', serif;
}

.typography div+div+div h1{
    font-family: 'Aclonica', serif;
}

.typography p{
    font-family: 'Manrope', serif;
    max-width: 50rem;
    letter-spacing: .025em;
    line-height: 1.652;
}


footer{
    display: flex;
    flex-direction: column;
    margin-top: var(--goutiere-1000);
}
footer > * + *{
    margin-top: 1rem;
}

footer li + li{
    margin-top: .5rem;
}



.teste-agencement h1{
    font-family: 'Merienda', serif;
    font-size: 2.1rem;
}

.teste-agencement :is(h2, h3){
    font-family: 'Merienda', serif;
}

.typography div+div+div h1{
    font-family: 'Aclonica', serif;
}

.teste-agencement p{
    font-family: 'Manrope', serif;
    max-width: 50rem;
    letter-spacing: .025em;
    line-height: 1.652;
}

.teste-agencement section{
    gap: var(--goutiere-1000) ;
}

.teste-agencement section + section{
margin-top: var(--goutiere-600);
}

.teste-agencement div{
    flex: 1 0 25rem;
}

.teste-agencement div * + * {
    margin-top: var(--goutiere-300);
}

.teste-agencement div img{
    margin-bottom: var(--goutiere-200);
    height: 8rem;
}

.teste-agencement .avec-fond{
    padding: var(--goutiere-300);
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--texte-600);
    color: var(--texte-blanc);
}

.teste-agencement .avec-fond.rouge{
    background-color: var(--rouge-secondaire);
}

.teste-agencement .avec-fond.blue{
    background-color: var(--blue-principal);
}

.teste-agencement .main-action, .teste-agencement .secondary-action{
    display: inline-block;
    cursor: pointer;
    padding: var(--goutiere-100) var(--goutiere-300);
    background-color: var(--rouge-principal);
    background-clip: border-box;
    border: 2px solid transparent;
    color: var(--texte-blanc);
    font-weight: bold;
    border-radius: .25rem;
}

.teste-agencement .main-action.blue{
    background-color: var(--blue-principal);
}

.teste-agencement .secondary-action{
    background-color: transparent;
    color: var(--rouge-principal);
    border: 2px solid;

}
.teste-agencement .secondary-action.blue{
    color: var(--blue-principal);
}

.teste-agencement .avec-bordure{
    border: 1px solid var(--texte-blanc-casse);
    padding: var(--goutiere-300);
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
}

.teste-agencement .texte-rouge-principal{
    color: var(--rouge-principal);
}

.texte-blue-principal{
    color: var(--blue-principal);
}