/* ====================== */
/* ===== VERSION PC ===== */
/* ====================== */

#mobile-version {
    display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: 'Poppins', sans-serif;
  background: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
}

header {
  background: #2f3b44;
  color: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

header h1 {
  font-size: 1.8rem;
  font-weight: 700;
}

nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  background: transparent;
  padding: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

nav a:hover {
  color: #00bcd4;
}

/* Sections */
main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Blocs */
.bloc {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1rem;
}

.bloc img {
  max-width: 280px;
  border-radius: 10px;
  transition: transform 0.3s;
}

.bloc img:hover {
  transform: scale(1.05);
}

/* Footer */
footer {
  background: #2f3b44;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  margin-top: 30px;
  font-size: 0.9rem;
}

/* ================================ */
/* ===== VERSION RESPONSIVE UX+ === */
/* ================================ */

/* Spécifique iPhone 16 portrait (~430px de large max) */
@media only screen and (max-width: 430px) {

    /* Masquer la version desktop */
    #desktop-version {
        display: none;
    }

    :root {
        --font-title-cyber: 'Orbitron', sans-serif;
        --font-text-cyber: 'Share Tech Mono', monospace;

        --color-bg-cyber: #050a14;
        --color-container: #111a30;
        --color-text-cyber: #e0e5f0;
        --color-text-muted: #7f8aae;
        --color-neon-cyan: #00f0ff;
        --color-neon-magenta: #ff00f0;
        --color-border: #2a3457;
    }

    /* Activer la version mobile */
    #mobile-version {
        display: block;
        background: var(--color-bg-cyber);
        color: var(--color-text-cyber);
        font-family: var(--font-text-cyber);
        max-width: 430px;
        margin: 0 auto;
        overflow-x: hidden;
        position: relative;
    }

    html {
        scroll-behavior: smooth;
    }

    /* --- Animations de "Boot" --- */
    @keyframes fadeInSlideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .boot-anim-1, .boot-anim-2, .boot-anim-3, .boot-anim-4, .boot-anim-5, .boot-anim-6 {
        opacity: 0;
        animation: fadeInSlideUp 0.6s ease-out forwards;
    }
    .boot-anim-1 { animation-delay: 0.2s; }
    .boot-anim-2 { animation-delay: 0.4s; }
    .boot-anim-3 { animation-delay: 0.6s; }
    .boot-anim-4 { animation-delay: 0.8s; }
    .boot-anim-5 { animation-delay: 1s; }
    .boot-anim-6 { animation-delay: 1.1s; }

    /* --- Menu Off-Canvas --- */
    .nav-toggle-checkbox { display: none; }
    .nav-toggle-label {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 2rem;
        right: 1.5rem;
        cursor: pointer;
        z-index: 1001;
    }
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        content: '';
        width: 100%;
        height: 3px;
        background: var(--color-neon-cyan);
        position: absolute;
        left: 0;
        transition: all 0.3s ease;
    }
    .nav-toggle-label span { top: 13px; }
    .nav-toggle-label span::before { top: -10px; }
    .nav-toggle-label span::after { top: 10px; }

    .main-nav {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        background: var(--color-container);
        border-left: 2px solid var(--color-neon-cyan);
        z-index: 1000;
        padding: 4rem 2rem 2rem 2rem;
        transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .main-nav a {
        display: block;
        color: var(--color-text-cyber);
        text-decoration: none;
        font-size: 1.2rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-border);
        transition: color 0.3s, transform 0.3s;
    }
    .main-nav a:hover {
        color: var(--color-neon-cyan);
        transform: translateX(5px);
        text-shadow: 0 0 5px var(--color-neon-cyan);
    }
    .nav-close-btn {
        color: var(--color-neon-magenta);
        cursor: pointer;
        margin-top: 2rem;
        font-weight: 700;
    }
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }
    .nav-toggle-checkbox:checked ~ .main-nav { right: 0; }
    .nav-toggle-checkbox:checked ~ .nav-overlay { opacity: 1; visibility: visible; }
    .nav-toggle-checkbox:checked + .nav-toggle-label span { background: transparent; }
    .nav-toggle-checkbox:checked + .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
    .nav-toggle-checkbox:checked + .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; }

    /* --- Header mobile --- */
    .mobile-header {
        padding: 2rem 1.5rem;
        border-bottom: 1px solid var(--color-border);
        position: relative;
    }
    .mobile-header h1 {
        font-family: var(--font-title-cyber);
        font-size: 2rem;
        color: #fff;
        margin: 0;
        text-shadow: 0 0 5px var(--color-neon-magenta), 0 0 10px var(--color-neon-cyan);
    }
    .mobile-header p {
        font-size: 1rem;
        color: var(--color-neon-cyan);
        margin: 0.25rem 0 0 0;
        animation: blink 1.5s infinite;
    }
    @keyframes blink {
        0%,50%,100% { opacity: 1; }
        25%,75% { opacity: 0.3; }
    }

    /* --- Contenu mobile --- */
    .mobile-content {
        padding: 0 1.5rem;
    }
    .mobile-content section { padding-top: 2rem; margin-bottom: 2rem; }
    .mobile-content h2 {
        font-family: var(--font-title-cyber);
        font-size: 1.3rem;
        color: var(--color-neon-magenta);
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 0.5rem;
    }

    /* --- Galerie scroll snap --- */
    .scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 1rem;
        padding-bottom: 1rem;
    }
    .scroll-card {
        flex: 0 0 80%;
        margin-right: 1rem;
        scroll-snap-align: start;
        background: var(--color-container);
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--color-border);
        transform: perspective(1000px);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        cursor: grab;
    }
    .scroll-card:active { cursor: grabbing; }
    .scroll-card:hover { transform: perspective(1000px) rotateY(5deg) scale(1.03); }
    .scroll-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
    .scroll-card .card-content { padding: 1.5rem; }
    .scroll-card h3 { font-family: var(--font-title-cyber); font-size: 1.2rem; color: #fff; margin: 0 0 0.5rem 0; }
    .scroll-card p { color: var(--color-text-muted); margin: 0 0 1.5rem 0; }

    /* Boutons glow */
    .card-link {
        display: inline-block;
        font-family: var(--font-title-cyber);
        background: var(--color-neon-cyan);
        color: var(--color-bg-cyber);
        padding: 0.6rem 1.2rem;
        text-decoration: none;
        font-weight: 700;
        transition: all 0.3s ease;
        box-shadow: 0 0 5px var(--color-neon-cyan);
    }
    .card-link:hover {
        background: #fff;
        color: #000;
        box-shadow: 0 0 20px var(--color-neon-cyan), 0 0 30px var(--color-neon-magenta);
        transform: scale(1.05);
    }

    /* --- Onglets --- */
    .tab-radio { display: none; }
    .tab-labels { display: flex; border-bottom: 2px solid var(--color-border); }
    .tab-label { padding: 0.75rem 0; margin-right: 1.5rem; cursor: pointer; color: var(--color-text-muted); position: relative; }
    .tab-label::after { content: ''; display: block; width: 0; height: 3px; background: var(--color-neon-cyan); position: absolute; bottom: -2px; left: 0; transition: width 0.3s ease; }
    .tab-radio:checked + .tab-label { color: var(--color-neon-cyan); }
    .tab-radio:checked + .tab-label::after { width: 100%; }
    .tab-content-wrapper { padding: 1.5rem 0; }
    .tab-content {
        display: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    #tab1:checked ~ .tab-content-wrapper #content1,
    #tab2:checked ~ .tab-content-wrapper #content2,
    #tab3:checked ~ .tab-content-wrapper #content3 {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    /* --- Logs --- */
    .log-entry { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; }

    /* --- Footer --- */
    .mobile-footer {
        color: var(--color-text-muted);
        padding: 2rem 1.5rem;
        font-size: 0.8rem;
        text-align: center;
        border-top: 1px solid var(--color-border);
        margin-top: 2rem;
    }

    /* --- Modales --- */
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 2000;
        background: rgba(10, 15, 30, 0.8);
        backdrop-filter: blur(8px);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden;
        transition: all 0.4s ease;
    }
    .modal-content {
        background: var(--color-container);
        border: 2px solid var(--color-neon-cyan);
        box-shadow: 0 0 30px var(--color-neon-cyan);
        border-radius: 8px;
        padding: 2rem;
        width: 90%; max-width: 400px;
        transform: scale(0.8);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        max-height: 80vh;
        overflow-y: auto;
    }
    .modal-content::-webkit-scrollbar { width: 6px; }
    .modal-content::-webkit-scrollbar-thumb { background: var(--color-neon-magenta); border-radius: 3px; }
    .modal-content h2 { color: var(--color-neon-magenta); font-family: var(--font-title-cyber); margin-bottom: 1rem; }
    .modal-content p { line-height: 1.6; color: var(--color-text-muted); margin-bottom: 2rem; }
    .modal-close-btn {
        display: inline-block;
        background: transparent;
        border: 2px solid var(--color-neon-magenta);
        color: var(--color-neon-magenta);
        text-decoration: none;
        padding: 0.5rem 1rem;
        font-weight: 700;
        transition: all 0.3s ease;
    }
    .modal-close-btn:hover { background: var(--color-neon-magenta); color: #000; }
    .modal-overlay:target { opacity: 1; visibility: visible; }
    .modal-overlay:target .modal-content { transform: scale(1); }

}