@import "style_common.css";

/*  theme colour: Curious Blue  */
/*  full colour: #3771c8        */
/*  light variant: #87aade      */
/*  text variant: #2c5aa0       */

#nav .active a, #nav a:hover, #nav-toggle:hover { color: #87aade; }

#main {
padding: 3em 0 1.5em;
background-color: #ffffff;
background-image: url(https://btyone.sarl/svg/web_ribbon.svg), url(https://btyone.sarl/img/dtblanche-min.png), radial-gradient(at top left, rgba(0, 102, 204, 0.3), rgba(0, 102, 204, 0.0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-attachment: fixed, fixed, fixed;
background-size: contain, 100% auto, auto;
background-position: center 85%, center bottom, left top;
animation: fadeInAnimation ease 2s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards;
} 

#header {background-image: linear-gradient(to right, rgba(34,34,34,1) 60%, rgba(255,255,255,0.15)) 100%;}

#footer {
background-color: #3771c8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%233771c8'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%231c3964'/%3E%3Cstop offset='1' stop-color='%233771c8'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(1020 0)'%3E%3Cg %3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform=''%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.62' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
animation: fadeInAnimation ease 0.5s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards;
}

#main a {
color: #2c5aa0 !important;
font-weight: bold !important;
-webkit-transition: color .2s ease-in;
transition: color .2s ease-in;
}

#main a:hover { text-decoration: underline !important; }
#main txtlnk { color: #3771c8 !important; }

.actu p, .actu em, .blog-entry ins, .actu-list ins, .actu-list p {
font-family: Archivo, sans-serif;
font-style: normal;
text-decoration: none;
font-optical-sizing: auto;
font-weight: 300 !important;
}
.actu-list ins {font-size: 1.4rem !important;}
.actu p, .actu-list p {font-size: 1.2rem;}

h1 {margin-bottom: 1.2em !important;}

p, hr, table, .table-responsive, ol, ul, dl, dd, pre, blockquote, fieldset {margin-bottom: 0 !important;}

/*** LAYOUT: HOMEPAGE GRID ***/

.grid-container {
width: 100%;
margin: 0 0 0;
display: grid;
grid-template-columns: auto 1fr 1fr 1fr 1fr auto;
grid-template-rows: auto;
gap: 0 4em;
grid-template-areas:
" . list actu actu actu . ";
}

.grid-blog-index {
width: 100%;
margin: 0 0 0;
display: grid;
grid-template-columns: auto 1fr 1fr 1fr 1fr auto;
grid-template-rows: auto;
gap: 0 4em;
grid-template-areas:
" .  .  blog-title blog-title blog-title  . "
" . date blog-entry blog-entry blog-entry . ";
}

.list {grid-area: list; padding-top: 0.55em;}
.actu {grid-area: actu;}
.blog-title {grid-area: blog-title;}
.date {grid-area: date;}
.blog-entry {grid-area: blog-entry;}

.actu-list tr, .actu-list td {border: 0; vertical-align: baseline;}

.actu-img {
width: 75%;
height: auto;
margin: 1em 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

.actu-img img {width: 100%; height: auto;}

.blog-entry {margin-bottom: 1em;}

.grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
}

.grid-container li:not(:last-child) {
margin-bottom: 0.4em;
}

.grid-container h3 {
margin-bottom: 0.5em;
}

mark { 
background-color: #87aade;
color: white;
}

.featured { 
grid-area: featured;
}

.links { 
grid-area: links;
border-left: 0.15em dotted rgba(55, 113, 200, 0.5);
padding: 0 0.5em;
}

@media (max-width: 767px) {
#main {
padding: 1em 0.5em 0.5em;
background-size: 0, auto 50%, auto;
}

.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.5em 1.5em;
grid-template-areas:
"actu"
"list";
}

.actu-list tr, .actu-list td {display: block;}
.actu-img {width: 100%;}

.grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
}