/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg:          #05071a;
    --gold:        #D4AF37;
    --amber:       #ffaa44;
    --amber-glow:  #ff7700;
    --azure:       #44aaff;
    --azure-glow:  #0055ff;
    --blue-ring:   #2A75D3;
    --pink-ring:   #D0028D;
    --soft-white:  #f0e8d8;
    --grey-text:   #aaaaaa;
    --section-gap: 80px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   HEADER — Full Width, logo & prochainement aux extrémités
   ============================================================ */
#main-header {
    width: 100%;
    background-color: #030a1c;
    z-index: 100;
    position: relative;
}

#header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 4%;
}

/* Trait fin lumineux sous le header (style identique au trait de la maquette) */
#header-separator {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 10%,
        rgba(255, 220, 100, 0.85) 30%,
        #fff 50%,
        rgba(255, 220, 100, 0.85) 70%,
        rgba(255, 255, 255, 0.15) 90%,
        transparent 100%
    );
    box-shadow: 0 0 8px rgba(255, 220, 100, 0.7), 0 0 20px rgba(255, 200, 50, 0.4);
}

#logo {
    height: 110px;
}

#prochainement {
    height: 100px;
/*     object-fit: contain;
    mix-blend-mode: screen; */
}

/* ============================================================
   HERO — Image pleine largeur avec fondu bas
   ============================================================ */
#hero {
    position: relative;
    width: 100%;
}

#hero-image-wrap {
    position: relative;
    width: 100%;
    line-height: 0; /* évite l'espace sous l'image */
}

#hero-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Masque : fondu progressif sur les côtés et en bas */
    mask-image:
        linear-gradient(to bottom,  transparent 0%, black 12%, black 70%, transparent 100%),
        linear-gradient(to right,   transparent 0%, black 8%,  black 92%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to bottom,  transparent 0%, black 12%, black 70%, transparent 100%),
        linear-gradient(to right,   transparent 0%, black 8%,  black 92%, transparent 100%);
    -webkit-mask-composite: source-in;
}

#hero-overlay {
    /* Vignette sombre supplémentaire au bas de la photo */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

/* Zone sous l'image : slogan + portraits côte à côte */
#hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 40px 6% 60px;
    gap: 40px;
    flex-wrap: wrap;
	position: relative;
    z-index: 99999;
	margin-top: -200px;
}

/* ============================================================
   SLOGAN — Vrai texte avec effet néon
   ============================================================ */
#slogan {
    flex: 1 1 420px;
}

.slogan-line {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4.3vw, 3.6rem);
    line-height: 1.25;
    white-space: nowrap;
}

.word-embrasez {
    color: var(--amber);
    text-shadow:
        0 0 45px  var(--amber),
        0 0 20px var(--amber-glow),
        0 0 45px var(--amber-glow);
    font-style: italic;
}

.word-embrassez {
    color: var(--azure);
    text-shadow:
        0 0 45px  var(--azure),
        0 0 20px var(--azure-glow),
        0 0 45px var(--azure-glow);
    font-style: italic;
}

.word-soft {
    color: var(--soft-white);
    font-weight: 400;
}

/* ============================================================
   PORTRAITS
   ============================================================ */
#portraits {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    flex-shrink: 0;
}
#portraits h3 {
	font-family: "Alice", serif;
}

.portrait-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.portrait-ring {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    padding: 4px;
    margin-bottom: 14px;
}

.portrait-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ring-blue {
    border: 2.5px solid var(--blue-ring);
    box-shadow: 0 0 18px rgba(42, 117, 211, 0.85), inset 0 0 12px rgba(42, 117, 211, 0.3);
}

.ring-pink {
    border: 2.5px solid var(--gold);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.85), inset 0 0 12px rgba(212, 175, 55, 0.3);
}

.portrait-name {
    font-size: 1rem;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 6px;
}

.name-blue {
    color: var(--blue-ring);
    text-shadow: 0 0 10px rgba(42, 117, 211, 0.8);
}

.name-pink {
    color: #D4AF37;
    text-shadow: 0 0 10px rgba(208, 2, 141, 0.8);
}

.portrait-sub {
    font-size: 0.72rem;
    color: #cccccc;
    line-height: 1.5;
    font-weight: 300;
}

/* Trait fin lumineux au-dessus du tagline */
.glow-line {
    width: 80%;
    max-width: 900px;
    margin: 0 auto 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 10%,
        rgba(255, 220, 100, 0.85) 30%,
        #fff 50%,
        rgba(255, 220, 100, 0.85) 70%,
        rgba(255, 255, 255, 0.15) 90%,
        transparent 100%
    );
    /* box-shadow: 0 0 8px rgba(255, 220, 100, 0.7), 0 0 20px rgba(255, 200, 50, 0.4); */
}

/* ============================================================
   TAGLINE INTERMÉDIAIRE
   ============================================================ */
#tagline {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 30px 4% 40px;
}

#tagline h2 {
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    letter-spacing: 5px;
    color: var(--grey-text);
    font-weight: 400;
    text-align: center;
}

.tagline-diamond {
    color: var(--gold);
    font-size: 1rem;
    opacity: 0.8;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1600px) {
	#hero-bottom {
		margin-top: -160px;
	}	
}
@media (max-width: 1400px) {
	#hero-bottom {
		margin-top: -130px;
	}	
}


@media (max-width: 1180px) {
	
	#hero-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 6% 50px;
		margin-top: -110px;
    }
	
    #slogan {
        flex: unset;
    }

    .slogan-line {
        white-space: normal;
        text-align: center;
    }

    #portraits {
        align-items: center;
        justify-content: center;
    }
}   


@media (max-width: 1050px) {
	
    #header-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 16px 4%;
    }
}	
   
@media (max-width: 900px) {
    #hero-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 6% 50px;
		margin-top: -40px;
    }

    #slogan {
        flex: unset;
    }

    .slogan-line {
        white-space: normal;
        text-align: center;
    }

    #portraits {
        align-items: center;
        justify-content: center;
    }

    #contact-bar {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .contact-separator {
        width: 60%;
        height: 1px;
    }
}

@media (max-width: 600px) {
    /* Header en colonne sur petit écran */
    #hero-bottom {
		margin-top: -20px;
    }

    #logo {
        height: 100px;
    }

    #prochainement {
        height: 90px;
    }

    .portrait-ring {
        width: 100px;
        height: 100px;
    }

    #portraits {
        gap: 24px;
    }
}


@media (max-width: 480px) {

    #prochainement {
        height: 75px;
    }

}

@media (max-width: 450px) {

    .src-contact-item {
        font-size: 0.8rem;
    }
    .src-icon-inline {
        display: none;
    }
	
    #prochainement {
        height: 65px;
    }
}
@media (max-width: 325px) {

    .src-contact-item {
        font-size: 0.7rem;
    }
    .src-icon-inline {
        display: none;
    }
	#prochainement {
        height: 55px;
    }
    #logo {
        height: 70px;
    }
}

@media (max-width: 480px) {


}