/* ============================================
   CODER-MON-PROJET-SPECIFIC CSS
   Styles spécifiques à la page coder-mon-projet.html
   ============================================ */

.container-wide {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}

.serif-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}

.mono-text {
    font-family: var(--font-mono);
}

.code-block {
    background: #091A30;
    color: #FCF9EF;
    padding: 2rem;
    border-radius: 16px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    overflow-x: auto;
}

.code-line {
    display: block;
    margin-bottom: 0.5rem;
}

.token-const {
    color: #B48A3C;
}

.token-tag {
    color: #4aa7ff;
}

.token-attr {
    color: #9cdcfe;
}

.token-str {
    color: #ce9178;
}

/* ============================================
   RESPONSIVE FIXES - Coder Mon Projet
   ============================================ */

@media (max-width: 768px) {
    .container-wide {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Grilles */
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Code blocks */
    .code-block {
        padding: 1rem;
        font-size: 0.75rem;
    }

    /* Titres */
    .text-6xl,
    .md\:text-8xl {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }

    .text-5xl,
    .md\:text-6xl {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    }
}

@media (max-width: 480px) {
    .container-wide {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Cards tech */
    .p-8 {
        padding: 1.25rem !important;
    }

    .rounded-3xl {
        border-radius: 1rem !important;
    }

    /* Icons */
    .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .w-8.h-8 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* STRICT ALIGNMENT FOR HEADERS WITH ICONS */
.space-y-16 .flex.items-center.gap-4 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    /* Standardisé à 1.5rem partout */
    margin-bottom: 1.5rem !important;
}

/* Force icon container size */
.space-y-16 .flex.items-center.gap-4>div:first-child {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
    flex-shrink: 0 !important;
    border-radius: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Force text alignment inside header */
.space-y-16 .flex.items-center.gap-4 h3 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    align-self: center !important;
}

/* PROCESS SECTION MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {

    /* Images CARRÉES sur mobile (FIX pour correspondre au mockup) */
    .space-y-20 .h-\[400px\] {
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 300px !important;
        /* Limite largeur */
        aspect-ratio: 1 / 1 !important;
        /* Force le carré */
        margin: 0 auto !important;
        /* Centrer */
    }

    /* Garder les numéros d'étape grands sur mobile */
    .space-y-20 .text-6xl {
        font-size: 3.5rem !important;
        /* Assez grand pour contraster */
        line-height: 1 !important;
        flex-shrink: 0;
    }

    /* Ajuster l'alignement titre/numéro */
    .space-y-20 .flex.items-center.gap-4 {
        align-items: center !important;
        gap: 1rem !important;
    }

    .space-y-20 h3 {
        font-size: 1.75rem !important;
        /* Titre lisible */
        line-height: 1.2 !important;
    }
}