/* ========================================
   RESPONSIVE MOBILE - REFACTORISÉ ET OPTIMISÉ
   ======================================== */

/* ========================================
   RÈGLES COMMUNES À TOUS LES MOBILES
   (max-width: 1024px)
   ======================================== */

@media screen and (max-width: 1024px) {

    /* ---- CONFIGURATION GÉNÉRALE ---- */

    body {
        padding: var(--padding-page);
    }

    body:has(.design-container) {
        height: auto;
        min-height: 100vh;
    }

    .container {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
        grid-template-rows: auto 10vh 1fr auto;
        gap: var(--gap-mobile);
    }

    body:has(.design-container) .container {
        grid-template-rows: auto 10vh repeat(5, auto) auto;
        padding-bottom: 0;
    }

    /* ---- HEADER ---- */

    .header {
        grid-column: 1 / 2;
        grid-row: 1;
        overflow: hidden;
    }

    .nav {
        grid-column: 2 / 4;
        grid-row: 1;
        overflow: hidden;
    }

    .description {
        display: none;
    }

    .info {
        grid-column: 3 / 3;
        grid-row: 1;
        display: flex;
    }

    .cv {
        grid-column: 4 / 4;
        grid-row: 1;
        display: flex;
    }

    /* ---- LISTE PROJETS (INDEX) ---- */

    .project-list {
        grid-column: 1 / 5;
        grid-row: 3;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
        row-gap: 3px;
        column-gap: var(--gap-mobile);
        align-content: start;
    }

    .project-item {
        display: contents;
    }

    .project-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
    }

    .project-item span:first-child {
        grid-column: 1;
    }

    .project-item span:nth-child(2) {
        grid-column: 2 / 4;
    }

    .project-item span:nth-child(3) {
        display: none;
    }

    .project-item span:last-child {
        grid-column: 4;
    }

    /* ---- PAGE ABOUT - SECTIONS ---- */

    /* Design */
    .design-container {
        grid-column: 1 / 5;
        grid-row: 3;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
        gap: var(--gap-mobile);
        margin-bottom: var(--gap-section);
    }

    .design-label {
        grid-column: 1 / 5;
        text-align: left;
        margin-bottom: var(--gap-mobile);
    }

    .design-text {
        grid-column: 1 / 5;
    }

    /* Recherche */
    .research-container {
        grid-column: 1 / 5;
        grid-row: 4;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
        gap: var(--gap-mobile);
        margin-bottom: var(--gap-section);
    }

    .research-label {
        grid-column: 1 / 5;
        text-align: left;
        margin-bottom: var(--gap-mobile);
    }

    .research-text {
        grid-column: 1 / 5;
    }

    /* Services - Grille 2x2 */
    .service-container {
        grid-column: 1 / 5;
        grid-row: 5;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
        gap: var(--gap-mobile);
        margin-bottom: var(--gap-section);
    }

    .service-label {
        grid-column: 1 / 5;
        text-align: left;
        margin-bottom: var(--gap-mobile);
    }

    .service-categorie {
        grid-column: 1 / 5;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-mobile);
    }

    .identity {
        grid-column: 1 / 2;
        grid-row: 1;
        row-gap: 0;
    }

    .print {
        grid-column: 2 / 3;
        grid-row: 1;
        row-gap: 0;
    }

    .web {
        grid-column: 1 / 3;
        grid-row: 2;
        row-gap: 0;
        margin-top: 15px;
    }

    .web-label,
    .print-label,
    .identity-label {
        display: block;
        margin-bottom: var(--gap-mobile);
        padding-left: var(--gap-mobile);
    }

    .web-text span,
    .print-text span,
    .identity-text span {
        padding-left: var(--gap-mobile);
    }

    /* Soft Skills - Liste inline */
    .soft-skill-container {
        grid-column: 1 / 5;
        grid-row: 6;
        display: block;
        margin-bottom: var(--gap-section);
    }

    .soft-skill-label {
        display: block;
        text-align: left;
        margin-bottom: var(--gap-mobile);
    }

    .soft-skill-text {
        display: inline;
    }

    .soft-skill-text span {
        display: inline;
    }

    .soft-skill-text span::after {
        content: ", ";
    }

    .soft-skill-text:last-of-type span:last-child::after {
        content: "";
    }

    /* Site (Colophon) */
    .site-container {
        grid-column: 1 / 5;
        grid-row: 7;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
        gap: var(--gap-mobile);
        margin-bottom: var(--gap-section);
    }

    .site-label {
        grid-column: 1 / 5;
        text-align: left;
        margin-bottom: var(--gap-mobile);
    }

    .site-text {
        grid-column: 1 / 5;
    }

    /* ---- FOOTER ---- */

    .footer-mail-label {
        grid-column: 1 / 3;
        grid-row: 4;
        display: flex;
        align-items: flex-end;
    }

    .footer-mail {
        grid-column: 2 / 5;
        grid-row: 4;
        display: flex;
    }

    .footer-date {
        grid-column: 4 / 4;
        grid-row: 4;
    }

    /* Ajustement footer pour page about */
    body:has(.design-container) .footer-date,
    body:has(.design-container) .footer-mail-label,
    body:has(.design-container) .footer-mail {
        grid-row: 8;
    }

    /* ---- PAGES PROJETS ---- */

    /* Configuration body et container */
    body:has(.project-number) {
        height: 100vh;
        min-height: 100vh;
    }

    body:has(.project-number) .container {
        grid-template-rows: auto 10vh auto auto auto auto auto;
        height: 100%;
    }

    /* Informations projet */
    .project-number {
        grid-column: 1 / 2;
        grid-row: 3;
        align-self: start;
    }

    .project-title {
        grid-column: 2 / 5;
        grid-row: 3;
        align-self: start;
    }

    .project-description {
        grid-column: 1 / 5;
        grid-row: 4;
        margin-bottom: var(--gap-mobile);
    }

    /* Mots-clés affichés sur mobile */
    .key-words {
        display: block;
        grid-column: 1 / 5;
        grid-row: 5;
        margin-bottom: var(--gap-section);
        font-size: 0.9em;
        opacity: 0.8;
    }

    /* Galerie images - scroll horizontal */
    .project-images {
        grid-column: 1 / 5;
        grid-row: 6;
        display: flex;
        flex-direction: row;
        gap: var(--gap-small);
        overflow-x: auto;
        overflow-y: hidden;
        align-items: flex-start;

        /* Masque la scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .project-images::-webkit-scrollbar {
        display: none;
    }

    /* Ajustement footer pour pages projets */
    body:has(.project-number) .footer-date,
    body:has(.project-number) .footer-mail-label,
    body:has(.project-number) .footer-mail {
        grid-row: 7;
    }
}

/* ========================================
   SPÉCIFICITÉS PETITS FORMATS
   (max-width: 599px)
   ======================================== */

@media screen and (max-width: 599px) {

    /* Images plus petites pour les petits écrans */
    .project-images video,
    .project-images img {
        height: 30vh;
        min-height: 200px;
        max-height: 400px;
        width: auto;
        flex-shrink: 0;
        object-fit: contain;
    }
}

/* ========================================
   SPÉCIFICITÉS GRANDS FORMATS MOBILES
   (600px - 1024px)
   ======================================== */

@media screen and (min-width: 600px) and (max-width: 1024px) {

    /* Images légèrement plus grandes pour les grands écrans */
    .project-images video,
    .project-images img {
        height: 35vh;
        min-height: 200px;
        max-height: 450px;
        width: auto;
        flex-shrink: 0;
        object-fit: contain;
    }
}

/* ========================================
   SCROLL VERTICAL POUR TÉLÉPHONES
   (iPhone SE, iPhone 12 Pro, etc.)
   ======================================== */

@media screen and (max-width: 1024px) and (max-height: 844px) {

    body:has(.project-number) {
        height: auto;
    }

    body:has(.project-number) .container {
        height: auto;
        min-height: 100vh;
    }
}