@charset "utf-8";

/* ----------------------------------------------
Auteur/author : nicodeux
Dernière mise à jour/last update : 01/06/2025
Licence : GNU General Public License v3.0
---------------------------------------------- */

/**************************/
/* Page à propos CSS */
/**************************/

body {
    background-image: url(../images/apropos/bkejfov34j20.svg);
    background-repeat: repeat;
    background-size: 4%;
    background-attachment: fixed;
}

* strong {
    color: inherit !important;
}

* em {
    color: inherit !important;
}

#document *, #footer * {
    color: var(--marron-sombre);
}

#document * a:hover, #footer * a:hover {
    color: var(--rose-sakura);
}

#main-menu, #bouton-retour {
    box-shadow: 0 0 0.4em var(--marron-clair);
}

/* ###############################
    Navigation retour
############################### */

#bouton-retour {
    position: fixed;
    top: 1em;
    /* On positionne l'élément à 6em à droite de la zone centrale qui fait 50em de largeur.
    Le centre de la zone est à 50% de l'écran total, moins 25em pour atteindre la bordure droite,
    plus 6em pour la marge (la même que la marge intérieure du texte).
     */
    right: calc(50% - 19em);
    padding: 0.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 6em;
    background-color: white;
    border: 3px solid var(--marron-sombre);
    border-radius: 1em;
    cursor: pointer;
    scale: 1;
    transition: all 200ms;
}

#bouton-retour:hover {
    scale: 1.05;
}

#bouton-retour span {
    font-size: 0.6em;
    font-weight: bold;
}

#bouton-retour img {
    width: 3em;
}

/* ###############################
    Contenu
############################### */

#defilement {
    box-shadow: 0 0 0.8em dimgrey;
}

#document {
    background-color: white;
    border-radius: 0;
    padding-top: 2em;
}

#document h2 {
    text-shadow: 0 0 2px #660101aa;
    background-image: url(../images/sakura.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    padding-left: 1.8em;
    text-transform: uppercase;
}

#document h3 {
    color: var(--rose-sakura) !important;
    text-shadow: 0 0 2px #fe9c6888;
}

#document hr {
    display: block;
    margin: 1.4em auto;
    width: 70%;
    background-image: url(../images/apropos/sep.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 3em;
}

.side-image {
    color: var(--rose-sakura) !important;
}

#revision {
    position: absolute;
    top: 1.2rem;
    right: 6rem;
    font-size: 0.7em;
    color: var(--rose-sakura);
}

#document * ul {
    list-style-image: url(../images/sakura.svg);
    margin-bottom: 1em;
    margin-left: 1.8em;
}

#document * ul li {
    background: none;
    padding-left: 0.1em;
    padding-bottom: 0.1em;
}

#document * span img {
    border-radius: 0.6em;
    margin-bottom: 0.4em;
}

.index-calend {
    display: inline-block;
    background-image: url(../images/apropos/puce_index.svg);
    background-repeat: no-repeat;
    background-size: 0.6em;
    background-position: 50% 50%;
    width: 1em;
    font-size: 1em;
}

/* #################
    Pied de page
################# */

#logo-n2 a {
    background-image: url(../images/ln2.svg);
}

#texte-pp {
    color: var(--marron-sombre);
}

#texte-pp a:hover {
    color: var(--rose-sakura);
}

.valide {
    border: 1px solid var(--marron-sombre);
}

.valide:hover {
    color: var(--marron-sombre) !important;
    background-color: var(--rose-sakura);
}