/* DNMADE TROIS > TYPOGRAPHIES : ROMAN GROTESQUE WEBL, TOTENTANZ WEBL BACKSLANTED, DNAMDE */

@font-face {
    font-family: 'Roman Grotesque WEBL';
    src: url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Black.eot');
    src: url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Black.eot?#iefix') format('embedded-opentype'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Black.woff2') format('woff2'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Black.woff') format('woff'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Black.ttf') format('truetype'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Black.svg#RomanGrotesqueWEBL-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roman Grotesque WEBL';
    src: url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Bold.eot');
    src: url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Bold.eot?#iefix') format('embedded-opentype'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Bold.woff2') format('woff2'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Bold.woff') format('woff'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Bold.ttf') format('truetype'),
        url('//dnmadedg.fr/webfont/RomanGrotesqueWEBL-Bold.svg#RomanGrotesqueWEBL-Bold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


@font-face {    
    font-family: 'Totentanz WEBL Backslanted';
    src: url('//dnmadedg.fr/webfont/TotentanzWEBL-Backslanted.eot');
    src: url('//dnmadedg.fr/webfont/TotentanzWEBL-Backslanted.eot?#iefix') format('embedded-opentype'),
        url('//dnmadedg.fr/webfont/TotentanzWEBL-Backslanted.woff2') format('woff2'),
        url('//dnmadedg.fr/webfont/TotentanzWEBL-Backslanted.woff') format('woff'),
        url('//dnmadedg.fr/webfont/TotentanzWEBL-Backslanted.ttf') format('truetype'),
        url('//dnmadedg.fr/webfont/TotentanzWEBL-Backslanted.svg#TotentanzWEBL-Backslanted') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'dnmade';
    src: url('//dnmadedg.fr/webfont/dnmade-Regular.eot');
    src: url('//dnmadedg.fr/webfont/dnmade-Regular.eot?#iefix') format('embedded-opentype'),
        url('//dnmadedg.fr/webfont/dnmade-Regular.woff2') format('woff2'),
        url('//dnmadedg.fr/webfont/dnmade-Regular.woff') format('woff'),
        url('//dnmadedg.fr/webfont/dnmade-Regular.ttf') format('truetype'),
        url('//dnmadedg.fr/webfont/dnmade-Regular.svg#dnmade-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
/* -- COULEURS PRINCIPALES -- */
  --fond768: rgb(28,27,27);
  --titre-fonce768: rgba(235,232,219, 0.4);
  --titre-clair768: rgba(235,232,219, 0.8);
  --texte768: rgba(235,232,219, 0.7);
  --mark768: rgb(105, 79, 102); /*rgb(78, 74, 74);*/
  
  --fond1200: rgb(235,232,219);
  --titre-fonce1200: rgba(36,33,32, 0.8);
  --titre-clair1200: rgba(36,33,32, 0.3);
  --texte1200: rgba(36,33,32, 0.6);
  --mark1200: rgb(249, 200, 70); /*rgb(216, 213, 202);*/

  --orange: rgb(255, 90, 0);

/* -- COULEURS SECONDAIRES --*/
  --h1: rgba(0, 255, 255, 0.3);
  --code: rgb(26, 139, 165);

/* -- COULEUR DE LIEN */
  --hover: rgb(0, 255, 255);
}


* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 1em; max-height: 100%; }
body { font-family: /*"Barlow Semi Condensed", sans-serif!important;*/ "Barlow", sans-serif!important; background-color: var(--fond1200); line-height: 1.4em; color: var(--texte1200); }

/* -- DÉBUT STRUCTURE -- */
header { width: 100vh; height: 18vw; display: flex; }
header img { background-repeat: no-repeat;  }
.header-cartel-home { width: 100%; background-image: url('http://dnmadedg.fr/img/degrade.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; margin-left: 1em; flex-direction: column; }
.header-cartel-pra { width: 100%; background-image: url('http://dnmadedg.fr/img/degrade.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; margin-left: 1em; flex-direction: column; }
.header-cartel-box { display: flex!important; flex-direction: column!important; height: 30vh!important; padding-bottom: 1rem!important; }
.emballage header { display: block; }
footer { flex-grow: 0; flex-shrink: 0; margin-left: 1em; background-color: var(--orange); border-radius: 0.8em 0 0 0; }
footer p { padding-left: 1.8em; padding-top: 1.4em; padding-bottom: 1em; font-weight: 200; font-size: 0.85rem; color: rgb(255,255,255); }
/* -- FIN STRUCTURE -- */


/* -- DÉBUT TITRE DE NIVEAUX ET PARTICULARISMES -- */
h1 { font-family: 'Totentanz WEBL Backslanted'!important; font-size: clamp(1.4rem, 0.333rem + 2.222vw, 2rem); line-height: 1; font-weight: 400; font-style: italic!important;  color: var(--h1); padding-top: 2.2rem; margin-top: calc(9rem + 0.5vw); padding-left: 2em;  }
h2 { font-family: 'Roman Grotesque WEBL'!important; font-weight: 900!important; font-style: normal!important; font-size: clamp(2.6rem, 0.822rem + 3.704vw, 3.6rem); line-height: 0.7em!important; margin-bottom: clamp(3.5rem, 0.833rem + 5.556vw, 5rem)!important; }
h3 { font-family: 'Roman Grotesque WEBL'!important; font-weight: 900!important; font-style: normal!important; font-size: clamp(1.9rem, 1.011rem + 1.852vw, 2.4rem); line-height: 0.8em!important; margin-bottom: 0.4em!important; }
h4 { font-size: clamp(1.2rem, -0.578rem + 3.704vw, 2.2rem); font-weight: 700;}
h5 { font-family: "Barlow", sans-serif!important; font-size: clamp(1.08rem, 0.689rem + 0.815vw, 1.3rem)!important; font-weight: 400!important; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); margin-bottom: 0.1em!important; }
.nom { font-size: clamp(1.08rem, 1.07rem + 0.477vw, 1.5rem)!important; margin-top: -0.7em; margin-bottom: 0.6em!important; margin-left: 0.75em; }
h6 { font-size: clamp(1.25rem, 0.983rem + 0.556vw, 1.4rem); font-weight: 500; }
h2, h3, h4, h5, h6 { color: var(--titre-fonce1200); }

h3 code { font-size: clamp(1.6rem, 0.711rem + 1.852vw, 2.1rem)!important; font-weight: 600!important; }
h5 code { font-size: clamp(0.98rem, 0.589rem + 0.815vw, 1.2rem)!important; font-weight: 400!important; }
h1 span, h2 span, h3 span, h4 span { color: var(--titre-clair1200); } 

small { font-family: "Barlow", sans-serif!important; font-size: 0.9rem; font-weight: 300; color: rgba(36,33,32,1); }
strong, b { font-weight: 600; }
mark { background-color: var(--mark1200); color: var(--texte1200); border-radius: 4px; }

.commentaire { font-family: "Barlow", sans-serif!important; font-size: 0.85rem; font-weight: 400; color: var(--orange); line-height: 1; }
/* -- FIN TITRE DE NIVEAUX ET PARTICULARISMES -- */


/* -- DÉBUT NAVIGUATION -- */
nav { width: 100vw; position: sticky!important; top: 0!important; flex-grow: 0; flex-shrink: 0; z-index: 100; font-family: "Barlow", sans-serif!important; font-weight: 400;}
nav ul { font-size: 1rem; list-style-type: none!important; } /* pour supprimer les puces carrées pour les items du burger-menu */
.nav-link { color: var(--titre-clair768)!important; }
.nav-link:hover { color: var(--hover)!important; background-color: var(--orange); }
.navbar-expand-lg { height: 3.5em; margin-left: 1em;  border-radius: 0 0 0 0.8em; }
.navbar-brand { font-family: "Barlow Semi Condensed", sans-serif!important; color: rgb(0, 255, 255)!important; padding-left: 0.7em; }
.navbar-toggler { background-color: var(--orange); padding-right: 1.4em; }
.dropdown-menu { --bs-dropdown-bg:rgba(0,255,255,0.8)!important; }
ul { font-size: clamp(1.031rem, 0.865rem + 0.347vw, 1.125rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); list-style-type: none; }
a { text-decoration: none; color: var(--orange); }
a:hover{ text-decoration: none; background-color: var(--hover); color: var(--orange); border-radius: 4px; }
/* -- FIN NAVIGUATION -- */


/* -- DÉBUT CONTENU -- */
main { flex-grow: 1; max-width: 1200px; margin: 0 auto; padding-top: 2em; margin-bottom: 10em!important; }
article { margin-top: 2em; margin-right: 1.2em; margin-bottom: 2em; margin-left: 1.2em; }
.chapo { margin-bottom: 0.06em!important; }
p { font-size: clamp(1.031rem, 0.865rem + 0.347vw, 1.125rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); }
p code { font-size: clamp(0.9rem, 0.722rem + 0.37vw, 1rem); font-weight: 400; }
img { width: 100%; }
article ul { padding-left: 1em!important; }

picture { width: 55%; display: flex; justify-content: center; margin: 0 auto; margin-top: 1.8em; margin-bottom: 4em; }
picture img { max-inline-size: 96%; block-size: auto; inline-size: auto; image-rendering: auto; /* rendu image - net ou flou */ }

.vimeo-h {  /*background-color: rgba(255, 0, 0, 0.4);width: 60vh;*/ margin-left: auto; margin-right: auto; padding:41% 0 0 0; position:relative; }
.vimeo-v { padding: 55% 0 0 0; position: relative; margin-left: auto; margin-right: auto; }
/* -- FIN CONTENU -- */


/* -- DÉBUT OPEN PDF -- */
.open-pdf  { font-size: clamp(1.031rem, 0.865rem + 0.347vw, 1.125rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); }
.open-item:hover { text-decoration: none; background-color: var(--hover); color: var(--orange); }
.open { /* display: inline-block; */ color: var(--orange); }
.open-pdf .open .open-name > .open-items > .open-item { display: inline-block; }
.open-pdf .open .open-name > .open-items > .open-item:before { font-family: 'dnmade'; font-style: normal; font-weight: normal; font-variant: normal; -webkit-font-smoothing: antialiased; content: "\EA13"; font-size: 22px; margin-right: 3px; }
/* -- FIN OPEN PDF -- */


/* -- DÉBUT OPEN HTML -- */
.open-html { font-size: clamp(1.031rem, 0.865rem + 0.347vw, 1.125rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); }
.open-item:hover { text-decoration: none; background-color: var(--hover); color: var(--orange); }
.open { /* display: inline-block; */ color: var(--orange); }
.open-html .open .open-name > .open-items > .open-item { display: inline-block; }
.open-html .open .open-name > .open-items > .open-item:before { font-family: 'dnmade'; font-style: normal; font-weight: normal; font-variant: normal; -webkit-font-smoothing: antialiased; content: "\EA14"; font-size: 22px; margin-right: 3px; }
/* -- FIN OPEN HTML -- */


/* -- DÉBUT OPEN PNG -- */
.open-png { font-size: clamp(1.031rem, 0.865rem + 0.347vw, 1.125rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); }
.open-item:hover { text-decoration: none; background-color: var(--hover); color: var(--orange); }
.open { /* display: inline-block; */ color: var(--orange); }
.open-png .open .open-name > .open-items > .open-item { display: inline-block; }  
.open-png .open .open-name > .open-items > .open-item:before { font-family: 'dnmade'; font-style: normal; font-weight: normal; font-variant: normal; -webkit-font-smoothing: antialiased; content: "\EA15"; font-size: 22px; margin-right: 3px; }
/* -- FIN OPEN PNG -- */


/* -- DÉBUT CARROUSEL */
.container1, .container2, .container3, .container4, .container5, .container6, .container7, .container8, .container9, .container10, .vimeo { width: 45vh; margin-left: auto; margin-right: auto; margin-bottom: 5px}
.carousel-dots1 { position: absolute; z-index: 0; left: 50%; right: 50%; bottom: -1.5%!important; display: flex; justify-content: center; } /* points du carrousel #1 */
/* -- FIN CARROUSEL */


/* -- DÉBUT CODE -- */
code { /*font-family: 'Source Code Pro', monospace; font-size: clamp(1rem, 0.998rem + 0.114vw, 1.1rem);*/ font-weight: 400; color: var(--code); }
code span { /*font-family: 'Source Code Pro', monospace;*/ color: black; }
.specode { /*font-family: 'Source Code Pro', monospace;*/ font-size: 1rem; color: rgb(34,170,48); }
.specode span { /*font-family: 'Source Code Pro', monospace;*/ color: black; }
.lecartelcode { font-size: 1.05rem!important; background-color: rgba(169,191,191,0.5); width: 96%; margin: auto; border-radius: 1.2em; padding: 1.5em; margin-top: -0.6em; margin-bottom: 2em; line-height: 1.4rem; }
.lecartelnav { font-family: "Roboto Flex", sans-serif; width: 96%; margin: auto; background-color: rgba(213, 209, 191, 0.6); border-radius: 1.2em; padding: 1.5em; margin-top: clamp(1.1rem, 0.389rem + 1.481vw, 1.5rem)!important; margin-bottom: clamp(2.5rem, -0.167rem + 5.556vw, 4rem)!important; text-decoration: dotted!important; }
.lecartelnav ul { list-style-type: disc; }
/* -- FIN CODE -- */


/* -- DÉBUT ÉTIQUETTES AU DESSUS DU CODE HTML, DE LA VISUALISATION DANS UN NAVIGATEUR ET D'UNE VIDÉO -- */
.cotehtml { position: relative; top: 0.46em; margin-left: 50px; font-size: 0.8rem; font-weight: 200; color: rgba(36,33,32,1); display: inline-block; padding: 2px 16px; background-color: rgba(169,191,191,0.5); border-radius: 1em 1em 0 0; }
.cotenavigateur { position: relative; top: 3.15em; margin-left: 50px; font-size: 0.8rem; font-weight: 200; color: rgba(36,33,32,1); display: inline-block; padding: 2px 16px; background-color: rgba(213, 209, 191, 0.6); border-radius: 1em 1em 0 0; }
.cotevideo { position: relative; top: 1.3em; margin-left: 50px; font-size: 0.8rem; font-weight: 200; color: rgba(36,33,32,1); display: inline-block; padding: 2px 16px; border-radius: 1em 1em 0 0; border: 1px dotted rgb(68,78,85); }
/* -- FIN ÉTIQUETTES AU DESSUS DU CODE HTML, DE LA VISUALISATION DANS UN NAVIGATEUR ET D'UNE VIDÉO -- */


/* -- DÉBUT BOUTON BACK TO TOP -- */
#top { display: inline-block; background-color: rgb(96,96,96); width: 2.4em; height: 3.2em; text-align: center; border-radius: 1.6em; position: fixed; bottom: 1em; opacity: 0; visibility: hidden; z-index: 1000; text-decoration: none; margin-left: 0.4em; }
#top:after { content: "\f077"; /* content: "\f062"; */ font-family: 'FontAwesome'; font-weight: normal; font-style: normal; line-height: 2.1em; color: rgb(0,255,255); }
#top:hover { cursor: pointer; background-color: var(--orange); }
#top:active { background-color: rgb(133,123,123); }
#top.show { opacity: 1; visibility: visible; }
#top { left: 43.5%; }
/* -- FIN BOUTON BACK TO TOP -- */


/* -- DÉBUT DE DIVERS -- */
.intro { margin-bottom: 2.6em!important; }
.texte-gris { font-size: clamp(0.9rem, 0.9rem + 0vw, 0.9rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); }
.texte-gris-liste li { font-size: clamp(1.06rem, 0.722rem + 0.704vw, 1.25rem)!important; font-weight: 350; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); list-style-type: none; margin-left: -1.55em; }
/* h4 span, h4 small em { color: rgb(169,167,159); font-weight: 200; } */
.filet-haut { position: relative; margin-top: 4em;}
.filet-haut::before { content: ""; position: absolute; top: -16px; left: 0; width: 90px; height: 2px; background-image: linear-gradient(to left, var(--fond1200), var(--orange)); }
.downh4 { margin-bottom: 4em!important; }
.progress_bar { height: 0px; display: none; z-index: 100; }
.percentage { display: none; z-index: 100; }
.decal { display: block; }
.stylemod { color: orangered; }
/* hr { width: 45vw; margin: auto; border: none; border-top: 3px double rgb(133,123,123); color: rgb(31,29,29); overflow: visible; text-align: center; margin-top: 3em; margin-bottom: 2em; } */
/* hr:after { background: rgb(235,232,219); content: ']['; font-size: 1rem; padding: 0 0.4em; position: relative; top: -0.6em; } */
hr {border: 0; height: 3px; background-image: linear-gradient(to right, rgba(36,33,32,0), rgb(255, 90, 0), rgb(255, 90, 0), rgba(36,33,32,0)); margin: 5em 0 6em 0;}
.puce:before { background-color: var(--orange); border-radius: 50%; content: ""; display: inline-block; width: 14px; height: 14px; margin-right: -4px; margin-top: -36px; vertical-align: middle; }
u { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--code); }
.finpara { margin-bottom: 2em; }
.finpage { padding-bottom: 8em; }
.vignette { width: 20%; }
.splash { width: 50%; }
#top { left: 48.6%; }
.glisse { padding-right: 5em;} /* décalage du menu vers la gauche */
/* .emballage { box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; } */
.legende { font-size: clamp(0.8rem, 0.533rem + 0.556vw, 0.95rem); margin-left:auto; margin-right: auto; text-align: center; margin-top: -4em; margin-bottom: 2.5em; color: #9a9a9a; }
/* -- FIN DE DIVERS -- */


/* -- DÉBUT ONBOARDING & SPLASH SCREEN -- */
.onboard { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width: 100%; margin: 1em; margin-left: auto; margin-right: auto; text-align: center; line-height: 2.2em; }
.titreonboard { height: 2.5em; font-size: 1.8rem; padding-top: 1.4em; padding-bottom: 2em; color: var(--orange); }
.clic { color: rgb(158,158,158); font-size: 0.6rem; margin-left: 0.9em; }
a picture { /*cursor: zoom-in;*/ cursor: cell; }
/* h5 a { text-decoration: none; color: var(--orange); } */
/* h5 a:hover { text-decoration: none; background-color: var(--hover); color: var(--orange); border-radius: 4px; } */
/* -- FIN ONBOARDING & SPLASH SCREEN -- */



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



/* -- DÉBUT MEDIA QUERIES - FORMAT MOBILE -- */
@media screen and (max-width: 767px) {
    body { font-family: /*"Barlow Semi Condensed", sans-serif!important;*/ "Barlow", sans-serif!important; background-color: var(--fond768); color: var(--texte768); }
    h1 { color: var(--titre-clair768); line-height: 0.75em!important; }
    h2, h3 { font-family: 'Roman Grotesque WEBL'; font-weight: 900; font-style: normal; color: var(--titre-clair768); line-height: 0.8em; margin-bottom: 1.2em; }
    h1 span, h2 span { color: var(--titre-fonce768); }
    h3, h4 { color: rgba(235,232,219,0.9); }
    h3 span { color:rgba(255,255,255,0.2); }
    h4 { font-weight: 400!important; }
    h4 .chapo { margin-bottom: 20em!important; }
    h5, h6 { font-weight:400; color: rgba(235,232,219,0.8); }
    .nom { margin-top: -0.7em; margin-bottom: 0.6em!important; margin-left: 0.7em; }
    p { font-weight: 300; color: var(--texte768); }
    small { font-family: "Barlow", sans-serif!important; font-size: 0.8rem; font-weight: 300; color: rgba(235, 232, 219, 0.8); }
    strong, b { font-weight: 500; }
    ul { color: var(--texte768); }
    li { list-style: none; }
    mark { background-color: var(--mark768); color: var(--texte768); border-radius: 4px; }
    .legende { margin-top: -3em; }
    article ul { padding-left: 0.6em!important; }

    .lecartelcode { font-size: 1rem; background-color: rgba(219,232,232,0.8); color: var(--texte1200); width: 96%; margin: auto; border-radius: 1.2em; padding: 1.5em; margin-top: 1em; margin-bottom: 1.5em; line-height: 1.1rem; }
    .lecartelnav { font-family: "Roboto Flex", sans-serif; color: var(--texte768); width: 96%; margin: auto; background-color: rgba(139, 136, 120, 0.35); border-radius: 1.2em; padding: 1.5em;  text-decoration: dotted!important; }

    .cotehtml { position: relative; top: 2.6em; margin-left: 50px; font-size: 0.8rem; font-weight: 200; color: rgba(36,33,32,1); display: inline-block; padding: 4px 16px; background-color: rgba(219,232,232,0.8); border-radius: 1em 1em 0 0; }
    .cotenavigateur { position: relative; top: 2.63em; margin-left: 50px; font-size: 0.8rem; font-weight: 200; color: var(--texte768); display: inline-block; padding: 4px 16px; background-color: rgba(139, 136, 120, 0.35); border-radius: 1em 1em 0 0; }

    .filet-haut { position: relative; margin-top: 4.2em; }
    .filet-haut::before { content: ""; position: absolute; top: -16px; left: 0; width: 90px; height: 2px; background-image: linear-gradient(to left, var(--fond768), var(--orange)); }

    .puce:before { background-color: var(--orange); border-radius: 50%; content: ""; display: inline-block; width: 10px; height: 10px; margin-right: -4px; margin-top: -30px; vertical-align: middle; }
    #top { display: inline-block; margin-left: -0.85em; }

    .texte-gris { font-size: clamp(0.9rem, 0.544rem + 0.741vw, 1.1rem); font-weight: 400; line-height: clamp(1.4rem, 1.044rem + 0.741vw, 1.6rem); color: var(--texte1200); }
    .texte-gris-liste { color: var(--texte768); list-style-type: none; margin-left: 1.6em; }

    .open-pdf  { color: var(--texte768); }

    .emballage header { display: none; }
    nav { width: 100vw; position: fixed!important; top: 0!important; flex-grow: 0; flex-shrink: 0; z-index: 100;}
    .navbar-toggler { background-color: var(--orange)!important; border: var(--bs-border-width) solid var(--orange)!important; padding-right: 1.4em; }
    .navbar-expand-lg { height: 3.5em; margin-left: 1em; border-radius: 0 0 0 0.8em;}
    .dropdown-menu{ --bs-dropdown-bg: rgb(33,37,41)!important; } /* rgb (36, 149, 149) */
    .progress_bar { height: 4px; position: fixed; top: 56px; left: 33px; right: 0; background: rgb(0,255,255); z-index: 100;}
    .percentage { color:  rgb(28,27,27); position: fixed; right: 0; z-index: 100; }
    .decal { padding-top: 2.2em; }
    
    .lecartelnav h1, .lecartelnav h2, .lecartelnav h3, .lecartelnav h4, .lecartelnav h5, .lecartelnav h6, .lecartelnav p { color: var(--texte768); }

    /* hr { width: 80vw; margin: auto; border: none; border-top: 3px double rgb(133,123,123); color: rgb(255,255,255); overflow: visible; text-align: center; margin-top: 3em; margin-bottom: 2em; } */
    /* hr:after { background: rgb(28,27,27); content: ']['; font-size: 1rem; padding: 0 0.4em; position: relative; top: -0.6em; } */
    hr {border: 0; height: 2px; background-image: linear-gradient(to right, rgba(235,232,219,0), rgb(255, 90, 0), rgb(255, 0, 0), rgb(255, 90, 0), rgba(235,232,219,0)); margin: 3em 0 5em 0;}

    picture { width: 95%; margin-left: auto; margin-right: auto;}
    .vignette { width: 40%; margin-left: auto; margin-right: auto; margin-bottom: 1.4em; display: block;}
    .splash { width: 85%; margin-top: 2em; margin-left: auto; margin-right: auto; display: block; }

    .vimeo-h { /*background-color: rgba(255, 0, 0, 0.4);*/  margin-left: auto; margin-right: auto; padding:56.25% 0 0 0; position:relative; }
    .vimeo-v { padding:100% 0 0 0; position:relative; margin-left: auto; margin-right: auto; }
}
/* -- FIN MEDIA QUERIES - FORMAT MOBILE --  -- */