:root {
  --primary-color: #121420;
  --secondary-color: #f9f9f9;
  --dark-bg: #333333;
  --light-bg: #f4f4f4;
  --light-grey: #d6d6df;
  --text-color: #020507;
  --white: #ffffff;
  --bg-color: #ffffff;  
  --card-bg: #f4f4f4;   
  --accent-color-yellow: #fbff00;
  --accent-color: #f9f7ff;
  --green-fluo: rgb(21, 255, 0);
  --arrow-up: rgba(21, 255, 0, 0.5);
  --red-fluo: #FF3131;
  --red-rgb-fluo: rgb(255, 49, 49);
  --red-blood: rgb(131, 0, 0);
  --transition-speed: 0.3s;
  --speed: 20s; /* vitesse de la banière */
}

/* Styles pour le bouton "Back to top" */
.top-responsive {position: fixed;bottom: 15px;right: 15px;display: block;z-index: 999!important;}
.back-to-top-button {border: solid 3px var(--arrow-up);background-color: #f2f6f800; color: var(--primary-color);padding: 4px 13px 1px 13px ;text-decoration: none;display: inline-block; font-size: 24px;font-weight: bold;margin: 2px 1px;cursor: pointer;border-radius: 7px;}
.arrow {border: solid var(--arrow-up); border-width: 0 4px 4px 0;display: inline-block;padding: 5px;}
.up {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}

/* Style par défaut : L'objet est masqué */
#monObjetCache {
  /* Rend l'objet complètement transparent */
  opacity: 0; 
  /* Le retire du flux, mais le garde visible pour la transition */
  visibility: hidden; 
  /* Ajoute une transition douce (facultatif, mais recommandé) */
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; 
}

/* Style de l'objet lorsqu'il doit être visible */
#monObjetCache.visible {
  opacity: 1; /* Le rend opaque */
  visibility: visible; /* Le rend visible */
}

/* The Modal (background) */
.modal-item {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: #F4F6F8;align-items: center;justify-content: center;transition: opacity 0.5s ease;}

/* Modal content (image) */
.modal-content-item {position: relative;width: auto;height: auto;max-width: 90%;max-height: 90%;border-radius: 5px;overflow: hidden;animation: zoomIn 0.5s;}

@keyframes zoomIn {
  from {transform: scale(0.6);}
  to {transform: scale(1);}
}

.modal.show {display: flex;opacity: 1;}

/* Close button */
.close {position: absolute;top: 10px;right: 20px;color: #ffffff;font-size: 35px;font-weight: bold;cursor: pointer;transition: transform 0.3s;}

/* Caption of modal image */
.caption {position: absolute;bottom: 15px;width: 100%;text-align: center;color: #222;font-size: 24px;}

/* Conteneur principal de l'élément d'aide */
.info-tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Le cercle avec le point d'exclamation */
.info-badge {
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #808692;           /* Couleur du point d'exclamation */
    border-radius: 50%;
    font-size: 14px;
    user-select: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
    z-index: 1
}

.info-badge:hover {
    background-color: var(--accent);
    transform: scale(1.1);
}

/* Le message caché par défaut */
.info-message {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    /*bottom: 125%; /* Positionne le message au-dessus du cercle */
    /*left: 50%;*/
    top: 30px;
    left: -80px;
    transform: translateX(-50%) translateY(-12px);
    background-color: #1f2937;
    color: #ffffff;
    /*text-align: center;
    */padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid #374151;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
}

/* Petite flèche en haut à droite du message */
.info-message::after {
    content: "";
    position: absolute;
    bottom: 100%;       /* Place la flèche juste au-dessus de la bulle */
    right: 13px;        /* Décale la flèche vers la droite (ajustez cette valeur selon vos besoins) */
    border-width: 7px;
    border-style: solid;
    /* La bordure du bas prend la couleur de la bulle, les autres sont transparentes pour former le triangle vers le haut */
    border-color: transparent transparent #1f2937 transparent; 
}

/* Logique d'affichage : 
    Ici, le message s'affiche au survol (:hover). 
    Si vous préférez un déclenchement STRICTEMENT au clic sur le conteneur, 
    remplacez ":hover" par ":active" ou utilisez une petite ligne de JS. */
.info-tooltip-container:hover .info-message {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.info-tooltip-container {
    /*right: -30px;*/
    margin-left: auto !important; 
}
.bc-mobile { display: none; }
.bc-desktop { display: flex; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .bc-mobile { display: flex; width: 100%;}
    .bc-desktop { display: none; }
}