/* Redwood look for pages built with Oui Blocks (the former SP Page Builder pages). Loaded on com_blocks views and articles. */

/* --- page chrome: full width, no body padding --- */
.com-blocks #sp-main-body{padding:0}
.com-blocks .blocks-layout{overflow-x:hidden}

/* --- Bootstrap utilities Blocks output uses that the template's Bootstrap subset lacks --- */
.img-fluid{max-width:100%;height:auto}
.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}
.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}
.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571%}.ratio-9x16{--bs-aspect-ratio:177.7778%}
@media (min-width:768px){.d-md-block{display:block!important}.d-md-flex{display:flex!important}}
@media (max-width:991.98px){.d-lg-none{display:none!important}}
@media (min-width:1200px){.d-xl-block{display:block!important}.d-xl-none{display:none!important}}
.col-md-1,.col-md-2,.col-md-3,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{width:100%}
@media (min-width:768px){
.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}
.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}
.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}}

/* --- a fluid section has no padding of its own, anywhere (the footer layout too) --- */
.blocks-section>.container-fluid{padding-left:0;padding-right:0}

/* --- sections and rows, as the page builder laid them out. The container has Bootstrap's widths; in the main content a row is
   the container's content box (no negative gutter), at most 1280 wide (1480 on the home page) and centred; the footer layout keeps
   Bootstrap's gutters. --- */
.blocks-section>.container{max-width:none}
@media (min-width:576px){.blocks-section>.container{max-width:540px}}
@media (min-width:768px){.blocks-section>.container{max-width:720px}}
@media (min-width:992px){.blocks-section>.container{max-width:960px}}
@media (min-width:1200px){.blocks-section>.container{max-width:1140px}}
@media (min-width:1400px){.blocks-section>.container{max-width:1320px}}
#sp-component .blocks-section>.container-fluid{padding-left:0;padding-right:0}
:where(#sp-component) .blocks-row{width:100%;max-width:1280px;margin-left:auto;margin-right:auto}
:where(.itemid-101 #sp-component) .blocks-row{max-width:1480px}
.blocks-section{position:relative;z-index:1}
/* the column box fills the column (equal heights) inside its gutter */
.blocks-cell{height:100%;position:relative;width:100%;display:flex;flex-wrap:wrap}
.blocks-cell-body{position:relative;width:100%}

/* --- elements --- */
.blocks-el-oui-image img{max-width:100%;height:auto}
/* in the page: an element keeps the bottom margin of its last paragraph inside (the page builder's add-ons were clearfix boxes) */
#sp-component .blocks-el{display:flow-root}

/* --- phones: the page builder gave every column a bottom margin --- */
:where([device=mobile]) .blocks-col{margin-bottom:3rem}

/* --- headings are inline-blocks, as the page builder's titles were (same line boxes) --- */
.blocks-el-oui-heading>:where(h1,h2,h3,h4,h5,h6){display:inline-block}

/* --- the white tiles (class "white-frame" on a column): image pulled over the top edge, text, button hanging under the tile --- */
.white-frame{position:relative}
.white-frame .blocks-cell-body{background-color:#fff;margin-bottom:6rem;padding:2rem}
.white-frame p{color:#000}
.white-frame .blocks-el-oui-image>a,.white-frame .blocks-el-oui-image>picture{display:inline-block;position:relative}
#footer-reassurance{padding-top:5rem!important;padding-bottom:5rem!important}
#footer-reassurance .white-frame{padding-top:5rem;position:relative}
#footer-reassurance .white-frame img{position:absolute;max-width:60%;margin-top:-10rem}
#footer-reassurance .blocks-el-oui-image>a,#footer-reassurance .blocks-el-oui-image>picture{width:100%;display:block;position:static}
.white-frame img{display:inline-block;width:80%;margin:-10rem 10% 0;height:auto!important}
.white-frame .blocks-text{color:#000!important}
.white-frame .blocks-text a{color:#a39673}
.white-frame .blocks-el-oui-button{width:auto;min-width:20rem;position:absolute;bottom:1.5rem}
/* the page builder's custom buttons: the site's beige, hanging 3rem below their wrapper unless marked "normal" */
.oui-btn-custom .btn{background:#a39673;border-color:#a39673;color:#fff;bottom:-3rem;position:absolute}
.oui-btn-custom.normal .btn,.oui-btn-custom.relative-button .btn{position:relative;bottom:auto}
.marques .white-frame img{width:70%;margin:0 15%;position:relative;height:auto!important}
.page-marque h1{color:#a39673}

/* --- buttons: the template's "primary" of the page builder (dark), not Bootstrap's blue --- */
.blocks-el-oui-button .btn-primary{color:#fff;background-color:#252525;border-color:#252525}
.blocks-el-oui-button .btn-primary:hover,.blocks-el-oui-button .btn-primary:focus,.blocks-el-oui-button .btn-primary:active{background-color:#171614b3;border-color:#171614b3}

/* --- phones (the template's mobile rules for the page builder's classes) --- */
[device=mobile] .white-frame img{width:80%;margin:0 10%;height:auto!important}
[device=mobile] .white-frame .blocks-cell-body{margin-bottom:1vh}
[device=mobile] .white-frame{position:relative}
[device=mobile] #footer-reassurance{margin:5%!important;padding:0!important}
[device=mobile] #footer-reassurance .blocks-col{margin-bottom:1vh}
[device=mobile] #footer-reassurance .white-frame img{max-width:20%;margin:auto}
[device=mobile] #footer-reassurance .white-frame .blocks-el-oui-heading,[device=mobile] #footer-reassurance .white-frame .blocks-el-oui-text{float:right;width:80%}
[device=mobile] #footer-reassurance .white-frame .blocks-el-oui-text{font-size:1rem}
[device=mobile] #footer-reassurance .white-frame{padding-top:0;position:relative}
[device=mobile] .description_block{width:100%;margin:auto}
.blocks-el-oui-button.oui-btn-custom .btn-primary,.blocks-el-oui-button.oui-btn-custom .btn-primary:hover,.blocks-el-oui-button.oui-btn-custom .btn-primary:focus,.blocks-el-oui-button.oui-btn-custom .btn-primary:active{background-color:#a39673;border-color:#a39673}
.carte .blocks-cell:not(.white-frame) .blocks-el-oui-image picture{display:inline-block;vertical-align:top}
.carte .blocks-cell:not(.white-frame) .blocks-el-oui-image img{object-fit:contain;width:100%;height:250px}