/* Theme Name: VERT D'HORIZON Description: SITE DIVI 2026 Author: SOWHAT FACTORY Template: Divi */ /*====================================================== LAYOUT GLOBAL — Système centralisé de largeurs ====================================================== Divi impose max-width:1080px sur .et_pb_row. Override ici dans le thème enfant (chargé après Divi) pour uniformiser à 1200px sur TOUTES les pages. Source order : règles spécifiques placées plus bas (ex: .et_pb_row_dov_3474_1 { max-width:1080px !important }) gagnent sur cette règle globale → aucun effet de bord. ====================================================*/ /* ── Rows standards → 1200px ────────────────────────── :not(.et_pb_row_fullwidth) exclut les rows pleine largeur que Divi gère déjà en width:100%. !important : couvre les éventuels styles inline Divi. */ .et_pb_row:not(.et_pb_row_fullwidth) { max-width: 1200px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* ── Scope blog : forcer 1200px sur les rows Divi ───── Redondant avec la règle globale ci-dessus, mais protège contre un éventuel override inline spécifique à la page blog. */ .blog .et_pb_row:not(.et_pb_row_fullwidth) { max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; } /* ── Exceptions fullwidth ────────────────────────────── Sections bannière / hero Divi fullwidth : les rows internes ne doivent pas être limités à 1200px. */ .et_pb_section_fullwidth .et_pb_row, .et_pb_section.banniere .et_pb_row, .et_pb_row_fullwidth { max-width: 100% !important; width: 100% !important; } /*______________________________________________________TYPO______________________________________________________*/ .blanc{ background:white; } h1, h2, h3{ font-family: 'roboto', sans-serif!important; color: #005D27!important; font-weight:700; } h4, h5, h6 { font-family: 'roboto', sans-serif!important; color: #17a345; font-weight:700; } #top-menu li li a { line-height: 1.4em; } a { color: #17a345; } /*______________________________________________________MAILCHIMP______________________________________________________*/ .et_pb_widget_area_left { border-right:0px solid rgba(0,0,0,.1)!important; padding-right: 0px!important; } #mc_embed_signup { background: #ffffff; padding: 20px; border-radius: 8px; border: 1px solid #ccc; font-size: 14px; color: #222; } #mc_embed_signup h2 { font-size: 18px; margin-bottom: 15px; color: #1a5e2d; border-bottom: 2px solid #1a5e2d; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } #mc_embed_signup label { display: block; margin-bottom: 6px; font-weight: 600; } #mc_embed_signup input[type="email"], #mc_embed_signup input[type="text"] { width: 100%; padding: 8px 10px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } #mc_embed_signup input[type="checkbox"] { margin-right: 8px; } #mc_embed_signup ul { list-style: none; padding-left: 0; margin: 0 0 12px 0; } #mc_embed_signup li { margin-bottom: 0px!important; padding-bottom: 0px!important; } #mc_embed_signup .gdprRequired { margin-bottom: 15px; } #mc_embed_signup .button { background-color: #1a5e2d; color: white; padding: 10px 16px; font-size: 14px; text-transform: uppercase; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s ease-in-out; margin:0 auto; display: block; } #mc_embed_signup .button:hover { background-color: #166823; } #mc_embed_signup p, #mc_embed_signup small { font-size: 13px; color: #444; margin-bottom: 12px; line-height: 1.4; text-align: justify; } #mc_embed_signup a { color: #1a5e2d; text-decoration: underline; } #mc_embed_signup input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; min-width: 18px; min-height: 18px; border: 2px solid #005D27; border-radius: 4px; background-color: #fff; cursor: pointer; position: relative; margin-right: 8px; vertical-align: middle; box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease; display: inline-block; } #mc_embed_signup input[type="checkbox"]:checked { background-color: #005D27; border-color: #005D27; } #mc_embed_signup input[type="checkbox"]:checked::after { content: ''; position: absolute; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; top: 1px; left: 6px; transform: rotate(45deg); box-sizing: border-box; } /* Pour garder alignement propre avec le texte */ #mc_embed_signup label { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } /*______________________________________________________GUTEMBERG______________________________________________________*/ .et_post_meta_wrapper img { width: 100%; /* Prend toute la largeur disponible */ max-height: 400px; /* Hauteur maximale */ object-fit: cover; /* Recadre sans déformer */ object-position: center center; /* Centre le recadrage verticalement et horizontalement */ display: block; /* Évite les espaces sous l’image */ } .single-post .entry-content p, .single-post .entry-content li, .single-post .entry-content div, .single-post .entry-content blockquote { text-align: justify; line-height: 1.5; } .single-post .entry-content p { margin-bottom: 20px; padding-bottom: 0px; } .single-post .entry-content { overflow-wrap: break-word; } .single-post h2{ margin-bottom: 0px!important; margin-top: 35px!important; } /* Bloc texte - image */ /*______________________________________________________PAGE TAILLE ABATTAGE______________________________________________________*/ .box-entreprise { height: 200px; padding: 50px 10px!important; border-radius: 8px; margin-top: 30px; } .box-entreprise .et_pb_button_wrapper{ position: absolute; top:120px; left: 0; right: 0; margin: 0 auto; width: 200px; /* largeur obligatoire */ } .box-elegage, .box-abattage{ height: 320px; padding: 50px 10px!important; border-radius: 8px; margin-top: 30px; } .box-elegage .et_pb_button_wrapper, .box-abattage .et_pb_button_wrapper{ position: absolute; top:230px; left: 0; right: 0; margin: 0 auto; width: 200px; /* largeur obligatoire */ } .box-articles{ height: 320px; padding: 50px 10px!important; border-radius: 8px; margin-top: 30px; } .box-articles .et_pb_button_wrapper{ position: absolute; top:230px; left: 0; right: 0; margin: 0 auto; width: 200px; /* largeur obligatoire */ } /*______________________________________________________Titre H2 PAGE______________________________________________________*/ .titre-h2 h2{ text-align: center; margin-bottom: 10px !important; font-size: 2.5em; color: #005D27!important; text-transform: uppercase!important; } /*______________________________________________________SLIDE ARTCILES______________________________________________________*/ .slides-article .et_pb_slide_title{ font-weight: 400; text-transform: uppercase; } /*______________________________________________________PAGE ENGAGEMENT ET VALEURS______________________________________________________*/ .engagement-valeurs-cv p, .engagement-valeurs-cv ul li{ color: #fff; } .engagement-valeurs-cv a{ color: #005D27; } /*______________________________________________________SECTION VDH PAGE______________________________________________________*/ .section-vdh-page{ padding-top: 50px!important; margin-top: 30px!important; } .vert-fonce h2 { text-align: center; margin-bottom: 10px !important; font-size: 2.5em; color: #005D27!important; } .text-boite-acceuil p{ padding-bottom: 1em!important; } .localites,.localites a { color: #17a345!important; } .localites a:hover{ color: #fff!important; } .et_pb_post .post-meta, .et_pb_post .post-meta a{ color: #005D27!important; } .et_pb_post .post-meta a{ font-weight: bold; } .et_pb_post .post-meta a:hover{ font-weight: normal; } .et_post_meta_wrapper h1,.et_pb_post .entry-title a, .et_pb_post h2 a, .et_pb_post h2 { text-transform:none; } .et_pb_post h1{ margin-bottom: 20px } .et_pb_post h2{ margin-bottom: 10px } .post-content p{ margin-bottom: 20px } body{ color: #353535; font-size: 16px; font-family: 'Roboto', sans-serif!important; line-height: 1.7em; } ul li{ color: #353535; font-size: 16px; font-family: 'Roboto', sans-serif!important; } .bloc-article{ padding-top:30px!important; } .inputnews{ width: 100%; padding: 14px 4%!important; border: none; border-radius: 3px; color: #666; background-color: #fff; font-size: 14px; font-size: 16px; font-weight: 400; -webkit-appearance: none; } /* .comment_area .comment-reply-link — ancienne règle positionnement supprimée (remplacée par #comments .comment-reply-link) */ .et_pb_bg_layout_light .et_pb_widget li a { color: #666; } .et_pb_bg_layout_light .et_pb_widget li { color: #666; } /* ============================================================ SÉPARATION COMMENTAIRES ============================================================ */ #comments { margin-bottom: 30px; } .comment.even{ border-bottom: 1px solid #005D27!important; padding-bottom: 24px; margin-bottom: 24px; } .comment-body { position: relative; padding: 0 110px 20px 100px; margin-bottom: 48px; min-height: 87px; border-bottom: 1px solid rgba(0, 93, 39, 0.1); } /*______________________________________________________lien______________________________________________________*/ .retour { margin-bottom: 30px!important; text-align: right; } .retour a{ font-style: italic; } .lien { margin-bottom: 50px; margin-top: 30px; } .video_lien,.lien_image{ width: 240px!important; float: left; margin-right: 30px; } .lien_body{ margin-bottom: 20px; text-align: justify; } @media all and (min-width: 120px) and (max-width: 530px){ .video_lien,.lien_image{ float: none; display: block; margin : 0 auto; } .lien_title{ margin-top: 20px; } } .lien_body{ margin-top: 20px!important; } #comment-wrap { padding-top: 20px!important; border-top: 2px solid #005D27; } /*_____________________________________________single*/ #lien-single-content{ padding-top: 0; } .titre_lien_single{ border-bottom: 1px solid #005D27; } .lien_single { margin-bottom: 50px; margin-top: 0px; } .video_lien_single{ max-width: 640px; margin-right: 30px; display: block; margin : 0 auto; } .lien_image_single{ float: left; max-width: 320px; margin-right: 40px; } .lien_body_single{ margin-bottom: 20px; margin-top: 30px; text-align: justify; } .invitcomment{ font-style: italic; color: #005D27; border-bottom: 1px solid #005D27; } @media all and (min-width: 120px) and (max-width: 530px){ .video_lien_single,.lien_image_single{ float: none; display: block; margin : 0 auto; } .lien_title_single{ margin-top: 20px; } .invitcomment{ font-size: 80%!important; } .titre_2_accueil h2{ font-size: 30px!important; } } /*______________________________________________________MailCHIMP______________________________________________________*/ .boutonnews{ color: #005D27 !important; border-width: 4px !important; border-color: #005D27!important; border-style: solid; border-radius: 100px; letter-spacing: 2px; font-weight: 700 !important; text-transform: uppercase !important; font-size: 1em; margin-top: 0 !important; } #et_search_icon:hover, .mobile_menu_bar::before, .mobile_menu_bar::after, .et-social-icon a:hover, .comment-reply-link, .form-submit input, .entry-summary p.price ins, .woocommerce div.product span.price, .woocommerce-page div.product span.price, .woocommerce #content div.product span.price, .woocommerce-page #content div.product span.price, .woocommerce div.product p.price, .woocommerce-page div.product p.price, .woocommerce #content div.product p.price, .woocommerce-page #content div.product p.price, .woocommerce .star-rating span::before, .woocommerce-page .star-rating span::before, .woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button, .woocommerce a.button.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce #content input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce a.button:hover, .woocommerce-page a.button:hover, .woocommerce button.button, .woocommerce-page button.button:hover, .woocommerce input.button:hover, .woocommerce-page input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page #respond input#submit:hover, .woocommerce #content input.button:hover, .wp-pagenavi span.current, .wp-pagenavi a:hover, .et_password_protected_form .et_submit_button, .nav-single a, .posted_in a, #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a, .bottom-nav li.current-menu-item > a, .footer-widget h4 { color: #005D27 !important; } #footer-bottom{ font-size: 14px!important; } #footer-bottom p{ color:#fff; } #footer-bottom a{ color:#17a345!important; } #footer-bottom a:hover{ color:#fff!important; } .box-text-presentation p{ color: #353535!important; font-size: 16px; font-family: 'Roboto', sans-serif!important; text-align: justify; } /*______________________________________________________GENERAL______________________________________________________*/ #et-top-navigation { font-weight: 600; text-transform: uppercase; font-size: 0.8em!important; } #top-header, .et-fixed-header#top-header{ background-color: #005D27!important; } .et_secondary_nav_enabled #page-container #top-header{ background-color: #005D27!important; } .arianne{ width: 100%; max-width: 100%; padding-right: 30px; padding-left: 30px; font-size: 0.8em; } .feuille{ padding: 0; max-width: 20px; } /* ========================= BANNIERE (Divi Fullwidth Header) ========================= */ /* 1) La section doit être full width */ .et_pb_section.banniere{ padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow: hidden; /* isole les enfants — empêche le débordement sur .swf-container */ position: relative; /* crée un stacking context propre */ z-index: 0; } /* 2) Le module Fullwidth Header prend toute la largeur + fond en cover */ .et_pb_section.banniere .et_pb_fullwidth_header{ width: 100% !important; max-width: 100% !important; /* IMPORTANT : laisse la hauteur s'adapter au contenu */ min-height: 0 !important; height: auto !important; /* ton spacing (ajuste si besoin) */ padding-top: 90px !important; padding-bottom: 90px !important; /* fond */ background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* 3) Empêche Divi de limiter la largeur du container interne */ .et_pb_section.banniere .et_pb_fullwidth_header_container{ width: 100% !important; max-width: 100% !important; } /* 4) Option : garde le texte dans une largeur "lecture" (sinon trop large sur grands écrans) */ .et_pb_section.banniere .header-content-container{ max-width: 1080px; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } /* 5) Typo */ .et_pb_section.banniere h1.et_pb_module_header{ color: #fff !important; font-weight: 700; text-transform: uppercase; font-size: 3.5em; line-height: 1.2em; margin-bottom: 12px; } .et_pb_section.banniere .et_pb_fullwidth_header_subhead{ color: #fff !important; font-weight: 600; font-size: 1.1em; line-height: 1.6em; display: block; } /* 6) Mobile */ @media (max-width: 980px){ .et_pb_section.banniere .et_pb_fullwidth_header{ padding-top: 40px !important; padding-bottom: 40px !important; } .et_pb_section.banniere h1.et_pb_module_header{ font-size: 2em; line-height: 1.2em; } .et_pb_section.banniere .header-content-container{ padding-left: 18px !important; padding-right: 18px !important; } } /* ========================= BANNIERE ARTICLE ========================= */ .banniere-article{ padding-top: 60px; padding-bottom: 60px; background-size: cover; background-position: center; background-repeat: no-repeat; /* Annule le margin-top négatif injecté par Divi JS sur la première .et_pb_section (#page-container a déjà padding-top = headerHeight → la section doit partir de 0) */ margin-top: 0 !important; /* Espace entre la bannière et le contenu qui suit (.swf-container) */ margin-bottom: 50px; } /* H1 */ .banniere-article h1{ font-weight: 700; text-transform: uppercase; font-size: 3.5em; line-height: 1.2em; color: #fff !important; margin-bottom: 15px; } /* H2 */ .banniere-article h2{ color: #17a345 !important; margin-bottom: 15px; } /* Texte */ .banniere-article p{ color: #fff !important; font-size: 1.05em; line-height: 1.6em; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 980px){ .banniere-article{ padding-top: 40px; padding-bottom: 40px; } .banniere-article h1{ font-size: 2em; line-height: 1.2em; } .banniere-article h2{ font-size: 1.2em; } .banniere-article p{ font-size: 1em; line-height: 1.5em; } } .et_pb_section .bannier-sans-fond { padding: 0px 0; } .et_pb_fullwidth_header { padding: 90px 0; position: relative; background-position: 50%; background-size: cover; } /*______________________________________________________Recherche WP______________________________________________________*/ .widget_search input#s, .widget_search input#searchsubmit { padding: .2em 10px .2em 10px; height: 40px !important; font-size: 0.8em; font-weight: 600; line-height: normal !important; border: 2px solid #005D27; color: #005D27; } .widget_search #searchsubmit { border-radius: 100px; letter-spacing: 2px; background-color: white; width: auto; margin: 0 auto!important; display: block!important; position: relative; margin-top: 20px!important; border-width: 4px !important; border-color: #005D27 !important; font-weight: 700 !important; text-transform: uppercase !important; border: 4px solid #005D27; border-top-color: rgb(0, 93, 39); border-top-width: 4px; border-right-color: rgb(0, 93, 39); border-right-width: 4px; border-bottom-color: rgb(0, 93, 39); border-bottom-width: 4px; border-left-color: rgb(0, 93, 39); border-left-width: 4px; text-align: center; } .widget_search #searchsubmit:hover{ color: #fff; background-color: #005D27; } /*______________________________________________________BLOG IMAGE A GAUCHE (refactored 2026)______________________________________________________*/ /* SUPPRIMÉ : .et_pb_post > a img { float:left; max-width:40% } — règle globale non scopée. Remplacé par .blog .et_pb_post > a { height:180px } + object-fit:cover dans BLOG—CARTES. Conservé pour .category uniquement (layout float non refactorisé). */ .category .et_pb_post > a img { max-width: 40%; float: left; padding: 0 30px 25px 0; } /* Clearfix float — conservé pour .category. SUPPRIMÉ : .blog .post-meta .published::after → inutile, blog utilise grid. */ article::after, .category article::after { content: ""; display: table; clear: both; } /* Badge meta — conservé pour #left-area .articleliste (liste articles sidebar/related). SUPPRIMÉ : .blog .post-meta span → remplacé dans BLOG—CARTES : position:static !important, color:#888 !important, background:none !important. */ #left-area .articleliste .post-meta { width: auto; text-align: center; line-height: 1em; font-weight: 900; font-size: 14px; color: white !important; background-color: #005D27; border-radius: 3px; padding: 7px 7px; margin: 0; } .single-post #left-area .articleliste .post-meta { position: relative; top: 35px; left: -15px; } article, .category article { position: relative; } #left-area .articleliste .post-meta, .category #left-area .post-meta { position: absolute; top: -5px; left: -5px; } /*______________________________________________________Equipe______________________________________________________*/ .equipe{ border-top: 2px solid #005D27!important; border-bottom: 2px solid #005D27!important; margin-bottom: 0px!important; } .equipe-groupe{ padding-top: 10px!important; } /*______________________________________________________Personne______________________________________________________*/ .personne h4, .personne p{ text-align: center!important; } .personne p{ font-size: 0.7em; line-height: 14px; } .et_pb_team_member_image{ margin: 0 auto!important; padding-bottom: 20px!important; } .personne img{ height: 169px; width: 169px; border-radius:100px; box-shadow: 0px 0px 10px 4px rgba(219, 219, 219, 0.75); -moz-box-shadow: 0px 0px 10px 4px rgba(219, 219, 219, 0.75); -webkit-box-shadow: 0px 0px 10px 4px rgba(219, 219, 219, 0.75); } .sstitre-equipe{ margin-bottom: 1%!important; } .sstitre-equipe h3{ text-transform: uppercase!important; } /*______________________________________________________FIN BLOG IMAGE A GAUCHE______________________________________________________*/ .et_pb_section_0{ padding: 0px 0!important; } .rpwwt-widget li{ text-align: left!important; } .rpwwt-post-title{ font-size: 85%; font-weight: 700; color: #005D27; } .rpwwt-post-categories{ font-size: 85%; font-style: italic; } .rpwwt-post-categories, .rpwwt-post-date, .rpwwt-post-comments-number{ font-size: 85%; } /*DIVI OVERLAY ______________________*/ .et-db .et-l .et_pb_section_dov_3474_0 { max-width: 50%!important; margin-left: auto !important; margin-right: auto !important; } .et_pb_row_dov_3474_1{ width: 80%!important; max-width: 1080px!important; padding: 27px 0!important; } .et_pb_row_dov_3474_1 .et_pb_text_inner h2{ color: #17a345!important; } /*MATERIEL ET SUIVI ______________________*/ .section-materiel-suivi img{ border-radius: 50%; } /*ONGLETS TAILLE ABATTAGE ______________________*/ .section-onglet-taille-abattage .et_pb_row { max-width: 1200px!important; } .onglet-taille-abattage{ } .onglet-taille-abattage ul.et_pb_tabs_controls { background-color: #005D27; } .onglet-taille-abattage .et_pb_tabs_controls li a:hover{ color: rgba(255, 255, 255, 0.8); } .onglet-taille-abattage .et_pb_tabs_controls li a{ color: #fff; transition: color 0.3s ease-in-out; } .onglet-taille-abattage .et_pb_tabs_controls li{ border-right: 1px solid #005D27; border-bottom: 1px solid #005D27; border-top: 1px solid #005D27; } .onglet-taille-abattage .et_pb_tabs_controls li.et_pb_tab_active a{ color: #005D27; } .onglet-taille-abattage-entete{ padding: 20px; text-align: center; color: white; /* Assure une bonne lisibilité */ position: relative; z-index: 2; margin-bottom: 40px; } .onglet-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; /* ✅ Nouvelle méthode : Utilisation d'un pseudo-élément */ } /* 🔹 Ajouter un effet de luminosité en superposant un calque blanc semi-transparent */ .onglet-bg-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); /* 🔥 Blanc semi-transparent pour éclaircir */ z-index: 1; } /* 🔹 Correction : Le texte doit être totalement visible */ .onglet-taille-abattage-entete h3, .onglet-taille-abattage-entete h4 { position: relative; z-index: 3; opacity: 1; /* ✅ Texte totalement opaque */ } .onglet-taille-abattage .et_pb_tabs_controls li a { padding: 4px 25px!important; } .onglet-taille-abattage .et_pb_tab_active a { color: #005D27 !important; } .onglet-taille-abattage p{ text-align: justify; } .onglet-taille-abattage h3{ text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding: 0; color: #005D27!important; font-size: 1.8em; text-align: center; } .onglet-taille-abattage h4{ text-transform: uppercase; margin-top: 0px; margin-top: 0px; margin-bottom: 30px; padding: 0; color: #005D27!important; font-family: 'roboto', sans-serif!important; font-weight: 300; font-size: 1.4em; text-align: center; } .onglet-taille-abattage h5{ margin-top: 30px; margin-bottom: 10px; color: #17a345!important; } .onglet-taille-abattage ul{ padding-bottom: 0px!important; } .onglet-taille-abattage h5::before { content: ""; display: inline-block; width: 20px; /* Ajustez la taille selon vos besoins */ height: 20px; margin-right: 10px; /* Espacement entre la puce et le texte */ background-image: url('/wp-content/themes/vertdhorizon_2026/images/feuille-vecteur.svg'); background-size: contain; /* Assure que l'image s'adapte correctement */ background-repeat: no-repeat; vertical-align: middle; /* Aligne l'icône avec le texte */ } .onglet-taille-abattage-description{ margin-bottom: 40px; } /*/////////////////IMAGE AVANT APRES ////////////*/ .onglet-taille-abattage-comparaison { display: flex; justify-content: center; align-items: center; margin: 20px 0; gap: 50px; /* 🔹 Gouttière toujours fixée à 50px */ } .onglet-image { max-width: 45%; /* 🔹 Réduit la largeur des images pour qu'elles restent proches */ text-align: center; } .onglet-image img { width: 100%; /* 🔹 L'image prend toute la largeur du conteneur mais pas plus */ height: auto; /* 🔹 Préserve le ratio */ display: block; border-radius: 8px; } .image-caption { font-weight: bold; text-align: center!important; margin-top: 5px; font-size: 16px; } /*Accordéon ______________________*/ .accordeon .et_pb_toggle{ border-radius: 15px; } .accordeon .et_pb_toggle_close .et_pb_toggle_title{ margin-bottom: 0px; } .et_pb_accordion_0 .et_pb_toggle_title::before{ display: none; } .accordeon .et_pb_toggle_title{ background-color: #005D27; text-align: center; padding: 10px; color:#fff!important; border-radius: 15px; } .accordeon h3{ margin-bottom: 15px; } .accordeon h4{ margin-top: 30px; margin-bottom: 10px; color: #17a345!important; } .accordeon ul{ padding-bottom: 0px!important; } /*Inscription page article ______________________*/ .inscri-gaz{ max-width: 250px!important; display: block; margin: 0 auto; } .banner-gazette .et_pb_column_1{ background-color: #005D27; max-width: 400px!important; margin-left: 100px; padding-left: 30px; padding-right: 30px; padding-top: 20px; } .inscri-actu{ max-width: 400px!important; display: block; margin: 0 auto; } .inscri-gaz .yikes-easy-mc-form input[type="text"], .inscri-gaz .yikes-easy-mc-form input[type="text"],.inscri-gaz .yikes-easy-mc-form input[type="email"],.inscri-actu .yikes-easy-mc-form input[type="text"],.inscri-actu .yikes-easy-mc-form input[type="email"]{ padding: 3px 2%!important; background-color: transparent!important; color: white!important; border-width: 0px 0px 1px 0px!important; border-color:#f9f9f9!important; font-size: 16px; font-weight: 400; } .inscri-gaz .yikes-easy-mc-form input[type="text"]:focus,.inscri-gaz .yikes-easy-mc-form input[type="email"]:focus,.inscri-actu .yikes-easy-mc-form input[type="text"]:focus,.inscri-actu .yikes-easy-mc-form input[type="email"]:focus{ outline: none!important; } .inscri-actu .boutonnews-page-article{ width: 50%!important; display: block; margin: 0 auto; min-height: 30px!important; padding: 0px!important; color: #005D27 !important; border-width: 2px !important; border-color: #fff!important; border-style: solid; border-radius: 100px; letter-spacing: 1px; font-weight: 700 !important; font-size: 1em; margin-top: 10px !important; background-color: #fff!important; -webkit-transition: background 0.5s 0s ease; -moz-transition: background 0.5s 0s ease; -o-transition: background 0.5s 0s ease; transition: background 0.5s 0s ease; } .yikes-easy-mc-form .form-field-description { line-height: 1.3em; text-align: justify; } .boutonnews-page-article:hover{ color: #fff!important; background: transparent!important; border-width: 2px !important; border-color: #fff!important; } .widget_yikes_easy_mc_widget .yikes-easy-mc-form input[type="text"],.widget_yikes_easy_mc_widget .yikes-easy-mc-form input[type="email"]{ padding: 3px 2%!important; background-color: transparent!important; color: #005D27 !important; border-width: 0px 0px 1px 0px!important; border-color:#005D27!important; } .widget_yikes_easy_mc_widget .yikes-easy-mc-form input[type="text"]:focus,.widget_yikes_easy_mc_widget .yikes-easy-mc-form input[type="email"]:focus{ outline: none!important; } .widget_yikes_easy_mc_widget .yikes-easy-mc-form .yikes-mailchimp-field-required{ margin-top: 10px; } .widget_yikes_easy_mc_widget .yikes-easy-mc-form .yikes-mailchimp-field-required, .widget_yikes_easy_mc_widget .yikes-easy-mc-form .yikes-easy-mc-checkbox-label { line-height: 1.3em; text-align: justify; color: #005D27; } v .yikes-mailchimp-form-description{ color: #1CA245; text-align: center; } .yikes-mailchimp-form-description,.yikes-easy-mc-form label { margin-bottom: 0px!important; color: #fff; } .et_pb_widget .boutonnews-page-article{ width: 50%!important; display: block; margin: 0 auto; min-height: 30px!important; padding: 5px!important; color: #fff !important; border-width: 2px !important; border-color: #005D27!important; border-style: solid; border-radius: 100px; letter-spacing: 1px; font-weight: 700 !important; font-size: 1em; margin-top: 10px !important; background: #005D27; -webkit-transition: background 0.5s 0s ease; -moz-transition: background 0.5s 0s ease; -o-transition: background 0.5s 0s ease; transition: background 0.5s 0s ease; } .et_pb_widget .boutonnews-page-article:hover{ color: #005D27!important; background: #fff; border-width: 2px !important; border-color: #005D27!important; } .et_pb_widget .yikes-mailchimp-eu-compliance-text p{ color: #666!important; } .yikes-mailchimp-eu-compliance-label{ margin-top: 10px; text-align: justify!important; line-height: 1em!important; font-weight: 300!important; font-size: 0.8em; } /* CONTAINER */ .swf-pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0; flex-wrap: wrap; } /* BASE */ .swf-pagination a, .swf-pagination span { display: flex; align-items: center; justify-content: center; height: 36px; text-decoration: none; border: 2px solid #005D27; color: #005D27; font-weight: 500; transition: all 0.2s ease; } /* NUMÉROS = CERCLES */ .swf-pagination .page-numbers:not(.prev):not(.next) { width: 36px; border-radius: 50%; padding: 0; } /* PRÉCÉDENT / SUIVANT = BOUTONS */ .swf-pagination .prev, .swf-pagination .next { padding: 0 14px; border-radius: 30px; } /* HOVER */ .swf-pagination a:hover { background: #005D27; color: #fff; } /* PAGE ACTIVE */ .swf-pagination .current { background: #005D27; color: #fff; border-radius: 50%; } .swf-banner-content h1 { font-weight: 700; text-transform: uppercase; font-size: 3em; line-height: 1.2em; color: #fff !important; margin-bottom: 15px; } .swf-cat-count { margin-top: 10px; font-size: 16px; color: #fff; opacity: 0.9; } /* BONUS : hover léger lift */ .swf-pagination a:hover { transform: translateY(-2px); } #main-content .swf-sidebar-inner .et_pb_widget { margin-bottom: 30px !important; } .swf-sidebar-inner > *:not(:last-child) { margin-bottom: 30px; } /*Fin Inscription page article ______________________*/ .slide-article h2{ font-weight: bold!important; } .et_pb_button, .et_pb_posts a.more-link{ color: #005D27 !important; background-color: white !important; border-width: 4px !important; border-color: #005D27 !important; border-radius: 100px; letter-spacing: 2px; font-weight: 700 !important; font-size: 16px; text-transform: uppercase !important; -webkit-transition: background 0.5s 0s ease; -moz-transition: background 0.5s 0s ease; -o-transition: background 0.5s 0s ease; transition: background 0.5s 0s ease; } .et_pb_button:hover, .et_pb_posts a.more-link:hover{ color: white !important; background-color: #005D27 !important; opacity: 1; border-width: 4px !important; border-color: #005D27 !important; border-radius: 100px; letter-spacing: 2px; font-weight: 700 !important; text-transform: uppercase !important; } /* NETTOYÉ : suppression float:right + width:150px (incompatibles avec le grid/flex blog). Fallback visuel conservé pour les contextes hors .blog (ex: category). Le blog utilise .blog .et_pb_post a.more-link dans BLOG—CARTES. */ a.more-link { color: #005D27 !important; border: 4px solid #005D27; border-radius: 100px; letter-spacing: 2px; font-weight: 700 !important; text-transform: uppercase !important; text-align: center; display: inline-block; } /* Hover couvert par .et_pb_button:hover, .et_pb_posts a.more-link:hover ci-dessus. Conservé ici pour les .more-link hors .et_pb_posts. */ a.more-link:hover { color: white !important; background-color: #005D27 !important; opacity: 1; border-color: #005D27 !important; } .icon-fb { background-image: url('https://mk0divicommunite7joq.kinstacdn.com/wp-content/uploads/2018/03/np_professor_1175561_CC692F.png'); background-repeat: no-repeat; background-position: left; padding: 0 0 0 5px; } @media all and (min-width: 320px) and (max-width: 1500px){ .et_pb_button { font-size: 1em; margin-top: 0!important; } } @media all and (min-width: 100px) and (max-width: 558px){ h1 { font-size: 1em; } .section-contact h2, .newsletter h2, .realisation h2 { font-size: 2em!important; } } .resume h4{ font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif; font-weight: 700; font-size: 22px; color: #005D27 !important; line-height: 1.4em; text-align: center!important; margin-top:10px; } .resume p{ text-align: center!important; } .puce{ margin-top: 10px; font-weight: 700; font-size: 30px; text-align: center!important; color:#005D27; } /*______________________________________________________MATOS______________________________________________________*/ .section-titre-matos { padding-bottom: 0!important; } .section-titre-matos .et_pb_row{ padding-bottom: 0!important; } .section-titre-matos h2{ font-size: 2em; } .section-spe-matos{ padding: 20px 0!important; text-align: justify; } .section-spe-matos .et_pb_text_inner h3{ text-transform: uppercase!important; } .section-spe-matos p{ text-align: justify; } .section-spe-matos .et_pb_row{ width: 80%; max-width: 1200px; margin: auto; position: relative; padding:0px; } .section-spe-matos .et_pb_image_wrap { width: 100%; /* Prend toute la largeur */ max-height: 300px; /* Ajuste la hauteur du crop */ overflow: hidden; /* Cache l'excédent de l'image */ position: relative; /* Position relative pour l'image */ display: flex; justify-content: center; align-items: center; } .section-separateur{ padding:0px!important; } .section-separateur .et_pb_row{ width: 10%; max-width: 1200px; margin: auto; position: relative; padding:0px!important; } .separateur-matos{ padding:0px; height: 2px; } .separateur-matos::before{ border-top-color: #17a345 !important; border-top-width: 2px!important; } .section-boite-acceuil .et_pb_text_inner h3{ text-transform: uppercase; color: #17a345 !important; font-size: 2em!important; font-weight: 400; margin-bottom: 30px; } .section-boite-acceuil .et_pb_text_inner p{ text-align: justify!important; } /*______________________________________________________Double col______________________________________________________*/ .section-double-tx-droit, .section-double-tx-gauche{ padding: 0!important; color: #005D27!important; } .section-double-tx-droit h2, .section-double-tx-gauche h2{ color: #005D27!important; } .section-double-tx-droit h3, .section-double-tx-gauche h3{ color:#005D27!important ; } .section-double-tx-droit .colonne-texte, .section-double-tx-gauche .colonne-texte{ padding-top: 90px; padding-right: 130px; padding-bottom: 90px; padding-left: 130px; } .section-double-tx-droit .et_pb_button, .section-double-tx-gauche .et_pb_button { margin: 10px!important; } @media all and (min-width: 320px) and (max-width: 1600px){ .section-double-tx-droit .colonne-texte,.section-double-tx-gauche .colonne-texte{ padding-top: 90px!important; padding-right: 70px!important; padding-bottom: 10px!important; padding-left: 70px!important; line-height: 23px; } } @media all and (min-width: 320px) and (max-width: 1400px){ .section-double-tx-droit .colonne-texte h2, .section-double-tx-gauche .colonne-texte h2{ font-size: 2em } .section-double-tx-droit .colonne-texte, .section-double-tx-gauche .colonne-texte{ padding-top: 50px!important; } } @media all and (min-width: 320px) and (max-width: 1150px){ .section-double-tx-droit .colonne-texte h2, .section-double-tx-gauche .colonne-texte h2{ font-size: 1.5em; } .section-double-tx-droit .et_pb_button, .section-double-tx-gauche .et_pb_button { font-size: 0.7em; margin: 5px!important; } .section-double-tx-droit p, .section-double-tx-gauche p { font-size: 0.9em; line-height: 18px; } .et_pb_button::after{ font-size: 20px; } } .colonne-pleine-bkg-blanc h2{ font-weight: 700; font-size: 2em; } .double-colonne h2{ color:#17a345!important; font-weight: 700; font-size: 2em; } .colonne-pleine h2{ color: #005D27!important; font-weight: 700; line-height: 1em; text-transform: uppercase!important; } .colonne-pleine h3{ color: #005D27!important; font-weight: 700; line-height: 1em; padding-top: 20px; text-transform: uppercase!important; } .colonne-pleine p{ color: #353535!important; text-align: justify; } /* ============================================================ BLOG = MÊME LAYOUT QUE SINGLE (SWF) ============================================================ */ /* LAYOUT GLOBAL */ .swf-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .swf-layout { display: flex; } /* MAIN / SIDEBAR */ .swf-main { width: 73%; padding-right: 45px; } .swf-sidebar { width: 27%; } .swf-thumb img { width: 100%; height: auto; border-radius: 8px; } .swf-title { margin: 15px 0 10px; font-size: 1.3rem; } .swf-title a { text-decoration: none; color: #1a2e1a; } .swf-meta { font-size: 0.85rem; color: #777; margin-bottom: 10px; } .swf-excerpt { margin-bottom: 10px; } .swf-readmore { display: inline-block; border: 2px solid #005D27; padding: 6px 14px; border-radius: 20px; color: #005D27; text-decoration: none; } .swf-readmore:hover { background: #005D27; color: #fff; } /* RESPONSIVE */ @media (max-width: 980px) { .swf-layout { flex-direction: column; } .swf-main, .swf-sidebar { width: 100%; padding-right: 0; } } /*______________________________________________________BANNIÈRE ARTICLE (swf-banner)______________________________________________________*/ /* Pleine largeur, indépendante du container 1200px. Image à la une en fond + overlay sombre pour lisibilité du titre. */ .swf-banner { width: 100%; min-height: 200px; max-height: 300px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: #1a5e2d; /* fallback si pas d'image à la une */ position: relative; color: #fff; overflow: hidden; margin-bottom: 50px; } .swf-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .swf-banner-inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 30px 20px; position: relative; z-index: 2; } .swf-banner-title { font-size: 2.4rem; line-height: 1.2; margin: 0; color: #fff !important; /* override global h1 color #005D27 */ font-weight: 700; } @media (max-width: 980px) { .swf-banner { min-height: 150px; } .swf-banner-title { font-size: 1.6rem; } } @media (max-width: 480px) { .swf-banner-title { font-size: 1.3rem; } } /*______________________________________________________LAYOUT SWF (single.php)______________________________________________________*/ /* Remplace le système Divi (#main-content / .container / #left-area / #sidebar) par un layout flex autonome, sans dépendance Divi. Proportions identiques aux blocs blog (.bloc-article) : 73% / 27% / 45px gutter. */ .swf-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; position: relative; /* stacking context au-dessus de la section banniere Divi */ z-index: 1; } .swf-layout { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; } .swf-main { flex: 0 0 73%; max-width: 73%; padding-right: 45px; box-sizing: border-box; } /* Limite la largeur du texte article pour le confort de lecture. Laisse .swf-main à 73% pour le layout — .swf-content contrôle la lisibilité. */ .swf-content { max-width: 760px; } .swf-sidebar { flex: 0 0 27%; max-width: 27%; font-size: 0.95rem; } /* Supprime le double wrapper Divi : sidebar.php du thème enfant génère .swf-sidebar-inner au lieu de #sidebar, ce div interne doit être neutre. */ .swf-sidebar-inner { width: 100%; } @media (max-width: 980px) { .swf-layout { flex-wrap: wrap; } .swf-main, .swf-sidebar { flex: 0 0 100%; max-width: 100%; padding-right: 0; } .swf-content { max-width: 100%; } } /*______________________________________________________SIDEBAR______________________________________________________*/ /* Règles legacy #left-area / #sidebar conservées au cas où d'autres templates utilisent encore ces IDs Divi (ex: category.php, search.php). */ .single-post #sidebar { width: 27%; max-width: 100%; font-size: 0.95rem; } .single-post #left-area { width: 73%; } .single-post #left-area { padding-right: 45px; } /* Responsive — colonnes empilées sous 980px */ @media (max-width: 980px) { .single-post #sidebar, .single-post #left-area { width: 100%; padding-right: 0; } .single-post #sidebar { font-size: 1rem; } } #sidebar, .et_pb_widget{ line-height: 1em; } #sidebar ul, .et_pb_widget ul{ } #sidebar li, .et_pb_widget li{ padding-bottom: 10px; list-style-type: none; } #sidebar h4, .et_pb_widget h4{ text-align: center; border-bottom: 2px solid #005D27; margin-bottom: 20px; } .single-post #main-content .container:before { display: none; } /*____________________________________________________________________________________________________________*/ /* Icône pour Adaptation des arbres */ .vdh-categories h4{ text-align: center; border-bottom: 2px solid #005D27; margin-bottom: 20px; text-transform: uppercase; } .vdh-categories-table { width: 100%; /* Utilisation maximale de l’espace */ max-width: 100%; /* Ne dépasse pas son conteneur */ border-collapse: collapse; table-layout: fixed; /* Fixe les largeurs des colonnes */ border: none!important; } .vdh-categories-table td { padding: 8px; vertical-align: middle; } .category-icon { width: 40px; /* Largeur fixe pour l'icône */ text-align: center; } .category-icon .material-icons { font-size: 25px; /* Taille de l'icône */ color: #17a345; } .category-name { width: auto; /* Prend tout l’espace disponible */ word-break: break-word; /* Retour à la ligne propre */ overflow-wrap: break-word; } .category-name a { font-weight: 700; text-decoration: none; color: #333; font-size: 16px; display: block; line-height: 1.3; } .category-name a:hover{ color: #17a345; } .category-count { width: 30px; /* Largeur fixe pour le nombre */ text-align: right; font-weight: bold; white-space: nowrap; /* Empêche le nombre d'aller à la ligne */ color: #17a345; } .vdh-categories-table tr td { border-top: 0px solid #eee!important; padding: 5px 0px 5px 0px; } .nav li ul { border-top: 3px solid #005D27!important; } .swf-breadcrumb { font-size: 0.9em; margin: 20px 0; color: #666; } .swf-breadcrumb a { color: #005D27; text-decoration: none; } .swf-breadcrumb a:hover { text-decoration: underline; } .swf-breadcrumb .sep { margin: 0 6px; color: #999; } .swf-breadcrumb .current { color: #333; } /*______________________________________________________SECTION Histoire______________________________________________________*/ .histoire p{ text-align: justify; } /*______________________________________________________SECTION CONTACT______________________________________________________*/ .section-contact, .section-contact a{ color: white; } .titre-contact{ margin-bottom: 10px !important; } .section-contact h2{ color: #17a345!important; text-align: center; font-size: 2.5em; } .section-contact h3{ color: rgba(255,255,255,0.8)!important; text-align: center; text-transform: none!important; } .fondvert .et_pb_contact_form_container .input { color: white!important; } .section-contact .et_pb_blurb .et-pb-icon { color: #17a345!important; } .et_pb_contact_form_0.et_pb_contact_form_container .input[type="checkbox"] + label{ font-weight: 300; } .et_pb_contact p input[type="checkbox"]:checked + label i::before{ color: #005d27!important; } .adresse-box, .adresse-box a{ color: white!important; } .et_pb_main_blurb_image { margin-bottom: 0px; } .et_pb_blurb_description p{ padding-bottom: 0px!important; } .et_pb_blurb .et-pb-icon { font-size: 40px!important; } /*______________________________________________________SECTION NEWSLETTER______________________________________________________*/ .section-news{ color: #fff!important; } .newsletter h2{ color: #005D27!important; font-size: 2em; } .newsletter p{ color: #353535!important; } .et_pb_contact_field_options_wrapper,.et-db #et-boc .et-l .et_pb_contact_form_dov_3474_9 .input[type="checkbox"] + label{ color: #fff!important; } .et_pb_contact_form_dov_3474_9 .input[type="checkbox"] + label{ color: #fff!important; font-weight: 300; } /* ============================================================ COMMENTAIRES – RESET + STYLE BOUTON RÉPONSE ============================================================ */ /* 1. RESET Divi (position forcée) */ .comment-reply-link { position: static !important; top: auto !important; right: auto !important; display: inline-block !important; } /* 2. CONTENEUR (évite alignement bizarre Divi) */ .reply-container { display: block; margin-top: 6px; } /* 3. STYLE BOUTON */ .comment-reply-link { padding: 4px 10px; font-size: 13px; font-weight: 600; color: #005D27; text-decoration: none; background: transparent; border: 1px solid rgba(0, 93, 39, 0.4); border-radius: 14px; line-height: 1; transition: all 0.2s ease; } /* 4. HOVER */ .comment-reply-link:hover { background: #005D27; color: #fff!important; border-color: #005D27; } /*______________________________________________________SECTION BOX REALISATION______________________________________________________*/ .realisation{ background-color: #262626; } .titre-realisation{ margin-bottom: 10px !important; color: #17a345!important; } .realisation h2{ color: #17a345!important; text-align: center; margin-bottom: 10px !important; font-size: 2.5em; } .realisation h3{ text-align: center; } .realisation p{ font-weight: 600; text-align: center; } .realisation .et_pb_portfolio_item .et_pb_module_header a{ color: #17a345 !important; font-weight: 700; } .realisation .et_pb_button { color: #ffffff !important; border-width: 5px !important; border-color: #ffffff!important; border-radius: 100px; letter-spacing: 2px; font-weight: 700 !important; text-transform: uppercase !important; text-align: center; } .et_project_categories{ font-style: italic; } .ligne{ margin: 0 auto!important; padding: 0!important; width: 100%; height: 6px; background: url(images/ligne.png) repeat-x; } /*______________________________________________________SECTIONS______________________________________________________*/ /*______________________________________________________ACCUEIL______________________________________________________*/ .accueil h1{ text-shadow: 2px 2px rgba(0,0,0, .2); color: #fff!important; line-height: 1.3em;; text-transform: uppercase; letter-spacing: 0.9px; } .accueil h2,.et_pb_fullwidth_header_subhead,.home-subtitle{ font-size: 1em!important; font-weight: bold; color: #fff!important; } .hero-separator { text-align: center; font-size: 28px; color: #ffffff; opacity: 0.7; } .line-break { display: block; } .accueil-one-page{ height: 100%; background-size: cover; } .accueil-image-double .et_pb_column_1_2 { width: 50%!important; } .accueil-image-double .et_pb_column { margin-right: 0%!important; max-width: 1000px; } .section-imgdouble .et_pb_row.et_pb_row_fullwidth, .section-imgdouble .et_pb_specialty_fullwidth > .et_pb_row { width: 100% !important; max-width: 100% !important; } .accueil img{ } .accueil span{ font-size: 1.04em; } @media all and (min-width: 320px) and (max-width: 980px){ .et_pb_fullwidth_header .et_pb_fullwidth_header_scroll { display: none; } } .swf-banner-content { max-width: 1200px; } .swf-banner-categories { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; opacity: 0.9; } .swf-cat-line { display: block; } .swf-sep { margin: 0 6px; } .swf-banner-title { margin: 0 0 10px 0; } .swf-banner-meta { font-size: 14px; opacity: 0.9; text-transform: uppercase; } /*______________________________________________________SECTION taille______________________________________________________*/ .taille{ padding-bottom: 5%!important; } .taille h2{ font-size: 2em!important; line-height: 1.5em!important; color: #005D27!important; } .et_pb_toggle { border: 1px solid #17a345; } .et_pb_toggle_open { padding: 20px; background: rgba(255,255,255,0.95); } .et_pb_toggle_close h5.et_pb_toggle_title { color: #005D27; } .et_pb_toggle_open h5.et_pb_toggle_title { color: #005D27; } .et_pb_toggle_close { background-color: rgba(255,255,255,0.95); } /*_______________________________________________________________REALISATIONS____________________________________________________________*/ .et_full_width_portfolio_page #left-area { width: 100% !important; } p.et_pb_gallery_caption { display: none!important; } /*______________________________________________________SECTIONS IMG DOUBLE______________________________________________________*/ .section-imgdouble, .accueil-image-double{ margin: 0 auto!important; padding: 0!important; } .section-imgdouble h2{ color: white!important; } @media all and (min-width: 320px) and (max-width: 980px) { /* Slider Module */ .et_pb_column { margin-bottom: 0px; } } /*_______________________________________________________________________________________________________________________________*/ .section-textx2-img3{ padding-bottom:60px!important; } .et_pb_slide_content p:last-of-type { text-align: center; } .diplom .et_pb_slide_content p{ text-align: justify; } .galerie{ background-color: black!important; } .adressefooter{ color: #17a345; } .iconeadresse{ background: url(images/adresse.svg) no-repeat; width: 25px; height: 25px; float:left; margin-right: 10px; } .iconeport{ background: url(images/port.svg) no-repeat; width: 25px; height: 25px; float:left; margin-right: 10px; } .iconefix{ background: url(images/fix.svg) no-repeat; width: 25px; height: 25px; float:left; margin-right: 10px; } .iconemail{ background: url(images/mail.svg) no-repeat; width: 25px; height: 25px; float:left; margin-right: 10px; } .personne p { font-size: .7em; line-height: 16px; } #youtube-channel-2{ margin-bottom:0px!important; } .youtube_channel.responsive .ytc_video_container { margin-bottom: 40px!important; } .youtube_channel.responsive .ytc_video_container h5{ margin-top: 10px!important; } .youtube_channel.responsive .ytc_video_container p{ color: #666!important; font-size:0.8em!important; } .bouton { display:block!important; margin: 0 auto!important; color: #fff !important; border-radius: 100px; font-weight: 700 !important; text-transform: uppercase !important; width:200px; font-size: 0.8em; background:#005D27 !important; padding:8px; text-align: center; } .bouton a{ border: 0px solid!important; padding: 1em 0.4em!important; } .mfp-title { display: none!important; } .bouton .et_pb_widget a { color: #fff!important; } /* .comment_area .comment-reply-link — ancienne règle positionnement supprimée (remplacée par #comments .comment-reply-link) */ /* ================================================== VIDEO YOUTUBE ================================================== */ /* Container */ .swf-youtube-widget{ display: grid; gap: 28px; /* espace entre les vidéos */ } /* Carte */ .swf-youtube-item{ display: block; text-decoration: none; transition: transform .2s ease; } .swf-youtube-item:hover{ transform: translateY(-4px); } /* Miniature */ .swf-youtube-thumb{ position: relative; display: block; overflow: hidden; border-radius: 14px; } /* Image */ .swf-youtube-thumb img{ width: 100%; height: auto; display: block; transition: transform .4s ease, opacity .3s ease; } /* Overlay sombre */ .swf-youtube-thumb::after{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity .3s ease; } /* Icône Play */ .swf-youtube-thumb::before{ content: ""; position: absolute; width: 60px; height: 60px; background: rgba(255,255,255,0.9); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; transition: all .3s ease; display: flex; align-items: center; justify-content: center; } /* Triangle */ .swf-youtube-thumb::before{ content: "▶"; font-size: 24px; color: #0f6b35; /* ton vert */ } /* Hover effects */ .swf-youtube-item:hover .swf-youtube-thumb::after{ opacity: 1; } .swf-youtube-item:hover .swf-youtube-thumb::before{ opacity: 1; transform: translate(-50%, -50%) scale(1); } .swf-youtube-item:hover img{ transform: scale(1.05); opacity: 0.9; } /* Titre */ .swf-youtube-title{ display: block; margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #1f1f1f; transition: color .2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .swf-youtube-item:hover .swf-youtube-title{ color: #0f6b35; } /* Lien chaîne */ .swf-youtube-more{ text-align: right; margin-top: 10px; } .swf-youtube-more a{ font-weight: 600; color: #0f6b35; text-decoration: none; } .swf-youtube-more a:hover{ text-decoration: underline; } /* ================================================== FOOTER - GOOGLE AVIS (class : google-avis) ================================================== */ .footer-title { color: #fff !important; text-align: center; font-size: 2.5em; line-height: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; /* optionnel pour un rendu plus pro */ } /*______________________________________________________Footer - Avis google______________________________________________________*/ .google-avis .et_pb_row{ width: 90%; max-width: 1920px; } .google-avis .ti-inner{ max-width: 300px; } .google-avis { background-color: #222; } .ti-widget.ti-goog.ti-custom-stars .ti-star:not(.e):not(.h) { background: #17a345!important; } .ti-widget.ti-goog .ti-widget-container .ti-name{ color: #fff!important; } .ti-widget.ti-goog .ti-rating-text strong:not(.ti-rating-large), .ti-widget.ti-goog .ti-rating-text span strong, .ti-widget.ti-goog .ti-footer strong:not(.ti-rating-large){ color: #fff!important; } /*______________________________________________________ Trustindex - Compatibilité nouveau rendu étoiles ______________________________________________________*/ .google-avis .ti-stars img.ti-star{ filter: brightness(0) saturate(100%) invert(41%) sepia(94%) saturate(531%) hue-rotate(92deg) brightness(94%) contrast(89%); } /* Nom entreprise / texte */ .google-avis .ti-name, .google-avis .ti-rating-text, .google-avis .ti-rating-text strong, .google-avis .ti-footer strong{ color:#fff !important; } /* Fond widget */ .google-avis{ background:#222; } /* Largeur */ .google-avis .et_pb_row{ width:90%; max-width:1920px; } .google-avis .ti-inner{ max-width:300px; } .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn { display: inline-block; background-color: #ffffff!important; padding: 9.5px 17.5px; border-radius: 5px; border-style: solid; border-color: #767676; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; color: #000000 !important; font-weight: 600; text-decoration: none !important; line-height: 1; font-size: 14px; } /*______________________________________________________Footer - Avis google ANCIEN______________________________________________________*/ #main-footer .container{ width: 90%; max-width: 1920px; } /*______________________________________________________Footer final info site______________________________________________________*/ .vh-footer{ background-color: #000000; margin-top: 0px; margin-bottom: 0px; padding-top: 0px!important; padding-bottom: 0px!important; } .vh-footer p{ color:#fff } .vh-footer-bottom, .vh-footer-links{ text-align:center; font-size:14px; margin:5px 0; } .vh-footer-links a{ opacity:0.8; transition:opacity .3s ease; } .vh-footer-links a:hover{ opacity:1; } /* ================================================== TEMPETE – basé sur ta structure exacte (row_1 / row_2) ================================================== */ /* Section : respiration */ .et_pb_section.tempete{ padding: 20px 0 !important; } /* Row titre (row_1) : largeur + centrage */ .et_pb_section.tempete .et_pb_row_1{ width: 90% !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Titre H2 : centrage + marge */ .et_pb_section.tempete .et_pb_row_1 h2{ text-align: center !important; margin: 0 0 12px !important; letter-spacing: 0.02em; } /* Petit pictogramme "feuille" : centré */ .et_pb_section.tempete .et_pb_row_1 .et_pb_image.feuille{ text-align: center !important; margin: 0 auto 30px !important; } .et_pb_section.tempete .et_pb_row_1 .et_pb_image.feuille .et_pb_image_wrap{ display: inline-block !important; } /* Row contenu (row_2) : largeur + centrage */ .et_pb_section.tempete .et_pb_row_2{ width: 90% !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; } /* Colonne texte (gauche) : padding à droite */ .et_pb_section.tempete .et_pb_row_2 .et_pb_column_2{ padding-right: 28px !important; } /* Texte : lisibilité */ .et_pb_section.tempete .et_pb_row_2 .et_pb_text p{ line-height: 1.7 !important; margin: 0 0 16px !important; } /* H3 : rythme */ .et_pb_section.tempete .et_pb_row_2 .et_pb_text h3{ margin: 0 0 10px !important; line-height: 1.2 !important; } /* Colonne image (droite) : alignement propre */ .et_pb_section.tempete .et_pb_row_2 .et_pb_column_3{ display: flex !important; align-items: flex-start !important; justify-content: center !important; } /* Image : rendu “pro” */ .et_pb_section.tempete .et_pb_row_2 .et_pb_column_3 img{ width: 100% !important; height: auto !important; display: block !important; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); } /* Responsive */ @media (max-width: 980px){ .et_pb_section.tempete{ padding: 50px 0 !important; } .et_pb_section.tempete .et_pb_row_1, .et_pb_section.tempete .et_pb_row_2{ width: 92% !important; max-width: 720px !important; } .et_pb_section.tempete .et_pb_row_2 .et_pb_column_2{ padding-right: 0 !important; margin-bottom: 22px !important; } .et_pb_section.tempete .et_pb_row_2 .et_pb_column_3{ display: block !important; } .et_pb_section.tempete .et_pb_row_2 .et_pb_column_3 img{ border-radius: 8px; } } /* ========================================= TEMPETE – Ajustement entre 2 sections (section 1 = et_pb_section_2 / section 2 = et_pb_section_3) ========================================= */ /* 1) Titres H3 : jamais justifiés, toujours à gauche */ .et_pb_section.tempete .et_pb_text h3{ text-align: left !important; } /* 2) Resserre l’espace ENTRE les 2 sections tempete */ .et_pb_section.et_pb_section_2.tempete{ padding-bottom: 35px !important; /* avant 70px */ } .et_pb_section.et_pb_section_3.tempete{ padding-top: 35px !important; /* avant 70px */ } /* Option : si tu veux garder de l’air en haut de la 1ère et en bas de la 2ème */ .et_pb_section.et_pb_section_2.tempete{ padding-top: 70px !important; } .et_pb_section.et_pb_section_3.tempete{ padding-bottom: 70px !important; } /* Mobile : resserre aussi */ @media (max-width: 980px){ .et_pb_section.et_pb_section_2.tempete{ padding-bottom: 25px !important; } .et_pb_section.et_pb_section_3.tempete{ padding-top: 25px !important; } } /* ========================================= ARTICLES ========================================= */ .single-post .container { max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; } .single-post .entry-content h2 { margin-top: 50px; margin-bottom: 25px!important; } .single-post .entry-content h3 { margin-top: 40px; } .single-post .entry-content h3 { position: relative; padding-left: 25px; /* espace pour le bullet */ } .single-post .entry-content h3::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; background-color: #005D27; border-radius: 50%; } .single-post .entry-content h3 + p, .single-post .entry-content h3 + ul, .single-post .entry-content h3 + ol, .single-post .entry-content h3 + .wp-block-media-text, .single-post .entry-content h3 + .wp-block-image { padding-left: 25px; } .single-post .entry-content .wp-block-verse { font-family: inherit !important; /* même typo que le texte */ font-style: normal !important; /* enlève l’italique */ text-align: center; color: #17a345; /* ton vert principal */ margin-bottom: 40px!important; } /* ============================================================ META ARTICLE PERSONNALISÉ (single.php) ============================================================ */ .post-meta-custom { margin-top: 10px; margin-bottom: 20px; color: #666; font-size: 0.95em; line-height: 1.5; } .post-meta-custom a { color: #666; text-decoration: none; } /*______________________________________________________BLOG — LAYOUT GLOBAL (colonnes)______________________________________________________*/ /* Stratégie : reset total du système Divi (gutters, widths inline, float) scopé uniquement à .blog .bloc-article — aucun impact sur le reste du site. ───────────────────────────────────────────────────────────────────────────── Divi injecte des widths via inline