/* ===============================
   SUPERPOSITION
   =============================== */
.popup {
    display: none;					/* Cache complètement le popup */
    position: fixed;				/* Positionne le popup par rapport à la fenêtre du navigateur (reste visible même si la page est scrollée) */
    inset: 0;						/* Étend l’élément sur tout l’écran */
    background: rgba(0,0,0,0.45);	/* Ajoute un voile sombre semi-transparent à la page derrière le popup */
    justify-content: center;		/* Centre horizontalement le contenu interne */
    align-items: center;			/* Centre verticalement le contenu interne */
    z-index: 1000;					/* Assure que le popup passe au-dessus des autres éléments */
}

/* ===============================
   CONTENEUR PRINCIPAL
   =============================== */
.popup-content {
    position: relative;				/* Point de référence pour les éléments enfants */
    background: #5b83b1;			/* Couleur de fond du popup bleu doux */
    width: 720px;					/* Largeur du popup sur écran desktop */
    max-width: 90%;					/* Adaptation pour les mobiles et petits écrans */
    border-radius: 8px;				/* Coins arrondis */
    padding: 20px 20px 16px;		/* Espacement intérieur (haut, gauche/droite, bas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);	/* Ombre portée */
    color: #ffffff;					/* Couleur du texte blanc */
}

/* ===============================
   CROIX FERMETURE POPUP
   =============================== */
.popup-close {
    position: absolute;				/* Positionnement libre à l’intérieur du popup */
    top: 10px;						/* Décalage depuis le haut du conteneur */
    right: 14px;					/* Décalage depuis la droite du conteneur */
    font-size: 22px;				/* Taille de la croix */
    cursor: pointer;				/* Le curseur affiche une main lorsque celui-ci est sur l'élément */
    opacity: 0.85;					/* Légère transparence lorsque le curseur n'est pas sur la croix */
}

.popup-close:hover {
    opacity: 1;						/* Suppression de la transparance lorsque le curseur est sur la croix */
}

/* ===============================
   CORPS DU POPUP
   =============================== */
.popup-body {
    display: flex;					/* Active le mode Flexbox (permet d'afficher côte à côte le bloc de texte et l'image) */
    gap: 20px;						/* Espace de 20 px entre les texte et l'image */
}

/* ===============================
   TEXTE DES MESSAGES
   =============================== */
.popup-text {
    flex: 1;						/* Le bloc texte occupe tout l’espace disponible */
    font-size: 15px;				/* Taille des caractères */
    line-height: 1.45;				/* Espacement vertical entre les lignes (1,45x taille caractères) */
}

/* ===============================
   MESSAGES
   =============================== */
.popup-message {
    padding: 6px 0;					/* Espacement intérieur (haut/bas, gauche/droite) */
    color: #ffffff;					/* Couleur du texte en blanc */
}

/* ===============================
   SEPARATEUR ENTRE DEUX MESSAGES
   =============================== */
.popup-message + .popup-message {
    border-top: 1px solid rgba(255,255,255,0.25);	/* Ligne de séparation discrète (blanc et 25% d'opacité) */
    margin-top: 10px;				/* Espace extérieur au-dessus */
    padding-top: 10px;				/* Espace intérieur au-dessus */
}

/* ===============================
   FORCER LES BALISES HTML AUTORISÉES
   =============================== */
#info-popup {
    color: #ffffff;					/* Couleur du texte en blanc */
}

#info-popup .popup-message strong {
    font-weight: 700 !important;	/* Police Gras (forcé) */
    color: #ffffff !important;		/* Couleur du texte en blanc (forcé) */
}

#info-popup .popup-message em {
    font-style: italic;				/* Police italique */
    color: #ffffff !important;		/* Couleur du texte en blanc (forcé) */
}

#info-popup .popup-message br {
    display: block;					/* Transforme chaque <br> en élément de type bloc */
    margin-bottom: 6px;				/* Ajoute 6 pixels d’espace après chaque saut de ligne */
}

/* Liens dans le popup */
#info-popup a {
    color: #ffffff;					/* Couleur du texte en blanc */
    text-decoration: underline;		/* Indique clairement que c'est un lien (souligné) */
    font-weight: 600;				/* Léger renfort visuel (gras léger) */
}

/* Survol */
#info-popup a:hover {
    color: #ffec9e;              	/* Couleur du texte en jaune doux, très lisible sur bleu */
    text-decoration: none;			/* Supprime toute décoration appliquée au texte (soulignement, ligne dessus et/ou dessous) */
}

/* Lien visité */
#info-popup a:visited {
    color: #f0f0f0;              	/* Couleur du texte en gris clair */
}

/* ===============================
   IMAGE
   =============================== */
.popup-image {
    width: 160px;					/* Lageur de l'image */
    display: flex;					/* Active le mode Flexbox */
    justify-content: center;		/* Centre horizontalement le contenu interne */
    align-items: center;			/* Centre verticalement le contenu interne */
}

/* ===============================
   IMAGE
   =============================== */
.popup-image img {
    max-width: 140px;				/* Largeur maxi de l'image */
    height: auto;					/* Hauteur calculée automatiquement en fonction de la largeur */
    display: block;					/* Transforme l'image en élément de type bloc */
}

/* ===============================
   BOUTON
   =============================== */
.popup-btn {
    margin-top: 14px;				/* Espace extérieur au-dessus */
    background: #ffffff;			/* Couleur de fond du bouton en blanc */
    color: #345c86;					/* Couleur du texte en bleu-gris foncé */
    border: none;					/* Supprime la bordure du bouton */
    padding: 8px 16px;				/* Espacement intérieur (haut/bas, gauche/droite) */
    border-radius: 4px;				/* Angles arrondis */
    cursor: pointer;				/* Le curseur affiche une main lorsque celui-ci est sur l'élément */
    font-weight: bold;				/* Texte du bouton en gras */
}


.popup-btn:hover {
    background: #e9e9e9;			/* Couleur de fond en gris clair lorsque la souris est sur le bouton */
}