@charset "utf-8";

/* ####################
###   HTML5 RESET   ###
#################### */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent}

body {box-sizing:border-box; overflow-y:scroll}

*, *::before, *::after {box-sizing:inherit}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent}

abbr[title], dfn[title] {border-bottom:0.1rem dotted #000; cursor:help}

article, aside, details, figure, footer, header, main, nav, section, summary {display:block}

blockquote, q {quotes:none}
blockquote::before, blockquote::after, q::before, q::after {content:""; content:none}

button, label, input[type=button], input[type=submit], input[type=file] {cursor:pointer}
button, input, select, textarea {margin:0}
button, input[type=button] {width:auto; overflow:visible}

del {text-decoration:line-through}

hr {display:block; height:0.1rem; margin:0; padding:0; border:0; background-color:#000}

img, object, embed {max-width:100%}

input, select {vertical-align:middle}
input, select, textarea {font:99% sans-serif}
input[type="radio"] {vertical-align:text-bottom}
input[type="checkbox"] {vertical-align:bottom}

pre {
    white-space:pre; /* CSS2 */
    white-space:pre-wrap; /* CSS 2.1 */
    white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap:break-word; /* IE */
}

pre, code, kbd, samp {font-family:monospace, sans-serif}

small {font-size:85%}

strong {font-weight:bolder}

sub, sup {position:relative; line-height:0; font-size:75%}
sup {top:-0.5em}
sub {bottom:-0.25em}

table {font-size:inherit; font:100%; border-collapse:collapse; border-spacing:0}
th {font-weight:700; vertical-align:bottom}
td {font-weight:400; vertical-align:top}
td img {vertical-align:top}

ol, ul {list-style:none}

[tabindex="-1"]:focus {outline:0 !important} /* visionneuse */


/* ##########################
###   GESTION DES FONTS   ###
############################# */
@font-face {
  font-family: HelvNeueOrange;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/HelvNeue55_W1G.woff2") format("woff2"),
       url("fonts/HelvNeue55_W1G.woff") format("woff");
}

@font-face {
  font-family: HelvNeueOrange;
  font-style: normal;
  font-weight: 700;
  src: url("fonts/HelvNeue75_W1G.woff2") format("woff2"),
       url("fonts/HelvNeue75_W1G.woff") format("woff");
}


/* ###########################
###   GESTION DES STYLES   ###
########################### */
html {font-size:62.5%; font-size:calc(1em * 0.625); /* IE9-11 fix */}
body {background-color:#fff}
a {text-decoration:none; color:#000}
a:disabled, a.disabled {cursor:default}
button {font-family:inherit; padding:0; border-radius:0; border-style:none; background-color:transparent}
button:focus {outline:1px dotted; outline:5px auto -webkit-focus-ring-color}
h1, h2, h3, h4, h5, h6 {font-weight:700}
img {vertical-align:middle}


/* class generiques */
.align-content-flex-start {align-content:flex-start !important}
.align-content-center {align-content:center !important}
.align-content-space-around {align-content:space-around !important}
.align-content-space-between {align-content:space-between !important}
.align-content-flex-end {align-content:flex-end !important}
.align-items-flex-start {align-items:flex-start !important}
.align-items-center {align-items:center !important}
.align-items-flex-end {align-items:flex-end !important}
.align-self-flex-start {align-self:flex-start !important}
.align-self-center {align-self:center !important}
.align-self-flex-end {align-self:flex-end !important}

.bold {font-weight:bolder}

.clear-both {clear:both}

.display-block {display:block !important}
.display-flex {display:flex !important}
.display-inline {display:inline !important}
.display-inline-block {display:inline-block !important}
.display-inline-flex {display:inline-flex !important}
.display-table {display:table !important}
.display-table-row {display:table-row !important}
.display-table-cell {display:table-cell !important}
.display-none {display:none !important}

.flex-col {display:flex; flex-direction:column}
.flex-row {display:flex; flex-direction:row}
.flex-wrap-wrap {flex-wrap:wrap}
.flex-auto {flex:1 1 auto}
.flex-none {flex:0 0 auto}

.float-left {float:left}
.float-right {float:right}

.font-normal {font-weight:400 !important}

.justify-content-flex-start {justify-content:flex-start !important}
.justify-content-center {justify-content:center !important}
.justify-content-space-around {justify-content:space-around !important}
.justify-content-space-between {justify-content:space-between !important}
.justify-content-flex-end {justify-content:flex-end !important}

.relative {position:relative}

.txt-barre {text-decoration:line-through}
.txt-center {text-align:center !important}
.txt-italic {font-style:italic}
.txt-left {text-align:left !important}
.txt-right {text-align:right !important}

.white-space-nowrap {white-space:nowrap}


/* tailles generiques */
.h100p {height:100%}

.mh300px {max-height:300px}

.w40p {width:40%}
.w50p {width:50%}
.w60p {width:60%}
.w80p {width:80%}
.w100p {width:100%}


/* color, border et background-color */
.txt-blanc {color:#fff !important}
.txt-gris3 {color:#555 !important}
.txt-gris4 {color:#ccc !important}
.txt-noir {color:#000 !important}
.txt-primaire {color:#e60000 !important}
.txt-primaire2 {color:#ff0000 !important}
.txt-secondaire {color:#000 !important}
.txt-succes {color:#3de35a !important}
.txt-erreur {color:#e70002 !important}
.txt-information {color:#26b2ff !important}
.txt-attention {color:#ffcd0b !important}

.bd-blanc {border:1px solid #fff !important}
.bd-gris3 {border:1px solid #555 !important}
.bd-gris4 {border:1px solid #ccc !important}
.bd-noir {border:1px solid #000 !important}
.bd-primaire {border:1px solid #e60000 !important}
.bd-primaire2 {border:1px solid #ff0000 !important}
.bd-secondaire {border:1px solid #000 !important}

.bg-blanc {background-color:#fff !important}
.bg-gris1 {background-color:#333 !important}
.bg-gris2 {background-color:#f4f4f4 !important}
.bg-noir {background-color:#000 !important}
.bg-primaire {background-color:#e60000 !important}
.bg-primaire2 {background-color:#ff0000 !important}
.bg-secondaire {background-color:#000 !important}
.bg-succes {background-color:#ecfdef !important}
.bg-erreur {background-color:#fde5e6 !important}
.bg-information {background-color:#e9f8ff !important}
.bg-attention {background-color:#fffae7 !important}
.bg-transparent {background-color:transparent !important}


/* gestion des color en fonction du background-color */
.bg-blanc.txt-blanc, .bg-blanc .txt-blanc {color:#000 !important}
.bg-blanc.txt-gris4, .bg-blanc .txt-gris4 {color:#555 !important}
.bg-blanc.txt-primaire2, .bg-blanc .txt-primaire2 {color:#e60000 !important}

.bg-gris1.txt-gris3, .bg-gris1.txt-gris4, .bg-gris1.txt-noir, .bg-gris1.txt-secondaire, 
.bg-gris1 .txt-gris3, .bg-gris1 .txt-gris4, .bg-gris1 .txt-noir, .bg-gris1 .txt-secondaire {color:#fff !important}
.bg-gris1.txt-primaire, .bg-gris1 .txt-primaire {color:#ff0000 !important}

.bg-gris2.txt-blanc, .bg-gris2.txt-gris3, .bg-gris2.txt-gris4, 
.bg-gris2.txt-primaire, .bg-gris2.txt-primaire2, .bg-gris2.txt-secondaire, 
.bg-gris2 .txt-blanc, .bg-gris2 .txt-gris3, .bg-gris2 .txt-gris4, 
.bg-gris2 .txt-primaire, .bg-gris2 .txt-primaire2, .bg-gris2 .txt-secondaire {color:#000 !important}

.bg-noir.txt-gris3, .bg-noir .txt-gris3 {color:#ccc !important}
.bg-noir.txt-noir, .bg-noir .txt-noir {color:#fff !important}
.bg-noir.txt-primaire, .bg-noir .txt-primaire {color:#ff0000 !important}
.bg-noir.txt-secondaire, .bg-noir .txt-secondaire {color:#fff !important}

.bg-primaire.txt-gris3, .bg-primaire.txt-gris4, .bg-primaire.txt-noir, 
.bg-primaire.txt-primaire, .bg-primaire.txt-primaire2, .bg-primaire.txt-secondaire, 
.bg-primaire .txt-gris3, .bg-primaire .txt-gris4, .bg-primaire .txt-noir, 
.bg-primaire .txt-primaire, .bg-primaire .txt-primaire2, .bg-primaire .txt-secondaire {color:#fff !important}

.bg-primaire2.txt-blanc, .bg-primaire2.txt-gris3, .bg-primaire2.txt-gris4, 
.bg-primaire2.txt-primaire, .bg-primaire2.txt-primaire2, .bg-primaire2.txt-secondaire, 
.bg-primaire2 .txt-blanc, .bg-primaire2 .txt-gris3, .bg-primaire2 .txt-gris4, 
.bg-primaire2 .txt-primaire, .bg-primaire2 .txt-primaire2, .bg-primaire2 .txt-secondaire {color:#000 !important}

.bg-secondaire.txt-gris3, .bg-secondaire .txt-gris3 {color:#ccc !important}
.bg-secondaire.txt-noir, .bg-secondaire .txt-noir {color:#fff !important}
.bg-secondaire.txt-primaire, .bg-secondaire .txt-primaire {color:#ff0000 !important}
.bg-secondaire.txt-secondaire, .bg-secondaire .txt-secondaire {color:#fff !important}


/* class specifiques */
a .transition {transition:all 0.15s ease-in-out 0s}
a:hover .transition.primaire, a:focus .transition.primaire, a:hover .transition.primaire2, a:focus .transition.primaire2, 
a:hover .transition.secondaire, a:focus .transition.secondaire {color:#e60000 !important}


hr.xl {height:1.5rem}

.site-width ul li {position:relative}
ul.liste > li::before {position:absolute; left:0; display:block; content:""; border-radius:50%; background-color:#000}
ul.liste.primaire > li::before, ul.liste.primaire2 > li::before, ul.liste.secondaire > li::before {background-color:#e60000}
ul.coche > li::before {position:absolute; left:0; display:block; color:#000; content:"\eb77"}
ul.coche.primaire > li::before, ul.coche.primaire2 > li::before, ul.coche.secondaire > li::before {color:#e60000}

#fil-d-ariane {margin-top:0; border-top:1px solid #666}
#fil-d-ariane .row {padding:15px 0 !important}
#fil-d-ariane .row .chemin {display:flex; flex-wrap:wrap; line-height:2rem; font-size:1.4rem; font-weight:700}
#fil-d-ariane .row .chemin .item {padding:8px 0 10px}
#fil-d-ariane .row .chemin .item + .item::before {display:inline-block; line-height:1; font-size:1rem; padding:0 4px 0 7px}
#fil-d-ariane .row .chemin .item a:hover, #fil-d-ariane .row .chemin .item a:focus {text-decoration:underline; color:#555}
#fil-d-ariane .row .chemin .item a:active {color:#e60000}

#mentions .row .chapeau {margin-bottom:5px}
#mentions .row .titre .lien-chevron {padding-top:0}
#mentions .row .lien-chevron {line-height:2rem; font-size:1.4rem; padding-bottom:0}
#mentions .row .lien-chevron::before, #mentions .row .lien-chevron::after {font-size:0.9rem}
#mentions .row .contenu .icon-hands-free {display:inline-block; font-size:2em; margin:5px 5px 0 0}

.btn {display:block}
.btn-col {display:inline-flex; flex-direction:column}
.btn-row {display:inline-flex; flex-direction:row; flex-wrap:wrap}

.btn-primaire, .btn-secondaire {display:inline-block; max-width:300px; line-height:2.2rem; font-weight:700; font-size:1.6rem; text-align:center; padding:13px 44px; border:1px solid transparent; transition:all 0.15s ease-in-out 0s}

.btn-primaire {color:#fff; border-color:#000; background-color:#000}
.btn-primaire:hover, .btn-primaire:focus, a:hover .btn-primaire, a:focus .btn-primaire {color:#fff; border-color:#555; background-color:#555}
.btn-primaire:active, a:active .btn-primaire {color:#fff; border-color:#e60000; background-color:#e60000}
.btn-primaire:disabled, .btn-primaire.disabled, a:disabled .btn-primaire, a.disabled .btn-primaire {color:#fff; border-color:#ccc; background-color:#ccc; cursor:not-allowed}

.btn-secondaire {color:#000; border-color:#000; background-color:transparent}
.btn-secondaire:hover, .btn-secondaire:focus, a:hover .btn-secondaire, a:focus .btn-secondaire {color:#555; border-color:#555; background-color:transparent}
.btn-secondaire:active, a:active .btn-secondaire {color:#e60000; border-color:#e60000; background-color:transparent}
.btn-secondaire:disabled, .btn-secondaire.disabled, a:disabled .btn-secondaire, a.disabled .btn-secondaire {color:#ccc; border-color:#ccc; background-color:transparent; cursor:not-allowed}

.cartouche {display:inline-block; line-height:2rem; font-size:1.4rem; font-weight:700; color:#fff; padding:2px 10px 4px; background-color:#e60000}
.cartouche.neutre {color:#fff; background-color:#000}
.cartouche.disabled {background-color:#ccc}

.clearfix::after {display:table; content:""; clear:both}

.lien-simple {font-weight:500; text-decoration:underline}
.lien-simple:hover, .lien-simple:focus {color:#555}
.lien-simple:active {color:#e60000}

.lien-chevron {position:relative; display:inline-block; max-width:300px; line-height:2.2rem; font-size:1.6rem; font-weight:700; padding:7px 21px 10px 0}
.lien-chevron::after {position:absolute; display:inline-block; font-family:icon-orange; font-size:1rem; font-weight:700; text-decoration:none; color:#e60000; content:"\e93e"; padding:1px 0 0 10px}
.lien-chevron:hover, .lien-chevron:focus {text-decoration:underline; color:#555}
.lien-chevron:active {color:#e60000}

.lien-chevron.up::after, .lien-chevron.down::after {padding-top:2px}
.lien-chevron.up::after {content:"\e93d"}
.lien-chevron.down::after {content:"\e93c"}

.lien-chevron.back {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding:7px 0 10px 21px}
.lien-chevron.back::before {position:absolute; left:0; display:inline-block; font-family:icon-orange; font-size:1rem; font-weight:700; text-decoration:none; color:#e60000; content:"\e93f"; padding:1px 10px 0 0}
.lien-chevron.back::after {content:""; padding:0}

.lien-chevron.xl {max-width:450px}

.lien-simple.disabled, .lien-chevron.disabled, .lien-chevron.disabled::before, .lien-chevron.disabled::after {color:#ccc !important; pointer-events:none}

.message .contenu {line-height:2.2rem; font-size:1.6rem; color:#000; padding:15px}
.message .contenu .titre {display:flex; align-items:center}
.message .contenu .titre .icon::before {display:inline-block; line-height:1; font-family:icon-orange; font-size:3.2rem; margin-right:15px}
.message .contenu .titre p {margin:3px 0 7px}
.message .contenu .texte {padding-left:47px}
.message .contenu .texte p {padding:6px 0 7px}
.message .contenu .texte .lien-simple, .message .contenu .texte .lien-chevron, .message .contenu .texte .lien-chevron::before, .message .contenu .texte .lien-chevron::after {color:#000}
.message .contenu.succes {background-color:#ecfdef}
.message .contenu.succes .titre .icon::before {content:"\eb3d"; color:#3de35a}
.message .contenu.erreur {background-color:#fde5e6}
.message .contenu.erreur .titre .icon::before {content:"\e9d7"; color:#e70002}
.message .contenu.information {background-color:#e9f8ff}
.message .contenu.information .titre .icon::before {content:"\ea1d"; color:#26b2ff}
.message .contenu.attention {background-color:#fffae7}
.message .contenu.attention .titre .icon::before {content:"\eb69"; color:#ffcd0b}

.miroir {display:inline-block; transform:scaleX(-1)}

.ombre-lb, .zag .ombre {margin:15px 15px 0 0; padding:0 0 15px; background-color:#f4f4f4}
.ombre-lb img, .zag .ombre img {width:100%; margin:-15px 0 0 15px}
.ombre-rb, .zig .ombre {margin:15px 0 0 15px; padding:0 0 15px; background-color:#f4f4f4}
.ombre-rb img, .zig .ombre img {width:100%; margin:-15px 0 0 -15px}
.bg-gris2 .ombre-lb, .bg-gris2 .ombre-rb, .bg-gris2 .ombre {background-color:#fff}

.produit {position:relative; text-align:center}
.produit .bg-carre {position:absolute; left:50%; top:0; max-width:225px; width:50%; height:50%; background:url(../img/px-gris2.png) left top / contain no-repeat; z-index:5}
.produit img {position:relative; padding-top:30px; z-index:10}
.bg-gris2 .produit .bg-carre {background-image:url(../img/px-blanc.png)}

.renvoi {font-size:0.6em; font-weight:400; color:#555}
.small .renvoi {font-size:0.7em}

.tuile {position:relative; display:flex; flex-direction:column; justify-content:space-between; width:100%; border:1px solid transparent}
.tuile .cartouche {position:absolute; left:-1px; top:-1px; z-index:5}

.tuile, .dark .tuile.primaire {color:#000; border-color:#ff0000; background-color:#fff}
.tuile .txt-primaire, .dark .tuile.primaire .txt-primaire {color:#e60000 !important}
.tuile .txt-gris3, .dark .tuile.primaire .txt-gris3 {color:#555 !important}
.tuile .renvoi, .dark .tuile.primaire .renvoi {color:#555 !important}
.tuile.primaire, .dark .tuile {color:#fff; border-color:#555; background-color:#000}
.tuile.primaire .txt-primaire, .dark .tuile .txt-primaire {color:#ff0000 !important}
.tuile.primaire .txt-gris3, .dark .tuile .txt-gris3 {color:#ccc !important}
.tuile.primaire .renvoi, .dark .tuile .renvoi {color:#fff !important}

a.tuile:hover, a.tuile:focus, 
a.tuile.primaire:hover, a.tuile.primaire:focus {color:#000 !important; border-color:#e60000 !important; background-color:#e60000 !important}
a.tuile:hover h3, a.tuile:focus h3, 
a.tuile:hover .txt-primaire, a.tuile:focus .txt-primaire, 
a.tuile.primaire:hover h3, a.tuile.primaire:focus h3, 
a.tuile.primaire:hover .txt-primaire, a.tuile.primaire:focus .txt-primaire {color:#fff !important}
a.tuile:hover .txt-gris3, a.tuile:focus .txt-gris3, 
a.tuile.primaire:hover .txt-gris3, a.tuile.primaire:focus .txt-gris3 {color:#000 !important}

a.tuile:active {color:#fff !important; border-color:#000 !important; background-color:#000 !important}
.dark a.tuile:active {color:#000 !important; border-color:#fff !important; background-color:#fff !important}
a.tuile.primaire:active {color:#000 !important; border-color:#e60000 !important; background-color:#fff !important}
.dark a.tuile.primaire:active {color:#fff !important; border-color:#ff0000 !important; background-color:#000 !important}
a.tuile:active h3, a.tuile:active .txt-primaire, .dark a.tuile.primaire:active h3, .dark a.tuile.primaire:active .txt-primaire {color:#ff0000 !important}
a.tuile:active .txt-gris3, .dark a.tuile.primaire:active .txt-gris3 {color:#ccc !important}
a.tuile.primaire:active h3, a.tuile.primaire:active .txt-primaire, .dark a.tuile:active h3, .dark a.tuile:active .txt-primaire {color:#e60000 !important}
a.tuile.primaire:active .txt-gris3, .dark a.tuile:active .txt-gris3 {color:#555 !important}

.ttl-centre {display:flex; flex-direction:column; align-items:center; text-align:center}

.txt-max {max-width:645px !important}


/* background-color sombre */
.dark, .dark a {color:#fff}

.dark a:hover .transition.primaire, .dark a:focus .transition.primaire, .dark a:hover .transition.primaire2, .dark a:focus .transition.primaire2, 
.dark a:hover .transition.secondaire, .dark a:focus .transition.secondaire {color:#ff0000 !important}

.dark h2::after {background-color:#ff0000}

.dark ul.liste > li::before {background-color:#fff}
.dark ul.liste.primaire > li::before, .dark ul.liste.primaire2 > li::before, .dark ul.liste.secondaire > li::before {background-color:#ff0000 !important}
.dark ul.coche > li::before {color:#fff}
.dark ul.coche.primaire > li::before, .dark ul.coche.primaire2 > li::before, .dark ul.coche.secondaire > li::before {color:#ff0000 !important}

#fil-d-ariane.dark .row .chemin .item a:hover, #fil-d-ariane.dark .row .chemin .item a:focus {color:#ccc}
#fil-d-ariane.dark .row .chemin .item a:active {color:#ff0000}

.dark .btn-primaire {color:#000; border-color:#fff; background-color:#fff}
.dark .btn-primaire:hover, .dark .btn-primaire:focus, .dark a:hover .btn-primaire, .dark a:focus .btn-primaire {color:#000; border-color:#ccc; background-color:#ccc}
.dark .btn-primaire:active, .dark a:active .btn-primaire {color:#fff; border-color:#e60000; background-color:#e60000}
.dark .btn-primaire:disabled, .dark .btn-primaire.disabled, .dark a:disabled .btn-primaire, .dark a.disabled .btn-primaire {color:#000; border-color:#555; background-color:#555}

.dark .btn-secondaire {color:#fff; border-color:#fff; background-color:transparent}
.dark .btn-secondaire:hover, .dark .btn-secondaire:focus, .dark a:hover .btn-secondaire, .dark a:focus .btn-secondaire {color:#ccc; border-color:#ccc; background-color:transparent}
.dark .btn-secondaire:active, .dark a:active .btn-secondaire {color:#ff0000; border-color:#ff0000; background-color:transparent}
.dark .btn-secondaire:disabled, .dark .btn-secondaire.disabled, .dark a:disabled .btn-secondaire, .dark a.disabled .btn-secondaire {color:#555; border-color:#555; background-color:transparent}

.dark .cartouche.neutre {color:#000; background-color:#fff}
.dark .cartouche.indispo {color:#fff; background-color:#555}

.dark .lien-simple:hover, .dark .lien-simple:focus {color:#ccc}
.dark .lien-simple:active {color:#ff0000}

.dark .lien-chevron:hover, .dark .lien-chevron:focus {color:#ccc}
.dark .lien-chevron.back::before, .dark .lien-chevron:active, .dark .lien-chevron::after {color:#ff0000}

.bg-gris1 .ombre-lb, .bg-gris1 .ombre-rb, .bg-gris1 .ombre {background-color:#000}
.bg-noir .ombre-lb, .bg-noir .ombre-rb, .bg-noir .ombre {background-color:#333}

.bg-gris1 .produit .bg-carre {background-image:url(../img/px-noir.png)}
.bg-noir .produit .bg-carre {background-image:url(../img/px-gris1.png)}

.dark .renvoi {color:#fff}


/* -------------------
--  [XXL] XX Large  --
------------------- */
body {line-height:2.2rem; font-size:1.6rem; font-family:HelvNeueOrange, Helvetica, Arial, sans-serif; font-weight:400; text-align:left; color:#000}
.site-width {position:relative; max-width:1440px; margin:0 auto}
.container-fluid {display:block; margin:0 45px; padding:0 15px}
.container-fluid.full {margin:0; padding:0}
.container-fluid .row {display:flex; flex-wrap:wrap; margin:0 -15px; padding:30px 0}
.container-fluid.full .row {margin:0}
[class*="banniere-html-"] .container-fluid.full .row {padding:0 45px}
.titre-h1 .row, .titre-h2 .row, .texte-p .row {padding:30px 0 0}
.titre-h1 + [class*="banniere-"], .titre-h2 + [class*="banniere-"], .texte-p + [class*="banniere-"],
.titre-h1 + [class*="visionneuse-"], .titre-h2 + [class*="visionneuse-"], .texte-p + [class*="visionneuse-"] {margin:30px 0 0}
.zone {display:flex; flex-wrap:wrap; width:100%}

.bg-blanc + div:not(.bg-blanc), .bg-gris1 + div:not(.bg-gris1), .bg-gris2 + div:not(.bg-gris2), .bg-noir + div:not(.bg-noir) {margin-top:30px}

[class^="bloc3-"] .row > .bloc:nth-child(1n+4), 
[class^="bloc4-"] .row > .bloc:nth-child(1n+5), 
[class^="bloc6-"] .row > .bloc:nth-child(1n+7) {margin-top:45px}

.t-service {line-height:4rem; font-size:3.4rem; font-weight:700}
h1, .t1 {line-height:5rem; font-size:4.2rem; padding-bottom:0.6rem}
h2 {position:relative}
h2, .t2 {line-height:4rem; font-size:3.4rem; padding-bottom:1.4rem}
h2.no-signature, .t2 {padding-bottom:0.8rem}
h3, .t3 {line-height:3.4rem; font-size:3rem; padding-top:0.3rem; padding-bottom:0.9rem}
h4, .t4 {line-height:3rem; font-size:2.6rem; padding-top:0.4rem; padding-bottom:1rem}
.big {line-height:2.4rem; font-size:1.8rem}
.standard {line-height:2.2rem; font-size:1.6rem}
.small {line-height:2rem; font-size:1.4rem}
.trans1 {line-height:2.2rem; font-size:1.6rem}
.trans2 {line-height:2rem; font-size:1.4rem}

ul.liste > li {margin-left:15px; padding:7px 0 10px 24px}
ul.liste > li::before {top:15px; width:0.9rem; height:0.9rem}
ul.liste.xs > li {padding:0 0 0 24px}
ul.liste.xs > li::before {top:8px}
ul.coche > li {margin-left:15px; padding:7px 0 10px 31px}
ul.coche > li::before {top:8px}
ul.coche.xs > li {padding:0 0 0 31px}
ul.coche.xs > li::before {top:1px}

#mentions .row p {padding:8px 0 10px}

.btn-2h {line-height:4.4rem}
.btn-row a:first-child {margin-right:30px}
.btn-primaire, .btn-secondaire {margin-top:30px}

.col-xxl-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-xxl-2 {flex:0 0 16.666667%; max-width:16.666667%}
.col-xxl-3 {flex:0 0 25%; max-width:25%}
.col-xxl-4 {flex:0 0 33.333333%; max-width:33.333333%}
.col-xxl-5 {flex:0 0 41.666667%; max-width:41.666667%}
.col-xxl-6 {flex:0 0 50%; max-width:50%}
.col-xxl-7 {flex:0 0 58.333333%; max-width:58.333333%}
.col-xxl-8 {flex:0 0 66.666667%; max-width:66.666667%}
.col-xxl-9 {flex:0 0 75%; max-width:75%}
.col-xxl-10 {flex:0 0 83.333333%; max-width:83.333333%}
.col-xxl-11 {flex:0 0 91.666667%; max-width:91.666667%}
.col-xxl-12 {flex:0 0 100%; max-width:100%}
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7,
.col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {padding:0 15px}

.m-xxl-0 {margin:0 !important}
.mt-xxl-0, .my-xxl-0 {margin-top:0 !important}
.mr-xxl-0, .mx-xxl-0 {margin-right:0 !important}
.mb-xxl-0, .my-xxl-0 {margin-bottom:0 !important}
.ml-xxl-0, .mx-xxl-0 {margin-left:0 !important}
.m-xxl-1 {margin:15px !important}
.mt-xxl-1, .my-xxl-1 {margin-top:15px !important}
.mr-xxl-1, .mx-xxl-1 {margin-right:15px !important}
.mb-xxl-1, .my-xxl-1 {margin-bottom:15px !important}
.ml-xxl-1, .mx-xxl-1 {margin-left:15px !important}
.m-xxl-2 {margin:30px !important}
.mt-xxl-2, .my-xxl-2 {margin-top:30px !important}
.mr-xxl-2, .mx-xxl-2 {margin-right:30px !important}
.mb-xxl-2, .my-xxl-2 {margin-bottom:30px !important}
.ml-xxl-2, .mx-xxl-2 {margin-left:30px !important}
.m-xxl-3 {margin:45px !important}
.mt-xxl-3, .my-xxl-3 {margin-top:45px !important}
.mr-xxl-3, .mx-xxl-3 {margin-right:45px !important}
.mb-xxl-3, .my-xxl-3 {margin-bottom:45px !important}
.ml-xxl-3, .mx-xxl-3 {margin-left:45px !important}
.m-xxl-4 {margin:60px !important}
.mt-xxl-4, .my-xxl-4 {margin-top:60px !important}
.mr-xxl-4, .mx-xxl-4 {margin-right:60px !important}
.mb-xxl-4, .my-xxl-4 {margin-bottom:60px !important}
.ml-xxl-4, .mx-xxl-4 {margin-left:60px !important}
.m-xxl-auto {margin:auto !important}
.mt-xxl-auto, .my-xxl-auto {margin-top:auto !important}
.mr-xxl-auto, .mx-xxl-auto {margin-right:auto !important}
.mb-xxl-auto, .my-xxl-auto {margin-bottom:auto !important}
.ml-xxl-auto, .mx-xxl-auto {margin-left:auto !important}

.order-xxl-first {order:-1}
.order-xxl-last {order:13}

.p-xxl-0 {padding:0 !important}
.pt-xxl-0, .py-xxl-0 {padding-top:0 !important}
.pr-xxl-0, .px-xxl-0 {padding-right:0 !important}
.pb-xxl-0, .py-xxl-0 {padding-bottom:0 !important}
.pl-xxl-0, .px-xxl-0 {padding-left:0 !important}
.p-xxl-1 {padding:15px !important}
.pt-xxl-1, .py-xxl-1 {padding-top:15px !important}
.pr-xxl-1, .px-xxl-1 {padding-right:15px !important}
.pb-xxl-1, .py-xxl-1 {padding-bottom:15px !important}
.pl-xxl-1, .px-xxl-1 {padding-left:15px !important}
.p-xxl-2 {padding:30px !important}
.pt-xxl-2, .py-xxl-2 {padding-top:30px !important}
.pr-xxl-2, .px-xxl-2 {padding-right:30px !important}
.pb-xxl-2, .py-xxl-2 {padding-bottom:30px !important}
.pl-xxl-2, .px-xxl-2 {padding-left:30px !important}
.p-xxl-3 {padding:45px !important}
.pt-xxl-3, .py-xxl-3 {padding-top:45px !important}
.pr-xxl-3, .px-xxl-3 {padding-right:45px !important}
.pb-xxl-3, .py-xxl-3 {padding-bottom:45px !important}
.pl-xxl-3, .px-xxl-3 {padding-left:45px !important}
.p-xxl-4 {padding:60px !important}
.pt-xxl-4, .py-xxl-4 {padding-top:60px !important}
.pr-xxl-4, .px-xxl-4 {padding-right:60px !important}
.pb-xxl-4, .py-xxl-4 {padding-bottom:60px !important}
.pl-xxl-4, .px-xxl-4 {padding-left:60px !important}

.py-txt {padding:7px 0 10px}

.titre-h1 .txt-max, .titre-h2 .txt-max, .texte-p .txt-max, .ttl-max {max-width:1000px !important}

/* début visionneuse (générique) */
.ob1-carrousel.swiper-container {width:100% !important; overflow:hidden}
.ob1-carrousel .swiper-wrapper {list-style-position:inside; list-style-type:none; margin-bottom:0; padding-left:0}
.ob1-carrousel .swiper-slide {width:100%}
.ob1-carrousel .swiper-slide:focus {outline-width:2px; outline-style:dotted; outline-color:#e60000; outline-offset:-2px}

.ob1-carrousel .swiper-button-prev, .ob1-carrousel .swiper-button-next {width:auto; height:auto; text-shadow:1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; margin-top:-20px; background-image:none; background-size:0}

.ob1-carrousel .swiper-button-prev, .ob1-carrousel .swiper-button-next,
.ob1-carrousel .ob1-carrousel-controls {color:#fff; border:0; background:rgba(0, 0, 0, 0.42)}
.ob1-carrousel .swiper-button-prev::before, .ob1-carrousel .swiper-button-next::before,
.ob1-carrousel .ob1-carrousel-controls::before {font-size:20px; text-shadow:none}
.ob1-carrousel .swiper-button-prev:hover, .ob1-carrousel .swiper-button-next:hover,
.ob1-carrousel .ob1-carrousel-controls:hover {background:rgba(0, 0, 0, 0.54)}

.ob1-carrousel .swiper-button-prev {left:0; padding:8px 15px 8px 12px}
.ob1-carrousel .swiper-button-next {right:0; padding:8px 12px 8px 15px}
.ob1-carrousel .swiper-button-prev::before, .ob1-carrousel .swiper-button-next::before { font-family:arial ;font-size:20px}
.ob1-carrousel .swiper-button-prev::before {content:"\e93f"}
.ob1-carrousel .swiper-button-next::before {content:"\e93e"}
.ob1-carrousel .swiper-button-prev::after, .ob1-carrousel .swiper-button-next::after {content:none}
.ob1-carrousel .swiper-button-prev:focus, .ob1-carrousel .swiper-button-next:focus {outline:2px dotted #000; outline-offset:-1px}

.ob1-carrousel .ob1-carrousel-controls {position:absolute; left:10px; bottom:10px; display:block; padding:7px 9px; z-index:11}
.ob1-carrousel .ob1-carrousel-controls .icon {font-size:12px}
.ob1-carrousel .ob1-carrousel-controls .ob1-link-icon-text {display:none; line-height:20px; font-size:14px; font-weight:700; margin-left:10px}

.ob1-carrousel .swiper-pagination {left:50%; bottom:0; width:auto; transform:translateX(-50%)}

.ob1-page-indicator {display:inline-flex; height:30px; vertical-align:bottom; margin:0; padding-left:0; list-style:none}
.ob1-page-indicator .ob1-page-indicator-item {display:flex; align-items:flex-end; width:60px; margin-right:15px; padding-bottom:15px}
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+3),
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+3) ~ .ob1-page-indicator-item {width:45px}
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+3):last-child,
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+3) ~ .ob1-page-indicator-item:last-child {margin-right:0}
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+4),
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+4) ~ .ob1-page-indicator-item {width:45px; margin-right:10px}
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+5),
.ob1-page-indicator .ob1-page-indicator-item:nth-last-child(n+5) ~ .ob1-page-indicator-item {width:30px}
.ob1-page-indicator .ob1-page-indicator-item:last-child {margin-right:0}

.ob1-page-indicator .ob1-page-indicator-button {width:100%; height:3px; transition:.15s; padding:0; border:0; background-color:#000}
.ob1-page-indicator .ob1-page-indicator-button:hover {height:6px; transition:.3s}
.ob1-page-indicator .ob1-page-indicator-button:active {transition:none}

.ob1-page-indicator .ob1-page-indicator-active .ob1-page-indicator-button {height:6px}

.ob1-page-indicator.ob1-page-indicator-inverse .ob1-page-indicator-button {background-color:#ccc}
.ob1-page-indicator.ob1-page-indicator-inverse .ob1-page-indicator-button:active {background-color:#ff0000}
.ob1-page-indicator.ob1-page-indicator-inverse .ob1-page-indicator-active .ob1-page-indicator-button {background-color:#ff0000}

.ob1-page-indicator.ob1-page-indicator-neutral .ob1-page-indicator-button {background-color:#ddd}
.ob1-page-indicator.ob1-page-indicator-neutral .ob1-page-indicator-button:active {background-color:#ff0000}
.ob1-page-indicator.ob1-page-indicator-neutral .ob1-page-indicator-active .ob1-page-indicator-button {background-color:#ff0000}
/* fin visionneuse */

/* redimensionnement images woopic */
.img_xl_ttl_prix_txt_btn{max-width: 360px;}
.img_col2_offre_prod{max-width: 270px;}
.img_col2_xs_ttl_prix_txt_btn{max-width: 270px;}
.img_col1_ttl_prix_txt_btn{max-height: 435px;}
.img_col2_ttl_prix_txt_btn{max-height: 510px;}
.img_col3_ttl_prix_txt_btn{max-height: 345px;}
.img_col4_ttl_prix_txt_btn{max-height: 255px}


/* ---------------------
--  [XL] Extra Large  --
--------------------- */
@media (max-width:1439.98px){
.container-fluid {margin:0 40px}
[class*="banniere-html-"] .container-fluid.full .row {padding:0 40px}

.col-xl-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-xl-2 {flex:0 0 16.666667%; max-width:16.666667%}
.col-xl-3 {flex:0 0 25%; max-width:25%}
.col-xl-4 {flex:0 0 33.333333%; max-width:33.333333%}
.col-xl-5 {flex:0 0 41.666667%; max-width:41.666667%}
.col-xl-6 {flex:0 0 50%; max-width:50%}
.col-xl-7 {flex:0 0 58.333333%; max-width:58.333333%}
.col-xl-8 {flex:0 0 66.666667%; max-width:66.666667%}
.col-xl-9 {flex:0 0 75%; max-width:75%}
.col-xl-10 {flex:0 0 83.333333%; max-width:83.333333%}
.col-xl-11 {flex:0 0 91.666667%; max-width:91.666667%}
.col-xl-12 {flex:0 0 100%; max-width:100%}
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7,
.col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {padding:0 15px}

.m-xl-0 {margin:0 !important}
.mt-xl-0, .my-xl-0 {margin-top:0 !important}
.mr-xl-0, .mx-xl-0 {margin-right:0 !important}
.mb-xl-0, .my-xl-0 {margin-bottom:0 !important}
.ml-xl-0, .mx-xl-0 {margin-left:0 !important}
.m-xl-1 {margin:15px !important}
.mt-xl-1, .my-xl-1 {margin-top:15px !important}
.mr-xl-1, .mx-xl-1 {margin-right:15px !important}
.mb-xl-1, .my-xl-1 {margin-bottom:15px !important}
.ml-xl-1, .mx-xl-1 {margin-left:15px !important}
.m-xl-2 {margin:30px !important}
.mt-xl-2, .my-xl-2 {margin-top:30px !important}
.mr-xl-2, .mx-xl-2 {margin-right:30px !important}
.mb-xl-2, .my-xl-2 {margin-bottom:30px !important}
.ml-xl-2, .mx-xl-2 {margin-left:30px !important}
.m-xl-3 {margin:45px !important}
.mt-xl-3, .my-xl-3 {margin-top:45px !important}
.mr-xl-3, .mx-xl-3 {margin-right:45px !important}
.mb-xl-3, .my-xl-3 {margin-bottom:45px !important}
.ml-xl-3, .mx-xl-3 {margin-left:45px !important}
.m-xl-4 {margin:60px !important}
.mt-xl-4, .my-xl-4 {margin-top:60px !important}
.mr-xl-4, .mx-xl-4 {margin-right:60px !important}
.mb-xl-4, .my-xl-4 {margin-bottom:60px !important}
.ml-xl-4, .mx-xl-4 {margin-left:60px !important}
.m-xl-auto {margin:auto !important}
.mt-xl-auto, .my-xl-auto {margin-top:auto !important}
.mr-xl-auto, .mx-xl-auto {margin-right:auto !important}
.mb-xl-auto, .my-xl-auto {margin-bottom:auto !important}
.ml-xl-auto, .mx-xl-auto {margin-left:auto !important}

.order-xl-first {order:-1}
.order-xl-last {order:13}

.p-xl-0 {padding:0 !important}
.pt-xl-0, .py-xl-0 {padding-top:0 !important}
.pr-xl-0, .px-xl-0 {padding-right:0 !important}
.pb-xl-0, .py-xl-0 {padding-bottom:0 !important}
.pl-xl-0, .px-xl-0 {padding-left:0 !important}
.p-xl-1 {padding:15px !important}
.pt-xl-1, .py-xl-1 {padding-top:15px !important}
.pr-xl-1, .px-xl-1 {padding-right:15px !important}
.pb-xl-1, .py-xl-1 {padding-bottom:15px !important}
.pl-xl-1, .px-xl-1 {padding-left:15px !important}
.p-xl-2 {padding:30px !important}
.pt-xl-2, .py-xl-2 {padding-top:30px !important}
.pr-xl-2, .px-xl-2 {padding-right:30px !important}
.pb-xl-2, .py-xl-2 {padding-bottom:30px !important}
.pl-xl-2, .px-xl-2 {padding-left:30px !important}
.p-xl-3 {padding:45px !important}
.pt-xl-3, .py-xl-3 {padding-top:45px !important}
.pr-xl-3, .px-xl-3 {padding-right:45px !important}
.pb-xl-3, .py-xl-3 {padding-bottom:45px !important}
.pl-xl-3, .px-xl-3 {padding-left:45px !important}
.p-xl-4 {padding:60px !important}
.pt-xl-4, .py-xl-4 {padding-top:60px !important}
.pr-xl-4, .px-xl-4 {padding-right:60px !important}
.pb-xl-4, .py-xl-4 {padding-bottom:60px !important}
.pl-xl-4, .px-xl-4 {padding-left:60px !important}
}


/* ---------------
--  [LG] Large  --
--------------- */
@media (max-width:1199.98px){
body {line-height:2rem; font-size:1.4rem}
.container-fluid {margin:0 32px}
[class*="banniere-html-"] .container-fluid.full .row {padding:0 32px}

[class^="bloc3-"] .row > .bloc:nth-child(1n+3), 
[class^="bloc4-"] .row > .bloc:nth-child(1n+3), 
[class^="bloc6-"] .row > .bloc:nth-child(1n+4) {margin-top:45px}
[class^="bloc3-"] .row.lg-en-ligne > .bloc:nth-child(1n+3), 
[class^="bloc4-"] .row.lg-en-ligne > .bloc:nth-child(1n+3), 
[class^="bloc6-"] .row.lg-en-ligne > .bloc:nth-child(1n+4) {margin-top:0}

.t-service {line-height:3.4rem; font-size:3rem}
h1, .t1 {line-height:4rem; font-size:3.4rem; padding-bottom:0.8rem}
h2, .t2 {line-height:3.4rem; font-size:3rem; padding-bottom:1.5rem}
h2.no-signature, .t2 {padding-bottom:0.9rem}
h3, .t3 {line-height:2.8rem; font-size:2.4rem; padding-top:0.5rem; padding-bottom:1rem}
h4, .t4 {line-height:2.6rem; font-size:2.2rem; padding-top:0.6rem; padding-bottom:1rem}
.big {line-height:2.2rem; font-size:1.6rem}
.standard {line-height:2rem; font-size:1.4rem}
.small {line-height:1.8rem; font-size:1.2rem}

ul.liste > li {margin-left:10px; padding:8px 0 10px 17px}
ul.liste > li::before {top:16px; width:0.7rem; height:0.7rem}
ul.liste.xs > li {padding:0 0 0 17px}
ul.liste.xs > li::before {top:8px}
ul.coche > li {margin-left:10px; padding:8px 0 10px 24px}
ul.coche > li::before {top:9px}
ul.coche.xs > li {padding:0 0 0 24px}
ul.coche.xs > li::before {top:1px}

#avantages-ecommerce .row li:nth-child(1n+4) {margin-top:15px}

#mentions .row p {padding-bottom:11px}

.btn-2h {line-height:4rem}

.col-lg-0 {flex:0 0 0; max-width:0; padding:0}
.col-lg-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-lg-2 {flex:0 0 16.666667%; max-width:16.666667%}
.col-lg-3 {flex:0 0 25%; max-width:25%}
.col-lg-4 {flex:0 0 33.333333%; max-width:33.333333%}
.col-lg-5 {flex:0 0 41.666667%; max-width:41.666667%}
.col-lg-6 {flex:0 0 50%; max-width:50%}
.col-lg-7 {flex:0 0 58.333333%; max-width:58.333333%}
.col-lg-8 {flex:0 0 66.666667%; max-width:66.666667%}
.col-lg-9 {flex:0 0 75%; max-width:75%}
.col-lg-10 {flex:0 0 83.333333%; max-width:83.333333%}
.col-lg-11 {flex:0 0 91.666667%; max-width:91.666667%}
.col-lg-12 {flex:0 0 100%; max-width:100%}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,
.col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {padding:0 15px}

.m-lg-0 {margin:0 !important}
.mt-lg-0, .my-lg-0 {margin-top:0 !important}
.mr-lg-0, .mx-lg-0 {margin-right:0 !important}
.mb-lg-0, .my-lg-0 {margin-bottom:0 !important}
.ml-lg-0, .mx-lg-0 {margin-left:0 !important}
.m-lg-1 {margin:15px !important}
.mt-lg-1, .my-lg-1 {margin-top:15px !important}
.mr-lg-1, .mx-lg-1 {margin-right:15px !important}
.mb-lg-1, .my-lg-1 {margin-bottom:15px !important}
.ml-lg-1, .mx-lg-1 {margin-left:15px !important}
.m-lg-2 {margin:30px !important}
.mt-lg-2, .my-lg-2 {margin-top:30px !important}
.mr-lg-2, .mx-lg-2 {margin-right:30px !important}
.mb-lg-2, .my-lg-2 {margin-bottom:30px !important}
.ml-lg-2, .mx-lg-2 {margin-left:30px !important}
.m-lg-3 {margin:45px !important}
.mt-lg-3, .my-lg-3 {margin-top:45px !important}
.mr-lg-3, .mx-lg-3 {margin-right:45px !important}
.mb-lg-3, .my-lg-3 {margin-bottom:45px !important}
.ml-lg-3, .mx-lg-3 {margin-left:45px !important}
.m-lg-4 {margin:60px !important}
.mt-lg-4, .my-lg-4 {margin-top:60px !important}
.mr-lg-4, .mx-lg-4 {margin-right:60px !important}
.mb-lg-4, .my-lg-4 {margin-bottom:60px !important}
.ml-lg-4, .mx-lg-4 {margin-left:60px !important}
.m-lg-auto {margin:auto !important}
.mt-lg-auto, .my-lg-auto {margin-top:auto !important}
.mr-lg-auto, .mx-lg-auto {margin-right:auto !important}
.mb-lg-auto, .my-lg-auto {margin-bottom:auto !important}
.ml-lg-auto, .mx-lg-auto {margin-left:auto !important}

.order-lg-first {order:-1}
.order-lg-last {order:13}

.p-lg-0 {padding:0 !important}
.pt-lg-0, .py-lg-0 {padding-top:0 !important}
.pr-lg-0, .px-lg-0 {padding-right:0 !important}
.pb-lg-0, .py-lg-0 {padding-bottom:0 !important}
.pl-lg-0, .px-lg-0 {padding-left:0 !important}
.p-lg-1 {padding:15px !important}
.pt-lg-1, .py-lg-1 {padding-top:15px !important}
.pr-lg-1, .px-lg-1 {padding-right:15px !important}
.pb-lg-1, .py-lg-1 {padding-bottom:15px !important}
.pl-lg-1, .px-lg-1 {padding-left:15px !important}
.p-lg-2 {padding:30px !important}
.pt-lg-2, .py-lg-2 {padding-top:30px !important}
.pr-lg-2, .px-lg-2 {padding-right:30px !important}
.pb-lg-2, .py-lg-2 {padding-bottom:30px !important}
.pl-lg-2, .px-lg-2 {padding-left:30px !important}
.p-lg-3 {padding:45px !important}
.pt-lg-3, .py-lg-3 {padding-top:45px !important}
.pr-lg-3, .px-lg-3 {padding-right:45px !important}
.pb-lg-3, .py-lg-3 {padding-bottom:45px !important}
.pl-lg-3, .px-lg-3 {padding-left:45px !important}
.p-lg-4 {padding:60px !important}
.pt-lg-4, .py-lg-4 {padding-top:60px !important}
.pr-lg-4, .px-lg-4 {padding-right:60px !important}
.pb-lg-4, .py-lg-4 {padding-bottom:60px !important}
.pl-lg-4, .px-lg-4 {padding-left:60px !important}

.py-txt {padding-top:8px}

.titre-h1 .txt-max, .titre-h2 .txt-max, .texte-p .txt-max, .ttl-max {max-width:800px !important}

/* redimensionnement images woopic */
.img_xl_ttl_prix_txt_btn{max-width: 405px;}
.img_col2_offre_prod{max-width: 255px;}
.img_col2_xs_ttl_prix_txt_btn{max-width: 270px;}
.img_col1_ttl_prix_txt_btn{max-height: 435px;}
.img_col2_ttl_prix_txt_btn{max-height: 435px;}
.img_col3_ttl_prix_txt_btn{max-height: 435px;}
.img_col4_ttl_prix_txt_btn{max-height: 435px}
}


/* ----------------
--  [MD] Medium  --
---------------- */
@media (max-width:959.98px){
.container-fluid {margin:0 12px}
[class*="banniere-html-"] .container-fluid.full .row {padding:0 12px}

.col-md-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-md-2 {flex:0 0 16.666667%; max-width:16.666667%}
.col-md-3 {flex:0 0 25%; max-width:25%}
.col-md-4 {flex:0 0 33.333333%; max-width:33.333333%}
.col-md-5 {flex:0 0 41.666667%; max-width:41.666667%}
.col-md-6 {flex:0 0 50%; max-width:50%}
.col-md-7 {flex:0 0 58.333333%; max-width:58.333333%}
.col-md-8 {flex:0 0 66.666667%; max-width:66.666667%}
.col-md-9 {flex:0 0 75%; max-width:75%}
.col-md-10 {flex:0 0 83.333333%; max-width:83.333333%}
.col-md-11 {flex:0 0 91.666667%; max-width:91.666667%}
.col-md-12 {flex:0 0 100%; max-width:100%}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7,
.col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {padding:0 15px}

.m-md-0 {margin:0 !important}
.mt-md-0, .my-md-0 {margin-top:0 !important}
.mr-md-0, .mx-md-0 {margin-right:0 !important}
.mb-md-0, .my-md-0 {margin-bottom:0 !important}
.ml-md-0, .mx-md-0 {margin-left:0 !important}
.m-md-1 {margin:15px !important}
.mt-md-1, .my-md-1 {margin-top:15px !important}
.mr-md-1, .mx-md-1 {margin-right:15px !important}
.mb-md-1, .my-md-1 {margin-bottom:15px !important}
.ml-md-1, .mx-md-1 {margin-left:15px !important}
.m-md-2 {margin:30px !important}
.mt-md-2, .my-md-2 {margin-top:30px !important}
.mr-md-2, .mx-md-2 {margin-right:30px !important}
.mb-md-2, .my-md-2 {margin-bottom:30px !important}
.ml-md-2, .mx-md-2 {margin-left:30px !important}
.m-md-3 {margin:45px !important}
.mt-md-3, .my-md-3 {margin-top:45px !important}
.mr-md-3, .mx-md-3 {margin-right:45px !important}
.mb-md-3, .my-md-3 {margin-bottom:45px !important}
.ml-md-3, .mx-md-3 {margin-left:45px !important}
.m-md-4 {margin:60px !important}
.mt-md-4, .my-md-4 {margin-top:60px !important}
.mr-md-4, .mx-md-4 {margin-right:60px !important}
.mb-md-4, .my-md-4 {margin-bottom:60px !important}
.ml-md-4, .mx-md-4 {margin-left:60px !important}
.m-md-auto {margin:auto !important}
.mt-md-auto, .my-md-auto {margin-top:auto !important}
.mr-md-auto, .mx-md-auto {margin-right:auto !important}
.mb-md-auto, .my-md-auto {margin-bottom:auto !important}
.ml-md-auto, .mx-md-auto {margin-left:auto !important}

.order-md-first {order:-1}
.order-md-last {order:13}

.p-md-0 {padding:0 !important}
.pt-md-0, .py-md-0 {padding-top:0 !important}
.pr-md-0, .px-md-0 {padding-right:0 !important}
.pb-md-0, .py-md-0 {padding-bottom:0 !important}
.pl-md-0, .px-md-0 {padding-left:0 !important}
.p-md-1 {padding:15px !important}
.pt-md-1, .py-md-1 {padding-top:15px !important}
.pr-md-1, .px-md-1 {padding-right:15px !important}
.pb-md-1, .py-md-1 {padding-bottom:15px !important}
.pl-md-1, .px-md-1 {padding-left:15px !important}
.p-md-2 {padding:30px !important}
.pt-md-2, .py-md-2 {padding-top:30px !important}
.pr-md-2, .px-md-2 {padding-right:30px !important}
.pb-md-2, .py-md-2 {padding-bottom:30px !important}
.pl-md-2, .px-md-2 {padding-left:30px !important}
.p-md-3 {padding:45px !important}
.pt-md-3, .py-md-3 {padding-top:45px !important}
.pr-md-3, .px-md-3 {padding-right:45px !important}
.pb-md-3, .py-md-3 {padding-bottom:45px !important}
.pl-md-3, .px-md-3 {padding-left:45px !important}
.p-md-4 {padding:60px !important}
.pt-md-4, .py-md-4 {padding-top:60px !important}
.pr-md-4, .px-md-4 {padding-right:60px !important}
.pb-md-4, .py-md-4 {padding-bottom:60px !important}
.pl-md-4, .px-md-4 {padding-left:60px !important}

/* redimensionnement images woopic */
.img_xl_ttl_prix_txt_btn{max-width: 330px;}
.img_col2_offre_prod{max-width: 210px;}
.img_col2_xs_ttl_prix_txt_btn{max-width: 270px;}
.img_col1_ttl_prix_txt_btn{max-height: 360px;}
.img_col2_ttl_prix_txt_btn{max-height: 360px;}
.img_col3_ttl_prix_txt_btn{max-height: 360px;}
.img_col4_ttl_prix_txt_btn{max-height: 360px}
}


/* ---------------
--  [SM] Small  --
--------------- */
@media (max-width:735.98px){
body {line-height:2rem; font-size:1.4rem}
.container-fluid {margin:0}
.container-fluid .row {padding:15px 0}
[class*="banniere-html-"] .container-fluid.full .row {padding:15px 0}
.titre-h1 .row, .titre-h2 .row, .texte-p .row {padding:15px 0 0}
.titre-h1 + [class*="banniere-"], .titre-h2 + [class*="banniere-"], .texte-p + [class*="banniere-"],
.titre-h1 + [class*="visionneuse-"], .titre-h2 + [class*="visionneuse-"], .texte-p + [class*="visionneuse-"] {margin:15px 0 0}
.row > .bloc:nth-child(1n+2) {margin-top:30px !important}

.bg-blanc + div:not(.bg-blanc), .bg-gris1 + div:not(.bg-gris1), .bg-gris2 + div:not(.bg-gris2), .bg-noir + div:not(.bg-noir) {margin-top:15px}

.t-service {line-height:3rem; font-size:2.6rem}
h1, .t1 {line-height:3rem; font-size:2.6rem; padding-top:0.4rem; padding-bottom:1rem}
h2, .t2 {line-height:2.8rem; font-size:2.4rem; padding-top:0.5rem; padding-bottom:1.6rem}
h2.no-signature, .t2 {padding-bottom:1rem}
h3, .t3 {line-height:2.4rem; font-size:2rem; padding-top:0.5rem; padding-bottom:1.1rem}
h4, .t4 {line-height:2.4rem; font-size:2rem; padding-top:0.5rem; padding-bottom:1.1rem}
.big {line-height:2.2rem; font-size:1.6rem}
.standard {line-height:2rem; font-size:1.4rem}
.small {line-height:1.8rem; font-size:1.2rem}

#avantages-ecommerce .row li:nth-child(1n+2) {margin-top:0}
#avantages-ecommerce .row li a .icon {font-size:2.2rem}

.btn {text-align:center}
.btn-row {flex-direction:column}
.btn-row a:first-child {margin-right:0}
.btn-primaire, .btn-secondaire {margin-top:15px}

.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7,
.col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {flex:0 0 100%; max-width:100%}

.col-sm-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-sm-2 {flex:0 0 16.666667%; max-width:16.666667%}
.col-sm-3 {flex:0 0 25%; max-width:25%}
.col-sm-4 {flex:0 0 33.333333%; max-width:33.333333%}
.col-sm-5 {flex:0 0 41.666667%; max-width:41.666667%}
.col-sm-6 {flex:0 0 50%; max-width:50%}
.col-sm-7 {flex:0 0 58.333333%; max-width:58.333333%}
.col-sm-8 {flex:0 0 66.666667%; max-width:66.666667%}
.col-sm-9 {flex:0 0 75%; max-width:75%}
.col-sm-10 {flex:0 0 83.333333%; max-width:83.333333%}
.col-sm-11 {flex:0 0 91.666667%; max-width:91.666667%}
.col-sm-12 {flex:0 0 100%; max-width:100%}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7,
.col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {padding:0 15px}

.m-sm-0 {margin:0 !important}
.mt-sm-0, .my-sm-0 {margin-top:0 !important}
.mr-sm-0, .mx-sm-0 {margin-right:0 !important}
.mb-sm-0, .my-sm-0 {margin-bottom:0 !important}
.ml-sm-0, .mx-sm-0 {margin-left:0 !important}
.m-sm-1 {margin:15px !important}
.mt-sm-1, .my-sm-1 {margin-top:15px !important}
.mr-sm-1, .mx-sm-1 {margin-right:15px !important}
.mb-sm-1, .my-sm-1 {margin-bottom:15px !important}
.ml-sm-1, .mx-sm-1 {margin-left:15px !important}
.m-sm-2 {margin:30px !important}
.mt-sm-2, .my-sm-2 {margin-top:30px !important}
.mr-sm-2, .mx-sm-2 {margin-right:30px !important}
.mb-sm-2, .my-sm-2 {margin-bottom:30px !important}
.ml-sm-2, .mx-sm-2 {margin-left:30px !important}
.m-sm-3 {margin:45px !important}
.mt-sm-3, .my-sm-3 {margin-top:45px !important}
.mr-sm-3, .mx-sm-3 {margin-right:45px !important}
.mb-sm-3, .my-sm-3 {margin-bottom:45px !important}
.ml-sm-3, .mx-sm-3 {margin-left:45px !important}
.m-sm-4 {margin:60px !important}
.mt-sm-4, .my-sm-4 {margin-top:60px !important}
.mr-sm-4, .mx-sm-4 {margin-right:60px !important}
.mb-sm-4, .my-sm-4 {margin-bottom:60px !important}
.ml-sm-4, .mx-sm-4 {margin-left:60px !important}
.m-sm-auto {margin:auto !important}
.mt-sm-auto, .my-sm-auto {margin-top:auto !important}
.mr-sm-auto, .mx-sm-auto {margin-right:auto !important}
.mb-sm-auto, .my-sm-auto {margin-bottom:auto !important}
.ml-sm-auto, .mx-sm-auto {margin-left:auto !important}

.order-sm-first {order:-1}
.order-sm-last {order:13}

.p-sm-0 {padding:0 !important}
.pt-sm-0, .py-sm-0 {padding-top:0 !important}
.pr-sm-0, .px-sm-0 {padding-right:0 !important}
.pb-sm-0, .py-sm-0 {padding-bottom:0 !important}
.pl-sm-0, .px-sm-0 {padding-left:0 !important}
.p-sm-1 {padding:15px !important}
.pt-sm-1, .py-sm-1 {padding-top:15px !important}
.pr-sm-1, .px-sm-1 {padding-right:15px !important}
.pb-sm-1, .py-sm-1 {padding-bottom:15px !important}
.pl-sm-1, .px-sm-1 {padding-left:15px !important}
.p-sm-2 {padding:30px !important}
.pt-sm-2, .py-sm-2 {padding-top:30px !important}
.pr-sm-2, .px-sm-2 {padding-right:30px !important}
.pb-sm-2, .py-sm-2 {padding-bottom:30px !important}
.pl-sm-2, .px-sm-2 {padding-left:30px !important}
.p-sm-3 {padding:45px !important}
.pt-sm-3, .py-sm-3 {padding-top:45px !important}
.pr-sm-3, .px-sm-3 {padding-right:45px !important}
.pb-sm-3, .py-sm-3 {padding-bottom:45px !important}
.pl-sm-3, .px-sm-3 {padding-left:45px !important}
.p-sm-4 {padding:60px !important}
.pt-sm-4, .py-sm-4 {padding-top:60px !important}
.pr-sm-4, .px-sm-4 {padding-right:60px !important}
.pb-sm-4, .py-sm-4 {padding-bottom:60px !important}
.pl-sm-4, .px-sm-4 {padding-left:60px !important}

.ombre-lb, .ombre-rb, .zig .ombre, .zag .ombre {margin:10px 10px 0 0; padding:0 0 10px}
.ombre-lb img, .ombre-rb img, .zig .ombre img, .zag .ombre img {margin:-10px 0 0 10px}

.titre-h1 .txt-max, .titre-h2 .txt-max, .texte-p .txt-max, .ttl-max {max-width:none !important}

.bloc1-ttl-txt-btn-img.fin-ope .row .visuel {order:-1} /* pour les pages fin d'opé */

/* début visionneuse (générique) */
.ob1-carrousel .swiper-button-prev, .ob1-carrousel .swiper-button-next {display:none}

.ob1-carrousel .ob1-carrousel-controls {display:none}
/* fin visionneuse */

/* redimensionnement images woopic */
.img_xl_ttl_prix_txt_btn{max-width: 525px;}
.img_col2_offre_prod{max-width: 270px;}
.img_col2_xs_ttl_prix_txt_btn{max-width: 270px;}
.img_col1_ttl_prix_txt_btn{max-height: 555px;}
.img_col2_ttl_prix_txt_btn{max-height: 555px;}
.img_col3_ttl_prix_txt_btn{max-height: 555px;}
.img_col4_ttl_prix_txt_btn{max-height: 555px}

}


/* ----------------
--  Extra Small  --
---------------- */
@media (max-width:479.98px){
.site-width {min-width:320px}

.col-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-2 {flex:0 0 16.666667%; max-width:16.666667%}
.col-3 {flex:0 0 25%; max-width:25%}
.col-4 {flex:0 0 33.333333%; max-width:33.333333%}
.col-5 {flex:0 0 41.666667%; max-width:41.666667%}
.col-6 {flex:0 0 50%; max-width:50%}
.col-7 {flex:0 0 58.333333%; max-width:58.333333%}
.col-8 {flex:0 0 66.666667%; max-width:66.666667%}
.col-9 {flex:0 0 75%; max-width:75%}
.col-10 {flex:0 0 83.333333%; max-width:83.333333%}
.col-11 {flex:0 0 91.666667%; max-width:91.666667%}
.col-12 {flex:0 0 100%; max-width:100%}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7,
.col-8, .col-9, .col-10, .col-11, .col-12 {padding:0 15px}

.m-0 {margin:0 !important}
.mt-0, .my-0 {margin-top:0 !important}
.mr-0, .mx-0 {margin-right:0 !important}
.mb-0, .my-0 {margin-bottom:0 !important}
.ml-0, .mx-0 {margin-left:0 !important}
.m-1 {margin:15px !important}
.mt-1, .my-1 {margin-top:15px !important}
.mr-1, .mx-1 {margin-right:15px !important}
.mb-1, .my-1 {margin-bottom:15px !important}
.ml-1, .mx-1 {margin-left:15px !important}
.m-2 {margin:30px !important}
.mt-2, .my-2 {margin-top:30px !important}
.mr-2, .mx-2 {margin-right:30px !important}
.mb-2, .my-2 {margin-bottom:30px !important}
.ml-2, .mx-2 {margin-left:30px !important}
.m-3 {margin:45px !important}
.mt-3, .my-3 {margin-top:45px !important}
.mr-3, .mx-3 {margin-right:45px !important}
.mb-3, .my-3 {margin-bottom:45px !important}
.ml-3, .mx-3 {margin-left:45px !important}
.m-4 {margin:60px !important}
.mt-4, .my-4 {margin-top:60px !important}
.mr-4, .mx-4 {margin-right:60px !important}
.mb-4, .my-4 {margin-bottom:60px !important}
.ml-4, .mx-4 {margin-left:60px !important}
.m-auto {margin:auto !important}
.mt-auto, .my-auto {margin-top:auto !important}
.mr-auto, .mx-auto {margin-right:auto !important}
.mb-auto, .my-auto {margin-bottom:auto !important}
.ml-auto, .mx-auto {margin-left:auto !important}

.order-first {order:-1}
.order-last {order:13}

.p-0 {padding:0 !important}
.pt-0, .py-0 {padding-top:0 !important}
.pr-0, .px-0 {padding-right:0 !important}
.pb-0, .py-0 {padding-bottom:0 !important}
.pl-0, .px-0 {padding-left:0 !important}
.p-1 {padding:15px !important}
.pt-1, .py-1 {padding-top:15px !important}
.pr-1, .px-1 {padding-right:15px !important}
.pb-1, .py-1 {padding-bottom:15px !important}
.pl-1, .px-1 {padding-left:15px !important}
.p-2 {padding:30px !important}
.pt-2, .py-2 {padding-top:30px !important}
.pr-2, .px-2 {padding-right:30px !important}
.pb-2, .py-2 {padding-bottom:30px !important}
.pl-2, .px-2 {padding-left:30px !important}
.p-3 {padding:45px !important}
.pt-3, .py-3 {padding-top:45px !important}
.pr-3, .px-3 {padding-right:45px !important}
.pb-3, .py-3 {padding-bottom:45px !important}
.pl-3, .px-3 {padding-left:45px !important}
.p-4 {padding:60px !important}
.pt-4, .py-4 {padding-top:60px !important}
.pr-4, .px-4 {padding-right:60px !important}
.pb-4, .py-4 {padding-bottom:60px !important}
.pl-4, .px-4 {padding-left:60px !important}

/* redimensionnement images woopic */
.img_xl_ttl_prix_txt_btn{max-width: 225px;}
.img_col2_offre_prod{max-width: 270px;}
.img_col2_xs_ttl_prix_txt_btn{max-width: 270px;}
.img_col1_ttl_prix_txt_btn{max-height: 360px;}
.img_col2_ttl_prix_txt_btn{max-height: 360px;}
.img_col3_ttl_prix_txt_btn{max-height: 360px;}
.img_col4_ttl_prix_txt_btn{max-height: 360px}
}


/* ---------------
--  Impression  --
--------------- */
@media print {
#injonction, #o-ribbon, .o-nav-megaMenu-items, .o-nav-items, #avantages-ecommerce, #fil-d-ariane, #footer-wrapper, .no-print {display:none !important}
}