/* Theme Name: Divi Enfant par bubulgum.comm' Site Name: Alter Start Food Description: Theme enfant du theme Divi, pour le site https://alterstartfood.ch/ Author: bubulgum.comm' Author URI: https://bubulgum.com/ Template: Divi Version: 1.0 Date: 20.02.22 Dernière mise à jour: 16.08.22 */ /*** ---------------------------------------------------------------------------------------------------------- ***/ /***** ---------------------------------- STUCTURE DE BASE D'UN THEME ENFANT DIVI -------------------------- *****/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /* ----------------------- CONTENU ----------------------- */ /***** 0) réglages généraux *****/ /*** 1) personnalisation du background-color du site ***/ /*** 2) personnalisation des textes (font, color, etc), liens, exposants, listes, etc ***/ /*** 3) personnalisation des boutons + flèches galeries ***/ /*** 4) réglages des "Sections standard" et des "Lignes" ***/ /*** 5) réglages du HEADER ***/ /*** 6) réglages du FOOTER ***/ /***** 7) réglages de la page HOME *****/ /***** 8) réglages des pages WOOCOMMERCE *****/ /*** 8.1) réglages page LUNCH BOX ***/ /*** 8.1.1. réglages du module Accordéon (contenant les menus du mois) ***/ /*** 8.1.2. réglages des block MENUS DU JOUR ***/ /*** 8.1.3. réglages des block ADDTOCARD ***/ /*** 8.1.4. widget "panier" qui s'affiche en haut à gauche quand on commence à mettre des trucs dedans ***/ /*** 8.2) réglages page Evènements - Cours de cuisine publics ***/ /*** 8.3) réglages des pages Produits (menus, cours de cuisine, épicerie) ***/ /*** 8.4) réglages généraux des pages woocommerce (Mon compte, Panier, Validation de la commande) ***/ /***** 9) réglages des AUTRES PAGES *****/ /*** 9.1) réglages page Les Chefs ***/ /*** 9.2) réglages des Articles - Les Chefs ***/ /*** 9.3) réglages pages Nos Partenaires & Nos Références ***/ /*** 9.4) réglages pages Faire un don ***/ /*** 9.5) réglages pages Traiteur ***/ /*** 9.6) réglages page Evènements ***/ /*** 9.7) réglages page Epicerie ***/ /***** 10) réglages d'éléments spéciaux (utilisés sur plusieurs pages) *****/ /*** 10.1) inversion ordre des colonnes "paires" (smartphone uniquement) ***/ /*** 10.2) réglages galeries images (carrées) ***/ /*** 10.3) réglages des modules Bascule ***/ /*** 10.4) réglages des bandeaux d'en-tête (img + titre Page) - parallaxe ***/ /*** 10.5) réglages modules textes "1 colonne", textes centrés, textes avec br, etc ***/ /*** 10.6) réglages des row "3 colonnes" ***/ /*** 10.7) réglages des row "2 colonnes" avec galerie ***/ /*** 10.8) réglages des formulaires ***/ /* ----------------------- CONTENU ----------------------- */ @font-face { font-family: 'Gotham'; src: url('webfont/Gotham-Book.woff2') format('woff2'), url('webfont/Gotham-Book.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('webfont/Gotham-Bold.woff2') format('woff2'), url('webfont/Gotham-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'futura_ltlight'; src: url('webfont/futura_lt_light-webfont.woff2') format('woff2'), url('webfont/futura_lt_light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'libre_baskervilleitalic'; src: url('webfont/librebaskerville-italic-webfont.woff2') format('woff2'), url('webfont/librebaskerville-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /*** CSS reset ***/ * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; } abbr[title] {text-decoration: none;} /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /***** ---------------------------------------- 0) réglages généraux ---------------------------------------- *****/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ------------------------------------------------------------ ***/ /*** 1) personnalisation du background-color du site ***/ /*** ------------------------------------------------------------ ***/ .et_pb_section { background-color: transparent !important; /* pour annuler la valeur par défaut de Divi (qui est #fff) */ } body { background-color: #fdfdfd !important; /* gris très clair */ font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; /* peacock */ font-size: 1rem !important; font-weight: normal !important; line-height: 1.4em !important; letter-spacing: 0.04em; } /*** ------------------------------------------------------------ ***/ /*** 2) personnalisation des textes (font, color, etc), liens, exposants, listes, etc ***/ /*** ------------------------------------------------------------ ***/ html { font-family: Gotham, Helvetica, Arial, sans-serif !important; font-size: 100%; /* équivaut à 1rem = 16px */ } h4, h5, h6 { font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; /* peacock */ font-weight: normal; line-height: 1.25em !important; letter-spacing: 0.04em; padding-bottom: 0.5em !important; } h2, h3 { font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #faae39 !important; /* orange ASF */ font-weight: 500 !important; line-height: 0.75em !important; letter-spacing:-0.04em; padding-bottom: 0px !important; text-transform: uppercase; } #events_passes h4 { text-align: center; } h1 {font-size: 2rem !important;} h2 {font-size: 3.25rem !important;} h3 {font-size: 2rem !important;} h3.petit {font-size: 1.25rem !important;} h4 {font-size: 1.25rem !important;} h5 {font-size: 1.5rem !important;} h6 {font-size: 1rem !important;} p { color: #0b4655 !important; /* peacock */ font-size: 1rem !important; font-weight: normal !important; line-height: 1.4em !important; letter-spacing: 0em; } /** réglages tailles textes pour tablette **/ @media only screen and (max-width: 980px) { /* tablette */ h1 {font-size: 2rem !important;} h2 {font-size: 2.5rem !important;} h3 {font-size: 1.75rem !important;} h3.petit {font-size: 1.25rem !important;} h4 {font-size: 1.25rem !important;} h5 {font-size: 1.5rem !important;} h6 {font-size: 1rem !important;} p {font-size: 1rem !important;} h2, h3 {line-height: 1.2em !important;} h2 br {display: none;} } /** réglages tailles textes pour mobile **/ @media only screen and (max-width: 767px) { /* smartphone */ h1 {font-size: 1.75rem !important;} h2 {font-size: 1.5rem !important;} h3 {font-size: 1.25rem !important;} h3.petit {font-size: 1rem !important;} h4 {font-size: 1rem !important;} h5 {font-size: 1.125rem !important;} h6 {font-size: 0.875rem !important;} p {font-size: 0.875rem !important;} h1, h4, h5, h6 {padding-bottom: 10px !important;} } .home-intro.et_pb_module { padding: 0 !important; margin-top: 0 !important; margin-bottom: 2rem !important; } .home-intro.et_pb_divider {height: 3px;} .home-intro.et_pb_divider::before { content: ""; width: 10%; height: 1px; border-top: 3px solid #faae39 !important; /* orange ASF */ position: absolute; left: 50%; transform: translatex(-50%); top: 0; z-index: 10; } @media only screen and (max-width: 767px) { /* smartphone */ .et_pb_text { max-width: 100% !important; } } /* à insérer dans html:   */ span.espace-fine-insecable { letter-spacing: 0.3em !important; } /** réglages des liens **/ a { color: #faae39 !important; /* orange */ text-decoration: none !important; } p>a:hover { color: #faae39 !important; /* orange */ text-decoration: underline !important; } a.lien_discret { color: #0b4655 !important; /* peacock */ text-decoration: none !important; } a.lien_discret:hover { color: #0b4655 !important; /* peacock */ text-decoration: none !important; opacity: 0.5 !important; } /** réglages des exposants **/ sup, sub { position: relative; height: 0; vertical-align: baseline; } sup { /** exposant - genre 1er, 2e, 3e, etc */ bottom: 0.5em; /** la distance entre la baseline et l'exposant */ font-size: 65%; /** la taille du texte = 65% du texte parent */ } /** réglages des listes à puces (ul) / numéros (ol) **/ .entry-content ul, .entry-summary ul, .comment-content ul, /* listes à puces */ .entry-content ol, .entry-summary ol, .comment-content ol { /* listes à numéros */ font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; /* peacock */ font-size: 1rem !important; font-weight: normal!important; line-height: 1.4em !important; letter-spacing: 0em; } @media only screen and (max-width: 767px) { /* smartphone */ .entry-content ul, .entry-summary ul, .comment-content ul, /* listes à puces */ .entry-content ol, .entry-summary ol, .comment-content ol { /* listes à numéros */ font-size: 0.875rem !important; } } .entry-content ul, .entry-summary ul, .comment-content ul {list-style-position: outside;} .entry-content ol, .entry-summary ol, .comment-content ol {list-style-position: inside;} .entry-content li, /* li = réglages lignes des listes (à puces + à numéros) */ .entry-summary li, .comment-content li { padding-bottom: 0.5em !important; } /*** ------------------------------------------------------------ ***/ /*** 3) personnalisation des boutons + flèches galeries ***/ /*** ------------------------------------------------------------ ***/ /** réglage de la couleur de fond du "Bouton retour en haut de page" **/ .et_pb_scroll_top.et-pb-icon { background: rgba(11,70,85,0.75); /* peacock à 75% d'opacité */ } /*** réglages des boutons Divi + bouton "Ajouter au panier" etc ***/ .et_pb_button, /* boutons "Divi" */ input#wpmtst_submit_testimonial, /* boutons formulaire "Laisser un avis" */ button.single_add_to_cart_button, /* boutons "Ajouter au panier" */ .et_pb_widget.woocommerce.widget_shopping_cart a.button.wc-forward:not(.checkout), /* boutons "Voir le panier" (widget page Lunch Box) */ .woocommerce .button, /* boutons woocommerce */ .woocommerce button:not(.mfp-arrow):not(.mfp-close):not(.frm_button_submit):not(.thmaf-acnt-dflt):not(.pswp__button), .order-again a.button { display: inline-block !important; float: right; font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #fdfdfd !important; /* gris très clair */ font-size: 1.25rem !important; line-height: 1em !important; text-transform: uppercase !important; text-align: center !important; font-weight: normal; letter-spacing: 0.04em; padding: 0.3em 0.6em !important; background-color: #faae39 !important; /* orange ASF */ border: 2px solid #faae39 !important; /* orange ASF */ border-radius: 30px !important; } body.home .et_pb_button, #lunch_box_intro_page .et_pb_button { float: none !important; } .woocommerce td.actions .button, /* bouton dans tableau Mes commandes */ .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], /* bouton Mettre à jour */ a.woocommerce-button.button.view { /* bouton dans tableau Mes commandes */ float: none; color: #487480 !important; /* peacock à 75% */ font-size: 1rem !important; line-height: 1.7em !important; text-transform: none !important; background-color: transparent !important; border: 2px solid #487480 !important; /* peacock à 75% */ border-radius: 0px !important; margin: 10px 0 !important; } input#wpmtst_submit_testimonial, /* boutons formulaire "Laisser un avis" */ button.single_add_to_cart_button { /* boutons "Ajouter au panier" */ font-size: 1.125rem !important; margin-right: 2.5rem; margin-bottom: 2rem; } .et_pb_widget.woocommerce.widget_shopping_cart a.button.wc-forward:not(.checkout) { /* boutons "Voir le panier" (widget page Lunch Box) */ font-size: 1.125rem !important; margin: 2rem 0 !important; padding: 0.8em !important; } .woocommerce-MyAccount-content button.button, body.page-id-28859 button[type="submit"] { margin-top: 2rem !important; } p.woocommerce-mini-cart__buttons.buttons {text-align: right;} /* produits épicerie : les boutons de la lightbox qui s'affiche quand on clique sur la loupe de l'image du produit */ .woocommerce button.pswp__button { display: inline-block !important; color: #fdfdfd !important; /* gris très clair */ font-size: 2rem !important; line-height: 1em !important; } .pswp__caption__center {display: none;} /* nom de l'image dans la lightbox : masquer */ @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_button, input#wpmtst_submit_testimonial { font-size: 1.125rem !important; } button.single_add_to_cart_button, .et_pb_widget.woocommerce.widget_shopping_cart a.button.wc-forward:not(.checkout) { font-size: 1rem !important; } } /* hover des boutons */ .et_pb_button:hover, input#wpmtst_submit_testimonial:hover, button.single_add_to_cart_button:hover, .woocommerce .button:hover, .woocommerce button:not(.mfp-arrow):not(.mfp-close):not(.frm_button_submit):not(.thmaf-acnt-dflt):not(.pswp__button):hover, .order-again a.button:hover { color: #faae39 !important; /* orange ASF */ background-color: transparent !important; text-decoration: none !important; } .woocommerce td.actions .button:hover, .woocommerce button.button:disabled:hover, .woocommerce button.button:disabled[disabled]:hover, a.woocommerce-button.button.view:hover { color: #fdfdfd !important; /* gris très clair */ background-color: #487480 !important; /* peacock à 75% */ } /** boutons "lien page suivante" (pages Programme ASF) : ajouter picto à gauche du texte du bouton **/ #bouton_lien_page_suivante.et_pb_button:before { font-family: ETmodules !important; content: "E" !important; line-height: inherit; font-size: 1.25em !important; font-weight: 400 !important; color: inherit !important; opacity: 1; margin-left: -1.15em; right: auto; display: inline-block; } /** padding gauche et droite pour que le contenu soit centré dans le bouton **/ #bouton_lien_page_suivante.et_pb_button { padding-right: 1em !important; padding-left: 2.3em !important; /* 1em padding-right + 1.15em margin-left du before... arrondi à 2.3em */ } /* supprimer le picto à droite du texte du bouton */ .et_pb_button::after, .button::after { display: none !important; } /* et du coup supprimer le padding-right (qui laissait la place pour le picto) */ .et_pb_button:hover, .et_pb_module .et_pb_button:hover, button::hover { border: 2px solid transparent; padding: 0.3em 0.6em; /* mêmes réglages que en "pas hover" */ } /* margin-top avant les boutons "Divi" */ .et_pb_button { margin-top: 2rem !important; } /* mettre une largeur minimum de 200px aux boutons "Divi" */ .et_pb_button_module_wrapper > a { min-width: 200px !important; } /** réglages boutons "Landing Page" page Home **/ .bouton_landingPage.et_pb_button { margin: 0 !important; min-width: 160px !important; } .bouton_landingPage.bouton_lunchbox { margin: 1.75rem 1.5rem 1.25rem 0 !important; } .bouton_landingPage.bouton_traiteur { margin: 0 auto !important; } .header-content p {padding-bottom:0.5em;} @media only screen and (max-width: 767px) { /* smartphone */ .et_pb_fullscreen .et_pb_fullwidth_header_container { width: 90%; } .bouton_landingPage.bouton_lunchbox, .bouton_landingPage.bouton_traiteur { margin: 1rem auto 0 auto !important; min-width: initial !important; } .bouton_landingPage.bouton_traiteur { margin-top: 1.75rem !important; margin-bottom: 0.5rem !important; } } /** boutons "landing page" page Home... on inverse (fond transp / fond orange en hover) #landing_home .et_pb_button { color: #faae39 !important; /* orange ASF background-color: transparent !important; border: 2px solid #faae39 !important; /* orange ASF } #landing_home .et_pb_button:hover { color: #fdfdfd !important; /* gris très clair background-color: #faae39 !important; /* orange ASF text-decoration: none !important; } **/ /** réglages boutons "services" page Home + "Commander" widget Panier... on inverse (fond transp / fond orange en hover) **/ #Services .et_pb_button, .et_pb_widget.woocommerce.widget_shopping_cart a.button.wc-forward:not(.checkout) { color: #faae39 !important; /* orange ASF */ background-color: transparent !important; border: 2px solid #faae39 !important; /* orange ASF */ } #Services .et_pb_button:hover, .et_pb_widget.woocommerce.widget_shopping_cart a.button.wc-forward:not(.checkout):hover { color: #fdfdfd !important; /* gris très clair */ background-color: #faae39 !important; /* orange ASF */ text-decoration: none !important; } /* bouton "envoyer" du formulaire Laisser un avis: aligné à droite */ .form-field.wpmtst-submit label { float: right !important; margin-top: 1rem !important; } /** réglage de la couleur des flèches, points, etc (module Galerie) pour passer d'une image à l'autre **/ /* flèches */ .et-pb-arrow-prev::before, .et-pb-arrow-next::before { color: #487480 !important; /* peacock à 75% */ } /* points */ .et-pb-controllers a { background-color: #487480 !important; /* peacock à 75% */ } /* point image active */ .et-pb-controllers a.et-pb-active-control { background-color: #0b4655 !important; /* peacock ASF */ } /* lightbox: flèches et croix */ .mfp-arrow-left .mfp-a, .mfp-arrow-left::after, .mfp-arrow-right .mfp-a, .mfp-arrow-right::after, .mfp-image-holder .mfp-close { color: #aabec4 !important; /* peacock à 35% */ } /* lightbox: masquer le nom de l'image */ .mfp-title {display: none;} /*** ------------------------------------------------------------ ***/ /*** 4) réglages des "Sections standard" et des "Lignes" ***/ /*** ------------------------------------------------------------ ***/ /** réglages des padding des "Sections plein écran" **/ .et_pb_fullwidth_section:first-child { /* pour que la grande image colle au header */ padding: 0px !important; } .et_pb_fullwidth_section:first-child .et_pb_row:first-child { /* pour que la grande image colle au header */ padding: 0px !important; } /** réglages des padding des "Sections standard" **/ @media only screen and (min-width: 981px) { /* bureau */ #en_tete_page.et_pb_section { padding: 5rem 0px !important; } .et_pb_section { padding: 5rem 0px !important; } .et_pb_row.ligne_citation { margin-top: 6rem !important; margin-bottom: 6rem !important; } } @media only screen and (max-width: 980px) { /* tablette */ #en_tete_page.et_pb_section { padding: 3rem 0px !important; } .et_pb_section { padding: 3rem 0px !important; } .et_pb_row.ligne_citation { margin-top: 4rem !important; margin-bottom: 4rem !important; } } @media only screen and (max-width: 767px) { /* smartphone */ #en_tete_page.et_pb_section { padding: 2.5rem 0px !important; } .et_pb_section { padding: 3.5rem 0px !important; } .et_pb_row.ligne_citation { margin-top: 3rem !important; margin-bottom: 3rem !important; } } /** dernière section de la page: 96px (6rem) de margin-bottom, pour aérer **/ .et_pb_section:last-child { margin-bottom: 6rem !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_section:last-child { margin-bottom: 3rem !important; } } .et_pb_row, #main-footer .container { width: 90% !important; max-width: 1080px !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_column .et_pb_row_inner, .et_pb_row, body.single-product.et-db #et-boc .et-l .et_pb_row { padding: 30px 0 0px 0; } } /*** ------------------------------------------------------------ ***/ /*** 5) réglages du HEADER ***/ /*** ------------------------------------------------------------ ***/ /** ça gérait la ligne gris claire en dessous du header - enlevée par rapport au thème original (voir ligne 1241 fichier style.dev_divi_parent.css) **/ #main-header { -moz-box-shadow: 0 0px 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0px 0 rgba(0, 0, 0, 0); box-shadow: 0 0px 0 rgba(0, 0, 0, 0); background-color: #fdfdfd !important; /* gris très clair = même couleur que le fond du site */ padding-bottom: 0.5rem !important; } #top-header { background-color: #fdfdfd !important; /* gris très clair = même couleur que le fond du site */ } /** background-color du header quand on scroll (et qu'il devient plus petit) **/ .et-fixed-header#main-header, .et-fixed-header#main-header .nav li ul, .et-fixed-header .et-search-form, .et-fixed-header#top-header { background-color: #fdfdfd !important; /* gris très clair = même couleur que le fond du site */ } /** font-size du menu **/ #top-menu li { font-size: 1.25rem !important; line-height: 1em !important; font-weight: normal !important; } /** couleur du texte du menu **/ #top-menu a, .et_mobile_menu li a { color: #0b4655 !important; /* peacock */ } /** lien menu actif --> couleur + bordure en dessous **/ #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a, .bottom-nav li.current-menu-item > a { opacity: 0.5 !important; /* peacock à 50% */ } /** réglages du sous-menu déroulant – bloc liste "ul" **/ .nav li ul { visibility: hidden; z-index: 9999; width: 220px !important; /* largeur du bloc liste "ul" */ border-top: 3px solid #faae39 !important; /* orange ASF */ /* couleur de la barre en dessous du menu "ouvert" */ opacity: 0; background-color: rgba(255,255,255,0.95) !important; /* blanc à 75% */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.1); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.1); box-shadow: 0 2px 5px rgba(0,0,0,.1); } .et_header_style_left #et-top-navigation nav > ul > li > a {padding-bottom:0.5rem !important;} #top-menu li ul.sub-menu li { display: block; } /** réglages du sous-menu déroulant – lien (sous-menu) à l'intérieur de la ligne "li" **/ #top-menu li li a { width: auto !important; /* pour que tout le texte reste sur 1 ligne */ padding: 6px 10px !important; } /** réglages du sous-menu déroulant 2e niveau – bloc liste "ul li ul" **/ .nav li li ul { left: 220px !important; /* = décalé de la largeur du sous-menu 1er niveau */ top: -13px; padding: 10px 0; } /** couleur des 3 lignes "menu burger" **/ .mobile_menu_bar::before { color: #faae39 !important; /* orange ASF */ } /** couleur de la barre en dessous du menu burger "ouvert" **/ ul#mobile_menu.et_mobile_menu { border-top: 3px solid #faae39 !important; /* orange ASF */ } #main-header a { color: #0b4655 !important; /* peacock */ } #top-menu-nav > ul > li > a:hover { text-decoration: none !important; } /*** ------------------------------------------------------------ ***/ /*** 6) réglages du FOOTER ***/ /*** ------------------------------------------------------------ ***/ #main-footer { background-color: rgba(11,70,85,0.75); /* peacock à 75% d'opacité */ } /** affichage bureau: padding-top = 2% // affichage tablette et smartphone: padding-top = 6% (valeur d'origine) **/ @media only screen and (min-width: 981px) { /* bureau */ #footer-widgets { padding: 2% 0 0; } } @media only screen and (min-width: 768px) { /* bureau et tablette */ .et_pb_gutters3.et_pb_footer_columns3 .footer-widget { width: 33.33% !important; margin-right: 0 !important; } } et_pb_gutters3.et_pb_footer_columns3 .footer-widget .et_pb_widget { float: none !important; } /** réglages des textes et des liens **/ #footer-widgets p, #footer-widgets a, #footer-info a.link-footer, span.texte-footer-bottom { color: #fdfdfd !important; /* gris très clair */ font-size: 0.875rem !important; line-height: 1.25em !important; text-decoration: none !important; font-weight: normal !important; text-align: center !important; } #footer-widgets a:hover, #footer-info a.link-footer:hover, #footer-info a:hover { text-decoration: underline !important; color: #fdfdfd !important; /* gris très clair */ } #footer-widgets h4, #footer-widgets h4 a { color: #fdfdfd !important; /* gris très clair */ font-size: 1.25rem !important; line-height: 1em !important; padding-bottom: 1em !important; text-align: center !important; } a.reseaux-sociaux-footer img { height: 2.5rem !important; width: auto !important; margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .widget_custom_html { width: 100% !important; } #footer-widgets .et_pb_widget { float: none; /* au lieu de float left, ainsi le texte est centré dans chaque colonne de widget */ } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_widget { /* largeur du bloc widget à 100%, ainsi la ligne hr prend bien la valeur width: 100% */ width: 100% !important; } #footer-widgets p, #footer-widgets a, #footer-info a.link-footer, span.texte-footer-bottom { /* on le re-spécifie, sinon ça a tendance à mettre les liens dans la "couleur du thème" */ text-decoration: none !important; color: #fdfdfd !important; /* gris très clair */ } } @media only screen and (max-width: 767px) { /* smartphone */ #footer-widgets .footer-widget:nth-child(n), .footer-widget .fwidget { margin-bottom: 3rem !important; } #footer-widgets .footer-widget:last-child { margin-bottom: 0 !important; } } .et-search-form, .et_mobile_menu, .footer-widget li::before, .nav li ul { border-color: #fdfdfd !important; /* gris très clair */ } /** réglages de la barre inférieure et de son contenu **/ /* background-color = transparent (pour que ça soit la même couleur que le footer) */ #footer-bottom { background-color: rgba(0,0,0,0) !important; } /* les crédits qui sont dans le footer-bottom */ #footer-info { float: none !important; padding-bottom: 1% !important; color: #fdfdfd !important; /* gris très clair */ text-align: center !important; } /* pour annuler les valeurs par défaut de DIVI */ #footer-bottom a { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } /* réglages du texte contenu dans le footer-info */ span.texte-footer-bottom { color: #fdfdfd !important; /* gris très clair */ font-size: 0.875rem !important; font-weight: normal!important; line-height: 1.25em !important; } /* pour annuler la valeur par défaut de DIVI (opacity: 0.7) */ #footer-info a:hover { opacity: 1; } /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /***** ------------------------------------ 7) réglages de la page HOME ------------------------------------ *****/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** réglages de la landing page ***/ body.home #et-main-area { position: absolute; top: 0; width: 100vw; } body.home .et_pb_fullscreen .et_pb_fullwidth_header_container { height: 100vh; z-index: 100000000000 !important; } @media only screen and (min-width: 981px) { /* bureau */ body.home #main-header, body.home #top-header { opacity: 0; } /** background-color du header quand on scroll (et qu'il devient plus petit) **/ body.home .et-fixed-header#main-header, body.home .et-fixed-header#main-header .nav li ul, body.home .et-fixed-header .et-search-form, body.home .et-fixed-header#top-header { opacity: 1 !important; background-color: #fdfdfd !important; /* gris très clair = même couleur que le fond du site */ } } #landing_home .et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content { max-width: 525px; } #landing_home .et_pb_fullwidth_header .header-content { padding: 3rem !important; text-align: center; background-color: rgba(253,253,253,0.92) !important; /* gris très clair à 92% d'opacité */ } #landing_home .et_pb_fullwidth_header .header-content p { font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; /* peacock */ font-size: 1.5rem !important; font-weight: normal !important; line-height: 1.25em !important; text-align: center; letter-spacing: 0.04em; } span.landing_page_lien { padding-top: 1.5rem; display: block; } @media only screen and (max-width: 767px) { /* smartphone */ #landing_home .et_pb_fullwidth_header .header-content { padding: 1rem !important; } #landing_home .et_pb_fullwidth_header .header-content p { font-size: 1.25rem !important; } span.landing_page_lien { padding-top: 1rem; } } /*** réglages de la section "citation" ***/ .ligne_citation { padding: 0 !important; } .ligne_citation .et_pb_column { padding: 27px 0; } .ligne_citation .et_pb_module { margin-bottom: 0; } .et_pb_divider#borderTop, .et_pb_divider#borderBottom { position: absolute; right: 0; } .et_pb_divider#borderTop { top: 0; width: 20%; } .et_pb_divider#borderBottom { bottom: 0; width: 45%; } .et_pb_divider#borderTop::before, .et_pb_divider#borderBottom::before { border-top: solid 3px #487480; position: absolute; right: 0; } .et_pb_divider#borderTop::before { top: 0; } .et_pb_divider#borderBottom::before { bottom: 0; } .et_pb_row.ligne_citation { border-right: solid 3px #487480; } .picto_citation { position: absolute; right: -5%; bottom: -60%; width: 200px; height: auto; z-index: 99999; } p.citation { font-family: libre_baskervilleitalic, serif; font-size: 1.7rem !important; color: #487480 !important; /* peacock à 75% */ letter-spacing:0.04em; font-weight: 500 !important; line-height: 1.25em !important; padding-right: 5px !important; } p.citation span { font-family: Gotham, Helvetica, Arial, sans-serif !important; font-size: 1rem !important; font-weight: normal !important; } /** réglages tailles textes pour mobile **/ @media only screen and (max-width: 980px) { /* tablette */ p.citation {font-size: 1.5rem !important;} .picto_citation {width: 150px; bottom: -30%;} } /** réglages tailles textes pour mobile **/ @media only screen and (max-width: 767px) { /* smartphone */ p.citation {font-size: 1.25rem !important;margin-bottom: 0.5em !important;} p.citation span {font-size: 0.875rem !important;} .picto_citation {width: 100px; bottom: -12.5%;} } /*** réglages de la section Services ***/ #Services .et_pb_module.et_pb_image { max-width: 350px; height: auto; } /*** réglages de la section News ***/ .esf_insta_load_more_btns_wrap .esf_insta_feed_btns_holder .esf-insta-follow-btn { background: #487480 !important; /* peacock à 75% */ color: #fdfdfd !important; /* gris très clair */ font-size: 1rem !important; margin: 3rem auto 0 auto !important; text-decoration: none; display: inline-block; line-height: 40px; padding: 0 20px; border-radius: 30px !important; } .esf_insta_load_more_btns_wrap .esf_insta_feed_btns_holder .esf-insta-follow-btn:hover { background: rgba(72,116,128,0.75) !important; /* peacock à 75% */ } /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /***** ---------------------------------- 8) réglages des pages WOOCOMMERCE ---------------------------------- *****/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ------------------------------------------------------------ ***/ /*** 8.1) réglages page LUNCH BOX ***/ /*** ------------------------------------------------------------ ***/ /*** page LUNCH BOX > sections avec row "menus" : masquer en front-end (sections créées uniquement pour les modifs mensuelles par ASF) ***/ body.page-id-28873 #section_menu_Ls_Gv_sem_1_5 {display: none !important;} /*** FONCTIONS JS: display none sur les blocs menus et addtocard (Ls+Ge), puis on les affiche au besoin (module code dans la page LUNCH BOX) ***/ #block_menus_lausanne, #block_menus_geneve { display: none; } /*** blocks MENUS et ADDTOCARD : forcer l'affichage en 2 colonnes sur tablette ***/ @media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */ .row_2col_sur_tablette .et_pb_column { width: 47.25% !important; margin-right: 5.5% !important; } } #section_widget_panier.et_pb_section, #section_widget_panier.et_pb_section .et_pb_row, #section_code_js.et_pb_section, #section_code_js.et_pb_section .et_pb_row { padding: 0 !important; } #lunch_box_intro_page.Ls_Ge .et_pb_row { padding-top: 0 !important; } #lunch_box_intro_page.Ls_Ge .et_pb_row { padding: 0 !important; } h3.slogan_lunch_box { font-size: 1.85rem !important; line-height: 1.2em !important; text-transform: none !important; } @media only screen and (max-width: 980px) { /* tablette */ h3.slogan_lunch_box {font-size: 1.75rem !important;} } @media only screen and (max-width: 767px) { /* smartphone */ h3.slogan_lunch_box {font-size: 1.25rem !important;} } /*** ***/ /*** 8.1.1. réglages du module Accordéon (contenant les menus du mois) ***/ /*** ***/ /** margin à 0 et largeur 100% pour ces rows qui sont "à l'intérieur" du module Accordéon **/ .et_pb_accordion .et_pb_toggle_content .row_2col_sur_tablette { margin: 0 !important; width: 100% !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_accordion .et_pb_toggle_content .row_2col_sur_tablette {padding: 0 !important;} } /** supprimer le border autour des onglets du module Accordéon **/ .et_pb_accordion .et_pb_toggle { border: none !important; } /** et à la place, mettre un border sur le titre (date) + display inline pour réduire la taille de la div à la taille du contenu **/ .et_pb_accordion .et_pb_toggle h5.et_pb_toggle_title { border: 2px solid transparent !important; /* border transparent sur les titres "fermés" */ display: inline-block; padding: 0.5em !important; border-radius: 3px; } /* border peacock sur les titres "ouverts" */ .et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { border: 2px solid #0b4655 !important; /* peacock */ } /** changer le picto indiquant qu'on peut ouvrir/fermer ces onglets **/ /* supprimer le before (par défaut dans Divi) */ .et_pb_accordion .et_pb_toggle .et_pb_toggle_title::before { display: none; } /* et créer et configurer un after (idem musicoss) */ .et_pb_accordion .et_pb_toggle .et_pb_toggle_title::after { font-family: ETmodules !important; position: relative; top: 50%; transform: translateY(-50%); left: 0.25em; color: inherit !important; font-size: 1em !important; content: "\33"; } .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::after { content: "\32"; } @media only screen and (max-width: 767px) { /* smartphone */ .et_pb_accordion h5.et_pb_toggle_title {font-size:1.25rem !important;} } /*** ***/ /*** 8.1.2. réglages des block MENUS DU JOUR ***/ /*** ***/ /** réglages de la photo du cuistot **/ .et_pb_blurb .et_pb_image_wrap { display: block; margin: auto; border-radius: 24px; } .et_pb_main_blurb_image { display: inline-block; margin-bottom: 0; line-height: 0; max-width: 100%; position: absolute; top: -20px; left: 0; width: 48px; } /** réglages du titre du menu **/ .et_pb_blurb_container h4 { padding-left: 60px; padding-bottom: 12px !important; } /** réglages de la description du menu **/ .et_pb_blurb_content { margin-top: 28px; /* pour compenser le "top: -20px;" */ } /*** ***/ /*** 8.1.3. réglages des block ADDTOCARD ***/ /*** ***/ /** blocs addtocard (Ls+Ge) : largeur imposée + centrer les block sur la page **/ @media only screen and (min-width: 768px) { /* bureau et tablette */ #block_addtocard_lausanne table, #block_addtocard_lausanne .single_variation_wrap, #block_addtocard_geneve table, #block_addtocard_geneve .single_variation_wrap { margin: 0 auto; width: 648px; } } /* sur smartphone: ajouter des margin : au dessus du bloc addtocard + en dessous du bouton Ajouter au panier, pour aérer */ @media only screen and (max-width: 767px) { /* smartphone */ #block_addtocard_lausanne, #block_addtocard_geneve {margin-top: 30px !important;} #block_addtocard_lausanne .single_add_to_cart_button, #block_addtocard_geneve .single_add_to_cart_button {margin-bottom: 30px !important;} } /** réglages des cellules des tableaux (choix des options) **/ .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { border: 0; padding: 0 !important; } .entry-content tr th.label label, form.variations_form.cart th.label label, /* pages Produit */ .entry-content tr td.value select, .woocommerce div.product form.cart .variations td select { font-family: Gotham, Helvetica, Arial, sans-serif !important; font-size: 1rem !important; line-height: 1.25em !important; font-weight: normal !important; color: #0b4655 !important; /* peacock */ padding: 9px 20px 9px 0 !important; margin-right: 0; vertical-align: baseline; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { line-height: 1.25em !important; vertical-align: baseline; } .entry-content tr th.label {width: 25% !important;} .entry-content tr th.label label, form.variations_form.cart th.label label { /* pages Produit */ font-weight: 700 !important; } /* lien "effacer" sous la liste des variations */ a.reset_variations { float: right !important; margin-top: 1em; } /** modifs des réglages par défaut de woo-commerce **/ .woocommerce div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity, .woocommerce #content div.product form.cart div.quantity, .woocommerce-page #content div.product form.cart div.quantity { margin: 0 !important; width: 25%; /* idem que th.label */ overflow: hidden; } .woocommerce div.product form.cart .button, .et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .button { vertical-align: top; } @media only screen and (max-width: 767px) { /* smartphone */ .entry-content tr th.label, .woocommerce div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity {width: 35% !important;} } /** réglages des textes complémentaires, affichés une fois les options choisies **/ .woocommerce-variation-description p { margin-top: 2rem; margin-bottom: 2rem !important; color: #487480 !important; /* peacock à 75% */ font-style: italic; } /** réglages du prix, affiché une fois les options choisies **/ .et_pb_wc_add_to_cart span.woocommerce-Price-amount bdi { color: #faae39 !important; /* orange ASF */ font-size: 1.75rem; } .et-db #et-boc .et-l .et_pb_wc_price p.price { font-size: 1.5rem !important; } .woocommerce-variation-price { margin-bottom: 2rem; } /** réglages champs où choisir les quantités **/ .et_pb_wc_add_to_cart .quantity input.qty, .woocommerce-variation-add-to-cart .quantity input.qty { /* pages Produit */ border: 0.25px solid #0b4655 !important; /* peacock */ width: 5em; max-width: 6em; height: 2.5em; font-size: 1.25rem; margin-right: 3rem; } .woocommerce-variation-add-to-cart .quantity, button.single_add_to_cart_button.button { float: none !important; display: inline-block !important; margin-bottom: 2rem; /* pour ajouter de l'espace entre le AddToCart et le bloc suivant (menu semaine suivante) */ } input.text, input.title, input[type="email"], input[type="password"], input[type="tel"], input[type="text"], select, textarea { background-color: #fdfdfd !important; /* gris très clair */ border: 1px solid #bbb; padding: 0.5em !important; color: #0b4655 !important; /* peacock */ } /** liens "voir le panier" **/ a.added_to_cart.wc-forward { display: block; } a.added_to_cart.wc-forward::before { font-family: ETmodules !important; position: relative; top: 0.1em; left: -0.5em; margin-top: -.5em; color: inherit; font-size: 1em !important; content: "\e07a"; } /** affichage du stock restant /// à MODIFIER dans les OPTIONS WOO-COMMERCE /// puis SUPPRIMER le CSS ci-dessous **/ .woocommerce-variation-availability { display: none; } /** forcer l'affichage du module Add-to-card quand le produit est Out of Stock (par défaut: display=none) */ .et_pb_wc_add_to_cart.et_pb_hide_stock .stock { display: block !important; } /** changer le message d'erreur des produits Out of Stock **/ p.stock.out-of-stock {color: transparent !important;} p.stock.out-of-stock:before { content: "Les réservations sont terminées pour ces menus... Merci de choisir une autre date 👨🏻‍🍳"; font-family: inherit; color: #faae39 !important; /* orange ASF */ font-size: inherit; font-weight: 700; line-height: inherit; } /*** ***/ /*** 8.1.4. widget "panier" qui s'affiche en haut à gauche quand on commence à mettre des trucs dedans ***/ /*** ***/ .et_pb_widget.woocommerce.widget_shopping_cart { width: 360px !important; margin: 0 !important; position: fixed !important; top: 120px !important; right: 0 !important; background-color: #fdfdfd !important; /* gris très clair */ border-top: 3px solid #faae39 !important; /* orange ASF */ padding: 0.5rem !important; -moz-box-shadow: 0 0 7px rgba(0,0,0,0.1) !important; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.1) !important; box-shadow: 0 0 7px rgba(0,0,0,0.1) !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_widget.woocommerce.widget_shopping_cart { width: 480px !important; position: relative !important; top: 0 !important; left: 50% !important; transform: translateX(-50%); } } /* supprimer le bouton "Commander" : très important, car la fonction pour empêcher de mélanger des menus Ls et Gn dans le même panier ne fonctionne pas si on zappe l'étape de la page Panier */ .et_pb_widget.woocommerce.widget_shopping_cart a.button.wc-forward.checkout {display: none !important;} /* réglages du bouton "Voir le panier" : voir chapitre 3 réglage des boutons */ p.woocommerce-mini-cart__total.total {text-align: right; margin-right: 0.5em;} /** masquer l'image du produit (inutile! c'est une image générique) **/ img.woocommerce-placeholder, img.attachment-woocommerce_thumbnail {display: none;} /** ajouter des marges autour du bloc variation, pour une meilleure lisibilité **/ dl.variation { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } /* mais supprimer les marges autour de chaque ligne du bloc variation **/ dl.variation span {margin-left:0;margin-bottom: 0 !important;} /** ajouter des marges autour de chaque bloc "produit", pour une meilleure lisibilité **/ .woocommerce-mini-cart-item.mini_cart_item { margin-top: 0.25rem !important; margin-bottom: 0.5rem !important; } /** réglages des textes dans le widget **/ dl.variation span { font-size: 0.875rem !important; } /* "choix du menu" en gras */ span.variation-choixdumenu { font-weight: 700 !important; } /* ajouter un séparateur "//" entre les span "choixdumenu" et "variantes" **/ dl.variation span.variation-variantes:before { content: "//"; font-family: inherit; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin-left: 0.25em; margin-right: 0.35em; } /* ligne "contenant" en display block, pour forcer un retour à la ligne */ span.variation-contenant { display: block !important; } /* et ajouter le libellé "contenant" en before */ span.variation-contenant:before { content: "contenant: "; font-family: inherit; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* font-size des prix */ .widget_shopping_cart span.woocommerce-Price-amount bdi { font-size: 1.125rem !important; } /* réglages des petites croix pour supprimer un produit du panier */ .woocommerce a.remove { color: rgba(11, 70, 85, 0.6) !important; } .woocommerce a.remove:hover { color: #fff !important; background: rgba(11, 70, 85, 0.6) !important; } /*** ------------------------------------------------------------ ***/ /*** 8.2) réglages page Evènements - Cours de cuisine publics ***/ /*** ------------------------------------------------------------ ***/ tr.woopt_set_outofstock td.woocommerce-grouped-product-list-item__quantity {display: none;} #cmd_cours_cuisine.et_pb_wc_add_to_cart.et_pb_hide_stock .stock.out-of-stock { display: initial; } #cours_cuisine_public .et_pb_module { margin-bottom:0; } /** changer le message d'erreur des produits Out of Stock **/ #cours_cuisine_public p.stock.out-of-stock:before { content: "Inscriptions terminées"; } #cmd_cours_cuisine form.cart:after { content: "prix : CHF 120.- par personne"; font-style: italic; } #cmd_cours_cuisine:after { content: "- - - - - "; line-height: 3em !important; } #cours_cuisine_public .row_col_galeries_sur_tablette .et_pb_column:first-child {margin-bottom: 0 !important;} /*** ------------------------------------------------------------ ***/ /*** 8.3) réglages des pages Produits (menus, cours de cuisine, épicerie) ***/ /*** ------------------------------------------------------------ ***/ /*** réglages des éléments principaux: img, titre, tableau des variations, prix, etc ***/ /* réglages de la fourchette de prix (sous la description courte) */ .et-db #et-boc .et-l .et_pb_wc_price p.price { font-size: 1.5rem !important; } /* largeur de la colonne avec les titres de variations */ form.variations_form.cart th.label {width: 25%;} /* idem que th.label */ /* largeur des listes déroulantes */ .woocommerce div.product form.cart .variations select { max-width: 100%; min-width: 100%; display: inline-block; } /*** réglages des éléments dans le module et_pb_wc_description ***/ /* produits "lunch-box": la description est encapsulée dans une row --> on remet la largeur à 100% (au lieu de 90%) */ .et_pb_wc_description .et_pb_module_inner .et_pb_row { width: 100% !important; padding-bottom: 0 !important; } /* et on supprime la max-width (valeur par défaut Divi = 550px) */ .et-db #et-boc .et-l .et_pb_blurb_content { max-width: none; } /* et on supprime les margin-bottom des modules et_pb_blurb */ @media only screen and (min-width: 981px) { /* ordi */ .et_pb_wc_description .et_pb_module_inner .et_pb_row .et_pb_module.et_pb_blurb { margin-bottom: 0 !important; } } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_wc_description .et_pb_module_inner .et_pb_row .et_pb_column.et-last-child .et_pb_module.et_pb_blurb { margin-bottom: 0 !important; } } body.single-product .et_pb_module.et_pb_text.categorie_produit { margin-top: -1rem !important; } body.single-product .et_pb_module.et_pb_divider { margin-bottom: 0 !important; } #section_code_display_none, #section_code_display_none .et_pb_row { padding: 0 !important; } /*** ------------------------------------------------------------ ***/ /*** 8.4) réglages généraux des pages woocommerce (Mon compte, Panier, Validation de la commande) ***/ /*** ------------------------------------------------------------ ***/ /*** réglages des "titres" woocommerce ***/ /* nom produit */ body.archive h2, /* pages produits par catégorie */ #section_woocommerce h2 { /* pages woocommerce */ font-size: 1.25rem !important; line-height: 1.25em !important; padding-bottom: 0.5em !important; } body.archive h3, /* pages produits par catégorie */ #section_woocommerce h3 { /* pages woocommerce */ font-size: 1.125rem !important; line-height: 1.25em !important; padding-bottom: 0.5em !important; } /*** réglages pages Mon compte ***/ /* largeur colonnes menu nav + content */ @media only screen and (min-width: 981px) { /* bureau */ .woocommerce-account .woocommerce-MyAccount-navigation {width: 23%;} .woocommerce-account .woocommerce-MyAccount-content {width: 75%;} } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } .woocommerce-account .woocommerce-MyAccount-content {padding-top: 1rem;} .woocommerce-account .woocommerce-MyAccount-navigation { -webkit-columns: 2 auto; -moz-columns: 2 auto; columns: 2 auto; } } /* menu nav page Mon compte */ body.woocommerce-account nav.woocommerce-MyAccount-navigation a, body.woocommerce-account, body.woocommerce-account p, body.woocommerce-account .address-text { color: #487480 !important; /* peacock à 75% */ } /* liens dans les pages et sous-pages Mon compte */ body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: #487480 !important; /* peacock à 75% */ text-decoration: underline !important; } /* boutons dans les pages et sous-pages Mon compte */ body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button { font-size: 1rem; text-decoration: none !important; } body.woocommerce-account nav.woocommerce-MyAccount-navigation a:hover, body.woocommerce-account .woocommerce-MyAccount-content a:hover { opacity: 0.5 !important; } /** page Mon compte > Mes commandes (liste toutes les commandes) **/ /* bouton "Voir" */ .a.woocommerce-button.button.view { float: left !important; } /* bouton "Annuler" : masquer */ body.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders a.woocommerce-button.cancel {display: none !important;} /* bouton "Payer" */ body.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders a.woocommerce-button.pay { float: right; font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #fdfdfd !important; font-size: 0.875rem !important; line-height: 1em !important; text-transform: none !important; text-align: center !important; font-weight: normal; letter-spacing: 0.04em; padding: 0.3em 0.6em !important; background-color: #faae39 !important; border: 2px solid #faae39 !important; border-radius: 30px !important; transform: translateY(65%) !important; } @media only screen and (max-width: 767px) { /* smartphone */ body.woocommerce-account table.woocommerce-orders-table.woocommerce-MyAccount-orders a.woocommerce-button.pay { float: none !important; transform: none !important; margin-right: 1rem; } } /* margin entre les boutons Précédent/Suivant */ .woocommerce-pagination .woocommerce-button { margin-left: 1rem !important; } /** page Mon compte > Mes commandes > 1 commande **/ /* réglages tableau */ section.woocommerce-order-details {margin-top: 1rem;} /* largeur col 1 */ .woocommerce-table--order-details th:first-child,.woocommerce-table--order-details td:first-child {width: 75% !important;min-width: 220px;} /* smartphone: margin entre adresses billing et shipping */ @media only screen and (max-width: 767px) { /* smartphone */ .woocommerce-column--shipping-address.col-2 {margin-top: 2rem;} } /* textes tableau */ .woocommerce table.shop_table td, .woocommerce-MyAccount-content p mark { font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; font-size: 1rem !important; font-weight: normal !important; line-height: 1.4em !important; letter-spacing: 0.04em; } .woocommerce-MyAccount-content p mark { /* phrase au dessus du tableau: textes "marqués" */ background-color: transparent; font-weight: 700 !important; } @media only screen and (max-width: 767px) { /* smartphone */ .woocommerce table.shop_table td, .woocommerce table.shop_table th, .woocommerce-MyAccount-content p mark {font-size: 0.875rem !important;} } /** page Mon compte > Adresses **/ .thmaf-thslider-box { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: 0; } #thmaf-th-list {width: 100% !important;} .thmaf-divi-acnt .thmaf-thslider-viewport li.thmaf-thslider-item { width: 30% !important; margin: 0 1.25% !important; } @media only screen and (max-width: 767px) { /* smartphone */ .thmaf-divi-acnt .thmaf-thslider-viewport li.thmaf-thslider-item { width: 100% !important; margin: 0 0 2.5rem 0 !important; padding-bottom: 1rem !important; } } .thmaf-adr-box.address-box { font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; font-size: 1rem !important; font-weight: normal !important; line-height: 1.4em !important; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { /* smartphone */ .thmaf-adr-box.address-box {font-size: 0.875rem !important;} } .thmaf-thslider-viewport .complete-aaddress {min-height: 120px;} .thmaf-adr-box.address-box button[type="submit"] { margin: 0 auto 1rem auto !important; width: 100%; font-size: 1rem !important; } @media only screen and (min-width: 768px) { /* bureau et tablette */ .btn-continue.address-wrapper {height: auto;} } .thmaf-adr-box.address-box:hover {box-shadow: none !important;} .thmaf-acnt-adr-footer.acnt-address-footer {border-top: none;} .woocommerce-Addresses address:first-line, .acnt-adrr-text.thmaf-adr-text:first-line {font-weight:700 !important;} /** page Mon compte > Téléchargements + Saved Cards : masquer (ça sert à rien: y aura jamais rien dans Téléchargements, et sans la licence Saferpay Business, on peut toutes façons pas réutiliser les cartes sauvegardées) **/ li.woocommerce-MyAccount-navigation-link--downloads, li.woocommerce-MyAccount-navigation-link--spgw_save_card {display: none !important;} /*** réglages pages Panier + Validation de la commande ***/ /* réglages champs de saisie woocommerce */ .woocommerce .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce #content .quantity input.qty, .woocommerce-page #content .quantity input.qty, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .et_pb_wc_cart_totals .select2-container--default .select2-selection--single, .et_pb_wc_checkout_billing .select2-container--default .select2-selection--single, .et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single, .et-db #et-boc .et-l .et_pb_wc_add_to_cart .quantity input.qty { -webkit-appearance: none; background-color: transparent !important; max-width: 100%; border-radius: 0; border: 1.25px solid #487480 !important; padding: 6px 10px !important; font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; font-size: 1rem !important; font-weight: normal !important; line-height: 1.7em !important; } /* champs de saisie Coupon: margin = pour l'aligner avec les boutons */ .woocommerce-cart table.cart td.actions .coupon .input-text { margin: 10px 10px 10px 0 !important; } /* réglages des champs "textarea" */ textarea#infos_allergies_etc, textarea#order_comments { height: 8rem !important; margin-bottom: 4rem; } /** ajouter une note sous le bloc "Livraison" **/ body.page-id-28858 ul#shipping_method.woocommerce-shipping-methods:after { content: "Si les options de livraison disponibles ne semblent pas adéquates une fois votre adresse de livraison renseignée, n'hésitez pas à rafraichir la page pour les mettre à jour."; font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; /* peacock */ opacity: 65%; font-size: 0.825rem; font-weight: normal !important; letter-spacing: 0.04em; } /* réglages des messages d'alerte */ .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message { color: #0b4655 !important; /* peacock */ font-size: 1rem !important; line-height: 1.7em !important; text-transform: none !important; background-color: transparent !important; border: 2px solid #487480 !important; /* peacock à 75% */ border-radius: 0px !important; } .woocommerce .woocommerce-error a:not(.button), .woocommerce .woocommerce-info a:not(.button), .woocommerce .woocommerce-message a:not(.button) { color: #487480 !important; /* peacock à 75% */ } .woocommerce .woocommerce-error a:hover, .woocommerce .woocommerce-info a:hover, .woocommerce .woocommerce-message a:hover { text-decoration: underline !important; } /* réglages petit texte parlant de l'utilisation des données personnelles */ .woocommerce-terms-and-conditions-wrapper, .woocommerce form #mailpoet_woocommerce_checkout_optin_field.form-row { padding: 0; margin: 0 0 6px; } /* masquer la checkbox "Je voudrais recevoir des e-mails exclusifs avec des réductions et des informations sur le produit (facultatif)" */ #mailpoet_woocommerce_checkout_optin_field {display: none;} /* page Panier - bloc "Total panier" : masquer la liste des choix de mode de livraison */ body.page-id-28857.woocommerce-cart table.shop_table tr.woocommerce-shipping-totals td ul#shipping_method {display: none;} /* page Thank you. Your order has been received : réglages tableau */ body.woocommerce-order-received section.woocommerce-order-details table {width: 100% !important;} body.woocommerce-order-received .woocommerce-table__product-name, tfoot th {width: 50% !important;} table .product-total, tfoot td {width: 50% !important;} body.woocommerce-order-received .woocommerce-thankyou-order-details {margin-top: 1rem;} /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /***** ------------------------------------ 9) réglages des AUTRES PAGES ------------------------------------ *****/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ------------------------------------------------------------ ***/ /*** 9.1) réglages page Les Chefs ***/ /*** ------------------------------------------------------------ ***/ /** réglages du "contenant" de l'image, pour lui imposer de rester toujours carré */ .et_pb_blog_grid_wrapper .et_pb_image_container { background-color: transparent; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ position: relative; /* If you want image inside of it ---> */ } /* ---> If you want image inside of the container */ .et_pb_blog_grid_wrapper .et_pb_blog_grid .et_pb_image_container a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /** réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */ .et_pb_blog_grid_wrapper .et_pb_blog_grid .et_pb_image_container img { min-height: 100% !important; /*height of parent container*/ max-height: 100% !important; /*height of parent container*/ width: auto; /*width of parent container*/ object-fit: cover; border-radius: 50%; shape-outside: circle(); -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); } .et_pb_blog_grid .et_pb_post { border: none; padding: 0; background-color: transparent; word-wrap: break-word; } /** annuler la margin-bottom de l'image (originalement à 30px ***) (voir ligne 7145 fichier style.dev_divi_parent.css), sinon ça fait pas carré */ .et_pb_blog_grid_wrapper .et_pb_post, .et_pb_blog_grid_wrapper .et_pb_post .entry-featured-image-url { margin-bottom: 0px !important; } /** marges autour de ces images (voir ligne 7276 fichier style.dev_divi_parent.css) */ .et_pb_blog_grid_wrapper .et_pb_image_container { margin: -10px 0px 0px; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .et_pb_blog_grid_wrapper .et_pb_image_container { margin: -10px 0px -15px;; } } /* Jhovanny Rojas | Colombie: on remplace la feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image mieux recadrée */ .page-id-29235 #post-29729.et_pb_post .et_pb_image_container { background-image: url("/wp-content/uploads/2022/06/1.3.11-Jhovanny-recadree.jpg") !important; /* Alexandre Sassolas */ background-origin: content-box !important; background-position: bottom !important; background-repeat: no-repeat !important; background-size: 100% !important; border-radius: 50%; shape-outside: circle(); -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); } /* pas besoin de spécifier l'ID du post (.page-id-862 #post-229968.et_pb_post img), on "efface" toutes les feature_image d'un coup */ .page-id-29235 #post-29729.et_pb_post .et_pb_image_container img { opacity: 0 !important; } .et_pb_blog_grid_wrapper h4 { line-height: 1.2em !important; margin-top: 1.5em !important; /* et du coup j'ajoute une marge *** au dessus du titre, pour compenser la margin-bottom de l'image que j'ai mise à 0px à la ligne 549 */ text-align: center !important; } .et_pb_blog_grid_wrapper h4 a { color: #0b4655 !important; /* peacock */ } .et_pb_post p.post-meta { margin-bottom: 0.75rem !important; font-size: 0.875rem !important; } @media only screen and (max-width: 767px) { /* smartphone */ .et_pb_blog_grid_wrapper h4 { font-size: 1.25rem !important; line-height: 1.2em !important; margin-top: 30px !important; } .et_pb_post p.post-meta { font-size: 0.75rem !important; } .et_pb_blog_grid_wrapper .post-content p { font-size: 0.925rem !important; } } /* imposer une hauteur fixe aux blocs de la page Les Chefs, comme ça quelle que soit la longueur du titre de l'Article (qui par défaut décalle tout vers le bas), la "grille" des articles reste toujours bien alignée */ @media only screen and (min-width: 768px) { /* bureau et tablette */ .et_pb_blog_grid .et_pb_post { height: 400px !important; margin-bottom: 5rem !important; } } @media only screen and (max-width: 767px) { /* smartphone */ .et_pb_blog_grid .et_pb_post { height: auto !important; margin-bottom: 5rem !important; } } /*** ------------------------------------------------------------ ***/ /*** 9.2) réglages des Articles - Les Chefs ***/ /*** ------------------------------------------------------------ ***/ .et_pb_pagebuilder_layout.single.et_full_width_page:not(.et-tb-has-body) #main-content .container { width: 100% !important; max-width: 100% !important; padding-top: 0; } .et_pb_post .entry-content { padding-top: 0px !important; } /*** design de l'en-tête des articles (featured img + titre + meta) * source: https://www.elegantthemes.com/blog/divi-resources/divi-post-title-module-designs ***/ @media only screen and (max-width: 980px) { /* tablette et smartphone */ #en_tete_article.et_pb_section { padding: 0px !important; } } /** margin et padding module Titre du post (pour créer le décallage avec la featured img) **/ #en_tete_article.et_pb_section .et_pb_post_title { margin-left: -12.5% !important; padding-top: 3.5vw !important; padding-bottom: 3.5vw !important; padding-left: 20px !important; width: 100% !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ #en_tete_article.et_pb_section .et_pb_post_title { margin-left: 0% !important; padding-left: 0px !important; } } /** réglages titre du post **/ #en_tete_article .et_pb_post_title h2.entry-title { color: #0b4655 !important; /* peacock */ line-height: 1.2em !important; padding-bottom: 10px !important; text-align: left !important; } @media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */ #en_tete_article .et_pb_post_title h2.entry-title { font-size: 2.25rem !important; } } @media only screen and (max-width: 980px) { /* tablette et smartphone */ #en_tete_article .et_pb_post_title h2.entry-title { text-align: center !important; } } /** page Gayaathri Sathasivam | Sri Lanka : réduire la largeur du titre, pour que le "Sri Lanka" passe à la ligne (ordi + smartphone) **/ @media only screen and (min-width: 981px) { /* bureau */ body.postid-29716 #en_tete_article .et_pb_post_title h2.entry-title {padding-right: 2rem;} } @media only screen and (max-width: 767px) { /* smartphone */ body.postid-29716 #en_tete_article .et_pb_post_title h2.entry-title {padding-right: 2rem;} } /** réglages méta du post **/ #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container, #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container a, #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container span, #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container span a { color: rgba(11,70,85,0.75) !important; /* peacock à 75% d'opacité */ text-align: right !important; margin-top: 1rem !important; } @media only screen and (max-width: 767px) { /* smartphone */ #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container, #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container a, #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container span, #en_tete_article .et_pb_post_title .et_pb_title_container .et_pb_title_meta_container span a { font-size: 0.775rem !important; } } /** liens des metas désactivés via JS (module code dans la section en-tête Article) **/ /** CSS: supprimer effet "hover" **/ #en_tete_article .et_pb_post_title .et_pb_title_meta_container a:hover { opacity: 1 !important; } /** module Titre du post : fond dégradé gris très très clair (idem fond site) **/ #en_tete_article .et_pb_post_title { background-image: linear-gradient(180deg,#fdfdfd 0%,rgba(253,253,253,0) 100%) !important; } /** module Titre du post : ligne sous titre (module Séparateur) **/ #en_tete_article .et_pb_divider.separateur-articles::before, body.single-product .et_pb_divider::before { border-top-color: rgba(11,70,85,0.75) !important; /* peacock à 75% d'opacité */ border-top-width: 2px !important; } #en_tete_article .et_pb_divider.separateur-articles { margin-right: 12.5% !important; margin-left: 17.5% !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ #en_tete_article .et_pb_divider.separateur-articles { margin-right: 25% !important; margin-left: 25% !important; } } /** module Bio du post **/ @media only screen and (min-width: 981px) { /* bureau */ #bio_chef { padding-left: 3rem !important; padding-top: 1rem !important; } } #liens_prev_next_articles.et_pb_section { padding: 0 !important; } .et_post_meta_wrapper { display: none; } /*** ------------------------------------------------------------ ***/ /*** 9.3) réglages pages Nos Partenaires & Nos Références ***/ /*** ------------------------------------------------------------ ***/ #logos_partenaires.et_pb_section:not(.etatiques) { padding-top: 0 !important; } .partenaires_textes_add.et_pb_section .et_pb_row:first-child { padding-bottom: 0 !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .partenaires_textes_add.et_pb_section .et_pb_row:last-child, #logos_partenaires.et_pb_section .et_pb_row:not(.titre) { padding-top: 0 !important; } } #logos_partenaires .et_pb_module.et_pb_image a { display: block; width: 100%; text-align: center; } #logos_partenaires .et_pb_image_wrap { height: 100px !important; width: auto !important; display: flex; /* contexte sur le parent */ flex-direction: column; /* direction d'affichage verticale */ justify-content: center; /* alignement vertical */ } #logos_partenaires img { max-height: 100px !important; max-width: 200px !important; width: auto !important; margin: 0 auto !important; } #logos_partenaires .et_pb_module.et_pb_text p { text-align: center; } #logos_partenaires .et_pb_module.et_pb_text p a { color: #487480 !important; /* peacock à 75% */ } #logos_partenaires .et_pb_module.et_pb_text p a:hover { color: #487480 !important; /* peacock à 75% */ } /*** logos, articles de presse : forcer l'affichage en 4 colonnes sur tablette ***/ @media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */ #logos_partenaires .et_pb_row .et_pb_column { width: 20.875%; margin-right: 5.5%; } #logos_partenaires .et_pb_row .et_pb_column:nth-child(4n) { margin-right: 0 !important; } #logos_partenaires .et_pb_row.titre .et_pb_column { width: 100%; } #logos_partenaires img { max-height: 100px !important; max-width: 100% !important; max-width: 200px; width: auto !important; margin: 0 auto !important; } #presse.et_pb_row .et_pb_column:first-child { width: 20.875%; margin-right: 5.5%; } #presse.et_pb_row .et_pb_column:last-child { width: 73.625%; margin-right: 0; } } @media only screen and (max-width: 767px) { /* smartphone */ #logos_partenaires .et_pb_row { padding-bottom: 0; } #logos_partenaires .et_pb_row.titre h3 { text-align: center; } } /*** réglages de témoignages ***/ .temoignages_clients_picto { position: absolute; left: -50px; top: -50px; width: 150px; height: auto; opacity: 0.35; } .temoignages_clients.et_pb_module p { color: #487480 !important; /* peacock à 75% */ } .temoignages_clients.et_pb_module p span.nom { font-size: 0.825rem !important; } .photos_clients.et_pb_module img { width: 150px !important; height: auto; border-radius: 50% !important; shape-outside: circle(); /* border: 3px solid rgba(11,70,85,0.75) !important; */ -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .photos_clients.et_pb_module { text-align: right !important; margin-bottom: 3rem !important; margin-top: -1rem !important; } } /*** ------------------------------------------------------------ ***/ /*** 9.4) réglages pages Faire un don ***/ /*** ------------------------------------------------------------ ***/ img.wp-image-30333 { margin-right: 4rem !important; } @media only screen and (max-width: 767px) { /* smartphone */ img.wp-image-30333 {margin-bottom: 2rem !important;} } /*** ------------------------------------------------------------ ***/ /*** 9.5) réglages pages Traiteur ***/ /*** ------------------------------------------------------------ ***/ @media only screen and (min-width: 768px) { /* ordi et tablette */ .bouton_menus_traiteur_smartphone { display: none !important; } } @media only screen and (max-width: 767px) { /* smartphone */ .bouton_menus_traiteur_ordi { display: none !important; } .et_pb_module.traiteur_liste_puces { margin-bottom: 0px !important; } } /*** ------------------------------------------------------------ ***/ /*** 9.6) réglages page Evènements ***/ /*** ------------------------------------------------------------ ***/ #titre_event_passe p { text-align: center !important; } /*** ------------------------------------------------------------ ***/ /*** 9.7) réglages page Epicerie ***/ /*** ------------------------------------------------------------ ***/ .woocommerce ul.products li.product h2.woocommerce-loop-product__title { color: #0b4655 !important; /* peacock */ padding: .5em 0 !important; margin: 0; font-size: 2em !important; text-align: center; } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { color: #0b4655 !important; /* peacock */ font-size: 1rem !important; font-weight: normal !important; line-height: 1.4em !important; letter-spacing: 0em; text-align: center; } /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /***** ------------------- 10) réglages d'éléments spéciaux (utilisés sur plusieurs pages) ------------------- *****/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ---------------------------------------------------------------------------------------------------------- ***/ /*** ------------------------------------------------------------ ***/ /*** 10.1) inversion ordre des colonnes "paires" (smartphone uniquement) ***/ /*** ------------------------------------------------------------ ***/ /** swap = échanger **/ /** la classe CSS "column-swap" doit être ajoutée dans les Paramétrages de Ligne Module (onglet Avancé) = le bloc qui contient les 2 colonnes! et non dans les Paramétrages de Texte Module ^^ **/ /** la classe CSS "column-swap" doit être ajoutée uniquement dans les colonnes paires (2, 4, 6, etc) ^^ **/ @media only screen and (min-width: 768px) { .column-swap { display: flex; } .column-swap .et_pb_column:first-child { order: 2; margin-right: 0 !important; } .column-swap .et_pb_column:last-child { order: 1; margin-right: 5.5% !important; } } /*** ------------------------------------------------------------ ***/ /*** 10.2) réglages galeries images (carrées) ***/ /*** ------------------------------------------------------------ ***/ /*image gallery item aspect ratio square 1:1 * source: https://www.peeayecreative.com/change-the-divi-gallery-image-aspect-ratio/ */ .et_pb_module.et_pb_gallery.et_pb_slider .et_pb_gallery_image { padding-top: 100%; display: block; } .et_pb_module.et_pb_gallery.et_pb_slider .et_pb_gallery_item img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } /*** ------------------------------------------------------------ ***/ /*** 10.3) réglages des modules Bascule ***/ /*** ------------------------------------------------------------ ***/ /** réglages du padding des modules **/ .et_pb_toggle { padding: 0px !important; margin-bottom: 2.25% !important; } /** réglages de la couleur du texte "descriptif" dans les modules **/ .et_pb_toggle_content p { color: #0b4655 !important; /* peacock */ } .et_pb_toggle > h5:hover { color: #487480 !important; /* peacock à 75% */ font-weight: normal!important; } .et_pb_toggle_title::before { font-size: 20px; /* taille du petit picto "+" (taille d'origine = 16px) */ } /*** ------------------------------------------------------------ ***/ /*** 10.4) réglages des bandeaux d'en-tête (img + titre Page) - parallaxe ***/ /*** ------------------------------------------------------------ ***/ /** ajouter 5rem de margin-top au bandeau d'en-tête, pour créer de l'espace après le menu nav et augmenter l'effet de parallaxe **/ @media only screen and (min-width: 981px) { /* bureau */ #en_tete_page { margin-top: 2.5rem; } /* body.page-id-29233 #en_tete_page { margin-top: 2.5rem; padding: 0px !important; height: 420px !important; } body.page-id-29233 #en_tete_page .et_pb_row { padding: 0 !important; position: relative !important; top: 50% !important; transform: translateY(-50%) !important; } body.page-id-29233 .et_parallax_bg { background-repeat: no-repeat; background-position: bottom !important; background-size: contain !important; position: absolute; bottom: 35%; left: 0; width: 100%; height: 100%; display: block; } */ } /* réglages du titre de la Page (dans le bandeau) */ .et_pb_post_title h1 { color: #fdfdfd !important; padding: 3rem !important; background-color: rgba(0,0,0,0.4); border: 2px solid #fdfdfd; display: table; margin: 0 auto !important; max-width: 80vw !important; text-transform: uppercase; font-weight: normal !important; line-height: 1.25em !important; letter-spacing: 0.04em; } /*** ------------------------------------------------------------ ***/ /*** 10.5) réglages modules textes "1 colonne", textes centrés, textes avec br, etc ***/ /*** ------------------------------------------------------------ ***/ /** réglages largeur module_texte_1col **/ .module_texte_1col { max-width: 980px; margin-left: auto; margin-right: auto; } /** réglages largeur module_texte_1col.small **/ .module_texte_1col.small { max-width: 825px; } /** réglages textes centrés **/ .texte_centre { text-align: center !important; } /** supprimer les retours à la ligne sur mobile **/ @media only screen and (max-width: 980px) { /* tablette et smartphone */ .br_ordi_only br { display: none; } } /*** ------------------------------------------------------------ ***/ /*** 10.6) réglages des row "3 colonnes" ***/ /*** ------------------------------------------------------------ ***/ #equipe-section .et_pb_row { padding: 0 !important; } #equipe-section .et_pb_row .et_pb_column { padding-top: 27px !important; padding-bottom: 27px !important; } #equipe-section .et_pb_row .et_pb_column.et-last-child { margin-bottom: 30px !important; } #equipe-photo img { border-radius: 50% !important; shape-outside: circle(); /* border: 3px solid rgba(11,70,85,0.75) !important; */ -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); } #equipe-texte { text-align: center !important; } /*** forcer l'affichage en 3 colonnes sur tablette ***/ @media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */ .row_3col_sur_tablette .et_pb_column { width: 29.6667%; margin-right: 5.5%; } } /*** ------------------------------------------------------------ ***/ /*** 10.7) réglages des row "2 colonnes" avec galerie ***/ /*** ------------------------------------------------------------ ***/ /*** forcer l'affichage en 2 colonnes sur tablette ***/ @media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */ .row_col_galeries_sur_tablette .et_pb_column_2_5 { width: 36.7% !important; margin-right: 5.5%; } .row_col_galeries_sur_tablette .et_pb_column_3_5 { width: 57.8% !important; margin-right: 5.5%; } /* réglages spéciaux pour formulaire Bénévoles */ .row_col_galeries_sur_tablette .et_pb_column_3_5 #form_1col {display: none;} #row_form_1col {padding-top: 0 !important;} } /*** ------------------------------------------------------------ ***/ /*** 10.8) réglages des formulaires ***/ /*** ------------------------------------------------------------ ***/ /* mettre une ombre portée au formulaire, pour le faire ressortir du reste */ .frm-show-form { padding: 12px !important; -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2); } @media only screen and (min-width: 981px) { /* bureau */ #form_formulairetraiteur, #form_formulaireespaceevent { width: 767px !important; margin: 0 auto !important; padding-top: 24px !important; } } /* fixer la largeur des "label", pour garder l'alignement des libellés / champs de saisie */ @media only screen and (min-width: 768px) { /* bureau et tablette */ #form_formulairebenevoles label.frm_primary_label { width: 80px !important; } #form_mailinglistemenus .frm_primary_label { width: 70px !important; } #form_mailinglistemenus .frm_first .frm_primary_label { width: 50px !important; } #field_78odv_label.frm_primary_label { width: initial !important; } #form_formulairetraiteur .largeurfixe .frm_primary_label, #form_formulaireespaceevent .largeurfixe .frm_primary_label { width: 70px !important; } #form_formulairepagecontact .largeurfixe .frm_primary_label { width: 70px !important; } } /*** réglages des libellés du formulaire + textes dans les champs de saisie + texte bouton "Envoyer" ***/ .frm_style_style-formidable.with_frm_style .frm_primary_label, .frm_style_style-formidable.with_frm_style .frm_opt_container label, .frm_style_style-formidable.with_frm_style input[type="text"], .frm_style_style-formidable.with_frm_style input[type="email"], .frm_style_style-formidable.with_frm_style input[type="tel"], .frm_style_style-formidable.with_frm_style textarea, .frm_description, .frm_style_style-formidable.with_frm_style .frm_submit button { font-family: Gotham, Helvetica, Arial, sans-serif !important; color: #0b4655 !important; /* peacock */ font-size: 1rem !important; font-weight: normal !important; line-height: 1.4em !important; } @media only screen and (max-width: 980px) { /* tablette et smartphone */ .frm_style_style-formidable.with_frm_style .frm_primary_label, .frm_style_style-formidable.with_frm_style .frm_opt_container label, .frm_style_style-formidable.with_frm_style.with_frm_style .frm_left_container .frm_primary_label { margin-bottom: 0.5rem !important; } } /*** réglages supplémentaires des champs de saisie: réglages blocs ***/ .frm_style_style-formidable.with_frm_style input[type="text"], .frm_style_style-formidable.with_frm_style input[type="email"], .frm_style_style-formidable.with_frm_style input[type="tel"], .frm_style_style-formidable.with_frm_style input[type="number"], .frm_style_style-formidable.with_frm_style textarea { background-color: transparent !important; border: 1.25px solid #487480 !important; /* peacock à 75% */ -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; padding: 6px 10px !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; } @media only screen and (max-width: 767px) { /* smartphone */ .frm_style_style-formidable.with_frm_style .frm_primary_label, /* réglages libellés */ .frm_style_style-formidable.with_frm_style input[type="text"], /* réglages textes à saisir dans les champs */ .frm_style_style-formidable.with_frm_style input[type="email"], .frm_style_style-formidable.with_frm_style input[type="tel"], .frm_style_style-formidable.with_frm_style textarea { font-size: 0.875rem !important; } } .with_frm_style .frm_radio input[type="radio"], .with_frm_style .frm_checkbox input[type="checkbox"] { vertical-align: top; position: relative; top: 4px !important; } .frm_description { font-size: 0.8rem !important; margin: 1em 0 !important; } @media only screen and (max-width: 767px) { /* smartphone */ .frm_form_field.frm_three_col .frm_opt_container { grid-template-columns: auto; display: grid; grid-auto-rows: max-content; grid-gap: 0 2.5%; } } /*** réglages du bouton Envoyer ***/ .frm_style_style-formidable.with_frm_style .frm_submit button { color: #487480 !important; /* peacock à 75% */ font-weight: 600 !important; padding: 0 !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; float: right; box-shadow: none !important; margin: 0 !important; } .frm_style_style-formidable.with_frm_style .frm_submit button:before { font-family: ETmodules !important; content: "$" !important; line-height: 1.4rem; font-size: 1.4rem !important; font-weight: 600 !important; color: #487480 !important; /* peacock à 75% */ opacity: 1; position: absolute; margin-left: -1.15em !important; } /* hover du bouton */ .frm_style_style-formidable.with_frm_style .frm_submit button:hover, .frm_style_style-formidable.with_frm_style .frm_submit button:hover:before { font-weight: normal !important; text-decoration: none !important; } /** pour annuler les valeur par défaut de Formidable (focus faisait un border plus clair) **/ .frm_style_style-formidable.with_frm_style .form-field input:not([type="file"]):focus, .frm_style_style-formidable.with_frm_style textarea:focus { border-color: #487480 !important; /* peacock à 75% */ box-shadow: none !important; } /*** réglages du bloc "captcha" du formulaire de contact Formidable ***/ @media only screen and (min-width: 981px) { /* bureau */ .bloc-recaptcha { margin-left: 21.75% !important; padding-left: 10px !important; } } @media only screen and (max-width: 980px) { /* tablette */ .bloc-recaptcha #field_kml3h div { width: auto !important; float: right !important; } } @media only screen and (max-width: 767px) { /* smartphone */ .bloc-recaptcha #field_kml3h div { width: 100% !important; float: none !important; } } /*** réglages du message de succès d'envoi du formulaire ***/ .frm_style_style-formidable.with_frm_style .frm_message, .frm_success_style { border: 1px solid #487480 !important; /* peacock à 75% */ background-color: transparent !important; color: inherit !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } .with_frm_style .frm_error_style, .with_frm_style .frm_message, .frm_success_style { padding: 1rem !important; } .frm_message p { padding-bottom: 0 !important; margin-bottom: 0 !important; } /*** réglages du message d'erreur ***/ .frm_style_style-formidable.with_frm_style .frm_error { font-family: Gotham, Helvetica, Arial, sans-serif !important; font-weight: 600 !important; color: #e74319 !important; font-size: 0.9rem !important; line-height: 1.25em !important; margin-top: 0.5rem !important; } .frm_style_style-formidable.with_frm_style .frm_error_style { font-family: hk_groteskmedium, Arial, sans-serif !important; font-weight: 600 !important; background-color: #e74319 !important; border: 1px solid #e74319; border-radius: 0px; color: #fff !important; font-size: 0.9rem !important; line-height: 1.25em !important; margin: 0; margin-bottom: 20px; } .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="text"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="password"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="url"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="tel"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="number"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="email"], .frm_style_style-formidable.with_frm_style .frm_blank_field textarea, .frm_style_style-formidable.with_frm_style .frm_blank_field .mce-edit-area iframe, .frm_style_style-formidable.with_frm_style .frm_blank_field select, .frm_form_fields_error_style, .frm_style_style-formidable.with_frm_style .frm_blank_field .frm-g-recaptcha iframe, .frm_style_style-formidable.with_frm_style .frm_blank_field .g-recaptcha iframe, .frm_style_style-formidable.with_frm_style .frm_blank_field .frm-card-element.StripeElement, .frm_style_style-formidable.with_frm_style .frm_blank_field .chosen-container-multi .chosen-choices, .frm_style_style-formidable.with_frm_style .frm_blank_field .chosen-container-single .chosen-single, .frm_style_style-formidable.with_frm_style .frm_form_field :invalid { color: #0b4655 !important; /* peacock */ background-color: transparent !important; border-color: #e74319 !important; border-width: 1px !important; border-style: solid !important; }