/* -------------
    SOMMAIRE
------------- */

/* @AUTHOR : Nicolas BOUDOT */

/*
    Elements
    --------

    BACKGROUND
        Couleur
        Pattern
    COULEUR
    SLIDER
    IMAGE
        No-image
        Background
        Filter
        Aspect Ratio
        Cover
        Contain
        Zoom
    TEXTE
        Couleur
        Font-family
        Ellipsis
    IFRAME
    ANCRE


    CSS
    ---

    GRID
    POSITION
        Relative
        Absolute
    PSEUDO
        No-Before
        No-After
*/



/* -------------------------
    BACKGROUND
        Couleur
------------------------- */

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

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-tertiary {
    background-color: var(--color-tertiary);
}

.bg-quaternary {
    background-color: var(--color-quaternary);
}

.bg-quinary {
    background-color: var(--color-quinary);
}

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



/* -------------------------
    BACKGROUND
        Pattern
------------------------- */

/* Exemple :

    // Pattern généré via http://www.patternify.com/
    .bg-pattern {
        background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='40' patternTransform='scale(.4) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M20 20v20h20V20zm5 5h10v10H25zM0 0v20h20V0zm5 5h10v10H5z' transform='translate(5,0)' stroke-width='1' stroke='none' fill='hsla(0, 0%, 100%, 0)'/><path d='M5 25h10v10H5zM25 5h10v10H25z' transform='translate(5,0)' stroke-width='1' stroke='none' fill='hsla(0, 0%, 0%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(-29,0)' fill='url(%23a)'/></svg>")
    }

        // Filtre appliqué sur une image NOIR UNIQUEMENT
        .bg-pattern--red {
            filter: invert(24%) sepia(92%) saturate(3040%) hue-rotate(346deg) brightness(86%) contrast(110%);
        }
*/



/* -------------------------
    SLIDER
------------------------- */



/* -------------------------
    IMAGE
        No-image
------------------------- */

.no-image {
    background-color: var(--gray-200);
    overflow: hidden;
}

.no-image > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.no-image img {
    max-width: 75%;
    max-height: 75%;
}



/* -------------------------
    IMAGE
        Background
------------------------- */



/* -------------------------
    IMAGE
        Filter
------------------------- */

/*
  Infos :
    On peut appliquer un filtre sur des images NOIR UNIQUEMENT afin de changer leur couleur.
    Pratique pour gérer des icons gérés depuis le BO.
    Outil : https://webvista.co.in/tools/css_filter/
*/

/*
  Exemple :

    .filter-white {
        filter: invert(100%) brightness(100%) contrast(100%);
    }

    .filter-color-primary {
        filter: invert(24%) sepia(92%) saturate(3040%) hue-rotate(346deg) brightness(86%) contrast(110%);
    }
*/



/* -------------------------
    IMAGE
        Aspect Ratio
------------------------- */

.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-8-3 {
    aspect-ratio: 8 / 3;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-arrondi {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
@media (min-width: 768px) and (max-width: 991px) {
    .aspect-arrondi {
        width: 675px;
        max-width: 322px;
        margin: 0 auto 3rem;
        float: initial !important;
    }
}



/* -------------------------
    IMAGE
        Cover
------------------------- */

.cover {
	overflow: hidden;
}

	.cover img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}



/* -------------------------
    IMAGE
        Contain
------------------------- */

.contain {
	overflow: hidden;
}

	.contain img {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}



/* -------------------------
    IMAGE
        Zoom
------------------------- */

.zoom img {
	transition: transform .4s;
}

	.zoom:hover img {
		transform: scale(1.2);
	}



/* -------------------------
    TEXTE
        Couleur
------------------------- */

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

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

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



/* -------------------------
    TEXTE
        Font-family
------------------------- */

.ff-primary {
    font-family: var(--ff-primary);
}

.ff-secondary {
    font-family: var(--ff-secondary);
}



/* -------------------------
    TEXTE
        Ellipsis
------------------------- */

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
}

    .ellipsis--2 {
        -webkit-line-clamp: 2;
    }

    .ellipsis--3 {
        -webkit-line-clamp: 3;
    }

    .ellipsis--4 {
        -webkit-line-clamp: 4;
    }

.ellipsis > * {
    margin: 0;
}



/* -------------------------
    IFRAME
------------------------- */

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
  }

  .embed-responsive::before {
    display: block;
    content: "";
  }

  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .embed-responsive-21by9::before {
    padding-top: 42.857143%;
  }

  .embed-responsive-16by9::before {
    padding-top: 56.25%;
  }

  .embed-responsive-4by3::before {
    padding-top: 75%;
  }

  .embed-responsive-1by1::before {
    padding-top: 100%;
  }



/* -------------------------
    ANCRE
------------------------- */

.ancres {
    display: block;
    margin-top: calc(-120px - 100px);
    /* Compensation de la hauteur de la WP-bar + Espace voulu */
    height: calc(120px + 100px);
    /* Hauteur de la WP-bar + Espace voulu */
    visibility: hidden;
}



/* -------------------------
    GRID
------------------------- */



/* -------------------------
    PSEUDO
------------------------- */
.big-title {
    font-size: 50px;
    font-weight: bold;
    color: var(--gray-200);
    text-transform: uppercase;
    text-align: center;
    line-height: 76%;
    position: relative;
    top: 69px;
}
@media (min-width: 992px) {
    .big-title {
        top: 52px;
        line-height: 38%;
        font-size: 100px;
    }
}

/* -------------------------
    TEXTE
        Introduction
------------------------- */
.text-intro {
    font-size: 1.8rem;
}