/* Valeur par défaut */
*{margin: 0; padding: 0; box-sizing: border-box;}
html {font-weight:300; font-style: normal; font-family: 'REM', sans-serif; font-size: 16px; color:#151515; overflow-y:scroll; overflow-x:hidden; letter-spacing:0.025rem; line-height:1.5rem; text-align: justify;}
body {position: relative; height: 100vh;}
/* Général */
p {text-align: justify; margin: 1rem 0 1rem 0;}
sub, sup {font-weight:300; font-style: normal; font-size: 0.6em; position: relative; vertical-align: baseline; margin-left: 0.10em; line-height: 1em;}
sup {top: -0.80em;}
sub {bottom: -0.40em;}
i {font-style: italic; font-weight:inherit;}
u {font-style: normal; font-weight:600; text-decoration: none;}
a {font-style: normal; font-weight:600; text-decoration: none;}
s {font-style: normal; font-weight:300; text-decoration:line-through;}
del {font-style: italic; font-weight:300; text-decoration:line-through; color: #888;}
ins {font-style: inherit; font-weight: inherit; text-decoration: none;}
b {font-style: inherit; font-weight:600; text-decoration:underline;}
strong {font-style: inherit; font-weight:900;}
mark {font-style: inherit; font-weight:inherit; background-color: #EEEECC; padding: 0.2rem 0.1rem 0.2rem 0.1rem;}
em {font-style: italic; font-weight:300;}
abbr, dfn {font-style: normal; font-weight: 600; text-decoration: none; cursor:help; color: #151515; border-bottom: 1px dashed #151515;}
abbr:hover, dfn:hover {color: #373737; border-bottom: 1px dashed #373737;}
summary {padding-left: 0.2rem; font-style: normal; font-weight: 600; text-decoration: none; cursor:help; color: #151515; border-bottom: 1px dashed #151515;}
small {display: inline-block; font-size: 0.80em;}
large {display: inline-block; font-size: 1.20em;}
cite, q {font-style: normal; font-weight:300;}
cite::before {content: '\0000AB\0000A0';}
cite::after  {content: '\0000A0\0000BB';}
q {quotes:'\0022' '\0022' '-' '-';}
code {font-style: inherit; font-weight:inherit; font-family: monospace; color: #373737; text-align: left;}
pre {font-style: normal; font-weight:300; font-family: monospace; color: #373737; text-align: left;}
hr {display:block; width:100%; border-bottom: solid 1px rgba(0, 0, 0, 0.20); border-top: solid 1px rgba(0, 0, 0, 0.20); height:6px;}
svg {padding: 0; margin: 0;}
img {width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h7, .h8 {margin: 2.0rem 0 2.0rem 0; font-style: normal; text-align: left;}
h2, .h2 {font-size:1.7rem; line-height: 1.28em; font-variant-caps: small-caps; text-transform: none; font-weight:600; padding: 0.4rem 0 0.4rem 0.6rem; background-image:linear-gradient(to left, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.4)); border: none; border-top:1px solid rgba(200, 200, 200, 0.6); border-bottom:1px solid rgba(200, 200, 200, 0.6);}
h3, .h3 {font-size:1.4rem; line-height: 1.28em; font-variant-caps: small-caps; text-transform: none; font-weight:600; padding: 0.4rem 0 0.4rem 0.4rem; background: none; border: none; border-left:0.6rem solid #808080; border-top:1px solid #808080;}
h4, .h4 {font-size:0.8rem; line-height: 1.28em; font-variant-caps: normal; text-transform: uppercase; font-weight:600; padding: 0; color: #151515; background: none; border: none; border-bottom: 2px solid #373737;}
h5, .h5 {font-size:1.0rem; line-height: 1.28em; font-variant-caps: normal; text-transform: uppercase; font-weight:600; padding: 0; color: #151515; background: none; border: none;}
h6, .h6 {font-size:1.0rem; line-height: 1.28em; font-variant-caps: small-caps; text-transform: none; font-weight:600; padding: 0.2rem 0.2rem 0.2rem 0.4rem; color:#fff; background:#373737; border: none;}
.h7 {font-size:1.0rem; line-height: 1.28em; font-variant-caps: small-caps; text-transform: none; font-weight:600; padding: 0; color: #151515; background: none; border: none;}
.h8 {font-size:initial; line-height: 1.28em; font-variant-caps: normal; text-transform: uppercase; font-weight:600; padding: 0.1rem 0.1rem 0.1rem 0.2rem; color:#fff; background:#373737; border: none;}
h2 span, .h2 span, h3 span, .h3 span, h4 span, .h4 span, h5 span, .h5 span, h6 span, .h6 span {font-weight: 300;}
header h1, header .h1, header h2, header .h2, header h3, header .h3 {margin: 0; padding:0; border: 0; background: none;}
.article header {display: block; text-align: center; width: 100%; margin: 0rem; padding: 2.4rem 0 2.4rem 0;}
.article header h1,
.article header h2,
.article header h3 {text-align: center;}
.article header h1, .article header .h1,
.article header h2,
.article header h3 {line-height: 1.06em; font-variant-caps: small-caps; text-transform: none; font-weight:600; font-family: 'Dorsa'; padding:0; margin:0; letter-spacing:0.1rem;}
.article header h1, .article header .h1,
.article header h2 {font-size:6.2rem;}
.article header h3 {font-size:5.4rem;}
.article header h1::first-letter,
.article header .h1::first-letter {padding: 4.9rem 0.1rem 0 0.2rem; margin-right: 0.1rem; background-color: rgba(0, 0, 0, 0.85); border-radius: 0px 0px 0px 10px; color:#fff;}
.article header h2::first-letter {padding: 4.9rem 0.1rem 0 0.2rem; margin-right: 0.1rem; background-color: rgba(0, 0, 0, 0.25); border-radius: 0px 0px 0px 10px; /* border: 1px solid rgba(255, 255, 255, 0.25); */}
.article header h1 span::first-letter,
.article header h2 span::first-letter {padding: 0; margin: 0; background-color: unset; border: 0; color: #151515;}
.article header h1.alt {
    font-family: 'REM', sans-serif;
    font-size: 1.4rem;
    line-height: 1.28em;
    font-weight: 600;
    text-align: left;
    font-variant-caps: small-caps;
    text-transform: none;
    border-bottom: 2px solid #373737;
    margin-bottom: 1rem;
}
.article header h1.alt::first-letter {padding: 0; margin: 0; background: none; color: #151515;}
.article header ul {text-align: left;}
.article header p,
.article header span {display:block; font-family: 'REM'; font-weight:300; font-size: 0.9rem; line-height:1.2rem; letter-spacing:0.025rem; font-variant-caps:normal; text-align: center; margin:0.6rem; padding:0;}
.article p:target,
.article i:target,
.article u:target,
.article strong:target,
.article span:target {background-color: #EEEECC; padding-block: 5px;} /* Surligne en jaune un <span id="ID">...</span> venant d'un HRef = "#ID", idem avec P, I, ect.*/
.article ul,
.article ol {font-size: inherit; line-height: 1.50rem;}
.article li {padding-left: 0.4rem;}
.article ul,
.article ol,
.article li {text-align: left;}
.article code ul {list-style:none;}
.article code ol {list-style:decimal;}
/*
.article p q, .article blockquote q q, .article blockquote.fr q q, .article blockquote.uk q q {display: inline; font-size: inherit; font-style: normal; quotes:'"' '"' '' ''; margin: 0;}
.article cite, .article header q, .article header cite {font-size:1.0rem; line-height:1.4rem; text-align: center; display: block; padding: 0.8rem; font-style:italic; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1.6rem 0 1.6rem 0; }
.article cite::before, .article header cite::before {content: '\0000AB\0000A0';}
.article cite::after, .article header cite::before {content: '\0000A0\0000BB';}
*/

/* CLASSES Générales */
.imgl, .fl_left{float:left;}
.imgr, .fl_right{float:right;}
.normal, .n {font-weight: 300;}
.bold {font-weight: 600;}
.small {font-size: 0.80rem; line-height:1.20rem; letter-spacing:0.02rem;}
.large {font-size: 1.20rem; line-height:1.80rem; letter-spacing:0.03rem;}
.justify {text-align:justify !important;}
.center {text-align:center !important;}
.right {text-align:right !important;}
.left {text-align:left !important;}
.uppercase, .uc {text-transform:uppercase;}
.smallcaps, .sc {font-variant-caps: small-caps;}
.capitalise {text-transform:capitalize;}
.shaded {color: #888}
.hidden {display:none;}
.nospace {margin:0; padding:0; list-style:none;}
.block {display:block;}
.vh {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
/*
.noStyle {list-style:none;}
.circle {list-style:circle;}
.square {list-style:square;}
*/
.inline * {display:inline-block;}
.inline *:last-child{margin-right:0;}
.pushright li {margin-right:1.8rem;}
.pushright li:last-child {margin-right:0;}
.borderedbox {border:1px solid;}
.overlay {position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
.bgded {background-position:top center; background-repeat:no-repeat; background-size:cover;}
.headerpict {background-image:url("/0/bg/H.jpg");}
.circle {border-radius:50%; background-clip:padding-box;}
.btn, .bt2, .bti {display:inline-block; padding:0.4rem 0.9rem 0.6rem 0.9rem; font-variant-caps: small-caps; border:1px solid; font-weight:normal;}
.imgl {margin:0 1.2rem 0.9rem 0; clear:left;}
.imgr {margin:0 0 0.9rem 1.2rem; clear:right;}
.note {border:1px solid; padding:1.2rem;}
.cr {color:#FF0000;}
.cg {color:#008000;}
.cb {color:#0000FF;}

.datesep {display: block; text-align: center; padding: 0.2rem; font-size: 1.4rem; font-weight: 600; background-color: #16130F; color: #fff;}
.w10p{width: 10%;}
.w15p{width: 15%;}
.w20p{width: 20%;}
.w25p{width: 25%;}
.w33p{width: 33%;}
.w50p{width: 50%;}
.w66p{width: 66%;}
.w75p{width: 75%;}
.w80p{width: 80%;}
.w85p{width: 85%;}
.w90p{width: 90%;}
/* SECTIONS */
section {position: relative; display: block; width: 100%; font-size: inherit; line-height: inherit; padding: 0; margin: 0;}
/* Section */
section.C2,
section.C12,
section.C21,
section.C3 {display: flex; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; align-items: stretch; justify-content:justify;}
section.C2 {gap: 6%;}
section.C12,
section.C21,
section.C3 {gap: 5%;}
section.C2>* {flex:0 0 47%;}
section.C3>* {flex:0 0 30%;}
section.C12 article:nth-child(1) {flex:0 0 30%;}
section.C12 article:nth-child(2) {flex:0 0 65%;}
section.C21 article:nth-child(1) {flex:0 0 65%;}
section.C21 article:nth-child(2) {flex:0 0 30%;}

/* ARTICLES */
.article {padding: 2.5rem 8% 2.5rem 8%;background-image: url("/0/bg/dbl.svg"),url("/0/bg/dbr.svg"),url("/0/bg/dtl.svg"),url("/0/bg/dtr.svg"); background-position: bottom left,bottom right,top left,top right; background-repeat: no-repeat; background-size: 400px; font-size: inherit; line-height: inherit;}
.NoSpace {padding-top: 0px; padding-bottom: 0px; background: none;}
.article article{container-type: inline-size;}
.article hr {height: 8px; border:dotted; border-width:0 0 8px 0; border-color:#DDDDDD; margin: 32px 0px 32px 0px; }
.article a {font-weight:600; font-size: inherit; color: #3B5998;}
.article a:hover {color:#DB4A39;}
/*
.article p {text-align: justify; margin: 1rem 0 1rem 0;}
.article p q, .article blockquote q q, .article blockquote.fr q q, .article blockquote.uk q q {display: inline; font-size: inherit; font-style: normal; quotes:'"' '"' '' ''; margin: 0;}
.article cite, .article header q, .article header cite {font-size:1.0rem; line-height:1.4rem; text-align: center; display: block; padding: 0.8rem; font-style:italic; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1.6rem 0 1.6rem 0; }
*/
.article header q {quotes:'\0000AB\0000A0' '\0000A0\0000BB' '"' '"'; }
/* Citations */
/*
.article cite::before, .article header cite::before {content: '\0000AB\0000A0';}
.article cite::after, .article header cite::before {content: '\0000A0\0000BB';}
*/
.article blockquote {margin:2.4rem;}
.article blockquote.fr,
.article blockquote.uk {text-indent:-1.2rem; font-weight:600; font-family: 'Pompiere'; font-style: 600; font-size:1.6rem; line-height:2.0rem;}
.article blockquote q,
.article blockquote.fr q,
.article blockquote.uk q, .article .adv q, .article #adv q {display: block; margin:1.2rem;}
.article blockquote q {font-weight: 600; text-align: center; quotes:'' '' '"' '"'; font-variant-caps: small-caps;}
.article .adv q, .article #adv q, .article blockquote.fr q {font-weight: 300; text-align: justify; quotes:'\0000AB\0000A0' '\0000A0\0000BB' '"' '"'; font-variant-caps: normal; }
.article blockquote.uk q {font-weight: 300; text-align: justify; quotes:'„\0000A0' '\0000A0“' '\00002C' '\000027'; font-variant-caps: normal;}
.article blockquote.fr q.by, .article blockquote.uk q.by, .article .adv q.by, .article #adv q.by {text-indent:-1.4rem; quotes:'--\0000A0' '';}
.article blockquote.rc {margin: 3rem 20% 3rem 20%;}
.article blockquote.rc q {
    font-family: monospace;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3em;
    padding: 0.4rem;
    margin: 0;
    background-image:linear-gradient(to left, rgba(200, 200, 255, 0) 0%, rgba(200, 200, 255, 0.4) 50%, rgba(200, 200, 255, 0) 100%);
    border-top:1px dashed rgba(200, 200, 255, 0.6);
    border-bottom:1px dashed rgba(200, 200, 255, 0.6);
}
/*.article p.bold {font-weight:600; font-size: inherit;} */
.article ul {margin-left: 2rem; font-size: inherit;}
/* Foire aux Questions & Conversations */
.article .R, .article .R0, .article .R1, .article .R2, .article .R3, .article .R4, .article .R5, .article .R6, .article .Rh,
.article .Q {font-size:1.0rem; line-height:1.6rem; text-transform:none; font-variant-caps: normal; position: relative; padding:0.3rem 0.6rem 0.3rem 0.6rem;}
.article .Q {font-weight:600; text-align: justify; margin: 2rem 0 1rem 0rem; border:1px dashed #D7D7D7; background:#FAFAFA;}
.article .R p, .article .R1 p, .article .R2 p, .article .R3 p, .article .R4 p, .article .R5 p, .article .R6 p, .article .Rh p, .article .Q p {margin: 0;}
.article .Q::before {font-family:"Font Awesome Fontello"; content:'\e805'; position:absolute; left: -0.5rem; top: -0.8rem; color:#888888; font-weight: 300; font-size: 1.2rem;}
.article .R, .article .R0, .article .R1, .article .R2, .article .R3, .article .R4, .article .R5, .article .R6, .article .Rh {margin: 1rem 0 1rem 0rem;}
.article .R,
.article .R0 {border-left: 3px solid #D7D7D7;}
.article .R1 {border-left: 3px solid #6D33F3;}
.article .R2 {border-left: 3px solid #33F36D;}
.article .R3 {border-left: 3px solid #F36D33;}
.article .R4 {border-left: 3px solid #6D6D33;}
.article .R5 {border-left: 3px solid #6D336D;}
.article .R6 {border-left: 3px solid #336D6D;}
.article .Rh {border-left: 3px solid #00FF00; background-color: #304030;}
.article .Rh code {color:#00FF00;}
.article q.rBy {position: relative; font-weight:900; quotes:'' '' '' ''; font-family:monospace; bottom: -1rem;}
.article q.rBy::after {text-align: left; position:absolute; top: -0.8rem; font-weight: 300; font-size: 1rem;}
.article q.rBy::before {text-align: right; position:absolute; top: -0.7rem; left: -1rem; font-weight: 300; font-size: 1rem;}
/* Bannière du FreeFly en entête du Site */
#freefly {display: block; padding:80px 0px 0px 0px; background-color:#16130F;}
/* 404 */
.err404 {background-image: none;}
/* Fil d'Ariane */
.ariane {position: absolute; left: 0; bottom: 0; color:#CBCBCB; background: rgba(0, 0, 0, 0.60); border-top: solid 1px rgba(0, 0, 0, 0.75); border-bottom: solid 1px rgba(0, 0, 0, 0.75); text-align:left; padding: 0px 10% 0px 10%; font-size:0.9rem; font-weight: 300; line-height: 1.4rem; text-align:left; word-wrap:break-word;}
#bodynav {line-height:normal; padding:0.6rem 0 0.6rem 0;}
#bodynav li a::after {position:absolute; font-size:0.8rem; line-height:0.8rem;}
#bodynav ul {margin:0; padding:0; list-style:none; font-variant-caps: small-caps;}
#bodynav li {display:inline-block; margin:0 0.2rem 0 0; padding:0;}
#bodynav a {display:block; position:relative; margin:0; padding:0 0.8rem 0 0; color: #fff; font-weight: 300; font-size:0.8rem;} /* Ici c'est bien 0.8 REM */
#bodynav a:hover {color:#DB4A39;}
/* Mise en page des paragraphes Classified et Squadron 42 */
.SQ42 {background:#F6F6F6; padding:0.6rem 1.2rem 0.6rem 1.2rem; }
.SQ42 h2 {background: revert; border: revert; padding:0; margin:0.3rem 0 1.2rem 0;}
.SQ42 h2:after {content: " – Squadron 42"; }
.SQ42 {margin:2.1rem 0 1.2rem 0; border-left:1.2rem solid #ddd; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-image:linear-gradient(to left, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.1));}
.classified {margin:2.1rem 0 1.2rem 0; background:#FFFFFF url("/0/bg/clfd.png"); border-color:#800000; border-style:solid; border-width:1px 1.2rem 1px 1.2rem; color:#800000; font-family:monospace, Verdana, sans-serif; padding:0.6rem 1.2rem 0.6rem 1.2rem; font-size: 1rem;}
/* Auteur */
.DidiLeRageux, .ELV15, .ile-avalon {padding: 20px 0px 24px 98px; margin-bottom: 36px; min-height: 96px; border:dotted; border-width:0 0 8px 0; border-color:#DDDDDD;}
.ELV15 {background: top 24px left 8px no-repeat url("/0/i/ELV15.png");}
.DidiLeRageux {background: top 24px left 8px no-repeat url("/0/i/SDLR.png");}
.ile-avalon {background: top 24px left 8px no-repeat url("/0/i/Avalon.png");}
/* Tables */
table {display:block; width: 100%; max-height: 40rem; overflow:auto; border-spacing:0; margin:1.8rem 0 1.8rem 0; font-size:0.9rem; border: 1px solid #D7D7D7;}
table, th {table-layout:auto; vertical-align:top;}
table, th, td {border-collapse:collapse; border-color:#D7D7D7;}
tbody {display:table; width: 100%; border: 0;}
tr {color:inherit; white-space:nowrap; background-color:#F0F0F0; min-height: 2rem;}
tr:nth-child(even) {color:inherit; background-color:#FFF;}
th {vertical-align:middle; text-align:center; background-color:#373737; color:#FFF; font-weight: 500; border-bottom: 1px solid #D7D7D7;}
th, td {padding:0.4rem; line-height: 1.2rem;}
.head {position: sticky; z-index: 1; background-color:#373737 !important; color: #FFF !important; top: 0;}
.foot {position: sticky; z-index: 1; background-color:#373737 !important; color: #FFF !important; bottom: 0; text-align:center; font-weight: 500;}
.lock tr :first-child {position: sticky; z-index: 1; left: 0; background-color:inherit;}
/* .lock tr:first-child {background-color:#373737; color:#FFF;} */
.lock tr:first-child.head {position: sticky; z-index: 2; top: 0; left: 0;}
.nowrap tr {white-space:nowrap !important;}
th.sortable {cursor:pointer;}
th.sortable:hover {background: #DB4A39;}
th.bgR {background-color:#800000;}
th.bgG {background-color:#008000;}
th.bgB {background-color:#000080;}
table.noframe {border: 0px;}
table.r00 {max-height: none;}
table.r10 {max-height: 20rem;}
table.r20 {max-height: 40rem;}
table.r30 {max-height: 60rem;}
table.r40 {max-height: 80rem;}
/* Formulaire des pages admin */
.article form.admin input,
.article form.admin select {font-size: large; font-family:'Courier New', Courier, monospace;}
.article form.admin input.smallbtn {border: 1px solid #DDDDFF; line-height: 16px; color: #FFFFFF; border-radius: 6px; padding: 4px;}
.article form.admin input.r {background: #FF4242;}
.article form.admin input.g {background: #42AA42;}
.article form.admin input.b {background: #4242FF;}
/* Formulaire de la page du Blog */
.article form#SearchBlog {display: block; width: 100%;}
.article form#SearchBlog li {text-decoration:none; display: flex; width: 100%; flex-direction: row; align-items: center; justify-content: left; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.article form#SearchBlog label {display: block; font-size: 0.9rem; font-weight: 600; height: 15px; padding: 25px 0px 0px 10px; }
.article form#SearchBlog input,
.article form#SearchBlog select {-webkit-appearance: none; appearance: none; font-family: inherit; font-size: inherit; font-weight: 300; box-sizing:content-box; text-align: left; border: 1px solid rgba(0, 0, 0, 0.5); background-color: rgba(255, 255, 255, 0.5); color: #151515; margin: 0px 10px 0px 0px; padding: 20px 10px 5px 10px; height: 30px; min-width: 50px; font-variant-caps: small-caps; border-radius: 5px 15px 0px 15px; box-shadow: #ABB 4px 4px 1px; cursor:pointer;}
.article form#SearchBlog input.btn {-webkit-appearance: none; appearance: none; font-family: inherit; font-size: 2rem; font-weight: 600; margin: 25px 0px 0px 0px; height: 60px; width: 60px; border: 0px; background: #3B5998; color: #FFF; border-radius: 5px 15px 0px 15px; box-shadow: #ABB 4px 4px 1px; padding: 0; text-align: center;}
.article form#SearchBlog button {-webkit-appearance: none; appearance: none; font-family: inherit; font-size: inherit; font-weight: 600; margin: 25px 10px 0px 0px; height: 60px; padding: 15px; border: 0px; background: #3B5998; color: #FFF; border-radius: 5px 15px 0px 15px; box-shadow: #ABB 4px 4px 1px; text-align: center;}
.article form#SearchBlog button:hover {background: #DB4A39; color: #FFF; cursor:pointer;}
.article form#SearchBlog button.r {background: #FF4242;}
.article form#SearchBlog button.g {background: #42AA42;}
.article form#SearchBlog button.b {background: #4242FF;}

.bt1, .btn, .bt2, .bti {font-family: inherit; font-size: 1.4rem; font-weight: 600; margin: 5px; padding: 15px; border: 0px; box-shadow: #ABB 4px 4px 1px;}
.bt1 {border-radius: 15px 0px 0px 15px;}
.btn {border-radius: 0px 15px 0px 15px;}
.bt2 {border-radius: 0px 15px 15px 0px;}
.bti {border-radius: 15px 0px 15px 0px;}
span.bt1, span.btn, span.bt2, span.bti {background: #808080; color: #FFF; }
h2.bt1, h2.btn, h2.bt2, h2.bti {background: #DB4A39; color: #FFF; margin-top: 2rem;}
a.bt1, a.btn, a.bt2, a.bti {background: #3B5998; color: #FFF;}
a.bt1:hover, a.btn:hover, a.bt2:hover, a.bti:hover, .article form input:hover, .article form#SearchBlog input.btn:hover {background: #DB4A39; color: #FFF; cursor:pointer;}
/* Carrousel */
.article figure,
.tabs {margin: 25px 0 25px 0;}
.tabs ul.menu,
.tabs ul.invm {width:100%; list-style-type:none; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: end; margin:0; padding:0; overflow:hidden;}
.tabs ul.menu {flex-direction: row;}
.tabs ul.invm {flex-direction: row-reverse;}
.tabs ul.menu li,
.tabs ul.invm li {flex:1;}
.tabs ul.menu a,
.tabs ul.invm a {font-size: 0.9rem; font-weight: 500; font-variant-caps: small-caps;}
.tabs ul.menu li a, .tabs ul.menu li .urlencode,
.tabs ul.invm li a, .tabs ul.invm li .urlencode {display:block; color:#FFF; text-align:center; background-color:#3B5998; text-decoration:none; padding:0.6rem;}
.tabs ul.menu li a, .tabs ul.menu li .urlencode {margin:0 0 0 0.6rem; border-radius: 10px 10px 0px 0px;}
.tabs ul.invm li a, .tabs ul.invm li .urlencode {margin:0.3rem; border-radius: 5px 10px 5px 10px;}
.tabs ul.menu li a:hover, .tabs ul.menu li .urlencode:hover,
.tabs ul.invm li a:hover, .tabs ul.invm li .urlencode:hover {background-color:#DB4A39; color:#FFF; cursor:pointer;}
.tabs ul.menu li:first-child a, .tabs ul.menu li:first-child .urlencode,
.tabs ul.invm li:first-child a, .tabs ul.invm li:first-child .urlencode {margin-left:0;}
.tabs ul.menu li.active a, .tabs ul.menu li.active .urlencode,
.tabs ul.invm li.active a, .tabs ul.invm li.active .urlencode {background-color: #326400;}
.tabs ul.menu li.active a:hover, .tabs ul.menu li.active .urlencode:hover,
.tabs ul.invm li.active a:hover, .tabs ul.invm li.active .urlencode:hover {background-color:#DB4A39; color:#FFF; cursor:pointer;}
.tabs div {display:none; margin:0; padding:0;}
.tabs div.active {display:inline;}
/* Video */
.article video{top:0; left:0; width:100%; max-width:100%; height: auto; margin:0 auto; background-color:rgba(0,0,0,.7); z-index:0;}
.article .video-title{margin:1.8rem 0 0 0; text-align:center; font-size:smaller; color:#FFFFFF; background:#191919;}
.article .video-container  {margin:0 0 1.8rem 0; text-align:center; position:relative; overflow:hidden; width:100%; padding-top:56.25%;}
.article .video-container iframe{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
/* Main Nav Bar */
#navmain {position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 80px; line-height: 80px; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; padding: 0 30px 0 30px; margin: auto; z-index: 99; background: rgba(0, 0, 0, 0.75); box-shadow: rgba(0, 0, 0, 0.6) 0 0 20px; border-bottom: solid 1px rgba(255, 255, 255, 0.5); color: #FFF; /*background-image: url("/0/bg/r.svg"); background-position: center bottom; background-repeat: no-repeat; background-size: 2000px;*/}
body> #navmain{position: fixed;}
/* Debug Bar */
#debugbar {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 80px; line-height: 1.3em; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; padding: 0 16px 0 16px; margin: auto; z-index: 99; background: rgba(0, 0, 0, 0.75); border-top: solid 1px rgba(255, 255, 255, 0.5); color: #FFF;}
body> #debugbar{position: fixed;}
#debugbar ul {list-style: none; display: flex;}
#debugbar li {margin-right: 1rem;}
/* Main Logo */
#navmain header.logo a, #navmain header.logo p, #navmain header.logo h1 {margin: 0;}
#navmain header.logo a {text-transform: uppercase; color: #FFF; font-weight: 300;}
/* (Toggle) Mobile Button */
#navmain label.toggle span {display: none;}
#navmain label.toggle {width: 50px; height: 50px; position: relative; align-items: center; justify-content: center; color: #151515; cursor: pointer; border: solid 1px rgba(0, 0, 0, 0); z-index: 200;}
#navmain label.toggle::before {content: ""; position: absolute; width:60%; height: 3px; background-color: #FFF; box-shadow: 0 10px 0 #FFF;}
#navmain label.toggle::after {content: ""; position: absolute; width:60%; height: 3px; background-color: #FFF; transform: translateY(-10px) ;}
#navmain label.toggle:hover {background: rgba(255, 255, 255, 0.1); color: white; border: solid 1px rgba(255, 255, 255, 0.5);}
#navmain label.toggle:hover::after{background-color: #FFF;}
#navmain label.toggle:hover::before{background-color: #FFF; box-shadow: 0 10px 0 #FFF;}
#navmain #toggle, #navmain label.toggle {display: none;}
/* Main Menu */
#navmain input {display: none;}
#navmain ul.nav-links {list-style: none; display: flex; font-variant-caps: small-caps;}
#navmain ul.nav-links ul {list-style: none; margin: 0px;}
#navmain ul.nav-links ul.dropMenu {position: absolute;}
#navmain ul.nav-links .mobile-item, #navmain ul.nav-links a {color: #FFF; font-weight: 500; text-align: center; padding: 0px 12px 0px 12px;}
#navmain ul.nav-links a {display: block;}
#navmain ul.nav-links a.desktop-item {display: block;}
#navmain ul.nav-links label.mobile-item {display: none; cursor: pointer; position: relative; align-items: center; justify-content: center;}
#navmain ul.nav-links label.mobile-item:hover, #navmain ul.nav-links a:hover {background-color: rgba(59, 89, 152, 0.45); color: #FFF;}
#navmain span.nodesktop {display: none;}
#navmain .lrg {font-size: 1.2rem;}
#navmain .sml {font-size: 0.8rem;}
/* Drop Menu & Drop Box */
#navmain ul.nav-links ul.dropMenu, #navmain ul.nav-links div.dropBox {position: absolute; top: 80px; display: block; visibility: hidden; line-height: 38px; background: rgba(0, 0, 0, 0.90); box-shadow: rgba(0, 0, 0, 0.6) 0 0 20px;}
#navmain ul.nav-links ul.dropMenu {top: 80px; min-width: 180px;}
#navmain ul.nav-links div.dropBox {top: 80px; width: 100%; left: 0;}
#navmain ul.nav-links li:hover ul.dropMenu, #navmain ul.nav-links li:hover div.dropBox {visibility: visible;}
#navmain ul.nav-links ul.dropMenu li a {width: 100%; border: 0; text-align: left;}
/* Footer */
#footer {display: block; position: relative; font-size: 0.8rem; font-weight:300; padding: 20px 8% 0px 8%; color: #CBCBCB; text-shadow: #373737 0 0 2px; background-color: #16130F; background-image: url("/0/bg/ltl.svg"),url("/0/bg/ltr.svg"),url("/0/bg/F1.jpg"); background-position: top left,top right,top right; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 400px, 400px, cover; box-shadow: rgba(0, 0, 0, 1) 0 0 4px; width: 100%; /*min-height: 380px;*/}
#footer footer, #footer aside {position: relative; width: 100%; font-style:normal;}
#footer footer {display: grid; grid-template-columns: repeat(5, 20%); grid-template-rows: auto; align-items:stretch; grid-template-areas: "A B C D I" "E E E E I";}
#footer .Nav1 {grid-area: A;}
#footer .Nav2 {grid-area: B;}
#footer .Nav3 {grid-area: C;}
#footer .Nav4 {grid-area: D;}
#footer aside {grid-area: E; margin-bottom: 20px;}
#footer picture {grid-area: I;}
#footer .big {font-size: 0.8rem; font-weight: 600;}
#footer a {color: #CBCBCB; font-weight: 300;}
#footer a:hover {color:#DB4A39;}
#footer .faico a:hover {color:#FFF;}
#footer address {margin-top: 1.0rem; font-weight: 300;}
#sign {font-size: 0.8rem;}
/* flexRoc, flexCol, gridBox */
.flexRow, .flexCol, .gridBox {width: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.flexL {justify-content:left;}
.flexR {justify-content:right;}
.flexC {justify-content:center;}
.flexJ {justify-content:justify;}
.flexRow, .flexCol {display: flex; flex-direction: row;}
.gridBox {display: grid; grid-template-columns: repeat(5, 20%); grid-template-rows: auto; align-items:stretch; grid-template-areas: "H H . . ." "H H . . .";}
.HF {grid-template-areas:
    "H H . A ."
    "H H C F F"
    ". B . F F";}
.HIF {grid-template-areas:
    "H H . I I"
    "H H . . ."
    ". . . F F"
    ". . . F F";}
.flexCol>* {flex:0 0 50%;}
.flexRow>* {flex:0 0 20%;}
.H {grid-area: H;}
.HF .H {grid-area: H;}
.HF .F {grid-area: F;}
.HF .A {grid-area: A;}
.HF .B {grid-area: B;}
.HF .C {grid-area: C;}
.HIF .I {grid-area: I;}
.flexPic, .flexDiv, .flexNav {text-align: center; align-items: center; position: relative; display: block; padding: 15px; height:100%; width: 100%;}
.flexRow img, .gridBox img, .flexCol img, .flexRow picture, .gridBox picture, .flexCol picture {width: 100%; height: 100%; object-fit: cover;}
.flexNav header {font-size: large;}
.flexNav ul {list-style: none;}
/* figLink et noLink */
.flexRow figure.noLink, .flexRow a.figLink,
.flexCol figure.noLink, .flexCol a.figLink,
.gridBox figure.noLink, .gridBox a.figLink {
    display: flex;
    position: relative;
    height: 100%;
    width: auto;
    margin: 0px;
    padding: 0px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    background-color: #373737;
    border-radius: 0px 0px 15px 0px;
}
.flexCol figure.noLink, .flexCol a.figLink {border: 1px solid #373737; box-shadow: #566 8px 8px 1px; border-radius: 0px 0px 15px 0px;}
.flexRow figure.noLink, .flexRow a.figLink,
.gridBox figure.noLink, .gridBox a.figLink {flex-direction: column-reverse;}
.flexCol figure.noLink, .flexCol a.figLink {flex-direction: row-reverse;}
.flexRow figure.noLink picture, .flexRow a.figLink picture, 
.gridBox figure.noLink picture, .gridBox a.figLink picture {display: block; padding: 0px; width: 100%;}
.flexCol figure.noLink picture, .flexCol a.figLink picture {display: block; height: 60px; flex: 1;}
.flexRow figure.noLink img, .flexRow a.figLink img, 
.gridBox figure.noLink img, .gridBox a.figLink img {border: 1px solid #373737; box-shadow: #566 8px 8px 1px; border-radius: 0px 0px 15px 0px;}
.flexRow figure.noLink figcaption, .flexRow a.figLink span,
.gridBox figure.noLink figcaption, .gridBox a.figLink span {display: block; position: absolute; bottom: 0; width: 100%; padding: 0.4rem ; line-height: 1.3em; font-variant-caps: small-caps; color: #fff; border: 1px solid #373737; background-color: #373737; border-radius: 0px 0px 15px 0px; /* overflow: hidden; text-overflow: ellipsis; */}
.flexCol figure.noLink figcaption, .flexCol a.figLink span {display: block; position: relative; height: 60px; flex: 3; padding: 0.2rem 0.5rem 0.2rem 0.5rem ; border: none; font-variant-caps: normal; background-color: #EEE; color: #373737; border-radius: 0px 0px 15px 0px;}
/* figLink HOVER */
a.figLink:hover, a.figLink:hover span, a.figLink:hover picture, a.figLink:hover img {border-color: #DB4A39; background-color: #DB4A39; color: #fff;}
/* flexTxt - A VOIR PLUS TARD *//*
.flexTxt header {width: 100%; padding: 10px; font-size: 1.4rem; font-weight: 600;}
.flexTxt ul {list-style: none;}
.flexTxt li,
.flexTxt li a {height: 30px; line-height: 30px;} */
.flexTxt {display: block; padding: 0.4rem; margin: 1.0rem 0 0 0; font-size: initial; }
.flexTxt ul {text-align: left; margin: 0 0 0 1.2rem; padding: 0; list-style: square; list-style-position: inside;}
.flexTxt a {font-size: initial; font-weight: 600;}

/* Entête(s) du site */
#banner {display: block; position: relative; background-attachment: scroll; background-color: #16130F; background-image: url("/0/bg/H1.jpg"); background-position: bottom center; background-repeat: no-repeat; background-size: cover; box-shadow: rgba(0, 0, 0, 1) 0 0 4px; height: 680px; padding: 0; color: #fff; cursor: default; text-align: center; text-shadow: #16130F 0 0 4px;}
#banner img{width: 650px;}
#banner #top {position: absolute; left: 0; bottom: 0; background-attachment: scroll; background-image: url("/0/bg/lbl.php"),url("/0/bg/lbr.php"); background-position: bottom left,bottom right; background-repeat: no-repeat; background-size: 400px; width: 100%; height: 440px; padding-top: 80px; /*background-color: rgba(255, 0, 0, 0.5);*/}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-top: solid 1px rgba(0, 0, 0, 0.50);
    border-bottom: solid 1px rgba(0, 0, 0, 0.50);
}
.carousel .slider {
    width: 100%;
    overflow: hidden;
}
.carousel .slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel .slider-track img,
.carousel .slider figure {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    object-fit: cover;
}
.carousel .slider figure img {
    width: 100%;
    height: auto;
    display: block;
}
.carousel .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    background-color: rgba(0,0,0,0.35);
    height: 100%;
    max-height: 100%;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    z-index: 10;
}
.carousel .nav.prev {left: 0px;}
.carousel .nav.next {right: 0px;}
.carousel .nav:hover {background-color: rgba(0, 0, 0, 0.65);}
/* Ronds (dots) */
.carousel .carousel-dots {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}
.carousel .carousel-dots button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}
.carousel .carousel-dots button:hover {background-color: rgba(0, 0, 0, 0.2);}
.carousel .carousel-dots button.active {background: white;}
/* Zone de titre/commentaire */
.carousel figcaption {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background: rgba(0, 0, 0, 0.35);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
/* Ligne bouton + titre */
.carousel figcaption .cmtHead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Pour éviter l'empilement */
.carousel figcaption .cmtHead span {
    display: inline;
    font-size: 1rem;
    font-weight:600;
    white-space: nowrap;
}
.carousel figcaption.collapsed .cmtBody {display: none;}
/* Ligne du bouton + titre */
.carousel figcaption > .toggle-caption,
.carousel figcaption > span {
    display: inline-block;
    vertical-align: middle;
}
.carousel figcaption > span {
    margin-left: 0.5rem;
    font-size: 1rem;
}
/* Bouton stylisé */
.carousel figcaption .toggle-caption {
    background-color: rgba(0, 0, 0, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.carousel figcaption .toggle-caption:hover {background-color: rgba(128, 128, 255, 0.2);}

/* Media Screen */
@media screen and (max-width:1680px){
    .ariane {padding: 0px 6% 0px 6%;}
    .article {padding: 40px 5% 40px 5%;}
    #footer {background-image: url("/0/bg/ltl.svg"),url("/0/bg/ltr.svg"),url("/0/bg/F1.jpg"); padding: 20px 5% 0px 5%;}
    #banner {background-image: url("/0/bg/H1.jpg"); height: 680px;}
    #banner #top {padding: 80px 0;}
}
@media screen and (max-width:1440px){
    .article {padding: 40px 4% 40px 4%;}
    #footer {padding: 20px 4% 0px 4%;}
}
@media screen and (max-width:1380px){
    #footer {background-image: url("/0/bg/ltl.svg"),url("/0/bg/ltr.svg"),url("/0/bg/F1_680.jpg");}
    #banner {background-image: url("/0/bg/H1_680.jpg"); height: 680px;}
    #banner #top {padding: 90px 0;}
}
@media screen and (max-width:1280px){
    section.C12, section.C21, section.C3 {display: block;}
    section.C12 article.new header, section.C21 article.new header, section.C3 article.new header {border-top: 3px solid #373737; margin-top: 1.2rem; padding-top: 4.8rem;}
    .ariane {padding: 0px 40px 0px 40px;}
    .article {padding: 40px;}
    .article header h1,
    .article header h2 {font-size: 5.2rem;}
    .article header h3 {font-size: 4.8rem;}
    #footer {padding: 20px 40px 0px 40px; background-size: 400px, 400px, cover;}
    #footer footer {grid-template-columns: repeat(4, 25%); grid-template-areas: "A B C I" "A B D I" "E E E I";}
}
@media screen and (max-width:1180px){
    #banner {background-image: url("/0/bg/H1_580.jpg"); height: 580px;}
    #banner #top {padding: 100px 0;}
}
@media screen and (max-width:1150px){
    #footer {background-image: url("/0/bg/ltl.svg"),url("/0/bg/ltr.svg"),url("/0/bg/F1_580.jpg");}
    #footer footer {grid-template-columns: repeat(4, 25%); grid-template-areas: "A B C I" "A B D I" "E E E E";}
}
@media screen and (max-width:1020px){
    /* html {font-size: 1.1em; letter-spacing:0.025rem; line-height:1.5rem;} */
    section.C2 {display: block;}
    section.C2 article.new header {border-top: 3px solid #373737; margin-top: 1.2rem; padding-top: 4.8rem;}
    .carousel .carousel-dots button {
        width: 10px;
        height: 10px;
    }
}
@media screen and (max-width:820px) {
    #navmain ul.nav-links {position: fixed; width: 100%; height: 100vh; top: 0; left: -100%; display: block; transition: all 0.3s ease; padding: 96px 0px; margin: 0; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; background: rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
    #toggle:checked + ul.nav-links {left: 0px;}
    #navmain ul.nav-links .mobile-item,
    #navmain ul.nav-links a { text-align: left; padding: 0px 16px 0px 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
    #navmain span.nodesktop {display: inline-block;}
    #navmain .lrg, #navmain .sml {font-size: inherit;}
    #navmain label.toggle {display: flex;}
/*  #navmain ul.nav-links li {padding: 20px 0px; margin: 0;} */
    #navmain ul.nav-links a.desktop-item {display: none;}
    #navmain ul.nav-links label.mobile-item {display: block;}
/*  ul.nav-links .subMenu {display: none;} */
    #navmain ul.nav-links div.dropBox, #navmain ul.nav-links ul.dropMenu {display: none; visibility: visible; position: static; width: 100%; overflow: hidden; box-shadow: none; background: none; margin: 0px 0px 0px 8px; padding: 0; line-height: 52px; border-left: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
/*  Incompatible avec les classes de fa-icon
    #navmain ul.nav-links label.mobile-item::before {content: ""; position: absolute; bottom: 2px; left: 7px; width: 3px; height: 11px; background-color: rgba(255, 255, 255, 0.75); }
    #navmain ul.nav-links label.mobile-item::after {content: ""; position: absolute; bottom: 6px; left: 3px; width: 11px; height: 3px; background-color: rgba(255, 255, 255, 0.75);} */
/*  div.content div.row header {font-size: 1.0rem;} */
    input#inputDrop1:checked~ul#showDrop1, input#inputDrop2:checked~ul#showDrop2, input#inputDrop3:checked~ul#showDrop3, input#inputDrop4:checked~ul#showDrop4, input#inputDrop5:checked~ul#showDrop5, input#inputDrop6:checked~ul#showDrop6, input#inputDrop7:checked~ul#showDrop7, input#inputDrop8:checked~ul#showDrop8 {display: block;}
/*  input#showMega1:checked~div#showMega1,
    input#showMega2:checked~div#showMega2,
    input#showMega3:checked~div#showMega3,
    input#showMega4:checked~div#showMega4,
    input#showMega5:checked~div#showMega5,
    input#showMega6:checked~div#showMega6,
    input#showMega7:checked~div#showMega7,
    input#showMega8:checked~div#showMega8 {max-height: 100%;} */
    #footer footer {grid-template-columns: repeat(3, 50%); grid-template-areas: "A B" "A B" "C C" "D D" "I I" "E E";}
    tr {white-space:initial;}
    .carousel .carousel-dots {display: none;}
    .carousel figcaption {
        position: static;
        transform: none;
        width: 100%;
        background: rgba(255, 255, 255, 0.35);
        color: black;
        padding: 1rem;
        border-radius: 0rem;
    }
    .carousel figcaption .toggle-caption {display: none !important;}
    .carousel .nav {
        top: 2.5rem;
        background-color: rgba(0, 0, 0, 0.50);
        border: 1px solid rgba(255, 255, 255, 0.75);
        border-radius: 0.5rem;
        color: white;
        cursor: pointer;
        padding: 0.25rem;
        font-size: 1.2rem;
        width: 4rem;
        height: 4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .carousel .nav.prev {left: 0.5rem;}
    .carousel .nav.next {right: 0.5rem;}
}
@media screen and (max-width:680px){
    .article header h1 {font-size: 4.8rem;}
    .article header h2 {font-size: 4.2rem;}
    .article header h3 {font-size: 3.6rem;}
    #footer {background-image: url("/0/bg/ltl.svg"),url("/0/bg/ltr.svg"),url("/0/bg/F1_480.jpg");}
    #banner {background-image: url("/0/bg/H1_480.jpg"); height: 530px;}
    #banner #top {padding: 120px 0;}
    .article blockquote.fr,
    .article blockquote.uk {margin:0.6rem; line-height:1.8rem; font-size: 1.5rem;}
}
@media screen and (max-width:520px){
    html {line-height:1.65rem;}
    .lock tr :first-child {position:relative;}
    .lock tr:first-child.head {position: relative;}
}
@media screen and (max-width:480px){
    #footer {background-image: url("/0/bg/ltl.svg"),url("/0/bg/ltr.svg"),url("/0/bg/F1_380.jpg");}
    #banner {background-image: url("/0/bg/H1_380.jpg"); height: 480px;}
    #banner #top {padding: 180px 0;}
    .article {padding: 40px 30px 40px 30px;}
    .article blockquote.fr,
    .article blockquote.uk {margin:0.2rem; line-height:1.6rem; font-size: 1.4rem;}
    .article ul {margin: 16px;}
    .article form#SearchBlog ul {margin: 16px 0px 20px 0px;}
    .article form#SearchBlog li,
    .article form#SearchBlog p {margin: 0px;}
    .article form#SearchBlog input,
    .article form#SearchBlog select {max-width: 80%;}
}
/* Media Container */
@container (max-width:1600px){
    .flexCol>* {flex:0 0 50%;}
    .flexRow>* {flex:0 0 25%;}
    .gridBox {grid-template-columns: repeat(4, 25%); grid-template-areas: "H H . ." "H H . .";}
    .HF {grid-template-areas:
        "H H F ."
        "H H C A"
        ". B . .";}
}
@container (max-width:1200px){
    .flexCol>* {flex:0 0 50%;}
}
@container (max-width:1100px){
    .flexCol>* {flex:0 0 100%;}
    .flexRow>* {flex:0 0 33%;}
    .gridBox {grid-template-columns: repeat(3, 33%); grid-template-areas: "H H ." "H H .";}
    .HF {grid-template-areas:
        "H H F"
        "H H A"
        ". C ."
        "B . .";}
}
@container (max-width:800px){
    .gridBox {display: flex; flex-direction: row;}
    .flexCol>* {flex:0 0 100%;}
    .flexRow>* {flex:0 0 100%;}
    .gridBox>* {flex:0 0 100%;}
    .flexRow figure.noLink, .flexRow a.figLink,
    .gridBox figure.noLink, .gridBox a.figLink {border: 1px solid #373737; box-shadow: #566 8px 8px 1px; border-radius: 0px 0px 15px 0px; flex-direction: row-reverse;}
    .flexRow figure.noLink picture, .flexRow a.figLink picture, 
    .gridBox figure.noLink picture, .gridBox a.figLink picture {height: 60px; flex: 1;}
    .flexRow figure.noLink img, .flexRow a.figLink img, 
    .gridBox figure.noLink img, .gridBox a.figLink img {border: none; box-shadow: none; border-radius: 0px;}
    .flexRow figure.noLink figcaption, .flexRow a.figLink span,
    .gridBox figure.noLink figcaption, .gridBox a.figLink span {display: block; position: relative; height: 60px; flex: 3; padding: 0.2rem 0.5rem 0.2rem 0.5rem ; font-variant-caps: normal; border: none; background-color: #EEE; color: #373737; border-radius: 0px 0px 15px 0px;}
    a.figLink:hover, a.figLink:hover span, a.figLink:hover picture, a.figLink:hover img {border-color: #DB4A39; background-color: #DB4A39; color: #fff;}
}
@container (max-width:540px){
    .article blockquote.rc {margin: 3rem 5% 3rem 5%;}
    /*  .flexRow, .gridBox {flex-direction: column;} */
}
/* Font Awesome Fontello (base) */
.fa::before, .fa::after, .fal::before, .far::after, .falist::before, .faico a::before {font-family:"Font Awesome Fontello";}
.fa2::before, .fa2::after {font-family:"Fontello2 Font Icons";}
.fa3::before, .fa3::after {font-family:"Fontello3 XTra Font";}
.fa4::before, .fa4::after {font-family:"Fontelico";}
.sci::before, .sci::after {font-family:"Star Citizen Font Icons";}
.fa::before, .fa::after, .fal::before, .far::after, .fa2::before, .fa2::after, .fa3::before, .fa3::after, .fa4::before, .fa4::after, .falist::before, .sci::before, .sci::after, .faico a::before {-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; text-rendering:auto; font-size: inherit; font-style: normal; display: inline-block;}

.falist {list-style-type: none; margin-left: 2rem;}
.faico {margin:0; padding:0; list-style:none;}
.faico li {display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child {margin-right:0;}
.faico a, .faico .urlencode, .faico span {display:inline-block; width:36px; height:36px; line-height:36px; font-size:1.2rem; text-align:center;}
.faico a, .faico .urlencode, .faico span {color:#FFFFFF; background-color:rgba(162,183,13,.5); font-style: normal; font-weight: 300;}
.faico a:hover {background-color:#DB4A39; color:#FFFFFF;}
.faico .fa-rss-square:hover {background-color:#f78422;}
.faico .fa-youtube:hover{background-color:#E63128;}
.faico .fa-dribble:hover{background-color:#EA4C89;}
.faico .fa-facebook:hover{background-color:#3B5998;}
.faico .fa-google-plus:hover{background-color:#DB4A39;}
.faico .fa-linkedin:hover{background-color:#0E76A8;}
.faico .fa-twitter:hover{background-color:#00ACEE;}
.faico .fr, .faico .es, .faico .de, .faico .en, .faico .it {margin-top: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: transparent; filter: brightness(0.75)}
.faico .fr:hover, .faico .es:hover, .faico .de:hover, .faico .en:hover, .faico .it:hover {filter: brightness(1.00); cursor: pointer; background-color: transparent;}
.faico .fr {background-image: url("/0/flag/fr.svg");}
.faico .es {background-image: url("/0/flag/es.svg");}
.faico .de {background-image: url("/0/flag/de.svg");}
.faico .en {background-image: url("/0/flag/en.svg");}
.faico .it {background-image: url("/0/flag/it.svg");}
/* Font Awesome Fontello (fa/default) */
.fa-lock::before, .fa-lock::after {content:'\e800';}
.fa-map-marker::before, .fa-map-marker::after {content:'\e801';}
.fa-minus::before, .fa-minus::after {content:'\e802';}
.fa-paperclip::before, .fa-paperclip::after {content:'\e803';}
.fa-plus::before, .fa-plus::after {content:'\e804';}
.fa-question::before, .fa-question::after {content:'\e805';}
.fa-rebel::before, .fa-rebel::after {content:'\e806';}
.fa-rss-square::before, .fa-rss-square::after {content:'\e807';}
.fa-search::before, .fa-search::after {content:'\e808';}
.fa-undo::before, .fa-undo::after {content:'\e809';}
.fa-unlink::before, .fa-unlink::after {content:'\e80a';}
.fa-unlock::before, .fa-unlock::after {content:'\e80b';}
.fa-youtube::before, .fa-youtube::after {content:'\e80c';}
.fa-blog::before, .fa-blog::after {content:'\e80d';}
.fa-bug::before, .fa-bug::after {content:'\e80e';}
.fa-chevron-down::before, .fa-chevron-down::after {content:'\e80f';}
.fa-chevron-left::before, .fa-chevron-left::after {content:'\e810';}
.fa-chevron-right::before, .fa-chevron-right::after {content:'\e811';}
.fa-chevron-up::before, .fa-chevron-up::after {content:'\e812';}
.fa-coffee::before, .fa-coffee::after {content:'\e813';}
.fa-envelope-open::before, .fa-envelope-open::after {content:'\e814';}
.fa-globe::before, .fa-globe::after {content:'\e815';}
.fa-hands-helping::before, .fa-hands-helping::after {content:'\e816';}
.fa-history::before, .fa-history::after {content:'\e817';}
.fa-home::before, .fa-home::after {content:'\e818';}
.fa-info::before, .fa-info::after {content:'\e819';}
.fa-link::before, .fa-link::after {content:'\e81a';}
/* Font Awesome Fontello (fa2) */
.fa-heart::before, .fa-heart::after {content:'\e800';}
.fa-heart-empty::before, .fa-heart-empty::after {content:'\e801';}
.fa-star::before, .fa-star::after {content:'\e802';}
.fa-star-empty::before, .fa-star-empty::after {content:'\e803';}
.fa-star-half::before, .fa-star-half::after {content:'\e804';}
.fa-bell::before, .fa-bell::after {content:'\e805';}
.fa-thumbs-up::before, .fa-thumbs-up::after {content:'\e806';}
.fa-thumbs-down::before, .fa-thumbs-down::after {content:'\e807';}
.fa-hand-right::before, .fa-right-hand::after {content:'\e808';}
.fa-hand-left::before, .fa-left-hand::after {content:'\e809';}
.fa-hand-up::before, .fa-up-hand::after {content:'\e80a';}
.fa-hand-down::before, .fa-down-hand::after {content:'\e80b';}
.fa-bell-alt::before, .fa-bell-alt::after {content:'\f0f3';}
.fa-star-half-alt::before, .fa-star-half-alt::after {content:'\f123';}
.fa-sort-name-up::before, .fa-sort-name-up::after {content:'\f15d';}
.fa-sort-name-down::before, .fa-sort-name-down::after {content:'\f15e';}
.fa-sort-alt-up::before, .fa-sort-alt-up::after {content:'\f160';}
.fa-sort-alt-down::before, .fa-sort-alt-down::after {content:'\f161';}
.fa-sort-number-up::before, .fa-sort-number-up::after {content:'\f162';}
.fa-sort-number-down::before, .fa-sort-number-down::after {content:'\f163';}
.fa-thumbs-up-alt::before, .fa-thumbs-up-alt::after {content:'\f164';}
.fa-thumbs-down-alt::before, .fa-thumbs-down-alt::after {content:'\f165';}
.fa-bell-off::before, .fa-bell-off::after {content:'\f1f6';}
.fa-bell-off-empty::before, .fa-bell-off-empty::after {content:'\f1f7';}
.fa-heartbeat::before, .fa-heartbeat::after {content:'\f21e';}
.fa-battery-4::before, .fa-battery-4::after {content:'\f240';}
.fa-battery-3::before, .fa-battery-3::after {content:'\f241';}
.fa-battery-2::before, .fa-battery-2::after {content:'\f242';}
.fa-battery-1::before, .fa-battery-1::after {content:'\f243';}
.fa-battery-0::before, .fa-battery-0::after {content:'\f244';}
/* Fontello3 XTra Font (fa4) */
.fa-ok::before, .fa-ok::after {content:'\e800';}
.fa-cancel::before, .fa-cancel::after {content:'\e801';}
.fa-mail::before, .fa-mail::after {content:'\e802';}
.fa-pin::before, .fa-pin::after {content:'\e803';}
.fa-attach::before, .fa-attach::after {content:'\e804';}
.fa-export::before, .fa-export::after {content:'\e805';}
.fa-doc::before, .fa-doc::after {content:'\e806';}
.fa-cog::before, .fa-cog::after {content:'\e807';}
.fa-wrench::before, .fa-wrench::after {content:'\e808';}
.fa-login::before, .fa-login::after {content:'\e809';}
.fa-logout::before, .fa-logout::after {content:'\e80a';}
.fa-award::before, .fa-award::after {content:'\e80b';}
.fa-cloud::before, .fa-cloud::after {content:'\e80c';}
.fa-flash::before, .fa-flash::after {content:'\e80d';}
.fa-umbrella::before, .fa-umbrella::after {content:'\e80e';}
.fa-fire::before, .fa-fire::after {content:'\e80f';}
.fa-asterisk::before, .fa-asterisk::after {content:'\e810';}
.fa-check::before, .fa-check::after {content:'\e811';}
.fa-adjust::before, .fa-adjust::after {content:'\e812';}
.fa-comment::before, .fa-comment::after {content:'\e813';}
.fa-chat::before, .fa-chat::after {content:'\e814';}
.fa-gift::before, .fa-gift::after {content:'\e815';}
.fa-print::before, .fa-print::after {content:'\e816';}
.fa-eye::before, .fa-eye::after {content:'\e817';}
.fa-eye-off::before, .fa-eye-off::after {content:'\e818';}
.fa-tag::before, .fa-tag::after {content:'\e819';}
.fa-tags::before, .fa-tags::after {content:'\e81a';}
.fa-bookmark::before, .fa-bookmark::after {content:'\e81b';}
.fa-clock::before, .fa-clock::after {content:'\e81c';}
.fa-folder::before, .fa-folder::after {content:'\e81d';}
.fa-folder-open::before, .fa-folder-open::after {content:'\e81e';}
.fa-link-ext::before, .fa-link-ext::after {content:'\f08e';}
.fa-check-empty::before, .fa-check-empty::after {content:'\f096';}
.fa-bookmark-empty::before, .fa-bookmark-empty::after {content:'\f097';}
.fa-twitter::before, .fa-twitter::after {content:'\f099';}
.fa-facebook::before, .fa-facebook::after {content:'\f09a';}
.fa-rss::before, .fa-rss::after {content:'\f09e';}
.fa-menu::before, .fa-menu::after {content:'\f0c9';}
.fa-sort::before, .fa-sort::after {content:'\f0dc';}
.fa-sort-down::before, .fa-sort-down::after {content:'\f0dd';}
.fa-sort-up::before, .fa-sort-up::after {content:'\f0de';}
.fa-mail-alt::before, .fa-mail-alt::after {content:'\f0e0';}
.fa-comment-empty::before, .fa-comment-empty::after {content:'\f0e5';}
.fa-chat-empty::before, .fa-chat-empty::after {content:'\f0e6';}
.fa-lightbulb::before, .fa-lightbulb::after {content:'\f0eb';}
.fa-food::before, .fa-food::after {content:'\f0f5';}
.fa-doc-text::before, .fa-doc-text::after {content:'\f0f6';}
.fa-beer::before, .fa-beer::after {content:'\f0fc';}
.fa-desktop::before, .fa-desktop::after {content:'\f108';}
.fa-laptop::before, .fa-laptop::after {content:'\f109';}
.fa-tablet::before, .fa-tablet::after {content:'\f10a';}
.fa-mobile::before, .fa-mobile::after {content:'\f10b';}
.fa-circle-empty::before, .fa-circle-empty::after {content:'\f10c';}
.fa-quote-left::before, .fa-quote-left::after {content:'\f10d';}
.fa-quote-right::before, .fa-quote-right::after {content:'\f10e';}
.fa-circle::before, .fa-circle::after {content:'\f111';}
.fa-folder-empty::before, .fa-folder-empty::after {content:'\f114';}
.fa-folder-open-empty::before, .fa-folder-open-empty::after {content:'\f115';}
.fa-smile::before, .fa-smile::after {content:'\f118';}
.fa-frown::before, .fa-frown::after {content:'\f119';}
.fa-meh::before, .fa-meh::after {content:'\f11a';}
.fa-gamepad::before, .fa-gamepad::after {content:'\f11b';}
.fa-keyboard::before, .fa-keyboard::after {content:'\f11c';}
.fa-terminal::before, .fa-terminal::after {content:'\f120';}
.fa-code::before, .fa-code::after {content:'\f121';}
.fa-attention-alt::before, .fa-attention-alt::after {content:'\f12a';}
.fa-shield::before, .fa-shield::after {content:'\f132';}
.fa-anchor::before, .fa-anchor::after {content:'\f13d';}
.fa-ellipsis::before, .fa-ellipsis::after {content:'\f141';}
.fa-ellipsis-vert::before, .fa-ellipsis-vert::after {content:'\f142';}
.fa-link-ext-alt::before, .fa-link-ext-alt::after {content:'\f14c';}
.fa-export-alt::before, .fa-export-alt::after {content:'\f14d';}
.fa-euro::before, .fa-euro::after {content:'\f153';}
.fa-pound::before, .fa-pound::after {content:'\f154';}
.fa-dollar::before, .fa-dollar::after {content:'\f155';}
.fa-doc-text-inv::before, .fa-doc-text-inv::after {content:'\f15c';}
.fa-youtube-squared::before, .fa-youtube-squared::after {content:'\f166';}
.fa-youtube-alt::before, .fa-youtube-alt::after {content:'\f167';}
.fa-sun::before, .fa-sun::after {content:'\f185';}
.fa-moon::before, .fa-moon::after {content:'\f186';}
.fa-box::before, .fa-box::after {content:'\f187';}
.fa-dot-circled::before, .fa-dot-circled::after {content:'\f192';}
.fa-reddit::before, .fa-reddit::after {content:'\f1a1';}
.fa-reddit-squared::before, .fa-reddit-squared::after {content:'\f1a2';}
.fa-paw::before, .fa-paw::after {content:'\f1b0';}
.fa-circle-thin::before, .fa-circle-thin::after {content:'\f1db';}
.fa-bomb::before, .fa-bomb::after {content:'\f1e2';}
.fa-twitch::before, .fa-twitch::after {content:'\f1e8';}
.fa-paypal::before, .fa-paypal::after {content:'\f1ed';}
.fa-paypal-cc::before, .fa-paypal-cc::after {content:'\f1f4';}
.fa-diamond::before, .fa-diamond::after {content:'\f219';}
.fa-user-secret::before, .fa-user-secret::after {content:'\f21b';}
.fa-venus::before, .fa-venus::after {content:'\f221';}
.fa-mars::before, .fa-mars::after {content:'\f222';}
.fa-transgender::before, .fa-transgender::after {content:'\f224';}
.fa-facebook-official::before, .fa-facebook-official::after {content:'\f230';}
.fa-commenting::before, .fa-commenting::after {content:'\f27a';}
.fa-commenting-o::before, .fa-commenting-o::after {content:'\f27b';}
.fa-reddit-alien::before, .fa-reddit-alien::after {content:'\f281';}
.fa-twitter-squared::before, .fa-twitter-squared::after {content:'\f304';}
/* Fontalico (fa3) */
.fa-emo-happy::before, .fa-emo-happy::after {content:'\e800';}
.fa-emo-wink::before, .fa-emo-wink::after {content:'\e801';}
.fa-emo-unhappy::before, .fa-emo-unhappy::after {content:'\e802';}
.fa-emo-sleep::before, .fa-emo-sleep::after {content:'\e803';}
.fa-emo-thumbsup::before, .fa-emo-thumbsup::after {content:'\e804';}
.fa-emo-devil::before, .fa-emo-devil::after {content:'\e805';}
.fa-emo-surprised::before, .fa-emo-surprised::after {content:'\e806';}
.fa-emo-tongue::before, .fa-emo-tongue::after {content:'\e807';}
.fa-emo-coffee::before, .fa-emo-coffee::after {content:'\e808';}
.fa-emo-sunglasses::before, .fa-emo-sunglasses::after {content:'\e809';}
.fa-emo-displeased::before, .fa-emo-displeased::after {content:'\e80a';}
.fa-emo-beer::before, .fa-emo-beer::after {content:'\e80b';}
.fa-emo-grin::before, .fa-emo-grin::after {content:'\e80c';}
.fa-emo-angry::before, .fa-emo-angry::after {content:'\e80d';}
.fa-emo-saint::before, .fa-emo-saint::after {content:'\e80e';}
.fa-emo-cry::before, .fa-emo-cry::after {content:'\e80f';}
.fa-emo-shoot::before, .fa-emo-shoot::after {content:'\e810';}
.fa-emo-squint::before, .fa-emo-squint::after {content:'\e811';}
.fa-emo-laugh::before, .fa-emo-laugh::after {content:'\e812';}
.fa-emo-wink2::before, .fa-emo-wink2::after {content:'\e813';}
/* Star Citizen (sci) */
.fa-cooler::before, .fa-cooler::after {content:'\e800';}
.fa-power_plant::before, .fa-power_plant::after {content:'\e801';}
.fa-shield_generator::before, .fa-shield_generator::after {content:'\e802';}
.fa-quantum_drive::before, .fa-quantum_drive::after {content:'\e803';}
.fa-jump_module::before, .fa-jump_module::after {content:'\e804';}
.fa-computers::before, .fa-computers::after {content:'\e805';}
.fa-fuel_intakes::before, .fa-fuel_intakes::after {content:'\e806';}
.fa-fuel_tanks::before, .fa-fuel_tanks::after {content:'\e807';}
.fa-qt_fuel_tank::before, .fa-qt_fuel_tank::after {content:'\e808';}
.fa-main_thruster::before, .fa-main_thruster::after {content:'\e809';}
.fa-manoeuvering_thruster::before, .fa-manoeuvering_thruster::after {content:'\e80a';}
.fa-weapons::before, .fa-weapons::after {content:'\e80b';}
.fa-turrets::before, .fa-turrets::after {content:'\e80c';}
.fa-utility_items::before, .fa-utility_items::after {content:'\e80d';}
.fa-missiles::before, .fa-missiles::after {content:'\e80e';}
/* A garder ici, pour la surcharge des classes précédents ! */
.fa::before, .fal::before {padding-right: 0.3rem;}
.fa::after, .far::after {padding-left: 0.3rem;}
.falist::before {text-align:center; line-height:inherit; width: 2rem; margin-left: -2rem;}
.fal::after, .falist::after, .faico a::after {padding-left: 0; content: "";}
.far::before {padding-right: 0; content: "";}
/* AUTRES */
.color-box {display: inline-block; width: 30px; height: 30px; border: 1px solid #aaa; border-radius: 4px; margin-right: 3px; position: relative;}
.color-box:hover::after {content: attr(data-color); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); padding: 3px 6px; background: rgba(0, 0, 0, 0.75); color: white; font-size: 12px; border-radius: 3px; white-space: nowrap;}