/******************************************************************************************
 *
 * Projet     : Dakan Destinée
 * Fichier    : layout.css
 * Version    : 1.0.0
 *
 * Description
 * ----------------------------------------------------------------------------------------
 * Structure générale du site.
 *
 * Ce fichier contient uniquement les éléments de mise en page :
 * - conteneurs
 * - sections
 * - flex
 * - grid
 * - espacements
 *
 *****************************************************************************************/


/*=========================================================================================
    STRUCTURE PRINCIPALE
=========================================================================================*/

.site-header{

    width:100%;

}

.site-main{

    width:100%;

}




/*=========================================================================================
    CONTENEUR
=========================================================================================*/

.container{

    width:min(100% - (var(--container-padding) * 2), var(--container-width));

    margin-inline:auto;

}



/*=========================================================================================
    SECTIONS
=========================================================================================*/

.section{

    padding-block:var(--section-padding);

}

.section-sm{

    padding-block:calc(var(--section-padding) / 2);

}

.section-lg{

    padding-block:calc(var(--section-padding) * 1.5);

}



/*=========================================================================================
    EN-TÊTE DE SECTION
=========================================================================================*/

.section-header{

    text-align:center;

    margin-bottom:var(--space-xxl);

    max-width:50rem;

    margin-inline:auto;

}

.section-content{

    width:100%;

}



/*=========================================================================================
    FLOW
=========================================================================================*/

.flow > * + *{

    margin-top:var(--space-md);

}



/*=========================================================================================
    FLEX
=========================================================================================*/

.flex{

    display:flex;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-wrap{

    flex-wrap:wrap;

    gap:var(--space-lg);

}



/*=========================================================================================
    GRID
=========================================================================================*/

.grid{

    display:grid;

    gap:var(--space-xl);

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:var(--space-xl);

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-xl);

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:var(--space-lg);

}



/*=========================================================================================
    ALIGNEMENTS
=========================================================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}



/*=========================================================================================
    UTILITAIRES
=========================================================================================*/

.full-width{

    width:100%;

}

.hidden{

    display:none;

}
.footer-container{
display:flex;justify-content:center;align-items:center;gap:2.5rem;width:100%;max-width:none;margin:0 auto;text-align:center;padding:0 2rem;
}

.separator{opacity:.55;}
.site-footer a{color:inherit;text-decoration:none;transition:opacity .25s;}
.site-footer a:hover{opacity:.7;}

main{padding-bottom:0;}