@media (max-width: 768px) {
    .hero-text {
        font-size: clamp(28px, 11vw, 60px);
        letter-spacing: 0.08em;
        top: 42%;
        left: 50%; /* centré : à 60 % le titre sort de l'écran à droite */
    }

    /* Crâne ×2,25 sur mobile, toujours ancré en bas (même principe que desktop) */
    #skull-img {
        height: 157vh;
        max-height: 1240px;
    }

    /* Tête du crâne à 30 % de la hauteur d'écran : elle est à ~24 % de la hauteur de l'image,
       le bas de l'image descend sous l'écran (aucun vide en bas) */
    #skull-wrapper {
        bottom: calc(100vh - 30vh + 0.24 * 157vh - 157vh);
    }

    #gb-right {
        display: none;
    }

    /* Texte vertical : à gauche, entre la card logo et les cards réseaux */
    #vt-left {
        left: 16px;
        top: 26%;
        height: 80vh; /* ×2 (40 vh trop discret) ; passe sous les cards réseaux */
    }

    /* Gros plan glitché : gardé sur mobile, déplacé par le doigt (parallax tactile, app.js) */
    /* Même emplacement et même taille par rapport au crâne que sur desktop
       (mesuré en 1440×699 : haut 17 %, droite 12,6 %, largeur 42 % de l'image du crâne) */
    #skull-piece {
        top: 17%;
        right: 12.6%;
        width: 37.8%; /* 42 % − 10 %, ancré en haut à droite (34 % testé : trop petit) */
    }

    #skull-piece img {
        width: 100%;
    }

    /* Date + profil : en haut à droite, à côté de la card logo */
    #data-block {
        top: 16px;
        left: auto;
        right: 16px;
        max-width: calc(100% - 16px - 180px - 24px); /* card logo = 180 px entre 481 et 768 px */
    }

    .db-date,
    .db-time {
        font-size: 11px;
    }

    /* Profil : détaché de la card date, en bas à droite, à côté des cards réseaux */
    .db-coords {
        position: fixed;
        bottom: calc(20px + 20vh); /* remonté de 20 % de la hauteur d'écran */
        right: 16px;               /* même bord droit que la card date */
        max-width: calc(100% - 16px - 150px - 16px);
        font-size: 9px; /* 7 px était illisible */
        line-height: 1.5;
        text-align: left; /* bloc collé à droite, lignes ferrées à gauche */
    }

    /* Card logo : en haut à gauche */
    #logo-block {
        top: 16px;
        bottom: auto;
        left: 16px;
        gap: 0;
    }

    /* Compteur glitch : détaché de la card logo, en bas à droite */
    #glitch-counter {
        position: fixed;
        bottom: 24px;
        right: 16px;
        font-size: 14px;
    }

    .logo-info {
        width: 180px;
        gap: 12px;
    }

    .logo-img {
        width: 90px;
    }

    .teaser {
        font-size: 9px;
    }

    /* Réseaux : une card par lien, empilées en bas à gauche, sans la ligne intérieure */
    #socials.glass-panel {
        bottom: 20px;
        left: 16px;
        right: auto;
        padding: 0;
        border: none;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        clip-path: none;
    }

    #socials.glass-panel::before,
    #social-bar {
        display: none;
    }

    .social-links {
        gap: 8px;
        padding-left: 0;
    }

    .social-links a {
        padding: 12px 18px;
        font-size: 13px;
        border: 1px solid var(--glass-border);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        clip-path: var(--glass-clip);
    }

    #gb-left {
        top: 25%;
    }

    #gb-left .g-bar {
        height: 40px;
    }

    #ambient-light {
        display: none;
    }

    html, body {
        cursor: auto;
    }

    a, button {
        cursor: auto;
    }

    #cursor-lens {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-text {
        font-size: clamp(24px, 10vw, 44px);
        top: 44%;
    }

    #skull-wrapper {
        bottom: calc(100vh - 30vh + 0.24 * 123vh - 123vh);
    }

    #skull-img {
        height: 123vh;
        max-height: 1010px;
    }

    .logo-img {
        width: 70px;
    }

    /* Card logo étroite : sous-titre resserré pour ne pas couper « SYS.OVERRIDE » en plein mot */
    .teaser-subtitle {
        letter-spacing: 0.02em;
        font-size: 8px;
    }

    .logo-info {
        width: 150px;
    }

    #data-block {
        max-width: calc(100% - 16px - 150px - 24px);
    }
}

/* Téléphone en paysage : peu de hauteur, le profil chevaucherait le logo et le titre */
@media (max-height: 500px) and (orientation: landscape) {
    .db-coords,
    #skull-piece {
        display: none;
    }

    .hero-text {
        top: 38%;
    }
}

/* Écran tactile : liens réseaux à 44 px de haut minimum (WCAG 2.5.5) */
@media (pointer: coarse) {
    .social-links a {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* Petits Android (≤ 400 px) : le profil tient sur une ligne par entrée à côté de la card logo */
@media (max-width: 400px) {
    .logo-info {
        width: 140px;
    }

    #data-block {
        max-width: calc(100% - 16px - 140px - 20px);
    }

    .db-coords {
        font-size: 8px;
    }
}