@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url('https://cdnc.heyzine.com/css/prod5.min.css?v2=6&v=682') screen and (min-width: 800px);

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15;
  /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%;
  /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4;
  /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

:root {
  --purple: #C026D3;
  --purple-hover: rgb(207.2024096386, 78.065060241, 223.134939759);
  --purple-transparent: rgb(191, 38, 211);
  --purple-light: #d4cacc;
  --yellow-hover: rgb(248.6, 243, 79);
  --yellow-transparent: rgba(247, 240, 35, 0.6);
  --light-grey: #FAFAFA;
  --light-grey-hover: #fbfbfb;
  --light-grey-transparent: rgb(250, 250, 250);
  --grey-border: #F3F4F6;
  --grey-border-hover: rgb(245.4, 246.2, 247.8);
  --grey-border-transparent: rgb(243, 244, 246);
  --black: rgba(0, 0, 0, 0.3450980392);
  --black-hover: rgba(51, 51, 51, 0.3450980392);
  --black-transparent: rgba(0, 0, 0, 0.2070588235);
  --white: #fff;
  --white-hover: white;
  --white-transparent: rgba(255, 255, 255, 0.6);
  --secondary: #6c757d;
  --secondary-hover: rgb(136.1158798283, 144.6755364807, 152.2841201717);
  --secondary-transparent: rgba(108, 117, 125, 0.6);
  --primary: #0d6efd;
  --primary-hover: rgb(61.4, 139, 253.4);
  --primary-transparent: rgba(13, 110, 253, 0.6);
  --red: #dc3545;
  --red-hover: rgb(227, 93.4, 106.2);
  --red-transparent: rgba(220, 53, 69, 0.6);
}

body {
  margin: 0;
  /* Remove the margin in all browsers. */
  background-color: var(--purple-light);
  font-family: "Inter", sans-serif;
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

a {
  text-decoration: none;
  display: flex;
  /* Utiliser flex pour aligner l'icône et le texte */
  align-items: center;
  /* Centrer verticalement */
  height: 3rem;
  /* Assurez-vous que l'élément a une hauteur définie */
  padding: 0 20px;
  /* Ajoutez du padding si nécessaire */
}

/* @media (min-width: 1024px) {
  a {
    height: 3rem;
    padding: 0 20px;
    
} */

.icon {
  width: 20px;
  /* Ajustez la taille de l'icône selon vos besoins */
  height: 20px;
  margin-right: 8px;
  /* Espacement entre l'icône et le texte */
}

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  margin: 10px 0;
  /* Espacement entre les boutons */
  width: 15rem;
  height: 3rem;
  display: flex;
  /* Assurez-vous que le bouton utilise flexbox */
  align-items: center;
  /* Centre le contenu verticalement */
  justify-content: center;
  /* Centre le contenu horizontalement */
}

.primary {
  background-color: var(--purple);
  box-shadow: 0 2px 8px var(--purple-transparent);
}

.primary:hover {
  background-color: var(--purple-hover);
}

.secondary {
  background-color: var(--secondary);
}

.secondary:hover {
  background-color: var(--secondary-hover);
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/* Centrage des boutons
.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
} */

/* Centrage des boutons */
.button-container {
  display: flex;
  flex-direction: column;
  /* Mise en colonne */
  justify-content: center;
  /* Centrage vertical */
  align-items: center;
  /* Centrage horizontal */
  height: 100vh;
  /* Prend toute la hauteur de la page */
}

.button {
  text-decoration: none;
  color: inherit;
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  padding: 0.625rem 1rem;
  display: inline-block;
  color: var(--white);
  background-color: var(--black);
}

.img-profil {
  width: 13rem;
  border-radius: 100%;
}

@media (min-width: 1024px) {
  .img-profil {
    width: 20rem;
  }
}

.context-menus-container {
  display: flex;
  gap: 1rem;
}

.context-menu {
  background-color: var(--light-grey);
  border: 3px solid var(--grey-border);
  box-shadow: 0px 4px 6px var(--black-hover);
  width: 200px;
  border-radius: 0.5rem;
  padding: 8px;
}

.menu-item {
  padding: 12px 16px;
  font-size: 1rem;
  cursor: pointer;
}

.menu-item--purple {
  background-color: var(--light-grey);
  padding: 8px;
  margin: 0.3125rem;
}

.menu-item--purple:hover {
  background-color: var(--purple);
  border-radius: 0.5rem;
  color: var(--white);
}

.menu-item--purple:hover .icon-home {
  background-color: var(--secondary);
}

.menu-item--yellow {
  background-color: var(--light-grey);
  padding: 8px;
  margin: 0.3125rem;
}

.menu-item--yellow:hover {
  background-color: var(--yellow);
  border-radius: 0.5rem;
  color: var(--white);
}

.menu-item--green {
  background-color: var(--light-grey);
  padding: 8px;
  margin: 0.3125rem;
}

.menu-item--green:hover {
  background-color: var(--green);
  border-radius: 0.5rem;
  color: var(--white);
}

h1 {
  text-align: center;
  font-size: 2rem;
  margin: 1rem 0rem 1rem 0rem;
}

@media (min-width: 1024px) {
  .button-container h1 {
    font-size: 5rem;
  }
}

/* h1 {
  text-align: center;
  font-size: 4rem;
  margin-bottom: 20px;
  padding-top: 60px;
  min-height: 100px;
} */

/* Menu latéral flottant */
.floating-sidebar {
  position: fixed;
  top: 56%;
  left: 10px;
  transform: translateY(-50%);
  background-color: var(--light-grey-transparent);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--purple-transparent);
  z-index: 1000;
}

@media (min-width: 1024px) {
  .floating-sidebar {
    top: 52%;
  }
}

.floating-sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.floating-sidebar ul li {
  margin: 10px 0;
}

.floating-sidebar ul li a {
  text-decoration: none;
  color: var(--white);
  display: block;
  padding: 10px;
  background-color: var(--purple-transparent);
  border-radius: 5px;
  transition: background-color 0.3s;
  text-align: center;
}

.floating-sidebar ul li a:hover {
  background-color: var(--purple-hover);
}

.toggle-button {
  position: fixed;
  top: 32%;
  left: 10px;
  transform: translateY(-50%);
  background: var(--purple-transparent);
  color: var(--white);
  border: none;
  padding: 2px 8px 4px 8px;
  cursor: pointer;
  border-radius: 5px;
  z-index: 1001;
  font-size: 28px;
  /* width: 20px;
  height: 20px;
  line-height: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.content {
  /* margin-left: 220px; */
  padding: 20px;
}

.content h2 {
  text-align: center;
  font-size: 1.5rem;
  margin: 0;
}

.content h3 {
  font-size: 1rem;
}

@media (min-width: 1024px) {
  .content h2 {
    font-size: 3rem;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .content h2 {
    font-size: 2rem;
  }

  .description-multiline {
    font-size: 1rem;
  }
}

.iframe-container {
  display: grid;
  grid-template-columns: 1fr;
  /* Par défaut, 1 colonne */
  gap: 20px;
  /* Espacement entre les éléments */
  /* margin-bottom: 40px; */
  width: 100%;
  max-width: 1200px;
  margin: auto;
  min-height: 340px;
  /* Fixer une hauteur pour éviter les sauts */
}

/* Passe à 2 colonnes à partir de 1024px (ordinateur) */
@media (min-width: 1024px) {
  .iframe-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .iframe-container {
    width: 1200px;
  }
}

/* Adaptation pour les tablettes */
@media (max-width: 1023px) {
  .iframe-container {
    grid-template-columns: 1fr;
    /* Une seule colonne */
  }
}

/* Adaptation pour les mobiles */
@media (max-width: 768px) {
  .iframe-item {
    width: 90%;
    /* Réduit légèrement la largeur pour éviter les marges */
  }
}

.iframe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: 10px;
  margin-bottom: 6rem;
  width: 100%;
  /* max-width: 300px; */
  min-width: 250px;
}

/* .iframe-item iframe {
  width: 100%;
  max-width: 800px;
} */

.description-multiline {
  white-space: pre-line;
  font-size: 0.8rem;
  line-height: calc(0.8rem * 1.5);
  text-align: left;
  width: 32rem;
  /* Largeur définie */
  max-width: 100%;
  /* Pour éviter que ça dépasse sur petits écrans */
}

h3 {
  font-size: 1.3rem;
  text-align: left;
}

@media (min-width: 1024px) {
  h3 {
    font-size: 1.7rem;
  }

  .description-multiline {
    font-size: 1.1rem;
    line-height: calc(1.1rem * 1.5);
  }
}

.fp-iframe {
  border: none;
  aspect-ratio: 4 / 3;
  width: 100%;
  /* Ajuste la largeur de l'iframe */
  height: auto;
  /* Permet un ajustement automatique */
}

/* Texte sous les iframes */
p {
  margin: 10px 0 0 0;
}