@import url(https://fonts.googleapis.com/css2?family=Special+Elite&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Nunito&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Pangolin&display=swap);

@font-face {
    font-family: OpenDyslexic;
    src: url(../font/dys/OpenDyslexic3-Regular.ttf)
}

@font-face {
    font-family: OpenDyslexic-Bold;
    src: url(../font/dys/OpenDyslexic3-Bold.ttf)
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bleu: #066398;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --rose: #c32361;
    --rouge: #dd4b39;
    --orange: #eab92d;
    --orangeFonce: hsl(33, 100%, 50%);
    --jaune: #fb3;
    --vert: #44a299;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --blanc: #ffff;
    --noir: #0000;
    --brun: brown;
    --gris: #4b515d;
    --violet: #123872;
    --gris-sombre: #343a40;
    --gainsboro: gainsboro;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --sombre: #212529;
    --sm: 40em --md:60em;
    --fondSection: hsl(0, 0%, 12%);
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

html {
    scroll-behavior: smooth
}

body {
    background: #1a1a1a url(../img/front/black_denim.jpg);
    color: #fff;
    font-family: 'Nunito Sans', sans-serif ;margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container-fluid {
    max-width: 1260px;
    margin: 0 auto;
    padding-right: 0 2rem 3rem 0;
}
h1 {font-family: 'Special Elite', cursive;
    font-size: 1rem;
    color: #fff7bc; padding: 1rem 0 .5rem;
    line-height: 1;
    text-align: center}
.bg-h1 {
    background: -moz-linear-gradient(top, #900 0, #700 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #900), color-stop(100%, #700));
    background: -webkit-linear-gradient(top, #900 0, #700 100%);
    border-radius: .43rem; 
    height: 3rem;
}

a {
    color: transparent;
}

a:link,
a:visited {
    text-decoration: none
}

a:focus,
a:hover {
    text-decoration: none
}


.area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background:#fff7bc; ;
    border-radius: .43em;
    padding: 0 1rem;
}
.btn-tri {
    font-size: .8rem;
    color: var(--blanc);
    cursor: pointer;
    margin: .1rem;
    padding: .1rem;
    transition: .3s;
    border-radius: .43rem;
}

.btn-tri:hover { border-radius: 20px;}
.bg-trans{ background-color: transparent;border: none; cursor: pointer;}
.bg-trans img{ height: 1.5rem;}

.c-cont {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    max-width: 150px;
    height: 200px
}

.c-cont {
    flex: 1 1 auto;
}
.c-cont:hover {
    opacity: .7;
}
.c-cont img {
    width: 100%;
    border-radius: .25rem .25rem 0 0;
}
.c-body {
    font-family: pangolin, cursive;
    margin: 0.2rem;
    color: var(--blanc);
    font-size: .7em;
    line-height: 1;
    text-align: justify;
}

.c-footer {
    font-family: 'Special Elite', cursive;
    font-size: .8em;
    text-transform: uppercase;
    text-align: center;
    padding: .5rem 0;
    background-color: rgba(0, 0, 0, .3);
    border-top: 1px solid rgba(0, 0, 0, .125);
    position: absolute;
    bottom: 0;
    color: white;
    width: 100%;
}

.grid-item {margin: 6px}
.space-10{padding-top:10px}
.space-20{padding-top:20px}
.space-50{padding-top:50px}
.space-200{padding-top:200px}
/* .ligneOutils{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr } */

.ligneOutils {display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;height:48px; background:rgba(235, 2, 2, 0.3);line-height:24px;border-radius:.5rem}
.ligneOutils img  {height: 40px;width:auto; cursor: pointer; margin-top:4px}
.bord {border:1px solid orange}
[data-tooltip]{position:relative;}[data-tooltip]:after,[data-tooltip]:before{position:absolute;visibility:hidden;opacity:0;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}[data-tooltip]:before{content:attr(data-tooltip);padding:10px 18px;min-width:50px;max-width:300px;width:max-content;width:-moz-max-content;border-radius:6px;font-size:14px;background-color:rgba(59,72,80,.9);background-image:linear-gradient(30deg,rgba(59,72,80,.44),rgba(59,68,75,.44),rgba(60,82,88,.44));box-shadow:0 0 24px rgba(0,0,0,.2);color:#fff;text-align:center;white-space:pre-wrap;transform:translate(-50%,-5px) scale(.5)}[data-tooltip]:after{content:'';border-style:solid;border-width:5px 5px 0 5px;border-color:rgba(55,64,70,.9) transparent transparent transparent;transition-duration:0s;transform-origin:top;transform:translateX(-50%) scaleY(0)}[data-tooltip]:hover:after,[data-tooltip]:hover:before{visibility:visible;opacity:1}[data-tooltip]:hover:before{transition-delay:.3s;transform:translate(-50%,-5px) scale(1)}[data-tooltip]:hover:after{transition-delay:.5s;transition-duration:.2s;transform:translateX(-50%) scaleY(1)}[tool-pos=left]:after,[tool-pos=left]:before{left:auto;right:calc(100% + 5px);bottom:50%}[tool-pos=left]:before{transform:translate(-5px,50%) scale(.5)}[tool-pos=left]:hover:before{transform:translate(-5px,50%) scale(1)}[tool-pos=left]:after{border-width:5px 0 5px 5px;border-color:transparent transparent transparent rgba(55,64,70,.9);transform-origin:left;transform:translateY(50%) scaleX(0)}[tool-pos=left]:hover:after{transform:translateY(50%) scaleX(1)}[tool-pos=right]:after,[tool-pos=right]:before{left:calc(100% + 5px);bottom:50%}[tool-pos=right]:before{transform:translate(5px,50%) scale(.5)}[tool-pos=right]:hover:before{transform:translate(5px,50%) scale(1)}[tool-pos=right]:after{border-width:5px 5px 5px 0;border-color:transparent rgba(55,64,70,.9) transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}[tool-pos=right]:hover:after{transform:translateY(50%) scaleX(1)}[tool-pos=bottom]:after,[tool-pos=bottom]:before{top:calc(100% + 5px);bottom:auto}[tool-pos=bottom]:before{transform:translate(-50%,5px) scale(.5)}[tool-pos=bottom]:hover:before{transform:translate(-50%,5px) scale(1)}[tool-pos=bottom]:after{border-width:0 5px 5px 5px;border-color:transparent transparent rgba(55,64,70,.9) transparent;transform-origin:bottom}
.socBtn {float: right;margin-right: 2px}


.center-block{display: block;margin-right: auto;margin-left: auto;}

.text-rouge{color:var(--rouge)}.fond-rouge{background-color:var(--rouge)}.bord-rouge{border:5px solid var(--rouge)}.text-orange{color:var(--orange)}.fond-orange{background-color:var(--orange)}.border-orange{border:5px solid var(--orange)}.text-bleu{color:var(--bleu)}.fond-bleu{background-color:var(--bleu)}.bord-bleu{border:2px solid var(--bleu)!important}.text-jaune{color:var(--jaune)}.bgJaune{background-color:var(--jaune)}.bord-jaune{border:2px solid var(--jaune)!important}.text-vert{color:var(--vert)}.fond-vert{background-color:var(--vert)}.bord-vert{border:2px solid var(--vert)!important}.text-gris{color:var(--gris)}.fond-gris{background-color:var(--gris)}.bord-gris{border:5px solid var(--gris)}.text-blanc{color:var(--blanc)}.fond-blanc{background-color:var(--blanc)}.bord-blanc{border:2px solid var(--blanc)!important}.text-violet{color:var(--violet)}.fond-violet{background-color:var(--violet)}.text-rose{color:var(--roses)}.fond-rose{background-color:var(--rose)}.text-brun{color:var(--brun)}.fond-brun{background-color:var(--brun)}.text-teal{color:var(--teal)!important}.fond-teal{background-color:var(--teal)!important}.text-cyan{color:var(--cyan)!important}.fond-cyan{background-color:var(--cyan)!important}.text-purple{color:var(--purple)!important}.fond-purple{background-color:var(--purple)!important}.text-secondary{color:var(--secondary)!important}.fond-secondary{background-color:var(--secondary)!important}.text-success{color:var(--success)!important}.fond-success{background-color:var(--success)!important}.text-info{color:var(--info)!important}.fond-info{background-color:var(--info)!important}.text-warning{color:var(--warning)!important}.fond-warning{background-color:var(--warning)!important}.text-danger{color:var(--danger)!important}.fond-danger{background-color:var(--danger)!important}.text-noir{color:var(--noir)!important}.fond-noir{background-color:var(--noir)!important}.text-sombre{color:var(--sombre)!important}.fond-sombre{background-color:var(--sombre)!important}.text-gris-sombre{color:var(--gris-sombre)!important}.fond-gris-sombre{background-color:var(--gris-sombre)!important}.fond-warning{background-color:var(--gris-sombre)!important}.fond-success{background-color:var(--vert)!important}
.inv {display: none}
.vis {display: block}
.ml-0{margin-left: 0.5rem;}
.mt-1{margin-top: 0.5rem;}
hr {
    display: block;
    -webkit-margin-before: .9rem;
    -webkit-margin-after: .5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
    color: coral;
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}

.licence {display:grid;grid-template-columns:6fr 3fr 3fr;gap: 1rem;}
.licence {
    font-size: .6rem;
    color: #cbcbcb;
    line-height: 1.3;
}
.creative img {
    margin-right: 1rem;
    float: left;
    width: 10%;
}
.btn-mail{
    justify-self: right;
    margin-right:.5rem
}
.btnDYS, .btnNoDYS{
    cursor: pointer;
    text-align: center;
    margin-top:11px
}
.btnDYS{
    border: 1px solid rgba(0, 162, 16, 0.3);
    width:70px;
}
.btnNoDYS{
    border: 2px solid rgba(52, 202, 1, 0.3);
    width:100px;
}
.licence a {
    color: grey;
}
.licence strong {
color: burlywood;
font-weight: 700;
}
.maj {
    font-size: .6rem;
    margin-top: .5rem;
    color: #d3d3d3;
    text-align: center;
    font-family: monospace;
}
#c-search{
    display: none;
}
@media (min-width: 576px) {
    h1 {font-size: 2rem;line-height: 1}
    .bg-h1 {height: 5rem}
    .sousTitre {font-size: 1rem}
    .btn-tri {font-size: .6rem;margin: .5rem 0;padding: .5rem .4rem}
    .c-chercher {margin-top: -8px}
    .c-chercher input { width: 100px}
    .c-cont {max-width: 130px;height: 220px }
    .c-body {font-size: .8em}
    .grid-item {margin: 4px}
    .licence {font-size: .8rem}
    .c-footer {font-size: .8em}
}

@media (min-width: 768px) {
    h1 {font-size: 2rem;line-height: 1.3}
    .bg-h1 {height: 7rem}
    .btn-tri {font-size: 1rem;margin: .5rem 0;padding: .5rem .4rem}
    .bg-trans img{ height: 3rem}
    .c-cont {max-width: 140px;height: 240px }
    .c-body {font-size: 1em}
    .c-footer {font-size: .9em}
}
@media (min-width: 992px) {
    h1 {font-size: 2.1rem}
    .bg-h1 {height: 5rem}
    .c-cont {max-width: 190px;height: 260px }
    .grid-item {margin: 9px}
    .btn-tri {font-size: 1.3rem}
    .c-chercher input { width: 180px}
    .c-footer {font-size: 1.1em}
    #c-search{display: block;}
}