/**

 * CSS Custom - Dioqa Starter Custom

 * Fichier principal pour vos styles custom

 *

 * @package Dioqa_Starter_Custom

 */



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

   IMPORTS COMPOSANTS

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



@import url('components/menu-desktop.css');

@import url('components/menu-mobile.css');

@import url('components/footer.css');

@import url('components/category-filter.css');

@import url('components/topbar.css');



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

   IMPORTS SECTIONS

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



@import url('sections/hero-home.css');

@import url('sections/hero-common.css');

@import url('sections/services-presentation.css');

@import url('sections/content-collage.css');

@import url('sections/slider-expertise.css');

@import url('sections/content-text-image.css');

@import url('sections/testimonial-slider.css');

@import url('sections/contact-form.css');

@import url('sections/content-direction.css');

@import url('sections/content-values.css');

@import url('sections/content-action.css');

@import url('sections/content-stats.css');

@import url('sections/content-trust.css');

@import url('sections/hero-activity.css');

@import url('sections/content-expert.css');

@import url('sections/content-engagement.css');

@import url('sections/content-accordion.css');

@import url('sections/content-features.css');



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

   STYLES GLOBAUX DU PROJET

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



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

   IMAGIFY / PICTURE ELEMENT FIX

   Corrige les styles quand Imagify wrap

   les images dans des <picture> elements

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



/* Picture elements should be display block by default */

picture {

  display: block;

}



/* Bootstrap width/height utilities - propagate to inner img */

picture.w-100 img,

picture.w-75 img,

picture.w-50 img,

picture.w-25 img,

picture.w-auto img {

  width: 100%;

}



picture.h-100 img,

picture.h-75 img,

picture.h-50 img,

picture.h-25 img,

picture.h-auto img {

  height: 100%;

}



/* Picture with both w-100 and h-100 */

picture.w-100.h-100 {

  width: 100%;

  height: 100%;

}



picture.w-100.h-100 img {

  width: 100%;

  height: 100%;

}



/* Bootstrap border-radius utilities */

picture.rounded img,

picture.rounded-0 img,

picture.rounded-1 img,

picture.rounded-2 img,

picture.rounded-3 img,

picture.rounded-4 img,

picture.rounded-5 img,

picture.rounded-circle img,

picture.rounded-pill img {

  border-radius: inherit;

}



/* Picture needs overflow hidden for border-radius to work */

picture.rounded,

picture.rounded-1,

picture.rounded-2,

picture.rounded-3,

picture.rounded-4,

picture.rounded-5,

picture.rounded-circle,

picture.rounded-pill {

  overflow: hidden;

}



/* Bootstrap object-fit utilities */

picture.object-fit-cover img,

picture[class*='object-fit-cover'] img {

  object-fit: cover;

}



picture.object-fit-contain img {

  object-fit: contain;

}



picture.object-fit-fill img {

  object-fit: fill;

}



picture.object-fit-none img {

  object-fit: none;

}



/* Position utilities for picture */

picture.position-relative {

  position: relative;

}



picture.position-absolute {

  position: absolute;

}



/* Hero Home - Image specific */

picture.hero-home__image {

  display: block;

  width: 100%;

  height: 100%;

}



picture.hero-home__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 1;

}



/* Generic img inside picture should inherit dimensions */

picture img {

  display: block;

  max-width: 100%;

  height: auto;

}



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

   COMPOSANTS CUSTOM

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



/* Vos composants personnalisés */



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

   RESPONSIVE

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



@media (max-width: 1199px) {

  /* Desktop petit */

}



@media (max-width: 991px) {

  /* Tablette */

}



@media (max-width: 767px) {

  /* Mobile */

}



@media (max-width: 575px) {

  /* Mobile petit */

}