/* Grille temporaire */
.dev-grid {
    display: grid;
    grid-template-columns: repeat(12, 88px);
    width: 1320px;
    height: 100vh;
    gap: 24px;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* Colors */

/* Principales */
.soft-primary {
    color: var(--soft-primary);
}

.primary {
    color: var(--primary);
}

.hard-primary {
    color: var(--hard-primary);
}

.warning {
    color: var(--warning);
}

.danger {
    color: var(--danger);
}

.white {
    color: var(--white);
}


/* Gray */
.gray-900 {
    color: var(--gray-900);
}

.gray-800 {
    color: var(--gray-800);
}

.gray-700 {
    color: var(--gray-700);
}

.gray-600 {
    color: var(--gray-600);
}

.gray-500 {
    color: var(--gray-500);
}

.gray-400 {
    color: var(--gray-400);
}

.gray-300 {
    color: var(--gray-300);
}

.gray-200 {
    color: var(--gray-200);
}

.gray-100 {
    color: var(--gray-100);
}

.gray-50 {
    color: var(--gray-50);
}


/* Green Gray */
.green-gray-900 {
    color: var(--green-gray-900);
}

.green-gray-800 {
    color: var(--green-gray-800);
}

.green-gray-700 {
    color: var(--green-gray-700);
}

.green-gray-600 {
    color: var(--green-gray-600);
}

.green-gray-500 {
    color: var(--green-gray-500);
}

.green-gray-400 {
    color: var(--green-gray-400);
}

.green-gray-300 {
    color: var(--green-gray-300);
}

.green-gray-200 {
    color: var(--green-gray-200);
}

.green-gray-100 {
    color: var(--green-gray-100);
}

.green-gray-50 {
    color: var(--green-gray-50);
}

.dev-grid div {
    background-color: var(--soft-primary);
    opacity: 0.1;
}
/*__________________________________________________________*/

/* container prenant la largeur de la grille */

/*----------------------------------------------------------*/
.container {
    margin: 0 auto;
    max-width: 1320px;
}

.navigation .container {
    display: flex;
    gap: 32px;
}
/*__________________________________________________________*/

/* Espacement entre la nav et les chevrons */

/*----------------------------------------------------------*/
.chevron {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
}
/*__________________________________________________________*/

/* Bandeau noir Header */

/*----------------------------------------------------------*/
.navigation {
    background-color: #333333;
    height: 60px;
}
/*__________________________________________________________*/

/* Couleur Text nav */

/*----------------------------------------------------------*/
.navigation a {
    color: var(--gray-400)
}
/*__________________________________________________________*/

/* Couleur text de la page active */

/*----------------------------------------------------------*/
.navigation a.active {
    color: var(--white);
}
/*__________________________________________________________*/

/* Localisation header */

/*----------------------------------------------------------*/
.store-location {
    display: flex;
    align-items: center;
    gap: 8px;
}
/*__________________________________________________________*/

/* Barre de recherche Header*/

/*----------------------------------------------------------*/
.search-bar {
    display: flex;
}

.search-input {
    width: 400px;
    height: 45px;
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-100);
    border-radius: 6px 0 0 6px;
    padding-left: 16px;
    gap: 8px;
}

.search-input input {
    border: none;
    outline: none;
}

.search-bar button {
    width: 98px;
    height: 45px;
    border: none;
    background-color: var(--primary);
    color: var(--white);
    border-radius: 0 6px 6px 0;
}
/*__________________________________________________________*/

/* Barre de recherche + favoris + panier Header*/

/*----------------------------------------------------------*/
.container-top {
    margin: 0 auto;
    max-width: 1320px;
}

.header-main .container-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-main {
    margin: 24px 0;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.panier-texte {
    display: flex;
    flex-direction: column;
}
/*__________________________________________________________*/

/*Séparateur vertical entre favoris et pannier*/

/*----------------------------------------------------------*/
.header-separateur {
    width: 1px;
    height: 24px;
    background-color: var(--gray-200);
    margin-left: 16px;
    margin-right: 20px;
}
/*__________________________________________________________*/

/* Contact Header */

/*----------------------------------------------------------*/
.contact-header {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    max-width: 1320px;
    color: var(--white);
    gap: 12px;
}
/*__________________________________________________________*/

/*Langue et connexion*/

/*----------------------------------------------------------*/
.header-info {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/*__________________________________________________________*/

/*Banière top*/

/*----------------------------------------------------------*/
.bannieres {
    max-width: 1320px;
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: 871px 423px;
    grid-template-rows: 288px 288px;
    column-gap: 23px;
    row-gap: 23px;
}

.banniere-principale {
    grid-row: 1 / 3;
}
/*__________________________________________________________*/

/*Feature top*/

/*----------------------------------------------------------*/
.feature-contenair {
    display: flex;
    max-width: 1320px;
    margin: 68px auto 0;
    justify-content: space-between;
    padding-left: 44px;
    padding-right: 65px;
    box-sizing: border-box;
}

.feature-contenair img {
    margin-right: 16px;
    height: 40px;
    width: auto;
}

.free-shipping, .customer-support, .secure-payment, .money-guarantee {
    display: flex;
    align-items: center;
}

.feature-texte {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.feature-texte p {
    margin: 0;
}
/*__________________________________________________________*/

/*Contenair subscribe*/

/*----------------------------------------------------------*/
.contenair-subscribe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px;
    margin: 24px auto 0;
}
/*__________________________________________________________*/

/*Barre de recherche*/

/*----------------------------------------------------------*/
.subscribe-bar {
    display: flex;
    align-items: center;
    padding-right: 24px;
}
/*__________________________________________________________*/

/*Bordure de la barre subscribe*/

/*----------------------------------------------------------*/
.subscribe-input input {
    width: 400px;
    height: 52px;
    box-sizing: border-box;
    border: 1px solid var(--gray-100);
    border-radius: 26px;
    padding-left: 24px;
    outline: none;
    padding-right: 24px;
}
/*__________________________________________________________*/

/*Boutton Subscribe*/

/*----------------------------------------------------------*/
.subscribe-bar button {
    width: 162px;
    height: 52px;
    border: none;
    border-radius: 26px;
    background-color: var(--primary);
    color: var(--white);
    margin-left: -50px;
}
/*__________________________________________________________*/

/*Résaux sociaux*/

/*----------------------------------------------------------*/
.newsletter-social {
    display: flex;
    align-items: center;
    gap: 20px;
}

/*__________________________________________________________*/

/*Bandeau noir + information du site footer*/

/*----------------------------------------------------------*/

/*Bandeau noir*/

/*----------------------------------------------------------*/
.footer-main {
    background-color: #333333;
    max-height: 368px;
    margin-top: 42px;
    max-width: 1320px;
    margin: 0 auto;
}

/*__________________________________________________________*/

/*Contact Footer Mail et téléphone*/

/*----------------------------------------------------------*/
.contact-footer {
    display: flex;
    gap: 16px;   
}

.phone-footer {
    font-family: var(--body-small-500);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 6px;
}

.email-footer {
    font-family: var(--body-small-500);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 6px;
}
/*__________________________________________________________*/

/*Paragraphe en latin Footer*/

/*----------------------------------------------------------*/
.footer-main p {
   width: 400px;
   font-family: var(--body-small-400); 
}
/*__________________________________________________________*/

/*Information List Footer*/

/*----------------------------------------------------------*/
.information-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 24px;
    font-family: var(--body-small-400);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.information-footer {
    display: flex;
}

.list-account, .list-helps, .list-proxy, .list-categories {
    width: 224px;
}

.information-footer span {
    font-family: var(--body-medium-500);
}
/*__________________________________________________________*/

/*Contenair footer du (Logo) jusqu'à (ligne de séparation)*/

/*----------------------------------------------------------*/
.footer-content {
    display: flex;
    align-items: flex-start;
}
/*__________________________________________________________*/

/*Information List ul*/

/*----------------------------------------------------------*/
.information-footer {
    margin-top: 65px;
    margin-left: 50px;
}
/*----------------------------------------------------------*/

/*Block div Logo + contact email + téléphone*/

/*__________________________________________________________*/
.footer-about {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 16px;
}

.footer-about img {
    width: 183px;
    height: 38px;
}
/*__________________________________________________________*/

/*Copyright et moyen de Paiement footer*/

/*----------------------------------------------------------*/
.copy-payments {
    display: flex;
    justify-content: space-between;
    font-family: var(--body-small-400);
}
/*__________________________________________________________*/

/*Ligne de séparation Footer*/

/*----------------------------------------------------------*/
.ligne-separation {
    border-top: 1px solid var(--gray-600);
    margin-top: 24px;
    margin-bottom: 24px;
}
/*__________________________________________________________*/