/* base.css */
:root {
    --scroll-transition-duration: 1000ms;
    /* Inclure les unités ici */
}

html,
body {
    min-height: 100%;
    background: #fff;
    font-size: 100%;

}

html {
    scroll-behavior: smooth;
}

body {
    overflow: visible;
    max-width: 1920px;
    margin: 0 auto;
}



body .container {
    all: unset;
    width: 100%;
    display: block;
}


#content {
    overflow-x: hidden;
}


@media (min-width: 992px) and (max-width: 1199px) {

    html,
    body {
        font-size: 96%;
    }
}



@media (min-width: 768px) and (max-width: 991px) {

    html,
    body {
        font-size: 92%;
    }
}

@media (min-width: 500px) and (max-width: 767px) {

    html,
    body {
        font-size: 88%;
    }
}

@media (max-width: 499px) {

    html,
    body {
        font-size: 85%;
    }
}

* {
    outline: none !important;
}

.form-select,
.form-control {
    box-shadow: none !important;
}

.form-select,
.form-control:focus {
    border-color: #ccc !important
}

.clearfix {
    clear: both;
    width: 100%;
    height: 1px;
}

.btn {
    box-shadow: none !important;
    outline: none;
    cursor: pointer
}

img {
    max-width: 100%;
    height: auto !important;
}

.pointer {
    cursor: pointer
}

.nobreak,
.no-break,
.nowrap {
    white-space: nowrap;
}

.small {
    font-size: 90%;
}

.container-fluid {
    padding: 0;
    max-width: 96%;
    width: 96%;
    margin: 0 auto;
}

#above-all {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(90, 90, 90, 0.4);
    z-index: 99990;
    display: none;
}


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

    .article-text .float-left,
    .article-text .float-right {
        float: none !important;
        margin: 10px auto !important;
        display: block;

    }

}


.iframe-wrapper {
    background-color: var(--gray-1);
    margin: 25px 0 !important
}

.iframe-container {
    max-width: 600px;
    width: 100%;
    margin: 0 0;
    position: relative;

}

.iframe-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.iframe-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.w-33 {
    width: 33.333333%;
}

@media screen and (max-width: 576px) {}



.btn-xl {
    padding: 1rem 2rem;
    /* plus grand que btn-lg (0.5rem 1rem) */
    font-size: 1.35rem;
    /* btn-lg = 1.25rem, on augmente un peu */
    line-height: 1.5;
    border-radius: 0.5rem;
    /* idem btn-lg, tu peux pousser à 0.6rem si besoin */
}

/* Optionnel : si tu veux que ça s'intègre avec tous les styles Bootstrap (.btn-primary, etc.) */
.btn-xl i {
    vertical-align: middle;
}._{}


/* colors.css */
:root {


  /* === VARIANTES (btn-outline, alerts-subtle, badges…) === */


  --bs-primary-rgb: 3, 31, 90;
  --bs-warning-rgb: 232, 202, 12;
  --bs-danger-rgb: 165, 0, 32;
  --bs-light-rgb: 235, 237, 242;
  --bs-dark-rgb: 50, 50, 50;
  --bs-primary: rgba(var(--bs-primary-rgb));
  --bs-warning: rgba(var(--bs-warning-rgb));
  --bs-danger: rgba(var(--bs-danger-rgb));
  --bs-light: rgba(var(--bs-light-rgb));
  --bs-dark: rgba(var(--bs-dark-rgb));

  /* Couleurs texte et contrastes */
  --bs-body-color: var(--bs-dark);
  --bs-body-bg: var(--bs-light);

  /* Variantes “subtle” (alerts, badges light, bg-subtle) */
  --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), .1);
  --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), .2);
  --bs-primary-text-emphasis: var(--bs-primary);

  --bs-warning-bg-subtle: rgba(var(--bs-warning-rgb), .15);
  --bs-warning-border-subtle: rgba(var(--bs-warning-rgb), .25);
  --bs-warning-text-emphasis: rgb(130, 110, 10);

  --bs-danger-bg-subtle: rgba(var(--bs-danger-rgb), .15);
  --bs-danger-border-subtle: rgba(var(--bs-danger-rgb), .25);
  --bs-danger-text-emphasis: var(--bs-danger);
  --bs-primary-filter: brightness(0) saturate(100%) invert(12%) sepia(94%) saturate(1412%) hue-rotate(205deg) brightness(92%) contrast(110%);
  --bs-primary-9: #031F5A;
  --bs-primary-8: #1C356A;
  --bs-primary-7: #354C7B;
  --bs-primary-6: #68799C;
  --bs-primary-5: #818FAC;
  --bs-primary-4: #9AA5BD;
  --bs-primary-3: #B3BCCE;
  --bs-primary-2: #CDD2DE;
  --bs-primary-1: #EBEDF2;
  --swiper-pagination-color: #031F5A;
  --swiper-pagination-bullet-inactive-color: #031F5A;
  --ink: #1e293b;
  --muted: #94a3b8;
  --card-bg: #fff;
  --card-br: #CDD2DE;
  --bs-form-valid-border-color: #dee2e6;
}

body {
  color: var(--bs-primary);
}

a {
  color: #1647b3;
}

.bg-primary-4 {
  background-color: var(--bs-primary-4) !important;

}


.bg-primary-3 {
  background-color: var(--bs-primary-3) !important;

}



.bg-primary-2 {
  background-color: var(--bs-primary-2) !important;

}


.bg-primary-1 {
  background-color: var(--bs-primary-1) !important;

}


.border-primary-4 {
  border-color: var(--bs-primary-4) !important;
}




.yellow-arrow {
  position: relative;
  list-style: none;
  /* on vire la puce native */
  padding-left: 1.5rem;
  text-decoration: none;
  /* espace pour la flèche */
}

.yellow-arrow::before {
  content: "\f061";
  /* code Font Awesome "arrow-right" */
  font-family: "Font Awesome 6 Free";
  /* adapte selon ta version */
  font-weight: 900;
  /* solid */
  color: var(--bs-warning);
  /* équivalent de .text-warning */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}._{}


/* fonts.css */
/*  
.quicksand-<uniquifier>
<weight>: Use a value from 300 to 700
<uniquifier>: Use a unique and descriptive class name
.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/
body {

  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;

}

h1,
h2,
h3,
h4,
h5,
h6,
.titles-font {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}




#menu a {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}._{}


/* header.css */
header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  background-color: var(--bs-primary);
  color: var(--bs-primary-4);
  line-height: 1.2;
}

#header-blocks {
  padding-top: 0.7rem;
}

header a.logo {
  display: block;
  max-height: 80px;
  max-width: 80px;
  margin: 0 auto;
}

header div.baseline {
  text-transform: uppercase;
  font-size: 1rem;

  line-height: 1.2;
  color: var(--bs-primary);
}


header .fa-phone {
  font-size: 2rem;
  color: var(--bs-primary-4);
}

header .phones {
  padding-top: 4px;
}

header table {}


header table th,
header table td {
  font-size: 0.9rem;

}

header table th {
  color: var(--bs-primary-4);
}

header table td {
  color: var(--bs-primary-4);
  padding-left: 7px;
}

header .baseline h1,
header .baseline div {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  line-height: 1.5;
}._{}


/* article-default.css */
article.article-default {
  margin-bottom: 3rem;
}


article.article-default {
  margin-bottom: 3rem;
}



article.article-default h3,
article.article-default .h3 {
  font-size: 1.1rem;
  position: relative;
  padding: 0 0 0 15px;
  margin: 25px 0 10px;
  color: var(--bs-primary);

}


article.article-default h3:before {
  font-family: "Font Awesome 6 Free";
  content: '\f054';
  /* chevron-right */
  font-weight: 900;
  /* nécessaire pour les icônes solides */
  position: absolute;
  left: 0;
  top: 0.30em;
  color: var(--sna-blue);
  font-size: 0.8em;
}





article.article-default a {}


article.article-default a.button,
article.article-default a.bouton {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  color: var(--sna-orange);
  border: 1px solid var(--sna-orange);
  border-radius: 50rem;
  background-color: transparent;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  line-height: 1.5;
}

article.article-default a.button:hover,
article.article-default a.button:focus,
article.article-default a.bouton:hover,
article.article-default a.bouton:focus {
  background-color: var(--sna-orange);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 0.1rem rgba(204, 115, 71, 0.25);
}._{}


/* article.programme-details.css */
article.programme-details {
  background-color: var(--bs-primary-1);

}

article.programme-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

article.programme-details li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1rem !important;
  /* espace à gauche pour le chevron */
  margin: 0 !important;
}

article.programme-details dl {
  padding: 0;
  margin: 0 0 1rem;

}

article.programme-details dl:last-child {

  margin-bottom: 0;
}

article.programme-details dt {
  position: relative;
  padding: 0.3rem 0 0.3rem 1rem !important;
  /* espace à gauche pour le chevron */
  margin: 0 !important;
}

article.programme-details li::before,
article.programme-details dt::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--bs-primary-4);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
}

article.programme-details dl dd {
  padding: 0 0 0 1rem;
  margin: 0 0 0 0;
  font-size: 0.9rem;

}

article.programme-details .d-flex {
  gap: 1rem
}

article.programme-details .d-flex dl {
  flex: calc(50% - 1rem);
}._{}


/* menu.css */
#menu-burger {
  display: none;
  cursor: pointer;
  position: absolute;
  bottom: 60px;
  right: 15px;
  z-index: 9999;
}

#menu-burger:after,
#menu-burger:before {
  position: absolute;
  top: 5px;
  right: 2px;
  font-family: "FontAwesome";
  font-size: 2.5rem;
  color: var(--sna-orange-8);
  padding: 5px 8px;
  line-height: 1;
}

#menu-burger:before {
  content: "\f0c9";
}

#menu-burger:after {
  content: "\f00d";
  opacity: 0;
  right: 5px;
  color: white;
}

.menu-on #menu-burger {
  right: 26px;
}

.menu-on #menu-burger:after {
  opacity: 1;

}

.menu-on #menu-burger:before {
  opacity: 0;

}


#menu {
  display: none;
}

#menu ul,
#menu-desktop ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu ul {
  display: none;
}

#menu li,
#menu-desktop li {
  padding: 0;
  margin: 0;
}

#menu a,
#menu-desktop a {
  display: block;
  text-decoration: none;
}

#menu-desktop {
  display: none;
}


#menu li:not(.level0).haschild>a {
  cursor: default !important;

}


#menu .caret::before {
  content: "";
  display: inline-block;
  margin-left: .3em;
  vertical-align: .25em;
  border-top: .4em solid var(--bs-warning);
  border-top: .4em solid white;
  border-right: .4em solid transparent;
  border-left: .4em solid transparent;
  position: relative;
  top: 3px;
}

#menu li.level1 ul {
  display: none;
}

@media screen and (min-width: 992px) {
  #menu {
    display: block;
    z-index: 900;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.15);
    border-top: 0px solid var(--bs-primary-8);
  }

  #menu ul.level0 {
    display: flex;
    flex-direction: none;
    gap: 0
  }

  #menu li.level0>a {
    padding: 0.5rem 1.7rem;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.2;
    opacity: 1;
  }

  #menu li.search a span {
    display: none;
  }

  #menu ul.level1 {
    display: flex;

    background-color: var(--bs-primary);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0%;
    width: 100vw;
    max-height: 0;
    flex-wrap: wrap;
    gap: 1rem 5rem;
    justify-content: start;
    max-height: 0;
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
  }

  #menu li.level1 {
    min-width: calc(33.33333333% - 5rem);

  }

  #menu li.level1>a {
    color: #e0e0ff;

    font-size: 1.1rem;
    line-height: 1.2;
    padding: 0 0 0.2rem 0;
    position: relative;
  }

  #menu li.level1>a::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    height: 2px;
    width: 10px;
    background-color: white;
    transition: width 100ms;
  }

  #menu li.level0:hover>a {
    opacity: 1;
  }

  #menu li.level0:hover>a .caret::before {
    border-top-color: var(--bs-warning);
  }

  #menu li.level0:hover>ul {
    padding: 3rem 5rem 5rem !important;
    max-height: 70vh !important;
    min-height: 35vh;
    border-top: 1px solid var(--bs-primary-4);
    border-bottom: 1px solid var(--bs-primary-4);

  }

  #menu li.level1:hover>a::after {
    width: 40px;
    background-color: var(--bs-warning);
  }







}


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

  #menu-burger {
    display: block;
  }

  #menu .close-icon {
    display: none;
  }

  #menu {
    position: fixed;
    display: block;
    right: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 9990;
    background-color: var(--bs-primary);
    padding: 140px 0 80px 35px;
    display: none;

    background-image: url('/img/logo-sna-blanc.png?w=110');
    background-position: 0.5rem 1.5rem;
    background-repeat: no-repeat;
  }

  .menu-on #menu {
    display: block;
  }

  body.menu-on {
    overflow: hidden;
  }

  #menu a {
    color: white;
  }

  #menu ul.level0 {

    display: block;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 3rem;
    /* remplace 100vh par dvh/svh */
    max-height: calc(100svh - 240px);
    /* iOS/Android */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
  }

  @supports (height: 100dvh) {
    #menu ul.level0 {
      max-height: calc(100dvh - 240px);
    }
  }

  #menu li.level0 {
    padding: 15px 0 0 0;

  }

  #menu li.level0>a {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  #menu li.level0>a {
    position: relative;
    padding-left: 1.5em;
    font-weight: bold;
    /* espace pour le chevron */
  }

  /* Chevron bas par défaut */
  #menu li.level0>a:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    /* solid */
    content: "\f078";
    /* fa-chevron-down */
    position: absolute;
    left: 0;
    top: 1px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
  }

  /* Quand li est ouvert, on pivote le chevron */
  menu li.level0.opened>a:before {
    transform: rotate(180deg);
  }

  #menu li ul {
    padding-left: 1.5rem;
    padding-bottom: 0.5rem;
  }

  #menu li li {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  #menu li ul.level1 {
    padding-top: 0.5rem;
    padding-left: 2.2rem;
  }

  #menu li.level1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #menu li.level1>a {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--sna-green-5);

  }

  #menu li.level1.haschild>a {
    color: var(--sna-green-5);
  }

  #menu li.level2 a {
    font-size: 1.1rem
  }

  #menu li.opened ul {
    display: block;
  }
}._{}


/* article-separator.css */
article.separator {}

article.separator:before,
article.separator:after {
  content: "";
  display: table;
  width: 100%;

}._{}


/* article-homepage-search-form.css */
.homepage #search-wrapper {
  background-color: var(--bs-primary-5);
  transition: all 1000ms;

}


.homepage #search-wrapper.in-viewport {
  background-color: var(--bs-primary);
}._{}


/* content.css */
#content {
  min-height: 100vh;
  position: relative;
}._{}


/* video-youtube.css */
.youtube-thumbnail-wrapper {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
  background: #000;
}

.youtube-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.youtube-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: white;
  pointer-events: none;
  text-shadow: 0 0 10px black;
}



#ytModal .btn-close-custom {
  position: absolute;
  top: -50px;
  right: 00px;
  background: none;
  border: none;
  color: white !important;
  font-size: 2.5rem;
  z-index: 10;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: all 300ms;
}

#ytModal .btn-close-custom:hover {
  opacity: 1;
}._{}


/* section-footer.css */
footer {
  background-color: #031a4d;
  color: white;
  padding: 25px 0;
}


footer .container-fluid {
  max-width: 1200px;
}

/*

footer .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 1rem;
}
footer .row>div {}
*/
footer h3 {

  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: bold;

}

footer p {
  font-size: 0.95rem;
  padding: 0;

  margin: 0;
}

footer a {
  color: var(--sna-green-2) !important;
  text-decoration: none;
}



#footer-col-3 {
  text-align: center;
}

footer .social-networks a {
  display: inline-block;
  margin: 0 5px;
}

footer a:hover {
  filter: brightness(0.8);

}

.footer-col {
  padding: 20px 0;
}._{}


/* article-full-width.css */
article.full-width {}

article.full-width {}._{}


/* article-gallery.css */
article.gallery .item {
  padding: 4px;
}

article.gallery .inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background-color: #f0f0f0;
  transition: transform 0.2s ease;
}

article.gallery .inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

article.gallery .inner:hover img {
  transform: scale(1.05);
}._{}


/* hompage.css */
#hp-content .column-group:first-of-type {
  background-color: var(--bs-primary-2);
}


body.homepage .article-title {
  padding: 0 0 3rem 0;
}

body.homepage .column-group .article-title {
  padding: 0 0 0.5rem 0;
}







body.homepage .column-group .article-title-default h2 {
  font-size: 1rem;
  text-align: left;
}

body.homepage .column-group .article-title-default span {}

body.homepage .column-group .article-title-default span::before {
  height: 40px;
}

body.homepage .article-title-default {
  padding: 0 0 1rem 0;
  margin: 0 0 1rem 0;
  text-align: center;
}

body.homepage .article-title-default h2 {
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--bs-primary);
}

body.homepage .article-title-default span {
  position: relative;
  display: inline-block;
  padding: 0 0 10px 0;
}



section#page-cover h1,
section#page-cover .h1 {}

section#page-cover h1 span,
section#page-cover .h1 span {}

body.homepage .article-title-default span::after {
  content: "";
  display: block;
  width: 130px;
  height: 2px;

  background: #ffe200;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}._{}


/* page-infos.css */
body.infos {}





body.infos article {
  margin-bottom: 5rem;
}

body.infos .article-title-default {
  padding: 1rem 0;
  text-align: center;
}

body.infos .article-title-default h2 {

  font-size: 1.6rem;
  color: var(--bs-primary-6);
  margin-bottom: 1rem;
  text-align: left;
  padding: 0;

}

body.infos .article-title-default span {}

/*
body.infos .article-title-default span:after {
  content: ' ';
  width: 80px;
  height: 3px;
  background-color: var(--bs-warning);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}*/._{}


/* attachments.css */
/* Positionnement float */
.att-position-right .attachments {
  float: right;
  margin-left: 20px;
}

.att-position-left .attachments {
  float: left;
  margin-right: 20px;
}

/* Largeur selon la classe */
.att-width-25pc .attachments {
  width: 25%;
}

.att-width-33pc .attachments {
  width: 33.3333%;
}

.att-width-50pc .attachments {
  width: 50%;
}

.att-width-66pc .attachments {
  width: 66.6666%;
}

.att-width-75pc .attachments {
  width: 75%;
}

.attachments {
  border-radius: 25px;
  overflow: hidden;
}


/* Nettoyage du float si besoin (à utiliser après article-content par ex.) */
.article-content::after {
  content: "";
  display: table;
  clear: both;
}._{}


/* article-bloc-cta.css */
.cta-block {
  background-color: var(--sna-green-5, #8db292);
  color: #fff;
  padding: 2rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.cta-title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.cta-text {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
}

.cta-block a.bouton,
.cta-block a.button {
  display: inline-block;
  background-color: #fff;
  color: var(--sna-green-5, #8db292) !important;
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cta-block a.bouton:hover,
.cta-block a.button:hover {
  background-color: #f2f2f2;
  color: var(--sna-green);
}._{}


/* containers.css */
/*  container.css */

article:not(.full-width) .article-content,
.articles-group-wrapper {
  width: 96%;
  max-width: 1300px;
  margin-inline: auto;
  padding: 0;
}

.articles-group-wrapper article .article-content {
  width: 100%;
}._{}


/* article-homepage-a-propos.css */
.article-homepage-a-propos-group {
  border-bottom: 1px solid var(--bs-primary-5);
}

article.homepage-a-propos .article-content,
.article-homepage-a-propos-group .articles-group-wrapper {
  max-width: 100%;
  width: 100%;
}

article.homepage-a-propos .wordings {
  flex: 0 0 50%;
  display: flex;
  justify-content: end;
}

article.homepage-a-propos .wordings-inner {
  max-width: 650px;
  padding: 3rem 2rem 3rem;

}



article.homepage-a-propos .article-title-default h2 {
  color: white !important;
  text-align: center;
}


article.homepage-a-propos .attachement {
  flex: 0 0 50%;
}

article.homepage-a-propos .attachement img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100% !important;
}._{}


/* buttons.css */
/* === PRIMARY === */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .9);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .85);
  position: relative;
}

.btn-primary * {
  position: relative;
}

.btn-primary:hover {
  color: var(--bs-warning) !important;


}




.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 1);
}

/* === WARNING === */
.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-color: #000;
  /* texte noir pour contraste */
  --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), .9);
  --bs-btn-active-bg: rgba(var(--bs-warning-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), .85);

}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-color: #000;
}

/* === DANGER === */
.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-danger-rgb), .9);
  --bs-btn-active-bg: rgba(var(--bs-danger-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), .85);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-color: #fff;
}

/* === DARK === */
.btn-dark {
  --bs-btn-bg: rgb(var(--bs-dark-rgb));
  --bs-btn-border-color: rgb(var(--bs-dark-rgb));
  --bs-btn-hover-bg: rgba(var(--bs-dark-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb), .9);
  --bs-btn-active-bg: rgba(var(--bs-dark-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-dark-rgb), .85);
}

.btn-outline-dark {
  --bs-btn-color: rgb(var(--bs-dark-rgb));
  --bs-btn-border-color: rgb(var(--bs-dark-rgb));
  --bs-btn-hover-bg: rgb(var(--bs-dark-rgb));
  --bs-btn-hover-color: #fff;
}

/* === LIGHT === */
.btn-light {
  --bs-btn-bg: rgb(var(--bs-light-rgb));
  --bs-btn-border-color: rgb(var(--bs-light-rgb));
  --bs-btn-color: #000;
  /* contraste */
  --bs-btn-hover-bg: rgba(var(--bs-light-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-light-rgb), .9);
  --bs-btn-active-bg: rgba(var(--bs-light-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-light-rgb), .85);
}

.btn-outline-light {
  --bs-btn-color: rgb(var(--bs-light-rgb));
  --bs-btn-border-color: rgb(var(--bs-light-rgb));
  --bs-btn-hover-bg: rgb(var(--bs-light-rgb));
  --bs-btn-hover-color: #000;
}._{}


/* columns.css */
.column-group {}

.column-group .articles-group-inner {
  padding: 0 15px;
}


.column-group .articles-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.column-group [class^="article-"] {}

.column-group article {
  margin-bottom: 0rem !important;
}

@media screen and (min-width: 768px) {


  .column-group .articles-group-inner {
    padding: 0 0px;
  }

  .column-group .articles-group-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
  }



  .column-group .article-1 {
    flex-basis: calc(100% / 12 * 1 - 1.5rem);
    width: calc(100% / 12 * 1 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-2 {
    flex-basis: calc(100% / 12 * 2 - 1.5rem);
    width: calc(100% / 12 * 2 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-3 {
    flex-basis: calc(100% / 12 * 3 - 1.5rem);
    width: calc(100% / 12 * 3 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-4 {
    flex-basis: calc(100% / 12 * 4 - 1.5rem);
    width: calc(100% / 12 * 4 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-5 {
    flex-basis: calc(100% / 12 * 5 - 1.5rem);
    width: calc(100% / 12 * 5 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-6 {
    flex-basis: calc(100% / 12 * 6 - 1.5rem);
    width: calc(100% / 12 * 6 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-7 {
    flex-basis: calc(100% / 12 * 7 - 1.5rem);
    width: calc(100% / 12 * 7 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-8 {
    flex-basis: calc(100% / 12 * 8 - 1.5rem);
    width: calc(100% / 12 * 8 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-9 {
    flex-basis: calc(100% / 12 * 9 - 1.5rem);
    width: calc(100% / 12 * 9 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-10 {
    flex-basis: calc(100% / 12 * 10 - 1.5rem);
    width: calc(100% / 12 * 10 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-11 {
    flex-basis: calc(100% / 12 * 11 - 1.5rem);
    width: calc(100% / 12 * 11 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .column-group .article-12 {
    flex-basis: calc(100% / 12 * 12 - 1.5rem);
    width: calc(100% / 12 * 12 - 1.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }
}._{}


/* section-hp-carrousel.css */
#hp-carrousel {
  --swiper-pagination-bullet-size: 20px;
  --swiper-navigation-size: 25px;
  margin-bottom: 2rem !important;

}

#hp-carrousel .swiper-container {
  margin: 0 0 !important;
  position: relative;
  padding-bottom: 3rem;
  background-color: var(--bs-primary-1);
}

#hp-carrousel .swiper {}

#hp-carrousel .swiper-slide {
  height: 650px;
  max-height: calc(100vh - 200px);
  position: relative;
  overflow: hidden;

}

#hp-carrousel .swiper-slide .img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#hp-carrousel .swiper-slide .img-wrapper img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

#hp-carrousel .swiper-slide .content-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  overflow: hidden;
  text-align: center;
}

#hp-carrousel .swiper-slide .content-wrapper .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  background-color: var(--bs-primary-1);
  opacity: 0.7;
}

#hp-carrousel .swiper-slide .content-wrapper .inner {
  padding: 0.5rem 3rem 0.8rem;
  position: relative;
  color: var(--bs-primary);
  min-height: 60px;
}

#hp-carrousel .swiper-slide .content-wrapper p.link {
  padding: 0.5rem 0 0 0;
}

#hp-carrousel .swiper-slide h2 {
  margin: 0 0 0 0;
  font-size: 1.5rem;
  font-weight: bold;
}

#hp-carrousel .swiper-slide p {
  margin: 0 0 0 0;

}


#hp-carrousel .swiper-button {}


#hp-carrousel .custom-swiper-prev,
#hp-carrousel .custom-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  font-size: 2.1rem;
  opacity: 0.5;
  cursor: pointer;
}


#hp-carrousel .custom-swiper-prev:hover,
#hp-carrousel .custom-swiper-next:hover {
  opacity: 1;

}


#hp-carrousel .custom-swiper-prev {
  left: 0.2rem;
}

#hp-carrousel .custom-swiper-next {
  right: 0.2rem;
}

#hp-carrousel .swiper-button:hover {
  opacity: 1;
}

#hp-carrousel .swiper-pagination {}._{}


/* article-details-agence.css */
article.details-agence {}

table.horaires-agence th,
table.horaires-agence td {
  font-size: 0.8rem;
  vertical-align: center !important;

}

table.horaires-agence th {
  font-weight: normal !important;
}



table.horaires-agence td {}._{}


/* article-group.css */
._{}


/* article-chapeau.css */
article.chapeau {}


article.chapeau .article-text {
  font-size: 1.4rem;

  padding: 0 0 0 20px;
  border-left: 7px dotted var(--sna-green-5);
  max-width: 900px;
  width: 70%;
  margin: 0 0 0 10%;
  color: #777;

}

article.chapeau ul {}

article.chapeau li:before {
  position: absolute;
  top: 14px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: '';
  background-color: #777;
}._{}


/* section-page-cover.css */
section#page-cover {

  background-color: var(--bs-primary-1);
  margin: 0 0 2rem 0;
  padding: 2rem 0;
  user-select: none;

}


section#page-cover .page-title {
  text-align: center;
}


section#page-cover h1,
section#page-cover .h1 {
  font-weight: 300;
  font-size: 2rem;
  color: var(--bs-primary);
}

section#page-cover h1 span,
section#page-cover .h1 span {
  position: relative;
  display: inline-block;
  padding: 0 0 10px 0;
}

section#page-cover h1 span::after,
section#page-cover .h1 span::after {
  content: "";
  display: block;
  width: 130px;
  height: 2px;

  background: #ffe200;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}



section#page-cover .chapeau {
  font-size: 1.3rem;
  color: var(--sna-black);
  color: white;
  padding: 1rem 3rem 1rem 0;
  max-width: 800px;
}

section#page-cover {}

section#page-cover .page-illutsration {
  width: 500px;
  height: 250px;
  max-width: 45vw;
  border-top-left-radius: 20vw;
  border-bottom-left-radius: 5vw;
  overflow: hidden;

}

section#page-cover .page-illutsration img {
  height: 100% !important;
  width: 100%;
  object-fit: cover;


}._{}


/* article-homepage-agences.css */
article.homepage-agences {
  background-color: var(--bs-primary-1);
}


article.homepage-agences .agence {
  border: 1px solid var(--card-br);
  background-color: #ffffff;
  border-radius: 2rem;
}


article.homepage-agences h3 {
  text-align: center;
  background-color: var(--bs-primary);
  color: white;
  margin: 0;
  padding: 0.5rem;
  font-weight: bold;
  border-bottom: 1px solid var(--card-br);

}

article.homepage-agences h3::before {
  content: '';
}


article.homepage-agences h3 span {
  position: relative;
  display: inline-block;
  line-height: 1;
}

article.homepage-agences h3 span::before {
  content: ' ';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -18px;
  background-color: var(--bs-warning);
  height: 4px;
  width: 12px;
  border-radius: 4px;

}

article.homepage-agences .cover-wrapper {
  aspect-ratio: 16 / 9;
  position: relative;
}

article.homepage-agences img.cover {
  position: relative;
  object-fit: cover;
  height: 100% !important;
  width: 100%;
}

article.homepage-agences .cover-wrapper .btn {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}


article.homepage-agences ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

article.homepage-agences li {
  margin: 0;
  padding: 0;
  text-align: center;
}

article.homepage-agences li a {
  display: inline-block;

}._{}


/* article-homepage-promotion.css */
article.homepage-promotion {
  width: 100%;
}

article.homepage-promotion .article-inner,

article.homepage-promotion .article-content {
  width: 100% !important;
  max-width: 100% !important;
}

article.homepage-promotion .article-content {
  max-height: 65vh;
  overflow: hidden;
}


article.homepage-promotion .article-text {
  height: 65vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--bs-primary);
}

article.homepage-promotion .img-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
}

article.homepage-promotion .img-wrapper img {
  object-fit: cover;
  height: 100% !important;
  width: 100%;
}


article.homepage-promotion .contents {
  position: relative;
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  height: 90%;

}

article.homepage-promotion .content-wrapper {
  padding: 3rem;
  background-color: rgba(235, 237, 242, 0.8);
  border-radius: 50px;
}

article.homepage-promotion .name {

  color: var(--bs-danger);
}._{}


/* video-wrapper.css */
.youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}._{}


/* article-bloc-contact.css */
article.bloc-contact {
  width: auto;
  max-width: 500px;
  --border-color: var(--sna-green-5);
  background-color: var(--sna-green-1);
  border-left: 6px solid var(--border-color);
  border-radius: 6px;
  padding: 1.2rem;
  margin-block: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  font-family: sans-serif;
}

.bloc-contact-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.bloc-contact-icon {
  font-size: 2rem;
  color: var(--sna-green-5);
  flex-shrink: 0;
  margin-top: 0;
}

.bloc-contact-text {
  flex: 1;
}

article.bloc-contact .article-title {
  display: none;
  /* ou inline si tu veux l'afficher */
}

article.bloc-contact p {
  margin: 0;
  padding: 0;
}

.wordings>*:last-child {
  margin-bottom: 0;
}

article.bloc-contact a {
  color: var(--sna-green-8);

}._{}


/* swiper.css */
.swiper-container {
  margin: 0 80px;
  overflow: hidden;
}

.swiper-wrapper {}

.swiper-button-next,
.swiper-button-prev {
  color: var(--navy-blue);
}

@media screen and (max-width: 576px) {
  .swiper-container {
    margin: 0 40px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    transform: scale(0.6);
  }
}._{}