/* =========================================================
   Grid System (Bootstrap-like) – CIH Bank Etudes Immobilières
   ========================================================= */

/* Breakpoints + container widths */
:root{
  --container-padding: 16px;

  --gutter-x: 24px;
  --gutter-y: 24px;

  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
}

/* Containers */
.container,
.container-fluid{
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container{ max-width: 100%; }
@media (min-width: 576px){ .container{ max-width: var(--container-sm); } }
@media (min-width: 768px){ .container{ max-width: var(--container-md); } }
@media (min-width: 992px){ .container{ max-width: var(--container-lg); } }
@media (min-width: 1200px){ .container{ max-width: var(--container-xl); } }
@media (min-width: 1400px){ .container{ max-width: var(--container-xxl); } }

/* Row */
.row{
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter-x) / -2);
  margin-block: calc(var(--gutter-y) / -2);
}

/* Col base */
[class^="col-"], [class*=" col-"], .col, .col-auto{
  padding-inline: calc(var(--gutter-x) / 2);
  padding-block: calc(var(--gutter-y) / 2);
  min-width: 0;
}

/* Auto columns */
.col{ flex: 1 0 0%; }
.col-auto{ flex: 0 0 auto; width: auto; }

/* 12 columns (mobile first) */
.col-1{ width: 8.333333%; }
.col-2{ width: 16.666667%; }
.col-3{ width: 25%; }
.col-4{ width: 33.333333%; }
.col-5{ width: 41.666667%; }
.col-6{ width: 50%; }
.col-7{ width: 58.333333%; }
.col-8{ width: 66.666667%; }
.col-9{ width: 75%; }
.col-10{ width: 83.333333%; }
.col-11{ width: 91.666667%; }
.col-12{ width: 100%; }

/* Make .col-? behave like bootstrap */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
  flex: 0 0 auto;
}

/* Offsets */
.offset-1{ margin-left: 8.333333%; }
.offset-2{ margin-left: 16.666667%; }
.offset-3{ margin-left: 25%; }
.offset-4{ margin-left: 33.333333%; }
.offset-5{ margin-left: 41.666667%; }
.offset-6{ margin-left: 50%; }

/* SM */
@media (min-width: 576px){
  .col-sm{ flex: 1 0 0%; }
  .col-sm-auto{ flex: 0 0 auto; width: auto; }
  .col-sm-1{ width: 8.333333%; }
  .col-sm-2{ width: 16.666667%; }
  .col-sm-3{ width: 25%; }
  .col-sm-4{ width: 33.333333%; }
  .col-sm-5{ width: 41.666667%; }
  .col-sm-6{ width: 50%; }
  .col-sm-7{ width: 58.333333%; }
  .col-sm-8{ width: 66.666667%; }
  .col-sm-9{ width: 75%; }
  .col-sm-10{ width: 83.333333%; }
  .col-sm-11{ width: 91.666667%; }
  .col-sm-12{ width: 100%; }

  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{
    flex: 0 0 auto;
  }
}

/* MD */
@media (min-width: 768px){
  .col-md{ flex: 1 0 0%; }
  .col-md-auto{ flex: 0 0 auto; width: auto; }
  .col-md-1{ width: 8.333333%; }
  .col-md-2{ width: 16.666667%; }
  .col-md-3{ width: 25%; }
  .col-md-4{ width: 33.333333%; }
  .col-md-5{ width: 41.666667%; }
  .col-md-6{ width: 50%; }
  .col-md-7{ width: 58.333333%; }
  .col-md-8{ width: 66.666667%; }
  .col-md-9{ width: 75%; }
  .col-md-10{ width: 83.333333%; }
  .col-md-11{ width: 91.666667%; }
  .col-md-12{ width: 100%; }

  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{
    flex: 0 0 auto;
  }
}

/* LG */
@media (min-width: 992px){
  .col-lg{ flex: 1 0 0%; }
  .col-lg-auto{ flex: 0 0 auto; width: auto; }
  .col-lg-1{ width: 8.333333%; }
  .col-lg-2{ width: 16.666667%; }
  .col-lg-3{ width: 25%; }
  .col-lg-4{ width: 33.333333%; }
  .col-lg-5{ width: 41.666667%; }
  .col-lg-6{ width: 50%; }
  .col-lg-7{ width: 58.333333%; }
  .col-lg-8{ width: 66.666667%; }
  .col-lg-9{ width: 75%; }
  .col-lg-10{ width: 83.333333%; }
  .col-lg-11{ width: 91.666667%; }
  .col-lg-12{ width: 100%; }

  .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{
    flex: 0 0 auto;
  }
}

/* XL */
@media (min-width: 1200px){
  .col-xl{ flex: 1 0 0%; }
  .col-xl-auto{ flex: 0 0 auto; width: auto; }
  .col-xl-1{ width: 8.333333%; }
  .col-xl-2{ width: 16.666667%; }
  .col-xl-3{ width: 25%; }
  .col-xl-4{ width: 33.333333%; }
  .col-xl-5{ width: 41.666667%; }
  .col-xl-6{ width: 50%; }
  .col-xl-7{ width: 58.333333%; }
  .col-xl-8{ width: 66.666667%; }
  .col-xl-9{ width: 75%; }
  .col-xl-10{ width: 83.333333%; }
  .col-xl-11{ width: 91.666667%; }
  .col-xl-12{ width: 100%; }

  .col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{
    flex: 0 0 auto;
  }
}

/* Utilities */
.g-0{ --gutter-x: 0px; --gutter-y: 0px; }
.g-1{ --gutter-x: 8px; --gutter-y: 8px; }
.g-2{ --gutter-x: 16px; --gutter-y: 16px; }
.g-3{ --gutter-x: 24px; --gutter-y: 24px; }
.g-4{ --gutter-x: 32px; --gutter-y: 32px; }

.align-items-start{ align-items: flex-start; }
.align-items-center{ align-items: center; }
.align-items-end{ align-items: flex-end; }

.justify-start{ justify-content: flex-start; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end{ justify-content: flex-end; }