/* ================================================================
   grid.css — Système de grille responsive — Ovision Blois
   Vanilla CSS, sans framework
   Breakpoints : sm 576 | md 768 | lg 992 | xl 1200 | xxl 1400
   ================================================================ */

/* ----------------------------------------------------------------
   1. Variables
   ---------------------------------------------------------------- */
:root {
    --gutter:       24px;   /* espace entre colonnes */
    --gutter-half:  12px;
    --container-sm:  540px;
    --container-md:  720px;
    --container-lg:  960px;
    --container-xl: 1140px;
    --container-xxl:1320px;
}

/* ----------------------------------------------------------------
   2. Reset boîte
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   3. Container
   ---------------------------------------------------------------- */
.container,
.container-fluid {
    width: 100%;
    padding-right: var(--gutter-half);
    padding-left:  var(--gutter-half);
    margin-right: auto;
    margin-left:  auto;
}

.container-fluid { 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); } }

/* ----------------------------------------------------------------
   4. Row (flexbox)
   ---------------------------------------------------------------- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-half) * -1);
    margin-left:  calc(var(--gutter-half) * -1);
}

/* alignements verticaux */
.row.align-top     { align-items: flex-start; }
.row.align-center  { align-items: center;      }
.row.align-bottom  { align-items: flex-end;    }
.row.align-stretch { align-items: stretch;     }

/* alignements horizontaux */
.row.justify-start   { justify-content: flex-start;    }
.row.justify-center  { justify-content: center;        }
.row.justify-end     { justify-content: flex-end;      }
.row.justify-between { justify-content: space-between; }
.row.justify-around  { justify-content: space-around;  }
.row.justify-evenly  { justify-content: space-evenly;  }

/* gutters alternatifs */
.row.no-gutter           { margin-right: 0; margin-left: 0; }
.row.no-gutter > [class*="col"] { padding-right: 0; padding-left: 0; }

.row.gutter-sm > [class*="col"] { padding-right: 8px;  padding-left: 8px;  }
.row.gutter-lg > [class*="col"] { padding-right: 24px; padding-left: 24px; }

/* ----------------------------------------------------------------
   5. Colonnes (base mobile-first = 100%)
   ---------------------------------------------------------------- */
[class*="col"] {
    padding-right: var(--gutter-half);
    padding-left:  var(--gutter-half);
    width: 100%;
    min-width: 0; /* évite le débordement sur flex */
}

/* col auto (prend l'espace restant) */
.col    { flex: 1 1 0%; }
.col-auto { flex: 0 0 auto; width: auto; }

/* Colonnes fixes (mobile-first, toujours actives) */
.col-1  { flex: 0 0 8.3333%;   max-width: 8.3333%;   }
.col-2  { flex: 0 0 16.6667%;  max-width: 16.6667%;  }
.col-3  { flex: 0 0 25%;       max-width: 25%;        }
.col-4  { flex: 0 0 33.3333%;  max-width: 33.3333%;  }
.col-5  { flex: 0 0 41.6667%;  max-width: 41.6667%;  }
.col-6  { flex: 0 0 50%;       max-width: 50%;        }
.col-7  { flex: 0 0 58.3333%;  max-width: 58.3333%;  }
.col-8  { flex: 0 0 66.6667%;  max-width: 66.6667%;  }
.col-9  { flex: 0 0 75%;       max-width: 75%;        }
.col-10 { flex: 0 0 83.3333%;  max-width: 83.3333%;  }
.col-11 { flex: 0 0 91.6667%;  max-width: 91.6667%;  }
.col-12 { flex: 0 0 100%;      max-width: 100%;       }

/* ----------------------------------------------------------------
   6. Colonnes responsive — sm (≥576px)
   ---------------------------------------------------------------- */
@media (min-width: 576px) {
    .col-sm      { flex: 1 1 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1    { flex: 0 0 8.3333%;   max-width: 8.3333%;   }
    .col-sm-2    { flex: 0 0 16.6667%;  max-width: 16.6667%;  }
    .col-sm-3    { flex: 0 0 25%;       max-width: 25%;        }
    .col-sm-4    { flex: 0 0 33.3333%;  max-width: 33.3333%;  }
    .col-sm-5    { flex: 0 0 41.6667%;  max-width: 41.6667%;  }
    .col-sm-6    { flex: 0 0 50%;       max-width: 50%;        }
    .col-sm-7    { flex: 0 0 58.3333%;  max-width: 58.3333%;  }
    .col-sm-8    { flex: 0 0 66.6667%;  max-width: 66.6667%;  }
    .col-sm-9    { flex: 0 0 75%;       max-width: 75%;        }
    .col-sm-10   { flex: 0 0 83.3333%;  max-width: 83.3333%;  }
    .col-sm-11   { flex: 0 0 91.6667%;  max-width: 91.6667%;  }
    .col-sm-12   { flex: 0 0 100%;      max-width: 100%;       }
}

/* ----------------------------------------------------------------
   7. Colonnes responsive — md (≥768px)
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
    .col-md      { flex: 1 1 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1    { flex: 0 0 8.3333%;   max-width: 8.3333%;   }
    .col-md-2    { flex: 0 0 16.6667%;  max-width: 16.6667%;  }
    .col-md-3    { flex: 0 0 25%;       max-width: 25%;        }
    .col-md-4    { flex: 0 0 33.3333%;  max-width: 33.3333%;  }
    .col-md-5    { flex: 0 0 41.6667%;  max-width: 41.6667%;  }
    .col-md-6    { flex: 0 0 50%;       max-width: 50%;        }
    .col-md-7    { flex: 0 0 58.3333%;  max-width: 58.3333%;  }
    .col-md-8    { flex: 0 0 66.6667%;  max-width: 66.6667%;  }
    .col-md-9    { flex: 0 0 75%;       max-width: 75%;        }
    .col-md-10   { flex: 0 0 83.3333%;  max-width: 83.3333%;  }
    .col-md-11   { flex: 0 0 91.6667%;  max-width: 91.6667%;  }
    .col-md-12   { flex: 0 0 100%;      max-width: 100%;       }
}

/* ----------------------------------------------------------------
   8. Colonnes responsive — lg (≥992px)
   ---------------------------------------------------------------- */
@media (min-width: 992px) {
    .col-lg      { flex: 1 1 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1    { flex: 0 0 8.3333%;   max-width: 8.3333%;   }
    .col-lg-2    { flex: 0 0 16.6667%;  max-width: 16.6667%;  }
    .col-lg-3    { flex: 0 0 25%;       max-width: 25%;        }
    .col-lg-4    { flex: 0 0 33.3333%;  max-width: 33.3333%;  }
    .col-lg-5    { flex: 0 0 41.6667%;  max-width: 41.6667%;  }
    .col-lg-6    { flex: 0 0 50%;       max-width: 50%;        }
    .col-lg-7    { flex: 0 0 58.3333%;  max-width: 58.3333%;  }
    .col-lg-8    { flex: 0 0 66.6667%;  max-width: 66.6667%;  }
    .col-lg-9    { flex: 0 0 75%;       max-width: 75%;        }
    .col-lg-10   { flex: 0 0 83.3333%;  max-width: 83.3333%;  }
    .col-lg-11   { flex: 0 0 91.6667%;  max-width: 91.6667%;  }
    .col-lg-12   { flex: 0 0 100%;      max-width: 100%;       }
}

/* ----------------------------------------------------------------
   9. Colonnes responsive — xl (≥1200px)
   ---------------------------------------------------------------- */
@media (min-width: 1200px) {
    .col-xl      { flex: 1 1 0%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1    { flex: 0 0 8.3333%;   max-width: 8.3333%;   }
    .col-xl-2    { flex: 0 0 16.6667%;  max-width: 16.6667%;  }
    .col-xl-3    { flex: 0 0 25%;       max-width: 25%;        }
    .col-xl-4    { flex: 0 0 33.3333%;  max-width: 33.3333%;  }
    .col-xl-5    { flex: 0 0 41.6667%;  max-width: 41.6667%;  }
    .col-xl-6    { flex: 0 0 50%;       max-width: 50%;        }
    .col-xl-7    { flex: 0 0 58.3333%;  max-width: 58.3333%;  }
    .col-xl-8    { flex: 0 0 66.6667%;  max-width: 66.6667%;  }
    .col-xl-9    { flex: 0 0 75%;       max-width: 75%;        }
    .col-xl-10   { flex: 0 0 83.3333%;  max-width: 83.3333%;  }
    .col-xl-11   { flex: 0 0 91.6667%;  max-width: 91.6667%;  }
    .col-xl-12   { flex: 0 0 100%;      max-width: 100%;       }
}

/* ----------------------------------------------------------------
   10. Offsets
   ---------------------------------------------------------------- */
.offset-1  { margin-left: 8.3333%;  }
.offset-2  { margin-left: 16.6667%; }
.offset-3  { margin-left: 25%;      }
.offset-4  { margin-left: 33.3333%; }
.offset-5  { margin-left: 41.6667%; }
.offset-6  { margin-left: 50%;      }

@media (min-width: 768px) {
    .offset-md-0 { margin-left: 0;        }
    .offset-md-1 { margin-left: 8.3333%;  }
    .offset-md-2 { margin-left: 16.6667%; }
    .offset-md-3 { margin-left: 25%;      }
    .offset-md-4 { margin-left: 33.3333%; }
    .offset-md-5 { margin-left: 41.6667%; }
    .offset-md-6 { margin-left: 50%;      }
}

@media (min-width: 992px) {
    .offset-lg-0 { margin-left: 0;        }
    .offset-lg-1 { margin-left: 8.3333%;  }
    .offset-lg-2 { margin-left: 16.6667%; }
    .offset-lg-3 { margin-left: 25%;      }
    .offset-lg-4 { margin-left: 33.3333%; }
    .offset-lg-5 { margin-left: 41.6667%; }
    .offset-lg-6 { margin-left: 50%;      }
}

/* ----------------------------------------------------------------
   11. Sections (blocs pleine largeur du one-page)
   ---------------------------------------------------------------- */
.section {
    width: 100%;
    padding-top:    60px;
    padding-bottom: 60px;
}

.section-sm { padding-top: 32px; padding-bottom: 32px; }
.section-lg { padding-top: 100px; padding-bottom: 100px; }

/* Section pleine largeur sans container (photo de fond, dark bar…) */
.section-full {
    width: 100%;
    padding: 0;
}

/* Section avec fond sombre (ex. horaires) */
.section-dark {
    background-color: #1a1a2e; /* à adapter via style.css */
    color: #fff;
}

/* ----------------------------------------------------------------
   12. Layouts spécifiques maquette Ovision
   ---------------------------------------------------------------- */

/* Hero : texte gauche + image droite */
.layout-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.layout-hero .hero-text  { flex: 0 0 100%; padding: var(--gutter-half); }
.layout-hero .hero-image { flex: 0 0 100%; }

@media (min-width: 768px) {
    .layout-hero .hero-text  { flex: 0 0 55%; max-width: 55%; }
    .layout-hero .hero-image { flex: 0 0 45%; max-width: 45%; }
}

/* Rangée de stats (3 chiffres clés côte à côte) */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    justify-content: center;
}
.stats-row .stat-item {
    flex: 1 1 120px;
    text-align: center;
    min-width: 100px;
    max-width: 200px;
}

/* Grille de services / icônes (ligne d'icônes égaux) */
.grid-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gutter);
}
.grid-services .service-item {
    flex: 0 0 calc(50% - var(--gutter));
    text-align: center;
}
@media (min-width: 576px) {
    .grid-services .service-item { flex: 0 0 calc(33.333% - var(--gutter)); }
}
@media (min-width: 992px) {
    .grid-services .service-item { flex: 0 0 calc(16.666% - var(--gutter)); }
}

/* Grille de cards (équipe, avis) */
.grid-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}
.grid-cards .card {
    flex: 0 0 100%;
}
@media (min-width: 576px) {
    .grid-cards .card { flex: 0 0 calc(50% - var(--gutter) / 2); }
}
@media (min-width: 992px) {
    .grid-cards .card { flex: 0 0 calc(33.333% - var(--gutter) * 2 / 3); }
}
@media (min-width: 1200px) {
    .grid-cards .card { flex: 0 0 calc(25% - var(--gutter) * 3 / 4); }
}

/* Grille de cards 3 colonnes (avis clients) */
.grid-cards-3 .card {
    flex: 0 0 100%;
}
@media (min-width: 768px) {
    .grid-cards-3 .card { flex: 0 0 calc(50% - var(--gutter) / 2); }
}
@media (min-width: 992px) {
    .grid-cards-3 .card { flex: 0 0 calc(33.333% - var(--gutter) * 2 / 3); }
}

/* Layout 2 colonnes 50/50 (contact / carte, pourquoi choisir…) */
.layout-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.layout-split .split-left,
.layout-split .split-right {
    flex: 0 0 100%;
    width: 100%;
}
@media (min-width: 768px) {
    .layout-split .split-left  { flex: 0 0 50%; max-width: 50%; }
    .layout-split .split-right { flex: 0 0 50%; max-width: 50%; }
}

/* Layout 2 colonnes 60/40 */
.layout-split-60 .split-left  { flex: 0 0 100%; }
.layout-split-60 .split-right { flex: 0 0 100%; }
@media (min-width: 768px) {
    .layout-split-60 .split-left  { flex: 0 0 60%; max-width: 60%; }
    .layout-split-60 .split-right { flex: 0 0 40%; max-width: 40%; }
}

/* Layout étapes (consultation) — liste verticale sur mobile, 2 col sur desktop */
.layout-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}
.layout-steps .step {
    flex: 0 0 100%;
}
@media (min-width: 768px) {
    .layout-steps .step { flex: 0 0 calc(50% - var(--gutter) / 2); }
}

/* ----------------------------------------------------------------
   13. Utilitaires responsive
   ---------------------------------------------------------------- */

/* Visibilité */
.hidden       { display: none !important; }
.visible      { display: block !important; }

@media (max-width: 575px)  { .hide-xs { display: none !important; } }
@media (max-width: 767px)  { .hide-sm { display: none !important; } }
@media (max-width: 991px)  { .hide-md { display: none !important; } }
@media (min-width: 576px)  { .show-xs { display: none !important; } }
@media (min-width: 768px)  { .show-sm { display: none !important; } }
@media (min-width: 992px)  { .show-md { display: none !important; } }

/* Ordre sur mobile */
.order-first { order: -1; }
.order-last  { order: 999; }
@media (max-width: 767px) {
    .order-sm-first { order: -1; }
    .order-sm-last  { order: 999; }
}

/* Texte */
.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }
@media (max-width: 767px) { .text-sm-center { text-align: center; } }

/* Espacement (marges/paddings utilitaires) */
.mt-0  { margin-top:    0;    } .mb-0  { margin-bottom: 0;    }
.mt-1  { margin-top:    8px;  } .mb-1  { margin-bottom: 8px;  }
.mt-2  { margin-top:    16px; } .mb-2  { margin-bottom: 16px; }
.mt-3  { margin-top:    24px; } .mb-3  { margin-bottom: 24px; }
.mt-4  { margin-top:    32px; } .mb-4  { margin-bottom: 32px; }
.mt-5  { margin-top:    48px; } .mb-5  { margin-bottom: 48px; }
.mt-6  { margin-top:    64px; } .mb-6  { margin-bottom: 64px; }

.pt-0  { padding-top:    0;    } .pb-0  { padding-bottom: 0;    }
.pt-1  { padding-top:    8px;  } .pb-1  { padding-bottom: 8px;  }
.pt-2  { padding-top:    16px; } .pb-2  { padding-bottom: 16px; }
.pt-3  { padding-top:    24px; } .pb-3  { padding-bottom: 24px; }
.pt-4  { padding-top:    32px; } .pb-4  { padding-bottom: 32px; }
.pt-5  { padding-top:    48px; } .pb-5  { padding-bottom: 48px; }
.pt-6  { padding-top:    64px; } .pb-6  { padding-bottom: 64px; }

/* Images responsives */
.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Image couvrant son conteneur */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}