body { background:#291b44; margin:0; padding:0; }
#top { text-align:center; width:100%; float:left; }
#top a { text-decoration:none; color:#00CDD0; }
#top p { font-family:Courier Prime; margin:20px 0 0; padding:0; font-size:80px; font-weight:800; }
#top h1 { font-family:roboto; font-weight:100; font-size:35px; margin:-10px 0 35px; padding:0; color:white; }
#top span { color:#fb3c6f; }

#search input[type=text] { font-family:roboto; float:left; background:#FFF; color:#000; padding:3px 15px; border:none; border-radius:10px 0px 0px 10px; width:350px; height:40px; font-size:24px; }
#search input[type=submit] { font-family:roboto; float:left; display:block; cursor:pointer; height:46px; width:130px; padding:10px 0px 10px 0px; font-size:24px; border:none; border-radius:0px 10px 10px 0px; background-color:#fb3c6f; color:white; }
#alerte { float:left; width:calc(100% - 15px*2); padding:0; margin:10px 0 0; text-align:center; padding:0 15px; }
#alerte p { margin:0; padding:0; font-style:italic; font-family:roboto; font-size:16px; color:white; }
#info .information { background:#fb3c6f; color:white; border-radius:5px; padding:4px 10px 3px; font-weight:bold; font-size:14px; line-height:18px; margin:20px 5px 0; }
#info p { font-size:14px; line-height:18px; padding:0 15px; width:calc(100% - 15px*2); word-wrap:break-word; }
#info p a { color:#00CDD0; }
#info img { border:1px solid #cdcdcd; }

#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.75); z-index:9999; } /* source du gif animé : https://loading.io/ */
#load { position:absolute; z-index:1; background:#000; width:320px; margin-left:-160px; height:300px; top:calc(50% - 150px); left:50%; text-align:center; line-height:40px; font-family:Courier Prime;font-size:18px;color:#FFF; border-radius:10px; }
#load img { width:180px; }



#page { width:100%; float:left; }
#main { max-width:900px; width:100%; margin:0 auto; /* border-bottom:10px solid #fb3c6f; */ }
#form { border-top:10px solid #fb3c6f; background:#00CDD0; float:left; width:100%; padding:30px 0px 15px; }
#accroche { padding:0px 30px 15px; }
#accroche p { font-family:Courier Prime; word-spacing:-6px; letter-spacing:-1px; font-weight:400; font-size:26px; margin:0; text-align:center; line-height:32px; }
form { margin:0 auto; width:510px; }
#info { background:white; padding:20px 20px; font-family:roboto; float:left; width:calc(100% - 20px*2); }
#container { background:white; float:left; width:100%; padding:10px 0px; font-family:roboto; border-bottom:10px solid #fb3c6f; }
#social { width:calc(100% - 30px*2); padding:0 30px 15px; float:left; }
#tweet { width:92px; float:left; }
#follow { width:177px; float:left; margin:0 0 0 10px; }

#blog { width:100%; float:left; margin: 15px 0 0; padding:0; }
#blog h1 { text-align:center; } 

#fil-ariane { width:calc(100% - 30px*2); float:left; margin:10px 0 -10px; padding:0 30px; }
#fil-ariane p { font-size:14px; line-height:18px; }
#fil-ariane a { color:#00CDD0; }

#container h1 { width:calc(100% - 30px*2); float:left; padding:0 30px; font-family:Courier Prime; margin:20px 0 0; font-size:55px; font-weight:800; line-height:62px; word-spacing:-12px; letter-spacing:-1px; }
#date-article { width:calc(100% - 30px*2); float:left; padding:15px 30px; margin:0; font-size:15px; line-height:28px; font-style:italic; }

#liste-article-blog { float:left; text-align:left; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0; width:100%; }
#liste-article-blog .article-blog { width:calc(50% - 5px*2); margin:0px 0 15px 0px; position:relative; }
#liste-article-blog .article-blog a { cursor:pointer; position:absolute; padding:0; margin:0; top:0; right:0; bottom:0; left:0; z-index:2; width:100%; background:transparent; border:none; }
#liste-article-blog .article-blog h3 { font-family:Courier Prime; margin:0; padding:10px 10px 0; line-height:26px; font-weight:600; font-size:22px; word-spacing:-2px; letter-spacing:-1px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

p.date-article { padding:0 10px; margin:5px 0 0; font-size:14px; line-height:28px; font-style:italic; }
p.intro-article { padding:0 10px; margin:5px 0; font-size:16px; line-height:22px; font-weight:400; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

#article, #paragraphe { width:calc(100% - 30px*2); float:left; padding:0 30px; }
#conteneur-liste { width:calc(100% - 30px*2); float:left; padding:30px 30px 20px; }
#article h2, #paragraphe h2 { font-family:Courier Prime; width:100%; word-spacing:-6px; letter-spacing:-1px; font-weight:bold; font-size:32px; margin:0; margin:25px 0 15px; line-height:38px; float:left; }
#article h3 { float:left; font-family:Courier Prime; font-size:22px; line-height:28px; word-spacing:-4px; letter-spacing:-1px; margin:25px 0 15px; }
#article p, #article ul, #article ol, #paragraphe p, #paragraphe ul, #paragraphe ol { font-family:roboto; font-size:18px; line-height:28px; float:left; margin:0 0px 20px; }
#article a, #paragraphe a { color:#00CDD0; }
#article img, #paragraphe img, #conteneur-liste img { width:100%; margin:0; }

#read-articles { width:100%; margin:0; padding:10px 0 20px; float:left; }
#read-articles p { font-family:Courier Prime; word-spacing:-6px; letter-spacing:-1px; font-weight:bold; font-size:22px; line-height:26px; float:none; margin:0; padding:0; text-align:center; }
#read-articles a { color:#00CDD0; }

#footer { text-align:center; width:100%; float:left; margin:20px 0; }
#footer p { font-family:Courier Prime; word-spacing:-5px; color:white; font-size:20px; }

#contenu404 { width:calc(100% - 30px*2); padding:0 30px; margin:50px 0; float:left; }
#contenu404 p { text-align:center; font-size:25px; line-height:36px; }
#contenu404 a { color:#00CDD0; }

#blog-contact { float:left; padding:12px 20px; background:#000; }
#blog-contact p { font-style:italic; padding:0; margin:0; color:white; }

.blog #container, .article-blog #container { border-top: 10px solid #fb3c6f; }

/* Page contact */

.contact #form_contact { display:block; margin:0 50px; float:left; width:calc( 100% - 100px ); } 
.contact label { display:block; }
.contact input { margin:0 0 15px 0; width:300px; display:block; height:30px; font-size:25px; }
.contact textarea { margin:0 0 15px 0; width:calc(100% - 15px); height:200px; font-size:25px; }
.contact input[type="submit"] { display:block; width:150px; height:40px; font-size:18px; line-height:28px; color:white; background:black; }
.contact ul { margin:0 0 25px 75px; padding:0; }
.contact #container { font-family:roboto; font-size:18px; line-height:28px; border-top: 10px solid #fb3c6f; }
.contact #valide { color:green; font-weight:bold; text-align:center; background:lightgreen; margin:15px 0; padding:15px 0; }
.contact #non_valide { color:red; font-weight:bold; text-align:center; background:lightpink; margin:15px 0; padding:15px 0; }
.contact #titre { font-size:45px; font-weight:bold; text-align:center; font-family:Courier Prime; margin:25px 0 30px; }
.contact .twitter-dm-button { padding:0; margin:0; }
.contact #twitter { float:left; width:calc(100% - 50px*2); margin:0px 50px 25px; }
.contact #message_twitter { padding:0; margin:0; float:left; }
.contact #bouton_twitter { margin:-2px 0 0px 10px; padding:0; float:left; }

.privacy #container { font-family:roboto; font-size:18px; line-height:28px; border-top: 10px solid #fb3c6f; padding:30px; }
.privacy #container #titre { font-size:45px; font-weight:bold; text-align:center; font-family:Courier Prime; margin:25px 0 30px; }
.privacy #container h2 { font-family:Courier Prime; width:100%; word-spacing:-6px; letter-spacing:-1px; font-weight:bold; font-size:32px; margin:0; margin:25px 0 15px; line-height:38px; float:left; }
.privacy #container p, .privacy #container ul { font-family:roboto; font-size:18px; line-height:28px; margin:0 0px 20px; }
.privacy #container a { color:#00CDD0; }

table { width:100%; border-collapse:collapse; margin:20px 0; }
th { font-weight:600; text-align:left; padding:8px 10px; border-top:1px solid #000; border:1px solid #000; background:#bbb; }
td { padding:8px 10px; border:1px solid #000; font-size:18px; line-height:28px; }
td:first-child { font-weight:600; }
tr:nth-child(odd) { background-color:#fff; }
tr:nth-child(even) { background-color:#f0f0f0; }
#article table ul { margin:0; padding:0 0 0 30px; }


@media (max-width:650px) { 

#top p { font-size:44px; margin:10px 0 0; }
#top h1 { font-size:19px; margin:-8px 0 15px; }
#form { padding:15px 0px 15px; }
#accroche p { font-size:18px; line-height:22px; }

form { margin:0 15px; width:auto; }
#search input[type=text] { width:calc(70% - 15px); font-size:18px; height:33px; }
#search input[type=submit] { width:calc(30% - 15px); font-size:18px; height:40px; }
#alerte p { font-size:12px; }

#info { padding:0 10px; width:calc(100% - 10px*2); }
#info img { width:100%; }

#load { width:320px; margin-left:-160px; }

#social { width:calc(100% - 20px*2); padding:15px 20px 0; }

#fil-ariane { width:calc(100% - 20px*2); padding:0 20px; }
#fil-ariane p { line-height:22px; }

#article, #paragraphe { width:calc(100% - 20px*2); padding:0 20px; overflow:hidden; }
#article h1 { font-size:44px; line-height:46px; }
#article h2 { font-size:28px; line-height:32px; }
#article p, #article ul, #article ol { font-size:18px; line-height:28px; }
#article ul, #article ol { padding:0 0 0 30px; }
#article li { margin:0 0 2px 0; }
#article img { margin:0 -25%; width:150%; }

#container h1 { width:calc(100% - 20px*2); padding:0 20px; font-size:42px; line-height:48px; }
#date-article { width:calc(100% - 20px*2); padding:15px 20px; }
#conteneur-liste { width:calc(100% - 20px*2); padding:30px 20px 20px; }
#liste-article-blog .article-blog { width:100%; float:left; margin:0px 0 20px 0px; }

#footer { margin:10px 0; width:calc(100% - 25px*2); padding:0 25px; }
#footer p { margin:15px 0; font-size:18px; line-height:25px; }
#footer a { display:inline-block; }

#contenu404 p { font-size:20px; line-height:30px; }


/* Page contact */

.contact #titre { font-size:38px; margin:18px 0 22px; } 
.contact ul { margin:0 25px 25px 50px; }
.contact #form_contact { margin: 0 20px; width: calc( 100% - 40px ); }
.contact input { width:calc(100% - 8px); }
.contact textarea { width:calc(100% - 8px); }
.contact input[type="submit"] { width:100%; }
.contact #twitter { width:calc(100% - 20px*2); margin:0px 20px 25px; }
.contact #bouton_twitter { margin:5px 0 0px 0px; text-align:center; float:unset; }

.privacy #container #titre { font-size:45px; margin:15px 0 20px; line-height:50px; }
.privacy #container { width:calc(100% - 20px*2); padding:20px; }

}

@media (max-width:350px) { 

#top p { font-size:35px; }
#top h1 { font-size:15px; }
#accroche { padding:0px 15px 15px; }
#accroche p { font-size:16px; line-height:22px; }

}



/* Google Webfonts Helper : https://gwfh.mranftl.com/fonts */

/* courier-prime-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/courier-prime-v9-latin-regular.woff2') format('woff2');
}
/* courier-prime-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/courier-prime-v9-latin-italic.woff2') format('woff2');
}
/* courier-prime-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/courier-prime-v9-latin-700.woff2') format('woff2');
}
/* courier-prime-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/courier-prime-v9-latin-700italic.woff2') format('woff2');
}

/* roboto-100 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2');
}
/* roboto-100italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2');
}
/* roboto-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2');
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2');
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
}
/* roboto-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2');
}
/* roboto-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2');
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2');
}
/* roboto-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2');
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2');
}
/* roboto-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin-900.woff2') format('woff2');
}
/* roboto-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin-900italic.woff2') format('woff2');
}