/* Couleurs et police de la page principale */
body {
/*Gestion de la couleur dégradé de l'image de fond*/
/*Définit une image de fond située dans le dossier photo/fonds/ et nommée degrade.jpg.
Cette propriété est une version raccourcie qui peut inclure d'autres valeurs comme background-color,
background-position, etc.*/
background: url(photo/fonds/degrade.jpg);
/*Indique que l'image de fond doit être répétée uniquement horizontalement (le long de l'axe X).
L'image se répétera donc de gauche à droite.*/
background-repeat: repeat-x;
/*Fixe l'image de fond par rapport à la fenêtre d'affichage (viewport).
Cela signifie que l'image ne défilera pas avec le contenu de la page :
elle restera statique en arrière-plan.*/
background-attachment: fixed;
/*Comment régler le problème de dézoom tout en gardant l'image de fond ?*/
/*Pour éviter le dézoom de l'image de fond tout en la gardant fixe,
vous devez ajuster la propriété background-size et éventuellement
background-position. Voici comment procéder :*/
background-size: cover; /* ou background-size: 100% auto; */
background-position: center; /* pour centrer l'image */
/* Fond pour "En savoir plus" */
.fond-en-savoir-plus {
background: url(photo/fonds/fond-en-savoir-plus.png);
background-repeat: repeat-x;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
color: #E8ECF1;
font-family: Arial, sans-serif;
padding: 20px;
line-height: 1.6; /*Fixe l’interligne à 1,4 fois la taille de la police, rendant le texte plus lisible*/
margin: 0 auto;
max-width: 800px; /* ou une autre valeur adaptée à votre design */
}
/* Partie haute (Page d'accueil / Home Page) */
.Ligne-En-Tete-1 {
display: flex;
justify-content: space-between;
width: 100%;
padding: 15px 0;
font-size: 12px;
font-style: italic;
align-items: center; /* Centre verticalement */
}
/* Partie basse (copyright, logo, mentions) */
.Ligne-En-Tete-2 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 15px 0;
font-size: 12px;
}
.Ligne-En-Tete-2 div {
text-align: center;
}
/* Dates de création et mise à jour) */
.Ligne-En-Tete-3 {
font-style: italic;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
font-size: 12px;
}
.Ligne-En-Tete-3 div {
text-align: center;
}
.Format-Date{
font-style: italic;
width: 100%;
padding: 10px 0;
font-size: 10px;
}
/* Saut de Ligne standard*/
hr {
margin: 0;
border: 0;
border-top: 1px solid #75A5C6;
}
.ligne-epaisse {
height: 2.5px;
background-color: #75A5C6;
margin: 0px 0;
}
/* Logo centré */
.Centre-Objet{
text-align: center;
}
.Centre-Objet img {
height: 40px;
}
.Bouton-html-css {
display: inline-block;
padding: 8px 18px;
border: 5px solid #666;
border-radius: 6px;
background: #75A5C6;
/*color: #333;*/
text-decoration: none;
filter: brightness(1.33); /* 50 % plus lumineux */
/*font-weight: bold;*/
}
.Bouton-html-css:hover {
background: #CCFFCC;
font-weight: bold;
border: 5px solid #CC0000;
}
.sans-style {
all: revert; /* Réinitialise au style par défaut du navigateur */
}
/* h1 > h2 > h3 > h4 */
h1 {
text-align: center; /* Alignement (left, right, justify) */
line-height: 1.5; /* Espacement entre les lignes */
letter-spacing: 1px; /* Espacement entre les lettres */
word-spacing: 2px; /* Espacement entre les mots */
/*display: inline-block; /* Pour que le border s'adapte à la largeur du texte */
display: block; /* Remplace inline-block par block */
margin: 0 auto; /* Centre le titre si nécessaire */
background: #CCFFCC;
border: 5px solid #75A5C6; /* Épaisseur, style et couleur */
padding: 10px; /* Espace entre le texte et le bord */
width: fit-content; /* Ajuste la largeur au contenu */
margin-top: 20px; /* Valeur marge supérieure */
margin-bottom: 20px; /* Valeur marge inférieure */
/* Coins arrondis */
border-radius: 20px; /* valeur du rayon en pixels (ou em, %) */
}
/*S'applique à tous les titre en */
h2 {
font-size: 1.5em;
text-decoration: underline;
margin-top: 10px; /* Valeur marge supérieure */
margin-bottom: 10px; /* Valeur marge inférieure */
}
h3 {
margin-top: 0px;
margin-bottom: 0px;
}
/*S'applique à tous les titre en */
h4 {
font-style: italic;
color: orange;
font-size: 12px;
}
/*Pour les traduction en anglais dans les pages courantes*/
[lang="en"] {
font-style: italic;
font-size: 15px;
color: #AAB4C3; /* Nom de couleur */
}
}
/* Le même style appliqué à tous les
*/
p {
background-color: transparent;
margin-top: 10px; /* marge supérieure */
margin-bottom: 10px;/* marge inférieure */
line-height: 1.6; /*Fixe l’interligne à 1,4 fois la taille de la police, rendant le texte plus lisible*/
}
.paragraphe-code-html {
background-color: #000;
/* color: #fff;*/
padding: 0.8rem;
border-radius: 4px;
border: 2px solid #00b300; /* épaisseur 2 px, couleur verte */
padding: 0.5rem; /* espace intérieur pour que le texte ne touche pas la bordure */
border-radius: 10px; /* coins légèrement arrondis (optionnel) */
width: 350px; /* largeur du paragraphe */
}
.paragraphe-sous-titre-html {
/*sous-titre*/
margin-top: 10px;
margin-bottom: 10px;
margin-left: 30px;
margin-right: 150px;
font-size: 1em;
}
.paragraphe-en-savoir-plus {
margin-top: 10px; /* marge supérieure */
margin-bottom: 10px;/* marge inférieure */
margin-left: 20px;
line-height: 1.6; /*Fixe l’interligne à 1,4 fois la taille de la police, rendant le texte plus lisible*/
}
.titre-decale{
margin-left: 20px; /* Décale le titre vers la gauche */
}
.encadrement {
/* largeur du cadre (bordure) */
border: 5px solid white; /* 5 px de bordure blanche */
/* coins arrondis */
border-radius: 12px; /* ajustez la valeur selon le rendu souhaité */
/* pour éviter que l’image déborde du cadre */
display: block;
max-width: 100%; /* s’adapte à la largeur du conteneur */
height: auto;
}
/* largeur de base de l’image */
.photo-hover {
width: auto; /* taille initiale */
height: 60px;
transition: width 0.3s ease, opacity 0.3s ease;
}
/* au survol du conteneur */
.photo-link:hover .photo-hover {
height: 65px; /* taille souhaitée au survol */
opacity: 0.9; /* optionnel, pour un effet de transparence */
}
.tabulation {
margin-left: 4em;
}
.saut-1-5em {
height: 1.5em;
}