@charset "UTF-8";
/* CSS Document */
/* ================================================
Fichier : css_Layouts.css
Application: Layout Template
Pour la gestion du template:
PY-Architecture
Auteur : . Ricardo Bandeira
Version : 1
Date : 20/06/2024
Notes :
* tpl est la désignation de template
et sera utilisé pour désigner les blocs de position (les sections du template)
* norme BEM Bloc__Element-name_modificateur-name_modificateur-valeur
exemple: .tpl__inner
block-name__elem-name_mod-name_mod-val
* Espace de noms (Name spaces)
.u- Utilitaires
.ui- User interface
.l- Layout
// Index des sections:
@_Grp Global
@_Grp Override
@_Grp Header
@_Grp Logo
@_Grp Menu
@_Grp Accueil
@_Grp Intro
@_Grp Suite
@_Grp MainContent
@_Grp Article
@_Grp Faire un Don
@_Grp Rêves Réalisés
Présentation Rêve
@_Grp Les Toiles [page]
@_Grp Vision
@_Grp Agence
@_Grp Formulaire
@_Grp Aide
@_Grp Page_Erreur
@_Grp Pied de Page (ppg)
Liens du site Unreveavivre:
Autres ressources:
body { font-family: "Audiowide", sans-serif; }
** Multiple fonts
****
================================================ */
h2,
h2.u-heading-2{
font-size: 2rem;
text-align: center;
font-weight: 600;
color: #0f0f16;
height: initial; /* pour récupérer une hauteur */
}
h2::before,
h2.u-heading-2::before,
h2.u-heading-2::after {
content: "";
display: block;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
background-color: #000;
width: 50%;
max-width: 400px;
height: 1px;
margin: 0 auto;
transition: all .2s ease-in-out;
}
h2.u-heading-2::after {
background-color: var(--color_main);
width: 10%;
max-width: 50px;
height: 6px;
margin: 0 auto;
top: 47px;
z-index: 2;
}
h2.u-heading-2:hover::after {
background-color: var(--color_main);
width: 30%;
max-width: 250px;
height: 10px;
transition: all .2s ease-in-out;
}
h2.u-heading-2:hover::before{
left: 50%;
transform: translateX(-50%);
background-color: #000;
width: 55%;
max-width: 420px;
height: 1px;
margin: 0 auto;
transition: all .2s ease-in-out;
}
/* @_Grp Global ========================================================== */
.tpl__inner,
.wrapper__header.tpl__inner,
.projet__container,
.article__body,
.blog-items,
.pagenavigation {
position: relative;
width: 95%;
max-width: var(--inner_max-width);
margin: var(--u-margin-centered);
padding: var(--inner_padding);
}
.container, .tck-container {
max-width: initial;
}
.tck-article-title,
.page-title-section {
position: relative;
margin: 0px;
padding: 50px 0 48px;
width: 100%;
height: 100%;
}
.u-icon_video_reveAV {
display: block;
background-image: url(/images/images_FTP/_default_images/video_default.png);
background-repeat: no-repeat;
background-size: contain;
width: 300px;
height: 200px;
}
.u-icon_video_reveAV:hover { background-image: url(/images/images_FTP/_default_images/video_default_hover.png); }
.u-icon_video_reveAV a {
display: block;
width: 100%;
height: 100%;
}
.btn, a.btn {
display: block;
background-color: var(--color_btn);
font-size: 1.9rem;
color: var(--color_btn-text);
padding: 15px;
border: 1px #555 solid;
}
.btn:hover,
a.btn:hover {
background-color: var(--color_btn--hover);
color: var(--color_btn-text--hover);
text-decoration: none !important;
}
.btn-navigation { margin-top: 30px; }
.btn.btn-filtre {
padding: 0;
font-size: 1.3rem;
}
/* @_Grp Global (FIN) ==================================================== */
/* @_Grp Override ========================================================== */
/* Dans Template.css on trouve une déclaration de
section > .inner en display flex
TODO: touver la raison et voir si on écrase tout ou seulement ce qui suit:
*/
section.aide > .inner { display: block; }
/* Pour masquer la navigation vers l'article suivant */
.pg_accueil .pagenavigation { display: none; }
.widget-separator {
display: none;
position: relative;
top:50%;
background-color: #000;
width: 90%;
max-width: 400px;
height: 1px;
margin: 0 auto;
}
.widget-separator__decoration {
display: block;
display: none;
position: relative;
top: 50%;
background-color: var(--color_main);
width: 50%;
max-width: 100px;
height: 20px;
margin: 0 auto;
}
.widget-separator span {
width: 30px;
height: 4px;
margin: 0px auto;
display: block;
position: relative;
bottom: 2px;
}
#mbNumber { color: #fff; }
.scrollToTop {
--size:50px;
--space:20px;
position: fixed;
bottom: var(--space);
right: var(--space);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: none;
background-color: rgba(128,128,128,0.4);
width: var(--size);
height: var(--size);
border: 4px rgba(0,0,0,0.5) solid;
transition: opacity 0.2s ease;
}
section > .inner{
display: block;
justify-content: initial;
}
/* @_Grp Override (FIN) ==================================================== */
/* @_Grp Header ========================================================== */
#wrapper__header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: var(--color_blanc);
z-index: 2000;
transition: all 0.36s ease-in;
}
.wrapper__header {
position: relative;
height: var(--header_heigth);
transition: all 0.2s ease-in-out;
}
.headerMain--reduced .wrapper__header {
height: var(--header_heigth--reduced);
transition: all 0.2s ease-in-out;
}
/* LOGO ==== */
.tpl__logo-main {
margin: 0 auto;
text-align: center;
}
.logo-main {
display: flex;
justify-content: center;
max-width: var(--inner_max-width);
margin: 0 auto;
padding: 15px 0 15px 0;
transition: all 0.2s ease-in-out;
}
.logo-main__link {
display: block;
flex-basis: 20%;
max-width: 250px;
background-image: url(/images/_Design/reveavivre_logo_main.png);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
width: var(--logo-main_width);
height: var(--logo-main_heigth);
transition: all 0.2s ease-in-out;
}
.logo-main__slogan-container {
position: relative;
flex-basis: 65%;
}
.logo-main__slogan {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.logo-main__slogan-header {
text-align: left;
font-size: 3.2rem;
color: var(--color_main);
letter-spacing: 0.3em;
margin: 0;
transition: all 0.25s ease-in-out;
}
.logo-main__slogan-texte {
font-size: 1.6rem;
font-weight: 400;
text-align: left;
padding: 0;
transition: all 0.25s ease-in-out;
}
.logo-main__slogan-header::before { display: none; }
/* MENU ==== */
#tpl__menu-main { height: min-content; }
.tpl__menu-main .nav {
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.navbar-custom .navbar-nav li > a {
position: relative;
color: #1b1b1b;
font-weight: 600;
font-size: 0.875rem;
padding: 35px 17px;
transition: all 0.3s ease-in-out 0s;
}
.tpl__menu-main ul.nav > li.nav-item > a{
font-size: 1.4rem;
font-weight: 600;
text-align: center;
margin: 0;
padding: 20px;
}
.tpl__menu-main ul.nav > li:hover > a,
.tpl__menu-main ul.menu li.current.active a,
.tpl__menu-main .nav-item:hover a { color: var(--color_main); }
.tpl__menu-main .nav-item { min-width: 120px; }
.tpl__menu-main .nav-item.item-169 { position: relative; }
/* REVENIR ICI */
#tpl__menu-main ul.nav > li > a.menu-main__home{
display: block;
background-color: transparent;
width: 100px;
height: auto;
margin: 0 auto;
transform-origin: top left;
transform: scale(0);
transition: all 0.2s ease-in-out;
}
/* HeaderMain--reduced ========================= */
.headerMain--reduced #tpl__logo-main {
transition: all 0.5s;
height: 0;
opacity: 0;
}
.headerMain--reduced .logo-main {
height: 0;
padding: 0;
transition: all 0.2s ease-in-out;
}
.headerMain--reduced .wrapper__header.tpl__inner{
display: flex;
justify-content: space-between;
align-items: center;
padding: 3rem 0 3rem 0;
transition: all 0.25s ease-in-out;
}
.headerMain--reduced .logo-main {
padding: 0.1em 0;
transition: all 0.25s ease-in-out;
}
.headerMain--reduced #tpl__menu-main .nav-item a,
.headerMain--reduced .tpl__menu-main .nav-item a{
padding: 5px;
}
.headerMain--reduced .logo-main__logo {
display: block;
width: calc(var(--logo-main_width)/2);
height: calc(var(--logo-main_heigth)/2);
transition: all 0.25s ease-in-out;
}
.headerMain--reduced .logo-main__slogan-header {
font-size: 1.6rem;
padding:0.1em 0;
transition: all 0.25s ease-in-out;
}
.headerMain--reduced .logo-main__slogan-texte {
font-size: 1.4rem;
letter-spacing: normal;
padding: 0;
transition: all 0.25s ease-in-out;
}
.headerMain--reduced #tpl__menu-main ul.nav > li > a.menu-main__home{
transform: scale(1);
transition: all 0.2s ease-in-out;
}
.headerMain--reduced #tpl__menu-main ul.nav > li > a.menu-main__home::after {
content: "";
position: absolute;
top: -10px;
display: block;
background-image: url(/images/_Design/reveavivre_logo_main.png);
background-repeat: no-repeat;
background-size: contain;
width: 100px;
height: 75px;
transition: all 0.2s ease-in-out;
}
.headerMain--reduced #tpl__menu-main ul.nav > li:hover > a.menu-main__home::after {
top: 0px;
width: 120px;
height: 90px;
transition: all 0.2s ease-in-out;
}
/* @_Grp Header (FIN) ==================================================== */
/* @_Grp wrapper ========================================================= */
#wrapper{
padding-top: var(--header_heigth);
transition: all 0.2s ease-in-out;
}
.headerMain--reduced ~ #wrapper {
padding-top: 140px;
transition: all 0.2s ease-in-out;
}
/* @_Grp wrapper (FIN) =================================================== */
/* @_Grp Accueil ========================================================= */
.nous-connaitre__container { padding: 5rem 0; }
.nous-connaitre__item.u-flex-item {
flex-basis: 31.3%;
background-color: #f9f9f9;
text-align: center;
margin: 1em 0.5em;
padding: 2em;
max-width: 400px;
margin: 0 5px 40px 5px;
padding: 25px 20px 30px;
border-radius: 5px;
border: 1px solid #e9e9e9;
border-top: 3px solid var(--color_gris-fonce);
cursor: grab;
transform-origin: center bottom;
transform:scale(1,1);
transition: all 0.2s ease-in-out;
}
.entry-title {
color: var(--color_gris-noir);
padding-bottom: 13px;
margin-bottom: 30px;
}
.entry-title::after {
display: block;
position: absolute;
bottom: 0;
left: 49%;
background-color: #e9e9e9;
content: "";
width: 40px;
height: 4px;
z-index: 1500;
transform: translateX(-50%);
transition: all 0.2s ease-in-out;
}
.nous-connaitre__item:hover .entry-title::after {
width: 80%;
transition: all 0.2s ease-in-out;
}
.entry-content p {
font-size: 1.5rem;
text-align: center;
line-height: 1.6;
font-weight: 400;
text-rendering: optimizeLegibility;
color: #64646d;
}
.nous-connaitre__item.u-flex-item::after {
display: block;
position: absolute;
bottom: -10px;
left: 49%;
background-color: var(--color_main);
background-color: #fff;
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
border: 5px var(--color_main) solid;
z-index: 1500;
}
.nous-connaitre__item { box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1); }
.nous-connaitre__item:hover { box-shadow: 0 15px 15px 0 rgba(0,0,0,0.1); }
.nous-connaitre__item.u-flex-item:hover {
border-top: 3px solid var(--color_main);
transform:scale(1.02,1.02);
transition: all 0.2s ease-in-out;
}
.nous-connaitre__item .post-thumbnail {
width: 60%;
margin: 0 auto;
padding: 2em;
}
.nous-connaitre__item .post-thumbnail .services_cols_mn_icon {
display: block;
margin: 0 auto;
width: 80%;
min-width: 120px;
height: auto;
}
.nous-connaitre__item.u-flex-item:hover .services_cols_mn_icon {
transform: scale(1.35);
transition: all 0.2s ease-in-out;
}
.flipInX {
visibility: visible;
animation-delay: 0.5s;
animation-name: flipInX;
}
@keyframes flipInX {
0% {
-webkit-transform:perspective(400px) rotateX(90deg);
-ms-transform:perspective(400px) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotateX(-10deg);
-ms-transform:perspective(400px) rotateX(-10deg);
transform:perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotateX(10deg);
-ms-transform:perspective(400px) rotateX(10deg);
transform:perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform:perspective(400px) rotateX(0deg);
-ms-transform:perspective(400px) rotateX(0deg);
transform:perspective(400px) rotateX(0deg);
opacity:1
}
}
/* @_Grp Accueil (FIN) =================================================== */
/* @_Grp SlideShow Accueil ========================================================= */
/* {loadmoduleid 1} */
#camera_wrap_113 .camera_caption,
.tpl__slideshow .camera_caption {
top: 70%;
width: 95%;
left: 50% !important; /* Pour corriger l'alignement */
margin: 0 auto;
padding: 0;
transition: all 0.2s ease-in-out;
transform: translateX(-50%);
}
.tpl__slideshow .camera_caption div { color: #fff; }
.tpl__slideshow .camera_caption > div {
background: transparent;
background-color: rgba(var(--color_main_rgb),0.6);
color: #fff;
width: 80%;
margin: 0 auto;
padding: 0;
}
#camera_wrap_113{ --text-shadow:3px 3px 3px rgba(25,23,65,0.5); }
#camera_wrap_113 .camera_caption > div {
background: transparent; /* rgba(255, 122, 38, 0.8);*/
text-align: center;
}
#camera_wrap_113 .camera_caption_title, .tpl__slideshow .camera_caption_title {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 5rem;
font-weight: 500;
text-align: center;
line-height: 1em;
letter-spacing: 6px;
letter-spacing: 28%;
color: var(--color_blanc);
text-shadow: var(--text-shadow);
margin: 0px;
padding: 0;
border-radius: 2px;
}
#camera_wrap_113 .camera_caption_desc,
.camera_caption_desc {
font-size: 5.4rem;
font-weight: 400;
text-align: center;
line-height: 1em;
letter-spacing: 4px;
color: var(--color_blanc);
text-shadow: var(--text-shadow);
text-transform: uppercase;
}
/* @_Grp SlideShow Accueil (FIN) =================================================== */
/* @_Grp Maincontent ===================================================== */
/* @_Grp Maincontent (FIN) =============================================== */
/* @_Grp Blog de Catégories ========================================================== */
/* @_Grp Blog de Catégories (FIN) ==================================================== */
/* @_Grp Article ========================================================== */
.page__header {
position: relative;
padding: 0;
margin: 4em auto 2em;
}
.article .tags.list-inline {
display: flex;
justify-content: space-around;
}
.btn.btn-sm.btn-info {
background-color: var(--color_main);
font-size: 1.4rem;
min-width: 140px;
border-radius: 5px;
}
.article .tags.list-inline .btn.btn-sm.btn-info {
background-color: var(--color_main);
font-size: 1.4rem;
min-width: 140px;
border-radius: 5px;
}
.article .tags.list-inline .btn.btn-sm.btn-info:hover { background-color: var(--color_gris-fonce); }
.tck-article-title {
position: relative;
background-color: var(--color_main);/* #e17a26;*/
color: #fff;
}
.tck-article-title::after,
.page-title-section::after {
content: '';
position: absolute;
bottom: -70px;
left: 0;
right: 0;
height: 70px;
background: url(/images/_Design/page-shadow.png) no-repeat;
background-position: center bottom;
z-index: 0;
}
/* @_Grp Article (FIN) ==================================================== */
/* @_Grp Section =================================================== */
/* @_Grp pg_Reves_Réalisés ========================================= */
.tpl__slideshow .tck-module-title {
font-size: 1.8rem;
letter-spacing: 3px;
}
/*.pg_reves-realises .maincontent > .inner { */
.maincontent > .inner {
width: auto;
max-width: 1280px;
margin: 0 auto;
}
.pg_reves-realises.view-category .maincontent > .inner {
background-color: var(--color_blanc);
padding: 2em;
}
body { background-color: var(--color_gris-blanc);}
.page__header + .article.le_Reve { margin-top: 10rem; }
.page__header,
.pg_reves-realises .page__header {
position: fixed;
top: 127px;
left: 0;
right: 0;
margin: 4em auto 0;
padding: 0;
border-bottom: 1px #ce5606 solid;
transition: all 0.2s ease-in-out;
z-index: 1000;
}
.page__header .u-heading-1 {
max-width: 1280px;
margin: 0 auto;
transition: all 0.2s ease-in-out;
}
.headerMain--reduced + #wrapper .page__header {
top: -30px;
transition: all 0.2s ease-in-out;
}
.page__header,
.page__header .u-heading-1 {
background-color: var(--color_main);
color: var(--color_blanc);
transition: all 0.2s ease-in-out;
}
.u-heading-1 .field-value {
display: block;
font-size: 3.8rem;
font-weight: 500;
text-align: center;
}
.headerMain--reduced + #wrapper .page__header .u-heading-1 {
font-size: 2.6rem;
padding: 0.1em 0;
transition: all 0.2s ease-in-out;
}
.article.le_Reve {
max-width: 1280px;
margin: 21px auto;
background-color: #fff;
padding: 50px;
border-radius: 10px;
}
/* @_Grp pg_Reves_Réalisés (FIN) =================================== */
/* @_Grp Section (FIN) ============================================= */
/* @_Grp Faire un Don =================================================== */
.faire-un-don__intro { margin-top: 15px; }
.faire-un-don { text-align: center; }
.faire-un-don.faire-un-don__chiffres {
color: var(--color_main);
color: var(var(--color_gris-fonce));
font-weight: 600;
font-size: 6.5rem;
background-color: transparent;
padding: 0.6em 1.3em;
padding-bottom: 0;
}
.faire-un-don.faire-un-don__texte span.br { display: block; }
.u-flex-item.hello-asso__item { flex-basis: 33%; }
.u-flex-item.hello-asso__item:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.u-flex-item.hello-asso__item .u-heading-3 {
font-size: 2.8rem;
font-weight: bold;
line-height: 1.4em;
letter-spacing: 4px;
color: var(--color_titles);
padding-top: 4em;
padding-bottom: 2em;
}
.btn.hello-asso__btn {
background-color: var(--color_gris-clair);
width: 92%;
margin: 0 auto;
}
.btn.hello-asso__btn:hover {
background-color: var(--color_gris-fonce);
color: va(--color_blanc);
border: 1px var(--color_gris-fonce);
}
.u-flex-item.hello-asso__item figure { width: 100%; }
.hello-asso__btn-link {
width: 100%;
display: block;
height: 100%;
padding: 1em;
}
.hello-asso__image {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
/* @_Grp Faire un Don (FIN) ============================================= */
/* **************************
* com_content -body view-category layout-blog no-task pg_reves-realises itemid-171 pageid-9 ltr
* com_content -body view-article layout-blog no-task pg_reves-realises itemid-171 pageid-11 ltr
*****************************
*/
/* @_Grp Rêves Réalisés ========================================================== */
.cat-reves-realise .u-flex-container { gap: 20px; }
.cat-reves-realise .u-flex-item:first-child ,
.cat-reves-realise .u-flex-item:first-child {
flex-basis: 46%;
max-width: 50%;
flex-grow: 0;
}
.cat-reves-realise .u-flex-item:last-child { padding-right: 1em; }
.cat-reves-realise .u-flex-item:last-child { padding-left: 1em; }
.cat-reves-realise .u-flex-item img {
display: block;
width: 100%;
}
/* ce pg_reves-realises est dans le bloc d'article TCK-ARTICLE */
.pg_reves-realises.tpl__article-fields {
margin-top: 180px;
transition: all 0.4s ease-in-out;
}
.headerMain--reduced + #wrapper .pg_reves-realises.tpl__article-fields {
margin-top: 20px;
transition: all 0.2s ease-in-out;
}
/* Bloc des Rêves dans la catégorie (menu Rêves Réalmisés) */
.blog-Reve__container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
.blog-item.tck-article {
position: relative;
margin-bottom: 20px;
}
.blog-Reve__container .item-content {
display: block;
position: relative;
}
.blog-Reve__container .readmore {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
border: none;
}
.blog-Reve__container .readmore a.btn.btn-secondary {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
text-indent: -9990px;
margin: 0 auto;
padding: 0;
border: none;
overflow: hidden;
}
.blog-Reve__container .readmore a.btn.btn-secondary:focus,
.blog-Reve__container .readmore a.btn.btn-secondary:active {
border: none;
box-shadow: none;
}
.blog-Reve__container .tck-article-body { display: block; }
.artcile__intro {
display: block;
padding: 0;
}
/* =========================== */
/* Card Personne ============= */
.blog-Reve__container .card_filtre {
position: relative;
max-width: 190px;
}
.blog-Reve__container .blog-item{
display: block;
max-width: 360px;
padding: 0.5em 0.5em 0.5em 0.5em;
border: 1px #dbdada solid;
border-radius: 6px;
box-shadow: 0px 4px 4px -2px rgba(100, 100, 122, 0.2);
transform: scale(1) rotateZ(0deg);
transform-origin: 20% 50%;
transition: all 0.2s ease-in-out;
}
.blog-Reve__container .blog-item:hover{
transform: scale(1.08) rotateZ(-2deg);
box-shadow: 0px 6px 9px 0px rgba(100, 100, 122, 0.4);
transition: all 0.2s ease-in-out;
}
figure[data-wf-figure].carte-personne,
.carte-personne {
position: relative;
width: 100%;
margin: 0;
display: block;
margin-block: initial;
margin-inline: initial;
}
.carte-personne__link {
display: block;
padding: 0;
}
.carte-personne__image {
display: block;
/* image pour éviter l'affichage de l'attribut ALT */
font-size: 1.2rem;
font-weight: 100;
color: var(--color_gris-clair);
width: 100%;
border-radius: 5px;
}
/* figure[data-wf-figure] figcaption.carte-personne__caption,*/
.carte-personne__caption {
display: block;
position: relative;
top: 0;
color: var(--color_gris-moyen);
text-align: center;
width: 100%;
height: 100%;
transition: all 0.2s ease-in-out;
}
.carte-personne__heading .field-value.reve__valeur {
font-size: 1.8rem;
font-weight: 600;
color: var(--color_main);
letter-spacing: normal;
}
.carte-personne__heading { padding: 0; }
a.btn-carte-personne__link {
display: block;
background-color: transparent;
color: var(--color_gris-noir);
font-size: 1.9rem;
max-width: 200px;
margin: 0 auto;
padding: 20px 0;
transition: all 0.2s ease-in-out;
}
.carte-personne:hover a.btn-carte-personne__link {
color: var(--color_gris-noir);
transition: all 0.2s ease-in-out;
}
/* Formulaire FILTRE */
.menu-filtres {
margin-top: 30px;
padding: 0;
cursor: pointer;
}
.menu-filtres__barre-outil{ border-bottom: 1px var(--color_gris-clair) solid; }
.menu-filtres.hover .menu-filtres__barre-outil,
.menu-filtres:hover .menu-filtres__barre-outil{
background-color: var(--color_gris-clair);
border-bottom: 1px var(--color_gris-clair) solid;
}
.filtre__heading a,
.menu-filtres .menu-filtre__heading {
display: block;
font-size: 1.6rem;
color: var(--color_gris-moyen);
text-align: right;
padding: 10px 50px 10px 50px;
}
.menu-filtres__action {
position: relative;
display: block;
text-align: right;
font-size: 1.6rem;
text-decoration: none;
color: var(--color_gris-fonce);
padding: 0;
}
.menu-filtres__barre-outil:hover .menu-filtres__action { text-decoration: none; }
.menu-filtres__action::after,
.menu-filtres__action::after {
--size: 37px;
position: absolute;
top: -50%;
right: -50px;
content: " ";
background-image: url(/images/_Design/pin_plus.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
width: var(--size);
height: var(--size);
}
.menu-filtres.hover .menu-filtres__action::after,
.menu-filtres:hover .menu-filtres__action::after { background-image: url(/images/_Design/pin_moins.png); }
.btn.btn-menu-filtres--openclose {
float: right;
background-color: transparent;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: var(--color_gris-fonce);
line-height: 1.3em;
--size: 20px;
width: var(--size);
height: var(--size);
margin: 5px 5px 0 5px;
padding: 0;
border-radius: 50%;
border: 0px #dedede solid;
}
.menu-filtres .formRow {
display: flex;
justify-content: space-around;
padding: 12px 15px;
}
.menu-filtres__inner {
display: block;
border-radius: 0 0 12px 12px;
padding: 0;
border: 1px var(--color_gris-clair) solid;
transition: all 0.2s ease-in-out;
}
.menu-filtres .formBody {
display: flex;
flex-direction: column;
}
.menu-filtres.hover .menu-filtres__inner,
.menu-filtres:hover .menu-filtres__inner {
height: auto;
opacity: 1;
transition: all 0.2s ease-in-out;
}
.section--open,
.section--close,
article,
.reve-article{
--border-section: 1px var(--color_gris-clair) solid;
--border-radius: 30px;
--espace_Haut: 5em;
--espace_Bas: 2em;
}
article section {
position: relative;
background-color: var(--color_blanc);
margin: 0;
padding: 3em 2em;
border:var(--border-section);
border-radius:0;
}
.section--open{
margin-top: var(--espace_Haut);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom: 2px var(--color_main) solid;
}
.section--middle {
border-bottom: 2px var(--color_main) solid;
}
.section--close{
border-bottom: none;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.article .u-heading-2{
text-align: left;
color: var(--color_main);
font-size: 3rem;
font-weight: 600;
}
.article .u-heading-2::after,
.article .u-heading-2::before { display: none; };
.presentation {
display: flex;
justify-content: left;
flex-wrap: wrap;
}
section.presentation {
padding-top: 1em;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
section.galerie,
section.video-reve {
border-radius: 0;
}
section.toile{
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom: none;
border-bottom:var(--border-section);
}
.toile .u-flex-item:first-child p {
width: 70% !important;
margin: 0 40px 0 auto;
}
section.comment-reve,
section.partenaires,
section.autres-infos,
section.etiquettes{
border:var(--border-section);
margin-top: var(--espace_Haut);
}
.reve-article section::after {
--side: 22px;
content: "";
position: absolute;
bottom: -13px;
left: 50%;
background-color: var(--color_blanc);
width: var(--side);
height: var(--side);
border: 2px var(--color_main) solid;
border-top: none;
border-left: none;
border-radius: 2px;
transform: translateX(-50%) rotateZ(45deg);
z-index: 50;
}
.reve-article section.toile::after,
.reve-article section.comment-reve::after,
.reve-article section.partenaires::after,
.reve-article section.autres-infos::after,
.reve-article section.etiquettes::after{ display:none; }
.presentation__Description ul,
.presentation__Description li {
margin-left: 0;
}
.presentation__header { flex-basis: 100%; }
.presentation__header .u-heading-2 { padding-bottom: 0; }
.presentation .presentation__inner {
display: flex;
justify-content: center;
}
.presentation__inner {
padding: 1em 0 0 0;
}
.presentation__image {
flex-basis: 40%;
min-width: 250px;
padding: 32px 10px 10px 10px;
}
.presentation__Description {
flex-basis: 60%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px 25px 10px 0;
}
.presentation__figure,
.presentation__image figure {
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 0;
}
.presentation__image figure img {
width: 100%;
display: block;
border: 1px #bbb solid;
padding: 1em 1em 3em 1em;
border-radius: 4px;
}
.reve__valeur.reve-portrait__image { display: block; }
.presentation__inner .description {
padding-left: 20px;
}
.presentation__Description .reve {
padding: 0px 0px 0 0px;
border-top: 3px var(--color_main) solid;
}
.presentation__inner .description li {
margin-left: 0px;
padding-left: 20px;
}
.aligncenter.size-large { text-align: center; }
.galerie .field-value {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.inner.galerie__inner {
display: flex;
justify-content: space-around;
padding: 3em 1em;
flex-wrap: wrap;
}
.galerie__item-container {
flex-basis: 24%;
padding: 0.5em;
margin: 5px;
border: 1px var(--color_gris-clair) solid;
box-shadow: 0px 4px 4px -2px rgba(100, 100, 122, 0.2);
transform: scale(1);
transition: all 0.2s ease-in-out;
}
.galerie__item-container:hover {
box-shadow: 0px 5px 5px 0px rgba(100, 100, 122, 0.4);
transform: scale(1.05);
transition: all 0.2s ease-in-out;
}
.toile__legende {
margin-bottom: 3em;
border-bottom: 1px var(--color_main) solid;
}
.comment-reve .comment-reve__item {
border-left: 9px var(--color_main) solid;
flex-basis: 50%;
background-color: var(--color_gris-blanc);
max-width: 600px;
padding: 1em 0.5em;
}
section.toile .u-flex-item{ flex-basis: 48%; }
section.toile .u-flex-item:first-child { padding-right: 0.5em; }
section.toile .u-flex-item:last-child { padding-left: 0.5em; }
.toile__image-container {
width: 100%;
padding: 0 2em;
}
.toile__image-container .galerie__item-figure {
display: block;
margin: 0 auto;
}
/* @_Grp Rêves Réalisés (FIN) ==================================================== */
/* @_Grp Les Toiles [page] =================================================== */
.toiles-galerie__container.u-flex-container { justify-content: space-around; }
.toiles-galerie__item.u-flex-item {
display: flex;
flex-basis: 30%;
list-style: none;
max-width: 540px;
margin: 5px;
overflow: hidden;
}
.toiles-galerie__item figure {
position: relative;
display: block;
margin: 0;
overflow: hidden;
}
.toiles-galerie__link {
display: block;
height: 100%;
}
.toiles-galerie__item .toiles-galerie__caption,
.toiles-galerie__item figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
text-align: center;
background-color: rgba(0,0,0,0.5);
color: var(--color_blanc);
transform: translateY(150%);
transition: all 0.2s ease-in-out;
}
.toiles-galerie__item:hover .toiles-galerie__caption,
.toiles-galerie__item:hover figcaption {
transform: translateY(0%);
transition: all 0.2s ease-in-out;
}
.toiles-galerie__caption-heading {
color: var(--color_blanc);
font-size: 2.2 rem;
}
.toiles-galerie__item p {
color: var(--color_blanc);
padding: 0 0.5em 1em 0.5em;
font-size: 1.6rem;
letter-spacing: 1px;
text-align: center;
}
.toiles .u-float--left { margin: 0 50px 20px 0; }
/* @_Grp Les Toiles [page] (FIN) ============================================= */
/* @_Grp Partenaires =================================================== */
#tpl__partenaires {
background-color: var(--color_blanc);
padding: 50px 0;
}
.swiper-container {
background-color: var(--color_blanc);
padding: 40px;
}
.swiper-pagination.swiper-pagination-bullets {
bottom: 0px;
padding: 5px;
}
.partenaire--flex-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.partenaire--flex-item p {
text-align: center;
width: 100%;
}
.partenaire--flex-item a {
display: block;
background-color: var(--color_gris-clair);
width: 70%;
min-width: 300px;
margin: 0 auto;
padding: 1em;
border-radius: 10px;
}
.partenaire--flex-item:first-child a{
background-color: transparent;
width: 100%;
min-width: 300px;
}
.partenaire--flex-item a:hover {
background-color: var(--color_main);
}
.partenaire--flex-item:first-child a:hover{ background-color: var(--color_gris-clair); }
.u-flex-item.partenaire--flex-item a img{
display: block;
margin: 0 auto;
}
.partenaire--flex { padding: 20px 0; }
/* @_Grp Partenaires (FIN) ============================================= */
/* @_Grp Autres Infos =================================================== */
.autres-infos .u-flex-container { gap: 1.3em; }
.autres-infos .u-flex-item {
flex-basis: 46%;
flex-shrink: 1;
min-width: 300px;
padding: 1em;
}
/* @_Grp Autres Infos (FIN) ============================================= */
/* @_Grp Faire un Don =================================================== */
.wp-block-quote {
background-color: var(--color_blanc);
padding: 5em 3em;
text-align: justify;
}
.wp-block-quote p{
text-align: justify;
}
.faire-un-don__intro .u-heading-2 {
text-align: left;
}
.faire-un-don__intro--flex.u-flex-container {
display: flex;
}
.faire-un-don__intro--flex .u-flex-item {
flex-basis: 25%;
padding: 5px;
}
.faire-un-don__intro--flex.u-flex-container .u-flex-item {
background-color: var(--color_gris-clair);
margin: 4px;
}
/* @_Grp Faire un Don (FIN) ============================================= */
/* @_Grp Temoignage =================================================== */
#tpl__temoignage {
position: relative;
background-image: url(/images/_Design/background/bg_balloon_temoignage.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position-y: center;
min-height: 550px;
padding: 70px 0 55px;
padding: 0;
}
#tpl__temoignage h2::before,
#tpl__temoignage h2::after{
content: "";
display: none;
text-align: left;
color:var(--color_blanc);
}
.tpl__temoignage {
background-color: rgba(86,82,82,0.7);
width: 100%;
margin: 0;
padding: 0;
max-width: initial;
}
.tpl__temoignage *{
color: var(--color_blanc);
}
.temoignage__header-container .section-header p {
font-size: 1.6rem;
text-align: center;
}
/*
.pbck_testimonial_text {
position: relative;
background-color: rgba(0,0,0,0.2);
margin: 45px;
border-radius: 55px;
padding: 50px 80px;
}
*/
/* OVERRIDE Voir si je le garde... */
/*
.pbck_testimonial_text::before {
float: none;
position: absolute;
top: 51px;
left: 30px;
content: open-quote;
font-family: helvetica;
font-size: 4em;
color: #ccc;
vertical-align: -0.4em;
line-height: 0.1em;
margin-right: 0.25em;
}
*/
.pbck_testimonial .pbck_testimonial_author {
position: relative;
top: 0;
}
.pbck_testimonial_author_inner {
display: flex;
justify-content: start;
align-items: center;
width: 60%;
margin: 0 auto;
padding: 0.8em;
}
.pbck_testimonial_author_avatar {
--dimensions: 140px;
position: relative;
width: var(--dimensions);
height: var(--dimensions);
border: 4px var(--color_gris-blanc) solid;
border-radius: 50%;
overflow: hidden;
}
.pbck_testimonial_author_infos {
float: none;
margin-left: 3em;
}
.pbck_testimonial_author_name {
font-size: 1.2em;
font-weight: 600;
}
.pbck_testimonial_author_status { font-size: 0.9em; }
.pbck_testimonial_author_url a:link,
.pbck_testimonial_author_url a:visited {
font-size: 22px;
color: var(--color_main);
}
.pbck_testimonial_author_url a:active,
.pbck_testimonial_author_url a:focus {
color: var(--color_link);
}
/* Témoignages =============================================== */
[data-customclass="temoignage__content"] .pbck_testimonial,
.temoignage__content .pbck_testimonial{ position: relative;}
[data-customclass="temoignage__content"] .pbck_testimonial_text::before,
.temoignage__content .pbck_testimonial_text::before {
content: "";
display: block;
position: absolute;
top:100%;
right: 0;
left: 18%;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 15px solid var(--color_blanc);
}
[data-customclass="temoignage__content"] .author-description p::before,
[data-customclass="temoignage__content"] .author-description p::after,
.temoignage__content .author-description p::before,
.temoignage__content .author-description p::after {
position: relative;
font-family: FontAwesome;
font-size: 2.8rem;
line-height: 0.1em;
color: #e17a26;
}
[data-customclass="temoignage__content"] .author-description p::before,
.temoignage__content .author-description p::before {
content: '\f10d';
top: 0px;
margin-right: 0.80em;
vertical-align: 0.8em;
}
[data-customclass="temoignage__content"] .author-description p::after,
.temoignage__content .author-description p::after {
content: '\f10e';
bottom: 0px;
margin-left: 0.80em;
vertical-align: -0.8em;
}
[data-customclass="temoignage__content"] .pbck_testimonial_text,
.temoignage__content .pbck_testimonial_text {
position: relative;
background-color: var(--color_blanc);
color: #000;
width: 90%;
margin: 40px auto;
border-radius: 15px;
}
[data-customclass="temoignage__content"] .pbck_testimonial_text p,
.temoignage__content .pbck_testimonial_text p{ color:var(--color_gris-noir); }
[data-customclass="temoignage__content"] .author-description p,
.author-description p { text-align: center; }
/* @_Grp Temoignage (FIN) ============================================= */
/* @_Grp Gallery ========================================================== */
.gallery__container--flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}
.gallery__item {
min-width: 360px;
flex: 1 1 30%;
width: auto;
max-width: 50%;
padding: 0.5em;
}
/* @_Grp Gallery (FIN) ==================================================== */
/* @_Grp Galerie Rêve =================================================== */
.mdl__mnu-filtre .nav-item {
margin-left: 0;
padding-left: 2px;
z-index: 500;
}
.mdl__mnu-filtre .nav-item:hover{
background-color: var(--color_gris-clair);
}
.mdl__mnu-filtre .nav-item a {
display: block;
text-align: right;
font-size: 1.2rem;
letter-spacing: normal;
width: 100%;
}
.menu-filtres .mnu-filtre__menu {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.menu-filtres .mnu-filtre__menu .nav-item {
flex-basis: calc(20% - 4px);
min-width: 200px;
padding: 0;
margin: 0;
}
.menu-filtres .mnu-filtre__menu .nav-item.item-185,
.menu-filtres .mnu-filtre__menu .nav-item.item-203 {
flex-basis: calc(50% - 4px);
margin: 0 0 4px 0;
}
.menu-filtres .mnu-filtre__menu .nav-item:nth-child(3) { margin-right: 2px; }
.menu-filtres .mnu-filtre__menu .nav-item:nth-child(4) { margin-right: 2px; }
.menu-filtres .mnu-filtre__menu .nav-item:nth-child(5) { margin-right: 2px; }
.menu-filtres .mnu-filtre__menu .nav-item:nth-child(6) { margin-right: 2px; }
.menu-filtres .mnu-filtre__menu .nav-item:nth-child(7) { margin-right: 0; }
.menu-filtres .mnu-filtre__menu a {
display: block;
background-color: var(--color_gris-clair);
text-align: center;
padding: 1em;
}
.menu-filtres .mnu-filtre__menu a:hover {
background-color: var(--color_gris-fonce);
color: var(--color_blanc);
}
.tags__boutons-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 5px 5px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(0%);
transition: all 0.2s;
}
.tag__item {
flex-basis: 9%;
/* background-color: var(--color_gris-clair); */
/* color: var(--color_gris-fonce); */
/* max-width: 110px; */
font-size: 14px;
font-weight: 400;
text-align: center;
letter-spacing: normal;
margin: 0 1px 2px 0;
padding: 5px;
}
/* @_Grp Galerie Rêve (FIN) ============================================= */
/* @_Grp Menu-Filtre =================================================== */
/* SUB-MENU */
.pg_reves-realises #tpl__slideshow {
position: fixed;
left: 0;
top: 300px;
transition: all 0.2s ease-in-out;
background-color: #fff;
padding: 0 0 25px 0;
width: 200px;
border-radius: 0 0 10px 0;
z-index: 500;
}
body.pg_reves-realises .headerMain--reduced + #wrapper #tpl__slideshow {
top: 85px;
transform: translateX(-50%);
transition: all 0.2s ease-in-out;
}
.headerMain--reduced + #wrapper .page__header
.pg_reves-realises #tpl__slideshow:hover {
transform: translateX(0%);
transition: all 0.2s ease-in-out;
}
.mnu-filtre__heading.tck-module-title {
font-size: 1.3rem;
background-color: #595959;
}
/* @_Grp Menu-Filtre (FIN) ============================================= */
/* @_Grp Flash INFO =================================================== */
/* MASQUER LES CHAMPS dans l'affichage INTRO */
.view-category.pg_reves-realises .fields-container { display: none; }
.view-category.pg_reves-realises .tpl__action,
.view-category.pg_reves-realises .tpl__action{ display: none; }
.view-article.pg_reves-realises .tpl__action{ display: block;}
.mdl_Flash-Info_Reves .newsflash {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/* Fields */
.description label {
/* font-weight: bold; */
color: var(--color_gris-fonce);
display: inline-block;
width: 220px;
}
.field-value, .field-suffix {
display: inline-block;
font-weight: bold;
padding: 0;
}
/* A MODIFIER */
.field-value.toile-du-reve__valeur {
text-align: center;
display: block;
max-width: 380px;
margin: ;
}
.field-value.reve-card__prenom-valeur { padding: 0; }
/* @_Grp Flash INFO (FIN) ============================================= */
/* @_Grp Contact ========================================================== */
/* @_Grp Contact (FIN) ==================================================== */
/* @_Grp Formulaire ====================================================== */
.contact-form__container {
max-width: 1024px;
margin: 0 auto;
width: 90%;
}
.contact_Form h4 {
color: var(--color_gris-fonce);
color: var(--color_main);
font-size: 1.6rem;
font-weight: 500;
padding: 0.5em 0 0 0;
}
.contact_Form p,
.contact_Form li,
.contact_Form em,
.contact_Form a,
.form-check-label,
.form-control {
font-size: 1.4rem;
padding-bottom: 5px;
}
.form-group { margin-bottom: 0.2rem !important; }
.form-check .form-check-input[type="checkbox"] {
border-radius: .25em;
margin-top: 0.35em;
border-radius: 0;
border-radius: 0; /* .25em; */
}
.rsform-block-text-info-champs-obligatoire { font-size: 1.2rem; }
/* @_Grp Formulaire (FIN) ================================================ */
/* @_Grp Aide =================================================== */
.aide__article li { margin-bottom: 20px; }
.aide__article img {
border: 1px #ccc solid;
padding: 5px;
}
.aide__header {
background-color: #fff;
padding: 10px 0;
margin-bottom: 30px;
}
.pt-egal {
border: 2px var(--color_gris-moyen) dashed;
margin: 0;
}
.aide__header .pt-egal ~ h4 {
padding: 10px 10px;
color: var(--color_gris-moyen);
}
.aide__texte {
background-color: var(--color_blanc);
padding: 20px;
}
.vignette--small img {
display: block;
width: 100px;
transition: all 3s ease-in-out;
}
/*
.vignette--small:hover img {
width: auto;
transition: all 3s ease-in-out;}
*/
/* @_Grp Aide (FIN) ============================================= */
/* @_Grp Pied de page ==================================================== */
/* @_Grp Pied de page (FIN) ============================================== */
/* @_Grp Footer ========================================================== */
#wrapper__footer {
background-color: var(--color_gris-fonce);
transition: all 0.3s ease-in;
}
.wrapper__footer *{
color: #fff;
}
.wrapper__footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 0.5fr;
grid-gap: 3%;
gap: 3%;
grid-template-areas:
"coordonnees faire_un_don reseau_sociaux"
"menu-mentions menu-mentions menu-mentions";
}
#tpl__footer-adress { grid-area: coordonnees; }
#tpl__footer-dons { grid-area: faire_un_don; }
#tpl__footer-reseau { grid-area: reseau_sociaux; }
#tpl__footer-mentions { grid-area: menu-mentions; }
.wrapper__footer h3 {
font-size: 15px;
}
.tpl__footer-mentions .nav {
display: flex;
justify-content: center;
margin: 0;
}
.tpl__footer-mentions .nav .nav-item{ margin: 0; }
.wrapper__footer a:link{
color: var(--color_gris-moyen);
font-size: 13px;
}
.wrapper__footer a:hover{
text-decoration: underline;
color: var(--color_blanc);
}
.tpl__footer-reseau .nav {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 180px;
}
.tpl__footer-reseau .nav .nav-item {
display: block;
margin: 0;
flex-basis: 30%;
min-height: 50px;
}
.social__link {
--size: 45px;
display: block;
background-color: transparent;
background-image: url(/images/_Design/icons/facebook_white.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
width: var(--size);
height: var(--size);
margin: 0px;
}
.social__link.social__facebook{ background-image: url(/images/_Design/icons/facebook_white.png); }
.social__link.social__facebook:hover{ background-image: url(/images/_Design/icons/facebook.png); }
.social__link.social__x{ background-image: url(/images/_Design/icons/x_white.png); }
.social__link.social__x:hover{ background-image: url(/images/_Design/icons/x.png); }
.social__link.social__youtube{ background-image: url(/images/_Design/icons/youtube_white.png); }
.social__link.social__youtube:hover{ background-image: url(/images/_Design/icons/youtube_hover.png); }
.social__link.social__instagram{ background-image: url(/images/_Design/icons/instagram_white.png); }
.social__link.social__instagram:hover{ background-image: url(/images/_Design/icons/instagram.png); }
.footer-menu__Instagram {
width: 40px;
height: 40px;
background-image: url(/images/_Design/instagram-noir.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
margin: 0 auto;
}
/* @_Grp Footer (FIN) =============================================