/* -------------------------------------------------
   Conteneur du rendu
   ------------------------------------------------- */
.code-viewer {
	/*Positionne l’élément relativement à sa position normale.
	permet d’utiliser ultérieurement des propriétés comme top,
	left ou de placer des éléments enfants en absolute par rapport à ce conteneur.*/
    position: relative;
    font-family: monospace; /*Définit une police à chasse fixe (ex. Courier, Consolas) adaptée à l’affichage de code*/
    line-height: 1.4; /*Fixe l’interligne à 1,4 fois la taille de la police, rendant le texte plus lisible*/
    overflow-x: auto; /* ajoute une barre de défilement si le code est très long */
    background: #000; /* fond noir */
    color: #F4F8A1; /* Couleur du Texte par défaut - Texte lisible sur fond noir */
    
    margin-bottom: 0.5rem; /* Sépare le bloc du suivant par une marge inférieure de 0.5 rem */
    margin-top: 1rem; /* Sépare le bloc du suivant par une marge supérieure de 0.5 rem */
    padding: 1rem; /* Ajoute un espace intérieur de 1 rem (environ la taille de la police) autour du contenu */
    
   /* Encadrement du Bloc*/
    border-radius: 8px;/* Arrondit les coins du bloc avec un rayon de 8 px. */
    border: 3px solid #00b300;/* bordure épr. 3px de couleur verte (vert #00b300) */
    
    /* Limiter la largeur du bloc à la largeur du contenu */
    display: inline-block;/* le bloc prend la largeur du contenu */
    max-width: 760px;/* (80% possible au lieur de 750px; - évite qu’il déborde de la page 
       
   /* couleur de la barre de défilement et de sa piste */
   scrollbar-color: #9999ff #666666; /* Définit la couleur de la barre de défilement : le curseur en vert (#00b300) et la piste en gris très foncé (#222) */
   
   /* hauteur géréral de la police */
	font-size: 18px 
   }
   
/* -------------------------------------------------
   Styles de coloration (similaires à ceux d’un éditeur)
   ------------------------------------------------- */
.token.tag        { color: #00ccff; }          /* <div> */
.token.attr-name  { color: #ff00ff; }          /* attribut */
.token.attr-value { color: #00ff00; }          /* "valeur" */
.token.comment    { color: #cccccc; font-style: italic; } /* Commentaire */

/*Corrige la hauteur de la ligne supérieure et inférieure à l'intérieur du bloc */
.code-viewer pre {
        margin: 0;
        font-family: Consolas, "Courier New", monospace;
        line-height: 1.4;
    }

/* En bref :
utilisez le CSS pour la mise en forme de l’image,
mais si vous avez besoin de contrôler la taille de la fenêtre qui s’ouvre,
il faut ajouter un petit script JavaScript.
Sans script, le lien s’ouvrira simplement dans une nouvelle fenêtre/onglet
aux dimensions par défaut du navigateur. */   
   a img {
    width: 100%;            /* image s’adapte à la largeur du conteneur */
    max-width: 300px;       /* largeur maximale */
    border-radius: 8px;     /* coins arrondis */
    transition: transform .2s;
}
a img:hover {
    transform: scale(1.05); /* léger agrandissement au survol */
}