/******************************/
/*********** Général***********/
/******************************/
html {
  --bg-color: #fff;
  --fs-title: clamp(1.625rem, 1.4126rem + 0.9061vw, 2.5rem); /* 26px to 40px */
  --footer-text-color: var(--CONFIG-footer-text-color);
  --bg-img-footer: var(--CONFIG-bg-img-footer);
  
  /***********************************************************************************************************/
  /* Ces variable sont déja prédéfinies (pas besoin de les décommenter), mais vous pouvez les customiser ici */
  /***********************************************************************************************************/
  /* --bg-img-body: linear-gradient(to right, blue, orange); */
  
  /* --ff-global: 'Poppins', sans-serif; */
  
  /* --max-width-body: 1280px; */
  /* --max-width-bodyContentLeftFrame: 780px; */
  
  /* --title-text-color: black; */
  /* --paragraphe-text-color: #c3c3c3; */

  /* --fs-paragraphe: clamp(1rem, 0.8786rem + 0.5178vw, 1.5rem); */ /* 16px to 24px */
  /* --fs-footer-text: clamp(0.8125rem, 0.7063rem + 0.4531vw, 1.25rem); */ /* 13px to 20px */
}

* {
  padding: 0;
  margin: 0;
}

body,
html {
  font-size: 16px;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color, #fff);
  background-image: var(--bg-img-body);
  font-family: var(--ff-global, "Poppins", sans-serif);
  overflow-x: hidden;
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
  font-family: var(--ff-global, "Poppins", sans-serif);
}

::-webkit-input-placeholder {
  font-family: var(--ff-global, "Poppins", sans-serif);
}

:-moz-placeholder {
  font-family: var(--ff-global, "Poppins", sans-serif);
}

::-moz-placeholder {
  font-family: var(--ff-global, "Poppins", sans-serif);
}

:-ms-input-placeholder {
  font-family: var(--ff-global, "Poppins", sans-serif);
}

h1 {
  font-size: var(--fs-title);
  color: var(--title-text-color);
}

p {
  font-size: var(--fs-paragraphe);
  color: var(--paragraphe-text-color);
}

img {
  display: block;
  width: 100%;
}

a {
  color: var(--footer-text-color, #fff);
}

ul {
  list-style: none;
}

/******************************/
/*********** Header ***********/
/******************************/
.arrowBlack {
  width: 20px;
  height: 20px;
  padding: 40px;
  transform: translateX(-40px);
}

/*******************************/
/*********** Content ***********/
/*******************************/
.bodyContent {
  height: 100%;
  max-width: var(--max-width-body, 1280px);
  padding: 0 30px;
  margin: 0 auto;
}

.bodyContentLeftFrame {
  max-width: var(--max-width-bodyContentLeftFrame, 780px);
  padding-bottom: 30px;
}

/*********************************************************/
/*********** CGVU & confidentialité (exports Docs) *******/
/*********************************************************/
/* Conteneur de l'export : on retire la marge et la largeur "page A4" de Google Docs */
.bodyContentLeftFrame .doc-content {
  padding: 0 !important;
  max-width: none !important;
}

/* Titre de la page : les exports Google Docs contiennent parfois une règle h1 qui l'écraserait */
.bodyContentLeftFrame > h1 {
  font-family: var(--ff-global, "Poppins", sans-serif);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: normal;
  color: var(--title-text-color);
  text-align: left;
  padding: 0;
}

/* CGV (FR et EN) : même écart entre paragraphes, quel que soit l'export */
.cgvuDoc > p {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.cgvuDoc > p + p {
  margin-top: 0.45rem;
}

/* Puces des documents légaux : une seule mise en forme pour toutes les puces.
   L'export Google Docs varie d'un élément à l'autre (retraits différents, éléments
   mal convertis avec la puce au milieu du texte) : on remplace sa puce par la nôtre. */
.doc-content ul > li {
  list-style: none !important;
  position: relative;
  margin-left: 2.1rem !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* Phrase qui suivait une liste et que l'export avait collée dans la dernière puce */
.docSplit {
  margin-top: 0.3rem;
}

.doc-content ul > li::before {
  content: "•" !important;
  position: absolute;
  left: -0.8rem;
  margin: 0 !important;
  min-width: 0 !important;
  display: inline !important;
}

/* Espace régulier avant chaque article / section (remplace les paragraphes vides de l'export).
   !important : les styles de l'export Google Docs ajoutent leurs propres marges. */
.docSection {
  margin-top: 1.5rem !important;
  padding-top: 0 !important;
  /* La taille du texte est portée par le span : on évite une ligne plus haute que le texte */
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

.docSubsection {
  margin-top: 1rem !important;
  padding-top: 0 !important;
}

ol.docSection > li,
ol.docSubsection > li {
  padding-top: 0 !important;
}

/* Le texte qui suit un sous-titre reprend le même écart que sous un titre de section */
.docSubsection + p {
  padding-top: 0.25rem !important;
}

/* Mentions légales : une entrée = intitulé en gras + valeur */
.legalItem {
  margin-top: 1rem;
}

.legalItem:first-child {
  margin-top: 0.5rem;
}

.legalItem p + p {
  margin-top: 0.15rem;
}

.legalNote {
  margin-top: 1.5rem;
}

/***************************/
/*********** FAQ ***********/
/***************************/
.faqIntro {
  margin: 0.75rem 0 2rem;
  line-height: 1.6;
}

/* Les liens du contenu (le style global des liens est celui du footer, en blanc) */
.faqPage p a {
  color: #FF5E14;
}

.faqEmpty {
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background-color: rgba(2, 19, 43, 0.05);
  line-height: 1.6;
}

/* Couleurs reprises du document FAQ : titres de rubrique en or, questions et réponses en noir */
.faqToc {
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background-color: rgba(2, 19, 43, 0.05);
}

.faqTocTitle {
  margin-bottom: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000000;
}

.faqToc ol {
  list-style: decimal;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}

.faqToc li::marker {
  color: #ebac48;
  font-weight: 700;
}

.faqToc a {
  color: #000000;
  font-size: var(--fs-paragraphe);
  font-weight: 600;
  text-decoration: none;
}

.faqToc a:hover {
  color: #ebac48;
}

.faqSection {
  margin-bottom: 2.5rem;
  /* Le titre ne passe pas sous le haut de l'écran quand on clique dans le sommaire */
  scroll-margin-top: 1.5rem;
}

.faqSection h2 {
  margin-bottom: 0.5rem;
  color: #ebac48;
  /* 18px to 22px */
  font-size: clamp(1.125rem, 1.0643rem + 0.2589vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
}

.faqItem {
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}

.faqItem summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}

.faqItem summary::-webkit-details-marker {
  display: none;
}

.faqItem summary h3 {
  color: #000000;
  font-size: var(--fs-paragraphe, 1rem);
  font-weight: 700;
  line-height: 1.4;
}

.faqItem summary::after {
  content: "+";
  flex-shrink: 0;
  color: #ebac48;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.faqItem[open] summary::after {
  content: "–";
}

.faqAnswer {
  padding-bottom: 1.1rem;
}

.faqAnswer p,
.faqAnswer li {
  color: #000000;
  line-height: 1.6;
}

.faqAnswer p + p,
.faqAnswer p + ul,
.faqAnswer p + ol,
.faqAnswer ul + p,
.faqAnswer ol + p {
  margin-top: 0.6rem;
}

.faqAnswer ul,
.faqAnswer ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.3rem;
}

.faqAnswer ul {
  list-style: disc;
}

.faqAnswer ol {
  list-style: decimal;
}

html[dir="rtl"] .faqToc ol,
html[dir="rtl"] .faqAnswer ul,
html[dir="rtl"] .faqAnswer ol {
  padding-left: 0;
  padding-right: 1.25rem;
}

/***************************************************/
/*********** Version arabe (droite à gauche) *******/
/***************************************************/
html[dir="rtl"] {
  --ff-global: 'Poppins', 'Cairo', sans-serif;
}

html[dir="rtl"] .arrowBlack {
  transform: translateX(40px) scaleX(-1);
}

/******************************/
/*********** Footer ***********/
/******************************/
footer {
  background-image: var(
    --bg-img-footer,
    linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0))
  );
  color: var(--footer-text-color, #fff);
  padding: 1.15rem 1.875rem 1.15rem;
  margin-top: 20px;
}

footer ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
}

footer li {
  font-size: var(--fs-footer-text, clamp(0.625rem, 0.5569rem + 0.2903vw, 0.8125rem));
  /* 10px to 13px */
}


/**********************************/
/*********** MediaQuery ***********/
/**********************************/

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

  footer ul {
    display: grid;
  }

  li {
    text-align: center;
  }
}