/*===========================================================================
=============================================================================
    STYLES SPÉCIFIQUES AUX PAGES
=============================================================================
===========================================================================*/


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

/*==================================================
    HERO
==================================================*/

.hero
{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-top: var(--header-height);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg);
}


/*==================================================
    FOND DU HERO (le voile sombre)
==================================================*/

.hero__background
{
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(
			90deg,
			rgba(5, 8, 12, .96) 0%,
			rgba(5, 8, 12, .90) 14%,
			rgba(5, 8, 12, .68) 24%,
			rgba(5, 8, 12, .30) 36%,
			rgba(5, 8, 12, .08) 48%,
			rgba(5, 8, 12, .00) 62%
		),
        linear-gradient(
            180deg,
            rgba(5, 8, 12, .08) 0%,
            rgba(5, 8, 12, .02) 54%,
            rgba(5, 8, 12, .78) 100%
        ),
        url("../images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center, center, 54% 42%;  /* réglage principal du placement du voile sombre */ 
    background-size: cover, cover, cover;
    transform: scale(1.025);
    transform-origin: center;
    will-change: transform;
}


/*==================================================
    CONTENEUR DU HERO
==================================================*/

.hero__inner
{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(100svh - var(--header-height));
    margin: 0;
    padding: var(--space-2xl) clamp(40px, 5vw, 104px);
}


/*==================================================
    CONTENU DU HERO
==================================================*/

.hero__content
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(500px, 38vw);
    margin-right: auto;
    margin-left: 0;
}


/*==================================================
    LOGO DU HERO
==================================================*/

.hero__logo
{
    display: block;
    width: min(100%, 470px);
    height: auto;
    margin: 0 0 var(--space-xl) -36px;  /* réglage de la position du logo plus ou moins à gauche */
    opacity: .96;
    filter: brightness(0) invert(1);
}


/*==================================================
    TEXTE DU HERO
==================================================*/

.hero__tagline
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-md);
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
}

.hero__tagline span
{
    color: var(--color-highlight);
    text-shadow: 0 0 12px rgba(77, 141, 232, .65);
}

.hero__introduction
{
    max-width: 500px;
    margin-bottom: var(--space-xl);
    color: rgba(236, 236, 236, .82);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.9;
}


/*==================================================
    ACTIONS DU HERO
==================================================*/

.hero__actions
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/*==================================================
    DÉFILEMENT DU HERO
==================================================*/

.hero__scroll
{
    position: absolute;
    z-index: 3;
    bottom: var(--space-lg);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(236, 236, 236, .62);
    font-family: var(--font-title);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hero__scroll:hover
{
    color: var(--color-text);
}

.hero__scroll-line
{
    position: relative;
    display: block;
    width: 1px;
    height: 38px;
    overflow: hidden;
    background: rgba(236, 236, 236, .18);
}

.hero__scroll-line::after
{
    content: "";
    position: absolute;
    top: -100%;
    right: 0;
    left: 0;
    height: 100%;
    background: var(--color-accent);
    animation: hero-scroll-indicator 2s ease-in-out infinite;
}




/*==================================================
    PRÉSENTATION
==================================================*/

.section--presentation
{
    position: relative;
}

.presentation-grid
{
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
    align-items: center;
    gap: clamp(var(--space-xl), 7vw, var(--space-4xl));
}

.presentation-grid__content p + p
{
    margin-top: var(--space-md);
}

.presentation-grid__visual
{
    position: relative;
    margin: 0;
}

.presentation-grid__visual::before
{
    content: "";
    position: absolute;
    z-index: -1;
    top: -24px;
    right: -24px;
    width: 58%;
    height: 58%;
    border-top: 1px solid rgba(199, 119, 46, .45);
    border-right: 1px solid rgba(199, 119, 46, .45);
}

.presentation-grid__visual img
{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.05) brightness(.88);
    box-shadow: var(--shadow-soft);
}

.presentation-grid__visual figcaption
{
    margin-top: 12px;
    color: rgba(166, 175, 187, .72);
    font-size: .75rem;
    letter-spacing: .12em;
    text-align: right;
    text-transform: uppercase;
}


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

.section--listen
{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(24, 30, 39, .92), rgba(13, 17, 23, .96));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.listen-pattern
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 14% 24%, rgba(77, 141, 232, .65) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 68%, rgba(77, 141, 232, .45) 0 1px, transparent 2px),
        linear-gradient(115deg, transparent 31%, rgba(199, 119, 46, .22) 31.1%, transparent 31.3%);
}

.listen-layout
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    align-items: center;
    gap: var(--space-4xl);
}

.listen-layout__content p + p
{
    margin-top: var(--space-md);
}

.listen-layout__actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-xl);
    margin-top: var(--space-xl);
}

.listen-layout__actions .text-link
{
    margin-top: 0;
}

.listen-visual
{
    position: relative;
    display: grid;
    place-items: center;
    min-height: 390px;
}

.listen-visual__orbit
{
    position: absolute;
    border: 1px solid rgba(199, 119, 46, .28);
    border-radius: 50%;
}

.listen-visual__orbit--one
{
    width: 290px;
    height: 290px;
    transform: rotate(-18deg) scaleY(.52);
}

.listen-visual__orbit--two
{
    width: 210px;
    height: 210px;
    border-color: rgba(77, 141, 232, .3);
    transform: rotate(42deg) scaleY(.68);
}

.listen-visual__axis
{
    position: absolute;
    width: 72%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    transform: rotate(-28deg);
}

.listen-visual__core
{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 32px rgba(77, 141, 232, .52);
}


/*==================================================
    VIDÉO MISE EN AVANT
==================================================*/

.featured-video
{
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    align-items: center;
    gap: clamp(var(--space-xl), 6vw, var(--space-4xl));
}

.featured-video__media
{
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.featured-video__media iframe,
.featured-video__media > img
{
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.featured-video__media > img
{
    filter: brightness(.48) contrast(1.1);
}

.featured-video__placeholder
{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    text-align: center;
}

.featured-video__play
{
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding-left: 5px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background: rgba(16, 20, 27, .62);
    color: var(--color-text);
    box-shadow: 0 0 0 8px rgba(199, 119, 46, .06);
    transition: var(--transition);
}

.featured-video__placeholder:hover .featured-video__play
{
    background: rgba(199, 119, 46, .2);
    box-shadow: 0 0 0 12px rgba(199, 119, 46, .08);
    transform: scale(1.06);
}

.featured-video__placeholder-text
{
    color: rgba(236, 236, 236, .84);
    font-family: var(--font-title);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.featured-video__eyebrow
{
    margin-bottom: var(--space-sm);
    color: var(--color-highlight);
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.featured-video__content h3
{
    margin-bottom: var(--space-lg);
    font-size: clamp(1.75rem, 2.6vw, 2.6rem);
    font-weight: 400;
    line-height: 1.25;
}


/*==================================================
    CONTACT ET PROGRAMMATION
==================================================*/

.section--contact-preview
{
    padding-top: var(--space-3xl);
}

.contact-preview
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
    overflow: hidden;
    background: linear-gradient(120deg, rgba(24, 30, 39, .95), rgba(16, 20, 27, .98));
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: var(--shadow-soft);
}

.contact-preview::after
{
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(77, 141, 232, .12);
    border-radius: 50%;
}

.contact-preview__content
{
    position: relative;
    z-index: 1;
}

.contact-preview__signature
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-md);
}

.contact-preview__dot
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 10px rgba(77, 141, 232, .55);
}

.contact-preview__line
{
    width: 72px;
    height: 1px;
    background: var(--color-accent);
}

.contact-preview__eyebrow
{
    margin-bottom: var(--space-sm);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.contact-preview h2
{
    max-width: 700px;
    margin-bottom: var(--space-md);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 400;
    line-height: 1.15;
}

.contact-preview__action
{
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}


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


/*==================================================
    TEXTE ÉDITORIAL
==================================================*/

.editorial-text
{
    position: relative;
}

.editorial-text p
{
    position: relative;
}

.editorial-text p:first-child
{
    padding-left: 0;
}

.editorial-text p:first-child::before
{
    display: none;
}

.editorial-text p + p
{
   margin-top: var(--space-lg);
}


/* pour renforcer la première phrase (deux paramètres suivants)*/
.editorial-text .section-introduction
{
    padding-left: 0;
    margin-bottom: var(--space-lg);
}

.editorial-text .section-introduction::before
{
    display: none;
}


/*==================================================
    PREMIÈRE LETTRE ÉDITORIALE
==================================================*/

.editorial-first-letter p:first-child::first-letter
{
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: 1.35em;
    font-weight: 500;
}


/*==================================================
    PAGE GROUPE - INTRODUCTION
==================================================*/

.group-introduction__grid
{
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
    align-items: center;
    gap: clamp(var(--space-xl), 7vw, var(--space-4xl));
}

.group-introduction__content p + p
{
    margin-top: var(--space-md);
}

.group-introduction__visual
{
    position: relative;
    margin: 0;
}

.group-introduction__visual::before
{
    content: "";
    position: absolute;
    z-index: -1;
    top: -24px;
    left: -24px;
    width: 58%;
    height: 58%;
    border-top: 1px solid rgba(199, 119, 46, .45);
    border-left: 1px solid rgba(199, 119, 46, .45);
}

.group-introduction__visual img
{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.05) brightness(.88);
    box-shadow: var(--shadow-soft);
}


/*==================================================
    PAGE GROUPE - une creation collective
==================================================*/

.group-story
{
    position: relative;
    overflow: hidden;
    padding: var(--space-2xl) 0;
    background: linear-gradient(135deg, rgba(24, 30, 39, .9), rgba(13, 17, 23, .98));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.group-story__pattern
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 15% 28%, rgba(77, 141, 232, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 65%, rgba(236, 236, 236, .4) 0 1px, transparent 2px),
        linear-gradient(118deg, transparent 44%, rgba(199, 119, 46, .18) 44.1%, transparent 44.3%);
}


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

.group-story__content
{
    max-width: 760px;
    margin: 0 auto;
	padding-top: var(--space-md);
}

.group-story__content p + p
{
    margin-top: var(--space-lg);
}


/*==================================================
    PAGE GROUPE - CITATION
==================================================*/

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

.group-quote__content
{
    width: min(820px, 100%);
    margin: 0 auto;
	margin-bottom: var(--space-lg);
    text-align: center;
}

.group-quote__signature
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: var(--space-md) 0;
}

.group-quote__line
{
    width: 72px;
    height: 1px;
    background: var(--color-accent);
}

.group-quote__dot
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 12px rgba(77, 141, 232, .6);
}

.group-quote p
{
    margin: var(--space-xl) 0;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 300;
    line-height: 1.7;
}


/*==================================================
    PAGE GROUPE - MUSICIENS
==================================================*/

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

.member-card
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    align-items: stretch;
    min-height: 320px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(24, 30, 39, .92), rgba(15, 19, 26, .98));
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: var(--shadow-soft);
}

.member-card::after
{
    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(77, 141, 232, .08);
    border-radius: 50%;
}

.member-card__photo
{
    position: relative;
    z-index: 1;
    min-height: 320px;
    overflow: hidden;
    background: var(--color-surface);
    border-right: 1px solid rgba(199, 119, 46, .28);
}

.member-card__photo img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: saturate(.82) contrast(1.05) brightness(.9);
    transition: var(--transition);
}

.member-card:hover .member-card__photo img
{
    filter: saturate(1) contrast(1.05) brightness(1);
    transform: scale(1.025);
}

.member-card__content
{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.member-card__number
{
    margin-bottom: var(--space-sm);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .75rem;
    letter-spacing: .16em;
}

.member-card h3
{
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 400;
}

.member-card__role
{
    margin-bottom: var(--space-lg);
    color: var(--color-highlight);
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.member-card__content > p:last-child
{
    max-width: 58ch;
    font-size: 1rem;
    line-height: 1.8;
}


/*==================================================
    PAGE GROUPE - RYTHME VERTICAL
==================================================*/

.group-introduction,
.group-members
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-xl);
}

.group-introduction .section-heading,
.group-story .section-heading,
.group-members .section-heading
{
    margin-bottom: var(--space-lg);
}


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


/*==================================================
    PAGE ÉCOUTER - INTRODUCTION
==================================================*/

.listen-page
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.listen-page__introduction
{
    max-width: 760px;
}

.listen-page__introduction > p + p
{
    margin-top: var(--space-lg);
}

.listen-page__introduction .section-heading__signature
{
    margin-bottom: var(--space-lg);
}


/*==================================================
    PAGE ÉCOUTER - LECTEUR
==================================================*/

.music-player-section
{
    position: relative;
    overflow: hidden;
    padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
    background: linear-gradient(135deg, rgba(24, 30, 39, .92), rgba(13, 17, 23, .98));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.music-player-section__pattern
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 14% 24%, rgba(77, 141, 232, .65) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 68%, rgba(77, 141, 232, .45) 0 1px, transparent 2px),
        linear-gradient(115deg, transparent 31%, rgba(199, 119, 46, .22) 31.1%, transparent 31.3%);
}

.music-player
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
    width: min(100%, 920px);
    margin: 0 auto;
    overflow: hidden;
    background: rgba(11, 14, 19, .86);
    border: 1px solid rgba(255, 255, 255, .07);
    border-top-color: rgba(199, 119, 46, .4);
    box-shadow: var(--shadow-soft);
}

.music-player__media
{
    position: relative;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: #090c11;
}

.music-player__placeholder
{
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    text-align: center;
    background: linear-gradient(145deg, #121821, #090c11);
    transition: opacity .4s ease, visibility .4s ease;
}

.music-player__placeholder.is-hidden
{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.music-player__visual
{
    position: relative;
    display: grid;
    place-items: center;
    width: 240px;
    height: 180px;
}

.music-player__orbit
{
    position: absolute;
    border: 1px solid rgba(199, 119, 46, .34);
    border-radius: 50%;
}

.music-player__orbit--one
{
    width: 210px;
    height: 210px;
    transform: rotate(-18deg) scaleY(.46);
}

.music-player__orbit--two
{
    width: 150px;
    height: 150px;
    border-color: rgba(77, 141, 232, .32);
    transform: rotate(42deg) scaleY(.66);
}

.music-player__core
{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 28px rgba(77, 141, 232, .5);
}

.music-player__start
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 14px 26px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: .9rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.music-player__start:hover,
.music-player__start:focus-visible
{
    background: rgba(199, 119, 46, .12);
    transform: translateY(-2px);
}

.music-player__start-icon
{
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--color-highlight);
}

.music-player__placeholder p
{
    font-size: .85rem;
}

.music-player__youtube
{
    position: absolute;
    inset: 0;
}

.music-player__youtube iframe
{
    width: 100%;
    height: 100%;
    border: 0;
}

.music-player__information
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

.music-player__eyebrow
{
    margin-bottom: var(--space-md);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.music-player__current-title
{
    margin-bottom: var(--space-lg);
    color: var(--color-text);
    font-size: clamp(1.8rem, 2.4vw, 2.7rem);
    font-weight: 400;
    line-height: 1.2;
}

.music-player__controls
{
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.music-player__control
{
    display: grid;
    place-items: center;
	width: 42px;
	height: 42px;
    border: 1px solid rgba(236, 236, 236, .18);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.music-player__control:hover,
.music-player__control:focus-visible
{
    border-color: var(--color-accent);
    background: rgba(199, 119, 46, .1);
}

.music-player__control--main
{
    width: 52px;
	height: 52px;
    border-color: var(--color-accent);
    color: var(--color-highlight);
    font-size: 1.2rem;
}

.music-player__notice
{
    margin-top: var(--space-xl);
    font-size: .82rem;
}


/*==================================================
    PAGE ÉCOUTER - LISTE
==================================================*/

.track-list-section
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.track-list-section__layout
{
    display: grid;
    grid-template-columns: minmax(240px, .45fr) minmax(0, 1.55fr);
    align-items: start;
    gap: clamp(var(--space-xl), 6vw, var(--space-4xl));
}

.track-list-section__heading p
{
    margin-top: var(--space-lg);
}

.track-list
{
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.track-list__item
{
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.track-list__button
{
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 62px;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: calc(var(--space-lg) + 4px) 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: padding var(--transition), background-color var(--transition);
}

.track-list__button:hover,
.track-list__button:focus-visible
{
    padding-right: 8px;
    padding-left: 8px;
    background: rgba(255, 255, 255, .025);
}

.track-list__number
{
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .76rem;
    letter-spacing: .14em;
}

.track-list__title
{
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.track-list__duration
{
    color: var(--color-text-muted);
    font-size: .85rem;
    text-align: right;
}

.track-list__action
{
    display: none;
}

.track-list__item.is-active .track-list__title
{
    color: var(--color-highlight);
}


/*==================================================
    PAGE ÉCOUTER - PLATEFORMES
==================================================*/

.music-platforms
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    background: linear-gradient(135deg, rgba(24, 30, 39, .9), rgba(13, 17, 23, .98));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.music-platforms__layout
{
    display: grid;
    grid-template-columns: minmax(280px, .65fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.music-platforms__content p
{
    margin-top: var(--space-lg);
}

.music-platforms__links
{
    display: grid;
    padding-left: var(--space-lg);
}

.music-platforms__link
{
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.music-platforms__link:first-child
{
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.music-platforms__name
{
    flex: 0 0 180px;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.music-platforms__action
{
    color: var(--color-text-muted);
    font-size: .9rem;
}

.music-platforms__action span
{
    margin-left: 6px;
    color: var(--color-accent);
}


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


/*==================================================
    PAGE VIDÉOS - VIDÉO MISE EN AVANT
==================================================*/

.video-feature
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.video-feature__heading
{
    max-width: 760px;
    margin-bottom: var(--space-2xl);
}

.video-feature__card
{
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(24, 30, 39, .94), rgba(13, 17, 23, .99));
    border: 1px solid rgba(255, 255, 255, .07);
    border-top-color: rgba(199, 119, 46, .4);
    box-shadow: var(--shadow-soft);
}

.video-feature__media
{
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #090c11;
    isolation: isolate;
}

.video-feature__media img
{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.video-feature__media:hover .video-embed__start img
{
    filter: brightness(.86) contrast(1.05);
    transform: scale(1.025);
}

.video-feature__content
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.video-feature__title
{
    margin-bottom: var(--space-lg);
    color: var(--color-text);
    font-size: clamp(2rem, 3vw, 3.3rem);
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.15;
}

.video-feature__content .text-link
{
    align-self: flex-start;
}

.video-feature .text-link,
.video-selection .text-link
{
    text-transform: none;
}


/*==================================================
    PAGE VIDÉOS - lecteur
==================================================*/

.video-embed__start
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.video-embed__start img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-embed iframe
{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/*==================================================
    PAGE VIDÉOS - BOUTON DE LECTURE
==================================================*/

.video-play
{
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background: rgba(9, 12, 17, .76);
    box-shadow: 0 0 0 10px rgba(199, 119, 46, .07);
    transform: translate(-50%, -50%);
    transition: var(--transition);
}

.video-play__icon
{
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid var(--color-highlight);
}

.video-feature__media:hover .video-play,
.video-card__media:hover .video-play
{
    background: rgba(199, 119, 46, .18);
    box-shadow: 0 0 0 14px rgba(199, 119, 46, .08);
    transform: translate(-50%, -50%) scale(1.06);
}

.video-play--small
{
    width: 58px;
    height: 58px;
    box-shadow: 0 0 0 7px rgba(199, 119, 46, .07);
}

.video-play--small .video-play__icon
{
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 10px;
}


/*==================================================
    PAGE VIDÉOS - CATÉGORIES
==================================================*/


.video-category
{
    margin-bottom: var(--space-lg);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}


/*==================================================
    PAGE VIDÉOS - SÉLECTION
==================================================*/

.video-selection
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    background: linear-gradient(135deg, rgba(24, 30, 39, .9), rgba(13, 17, 23, .98));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.video-selection__grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
}

.video-card
{
    overflow: hidden;
    background: rgba(11, 14, 19, .74);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: var(--shadow-soft);
}

.video-card__media
{
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #090c11;
}

.video-card__media img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.7) contrast(1.08);
    transition: var(--transition);
}

.video-card__media:hover .video-embed__start img
{
    filter: brightness(.86) contrast(1.05);
    transform: scale(1.025);
}

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

.video-card h3
{
    margin-bottom: var(--space-md);
    color: var(--color-text);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.25;
}

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

.video-card__content .text-link
{
    margin-top: var(--space-lg);
}


/*==================================================
    PAGE VIDÉOS - CHAÎNE YOUTUBE
==================================================*/

.video-channel
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.video-channel__inner
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
    overflow: hidden;
    background: linear-gradient(120deg, rgba(24, 30, 39, .95), rgba(16, 20, 27, .98));
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: var(--shadow-soft);
}

.video-channel__inner::after
{
    content: "";
    position: absolute;
    top: -170px;
    right: -110px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(77, 141, 232, .11);
    border-radius: 50%;
}

.video-channel__content
{
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.video-channel__eyebrow
{
    margin-bottom: var(--space-sm);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.video-channel h2
{
    margin-bottom: var(--space-md);
    color: var(--color-text);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
}

.video-channel__action
{
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}


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


/*==================================================
    PAGE GOODIES - INTRODUCTION
==================================================*/

.goodies-page
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.goodies-page__introduction
{
    max-width: 760px;
}

.goodies-page__introduction .section-heading__signature
{
    margin-bottom: var(--space-lg);
}

.goodies-page__introduction > p + p
{
    margin-top: var(--space-lg);
}


/*==================================================
    PAGE GOODIES - SONNERIES
==================================================*/

.ringtones-section
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    background: linear-gradient(135deg, rgba(24, 30, 39, .9), rgba(13, 17, 23, .98));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.ringtones-list
{
    display: grid;
    gap: var(--space-lg);
	width: min(100%, 980px);
    margin: 0 auto;
}

.ringtone-card
{
    display: grid;
	grid-template-columns: minmax(280px, 420px) 90px 190px;
	justify-content: space-between;
	column-gap: var(--space-lg);
    align-items: center;
	padding: var(--space-lg) var(--space-xl);
    background: rgba(11, 14, 19, .72);
    border: 1px solid rgba(255, 255, 255, .07);
    border-left-color: rgba(199, 119, 46, .5);
    box-shadow: var(--shadow-soft);
}

.ringtone-card__information
{
    display: flex;
    align-items: center;
}


.ringtone-card__title
{
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.2;
}

.ringtone-card__details
{
    font-size: .82rem;
}


.ringtone-card__player
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.ringtone-card__action
{
    display: flex;
	align-items: center;
    justify-content: center;
}

.ringtone-card__audio
{
    display: none;
}

.ringtone-card__play
{
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--color-highlight);
    cursor: pointer;
    transition: var(--transition);
}

.ringtone-card__play:hover,
.ringtone-card__play:focus-visible
{
    background: rgba(199, 119, 46, .12);
    box-shadow: 0 0 0 8px rgba(199, 119, 46, .06);
    transform: scale(1.05);
}

.ringtone-card__play.is-playing
{
    background: rgba(199, 119, 46, .14);
}

.ringtone-card__play-icon
{
    display: block;
    margin-left: 3px;
    font-size: 1rem;
    line-height: 1;
}

.ringtone-card__play.is-playing .ringtone-card__play-icon
{
    margin-left: 0;
}

.ringtone-card__download
{
    min-width: 170px;
	white-space: nowrap;
}

.goodies-page__empty
{
    padding: var(--space-xl);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .07);
}


/*==================================================
    PAGE GOODIES - NOTE
==================================================*/

.goodies-note
{
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.goodies-note__content
{
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.goodies-note__signature
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: var(--space-lg);
}

.goodies-note__line
{
    width: 64px;
    height: 1px;
    background: var(--color-accent);
}

.goodies-note__dot
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 12px rgba(77, 141, 232, .6);
}

.goodies-note__closing
{
    margin-top: var(--space-md);
    color: var(--color-text);
}


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


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

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

.contact-page__grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr);
    align-items: stretch;
    gap: clamp(var(--space-xl), 7vw, var(--space-4xl));
}

.contact-page__content
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 680px;
}


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

.contact-page__heading .section-heading__signature
{
    margin-bottom: var(--space-md);
}

.contact-page__title
{
    color: var(--color-text);
    font-size: clamp(2rem, 3.2vw, 3.3rem);
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.2;
    white-space: nowrap;
}

.contact-page__content > p + p
{
    margin-top: var(--space-lg);
}

.contact-page__details
{
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    list-style: none;
}

.contact-page__details li
{
    position: relative;
    padding-left: 24px;
    color: var(--color-text-muted);
}

.contact-page__details li::before
{
    content: "";
    position: absolute;
    top: .8em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 9px rgba(77, 141, 232, .5);
}


/*==================================================
    PAGE CONTACT - CARTE E-MAIL
==================================================*/

.contact-card
{
    height: 100%;
    position: relative;
    padding: clamp(var(--space-xl), 5vw, var(--space-3xl));
    overflow: hidden;
    background: linear-gradient(135deg, rgba(24, 30, 39, .96), rgba(13, 17, 23, .99));
    border: 1px solid rgba(255, 255, 255, .07);
    border-top-color: rgba(199, 119, 46, .48);
    box-shadow: var(--shadow-soft);
}

.contact-card::after
{
    content: "";
    position: absolute;
    right: -110px;
    bottom: -130px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(77, 141, 232, .1);
    border-radius: 50%;
}

.contact-card__eyebrow
{
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-md);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.contact-card__email
{
    position: relative;
    z-index: 1;
    display: inline-block;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1.15rem, 1.7vw, 1.65rem);
    line-height: 1.4;
    white-space: nowrap;
}

.contact-card__email:hover,
.contact-card__email:focus-visible
{
    color: var(--color-highlight);
}

.contact-card__text
{
    position: relative;
    z-index: 1;
    margin-top: var(--space-md);
    font-size: .9rem;
}

.contact-card__button
{
    position: relative;
    z-index: 1;
    margin-top: var(--space-xl);
}


/*==================================================
    PAGE CONTACT - RÉSEAUX
==================================================*/

.contact-social
{
    position: relative;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    background: linear-gradient(135deg, rgba(24, 30, 39, .9), rgba(13, 17, 23, .98));
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.contact-social__layout
{
    display: grid;
    grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.contact-social__content p
{
    margin-top: var(--space-lg);
}

.contact-social__links
{
    display: grid;
	padding-left: var(--space-xl);
}

.contact-social__link
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(2rem, 5vw, 5rem);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.contact-social__link:first-child
{
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.contact-social__link:hover,
.contact-social__link:focus-visible
{
    padding-right: 8px;
    padding-left: 8px;
    background: rgba(255, 255, 255, .025);
}

.contact-social__name
{
    flex: 0 0 180px;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contact-social__action
{
    color: var(--color-text-muted);
    font-size: .9rem;
}

.contact-social__action span
{
    margin-left: 6px;
    color: var(--color-accent);
}


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


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

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

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

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

.legal-page__title
{
    color: var(--color-text);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.15;
}

.legal-section
{
    display: grid;
    grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
    gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.legal-section:last-of-type
{
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.legal-section h2
{
    color: var(--color-text);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.legal-section__content
{
    max-width: 68ch;
}

.legal-section__content p + p,
.legal-section__content address + p
{
    margin-top: var(--space-md);
}

.legal-section address
{
    color: var(--color-text-muted);
    font-style: normal;
    line-height: 1.9;
}

.legal-section strong
{
    color: var(--color-text);
    font-weight: 500;
}

.legal-section a
{
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: rgba(199, 119, 46, .65);
    text-underline-offset: 4px;
}

.legal-section a:hover,
.legal-section a:focus-visible
{
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}


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

.legal-address
{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-style: normal;
}

.legal-mail
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(199, 119, 46, .35);
    border-radius: 50%;
    color: var(--color-accent);
    transition:
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}

.legal-mail svg
{
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.legal-mail:hover,
.legal-mail:focus-visible
{
    border-color: var(--color-accent);
    background: rgba(199, 119, 46, .08);
}


/*==================================================
    PAGE MENTIONS LÉGALES - CRÉDITS
==================================================*/

.legal-credits ul
{
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    list-style: none;
}

.legal-credits li
{
    color: var(--color-text-muted);
}

.legal-credits a
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legal-credits a span
{
    color: var(--color-accent);
    text-decoration: none;
}

#credits-photos
{
    scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}


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

.legal-thanks
{
    width: min(760px, 100%);
    margin: var(--space-3xl) auto 0;
    text-align: center;
}

.legal-thanks__signature
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: var(--space-lg);
}

.legal-thanks__line
{
    width: 64px;
    height: 1px;
    background: var(--color-accent);
}

.legal-thanks__dot
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 12px rgba(77, 141, 232, .6);
}

.legal-thanks p
{
    max-width: 58ch;
    margin: 0 auto;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 300;
    line-height: 1.7;
}