/* =============================================================================
   INSTALL COMMUNICATION 33
   STOREFRONT CHILD THEME

   FICHIER : assets/css/layout.css
   VERSION : 5.0.0

   ---------------------------------------------------------------------------

   FICHIER MAÎTRE DU LAYOUT

   Ce fichier est exclusivement responsable de :

   ✓ Variables globales
   ✓ Layout WordPress
   ✓ Layout Storefront
   ✓ Largeurs
   ✓ Conteneurs
   ✓ Grille
   ✓ Responsive
   ✓ Breakpoints

   ---------------------------------------------------------------------------

   RESET HTML

   Le reset est désormais externalisé dans :

       assets/css/reset.css

   Ce fichier ne doit plus contenir de reset.

   ---------------------------------------------------------------------------

   CLASSES PUBLIQUES DU FRAMEWORK

   .ic33-container
   .ic33-container-wide
   .ic33-container-narrow
   .ic33-container-fluid

   .ic33-section
   .ic33-grid
   .ic33-flex

=============================================================================*/


/* =============================================================================
   VARIABLES
=============================================================================*/

:root{

    /* =========================================================================
       COULEURS
    ========================================================================= */

    --ic33-primary:#0057A4;
    --ic33-primary-dark:#003A70;
    --ic33-secondary:#F58220;

    --ic33-white:#FFFFFF;
    --ic33-black:#111827;

    --ic33-text:#374151;
    --ic33-border:#E5E7EB;
    --ic33-background:#F8FAFC;

    --ic33-success:#16A34A;
    --ic33-warning:#F59E0B;
    --ic33-danger:#DC2626;



    /* =========================================================================
       TYPOGRAPHIE
    ========================================================================= */

    --ic33-font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --ic33-font-heading:
        "Inter",
        "Segoe UI",
        sans-serif;



    /* =========================================================================
       CONTENEURS
    ========================================================================= */

    /*
        Largeur maximale du contenu.

        C'est LA variable principale du thème.

        Aucun autre fichier ne devra modifier
        cette valeur.
    */

    --ic33-container-width:1720px;

    --ic33-container-wide:1840px;

    --ic33-container-narrow:1320px;



    /* =========================================================================
       GOUTTIÈRES
    ========================================================================= */

    --ic33-gutter-desktop:32px;

    --ic33-gutter-tablet:24px;

    --ic33-gutter-mobile:16px;



    /* =========================================================================
       ESPACEMENTS
    ========================================================================= */

    --ic33-space-0:0;

    --ic33-space-1:4px;
    --ic33-space-2:8px;
    --ic33-space-3:12px;
    --ic33-space-4:16px;
    --ic33-space-5:20px;
    --ic33-space-6:24px;
    --ic33-space-7:32px;
    --ic33-space-8:40px;
    --ic33-space-9:48px;
    --ic33-space-10:64px;
    --ic33-space-11:80px;
    --ic33-space-12:96px;
    --ic33-space-13:112px;
    --ic33-space-14:128px;



    /* =========================================================================
       RAYONS
    ========================================================================= */

    --ic33-radius-xs:4px;
    --ic33-radius-sm:8px;
    --ic33-radius-md:12px;
    --ic33-radius-lg:18px;
    --ic33-radius-xl:24px;
    --ic33-radius-pill:999px;



    /* =========================================================================
       OMBRES
    ========================================================================= */

    --ic33-shadow-xs:
        0 2px 4px rgba(0,0,0,.04);

    --ic33-shadow-sm:
        0 8px 18px rgba(0,0,0,.06);

    --ic33-shadow-md:
        0 16px 34px rgba(0,0,0,.10);

    --ic33-shadow-lg:
        0 28px 60px rgba(0,0,0,.14);



    /* =========================================================================
       TRANSITIONS
    ========================================================================= */

    --ic33-transition-fast:.20s ease;

    --ic33-transition:.35s ease;

    --ic33-transition-slow:.50s ease;



    /* =========================================================================
       Z-INDEX
    ========================================================================= */

    --ic33-z-dropdown:100;

    --ic33-z-sticky:900;

    --ic33-z-overlay:5000;

    --ic33-z-modal:9000;

    --ic33-z-loader:99999;

}
/* =============================================================================
   WORDPRESS / STOREFRONT LAYOUT
=============================================================================*/

/*
|--------------------------------------------------------------------------
| À partir d'ici, IC33 devient le maître du layout.
|
| Storefront fournit :
| - Les templates
| - Les hooks
| - La compatibilité WooCommerce
|
| IC33 fournit :
| - Les largeurs
| - Les conteneurs
| - Le responsive
| - La structure visuelle
|--------------------------------------------------------------------------
*/


.site{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    min-height:100vh;

}


.site-content{

    position:relative;

    flex:1 0 auto;

    width:100%;

}


.site-main{

    position:relative;

    width:100%;

}


.content-area{

    position:relative;

    width:100%;

}


.widget-area{

    display:none;

}



/* =============================================================================
   STOREFRONT OVERRIDE
=============================================================================*/

/*
|--------------------------------------------------------------------------
| Ces règles donnent la priorité au framework IC33.
| Elles seront renforcées par enqueue.php qui chargera nos CSS après
| ceux du thème parent.
|--------------------------------------------------------------------------
*/


.site,
.site-content,
.site-main,
.content-area{

    max-width:none;

}


.storefront-full-width-content .site-main,
.storefront-full-width-content .content-area{

    width:100%;

    max-width:none;

}


.left-sidebar .content-area,
.right-sidebar .content-area{

    width:100%;

}


.left-sidebar .widget-area,
.right-sidebar .widget-area{

    display:none;

}



/* =============================================================================
   CONTENEURS
=============================================================================*/

/*
|--------------------------------------------------------------------------
| Tous les composants utiliseront UNIQUEMENT ces classes.
|--------------------------------------------------------------------------
*/


.col-full{

    width:min(
        calc(100% - (var(--ic33-gutter-desktop) * 2)),
        var(--ic33-container-width)
    );

    max-width:none;

    margin-inline:auto;

    padding:0;

}


.ic33-container{

    width:min(
        calc(100% - (var(--ic33-gutter-desktop) * 2)),
        var(--ic33-container-width)
    );

    margin-inline:auto;

}


.ic33-container-wide{

    width:min(
        calc(100% - (var(--ic33-gutter-desktop) * 2)),
        var(--ic33-container-wide)
    );

    margin-inline:auto;

}


.ic33-container-narrow{

    width:min(
        calc(100% - (var(--ic33-gutter-desktop) * 2)),
        var(--ic33-container-narrow)
    );

    margin-inline:auto;

}


.ic33-container-fluid{

    width:100%;

    padding-inline:var(--ic33-gutter-desktop);

}



/* =============================================================================
   SECTIONS
=============================================================================*/


.ic33-section{

    position:relative;

    width:100%;

    padding-block:var(--ic33-space-12);

}


.ic33-section-sm{

    padding-block:var(--ic33-space-9);

}


.ic33-section-lg{

    padding-block:var(--ic33-space-14);

}
/* =============================================================================
   IC33 GRID SYSTEM
=============================================================================*/

/*
|--------------------------------------------------------------------------
| Framework de grille du thème
| Tous les composants (Header, Hero, Services, Produits, Footer...)
| utiliseront uniquement ces classes.
|--------------------------------------------------------------------------
*/

.ic33-grid{

    display:grid;

    width:100%;

    gap:var(--ic33-space-8);

}

.ic33-grid-1{

    grid-template-columns:1fr;

}

.ic33-grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.ic33-grid-3{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.ic33-grid-4{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

.ic33-grid-5{

    grid-template-columns:repeat(5,minmax(0,1fr));

}

.ic33-grid-6{

    grid-template-columns:repeat(6,minmax(0,1fr));

}



/* =============================================================================
   FLEXBOX
=============================================================================*/

.ic33-flex{

    display:flex;

}

.ic33-inline-flex{

    display:inline-flex;

}

.ic33-flex-column{

    flex-direction:column;

}

.ic33-flex-wrap{

    flex-wrap:wrap;

}

.ic33-flex-nowrap{

    flex-wrap:nowrap;

}

.ic33-items-start{

    align-items:flex-start;

}

.ic33-items-center{

    align-items:center;

}

.ic33-items-end{

    align-items:flex-end;

}

.ic33-justify-start{

    justify-content:flex-start;

}

.ic33-justify-center{

    justify-content:center;

}

.ic33-justify-between{

    justify-content:space-between;

}

.ic33-justify-around{

    justify-content:space-around;

}

.ic33-justify-evenly{

    justify-content:space-evenly;

}

.ic33-justify-end{

    justify-content:flex-end;

}



/* =============================================================================
   GAP
=============================================================================*/

.ic33-gap-xs{

    gap:var(--ic33-space-2);

}

.ic33-gap-sm{

    gap:var(--ic33-space-4);

}

.ic33-gap-md{

    gap:var(--ic33-space-6);

}

.ic33-gap-lg{

    gap:var(--ic33-space-8);

}

.ic33-gap-xl{

    gap:var(--ic33-space-10);

}



/* =============================================================================
   HELPERS
=============================================================================*/

.ic33-w-100{

    width:100%;

}

.ic33-h-100{

    height:100%;

}

.ic33-relative{

    position:relative;

}

.ic33-absolute{

    position:absolute;

}

.ic33-overflow-hidden{

    overflow:hidden;

}

.ic33-text-center{

    text-align:center;

}

.ic33-text-left{

    text-align:left;

}

.ic33-text-right{

    text-align:right;

}
/* =============================================================================
   RESPONSIVE FRAMEWORK
=============================================================================*/

/*
|--------------------------------------------------------------------------
| Les breakpoints sont définis UNE SEULE FOIS dans le thème.
| Aucun autre fichier CSS ne devra les redéfinir.
|--------------------------------------------------------------------------
*/


/* ============================================================================
   DESKTOP XL
============================================================================ */

@media (max-width:1600px){

    :root{

        --ic33-container-width:1500px;

    }

}


/* ============================================================================
   DESKTOP
============================================================================ */

@media (max-width:1400px){

    :root{

        --ic33-container-width:1320px;

    }

}


/* ============================================================================
   LAPTOP
============================================================================ */

@media (max-width:1200px){

    :root{

        --ic33-gutter-desktop:24px;

    }

    .col-full,
    .ic33-container,
    .ic33-container-wide,
    .ic33-container-narrow{

        width:calc(100% - (var(--ic33-gutter-desktop) * 2));

    }

    .ic33-container-fluid{

        padding-inline:var(--ic33-gutter-desktop);

    }

    .ic33-grid-6{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

    .ic33-grid-5{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

    .ic33-grid-4{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}


/* ============================================================================
   TABLETTE
============================================================================ */

@media (max-width:992px){

    :root{

        --ic33-gutter-desktop:20px;

        --ic33-space-12:80px;
        --ic33-space-13:96px;
        --ic33-space-14:112px;

    }

    .col-full,
    .ic33-container,
    .ic33-container-wide,
    .ic33-container-narrow{

        width:calc(100% - (var(--ic33-gutter-desktop) * 2));

    }

    .ic33-container-fluid{

        padding-inline:var(--ic33-gutter-desktop);

    }

    .ic33-grid-6,
    .ic33-grid-5,
    .ic33-grid-4,
    .ic33-grid-3{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}


/* ============================================================================
   MOBILE
============================================================================ */

@media (max-width:768px){

    :root{

        --ic33-gutter-desktop:16px;

        --ic33-space-10:56px;
        --ic33-space-11:64px;
        --ic33-space-12:72px;
        --ic33-space-13:80px;
        --ic33-space-14:96px;

    }

    .col-full,
    .ic33-container,
    .ic33-container-wide,
    .ic33-container-narrow{

        width:calc(100% - (var(--ic33-gutter-desktop) * 2));

    }

    .ic33-container-fluid{

        padding-inline:var(--ic33-gutter-desktop);

    }

    .ic33-grid,
    .ic33-grid-2,
    .ic33-grid-3,
    .ic33-grid-4,
    .ic33-grid-5,
    .ic33-grid-6{

        grid-template-columns:1fr;

    }

    .ic33-flex{

        flex-wrap:wrap;

    }

}


/* ============================================================================
   PETITS MOBILES
============================================================================ */

@media (max-width:480px){

    :root{

        --ic33-gutter-desktop:14px;

    }

    .col-full,
    .ic33-container,
    .ic33-container-wide,
    .ic33-container-narrow{

        width:calc(100% - (var(--ic33-gutter-desktop) * 2));

    }

    .ic33-container-fluid{

        padding-inline:var(--ic33-gutter-desktop);

    }

}

/* ==========================================================================
   PAGE D'ACCUEIL : pleine largeur
   ========================================================================== */

.home .col-full{

    width:100%;

    max-width:none;

    margin:0;

    padding:0;

}
/* =============================================================================
   FIN DU FICHIER
=============================================================================*/