/*===================================================================
=====================================================================
*                                                                   *
*       adaptations des styles selon le support utilisé            *
*       et les restrictions de résolution                          *
*                                                                   *
=====================================================================
===================================================================*/


/*===========================================================================
=============================================================================
    RÈGLES GLOBALES
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

:root
{
--header-height: 78px;
        --header-height-scroll: 66px;
}

.wrapper
{
    padding-right: 24px;
    padding-left: 24px;
}

.site-logo__image
{
height: 52px;
}

.site-header.is-scrolled
    .site-logo__image
{
height: 44px;
}

.nav-toggle
{
display: flex;
}

.main-nav
{
display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: calc(var(--z-header) - 1);
		inset: 0;
		width: 100%;
		height: 100dvh;
		min-height: 100dvh;
		padding:
			calc(var(--header-height) + var(--space-xl))
			var(--space-lg)
			var(--space-xl);
		background: rgba(10, 13, 18, .97);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-18px);
		transition:
			opacity var(--transition),
			visibility var(--transition),
			transform var(--transition);
}

.main-nav.is-open
{
opacity: 1;
        visibility: visible;
        transform: translateY(0);
}

.main-nav__list
{
flex-direction: column;
        gap: var(--space-lg);
}

.main-nav__link
{
align-items: center;
        font-size: 1.35rem;
}

.main-nav__link::before
{
left: 50%;
        transform:
            translateX(-50%)
            scale(.65);
}

.main-nav__link:hover::before,
    .main-nav__link:focus-visible::before,
    .main-nav__link.is-active::before
{
transform:
            translateX(-50%)
            scale(1);
}

body.nav-is-open
{
overflow: hidden;
}

body.nav-is-open .site-header
{
height: var(--header-height);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
}

.page-header
{
min-height: 420px;
}

.page-header__inner
{
min-height: calc(420px - var(--header-height));
		padding-top: var(--space-xl);
		padding-bottom: var(--space-2xl);
}

.page-header__content
{
width: min(680px, 100%);
}

}


/*==================================================
    PETITES TABLETTES ET MOBILES
==================================================*/


@media (max-width: 700px)
{

.wrapper
{
    padding-right: 18px;
    padding-left: 18px;
}

.section
{
padding:
			var(--space-3xl)
			0;
}

.section-heading
{
margin-bottom: var(--space-xl);
}

.page-header
{
min-height: 380px;
}

.page-header__inner
{
min-height: calc(380px - var(--header-height));
		padding-top: var(--space-xl);
		padding-bottom: var(--space-2xl);
}

.page-header__title
{
font-size: clamp(2.4rem, 12vw, 3.8rem);
}

.page-header__subtitle
{
font-size: 1rem;
		line-height: 1.7;
}

.page-header__line
{
width: 72px;
}

.site-footer__legal-links
{
align-items: flex-end;
		flex-direction: column;
		gap: var(--space-sm);
}

}


/*===========================================================================
=============================================================================
    PAGE ACCUEIL
=============================================================================
===========================================================================*/


/*==================================================
    HERO - ÉCRANS INTERMÉDIAIRES
==================================================*/


@media (max-width: 1200px)
{
    .hero__inner
    {
        padding-right: 48px;
        padding-left: 48px;
    }

    .hero__content
    {
        width: min(480px, 44vw);
    }

    .hero__logo
    {
        width: min(100%, 440px);
        margin-left: -28px;
    }

    .hero__background
    {
        background-position: center, center, 57% 42%;
    }
}


/*==================================================
    HERO - TABLETTES
==================================================*/


@media (max-width: 900px)
{

.hero
{
min-height: 100svh;
}

.hero__inner
{
min-height: calc(100svh - var(--header-height));
        padding-right: 32px;
        padding-left: 32px;
}

.hero__content
{
width: min(500px, 62%);
}

.hero__logo
{
width: min(100%, 420px);
        margin-left: -22px;
}

.hero__background
{
background-image:
            linear-gradient(
                90deg,
                rgba(5, 8, 12, .96) 0%,
                rgba(5, 8, 12, .90) 28%,
                rgba(5, 8, 12, .63) 52%,
                rgba(5, 8, 12, .18) 78%,
                rgba(5, 8, 12, .08) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5, 8, 12, .08) 0%,
                rgba(5, 8, 12, .03) 52%,
                rgba(5, 8, 12, .82) 100%
            ),
            url("../images/hero.jpg");
        background-position: center, center, 61% center;
}

.presentation-grid
{
grid-template-columns: 1fr;
		gap: var(--space-2xl);
}

.presentation-grid__content
{
max-width: 680px;
}

.presentation-grid__visual
{
width: min(100%, 760px);
		margin-left: auto;
}

.listen-layout
{
grid-template-columns: 1fr;
		gap: var(--space-xl);
}

.listen-layout__content
{
max-width: 680px;
}

.listen-visual
{
min-height: 300px;
}

.featured-video
{
grid-template-columns: 1fr;
}

.featured-video__content
{
max-width: 680px;
}

.contact-preview
{
align-items: flex-start;
		flex-direction: column;
}

}


/*==================================================
    HERO - MOBILES
==================================================*/


@media (max-width: 700px)
{

.hero
{
align-items: flex-end;
        min-height: 100svh;
}

.hero__inner
{
align-items: flex-end;
        min-height: 100svh;
        padding: calc(var(--header-height) + var(--space-xl)) 20px var(--space-3xl);
}

.hero__content
{
width: 100%;
        max-width: 520px;
}

.hero__logo
{
width: min(88%, 380px);
        margin-bottom: var(--space-lg);
        margin-left: -16px;
}

.hero__tagline
{
font-size: .92rem;
}

.hero__introduction
{
max-width: 460px;
        font-size: 1rem;
        line-height: 1.75;
}

.hero__actions
{
align-items: stretch;
        flex-direction: column;
        width: min(100%, 320px);
}

.hero__background
{
background-image:
			linear-gradient(
				180deg,
				rgba(5, 8, 12, .18) 0%,
				rgba(5, 8, 12, .22) 36%,
				rgba(5, 8, 12, .76) 68%,
				rgba(5, 8, 12, .98) 100%
			),
			url("../images/hero.jpg");

		background-repeat: no-repeat;

		background-position:
			center,
			center -25px;

		background-size:
			cover,
			100% auto;

		background-color: var(--color-bg);
}

.hero__scroll
{
display: none;
}

.section
{
padding: var(--space-3xl) 0;
}

.section-heading
{
margin-bottom: var(--space-xl);
}

.presentation-grid__visual::before
{
top: -12px;
		right: -12px;
}

.listen-layout__actions
{
align-items: flex-start;
		flex-direction: column;
}

.listen-visual
{
min-height: 250px;
}

.listen-visual__orbit--one
{
width: 230px;
		height: 230px;
}

.listen-visual__orbit--two
{
width: 165px;
		height: 165px;
}

.contact-preview
{
padding: var(--space-xl) var(--space-lg);
}

.site-footer__bottom
{
align-items: center;
		flex-direction: column;
		gap: var(--space-md);
		text-align: center;
}

}


/*==================================================
    HERO - TÉLÉPHONES EN MODE PAYSAGE
==================================================*/


@media (max-width: 1100px) and (max-height: 700px) and (orientation: landscape)
{
    .hero
    {
        align-items: flex-end;
        min-height: 100svh;
    }

    .hero__inner
    {
        align-items: flex-end;
        min-height: 100svh;
        padding:
            calc(var(--header-height) + var(--space-lg))
            28px
            var(--space-xl);
    }

	.hero__background
	{
		transform: none !important;

		background-image:
			linear-gradient(
				90deg,
				rgba(5, 8, 12, .86) 0%,
				rgba(5, 8, 12, .58) 32%,
				rgba(5, 8, 12, .14) 66%,
				rgba(5, 8, 12, .04) 100%
			),
			linear-gradient(
				180deg,
				rgba(5, 8, 12, .08) 0%,
				rgba(5, 8, 12, .14) 55%,
				rgba(5, 8, 12, .88) 100%
			),
			url("../images/hero.jpg");

		background-repeat: no-repeat;

		background-position:
			center,
			center,
			center top;

		background-size:
			cover,
			cover,
			100% auto;
	}

    .hero__content
    {
        width: min(380px, 48%);
    }

    .hero__logo
    {
        width: min(100%, 300px);
        margin-bottom: var(--space-md);
        margin-left: -12px;
    }

    .hero__introduction
    {
        line-height: 1.5;
    }

    .hero__actions
    {
        align-items: flex-start;
        flex-direction: row;
        width: auto;
    }

    .hero__scroll
    {
        display: none;
    }
}


/*==================================================
    HERO - TABLETTES EN MODE PORTRAIT
==================================================*/


@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait)
{
    .hero
    {
        display: block;
        min-height: 0;
    }

    .hero__inner
    {
        align-items: flex-start;
        min-height: 0;
        padding:
            calc(61.72vw + var(--space-xl))
            40px
            var(--space-3xl);
    }

    .hero__background
    {
        transform: none !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(5, 8, 12, .16) 0%,
                rgba(5, 8, 12, .20) 35%,
                rgba(5, 8, 12, .72) 64%,
                rgba(5, 8, 12, .98) 100%
            ),
            url("../images/hero.jpg");

        background-repeat: no-repeat;

        background-position:
            center,
            center top;

        background-size:
            cover,
            100% auto;

        background-color: var(--color-bg);
    }

    .hero__content
    {
        width: min(520px, 100%);
    }

    .hero__logo
    {
        width: min(100%, 400px);
        margin-left: -18px;
    }

    .hero__actions
    {
        align-items: flex-start;
        flex-direction: row;
        width: auto;
    }

    .hero__scroll
    {
        display: none;
    }
}


/*===========================================================================
=============================================================================
    PAGE GROUPE
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

.group-introduction__grid
{
grid-template-columns: 1fr;
		gap: var(--space-2xl);
}

.group-introduction__content
{
max-width: 680px;
}

.group-introduction__visual
{
width: min(100%, 760px);
		margin-left: auto;
}

.group-story__layout
{
grid-template-columns: 1fr;
		gap: var(--space-xl);
}

.group-members__grid
{
grid-template-columns: 1fr;
}

.member-card
{
grid-template-columns: minmax(190px, 36%) minmax(0, 1fr);
		min-height: 300px;
}

.member-card__photo
{
min-height: 300px;
}

}


/*==================================================
    MOBILES
==================================================*/


@media (max-width: 700px)
{

.group-introduction__visual::before
{
top: -12px;
		left: -12px;
}

.member-card
{
grid-template-columns: 1fr;
		min-height: 0;
}

.member-card__photo
{
min-height: 0;
		aspect-ratio: 4 / 3;
		border-right: 0;
		border-bottom: 1px solid rgba(199, 119, 46, .28);
}

.member-card__content
{
padding: var(--space-lg);
}

.group-quote
{
padding: var(--space-2xl) 0;
}

.group-quote__content
{
padding: var(--space-xl) var(--space-lg);
}

.group-quote__mark
{
height: 42px;
		font-size: 4.5rem;
}

.group-quote p
{
max-width: 100%;
		font-size: clamp(1.65rem, 8vw, 2.5rem);
}

}


/*===========================================================================
=============================================================================
    PAGE ÉCOUTER
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

.music-player
{
grid-template-columns: 1fr;
		width: min(100%, 760px);
}

.music-player__information
{
min-height: 230px;
}

.track-list-section__layout,
	.music-platforms__layout
{
grid-template-columns: 1fr;
		gap: var(--space-xl);
}

.music-platforms__links
{
padding-left: 0;
}

}


/*==================================================
    MOBILES
==================================================*/


@media (max-width: 700px)
{

.listen-page,
	.music-player-section,
	.track-list-section,
	.music-platforms
{
padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
}

.music-player
{
grid-template-columns: 1fr;
		width: min(100%, 760px);
}

.music-player__information
{
padding: var(--space-xl) var(--space-lg);
		min-height: 230px;
}

.music-player__media:has(.music-player__placeholder:not(.is-hidden))
{
min-height: 360px;
		aspect-ratio: auto;
}

.music-player__visual
{
width: 190px;
		height: 150px;
}

.music-player__orbit--one
{
width: 165px;
		height: 165px;
}

.music-player__orbit--two
{
width: 120px;
		height: 120px;
}

.music-player__placeholder
{
gap: var(--space-md);
		padding: var(--space-lg);
}

.track-list__button
{
grid-template-columns: 34px minmax(0, 1fr) 48px;
		gap: var(--space-sm);
}

.track-list__action
{
display: none;
}

.music-platforms__link
{
align-items: flex-start;
		flex-direction: column;
		gap: 4px;
}

.music-platforms__name
{
flex-basis: auto;
}

}


/*===========================================================================
=============================================================================
    PAGE VIDÉOS
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

.video-feature__card
{
grid-template-columns: 1fr;
}

.video-feature__content
{
padding: var(--space-xl);
}

.video-selection__grid
{
grid-template-columns: 1fr;
}

.video-card
{
width: min(100%, 760px);
}

.video-channel__inner
{
align-items: flex-start;
		flex-direction: column;
}

}


/*==================================================
    MOBILES
==================================================*/


@media (max-width: 700px)
{

.video-feature,
	.video-selection,
	.video-channel
{
padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
}

.video-feature__heading
{
margin-bottom: var(--space-xl);
}

.video-feature__content,
	.video-card__content
{
padding: var(--space-lg);
}

.video-play
{
width: 62px;
		height: 62px;
}

.video-play--small
{
width: 52px;
		height: 52px;
}

.video-card__content > p:not(.video-category)
{
min-height: 0;
}

.video-channel__action,
	.video-channel__action .btn
{
width: 100%;
}

}


/*===========================================================================
=============================================================================
    PAGE GOODIES
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

.ringtone-card
{
grid-template-columns: minmax(240px, 1fr) 80px 180px;
		column-gap: var(--space-md);
}

}


/*==================================================
    MOBILES
==================================================*/


@media (max-width: 700px)
{

.goodies-page,
	.ringtones-section,
	.goodies-note
{
padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
}

.ringtone-card
{
grid-template-columns: 1fr;
		gap: var(--space-lg);
		padding: var(--space-lg);
}

.ringtone-card__player audio
{
min-width: 0;
}

.ringtone-card__action
{
grid-column: auto;
		justify-content: stretch;
}

.ringtone-card__download
{
width: 100%;
}

}


/*===========================================================================
=============================================================================
    PAGE CONTACT
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

.contact-page__grid
{
grid-template-columns: 1fr;
		gap: var(--space-2xl);
}

.contact-page__content
{
max-width: 680px;
}

.contact-card
{
width: min(100%, 680px);
}

.contact-social__layout
{
grid-template-columns: 1fr;
		gap: var(--space-xl);
}

.contact-social__content
{
max-width: 680px;
}

.contact-page__title
{
white-space: normal;
}

}


/*==================================================
    MOBILES
==================================================*/


@media (max-width: 700px)
{

.contact-page,
	.contact-social
{
padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
}

.contact-page__title
{
margin-bottom: var(--space-lg);
}

.contact-card
{
padding: var(--space-xl) var(--space-lg);
}

.contact-card__button
{
width: 100%;
}

.contact-card__email
{
font-size: clamp(.95rem, 4.6vw, 1.25rem);
}

.contact-social__link
{
align-items: flex-start;
		flex-direction: column;
		gap: 4px;
}

.contact-social__link:hover,
	.contact-social__link:focus-visible
{
padding-right: 0;
		padding-left: 0;
		background: transparent;
}

}


/*===========================================================================
=============================================================================
    PAGE MENTIONS LÉGALES
=============================================================================
===========================================================================*/


/*==================================================
    TABLETTES
==================================================*/


@media (max-width: 900px)
{

.legal-section
{
grid-template-columns: minmax(190px, .5fr) minmax(0, 1.5fr);
		gap: var(--space-xl);
}

}


/*==================================================
    MOBILES
==================================================*/


@media (max-width: 700px)
{

.legal-page
{
padding-top: var(--space-2xl);
		padding-bottom: var(--space-2xl);
}

.legal-page__layout
{
width: min(calc(100% - 40px), 980px);
}

.legal-page__heading
{
margin-bottom: var(--space-xl);
}

.legal-section
{
grid-template-columns: 1fr;
		gap: var(--space-md);
		padding: var(--space-xl) 0;
}

.legal-section h2
{
font-size: 1.2rem;
}

.legal-thanks
{
margin-top: var(--space-2xl);
}

}