:root {
    /* Définition de la majorité des variables esthétiques
        => permet de rapidement modifier la charte graphique du site */
        
    /* Définition des couleurs */
    --main-color: #990033;
    --background-color: white;
    --font-color: black;
    --link-color: var(--font-color);
    --invert-link-color: var(--background-color);
    --color-header-title2: rgb(145, 145, 145);
    --color-header-subtitle: rgb(171, 171, 171);
    --color-header-adresse: rgb(0, 169, 241);
    /* Définition des polices */
    --font-family-main: Arial, Helvetica, sans-serif;
    --font-family-header: 'Times New Roman', Times, serif;
    /* Définition des tailles */
    --page-size: 750px;
}

/* \__/ propriétés générales \__/ */

body {
    background-color: var(--main-color);
    width: var(--page-size);
    margin: 20px auto 0px auto;
    text-align: left;
    color: var(--font-color);
    font-size: 80%;
    font-family: var(--font-family-main);
}

#page-global, .page {
    background-color: var(--background-color);
    padding-top: 10px;
}

.page {
    width: var(--page-size);
    max-width: 100%;
}

.main {
/* retire simplement le padding top */
    padding: 0px 0px 1.5em 0px;}

.content {
    width: 85%;
    padding: 0px 0px 0px 20px;
    margin: 10% 0px 0px 0px;
}

header {
    font-family: var(--font-family-header);
}

footer, .footer {
    padding: 10px 20px 0px 20px;
}

p {
    margin-bottom: 1em;
    line-height: normal;
}

aside {
    justify-content: flex-end;
}

hr {
    color: var(--main-color);
}

li {
    font-weight: bold;
    font-size: 1.1em;
    height: 1.9em;
}

h1, h2, h3, h4, h5, h6, .h {
    font-weight: bold;
}

h2 {
    font-size: 1.17em;
}

/* indiqué dans les articles comme des divs... */
.titre-bordeau {
    text-align: center;
    color: var(--main-color);
    font-weight: bold;
}

a, a:visited, li a, li a:visited {
    color: var(--link-color);
}

li a {
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
}

li a, li a:visited, .menu-lang a {
    text-decoration: none;
}

a:hover {
    color: var(--invert-link-color);
    background-color: var(--link-color);
}

li a:hover {
    color: var(--main-color);
    background-color: var(--background-color);
}

.menu-lang {
    text-align: center;
    padding-top: 50%;
}

.menu-lang a {
    width: 75px;
    display: block;
    margin-bottom: 10px
}

.menu-lang a, .menu-lang a:visited {
    color: var(--color-header-title2);
    background: transparent;
}

.menu-lang a:hover, .menu-lang a.disabled {
    color: var(--background-color);
    background: var(--main-color);
}

/* nécessaire pour effacer la petite flèche que met SPIP derrière tous les liens */
a.spip_out::after {
    content: none;
}

/* nécessaire pour supprimer toutes les marges que SPIP ajoute autour des logos */
aside .spip_logo {
    margin: 0px 0px 0px 0px;
}

/* \__/ propriétés propres au header \__/ */

header hr {
    margin: 10px 0px 0px 0px;}

header div {
    padding-left: 15px;
}

header span {
    padding-left: 45px;
    margin: 0px;
    font-size: 2.2rem;
    color: var(--main-color);
}

header span a, header span a:visited {
    color: var(--main-color);
    text-decoration: none;
}

header span a:hover {
    color: var(--font-color);
    background-color: var(--background-color);
}

header div:last-child {
    justify-content: flex-end;
    /* height: 145px; */
}

header .bg-sky, header .bg-sky-teiffel {
    width: 190px;
    padding: 1.5em 0px 1.5em 15px;
}

header .arrowlist {
    margin: 0px;
}

header li.on a {
    background-color: var(--background-color);
    color: var(--main-color);
}

header img {
    width: 75px;
}

.adresse-header {
    color:var(--color-header-adresse);
    font-weight: 600;
    font-size: 1rem;
    padding-left: 40px;
}

.header-title {
    color: var(--color-header-title2);
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.header-subtitle {
    color: var(--color-header-subtitle);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* \__/ propriétés propres à la nav \__/ */

.nav ul {
    margin: 0px 0px 0px 0px;
    background-image: url("../images/img-barre-menu2.jpg");
    justify-content: space-evenly;
}

.nav li {
    font-size: 1em;
    text-align: center;
}

.nav li.on a {
    background: var(--background-color);
    color: var(--font-color);
    font-weight: bold;
}

.nav li a {
    margin: 0px;
    color: var(--main-color);
    background: none;
}

.nav li a:hover {
    background-color: var(--background-color);
    color: var(--font-color);
}

/* \__/ propriétés propres à l'accueil \__/ */

.accueil.main {
    background-image: url("../images/fond-trait-somm2.jpg");
    padding: 0px 0px 0px 0px;
    /* image de fond n'est pas conçue pour se répéter
    => 414pixels est la hauteur de l'image de fond */
    max-height: 414px;
}

.accueil.main .content {
    padding: 15% 0px 0px 45%;
}

.accueil.main .content li {
    margin-bottom: 10px;
}

/* \__/ propriétés propres à la page d'erreur 404 \__/ */

.page_404 .error {
    text-align: center;
    margin: 2em 25% 2em 25%;
}

/* \__/ propriétés propres au footer \__/ */

footer a, footer a:visited {
    color: var(--link-color);
}

footer a:hover {
    color: var(--main-color);
    background-color: var(--background-color);
}

/* \__/ les classes de mise en forme rapide \__/ */
.arrowlist li::before {
    content: "▶︎";
    color: var(--main-color);
}

.bg-sky {
    background-image: url("../images/img-sky-header.jpg");
}

.bg-sky-teiffel {
    background-image: url("../images/carre-bl-som.jpg");
}

.bg-trait {
    background-image: url("../images/fond-trait-int2.jpg");
    background-repeat: no-repeat;
}

.btn {
    border-radius: 0.4em;
}

.btn-primary {
    background-color: var(--main-color);
    color: var(--background-color);
    padding: 0.5em 1em;
}

.btn-primary:hover {
    background-color: var(--background-color);
    color: var(--main-color);
}

.dflex {
    display: flex;
}

.disabled {
    opacity: 60%;
}

a.disabled:hover {
    cursor: default;
}

.giant {
    font-size: 3em;
    margin-bottom: 10px;
}

.mtop-10 {
    margin-top: 10px;
}

.posfloat-l {
    float: left;
}

.posfloat-r {
    float: right;
}

.take100 {
    width: 100%;
}

.take70 {
    width: 70%;
}

.take60 {
    width: 60%;
}

.take50 {
    width: 50%;
}

.take40 {
    width: 40%;
}

.take30 {
    width: 30%;
}