/* 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;
}



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


#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 {
  --sna-blue: #005e87;
  --sna-blue-9: #00427c;
  --sna-blue-8: #09578a;
  --sna-blue-7: #286c99;
  --sna-blue-6: #4681a7;
  --sna-blue-5: #6596b6;
  --sna-blue-4: #84abc4;
  --sna-blue-3: #a2c0d3;
  --sna-blue-2: #c1d5e1;
  --sna-blue-1: #e0eaf0;
  --sna-green: #24692a;
  --sna-green-9: #33743a;
  --sna-green-8: #498350;
  --sna-green-7: #609366;
  --sna-green-6: #76a27c;
  --sna-green-5: #8db292;
  --sna-green-4: #a4c1a7;
  --sna-green-3: #bbd1bd;
  --sna-green-2: #d1e0d3;
  --sna-green-1: #eff5f0;
  --sna-orange: #cc7347;
  --sna-orange-9: #db886a;
  --sna-orange-8: #df967b;
  --sna-orange-7: #e3a38b;
  --sna-orange-6: #e7b09c;
  --sna-orange-5: #ebbdac;
  --sna-orange-4: #efcabd;
  --sna-orange-3: #f3d7cd;
  --sna-orange-2: #f7e4de;
  --sna-orange-1: #fbf1ee;
  --sna-orange-0: #ffffff;
  --sna-green-logo: #34BA49;
  --sna-black: #595d59;
  --sna-gray: #a0a0a0;
  --sna-white: #ffffff;

  --white-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(118deg) brightness(102%) contrast(103%);
  --orange-filter: brightness(0) saturate(100%) invert(51%) sepia(44%) saturate(420%) hue-rotate(337deg) brightness(96%) contrast(96%);
  --orange-9-filter: brightness(0) saturate(100%) invert(47%) sepia(71%) saturate(285%) hue-rotate(336deg) brightness(99%) contrast(94%);
  --orange-8-filter: brightness(0) saturate(100%) invert(57%) sepia(37%) saturate(442%) hue-rotate(335deg) brightness(96%) contrast(93%);
  --orange-7-filter: brightness(0) saturate(100%) invert(51%) sepia(44%) saturate(420%) hue-rotate(337deg) brightness(96%) contrast(96%);
  --orange-6-filter: brightness(0) saturate(100%) invert(51%) sepia(44%) saturate(420%) hue-rotate(337deg) brightness(96%) contrast(96%);
  --orange-6-filter: brightness(0) saturate(100%) invert(51%) sepia(44%) saturate(420%) hue-rotate(337deg) brightness(96%) contrast(96%);
  --orange-4-filter: brightness(0) saturate(100%) invert(93%) sepia(93%) saturate(590%) hue-rotate(294deg) brightness(96%) contrast(94%);
  --orange-3-filter: brightness(0) saturate(100%) invert(99%) sepia(65%) saturate(1303%) hue-rotate(293deg) brightness(99%) contrast(95%);
}

.text-blue {
  color: var(--sna-blue) !important;
}

.text-green {
  color: var(--sna-green) !important;
}

.text-black {
  color: var(--sna-black) !important;
}

.text-gray {
  color: var(--sna-gray) !important;
}

.text-white {
  color: var(--sna-white) !important;
}


.bg-blue {
  background-color: var(--sna-blue) !important;
  color: white !important;
}

.bg-green {
  background-color: var(--sna-green) !important;
  color: white !important;
}

.bg-black {
  background-color: var(--sna-black) !important;
  color: white !important;
}

.bg-gray {
  background-color: var(--sna-gray) !important;
  color: white !important;
}

.bg-white {
  background-color: var(--sna-white) !important;
  color: black !important;
}


.bg-orange {
  background-color: var(--sna-orange) !important;
  color: black !important;
}

.bg-orange-9 {
  background-color: var(--sna-orange-9) !important;
  color: black !important;
}

.bg-orange-8 {
  background-color: var(--sna-orange-8) !important;
  color: black !important;
}

.bg-orange-7 {
  background-color: var(--sna-orange-7) !important;
  color: black !important;
}

.bg-orange-6 {
  background-color: var(--sna-orange-6) !important;
  color: black !important;
}

.bg-orange-5 {
  background-color: var(--sna-orange-5) !important;
  color: black !important;
}

.bg-orange-4 {
  background-color: var(--sna-orange-4) !important;
  color: black !important;
}

.bg-orange-3 {
  background-color: var(--sna-orange-3) !important;
  color: black !important;
}

.bg-orange-2 {
  background-color: var(--sna-orange-2) !important;
  color: black !important;
}

.bg-orange-1 {
  background-color: var(--sna-orange-1) !important;
  color: black !important;
}

.bg-orange-0 {
  background-color: var(--sna-orange-0) !important;
  color: black !important;
}



.bg-green-1 {
  background-color: var(--sna-green-1) !important;
  color: black !important;
}



.btn-outline-blue {
  color: var(--sna-blue);
  border: 1px solid var(--sna-blue);
  background-color: transparent;
}

.btn-outline-blue:hover,
.btn-outline-blue:focus,
.btn-outline-blue:active {
  color: white !important;
  background-color: var(--sna-blue) !important;
  border-color: var(--sna-blue) !important;
  box-shadow: none !important;
}

.btn-outline-green {
  color: var(--sna-green);
  border: 1px solid var(--sna-green);
  background-color: transparent;
}

.btn-outline-green:hover,
.btn-outline-green:focus,
.btn-outline-green:active {
  color: white !important;
  background-color: var(--sna-green) !important;
  border-color: var(--sna-green) !important;
  box-shadow: none !important;
}

.btn-outline-black {
  color: var(--sna-black);
  border: 1px solid var(--sna-black);
  background-color: transparent;
}

.btn-outline-black:hover,
.btn-outline-black:focus,
.btn-outline-black:active {
  color: white !important;
  background-color: var(--sna-black) !important;
  border-color: var(--sna-black) !important;
  box-shadow: none !important;
}

.btn-outline-gray {
  color: var(--sna-gray);
  border: 1px solid var(--sna-gray);
  background-color: transparent;
}

.btn-outline-gray:hover,
.btn-outline-gray:focus,
.btn-outline-gray:active {
  color: white !important;
  background-color: var(--sna-gray) !important;
  border-color: var(--sna-gray) !important;
  box-shadow: none !important;
}

.btn-outline-white {
  color: white;
  border: 1px solid white;
  background-color: transparent;
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:active {
  color: var(--sna-black) !important;
  background-color: white !important;
  border-color: white !important;
  box-shadow: none !important;
}






.btn-outline-orange {
  color: var(--sna-orange);
  border: 1px solid var(--sna-orange);
  background-color: transparent;
}






.btn-outline-orange:hover,
.btn-outline-orange:focus,
.btn-outline-orange:active {
  color: white !important;
  background-color: var(--sna-orange) !important;
  border-color: var(--sna-orange) !important;
  box-shadow: none !important;
}


.btn-outline-orange-7 {
  color: var(--sna-orange-7);
  border: 1px solid var(--sna-orange-7);
  background-color: transparent;
}

.btn-outline-orange-7:hover,
.btn-outline-orange-7:focus,
.btn-outline-orange-7:active {
  color: white !important;
  background-color: var(--sna-orange-7) !important;
  border-color: var(--sna-orange-7) !important;
  box-shadow: none !important;
}



.btn-outline-green-2 {
  color: var(--sna-green-2);
  border: 1px solid var(--sna-green-2);
  background-color: transparent;
}

.btn-outline-green-2:hover,
.btn-outline-green-2:focus,
.btn-outline-green-2:active {
  color: #111 !important;
  background-color: var(--sna-green-2) !important;
  border-color: var(--sna-green-2) !important;
  box-shadow: none !important;
}._{}


/* 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 {
  height: 120px;
  position: relative;
}

#header-bloc-right {
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
}

#header .phone {

  display: flex;
  align-items: center;
  margin-left: 1rem;
  padding-left: 1rem;

  font-size: 1.1rem;
  border-radius: 50px;
  border: var(--sna-orange-8) 1px solid;
}

#header .phone .btn {
  background-color: var(--sna-orange-8) !important;
  color: white;
  margin-left: 0.7rem;
  line-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#header .phone i {
  position: relative;
  top: 0px;
  font-size: 20px;
  margin-left: 0.3rem;
}

#header-bloc-right .d-flex {}._{}


/* article-homepage-en-1-clic.css */
article.homepage-en-1-clic {
  /*
  background-color: var(--sna-blue-2);
  padding: 1rem;
  border-radius: 10px;
  */
  margin-bottom: 0 !important;
}

article.homepage-en-1-clic .article-title span {
  color: var(--sna-blue-7);
}



article.homepage-en-1-clic .article-title span:before {
  content: "\f8cc";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 90%;
  margin-right: 0.7rem;
}




article.homepage-en-1-clic ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  list-style: none;
  padding: 0.3rem !important;
  margin: 0 !important;
  background-color: white;


}

article.homepage-en-1-clic li {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;

}

article.homepage-en-1-clic li a {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
}

article.homepage-en-1-clic li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clic-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease;
  pointer-events: none;
}

article.homepage-en-1-clic li:hover .clic-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.clic-title {
  font-size: 1.1rem;
  margin-bottom: 0rem;
}

.clic-plus {
  font-size: 1.7rem;
  color: var(--sna-blue-logo);
}._{}


/* article-homepage-carrousel.css */
.homepage-carrousel-group {}

.homepage-carrousel-group .articles-group-wrapper {
  all: unset;
}

article#carrousel-homepage {
  min-height: calc(220px + 10vw);
  position: relative;
}

article#carrousel-homepage .illustration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

article#carrousel-homepage .illustration img {



  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: left center;
}





/*
article.shortcuts-top {
  display: flex;
  justify-content: center;
}

*/._{}


/* article-homepage-footer.css */
.homepage-footer-group {
  background-color: var(--sna-blue-7);
  padding: 3rem 0;
  color: #fff;

}

.homepage-footer-group article {
  padding: 1.5rem 0;
  width: 360px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .homepage-footer-group .articles-group-wrapper {
    display: flex;
    gap: 35px;
  }

  .homepage-footer-group article {
    width: 50%;
    margin: 0 0;
  }
}

@media screen and (min-width: 1100px) {
  .homepage-footer-group {
    background-image: url('/msmedias/homepage/homepage-footer-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right -75% center;
  }

  .homepage-footer-group article {
    width: 360px;
  }
}


@media screen and (min-width: 1200px) {
  .homepage-footer-group {
    background-position: right -50% center;
  }

  .homepage-footer-group article {}
}




@media screen and (min-width: 1400px) {
  .homepage-footer-group {
    background-position: right center;
  }
}











.homepage-footer-group .article-title {
  margin-bottom: 0 !important;
  padding: 0 !important;
}


.homepage-footer-group .article-title h2 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.homepage-footer-group .article-title span {
  display: inline-block;
  max-width: 260px;
}



.homepage-footer-group h3 {}

.homepage-footer-group h3,
.homepage-footer-group p {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1rem;
}


.homepage-footer-group i {}

.homepage-footer-ip {}

.homepage-footer-ip p {
  position: relative;
  padding-left: 30px;
}

.homepage-footer-ip p i {
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 1.3rem;
  color: #cc7347;
}

.homepage-footer-links {}


.homepage-footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.homepage-footer-links li {
  margin: 0 0 0.5rem 0;
  padding: 0;
}



.homepage-footer-links a {
  color: white;
  text-decoration: none !important;
  position: relative;
  padding-left: 1.2em;
  /* espace pour le chevron */
  transition: all 0.3s ease;
}

.homepage-footer-links a::before {
  content: "\f054";
  /* unicode fa-chevron-right (Font Awesome 6 Solid) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #cc7347;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.homepage-footer-links a:hover::before {
  transform: translateY(-50%) translateX(5px);
}._{}


/* article-bloc-schedule.css */
article.bloc-schedule {
  width: auto;
  max-width: 500px;
  --border-color: var(--sna-blue-5);
  background-color: var(--sna-blue-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-schedule-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

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

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

article.bloc-schedule .article-title {
  display: none;
  /* à activer si besoin */
}

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

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


/* 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;

}

@media screen and (min-width: 992px) {
  #menu {
    display: block;
    z-index: 900;

  }

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

  #menu li.level0>a {
    padding: 10px 15px;
    color: var(--sna-blue);
    font-size: 1.2rem;

    text-align: center;
    line-height: 1.2;
  }

  #menu ul.level1 {
    display: none;
    background-color: var(--sna-blue);
    position: fixed;
    top: 120px;
    left: 0;
    right: 0%;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 5rem;
    justify-content: start;
    max-height: 0;
    overflow: hidden;

  }

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

  }

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

  #menu li.level1>a {
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0 0 0.2rem 0;
  }

  #menu li.level1:hover>a,
  #menu li.level2:hover>a {
    color: #ffffff;
  }

  #menu ul.level2 {
    display: block;
  }

  #menu ul.level2 a {
    position: relative;
    padding: 0 0 2px 20px;

  }

  #menu ul.level2 a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0da";
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease;
  }

  #menu ul.level2 a:hover::before {
    content: "\f054";
    /* fa-angle-down */
  }

  #menu li.level2 {}


  #menu ul.level3 {
    display: block;
    font-size: 95%;
    padding: 0 0 0 20px;
  }

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

  #menu li.opened>ul {
    padding: 3rem 5rem 5rem !important;
    max-height: 70vh !important;
    min-height: 35vh;
    display: flex;
    background-color: var(--sna-blue);
  }

  #menu .close-icon {
    position: absolute;
    top: 15px;
    right: 40px;
    color: white;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all 200ms;
  }

  #menu .close-icon:hover {
    opacity: 1;
  }

}

@media screen and (min-width: 1200px) {
  #menu li.level0>a {
    padding: 10px 25px;
  }
}

@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(--sna-blue);
    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-video-sna.css */
article.video-sna {
  /*
  background-color: var(--sna-blue-2);
  padding: 1rem;
  border-radius: 10px;
  */
  margin-bottom: 0 !important;
}

article.video-sna .article-title span {
  color: var(--sna-blue-7);
}



article.video-sna .article-title span:before {
  content: "\f03d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 90%;
  margin-right: 0.7rem;
}._{}


/* article-homepage-visage.css */
article.homepage-visage {
  border: 3px solid var(--sna-green-5);
  padding: 10px 10px;
  border-radius: 10px;
  background-color: white;
}




article.homepage-visage .article-title span {
  color: var(--sna-green-7);

}



article.homepage-visage .article-title span:before {
  content: "\f02d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 90%;
  margin-right: 0.7rem;
}



article.homepage-visage .magazine-card {
  margin: 0 !important;
}

article.homepage-visage .magazine-cover {}._{}


/* article-bloc-links.css */
article.bloc-links {
  width: auto;
  max-width: 500px;
  --border-color: var(--sna-orange-5);
  --bg-color: var(--sna-orange-1);

  background-color: var(--bg-color);
  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-links-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

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

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

article.bloc-links .article-title {
  display: none;
}

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

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


/* Liens directs */
article.bloc-links a {
  color: var(--sna-orange-8);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  text-decoration: none !important;
  position: relative;
  padding: 0 0 0 0px;
}



article.bloc-links a:hover {
  color: var(--sna-orange);
  font-weight: 500;
  text-decoration: underline;
}._{}


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

article a {
  color: var(--sna-orange-8);
}

article a:hover {
  color: var(--sna-orange);
}._{}


/* 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: #333;
  color: white;
  padding: 25px 0;
}


footer .container-fluid {
  overflow: hidden;
}

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.selecteur-inscriptions.css */
article.selecteur-inscriptions {}

article.selecteur-inscriptions .card-title {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}._{}


/* article-homepage-shortcuts.css */
article.homepage-shortcuts {
  background-color: var(--sna-green-1);
  margin-bottom: 0 !important;
  text-transform: uppercase;
}


article.homepage-shortcuts .article-inner {
  width: 800px;
  max-width: 90%;
  margin: -100px auto 0 !important;

  background-color: white;
  border-radius: 15px;
  position: relative;
}

.article.homepage-shortcuts .container {
  margin: 0 !important;
  padding: 0 !important;
}

article.homepage-shortcuts .article-content {}

article.homepage-shortcuts .article-text {
  padding: 10px 0 0 0;
}



article.homepage-shortcuts ul {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0;
  margin: 0 !important;
  list-style: none;
  padding: 0;
  margin: 0;

}

article.homepage-shortcuts li {
  margin: 0 !important;
  padding: 0 !important;
  width: 120px;
}

article.homepage-shortcuts li::before {
  display: none;
}


article.homepage-shortcuts li a {
  display: block;
  display: flex;
  color: var(--sna-orange) !important;
  flex-direction: column;
  gap: 0rem;
  justify-content: start;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1.15;
  font-weight: bold;
  width: 100%;
  text-decoration: none !important;
  cursor: pointer;
}


article.homepage-shortcuts .img-wrapper {
  background-color: var(--sna-orange);
  width: 90px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 300ms;

}

article.homepage-shortcuts .img-wrapper img {
  width: 55px !important;
  height: 55px !important;
  filter: var(--white-filter);
}

article.homepage-shortcuts li:hover .img-wrapper {
  transform: scale(1.1);
}


article.homepage-shortcuts .swiper-pagination {
  top: unset;
  bottom: -25px;
  user-select: none;

}

@media (max-width: 575.98px) {
  article.homepage-shortcuts .article-text {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    /* un peu d’air sur les bords */

  }

  article.homepage-shortcuts ul li {
    flex: 0 0 auto;
    /* largeur auto, pas de wrap */
    scroll-snap-align: center;
    /* snap propre item par item */
  }

  /* (optionnel) masquer la scrollbar visuelle */
  article.homepage-shortcuts ul {
    /* scrollbar-width: none; */
  }

  article.homepage-shortcuts ul::-webkit-scrollbar {
    /* display: none; */
  }

  article.homepage-shortcuts li {
    width: 90px;
  }

  article.homepage-shortcuts .img-wrapper img {
    width: 40px !important;
    height: 40px !important;
    filter: var(--white-filter);
  }

}._{}


/* 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(--sna-blue);

}


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 ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

article.article-default ul:not(.list-unstyled) li {
  padding: 0 0 0 15px;
  margin: 10px 0 10px 20px;
  position: relative;
}

article.article-default ul:not(.list-unstyled) li:before {
  position: absolute;
  top: calc(0.15rem + 0.4vw);
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: '';
  background-color: var(--sna-green-5);


}


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


/* article-offres-emplois.css */
/* Wrapper */
article.offres-emplois {

  /* adapte à ta charte */
  --oe-ink: #1d1d1f;
  --oe-line: #e5e7eb;
  --oe-radius: 14px;
}

article.offres-emplois .article-title {
  margin-bottom: 2px;
}


/* Liste neutre */
article.offres-emplois ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

/* Chaque offre = ligne cliquable (on stylise le <li>, le lien est dedans) */
article.offres-emplois li {
  border: 1px solid var(--oe-line);
  border-radius: var(--oe-radius);
  background: #fff;
  transition: transform .08s ease, box-shadow .16s ease, border-color .16s ease;
  margin: 15px 0;
}

article.offres-emplois li:before {
  display: none;
}

/* Nettoie le <p> auto-généré par le CMS */
article.offres-emplois li>p {
  margin: 0;
}

/* Lien */
article.offres-emplois li a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  text-decoration: none;
  color: var(--oe-ink);
  font-weight: 600;
  line-height: 1.3;
  /* titres longs : clamp 2 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pastille à gauche */
article.offres-emplois li a::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8ff0b4, var(--sna-green));
  flex: 0 0 .6rem;
}

/* Icône PDF quand on détecte .is-pdf (ajoutée par JS) */
article.offres-emplois li a.is-pdf::after {
  content: "PDF";
  margin-left: auto;
  font-size: .75rem;
  border: 1px solid var(--sna-green);
  padding: .1rem .4rem;
  border-radius: .4rem;
  opacity: .9;
}

/* Hover/focus (survol sur le <li> pour agrandir la zone) */
article.offres-emplois li:hover {
  border-color: var(--sna-green);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
}

/* Mode sombre (si tu utilises prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  article.offres-emplois {
    --oe-ink: #f3f4f6;
    --oe-line: #26272b;
  }

  article.offres-emplois li {
    background: #0b0b0c;
  }

  article.offres-emplois li:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  }
}._{}


/* hompage.css */
#hp-content .column-group:first-of-type {
  background-color: var(--sna-blue-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: 1.3rem;
  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;
}

body.homepage .article-title-default h2 {
  text-align: center;
  font-size: 2.7rem;
  color: #595d59;
}

body.homepage .article-title-default span {
  position: relative;

}


body.homepage .first-column-group {
  background-color: var(--sna-blue-2);
  background-image: url('/img/engrenage-bg-20.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 3rem;
  /* équiv. py-5 */
  padding-bottom: 3rem;

  /* équiv. mb-5 */
}

body.homepage .first-column-group .articles-group-inner {
  padding-top: 3rem;
  padding-bottom: 3rem;
}



body.homepage .second-column-group {
  background-color: #f5f5f5;
  padding-top: 3rem;
  /* équiv. py-5 */
  padding-bottom: 3rem;
}._{}


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

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

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

body.infos .article-title-default h2 {
  text-align: left;
  font-size: 1.6rem;
  color: var(--sna-green);

}

body.infos .article-title-default span {
  position: relative;
  padding: 0px 0px 8px 0;
  position: relative;

}












body.infos .article-title-default span:after {
  content: ' ';
  width: 60px;

  height: 3px;
  background-color: var(--sna-green);
  position: absolute;
  bottom: 0;
  left: 0;
}

/*
body.infos .article-title-default span::before {
  content: "";
  position: absolute;
  top: 7;
  left: 0;
  aspect-ratio: 0.63;
  height: 60px;
  background-image: url("/img/engrenages-h2-gris.png?h=100");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
*/._{}


/* 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-events.css */
.homepage article.events-list {}

.homepage article.events-list .article-inner {
  padding: 5rem 0;
}

.homepage article.events-list .article-title h2 {
  color: var(--sna-blue-6);
}

.homepage article.events-list .article-title h2 span {}


.homepage article.events-list .article-title h2 span::before {

  content: "\f073";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-weight: normal;
  font-size: 80%;
  margin-right: 1rem;
}._{}


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

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


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

}

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



@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;

  }

  .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;
  }
}._{}


/* article-homepage-facebook.css */
article.homepage-facebook {
  border: 3px solid var(--sna-orange-6);
  padding: 10px 10px;
  border-radius: 10px;

}


article.homepage-facebook .article-title span::before {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  background-image: url("/img/fb-orange-7.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5rem;
  vertical-align: middle;
}

article.homepage-facebook .article-title span {
  color: var(--sna-orange-7);

}

article.homepage-facebook .swiper-button-next,
article.homepage-facebook .swiper-button-prev {
  filter: var(--orange-4-filter);
  transform: scale(60%)
}

@media screen and (max-width: 576px) {
  article.homepage-facebook {
    padding: 10px 0;
  }
}._{}


/* search-form-responsive.css */
@media screen and (min-width: 992px) {
  #menu .search-form {
    display: none;
  }

}

@media screen and (max-width: 991px) {
  header .search-form {
    display: none;
  }

  header #menu .search-form {
    display: block;
  }

  #menu .search-form .input-group {
    width: 300px;
    background-color: white;
  }
}._{}


/* article-homepage-actualites.css */
article.homepage-actualites {
  background-color: var(--sna-green-1);
  background-image: url(/img/engrenage-bg-40.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}




article.homepage-actualites .article-title h2 {
  color: var(--sna-green-6);
}


article.homepage-actualites .article-title h2 span {}

article.homepage-actualites .article-title h2 span::before {

  content: "\f1ea";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-weight: normal;
  font-size: 80%;
  margin-right: 1rem;

}




article.homepage-actualites .article-content {
  padding-top: 2rem;
  display: block !important;
  /* Avoid a bug of swiper */
}

#homepage-actualites {
  /* Conteneur général */
  margin: 0 auto;


}

#homepage-actualites .swiper-container {
  overflow-x: hidden;
  height: 440px
}

#homepage-actualites div.swiper-slide {
  padding: 0 1px;
  height: 100% !important;
  display: flex;
}





@media screen and (min-width: 1200px) {
  #homepage-actualites .swiper-button {}
}

@media screen and (max-width: 1199px) {}._{}


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


/* flipbook.css */
body.flipbook-opened {
  overflow: hidden;
  padding-right: 0px;
  touch-action: none;
}


#flipbook-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 11, 11, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column;

}


#flipbook-close {
  position: absolute;
  top: 20px;
  right: 40px;
}

#flipbook-wrapper {
  background: #111;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column;
}

#flipbook {
  width: 90vw;
  height: 90vh;
  max-height: 100vh;
  max-width: 100vw;
}


#flipbook0 img {
  max-width: 90vw;
  height: 100% !important;
}

#flipbook-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px auto 20px;
  padding: 10px;
}

#flipbook-nav .pin {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #999;
  border-radius: 50%;
  opacity: 0.6;
  cursor: pointer;
}

#flipbook-nav .pin.active {
  background: white;
  opacity: 1;
}._{}


/* partial-actualite-item.css */
.actualite-item {
  background-color: #f5f5f5;
  transition: all 300ms;
}

.actualite-item div.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--sna-gray);
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
  position: relative;
  padding-bottom: 50px;

  user-select: none;
}

.actualite-item div.cover {
  width: 100%;
}

.actualite-item div.cover div.img-wrapper {
  aspect-ratio: 1.5;
}

.actualite-item div.cover img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: all 300ms
}

.actualite-item div.body {
  position: relative;
  padding: 10px 10px 10px;
  flex: 1;
}

.actualite-item div.body {

  position: relative;
  padding: 10px 10px 10px;
  flex: 1;
}



.actualite-item div.theme {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.actualite-item div.theme span {
  display: inline-block;
  padding: 5px 10px;
  background-color: var(--sna-green);
  color: white;
  text-transform: uppercase;
  border-bottom-right-radius: 5px;
}

.actualite-item div.title {
  margin: px 0 10px;
  font-size: 1rem;
}

.actualite-item div.title a {
  color: var(--sna-green);
  text-transform: none;
  text-decoration: none !important;

}

.actualite-item div.summary {
  font-size: 0.9rem
}

.actualite-item div.bottom {
  padding: 7px 10px 7px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  line-height: 1;
  transition: all 300ms
}

.actualite-item div.bottom a {
  color: var(--sna-green);
  text-transform: none;

}


.actualite-item:hover div.cover img {
  transform: translateX(1.05);

}



.actualite-item:hover {
  background-color: white;

}



.actualite-item:hover div.bottom {
  background-color: white;

}._{}


/* 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;
}._{}


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


/* accessibilite.css */
a[href="#content"] {
  position: absolute;
  top: -9999px;

}

a[href="#content"]:focus {

  top: 0;
  left: 0;
  padding: 10px;
  background-color: #f0f0f0;
  color: #000;
  z-index: 2000;
}


.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}._{}


/* article-tableau-cni-passeports.css */
article.tableau-cni table {
  display: none;
  /* avant la transfo en JS */
}

article.tableau-cni .row {
  max-width: 800px;
  margin: 0 -30px;
}

/*
 https://www.saint-nicolas-aliermont.fr/msmedias/cni-passeports/CNI/CNI-Mineur.pdf */


cni-passeports article.tableau-cni .row>div {

  padding: 0 30px;


}

article.tableau-cni li {
  padding: 0;
  flex: 1;
  margin: 7px 0;
}

article.tableau-cni li:before {}



/*
article.tableau-cni ul a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border: 1px solid #e5e7eb;
  border-radius: .6rem;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: transform .06s, box-shadow .18s, border-color .18s;
}

article.tableau-cni ul a:hover {
  transform: translateY(-1px);
  border-color: #1d6b3a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

article.tableau-cni ul a::before {
  display: none;
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9ef0c2, #1d6b3a);
  flex: 0 0 .55rem;
}
*/._{}


/* section-page-cover.css */
section#page-cover {
  background-color: rgba(36, 105, 42, 0.1);
  background-color: var(--sna-green-7);
  background-image: url('/img/page-cover-bg.png');
  background-position: left top;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 3rem;
}

section#page-cover .wordings {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;

}

section#page-cover .wordings-inner {

  max-width: 700px;


}


section#page-cover h1,
section#page-cover .h1 {
  color: var(--sna-green);
  color: white;
  margin: 0;
  padding: 0;

}

section#page-cover .page-title {}

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;


}._{}


/* 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;
}._{}


/* publicact.css */
.publiact-wrapper {
  min-height: 700px;
}

.publiact-wrapper iframe {
  min-height: 700px;
}._{}


/* 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);
  }
}._{}