/*------------------------------------------------------------------
[Fichier CSS]

Projet:	Site DESK
Version:	1.0
Dernière modification :	20/09/20202
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table des matières]
(i) : Développement Mobile-first

1. Typographie
2. Plugin bootstrap
3. Reset
4. Bases du site
5. Header | #header
6. Intro | #intro
7. About (Qui sommes-nous) | #about
8. Compétences | #competences
    8.1 Le bloc compétences en global
    8.2 Styles du modal (pop-up qui s'ouvre au clic sur une pictogramme) .modal
    8.3 Effets survol sur pictogrammes | .float / .sink
9. Projets
    9.1 Bloc "voir nos projets" site principal | #projets
    9.2 Site rassemblant tous les projets | #site-projets
10. Contact | #contact
    10.1 Bloc de transition entre #projets et #contact | #projet-contact
    10.2 Code global du contact
        10.2.1 Google Maps | #map-canvas
11. Footer | #footer
12. Responsive | Medias queries
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
/*------------------(Typographie)*/
@charset "UTF-8";
@font-face {
    font-family: Brush Script Std;
    src: url(../fonts/BrushScriptStd.otf);
}

@font-face {
    font-family: Free script;
    src: url(../fonts/FREESCPT.TTF);
}

@font-face {
    font-family: Pristina;
    src: url(../fonts/PRISTINA.TTF);
}

@font-face {
    font-family: "Helvetica";
    src: url(../fonts/Helvetica-Light.otf);
}

@font-face {
    font-family: Helvetica_Neuelt_Std;
    src: url(../fonts/HELVETICANEUELTSTD-LT.otf);
}

@font-face {
    font-family: Helvetica_Neuelt_Bold;
    src: url(../fonts/HELVETICANEUELTSTD-BLK.otf);
}

@font-face {
    font-family: Mistral;
    src: url(../fonts/MISTRAL.TTF);
}

@font-face {
    font-family: "openDys";
    src: url(../fonts/OpenDyslexic-Regular.otf);
}

@font-face {
    font-family: "openDys_Bold";
    src: url(../fonts/OpenDyslexic-Bold.otf);
}

@font-face {
    font-family: "openDys_BoldItalic";
    src: url(../fonts/OpenDyslexic-BoldItalic.otf);
}

@font-face {
    font-family: "openDys_Italic";
    src: url(../fonts/OpenDyslexic-Italic.otf);
}

@font-face {
    font-family: "openDys_Mono_Regular";
    src: url(../fonts/OpenDyslexicMono-Regular.otf);
}

@font-face {
    font-family: OpenSans_Regular;
    src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
    font-family: OpenSans_BoldIta;
    src: url(../fonts/OpenSans-BoldItalic.ttf);
}

@font-face {
    font-family: OpenSans_Bold;
    src: url(../fonts/OpenSans-Bold.ttf);
}

@font-face {
    font-family: Roboto_Bold;
    src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: Simplifica;
    src: url(../fonts/Simplifica.ttf);
}

/*** Polices Adobe ***/
/******************************************/
/* @import url("https://p.typekit.net/p.css?s=1&k=sxu1ast&ht=tk&f=18436.18437.18438.18439.18440.18441.18442.18443.18444.18445.22801.22802.22797&a=82734147&app=typekit&e=css"); */

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/2dbc12/00000000000000007735a2d5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/2dbc12/00000000000000007735a2d5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/2dbc12/00000000000000007735a2d5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/bc6b0e/00000000000000007735a2dd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/bc6b0e/00000000000000007735a2dd/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/bc6b0e/00000000000000007735a2dd/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:900;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/9aa4fe/000000000000000000013f4e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/9aa4fe/000000000000000000013f4e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/9aa4fe/000000000000000000013f4e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/90ca1f/000000000000000000013f4f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/90ca1f/000000000000000000013f4f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/90ca1f/000000000000000000013f4f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/b714ca/000000000000000000013f4b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/b714ca/000000000000000000013f4b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/b714ca/000000000000000000013f4b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/2759ad/00000000000000007735a2d2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/2759ad/00000000000000007735a2d2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/2759ad/00000000000000007735a2d2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/2fd54c/00000000000000007735a2d9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),url("https://use.typekit.net/af/2fd54c/00000000000000007735a2d9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"),url("https://use.typekit.net/af/2fd54c/00000000000000007735a2d9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:300;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/0240fd/00000000000000007735a2df/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/0240fd/00000000000000007735a2df/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/0240fd/00000000000000007735a2df/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/4e4883/00000000000000007735a2e2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/4e4883/00000000000000007735a2e2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/4e4883/00000000000000007735a2e2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:500;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/9dc3b1/000000000000000000013f8f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/9dc3b1/000000000000000000013f8f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/9dc3b1/000000000000000000013f8f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;E
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/b4a4b5/000000000000000000014a32/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"),url("https://use.typekit.net/af/b4a4b5/000000000000000000014a32/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"),url("https://use.typekit.net/af/b4a4b5/000000000000000000014a32/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:200;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-web";
    src:url("https://use.typekit.net/af/82ca1d/000000000000000000014a33/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3") format("woff2"),url("https://use.typekit.net/af/82ca1d/000000000000000000014a33/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3") format("woff"),url("https://use.typekit.net/af/82ca1d/000000000000000000014a33/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:200;font-stretch:normal;
}

@font-face {
    font-family:"azo-sans-uber";
    src:url("https://use.typekit.net/af/e93b2b/00000000000000007735a2d1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/e93b2b/00000000000000007735a2d1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/e93b2b/00000000000000007735a2d1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

/******************************************/
/* Professor */
@font-face {
    font-family: "professor", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* New Spirit Regular */
@font-face {
    font-family: "new-spirit", serif;
    font-weight: 400;
    font-style: normal;
}

/* New Spirit Bold */
@font-face {
    font-family: "new-spirit", serif;
    font-weight: 700;
    font-style: normal;
}

/* New Spirit Regular Condensed */
@font-face {
    font-family: "new-spirit-condensed", serif;
    font-weight: 400;
    font-style: normal;
}

/* New Spirit Bold Condensed */
@font-face {
    font-family: "new-spirit-condensed", serif;
    font-weight: 700;
    font-style: normal;
}

/******************************************/
/* Pedestria MVB Regular */
@font-face {
    font-family: "pedestria-mvb", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Pedestria MVB Italic */
@font-face {
    font-family: "pedestria-mvb", sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* Pedestria MVB Medium */
@font-face {
    font-family: "pedestria-mvb", sans-serif;
    font-weight: 500;
    font-style: normal;
}

/* Pedestria MVB Medium Italic */
@font-face {
    font-family: "pedestria-mvb", sans-serif;
    font-weight: 500;
    font-style: italic;
}

/* Pedestria MVB Bold */
@font-face {
    font-family: "pedestria-mvb", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* Pedestria MVB Bold Italic */
@font-face {
    font-family: "pedestria-mvb", sans-serif;
    font-weight: 700;
    font-style: italic;
}
/******************************************/

/* IE Viewport Fix */
@-ms-viewport {
    width: device-width;
}

/*------------------(Plugin bootstrap)*/
.col{flex:1 0 0%}
.row-cols-auto>*{flex:0 0 auto;width:auto}
.row-cols-1>*{flex:0 0 auto;width:100%}
.row-cols-2>*{flex:0 0 auto;width:50%}
.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}
.row-cols-4>*{flex:0 0 auto;width:25%}
.row-cols-5>*{flex:0 0 auto;width:20%}
.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}
.col-auto{flex:0 0 auto;width:auto}
.col-1{flex:0 0 auto;width:8.33333333%}
.col-2{flex:0 0 auto;width:16.66666667%}
.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.33333333%}
.col-5{flex:0 0 auto;width:41.66666667%}
.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.33333333%}
.col-8{flex:0 0 auto;width:66.66666667%}
.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.33333333%}
.col-11{flex:0 0 auto;width:91.66666667%}
.col-12{flex:0 0 auto;width:100%}


/*------------------(Reset)*/
::placeholder {
    color: lightgrey;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

ol,
ul {
    list-style-type: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* Box Model */

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*------------------------------------------------------------------[Base du site] */
body {
    background-color: white; /* 0F365D; */
    background-image: url("./assets/images/fonds/_MG_6056.jpg");
    width: 100%;
}


a {
    -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    color: #777;
    text-decoration: none;
}

a:hover {
    border-bottom-color: transparent;
}

a.footer_lien {
    -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    color: #fff;
    text-decoration: none;
}

a.footer_lien:hover {
    color: #ddd;
}

span.footer_lien, span.footer_couleur_lien { color: #fff!important; }
strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

/* p {
    margin: 0 0 0.5em 0;
} */

h1.mentions-legales {
    font-size: 1.8em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none;
}

h2 {
    font-size: 1.35em;
    line-height: 1.75em;
}

h2.subtitle {
    margin-bottom:1em;
}

.paragraphe {
    margin-bottom:0.15em;
    margin-top:0.15em;
    line-height: 1.50em;
}

.p-last {
    margin-bottom:0.5em;
}

@media screen and (max-width: 736px) {
    h2 {
        font-size: 1.1em;
        line-height: 1.65em;
    }
}

h3 {
    font-size: 1.15em;
    line-height: 1.75em;
}

@media screen and (max-width: 736px) {
    h3 {
        font-size: 1em;
        line-height: 1.65em;
    }
}

h4 {
    font-size: 1em;
    line-height: 1.5em;
}

h5 {
    font-size: 0.8em;
    line-height: 1.5em;
}

h6 {
    font-size: 0.7em;
    line-height: 1.5em;
}

sub {
    font-size: 0.8em;
    position: relative;
    top: 0.5em;
}

sup {
    font-size: 0.8em;
    position: relative;
    top: -0.5em;
}

hr {
    border: 0;
    border-bottom: solid 2px #fff;
    margin: 3em 0;
}

blockquote {
    border-left: solid 4px #fff;
    font-style: italic;
    margin: 0 0 2em 0;
    padding: 0.5em 0 0.5em 2em;
}

code {
    background: rgba(144, 144, 144, 0.25);
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    letter-spacing: 0;
    margin: 0 0.25em;
    padding: 0.25em 0.65em;
}

.bold {
    font-weight: 800;
}

.center {
    text-align: center;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

pre {
    -webkit-overflow-scrolling: touch;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    margin: 0 0 2em 0;
}

pre code {
    display: block;
    line-height: 1.75em;
    padding: 1em 1.5em;
    overflow-x: auto;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.p-absolute {
    position: absolute!important;
}

.p-fixed {
    position: fixed!important;
    top:0;
    left:0;
    width: 100%;
    z-index: 10;
}

.p-relative {
    position: relative!important;
}

.p-static {
    position: static!important;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}
/* Grid */

.row {
    border-bottom: solid 1px transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row > * {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row:after,
.row:before {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.row.uniform > * >:first-child {
    margin-top: 0;
}

.row.uniform > * >:last-child {
    margin-bottom: 0;
}

.obligatoire {
    color:red;
}

/*------------------------------------------------------------------[Général] */
body {
    font-family: Helvetica_Neuelt_Std;
}

.left {
    float: left;
}

.right {
    float: right;
}

/*------------------------------------------------------------------[Header] */
.header-animation {
    -webkit-animation: replaceHeader 0.2s ease;
    animation: replaceHeader 0.2s ease;
}

.header-replace-top {
    top: 1em;
}

/*----------------(logo) */
div.menu-logo img {
    margin-bottom:-1.25em;
    margin-top:-3.5em;
}

/*----------------(slogan) */
div.menu-slogan {
    position:absolute;
    height:22em;
    top:-4.5em;
    /* width:40em; */
    z-index:400;
}

.slogan {
    height:12em;
    margin-bottom:-1em;
}


/*----------------(Menu de navigation) */
/* Menu de navigation (mobile) */
div.menu-principal-responsive {
    display: none;
}

/* Menu de navigation */
ul.menu-items li a {
    display: block;
}

div.menu-principal > ul.menu-items li a {
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
    color: grey;
    font-size: 1.2em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.5em 1em;
    text-shadow:0.5px 0.5px transparent;
}

div.menu-principal > ul.menu-items li a:hover {
    color:#0F365D;
    text-shadow:0.5px 0.5px #0F365D;
}

/* Bouton et liens de navigation "ouvrir/fermer" (mobile) */
#menu-navigation-mobile-accueil,
#menu-navigation-mobile-presentation,
#menu-navigation-mobile-competences,
#menu-navigation-mobile-references,
#menu-navigation-mobile-contact {
    display: block;
}

/* Bouton et liens de navigation "ouvrir/fermer" */
#menu-navigation-accueil,
#menu-navigation-presentation,
#menu-navigation-competences,
#menu-navigation-references,
#menu-navigation-contact {
    display: none;
}


/*** CORPS DE PAGE ***/
/*******************************************/
div.accueil-slideshow div.desk-calc {
    position: absolute;
    background-color: rgba(15,54,93,0.50);
    height:15em;
    object-fit: cover;
    width: 100%;
}

div.accueil-slideshow div.slideshow-fleche-bas {
    position: absolute;
}

div.accueil-slideshow div.slideshow-fleche-bas a.arrow-b {
    margin-left: 1em;
    margin-top: 1em;
    z-index:10;
}

div.accueil-slideshow div.slideshow-fleche-bas a.next-categorie {
    cursor: pointer!important;
}

/* Éléments communs */
.corps-page {
    position: relative;
}

/* Accueil: Image principale */
div.accueil-slideshow img {
    /* max-height: 50em;
    width: 100%; */
}

/* Calque pour image slideshow */
div.accueil-slideshow div.calque-image {
    background-color: #0F365D;
    max-height: 50em;
    width: 100%;
}

/*******************************************/
/* Dimensions pour le texte dans le caroussel */ 
div.container-slideshow-fullsize {
    position: absolute;
    display: list-item;
    background-color: transparent;
    padding:0.5em 1em;
    top: 3em;
    width: 100%;
    z-index: 500;
}

/* Position du texte dans le caroussel */ 
.t-faiseur-ecriture, .t-et-d-ecrans {
    background-color: white;
    color: #76101A;
    position: absolute;
}

.t-createur-de-pages, .t-savoir-faire {
    color: white;
    position: absolute;
}

.t-faiseur-ecriture, .t-createur-de-pages, .t-et-d-ecrans, .t-savoir-faire {
    padding: 0.50em 1em;
}

.t-faiseur-ecriture {
    left: 4.15em;
}

.t-createur-de-pages {
    right: 3.35em;
}

.t-et-d-ecrans {
    top: 2.55em;
    right: 6.45em;
}

/* Blocs */ 
.bloc-droite, 
.bloc-gauche {
    display: flex;
    width: 100%;
}

p.text-faiseur-ecriture,
p.text-et-d-ecrans,
p.text-createur-de-pages,
p.savoir-faire {
    position: absolute;
    padding: 0.5em;
    text-transform: uppercase;
}

p.text-faiseur-ecriture,
p.text-et-d-ecrans {
    background-color: white;
    color:#76101A;
    padding: 0.5em;
    text-transform: uppercase;
    width: auto;
}

p.text-createur-de-pages {
    -webkit-animation: fadeIntroTextCP 1s ease;
    -moz-animation: fadeIntroTextCP 1s ease;
    -ms-animation: fadeIntroTextCP 1s ease;
    -o-animation: fadeIntroTextCP 1s ease;
    animation: fadeIntroTextCP 1s ease;
    animation-delay: 1.125s;
    color: white;
    font-size:1.15em;
    margin-left: 8.90em;
    margin-right: -0.20em;
    margin-top: -0.20em;
    right: -5.00em;
    /* top: 3em; */
}

/* Accueil: Slideshow - Titre "Faiseur d'écriture" */
p.text-faiseur-ecriture {
    -webkit-animation: fadeIntroTextFE 1s ease;
    -moz-animation: fadeIntroTextFE 1s ease;
    -ms-animation: fadeIntroTextFE 1s ease;
    -o-animation: fadeIntroTextFE 1s ease;
    animation: fadeIntroTextFE 1s ease;
    animation-delay: 0.250s;
    font-size:1.15em;
    left: 3.00em;
    top: 3.45em;
}

/* Accueil: Carousel */





/*******************************************/

/* Accueil: Slideshow - Titre "Et d'écran" */
p.text-et-d-ecrans {
    -webkit-animation: fadeIntroTextEE 1s ease;
    -moz-animation: fadeIntroTextEE 1s ease;
    -ms-animation: fadeIntroTextEE 1s ease;
    -o-animation: fadeIntroTextEE 1s ease;
    animation: fadeIntroTextEE 1s ease;
    animation-delay: 0.750s;
    font-size:1.15em;
    right: 3.50em;
    top: 5.50em;
}

div.slideshow-fleche-bas img.video-fleche-bas {
    position: absolute;
    max-height: auto;
    width: 4%;
    bottom: 5%;
    left:48%;
    right:48%;
}

/* Positionnement de la vidéo secondaire */
.video-second-texte {
    position: absolute;
    top:-2.00em;
    left: 25%;
    right: 25%;
    width: 50%;
    text-align: center;
}

/* Accueil: Slideshow - Titre "Créateur de pages" */
p.text-createur-de-pages {
    font-size:1.15em;
    right: 0.20em;
    top: 3.65em;
}

/* Accueil: Slideshow - Savoir-faire */
p.savoir-faire {
    position: absolute;
    color: white;
    bottom: 7em;
    width:50%;
    bottom: 15%;
    left: 25%;
    right:25%;
    text-align:center;
}

p.text-small {
    font-size: 0.8em;
}


/*-----------------------------------------------------[Bloc Qui sommes-nous ?]*/
div.who-is-it, 
div.teams-listen {
    padding: 1em;
}

div.who-is-it, 
div.teams-listen {
    /* display: flex; */
    background-color: #E7EBEF;
}

/*------------------ Style des titres secondaires*/
div.who-is-it div.contenu-texte h2.title-faiseur-page,
div.teams-listen div.contenu-texte h2.title-faiseur-page, 
h2.title-faiseur-page {
    color: #76101A;
    font-family: "pedestria-mvb", 'Calibri', sans-serif;
    font-weight: 800;
    margin-top: 1em;
    text-transform: uppercase;
}

div.who-is-it div.contenu-texte h2.title-faiseur-page-2,
div.teams-listen div.contenu-texte h2.title-faiseur-page-2 {
    color: #F9B000;
    margin-top: 1em;
    text-transform: uppercase;
}

.sfffpea-nsp-35r {
    font-family: 'new-spirit', serif;
    margin-top: 0.15em;
}

/*------------------ Style des textes*/
p.liste-competences {
    display: block;
    background-color: #004062;
    color: white;
    margin: 0.25em 0;
    padding: 0.50em;
}

p.categorie-description {
    line-height: 1.525em;
    margin-bottom:1em;
}

p.description-prepa-editoriale {
    text-align: right;
}

/* ARBORESCENCE */
/*------------------*/
div.arborescence {
    position: relative;
    width: 100%;
}

/*------------------(Bloc présidence)*/
/* Gestion des marges */
div.presidence {
    margin-bottom: 1em;
    margin-left: 0.25em;
    margin-right: 0.25em;
    padding: 0.50em;
}

/* Positionnement */
div.presidence {
    text-align:center;
}

/* Gestion des styles */
div.presidence {
    background-color: #0F365D;
    color: white;
}

/* Style */
div.presidence {
    font-weight: 800;
}

/*------------------(Bloc présidence)*/
/* Gestion des marges */
div.direction {
    margin-bottom: 1em;
    padding: 0.50em;
}

/* Positionnement */
div.direction {
    text-align:center;
}

/* Gestion des styles */
div.direction {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Style */
div.direction {
    font-weight: 800;
}

/*------------------(Bloc département qualité)*/
/* Gestion des marges */
div.departement-qualite {
    margin-bottom: 1em;
}

/* Ajout des couleurs */
div.departement-qualite {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Positionnement */
div.departement-qualite {
    text-align:center;
}

/* Style */
div.departement-qualite {
    font-weight: 800;
}

/*------------------(Bloc département administratif)*/
/* Gestion des marges */
div.departement-administratif {
    margin-bottom: 1em;
}

/* Ajout des couleurs */
div.departement-administratif {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Positionnement */
div.departement-administratif {
    text-align:center;
}

/* Style */
div.departement-administratif {
    font-weight: 800;
}

/*------------------(Bloc département informatique)*/
/* Gestion des marges */
div.departement-informatique {
    margin-bottom: 1em;
}

/* Ajout des couleurs */
div.departement-informatique {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Positionnement */
div.departement-informatique {
    text-align:center;
}

/* Style */
div.departement-informatique {
    font-weight: 800;
}

/*------------------(Bloc studio multimédia)*/
/* Gestion des marges */
div.studio-multimedia {
    margin-bottom: 1em;
}

/* Ajout des couleurs */
div.studio-multimedia {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Positionnement */
div.studio-multimedia {
    text-align:center;
}

/* Style */
div.studio-multimedia {
    font-weight: 800;
}

/*------------------(Bloc studio PAO)*/
/* Gestion des marges */
div.studio-pao {
    margin-bottom: 1em;
}

/* Ajout des couleurs */
div.studio-pao {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Positionnement */
div.studio-pao {
    text-align:center;
}

/* Style */
div.studio-pao {
    font-weight: 800;
}

/*------------------(Bloc département GED)*/
/* Gestion des marges */
div.departement-ged {
    margin-bottom: 1em;
}

/* Ajout des couleurs */
div.departement-ged {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Positionnement */
div.departement-ged {
    text-align:center;
}

/* Style */
div.departement-ged {
    font-weight: 800;
}

/*------------------(Bloc service relecture)*/
/* Gestion des marges */
div.service-relecture {
    margin-bottom: 1em;
    margin-left: 0.25em;
    margin-right: 0.25em;
    padding: 0.50em;
}

/* Positionnement */
div.service-relecture {
    text-align:center;
}

/* Ajout des couleurs */
div.service-relecture {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Style */
div.service-relecture {
    font-weight: 800;
}

/*------------------(Bloc maintenance)*/
/* Gestion des marges */
div.maintenance {
    margin-bottom: 1em;
    margin-left: 0.25em;
    margin-right: 0.25em;
    padding: 0.50em;
}

/* Positionnement */
div.maintenance {
    text-align:center;
}

/* Ajout des couleurs */
div.maintenance {
    background-color: #AEBAC5;
    color: #09223A;
}

/* Style */
div.maintenance {
    font-weight: 800;
}

/*------------------(Marges communes)*/
div.direction,
div.departement-qualite,
div.departement-administratif,
div.departement-informatique {
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.departement-qualite,
div.departement-administratif,
div.departement-informatique {
    padding: 0.50em;
}

/* Positionnement */
div.departement-qualite,
div.departement-administratif,
div.departement-informatique {
    text-align: center;
}

/* Flex */
div.responsables, div.studios {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

div.studio-multimedia,
div.studio-pao,
div.departement-ged {
    margin-bottom: 1em;
}

div.studio-multimedia,
div.studio-pao,
div.departement-ged {
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.studio-multimedia,
div.studio-pao,
div.departement-ged {
    padding: 0.50em;
}

/*------------------(Dimensions communes)*/
div.departement-qualite,
div.departement-administratif,
div.departement-informatique,
div.studio-multimedia,
div.studio-pao,
div.departement-ged {
    width: 33.333%;
}


/*-----------------------------------------------------[Bloc Pré-footer]*/
/*------------------(Positionnement)*/
div.pre-footer {
    position: relative;
    display: block;
}

div.contenu-form {
    text-align: center;
}

/*------------------(Marges)*/
div.contenu-form {
    margin: 0;
    padding: 1em;
}

/*------------------(Couleurs et fonds)*/
div.contenu-form {
    background-color: #B7C3CF;
    color: #305273;
}

/*------------------(Texte, polices et tailles)*/
div.contenu-form {
    font-size: 1.25em;
    font-style: italic;
    font-weight: 800;
}

/*------------------(Triangles jaunes)*/
div.triangle-contenu, div.triangle-contenu-pos-droite {
    display: none;
}

.animation-vac-ngf {
    -webkit-animation: vac_ngf 2.8s ease;
    animation: vac_ngf 2.8s ease;
}

@-webkit-keyframes vac_ngf {
    0% {
        -webkit-transition: 1s;
        transition: 1s;
        opacity: 0;
    }
    100% {
        -webkit-transition: 1s;
        transition: 1s;
        opacity: 1;
    }
}

@keyframes vac_ngf {
    0% {
        -webkit-transition: 1s;
        transition: 1s;
        opacity: 0;
    }
    100% {
        -webkit-transition: 1s;
        transition: 1s;
        opacity: 1;
    }
}

/*-----------------------------------------------------[Bloc Compétences]*/
/*
p.anim-lc1, p.anim-lc2, p.anim-lc3, p.anim-lc4, p.anim-lc5, p.anim-lc6, p.anim-lc7, p.anim-lc8, p.anim-lc9, p.anim-lc10, p.anim-lc11, p.anim-lc12,
p.anim-lc13, p.anim-lc14, p.anim-lc15, p.anim-lc16, p.anim-lc17, p.anim-lc18, p.anim-lc19, p.anim-lc20, p.anim-lc21, p.anim-lc22, p.anim-lc23 {
    opacity:0;
}
*/

/*
p.anim-lc1 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0s;
    opacity: 0;
}

p.anim-lc2 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: .5s;
    opacity: 0;
}

p.anim-lc3 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1s;
    opacity: 0;
}

p.anim-lc4 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1.5s;
    opacity: 0;
}

p.anim-lc5 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 2s;
    opacity: 0;
}

p.anim-lc6 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0s;
    opacity: 0;
}

p.anim-lc7 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0.5s;
    opacity: 0;
}

p.anim-lc8 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1.5s;
    opacity: 0;
}

p.anim-lc9 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0s;
    opacity: 0;
}

p.anim-lc10 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0.5s;
    opacity: 0;
}

p.anim-lc11 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1s;
    opacity: 0;
}

p.anim-lc12 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1.5s;
    opacity: 0;
}

p.anim-lc13 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 2s;
    opacity: 0;
}

p.anim-lc14 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 2.5s;
    opacity: 0;
}

p.anim-lc15 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0s;
    opacity: 0;
}

p.anim-lc16 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 0.5s;
    opacity: 0;
}

p.anim-lc17 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1s;
    opacity: 0;
}

p.anim-lc18 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 1.5s;
    opacity: 0;
}

p.anim-lc19 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 2s;
    opacity: 0;
}

p.anim-lc20 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 2.5s;
    opacity: 0;
}

p.anim-lc21 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 3s;
    opacity: 0;
}

p.anim-lc22 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 3.5s;
    opacity: 0;
}

p.anim-lc23 {
    -webkit-animation: animationLC1 2.7s ease;
    animation: animationLC1 2.7s ease;
    animation-delay: 4s;
    opacity: 0;
}
*/

.animation-mee {
    transform: translate3d(3,2,1);
}

/******************************** Début animation */
/*** Animation liste compétences (part 1) ***/
@-webkit-keyframes animationLC1 {
    0% {
        opacity:0;
        /* margin-top:1em; */
    }
    100% {
        opacity:1;
        margin-top:0;
    }
}

@keyframes animationLC1 {
    0% {
        opacity:0;
        /* margin-top:1em; */
    }
    100% {
        opacity:1;
        margin-top:0;
    }
}


/******************************** Fin animation */
.marge-haut-0-5 { margin-top: 0.50em; }
.marge-haut-1 { margin-top: 1.25em; }
li.DI-marge { margin-top: 0.35em; }

div.bloc-preparation-contenu,
div.bloc-faiseur-pages {
    padding: 1em;
}

div.bloc-preparation-contenu {
    display: flex;
    flex-direction: column-reverse;
    background-color: #E7EBEF;
}

div.bloc-faiseur-pages {
    display: flex;
    flex-direction: column;
    background-color: white;
}

/* Positionnement de l'image */
div.bloc-preparation-contenu div.contenu-image img,
div.bloc-faiseur-pages div.contenu-image img {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    text-align:center;
    width: 75%;
}

/* Style des titres secondaires */
div.bloc-preparation-contenu div.contenu-texte h2.title-faiseur-page,
div.bloc-faiseur-pages div.contenu-texte h2.title-faiseur-page,
h2.title-faiseur-page-2 {
    color: #76101A;
    margin-top: 1em;
    text-transform: uppercase;
}

/* Style des titres secondaires */
div.bloc-preparation-contenu div.contenu-texte h2.title-faiseur-page-2,
div.bloc-faiseur-pages div.contenu-texte h2.title-faiseur-page-2 {
    font-family: 'Helvetica_Neuelt_Bold', sans-serif;
    color: #F9B000;
    font-weight: 800;
}

/* Style des sous-titres */
p.title-bold {
    font-weight: 800;
    margin-bottom: 1em;
    line-height: 1.355em;
}

p.description-list {
    margin-bottom: 1em;
    letter-spacing: 0.025em;
    line-height: 1.355em;
}

p span.subtitle {
    color:#1D4266;
    font-weight: 800;
    line-height: 1.625em;
}


/*-----------------------------------------------------[Bloc Références]*/
div.bloc-reference {
    background-color: #D1D8DF;
    padding: 1em 1em;
}

button.button_iso {
    text-transform: uppercase;
}

/* Positionnement des boutons */
div.row-flex {
    display: flex;
    justify-content: center;
}


/**********************************************************/
/* Carrousel */

/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}
  
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
  
/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
  
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}
  
/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}
  
/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
  
/* The dots/bullets/indicators */
.group-dot {
    padding: 0.5em 1em;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border:3px solid #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
  
.active, .dot:hover {
    background-color: #9C1519;
    border:3px solid #999;
}
  
/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
  
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}
  
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
}


/**********************************************************/
/* Style des boutons de tri des projets */
button.button_iso {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border: none;
    background: none;
    text-transform: uppercase;
    border: 1px solid #758BA1;;
    color: #443e38;
    margin-right: 12px;
    padding: 0.5em 1.25em;
    font-size: 12px;
    box-shadow: none;
}

/* Style du bouton lors du survol */
button.button_iso:hover {
    background-color: #758BA1;
    border: 1px solid transparent;
    color: #e6e6e6;
    cursor: pointer;
}


/* Style du bouton (rond) */
div.photo_projet img {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    opacity:0.9;
}

div.photo_projet img:hover {
    opacity:1;
}


/* Style du bouton cliqué */
button.is-checked {
    background-color: #758BA1;
    color: #e6e6e6;
}

/* Galerie d'image */
section.galerie {
    width: 100%;
    display: block;
    min-height: 100vh;
    /* background-color: #2a2932; */
}
 
/* Conteneur des références (zone d'action) */
div.g-container {
     max-width: 100%;
     margin:0 auto;
}
 
/* Styles des boutons de filtre */
div.galerie div.galerie-filtre{
    padding: 0 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

/* Style du bouton (non actif) */
section.galerie div.g-container div.row div.galerie-filtre span.filtre-item {
    background: #758BA1;
    border: 2px solid white;
    color: #ffffff;
    font-size: 1em;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 20px;
    cursor: pointer;
    margin: 0.5em auto;
    padding: 0.4em 1em;
    text-align:center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Style du bouton (actif) */
section.galerie div.g-container div.row div.galerie-filtre span.actif {
    background: #747474;
    border: 1px solid #dddddd;
    color: #dddddd;
    font-size: 1em;
    border: 2px solid white;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 20px;
    cursor: pointer;
    padding: 0.4em 1em;
    text-align:center;
    font-weight: 400;
}

/* Style du bouton survolé (non actif) */
section.galerie div.g-container div.row div.galerie-filtre span.filtre-item:hover {
    background: #484842;
    border: 2px solid #454941;
    color: #ffffff;
}

/* Style du bouton survolé (actif) */
section.galerie div.g-container div.row div.galerie-filtre span.actif:hover {
    background: #758BA1;
    border: 2px solid #758BA1;
    color: #ffffff;
}

/* Taille de la police et saturation (bouton de filtre) */
section.galerie div.g-container div.row div.galerie-filtre span.filtre-item:hover,
section.galerie div.g-container div.row div.galerie-filtre span.actif:hover {
    font-size: 1em;
    font-weight: 600;
}

/* Items */
.full-size {
    width: 100%;
}

.galerie .galerie-item {
    /* width: calc(100% / 3); */
    padding: 15px;

}

.galerie .row-width-56e_m {
    width: 56em;
}

.galerie .galerie-item-inner img {
    width: 100%;
    border: 3px solid #d4dad9;
}

.galerie .galerie-item.show {
    animation: fadeIn 0.5s ease;
}

div.galerie-flex-active {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.round-img {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.width-img {
    height:10em;
    width:4em;
}

.sc-epub,
.sc-tablette,
.sc-numerique,
.sc-photogravure,
.sc-mep,
.sc-mepw {
    width: 100%;
}


#filter-container {
    text-align: center;
    width: 100%;
}

#filter-container button.btn {
    margin-bottom: 0.5em;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%; /* 33.33% */
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}
  
/* Content */
.content-filter {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    /* background-color: white; */
    margin: 0 25%;
    padding: 10px;
    text-align:center;
}

/***** FILTRES IMAGES *****/
/* Style de l'image filtrée */
.content-filter a.img-link img.filter-image {
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    border:2px solid #0055AA;
    opacity: 0.8;
    height: 8.5em;
    width: 8.5em; /* 50% */
}

/* Style de l'image filtrée (au survol) */
.content-filter a.img-link:hover img.filter-image {
    border:2px solid #0080FF;
    opacity: 1;
}

/* Style du calque */
.content-filter a.img-link div.filter-image-calc {
    position: absolute;
    -webkit-transition: all 0.34s ease-in-out;
    transition: all 0.34s ease-in-out;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-left:1.35em; /* 8,5em / 9em */
    height: 8.5em;
    width: 8.5em; /* 16.35em / 18em */
    text-align:center;
    z-index: 6;
}

/* Style du calque (au survol) */
.content-filter a.img-link:hover div.filter-image-calc {
    background-color: #004062; /*16599c*/
    color: white;
    opacity: 0.7;
}

.content-filter a.img-link div.calc-text {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    display: none;
    padding: 0.25em 0.45em;
    font-size: 1.5em;
    left: 35%;
    right: 35%;
    top: 38.5%;
}

.content-filter a.img-link:hover div.calc-text {
    position: absolute;
    display: inline-block;
    color: white;
    font-weight: 800;
}

/* Style the buttons */
.btn-filter {
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    border: 2px solid #ddd;
    outline: none;
    padding: 0.35em 0.75em;
    background-color: #eee;
    cursor: pointer;
}

.btn-filter:hover {
    background-color: #758BA1;
    color: white;
}

.btn-filter.active {
    background-color: #758BA1;
    color: white;
    font-weight: 200;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 491px) {
    .gallery .gallery-item {
        width: 50%;
    }
}

@media screen and (max-width: 667px) {

    .menu-mobile-position {
        position: absolute;
        top: 4em;
        bottom: -4em;
        left: 1.5em;
        width: 50%;
        text-align:left;
    }

    .gallery .gallery-item {
        width: 100%;
    }
    .gallery .gallery-filter .filter-item{
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 768px) and (min-width: 667px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:-0.05em;
    }
}

@media screen and (max-width: 960px) and (min-width: 768px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:-0.05em;
    }
}

@media screen and (max-width: 1024px) and (min-width: 960px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:-0.05em;
    }
}

@media screen and (max-width: 1280px) and (min-width: 1024px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:-0.05em;
    }
}

@media screen and (max-width: 1440px) and (min-width: 1280px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:-1.05em;
    }
}

@media screen and (max-width: 1660px) and (min-width: 1440px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:-0.35em;
    }
}

@media screen and (max-width: 1800px) and (min-width: 1660px) {
    .content-filter a.img-link div.filter-image-calc {
        margin-left:1.40em;
    }
}


/*-----------------------------------------------------[Bloc Contacter-nous]*/
/* Styles des boutons */
input.btn {
    cursor: pointer;
    padding: 0.5em 0.75em;
}

input.btn.btn-danger {
    background-color: #C21460;
    color: white;
}

input.btn.btn-primary {
    background-color: #0055AA;
    color: white;
}

input.btn.btn-secondary {
    background-color: #0080FF;
    color: white;
}

input.btn.btn-success {
    background-color: #66B032;
    color: white;
}

input.btn.btn-warning {
    background-color: #FCCC1A;
    color: white;
}

/* Map  */
iframe.full-frame {
    margin: 0;
    padding: 0;
    height: 450px!important;
    width: 100%!important;
}


div.formulaire {
    margin: 3em auto;
    width: 50%;
}

/*
form.formulaire-cf ul.formulaire-liste {
    display: flex;
    width: 25%;
}
*/

/* Bouton de validation */
button#desk_cf_submit,
input#desk_cf_submit {
    width: 100%!important;
}

ul.formulaire-liste li label {
    font-size:1.25em;
}

ul.formulaire-liste li input,
ul.formulaire-liste li textarea {
    background-color: white;
    border: 1px solid #dddddd;
    color: black;
    margin: 0.5em 0em;
    padding: 0.5em .5em;
    width: 100%;
}

ul.formulaire-liste li input:active,
ul.formulaire-liste li textarea:active,
ul.formulaire-liste li input:hover,
ul.formulaire-liste li textarea:hover {
    border: 1px solid #0A243E;
}

ul.formulaire-liste li input.couleur-saisie,
ul.formulaire-liste li textarea.couleur-saisie {
    background-color: #B1BECB;
    color: #333333;
}

/* Dimensions des containers flex */
div.column_l,
div.column_r {
    width: 100%;
}

.column_g {
    margin-bottom: 1em;
}


/*********** OLD ***********/
/* Ruban "Contacter-nous" */
/*
div.label-ribbon {
    position: absolute;
    background-color: #025a8a;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    right: -1.25em;
    top: 1.75em;
    padding: 0.5em 1em;
    /* width: 6.5em; */
/*
    word-wrap: break-word;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:8;
}

div.label-ribbon-trl {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-left: 36px solid #eee;
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
    top: -1.75em;
    left: -1.25em;
    z-index:6;
}

div.label-ribbon-trr {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-left: 36px solid #eee;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: -1.50em;
    right: -2.75em;
    z-index:7;
}

div.label-ribbon-hrl {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 14px solid #025a8a;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0.65em;
    left: -0.55em;
    z-index:4;
}

div.label-ribbon-hrr {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 14px solid #025a8a;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: 0.70em;
    right: -0.50em;
    z-index:5;
}
*/
/*********** END OLD ***********/

/* Taille du texte dans les champs */
.form-control {
    font-size: 0.85em;
}

/* Positionnement des container d'image */
span.input-grouped {
    height: 2.50em!important;
    width: 2.65em;
    margin-top: 0.40em!important;
}

span.input-grouped-extended {
    height: 8.95em!important;
    width: 2.65em;
    margin-top: 0.40em!important;
}

input.field-y {
    height: 2.90em!important;
}

textarea.field-y-extended {
    height: 10.50em!important;
}

p.champs_obligatoire {
    font-size: 0.65em;
}

form#formulaire-cf ul li label {
    font-size: 0.85em;
}

p.error {display: none;}
p#error-raison-sociale span.text-error,
p#error-name span.text-error,
p#error-firstname span.text-error,
p#error-email span.text-error,
p#error-phone span.text-error,
p#error-object span.text-error,
p#error-msg span.text-error,
p#error-captcha span.text-error {color:red;}

.form-error {
    background-color: #d65656!important;
    border: 1px solid #d65656!important;
    color: white!important;
}

/*------------------(divers)*/
.isotope {
    margin: 10px auto;
    width: 90%;
}

.isotope div {
    margin-right: 1px;
}

/* Déclencheurs d'animation */
.anim-fade-in {
    -webkit-animation: sectionFadeInAnimation 2.50s ease;
    -moz-animation: sectionFadeInAnimation 2.50s ease;
    animation: sectionFadeInAnimation 2.50s ease;
}

.anim-fade-out {
    -webkit-animation: sectionFadeOutAnimation 2.50s ease;
    -moz-animation: sectionFadeOutAnimation 2.50s ease;
    animation: sectionFadeOutAnimation 2.50s ease;
}


/****************************** SITE WEB ******************************/
/* width */
::-webkit-scrollbar {
    background-color:  #6b6b6b;
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #02213A; 
    /* border-radius: 10px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-transition: all 0.750ms ease-in-out;
    -o-transition: all 0.750ms ease-in-out;
    transition: all 0.750ms ease-in-out;
    background: #999; 
    /* -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background: white;
}


/****************************** STYLES ******************************/
span.alinea-forme-maj { font-size:0.65em; text-transform: uppercase; }
.gras { font-weight: 1200; }
.text-grand { font-size:1.25em; }


/****************************** FENÊTRES MODALES ******************************/
/*------------------(Fenêtres modales)*/
a.modale-description { color: #0F365D; text-decoration: none; }

/*------------------(Style fenêtres modales)*/
/* The Modal (background) */
.modal {
    display: inline-block;;
    /* display: none; */
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
  
/* Modal Content */
.modal-content {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    position: relative;
    background-color: #fefefe;
    margin: auto;
    margin-top: 2em;
    padding: 0;
    border: 1px solid #28445f;
    max-height: 10em;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: popup_fadein;
    -webkit-animation-duration: 0.4s;
    animation-name: popup_fadein;
    animation-duration: 0.4s
}
  
/* The Close Button */
.close {
    -webkit-animation: popup_fadeout 0.4s ease;
    animation: popup_fadeout 0.4s ease;
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
  
.modal-header {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    padding: 2px 16px;
    background-color: #305273;
    color: white;
}

.modal-body { 
    max-height: 18.6em;
    overflow: auto;
    padding: 0;
}

.modal-footer {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    padding: 2px 16px;
    background-color: #305273;
    color: white;
}

/*------------------(Popup non ouverte (voir JS)*/
div#modale-preparation-contenu,
div#modale-suivi-fabrication,
div#modale-creation-maquette,
div#modale-mise-en-page,
div#modale-mise-en-ecrans {
    display: none;
}

/****************************** EN-TÊTE ******************************/
/* Code commun */
.header-border-top, 
header.header {
    position:relative;
    z-index: 700;
}

/* Barre de décalage au-dessus de l'en-tête. */
.header-border-top {
    display: block;
    /* background-color: rgba(80,80,80,.6); */
    background-color: rgba(250,250,250,1);
    min-height: 1em;
    width: 100%;
}

/* En-tête. */
header.header {
    background-color: white;
    border-bottom:1px solid grey;
    margin:0;
    padding: 0.5em 1em;
    text-align: center;
}

#t {
    font-family: 'Free script', 'Brush Script Std', 'Calibri', Sans-Serif;
    font-size: 2.75em;
    color: #305273;
    margin-bottom: -0.5em;
    margin-left: -6.25em;
    margin-top: 0.35em;
}


/****************************** MENU DE NAVIGATION ******************************/
/* Bouton du menu */
.menu-logo:nth-child(3) {
    margin-top: -2.50em;
}

/* Sidebar */
div.menu-principal-responsive {
    position: fixed;
    display: inline-block;
    background-color: #eee;
    color: #111;
    font-size:0.9em;
    margin-left:-15.00em;
    padding: 1em 3.5em 1em 1em;
    width: 15em;
    height:100%;
    text-align: left;
    z-index: 700;
}

div.menu-principal-responsive nav ul.menu-items li {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

div.menu-principal-responsive nav ul.menu-items li:hover {
    -webkit-transition: 0.55s;
    transition: 0.55s;
}

div.menu-principal-responsive nav ul.menu-items li:hover a {
    color: #1B9EF5;
}

/* Position du bouton de fermeture pour le menu de côté*/
li.m-mobile-resp-cancel {
    margin-right: -2.5em;
}

/****************************** CARROUSEL ******************************/
/*** CORPS DE PAGE ***/
/* -------------------------- */
/* Images d’introduction */
div.appareil-mobile img.desk_image {
    height:15em;
    object-fit: cover;
    width: 100%;
}

/* Vidéo d’introduction */
div.accueil-slideshow video.desk_video {
    height:15em;
    object-fit: cover;
    width: 100%;
}

/* Gif animé */
img.intro-1-desktop {
    /* margin-top: -5.5em; */
    text-align: center;
    width: 100%;
}

/*
img.intro-1-desktop {
    display: block;
    margin-left: auto;
    margin-right: auto
}
*/

/* Vidéo d’introduction (bordures) */
div.accueil-slideshow video.desk_video {
    border-bottom:8px solid #C6142F;
    border-top:8px solid #C6142F;
    margin-bottom:-0.25em;
}

div.accueil-slideshow div.desk-calcdiv.accueil-slideshow div.desk-calc {
    position: absolute;
    background-color: rgba(15,54,93,0.50);
    height:15em;
    object-fit: cover;
    width: 100%;
}


/* Positionnement de la flèche */
div.pos-arr {
    position: absolute;
    bottom: -7em;
    left: 52.75%;
    right: 40.75%;
    margin-left: 0.50em;
    text-align:center;
    width: 6.5%;
    z-index: 500;
}

div.pos-arr p a img {
    max-height: auto;
    opacity: 0.8;
    width: 50%;
}

div.pos-arr p a:hover img {
    opacity: 1;
}

div.pos-arr {
    position: absolute;
    margin-bottom: 5.0em;
}

div.pos-arr p img {
    width: 5em;
}


/****************************** STYLES ******************************/
/********************/
/* Couleurs du bloc */
/********************/
/*
.bloc-couleur-1 { background-color: #2A4D6F; }
.bloc-couleur-2 { background-color: #642B2C; }
.bloc-couleur-3 { background-color: #C6142F; }
.bloc-couleur-4 { background-color: #690C49; }
.bloc-couleur-5 { background-color: #5F7795; }
.bloc-couleur-6 { background-color: #67503C; }
.bloc-couleur-7 { background-color: #00755B; }
.bloc-couleur-8 { background-color: #00A3B3; }
.bloc-couleur-9 { background-color: #B71652; }
.bloc-couleur-10 { background-color: #00908D; }
.bloc-couleur-11 { background-color: #5A266A; }
.bloc-couleur-12 { background-color: #941680; }
.bloc-couleur-13 { background-color: #003D60; }
.bloc-couleur-14 { background-color: #666780; }
*/

/*********************/
/* Couleurs du texte */
/*********************/
.couleur-bleu-clair { color:#00A3B3; }
.couleur-bleu-fonce { color:#003D60; }
.couleur-cyan { color:#00908D; }
.couleur-rouge-fonce { color:#642B2C; }
.couleur-magenta { color:#C6142F; }
.couleur-marron { color:#67503C; }
.couleur-rose { color:#B71652; }
.couleur-rose-clair { color:#941680; }
.couleur-rose-fonce { color:#690C49; }
.couleur-vert { color:#00755B; }
.couleur-violet { color:#5A266A; }

/***************/
/* Typographie */
/***************/
div#mentions-legales div.mentions-legales-description { font-family: "new-spirit", 'Calibri', Sans-Serif; }
h1.mentions-legales, h2.subtitle { font-family: "pedestria-mvb", 'Calibri', Sans-Serif; font-weight: 500; }
h3.form-title { font-family: "pedestria-mvb", 'Calibri', Sans-Serif; }
p.title-bold, p.description-list, p.liste-competences, p.categorie-description, p.form-description { font-family: "new-spirit", 'Calibri', Sans-Serif; }
form#formulaire-cf ul li > label { font-family: "new-spirit", 'Calibri', Sans-Serif; margin-top: 1em; }
footer div.footer { font-family: "new-spirit", 'Calibri', Sans-Serif; }

/*************************************/
/* Dimensions du texte et des images */
/*************************************/
.minimize { width: 3em!important; height: 3em!important; }
.typo-taille { font-size:0.75em; }
.titre-gauche { text-align:left!important; }
.titre-droite { text-align:right!important; }
.titre-centre { text-align:center!important; }
.titre-justifie { text-align:justify!important; }

/***********/
/* Loaders */
/***********/
div.loader {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: loading 1s linear infinite;
    animation: loading 1s linear infinite;
    background: transparent;
    border-bottom: 4px solid transparent; /* 003D60 */
    border-left: 4px solid transparent; /* 003D60 */
    border-top: 4px solid transparent; /* 003D60 */
    border-right: 4px solid #B71652;
    right: 0.5em;
    top: 0.5em;
    height: 1em;
    width: 1em;
    position: fixed;
    z-index:3000;
}

/*****************/
/* Autres styles */
/*****************/
/* Affichage */
.hide { display: none; }
.show { display: inline-block; }

body, main {
    overflow-x: hidden;
}

/* Opacité */
.op-f0 { opacity:0; }
.op-f1 { opacity:1; }

img.display { opacity: 1!important; }
img.no-display { opacity: 0!important; }


/****************************** HAUT DE PAGE ******************************/


/****************************** PRÉSENTATION ******************************/
/***********************************************/
/* Section de personnalisation "haut de page". */
/***********************************************/
#presentation {
    position: relative;
    display: inline-block;
    background-color: #E7EBEF;
    margin: 0;
    padding: 0;
}

/********************************/
/* Conteneur vidéo et image gif */
/********************************/
/* Slideshow container */
div.slideshow-container { margin: 0 auto; position: relative; }
div.video-full {
    background:transparent url('./videos/presentation-desk.mp4') 0 0 no-repeat fixed;
    height: 15rem!important;
    max-height: 15rem!important;
    max-width: 100%;
    object-fit: cover;
}

/*
video.dk-video {
    width: 100%;
    height: 30rem;
    max-height: 30rem;
}
*/


/****************************** COMPÉTENCES ******************************/
/**************************************************************/
/* Personnalisation des styles des blocs pour les compétences */
/**************************************************************/
.bloc-couleur { padding: 1em; width: 100%; }
.bloc-couleur-1 { background-color: #6B8777 /*#2A4D6F*/; }
.bloc-couleur-2 { background-color: #642B2C; }
.bloc-couleur-3 { background-color: #C6142F; }
.bloc-couleur-4 { background-color: #690C49; }
.bloc-couleur-5 { background-color: #5F7795; }
.bloc-couleur-6 { background-color: #67503C; }
.bloc-couleur-7 { background-color: #00755B; }
.bloc-couleur-8 { background-color: #00A3B3; }
.bloc-couleur-9 { background-color: #B71652; }
.bloc-couleur-10 { background-color: #00908D; }
.bloc-couleur-11 { background-color: #5A266A; }
.bloc-couleur-12 { background-color: #941680; }
.bloc-couleur-13 { background-color: #003D60; }
.bloc-couleur-14 { background-color: #666780; }

/***************************************************************/
/* Personnalisation des styles des titres pour les compétences */
/***************************************************************/
h2.titre-presentation-desk, h3.titre-presentation-desk { color:#642B2C; }
h2.titre-preparation-editoriale, h3.titre-preparation-editoriale { color:#C6142F; }
h2.titre-creation-graphique, h3.titre-creation-graphique { color:#690C49; }
h2.titre-photogravure-des-illustrations, h3.titre-photogravure-des-illustrations { color:#5F7795; }
h2.titre-mise-en-page, h3.titre-mise-en-page { color:#67503C; }
h2.titre-mise-en-ecran, h3.titre-mise-en-ecran { color:#00755B; }
h2.titre-environnement-logiciels, h3.titre-environnement-logiciels { color:#00A3B3; }
h2.titre-environnement-materiels, h3.titre-environnement-materiels { color:#B71652; }
h2.titre-suivi-fabrication, h3.titre-suivi-fabrication { color:#00908D; }
h2.titre-numerisation-productive, h3.titre-numerisation-productive { color:#5A266A; }
h2.titre-restitution-accessible, h3.titre-restitution-accessible { color:#941680; }
h2.titre-domaines-intervention, h3.titre-domaines-intervention { color:#003D60; }
h2.titre-book, h2.titre-desk-videos, h3.titre-book, h3.titre-desk-videos { color:#666780; }

/***********************************************/
/* Configuration des positions dans les images */
/***********************************************/
img.presentation-desk {
    background-position: 25% 25%;
}

/**************************/
/* Styles des paragraphes */
/**************************/
h2.titre-domaines-intervention, h3.titre-domaines-intervention { text-align:left; }


/***************/
/* Alignements */
/***************/
.text-left, .texte-gauche { text-align: left!important; }
.text-center, .texte-centre { text-align: center!important; }
.text-right, .texte-droite { text-align: right!important; }


/**********************/
/* Bloc "Compétences" */
/**********************/
div.competence {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/********************/
/* Bloc de citation */
/********************/
/* Bloc citation */
div.bloc-citation {
    position: relative;
    float: right;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 1em;
    font-family: "new-spirit", "pedestria-mvb", 'Helvetica_Neuelt_Bold', 'Calibri', sans-serif;
    font-size: 0.95em;
    line-height: 1.425em;
    text-align: center;
    text-transform: uppercase;
}

div.bloc-citation p:nth-child(1) {
    margin-bottom: 0.50em;
}

/* Dimensions maximales */
div.bloc-citation.bloc-citation-max-tres-petit {
    max-width: 10.25em;
}

div.bloc-citation.bloc-citation-max-petit {
    max-width: 15.25em;
}

div.bloc-citation-max-un-peu-plus-petit {
    max-width: 16.75em;
}

div.bloc-citation.bloc-citation-max-plus-petit {
    max-width: 23.25em;
}

div.bloc-citation.bloc-citation-max-legerement-plus-petit {
    max-width: 29.25em;
}

div.bloc-citation.bloc-citation-max-moyen {
    max-width: 32.50em;
}

div.bloc-citation.bloc-citation-max-grand {
    max-width: 34.25em;
}

div.bloc-citation.bloc-citation-max-plus-grand {
    max-width: 38.25em;
}

div.bloc-citation.bloc-citation-max-tres-grand {
    max-width: 42.25em;
}

div.bloc-citation.bloc-citation-max-enorme {
    max-width: 50.25em;
}

div.bloc-citation.bloc-citation-taille-maxi {
    max-width: 100%;
    width: 100%;
}

/* Couleurs */
div.couleur-bleu-1 {
    background-color: #5F7795;
    color: white;
}

div.couleur-bleu-2 {
    background-color: #003D60;
    color: white;
}

div.couleur-bleu-clair-1 {
    background-color: #00908D;
    color: white;
}

div.couleur-cyan-1 {
    background-color: #00A3B3;
    color: white;
}

div.couleur-marron-1 {
    background-color: #642B2C;
    color: white;
}

div.couleur-marron-2 {
    background-color: #67503C;
    color: white;
}

div.couleur-rose-1 {
    background-color: #B71652;
    color: white;
}

div.couleur-rose-2 {
    background-color: #941680;
    color: white;
}

div.couleur-rouge-1 {
    background-color: #C6142F;
    color: white;
}

div.couleur-vert-1 {
    background-color: #6B8777;
    color: white;
}

div.couleur-vert-2 {
    background-color: #00755B;
    color: white;
}

div.couleur-violet-1 {
    background-color: #690C49;
    color: white;
}

div.couleur-violet-2 {
    background-color: #5A266A;
    color: white;
}

/* Taille du texte */
span.petite-taille {
    font-size: 0.85em;
}

/******************************/
/* Composants des compétences */
/******************************/
/* Modification de la couleur de style des compétences */
div.cs-bloc-competences {
    background-color: white;
}

/* Sous-titre bloc compétences */
h2.titre-sec-competences {
    font-family: "pedestria-mvb", 'Helvetica_Neuelt_Bold', 'Calibri', sans-serif;
    /* color: #F9B000; */
    font-size: 1.6em;
    font-weight: 800;
    margin-bottom: -0.25em;
    margin-top: -0.25em;
    text-transform: uppercase;
}

h3.titre-sec-competences {
    font-family: "pedestria-mvb", 'Helvetica_Neuelt_Bold', 'Calibri', sans-serif;
    /* color: #F9B000; */
    font-size: 1.3em;
    font-weight: 800;
    margin-bottom: -0.25em;
    margin-top: -0.25em;
    text-transform: uppercase;
}

/* Ajout d'une bordure sur les images de présentation */
img.competences-images {
    /* -webkit-animation: transformRotateScale 1s ease;
    animation: transformRotateScale 1s ease; */
    /* border: #ccc solid 4px; */
    box-shadow: 0 0 10px #aaa;
    visibility:visible;
}

img.competences-images-inverse {
    /* -webkit-animation: transformRotateScaleInverse 1s ease;
    animation: transformRotateScaleInverse 1s ease; */
    /* border: #ccc solid 4px; */
    box-shadow: 0 0 10px #aaa;
}

img.restitution-accessible {
    display:flex;
    justify-content:center;
    margin:0 auto;
    max-width:100%;
    text-align:center;
}

.titre-indent-1 {
    margin-top:-0.5em;
}

li.menu-envlog { font-family: 'new-spirit', sans-serif; }
li.menu-envlog-marge { margin-top: 0.25em; }

.menu-ff li {
    font-family: 'new-spirit', sans-serif;
    /*
    src: url("fonts/-Regular-webfont.eot");
    src: url("fonts/-Regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/-Regular-webfont.woff") format("woff"),
         url("fonts/-Regular-webfont.ttf") format("truetype"),
         url("fonts/-Regular-webfont.svg#MaPoliceRegular") format("svg");
         */
}

/* Animations des images */
.anim-fadein {
    -webkit-animation: img_fadein 1s ease;
    -moz-animation: img_fadein 1s ease;
    animation: img_fadein 1s ease;
}
.anim-fadeout {
    -webkit-animation: img_fadeout 1s ease;
    -moz-animation: img_fadeout 1s ease;
    animation: img_fadeout 1s ease;
}

.description-DI,
.description-EL {
    margin-top: -0.75em;
}

.description-DI-grand,
.description-EL-grand {
    margin-top: 0.25em;
}

@media screen and (min-width: 768px) {
    div.mobile-decalage-droit {
        margin-right: 1rem!important;
    }
}

/****************************** PARTENAIRES ******************************/
/* Bloc nos partenaires  */
div.bloc-partner {
    background-color: lightgrey;
    /* background-color: rgb(156,21,25); */
    border-bottom:8px outset white;
    border-top:4px outset white;
    color: white;
    /* font-family: 'Mistral', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    /*
    background: linear-gradient(217deg, rgba(210,234,224,0.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(218,215,209,0.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(189,204,194,0.8), rgba(0,0,255,0) 70.71%);
    */
}

/* On force la couleur  et l'opacité à être la même partout. (slider uniquement / sur demande ) */
.forcing-color { color: #555555!important; opacity: 0.8; }

/* Bloc nos partenaires  */
div.bloc-composant-animation {
    background-color: #0F4869;
    color: white;
}

.gros_titre {
    font-family: "pedestria-mvb", 'Free script', 'Brush Script Std', 'Calibri', Sans-Serif;
    font-size: 2.0em;
    font-weight: 800;
    margin-bottom: -0.75em;
    margin-top: 1em;
}

/* Bloc "Ils nous font confiance"  */
div.bloc-confiance {
    background-color: rgb(14,69,124);
    border-bottom:4px outset white;
    border-top:8px outset white;
    color: white;
    /* font-family: 'Pristina', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    /*
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
    */
}

h2.titre-bloc {
    font-family: "pedestria-mvb", 'Free script', 'Brush Script Std', 'Calibri', Sans-Serif;
    font-size: 1.75em;
}

/* Slider */
p.texte-grand-format {
    font-size: 1.25em;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

p.texte-surbrillance {
    color: #DE6F51;
    font-weight: 800;
}

.carousel-nos-references, 
.carousel-infc {
    position: relative;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    /* padding: 8em 0; */
    width: 50%;
}

p.slider-texte {
    font-family:"pedestria-mvb", 'Free script', 'Brush Script Std', 'Calibri', Sans-Serif;
}

.slider {
    width: 100%;
}

.slick-slide {
    transition: all ease-in-out .3s;
    /* opacity: .2; */
    margin: 0px 20px;
}

.slick-slide img {
    -webkit-border-radius:50%;
    border-radius:50%;
    cursor: move;
    /* height:2.5em !important; */
    max-height:auto;
    width: 100%;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

button.slick-img {
    -webkit-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
    cursor: pointer;
    position: absolute;
    background-color:#222;
    color:#ccc;
    margin: 1.25em 25%;
    z-index:100;
}

button.slick-img:hover {
    position: absolute;
    background-color: #1D4266;
}

button#slick-slide-control00,
button#slick-slide-control01,
button#slick-slide-control02,
button#slick-slide-control03,
button#slick-slide-control04,
button#slick-slide-control05,
button#slick-slide-control06,
button#slick-slide-control07,
button#slick-slide-control08,
button#slick-slide-control09,
button#slick-slide-control10,
button#slick-slide-control11,
button#slick-slide-control12,
button#slick-slide-control13,
button#slick-slide-control14,
button#slick-slide-control15,
button#slick-slide-control16,
button#slick-slide-control17,
button#slick-slide-control18,
button#slick-slide-control19,
button#slick-slide-control20,
button#slick-slide-control000,
button#slick-slide-control001,
button#slick-slide-control002,
button#slick-slide-control003,
button#slick-slide-control004,
button#slick-slide-control005,
button#slick-slide-control006,
button#slick-slide-control007,
button#slick-slide-control008,
button#slick-slide-control009,
button#slick-slide-control010,
button#slick-slide-control011,
button#slick-slide-control012,
button#slick-slide-control013,
button#slick-slide-control014,
button#slick-slide-control015,
button#slick-slide-control016,
button#slick-slide-control017,
button#slick-slide-control018,
button#slick-slide-control019,
button#slick-slide-control020,
button#slick-slide-control021,
button#slick-slide-control022,
button#slick-slide-control023,
button#slick-slide-control024,
button#slick-slide-control025,
button#slick-slide-control026,
button#slick-slide-control027,
button#slick-slide-control028,
button#slick-slide-control029,
button#slick-slide-control030,
button#slick-slide-control031,
button#slick-slide-control032,
button#slick-slide-control033,
button#slick-slide-control034,
button#slick-slide-control035 {
    display: none;
}

button#slick-slide-control00 {
    margin-left:-15em;
    margin-right:1.5em;
}

button#slick-slide-control01 {
    margin-left:-12.5em;
    margin-right:1.5em;
}

button#slick-slide-control02 {
    margin-left:-10em;
    margin-right:1.5em;
}

button#slick-slide-control03 {
    margin-left:-7.5em;
    margin-right:1.5em;
}

button#slick-slide-control04 {
    margin-left:-5em;
    margin-right:1.5em;
}

button#slick-slide-control05 {
    margin-left:-2.5em;
    margin-right:1.5em;
}

button#slick-slide-control06 {
    margin-left:0;
    margin-right:1.5em;
}

button#slick-slide-control07 {
    margin-left:2.5em;
    margin-right:1.5em;
}

button#slick-slide-control08 {
    margin-left:5em;
    margin-right:1.5em;
}

button#slick-slide-control09 {
    margin-left:7.5em;
    margin-right:1.5em;
}

.slick-active {
    color: #555555;
    opacity: .5;
}
    
.slick-current {
    opacity: 1;
}
.slick-current.slick-active.slick-center {
    opacity:1;

}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-slide:not(.slick-active) {
    opacity: 0.5;
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    /* margin-top: -3.5em!important; */
    display: block;
}

.slick-track:nth-child(1) {
    margin-top: 3em!important;
}

.slick-track:nth-child(1) {
    margin-top: 2.25em!important;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
    /* margin-top: -2em; */
}

.slick-track:nth-child(0):before,
.slick-track:nth-child(0):after {
    margin-top: -2.5em;
}

.slick-track:nth-child(1):before,
.slick-track:nth-child(1):after {
    margin-top: -1.5em;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
    margin-top: -2em;
}



.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-prev,
.slick-next {
    -webkit-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    /*
    -webkit-animation: radialCircle 2.764s linear infinite;
    -moz-animation: radialCircle 2.764s linear infinite;
    animation: radialCircle 2.764s linear infinite;
    */
    position: absolute;
    background-color: transparent;
    border: 2px solid lightgrey;
    color: #333333;
    font-size: 1.2em;
    font-family: "new-spirit", "pedestria-mvb", 'Free script', 'Brush Script Std', 'Calibri', Sans-Serif;
    margin:0;
    margin-top: -5em;
    padding: 0.5em 0.70em;
    z-index: 400;
}

.slick-prev:hover,
.slick-next:hover {
    background-color: #1662af;
    color: white;
}

.slick-prev {
    left: 0;
    top:0.25em;
}

.slick-next {
    right: 0;
    top:0.25em;
}

/* Slick dot */
/*
.slider {
    width: 650px;
    margin: 0 auto;
}
*/

.slick-dots{
    position: absolute;
    bottom: 20px;
    display: block;
    width: 100%;
    padding: 10;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li.slick-active button:before{
  font-size:15px;
  color:blue;
}

/* Début corrections des positions des images pour le premier carrousel. */
img.img-premier-caroussel {
    height: 2.25em;
    margin: auto;
    text-align: center;
    width: 6.5em;
}

img.img-deuxieme-caroussel {
    height: 4.25em;
    margin: 0.35em auto;
    text-align: center;
    width: 8.5em;
}

p#affichage-texte-animation {
    margin-top: 0.5em;
}

p#affichage-texte-animation-2 {
    margin-top: 0.25em;
}

#affichage-texte-animation, #affichage-texte-animation-2 {
    -webkit-animation: animationMarquee 45s linear infinite;
    -moz-animation: animationMarquee 45s linear infinite;
    animation: animationMarquee 45s linear infinite;
}

/* Animation type marquee */
@-moz-keyframes animationMarquee {
    0%   { -moz-transform: translateX(-125%); }
    /* 50% { -moz-transform: translateX(-125%); } */
    100% { -moz-transform: translateX(125%); }
}

@-webkit-keyframes animationMarquee {
    0%   { -webkit-transform: translateX(-125%); }
    /* 50% { -webkit-transform: translateX(-125%); } */
    100% { -webkit-transform: translateX(125%); }
}

@keyframes animationMarquee {
    0% { 
        transform: translateX(125%); 		
    }

    50% { 
        transform: translateX(-125%); 
    }

    100% { 
        transform: translateX(125%); 
    }
}

/* Début corrections des positions des images pour le deuxième carrousel. */
/* Obsolète*/
.pos-4Ts3q {
    height: 0.75em!important;
    /* margin-top:-2.5em; */
}

.pos-9P0uO {
    height: 0.75em!important;
    /* margin-top:-2.5em; */
}

.pos-6cV8W {
    height: 0.75em!important;
    /* margin-top:-2.5em; */
}

.pos-3d6Qc {
    height: 0.75em!important;
    /* margin-top:-2.5em; */
}

.pos-8yJk7 {
    height: 0.75em!important;
    /* margin-top:-2.5em; */
}

.pos-4xnSy {
    height: 1.5em!important;
    /* margin-top:-3.5em; */
}

.pos-Mg3z6 {
    height: 1.5em!important;
    /* margin-top:-3.5em; */
}
/* Fin corrections des positions des images pour le deuxième carrousel. */

/****************************** FORMULAIRE DE CONTACT ******************************/
/* Formulaire de contact  */
div.bloc-contact {
    background-color: #eeeeee;
    /* padding: 1em 1em; */
}

/* Formulaire de contact */
div.contact-form {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background-color: #fff;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #ddd;
    color:black;
    /* margin: 4em 1em; */
    margin: 4em 5%;
    padding: 1.5em 1.5em;
    width: 90%;
    z-index:9;
}

/* Position des icônes */
span.phone-places i {
    padding-left: 0.15em;
    padding-right: 0.15em;
}

/* Ruban */
.box {
    /*
    width: 200px; height: 300px;
    position: relative;
    border: 1px solid #BBB;
    background: #EEE;
    */
}
.ribbon {
    position: absolute;
    right: -5px; 
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 150px; /* 75px */
    height: 150px; /* 75px */
    text-align: right;
}
.ribbon span {
    font-size: 0.60em;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 150px; /* 100px */
    padding-left: 3.75em;
    display: block;
    background: #2A4D6F;
    background: linear-gradient(#2A4D6F 0%, #2A4D6F 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
}
.ribbon span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #2A4D6F;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #2A4D6F;
}
/*
.ribbon span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #2A4D6F;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #2A4D6F;
}
*/

/****************************** PIED DE PAGE ******************************/
/* Footer */
footer div.footer {
    display: flex;
    flex-direction: column-reverse;
    background-color: #003b5a;
    color: white;
    padding: 1em;
}

footer div.footer div.presentation,
footer div.footer div.contacter-nous,
footer div.footer div.copyright {
    margin-bottom: 1em;
}

footer div.footer div.presentation h3.footer-title,
footer div.footer div.contacter-nous h3.footer-title,
footer div.footer div.copyright h3.footer-title {
    font-weight: bold;
}

footer div.footer div.presentation p,
footer div.footer div.contacter-nous p,
footer div.footer div.copyright p {
    font-size: 0.8em;
    line-height: 1.65em;
}

footer div.footer div.copyright {
    margin-bottom: 2.5em;
}

footer div.footer div.copyright p {
    margin-bottom: -2em;
    margin-top: -1em;
    text-align:center;
}

/* Popup Accessibilité */
div.popup-accessibilite, div.popup-accessibilite-overlay {
    position: fixed;
    margin: 0;
    padding: 1em;
}

div.popup-accessibilite {
    -webkit-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
    background-color: white;
    border: 1px solid lightgrey;
    color: black;
    font-size: 0.7em;
    min-height: 14em;
    min-width: 18em;
    width: auto;
    /* left:14.325em; */
    left:30%;
    /* left:16.38em; */
    /* top:7.80em; */
    /* top:8.97em; */
    right:30%;
    top:0%;
    z-index:1250;
}

div.popup-hidden {
    display: none;
}

div.popup-visible {
    display: block;
}

/* Overlay */
div.popup-accessibilite-overlay {
    background-color: rgba(30,30,30,0.7);
    border: none;
    color: grey;
    left:0%;
    top:0%;
    height: 100%;
    width: 100%;
    z-index:1200;
}

/* Titres */
p.popup-acs-title, div.popup-acs-options > div.conteneur-options {
    margin-bottom: 0.75em;
    margin-top: 0.75em;
}

p.popup-acs-title {
    display: flex;
    justify-content: space-between;
    font-family: "pedestria-mvb", 'Free script', 'Brush Script Std', 'Calibri', Sans-Serif;
    font-size: 1em;
    font-weight: 800;
}

/* Icônes de fermeture */
span#popup-fermer-accessibilite {
    -webkit-transition: all 0.252s ease-in-out;
    -moz-transition: all 0.252s ease-in-out;
    transition: all 0.252s ease-in-out;
    cursor: pointer;
}

span#popup-fermer-accessibilite:hover {
    color: red;
}


/* Conteneurs d'accessibilité */
div.conteneur-options {
    -webkit-border-radius: 32px 32px 32px 32px;
    -moz-border-radius: 32px 32px 32px 32px;
    border-radius: 32px 32px 32px 32px;
    margin-bottom: 0.25em;
    position: relative;
    background-color: #3C3C3B;
    color: white;
    margin:0;
    padding: 1em 0.5em;
    width: auto;
}

span.conteneur-option-1, span.conteneur-option-2, span.conteneur-option-3, span.conteneur-option-4, span.conteneur-option-5 {
    -webkit-border-radius: 32px 32px 32px 32px;
    -moz-border-radius: 32px 32px 32px 32px;
    border-radius: 32px 32px 32px 32px;
    margin-bottom: 0.25em;
    padding: 0.5em 1em;
}

/* Options non actives */
span.conteneur-option-1, span.conteneur-option-2, span.conteneur-option-3, span.conteneur-option-4, span.conteneur-option-5 {
    -webkit-transition: all 0.252s ease-in-out;
    -moz-transition: all 0.252s ease-in-out;
    transition: all 0.252s ease-in-out;
    background-color: #3C3C3B;
    color: white;
    cursor: pointer;
}

/* Options actives */
span.conteneur-option-1.active, span.conteneur-option-2.active, span.conteneur-option-3.active, span.conteneur-option-4.active, span.conteneur-option-5.active {
    -webkit-transition: all 0.252s ease-in-out;
    -moz-transition: all 0.252s ease-in-out;
    transition: all 0.252s ease-in-out;
    background-color: white;
    color: #3C3C3B;
    cursor: pointer;
}

/* Options actives */
span.conteneur-option-1:hover, span.conteneur-option-2:hover, span.conteneur-option-3:hover, span.conteneur-option-4:hover, span.conteneur-option-5:hover {
    background-color: white;
    border-color: 1px solid transparent;
    color: black;
}

span.conteneur-option-1.active:hover, span.conteneur-option-2.active:hover, span.conteneur-option-3.active:hover, span.conteneur-option-4.active:hover, span.conteneur-option-5.active:hover {
    background-color: #1363cc;
    border-color: 1px solid transparent;
    color: white;
}

.couleur-active {
    background-color: #1363cc!important;
    color: white!important;
    font-weight: 800;
}

.couleur-inactive {
    background-color: #3C3C3B!important;
    color: white!important;
}


/* Popup Cookies */
.popup-cookies {
    position: fixed;
    display:block;
    background-color: #252525;
    color:white;
    font-family: "new-spirit", serif;
    font-size: 0.8em;
    font-weight: 300;
    bottom: 0;
    left: 0;
    line-height: 1.350em;
    margin: 0;
    padding: 1em 1.5em;
    width: 100%;
    z-index: 1000;
}

/* Pointeur de pop-up */
.close-popup {
    cursor: pointer;
}

/* Animation de dissipation de la popup */
#popup-auto-dismiss {
    -webkit-animation: animationDismiss 5s ease-in-out;
    animation: animationDismiss 5s ease-in-out;
    display: block;
    opacity:0;
}

/* Scroll to Top */
div.scroll-top {
    -webkit-border-radius: 8px 0 0 8px;
    -webkit-transition: 0.45s;
    border-radius: 8px 0 0 8px;
    transition: 0.45s;
    position: fixed;
    background-color: #252525;
    color:white;
    cursor: pointer;
    bottom: 5em;
    right: 0%;
    font-weight: 500;
    font-size: 0.9em;
    margin: 0;
    padding: 0.75em 1em;
    z-index: 200;
}

div.scroll-top:hover {
    background-color: #1B9EF5;
    color:white;
    cursor: pointer;
    bottom: 5em;
    right: 0%;
    font-weight: 500;
    font-size: 0.9em;
    margin: 0;
    padding: 0.75em 1em;
    z-index: 200;
}

/****************************** DIVERS ******************************/
.rounded {
    -webkit-border-radius:50% 50% 50% 50% !important;
    border-radius:50% 50% 50% 50% !important;
}

.squared {
    -webkit-border-radius:0% 0% 0% 0% !important;
    border-radius:0% 0% 0% 0% !important;
}

.bordered {
    -webkit-border-radius:4% 4% 4% 4% !important;
    border-radius:4% 4% 4% 4% !important;
}

.container-marge {
    padding-bottom:1em;
    padding-top:0.50em;
}

.appareil-desktop {
    display: none;
}

.appareil-mobile {
    display: inline-block;
    width: 100%;
}


/****************************** ANIMATIONS ******************************/
/* ----------------------- */
/* Animations des sections */
/* ----------------------- */
@-webkit-keyframes sectionFadeInAnimation {
    from {opacity:0;} 
    to {opacity:1;}
}

@keyframes sectionFadeInAnimation {
    from {opacity:0;} 
    to {opacity:1;}
}


@-webkit-keyframes sectionFadeOutAnimation {
    from {opacity:1;} 
    to {opacity:0;}
}

@keyframes sectionFadeOutAnimation {
    from {opacity:1;} 
    to {opacity:0;}
}

/* ----------------------- */
/* Animations de l'en-tête */
/* ----------------------- */
@-webkit-keyframes replaceHeader {
    from {top:0;} 
    to {top:1em;}
}

@keyframes replaceHeader {
    from {top:0;} 
    to {top:1em;}
}

/* ----------------------------------- */
/* Animations des images (compétences) */
/* ----------------------------------- */
@-webkit-keyframes transformRotateScale {
    0% {
        -webkit-transform: rotate(0deg) scale(0.5);
        transform: rotate(0deg) scale(0.5);
    } 
    90% {
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

@keyframes transformRotateScale {
    0% {
        -webkit-transform: rotate(0deg) scale(0.5);
        transform: rotate(0deg) scale(0.5);
    } 
    90% {
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes transformRotateScaleInverse {
    0% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    } 
    10% {
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
    100% {
        -webkit-transform: rotate(0deg) scale(0.5);
        transform: rotate(0deg) scale(0.5);
    }
}

@keyframes transformRotateScaleInverse {
    0% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    } 
    10% {
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
    100% {
        -webkit-transform: rotate(0deg) scale(0.5);
        transform: rotate(0deg) scale(0.5);
    }
}

/* ----------------- */
/* Animation loaders */
/* ----------------- */
@-webkit-keyframes loading {

    0% {
        transform: rotate(0);
        border-right: 4px solid #642B2C;
    }
    50% {
        border-right: 4px solid #ff0000;
    }
    100% {
        transform: rotate(359deg);
        border-right: 4px solid #642B2C;
    }

}

@keyframes loading {

    0% {
        transform: rotate(0);
        border-right: 4px solid #642B2C;
    }
    50% {
        border-right: 4px solid #ff0000;
    }
    100% {
        transform: rotate(359deg);
        border-right: 4px solid #642B2C;
    }

}

/* ------------------------------- */
/* Animations des pop-up (cookies) */
/* ------------------------------- */
@-webkit-keyframes animationDismiss {
    0% {
        display: block;
        opacity:1;
    }
    90% {
        display: block;
        opacity:1;
    }
    100% {
        display: none;
        opacity:0;
    }
}

@keyframes animationDismiss {
    0% {
        display: block;
        opacity:1;
    }
    90% {
        display: block;
        opacity:1;
    }
    100% {
        display: none;
        opacity:0;
    }
}


/* -------------------------- */
/* Animations des pop-up (in) */
/* -------------------------- */
@-webkit-keyframes popup_fadein {
    from {top:-2em; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes popup_fadein {
    from {top:-2em; opacity:0}
    to {top:0; opacity:1}
}

/* -------------------------- */
/* Animations des pop-up (out) */
/* --------------------------- */
@-webkit-keyframes popup_fadeout {
    from {top:0; opacity:1} 
    to {top:-2em; opacity:0}
}

@keyframes popup_fadeout {
    from {top:0; opacity:1}
    to {top:-2em; opacity:0}
}

/* -------------------------- */
/* Animations des images (in) */
/* -------------------------- */
@-webkit-keyframes img_fadein {
    from {margin-top:-2em; opacity:0} 
    to {margin-top:0; opacity:1}
}

@-moz-keyframes img_fadein {
    from {margin-top:-2em; opacity:0} 
    to {margin-top:0; opacity:1}
}

@keyframes img_fadein {
    from {margin-top:-2em; opacity:0}
    to {margin-top:0; opacity:1}
}

/* -------------------------- */
/* Animations des images (out) */
/* --------------------------- */
@-webkit-keyframes img_fadeout {
    from {top:0; opacity:1} 
    to {top:-2em; opacity:0}
}

@-moz-keyframes img_fadeout {
    from {top:0; opacity:1} 
    to {top:-2em; opacity:0}
}

@keyframes img_fadeout {
    from {top:0; opacity:1}
    to {top:-2em; opacity:0}
}

/* ------------------------------- */
/* Animations des pop-up (cookies) */
/* ------------------------------- */
@-webkit-keyframes radialCircle {
    0% {
        -webkit-box-shadow: 0 0 0 rgba(32,95,146,1);
        box-shadow: 0 0 0 transparent;
    } 
    1% {
        -webkit-box-shadow: 0 0 1px rgba(32,95,146,1);
        box-shadow: 0 0 1px white;
    } 
    50% {
        -webkit-box-shadow: 0 0 25px rgba(32,95,146,0);
        box-shadow: 0 0 25px white;
    }
    100% {
        -webkit-box-shadow: 0 0 50px rgba(32,95,146,0);
        box-shadow: 0 0 50px transparent;
    }
}

@keyframes radialCircle {
    0% {
        -webkit-box-shadow: 0 0 1px rgba(32,95,146,1);
        box-shadow: 0 0 1px transparent;
    } 
    1% {
        -webkit-box-shadow: 0 0 0 rgba(32,95,146,1);
        box-shadow: 0 0 0 white;
    } 
    50% {
        -webkit-box-shadow: 0 0 25px rgba(32,95,146,0);
        box-shadow: 0 0 25px white;
    }
    100% {
        -webkit-box-shadow: 0 0 50px rgba(32,95,146,0);
        box-shadow: 0 0 50px transparent;
    }
}

/****************************** MEDIAS QUERIES ******************************/
/* Textes dans le caroussel */ 
@media screen and (min-width: 460px) {
    div.container-slideshow-fullsize {
        padding:1.5em 3em;
    }

    .t-faiseur-ecriture {
        left: 28.0%;
    }

    .t-createur-de-pages {
        right: 23.0%;
    }

    .t-et-d-ecrans {
        top: 90%;
        right: 30.50%;
    }

    .t-savoir-faire {
        bottom: 20%;
        left: 30%;
        right: 30%;
        text-align: center;
        width: 40%;
    }
}

@media screen and (max-width: 520px) {
    .mobile-remonter-img {
        margin-top: -1.5em!important;
    }

    div.accueil-slideshow img {
        margin-top:-7.5em;
        top:-7.5em;
    }

    img.intro-1-desktop {
        position: relative;
        margin-top: 1.5em!important;
        margin-left: -25%;
        margin-right: 25%;
        top: 4.5em;
    }
}

/* Positionnement de la vidéo secondaire */
@media screen and (min-width: 720px) {
    .mobile-remonter-img {
        margin-top: -9.5em;
    }

    img.intro-1-desktop {
        margin-top: -9.5em;
    }

    .video-second-texte {
        position: absolute;
        top:-1.75em;
        left: 35%;
        right: 35%;
        width: 30%;
        text-align: center;
    }
}

div.menu-logo p a > img.dk-logo {
    /* margin-bottom: 0; */
    /* margin-top: -1.75em; */
    margin-bottom: 0.25em;
    margin-top: -0.75em;
    height: 5em;
    width: 7em;
    /* height: 149px; */
    /* width: 243px; */
}

div.copyright p a > img.dk-logo-footer {
    /* margin-bottom: 0; */
    /* margin-top: -1.75em; */
    margin-bottom: 2.25em;
    margin-top: 0.5em;
    height: 10em;
    width: 12.5em;
}

div.head-typo {
    display: flex;
    margin-top:1.65em;
}

p#typ-1, p#typ-2, p#typ-3, p#typ-4, p#typ-5, p#typ-6 {
    color: #003D60;
    font-family: 'professor', 'Free script', 'Brush Script Std', "new-spirit", 'Calibri', Sans-Serif;
    font-size:1.75em;
    font-weight: 400;
}

@media screen and (max-width: 768px) {
    div.accueil-slideshow img {
        margin-top:-2em;
        max-height: 40em;
        width: 100%;
    }

    img.intro-1-desktop {
        margin-top: -7.5em;
        left: 25%;
        right: 25%;
        top: -3.5em;
    }

    div.pos-arr {
        /* left: 30%; */
        /* right: 30%; */
        text-align:center;
        /* width: 40%; */
        left: 46.25%;
        right: 47.25%;
        width: 6.5%;
    }

    h3.form-title {
        font-size: 0.9em;
        margin-top: 2.5em;
    }

    p.form-description {
        font-size: 0.75em;
    }

    .popup-cookies {
        font-size: 0.75em;
    }

    div.menu-logo p a > img.dk-logo {
        margin-bottom: 0;
        margin-top: -1.50em;
        height: 5em;
        width: 7em;
    }

    /* Sidebar */
    div.menu-principal-responsive {
        width: 15em;
    }

    div.copyright p a > img.dk-logo-footer {
        margin-bottom: 2.25em;
        margin-top: 0.5em;
        height: 8em;
        width: 10.5em;
    }

    h2.titre-sec-competences,
    h3.titre-sec-competences {
        margin-top: 1em;
    }

    li.lf-a1 { order:1; }
    li.lf-a2 { order:2; }
    li.lf-b1 { order:3; }
    li.lf-b2 { order:4; }
    li.lf-c1 { order:7; }
    li.lf-c2 { order:8; }
    li.lf-d1 { order:9; }
    li.lf-d2 { order:10; }
    li.lf-e1 { order:5; }
    li.lf-e2 { order:6; }
    li.lf-f1 { order:11; }
    li.lf-f2 { order:12; }
    li.lf-g1 { order:13; }
    li.lf-g2 { order:14; }

    #affichage-texte-animation, #affichage-texte-animation-2 {
        font-size: 1.2em;
        margin-bottom:0;
        margin-top:1em;
    }

    h2.titre-mobile { font-size: 1em!important; line-height: 1.000em !important; }

}

/*
@media screen and (min-width: 480px) and (max-width: 1280px) {

    /*
    div.accueil-slideshow div.desk-calc {
        min-height:15em; *//* 28em; */
    /*
    }
    */
/*
    div.desk-calc-hide {
*/
        /* display: none; */
/*
        min-height:15em; /* 28em; */
/*
        max-height:15em; /* 28em; */
/*
    }

}
*/

@media screen and (min-width: 768px) {

    /* Sidebar */
    div.menu-principal-responsive {
        font-size:1em;
    }

    /* Logo */
    div.accueil-slideshow img {
        margin-top:3em;
        max-height: 40em;
    }

    div.container-slideshow-fullsize {
        padding:1.5em 3em;
    }

    .t-faiseur-ecriture {
        left: 35.50%;
    }

    .t-createur-de-pages {
        right: 35%;
    }

    .t-et-d-ecrans {
        top: 90%;
        right: 39.50%;
    }

    .t-savoir-faire {
        bottom: 20%;
        left: 30%;
        right: 30%;
        text-align: center;
        width: 40%;
    }

    .slogan {
        position:absolute;
        height:18.5em;
        left: 30%;
        top: -2.5em;
    }

    .menu-navigation {
        position: absolute;
        font-size: 1.4em;
        right: 1.75em;
        top: 1.50em;
    }

    .container-marge {
        padding-bottom:5em;
        padding-top:5em;
    }

    p#affichage-texte-animation, p#affichage-texte-animation-2 {
        margin-top: -0.75em;
    }

    p#affichage-texte-animation-2 {
        margin-bottom: -0.75em;
        margin-top: 1em;
    }

    div.accueil-slideshow video.desk_video,
    div.appareil-mobile img.desk_video {
        min-height:34em; /* 28em; */
        max-height:34em; /* 28em; */
        object-fit: cover;
    }

    div.accueil-slideshow div.desk-calc {
        min-height:18em; /* 34em; */
    }

    img.intro-1-desktop {
        position: absolute;
        top: -4.5em;
        left: 25%;
        right: 25%;
        width: 50%;
        text-align: center;
    }

    /* Positionnement de la flèche */
    div.pos-arr {
        left: 47.10%;
    }

    #presentation {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-bottom: 2.5em;
        padding-left: 5em;
        padding-right: 5em;
        padding-top: 5em;
    }

    .triangle-inverse {
        height:8.5em;
        width:100%;
    }

    .triangle-decalage-droite {
        margin-right: 1.5em;
    }

    .competences-archives {
        max-height: 28.666em;
    }

    .slick-slide img {
        height:11.5em;
    }

    .slick-prev {
        left: 0;
        top:5em;
    }

    .slick-next {
        right: 0;
        top:5em;
    }

    .slick-list {
        margin-top:4.5em;
    }

    .slick-track {
        margin-top: 3.5em;
    }

    .slick-track:nth-child(1) {
        margin-top: 1em;
    }

    .slick-track:nth-child(1) {
        margin-top: 3.5em;
    }

    div.column_l {
        margin-right: 0.5em;
    }

    div.column_r {
        margin-left: 0.5em;
    }

    /* Début corrections des positions des images pour le premier carrousel. */
    img.img-premier-caroussel {
        height: 11.5em!important;
        /* margin: auto; */
        /* text-align: center; */
        width: 100%!important;
    }

    /* Début corrections des positions des images pour le deuxième carrousel. */
    img.img-deuxieme-caroussel {
        height: 5em!important;
        /* margin: auto; */
        /* text-align: center; */
        width: 100%!important;
    }

    /*
    .pos-4Ts3q {
        height: 3.5em!important;
    */
        /* margin-top:-2.5em; */
    /*
    }

    .pos-9P0uO {
        height: 3.5em!important;
    */
        /* margin-top:-2.5em; */
    /*
    }

    .pos-6cV8W {
        height: 3.5em!important;
    */
        /* margin-top:-2.5em; */
    /*
    }

    .pos-3d6Qc {
        height: 3.5em!important;
    */
        /* margin-top:-2.5em; */
    /*
    }

    .pos-8yJk7 {
        height: 3.5em!important;
        /* margin-top:-2.5em; */
    /*
    }

    .pos-4xnSy {
        height: 4.75em!important;
        /* margin-top:-3.5em; */
    /*
    }

    .pos-Mg3z6 {
        height: 4.75em!important;
        /* margin-top:-3.5em; */
    /*
    }
    */
    /* Fin corrections des positions des images pour le deuxième carrousel. */

    /* Formulaire de contact */
    div.contact-form {
        margin: 4em 20%;
        width: 60%;
    }

    /* Options d'accessibilité */
    div.popup-accessibilite {
        font-size: 1em;
        min-height: 14em;
        min-width: 24em;
        /* left:11.435em; */
        /* left:11.45em!important; */
        left:40%;
        right:40%;
        /* top:6.67em; */
        /* top:6.70em!important; */
        /* top:12.5%; */
        top:0%;
    }

    p.popup-acs-title {
        font-size: 1.3em;
    }

}

@media screen and (min-width: 960px) {
    /*** Général ***/
    /*-----------------------------------------------------*/
    html, body {
        overflow-x: hidden;
    }

    /*------------------(Flex)*/
    div.flex {
        display:flex;
    }

    div.jc-around {
        justify-content: space-around;
    }

    div.jc-between {
        justify-content: space-between;
    }

    div.jc-center {
        justify-content: center;
    }

    div.jc-evenly {
        justify-content: space-evenly;
    }

    /*------------------(Marges)*/
    div.description-text-droite {
        margin-left: 5em!important;
    }

    div.description-text-gauche {
        margin-right: 5em!important;
    }

    /*-----------------------------------------------------*/
    /*** EN-TÊTE ***/
    header.header {
        display: flex;
        justify-content: space-between;
    }

    /* Menu de navigation */
    div.menu-principal {
        width: 100%;
    }

    div.menu-principal > ul.menu-flex {
        display: flex;
        justify-content: space-evenly;
    }

    div.menu-principal > ul.menu-items {
        margin-left: -5em;
    }

    div.menu-principal > ul.menu-items li a {
        margin-left: -5em;
        margin-right: -5em;
        margin-top: 0.75em;
        padding: 0.5em 1em;
    }

    /* Troisième bloc du menu */
    div.thrd-menu {
        width:80%;
    }
    
    .typo-taille {
        font-size:0.9em;
    }

    .mobile-remonter-img {
        margin-top: -2.5em;
    }

    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*** CORPS DE PAGE ***/
    /* Animations */
    .animation-bordure-bas {
        -webkit-animation: extended-border-size 2s ease;
        animation: extended-border-size 2s ease;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        position: absolute;
        left:50%;
        /* right:35%; */
        top:5.25em;
        background-color: white;
        border: 2px solid white;
        height: 90px;
        width: 7.5px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        z-index:1200;
    }

    .animation-bordure-haut {
        -webkit-animation: extended-border-size 2s ease;
        animation: extended-border-size 2s ease;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        position: absolute;
        left:50%;
        /* right:35%; */
        top:2.5em;
        background-color: white;
        border: 2px solid white;
        height: 90px;
        width: 7.5px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        z-index:1200;
    }

    .animation-bordure-bas::after {
        bottom: 0;
        right: 0;
        content: '';
        display: block;
        position: absolute;
    }

    .animation-bordure-haut::after {
        top: 0;
        left: 0;
        content: '';
        display: block;
        position: absolute;
    }

    /*
    @-webkit-keyframes extended-border-size {
        0% { width: 25px; }
        100% { margin-left: -65px; width: 80px; }
    }
    */

    @keyframes extended-border-size {
        0% {
            height: 25px;
            /* transform: rotate(0deg); */
        }
        100% {
            height: 90px;
            /* transform: rotate(90deg) */
        }
    }

    /* Slideshow animé et claque */
    div.accueil-slideshow, div.desk-calc,
    div.accueil-slideshow video.desk_video {
        min-height: 20em;
    }

    /* Logo */
    div.accueil-slideshow img {
        margin-top:3em;
        max-height: 40em;
    }

    /* Blocs */ 
    /* Accueil: Slideshow - Titre "Créateur de pages" */
    p.text-createur-de-pages {
        right: -0.25em;
    }

    p.text-createur-de-pages {
        font-size:1.35em;
        left: 40.5%;
        margin-top: -0.20em;
        right: -5.00em;
        margin-left: 2.90em;
        margin-right: -0.20em;
        /* top: 3em; */
    }
    
    /* Accueil: Slideshow - Titre "Faiseur d'écriture" */
    p.text-faiseur-ecriture {
        font-size:1.35em;
        left: 25.30%;
        top: 3.45em;
    }
    
    /* Accueil: Slideshow - Titre "Et d'écran" */
    p.text-et-d-ecrans {
        font-size:1.35em;
        left: 45.75%;
        top: 5.50em;
        width: 8em;
    }
    

    /*-----------------------------------------------------[Bloc qui sommes-nous ?]*/
    /* Attribution de la largeur pour chaque conteneur */
    div.about-us div.who-is-it,
    div.about-us div.teams-listen {
        font-family: "new-spirit", 'Calibri', Sans-Serif;
        font-weight: 200;
        width: 50%;
    }

    /* Espacement des paragraphes */
    div.about-us div.who-is-it div.contenu-texte p,
    div.about-us div.teams-listen div.contenu-texte p {
        padding: 0 0;
    }

    /* Style des titres secondaires */
    div.about-us div.who-is-it div.contenu-texte h2.title-faiseur-page,
    div.about-us div.teams-listen div.contenu-texte h2.title-faiseur-page, 
    h2.title-faiseur-page {
        margin-top: 0;
    }

    div.about-us div.who-is-it div.contenu-texte h2.title-faiseur-page-2,
    div.about-us div.teams-listen div.contenu-texte h2.title-faiseur-page-2 {
        margin-top: 0;
    }

    @media screen and (max-width:560px) {
        img.dk_desk {
            margin-left: -1em!important;
            margin-right: 1em!important;
            padding-left: -1em!important;
            padding-right: 1em!important;
        }
        .qsn-titre, .qsn-description {
            margin-left: -1em!important;
            margin-right: 1em!important;
            padding-left: -1em!important;
            padding-right: 1em!important;
        }
    }

    /*------------------(Dimensions service-relecture et maintenance)*/
    div.direction {
        width: 100%;
    }

    div.presidence,
    div.service-relecture,
    div.maintenance {
        width: 32.633%;
    }


    /*-----------------------------------------------------[Bloc pré-footer]*/
    /*------------------(Texte, polices et tailles)*/
    div.contenu-form {
        font-size: 2em;
    }


    /*-----------------------------------------------------[Bloc compétences ?]*/
    /* Bloc spécifiques */
    div.bloc-preparation-contenu,
    div.bloc-faiseur-pages {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 5em;
    }

    /* Conteneur image + conteneur texte */
    div.contenu-image,
    div.contenu-texte {
        margin-left: 1em;
        margin-right: 5em;
    }

    /* Ajout de la largeur */
    div.bloc-preparation-contenu div.contenu-image,
    div.bloc-faiseur-pages div.contenu-image, 
    div.bloc-preparation-contenu div.contenu-texte,
    div.bloc-faiseur-pages div.contenu-texte {
        width: 50%;
    }

    /* Style des titres secondaires */
    div.bloc-preparation-contenu div.contenu-texte h2.title-faiseur-page,
    div.bloc-faiseur-pages div.contenu-texte h2.title-faiseur-page,
    h2.title-faiseur-page,
    div.bloc-preparation-contenu div.contenu-texte h2.title-faiseur-page-2,
    div.bloc-faiseur-pages div.contenu-texte h2.title-faiseur-page-2 {
        margin-top: -0.355em;
    }

    .liste-competences {
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        cursor: default;
    }

    .liste-competences:hover {
        background-color: #758BA1;
    }

    ul.competences-liste-item {
        margin-bottom: 1em;
    }

    ul.competences-liste-item li {
        line-height: 1.425em;
        margin-left: 1.5em;
    }

    li.interv-fonts-ns {
        font-family:'new-spirit,sans-serif';
    }

    .DI-marge { margin-top: 0.35em; }

    /*------------------ Style des textes*/
    p.liste-competences {
        font-size: 1.15em;
        margin: 0;
        margin-bottom: 0.50em;
    }

    /*------------------(Triangles jaunes)*/
    div.triangle-contenu {
        display: inline-block;
        position:absolute;
        margin-left: -4.25em;
        margin-top: -2.0em;
        width: 3.5em;
    }

    div.triangle-contenu-pos-droite {
        display: inline-block;
        position:absolute;
        margin-left: -4.75em; /* -0.75em */
        margin-top: -0.5em;
        width: 3.5em;
    }

    div.triangle-marge-top {
        margin-top: 0.25em;
    }

    iframe.desk-en-video {
        height: 30em;
        width: 100%;
    }

    object.book-desk {
        height: 30em;
        width: 100%;
    }


    /*-----------------------------------------------------[Bloc pied de page]*/
    footer div.footer {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    footer div.footer div.presentation,
    footer div.footer div.contacter-nous,
    footer div.footer div.copyright {
        padding: 1em;
    }

    footer div.footer div.copyright p {
        margin-top: -2em;
    }
    
    footer div.footer div.presentation {
        width: 40%;
    }

    footer div.footer div.contacter-nous {
        width: 40%;
    }

    footer div.footer div.copyright {
        width: 20%;
    }


    /*-----------------------------------------------------*/
    /*------------------(Style fenêtres modales)*/
    .modal-content {
        max-height: 30em;
    }

    .modal-body { 
        max-height: 30em;
    }

    /*--------------------------------------------------------Slide video animation */
    /* Animation desktop uniquement */
    /* Texte "Créateurs de page" */
    @-webkit-keyframes fadeIntroTextCP {
        from {
            margin-left: 3.50em;
            margin-right: -0.20em;
            right: -2.00em;
            opacity: 0;
        } 
        to {
            /*
            margin-left: 2.50em;
            margin-right: -2.20em;
            */
            margin-left: 2.90em;
            margin-right: -0.20em;
            margin-top: -0.20em;
            right: -5.00em;
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIntroTextCP {
        from {
            margin-left: 3.50em;
            margin-right: -0.20em;
            right: -2.00em;
            opacity: 0;
        } 
        to {
            /*
            margin-left: 2.50em;
            margin-right: -2.20em;
            */
            margin-left: 2.90em;
            margin-right: -0.20em;
            margin-top: -0.20em;
            right: -5.00em;
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIntroTextCP {
        from {
            margin-left: 3.50em;
            margin-right: -0.20em;
            right: -2.00em;
            opacity: 0;
        } 
        to {
            /*
            margin-left: 2.50em;
            margin-right: -2.20em;
            */
            margin-left: 2.90em;
            margin-right: -0.20em;
            margin-top: -0.20em;
            right: -5.00em;
            opacity: 1;
        }
    }

    @keyframes fadeIntroTextCP {
        from {
            margin-left: 3.50em;
            margin-right: -0.20em;
            right: -2.00em;
            opacity: 0;
        } 
        to {
            /*
            margin-left: 2.50em;
            margin-right: -2.20em;
            */
            margin-left: 2.90em;
            margin-right: -0.20em;
            margin-top: -0.20em;
            right: -5.00em;
            opacity: 1;
        }
    }

    /* margin-left: 2.50em;
    margin-right: -2.20em;
    margin-top: -0.20em;
    right: -5.00em; */
    /* Texte "Faiseur d'écriture" */
    @-webkit-keyframes fadeIntroTextFE {
        from {
            left: 20.00%;
            opacity: 0;
        } 
        to {
            left: 25.30%;
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIntroTextFE {
        from {
            left: 20.00%;
            opacity: 0;
        } 
        to {
            left: 25.30%;
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIntroTextFE {
        from {
            left: 20.00%;
            opacity: 0;
        } 
        to {
            left: 25.30%;
            opacity: 1;
        }
    }

    @keyframes fadeIntroTextFE {
        from {
            left: 20.00%;
            opacity: 0;
        } 
        to {
            left: 25.30%;
            opacity: 1;
        }
    }

    /* Texte "Et d'écran" */
    @-webkit-keyframes fadeIntroTextEE {
        from {
            top: 0;
            opacity: 0;
        } 
        to {
            top: 5.50em;
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIntroTextEE {
        from {
            top: 0;
            opacity: 0;
        } 
        to {
            top: 5.50em;
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIntroTextEE {
        from {
            top: 0;
            opacity: 0;
        } 
        to {
            top: 5.50em;
            opacity: 1;
        }
    }

    @keyframes fadeIntroTextEE {
        from {
            top: 0;
            opacity: 0;
        } 
        to {
            top: 5.50em;
            opacity: 1;
        }
    }
}

@media screen and (max-width: 1280px) {

    div.accueil-slideshow img {
        /* margin-top:-2em; */
        max-height: 40em;
    }

    img.intro-1-desktop {
        /* position: absolute; */
        /* top: -4.5em;
        left: 25%;
        right: 25%;
        */
        width: 50%;
        text-align: center;
        /* width: 100%; */
        left: 25%;
        right: 25%;
        top: -8.5em;
    }
    /*
    img.intro-1-desktop {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    */
}

@media screen and (min-width: 1280px) {
    div.container-slideshow-fullsize {
        padding:1.5em 3em;
    }

    .t-faiseur-ecriture {
        font-size: 1.6em;
        top: 0.25em;
        left: 35.5%;
    }

    .t-createur-de-pages {
        font-size: 1.6em;
        top: 0.25em;
        right: 35.25%;
    }

    .t-et-d-ecrans {
        font-size: 1.6em;
        top: 90%;
        right: 39.75%;
    }

    .t-savoir-faire {
        font-size: 1.5em;
        bottom: 20%;
        left: 30%;
        right: 30%;
        text-align: center;
        width: 40%;
    }

    .text-small {
        font-size: 1.25em!important;
    }

    .appareil-mobile {
        display: none;
    }

    .appareil-desktop {
        display: inline-block;
        width: 100%;
    }

    div.accueil-slideshow video.desk_video,
    div.appareil-mobile img.desk_video {
        min-height:34em; /* 28em; */
        max-height:34em; /* 28em; */
        object-fit: cover;
    }

    div.accueil-slideshow div.desk-calc {
        min-height:34em; /* 34em; */
    }

}

@media screen and (min-width: 1440px) {

    /* Logo */
    div.accueil-slideshow img {
        margin-top:-2em;
        max-height: 40em;
    }

    img.intro-1-desktop {
        height: 60em;
    }

}

@media screen and (max-width: 1920px) {
    div.accueil-slideshow video.desk_video,
    div.appareil-mobile img.desk_video {
        min-height:34em; /* 28em; */
        max-height:34em; /* 28em; */
        object-fit: cover;
    }

    /*
    div.accueil-slideshow div.desk-calc {
        min-height:34em; /* 28em; */
    /*
    }
    */
}

@media screen and (min-width: 1920px) {

    div.container-slideshow-fullsize {
        padding:1.5em 3em;
    }

    .t-faiseur-ecriture {
        font-size: 1.6em;
        top: 0.25em;
        left: 35.5em;
    }

    .t-createur-de-pages {
        font-size: 1.6em;
        top: 0.25em;
        right: 35.15em;
    }

    .t-et-d-ecrans {
        font-size: 1.6em;
        top: 90%;
        right: 38.225em;
    }

    .t-savoir-faire {
        font-size: 1.2em;
        bottom: 20%;
        left: 30%;
        right: 30%;
        text-align: center;
        width: 40%;
    }

    .text-small {
        font-size: 1.25em!important;
    }
}

@media screen and (min-width: 2140px) {
    div.accueil-slideshow video.desk_video,
    div.appareil-mobile img.desk_video {
        min-height:46em; /* 28em; */
        max-height:46em; /* 28em; */
        object-fit: cover;
    }

    div.accueil-slideshow div.desk-calc {
        min-height:46em; /* 28em; */
    }
}