/* ================================================================
   COMPONENTS — Phone mockup, section headers, feature split layout
   ================================================================ */

/* ----------------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------------- */
#nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    padding: 24px 0;
    transition: padding .4s ease, background .4s ease, border-color .4s ease;
    border-bottom: 1px solid transparent;
}
#nav.scrolled {
    padding: 14px 0;
    background: rgba(7,7,15,0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--border);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fh);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--electric), var(--violet-lt));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(79,158,255,.5));
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 100px;
    font-family: var(--fh);
    font-size: 0.875rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(26,82,192,.85), rgba(91,33,182,.85));
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    transition: all .3s ease;
}
.nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(79,158,255,.3);
}

.nav-store-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,.15);
    box-shadow: none;
}
.nav-btn-ghost:hover {
    background: rgba(255,255,255,.06);
    box-shadow: none;
}

/* ----------------------------------------------------------------
   SECTION HEADER
   ---------------------------------------------------------------- */
.sh {
    margin-bottom: clamp(48px, 7vw, 84px);
}
.sh.center { text-align: center; }
.sh.center .label { justify-content: center; }
.sh.center .sh-desc { margin: 0 auto; }

.sh-title {
    font-family: var(--fh);
    font-size: clamp(2.3rem, 4.2vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 20px;
}

.sh-desc {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--t2);
    max-width: 560px;
    line-height: 1.8;
    font-weight: 300;
}

/* ----------------------------------------------------------------
   FEATURE SPLIT LAYOUT
   ---------------------------------------------------------------- */
.fs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.fs.rev { direction: rtl; }
.fs.rev > * { direction: ltr; }

.fs-content {
    display: flex;
    flex-direction: column;
}

.fs-title {
    font-family: var(--fh);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 20px;
}

.fs-text {
    font-size: clamp(.92rem, 1.2vw, 1.04rem);
    color: var(--t2);
    line-height: 1.85;
    font-weight: 300;
    max-width: 500px;
    margin-bottom: 36px;
}

.fs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.fs-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: .93rem;
    color: var(--t2);
    line-height: 1.65;
}
.fs-list li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: 3px;
    background: linear-gradient(135deg, var(--electric), var(--blue));
    box-shadow: 0 0 10px rgba(0,207,255,.28);
}
.fs-list.warm li::before {
    background: linear-gradient(135deg, var(--gold), var(--red));
    box-shadow: 0 0 10px rgba(232,74,99,.28);
}

.fs-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------------------------------------
   PHONE MOCKUP
   ---------------------------------------------------------------- */
.phone-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.phone-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(79,158,255,.13) 0%,
        rgba(91,33,182,.07) 45%,
        transparent 70%);
    pointer-events: none;
    animation: gpulse 5s ease-in-out infinite;
}
.phone-glow.red {
    background: radial-gradient(circle,
        rgba(232,74,99,.14) 0%,
        rgba(91,33,182,.06) 45%,
        transparent 70%);
}

@keyframes gpulse {
    0%,100% { transform: scale(1); opacity: .8; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.iphone {
    position: relative;
    flex-shrink: 0;
    animation: floatphone 7s ease-in-out infinite;
}

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

.iphone.size-lg { width: 290px; }
.iphone.size-md { width: 230px; }
.iphone.size-sm { width: 185px; }

.iphone-frame {
    background: #0c0c1a;
    border-radius: 52px;
    border: 1.5px solid rgba(255,255,255,.12);
    padding: 13px;
    box-shadow:
        0 0 0 .5px rgba(255,255,255,.04),
        0 50px 100px rgba(0,0,0,.65),
        0 0 70px rgba(79,158,255,.08),
        inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
}

.iphone.red .iphone-frame {
    border-color: rgba(232,74,99,.2);
    box-shadow:
        0 0 0 .5px rgba(255,255,255,.04),
        0 50px 100px rgba(0,0,0,.65),
        0 0 70px rgba(232,74,99,.1),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.dynamic-island {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 88px;
    height: 26px;
    background: #000;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.06);
}

.iphone-screen {
    border-radius: 40px;
    overflow: hidden;
    aspect-ratio: 9 / 19.5;
    position: relative;
    background: #0c0f1e;
}

.iphone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------------------
   PHONE SCREEN PLACEHOLDERS
   (remplacer .ph par <img src="screenshots/xxx.png"> quand prêt)
   ---------------------------------------------------------------- */
.ph {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 16px 16px;
    overflow: hidden;
}

.ph-lbl {
    font-family: var(--fh);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.ph-ico {
    font-size: 1.8rem;
    opacity: .25;
    position: relative;
    z-index: 1;
}

/* Map screen */
.ph-map {
    background: linear-gradient(170deg, #091728 0%, #060e1c 55%, #080c1a 100%);
}
.ph-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 38%, rgba(79,158,255,.18) 0%, transparent 38%),
        radial-gradient(circle at 72% 62%, rgba(139,92,246,.12) 0%, transparent 32%),
        radial-gradient(circle at 50% 85%, rgba(0,207,255,.08) 0%, transparent 30%);
}

/* Camera screen */
.ph-cam {
    background: linear-gradient(170deg, #0c1022 0%, #070810 100%);
}
.ph-cam::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(79,158,255,.08) 0%, transparent 60%);
}

/* Duel screen */
.ph-duel {
    background: linear-gradient(170deg, #1a0618 0%, #0e0610 55%, #080609 100%);
}
.ph-duel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 28%, rgba(232,74,99,.22) 0%, transparent 55%);
}

/* Territory screen */
.ph-terr {
    background: linear-gradient(170deg, #071428 0%, #050c18 55%, #070710 100%);
}
.ph-terr::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(79,158,255,.14) 0%, transparent 55%),
        radial-gradient(circle at 25% 70%, rgba(139,92,246,.1) 0%, transparent 35%);
}

/* Duo phones side by side */
.phones-duo {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: flex-end;
}
.phones-duo .phone-flip-wrap:first-child { margin-bottom: 32px; }

/* ----------------------------------------------------------------
   PHONE FLIP — effet 3D BeReal style
   ---------------------------------------------------------------- */
.phone-flip-wrap {
    perspective: 1400px;
    animation: floatphone 7s ease-in-out infinite;
    position: relative;
}

/* Overlay noir DANS chaque écran — tourne avec le téléphone en 3D */
.screen-dim {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    /* pas de border-radius : iphone-screen a overflow:hidden + border-radius */
}

.phone-flipper {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}


.phone-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.phone-face-front .iphone {
    animation: none; /* float géré par .phone-flip-wrap */
}

.phone-face-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-face-back .iphone {
    animation: none;
}

/* Vidéo remplit l'écran */
.iphone-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}