/* ============================================================
   SMART TECHNOLOGIES — RESPONSIVE RÉALISATIONS
   Même système de points de rupture que responsive-index.css :
   1290 · 1200 · 1024 · 900 · 769 · 600 · 485 · 425 · 375 · 320
   À charger APRÈS realisations.css
   (les règles à 1024px et 600px déjà présentes dans realisations.css
   sont conservées telles quelles — on complète les paliers manquants)
   ============================================================ */


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

    /* Réservé — pas d'ajustement nécessaire à ce palier sur cette page */

}


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

    /********************************* Filtres & grille **********************/



    /********************************* CTA **********************/

}


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

    /* Les règles de bento-grid à ce palier sont déjà dans realisations.css
       (2 colonnes) — pas de doublon ici */

    /********************************* Filtres & grille **********************/

    .bento-grid {
        grid-auto-rows: 200px;
    }

    /********************************* CTA **********************/

    .cta-actions {
        justify-content: center;
    }

}


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

    /********************************* Filtres & grille **********************/

    .filters-row {
        gap: 8px;
    }

    /********************************* CTA **********************/

}


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

    /********************************* Filtres & grille **********************/

    .filter-pill {
        font-size: 12.5px;
        padding: 9px 16px;
    }

    .proj-title {
        font-size: 15px;
    }

    .size-lg .proj-title {
        font-size: 18px;
    }

    .proj-desc {
        font-size: 11.5px;
    }

    .proj-modal-body {
        padding: 26px;
    }

    .proj-modal h3 {
        font-size: 21px;
    }

    .proj-modal p {
        font-size: 14px;
    }

    /********************************* CTA **********************/

    .wrap-cta {
        padding: 40px 24px;
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .primary-btn {
        width: 100%;
        justify-content: center;
    }

}


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

    /* Les règles de bento-grid à ce palier sont déjà dans realisations.css
       (1 colonne) — pas de doublon ici */

    /********************************* Filtres & grille **********************/

    .bento-grid {
        gap: 16px;
        grid-auto-rows: 220px;
    }

    .filters-row {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        margin-bottom: 34px;
    }

    .filter-pill {
        flex: none;
        white-space: nowrap;
    }

    .proj-card, .proj-card.size-lg, .proj-card.size-tall, .proj-card.size-sm {
    grid-column: unset !important;
    grid-row: unset !important;
}


    /********************************* CTA **********************/

    .cta h2,
    .wrap-cta h2 {
        font-size: 22px;
    }

    .wrapper-cta {
        padding-bottom: 160px;
    }
}


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

    .container {
        padding: 0 16px !important;
    }

    /********************************* Filtres & grille **********************/

    .proj-badge,
    .proj-cat {
        font-size: 10px;
        padding: 5px 10px;
    }

    .proj-body {
        padding: 16px;
    }

    .proj-expand {
        width: 28px;
        height: 28px;
    }

    .proj-modal-body {
        padding: 20px;
    }

    /********************************* CTA **********************/

}


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

    /* Réservé — pas d'ajustement nécessaire à ce palier sur cette page */

}


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

    /********************************* Filtres & grille **********************/

    .bento-grid {
        grid-auto-rows: 200px;
    }

    .proj-title {
        font-size: 14px;
    }

    .size-lg .proj-title {
        font-size: 16px;
    }

    .proj-modal h3 {
        font-size: 19px;
    }

    .proj-modal-tag {
        font-size: 10px;
        padding: 5px 12px;
    }

    /********************************* CTA **********************/

     .cta h2,
    .wrap-cta h2 {
        font-size: 19px;
    }

}


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

    /* Réservé — pas d'ajustement nécessaire à ce palier sur cette page */

}