/**   
/* Feuille de style principale globale (excluant les médias queries)
/* Mise à jour : 20 décembre 2024 
**/

/* ===================================== */
/* FONT FACE
/* Outil conversion police ttf :
/* https://cloudconvert.com/ttf-to-woff
/*
/* Open Sans téléchargé ici :
/* https://font.download/font/open-sans
/* ===================================== */

/* Police Open Sans Regular */
@font-face {
font-family:OpenSans;
src:url(../fonts/OpenSans-Regular.eot?#iefix) format("embedded-opentype"),
url(../fonts/OpenSans-Regular.woff) format("woff"),
url(../fonts/OpenSans-Regular.woff2) format("woff2"),
url(../fonts/OpenSans-Regular.ttf) format("truetype")
}

/* Police Open Sans condensée Bold */
@font-face {
font-family:OpenSans-Condensed;
src:url(../fonts/OpenSansCondensed-Bold.eot?#iefix) format("embedded-opentype"),
url(../fonts/OpenSansCondensed-Bold.woff) format("woff"),
url(../fonts/OpenSansCondensed-Bold.woff2) format("woff2"),
url(../fonts/OpenSansCondensed-Bold.ttf) format("truetype")
}

/* Police Open Sans condensée Light */
@font-face {
font-family:OpenSans-CondensedL;
src:url(../fonts/OpenSansCondensed-Light.eot?#iefix) format("embedded-opentype"),
url(../fonts/OpenSansCondensed-Light.woff) format("woff"),
url(../fonts/OpenSansCondensed-Light.woff2) format("woff2"),
url(../fonts/OpenSansCondensed-Light.ttf) format("truetype")
}

/* FONT FACE - ICONES BOUTONS PARTAGE RÉSEAUX SOCIAUX ET SCROLL TO TOP
/* Créé par Icomoon (pack moins gros que Font Awesome, mais utilise cette police)
/* https://icomoon.io / MAJ 2024-11-13 */
@font-face {
font-display:block;
font-family:'icomoon';
font-style:normal;
font-weight:normal;
src:  url('../fonts/icomoon.eot?gz416k');
src:  url('../fonts/icomoon.eot?gz416k#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?gz416k') format('truetype'),
url('../fonts/icomoon.woff?gz416k') format('woff'),
url('../fonts/icomoon.svg?gz416k#icomoon') format('svg');
}

[class^="icon"],[class*=" icon"],i {
/* use !important to prevent issues with browser extensions that change fonts */
font-family:'icomoon'!important;
/* || Better Font Rendering */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-style:normal;
font-variant:normal;
font-weight:400;
line-height:1;
speak:none;
text-transform:none
}

#slb_viewer_wrap .slb_theme_slb_default .slb_container {
box-shadow:none!important;
border-radius:20px!important
}

#slb_viewer_wrap .slb_theme_slb_black .slb_container {
background-color:#212121!important
}

.iconMail:before { content:"\f003" }
.iconBluesky:before { content:"\e903" }
.iconXTwitter:before { content:"\e902" }
.iconMessenger:before { content:"\e901" }
.iconFacebook:before { content:"\f09a" }
.iconRSS:before { content:"\f09e" }
.iconLinkedin:before { content:"\f0e1" }
.iconYoutube:before { content:"\f167" }
.iconMastodon:before { content:"\e900" }
.iconBookmarks:before { content:"\e905" }
.iconArchives:before { content:"\e953" }
.iconCat:before { content:"\e90b" }
.iconAstuces:before { content:"\e90c" }
.iconDivertissement:before { content:"\e909" }
.iconInformatique:before { content:"\e957" }
.iconInternet:before { content:"\e9c9" }
.iconMobilite:before { content:"\e958" }
.iconOpinions:before { content:"\e978" }
.iconTechno:before { content:"\e90d" }
.iconContact:before { content:"\e904" }
.iconAboutMe:before { content:"\e90e" }
.iconPrivacy:before { content:"\e910" }
.iconPodcasts:before { content:"\e91c" }
.iconExplore:before { content:"\e907" }
.iconTags:before { content:"\e906" }
.iconComments:before { content:"\e96c" }
.iconPings:before { content:"\e90a" }
.iconThemeMode:before { content:var(--theme-icon) }

/* || Icône utilisée pour légende copyright image à la Une */
.iconCamera:before {
content:"\e90f";
font-size:16px;
margin-right:8px
}

/* || Utilisée pour icône « scroll to top » */
.iconArrowUpCircle:before {
content:"\f0aa"
}

/* =================== */
/*	CSS RESET		
/* =================== */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline
}

/* ================================================== */
/*	THEME DU SITE (LIGHT OU DARK)		
/* ================================================== */

/* || Cette section permet d'appliquer le dark mode sur le site. Mis en place en 2024-11.
/* || Un script jQuery applique un attribut à <html> et applique les couleurs selon le mode */

:root {
--theme-icon:"\e9d4";
--arrow-back-top:#555;
--hn-color:#444;
--hn-h4-color:#555;
--hn-link-hover:#000;
--container-color: #efefef;
--text-color: #333;
--link-color: #3980b7;
--link-color-hover: #306d9c;
--menu-bg-color:#171717;
--menu-border:#333;
--menu-canva-open:70%;
--menu-shadow:#000000bf;
--header-bg-image:url(../images/header-background.jpg) repeat-x;
--newsblock-bg: #fff;
--newsblock-img-border-color:#eee;
/*--blocks-box-shadow:0 3px 8px 0 #0001011a;*/
--blocks-box-shadow:2px 3px 10px 2px rgba(0,0,0,.1); /* Shadow plus large */
--blocks-box-border-color:#ccc;
--post-intro: #000;
--post-caption-border:#dcdcdc;
--post-caption-color:#303030;
--post-caption-bg:#f3f3f3;
--comment-block-bg:#fdfeffcc;
--comment-block-border:#b0beeccc;
/*--form-bg:#faf9f8;*/
--form-bg:#f5f2f0;
--form-border-color:#cbbfb4;
--form-field-bg:#fff;
--form-field-border-color:#ccc;
--form-field-shadow-color:#eee;
--form-field-focus-border:#ab9887;
--form-field-focus-color:#696863;
--form-msg-color:#222a28;
--form-policy-color:#777;
--iconAjaxLoader:url(../images/icon-loader-lightmode.gif);
--podcast-block-bg:#fff;
--podcast-block-shadow:0 0 1px 0 #00000080, 0 1px 10px 0 #0000001a;
}

:root.darkMode {
--theme-icon:"\e908";
--arrow-back-top:#bbb;
--hn-color:#eee;
--hn-h4-color:#e6e6e6;
--hn-link-hover:#fff;
/*--container-color:#181818;*/
--container-color: #1c1c1c;
--text-color: #ebebeb;
--link-color: #6eb3e8;
--link-color-hover: #91c5ee;
--menu-bg-color:#272727;
--menu-border:#404040;
--menu-canva-open:75%;
--menu-shadow:#000000bf;
--header-bg-image:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),url(../images/header-background.jpg) repeat-x;
/*--newsblock-bg: #292929;*/
--newsblock-bg:#2e2e2e;
--newsblock-img-border-color:#181818;
/*--blocks-box-shadow:0 3px 8px 0 #01010154;*/
--blocks-box-shadow:2px 3px 10px 2px rgba(0,0,0,.4); /* Shadow plus large */
--blocks-box-border-color:#474747; /* Les border color des boîtes ont un lightness 10 de plus que le background */
--post-intro: #f5f5f5;
--post-caption-border:#555;
--post-caption-color:#bdbdbd;
--post-caption-bg:#181818;
--comment-block-bg:#1e2a34;
--comment-block-border:#304454;
--form-bg:#3f3831;
--form-border-color:#5c5247;
--form-field-bg:#120f0d;
--form-field-border-color:#4a3e36;
--form-field-shadow-color:#282828;
--form-field-focus-border:#030202;
--form-field-focus-color:#c1c1bd;
--form-msg-color:#dbe2e0;
--form-policy-color:#aaa;
--iconAjaxLoader:url(../images/icon-loader-darkmode.gif);
--podcast-block-bg:#181818;
--podcast-block-shadow:0 0 1px 0 #000000e8, 0 1px 10px 0 #000000d6;
}


/* ========================== */
/*
/*	MISE EN FORME GÉNÉRALE	
/*
/* ========================== */

/* || Utilisé notamment dans les articles */
.clearBoth {
clear:both
}

html {
background-color: var(--container-color);
/* Effet « smooth » quand on scroll (lien vers commentaires) */
/*scroll-behavior: smooth;*/
/* || Fix Top bar qui bouge quand on scroll sur IE 11 */
height:100%
}

body {
background-color: var(--container-color);
font-family:'OpenSans',sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1;
margin:0 auto!important;
overflow-y:scroll!important;
/* || Cache le focus bleu sur Chrome Android, attention : contre accessibilité
https://groups.google.com/forum/#!topic/phonegap/OmmCuTotZI4*/
-webkit-tap-highlight-color:#fff0
}

/* || Classe qui freeze le body quand on ouvre le menu ou la recherche */
.lockhtml {
overflow:hidden;
width:100px %
}

#container {
background: var(--container-color);
/* || Supprime scrollbar horizontale si contenu déborde la largeur */
overflow:hidden;
position:relative
}

a,a strong {
border-bottom:1px solid #4fa3e3;
border-radius:3px;
color:var(--link-color);
text-decoration:none
}

a:hover, a strong:hover {
border-bottom:1px solid #8ab8db;
color:var(--link-color-hover)
}

/* || Reset du formatage de lien, supprime le soulignement / Sidebar */
.linkReset {
border:0!important
}

a[name] {
display:inline-block;
/* required for webkit browsers */
margin-top:-60px;
padding-top:60px
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}

.postIntro {
color:var(--post-intro)!important;
font-size:19px!important;
margin-bottom:25px!important
}

ol,ul {
list-style:none
}

blockquote,q,pre,code {
quotes:none
}

blockquote:before,blockquote:after,pre:before,pre:after,q:before,q:after,code:before,code:after {
content:'';
content:none
}

pre,code {
/* https://perishablepress.com/perfect-pre-tags/ */
white-space:pre-wrap;
/* CSS3 browsers  */
white-space:-moz-pre-wrap!important;
/* 1999+ Mozilla  */
white-space:-pre-wrap;
/* Opera 4 thru 6 */
white-space:-o-pre-wrap;
/* Opera 7 and up */
word-wrap:break-word
/* IE 5.5+ and up */
/* width: 99%; */
/* only if needed */
}

table {
border-collapse:collapse;
border-spacing:0
}

em {
font-style:italic
}

strong {
font-weight:700
}

/* || Ligne séparatrice */
hr {
border:3px solid #d9e6f266;
border-radius:5px;
display:block;
width:100%
}

.aligncenter,div.aligncenter {
display:block;
margin:5px auto
}

.alignright {
float:right;
margin:5px 0 20px 20px
}

.alignleft {
float:left;
margin:5px 20px 20px 0
}

/* || Text meant only for screen readers.
https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
*/
.screen-reader-text {
border:0;
clip:rect(1px,1px,1px,1px);
clip-path:inset(50%);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
word-wrap:normal!important
}

/* SCOLLBARS CUSTOM
/* Modifie l'apparence des scrollbar
/* notamment dans le Menu
/* Créé avec : https://codepen.io/stephenpaton-tech/full/JjRvGmY
/* ============================================================== */
/* || IE 11 Support */
/* || Firefox */
* {
scrollbar-width:10px;
scrollbar-color:#404040 #171717
}

/* || Chrome, Edge, and Safari */
::-webkit-scrollbar {
width:10px
}

::-webkit-scrollbar-track {
background:#171717;
opacity:.1
}

::-webkit-scrollbar-thumb {
background-color:#404040;
border-radius:20px;
border:1px solid #000
}

/*
/* TITRES (PAGES ET AUTRES)
/* ============================ */
h1,h2,h3,.sidebarHn,.contentHn,.commentFormHn,.newsOverviewBig a span {
font-family:'OpenSans-CondensedL',sans-serif!important
}

h1,.newsOverviewBig a span {
color: var(--hn-color)!important;
font-size:27px;
font-weight:700;
line-height:1.2em;
margin-bottom:25px;
width:98%
}

h2,h3 {
color: var(--hn-color) !important;
display: block;
font-weight: 700 !important;
font-size: 23px !important;
line-height: 1.3em;
margin: 40px 0 20px !important;
}

h4:hover,.newsOverviewSidebar span:hover {
border:0;
color:var(--hn-link-hover)!important
}

h2 {
/*text-transform: uppercase;*/
font-size:26px!important
}

h2 a,h3 a {
color:#3980b7
}

h4, .newsOverviewSidebar span {
color: var(--hn-h4-color)!important;
line-height: 1.4em;	
}

.sidebarHn,.contentHn,.commentFormHn {
color:var(--hn-h4-color);
display:inline-flex;
font-family: 'OpenSans-Condensed', sans-serif !important;
font-size:20px;
position:relative;
text-transform:uppercase
}

.sidebarHn i,.contentHn i,.commentFormHn i {
margin-right:12px
}

.sidebarHn,.contentHn {
font-size: 25px !important;
margin-bottom:12px;
padding: 12px 5px;
}


.commentFormHn {
margin:10px 0 15px
}

/* 
/* FIX VIDÉOS ET ÉLÉMENTS EMBED À LA LARGEUR DE LEUR CONTENEUR		
/* ================================================================= */
embed,iframe,object {
max-width:100%
}

/* =========================== */
/*
/*	MISE EN FORME PRINCIPALE
/*		
/* =========================== */


/* =========================================== */
/* HEADER INCLUANT TOPBAR FIXE ET BOTTOM BAR   */
/* =========================================== */

/* || Contenur principal du header
/* Astuce background : https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements
/* *******************************/
header {
background:var(--header-bg-image);
background-size:auto 200px;
height:115px;
position:relative;
width:100%
}

/* || Conteneur pour Topbar et Menu
    /***********************************/
#top,#menuSearchContainer {
margin:auto;
max-width:1094px;
position:relative;
transition:width .5s;
width:calc(100% - 40px)
}

/* || Topbar fixe 
/******************/
#headerTopBar {
background-color:#121212f5;
box-shadow:0 3px 12px 0 #000000bf;
height:60px;
left:0;
position:fixed;
right:0;
top:0;
text-transform:uppercase;
z-index:1000
}

#headerTopBar a {
border:0;
color:#17171c
}

#headerTopBar * {
transition:all .5s
}

.headerMenuText {
color:#5d5d5d;
cursor:default;
float:right;
font-size:20px;
margin-left:2px;
position:relative
}

.topBarWrapper {
height:100%;
margin:auto;
max-width:1104px;
padding:0;
position:relative;
width:calc(100% - 25px)
}

#headerLogo {
height:18px;
margin-left:12px;
opacity:.8
}

#headerLogo svg {
height:20px;
}

#headerLogo a {
/*color: #a1a1a1;*/
color:#73859d!important;
font-family:'OpenSans-Condensed',sans-serif;
font-size:22px;
position:relative
}

#headerLogo a:hover {
/*text-shadow: 1px 3px 12px rgba(202, 202, 202, 0.5);*/
color:#a1a1a1!important
}

/* || Container top bar et boutons MS partage article
/* *********************************************************************/
#headerTopBarRight,#postShareMS {
align-items:center;
display:flex;
height:60px;
position:relative
}

#headerTopBarRight {
float:right
}

.btnMsFacebook { background:#3b5998 }
.btnMsMessenger { background:#00B2FF }
.btnMsXTwitter { background:#484848 }
.btnMsLinkedin { background:#007bb6 }
.btnMsMastodon { background:#5b87d2 }
.btnMsBluesky { background:#0085FF }
.btnMsRss { background:#f60 }
.btnMsYoutube { background:red }
.btnMsEmail { background:#ba9877 }

#topbarNewsletter {
all:unset;
align-items:center;
background:#484848;
border:2px solid #000!important;
border-radius:25px;
color:#fff!important;
cursor:pointer;
display:flex;
height:32px;
opacity:.8;
padding:2px 15px;
text-transform:uppercase
}

#topbarNewsletter:hover {
opacity:1
}

#topbarNewsletter i, #menuNewsLetter i {
font-size:20px;
margin-right:10px
}

/* || Icône soleil ou lune pour le thème du site (dark mode)	
/* ***********************************************************/

.themeModeIcon {
align-items: center;
color:#fff;
cursor:pointer;
display: flex;
font-size:32px;
margin-left:15px;
opacity:.6;
width:32px
}

/* || La barre du bas dans le background du header
/* ************************************************/
#topBottomBar {
background-color:#fff6;
box-shadow:0 2px 2px 0 #eaeaea80;
display:block;
height:22px;
position:absolute;
top:92px;
width:100%
}

/* MENU (inspiré de TemplateMonster)                     */
/* https://www.templatemonster.com/blog/build-navigation-menu-css-jquery/    */
/* ========================================================================= */

/* || Bouton du menu dans TopBar
/*******************************/

/* || Container du bouton pour position dans topbar, mêmes styles que le titre Dominic.tech */
#menuButtonContainer, #headerGoHome {
align-items:center;
display:flex;
float:left;
height:58px;
position:relative
}

#menuButtonContainer {
width:120px
}

.menuButtonToggle {
position:relative;
transition:.25s;
opacity:.6;
width:45px;
z-index:15
}

.menuButtonToggle:hover {
cursor:pointer
}

.menuButtonBar {
border:1px solid #fff;
border-radius:25px;
margin:10px 0;
width:72%
}

.menuOpen {
opacity:.9
}

.menuOpen .buttonBarTop {
transform:rotate(45deg) translate(5px,11px)
}

.menuOpen .buttonBarMiddle {
opacity:0;
transform:translate(230px)
}

.menuOpen .buttonBarBottom {
transform:rotate(-45deg) translate(5px,-11px)
}

/* || Wrapper principal du menu */

.menuWrapper,.searchWrapper {
background-color:var(--menu-bg-color);
border:2px solid var(--menu-border);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
/*box-shadow:2px 2px 10px 1px #000000bf;*/
box-shadow:2px 2px 10px 5px var(--menu-shadow);
display:block;
font-size:15px;
opacity:0;
overflow:auto;
position:fixed;
/*top:60px;*/
top:65px;
transition:.1s;
z-index:0
}

.menuWrapper {
max-height:84%;
margin-left:-18px;
padding:10px 15px;
width:350px
}

.menuWrapper p {
color:#bbb;
font-size:15px;
line-height:1em
}

/* || Section des catégories et des pages */

.menuCats li > a, .menuPages li > a {
align-items:center;
border:none;
display:inline-flex;
height:35px;
opacity:.9;
text-transform:uppercase;
transition:color .3s
}

.menuCats li > a:hover, .menuPages li > a:hover {
color:#ebebeb
}

.menuCats, .menuPages {
padding:0 10px;
margin-bottom:25px;
margin-top:5px;
}

.menuCats li > a {
color:#ccc;
font-family:'OpenSans-Condensed', sans-serif !important;
font-size:20px
}
.menuPages li > a {
color:#ddd;
/*font-family:'OpenSans-CondensedL', sans-serif !important;*/
font-size:14px;
height:30px
}

/* Span autour de l'icône pour aligner correctement */
.menuCats span, .menuPages span {
align-items:center;
display:inline-flex;
justify-content:center;
font-size:20px;
margin-right:12px;
opacity:.7;
width:20px
}

.menuPages span {
font-size:16px;
}

/* || Section des boutons réseaux sociaux */

#menuMS {
align-items:center;
display:flex;
justify-content:center;
padding-top:10px
}

#menuMS ul li {
float:left;
margin:0 8px
}

#menuMS a,#postShareMS a {
align-items:center;
border-radius:50%;
box-shadow:0 1px 2px 0 #0000001a;
display:flex;
flex-direction:column;
height:35px;
/* Pour IE11 */
justify-content:center;
position:relative;
transition:all .2s;
white-space:nowrap;
width:35px
}

#menuMS a {
background:#fff;
color:#000;
height:35px;
opacity:.6;
padding:0!important;
width:35px
}

#menuMS a:hover {
opacity:.8
}

#menuMS i,#postShareMS i {
display:block;
font-size:20px;
position:relative;
text-align:center
}

#menuFooter {
display:block;
margin:20px auto 5px;
text-align:center
}

/* OUTIL DE RECHERCHE DANS TOPBAR
/* Inspiré de : https://pagedart.com/blog/how-to-add-a-search-bar-in-html/

/* || Permet de fixer la popup recherche par rapport à la DIV #top au lieu du browser
/* || Source : https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container */


/* || Loupe Topbar qui ouvre le menu */

.topbarSearchIcon {
align-items:center;
display:flex;
position:relative
}

.topbarSearchIcon svg {
color:#fff;
fill:currentColor;
width:42px;
height:42px;
margin-left:15px;
opacity:.6;
transition:all .2s ease-out!important
}

.searchOpen svg {
opacity:1
}


#fixedSearch {
width:312px;
position:absolute;
top:60px;
right:0
}

.searchWrapper {
padding:20px;
width:280px
}

#searchFormWrapper {
background-color:#484848;
border:2px solid #000;
border-radius:15px;
display:block
}

#searchForm {
align-items:center;
background-color:#000;
border:2px solid #444;
border-radius:10px;
box-shadow:0 1px 5px 0 #f1f1f11a!important;
display:flex;
flex-direction:row;
height:44px;
width:100%
}

#searchForm input {
all:unset;
background-color:#000;
box-shadow:none;
border:0;
color:#fff;
font-size:16px;
height:100%;
width:100%;
opacity:.7;
padding-left:25px
}

#searchForm input:focus {
color:#fff;
border:none!important
}

#searchForm ::placeholder {
color:#fff;
opacity:.7;
transition:all .2s ease-out
}

#searchForm input:focus::placeholder,#searchForm svg:hover {
color:#8ab4f8!important
}

#searchForm button {
all:unset;
border:none;
background:transparent;
cursor:pointer;
width:50px;
height:32px;
margin-right:8px;
text-align:right
}

#searchForm svg {
background-color:#000;
border-radius:25px;
color:#fff;
fill:currentColor;
width:32px;
height:32px;
opacity:.5;
transition:all .2s ease-out!important
}



/* || Éléments liés à affichage menu et recherche
/**************************************************/

/* || DIV invisible qui permet d'assombrir la page lorsque le menu ou recherche sont affichés */
/* || On utilise une couleur de background avec transparence pour l'effet de flou plutôt que l'opacité */
.menuSearchCanvas {
background-color: rgb(0 0 0 / 0%);
height:100%;
left:0;
position:fixed;
width:0;
z-index:400
}

.menuSearchCanvasOpen {
backdrop-filter: blur(2px);
transition: filter 5s;
background-color: rgb(0 0 0 / var(--menu-canva-open));
width:100%
}

/* || Généré via jQuery pour affichage du menu ou popup recherche */
.showMenu {
margin-left:-18px!important;
opacity:1;
z-index:500
}

.showSearch {
opacity:1;
z-index:500
}

/* ====================================== */
/* 	DÉBUT DU CONTENU DE LA PAGE (MILIEU)  */
/* ====================================== */

/* Set la couleur du background sur les divers éléments de news */
#content article, .newsOverviewBig, .newsOverview, .relatedPosts, blockquote, code, .wp-block-preformatted, #headerComments,
#pings, .newsOverviewSidebar, #sidebarBlogs .sidebarBlog {
background:var(--newsblock-bg)
}


#middle {
padding-top:30px;
padding-bottom:40px;
position:relative
}

#middle .wrapper {
height:auto;
margin:auto;
max-width:1104px;
padding:0;
position:relative;
width:calc(100% - 25px)
}

aside {
color:var(--text-color);
float:right;
height:auto;
margin-bottom:50px;
position:relative;
width:300px
}

#tagsList {
margin:65px 10px
}

#content #tagsList ul {
margin:0
}

#sidebarTags ul li,#tagsList ul li {
display:inline-block
}

/* || Sidebar (écran large, desktop ou tablette) */

#sidebarBlogs,#sidebarNews,#sidebarTopNews {
margin-bottom:40px
}

#sidebarBlogs .sidebarBlog {
height:100px;
margin-top:20px;
padding:5px;
position:relative;
width:auto
}

#sidebarBlogs .sidebarBlog img {
border-radius:8px;
float:left;
height:98px;
width:auto
}

.sidebarBlog span {
color:var(--hn-h4-color);
display:flex;
font-size:13px;
justify-content:right;
margin:0 12px 5px 0;
padding:0;
text-align:right;
text-transform:uppercase
}

.sidebarBlog .sbBlogTitle {
margin-top:10px
}

.sidebarBlog .sbBlogCat {
color:var(--link-color)
}

.sidebarBlog .arrow {
align-items:center;
border-radius:20px;
background-color:#191919;
color:#f1f1f1;
float:right;
font-family:'OpenSans-Condensed',sans-serif;
font-size:25px;
height:30px;
justify-content:center;
margin-top:16px;
text-align:center;
width:30px
}

.sidebarBlog a {
border:0!important;
display:block;
height:100%;
padding:1px;
width:100%
}

.newsOverviewSidebar, .sidebarBlog {
margin-bottom:25px
}

.newsOverviewSidebar {
height:auto
}

.newsOverviewSidebar span {
display:inline-block;
padding:0
}

.newsOverviewSidebar .postCaption {
line-height:1.3em;
margin-top:15px
}

.newsOverviewSidebar a img {
border-radius: 10px;
float: none;
height: 130px;
border: 5px solid var(--newsblock-img-border-color);
border-radius: 10px;
box-sizing: border-box;
display: block;
position: relative;
width: 100%
}

.newsOverviewSidebar .newsContentRight {
float:none;
height:auto;
margin-top:-3px!important;
padding:15px;
width:calc(100% - 30px)
}

a.sidebarImgFirefox {
margin-bottom: 40px !important;
text-decoration: none;
border: none;
display: flex;
}

/* || Container de la page */

#content {
color: var(--text-color);
float:left;
position:relative;
width:calc(100% - 333px)
}

#content article {
overflow:hidden;
padding:18px;
margin-bottom:30px
}

#content ul {
list-style-type:disc
}

#content ol {
list-style-type:decimal
}

#content ul,#content ol {
margin:25px 0 25px 50px;
padding:0
}

#content blockquote ul,#content blockquote ol {
color:#b2b2b2;
margin:10px;
padding:0
}

#content ul li,#content ol li {
padding-top: 8px;
}

#content ul li strong,#content ol li strong {
font-weight:700
}

#content blockquote,#content code,#content .wp-block-preformatted {
border-radius:10px;
display:block;
margin:45px 0 35px;
position:relative
}

/* || Block « pre » formaté seulement si contient la classe .wp-block-preformatted */

#content .wp-block-preformatted {
background-color:#cccccc26;
border-left:15px solid #ccc;
border-right:2px solid #ccc;
font-size:15px;
line-height:1.3em;
padding:10px 30px
}

#content blockquote {
background-color:#faefe93b;
border-left:15px solid #e5d4cc;
border-right:2px solid #e5d4cc;
padding:10px 30px
}

#content blockquote p {
font-size:17px
}

#content code {
background-color:#2986bd12;
border-left:15px solid #2986bd;
border-right:2px solid #2986bd;
padding:30px
}

code p,code {
font-family:Courier New;
font-size:17px
}

.postContent a {
/* || Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens:auto;
-moz-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
/* || Code pour éviter que les mots et URL trop longs dépassent le cadre */
overflow-wrap:break-word;
-ms-word-break:initial;
/* || This is the dangerous one in WebKit, as it breaks things wherever */
word-break:initial;
/* || Instead use this non-standard one: */
word-break:break-word;
word-wrap:break-word
}

/* || EFFET SHADOW SUR LES BOÎTES (Material Design, boîtes de news, bulles d'infos, liste articles, etc) */
article,.newsOverviewBig,.newsOverview,.relatedPosts,.newsOverviewSidebar, .sidebarBlog, #headerComments,#pings {
border-radius:10px;
border:1px solid var(--blocks-box-border-color);
/* Inspiré de https://www.w3schools.com/csS/css3_shadows.asp */
box-shadow:var(--blocks-box-shadow)
}

blockquote,code,.wp-block-preformatted {
border-radius:10px;
box-shadow:var(--podcast-block-shadow)
}

.newsOverviewBig {
margin-bottom:50px
}

.newsOverviewBig p,.mainPost p,.postContent ol li,.postContent ul li {
font-size:17px;
line-height:1.6em;
padding-top:18px;
-webkit-text-size-adjust:none
}

.mainPost p {
margin-bottom:15px
}

/* || MISE EN FORME DES IMAGES ET VIDÉOS */

/* || WordPress 5.0 */
.wp-block-image,.wp-block-embed {
margin:45px 0 25px;
max-width:100%;
}

.wp-block-image,.mediaPlayer,.wp-block-embed {
background:var(--post-caption-bg)!important;
border-radius:10px;
box-shadow: var(--podcast-block-shadow);
color:var(--hn-h4-color);
padding:4px 8px
}

.wp-block-image img {
margin:0!important
}

/* || Style personnalisé dans Gutenberg pour page à propos */
.img-profil-dom-apropos {
all:inherit
}

.img-profil-dom-apropos img {
border-radius:10px !important;
box-shadow: var(--blocks-box-shadow);
margin-top:15px!important
}

/* || Caption de l'extension WP YouTube Lyte */
.lL {
color:var(--hn-h4-color);
font-size:14px;
line-height:1.4em;
margin:0!important;
/* Margin négatif parce que le plugin ajoute un <br> de trop */
margin-top: -10px !important;
padding:0 10px;
width:inherit!important
}

.lyte-wrapper div {
border-radius:10px;
margin:0 auto!important
}

.newsOverviewBig img,.mainPost img {
border-radius:10px;
height:auto;
position:relative;
width:100%
}

.mainPost img,.mainPost .wp-caption {
margin:45px 0 25px
}

.newsOverviewBig .featuredImg img {
border: 5px solid var(--newsblock-img-border-color);
border-radius:10px;
box-sizing:border-box;
}

.wp-block-image a,.newsOverviewBig .featuredImg a {
border:none!important
}

#content .postFeaturedImg img {
border-bottom-color:#7d7d7db3;
border-radius:10px;
box-shadow:0 1px 2px 0 #0003, 0 2px 7px 0 #0000001a;
color:#fff;
height:auto;
margin-bottom:40px;
position:relative;
width:100%
}

.featuredImgCopyright {
color:#888;
display:block;
font-size:14px;
margin-bottom:10px!important;
padding-top:18px
}

.wp-block-image,.wp-caption {
text-align:center
}

.wp-caption {
border:1px solid #ddd;
border-radius:3px;
padding:2px
}

.wp-block-image figcaption img,.wp-caption img {
border:0 none;
margin:0!important;
max-width:730px;
padding:0
}

figcaption, .wp-caption-text {
font-size:14px;
line-height:1.4em;
margin:0;
padding-top:8px
}

/* || Encadré Nouvelle à la Une */

.newsOverviewBigCaption {
padding:30px 15px 15px
}

.mainPostCaption {
border-bottom:1px solid var(--post-caption-border);
border-top:1px solid var(--post-caption-border);
color:var(--post-caption-color);
margin-bottom:25px;
padding:10px 5px
}

.newsOverviewBig a span {
color:#555;
display:block;
line-height:1.2em;
margin-bottom:20px;
position:relative
}

.postCaption {
color:var(--post-caption-color);
display:inline-block;
font-family:'OpenSans-CondensedL',sans-serif;
font-size:18px;
/*font-weight: 700;*/
text-transform:uppercase
}

/* || Boîte de nouvelles (liste) */

.newsOverview {
height:140px;
margin-bottom:25px;
position:relative;
width:100%
}

.stickyPostHome {
margin-bottom:40px!important
}

.stickyPostTitle {
font-weight:600;
font-size: 17px;
margin-bottom:10px
}

.newsOverview a img,.relatedPostsBox a img {
border: 5px solid var(--newsblock-img-border-color);
border-radius:10px;
box-sizing:border-box;
display:block;
float:left;
position:relative
}

.newsOverview a img {
height:130px;
margin:5px;
width:273px
}

.newsOverview .newsContentRight {
float:left;
height:78px;
padding:18px;
position:relative;
width:calc(100% - 330px)
}

.newsOverview h4 {
margin-bottom:15px
}

.newsOverview .date {
color:#797979
}

.postContent {
margin-bottom:25px
}

/* || Boîte des articles liés (sous l'article, sur accueil et haut des catégories) */

.relatedPosts,#headerComments,#pings {
display:block;
margin-bottom:40px;
outline:none;
overflow:auto;
padding:0 15px;
position:relative
}

#headerComments {
padding:20px!important;
margin:0!important
}

.relatedPostsBox {
display:block;
height:auto!important;
margin:0;
overflow:auto;
padding:15px 0;
/* voir newsOverview */
position:relative;
width:100%
}

/* || Supprime le border-top sur le premier élément de la liste */
.relatedPostsBox:first-of-type {
border:none
}

.relatedPostsBox a img {
/* || Voir .newsOverview a img */
height:auto;
margin-right:15px;
width:85px
}

.relatedPostsBox .newsContentRight {
box-sizing:border-box;
/* || Voir .newsOverview .newsContentRight */
float:left;
height:auto;
padding:0;
position:relative;
width:calc(100% - 110px)
}

.relatedPostsBox .postCaption,.newsOverview .relatedPostsDate {
margin-bottom:10px
}

.relatedPostsDate {
border-left:4px solid #e1e1e1;
padding-left:8px
}

/* || Boutons de partage (médias sociaux) dans articles */

#postShareMS {
margin-bottom:30px
}

#postShareMS ul {
align-items:center;
display:flex;
margin:0!important
}

#postShareMS ul li {
align-items:center;
display:flex;
line-height:initial;
margin:0!important;
margin-right:10px!important;
padding:0
}

#postShareMS a {
border:1px solid #777;
color:#fff!important;
margin-bottom:10px;
opacity:.9;
}

#postShareMS a:hover {
opacity:1
}

#postShareMS i {
color: #fff !important
}

/* || Tags sous l'article */

.postTags {
margin-top:40px
}

.postTags span,.postTags a,#sidebarTags ul li a,#tagsList ul li a,#postShareMS span {
border:1px solid #7eb1d7;
border-radius:20px;
color:#fff;
display:inline-block;
font-size:14px;
margin:0 8px 10px 0;
padding:10px 15px;
text-transform:uppercase
}

.postTags span,#postShareMS span {
background:#474747;
border:1px solid #777;
cursor:default
}

.postTags a,#sidebarTags ul li a,#tagsList ul li a {
background:#3980b7;
text-decoration:none;
transition:all .2s
}


.postTags a:hover,#sidebarTags ul li a:hover,#tagsList ul li a:hover {
background:#458cc3
}

/* || WORDPRESS 5 - CONTENUS EMBARQUÉS (LIENS)
/**********************************************/

#content .is-type-rich iframe {
margin:20px auto;
width:100%
}

#content .is-type-rich blockquote {
border:1px solid #e5e5e5;
box-shadow:inherit
}

#content .is-type-rich blockquote a {
color:#3980b7;
font-size:19px;
text-decoration:none
}

#content .is-type-rich blockquote a:hover {
text-decoration:none
}

#content .is-type-rich .wp-embed-heading p {
font-size:20px;
font-weight:600;
line-height:1.3;
margin:0 0 15px
}

/* || WORDPRESS 5 - BLOCS DANS LA LISTE DES PODCASTS
/*****************************************************/

/* || Cette classe a été ajoutée au bloc dans l'éditeur Gutenberg
/* || pour styliser chaque bloc de podcast */
.podcastsListBlock {
background:var(--podcast-block-bg);
border-radius:10px;
box-shadow:var(--podcast-block-shadow);
display:inline-flex;
margin:15px 0;
outline:none;
padding:15px;
position:relative
}

.podcastsListBlock p {
font-size:15px;
margin:0!important;
padding:0!important
}

.podcastsListBlock .wp-block-media-text__media img {
border-radius:10px;
box-shadow:0 1px 3px 0 rgba(96, 96, 96, 0.8);
float:right;
height:80px;
margin:0 0 20px 20px!important;
position:relative;
width:auto;
}

/* Retire le margin sur les icones du contenu Podcasts */
.wp-block-media-text__content img {
border:1px solid #3e3e3e;
border-radius:50px;
height:28px;
margin:15px 10px 0 0!important;
opacity:0.8;
vertical-align:middle;
width:28px
}


.wp-block-media-text__content a img:hover {
box-shadow:none;
opacity:1;
}

/* Reformate le lien sur icône Podcast - Elle est entourée d'un <span>
/* ajouté manuellement dans le code de l'éditeur WordPress */
.liens-podcasts a, .liens-podcasts a:hover {
all:unset;
cursor:pointer
}

.podcastsBlockTitle {
font-size:16px
}

/* ==================== */
/* FOOTER		
/* ==================== */

footer {
background:#121212f5;
position:relative;
transition:all 1s;
box-shadow:0 2px 2px 0 #2b2b2b80;
border-radius:10px;
margin:5px;
padding:15px
}

footer p,#menuFooter p {
color:#969391;
font-size:13px;
line-height:1.4em;
text-align:center
}

footer a,#menuFooter a {
border-bottom:1px solid #909090;
color:#d7d7d7;
text-decoration:none;
transition:color .3s
}

footer a:hover,#menuFooter a:hover {
color:#efefef
}

/* ======================================== */

/*    FIN DE LA MISE EN FOME PRINCIPALE     */

/* =========================================*/


/* ======================================== */
/* BOITES PROMOTIONNELLES / DONS PAYPAL		
/* ======================================== */

/* || Boîte de don Paypal - Inspirée de https://krita.org/fr/telechargement/krita-desktop/ */

#paypalWrapper {
background-color:#2e2e2e;
border:1px solid var(--blocks-box-border-color);
box-shadow:var(--blocks-box-shadow);
border-radius:10px;
display:block;
height:auto;
margin:40px auto;
padding:15px
}

/* || Boîte promotionnelle - Don Paypal */
#paypalWrapper .contentAdsBox {
background-color:#fafafa!important;
display:block;
min-height:150px;
width:100%
}

#paypalBox {
background:#181818;
border-radius:10px;
box-sizing:border-box;
color:#fff;
cursor:default;
line-height:1.4em;
padding:10px;
width:100%
}

#paypalBox p {
color:#a3a3a3;
line-height:24px;
margin-bottom:16px;
position:relative;
transition:font-size .8s
}

#paypalBox h4 {
border-bottom:1px solid #eff4f766;
color:#fff!important;
font-size:20px!important;
font-weight:400!important;
margin:0 18px 15px;
padding:5px!important;
text-align:center;
text-transform:uppercase
}

#paypalBox img {
margin:0 25px 0 10px;
max-width:200px;
position:relative;
transition:width .5s
}

#paypalBox p {
font-size:18px;
margin:0!important;
padding:0!important
}

#paypalBoxMiddle {
-webkit-align-items:center;
align-items:center;
/* || Permet de centrer verticalement l'image et le texte */
/* || Source : https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css */
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:flex;
-webkit-flex-align:center;
margin-bottom:25px;
position:relative
}

/* ================================== */
/*	MISE EN FORME DES COMMENTAIRES		
/* ================================== */

/* || Classe ajoutée s'il y a des commentaires
/* || Le formulaire est alors caché en jQuery et affiché seulement sur un clic de bouton
/* || Voir le fichier forms.ajax.js */

.commentFormHide {
display:none
}

.commentsList,.pingsList {
margin-top:30px;
/* || Code pour éviter que les mots et URL trop longs dépassent le cadre */
overflow-wrap:break-word;
padding:0;
-ms-word-break:initial;
/* || This is the dangerous one in WebKit, as it breaks things wherever */
word-break:initial;
/* || Instead use this non-standard one: */
word-break:break-word;
word-wrap:break-word
}

.commentsHn span {
color:var(--hn-h4-color);
display:inline-block;
font-weight:700;
margin-bottom:20px;
text-transform:uppercase
}

.pingsList {
margin-left:25px!important
}

.pingsList li {
border:none;
margin:0 25px;
padding:0!important
}

.pingUrl {
margin-bottom:10px
}

.commentsList {
list-style:none!important;
margin-left:0!important
}

.commentsList .thread-even,.thread-odd {
background:var(--comment-block-bg);
border:1px solid var(--comment-block-border);
border-radius:10px;
box-shadow:0 0 1px 0 #0003, 0 1px 5px 0 #0000001a;
margin-bottom:25px;
padding:20px!important
}
	
.commentsList .children {
margin:0 0 0 60px!important
}

.commentsList .children li {
margin:0!important
}

.commentsList li {
list-style:none!important
}
	
.commentsList .children li [id^=comment-] {
margin-top:35px
}

.comment p {
font-size:15px;
line-height:1.6em;
margin-top:20px
}

.commentName,.pingUrl  {
color:var(--hn-h4-color);
font-family:'OpenSans-condensed',sans-serif;
font-size:16px;
line-height:1.5em
}

/* || Avatar de l'auteur d'un commentaire */
.blocAvatar .avatar {
border:1px solid #a5a5a54d;
border-radius:50%;
box-shadow:0 2px 5px #0000000f;
float:left;
height:auto;
margin-right:10px;
width:48px
}

.commentName cite {
font-size:18px;
text-transform:uppercase
}

.commentMetas {
font-family:'OpenSans-CondensedL',sans-serif;
font-size:16px;
line-height:1.5em;
width:100%
}

/* || Message quand commentaire est posté */
.commentSubmitMsg,.contactSubmitMsg,.shareSubmitMsg {
color:var(--form-msg-color);
display: flex !important;
font-size: 13px !important;
height: 20px;
margin: 20px 5px 0 !important;
text-transform: uppercase;
}

/* || Couleurs rouges sur champs en erreur, commentaires et contact */
.fieldError {
border:1px solid #f58d8d!important;
color:#f58d8d!important;
/* || Définie opacité pour champs dans menu */
opacity:.9!important
}

/* || Permet d'appliquer la couleur rouge si erreur policy dans form contact et commentaire */
.fieldError label[for=contactPolicy],.fieldError label[for=commentPolicy] {
color:#f58d8d!important
}

.commentsDisabled {
background:#fafafa;
border:1px solid #d0d0d0;
border-radius:5px;
color:#ca2c2c;
margin-bottom:65px;
padding:50px!important
}

.policyConditions {
color:var(--form-policy-color)!important;
font-size:14px!important;
margin:8px 2px!important;
line-height: 1.3em;
}

#cancel-comment-reply-link {
display: inline-block;
font-family: 'OpenSans-CondensedL', sans-serif;
font-size:16px!important;
margin:15px 3px;
padding:3px
}

#respond {
margin-bottom: 30px;
}

/* ====================== */
/*	FORMULAIRES
/* ====================== */

#contactForm,#commentForm,#shareMailForm {
background-color:var(--form-bg);
border:1px solid var(--form-border-color);
border-radius:10px;
padding:8px 20px 10px
}

#contactForm,#commentForm {
box-shadow:0 3px 5px 0 #0001011a
}

#contactForm p,#commentForm p,#shareMailForm p {
font-size:16px;
margin:0;
padding-top:10px
}

#contactForm label,#commentForm label,#shareMailForm label {
color:#9e9d97;
font-size:16px;
padding-left:5px
}

.requiredField {
color: #ed8787 !important;
font-size: 13px !important;
text-transform: uppercase
}

#shareMailForm {
border-radius:10px!important;
box-shadow:0 2px 10px 2px #262626;
transition:box-shadow 1s
}

#contactForm {
margin:40px 0;
overflow:hidden
}


/*
/* CHAMPS DES FORMULAIRES
/* ======================== */
input,textarea {
-webkit-appearance:none;
border:none;
border-radius:10px!important;
width:auto
}

/* || Tous les champs texte du site, incuant formulaires de page, commentaires, sidebar, header */
input[type=text],input[type=url],input[type=email],textarea {
background:var(--form-field-bg);
border:1px solid var(--form-field-border-color);
box-shadow:inset 0 1px 4px 0 var(--form-field-shadow-color);
box-sizing:border-box;
color:#9e9d97;
font-family:'OpenSans',sans-serif;
font-size:16px;
margin:0;
outline:0;
padding:10px 20px;
width:100%
}

textarea {
height:160px!important;
line-height:22px;
padding:15px 20px!important
}

/* || Style quand on clique dans un champ */
input[type=text]:focus,input[type=url]:focus,input[type=email]:focus,textarea:focus {
border:1px solid var(--form-field-focus-border);
color:var(--form-field-focus-color);
}

/* || Mise en forme des champs seulement sur la page
* (contact, commentaires sur articles, partage article via FancyBox) */
#content input[type="text"],#content input[type="email"],#content textarea,#shareMailForm input[type="text"],#shareMailForm input[type="email"] {
display:block;
margin-bottom:10px;
margin-top:10px
}

#content textarea {
-webkit-appearance:none
}

/* Checkbox des formulaires
/* ============================ */
/* || Container des checkbox sur les pages (formulaire contact, commentaires, FancyBox) */
.checkboxContainer {
border-radius:10px;
display:block;
font-size:14px!important;
line-height:1.3em!important
}

#content .checkboxContainer,#shareMailForm .checkboxContainer {
background:var(--form-field-bg);
border:1px solid var(--form-field-border-color);
box-shadow:inset 0 1px 4px 0 var(--form-field-shadow-color);
box-sizing:border-box;
margin-top:30px!important;
padding:13px 20px 10px;
width:100%
}

#content .checkboxContainer span,#shareMailForm .checkboxContainer span {
/* || Le display:block Permet d'afficher message d'erreur en-dessous du texte de la checkbox (politique confidentialité) */
display:block;
padding:3px 0!important
}

/* || Mise en forme des cases à cocher (politique confidentialité, abonnement infolettre, partage article FancyBox)
/* || Basé sur la page de connexion WordPress */
input[type="checkbox"],#shareMailForm input[type="checkbox"] {
-webkit-appearance:none;
border-radius:20px!important;
border:1px solid #bbb;
box-shadow:inset 0 1px 4px 0 var(--form-field-shadow-color);
clear:none;
color:#555;
cursor:pointer;
height:16px;
outline:0;
padding:0!important;
transform:scale(1.4);
-webkit-transform:scale(1.4);
width:16px
}

input[type=checkbox]:checked::before {
content:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E);
display:inline-block;
float:left;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
height:20px;
/*content : "\2714";*/
margin:-3px 0 0 -4px;
speak:none;
vertical-align:middle;
width:20px
}

/* || Évite que le label passe en dessous de la case à cocher si le texte est trop long (sur mobile) */
/* || https://stackoverflow.com/questions/22321795/how-to-align-the-checkbox-and-label-in-same-line-in-html */
.checkboxContainer label {
display:inline-block;
line-height:1.3em;
margin-left:5px;
vertical-align:top;
width:calc(100% - 40px)
}

/* BOUTONS DES FORMULAIRES
/* =========================== */

/* || Bouton du formulaire et boutons de navigation (ne s'affiche pas car remplacés par InfiniteScroll */
#content input[type="submit"],#shareMailForm input[type="submit"],.postsListNav a {
background-color:#606060;
border:1px solid #303030
}

/* || Bouton des commentaires */
.replyCommentButton a {
background-color:#344a5b;
border:1px solid #3f5a6e
}
.replyCommentButton a:hover {
background-color:#3d576b
}

/* || Mise en forme de tous les boutons, incluant formulaires, don PayPal, etc */
#paypalButton,#postCommentButton,#content input[type="submit"], #shareMailForm input[type="submit"], .replyCommentButton a, .postsListNav a {
align-items: center;
border-radius:10px;
color:#eee;
cursor:pointer;
display: inline-flex;
justify-content: center;
font-family:'OpenSans',sans-serif;
font-size:14px;
font-weight:100!important;
outline:none;
padding:12px 20px!important;
text-decoration:none;
text-transform:uppercase;
transition:all .3s
}

#paypalButton {
display: flex;
margin: 5px auto;
line-height:1.3em;
padding:10px 20px!important;
text-align:center;
width: 60%
}

#paypalButton a {
border: none;
color: #fff;
}

#postCommentButton {
margin-top:20px
}

/* || Bouton Paypal et commentaire si y en a déjà (pas le bouton du formulaire) */
#paypalButton,#postCommentButton {
background-color:#548ec4;
border:1px solid #2e5b85;
color:#fff;
}

#postCommentButton:hover,#paypalButton:hover {
background-color:#679bcb
}

.reply {
margin-top:25px
}

#content input[type="submit"]:hover,#shareMailForm input[type="submit"]:hover,.postsListNav a:hover {
background-color:#6e6e6e
}

/* || Supprime le border pointillé sur Firefox quand on clique sur un bouton ou checkbox */
body input[type="submit"]:focus {
border:1px solid #555
}

/* || Supprime le border pointillé ou bleu sur Chrome / Firefox mobile quand on clique sur bouton, checkbox ou lien */
body a:focus,body button:focus,body input[type="submit"]:focus,body input[type="checkbox"]:focus {
outline:none!important
}

/* || Affiche le loader à côté du bouton d'envoi commentaire ou partage article */
.ajaxLoader {
background-image:var(--iconAjaxLoader);
border:none;
display:inline-block;
height:32px;
margin:0 0 0 10px;
padding:0;
vertical-align:middle;
visibility:hidden;
width:32px
}

.ajaxLoader.isActive {
visibility:visible
}

/*
/* STYLES DES MESSAGES CONFIRMATION DANS LES FORMULAIRES
/* ======================================================= */

/* || Mise en forme du message de confirmation envoi de commentaire */
#respond .comment-list {
background-color:transparent!important;
color:#3980bd!important;
display:block!important;
font-size:14px!important;
font-weight:100!important;
line-height:22px!important;
margin:10px 0 0;
padding:0!important
}

/* =================================== */
/*									   */
/*    PARTIE DESIGN DES PLUGINS        */
/*									   */
/* =================================== */

/* =========================== */
/* FONCTION SCROLL TO TOP		
/* =========================== */

#back2Top {
border-radius:50%;
border:2px solid #999;
bottom:15px;
color:var(--arrow-back-top);
cursor:pointer;
display:none;
-webkit-filter:drop-shadow(0 0 1px #999);
filter:drop-shadow(0 0 1px #999);
font-size:38px;
height:38px;
opacity:.7;
overflow:hidden;
padding:2px;
position:fixed;
right:15px;
text-align:center;
transition:color .5s;
width:38px;
z-index:999
}

/* ===================================================== */
/* PLUGIN INFINITE SCROLL (POINTS CLIGNOTANTS - STATUS)		
/* ===================================================== */

.infiniteScrollStatus {
display:none;
/* hidden by default */
font-size:20px;
/* change size here */
margin:10px auto;
position:relative;
width:4em
}

.infiniteScrollLoadingDot {
animation-duration:.5s;
animation-iteration-count:infinite;
animation-timing-function:ease;
background:#555;
/* change color here */
border-radius:.5em;
display:block;
height:1em;
position:absolute;
width:1em
}

.infiniteScrollLoadingDot:nth-child(1),.infiniteScrollLoadingDot:nth-child(2) {
left:0
}

.infiniteScrollLoadingDot:nth-child(3) {
left:1.5em
}

.infiniteScrollLoadingDot:nth-child(4) {
left:3em
}

@keyframes reveal {
from {
transform:scale(0.001)
}

to {
transform:scale(1)
}
}

@keyframes slide {
to {
transform:translateX(1.5em)
}
}

.infiniteScrollLoadingDot:nth-child(1) {
animation-name:reveal
}

.infiniteScrollLoadingDot:nth-child(2),.infiniteScrollLoadingDot:nth-child(3) {
animation-name:slide
}

.infiniteScrollLoadingDot:nth-child(4) {
animation-direction:reverse;
animation-name:reveal
}

/* ================================================== */
/*	PAGINATION CATÉGORIES (sert pour Infinite-Scroll		
/* ================================================== */

/* || Cette pagination de base est là seulement Javascript n'est pas activé.
/* || La pagination sert à Infinite-Scroll, elle n'est donc pas visible.
/* || Pour le style des liens, voir la ligne 399 (input submit) */

div.postsListNav {
display:inline-block;
margin:25px auto;
text-align:center;
width:100%
}

.postsListNav .previousPosts {
float:left
}

.postsListNav .nextPosts {
float:right
}