/* =====================================================================
   RESPONSIVE — téléphones / tablettes (≤ 768 px) et écrans très courts
   ---------------------------------------------------------------------
   Ce fichier ne fait qu'AJOUTER des règles dans des media queries :
   style.css (version standard, écran large) reste strictement inchangé.
   Au-delà de 768 px de large, rien de ce fichier ne s'applique, sauf le
   bloc final « appareils tactiles » qui ne fait que neutraliser les états
   :hover collants sur écran tactile.

   Principe : mêmes blocs, même hiérarchie, mêmes couleurs, mêmes
   transitions ; seule la mise en page est repensée pour la largeur.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. HEADER — retour à la ligne réservé au mobile
   ---------------------------------------------------------------------
   Dans le HTML, la description est écrite
   « Designer Graphique<span class="desc_plus"> + </span><br class="desc_br"/>Motion Designer 2D/3D ».
   Hors mobile, ce <br> est masqué : le rendu écran large est strictement
   celui d'origine (« Designer Graphique + Motion Designer 2D/3D »). */
.desc_br {
    display: none;
}


/* ---------------------------------------------------------------------
   1. STRUCTURE — commun au mobile (≤ 768 px) et aux écrans très courts
   --------------------------------------------------------------------- */
@media (max-width: 768px), (max-height: 480px) {

    /* L'ancien message « utilisez un écran plus large » n'a plus lieu d'être */
    #mobile-blocker {
        display: none;
    }

    body {
        overflow: hidden;              /* le site tient dans l'écran, on scrolle dans les blocs */
    }

    html {
        -webkit-text-size-adjust: 100%; /* iOS : pas de zoom automatique du texte */
    }

    /* Titre : même police, métriques verticales fixées (déclarée dans fonts.css)
       pour que le haut des lettres soit au même endroit sur PC et sur téléphone */
    h1 {
        font-family: 'New_Burns_Mobile';
    }

    /* Hauteur réelle du viewport mobile (barre d'adresse comprise).
       Les navigateurs qui ne connaissent pas dvh gardent les 100vh de style.css. */
    #content {
        height: 100dvh;
    }

    /* Le bloc principal occupe tout l'espace restant sous le header,
       au lieu d'une hauteur fixe de 63vh */
    main {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #main_display {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #main_showreel,
    #main_list,
    #main_vrac {
        height: auto;
        max-height: none;
        flex: 1;
        min-height: 0;
    }

    /* Au chargement, le bloc showreel est un simple bloc (le JS ne le passe
       en flex qu'au changement d'onglet) : on le déclare flex pour que la
       vidéo remplisse la hauteur disponible */
    #main_showreel {
        display: flex;
    }

    #preview_container {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    #main_list_project,
    #vrac_background,
    #main_list_images {
        overscroll-behavior: contain;  /* pas de « pull to refresh » ni rebond de page */
    }

    /* Lightbox du showreel : l'iframe 16/9 tient dans la largeur ET la hauteur */
    #lightbox_content {
        width: 100%;
        justify-content: center;
    }

    #lightbox_content iframe {
        width: min(94vw, calc(88vh * 16 / 9));
        height: auto;
    }

    /* Lightbox : fondu et flou du fond un peu plus rapides que sur écran
       large (0.4 s / 0.6 s dans style.css), au même rythme que les visuels */
    #lightbox_overlay {
        transition: opacity 0.3s ease, backdrop-filter 0.4s ease;
    }

    /* Visuel du vrac ou d'une galerie ouvert dans la lightbox (mobile) :
       mêmes proportions d'écran que le showreel, image entière, coins
       arrondis identiques */
    #lightbox_content img {
        display: block;
        width: auto;
        height: auto;
        max-width: 94vw;
        max-height: 88vh;
        max-height: 88dvh;
        object-fit: contain;
        border-radius: 6px;
    }
}


/* ---------------------------------------------------------------------
   2. MISE EN PAGE MOBILE (≤ 768 px)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

    * {
        -webkit-tap-highlight-color: transparent;
    }

    #content {
        padding: 14px;
    }

    #content.vrac-active {
        padding: 0;
    }

    /* --- HEADER : comme sur écran large, nom à gauche et description à
       droite, tous deux alignés sur le haut de l'écran --- */

    header {
        align-items: flex-start;
        gap: 12px;
    }

    /* Tailles de texte réduites par rapport à l'écran large (3.8 / 1.25 / 0.85 rem) :
       le nom suit la largeur de l'écran, sans jamais dépasser 2.2 rem */
    h1 {
        font-size: clamp(1.5rem, 8.5vw, 2.2rem);
    }

    #header_name {
        letter-spacing: -1.5px;
    }

    #header_desc {
        align-self: flex-start;
        gap: 4px;
        margin-top: -1px;       /* haut des capitales de la description au niveau de celles du titre */
    }

    #header_desc h3 {
        font-size: 0.55rem;
    }

    h2 {
        font-size: 0.9rem;
    }

    h3 {
        font-size: 0.6rem;
    }

    /* Description : « Designer Graphique » puis « Motion Designer 2D/3D »
       sur la ligne suivante, sans le « + » */
    .desc_plus {
        display: none;
    }

    .desc_br {
        display: inline;
    }

    /* --- SÉLECTEUR : onglets et catégories sur une seule et même ligne,
       comme sur écran large, avec des tailles ajustées séparément pour que
       tout tienne même sur un écran de 320 px --- */

    /* Respiration entre le header et le sélecteur, dans l'esprit de l'écran
       large (où le bloc principal est repoussé en bas) : proportionnelle à
       la hauteur de l'écran (13 %), entre 32 et 140 px */
    main {
        margin-top: clamp(32px, 13vh, 140px);
        margin-top: clamp(32px, 13dvh, 140px);
    }

    #main_selecteur {
        align-items: baseline;
        gap: 6px;
    }

    #main_affichage h3,
    #main_categories h3 {
        white-space: nowrap;
    }

    /* Les tailles suivent la largeur de l'écran (mesuré : les deux groupes
       tiennent côte à côte de 320 px à 768 px, avec une marge de sécurité) */
    #main_affichage h3 {
        font-size: clamp(0.44rem, 2.3vw, 0.6rem);
    }

    .affichage-tab {
        padding: 0 2px;
    }

    #main_categories h3 {
        font-size: clamp(0.35rem, 1.8vw, 0.52rem);
    }

    /* --- PROJETS : un seul trait entre deux projets. Par défaut un <hr>
       a une bordure haute ET basse (style « inset »), soit deux lignes
       superposées de 2 px au total ; on ne garde qu'une ligne de 1 px.
       L'opacité (0.4 / 1 sur le projet ouvert) reste pilotée par le JS. --- */

    #main_list_project hr {
        border: none;
        border-top: 1px solid var(--texte_base);
    }

    /* --- PROJETS : chaque ligne du tableau reste sur une seule ligne.
       La catégorie vient juste à droite du titre, en petit (60 % de la
       taille du titre) ; l'année reste alignée à droite. --- */

    .main_list_project_header {
        grid-template-columns: minmax(0, auto) auto 1fr;
        column-gap: 5px;
        align-items: baseline;
    }

    .main_list_project_header > * {
        white-space: nowrap;
    }

    .main_list_project_header > *:nth-child(2) {
        font-size: 0.6rem;
        justify-self: start;
    }

    /* Un titre trop long est coupé par des points de suspension… */
    .main_list_project_header > *:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* …sauf sur la ligne ouverte, qui affiche le titre en entier */
    .main_list_project_text.active .main_list_project_header > *:first-child {
        white-space: normal;
    }

    .main_list_project_details {
        width: 100%;
    }

    /* La liste ne se réduit jamais à 50 % : la galerie vient d'en bas */
    #main_list_project.narrow {
        width: 100%;
    }

    /* Pendant qu'une galerie est ouverte : la liste ne défile plus (la ligne
       active reste en haut) et la marge basse permet à n'importe quelle
       ligne, même la dernière, de monter jusqu'en haut de la liste */
    #main_list_project.gallery-open {
        overflow: hidden;
        padding-bottom: 100vh;
        padding-bottom: 100dvh;
    }

    /* --- GALERIE D'UN PROJET : panneau calé sous la ligne active, qui monte
       depuis le bas de l'écran. Son bord haut (top) est posé par le JS
       au bas de la ligne du projet ; le header, le sélecteur et la ligne
       (titre + description) restent visibles au-dessus. --- */

    #main_list_images {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
    }

    .project-gallery {
        padding: 14px;
    }

    .project-gallery.active {
        display: block;
    }

    .img_spe_2 {
        width: 100%;
    }

    /* --- VRAC : mosaïque 2 colonnes (3 sur tablette), espacements réduits --- */

    #vrac_background {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
        padding: 24px 16px 12px 16px;
    }

    #credits {
        padding-bottom: 4px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #vrac_background {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 28px;
        padding: 36px 28px 12px 28px;
    }
}


/* ---------------------------------------------------------------------
   3. ÉCRANS TRÈS COURTS mais larges (téléphone en paysage) :
      header sur une ligne conservé, simplement plus compact
   --------------------------------------------------------------------- */
@media (max-height: 480px) and (min-width: 769px) {
    h1 {
        font-size: 2.2rem;
    }

    #header_name {
        letter-spacing: -1.5px;
    }

    h2 {
        font-size: 1rem;
    }

    main {
        margin-top: 10px;
    }
}


/* ---------------------------------------------------------------------
   4. APPAREILS TACTILES : sans souris il n'y a pas de survol, on évite
      les états :hover qui restent « collés » après un appui
   --------------------------------------------------------------------- */
@media (hover: none) {

    #main_categories h3 span:hover {
        text-decoration: none;
    }

    #main_categories h3 span.selected {
        text-decoration: line-through;
    }

    #main_affichage h3 span:hover {
        text-decoration: none;
    }

    #main_affichage h3 span.active {
        text-decoration: underline;
    }

    .main_list_project_text:hover {
        padding-block: 7px;
    }

    .main_list_project_text.active {
        padding-block: 10px;
    }

    #header_desc a:hover,
    .main_list_project_details h3 a:hover {
        font-family: inherit;
    }

    #preview_container:hover #preview_video {
        transform: none;
    }
}