/* Dimension de base pour les ordinateurs et grands écrans, solution ChatGPT */
:root {
  --base-size: clamp(14px, 2vw, 20px);; /* Taille de base pour les grands écrans */
}

* {
    border: 0px; /* mettre 1 pour rendre la strucure visible durant le développement */
    border-style: dashed;
}

body { 
    /* background-image: url("image/DSC09765.JPG"); /* image de fond */
    background-color: hsl(178, 100%, 90%);
    background-size: 100em; 
    background-blend-mode: screen; /* façon dont l'image de fond et la couleur de fond seront mélangées */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
    font-size: var(--base-size);
    margin: 0;
}

a {
    font-weight: 900; 
    font-size: var(--base-size);
}

a:hover { /* lorsqu'on passe sur un lien avec la souris */
    background-color: pink; 
}

h1 {
    /* font-family: cursive; */
    font-size: calc(var(--base-size) * 2.5);
}

h2 {
    /* font-style: italic;  */
    margin: 0;
    font-size: calc( 1.5 * var(--base-size));
}

p { /* textes à côté des photos */
    font-size: var(--base-size);
    font-weight: 400; /* un peu gras */
    /* background-color: hsl(149, 100%, 95%); */
}

.conteneur-text {
    margin: var(--base-size) var(--base-size) 0  var(--base-size);
}

.conteneur-flex { 
    display: flex;
    gap: 0px; /* espace entre les éléments internes du conteneur */
    align-items: center;
}

.couleur-pair{
    background-color: hsl(48, 100%, 95%);
}

.couleur-impair{
    background-color: hsl(149, 100%, 95%);
}

.largeur-300 { 
    max-width: 500px; /* largeur maximum */
    width: 40vw; /* 'vw' = 40% de la largeur de la fenêtre*/
    height: auto; /* hauteur */
}

.centre{ 
    text-align: center;
}

.encadre{
    border-width: 10px;
    border-style: ridge; /* aspect en relief */
    border-color: rgb(171, 179, 255, .5) ; 
    border-radius: 20px; /* arrondis */
    margin: 2rem;
    padding: 2rem;
}