@font-face {font-family:'FontAwesome';src:url('/src/profilestorage/resources/css/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('/src/profilestorage/resources/css/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/src/profilestorage/resources/css/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/src/profilestorage/resources/css/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/src/profilestorage/resources/css/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/src/profilestorage/resources/css/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-display:swap;font-weight:normal;font-style:normal}
:root {
    --body-color: #333;
    --fff: #fff;
    --blue: #00519d;
    --blue-h:#02407a;
    --red: #dc2b20;
    --red-h: #ca251b;
}
body,p,div,th,td{    font-family: 'Open Sans', sans-serif;}
body{font-size:14px;background: #ffffff;padding:0;margin:0}
p,.cms ul li{line-height:25px;color:#716d6d}
h1 {font-style:italic;margin:35px 21px;text-align:center;font-size:1.7em;font-weight: 700;line-height:40px}
h2{font-size:1.5em;margin:50px 0 35px;color:#0b3f71;padding:28px 0;font-weight:700;  text-align: center;  line-height: 35px;}
h3{font-size: 1.4em;}
.container{margin: auto;}
header{ text-align: center;   margin: 0 21px;}
header img{width: 200px;margin:14px 0}
header .button{margin:26px 0}
a{text-decoration: none}
header .button a{font-weight:700;color:#000;font-size:1.2em }
header .button a.log{margin-left: 21px}
a.log{padding:10px 28px;background:#06c;color:#ffffff!important; border-radius: 8px;}
#tophome {background: url(https://www.flashtide.pro/src/profilestorage/printaffiliation/flashtide-pro/web/cms/images/regle-cras-3868.jpg) no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;text-align: center;height:200px;width: 100%;    box-shadow: 0 0 15px rgb(0 0 0 / 20%);}
#tophome .container{color: #ffffff;align-items: center;display: flex;height: 100%}
#tophome p {font-size: 18px;line-height: 30px;}

.gamme{background: #f5f6f7;padding: 0 0 35px;}
.gamme h2{margin:0 0 28px}
.bloc-gamme {margin:0 21px;display:grid; grid-template-columns: 1fr;gap:40px;text-align: center}
.bloc-gamme div,.bloc-connexion{background: #fff;border-radius: 20px;padding: 21px;}
.bloc-gamme img{width: 50px}
.bloc-gamme h3{font-size:1.4em;    margin: 7px 0 28px;}

.bloc-product{display:grid; grid-template-columns: 1fr;gap:7px;margin:0 21px 80px}
.bloc-product h3{text-transform: uppercase;text-align:center}
.prod-img{text-align:center}
.prod-img img{border-radius: 8px;height:250px}
.connexion{background: #f5f6f7;padding:35px 0}
.bloc-connexion{display:grid; grid-template-columns: 1fr;margin: 0 21px 60px}
.bloc-connexion a {padding: 14px 28px;margin:auto}
.bloc-connexion h3{margin:0}

.info{margin: 0 21px;}
.info img{width:80%;display: block;margin:0 auto}

.footer-avantages {background: var(--blue);color: #fff;padding: 14px 0}
.footer-avantages .container {display: grid;grid-template-columns: 1fr 1fr;gap: 21px}
.footer-avantages .container div {text-align: center}
.footer-avantages .container div img {margin: 7px auto;width: 70px;border-radius: 8px}
.footer-avantages .container div span {color: #fff;display: block}

footer{    background: #031f3a;color:#fff;
    margin: 0 auto !important;    padding: 21px;
    font-size: .8em;
    text-align: center;}


@media screen and (min-width:500px){
    header{ text-align:left}
    header .button{float:right}
    header .button{display:flex;gap:31px;align-items:center}
    header .button a.log{margin-left:0}
}



@media screen and (min-width:768px){
    h2{font-size:1.7em;}
    .footer-avantages .container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}




@media screen and (min-width:985px){
    .container,h1 {width:950px;}
    h1 {margin:60px auto;font-size: 2.6em;line-height: 60px}
    h2{font-size:2.3em;line-height:40px}

    header .button a:hover{color:#06c;text-decoration: underline}
a.log:hover{color:#fff;background: #0b3f71;text-decoration:none!important;}
    .bloc-gamme h3{  font-size:1.86em;}
    .bloc-gamme {grid-template-columns: 1fr 1fr 1fr;gap:50px}
    .bloc-connexion{grid-template-columns: 2fr 1fr}
    .bloc-product{gap:35px;margin:0 21px 60px}
    .bloc-product1{grid-template-areas:
        "prod-img prod-txt";
        align-items: start;grid-template-columns: 2fr 4fr}
    .bloc-product2{grid-template-areas:
        "prod-txt prod-img";
        align-items: start;grid-template-columns: 4fr 2fr}
    .bloc-product h3 {font-size: 1.8em;margin: 0 0 28px;text-align: left}
    .prod-img {grid-area: prod-img;margin:0 auto}
    .prod-txt{grid-area: prod-txt;}

    .bloc-connexion{gap:35px;padding:35px}
    .bloc-connexion h3 {font-size: 1.8em}
    .info img {    width: 300px;
        float: left;
        margin: 0 40px 13px 0;
    }
}




@media screen and (min-width:1200px){
    .container,h1{width:1024px}
    .bloc-gamme {gap:35px}
}