@font-face {
    font-family: 'Bebas';
    src: url('Polices/Bebas_Neue/BebasNeue-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Ultra';
    src: url('Polices/Raleway/Raleway-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'EB Garamond';
    src: url('Polices/EB_Garamond/EB_Garamond.ttf') format('truetype');
}
@font-face {
    font-family: 'Berkshire Swash';
    src: url('Polices/Berkshire_Swash/BerkshireSwash-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Italiana';
    src: url('Polices/Italiana/Italiana-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    background: #1A0A0A;
    color: #E8729A;
    overflow-x: clip;
}

a {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

.scroll-container {
    width: 100%;
    background: #1A0A0A;
}

.section {
    width: 100%;
    background: #1A0A0A;
}

/* ==========================
   SCÈNE À CALQUES (logo / pancarte / choix)
   ========================== */

.scene {
    position: relative;
    height: 270vh;           /* distance de scroll pour l'animation */
    background: #1A0A0A;
}

.scene-pin {
    position: sticky;
    top: 0;

    height: 100vh;
    overflow: hidden;

    background: #1A0A0A;
}

/* ancre pour arriver directement sur les choix révélés */
.scene-anchor {
    position: absolute;
    left: 0;
    top: 62%;
    width: 1px;
    height: 1px;
}

.layer {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* second plan : logo */
.layer-logo {
    z-index: 1;
}

/* second plan révélé : choix */
.layer-choix {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

/* la pancarte ne bloque jamais la souris (pas de contenu interactif) */
.layer-pancarte {
    pointer-events: none;
}

.lines-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.scene-choix {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(40px, 8vw, 130px);
}

@media (max-width: 760px) {
    .scene-choix {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
}

/* CHOIX (IN PITCH / OUT PITCH) — titre + sous-titre + flèche */
.pitch-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;

    text-decoration: none;
    color: inherit;
}

.pitch-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.82;
}

.pt-top {
    font-family: 'Italiana', serif;
    font-size: clamp(40px, 4.8vw, 80px);
    letter-spacing: 2px;
    color: #ffffff;
}

.pt-bottom {
    font-family: 'Bebas', sans-serif;
    font-size: clamp(48px, 6vw, 92px);
    letter-spacing: 4px;
    color: #E8729A;
}

.pitch-sub {
    max-width: 380px;
    margin-top: 4px;

    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #b96e86;
}

.pitch-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;
    margin-top: 10px;

    border-radius: 18px;
    background: #E8729A;
    color: #1A0A0A;

    transition: transform 0.35s ease, background 0.35s ease;
}

.pitch-arrow svg {
    width: 28px;
    height: 28px;
}

.pitch-choice:hover .pitch-arrow {
    transform: translateY(6px);
    background: #f2a3bd;
}

.pitch-choice:hover .pt-bottom {
    color: #f2a3bd;
}

/* premier plan : pancarte grise qui monte */
.layer-pancarte {
    z-index: 3;

    padding: 0 8vw;

    background: #1A0A0A;
    box-shadow: 0 -30px 70px -18px rgba(0, 0, 0, 0.75);

    transform: translateY(100%);
    will-change: transform;
}

/* BULLE ORGANIQUE (logo) — rendue dans un canvas (index.js) */
.blob-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

#blob-canvas {
    width: clamp(546px, 75vw, 1066px);
    height: clamp(546px, 75vw, 1066px);
    display: block;

    /* léger flottement de l'ensemble */
    animation: ai-float 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes ai-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    #blob-canvas { animation: none; }
}

.bleu {
    color: #E8729A;
}

/* STUDIES et PROJECTS en Bebas */
.choix a.en-bebas,
.projets-section a.en-bebas {
    font-family: 'Bebas', sans-serif;
    font-size: 100px;
}

.header {
    position: fixed;
    top: 25px;
    right: 35px;
    z-index: 10000;
    opacity: 1;
    pointer-events: auto;
}

.header-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.92;

    text-decoration: none;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.header-name.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hn-prenom {
    font-family: 'Bebas', sans-serif;
    font-size: 25px;
    letter-spacing: 2px;
    color: #ffffff;
}

.hn-nom {
    font-family: 'Italiana', serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: #E8729A;
}

.quote-text {
    margin: 0;
    max-width: 1000px;

    font-family: 'Italiana', serif;
    font-style: italic;
    font-size: clamp(80px, 3vw, 45px);
    line-height: 1.3;

    color: #E8729A;
    text-align: center;
}

.quote-author {
    display: block;
    margin-top: 28px;

    font-family: 'Italiana', serif;
    font-style: normal;
    font-size: 28px;
    letter-spacing: 3px;

    color: #E8729A;
}

/*CHOIX */
.choix {
    position: relative;
    z-index: 30;

    height: 55vh;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;

    background: #1A0A0A;
}


.choix.visible {
    pointer-events: auto;
}

.choix a {
    font-family: 'Italiana', serif;
    font-size: 60px;
    color: #E8729A;
    text-decoration: none;
    opacity: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.choix a:hover {
    color: #E8729A;
    transform: scale(1.05);
}


/*PROJETS */

.projets-section {
    position: relative;
    z-index: 30;
    gap: 120px;

    height: 55vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #1A0A0A;
}

.titre-projets {
    position: relative;
    z-index: 1;

    font-family: 'Italiana', serif;
    font-size: 60px;
    color: #E8729A;
}

.titre-projets:hover {
    color: #E8729A;
    transform: scale(1.05);
}

/* ==========================
   RÉSEAUX SOCIAUX (collage)
   ========================== */

.socials {
    position: relative;
    z-index: 30;

    padding: 80px 6vw 120px;
    background: #1A0A0A;
}

/* éventail de cartes */
.socials-fan {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    margin: 40px auto 0;
    padding-top: 40px;
}

.social-item {
    margin: 0 -96px;
    width: clamp(210px, 21vw, 340px);

    transform-origin: center bottom;
    will-change: transform;
    z-index: 4;
}

/* position dans l'éventail : inclinaison + descente + échelle */
.social-item:nth-child(1) { rotate: -12deg; translate: 0 46px; scale: 0.83; z-index: 1; }
.social-item:nth-child(2) { rotate: -8deg;  translate: 0 24px; scale: 0.89; z-index: 2; }
.social-item:nth-child(3) { rotate: -4deg;  translate: 0 9px;  scale: 0.95; z-index: 3; }
.social-item:nth-child(4) { rotate: 0deg;   translate: 0 0;    scale: 1;    z-index: 6; }
.social-item:nth-child(5) { rotate: 4deg;   translate: 0 9px;  scale: 0.95; z-index: 3; }
.social-item:nth-child(6) { rotate: 8deg;   translate: 0 24px; scale: 0.89; z-index: 2; }
.social-item:nth-child(7) { rotate: 12deg;  translate: 0 46px; scale: 0.83; z-index: 1; }

.social-item:hover {
    z-index: 10;
}

.social-reveal {
    display: block;
    overflow: hidden;
    border-radius: 14px;

    opacity: 0;
    transform: translateY(45px);
    transition: opacity 0.9s ease, transform 0.9s ease;

    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9);
}

.social-item.in .social-reveal {
    opacity: 1;
    transform: translateY(0);
}

.social-reveal img {
    display: block;
    width: 100%;
    height: auto;

    /* même format portrait pour toutes les cartes */
    aspect-ratio: 300 / 460;
    object-fit: cover;

    transition: transform 0.5s ease;
}

.social-item:hover .social-reveal img {
    transform: scale(1.07);
}

/* titre au-dessus de l'éventail, polices mixtes */
.socials-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.9;

    text-align: center;
}

.socials-title .t-bebas {
    font-family: 'Bebas', sans-serif;
    font-size: clamp(32px, 4.4vw, 64px);
    letter-spacing: 3px;
    color: #E8729A;
}

.socials-title .t-italiana {
    font-family: 'Italiana', serif;
    font-size: clamp(22px, 3vw, 42px);
    letter-spacing: 3px;
    color: #E8729A;
    margin-top: 6px;
}

/* pied : phrase + liens */
.socials-footer {
    margin-top: 70px;
    text-align: center;
}

.socials-follow {
    margin: 0 0 26px;
}

.socials-follow .t-bebas {
    font-family: 'Italiana', serif;
    font-size: 28px;
    color: #E8729A;
}

.socials-follow .t-italiana {
    font-family: 'Italiana', serif;
    font-size: 28px;
    color: #E8729A;
    margin-left: 8px;
}

.socials-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.socials-links a {
    font-family: 'Bebas', sans-serif;
    font-size: 15px;
    letter-spacing: 3px;
    color: #ffffff;
    transition: color 0.3s ease;
}

.socials-links a:hover {
    color: #E8729A;
}

/* ==========================
   MENU LATÉRAL (verre dépoli orange)
   ========================== */

.side-nav {
    position: fixed;
    top: 50%;
    right: 24px;
    transform: translateY(-50%) translateX(24px);

    z-index: 2000;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;

    padding: 14px 5px;
    border-radius: 40px;

    background: rgba(232, 114, 154, 0.04);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);

    border: 1px solid rgba(240, 150, 180, 0.3);
    box-shadow: 0 10px 34px -12px rgba(232, 114, 154, 0.28);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.side-nav.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.nav-dot {
    position: relative;

    width: 8px;
    height: 8px;
    border-radius: 50%;

    border: 2px solid rgba(232, 114, 154, 0.36);
    background: transparent;

    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.nav-dot:hover {
    background: rgba(232, 114, 154, 0.24);
}

.nav-dot.active {
    background: rgba(232, 114, 154, 0.5);
    box-shadow: 0 0 10px rgba(232, 114, 154, 0.42);
    transform: scale(1.3);
}

.nav-label {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);

    white-space: nowrap;

    font-family: 'Bebas', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    color: #fff;

    background: rgba(232, 114, 154, 0.9);
    padding: 4px 12px;
    border-radius: 14px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-dot:hover .nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 760px) {
    .side-nav { display: none; }
}

/* responsive : éventail -> grille simple */
@media (max-width: 760px) {

    .socials-fan {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        padding-top: 0;
        max-width: 460px;
    }

    .social-item {
        margin: 0 !important;
        width: auto !important;
        rotate: 0deg !important;
        translate: 0 0 !important;
        scale: 1 !important;
    }
}
/* ==========================
   ÉCRAN DE CHARGEMENT — bulle de chewing-gum
   ========================== */

#loader {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;

    background: #1A0A0A;
    opacity: 1;
    transition: opacity 0.55s ease;
}

#loader.done {
    opacity: 0;
    pointer-events: none;
}

.loader-blob {
    display: block;
}