/*===========================================================================
=============================================================================
    STYLES GLOBAUX DU SITE
=============================================================================
===========================================================================*/


/*==================================================
    RESET
==================================================*/

*,
*::before,
*::after
{
    margin:0;
    padding:0;

    box-sizing:border-box;
}

html
{
    scroll-behavior:smooth;
}

body
{
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-text);
    font-size:16px;
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}


/*==================================================
    IMAGES
==================================================*/

img
{
    display:block;
    max-width:100%;
    height:auto;
}


/*==================================================
    LIENS
==================================================*/

a
{
    color:inherit;
    text-decoration:none;
    transition:var(--transition);
}


/*==================================================
    WRAPPER 
	Le plus utilisé du site
==================================================*/

.wrapper
{
    width: 100%;
    max-width: calc(var(--wrapper-width) + 80px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px;
    padding-left: 40px;
}

/*==================================================
    TYPOGRAPHIE
==================================================*/

h1, h2, h3
{
    font-family:var(--font-title);
    font-weight:500;
	letter-spacing:.06em;
    line-height:1.1;
}

h1
{
    font-size:clamp(3rem,5vw,5rem);
}

h2
{
    font-size:clamp(2rem,4vw,3rem);
}

h3
{
    font-size:1.5rem;
}

p
{
    max-width:70ch;  /* Largeur maximale pour conserver un confort de lecture. */ 
    color:var(--color-text-muted);
}


/*==================================================
    SECTIONS 
	Toutes les sections auront le même rythme.
==================================================*/

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


/*==================================================
    TITRES DES SECTIONS
==================================================*/

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

.section-heading__signature
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-lg);
}

.section-heading__dot
{
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 12px rgba(77, 141, 232, .55);
}

.section-heading__line
{
    display: block;
    width: 96px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(199, 119, 46, .18));
}

.section-heading__title
{
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-introduction
{
    max-width: 58ch;
    color: var(--color-text);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 300;
    line-height: 1.8;
}


/*==================================================
    LIENS TEXTUELS
==================================================*/

.text-link
{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-lg);
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.text-link::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(.28);
    transform-origin: left;
    transition: transform var(--transition);
}

.text-link:hover::after,
.text-link:focus-visible::after
{
    transform: scaleX(1);
}

.text-link span
{
    color: var(--color-highlight);
    transition: transform var(--transition);
}

.text-link:hover span
{
    transform: translateX(4px);
}

.text-link--external:hover span
{
    transform: translate(3px, -3px);
}


/*==================================================
    BOUTONS 
	Avec discret effet au survol
==================================================*/
.btn
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
	
	min-height: 48px;
    padding: 14px 28px;
	
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
	
	font-family: var(--font-title);
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
	
    transition: var(--transition);
}

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


/*==================================================
    BOUTONS — COMPLÉMENTS
==================================================*/

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

.btn:hover .btn__dot 
{
    transform: scale(1.25);
}

.btn--secondary 
{
    color: var(--color-text-muted);
    border-color: rgba(236, 236, 236, .28);
}

.btn--secondary:hover 
{
    color: var(--color-text);
    border-color: rgba(236, 236, 236, .58);
    background: rgba(236, 236, 236, .06);
}


/*==================================================
    ANIMATIONS 
	classe utilitaire pour toutes les animations
==================================================*/

.fade-in
{
    opacity:0;
    transform:translateY(25px);
}

.fade-in.visible
{
    opacity:1;
    transform:none;
}


/*==================================================
    HEADER
==================================================*/

.site-header 
{
    position: fixed;
    z-index: var(--z-header);
    top: 0;
    right: 0;
    left: 0;
    height: var(--header-height);
    background: var(--header-background);

    /* Ligne cuivrée en haut du site. */
    border-top: 1px solid var(--color-accent);

    border-bottom: 1px solid rgba(255, 255, 255, .04);

    transition:
        height var(--transition),
        background-color var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition);
}

.site-header::after 
{
    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(199, 119, 46, .12) 20%,
            rgba(199, 119, 46, .58) 50%,
            rgba(199, 119, 46, .12) 80%,
            transparent 100%
        );

    opacity: .65;

}

.site-header.is-scrolled 
{
    height: var(--header-height-scroll);
    background: var(--header-background-scroll);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .22);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

}

.site-header__inner 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}


/*==================================================
    LOGO DU HEADER
==================================================*/

.site-logo 
{
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: var(--z-navigation);
}


.site-logo__image 
{
    width: auto;
    height: 64px;
    object-fit: contain;

    /*
     * Le logo fourni étant noir, ce filtre le rend blanc sans modifier le fichier SVG original.
	 * Le filtre fonctionnera bien tant que ton logo est entièrement noir, penser à le modifier s'il était passé en blanc 
     */

    filter:
        brightness(0)
        invert(1);

    transition:
        height var(--transition),
        opacity var(--transition),
        transform var(--transition);
}


.site-logo:hover .site-logo__image 
{
    opacity: .86;
    transform: translateY(-1px);
}

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


/*==================================================
    EN-TÊTE DES PAGES INTERNES
==================================================*/


.page-header
{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 290px;
    padding-top: var(--header-height);
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 32%, rgba(77, 141, 232, .08), transparent 24%),
        radial-gradient(circle at 18% 72%, rgba(199, 119, 46, .06), transparent 28%),
        linear-gradient(145deg, #11161e 0%, #0d1117 58%, #090c11 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.page-header::after
{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--color-bg));
    pointer-events: none;
}

.page-header__pattern
{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        radial-gradient(circle at 12% 24%, rgba(77, 141, 232, .8) 0 1px, transparent 2px),
        radial-gradient(circle at 34% 68%, rgba(236, 236, 236, .45) 0 1px, transparent 2px),
        radial-gradient(circle at 67% 21%, rgba(77, 141, 232, .6) 0 1px, transparent 2px),
        radial-gradient(circle at 83% 64%, rgba(236, 236, 236, .32) 0 1px, transparent 2px),
        linear-gradient(118deg, transparent 32%, rgba(199, 119, 46, .16) 32.1%, transparent 32.3%);
}

.page-header__inner
{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(290px - var(--header-height));
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.page-header__intro
{
    max-width: 560px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.8;
    text-align: center;
}

.page-header__content
{
    width: min(760px, 100%);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.page-header__eyebrow
{
    margin-bottom: var(--space-md);
    color: var(--color-accent);
    font-family: var(--font-title);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
}

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

.page-header__dot
{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 14px rgba(77, 141, 232, .62);
}

.page-header__line
{
    width: 96px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(199, 119, 46, .16));
}

.page-header__title
{
    margin-bottom: var(--space-lg);
    color: var(--color-text);
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.05;
    text-transform: uppercase;
}

.page-header__subtitle
{
    max-width: 62ch;
    margin-right: auto;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.8;
}


/*==================================================
    NAVIGATION PRINCIPALE
==================================================*/

.main-nav 
{
    display: flex;
    align-items: center;
}

.main-nav__list 
{
    display: flex;
    align-items: center;
    gap: clamp(28px, 3vw, 52px);
    list-style: none;
}

.main-nav__link 
{
    display: inline-flex;
    flex-direction: column;
	align-items: center;
    position: relative;
    padding: 12px 0 18px;
    color: var(--color-text-muted);
    font-family: var(--font-title);
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

.main-nav__link::before 
{
    content: "";
    position: absolute;
	
	/* Point placé sous le texte */
	bottom: -6px;
    left: 50%;
	
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 10px rgba(77, 141, 232, .65);
    opacity: 0;
    transform:
        translateX(-50%)
        scale(.65);
    transition: var(--transition);
}

/*  place la ligne cuivrée sous le point bleu, dans le menu */ 
.main-nav__link::after 
{
    content: "";
    position: absolute;
    bottom: -13px;
    left: 50%;
    width: 42px;
    height: 1px;
    background: var(--color-accent);
    transform:
        translateX(-50%)
        scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}


.main-nav__link:hover, .main-nav__link:focus-visible, .main-nav__link.is-active 
{
    color: var(--color-text);
}

/* fait apparaitre le point bleu sous les liens du menu */
.main-nav__link:hover::before, .main-nav__link:focus-visible::before, .main-nav__link.is-active::before  
{
    opacity: 1;

    transform:
        translateX(-50%)
        scale(1);
}

/* état actif du menu */ 
.main-nav__link:hover::after, .main-nav__link:focus-visible::after, .main-nav__link.is-active::after 
{
    transform: 
		translateX(-50%)
        scaleX(1);
}


/*==================================================
    BOUTON DU MENU RESPONSIVE (menu tablette)
==================================================*/

.nav-toggle 
{
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: var(--z-navigation);
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(199, 119, 46, .55);
    border-radius: var(--radius);
    background: rgba(16, 20, 27, .45);
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
}

.nav-toggle:hover, .nav-toggle:focus-visible 
{
    background: rgba(199, 119, 46, .12);
    border-color: var(--color-accent);
}

.nav-toggle__line 
{
    display: block;
    width: 21px;
    height: 1px;
    margin: 3px 0;
    background: currentColor;
    transform-origin: center;
    transition: var(--transition);
}

/* Transformation en croix */

.nav-toggle.is-open
.nav-toggle__line:nth-child(1) 
{
    transform:
        translateY(7px)
        rotate(45deg);
}

.nav-toggle.is-open
.nav-toggle__line:nth-child(2) 
{
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.is-open
.nav-toggle__line:nth-child(3) 
{
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/*==================================================
    ACCESSIBILITÉ 
==================================================*/

.sr-only 
{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/*==================================================
    FOOTER
==================================================*/

.site-footer
{
    position: relative;
    padding: var(--space-3xl) 0 var(--space-xl);
    background: #0b0e13;
    border-top: 1px solid rgba(199, 119, 46, .32);
}

.site-footer::before
{
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-highlight);
    box-shadow: 0 0 12px rgba(77, 141, 232, .65);
    transform: translateX(-50%);
}

.site-footer__inner
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-footer__identity
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-footer__logo
{
    display: block;
    width: min(280px, 72vw);
    margin-bottom: var(--space-md);
}

.site-footer__logo img
{
    width: 100%;
    height: auto;
    opacity: .92;
    filter: brightness(0) invert(1);
}

.site-footer__identity p
{
    color: var(--color-text-muted);
    font-family: var(--font-title);
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-footer__identity p span
{
    margin: 0 6px;
    color: var(--color-highlight);
}

.site-footer__social
{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

.site-footer__social a
{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(236, 236, 236, .14);
    border-radius: 50%;
    color: var(--color-text-muted);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible
{
    border-color: var(--color-accent);
    color: var(--color-text);
    transform: translateY(-2px);
}

.social-icon
{
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
}

.social-icon--youtube
{
    width: 20px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
}

.social-icon--youtube::after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transform: translate(-35%, -50%);
}

.social-icon--facebook
{
    font-family: Arial, sans-serif;
}

.social-icon--facebook::after
{
    content: "f";
    position: absolute;
    right: 4px;
    bottom: -3px;
    color: currentColor;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.social-icon--instagram
{
    border: 1.5px solid currentColor;
    border-radius: 5px;
}

.social-icon--instagram::before
{
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.social-icon--instagram::after
{
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
}

.site-footer__bottom
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, .06);
    text-align: left;
}

.site-footer__bottom p
{
    color: rgba(166, 175, 187, .68);
    font-size: .78rem;
    line-height: 1.7;
}

.site-footer__bottom a
{
    color: rgba(166, 175, 187, .68);
    font-size: .78rem;
}

.site-footer__bottom a:hover
{
    color: var(--color-text);
}

.site-footer__legal-links
{
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.site-footer__legal-links a
{
    color: rgba(166, 175, 187, .68);
    font-size: .78rem;
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible
{
    color: var(--color-text);
}


/*========================================================================================================
    RÉDUCTION DES MOUVEMENTS - pour les personnes ayant désactivé les animations sur leur navigateur
========================================================================================================*/

@media (prefers-reduced-motion: reduce)
{
    html
    {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after
    {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .hero-animate,
	.page-header-animate,
    .fade-in,
	.page-header__intro
    {
        opacity: 1;
        transform: none;
    }
	

}