/*---------------------------------------------
  GLOBALE
  -------------------------------------------*/

/* L'IMPORTATION DES FONTS DOIT ÊTRE EFFECTUÉE AVANT TOUT AJOUT DES RÈGLES DE STYLE */

@font-face {
    font-family: open_sansregular;
    src: url(fonts/open-sans/OpenSans-Regular-webfont.eot);
    src: url(fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/open-sans/OpenSans-Regular-webfont.woff2) format("woff2"), url(fonts/open-sans/OpenSans-Regular-webfont.woff) format("woff"),
        url(fonts/open-sans/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/open-sans/OpenSans-Regular-webfont.svg#open_sansregular) format("svg");
    font-weight: 400;
    font-style: normal;
}


/*---------------------------------------------
  Variable
  -------------------------------------------*/

:root {
    --largeur: 870px;
    --padding-left-principal: 0;
    --padding-right-principal: 0;
    --main-font: "open_sansregular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    --couleur-principal: darkgreen;
    --couleur-secondaire: oldlace;
}


/*---------------------------------------------
  General
  -------------------------------------------*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
}

body {
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: var(--main-font);
    background-color: var(--couleur-secondaire);
}

:focus {
    outline: auto;
}


/*---------------------------------------------
  Class pratiques
  -------------------------------------------*/
  
.cache {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.pasCache {
	height: auto;
	width: auto;
	overflow: visible;
}

.brouillard {
	opacity: 0;
}

.disparu {
	display: none;
}


/*---------------------------------------------
  ARCHITECTURE
  -------------------------------------------*/


/*---------------------------------------------
  Section
  -------------------------------------------*/

body > footer,
body > header {
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: left;
}

header[role="banner"] {
    background-color: var(--couleur-principal);
    color: var(--couleur-secondaire);
}

footer,
header[role="banner"] div#alerte div,
header[role="banner"] div#titre,
main {
    width: var(--largeur);
    margin: 0 auto;
}

header[role="banner"] div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

header[role="banner"] > :not(ol) {
    margin: 0 auto;
}

div#bandeau {
    width: 100%;
    min-height: 200px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    text-align: center;
	background-image: url('image/fond/Blacourt-Vue_ensemble.jpg');
}

main {
    padding: 50px 0;
    display: flex;
    flex-flow: column;
}

section {
    margin-bottom: 30px;
}

.section {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

footer.section,
main.section {
    flex-direction: row;
}

footer {
    border-top: 5px solid var(--couleur-principal);
    padding: 30px 0;
}

footer div:first-child {
    order: 2;
}

footer div:nth-child(2) {
    order: 1;
}

header[role="banner"] h1 {
    padding: 10px;
    text-align: left;
    background-image: url(image/logo/Blacourt-Logo.png);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 74px;
    background-size: 65px;
    font-size: xxx-large;
    color: #fff;
    text-transform: uppercase;
}

.section > header {
    width: 100%;
}

header.titre-section {
    margin-bottom: 40px;
}

header.h4,
header.h5 {
    margin-bottom: 20px;
}

article {
    margin-bottom: 60px;
}

article::after {
    content: "";
    display: block;
    margin: 0 auto;
    padding-top: 30px;
    width: 95%;
    border-bottom: 1px solid var(--couleur-principal);
    opacity: 0.3;
}

.section > :not(header) {
    width: 48%;
}


/*------------------------------
	Alerte
	------------------------------*/

div#alerte {
    width: 100%;
}

div#alerte div {
    padding: 1em 0 calc(1em - 8px) 0;
    align-items: center;
}

div#alerte div p.message {
    font-size: x-large;
}

div#alerte div p[class*="message"] {
    padding-right: 10px;
}

.dashicons-warning::before {
    content: "\f534";
    font-family: dashicons;
    margin-right: 10px;
    vertical-align: middle;
    font-size: xx-large;
}

div#alerte div p {
    margin: 0 0 8px 0;
}

/* Bleu */
div#alerte.bleu {
  background-color: blue;
  color: white;
}

div#alerte.bleu a.rectangle {
  border-color: white;
}

div#alerte.bleu a.rectangle:hover,
div#alerte.bleu a.rectangle:focus {
  background-color: white;
  color: blue;
}


/*-----------------------------------------------------------------
	Anchors
	-----------------------------------------------------------------*/
	
a {
    text-decoration: underline;
    color: var(--couleur-principal);
}

a {
    transition: all 0.2s ease;
}

a:focus,
a:hover {
    text-decoration: none;
    color: inherit;
}

header[role="banner"] a {
    color: #fff;
}

header[role="banner"] h1 a {
    text-decoration: none;
}

h1 a,
h2 a,
h3 a {
    color: #000;
}

a[class*="fa"]::before {
    font-family: "Font Awesome 5 Free";
    font-size: xx-large;
}

a[class*="dashicons"]::before {
    font-family: dashicons;
    font-size: xxx-large;
}

a[class*="dashicons"]::before,
a[class*="fa"]::before {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: var(--couleur-principal);
    opacity: 0.5;
}

a[class*="dashicons"]:hover::before,
a[class*="fa"]:hover::before {
    color: #fff;
}


/*---------------------------------------------
  Titre
  -------------------------------------------*/
  
h3 {
    font-size: x-large;
}

h4,
h5 {
    font-size: larger;
}

article h1,
article h2,
article h3,
article h4,
article h5 {
    margin-bottom: 10px;
}

header.h2 {
    text-transform: uppercase;
    margin: 0 0 40px 0;
    color: var(--couleur-principal);
}

header.dashicons-warning {
    padding-left: 40px;
    position: relative;
}

header.dashicons-warning::before {
    position: absolute;
    left: 0;
}

header.dashicons-warning.bleu::before {
    color: #00f;
}

header.h3 {
    margin-bottom: 30px;
}

header.h4 h4,
header.h5 h5,
header.titre-section h4 {
    border-bottom: solid 1px var(--couleur-principal);
    width: max-content;
}

header.titre-section h4 {
    width: unset;
    font-size: x-large;
}


/*-----------------------------------
	Texte
	-----------------------------------*/

p {
    margin-bottom: 1.3em;
    line-height: 1.5em;
}

header p {
    margin-bottom: unset;
}


/*-----------------------------------
	Liste
	-----------------------------------*/

ul li {
    margin: 0 0 10px 40px;
}

ul.sansrien li {
    margin: 0;
    list-style-type: none;
}


/*-----------------------------------
	Description list
	-----------------------------------*/
	
dl {
    margin-bottom: 1.5em;
}

dd,
dt {
    padding: 5px 0;
}

dt {
    border-bottom: 1px solid var(--couleur-principal);
    font-weight: 700;
    margin-right: 10px;
    width: fit-content;
    width: -moz-fit-content;
}

dt::after {
    content: " :";
}

dd {
    margin-left: 5px;
}


/*-----------------------------------
	Iframe
	-----------------------------------*/
	
iframe {
    width: 100%;
}

iframe small {
    display: block;
}


/*-----------------------------------------------------------------
	BOUTON
	-----------------------------------------------------------------*/

[class^="btn"] {
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
}