/******************* Reset & base *******************/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #250614;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset, 155px);
}

body {
  font-family: "Fira", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  min-width: 320px;
  background: #fff;
}

a {
  cursor: pointer;
  text-decoration: none;
}

/******************* Fonts *******************/

@font-face {
  font-family: "Artifont";
  src:
    url("fontsPack/Artisteeno_font_2023-Regular.woff2") format("woff2"),
    url("fontsPack/Artisteeno_font_2023-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Fira";
  src: url("fontsPack/FiraSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Fira";
  src: url("fontsPack/FiraSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Fira";
  src: url("fontsPack/FiraSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Fira";
  src: url("fontsPack/FiraSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Fira";
  src: url("fontsPack/FiraSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Fira";
  src: url("fontsPack/FiraSans-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

/******************* Variables *******************/

:root {
  /* Échelle typographique fluide basée sur 1rem = 10px */
  --step--1: clamp(0.5rem, 0.1rem + 2.3vw, 1.3rem);
  --step-0: clamp(0.8rem, 0.3rem + 2.3vw, 1.6rem);
  --step-1: clamp(1rem, 0.5rem + 2.3vw, 2rem);
  --step-2: clamp(1.5rem, 1rem + 2.3vw, 2.5rem);
  --step-3: clamp(2rem, 1.5rem + 2.3vw, 3.1rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.3vw, 3.9rem);
  --step-5: clamp(2.6rem, 2.1rem + 2.3vw, 4.9rem);
}

/******************* Typographie générale *******************/

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-3);
  padding: 1rem 0 0;
}

h3 {
  font-size: var(--step-2);
  padding: 1rem 0 0;
}

p {
  font-size: var(--step-1);
  padding: 1rem 0;
}

sup,
b {
  color: inherit;
}

.specialArtifont {
  font-family: "Artifont", "Fira", Arial, Helvetica, sans-serif;
}

/******************* Structure générale *******************/

.global {
  position: relative;
  min-height: calc(100vh - 2rem);
  width: 100%; /* ou calc(100% - 2rem) si tu veux vraiment une marge latérale */
  background: transparent;
  z-index: 1;
}

.main {
  position: relative;
  display: block;
  width: 100%;
}

.mainBox {
  position: relative;
  display: block;
  width: 100%;
  background: #fff url(imagesCSS/bodyBG.jpg) repeat scroll center top;
  z-index: 800;
  padding-bottom: 2rem;
  /*border-bottom: 0.5rem solid #070000;*/
}

#mainBox1 {
  padding-bottom: 2rem;
}

/******************* Header *******************/

.header {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 1000;
  background: transparent url(imagesCSS/headerBG.jpg) repeat scroll center top;
}

.headerTop {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  justify-content: center;
}

.headerBottomBG {
  position: relative;
  display: block;
  width: 100%;
  height: 0.1rem;
  pointer-events: none;
  border-bottom: 0.5rem solid #070000;
  box-shadow: 0 0.3rem 0.4rem #07000076;
}

/******************* Header Menu *******************/

.headerContent {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1300px;
  width: 100%;
  max-height: 70px;
  background: transparent;
  z-index: 998;
}

.headerLogo {
  position: relative;
  top: 0;
  left: 2rem;
  display: block;
  flex-shrink: 0;
  width: clamp(116px, 25vw, 70px);
  height: auto;
  aspect-ratio: 116 / 70 !important;
  background: transparent center / contain no-repeat
    url("imagesCSS/LogoEDGNQ.png");
  outline: none;
  transition: all 0.2s ease-in-out;
}

.headerLogo:hover {
  transform: scale(1.05);
}

.headerMenu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: auto 1rem auto auto;
  z-index: 999;
}

.headerMenu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  margin: auto 1rem;
  /*font-weight: bold;*/
  font-size: var(--step-1);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0.11rem 0.11rem 0 #fff;
  outline: none;
  cursor: pointer;
  transition:
    transform 0.2s ease-in-out,
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

.headerMenu a:hover {
  color: #742120;
  transform: scale(1.1);
}

.headerMenu .menuCTA {
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.6rem;
  border: 0.3rem solid #fff;
  font-size: var(--step-1);
  border-radius: 4rem;
  background-color: #811849;
  color: #fff;
  /*margin-left: 1.5rem;*/
  margin-right: 0;
  box-shadow: 0.1rem 0.1rem 0 #8118499b;
  text-shadow: none;
}

.headerMenu .menuCTA {
  font-weight: normal;
}

.headerMenu .menuCTA:hover {
  color: #fff;
  background-color: #811849;
  transform: scale(1.12);
}

.menuBoutique {
  position: relative;
  bottom: 0.3rem;
  right: 1.2rem;
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 24px;
  background: transparent;
  outline: none;
}

.boutonCaddie {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: transparent
    url("imagesCSS/caddie.png") no-repeat;
  background-size: 24px 24px;
  transition:
    transform 0.2s ease-in-out,
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  outline: none;
}

.boutonCaddie:hover {
  background: transparent
    url("imagesCSS/caddieHover.png")
    no-repeat;
  background-size: 24px 24px;
  transform: scale(1.1);
}

.boutonCompte {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: transparent
    url("imagesCSS/monCompte.png")
    no-repeat;
  background-size: 24px 24px;
  transition:
    transform 0.2s ease-in-out,
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

.boutonCompte:hover {
  background: transparent
    url("imagesCSS/monCompteHover.png")
    no-repeat;
  background-size: 24px 24px;
  transform: scale(1.1);
}

.menuToggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 0.4rem + 0.6vw, 0.9rem);
  min-height: clamp(3.8rem, 3.2rem + 1.8vw, 5.2rem);
  padding: clamp(0.5rem, 0.4rem + 0.8vw, 0.8rem)
    clamp(0.9rem, 0.7rem + 1vw, 1.4rem);
  margin: auto 1.2rem auto auto;
  border: 0.3rem solid #fff;
  border-radius: 4rem;
  background-color: #811849;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0.1rem 0.1rem 0 #f3bfd5;
}

.menuToggle:hover {
  transform: scale(1.12);
}

.menuToggle:active {
  transform: scale(1.04) translateY(0.1rem);
}

.menuToggleLabel {
  display: inline-block;
  font-family: inherit;
  font-family: "Artifont", "Fira", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: var(--step-0);
  color: #fff;
  line-height: 1;
  margin: 0;
}

.menuToggleIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menuToggleIcon span {
  display: block;
  width: clamp(1.8rem, 1.5rem + 0.6vw, 2.4rem);
  height: clamp(0.2rem, 0.16rem + 0.15vw, 0.3rem);
  /*margin: clamp(0.12rem, 0.1rem + 0.1vw, 0.2rem) auto;*/
  background: #fff;
  border-radius: 2rem;
    box-shadow:
      0 calc(clamp(0.12rem, 0.1rem + 0.1vw, 0.2rem) + clamp(0.2rem, 0.16rem + 0.15vw, 0.3rem)) 0 #fff,
      0 calc(-1 * (clamp(0.12rem, 0.1rem + 0.1vw, 0.2rem) + clamp(0.2rem, 0.16rem + 0.15vw, 0.3rem))) 0 #fff;
  transition: all 0.25s ease-in-out;
}

.menuToggle {
  min-height: clamp(4rem, 3.5rem + 1.5vw, 5.2rem);
  padding: clamp(0.5rem, 0.4rem + 0.6vw, 0.8rem)
    clamp(0.8rem, 0.6rem + 0.8vw, 1.4rem);
}

#closeMenu {
  opacity: 0;
    visibility: hidden;
}

.selected {
  color: #742120;
}

/******************* box & titreMainBox *******************/

.box,
.titreMainBox {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1300px;
  width: 100%;
  box-sizing: border-box;
  z-index: 50;
  background-color: transparent;
  justify-content: center;
  padding: 1rem 2rem;
}

.titreMainBox h1 {
  padding: 0;
  font-weight: bold;
  font-size: var(--step-5);
  color: #811849;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0.18rem 0.18rem 0 #fff;
}

.box h2,
.titreMainBox h2 {
  font-weight: bold;
  color: #811849;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0.18rem 0.18rem 0 #fff;
}

.box h3,
.titreMainBox h3 {
  font-weight: bold;
  color: #811849;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0.18rem 0.18rem 0 #fff;
}

.box p {
  font-weight: normal;
  font-size: var(--step-1);
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0.1rem 0.1rem 0 #fff;
}

#autoedition .box a {
  color: #811849;
}

#autoedition .box a:hover {
  font-weight: bold;
  color: #811849;
}

#mainBox1 h1 {
  padding-top: 1rem;
}

/******************* ToggleBlock *******************/

.toggleBlock {
  overflow: hidden;
}

.toggleContent {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-1rem);
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    margin-top 0.35s ease;
}

.toggleContent.is-open {
  opacity: 1;
  transform: translateY(0);
}

#projets .toggleContent.is-open {
  margin: 2rem;
  opacity: 1;
  transform: translateY(0);
}

.text-box {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.text-box.collapsed {
  max-height: 120px;
}

#toggleBlock-lesBoulets {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1300px;
  width: 100%;
  box-sizing: border-box;
  z-index: 50;
  /*margin: 4rem 0;*/
  /*padding: 1rem 2rem;*/
  padding: 0 0.1rem;
}

#toggleBlock-lesBoulets .toggleContent {
  background: #ffffff57 url(imagesCSS/boxBG.png) repeat scroll center top;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 1);
  border: 0.5rem solid #070000;
  box-sizing: border-box;
}

#projets #toggleContent-lesBoulets.is-open {
  margin-top: 2rem;
  margin-bottom: 3rem;
  transform: translateY(0);
}


#toggleBlock-lesBoulets .formLabel {
  color: #250614;
  text-shadow: 0.08rem 0.08rem 0 #ffffff;
  text-align: left;
}

#toggleBlock-lesBoulets p {
  color: #250614;
  text-shadow: 0.08rem 0.08rem 0 #ffffff;
   text-align: justify;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* IE/Edge */
  hyphens: auto;         /* Navigateurs modernes */
  text-justify: inter-word;
}


 

#toggleBlock-lesBoulets .formLabel {
  margin: 0;
  padding: 0;
}

#toggleBlock-lesBoulets h3 {
  color: #003d87;
  text-shadow: 0.12rem 0.12rem 0 #ffffff;
  /**padding: 0 0 2rem;**/
}

#toggleBlock-lesBoulets h1,
#toggleBlock-lesBoulets h2 {
  color: #003d87;
  text-shadow: 0.12rem 0.12rem 0 #ffffff;
  padding: 0;
}

/******************* ToggleBlockFAQ *******************/

.toggleBlockFAQ {
  overflow: hidden;
}

.toggleContentFAQ {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-1rem);
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    margin-top 0.35s ease;
}

.toggleContentFAQ.is-open {
  opacity: 1;
  transform: translateY(0);
}

.boutonFAQ {
  color: #811849;
  text-decoration: none;
  cursor: pointer;
}

#faq h3 {
  padding: 0 0 0.5rem;
  font-size: var(--step-1);
}

/******************* Boite colonne *******************/

.layoutCols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  padding: 1rem 2rem;
}

.layoutCols2 > * {
  min-width: 0;
}

.layoutCols2 iframe,
.layoutCols2 img,
.layoutCols2 video {
  max-width: 100%;
}

/******************* Footer *******************/

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background: #36021b url(imagesCSS/footerBG.jpg) repeat scroll center top;
  z-index: 0;
  overflow-y: auto;
}

.clear {
  /**pour rétablir le flux - Vestige des âges sombres du CSS – ne pas supprimer sous peine de malédiction **/
  clear: both;
  display: block;
  font-size: 1px;
  line-height: 0px;
}

/*** Footer Content ***/

.footerContent {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  justify-content: center;
  padding: 2rem 3rem 3rem 3rem;
  text-shadow: -0.1rem -0.1rem 0 #4a0224;
}

.footer h1 {
  text-align: center;
  color: #fff;
}

.footer h2 {
  text-align: left;
  color: #fff;
}

.footer p {
  font-size: var(--step-0);
  text-align: left;
  color: #fff;
}

.footer span {
  font-style: italic;
  font-size: var(--step--1);
  text-align: justify;
  color: #fff;
}

/******************* Footer colonnes *******************/

.footerCols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  width: 100%;
}

.footerCol {
  min-width: 0;
}

.footerCol h2 {
  font-size: var(--step-1);
  margin-top: 2rem;
}

.footerCol p {
  font-size: var(--step--1);
  letter-spacing: 0.1rem;
  padding-bottom: 0;
  text-decoration: none;
}

.footerCol a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.footerCol a:hover {
  text-decoration: none;
  transform: scale(1.15);
}

/******************* Formulaires *******************/

.formGroup {
  margin-bottom: 1.8rem;
}

.formLabel {
  display: block;
  margin-bottom: 0.4rem;
  padding-left: 1.5rem;
  font-weight: normal;
  font-style: italic;
  font-size: var(--step--1);
  color: #250614;
}

.mainBox-BGPink-fontWhite .formLabel,
.footer .formLabel {
  color: #fff;
  text-shadow: -0.1rem -0.1rem 0 #4a0224;
}

.formInput,
.formTextarea,
.formSelect {
  width: 100%;
  padding: 0.9rem 1.6rem;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: normal;
  font-size: var(--step--1);
  line-height: 1.1;
  color: #250614;
  background: #ffffff84;
  border: 0.3rem solid #710d3cd2;
  border-radius: 1rem;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.formTextarea {
  min-height: 12rem;
  resize: vertical;
  border-radius: 1rem;
}

.formInput::placeholder,
.formTextarea::placeholder {
  color: #710d3c;
  opacity: 0.65;
}

.formInput:focus,
.formTextarea:focus,
.formSelect:focus,
.formInput:hover,
.formTextarea:hover,
.formSelect:hover {
  outline: none;
  border-color: #710d3c;
  box-shadow: 0 0 0 0.2rem #f3bfd5;
  outline: none;
  background: #ffffffdf;
}

.formInput:disabled,
.formTextarea:disabled,
.formSelect:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/******************* Boutons *******************/

.layoutButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

.layoutButtons .boutonPoussoir {
  padding-top: 0;
}

.boutonPoussoir {
  display: flex;
  justify-content: center;
  /*padding-top: 1rem;*/
  margin-bottom: 1rem;
}

.boutonPoussoir a,
.formButton {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  font-size: var(--step-0); /* ≈ 16–20px */
  text-align: center;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0;
  background-color: #811849;
  border: 0.3rem solid #fff;
  border-radius: 4rem;
  padding: 0.9rem 1.6rem;
  transition: all 0.2s ease-in-out;
  margin: 1rem 0;
  cursor: pointer;
  box-shadow: 0.1rem 0.1rem 0 #8118499b;
}

.formButton {
  align-self: flex-start;
}

.boutonPoussoir a:hover,
.formButton:hover {
  background-color: #811849;
  color: #fff;
  transform: scale(1.2);
}

/******************* Newsletter *******************/

.newsletterForm {
  display: flex;
  flex-direction: column;
  /*gap: 1rem;*/
  margin-top: 1.5rem;
}

.newsletterNote {
  margin-top: 0;
  padding-bottom: 0;
  font-style: italic;
  font-size: var(--step--1);
  text-align: left;
  color: #fff;
}

/******************* Contact *******************/

.contactForm .formButton {
  margin-top: 0.2rem;
}

/******************* Don *******************/

.donationForm {
  margin: 0 0 3rem;
}

.donationOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.donationChoice {
  position: relative;
  display: inline-block;
  margin-right: 1rem;
}

.donationChoice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.donationChoice span {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 4rem;
  background-color: #fff;
  color: #710d3c;
  border: 0.3rem solid #f3bfd5;
  box-shadow: 0.1rem 0.1rem 0 #8118499b;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.donationChoice span:hover {
  transform: scale(1.2);
}

.donationChoice input:checked + span {
  border: 0.3rem solid #fff;
  background-color: #811849;
  color: #fff;
  font-weight: normal;
  box-shadow: 0.1rem 0.1rem 0 #8118499b;
}

.donationFreeAmount {
  display: none;
}

.donationIntro {
  margin-bottom: 1.5rem;
  font-size: var(--step-0);
  opacity: 0.9;
}

.donationForm .formButton {
  align-self: flex-start;
  font-size: var(--step-1);
}

/******************* Particularités à déclarer à la fin !!! *******************/

.mainBox-BGPink-fontWhite {
  background: #811849 url(imagesCSS/pinkBG.jpg) repeat scroll center top;
  z-index: 798;
}

.mainBox-BGPink-fontWhite h1,
.mainBox-BGPink-fontWhite h2,
.mainBox-BGPink-fontWhite h3,
.mainBox-BGPink-fontWhite p {
  color: #fff;
  text-shadow: -0.18rem -0.18rem 0 #0000007d;
}

.borderLine {
  position: relative;
  display: block;
  z-index: 799;
  width: 100%;
  height: 0.1rem;
  pointer-events: none;
}

.shadowUp {
  border-top: 0.5rem solid #070000;
  box-shadow: 0 -0.2rem 0.8rem #070000b8;
}

.shadowDown {
  border-bottom: 0.5rem solid #070000;
  box-shadow: 0 0.2rem 0.8rem #070000b8;
}

/******************* Product Top Box *******************/

.productTopBox {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  width: 100%;
  padding: 1.5rem 2.5rem;
}

.productGallery,
.productBuyBox {
  min-width: 0;
}

.productMainVisual {
  width: 100%;
  margin-bottom: 1.5rem;
  box-shadow: 0 0.4rem 2rem #00000050;
}

.productMainVisual img {
  display: block;
  width: 100%;
  height: auto;
  border: 0.5rem solid #070000;
}

.productThumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.productThumb {
  opacity: 0.8;
  padding: 0;
  border: 0.3rem solid #070000;
  background: #fff;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.productThumb:hover {
  opacity: 1;
  transform: scale(1.04);
}

.productThumb.is-active {
  opacity: 1;
  border: 0.3rem solid #003d87;
}

.productThumb img {
  display: block;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

.productSubtitle {
  font-size: var(--step-5);
  margin: 0 0 1rem;
  font-style: italic;
}

.productPrice {
  font-size: var(--step-5);
  font-weight: bold;
}

.productShortText {
  font-size: var(--step--1);
  margin: 0;
  padding: 0 0 1rem;
  font-style: italic;
  font-weight: bold;
}

.productMeta {
  margin-bottom: 2rem;
}

.productMeta p {
  padding: 0;
  font-size: var(--step-0);
}

.productBuyActions {
  display: flex;
  /*flex-direction: column;
  gap: 0.5rem;
  max-width: 20rem;*/
}

.productQty {
  max-width: 9rem;
  border: 0.3rem solid #5b97e1;
}

.productQty:focus {
  outline: none;
  border-color: #002552;
  box-shadow: 0 0 0 0.2rem #5b97e1;
}

.productBuyButton,
.productBuyButton:hover {
  width: fit-content;
  background-color: #003d87;
  box-shadow: 0.1rem 0.1rem 0 #00326f5f;
  font-size: var(--step-1);
}

.productNote {
  margin-top: 0;
  padding: 0;
  font-size: var(--step--1) !important;
}

/******************* Tab Nav *******************/

.tabs {
  width: 100%;
  padding: 1rem 1.5rem;
  box-shadow: 0 0.4rem 2rem #00000050;
  border: 0.5rem solid #070000;
  margin-bottom: 2rem;
}

.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.tab-item {
  font: inherit;
  cursor: pointer;
  border: none;
  padding: 0.8rem 1.4rem;
  border-radius: 2.5rem;
  font-size: var(--step-0);
  background: #b0d0f8;
  color: #003d87;
  border: 0.3rem solid #fff;
  box-shadow: 0.1rem 0.1rem 0 #00326f5f;
  transition: all 0.2s ease-in-out;
}

.tab-item:hover {
  transform: scale(1.2);
}

.tab-item.is-active {
  background: #003d87;
  color: #fff;
}

.tabs-box {
  position: relative;
  width: 100%;
}

.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(0.8rem);
}

.tab-panel a {
  display: inline-block;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
  font-weight: normal;
}

.tab-panel a:hover {
  text-decoration: underline;
  transform: scale(1.03);
}

.tab-panel.is-active {
  display: block;
  animation: tabFadeIn 0.25s ease forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.siteModal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;

  background: rgba(0, 0, 0, 0.45);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
}

.siteModal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0s;
}

.siteModalBox {
  position: relative;
  width: min(100%, 52rem);
  padding: 2.5rem 2rem 2rem 2rem;
  border: 0.4rem solid #070000;
  background: #fff url(imagesCSS/bodyBG.jpg) repeat scroll center top;
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.35);
}

.siteModalBox h2 {
  margin-bottom: 1rem;
}

.siteModalClose {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border: 0.2rem solid #fff;
  border-radius: 4rem;
  background: #981653;
  box-shadow: 0.1rem 0.1rem 0 #8118499b;
  color: #fff;
  font: inherit;
  font-size: var(--step-5);
  line-height: 0.5;
  padding: 0.06rem 0.16rem 0.14rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#closeMenu {
  top: 0;
  right: 1rem;
  padding: 0;
}

.siteModalClose:hover {
  transform: scale(1.08);
}

#boutonSurprise {
  margin-top: -2rem;
}

#boutonSurprise a {
  margin-bottom: -3rem;
}

.box p,
.footer p {
  text-align: justify;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* IE/Edge */
  hyphens: auto;         /* Navigateurs modernes */
  text-justify: inter-word;
}
/*
.borderBottomLinePinkDown {
  border-bottom: 10px solid transparent;
  border-image: url(imagesCSS/borderBottomPinkDown.png) 10 repeat;
}

.borderBottomLineWhiteDown {
  border-bottom: 10px solid transparent;
  border-image: url(imagesCSS/borderBottomWhiteDown.png) 10 repeat;
}*/