/* Définition des variables CSS (custom properties) */
:root {
    /* Largeur du contenu principal */
    --content-width: 380px;

    /* Couleurs primaires, secondaires et d'accentuation */
    --primary-color: #788FFA;
    --secondary-color: #5CFCCC;
    --accent-color: #EF6995;

    /* Couleurs de fond et de texte */
    --background-color: #f4f4f4;
    --text-color: #333;

    /* Largeur des boutons et espacement entre eux */
    --button-width: 200px;
    --button-gap: 10px;
    --total-width: calc(var(--button-width) * 2 + var(--button-gap));

    /* Largeur maximale du contenu */
    --max-content-width: 390px;

    /* Couleur gris clair */
    --light-gray: #f2f2f2;

    /* Variables pour le thème sombre (dark mode) */
    --primary-color-dark: #788FFA;
    --secondary-color-dark: #53457d;
    --accent-color-dark: #EF6995;
    --background-color-dark: #2C2C2C;
    --text-color-dark: #e0e0e0;
    --light-gray-dark: #3A3A3A;
}

/* Reset CSS (s'applique à tous les éléments) */
* {
    /* Le box-sizing: border-box inclut le padding et la bordure dans la largeur et la hauteur */
    box-sizing: border-box;
    /* Supprime les marges par défaut */
    margin: 0;
    /* Supprime le padding par défaut */
    padding: 0;
    /* Force la police à ne pas être en gras (peut être écrasé par des styles spécifiques) */
    font-weight: normal !important;
}

/* Styles de base pour le body */
body {
    /* Police de caractères */
    font-family: Verdana, sans-serif;
    /* Couleur de fond */
    background-color: var(--background-color);
    /* Couleur du texte */
    color: var(--text-color);
    /* Active Flexbox pour centrer le contenu */
    display: flex;
    /* Centre horizontalement le contenu */
    justify-content: center;
    /* Centre verticalement le contenu */
    align-items: center;
    /* Assure que le body prend au moins toute la hauteur de la fenêtre (pour le centrage vertical) */
    min-height: 100vh; /* Ajout important pour le centrage vertical */
    /* Supprime les marges par défaut du body */
    margin: 0; /* Redondant car déjà reset, mais assure la compatibilité */
}

/* Styles pour le conteneur principal (.container) */
.container {
    /* Couleur de fond */
    background: #fff;
    /* Espace interne (padding) */
    padding: 10px;
    /* Gère le contenu dépassant (ici, caché) */
    overflow: auto;
    /* Hauteur automatique (s'adapte au contenu) */
    height: auto;
    /* Coins arrondis */
    border-radius: 5px;
    /* Ombre portée */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Largeur maximale */
    max-width: 450px;
    /* Largeur (ici, 95% du parent) */
    width: 95%;
    /* Marge extérieure (haut et bas: 80px, gauche et droite: auto pour centrer) */
    /* Cette marge fixe empêche le centrage vertical, on va la supprimer */
    /* margin: 80px auto; */
    margin: 0 auto; /* Suppression de la marge fixe et utilisation de Flexbox pour centrer */
    /* Ordre d'empilement (z-index) */
    z-index: 5;
    /* Box-sizing (inclut padding et bordure dans la largeur) */
    box-sizing: border-box;
    /* Active Flexbox pour la mise en page interne */
    display: flex;
    /* Direction des éléments Flexbox (ici, colonne) */
    flex-direction: column;
    /* Alignement vertical des éléments (ici, au début) */
    justify-content: flex-start;
    /* Alignement horizontal des éléments (ici, centré) */
    align-items: center;
}


/* Styles pour les étapes */
.step {
width: 100%;
max-width: var(--max-content-width);
margin: 0 auto;
padding: 0 15px; /* Ajoutez un peu de padding si nécessaire */
box-sizing: border-box; /* Assurez-vous que le padding est inclus dans la largeur */
}

/* Styles pour les images */
#introImage {
opacity: 0.8;
max-width: 60%;
height: auto;
display: block;
margin: 0 auto 0px;
position: relative;
z-index: 10;
flex-shrink: 0;
}

/* Styles pour les titres */
h1, h2 {
color: var(--primary-color);
text-align: center;
margin-bottom: 10px;
margin-top: 10px;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.2em;
margin-top: 10px;
}

/* Styles pour le groupe de formulaire et l'étape email */
.form-group,
#emailStep {
margin: 10px 0; /* Marge verticale pour espacer les éléments */
text-align: center; /* Centre le contenu horizontalement */
flex-grow: 2; /* Permet à l'élément de grandir pour occuper l'espace disponible */
display: flex; /* Utilise flexbox pour la mise en page */
flex-direction: column; /* Empile les éléments enfants verticalement */
justify-content: center; /* Centre le contenu verticalement */
width: 100%; /* Occupe toute la largeur disponible */
max-width: var(--max-content-width); /* Limite la largeur maximale */
margin: 0 auto; /* Centre l'élément horizontalement dans son conteneur */
padding: 0; /* Supprime le rembourrage interne */
box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}

/* Styles pour le formulaire d'email */
#emailForm {
width: 100%; /* Le formulaire prend toute la largeur disponible */
}

/* Styles pour le champ de saisie d'email */
#emailInput {
width: 100%; /* Le champ de saisie prend toute la largeur disponible */
box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
padding: 10px; /* Ajoute de l'espace à l'intérieur du champ */
margin-top: 10px; /* Espace au-dessus du champ */
margin-bottom: 15px; /* Espace en dessous du champ */
border: 2px solid var(--primary-color); /* Bordure de la couleur primaire */
border-radius: 5px; /* Coins arrondis */
font-size: 16px; /* Taille de police */
}

/* Styles pour les boutons de navigation dans l'étape email */
#emailStep .navigation-buttons {
width: 100%; /* Les boutons prennent toute la largeur disponible */
justify-content: space-between; /* Espace les boutons uniformément */
}

#emailStep .navigation-buttons button {
flex: 0 1 48%; /* Chaque bouton prend 48% de la largeur, permettant un petit espace entre eux */
}

/* Styles pour le bouton de vérification de code */
#verifyCodeButton {
opacity: 0.5;
transition: opacity 0.3s ease;
}

#verifyCodeButton.active {
opacity: 1;
}

/* Styles pour les messages d'erreur */
.error-message {
width: 95%;
max-width: var(--button-total-width);
margin: 10px auto;
padding: 10px 20px;
background-color: #ffcccc;
color: #2C3454;
border: 1px solid #7F7BED;
border-radius: 5px;
text-align: center;
font-size: 0.9em;
box-sizing: border-box;
}

/* Styles pour les groupes de boutons radio */
.radio-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
max-width: var(--max-content-width);
margin: 0 auto;
padding: 0 10px;
}

.radio-group input[type="radio"] {
display: none;
}

.radio-group label {
cursor: pointer;
padding: 8px 15px;
border: 2px solid var(--primary-color);
border-radius: 5px;
flex: 1 0 calc(50% - 5px);
max-width: calc(50% - 5px);
text-align: center;
color: var(--primary-color);
transition: all 0.3s ease;
font-size: 0.9em;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}

.radio-group input[type="radio"]:checked + label {
background-color: var(--secondary-color);
color: #fff;
border-color: var(--secondary-color);
}

.radio-group label:hover {
background-color: var(--secondary-color);
color: #fff;
border-color: var(--secondary-color);
}


/* Style pour le conteneur principal de la question */
.question-container {
max-width: 550px; /* Limite la largeur maximale du conteneur */
margin: 20px auto; /* Centre le conteneur horizontalement et ajoute 20px d'espace au-dessus et en-dessous */
padding: 20px; /* Augmente l'espace à l'intérieur du conteneur */
background-color: #f9f9f9; /* Couleur de fond légère */
border-radius: 8px; /* Coins arrondis */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre légère pour un effet de profondeur */
}

/* Style pour le titre de la question */
.question-title {
font-size: 1.3em; /* Taille de police pour le titre */
color: #788FFA; /* Couleur de texte */
margin-bottom: 15px; /* Augmente l'espace en dessous du titre */
text-align: center; /* Centre le titre */
}

/* Style pour le texte de la question */
.question-text {
font-size: 1.2em; /* Taille de police pour le texte de la question */
color: #2C3454; /* Couleur de texte */
margin-bottom: 20px; /* Augmente l'espace en dessous du texte de la question */
text-align: center; /* Centre le texte de la question */
}


/* Styles pour les résultats */
.results-wrapper {
background-color: transparent;
position: relative;
z-index: 2;
width: 100%;
max-width: 800px;
margin: 0 auto;
min-height: 100vh;
overflow-y: auto;
padding: 40px 0;
}

/* Conteneur pour la ligne de résultats */
.result-row {
display: flex; /* Utilise un affichage flexible pour aligner les éléments horizontalement */
justify-content: space-between; /* Répartit l'espace également entre les éléments */
align-items: stretch; /* Étire les éléments pour qu'ils aient la même hauteur */
gap: 20px; /* Ajoute un espace de 20px entre les éléments */
margin-bottom: 20px; /* Ajoute une marge en bas de la ligne */
margin-top: 20px; /* Ajoute une marge en haut de la ligne */
flex-wrap: nowrap; /* Empêche les éléments de passer à la ligne suivante */
}

/* Styles de base pour chaque carte de résultat */
.result-card {
flex: 1; /* Permet à chaque carte de prendre une part égale de l'espace disponible */
background-color: rgba(255, 255, 255, 0.9); /* Fond blanc légèrement transparent */
border-radius: 10px; /* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
padding: 20px; /* Espace interne */
margin-bottom: 20px; /* Marge en bas de chaque carte */
transition: transform 0.3s ease; /* Animation douce pour l'effet de survol */
min-width: 0; /* Permet aux cartes de rétrécir si nécessaire */
}

/* Effet de survol sur les cartes */
.result-card:hover {
transform: translateY(-5px); /* Soulève légèrement la carte au survol */
}

/* Styles spécifiques pour les trois premières cartes */
.result-card.pain-intensity,
.result-card.score,
.result-card.risk {
width: calc(33.33% - 13.33px); /* Calcule la largeur pour 3 cartes avec l'espace entre elles */
margin-right: 20px; /* Ajoute un espace à droite de chaque carte */
}

/* Supprime la marge droite de la dernière carte */
.result-card.pain-intensity:last-child,
.result-card.score:last-child,
.result-card.risk:last-child {
margin-right: 0;
}

/* Styles pour les titres dans les cartes */
.result-card h3,
.result-card h4 {
color: var(--primary-color); /* Utilise la couleur primaire définie */
text-decoration: none; /* Supprime toute décoration de texte */
border-bottom: 2px solid var(--primary-color); /* Ajoute une ligne de séparation en bas */
padding-bottom: 5px; /* Espace entre le texte et la ligne */
margin-bottom: 15px; /* Espace sous le titre */
font-weight: bold; /* Texte en gras */
}

/* Ajoute un espace supplémentaire après le titre "Intensité de la douleur" */
.result-card.pain-intensity h3 {
margin-bottom: 1em; /* Augmente l'espace en bas pour ce titre spécifique */
}

/* Styles spécifiques pour "Votre score" et "Risque" */
.result-card.score h3,
.result-card.risk h3 {
margin-bottom: 5px; /* Réduit la marge en bas du titre */
}

/* Ajoute un saut de ligne après les titres "Votre score" et "Risque" */
.result-card.score h3::after,
.result-card.risk h3::after {
/*content: '\A';*/ /* Ajoute un saut de ligne */
/*white-space: pre;*/ /* Préserve le saut de ligne */
}

/* Media query pour les écrans plus petits */
@media (max-width: 768px) {
.result-row {
flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans */
}

.result-card.pain-intensity,
.result-card.score,
.result-card.risk {
width: 100%; /* Prend toute la largeur sur les petits écrans */
margin-right: 0; /* Supprime la marge droite */
}
}


/* Styles communs pour les informations générales et la source du questionnaire */
.general-info, .questionnaire-source {
display: flex;
flex-direction: column;
flex-grow: 1; /* Permet au contenu de remplir l'espace vertical disponible */
}

/* Style pour chaque élément d'information et méthode de découverte */
.info-item, .discovery-method {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-top: 10px; /* Ajoute un espace en haut */
}

/* Style pour les icônes SVG */
.info-item svg, .discovery-method svg {
width: 24px;
height: 24px;
margin-right: 10px;
flex-shrink: 0;
margin-top: 5px; /* Ajoute un petit espace au-dessus de l'icône */
}

/* Style pour le texte des informations et méthodes de découverte */
.info-item p, .discovery-method p {
margin: 0;
font-size: 0.9em;
color: #333;
padding-top: 5px; /* Ajoute un petit espace au-dessus du texte */

}

/* Style pour le texte en gras */
.discovery-method strong {
font-weight: bold;
margin-right: 5px;
}

/* Responsive design */
@media (min-width: 768px) {
.result-row {
display: flex;
justify-content: space-between;
}

.result-card {
flex-basis: calc(50% - 10px); /* Prend la moitié de la largeur moins la marge */
}

.result-card.questionnaire-source {
padding: 20px; /* Uniformise le padding avec les autres cartes */
}
}

/* Animation subtile au survol des éléments */
.info-item:hover, .discovery-method:hover {
background-color: #f8f8f8;
transition: background-color 0.3s ease;
}



.big-number {
font-size: 2.5em;
font-weight: bold;
color: var(--primary-color);
text-align: center;
}

.result-card ul {
list-style-type: none;
padding-left: 0;
}

.result-card li {
margin-bottom: 10px;
}

.result-card.recommendations {
text-align: center;
}

.result-card p {
text-align: center;
}

.result-title {
text-decoration: none;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 5px;
margin-bottom: 15px;
color: var(--primary-color);
font-weight: bold;
}

.recommendation-image {
max-width: 50%;
height: auto;
display: block;
margin: 0 auto 10px;
border-radius: 10px;
}

/* Tableau Actions recommandés */
#actionsTable {
width: 100%;
border-collapse: collapse;
}

#actionsTable th, #actionsTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

#actionsTable .action-header {
background-color: #f2f2f2;
font-weight: bold;
text-align: center;
color: var(--primary-color);
}

#actionsTable tr:nth-child(even) {
background-color: #f9f9f9;
}

#actionsTable tr:hover {
background-color: #f5f5f5;
}

/* IA */
.result-card.ai-analysis {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.ai-analysis-button {
display: block;
width: 80%; /* Ajustez cette valeur selon vos préférences */
max-width: 250px; /* Limite la largeur maximale du bouton */
margin: 20px auto; /* Centre le bouton horizontalement et ajoute de l'espace au-dessus et en-dessous */
padding: 12px 20px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
text-align: center;
}

.ai-analysis-button:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}


.social-icons {
margin-top: 10px; /* Espace au-dessus des icônes de réseaux sociaux */
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.social-icons a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
}

.social-icons img {
width: 40px;
height: auto;
transition: transform 0.2s;
}

.social-icons img:hover {
transform: scale(1.1);
}

.social-text {
font-size: 12px;
margin-top: 5px;
}

.responsive-title {
white-space: nowrap;
font-size: 1.4em;
overflow: hidden;
flex-shrink: 0;
margin-bottom: 10px;
font-weight: 540;
line-height: 1.2;
margin-bottom: 20px;
text-align: center;
}

.discover-osteopaths-image,
.workers-image {
width: 60%;
height: auto;
object-fit: contain;
object-position: center;
margin-bottom: 15px;
border-radius: 10px;
transition: transform 0.3s ease;
}

.discover-osteopaths-image:hover,
.workers-image:hover {
transform: scale(1.05);
}

/* Styles pour le popup de téléchargement */
.popup-title {
text-align: center;
margin-bottom: 20px;
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
}

.popup-table {
width: 100%;
overflow-x: auto;
display: block;
}

.popup-table th,
.popup-table td {
min-width: 100px;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}

.popup-table th {
background-color: var(--light-gray);
color: var(--primary-color);
}

.popup-link,
.popup-button {
display: inline-block;
padding: 5px 10px;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
border: none;
outline: none;
cursor: pointer;
}

.popup-link:hover,
.popup-button:hover {
background-color: var(--secondary-color);
}

#downloadPopup {
width: 90%;
max-width: 440px;
overflow: auto;
max-height: 90vh;
}

/* Styles pour l'analyse IA */
.results-ia-image {
width: 60%;
max-width: 200px;
display: block;
margin: 0 auto;
transition: transform 0.3s ease;
}

.results-ia-image:hover {
transform: translateY(-5px);
}

/* Styles pour le popup d'achat de guide */
.buy-guide-popup {
background-color: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 90%;
margin: 20px auto;
}

.buy-guide-popup h3 {
color: var(--primary-color);
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}

.guide-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.guide-image {
display: block;
max-width: 60px;
width: 100%;
height: auto;
margin: 0 auto 20px;
transition: transform 0.3s ease;
}

.guide-image:hover {
transform: translateY(-5px);
}

.guide-description {
margin-bottom: 15px;
font-weight: bold;
}

.download-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

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

/* Media queries */
@media (max-width: 768px) {
.result-card {
flex: 1 1 100%;
}
}

@media (max-width: 480px) {
.popup-table th,
.popup-table td {
padding: 8px;
font-size: 14px;
}

.popup-link,
.popup-button {
padding: 8px 15px;
font-size: 14px;
}

.popup-title {
font-size: 18px;
}

#downloadPopup {
width: 95%;
padding: 15px;
}
}

/* Styles pour le mode sombre */
.dark-mode {
--primary-color: var(--primary-color-dark);
--secondary-color: var(--secondary-color-dark);
--accent-color: var(--accent-color-dark);
--background-color: var(--background-color-dark);
--text-color: var(--text-color-dark);
--light-gray: var(--light-gray-dark);
}

.dark-mode .result-card {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
}

.dark-mode .popup-table th {
background-color: var(--light-gray-dark);
color: var(--text-color-dark);
}

.dark-mode .popup-link,
.dark-mode .popup-button,
.dark-mode .download-button {
background-color: var(--primary-color-dark);
color: var(--text-color-dark);
}

.dark-mode .popup-link:hover,
.dark-mode .popup-button:hover,
.dark-mode .download-button:hover {
background-color: var(--secondary-color-dark);
}


/* Bouton "C'est parti !" */ 
#startButton, #restartButton {
position: relative;
width: 100%;
max-width: calc(var(--max-content-width) - 30px);
margin: 10px auto; /* Crée un espace de 20 pixels au-dessus et en dessous du bouton, et le centre horizontalement */
padding: 10px 20px; /* Ajoute un espace interne de 10 pixels en haut et en bas, et de 20 pixels à gauche et à droite du texte du bouton */
font-size: 1.2em;
font-weight: bold;
color: white;
background-color: var(--accent-color);
border: none;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
z-index: 1;
transition: all 0.3s ease;
display: block;
}

#startButton::before, #restartButton::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: conic-gradient(
#788FFA, #5CFCCC, #DB6A8F, #FFA98D, #788FFA
);
z-index: -1;
border-radius: 12px;
animation: spin 3s linear infinite;
}

#startButton::after, #restartButton::after {
content: '';
position: absolute;
inset: 2px;
background: var(--accent-color);
border-radius: 8px;
z-index: -1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Propositions de réponses */
.selectable-button {
flex: 0 1 calc(50% - 10px);
padding: 10px;
background-color: #fff;
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}

.selectable-button:hover, .selectable-button.selected {
background-color: var(--secondary-color);
color: #fff;
}

/* Pour les curseurs */
input[type="range"] {
width: 100%;
-webkit-appearance: none;
background: transparent;
margin-bottom: 20px;
}

input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
border-radius: 50%;
background: var(--secondary-color);
cursor: pointer;
margin-top: -8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Affichage coloré du curseur sur l'intensité de la douleur  */
.slider-value {
font-size: 24px;
color: var(--primary-color);
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}

/* Affichage coloré de l'intensité de la douleur */
#ageValue {
font-size: 24px;
color: var(--primary-color);
text-align: center;
margin-bottom: 15px;
font-weight: bold;
}




/* Conteneur principal pour le sélecteur d'âge */
.age-selector-container {
width: 100%; /* Occupe toute la largeur disponible de son parent */
max-width: 300px; /* Limite la largeur maximale à 300 pixels */
margin: 0 auto; /* Centre le conteneur horizontalement */
text-align: center; /* Centre le contenu texte à l'intérieur */
}




/* Boutons Précédent et Suivant */
/* Conteneur principal pour les boutons de navigation */
.navigation-buttons {
/* Utilise flexbox pour une disposition flexible des boutons */
display: flex;
/* Centre les boutons horizontalement */
justify-content: center;
/* Centre les boutons verticalement */
align-items: center;
/* Permet aux boutons de passer à la ligne si nécessaire */
flex-wrap: nowrap;
/* Espace entre les boutons */
gap: 10px;
/* Marge au-dessus et en-dessous, centré horizontalement */
margin: 5px auto;
/* Occupe toute la largeur disponible */
width: 100%;
/* Limite la largeur maximale pour éviter l'étirement excessif */
max-width: var(--max-content-width);
/* Ajoute un peu d'espace sur les côtés */
padding: 0 10px;
/* Inclut le padding dans la largeur totale */
box-sizing: border-box;
}

/* Styles communs pour les boutons et les liens de navigation */
.navigation-buttons button,
.navigation-buttons a {
/* Permet aux boutons de grandir et rétrécir de manière flexible */
flex: 1 1 auto;
/* Assure une largeur minimale pour les boutons */
min-width: 120px;
/* Limite la largeur maximale des boutons */
max-width: calc(50% - 5px);
/* Espace interne du bouton */
padding: 12px 15px;
/* Centre le texte à l'intérieur du bouton */
text-align: center;
/* Permet au texte de passer à la ligne si nécessaire */
white-space: normal;
/* Assure une hauteur minimale pour l'accessibilité */
min-height: 44px;
/* Utilise flexbox pour centrer le contenu du bouton */
display: flex;
align-items: center;
justify-content: center;
/* Taille de la police */
font-size: 16px;
/* Couleur de fond du bouton */
background-color: var(--accent-color);
/* Couleur du texte */
color: white;
/* Supprime la bordure par défaut */
border: none;
/* Arrondit les coins du bouton */
border-radius: 5px;
/* Change le curseur au survol */
cursor: pointer;
/* Ajoute une transition douce pour les changements */
transition: background-color 0.3s, transform 0.2s;
/* Supprime la marge en bas */
margin-bottom: 0;
}

/* Styles au survol des boutons */
.navigation-buttons button:hover,
.navigation-buttons a:hover {
/* Change la couleur de fond au survol */
background-color: var(--secondary-color);
/* Soulève légèrement le bouton au survol */
transform: translateY(-2px);
}

/* Styles spécifiques pour le bouton Précédent */
.navigation-buttons .prev-button {
background-color: #ADD8D4;
}

.navigation-buttons .prev-button:hover {
background-color: #8FC7C2;
}

/* Styles spécifiques pour le bouton Suivant */
.navigation-buttons .next-button {
background-color: var(--accent-color);
}

.navigation-buttons .next-button:hover {
background-color: #C25A7C;
}

/* Styles pour les liens agissant comme des boutons */
.navigation-buttons a {
text-decoration: none;
}

/* Styles pour les boutons désactivés */
.navigation-buttons button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Adaptations pour les petits écrans */
@media (max-width: 480px) {
.navigation-buttons {
/* Empile les boutons verticalement */
flex-direction: column;
/* Étire les boutons sur toute la largeur */
align-items: stretch;
}

.navigation-buttons button,
.navigation-buttons a {
/* Prend toute la largeur disponible */
width: 100%;
/* Supprime la largeur maximale */
max-width: none;
/* Augmente légèrement la taille de la police */
font-size: 16px;
/* Ajuste le padding pour une meilleure apparence */
padding: 15px;
}
}

/* Styles de base pour tous les champs */
input[type="text"],
input[type="email"],
input[type="date"] {
width: 100%;
padding: 10px;
margin-top: 10px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
display: block;
border: 2px solid var(--primary-color);
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Styles spécifiques pour les champs email et date */
input[type="date"] {
max-width: 160px;
}

/* Styles spécifiques pour les champs texte */
input[type="text"] {
max-width: 220px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus {
border-color: var(--secondary-color);
outline: none;
box-shadow: 0 0 5px rgba(92, 252, 204, 0.5);
}

/* Présentation des vidéos */

/* Styles communs pour les champs de saisie et le bouton d'accès vidéo */
.video-access-input,
.video-access-button {
width: 100%;
max-width: 220px; /* Ajustez cette valeur selon vos besoins */
padding: 10px;
margin-top: 10px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
display: block;
border: 2px solid var(--primary-color);
border-radius: 5px;
font-size: 16px;
box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

/* Styles spécifiques pour les champs de saisie */
.video-access-input {
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Conteneur pour le bouton */
.button-container {
display: flex;
justify-content: center;
width: 100%;
}

/* Styles spécifiques pour le bouton */
.video-access-button {
background-color: var(--primary-color);
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

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

/* Présentation des résultats */
.pain-areas-list,
.specific-locations-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.pain-area,
.specific-location {
padding: 8px;
background-color: var(--light-gray);
border-radius: 5px;
font-size: 0.9em;
transition: background-color 0.3s ease;
}



.ai-analysis-button,
.form-button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

.ai-analysis-button:hover,
.form-button:hover {
background-color: var(--secondary-color);
}

.restart-button {
display: block;
width: 200px;
margin: 20px auto;
padding: 10px 20px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.2em;
transition: background-color 0.3s;
}

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


/* Présentation des propositions de réponses */

.button-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
}

.selectable-button {
flex: 0 1 calc(50% - 5px);
padding: 10px;
text-align: center;
background-color: #fff;
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.selectable-button:hover,
.selectable-button.selected {
background-color: var(--secondary-color);
color: #fff;
}

@media (max-width: 480px) {
.selectable-button {
flex: 0 1 100%;
}
}

/* Présentation des propositions de réponses Quel diagnostic ? */

#step5 .radio-group {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
gap: 10px;
}

#step5 .radio-group label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px; /* Ajustez cette valeur si nécessaire */
padding: 10px 5px;
}

@media (max-width: 480px) {
#step5 .radio-group label {
font-size: 12px; /* Réduisez encore la taille sur les petits écrans si nécessaire */
}
}


/* Conteneur pour les labels du curseur de douleur */
.slider-labels {
display: flex; /* Utilise flexbox pour aligner les éléments horizontalement */
justify-content: space-between; /* Répartit l'espace entre les éléments */
margin-bottom: 10px; /* Ajoute un espace en dessous du conteneur */
width: 100%; /* Assure que le conteneur prend toute la largeur disponible */
position: relative;
}

/* Style commun pour tous les labels */
.slider-labels span {
font-size: 14px; /* Réduit encore la taille de la police pour s'assurer que le texte tient */
color: var(--text-color); /* Utilise la couleur de texte définie dans les variables */
text-align: center; /* Centre le texte horizontalement */
flex: 1; /* Permet à chaque label de prendre une part égale de l'espace */
max-width: 33%; /* Limite la largeur à un tiers du conteneur */
white-space: nowrap; /* Empêche le texte de passer à la ligne */
overflow: hidden; /* Cache le texte qui dépasse */
white-space: normal; /* Permet le retour à la ligne */
word-wrap: break-word; /* Permet aux mots longs de se couper et passer à la ligne */
overflow-wrap: break-word; /* Assure que les mots très longs sont coupés si nécessaire */
/*text-overflow: ellipsis;*/ /* Ajoute des points de suspension si le texte est trop long */
}

/* Style spécifique pour le premier label (à gauche) */
.slider-labels span:first-child {
text-align: left; /* Aligne le texte à gauche */
}

/* Style spécifique pour le dernier label (à droite) */
.slider-labels span:last-child {
text-align: right; /* Aligne le texte à droite */
}

/* Media query pour les petits écrans */
@media (max-width: 480px) {
.slider-labels span {
font-size: 8px; /* Réduit encore plus la taille de la police sur les petits écrans */
}
}

/* Transition douces précisions de localisation */
.question-options {
transition: opacity 0.3s ease-in-out;
opacity: 1;
}

.question-options.hidden {
opacity: 0;
}

/* Conteneur du sélecteur jour/nuit */
.mode-toggle-container {
/*position: fixed;*/ /* Position fixe par rapport à la fenêtre du navigateur */
left: 50%; /* Centre horizontalement */
transform: translateX(calc(50% + 90px)); /* Déplace de 50% + 10px vers la droite */
z-index: 10000; /* Assure que le sélecteur est au-dessus des autres éléments */
display: flex; /* Utilise flexbox pour centrer le contenu */
align-items: center; /* Centre verticalement le contenu */
justify-content: center; /* Centre horizontalement le contenu */
}

/* Style du sélecteur lui-même */
.toggle-checkbox {
display: none; /* Cache la case à cocher native */
}

.toggle-label {
display: block;
width: 60px;
height: 30px;
background-color: var(--light-gray);
border-radius: 30px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}

.toggle-inner {
position: absolute;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s, background-color 0.3s;
}

/* Style pour l'icône du soleil */
.toggle-switch::before {
content: '☀️';
position: absolute;
left: 5px;
top: 5px;
}

/* Style pour l'icône de la lune */
.toggle-switch::after {
content: '🌙';
position: absolute;
right: 5px;
top: 5px;
}

/* Style lorsque le sélecteur est activé */
.toggle-checkbox:checked + .toggle-label {
background-color: var(--primary-color-dark);
}

/* Déplacement du bouton lorsque le sélecteur est activé */
.toggle-checkbox:checked + .toggle-label .toggle-inner {
transform: translateX(30px);
background-color: var(--background-color-dark);
}

/* Adaptation pour les petits écrans */
@media (max-width: 768px) {
.mode-toggle-container {
top: 10px; /* Réduit la distance depuis le haut */
right: 10px; /* Réduit la distance depuis la droite */
}
}

/* Image des résultats */
.results-intro-image {
max-width: 200px; /* Ajustez cette valeur selon vos besoins */
height: auto;
display: block; /* Permet le centrage horizontal de l'image */
margin: 20px auto;
border-radius: 20px; /* Ajoute des coins arrondis */
z-index: 10; /* Assurez-vous qu'il est inférieur à celui du popup */
overflow: hidden; /* Assure que l'image ne déborde pas des coins arrondis */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajoute une transition douce pour l'effet de survol */
}

.results-intro-image:hover {
transform: scale(1.05); /* Agrandit légèrement l'image au survol */
box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Ajoute une ombre au survol */
}


/* Pour les images des catégories de patients */
.patient-type-image {
max-width: 100%; /* Assure que l'image ne dépasse pas la largeur du conteneur */
height: auto; /* Maintient le ratio d'aspect */
display: block; /* Élimine l'espace sous l'image */
margin: 0 auto 15px; /* Centre l'image et ajoute un espace en dessous */
border-radius: 10px; /* Coins arrondis */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre */
transition: transform 0.3s ease; /* Animation au survol */
}

.patient-type-image:hover {
transform: scale(1.05); /* Léger agrandissement au survol */
}

@media (max-width: 768px) {
.patient-type-image {
max-width: 80%; /* Réduit la taille sur les petits écrans */
}
}


/* Pour l'image dans le wrapper "Découvrez nos ostéopathes" */
.discover-osteopaths-image {
max-width: 80%; /* Réduit la taille de l'image */
height: auto;
display: block;
margin: 0 auto 15px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.discover-osteopaths-image:hover {
transform: scale(1.03);
}

@media (max-width: 768px) {
.discover-osteopaths-image {
max-width: 70%;
}
}

/* Image Travailleur*/
.workers-image {
width: 70%; /* L'image prendra toute la largeur du conteneur */
height: auto; /* Hauteur fixe, ajustez selon vos besoins */
object-fit: contain;
/*object-fit: cover;*/ /* L'image couvrira tout l'espace alloué */
object-position: center; /* L'image sera centrée */
margin-bottom: 15px; /* Espace sous l'image */
border-radius: 10px;
transition: transform 0.3s ease;
}

.workers-image:hover {
transform: scale(1.05);
}

/* Styliser les localisations de précisions douloureuses */
.pain-areas-list,
.specific-locations-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.pain-area,
.specific-location {
padding: 8px;
background-color: var(--light-gray);
border-radius: 5px;
font-size: 0.9em;
transition: background-color 0.3s ease;
}

.pain-area:hover,
.specific-location:hover {
background-color: #e8e8e8;
}

.pain-area {
border-left: 3px solid var(--primary-color);
}

.specific-location {
border-left: 3px solid var(--secondary-color);
}

/* Améliorer la lisibilité des zones et localisations */
.pain-areas-list,
.specific-locations-list {
max-height: 200px;
overflow-y: auto;
padding-right: 5px;
}

/* Style pour la barre de défilement */
.pain-areas-list::-webkit-scrollbar,
.specific-locations-list::-webkit-scrollbar {
width: 5px;
}

.pain-areas-list::-webkit-scrollbar-thumb,
.specific-locations-list::-webkit-scrollbar-thumb {
background-color: var(--primary-color);
border-radius: 5px;
}

/* Affichage des infos praticien pour découvrir vidéo */

.form-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

.form-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

.form-button:hover {
background-color: #45a049;
}


/* Styles CSS pour les popups et overlays */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 3000;
transition: opacity 0.3s ease;
opacity: 1;
}

.overlay.hidden {
opacity: 0;
pointer-events: none;
}

/* Styles généraux pour les popups */
.popup {
position: fixed; /* Fixe le popup par rapport à la fenêtre du navigateur */
top: 50%; /* Positionne le haut du popup à 50% du haut de la fenêtre */
left: 50%; /* Positionne la gauche du popup à 50% de la gauche de la fenêtre */
transform: translate(-50%, -50%); /* Centre parfaitement le popup */
background-color: white; /* Fond blanc pour le popup */
padding: 30px; /* Espace intérieur autour du contenu du popup */
border-radius: 15px; /* Coins arrondis pour un look moderne */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Ombre portée pour un effet de profondeur */
z-index: 4000; /* Assure que le popup est au-dessus des autres éléments */
max-width: 400px; /* Largeur maximale du popup */
width: 90%; /* Largeur relative pour la responsivité */
box-sizing: border-box; /* Inclut padding et bordure dans la largeur totale */
animation: popIn 0.3s ease-out; /* Animation d'apparition */
}

/* Animation pour l'apparition des popups */
@keyframes popIn {
from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Assurer la bonne dispositions des éléments dans les popups */
/* Styles généraux pour le contenu des popups */
.popup-content {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

/* Styles pour l'image de la carte bancaire */
.popup-content img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}

/* Styles pour le formulaire de paiement */
#payment-form-buy,
#payment-form-download,
#payment-form-ai {
width: 100%;
}

/* Styles pour le conteneur de l'élément de carte */
#card-element-buy,
#card-element-download,
#card-element-ai {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
margin-bottom: 20px;
}

/* Styles pour les boutons dans les popups */
.popup-content button {
width: 100%;
padding: 12px;
margin-top: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

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

/* Styles pour les messages d'erreur */
#card-errors-buy,
#card-errors-download,
#card-errors-ai {
width: 100%;
color: #fa755a;
margin-bottom: 20px;
}


/* Styles pour le titre du popup */
.popup-title {
text-align: center;
margin-bottom: 20px;
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
font-size: 24px;
}

/* Styles pour le tableau dans le popup */
.popup-table {
width: 100%;
overflow-x: auto;
display: block;
}

.popup-table th, .popup-table td {
min-width: 100px;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}

.popup-table th {
background-color: var(--light-gray);
color: var(--primary-color);
}

/* Styles communs pour les boutons et liens dans les popups */
.popup-button,
.popup-link,
#paymentButton,
.buy-button,
button[type="submit"] {
display: block;
width: 100%;
max-width: calc(var(--max-content-width) - 30px);
margin: 10px auto;
padding: 12px 20px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
border: none;
border-radius: 10px;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}

/* Effet de bordure animée pour les boutons de paiement */
#paymentButton::before,
.buy-button::before,
button[type="submit"]::before {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: conic-gradient(
#788FFA, #5CFCCC, #DB6A8F, #FFA98D, #788FFA
);
z-index: -2;
border-radius: 12px;
animation: spin 3s linear infinite;
}

#paymentButton::after,
.buy-button::after,
button[type="submit"]::after {
content: '';
position: absolute;
inset: 2px;
background: var(--accent-color);
border-radius: 8px;
z-index: -1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Effets de survol pour les boutons */
.popup-button:hover,
.popup-link:hover,
#paymentButton:hover,
.buy-button:hover,
button[type="submit"]:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}

#paymentButton:hover::before,
.buy-button:hover::before,
button[type="submit"]:hover::before {
filter: blur(1.5rem);
opacity: 0.7;
}

/* Effet au clic pour les boutons */
.popup-button:active,
.popup-link:active,
#paymentButton:active,
.buy-button:active,
button[type="submit"]:active {
transform: translateY(1px);
}

/* Style spécifique pour le bouton Annuler et Revenir aux résultats */
.popup-button.cancel,
.popup-link[onclick*="closePopup"],
.close-button {
background-color: #ADD8D4; /* Couleur bleue pour ces boutons */
color: white; /* Texte en blanc pour un meilleur contraste */
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
text-decoration: none;
display: block; /* Change à block pour occuper toute la largeur */
width: 100%; /* Prend toute la largeur disponible */
margin: 10px auto; /* Marge verticale et centrage horizontal */
max-width: calc(var(--max-content-width) - 30px); /* Cohérent avec les autres boutons */
}

.popup-button.cancel:hover,
.popup-link[onclick*="closePopup"]:hover,
.close-button:hover {
background-color: #8FC7C2;
}

/* Styles pour le popup de téléchargement */
#downloadPopup {
width: 90%;
max-width: 440px;
overflow: auto;
max-height: 90vh;
}

/* Styles pour le popup d'achat de guide */
.buy-guide-popup {
background-color: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 90%;
margin: 20px auto;
}

.buy-guide-popup h3 {
color: var(--primary-color);
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}

.guide-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

/* Réduire la taille de l'image dans les popups */
.popup img {
max-width: 50%; /* Réduit la taille de l'image à 50% de sa taille originale */
height: auto; /* Maintient le ratio d'aspect */
display: block; /* Assure que l'image est bien centrée */
margin: 0 auto 15px; /* Centre l'image et ajoute un espace en dessous */
}

/* Styles généraux pour les questions supplémentaires */
.additional-question {
min-height: 150px; /* Hauteur minimale pour assurer un espace suffisant */
display: flex; /* Utilise flexbox pour la disposition */
flex-direction: column; /* Empile les éléments verticalement */
justify-content: flex-start; /* Aligne les éléments en haut */
margin-bottom: 20px; /* Espace en dessous de chaque question supplémentaire */
background-color: var(--light-gray); /* Fond gris clair pour toutes les questions supplémentaires */
padding: 15px; /* Espace intérieur */
border-radius: 10px; /* Coins arrondis */
}

/* Styles pour le titre de la question supplémentaire */
.additional-question h4 {
margin-bottom: 15px; /* Espace sous le titre de la question */
color: var(--primary-color); /* Utilise la couleur primaire définie */
font-size: 1.1em; /* Taille de police légèrement plus grande pour le titre */
font-weight: bold; /* Met le titre en gras */
}

/* Styles pour le groupe de boutons dans les questions supplémentaires */
.additional-question .button-group {
display: flex; /* Utilise flexbox pour la disposition des boutons */
flex-wrap: wrap; /* Permet aux boutons de passer à la ligne si nécessaire */
justify-content: space-between; /* Espace les boutons uniformément */
gap: 10px; /* Espace entre les boutons */
margin-top: 15px; /* Espace au-dessus du groupe de boutons */
}

/* Styles pour les boutons dans les questions supplémentaires */
.additional-question .selectable-button {
flex: 0 1 calc(50% - 5px); /* Deux boutons par ligne avec un espace entre eux */
padding: 10px; /* Espace interne du bouton */
text-align: center; /* Centre le texte dans le bouton */
background-color: #fff; /* Fond blanc pour les boutons */
border: 2px solid var(--primary-color); /* Bordure de la couleur primaire */
color: var(--primary-color); /* Texte de la couleur primaire */
border-radius: 5px; /* Coins arrondis */
cursor: pointer; /* Curseur en forme de main au survol */
transition: all 0.3s ease; /* Transition douce pour les effets de survol */
}

.additional-question .selectable-button:hover,
.additional-question .selectable-button.selected {
background-color: var(--secondary-color); /* Fond de la couleur secondaire au survol ou si sélectionné */
color: #fff; /* Texte blanc au survol ou si sélectionné */
}

/* Styles spécifiques pour les wrappers "Transférer votre diagnostic" et "Exercices pratiques en vidéo" */



/* Styles spécifiques pour le bouton "Découvrir les vidéos pratiques" */
.discover-videos-btn {
display: block !important;
width: 100% !important;
max-width: 200px !important; /* Ajuster */
margin: 15px auto !important;
padding: 10px 20px !important;
background-color: var(--primary-color) !important;
color: white !important;
text-align: center !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
}

.discover-videos-btn:hover {
background-color: var(--secondary-color) !important;
}

/* Réinitialisation des styles flex pour ce bouton spécifique */
.additional-question .button-group .discover-videos-btn {
flex: none !important;
width: 100% !important;
max-width: 300px !important;
}


/* Style commun pour les deux cartes de résultat */
.result-card.transfer-diagnosis,
.result-card.practical-exercises {
background-color: #f9f9f9; /* Fond légèrement gris pour distinguer ces cartes */
border-radius: 10px; /* Coins arrondis pour un look moderne */
padding: 20px; /* Espace intérieur pour le contenu */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
margin-bottom: 20px; /* Espace en dessous de chaque carte */
}

/* Style pour les titres h3 dans ces cartes */
.result-card.transfer-diagnosis h3,
.result-card.practical-exercises h3 {
color: var(--primary-color); /* Utilise la couleur primaire de votre charte */
font-size: 1.2em; /* Taille de police légèrement plus grande pour les titres */
margin-bottom: 15px; /* Espace sous le titre */
border-bottom: 2px solid var(--primary-color); /* Ligne de séparation sous le titre */
padding-bottom: 10px; /* Espace entre le texte du titre et la ligne */
}

/* Style pour les paragraphes dans ces cartes */
.result-card.transfer-diagnosis p,
.result-card.practical-exercises p {
margin-bottom: 10px; /* Espace entre les paragraphes */
font-size: 0.9em; /* Taille de police légèrement plus petite pour le texte */
}

/* Style pour les champs de saisie dans la carte des exercices pratiques */
.result-card.practical-exercises input[type="text"],
.result-card.practical-exercises input[type="password"] {
width: 100%; /* Occupe toute la largeur disponible */
padding: 10px; /* Espace intérieur pour le texte */
margin-bottom: 10px; /* Espace sous chaque champ */
border: 1px solid var(--primary-color); /* Bordure de la couleur primaire */
border-radius: 5px; /* Coins arrondis pour les champs */
font-size: 14px; /* Taille de police pour le texte saisi */
}

/* Style pour les boutons dans ces cartes */
.result-card.transfer-diagnosis button,
.result-card.practical-exercises button {
width: 100%;
background-color: var(--primary-color); /* Couleur d'accent pour les boutons */
color: white; /* Texte en blanc pour contraste */
border: none; /* Pas de bordure */
padding: 10px 15px; /* Espace autour du texte du bouton */
border-radius: 5px; /* Coins arrondis pour les boutons */
cursor: pointer; /* Curseur en forme de main au survol */
font-size: 14px; /* Taille de police pour le texte du bouton */
transition: background-color 0.3s ease; /* Transition douce pour l'effet de survol */
margin-right: 10px; /* Espace entre les boutons */
margin-top: 10px; /* Espace au-dessus des boutons */
}

/* Effet de survol pour les boutons */
.result-card.transfer-diagnosis button:hover,
.result-card.practical-exercises button:hover {
background-color: var(--secondary-color); /* Changement de couleur au survol */
transform: translateY(-2px);
}

/* Effet au clic pour les boutons */
.result-card.transfer-diagnosis button:active,
.result-card.practical-exercises button:active {
transform: translateY(1px);
}

/* Style spécifique pour le bouton Annuler ou Revenir aux résultats */
.result-card.transfer-diagnosis button.cancel,
.result-card.practical-exercises button.cancel {
background-color: #f0f0f0;
color: #333;
}

.result-card.transfer-diagnosis button.cancel:hover,
.result-card.practical-exercises button.cancel:hover {
background-color: #e0e0e0;
}

/* Style pour le message quand aucune information n'est disponible */
.result-card.transfer-diagnosis:empty::before,
.result-card.practical-exercises:empty::before {
content: 'Aucune information disponible'; /* Texte à afficher */
color: #888; /* Couleur grise pour le texte */
font-style: italic; /* Texte en italique */
}

/* CSS pour les Popups et Wrappers */
.cancel {
background-color: #f44336; /* Couleur rouge pour le bouton Annuler */
}

/* Media query pour les petits écrans */
@media (max-width: 768px) {
.result-card.transfer-diagnosis,
.result-card.practical-exercises {
padding: 15px; /* Réduire le padding sur les petits écrans */
}

.result-card.transfer-diagnosis h3,
.result-card.practical-exercises h3 {
font-size: 1.1em; /* Réduire légèrement la taille du titre */
}

.result-card.transfer-diagnosis button,
.result-card.practical-exercises button {
width: 100%; /* Boutons en pleine largeur sur petits écrans */
margin-right: 0; /* Supprimer la marge droite */
margin-bottom: 10px; /* Ajouter de l'espace entre les boutons empilés */
}
}

/* Media query pour les petits écrans */
@media (max-width: 480px) {
.additional-question .selectable-button {
flex: 0 1 100%; /* Un bouton par ligne sur les petits écrans */
}
}

/* Media queries pour la responsivité */
@media (max-width: 768px) {
.result-row {
flex-wrap: wrap;
}

.result-card.pain-intensity,
.result-card.score,
.result-card.risk {
width: 100%;
margin-right: 0;
}
}

/* Ces règles s'appliquent uniquement aux écrans de 480 pixels de large ou moins */
@media (max-width: 480px) {
/* Styles pour les popups sur petits écrans */
.popup {
padding: 15px; /* Réduit l'espacement interne pour économiser de l'espace */
width: 95%; /* Utilise presque toute la largeur de l'écran */
}

.popup-title {
font-size: 18px; /* Réduit la taille du titre pour qu'il s'adapte mieux aux petits écrans */
}

/* Styles pour les boutons et liens dans les popups sur petits écrans */
.popup-button,
.popup-link,
#paymentButton,
.buy-button,
button[type="submit"] {
font-size: 14px; /* Réduit la taille de la police pour les boutons */
padding: 8px 15px; /* Ajuste l'espacement interne des boutons */
}

/* Styles pour les cellules de tableau dans les popups sur petits écrans */
.popup-table th, 
.popup-table td {
padding: 8px; /* Réduit l'espacement dans les cellules du tableau */
font-size: 14px; /* Réduit la taille du texte dans les cellules */
}

/* Styles spécifiques pour le popup de téléchargement sur petits écrans */
#downloadPopup {
width: 95%; /* Utilise presque toute la largeur de l'écran */
padding: 15px; /* Ajuste l'espacement interne */
}

/* Ajustements généraux pour le corps de la page sur petits écrans */
body {
font-size: 14px; /* Réduit la taille de police générale */
}

/* Ajustement pour les cartes de résultat sur petits écrans */
.result-card {
margin-bottom: 10px; /* Réduit l'espace entre les cartes de résultat */
}
}

/* Règles spécifiques pour les très petits écrans (320 pixels de large ou moins) */
@media (max-width: 320px) {
.responsive-title {
font-size: 1.2em; /* Réduit encore plus la taille du titre pour les très petits écrans */
}

.action-button {
font-size: 0.9em; /* Réduit la taille de police des boutons d'action */
padding: 8px 12px; /* Ajuste l'espacement interne des boutons */
}

.content-below-image {
padding: 3px; /* Réduit l'espacement autour du contenu sous les images */
}
}



/* Styles pour le conteneur principal des méthodes ostéopathiques */
.result-row.osteo-methods {
position: relative;
display: flex;
align-items: center;
margin-bottom: 30px;
padding-top: 20px;
padding-bottom: 20px;
}

/* Style pour le titre "Nos méthodes ostéopathiques" */
.result-row.osteo-methods > h3 {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
writing-mode: horizontal-rl;
text-orientation: mixed;
height: auto;
margin: 0;
padding: 10px;
background-color: #788FFA; /* Vous pouvez changer la couleur si vous le souhaitez */
color: white;
font-size: 18px;
border-radius: 20px;
z-index: 1;
}

/* Styles pour chaque wrapper de méthode ostéopathique */
.method-wrapper {
cursor: pointer;
flex: 0 0 auto;
width: calc(25% - 15px);
min-width: 200px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
scroll-snap-align: start;
}

.method-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.method-wrapper img {
width: 100%;
height: 120px;
object-fit: cover;
}

.method-wrapper h3 {
font-size: 16px;
margin: 10px 10px 5px;
color: #333;
}

.method-wrapper p {
font-size: 12px;
margin: 0 10px 10px;
color: #666;
}
















/* Les media queries restent les mêmes que pour les types de patients */

/* Styles pour la section vidéo */
.result-row.video-section {
margin-bottom: 10px; /* Espace en dessous de la section vidéo */
height: auto; /* Permet à la hauteur de s'ajuster au contenu */
}

/* Conteneur principal de la vidéo */
.video-container {
position: relative; /* Nécessaire pour le positionnement absolu de l'iframe */
width: 90%; /* Largeur de 90% du conteneur parent */
max-width: 520px; /* Largeur maximale pour éviter que la vidéo ne devienne trop grande */
margin: 0 auto; /* Centre le conteneur horizontalement */
padding-top: 35.4375%; /* 56.25% * 0.9 * 0.7 pour 70% de hauteur d'un ratio 16:9 à 90% de largeur */
height: 0; /* Hauteur initiale à 0 pour utiliser le padding pour définir la hauteur */
overflow: hidden; /* Cache tout contenu qui dépasse */
}

/* Pseudo-élément pour maintenir le ratio d'aspect */
.video-container::before {
content: "";
display: block;
padding-top: 56.25%; /* Ratio 16:9 standard */
}

/* Styles pour l'iframe de la vidéo */
.video-container iframe {
position: absolute; /* Positionnement absolu par rapport au conteneur */
top: 0;
left: 0;
width: 100%; /* Prend toute la largeur du conteneur */
height: 100%; /* Remplit tout le conteneur qui est maintenant à 70% de la hauteur originale */
border-radius: 8px; /* Coins arrondis pour l'iframe */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
}










/* Style pour centrer le contenu sous "Nos avis Google" */
.review-left {
padding-right: 20px;
text-align: center; /* Centre le texte dans le wrapper gauche */
}

.google-rating,
.leave-review {
display: flex;
flex-direction: column;
align-items: center; /* Centre les éléments enfants */
}

/* Style des commentaires et auteurs */
.review-comment {
font-size: 16px;
margin-bottom: 10px;
}

.review-author {
font-size: 12px;
color: #666;
font-style: italic;
}

/* Wrapper général des sections d'avis */
.review-section-wrapper {
margin-top: 10px; /* Réduit la marge supérieure */
margin-bottom: 10px; /* Maintient une marge inférieure pour séparer des sections suivantes */
padding: 15px; /* Réduit légèrement le padding interne */
background-color: transparent; /* Aucun fond pour le carroussel */
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Disposition des sections colonnes d'avis */
.review-section {
display: flex;
justify-content: space-between;
align-items: stretch; /* Assure que les deux colonnes ont la même hauteur */
}

/* Style commun pour les colonnes gauche et droite */
.review-left, .review-right {
flex: 1;
padding: 20px;
background-color: transparent; /*#ffffff;*/ /* Fond blanc pour chaque colonne */
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Style pour la notation Google */
.google-rating {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.rating {
font-size: 48px; /* Taille de la note */
font-weight: bold;
color: #788FFA; /* Couleur principale bleue */
margin-right: 10px; /* Espace après la note */
}

.stars {
color: #FC9C04; /* Couleur jaune pour les étoiles */
}

.review-count {
margin-left: 10px; /* Espace avant le texte de comptage des avis */
color: #333533; /* Couleur du texte */
}

.leave-review p {
margin-bottom: 10px; /* Espace sous le paragraphe d'invitation à laisser un avis */
}

/* Style des étoiles cliquables pour laisser un avis */
.star-rating {
font-size: 24px; /* Taille des étoiles cliquables */
color: #FC9C04; /* Couleur jaune pour les étoiles cliquables */
cursor: pointer; /* Curseur pointeur sur les étoiles cliquables */
}

/* Bouton pour publier un avis */
.review-button {
display: inline-block;
margin-top: 10px; /* Espace au-dessus du bouton */
padding: 10px 20px; /* Espacement interne du bouton */
background-color: #788FFA; /* Couleur principale bleue pour le bouton */
color: white; /* Couleur du texte du bouton */
text-decoration: none; /* Pas de soulignement sur le texte du bouton */
border-radius: 5px; /* Coins arrondis du bouton */
}

.review-button:hover {
background-color: #7F7BED; /* Variante bleue au survol du bouton */
}

/* Mise à jour du style de la section droite (carrousel) avec couleur bleue principale */
.review-carousel-container {
position: relative;
background-color: transparent; /* Aucun fond pour le carroussel */
padding: 15px 30px; /* Augmenté le padding horizontal pour laisser de la place aux boutons */
border-radius: 10px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

/* Style centralisé pour le carrousel des avis */
.review-carousel {
flex: 1;
text-align: center; /* Centre le texte dans le carrousel */
position: relative;
}

/* Style des boutons de navigation du carrousel (gauche et droite) */
.carousel-button {
background-color: transparent; /* Aucun fond pour les boutons */
border: none; /* Pas de bordure autour des boutons */
color: #FC9C04; /* Couleur jaune pour les symboles < et > des boutons */
font-size: 24px; /* Taille ajustée des symboles < et > */
cursor: pointer; /* Curseur pointeur sur les boutons cliquables */
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2; /* Assurez-vous que les boutons sont au-dessus du contenu */
}

.carousel-button:hover {
color: #FFA500; /* Légèrement plus foncé au survol pour indiquer l'interaction possible avec les boutons */
}

.carousel-button.prev {
left: -15px; /* Positionnement à gauche ajusté en dehors du conteneur principal pour un look épuré */
}

.carousel-button.next {
right: -15px; /* Positionnement à droite ajusté en dehors du conteneur principal pour un look épuré */
}

/* Styles responsives pour petits écrans (moins de largeur que max-width)*/
@media (max-width: 768px) {
.review-section {
flex-direction: column; /* Empile verticalement sur petits écrans pour une meilleure lisibilité et accessibilité mobile*/
}

.review-left, .review-right {
width: auto; 
margin-bottom :20 px ;
padding-right :0 ;
padding-left :0 ;
align-items :center ; 
justify-content :center ;
display :flex ;
flex-direction :column ;
text-align :center ;

}
}



























/* Style pour le conteneur des liens découverte */
.result-row.discover-links {
position: relative;
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 20px 0;
overflow: visible;
}

/* Style pour le titre "Découvrir nos ostéopathes !" */
.discover-title {
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 10px 30px 10px 15px;
background-color: #788FFA;
color: white;
font-size: 16px;
border-radius: 5px 0 0 5px;
z-index: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1.2;
text-align: left;
white-space: nowrap;
}

/* Création de la flèche */
.discover-title::after {
content: '';
position: absolute;
right: -20px;
top: 0;
border-top: 30px solid transparent; /* Ajusté pour deux lignes */
border-bottom: 30px solid transparent; /* Ajusté pour deux lignes */
border-left: 20px solid #788FFA;
}

/* Ajustement du conteneur défilant pour les liens */
.discover-links .scrollable-wrapper-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-left: 170px; /* Espace pour le titre */
padding-bottom: 10px;
padding-left: 20px; /* Ajustez cette valeur selon mes besoins */
}

/* Styles pour chaque wrapper de lien */
.link-wrapper {
flex: 0 0 auto;
width: 250px;
min-width: 250px;
height: 200px; /* Hauteur légèrement augmentée pour accommoder le contenu */
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden; /* Cache tout contenu qui dépasse */
transition: transform 0.3s ease, box-shadow 0.3s ease;
scroll-snap-align: start;
margin-right: 15px;
cursor: pointer;
display: flex; /* Utilise flexbox pour organiser le contenu verticalement */
flex-direction: column; /* Empile les éléments verticalement */
}

/* Effet de survol */
.link-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Style pour l'image dans le wrapper */
.link-wrapper img {
width: 100%;
height: 120px; /* Hauteur réduite pour laisser plus de place au texte */
object-fit: contain; /* Affiche l'image entière sans la couper */
object-position: center;
background-color: #f0f0f0; /* Fond gris clair pour les images */
flex-shrink: 0; /* Empêche l'image de rétrécir */
}

/* Style pour le titre dans le wrapper */
.link-wrapper h3 {
font-size: 14px; /* Taille de police légèrement réduite */
margin: 8px 10px 4px; /* Marges ajustées */
color: #333;
line-height: 1.2; /* Hauteur de ligne réduite pour un meilleur ajustement */
overflow: hidden; /* Cache le texte qui dépasse */
text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
white-space: nowrap; /* Empêche le retour à la ligne */
}

/* Style pour le paragraphe dans le wrapper */
.link-wrapper p {
font-size: 12px;
margin: 0 10px 8px; /* Marges ajustées */
color: #666;
line-height: 1.2; /* Hauteur de ligne réduite */
overflow: hidden; /* Cache le texte qui dépasse */
display: -webkit-box;
-webkit-line-clamp: 2; /* Limite le texte à 2 lignes */
-webkit-box-orient: vertical;
text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
}

/* Media queries pour la responsivité */
@media (max-width: 1024px) {
.video-container {
width: 90%; /* Augmenté pour une meilleure utilisation de l'espace */
max-width: 800px; /* Limite la largeur maximale */
padding-top: 50.625%; /* Ratio 16:9 (56.25% * 0.9) */
max-height: calc(2 * 180px); /* Deux fois la hauteur d'un wrapper */
}

.discover-links .scrollable-wrapper-container {
margin-left: 160px;
}

.link-wrapper {
width: 220px;
min-width: 220px;
}
}

@media (max-width: 768px) {
.video-container {
width: 100%; /* Pleine largeur pour les tablettes */
padding-top: 56.25%; /* Ratio 16:9 standard */
max-height: calc(2 * 160px); /* Ajusté pour les écrans plus petits */
}

.discover-title {
position: static;
transform: none;
margin-bottom: 15px;
width: auto;
border-radius: 5px;
text-align: center;
}

.discover-title::after {
display: none;
}

.discover-links .scrollable-wrapper-container {
margin-left: 0;
}

.link-wrapper {
width: 200px;
min-width: 200px;
}
}

@media (max-width: 480px) {
.video-container {
width: 100%;
padding-top: 56.25%; /* Maintient le ratio 16:9 */
max-height: calc(2 * 140px); /* Ajusté pour les très petits écrans */
}

.link-wrapper {
width: 180px;
min-width: 180px;
}
}

/* Spécifique pour iPhone 12 mini et écrans similaires */
@media (max-width: 375px) {
.video-container {
padding-top: 56.25%; /* Maintient le ratio 16:9 */
max-height: calc(2 * 130px); /* Ajusté pour l'iPhone 12 mini */
}

.link-wrapper {
width: 160px;
min-width: 160px;
}
}


/* Conteneur principal pour la rangée de résultats */
.result-row {
position: relative; /* Permet le positionnement absolu des enfants */
display: flex; /* Utilise flexbox pour l'alignement */
align-items: stretch; /* Étire les éléments enfants verticalement */
margin-bottom: 30px; /* Espace en dessous de chaque rangée */
}

/* Style pour le titre "Nos types de patients" */
/* Styles pour le conteneur principal des types de patients */
.result-row.patient-types {
position: relative;
display: flex;
align-items: center; /* Centre verticalement le contenu */
margin-bottom: 30px;
padding-top: 20px; /* Ajoute un espace en haut */
padding-bottom: 20px; /* Ajoute un espace en bas */
}

/* Style pour le titre "Nos types de patients" */
.result-row.patient-types > h3 {
position: absolute;
left: 0;
top: 50%; /* Positionne le haut du titre au milieu du conteneur */
transform: translateY(-50%); /* Décale le titre vers le haut de sa propre hauteur */
writing-mode: horizontal-rl;
text-orientation: mixed;
height: auto; /* Permet au titre de prendre sa hauteur naturelle */
margin: 0;
padding: 10px;
background-color: #788FFA;
color: white;
font-size: 18px;
border-radius: 20px; /* Coins arrondis */
z-index: 1; /* Assure que le titre est au-dessus des autres éléments */
}

/* Conteneur défilant pour les types de patients */
.scrollable-wrapper-container {
display: flex; /* Utilise flexbox pour l'alignement horizontal */
overflow-x: auto; /* Permet le défilement horizontal */
scroll-snap-type: x mandatory; /* Snap au défilement */
gap: 20px; /* Espace entre les éléments */
padding: 20px; /* Espace intérieur */
background-color: #f5f5f5; /* Couleur de fond légère */
border-radius: 10px; /* Coins arrondis */
-webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
}

/* Styles pour la barre de défilement */
.scrollable-wrapper-container::-webkit-scrollbar {
height: 6px; /* Hauteur de la barre de défilement */
}

.scrollable-wrapper-container::-webkit-scrollbar-thumb {
background-color: #888; /* Couleur du curseur de défilement */
border-radius: 4px; /* Coins arrondis du curseur */
}

.scrollable-wrapper-container::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Couleur de la piste de défilement */
}

/* Ajustez la marge du conteneur de défilement pour laisser de la place au titre */
.scrollable-wrapper-container {
margin-left: 25px; /* Ajustez cette valeur selon la largeur de votre titre */
}

/* Styles pour chaque wrapper de type de patient */
.type-wrapper {
cursor: pointer; /* Curseur en forme de main au survol */
flex: 0 0 auto; /* Empêche le redimensionnement des éléments */
width: calc(25% - 15px); /* Largeur pour 4 éléments par ligne */
min-width: 200px; /* Largeur minimale */
background-color: white; /* Fond blanc */
border-radius: 8px; /* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
overflow: hidden; /* Cache le débordement */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation douce */
scroll-snap-align: start; /* Aligne les éléments au défilement */
}

/* Effet de survol sur les wrappers */
.type-wrapper:hover {
transform: translateY(-5px); /* Soulève légèrement l'élément */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
}

/* Style pour les images dans les wrappers */
.type-wrapper img {
width: 100%; /* Occupe toute la largeur */
height: 120px; /* Hauteur fixe */
object-fit: cover; /* Couvre tout l'espace sans déformer l'image */
}

/* Style pour les titres dans les wrappers */
.type-wrapper h3 {
font-size: 16px; /* Taille de police */
margin: 10px 10px 5px; /* Marges */
color: #333; /* Couleur du texte */
}

/* Style pour les paragraphes dans les wrappers */
.type-wrapper p {
font-size: 12px; /* Taille de police */
margin: 0 10px 10px; /* Marges */
color: #666; /* Couleur du texte */
}

/* Media queries pour la responsivité */
@media (max-width: 1200px) {
.type-wrapper {
width: calc(33.333% - 13.333px); /* 3 éléments par ligne */
}
}

@media (max-width: 900px) {
.type-wrapper {
width: calc(50% - 10px); /* 2 éléments par ligne */
}
}

@media (max-width: 600px) {
.type-wrapper {
width: calc(80% - 10px); /* Presque pleine largeur, avec aperçu du suivant */
min-width: 150px;
}
.type-wrapper img {
height: 100px; /* Réduire la hauteur de l'image */
}
.type-wrapper h3 {
font-size: 14px; /* Réduire la taille du titre */
}
.type-wrapper p {
font-size: 10px; /* Réduire la taille du texte */
}
}

/* Spécifique pour iPhone 12 mini et écrans similaires */
@media (max-width: 375px) {
.type-wrapper {
width: calc(90% - 10px);
min-width: 120px;
}
.scrollable-wrapper-container {
padding: 10px; /* Réduire le padding */
}
}


/* Styles pour l'effet parallax */
.parallax-background {
position: fixed; /* Fixe l'élément par rapport à la fenêtre du navigateur */
top: 0;
left: 0;
width: 100%; /* Couvre toute la largeur de l'écran */
height: 100vh; /* Couvre toute la hauteur de la fenêtre (viewport height) */
background-image: url('https://cdn.glitch.global/031d3419-c993-4f7a-9679-a033b3157162/LOGO%20OD.png?v=1723602413524');
background-size: 36% auto; /* Ajuste la taille du logo à 16% de la largeur, hauteur automatique */
background-position: center center; /* Centre l'image de fond */
background-repeat: no-repeat; /* Empêche la répétition de l'image */
background-attachment: fixed; /* Crée l'effet parallax en fixant l'image pendant le défilement */
z-index: -1; /* Place le fond derrière tout le contenu */
opacity: 0.4; /* Rend le fond semi-transparent */
}

/* Conteneur principal pour le contenu */
.main-content {
position: relative; /* Crée un nouveau contexte de pile */
z-index: 1; /* Place le contenu au-dessus du fond parallax */
background: rgba(255, 255, 255, 0.8); /* Fond blanc légèrement transparent */
}

/* Styles pour le conteneur des résultats */
.results-wrapper {
position: relative; /* Crée un nouveau contexte de pile */
z-index: 2; /* Assure que les résultats sont au-dessus du fond et du main-content */
/* Autres styles existants... */
}

/* Ajustements pour la responsivité */
@media (max-width: 768px) {
.parallax-background {
background-size: 25% auto; /* Augmente la taille du logo pour les écrans moyens */
}
.results-wrapper {
margin-top: 30vh; /* Ajuste la marge supérieure pour les écrans moyens */
}
}

@media (max-width: 480px) {
.parallax-background {
background-size: 35% auto; /* Augmente encore la taille du logo pour les petits écrans */
}
.results-wrapper {
margin-top: 25vh; /* Réduit la marge supérieure pour les petits écrans */
}
}

@media (max-width: 375px) {
.parallax-background {
background-size: 45% auto; /* Taille maximale du logo pour les très petits écrans */
}
.results-wrapper {
margin-top: 20vh; /* Réduit davantage la marge supérieure pour les très petits écrans */
}
}


/* Styles pour le conteneur principal de la section Q&A */
.result-row.qa-osteopathy {
position: relative;
display: flex;
align-items: center;
margin-bottom: 30px;
padding: 20px 0;
overflow: visible;
}

/* Style pour le titre "Questions / Réponses" */
.qa-title {
/* Positionnement */
position: absolute; /* Positionne l'élément de manière absolue par rapport à son parent */
left: 5px; /* Décale le titre de 10px depuis la gauche */
top: 50%; /* Place le haut du titre au milieu vertical du conteneur parent */
transform: translateY(-50%); /* Ajuste la position pour centrer parfaitement verticalement */

/* Apparence */
background-color: white; /* Fond blanc pour le titre */
color: #788FFA; /* Couleur du texte en bleu OsteoDispo */
padding: 10px 15px; /* Espace intérieur : 10px en haut/bas, 15px à gauche/droite */
font-size: 16px; /* Taille de la police */
border-radius: 10px; /* Coins arrondis pour un look doux */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */

/* Gestion du texte */
white-space: normal; /* Permet le retour à la ligne du texte si nécessaire */
max-width: 150px; /* Largeur maximale pour éviter le débordement */
text-align: center; /* Centre le texte horizontalement */
line-height: 1.2; /* Espacement entre les lignes pour une meilleure lisibilité */

/* Autres propriétés */
z-index: 2; /* Assure que le titre est au-dessus des autres éléments */
}

/* Conteneur défilant pour les wrappers Q&A */
.qa-osteopathy .scrollable-wrapper-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 20px;
margin-left: 150px; /* Espace pour le titre */
background-color: #f5f5f5;
border-radius: 10px;
-webkit-overflow-scrolling: touch;
}

/* Styles pour chaque wrapper Q&A */
.qa-wrapper {
flex: 0 0 auto;
width: 250px;
min-width: 250px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
scroll-snap-align: start;
cursor: pointer;
}

.qa-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Style pour les images dans les wrappers Q&A */
.qa-wrapper img {
width: 100%; /* L'image prend toute la largeur du conteneur */
height: 140px; /* Hauteur fixe pour maintenir la cohérence */
object-fit: contain; /* Assure que l'image entière est visible sans être coupée */
object-position: center; /* Centre l'image dans son conteneur */
background-color: #f0f0f0; /* Couleur de fond neutre pour les espaces vides */
transition: transform 0.3s ease; /* Animation douce au survol */
}

/* Effet de survol sur l'image */
.qa-wrapper:hover img {
transform: scale(1.05); /* Léger zoom de l'image au survol */
}

/* Ajustements pour les écrans moyens */
@media (max-width: 768px) {
.qa-wrapper img {
height: 130px; /* Réduit légèrement la hauteur pour les tablettes */
}
}

/* Ajustements pour les petits écrans, y compris iPhone 12 mini */
@media (max-width: 375px) {
.qa-wrapper img {
height: 120px; /* Réduit encore la hauteur pour les très petits écrans */
}
}

.qa-wrapper h3 {
font-size: 16px;
margin: 15px 15px 5px;
color: #333;
}

.qa-wrapper p {
font-size: 14px;
margin: 0 15px 15px;
color: #666;
}

/* Styles pour la barre de défilement */
.qa-osteopathy .scrollable-wrapper-container::-webkit-scrollbar {
height: 8px;
}

.qa-osteopathy .scrollable-wrapper-container::-webkit-scrollbar-thumb {
background-color: #788FFA;
border-radius: 4px;
}

.qa-osteopathy .scrollable-wrapper-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 4px;
}

/* Media queries pour la responsivité */
@media (max-width: 1024px) {
.qa-wrapper {
width: 220px;
min-width: 220px;
}
}

@media (max-width: 768px) {
.qa-title {
position: static;
transform: none;
margin-bottom: 15px;
text-align: center;
width: 100%;
}

.qa-osteopathy .scrollable-wrapper-container {
margin-left: 0;
}

.qa-wrapper {
width: 200px;
min-width: 200px;
}
}

@media (max-width: 480px) {
.qa-wrapper {
width: 180px;
min-width: 180px;
}
}



/* Bouton Obtenir son code */

#emailForm button[type="submit"] {
font-size: 0.9em; /* Ajustez cette valeur selon vos besoins */
white-space: nowrap;
text-align: !left;
}



/* Conteneur principal pour la sélection de l'âge du nourrisson */
.age-selector-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 360px; /* Limite la largeur pour correspondre aux boutons d'action */
margin: 10px auto;
padding: 3px;
background-color: #f8f9fa;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style pour la question "Est-ce un nourrisson de moins de 2 ans ?" */
.age-selector-question {
font-size: 0.9em; /* Taille de police réduite */
color: #333;
margin-bottom: 10px;
margin-top: -5px; /* Rapproche la question de l'émoticone */
width: 100%;
text-align: center;
}

/* Conteneur pour les boutons Oui/Non */
.age-selector-options {
display: flex;
justify-content: center;
gap: 10px;
width: 100%;
margin-bottom: 5px;
}

/* Style pour les boutons Oui/Non */
.age-selector-option {
padding: 6px 15px; /* Réduire le padding */
font-size: 0.9em; /* Réduire la taille de la police */
border: 2px solid #788FFA;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
background-color: white;
color: #788FFA;
}

/* Effet au survol des boutons Oui/Non */
.age-selector-option:hover {
background-color: #788FFA;
color: white;
}

/* Style pour le bouton sélectionné */
.age-selector-option.selected {
background-color: #5CFCCC;
color: white;
}

/* Styles pour le sélecteur d'âge des nourrissons */
#infantAgeSelector {
display: none; /* Caché par défaut */
width: 100%;
height: 150px;
overflow-y: auto;
border: 2px solid #788FFA;
border-radius: 10px;
background-color: #f8f8f8;
position: relative;
padding-top: 30px; /* Espace pour l'emoji */
margin-bottom: 15px; /* Ajoute un espace de 15px en bas du conteneur */
}

/* Ajout de l'emoji bébé */
#infantAgeSelector::before {
content: '👶';
font-size: 28px;
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}

/* Styles pour la roulette des bébés */
.baby-roulette {
width: 100%;
}

/* Styles pour chaque option d'âge dans la roulette */
.baby-roulette .age-option {
padding: 10px;
font-size: 14px; /* Taille de police légèrement augmentée */
color: #333;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}

.baby-roulette .age-option:first-child {
margin-top: 2px;
}

.baby-roulette .age-option:hover {
background-color: #e0e0e0;
}

.baby-roulette .age-option.selected {
background-color: #5CFCCC; /* Vert spécifié */
color: white;
}

/* Adaptations pour les petits écrans */
@media (max-width: 380px) {
.age-selector-container {
padding: 10px;
}

.age-selector-question {
font-size: 0.8em; /* Taille de police encore réduite */
}

.age-selector-option {
padding: 6px 15px;
font-size: 0.9em;
}

.baby-roulette {
max-height: 120px;
}

.baby-roulette .age-option {
font-size: 12px; /* Taille de police réduite pour les petits écrans */
}
}









/* Styles pour la section des types de douleurs */
.result-row.pain-types {
margin-top: 20px;
}

.pain-types-title {
margin-bottom: 15px;
}

.scrollable-wrapper-container {
display: flex;
overflow-x: auto;
padding: 10px 0;
scroll-snap-type: x mandatory;
}

.pain-type-wrapper {
flex: 0 0 auto;
width: 200px;
margin-right: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease;
scroll-snap-align: start;
}

.pain-type-wrapper:hover {
transform: translateY(-5px);
}

.pain-type-wrapper img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 5px;
}

.pain-type-wrapper h3 {
margin: 10px 0 5px;
font-size: 16px;
}

.pain-type-wrapper p {
font-size: 14px;
color: #666;
}

/* Styles pour la modal des sous-catégories */
.subcategories-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
max-width: 80%;
max-height: 80%;
overflow-y: auto;
}

.close-btn {
float: right;
font-size: 24px;
cursor: pointer;
}

.modal-content h2 {
margin-top: 0;
}

.modal-content ul {
list-style-type: none;
padding-left: 0;
}

.modal-content li {
margin-bottom: 5px;
}

.modal-content a {
color: #788FFA;
text-decoration: none;
}

.modal-content a:hover {
text-decoration: underline;
}














/* Conteneur principal de la rangée */
.share-results-row {
display: flex; /* Utilise flexbox pour la mise en page */
align-items: stretch; /* Étire les enfants verticalement */
background-color: #ffffff; /* Fond blanc */
border-radius: 10px; /* Coins arrondis */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
margin-bottom: 20px; /* Espace en dessous */
height: 120px; /* Hauteur fixe réduite */
overflow: hidden; /* Cache tout débordement */
}

/* Partie gauche avec le titre */
.share-title-container {
flex: 0 0 30%; /* Prend 30% de la largeur, ne rétrécit pas */
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff; /* Fond blanc */
padding: 0 20px; /* Espacement interne */
}

/* Style du titre */
.share-title {
color: #788FFA; /* Couleur du texte */
font-size: 1.2em; /* Taille de police */
font-weight: bold;
text-align: center;
margin: 0;
}

/* Conteneur des wrappers coulissants */
.scrollable-wrapper-container {
flex: 1; /* Prend le reste de l'espace disponible */
display: flex;
overflow-x: auto; /* Permet le défilement horizontal */
scrollbar-width: none; /* Cache la barre de défilement par défaut sur Firefox */
-ms-overflow-style: none; /* Cache la barre de défilement par défaut sur IE/Edge */
position: relative; /* Pour positionner la barre de défilement personnalisée */
}

/* Cache la barre de défilement par défaut sur WebKit */
.scrollable-wrapper-container::-webkit-scrollbar {
display: none;
}

/* Conteneur interne pour les wrappers */
.wrapper-content {
display: flex;
padding: 10px 0; /* Espacement vertical */
}

/* Style pour chaque wrapper */
.share-wrapper {
flex: 0 0 auto;
width: 100px; /* Largeur fixe */
height: 80px; /* Hauteur fixe */
margin-right: 15px; /* Espace entre les wrappers */
background-color: #FFFFFF; /* Blanc pur */
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
}

.share-wrapper:hover {
transform: translateY(-5px);
}

/* Icône dans le wrapper */
.share-icon {
width: 40px;
height: 40px;
margin-bottom: 5px;
}

/* Texte dans le wrapper */
.share-text {
font-size: 12px;
color: #2C3454;
}

/* Barre de défilement personnalisée */
.custom-scrollbar {
position: absolute;
bottom: 0px; /* Ajusté pour créer un espacement */
left: 0;
right: 0;
height: 4px;
background-color: #e0e0e0;
overflow: hidden;
}

.scrollable-wrapper-container {
position: relative; /* Ajoutez ceci si ce n'est pas déjà le cas */
overflow-x: auto;
scrollbar-width: none; /* Pour Firefox */
-ms-overflow-style: none; /* Pour Internet Explorer et Edge */
}

.custom-scrollbar::after {
content: '';
position: absolute;
height: 100%;
width: 40%; /* Ajustez selon la proportion de contenu visible */
background-color: #788FFA; /* Couleur bleue de la barre */
border-radius: 2px;
left: 0;
transition: left 0.3s ease;
}













/* Styles pour le popup de transfert */
.transfer-popup {
display: none; /* Caché par défaut */
position: fixed; /* Position fixe sur l'écran */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
z-index: 1000; /* Au-dessus des autres éléments */
justify-content: center;
align-items: center;
}

/* Contenu du popup de transfert */
.transfer-popup-content {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 300px; /* Largeur maximale */
width: 90%; /* Largeur responsive */
}

.transfer-popup-content h3 {
margin-bottom: 15px;
color: #333;
}

/* Styles pour l'input et les boutons du popup */
.transfer-popup-content input,
.transfer-popup-content button {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 8px;
border-radius: 4px;
}

.transfer-popup-content input {
border: 1px solid #ddd;
}

/* Style du bouton Transférer */
#sendTransferButton {
background-color: #788FFA; /* Couleur bleue demandée */
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

#sendTransferButton:hover {
background-color: #6070D9; /* Version plus foncée au survol */
}

/* Style du bouton Annuler */
#closeTransferButton {
background-color: #5CFCCC; /* Couleur verte demandée */
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

#closeTransferButton:hover {
background-color: #4AD9AD; /* Version plus foncée au survol */
}







/* Conteneur principal des résultats */
.results-wrapper {
/*margin-bottom: 20px;*/ /* Réduit l'espace en dessous */
padding: 15px; /* Maintient l'espacement interne */
/* Suppression du fond blanc et de l'ombre */
}

/* Ligne de wrappers juxtaposés */
.result-row {
/*display: flex;*/ /* Utilise Flexbox pour aligner les éléments horizontalement */
justify-content: space-between; /* Espace les éléments uniformément */
/*align-items: flex-start;*/ /* Aligne les éléments en haut */
gap: 15px; /* Espace entre les wrappers */
}

/* Style commun pour tous les wrappers de résultats */
.result-card {
/*flex: 1;*/ /* Permet à chaque wrapper de grandir également */
/* Suppression du fond gris */
padding: 15px; /* Maintient l'espacement interne */
border-radius: 6px; /* Garde les coins arrondis */
/* Suppression de l'ombre */
border: 1px solid #e0e0e0; /* Ajoute une bordure légère pour définir les limites */
}



/* Style du texte de la date de soumission */
#submissionDateTimeOD {
font-size: 14px;
font-weight: bold;
margin: 0; /* Supprime les marges par défaut */
}

/* Style pour les éléments d'information générale */
.info-item {
/*display: flex;*/
align-items: center;
margin-bottom: 10px;
}

/* Style des icônes d'information */
.info-icon {
width: 20px;
height: 20px;
margin-right: 10px;
}

/* Style des titres dans les wrappers */
.result-card h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 16px;
/*color: #333;*/
}

/* Style pour le wrapper de source du questionnaire */
.questionnaire-source p {
margin: 5px 0; /* Réduit l'espace vertical entre les paragraphes */
}

/* Style pour les textes en gras */
.questionnaire-source strong {
font-weight: 600;
/*color: #555;*/
}








/* Style du conteneur de l'horloge et de la date */
.submission-time {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #788FFA; /* Couleur bleue spécifiée */
}

/* Style de l'horloge */
.clock {
width: 150px;
height: 150px;
border: 3px solid #788FFA;
border-radius: 50%;
position: relative;
background: white;
}

/* Face de l'horloge */
.clock-face {
position: relative;
width: 100%;
height: 100%;
}

/* Style commun pour toutes les aiguilles */
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: 50% 100%;
/*background: #788FFA;*/ /* Couleur bleue de votre thème */
border-radius: 4px; /* Arrondi légèrement les bords des aiguilles */
background: linear-gradient(to top, #788FFA, #9EACFF);
}

/* Aiguille des heures */
.hour-hand {
width: 4px;
height: 25%; /* Réduit de 35% à 25% */
transform: translateX(-50%);
}

/* Aiguille des minutes */
.minute-hand {
width: 3px;
height: 35%; /* Réduit de 40% à 35% */
transform: translateX(-50%);
}

/* Aiguille des secondes */
.second-hand {
width: 1px; /* Plus fine que les autres */
height: 40%; /* Légèrement plus longue que la minute */
/*background: #FF6B6B;*/ /* Couleur différente, par exemple rouge */
background: linear-gradient(to top, #ADD8D4, #5CFCCC);
transform: translateX(-50%);
}

/* Point central */
.center-dot {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #788FFA;
transform: translate(-50%, -50%);
}

/* Style des chiffres romains */
.roman-numeral {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 14px;
font-weight: bold;
}

.roman-numeral::before {
content: attr(data-number);
position: absolute;
transform: rotate(calc(-1 * var(--rotation)));
}

/* Style de la date */
#submissionDateTime {
font-size: 14px;
font-weight: bold;
text-align: center;
}


.submission-date {
font-size: 1em;
color: #788FFA;
text-align: center;
}


.digital-time {
font-size: 1.5em;
font-weight: bold;
color: #788FFA;
text-align: center;
}










/* Style commun pour les cartes de résultat */
/*.result-card {
/*flex: 1;*/
/*display: flex;*/
/*flex-direction: column;*/
/*justify-content: space-between;*/
/*height: 300px;*/ /* Hauteur fixe pour tous les wrappers */
}/*


















/* Style principal du wrapper de progression */
.progress-wrapper {
/* Utilisation de flexbox pour une disposition flexible */
display: flex;
flex-direction: column;
/* Espacement interne pour le contenu */
padding: 20px;
/* Fond blanc pour une apparence propre */
background-color: #ffffff;
/* Coins arrondis pour un look moderne */
border-radius: 12px;
/* Ombre légère pour donner de la profondeur */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Style du titre */
.progress-wrapper h3 {
/* Couleur de texte principale */
color: #2C3454;
/* Taille de police adaptative */
font-size: 1.2em;
/* Centrage du texte */
text-align: center;
/* Marge en bas pour séparer du contenu suivant */
margin-bottom: 15px;
}

/* Conteneur du graphique de progression */
.progress-chart {
/* Position relative pour le positionnement absolu des enfants */
position: relative;
/* Hauteur adaptative avec un minimum */
min-height: 120px;
/* Marge en bas pour séparer des éléments suivants */
margin-bottom: 20px;
}

/* Style de la courbe SVG */
.progress-curve {
/* Largeur complète */
width: 100%;
/* Hauteur automatique */
height: auto;
}

/* Conteneur des étapes de progression */
.progress-steps {
/* Position absolue par rapport au conteneur parent */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Utilisation de flexbox pour l'alignement */
display: flex;
justify-content: space-between;
align-items: flex-end;
/* Espacement interne */
padding: 0 10px;
}

/* Style individuel de chaque étape */
.step {
/* Disposition en colonne pour l'icône et le texte */
display: flex;
flex-direction: column;
align-items: center;
}

/* Style du cercle contenant l'icône */
.icon-circle {
width: 40px;
height: 40px;
/* Forme circulaire */
border-radius: 50%;
/* Centrage du contenu */
display: flex;
justify-content: center;
align-items: center;
/* Espace sous l'icône */
margin-bottom: 5px;
}

/* Style de l'icône à l'intérieur du cercle */
.icon-circle i {
/* Couleur blanche pour contraster avec le fond */
color: white;
/* Taille de l'icône */
font-size: 20px;
}

/* Style du texte sous chaque étape */
.step span {
/* Taille de police réduite pour le texte descriptif */
font-size: 12px;
/* Couleur de texte secondaire */
color: #2C3454;
}

/* Style du texte de motivation */
.motivation-text {
/* Couleur de texte accentuée */
color: #7F7BED;
/* Style italique pour mettre en évidence */
font-style: italic;
/* Centrage du texte */
text-align: center;
/* Marge en haut pour séparer du graphique */
margin-top: 15px;
}






























/* Style du wrapper de transfert de diagnostic */
.result-card.transfer-diagnosis {
background-color: #ffffff; /* Fond blanc pour une apparence propre */
border-radius: 12px; /* Coins arrondis pour un look moderne */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre légère pour la profondeur */
padding: 20px; /* Espacement interne */
display: flex; /* Utilisation de flexbox pour l'agencement */
flex-direction: column; /* Disposition des éléments en colonne */
align-items: center; /* Centrage horizontal des éléments */
text-align: center; /* Centrage du texte */
}

/* Style de l'icône de transfert */
.transfer-icon {
margin-bottom: 15px; /* Espace sous l'icône */
}

.transfer-icon svg {
width: 60px; /* Largeur de l'icône */
height: 60px; /* Hauteur de l'icône */
}

/* Style du titre */
.transfer-diagnosis h3 {
color: #788FFA; /* Couleur bleue spécifiée */
font-size: 1.2em; /* Taille de police */
margin-bottom: 15px; /* Espace sous le titre */
}

/* Style du conteneur d'input email */
#emailInputContainer {
width: 100%; /* Pleine largeur */
margin-bottom: 15px; /* Espace sous le conteneur */
}

/* Style de l'input email */
#userEmail {
width: 100%; /* Pleine largeur */
padding: 10px; /* Espacement interne */
border: 1px solid #e0e0e0; /* Bordure légère */
border-radius: 6px; /* Coins arrondis */
font-size: 14px; /* Taille de police */
}

/* Style du paragraphe d'email du praticien */
#practitionerEmail {
margin-bottom: 15px; /* Espace sous le paragraphe */
font-size: 14px; /* Taille de police */
}

/* Conteneur des boutons */
.button-container {
display: flex; /* Utilisation de flexbox */
justify-content: space-between; /* Espacement égal entre les boutons */
width: 100%; /* Pleine largeur */
}

/* Style des boutons */
.transfer-diagnosis button {
padding: 10px 15px; /* Espacement interne */
border: none; /* Pas de bordure */
border-radius: 6px; /* Coins arrondis */
background-color: #788FFA; /* Couleur de fond bleue */
color: white; /* Texte blanc */
font-size: 14px; /* Taille de police */
cursor: pointer; /* Curseur pointeur au survol */
transition: background-color 0.3s ease; /* Transition douce pour l'effet de survol */
}

/* Effet de survol sur les boutons */
.transfer-diagnosis button:hover {
background-color: #5A6FD3; /* Couleur plus foncée au survol */
}
















/* Styles pour le wrapper de rappel */
.result-card.request-call {
background-color: #ffffff; /* Fond blanc pour une apparence propre */
border-radius: 12px; /* Coins arrondis pour un look moderne */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre légère pour la profondeur */
padding: 15px; /* Réduction du padding pour diminuer la hauteur */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide au survol */
/*height: 300px;*/ /* Hauteur fixe réduite */
overflow-y: auto; /* Ajout d'un défilement vertical si le contenu dépasse */
}

/* Effet de survol */
.result-card.request-call:hover {
transform: translateY(-3px); /* Léger soulèvement au survol */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée au survol */
}

/* Style du titre */
.result-card.request-call h3 {
color: #788FFA; /* Couleur bleue spécifiée */
font-size: 1.2em; /* Taille de police réduite */
text-align: center;
margin-bottom: 10px; /* Marge inférieure réduite */
}

/* Styles communs pour les conteneurs d'icônes */
.call-icon, .transfer-icon {
display: flex;           /* Utilise Flexbox pour le centrage */
justify-content: center; /* Centre horizontalement */
align-items: center;     /* Centre verticalement */
width: 100%;             /* Prend toute la largeur disponible */
height: 60px;            /* Hauteur fixe pour uniformité */
margin-bottom: 15px;     /* Espace en dessous de l'icône */
}

/* Styles pour les SVG à l'intérieur des conteneurs d'icônes */
.call-icon svg, .transfer-icon svg {
width: 40px;             /* Largeur fixe pour les deux icônes */
height: 40px;            /* Hauteur fixe pour les deux icônes */
fill: #788FFA;           /* Couleur de remplissage bleue */
display: block;          /* Traite l'SVG comme un bloc */
}

/* Styles spécifiques pour l'icône de transfert si nécessaire */
.transfer-icon svg {
/* Vous pouvez ajouter des styles spécifiques ici si besoin */
}

/* Classe utilitaire pour centrer le contenu */
.centered-content {
display: flex;
justify-content: center;
align-items: center;
}

/* Styles pour le formulaire de rappel */
#callbackForm {
display: flex;
flex-direction: column;
align-items: center;
}

/* Styles communs pour les champs de formulaire */
#callbackForm input,
#callbackForm textarea,
#callbackForm select {
width: 100%;
margin-bottom: 10px; /* Marge inférieure réduite */
padding: 8px; /* Padding réduit */
border: 1px solid #e0e0e0;
border-radius: 6px; /* Rayon de bordure légèrement réduit */
font-size: 14px; /* Taille de police réduite */
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Style de focus pour les champs de formulaire */
#callbackForm input:focus,
#callbackForm textarea:focus,
#callbackForm select:focus {
border-color: #788FFA;
box-shadow: 0 0 0 2px rgba(120, 143, 250, 0.2);
outline: none;
}

/* Style spécifique pour la zone de texte */
#callbackForm textarea {
resize: vertical;
min-height: 60px; /* Hauteur minimale réduite */
}

/* Style pour le menu déroulant */
#callbackForm select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23788FFA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
}

/* Styles pour les boutons */
#callbackForm button {
width: 100%;
padding: 10px; /* Padding réduit */
border: none;
border-radius: 6px;
font-size: 14px; /* Taille de police réduite */
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}

/* Style du bouton principal */
#callbackForm button[onclick="requestCallback()"] {
background-color: #788FFA;
color: white;
margin-bottom: 8px; /* Marge inférieure réduite */
}

#callbackForm button[onclick="requestCallback()"]:hover {
background-color: #5A6FD3;
}

/* Style du bouton secondaire */
#callbackForm button[onclick="cancelAction()"] {
background-color: #f0f0f0;
color: #333;
}

#callbackForm button[onclick="cancelAction()"]:hover {
background-color: #e0e0e0;
}

/* Effet de clic sur les boutons */
#callbackForm button:active {
transform: scale(0.98);
}
















/* Style principal du wrapper de rendez-vous visio */
.result-card.request-visio {
font-family: Verdana, sans-serif; /* Police sans-serif pour une meilleure lisibilité */
color: #2C3454; /* Couleur de texte foncée pour un bon contraste */
padding: 15px; /* Padding réduit pour diminuer la hauteur */
background-color: #fff; /* Fond blanc pour un aspect propre */
border-radius: 12px; /* Coins plus arrondis pour un look moderne */
box-shadow: 0 4px 15px rgba(120, 143, 250, 0.1); /* Ombre douce avec une teinte de bleu */
height: 220px; /* Hauteur fixe réduite */
display: flex; /* Utilisation de flexbox pour le centrage */
flex-direction: column; /* Disposition en colonne */
justify-content: space-between; /* Répartition de l'espace verticalement */
}

/* Style du titre */
.request-visio h3 {
color: #788FFA; /* Couleur bleue principale */
font-size: 0.9em; /* Taille de police réduite */
margin-bottom: 5px; /* Marge inférieure réduite */
text-align: center; /* Centrage du titre */
}

/* Style de la description */
.visio-description {
font-size: 0.7em; /* Taille de police réduite */
margin-bottom: 15px; /* Marge inférieure réduite */
color: #7F7BED; /* Couleur secondaire pour le texte descriptif */
text-align: center; /* Centrage de la description */
}

/* Style du conteneur du calendrier */
.visio-calendar {
flex-grow: 1; /* Prend tout l'espace disponible */
display: flex; /* Utilisation de flexbox */
flex-direction: column; /* Disposition en colonne */
justify-content: center; /* Centrage vertical */
align-items: center; /* Centrage horizontal */
border: 1px solid #ADD8D4; /* Bordure légère avec une couleur douce */
border-radius: 8px; /* Coins arrondis */
padding: 5px; /* Espacement interne */
background-color: #F8FFFE; /* Fond très légèrement teinté */
}

/* Style des jours dans le calendrier */
.calendar-day {
display: flex; /* Disposition en ligne pour les créneaux */
justify-content: center; /* Centrage des créneaux */
margin-bottom: 5px; /* Espace entre les jours */
}

/* Style des créneaux horaires */
.time-slot {
padding: 5px 10px; /* Espacement interne des créneaux */
margin: 0 5px; /* Marge horizontale entre les créneaux */
background-color: #5CFCCC; /* Couleur de fond vive pour les créneaux */
color: #2C3454; /* Couleur de texte foncée pour le contraste */
border-radius: 20px; /* Coins très arrondis pour un aspect moderne */
font-size: 0.8em; /* Taille de police réduite */
cursor: pointer; /* Curseur pointeur pour indiquer la cliquabilité */
transition: all 0.3s ease; /* Transition douce pour les effets de survol */
}

.time-slot:hover {
background-color: #788FFA; /* Changement de couleur au survol */
color: white; /* Texte blanc au survol pour le contraste */
transform: scale(1.05); /* Léger agrandissement au survol */
}

/* Style du conteneur des actions */
.visio-actions {
display: flex; /* Disposition en ligne pour les boutons */
justify-content: space-between; /* Espacement entre les boutons */
margin-top: 10px; /* Marge supérieure */
}

/* Style commun des boutons */
.visio-actions button {
padding: 6px 12px; /* Padding réduit */
border: none; /* Pas de bordure */
border-radius: 20px; /* Coins très arrondis */
font-size: 0.9em; /* Taille de police réduite */
cursor: pointer; /* Curseur pointeur */
transition: all 0.3s ease; /* Transition douce */
flex: 1; /* Prend tout l'espace disponible */
margin: 0 5px; /* Marge horizontale entre les boutons */
}

/* Style du bouton principal */
.btn-primary {
background-color: #788FFA; /* Couleur bleue principale */
color: white; /* Texte blanc */
}

.btn-primary:hover {
background-color: #5A6FD3; /* Couleur plus foncée au survol */
transform: translateY(-2px); /* Léger soulèvement au survol */
}

/* Style du bouton secondaire */
.btn-secondary {
background-color: #FFAE9D; /* Couleur de fond douce */
color: #2C3454; /* Couleur de texte foncée */
}

.btn-secondary:hover {
background-color: #DB6A8F; /* Couleur plus foncée au survol */
color: white; /* Texte blanc au survol */
transform: translateY(-2px); /* Léger soulèvement au survol */
}


/* Réduire la taille du titre (Aujourd'hui, la date) */
.fc-toolbar-title {
font-size: 0.9em !important; /* Réduisez cette valeur selon vos besoins */
}

/* Réduire la taille des boutons (Semaine, Jour) */
.fc-button {
font-size: 0.7em !important; /* Réduisez cette valeur selon vos besoins */
padding: 0.2em 0.5em !important; /* Ajustez le padding pour réduire la taille globale */
}

/* Réduire la taille des en-têtes de colonnes */
.fc-col-header-cell-cushion {
font-size: 0.7em !important; /* Réduisez cette valeur selon vos besoins */
}

/* Réduire la taille des numéros de jour dans la vue mois */
.fc-daygrid-day-number {
font-size: 0.7em !important; /* Réduisez cette valeur selon vos besoins */
}

/* Réduire la taille de l'en-tête du calendrier */
.fc-header-toolbar {
margin-bottom: 0.4em !important; /* Réduisez cette valeur pour rapprocher l'en-tête du contenu */
}

/* Ajuster la hauteur des cellules si nécessaire */
.fc-timegrid-slot, .fc-daygrid-day {
height: 0.9em !important; /* Ajustez cette valeur selon vos besoins */
}






















/* Style pour la rangée de résultats avec largeur égale */
.result-row.equal-width {
display: flex; /* Utilise Flexbox pour la mise en page */
justify-content: space-between; /* Espace également les éléments enfants */
align-items: stretch; /* Étire les éléments enfants verticalement */
}

/* Styles communs pour les moitiés gauche et droite */
.left-half, .right-half {
flex: 1; /* Chaque moitié prend une part égale de l'espace disponible */
width: 50%; /* Assure une largeur de 50% pour chaque moitié */
padding: 10px; /* Ajoute un espacement interne */
}

/* Styles pour le wrapper de progression et la carte de type de patient */
.progress-wrapper, .result-card.patient-type {
height: 100%; /* Occupe toute la hauteur disponible */
display: flex; /* Utilise Flexbox pour l'agencement interne */
flex-direction: column; /* Empile les éléments verticalement */
}

/* Style spécifique pour le graphique de progression */
.progress-chart {
flex-grow: 1; /* Permet au graphique de s'étendre pour remplir l'espace disponible */
display: flex;
flex-direction: column;
justify-content: center; /* Centre le contenu verticalement */
}

/* Styles spécifiques pour la carte de type de patient */
.result-card.patient-type {
justify-content: center; /* Centre le contenu verticalement */
align-items: center; /* Centre le contenu horizontalement */
text-align: center; /* Centre le texte */
}

/* Style pour l'image du type de patient */
.patient-type-image {
max-width: 100%; /* Assure que l'image ne dépasse pas la largeur de son conteneur */
height: auto; /* Maintient le ratio d'aspect de l'image */
}





/* Transférer vos résultats */
.share-icon {
width: 40px;
height: 40px;
margin-bottom: 5px;
}

.share-text {
font-size: 12px;
color: #333;
}

#transferWrapper .share-icon {
fill: #788FFA; /* Utilise la couleur bleue spécifiée */
}


/* Caroussel avis défilant */

.review-carousel-container {
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure très légère */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Ombre très subtile */
}








/* Quiz */


/* Style général du wrapper du quiz */
.result-card.health-quiz {
background: linear-gradient(110deg, #ffffff, #f0f4ff);
border-radius: 15px;
box-shadow: 0 10px 20px rgba(120, 143, 250, 0.1);
padding: 12px 25px; /* Espace intérieur (haut/bas, gauche/droite) */
transition: all 0.3s ease; /* Animation douce pour les changements */
display: flex; /* Utilise flexbox pour organiser le contenu verticalement */
flex-direction: column; /* Empile les éléments enfants verticalement */
height: 100%; /* Occupe toute la hauteur disponible */
overflow: hidden; /* Empêche le débordement du contenu */
}

.result-card.health-quiz:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(120, 143, 250, 0.2);
}

/* Titre du quiz */
.result-card.health-quiz h4 {
color: #2C3454;
font-size: 1.5em;
margin-bottom: 20px;
text-align: center;
font-weight: 600;
}

/* Conteneur des questions */
#quiz-container {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Style des questions */
#quiz-container h5 {
color: #788FFA;
font-size: 1.2em;
margin-bottom: 15px;
}

/* Boutons de réponse */
#quiz-container button {
background-color: #ADD8D4;
border: none;
border-radius: 25px;
color: #2C3454;
cursor: pointer;
font-size: 1em;
margin: 5px 0;
padding: 10px 15px;
transition: all 0.3s ease;
width: 100%;
}

#quiz-container button:hover {
background-color: #788FFA;
color: #ffffff;
}

/* Résultats du quiz */
#quiz-results {
background-color: #5CFCCC;
border-radius: 10px;
color: #2C3454;
padding: 20px;
text-align: center;
}

#quiz-results h5 {
color: #2C3454;
font-size: 1.3em;
margin-bottom: 10px;
}

#quiz-score {
font-size: 2em;
font-weight: bold;
color: #788FFA;
}

/* Bouton pour commencer le quiz */
#start-anatomy-quiz {
background-color: #788FFA;
border: none;
border-radius: 25px;
color: #ffffff;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
margin-top: 20px;
padding: 12px 25px;
transition: all 0.3s ease;
}

#start-anatomy-quiz:hover {
background-color: #5A6FD3;
transform: scale(1.05); /* Légère augmentation de taille au survol */
}

/* Animation pour les transitions */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

#quiz-container, #quiz-results {
animation: fadeIn 0.5s ease-out;
}






/* Style pour le conteneur des questions */
/* Conteneur des questions */
#anatomy-quiz-container {
flex-grow: 1; /* Permet au conteneur de grandir pour occuper l'espace disponible */
overflow-y: auto; /* Ajoute une barre de défilement vertical si nécessaire */
margin-top: 15px;
}

/* Style pour les boutons de réponse */
#anatomy-quiz-container button {
background-color: #ADD8D4; /* Vert foncé par défaut */
color: #ffffff; /* Texte blanc */
border: none;
border-radius: 5px;
padding: 10px 15px;
margin: 5px 0;
cursor: pointer;
transition: all 0.3s ease;
display: block; /* Affiche chaque bouton sur une nouvelle ligne */
width: 100%; /* Occupe toute la largeur disponible */
}

/* Style pour les boutons de réponse au survol ou lorsqu'ils sont sélectionnés */
#anatomy-quiz-container button:hover,
#anatomy-quiz-container button:focus {
background-color: #5CFCCC; /* Vert fuchsia lorsque sélectionné */
color: #ffffff; /* Texte blanc */
}

/* Style pour les questions du quiz */
#anatomy-quiz-container h5 {
font-size: 1.2em; /* Augmente la taille de la police */
color: #2C3454; /* Change la couleur du texte en #2C3454 */
margin-bottom: 15px; /* Ajoute un espace en dessous de la question */
font-weight: bold; /* Rend le texte en gras pour plus d'emphase */
}

/* Style pour le conteneur des résultats */
#anatomy-quiz-results {
margin-top: 20px;
text-align: center; /* Centre le contenu */
}

/* Style pour le titre des résultats */
#anatomy-quiz-results h5 {
color: #444;
margin-bottom: 10px;
}

/* Style pour le score */
#anatomy-quiz-score {
font-weight: bold;
color: #788FFA;
}

/* Style pour le message de résultat */
#anatomy-result-message {
margin-top: 10px;
font-style: italic;
color: #666;
}

/* Style pour le bouton "Continuer à jouer" */
#anatomy-quiz-results button {
background-color: #FFAE9D;
border: none;
border-radius: 25px;
color: #ffffff;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
padding: 12px 25px;
transition: all 0.3s ease;
display: block; /* Transforme en élément bloc pour permettre le centrage */
margin: 20px auto; /* Marge en haut/bas et centrage horizontal */
}

/* Effet au survol du bouton "Continuer à jouer" */
#anatomy-quiz-results button:hover {
background-color: #5A6FD3;
transform: scale(1.05);
}


/* Style pour le conteneur des réponses */
.answer-container {
max-height: 300px; /* Ajustez cette valeur selon vos besoins */
overflow-y: auto; /* Ajoute une barre de défilement vertical si nécessaire */
}



/* Calendrier visio */

/* Styles généraux pour les cartes de résultat */
.result-card.visio-presentation,
.result-card.visio-calendar {
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-sizing: border-box;
}

/* Style pour le wrapper de calendrier actif */
.visio-calendar.active {
border: 2px solid #788FFA;
}

/* Style pour le bouton centré */
.center-button {
display: block;
margin: 20px auto;
width: fit-content;
}

/* Styles pour le conteneur du calendrier */
.calendar-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.visio-calendar {
flex-grow: 1;
margin: 0 10px;
}

/* Style pour les boutons de navigation */
.nav-button {
background-color: #788FFA;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}

/* Style pour le label du jour */
.day-label {
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}

/* Conteneur des créneaux horaires */
.time-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
}

/* Style pour chaque créneau horaire */
.time-slot {
background-color: #ADD8D4;
border: none;
border-radius: 4px;
padding: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
text-align: center;
font-size: 0.9em;
}

/* Styles pour le survol et la sélection des créneaux */
.time-slot:hover {
background-color: #5CFCCC;
transform: scale(1.05);
}

.time-slot.selected {
background-color: #5CFCCC;
font-weight: bold;
color: white; /* Texte blanc pour le créneau sélectionné */
}

/* Style pour le bouton "Voir plus" */
.view-more-button {
display: block;
width: 100%;
margin: 10px auto 0;
padding: 8px;
background-color: #788FFA;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.view-more-button:hover {
background-color: #5A6FD3;
}

/* Styles pour les boutons d'action */
.visio-actions {
display: flex;
justify-content: space-between;
margin-top: 20px;
}

/* Styles communs pour les boutons de confirmation et d'annulation */
.btn-confirm,
.btn-cancel {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
flex-basis: 48%;
}

/* Styles spécifiques pour le bouton de confirmation */
.btn-confirm {
background-color: #DB6A8F;
color: white;
}

.btn-confirm:hover {
background-color: #FFAE9D;
}

/* Styles spécifiques pour le bouton d'annulation */
.btn-cancel {
background-color: #53457d;
color: white;
}

.btn-cancel:hover {
background-color: #BD7FF6;
}














/* Style pour la rangée de résultats Osteodispo */
.osteodispo-result-row {
display: flex; /* Utilise le modèle de mise en page flexbox */
justify-content: space-between; /* Répartit l'espace entre les éléments enfants */
}

/* Style pour chaque moitié de carte Osteodispo */
.osteodispo-half-card {
flex: 0 0 48%; /* Ne grandit pas, ne rétrécit pas, occupe 48% de la largeur */
max-width: 48%; /* Limite la largeur maximale à 48% */
display: flex; /* Utilise flexbox pour aligner le contenu verticalement */
flex-direction: column; /* Empile les éléments enfants verticalement */
}

/* Style pour la carte de résultat Osteodispo */
.osteodispo-result-card {
width: 100%; /* Occupe toute la largeur de son conteneur parent */
box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
padding: 0; /* Supprime le padding interne */
margin: 0; /* Supprime les marges externes */
display: flex; /* Utilise flexbox pour aligner le contenu verticalement */
flex-direction: column; /* Empile les éléments enfants verticalement */
height: 100%; /* Occupe toute la hauteur disponible */
}

/* Style pour le conteneur de l'image du blog Osteodispo */
.osteodispo-blog-image-container {
text-align: center; /* Centre horizontalement le contenu (l'image) dans le conteneur */
flex-grow: 1; /* Permet au conteneur de l'image de grandir pour occuper l'espace disponible */
display: flex; /* Utilise flexbox pour centrer l'image verticalement */
align-items: center; /* Centre l'image verticalement */
justify-content: center; /* Centre l'image horizontalement */
}

/* Style pour l'image du blog Osteodispo */
.osteodispo-blog-image {
max-width: 100%; /* Limite la largeur maximale de l'image à celle de son conteneur */
height: auto; /* Maintient le ratio d'aspect de l'image */
max-height: 100%; /* S'assure que l'image ne dépasse pas la hauteur du conteneur */
}

/* Style pour le titre et le paragraphe du blog */
.osteodispo-blog-redirection h4,
.osteodispo-blog-redirection p {
margin: 10px 0; /* Ajuste les marges du titre et du paragraphe */
}

















/* Confettis */

/* Confettis */
#confetti-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: none; /* Caché initialement */
z-index: 9999;
overflow: hidden;
perspective: 1000px; /* Perspective 3D */
}

/* Confettis individuels */
.confetti {
position: absolute;
width: 12px;
height: 12px;
background-color: #f06595;
opacity: 0;
animation: confettiAnimation 12s ease-out infinite, confetti3D 12s infinite;
border-radius: 50%;
}

/* Définir une animation de chute pour chaque confetti */
@keyframes confettiAnimation {
0% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg);
}
25% {
opacity: 0.9;
}
50% {
opacity: 0.6;
}
75% {
opacity: 0.4;
}
100% {
opacity: 0;
transform: translate3d(0, 100vh, 0) rotate(720deg); /* Fait tourner les confettis tout en descendant */
}
}

/* Effet 3D des confettis */
@keyframes confetti3D {
0% {
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
}
50% {
transform: translate3d(0, 0, 50px) rotateX(180deg) rotateY(180deg); /* Rotation 3D au milieu */
}
100% {
transform: translate3d(0, 100vh, 0) rotateX(360deg) rotateY(360deg); /* Rotation complète */
}
}


/* Confettis de différentes couleurs selon la position */
.confetti:nth-child(4n+1) {
background-color: #788FFA; /* Bleu */
}

.confetti:nth-child(4n+2) {
background-color: #2C3454; /* Bleu blouse */
}

.confetti:nth-child(4n+3) {
background-color: #ADD8D4; /* Vert 1 */
}

.confetti:nth-child(4n+4) {
background-color: #FFAE9D; /* Orange */
}

/* Autres couleurs personnalisées */
.confetti:nth-child(5n+1) {
background-color: #DB6A8F; /* Rose */
}

.confetti:nth-child(5n+2) {
background-color: #53457d; /* Violet */
}

.confetti:nth-child(5n+3) {
background-color: #FC9C04; /* Jaune */
}

.confetti:nth-child(5n+4) {
background-color: #f01b35; /* Rouge */
}


/* Animation de lancement des confettis depuis les 4 coins */
@keyframes launchConfettiTopLeft {
0% {
transform: translate3d(-100%, -100%, 0) rotate(0deg);
}
100% {
transform: translate3d(100vw, 100vh, 0) rotate(720deg);
}
}

@keyframes launchConfettiTopRight {
0% {
transform: translate3d(100%, -100%, 0) rotate(0deg);
}
100% {
transform: translate3d(-100vw, 100vh, 0) rotate(720deg);
}
}

@keyframes launchConfettiBottomLeft {
0% {
transform: translate3d(-100%, 100%, 0) rotate(0deg);
}
100% {
transform: translate3d(100vw, -100vh, 0) rotate(720deg);
}
}

@keyframes launchConfettiBottomRight {
0% {
transform: translate3d(100%, 100%, 0) rotate(0deg);
}
100% {
transform: translate3d(-100vw, -100vh, 0) rotate(720deg);
}
}



/* Musique */
.volume-control {
display: flex;
align-items: center;
justify-content: flex-end; /* Aligne le contenu à droite */
margin-left: auto; /* Pousse le contrôle de volume vers la droite */
margin-right: 65px;
margin-top: 15px;
}

#volumeSlider {
width: 55px; /* Réduit la largeur du curseur */
-webkit-appearance: none;
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
}


/* Icones cliquables */
/* Assurer que .container est un repère pour le positionnement */
.container {
    position: relative; /* Permet aux éléments absolus à l'intérieur de s'y référer */
    margin: 0 auto; /* Centre le questionnaire */
}

/* Conteneur des icônes */
.icon-container {
    display: flex;
    /* flex-direction: column; /* Aligner les icônes en colonne */
    position: absolute; /* Maintenant, il se place par rapport à .container */
    left: 48px; /* Ajuste l'alignement à gauche du questionnaire */
    top: 70px; /* Ajuste la hauteur pour être en face des autres éléments */
    gap: 15px; /* Espacement entre les icônes */
}

/* Style des icônes */
.icon-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.icon-container a:hover {
    background-color: #ddd;
}

/* Style des images des icônes */
.icon-container img {
    width: 24px;
    height: 24px;
}

/* === ÉCRAN DE CHARGEMENT OSTEODISPO === */
.od-loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f9faff 100%);
    z-index: 9999;
    transition: opacity 0.6s ease;
  }
  
  /* Logo */
  .od-loading-logo {
    width: 90px;
    height: auto;
    margin-bottom: 25px;
    opacity: 0;
    animation: od-logo-fade 2s ease-in-out forwards;
  }
  
  @keyframes od-logo-fade {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }
  
  /* Spinner principal */
  .od-loading-spinner {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 4px solid rgba(120, 143, 250, 0.15);
    border-top: 4px solid #788FFA;
    border-right: 4px solid #BD7FF6;
    border-bottom: 4px solid #5CFCCC;
    animation: od-spinner-rotate 1.2s linear infinite;
    margin-bottom: 25px;
  }
  
  @keyframes od-spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Texte */
  .od-loading-text {
    font-size: 1.1rem;
    color: #53457d;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 20px;
    animation: od-text-fade 1.5s ease-in-out infinite alternate;
  }
  
  @keyframes od-text-fade {
    from { opacity: 0.5; }
    to { opacity: 1; }
  }
  
  /* Barre de progression */
  .od-progress-bar-container {
    width: 60%;
    max-width: 320px;
    height: 6px;
    background: rgba(189, 127, 246, 0.15);
    border-radius: 4px;
    overflow: hidden;
  }
  
  .od-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #788FFA, #5CFCCC, #BD7FF6);
    background-size: 300% 100%;
    border-radius: 4px;
    animation: od-bar-move 1.5s ease-in-out infinite;
    transition: width 0.4s ease;
  }
  
  @keyframes od-bar-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  
  /* Petit fond signature en dégradé subtil */
  .od-loading-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at top right, rgba(120,143,250,0.08), transparent),
      radial-gradient(circle at bottom left, rgba(189,127,246,0.08), transparent);
    pointer-events: none;
  }

  /* === ÉCRAN DE CHARGEMENT OSTEODISPO (DARK MODE ÉLÉGANT) === */
.od-dark-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #2b2643 0%, #1a162e 100%);
    color: #fff;
    z-index: 9999;
    text-align: center;
    overflow: hidden;
    transition: opacity 0.8s ease;
  }
  
  /* Lueur subtile animée en fond */
  .od-dark-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(120, 143, 250, 0.15), transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(189, 127, 246, 0.15), transparent 70%);
    animation: od-glow-shift 8s ease-in-out infinite alternate;
    pointer-events: none;
  }
  
  @keyframes od-glow-shift {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(1.2); opacity: 0.9; }
  }
  
  /* Logo en entrée douce */
  .od-dark-logo {
    width: 90px;
    margin-bottom: 25px;
    opacity: 0;
    animation: od-dark-logo-fade 1.8s ease-in-out forwards;
  }
  
  @keyframes od-dark-logo-fade {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }
  
  /* Spinner lumineux avec halo */
  .od-dark-spinner {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.08);
    border-top: 3px solid #5CFCCC;
    border-right: 3px solid #788FFA;
    border-bottom: 3px solid #BD7FF6;
    box-shadow: 0 0 15px rgba(93, 255, 204, 0.3);
    animation: od-dark-spin 1.4s linear infinite;
    margin-bottom: 30px;
  }
  
  @keyframes od-dark-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Texte de statut */
  .od-dark-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: #e5e5fa;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(120,143,250,0.3);
    margin-bottom: 25px;
    animation: od-dark-pulse 1.8s ease-in-out infinite alternate;
  }
  
  @keyframes od-dark-pulse {
    from { opacity: 0.6; transform: translateY(0); }
    to { opacity: 1; transform: translateY(-2px); }
  }
  
  /* Barre de progression */
  .od-dark-bar-container {
    width: 65%;
    max-width: 340px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
    box-shadow: 0 0 6px rgba(120,143,250,0.4);
  }
  
  .od-dark-bar {
    width: 0%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #5CFCCC, #788FFA, #BD7FF6, #FFAE9D);
    background-size: 300% 100%;
    animation: od-dark-bar-move 2s linear infinite;
    transition: width 0.4s ease;
  }
  
  @keyframes od-dark-bar-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

  /* === TRANSITION FINALE — FONDU MULTICOLORE OSTEODISPO === */
@keyframes od-dark-fadeout {
    0% {
      opacity: 1;
      backdrop-filter: blur(0px);
    }
    50% {
      opacity: 1;
      backdrop-filter: blur(12px);
      background: radial-gradient(circle at center,
        rgba(120,143,250,0.25),
        rgba(189,127,246,0.25),
        rgba(255,174,157,0.15),
        transparent 80%);
    }
    100% {
      opacity: 0;
      backdrop-filter: blur(0);
    }
  }
  
  .od-dark-screen.fadeout {
    animation: od-dark-fadeout 1.4s ease forwards;
  }
  
  /* Halo lumineux rapide à la validation */
  .od-halo-flash {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: radial-gradient(circle at center,
      rgba(92,252,204,0.25),
      rgba(120,143,250,0.15),
      rgba(189,127,246,0.1),
      transparent 80%);
    animation: od-halo-fade 1.6s ease-out forwards;
  }
  
  @keyframes od-halo-fade {
    0% { opacity: 0; transform: scale(0.9); }
    40% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); }
  }
  
/* -------------------- LOADER SIMPLE OSTEODISPO -------------------- */
.od-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(83, 69, 125, 0.85); /* fond sombre transparent */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: #fff;
    font-family: 'Helvetica', sans-serif;
    text-align: center;
}

.od-loader-logo {
    width: 40%; /* logo réduit à 40% */
    max-width: 180px;
    margin-bottom: 20px;
}

.od-loader-spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #5CFCCC;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: od-spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes od-spin {
    to { transform: rotate(360deg); }
}

.od-loader-text {
    font-size: 1.1rem;
}

/* -------------------------------------------------
   FOOTER MASQUÉ UNIQUEMENT DANS LES RÉSULTATS
-------------------------------------------------- */
.od-footer-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* FOOTER — Alignement parfait picto + texte */
.od-credits {
    display: flex;
    align-items: center;   /* aligne parfaitement au centre vertical */
    gap: 6px;              /* petit espace entre logo et texte */
    font-size: 0.6rem;
}

/* Picto bien centré */
.od-picto {
    width: 20px;
    height: 20px;
    display: block;        /* évite les espaces inline */
}