/*
Theme Name: ToolBox
Theme URI: http://wigo-media.com
Author: the Wigo Media team
Author URI: http://wigo-media.com/
Description: Thème de la ToolBox Wigo Media :D
Version: 1.0
*/

/* Initialize */
* {margin: 0; box-sizing: border-box;}
body {font-size: 16px; font-family: sans-serif; color: #444; line-height: 180%; background-image: url('img/bg.png'); background-color: #FDFDFD;}

/* Typo Corpus */
h4, .h4, h3, .h3, h2, .h2, h1, .h1 {font-family: "Cal Sans", sans-serif; margin-top: 1.75rem; margin-bottom: 1rem; line-height: 1.2;}
h1, .h1 {font-size: 4.625em; font-weight: 900;}
h2, .h2 {font-size: 2rem; font-weight: 900;}
h3, .h3 {font-size: 1.5rem; font-weight: 700;}
h4, .h4 {font-size: 1.1rem; font-weight: 700;}
p {margin-top: 2rem; margin-bottom: 2rem; font-weight: 400; color: #444; line-height: 180%; }
p.lead{font-size: 1.6rem;}

/* Interactive Objects */
a {color: #009EE2;}
img, svg {width: 100%; height: auto;}
button, .btn {border-radius: 0; padding: 1rem 2rem; display: inline-block; transition: 350ms ease; border: none;}
ul li{margin-bottom: 0.75rem;}
i.fa-duotone {color: #009EE2; display: inline-block; margin: 0 0.75rem 1rem 0;}

/* Login Form */
#loginform{ padding: 2rem; border-radius: 8px; border: 0.02rem #DDD solid; box-shadow: 0px 12px 18px -5px rgb(0 158 226 / 17%); transition: 250ms ease; display: block; color: #009EE2; text-decoration: none; background-color: #FFF; font-family: filson-soft, sans-serif; max-width: 500px; width: 100%; left: 50%; top: 40%; transform: translate(-50%, -50%); position: absolute;}
#loginform label{display: block;}
#loginform input[type=text],
#loginform input[type=password]{padding: 1rem; border-radius: 4px; border: 0.02rem #DDD solid; width: 100%;}
#loginform input[type=submit]{padding: 1rem; border-radius: 4px; border: 0.02rem #DDD solid; font-size: 1rem; width: 100%; color: #FFF; background-color: #009EE2;}

/* Colors */
.has-primary-color {color: #009EE2;}
.has-secondary-color {color: #AFC90C;}
.has-tertiary-color {color: #012336;}

/* Container */
.container, .container-fluid  {width: 100%; padding-right: calc(1.5rem * 0.5); padding-left: calc(1.5rem * 0.5); margin-right: auto; margin-left: auto;}
.container {max-width: 1320px;}

/* Header */
header a {display: block;}

/* Searchform */
.searchform div{padding: 0rem; border-radius: 8px; border: 0.02rem #DDD solid; box-shadow: 0px 12px 18px -5px rgb(0 158 226 / 17%); transition: 250ms ease; display: block; color: #009EE2; text-decoration: none; background-color: #FFF; display: flex; align-items: stretch; font-family: filson-soft, sans-serif; }
.searchform .aa-input,
.searchform .aa-input:focus{padding: 1.5rem;border: 0;color: #009EE2;font-size: 1.2rem;flex-grow : 1;    border-radius: 8px;}
.searchform #searchsubmit{border: 0;margin: 0;background-color: transparent;border-left: 1px solid #EEE;width: 120px;font-weight: bold;color: #666;}

/* Bloc : Ressource Link */
.ressource-link {padding: 1.5rem; border-radius: 8px; box-shadow: 0px 4px 18px rgba(0, 158, 226, 0.10); transition: 350ms ease; color: #012336; display: block; border: 0.01rem transparent solid;}
.ressource-link:hover {border: 0.01rem rgba(0, 158, 226, 0.10) solid;}
.ressource-link span {display: block; padding: 1rem; position: relative; width: fit-content;}
.ressource-link span::after {content:''; background-color: rgba(0, 158, 226, 0.10); position: absolute; top: 0; left: 0; height: 100%; width: 0; transition: width 350ms ease;}
.ressource-link:hover span::after {width: 100%;}

/* Index */
main h1 {text-align: center;}

/* Front Page */
.home main .grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;}
.last-posts .post-item{padding: 1.5rem; border-radius: 8px; border: 0.02rem #DDD solid; box-shadow: 0px 12px 18px -5px rgb(0 158 226 / 17%); transition: 250ms ease; display: block; color: #009EE2; text-decoration: none; background-color: #FFF;}
.last-posts .post-item:hover {transform: translateY(-10px); text-decoration: none; border: 0.02rem #009EE2 solid; box-shadow: 0px 32px 18px -10px rgb(0 158 226 / 21%);}
.last-posts .post-item i.fa-duotone {font-size: 2rem;}
.post-item-info{font-size: 0.7rem; color: #AAA; display: block; border-bottom: 0.02rem solid #DDD}


/* Single Post */
article .intro {text-align: center;}
article .intro i.fa-duotone {font-size: 2.25rem; display: block; text-align: center;}
article .body {max-width: 960px; margin-right: auto; margin-left: auto;}
article .body .about {background-color: #F6F6F6; padding: 1rem; border-radius: 6px; margin-top: 5rem;}
article .body .about p{margin: 0;} 
article .body .about h3{margin-top: 0;}

/* Archive */
.archive .archive-post {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;}
.archive .archive-post a {display: block; color: #009EE2; padding: 1.5rem; border-radius: 8px; box-shadow: 0px 4px 18px rgba(0, 158, 226, 0.10); transition: 350ms ease; display: block; border: 0.01rem transparent solid;}
.archive .archive-post a:hover {transform: translateX(5px); text-decoration: none; border: 0.02rem #009EE2 solid;}
.archive .archive-post a article header i.fa-duotone {font-size: 2rem; margin-bottom: 1rem;}

/* Footer */
footer {padding: 1.2rem;}
footer span {display: block; text-align: center; color: #012336;}

.badge{background-color: #F1F1F7; color: #888; font-weight: bold; font-size: .75rem; padding: .4rem .8rem; border-radius: 1rem;}

/* RWD  */
@media screen and (max-width: 1200px) {
    .container {max-width: 1140px}
}
@media screen and (max-width: 992px) {
    .container {max-width: 960px}

    /* Front Page */
    .home main div {display: grid; grid-template-columns: repeat(3, 1fr);}
    
    /* Archive */
    .archive .archive-post {display: grid; grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 768px) {
    .container {max-width: 720px}

    /* Front Page */
    .home main div {display: grid; grid-template-columns: repeat(2, 1fr);}

    /* Archive */
    .archive .archive-post {display: grid; grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 576px) {
    .container {max-width: 540px}

    /* Front Page */
    .home main div {display: grid; grid-template-columns: repeat(1, 1fr);}

    /* Archive */
    .archive .archive-post {display: grid; grid-template-columns: repeat(1, 1fr);}
}


/* WP Block - Quote */
.wp-block-quote {border-left: 3px solid #333; padding-left: 1rem;}


/* Spacing */
.m-0 {margin: 0;}
.m-1 {margin: 0.25rem;}
.m-2 {margin: 0.5rem;}
.m-3 {margin: 1rem;}
.m-4 {margin: 1.5rem;}
.m-5 {margin: 3rem;}

.mx-0 {margin-left: 0; margin-right: 0;}
.mx-1 {margin-left: 0.25rem; margin-right: 0.25rem;}
.mx-2 {margin-left: 0.5rem; margin-right: 0.5rem;}
.mx-3 {margin-left: 1rem; margin-right: 1rem;}
.mx-4 {margin-left: 1.5rem; margin-right: 1.5rem;}
.mx-5 {margin-left: 3rem; margin-right: 3rem;}

.my-0 {margin-top: 0; margin-bottom: 0;}
.my-1 {margin-top: 0.25rem; margin-bottom: 0.25rem;}
.my-2 {margin-top: 0.5rem; margin-bottom: 0.5rem;}
.my-3 {margin-top: 1rem; margin-bottom: 1rem;}
.my-4 {margin-top: 1.5rem; margin-bottom: 1.5rem;}
.my-5 {margin-top: 3rem; margin-bottom: 3rem;}

.mt-0 {margin-top: 0;}
.mt-1 {margin-top: 0.25rem;}
.mt-2 {margin-top: 0.5rem;}
.mt-3 {margin-top: 1rem;}
.mt-4 {margin-top: 1.5rem;}
.mt-5 {margin-top: 3rem;}

.mb-0 {margin-bottom: 0;}
.mb-1 {margin-bottom: 0.25rem;}
.mb-2 {margin-bottom: 0.5rem;}
.mb-3 {margin-bottom: 1rem;}
.mb-4 {margin-bottom: 1.5rem;}
.mb-5 {margin-bottom: 3rem;}

.ms-0 {margin-left: 0;}
.ms-1 {margin-left: 0.25rem;}
.ms-2 {margin-left: 0.5rem;}
.ms-3 {margin-left: 1rem;}
.ms-4 {margin-left: 1.5rem;}
.ms-5 {margin-left: 3rem;}

.me-0 {margin-right: 0;}
.me-1 {margin-right: 0.25rem;}
.me-2 {margin-right: 0.5rem;}
.me-3 {margin-right: 1rem;}
.me-4 {margin-right: 1.5rem;}
.me-5 {margin-right: 3rem;}

.p-0 {margin: 0;}
.p-1 {margin: 0.25rem;}
.p-2 {margin: 0.5rem;}
.p-3 {margin: 1rem;}
.p-4 {margin: 1.5rem;}
.p-5 {margin: 3rem;}

.px-0 {margin-left: 0; margin-right: 0;}
.px-1 {margin-left: 0.25rem; margin-right: 0.25rem;}
.px-2 {margin-left: 0.5rem; margin-right: 0.5rem;}
.px-3 {margin-left: 1rem; margin-right: 1rem;}
.px-4 {margin-left: 1.5rem; margin-right: 1.5rem;}
.px-5 {margin-left: 3rem; margin-right: 3rem;}

.py-0 {padding-top: 0; padding-bottom: 0;}
.py-1 {padding-top: 0.25rem; padding-bottom: 0.25rem;}
.py-2 {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.py-3 {padding-top: 1rem; padding-bottom: 1rem;}
.py-4 {padding-top: 1.5rem; padding-bottom: 1.5rem;}
.py-5 {padding-top: 3rem; padding-bottom: 3rem;}

.pt-0 {padding-top: 0;}
.pt-1 {padding-top: 0.25rem;}
.pt-2 {padding-top: 0.5rem;}
.pt-3 {padding-top: 1rem;}
.pt-4 {padding-top: 1.5rem;}
.pt-5 {padding-top: 3rem;}

.pb-0 {padding-bottom: 0;}
.pb-1 {padding-bottom: 0.25rem;}
.pb-2 {padding-bottom: 0.5rem;}
.pb-3 {padding-bottom: 1rem;}
.pb-4 {padding-bottom: 1.5rem;}
.pb-5 {padding-bottom: 3rem;}

.ps-0 {padding-left: 0;}
.ps-1 {padding-left: 0.25rem;}
.ps-2 {padding-left: 0.5rem;}
.ps-3 {padding-left: 1rem;}
.ps-4 {padding-left: 1.5rem;}
.ps-5 {padding-left: 3rem;}

.pe-0 {padding-right: 0;}
.pe-1 {padding-right: 0.25rem;}
.pe-2 {padding-right: 0.5rem;}
.pe-3 {padding-right: 1rem;}
.pe-4 {padding-right: 1.5rem;}
.pe-5 {padding-right: 3rem;}


/* WP Core */
.alignnone {margin: 5px 20px 20px 0}
.aligncenter, div.aligncenter {display: block; margin: 5px auto}
.alignright {float: right; margin: 5px 0 20px 20px}
.alignleft {float: left; margin: 5px 20px 20px 0}
a img.alignright {float: right; margin:5px 0 20px 20px}
a img.alignnone {margin: 5px 20px 20px 0}
a img.alignleft{float: left; margin: 5px 20px 20px 0}
a img.aligncenter{display: block; margin-left: auto; margin-right: auto}
.wp-caption{background:#fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center}
.wp-caption.alignnone {margin: 5px 20px 20px 0}
.wp-caption.alignleft {margin: 5px 20px 20px 0}
.wp-caption.alignright {margin: 5px 0 20px 20px}
.wp-caption img {border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto}
.wp-caption p.wp-caption-text {font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px}
.screen-reader-text {clip: rect(1px,1px,1px,1px); position: absolute!important; height: 1px; width: 1px; overflow: hidden}
.screen-reader-text:focus {background-color:#f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,0.6); clip: auto!important; color:#21759b;display:block; font-size: 14px; font-size: .875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000}