@charset "utf-8";

/* AFFICHAGE DES PAGES : FEUILLE DE STYLE */

@media (orientation: landscape) { html { font-size: 1vw }}
@media (orientation: portrait) { html { font-size: 2.5vw }}

/* Polices téléchargées */
@font-face {
font-family: 'Courrier_rg';
src: url('../polices/Courrier/courrier_r.woff2') format('woff2'), url('../polices/Courrier/courrier_r.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap
}

@font-face {
font-family: 'Amble_rg';
src: url('../polices/Amble/amble_r.woff2') format('woff2'), url('../polices/Amble/amble_r.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap
}

/* Corps */
body {
background-color: #706E4A;
font: 1.3rem 'Amble_rg';
text-align: center;
color: #FFF;
letter-spacing: 0.015em;
margin: 0 auto;
overflow: auto
}

* { box-sizing: border-box }

/* Éléments de la structure, images, titres */
@media (orientation: landscape) {
nav, header, footer, main { width: 94.4vw; margin: auto }
img[alt$="(af)"]          { display: none }
h1                        { font-size: 3.44rem }
}
@media (orientation: portrait) {
nav, header, footer, main { width: 95vw; margin: auto }
img[alt$="(a)"]           { display: none }
h1                        { font-size: 2.5rem }
}

/* Titres */
h1                        { text-align: center; font-weight: bold; color: #BDCCA9; line-height: 1; margin: 4.4rem 0 }
h2                        { text-align: center; font-weight: bold; color: #A5CCCB; line-height: 1; margin: 2.2rem 0 }
h3                        { text-align: center; font-weight: bold; color: #F2F2BB; line-height: 1; margin: 2.2rem 0 }

/* Bandeau d'en-tête */
div[id="entete"] { text-align: center }
div[id="entete"] > img { width: 90vw }

/* Absence de JS */
noscript > img                  { position: fixed; top: 0; z-index: 50 }
@media (orientation: landscape) { noscript > img { left: 20vw; width: 60vw; max-width: 60vw }}
@media (orientation: portrait)  { noscript > img { left: 5vw; width: 90vw; max-width: 90vw }}

/* Liens en général */
a                               { text-decoration: none; font-weight: bold }
a:link, a:visited               { color: #66CCFF }         /* (les liens cliqués NE sont PAS marqués) */
a:hover                         { color: #F7FE2E }

/* Boutons de bas de page */
@media (orientation: landscape) { footer div:last-of-type img { width: 3.1rem; margin: 1rem 0.3rem }}
@media (orientation: portrait) { footer div:last-of-type img { width: 4rem; margin: 1rem 0.5rem }}

/* Boutons latéraux (pour haut et bas de page) */
@media (orientation: landscape) {
div.ret_hdp               { position: fixed; right: -3.1vw; top: calc(50vh - 8vw); z-index: 30; transition: .4s ease-in-out }
div.ret_bdp               { position: fixed; left: -3.1vw; top: calc(50vh - 8vw); z-index: 30; transition: .4s ease-in-out }
div.ret_hdp:hover         { position: fixed; right: 0; top: calc(50vh - 8vw); z-index: 30 }
div.ret_bdp:hover         { position: fixed; left: 0; top: calc(50vh - 8vw); z-index: 30 }
a[href="#hdp"] > img      { width: 4vw }
a[href="#bdp"] > img      { width: 4vw; transform: rotate(180deg) }
}
@media (orientation: portrait) { div.ret_hdp, div.ret_hdp, a[href="#hdp"] > img, a[href="#bdp"] > img { display: none }}

/* Alignement */
.gauche   { text-align: left }
.centre   { text-align: center }
.droite   { text-align: right }
.justifie { text-align: justify }

/* Variations du texte */
.s  { text-decoration: underline !important }
.i  { font-style: italic !important }
.g  { font-weight: bold !important }
.ng { font-weight: normal !important }
.ni { font-style: normal !important }
.ns { text-decoration: none !important }
.corps_exp { text-align: center; font-size: 70%; vertical-align: 40%; line-height: 1 }

/* Message d'info en bas de page (optionnel) */
@media (orientation: landscape) {
div#mess { width: 65vw; height: 14vw; left: 17vw }
div#mess > img[alt="Bouton"] { width: 4vw; top: -0.5rem; right: 0 }
div#mess > img[alt^="Actualité"] { border: 0.2vw solid #ADA3A1; border-radius: 1vw }
}
@media (orientation: portrait) {
div#mess { width: 84vw; height: 36vw; left: 8vw }
div#mess > img[alt="Bouton"] { width: 7vw; top: 0; right: 0 }
div#mess > img[alt^="Actualité"] { border: 0.4vw solid #ADA3A1; border-radius: 3vw }
}
div#mess { position: fixed; display: none; z-index: 60; bottom: -250px }
div#mess > img[alt^="Actualité"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 60; box-shadow: 5px 5px 7px #929292 }
div#mess > img[alt="Bouton"] { position: absolute; z-index: 61; cursor: pointer }

/* Ascenseur */
html { scrollbar-width: thin; scrollbar-color: #FFF #1B9F38; overflow-x: hidden }

/* Textes */
div.texte                 { margin: auto; border: solid 0.15rem; border-radius: 1rem }
@media (orientation: landscape) { div.texte { width: 75vw; text-align: justify; padding: 2rem 2.5rem }}
@media (orientation: portrait) { div.texte { width: 90vw; text-align: left; padding: 1.5rem 2rem }}

/* Listes à puce */
div.liste                 { margin: auto; border: solid 0.15rem; border-radius: 1rem }
ol                        { text-align: left }
@media (orientation: landscape) { div.liste { width: 75vw } ol { padding: 1rem 2.5rem }}
@media (orientation: portrait) { div.liste { width: 90vw } ol { padding: 0.5rem 1rem }}
.puce_flr                 { font: normal 1.28rem 'Courrier_rg'; color: #FFF; list-style-type: none; background-image: url('../images/puce_fleche_rouge.webp'); background-repeat: no-repeat; background-position: 0 0.32em; background-size: 1.2rem; padding-left: 1.6rem }
.puce_sep                 { list-style-type: none }

/* Photos */
div.photos                { text-align: center }
div.photos > p            { display: inline-block; vertical-align: top; margin: 1rem; padding: 1rem; border: 0.15rem solid; border-radius: 1rem }
div.photos > p > span     { display: inline-block; font: 1rem 'Courrier_rg' }
@media (orientation: landscape) {
div.photos > p { width: 35vw }
div.photos > p > img { width: 30vw }
div.photos > p > span { text-align: justify }
}
@media (orientation: portrait) {
div.photos > p { width: 85vw }
div.photos > p > img { width: 80vw }
div.photos > p > span { text-align: left }
}

/* Menu simplifié de haut de page (2 boutons) */
@media (orientation: landscape) { nav > p img[alt^="+++"] { width: 28rem; margin: 0.5rem 0.8rem }}
@media (orientation: portrait) { nav > p img[alt^="+++"] { width: 19.5rem; margin: 0.5rem -0.2rem }}

/* Bouton cliquable */
img.bouton                { border: 0.32rem solid #A4A4A4; border-radius: 1.12rem; width: 28rem }
div#deplier_replier img.bouton:hover, a > img.bouton:hover { border-color: #F7FE2E }

/* Bas de page */
footer > div               { margin: 0.8rem 0 }
footer > div:first-of-type { margin-top: 2.16rem }
@media (orientation: landscape) { img[alt="Imprimer"] { border: 0.24rem solid #A4A4A4; border-radius: 0.72rem; width: 8.8rem }}
@media (orientation: portrait) { img[alt="Imprimer"] { border: 0.24rem solid #A4A4A4; border-radius: 1.2rem; width: 12rem }}
@media (orientation: landscape) { img[alt^="Partager sur"] { border: 0.13rem solid #A4A4A4; border-radius: 0.72rem; width: 3rem }}
@media (orientation: portrait) { img[alt^="Partager sur"] { border: 0.17rem solid #A4A4A4; border-radius: 1.2rem; width: 4rem }}
img[alt^="Partager sur"]:hover { border-color: #FFF }




/* Images : */
/* - de 1vw à 38vw : la taille des images est en rem */
/* - de 38vw à 100vw : la taille des images n'est pas en rem pour que l'affichage ne soit pas d'une taille excessive en mode portrait */
/* Pour l'affichage en mode paysage, ça ne change rien puisque la valeur de base est 1 rem ; ainsi, une image de 54 rem est affichée en 54 x 1 = 54vw */
/* Pour l'affichage en mode portrait,la valeur de base est 2,5 rem, donc la limite est : 100/2,5 = 40 ; ainsi, une image de 38 rem est affichée en 95vw */
img            { border: 0; height: auto }
img.im_1180    { width: 94.4vw }
img.im_1170    { width: 93.6vw }
img.im_1100    { width: 88vw }
img.im_1000    { width: 80vw }
img.im_800     { width: 64vw }
img.im_770     { width: 61.6vw }
img.im_740     { width: 59.2vw }
img.im_700     { width: 56vw }
img.im_660     { width: 52.8vw }
img.im_630     { width: 50.4vw }
img.im_610     { width: 48.8vw }
img.im_600     { width: 48vw }
img.im_590     { width: 47.2vw }
img.im_550     { width: 44vw }
img.im_520     { width: 41.6vw }
img.im_500     { width: 40vw }
img.im_495     { width: 39.6vw }
img.im_485     { width: 38.8vw }
img.im_480     { width: 38.4vw }
/* ----- limite rem/vw (38) ----- */
img.im_400     { width: 32rem }
img.im_395     { width: 31.6rem }
img.im_380     { width: 30.4rem }
img.im_365     { width: 29.2rem }
img.im_350     { width: 28rem }
img.im_345     { width: 27.6rem }
img.im_340     { width: 27.2rem }
img.im_320     { width: 25.6rem }
img.im_310     { width: 24.8rem }
img.im_300     { width: 24rem }
img.im_290     { width: 23.2rem }
img.im_285     { width: 22.8rem }
img.im_280     { width: 22.4rem }
img.im_270     { width: 21.6rem }
img.im_265     { width: 21.2rem }
img.im_260     { width: 20.8rem }
img.im_250     { width: 20rem }
img.im_245     { width: 19.6rem }
img.im_240     { width: 19.2rem }
img.im_235     { width: 18.8rem }
img.im_230     { width: 18.4rem }
img.im_225     { width: 18rem }
img.im_210     { width: 16.8rem }
img.im_200     { width: 16rem }
img.im_190     { width: 15.2rem }
img.im_175     { width: 14rem }
img.im_170     { width: 13.6rem }
img.im_150     { width: 12rem }
img.im_145     { width: 11.6rem }
img.im_140     { width: 11.2rem }
img.im_135     { width: 10.8rem }
img.im_130     { width: 10.4rem }
img.im_125     { width: 10rem }
img.im_100     { width: 8rem }
img.im_95      { width: 7.6rem }
img.im_90      { width: 7.2rem }
img.im_65      { width: 5.2rem }
img.im_60      { width: 4.8rem }
img.im_55      { width: 4.4rem }
img.im_50      { width: 4rem }
img.im_40      { width: 3.2rem }
img.im_30      { width: 2.4rem }
img.im_23      { width: 1.84rem }
img.im_20      { width: 1.6rem }
img.im_18      { width: 1.44rem }
img.im_15      { width: 1.2rem }
img.im_13      { width: 1.04rem }
img.tr3        { opacity: 0.3 }
img.t180       { transform: rotate(180deg) }
img.inv        { filter: invert(1) }
img.flottant_g { float: left; margin: 1.2vw 1.6vw 1.2vw 0 }
img.flottant_d { float: right; margin: 1.2vw 0 1.2vw 1.6vw }
img[alt="0"]   { display: none } /* Image en pré-chargement */