@charset "UTF-8";
/* ==========================================================================
   _base.scss

   Rôle :
   Contient les styles de base pour les éléments HTML génériques :
   - body, main, section, article, etc.
   - marges et paddings globaux
   - styles par défaut pour les boutons et formulaires simples

   But :
   Définir les fondations du style global avant d’ajouter des composants.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* ==========================================================================
   _reset.scss

   Rôle :
   Contient les règles de réinitialisation CSS.
   Sert à neutraliser les styles par défaut des navigateurs pour garantir une base cohérente.

   But :
   Offrir un point de départ propre avant d'appliquer les styles personnalisés du projet.

   Utilisation :
   Inspiré des resets classiques (Eric Meyer, Normalize.css, etc.).
   Ce fichier est importé en tout premier dans app.scss.
   ========================================================================== */
/* ====== SETTINGS ====== */
/* ==========================================================================
   _variables.scss

   Rôle :
   Contient toutes les variables globales utilisées dans le projet :
   - Couleurs
   - Tailles de police
   - Espacements
   - Breakpoints
   - Z-index, bordures, etc.

   But :
   Centraliser toutes les constantes de design pour simplifier la maintenance
   et garantir la cohérence visuelle du site.

   Utilisation :
   Déclarer ici les variables, puis les utiliser dans les autres fichiers SCSS.
   Exemple :
     $color-primary: #4a90e2;
     h1 { color: $color-primary; }
   ========================================================================== */
/* ====== TEXT ====== */
/* ====== BACKGROUND COLOR ====== */
/* ====== SETTINGS ====== */
/* ==========================================================================
   _mixins.scss

   Rôle :
   Contient les mixins SCSS, c’est-à-dire des blocs de code réutilisables
   permettant d’éviter la duplication (principe DRY).

   But :
   Simplifier les déclarations répétitives comme :
   - Alignements flexbox
   - Media queries responsive
   - Ombres, transitions, animations
   - Gestion de thèmes, etc.

   Utilisation :
   Exemple :
     @mixin flex-center {
       display: flex;
       justify-content: center;
       align-items: center;
     }

     .header {
       @include flex-center;
     }
   ========================================================================== */
/* =============================
   FLEX MIXIN
   Utilisation :
   @include flex($direction, $justify, $align, $wrap, $gap);
   ============================= */
/* ==========================================================================
   _fonts.scss

   Rôle :
   Gère les polices de caractères du projet :
   - Imports Google Fonts
   - Déclarations @font-face pour les polices locales
   - Définition des familles typographiques globales

   But :
   Centraliser la gestion des polices pour assurer une cohérence typographique
   sur l’ensemble du site.

   Utilisation :
   Exemple :
     @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

     body {
       font-family: 'Open Sans', sans-serif;
     }
   ========================================================================== */
/* ====== BASE ====== */
/* ====== SETTINGS ====== */
body {
  background-image: url("../images/fond_etoile-nHCejEb.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #FFF;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 40px;
}

a {
  color: #FFF;
  text-decoration: none;
}

.body--mobile {
  padding-top: 5vh;
  padding-bottom: 10vh;
  font-size: 24px;
}

/* ==========================================================================
   _typography.scss

   Rôle :
   Définit les styles typographiques globaux du site :
   - Hiérarchie des titres (h1 à h6)
   - Paragraphes, citations, listes
   - Liens et styles de texte par défaut

   But :
   Garantir une cohérence typographique sur l'ensemble du projet.

   Utilisation :
   Applique les polices définies dans settings/_fonts.scss
   et les tailles ou couleurs issues de settings/_variables.scss.
   ========================================================================== */
h2 {
  margin: 0;
}

/* ====== COMPONENTS ====== */
/* === atoms === */
.adsbygoogle {
  background: transparent;
  width: 100%;
}

/* ====== SETTINGS ====== */
.btn {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.btn--purple {
  background: linear-gradient(90deg, rgba(80, 60, 201, 0.9) 0%, rgba(41, 30, 209, 0.9) 100%);
}
.btn--purple:hover {
  background: linear-gradient(90deg, rgba(80, 60, 201, 0.9) 0%, rgba(30, 68.78, 209, 0.9) 100%);
}
.btn--clear {
  background: rgba(255, 255, 255, 0);
  border: 1px rgba(255, 255, 255, 0.2) solid;
}
.btn--clear:hover {
  background: rgba(255, 255, 255, 0.03);
}
.btn--blackPurple {
  height: 35px;
  background: rgb(23, 21, 66);
}
.btn--blackPurple:hover {
  background: rgba(23, 21, 66, 0.8);
}

.line {
  width: 90%;
  outline: 1px white solid;
}

/* === molecules === */
/* ====== SETTINGS ====== */
.titlePage {
  width: 100%;
  text-align: center;
}
.titlePage__title {
  margin-bottom: 0.5rem;
}
.titlePage__description {
  margin-top: 0;
}

.cardPrivacyPolicy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5vw;
  background-color: rgba(255, 255, 255, 0.05);
  text-align: center;
  border-radius: 10px;
  backdrop-filter: blur(7px);
  padding: 10px;
}
.cardPrivacyPolicy:hover {
  transform: scale(1.05);
}
.cardPrivacyPolicy {
  width: 25vw;
  height: 20rem;
}
.cardPrivacyPolicy__list {
  text-align: left;
}

/* ====== SETTINGS ====== */
.cardPresentation {
  width: 195px;
  height: 280px;
  background-color: rgba(255, 255, 255, 0.05);
  text-align: center;
  border-radius: 10px;
  backdrop-filter: blur(7px);
  padding: 10px;
  display: flex;
  flex: 0 0 195px;
  flex-direction: column;
  align-items: center;
}
.cardPresentation__image {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  object-fit: cover;
}
.cardPresentation__button {
  margin-top: auto;
  display: flex;
  justify-content: center;
  width: 100%;
}
.cardPresentation:hover {
  transform: scale(1.05);
}

/* ====== SETTINGS ====== */
.code {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1vw;
  display: flex;
  padding: 0 1rem;
  width: 330px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(17, 14, 48, 0) 0%, rgba(17, 14, 48, 0.75) 5%, rgba(17, 14, 48, 0.75) 95%, rgba(17, 14, 48, 0) 100%);
}
.code__date {
  color: rgb(144, 202, 255);
}
.code .code__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(144, 202, 255);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.code .code__checkbox:hover {
  border-color: rgb(195, 226.3513513514, 255);
}
.code .code__checkbox:checked {
  background: rgb(144, 202, 255);
  border-color: rgb(144, 202, 255);
}
.code .code__checkbox:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
.code .code__checkbox--mobile {
  transform: scale(1.3);
}
.code__end {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1vw;
}
.code__end--mobile {
  gap: 3vw;
}
.code--mobile {
  width: 70vw;
}

.toast-copy {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}
.toast-copy.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === organisms === */
/* ====== SETTINGS ====== */
.header {
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 9.7vh;
  min-height: 80px;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header__nav__logoLST {
  height: 75px;
  width: 75px;
  padding-right: 10px;
}
.header__nav__button {
  padding-right: 25px;
}
.header__user {
  display: flex;
  align-items: center;
  padding-right: 15px;
}
.header__user__logo {
  height: 50px;
  width: 50px;
  padding-left: 10px;
}

/* ====== SETTINGS ====== */
.footer {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 0%, #110E30 5%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.footer--mobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10rem;
  background: rgba(255, 255, 255, 0.05);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer__top {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__top__discord {
  width: 32px;
  height: 32px;
}
.footer__top__nav {
  display: flex;
  gap: 1rem;
}
.footer__copyright {
  width: 70%;
  text-align: center;
}
.footer__icon {
  width: 7.5vw;
  height: auto;
}

/* ====== SETTINGS ====== */
.banner {
  background: linear-gradient(180deg, rgba(17, 14, 48, 0) 0%, rgba(17, 14, 48, 0.75) 5%, rgba(17, 14, 48, 0.75) 95%, rgba(17, 14, 48, 0) 100%);
  padding: 3rem 1rem;
  overflow: hidden;
}
.banner__title {
  text-align: center;
  margin: 0;
}
.banner__content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 28px 15px;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}
.banner__content--toolsMobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.banner__content::-webkit-scrollbar {
  display: none;
}
.banner__content > * {
  flex: 0 0 auto;
  text-align: center;
}

/* === pages === */
.home__buttonGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 33em;
  margin: 0 auto;
}
.home__cardPresentationGroup {
  display: flex;
  gap: 50px;
  justify-content: center;
  width: calc(50% + 25px);
  margin: 0 auto;
}

.giftCode {
  min-height: 100vh;
}
.giftCode__header {
  position: fixed;
  top: 5%;
  width: 100%;
}
.giftCode__pub {
  position: fixed;
  top: 15%;
  width: 15vw;
  height: 5vw;
  background: transparent;
}
.giftCode__pub--left {
  left: 0;
}
.giftCode__pub--right {
  right: 0;
}
.giftCode__pub--mobile {
  width: 10vw;
}
.giftCode__content {
  width: 60%;
  padding-left: 20%;
}
.giftCode__content--mobile {
  margin-top: 15%;
}
.giftCode__content__container {
  z-index: 1000;
  display: grid;
  gap: 25px 50px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  width: 100%;
  justify-items: center;
}
.giftCode__content__container--mobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.privacyPolicyPage, .termOfUse, .patchNotePage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1vw;
}
.privacyPolicyPage__content, .termOfUse__content, .patchNotePage__content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1vw;
}

/* === templates === */
/* ====== CARD ML ===== */
.select_league option {
  font-size: 24px;
}

.bottom-right-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 1vh;
  margin-right: 1vw;
}

.vp-per-troops-link {
  color: white; /* Texte en blanc */
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s ease;
}

.vp-per-troops-link:hover {
  opacity: 0.7; /* Effet au survol pour un léger changement */
  cursor: pointer;
}

.bottom-left-link {
  display: flex;
  justify-content: flex-start;
  margin-top: 1vh;
  margin-left: 1vw;
}

.bottom-left-link:hover {
  color: #ccc;
}

.card { /*OK*/
  background-color: #272728;
  box-sizing: border-box;
  width: 95%;
  min-width: 500px;
  margin-right: 0;
  margin-left: 0;
  margin-top: 2.5%;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column; /* Empile les enfants verticalement */
  height: 70vh; /* Hauteur de la carte */
  color: white;
  scroll-margin-top: 14vmin;
  transition: transform 0.6s; /* Animation douce */
}

@media (min-width: 1024px) {
  .card {
    width: 25%;
  }
}
.hidden {
  display: none;
}

.card.rotate {
  transform: rotateY(180deg);
}

.card .content_class_tips {
  transition: transform 0.6s; /* Animation douce */
  display: none;
}

.card.rotate .content_class_tips {
  display: block;
  transform: rotateY(180deg);
}

.card.rotate .title_card {
  transform: rotateY(180deg);
}

.card.rotate .pub {
  transform: rotateY(180deg);
}

.card.rotate .content_card_calculator {
  display: none;
}

.card .text-Tips {
  text-align: center;
  width: 95%;
  margin-left: 2.5%;
  margin-top: 2.5%;
}

.card .title_card { /*OK*/
  transition: transform 0.6s; /* Animation douce */
  min-height: 8em;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-repeat: no-repeat;
  position: relative;
  color: black;
}

.card .title_card h2 { /*OK*/
  padding: 1%;
  border: 2px solid #000;
  display: inline-block;
  margin-top: 2%;
  margin-left: 2%;
  background-color: rgba(217, 217, 217, 0.5);
}

.card .title_no_screen {
  text-align: center;
  margin-top: 2%;
  background: transparent;
}

.card .title_no_screen h2 {
  margin: 0;
  background: transparent;
}

.card .bloc_text { /*OK*/
  margin-left: 2%;
  margin-right: 2%;
}

.card .bloc_text label { /*OK*/
  color: white;
  max-width: 65%;
}

.card .bloc_text .input_calculator, .simpleInput, .select_league {
  background: black;
  color: white;
  text-align: center;
  border-radius: 10px;
  height: 3vmin;
  width: 30%;
  box-sizing: border-box;
}

.card .bloc_text .input_calculator {
  position: relative;
}

.card .bloc_text .input_calculator input {
  width: 100%;
  background: transparent;
}

.card .bloc_text .input_calculator select {
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  right: 3%;
  background: transparent;
  color: white;
  border-color: transparent;
  height: 75%;
}

.card .bloc_text .input_calculator select:focus {
  background: black;
}

/* Pour Chrome, Safari et Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Supprime les flèches */
  margin: 0; /* Évite les marges */
}

/* Pour Firefox */
input[type=number] {
  -moz-appearance: textfield; /* Change l'apparence à un champ de texte normal */
}

.card .variable_element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5%;
  margin-top: 2.5%;
}

.card .variable_element .output {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  border: 2px solid white;
  text-align: center;
  border-radius: 10px;
  height: 2.5vmin;
  width: 30%;
}

.card .variable_element .output span {
  width: 100%;
}

.card .variable_element .output select {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 20%;
  background: rgba(217, 217, 217, 0);
  color: white;
}

.card .variable_element .output select:focus {
  color: #272728;
}

.text-with-line {
  position: relative;
  text-align: center;
}

.text-with-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 96%;
  height: 2px;
  background-color: #ffffff;
  z-index: 1;
  margin-left: 2%;
  margin-right: 2%;
}

@media (prefers-color-scheme: dark) {
  .text-with-line::before {
    background-color: #adad18; /* Couleur de fond en mode sombre */
  }
}
.text-with-line span, .text-with-line a {
  position: relative;
  color: white;
  background-color: #272728; /* Changez la couleur de fond si nécessaire */
  padding: 0 10px; /* Espace autour du texte pour que la ligne soit visible */
  z-index: 1;
  text-decoration: none;
}

.text-with-line a {
  z-index: 2;
}

.table-container {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 2.5%;
  height: 100%; /* Hauteur fixe du tableau */
  max-height: 30vh;
  overflow-y: auto; /* Ajoute une barre de défilement verticale */
  overflow-x: hidden; /* Évite le défilement horizontal */
}

.scroll-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  color: black;
}

.scroll-table th, .scroll-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

.scroll-table thead {
  position: sticky;
  background-color: rgb(255, 255, 255);
  top: 0;
}

.card .text_no_calculator {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 2.5%;
}

.tabInput {
  width: 95%;
  text-align: center;
}

.tabInput td {
  padding-bottom: 5px;
}

td .tableInput {
  background: black;
  color: white;
  text-align: center;
  border-radius: 10px;
  height: 3vmin;
  box-sizing: border-box;
  width: 95%;
}

.tabInput .output {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  border: 2px solid white;
  text-align: center;
  border-radius: 10px;
  height: 2.5vmin;
  width: 97.5%;
}

.tabInput .output span {
  width: 100%;
}

.bouton_information {
  position: absolute;
  top: 1vmin; /* Place l'élément en haut */
  right: 1vmin; /* Place l'élément à droite */
  padding: 2px;
  height: 5vmin;
  width: 5vmin;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .card { /*OK*/
    background-color: #272728;
    box-sizing: border-box;
    width: 95%;
    min-width: 300px;
    height: 65vh; /* Hauteur de la carte */
    scroll-margin-top: 20vmin;
  }
  .card .title_card { /*OK*/
    min-height: 2em;
  }
  .card .title_card h2 { /*OK*/ }
  .card .bloc_text label { /*OK*/ }
  .card .bloc_text .input_calculator, .simpleInput, .select_league {
    height: 4vmin;
  }
  .card .bloc_text .input_calculator select {
    height: 4vmin;
  }
  .card .variable_element .output {
    height: 3.5vmin;
  }
  td .tableInput {
    height: 4vmin;
  }
  .tabInput .output {
    height: 3.5vmin;
  }
  .bouton_information {
    top: 2vmin; /* Place l'élément en haut */
    right: 2vmin; /* Place l'élément à droite */
    height: 6vmin;
    width: 6vmin;
  }
}
/*
/////////////////////////////////////////////////////////////////////////
///////////////////// CARD PRESENTATION /////////////////////////////////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
 */
/* Styles pour les cartes sous le compteur */
div.calculator-contentment div.cards-container {
  display: flex;
  flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
  justify-content: space-between; /* Espacement égal entre les cartes */
  gap: 20px; /* Espacement entre les cartes */
  width: 100%; /* Prendre toute la largeur disponible */
  height: 80%; /* S'ajuster en hauteur */
  margin-top: 5vh; /* Espacement entre le compteur et les cartes */
}

/* Styles pour chaque carte dans le conteneur */
div.card_presentation {
  background-color: rgba(0, 0, 0, 0.6); /* Utilisation de rgba pour la transparence */
  color: white;
  flex: 1; /* Faire en sorte que chaque carte prenne une largeur égale */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
  height: 25vw;
  box-shadow: none;
  position: relative; /* Nécessaire pour positionner les titres */
  /* Ombre et bordure pour l'effet 3D */
  border: 2px solid rgba(255, 255, 255, 0.2); /* Bordure claire */
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.7); /* Ombre pour un effet de profondeur */
}

/* Styles spécifiques pour les téléphones */
@media screen and (max-width: 1024px) {
  div.calculator-contentment div.cards-container {
    justify-content: center; /* Centrer les cartes */
    gap: 10px; /* Espacement plus petit entre les cartes */
  }
  div.card_presentation {
    flex: 0 0 calc(50% - 10px); /* Deux cartes par ligne, avec un espace de 10px entre elles */
    height: 25vh; /* Adapter automatiquement la hauteur */
  }
}
/*
////////////////////////// 2 images /////////////////////////
 */
/* Styles pour la carte diagonale */
div.card_presentation.diagonal-card, .uni_card {
  position: relative; /* Nécessaire pour positionner les images */
  overflow: hidden; /* Masquer les parties des images qui dépassent */
}

/* Styles communs pour les images */
.diagonal-image, .uni-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Adapter l'image à la taille */
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  /*transition: clip-path 0.5s ease-in-out; /* Transition fluide pour clip-path */
}

/* Image supérieure droite */
.diagonal-image.top-right {
  clip-path: polygon(0 0, 100% 0, 0 100%); /* Triangle supérieur droit */
  z-index: 2;
}

/* Image supérieure droite lorsqu'elle est active */
div.card_presentation.diagonal-card .diagonal-image.top-right.active {
  clip-path: polygon(0 0, 100% 0, 100% 33%, 33% 100%, 0 100%); /* Transition au triangle modifié */
  z-index: 2;
}

/* Image supérieure droite lorsqu'elle est off */
div.card_presentation.diagonal-card .diagonal-image.top-right.off {
  clip-path: polygon(0 0, 66% 0, 0 66%); /* Transition au triangle modifié */
  z-index: 2;
}

/* Image inférieure gauche */
div.card_presentation.diagonal-card .diagonal-image.bottom-left {
  clip-path: polygon(100% 0, 100% 100%, 0 100%); /* Triangle inférieur gauche */
  z-index: 1;
}

/* Image inférieure gauche lorsqu'elle est active */
div.card_presentation.diagonal-card .diagonal-image.bottom-left.active {
  clip-path: polygon(66% 0, 100% 0, 100% 100%, 0 100%, 0 66%); /* Transition au triangle modifié */
  z-index: 1;
}

/* Image inférieure gauche lorsqu'elle est off */
div.card_presentation.diagonal-card .diagonal-image.bottom-left.off {
  clip-path: polygon(100% 33%, 100% 100%, 33% 100%); /* Transition au triangle modifié */
  z-index: 1;
}

/* Ligne blanche diagonale */
div.card_presentation.diagonal-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 49%, white 50%, transparent 51%);
  pointer-events: none; /* Éviter d'interagir avec la ligne */
  z-index: 3; /* Au-dessus des images */
}

/* Ligne blanche diagonale à droite */
div.card_presentation.diagonal-card.right::after {
  background: linear-gradient(to bottom right, transparent 32%, white 33%, transparent 34%);
}

/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card.left::after {
  background: linear-gradient(to bottom right, transparent 65%, white 66%, transparent 67%);
}

/*
////////////////////////// title  /////////////////////////
*/
/* Styles pour les titres */
div.card_presentation .image-title {
  position: absolute;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  padding: 5px 10px; /* Espacement de 5px en haut et en bas, 10px à gauche et à droite */
  border-radius: 5px; /* Coins arrondis */
  z-index: 4; /* S'assurer que les titres sont au-dessus des images */
}

/* Ajouter un fond plus clair sous le titre */
div.card_presentation .image-title::before {
  content: ""; /* Nécessaire pour afficher le pseudo-élément */
  position: absolute;
  top: -5px; /* Ajouter un espace autour du titre */
  left: -5px;
  right: -5px; /* Étendre de chaque côté */
  bottom: -5px;
  background-color: rgba(255, 255, 255, 0.2); /* Couleur claire avec transparence */
  border-radius: 8px; /* Coin légèrement plus arrondi que le fond principal */
  z-index: 3; /* Derrière le titre, mais au-dessus de l'image */
}

/* Titre en haut à gauche */
div.card_presentation .image-title.top-left {
  top: 10px;
  left: 10px;
  transition: transform 0.1s ease-in-out; /* Ajout d'une transition pour le mouvement */
}

div.card_presentation .image-title.top-left.active {
  transform: scale(1.2); /* Centrage parfait */
}

div.card_presentation .image-title.top-left.off {
  transform: scale(0); /* Centrage parfait */
}

/* Styles pour le titre centré dans la carte */
div.card_presentation .image-title.center {
  /* Centrage au milieu de la carte */
  top: 50%; /* Positionner à 50% de la hauteur de la carte */
  left: 50%; /* Positionner à 50% de la largeur de la carte */
  transform: translate(-50%, -50%); /* Ajuster pour centrer parfaitement le titre */
  transition: transform 0.1s ease-in-out; /* Ajout d'une transition pour le mouvement */
}

div.card_presentation .image-title.center.active {
  transform: translate(-50%, -50%) scale(1.2); /* Centrage parfait */
}

div.card_presentation .image-title.center.off {
  transform: translate(-50%, -50%) scale(0); /* Centrage parfait */
}

/* Titre en bas à droite */
div.card_presentation .image-title.bottom-right {
  bottom: 10px;
  right: 10px;
  transition: transform 0.1s ease-in-out; /* Ajout d'une transition pour le mouvement */
}

div.card_presentation .image-title.bottom-right.active {
  transform: scale(1.2); /* Centrage parfait */
}

div.card_presentation .image-title.bottom-right.off {
  transform: scale(0); /* Centrage parfait */
}

/* Styles spécifiques pour les titres sur les téléphones */
@media screen and (max-width: 768px) {
  div.card_presentation .image-title {
    padding: 3px 8px; /* Ajustement de l'espacement */
    border-radius: 4px; /* Coins légèrement plus petits */
  }
  div.card_presentation .image-title::before {
    top: -3px; /* Réduction de l'espacement autour du titre */
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 6px; /* Ajustement des coins */
  }
}
/*
////////////////////////// 3 images /////////////////////////
 */
/* Styles pour la carte à trois images avec séparations diagonales */
div.card_presentation.diagonal-card-three {
  position: relative; /* Nécessaire pour positionner les images */
  overflow: hidden; /* Masquer les parties des images qui dépassent */
}

/* Styles communs pour les images */
div.card_presentation.diagonal-card-three .diagonal-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Adapter l'image à la taille */
  top: 0;
  left: 0;
}

/* Image du coin supérieur gauche (33%) */
div.card_presentation.diagonal-card-three .diagonal-image.top-left {
  clip-path: polygon(0 0, 66% 0, 0 66%); /* Triangle supérieur gauche jusqu'à 33% */
  z-index: 2; /* Superposer correctement */
}

div.card_presentation.diagonal-card-three .diagonal-image.top-left.active {
  clip-path: polygon(0 0, 100% 0, 100% 33%, 33% 100%, 0 100%); /* Triangle supérieur gauche jusqu'à 33% */
  z-index: 2; /* Superposer correctement */
}

div.card_presentation.diagonal-card-three .diagonal-image.top-left.off {
  clip-path: polygon(0 0, 33% 0, 0 33%); /* Triangle supérieur gauche jusqu'à 33% */
  z-index: 2; /* Superposer correctement */
}

/* Image du coin supérieur droit (33%) */
div.card_presentation.diagonal-card-three .diagonal-image.top-right {
  clip-path: polygon(66% 0, 100% 0, 100% 33%, 33% 100%, 0 100%, 0 66%); /* Triangle supérieur droit jusqu'à 66% */
  z-index: 1; /* Superposer correctement */
}

div.card_presentation.diagonal-card-three .diagonal-image.top-right.active {
  clip-path: polygon(33% 0, 100% 0, 100% 66%, 66% 100%, 0 100%, 0 33%); /* Triangle supérieur droit jusqu'à 66% */
  z-index: 1; /* Superposer correctement */
}

div.card_presentation.diagonal-card-three .diagonal-image.top-right.off.left {
  clip-path: polygon(33% 100%, 100% 33%, 100% 66%, 66% 100%); /* Triangle supérieur droit jusqu'à 66% */
  z-index: 1; /* Superposer correctement */
}

div.card_presentation.diagonal-card-three .diagonal-image.top-right.off.right {
  clip-path: polygon(33% 0, 66% 0, 0 66%, 0 33%); /* Triangle supérieur droit jusqu'à 66% */
  z-index: 1; /* Superposer correctement */
}

/* Image du bas (66%) */
div.card_presentation.diagonal-card-three .diagonal-image.bottom-center {
  clip-path: polygon(100% 100%, 33% 100%, 100% 33%); /* Triangle inférieur avec séparation à 66% */
  z-index: 0; /* Dernière image sous les autres */
}

div.card_presentation.diagonal-card-three .diagonal-image.bottom-center.active {
  clip-path: polygon(100% 100%, 0 100%, 0 66%, 66% 0, 100% 0); /* Triangle inférieur avec séparation à 66% */
  z-index: 0; /* Dernière image sous les autres */
}

div.card_presentation.diagonal-card-three .diagonal-image.bottom-center.off {
  clip-path: polygon(100% 100%, 66% 100%, 100% 66%); /* Triangle inférieur avec séparation à 66% */
  z-index: 0; /* Dernière image sous les autres */
}

/* Ligne blanche diagonale à 33% */
div.card_presentation.diagonal-card-three::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 32%, white 33%, transparent 34%);
  pointer-events: none; /* Éviter d'interagir avec la ligne */
  z-index: 3; /* Au-dessus des images */
}

/* Ligne blanche diagonale à droite */
div.card_presentation.diagonal-card-three.right::before {
  background: linear-gradient(to bottom right, transparent 15%, white 16%, transparent 17%);
}

/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.left::before {
  background: linear-gradient(to bottom right, transparent 65%, white 66%, transparent 67%);
} /* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.center::before {
  background: linear-gradient(to bottom right, transparent 15%, white 16%, transparent 17%);
}

/* Ligne blanche diagonale à 66% */
div.card_presentation.diagonal-card-three::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 65%, white 66%, transparent 67%);
  pointer-events: none; /* Éviter d'interagir avec la ligne */
  z-index: 3; /* Au-dessus des images */
}

/* Ligne blanche diagonale à droite */
div.card_presentation.diagonal-card-three.left::after {
  background: linear-gradient(to bottom right, transparent 82%, white 83%, transparent 84%);
}

/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.right::after {
  background: linear-gradient(to bottom right, transparent 32%, white 33%, transparent 34%);
} /* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.center::after {
  background: linear-gradient(to bottom right, transparent 82%, white 83%, transparent 84%);
}

/* ====== UTILS ====== */
/* ==========================================================================
   _animations.scss

   Rôle :
   Contient les animations et transitions CSS globales du projet :
   - keyframes
   - effets de hover, fade, slide, etc.

   But :
   Centraliser les effets d’animation pour assurer cohérence et réutilisation.

   Utilisation :
   Peut être importé dans les composants nécessitant une animation.
   ========================================================================== */
/* ==========================================================================
   _helpers.scss

   Rôle :
   Contient des classes utilitaires prêtes à l’emploi
   (ex : .text-center, .mt-2, .hidden).

   But :
   Fournir des raccourcis CSS pour des ajustements rapides,
   sans alourdir les composants.

   Utilisation :
   Ces classes peuvent être utilisées directement dans le HTML
   pour des cas ponctuels ou des surcharges légères.
   ========================================================================== */
/* === FLEX & ALIGN === */
.u-flex {
  display: flex;
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.u-flex-column {
  display: flex;
  flex-direction: column;
}

.u-text-center {
  text-align: center;
}

/* === SPACING === */
.u-m-0 {
  margin: 0 !important;
}

.u-p-0 {
  padding: 0 !important;
}

.u-mt-1 {
  margin-top: 1rem !important;
}

.u-mb-1 {
  margin-bottom: 1rem !important;
}

.u-pt-1 {
  padding-top: 1rem !important;
}

.u-pb-1 {
  padding-bottom: 1rem !important;
}

.u-mt-2 {
  margin-top: 2rem !important;
}

.u-mb-2 {
  margin-bottom: 2rem !important;
}

.u-pt-2 {
  padding-top: 2rem !important;
}

.u-pb-2 {
  padding-bottom: 2rem !important;
}

/* === WIDTH === */
.u-w-100 {
  width: 100% !important;
}

.u-w-auto {
  width: auto !important;
}

/* === VISIBILITY === */
.u-hidden {
  display: none !important;
}

/* === TEXT === */
.u-uppercase {
  text-transform: uppercase !important;
}

.u-bold {
  font-weight: 700 !important;
}

@media (max-width: 1024px) {
  .text-24-phone {
    font-size: 24px !important;
  }
  .text-20-phone {
    font-size: 20px !important;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../assets/styles/base/_base.scss%22,%22../../assets/styles/base/_reset.scss%22,%22../../assets/styles/app.scss%22,%22../../assets/styles/settings/_variables.scss%22,%22../../assets/styles/settings/_mixins.scss%22,%22../../assets/styles/settings/_font.scss%22,%22../../assets/styles/base/_typography.scss%22,%22../../assets/styles/components/atoms/_pub.scss%22,%22../../assets/styles/components/atoms/_button.scss%22,%22../../assets/styles/components/atoms/_line.scss%22,%22../../assets/styles/components/molecules/_title-page.scss%22,%22../../assets/styles/components/molecules/_card-privacy-policy.scss%22,%22../../assets/styles/components/molecules/_card-presentation.scss%22,%22../../assets/styles/components/molecules/_code.scss%22,%22../../assets/styles/components/molecules/_toastCopy.scss%22,%22../../assets/styles/components/organisms/_header.scss%22,%22../../assets/styles/components/organisms/_footer.scss%22,%22../../assets/styles/components/organisms/_banner.scss%22,%22../../assets/styles/components/pages/_home.scss%22,%22../../assets/styles/components/pages/_giftCode.scss%22,%22../../assets/styles/components/pages/_privacy-policy.scss%22,%22../../assets/styles/ToolsML/_card.scss%22,%22../../assets/styles/utils/_animations.scss%22,%22../../assets/styles/utils/_helpers.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%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;EACA;;;AAGJ;AACA;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;IACI;;;AAGR;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAEJ;EAEI;EACA;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;;;AAEJ;EACI;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EAEQ;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EAEI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;IACA;IACA;IACA;IACA;IACA;;EAMJ;IACI;;EAGJ;EAOA;EAIA;IACI;;EAGJ;IACI;;EAIJ;IAEI;;EAkBJ;IAEI;;EAGJ;IAEI;;EAGJ;IACI;IACA;IACA;IACA;;;AAIR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA,YACQ,sGAEyC;;;AAGrD;AACA;EACI;IACI;IACA;;EAGJ;IACI;IACA;;;AAMR;AAAA;AAAA;AAIA;AACA;EACI;EACA;;;AAEJ;AACC;EACG;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;;AAGJ;AACA;EACE;EACA;;;AAGF;AACA;EACI;EACA;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;EACA;;;AAOJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;;;AAIJ;AAAA;AAAA;AAGA;AACA;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;AACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;IAEI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;;;AAKR;AAAA;AAAA;AAIA;AACA;EACI;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;AACA;EACI;;;AAEJ;AACA;EACI;EACH;AACD;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;AACA;EACI;;;AAEJ;AACA;EACI;EACH;AACD;EACI;;;AnBzsBJ;AoBrCA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;ACAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAiBA;AACA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AACA;EAAU;;;AACV;EAAU;;;AAEV;EAAU;;;AACV;EAAU;;;AACV;EAAU;;;AACV;EAAU;;;AAEV;EAAU;;;AACV;EAAU;;;AACV;EAAU;;;AACV;EAAU;;;AAEV;AACA;EAAW;;;AACX;EAAY;;;AAEZ;AACA;EAAY;;;AAEZ;AACA;EAAe;;;AACf;EAAU;;;AAEV;EACE;IACE;;EAGF;IACE%22,%22file%22:%22app.output.css%22%7D */