/*!
Theme Name: Biosynthez
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: biosynthez
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Biosynthez is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

/* =========================================
   БАЗОВЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ
   ========================================= */
:root {
    --primary-green: #149a42;
    --dark-green-bg: #149a42;
    --dark-blue: #212e3e;
    --dark-btn: #354251;
    --text-dark: #333333;
    --text-light: #666666;
    --text-light-alt: #f0f0f0;
    --bg-light: #fafafa;
    --white: #ffffff;
    --black: #000000;
    --light-grey-bg: #f5f5f5;
    
    /* Шрифты */
    --font-heading: 'Noto Serif', serif;
    --font-body: 'Work Sans', sans-serif;
    --font-accent: 'ABeeZee', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   ОБЩИЕ ЭЛЕМЕНТЫ (Шапка, Кнопки)
   ========================================= */
   .site-logo-img {
    max-width: 120px; /* Отрегулируйте эту цифру под ваш логотип */
    height: auto;
    display: block;
}
header {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 20px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
}

nav ul {
    display: flex;
    gap: 30px;
    font-size: 0.95rem;
    font-weight: 400;
}

nav ul li a {
    font-family: var(--font-accent);
}

nav ul li a.active {
    font-weight: 600;
    border-bottom: 2px solid var(--white);
    padding-bottom: 3px;
}

.btn {
    background-color: var(--dark-btn);
    color: var(--white);
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    font-family: var(--font-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #242c36;
}

/* =========================================
   СТРАНИЦА КОНТАКТОВ (Contact) & FORM 7 FIXES
   ========================================= */

   /* =========================================
   ВЫРАВНИВАНИЕ ПОЛЕЙ КОНТАКТНОЙ ФОРМЫ
   ========================================= */

/* Заставляем все текстовые поля занимать 100% ширины контейнера */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
.wpcf7-form-control.wpcf7-text {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100%;
}

.contact-page {
    background-color: var(--primary-green); 
    padding: 100px 0;
    min-height: calc(100vh - 200px); 
    display: flex;
    align-items: center;
}

.contact-card {
    background-color: rgba(0, 0, 0, 0.15); 
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.contact-card__content {
    flex: 1.2; 
    padding: 60px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-card__title {
    font-family: var(--font-body); 
    font-size: 2.2rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.contact-card__text {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* --- Настройки самой формы --- */
.contact-form-glass {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Убираем лишние отступы у абзацев CF7, но НЕ прячем сами поля */
.contact-form-glass p {
    margin: 0 !important;
    padding: 0 !important;
}
.contact-form-glass br {
    display: none !important;
}

/* Настраиваем обертки CF7, чтобы они не ломали сетку */
.contact-form-glass .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-bottom: 15px; /* Равномерный отступ между полями */
}

/* Жесткая сетка для Имени и Фамилии (Grid) */
.form-row-glass {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 15px !important; /* <--- ДОБАВЬТЕ ВОТ ЭТУ СТРОЧКУ */
}

.form-row-glass .wpcf7-form-control-wrap {
    width: 100% !important;
    margin-bottom: 0 !important; /* Убираем нижний отступ, так как в сетке он не нужен */
}

/* Стеклянные инпуты (В стиле макета) */
.input-glass {
    width: 100% !important; 
    background-color: transparent !important; /* Убираем темный фон */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Делаем белую рамку ярче */
    border-radius: 4px !important; /* Чуть более острые углы */
    padding: 12px 18px !important; /* Подгоняем высоту полей */
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.input-glass::placeholder {
    color: rgba(255, 255, 255, 0.7) !important; /* Делаем текст подсказок более белым */
}

.input-glass:focus {
    border-color: rgba(255, 255, 255, 1) !important; /* При клике рамка становится чисто белой */
    background-color: rgba(255, 255, 255, 0.05) !important; /* Едва заметное белое свечение внутри */
}

.textarea-glass {
    resize: vertical;
    min-height: 120px;
}

/* Кнопка отправки */
.submit-glass {
    background-color: var(--white) !important;
    color: var(--text-dark) !important;
    font-family: var(--font-accent);
    font-weight: 600;
    border: none;
    border-radius: 4px !important;
    padding: 15px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100% !important; /* МАГИЯ ЗДЕСЬ: Кнопка на всю ширину формы */
    margin-top: 5px;
}

.submit-glass:hover {
    background-color: #f0f0f0 !important;
}

/* Сообщения CF7 об успехе/ошибке */
.wpcf7-response-output {
    margin: 15px 0 0 !important;
    padding: 10px !important;
    border-radius: 6px !important;
    color: var(--white) !important;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Правая часть с картинкой */
.contact-card__image {
    flex: 1;
    padding: 30px;
    display: flex;
    align-items: center; 
    justify-content: center; 
}

.contact-card__image img {
    width: 100%;
    max-width: 450px; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 8px;
}

/* =========================================
   ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ (Для страницы À Propos)
   ========================================= */
.expertise {
    background-color: #f8f9fa; 
    padding: 100px 0;
}

.expertise__content {
    display: flex;
    gap: 80px; 
    align-items: center;
}

.expertise__text { flex: 1; }
.expertise__image { flex: 1; }

.overtitle--dark { 
    color: var(--text-light); 
}

.quote {
    font-family: var(--font-body); 
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-light);
    margin-bottom: 30px;
    border-left: none; 
    padding-left: 0;
}

.team-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.squares-stack {
    display: flex;
    position: relative;
    width: 90px; 
    height: 40px;
}

.square {
    width: 40px;
    height: 40px;
    border-radius: 8px; 
    position: absolute;
    top: 0;
}

.square--1 { background-color: #c6ebd0; left: 0; z-index: 1; }
.square--2 { background-color: #63c780; left: 25px; z-index: 2; }
.square--3 { background-color: #00b03b; left: 50px; z-index: 3; }

.team-info__text {
    font-size: 0.85rem;
    color: var(--text-light);
}

.expertise__image-wrapper {
    background-color: #e2eef8; 
    padding: 40px;
    border-radius: 8px;
    display: flex; 
    justify-content: center;
    align-items: center;
}

.expertise__image-wrapper img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    max-width: 100%;
}

.title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}
.title--dark { color: var(--text-dark); }
.title--light { color: var(--white); }
.title--centered { text-align: center; }

.overtitle-alt {
    font-family: var(--font-accent);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}
.overtitle--light { color: var(--text-light); }
.overtitle--centered { text-align: center; }

.text { font-size: 16px; margin-bottom: 20px; }
.text--dark { color: var(--text-dark); }
.btn--dark { background-color: var(--dark-btn); color: var(--white); }
.btn--dark:hover { background-color: var(--black); }

/* =========================================
   ГЛАВНАЯ СТРАНИЦА (Accueil)
   ========================================= */
.hero {
    background-color: var(--bg-light);
    padding: 80px 0;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.hero-text { flex: 1; }
.hero-image { flex: 1; }

.overtitle {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-light);
    margin-bottom: 15px;
    display: block;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #4a5568;
    line-height: 1.2;
    margin-bottom: 30px;
}

.hero p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 1rem;
}

.hero-link {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-dark);
}

.hero-image img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.engagements {
    background-color: var(--primary-green);
    padding: 80px 0;
    text-align: center;
    color: var(--white);
}

.engagements h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}

.engagements h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: var(--white);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card-home {
    background-color: var(--white);
    color: var(--text-dark);
    padding: 40px 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.card-icon {
    width: 50px;
    height: 50px;
    background-color: #e2f0e6;
    color: var(--primary-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.2rem;
}

.card-home h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.card-home p {
    font-size: 0.9rem;
    color: var(--text-light);
}

.products {
    padding: 80px 0;
    background-color: var(--white);
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.products h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #4a5568;
}

.view-all {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    border-bottom: 1px solid var(--text-light);
    padding-bottom: 2px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-item:nth-child(even) {
    transform: translateY(40px); 
}

.product-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
}

.product-item h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.product-item p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* =========================================
   СТРАНИЦА УСЛУГ (Nos Services)
   ========================================= */
.philosophy .overtitle,
.cta .overtitle {
    color: var(--white);
}

.service-card-text h4 .icon img {
    width: 22px;             
    height: 22px;            
    vertical-align: middle;  
    object-fit: contain;     
    margin-top: -3px;        
    box-shadow: none;        
}

.services-intro {
    padding: 60px 20px 40px;
}

.services-intro h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #4a5568;
    margin-bottom: 15px;
    font-weight: 500;
}

.services-intro p {
    font-size: 1.05rem;
    color: var(--text-light);
    max-width: 700px;
}

.services-grid-section {
    padding-bottom: 80px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    row-gap: 60px;
}

.service-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.service-card-text h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #4a5568;
    margin-bottom: 10px;
    display: flex;
    align-items: center; 
    gap: 10px; 
}

.service-card-text h4 .icon {
    display: flex; 
    align-items: center;
}

.service-card-text h4 .icon img {
    width: 24px; 
    height: 24px;
    object-fit: contain;
    display: block; 
    margin: 0; 
}

.service-card-text p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* =========================================
   СТРАНИЦА О НАС (À Propos)
   ========================================= */
.card__progress-wrapper {
    margin-top: 40px; 
}

.card__progress-bar {
    width: 100%;
    height: 4px; 
    background-color: #e2e8f0; 
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.card__progress-fill {
    width: 100%; 
    height: 100%;
    background-color: var(--dark-blue); 
}

.card__progress-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-accent);
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card__icon img {
    width: 32px; 
    height: 32px;
    object-fit: contain;
    display: block;
}

.about-hero {
    background-color: var(--white);
    padding: 80px 0;
}

.about-hero__content {
    display: flex;
    gap: 60px;
    align-items: center;
}

.about-hero__images { flex: 1; }

.about-hero__image-collage {
    position: relative;
    width: 100%;
}

.about-hero__image img {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-hero__image--factory { width: 80%; }

.about-hero__image--algae {
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 50%;
    transform: translate(20%, 20%);
    border: 10px solid var(--white);
}

.about-hero__text { flex: 1; }

.philosophy {
    background-color: var(--dark-green-bg);
    padding: 80px 0;
}

.philosophy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 50px;
}

.philosophy__grid .card:nth-child(1) { grid-column: span 2; }
.philosophy__grid .card:nth-child(2) {
    grid-column: span 1; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    justify-content: center;
}
.philosophy__grid .card:nth-child(3) { grid-column: span 1; }
.philosophy__grid .card:nth-child(4) { grid-column: span 2; }

.card {
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.card--light { background-color: var(--white); }
.card--dark { background-color: var(--dark-blue); color: var(--white); }
.card--image { background-color: var(--white); padding: 0; display: flex; overflow: hidden; }

.card__icon { width: 40px; height: 40px; margin-bottom: 20px; color: var(--dark-green-bg); }
.card__icon--light { color: var(--white); }

.card__title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}
.card__title--dark { color: var(--text-dark); }
.card__title--light { color: var(--white); }

.card__text { font-size: 15px; }
.card__text--dark { color: var(--text-dark); }
.card__text--light { color: var(--text-light-alt); }

.card__content { flex: 1; padding: 40px; }
.card__image { flex: 1; }
.card__image img { width: 100%; height: 100%; object-fit: cover; }

.expertise {
    background-color: var(--white);
    padding: 80px 0;
}

.expertise__content {
    display: flex;
    gap: 60px;
    align-items: center;
}

.expertise__text { flex: 1; }
.expertise__image { flex: 1; }

.expertise__image-wrapper {
    background-color: var(--light-grey-bg);
    padding: 40px;
    border-radius: 4px;
}

.expertise__image-wrapper img {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.quote {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    color: var(--black);
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-green);
    padding-left: 20px;
}

.squares {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.squares__item { width: 30px; height: 30px; border-radius: 4px; }
.squares__item--dark { background-color: var(--primary-green); }
.squares__item--light { background-color: rgba(20, 154, 66, 0.5); }

.square-block {
  width: 100%; 
  aspect-ratio: 1 / 1; 
  background-color: #34d399; 
}

/* =========================================
   СТРАНИЦА ПАРТНЕРОВ (Nos Partenaires)
   ========================================= */
.partners-hero {
    padding: 80px 0 40px;
}

.partners-subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.partners-grid-section {
    padding-bottom: 80px;
}

.partners__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
    margin-top: 40px;
}

.partner-item {
    background-color: var(--white);
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); 
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0; 
}

.partner-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.partner-item__logo {
    width: 100%;
    height: 100px; 
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-item__logo img {
    max-width: 150px; 
    max-height: 80px;  
    object-fit: contain; 
    opacity: 0.7; 
    transition: opacity 0.3s ease;
}

.partner-item:hover .partner-item__logo img {
    opacity: 1; 
}

.partner-item__name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.partner-item__desc {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
}

.cta--partners {
    margin-top: 40px;
}

/* =========================================
   ПРИЗЫВ К ДЕЙСТВИЮ (CTA)
   ========================================= */
.cta {
    background-color: var(--primary-green);
    background-image: 
        linear-gradient(rgba(20, 154, 66, 0.85), rgba(20, 154, 66, 0.85)),
        url('images/Accueilbanner.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
    color: var(--white);
}

.cta-icon {
    font-size: 1.5rem;
    margin-bottom: 15px;
    opacity: 0.8;
    margin: 0 auto; 
    width: 60px;    
}

.cta h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta p {
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 1rem;
    opacity: 0.9;
}
/* =========================================
   КНОПКА "УЗНАТЬ БОЛЬШЕ" (ССЫЛКА)
   ========================================= */

.service-read-more {
    display: inline-block;
    margin-top: 15px;
    font-family: var(--font-accent);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none; /* Убираем стандартное подчеркивание ссылки */
    transition: all 0.3s ease;
}

/* Эффект при наведении на саму кнопку */
.service-read-more:hover {
    color: var(--text-dark); /* Меняем цвет при наведении */
    text-decoration: none;
}

/* Анимация стрелочки при наведении на всю карточку */
.service-card:hover .service-read-more {
    transform: translateX(8px);
}
/* =========================================
   ПОДВАЛ САЙТА (Footer)
   ========================================= */
   .footer-logo-img {
    max-width: 120px; /* Логотип в футере обычно чуть меньше, чем в шапке */
    height: auto;
    display: block;
    margin-bottom: 20px; /* Отступ до текста описания */
}
footer {
    background-color: var(--bg-light);
    padding: 60px 0 20px;
    border-top: 1px solid #eaeaea;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 одинаковые колонки */
    gap: 40px;
    margin-bottom: 50px;
    align-items: start; /* Выравниваем содержимое колонок по верхнему краю */
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 15px;
    display: block;
    color: var(--primary-green);
}

.footer-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    max-width: 250px;
}

.footer-col h5 {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.footer-col ul li { margin-bottom: 10px; }

.footer-col ul li a {
    font-size: 0.85rem;
    color: var(--text-light);
}

.footer-col ul li a:hover { color: var(--primary-green); }

.newsletter-text {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 15px;
}

.newsletter-form { display: flex; }

.newsletter-form input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-right: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.newsletter-form button {
    background-color: var(--dark-btn);
    color: var(--white);
    border: none;
    padding: 0 15px;
    cursor: pointer;
    font-size: 1rem;
}

.copyright {
    text-align: center;
    font-family: var(--font-accent);
    font-size: 0.7rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px solid #eaeaea;
    padding-top: 20px;
}

/* =========================================
   БУРГЕР МЕНЮ
   ========================================= */
.burger-menu {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.burger-menu span {
    width: 100%;
    height: 3px;
    background-color: var(--white);
    border-radius: 10px;
    transition: 0.3s;
}
/* =========================================
   ОТДЕЛЬНАЯ СТАТЬЯ / УСЛУГА (single.php)
   ========================================= */

/* Шапка статьи (зеленый фон) */
.single-hero {
    background-color: var(--primary-green);
    padding: 80px 0;
    color: var(--white);
}

.single-hero__container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.single-hero__text {
    flex: 1;
}

.single-hero__text .title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.single-hero__image {
    flex: 1;
}

.single-hero__image img {
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-height: 450px;
    object-fit: cover;
}

/* Секция контента */
.single-content-section {
    padding: 80px 0;
    background-color: var(--bg-light);
}

/* Обертка для текста: делаем её узкой (как в блогах), чтобы было удобно читать */
.single-content {
    max-width: 800px; 
    margin: 0 auto;
    background-color: var(--white);
    padding: 60px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

/* === СТИЛИ ДЛЯ ТОГО, ЧТО ВЫ ДОБАВЛЯЕТЕ ЧЕРЕЗ АДМИНКУ === */
.single-content p {
    margin-bottom: 25px;
}

.single-content h2, 
.single-content h3 {
    font-family: var(--font-heading);
    color: var(--primary-green);
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 40px 0; /* Отступы сверху и снизу от фото */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.single-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 30px;
}

.single-content li {
    margin-bottom: 10px;
}
/* =========================================
   ФИНАЛЬНЫЙ ЛОСК ДЛЯ ШАПКИ СТАТЬИ
   ========================================= */

/* Жестко выстраиваем в 2 колонки на ПК */
.single-hero__container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.single-hero__text {
    flex: 1;
    text-align: left; /* Строго по левому краю */
}

/* Делаем надзаголовок белым и полупрозрачным */
.single-hero__text .overtitle {
    color: rgba(255, 255, 255, 0.8) !important; 
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: block;
    letter-spacing: 2px;
}

.single-hero__text .title {
    line-height: 1.2;
    margin-bottom: 0;
}

/* Красиво оформляем картинку справа */
.single-hero__image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.single-hero__image img {
    width: 100%;
    max-width: 550px; /* Чтобы фото не было гигантским на больших мониторах */
    height: 380px;    /* Идеальные пропорции */
    object-fit: cover;
    border-radius: 12px; /* Чуть сильнее скругляем углы */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Глубокая красивая тень */
}
/* =========================================
   АДАПТИВНАЯ ШАПКА (ПК - ТЕКСТ, МОБ - С ФОТО)
   ========================================= */

.single-hero {
    background-color: var(--primary-green);
    padding: 100px 0;
    color: var(--white);
    text-align: center;
}

.single-hero__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

/* СКРЫВАЕМ ФОТО НА ПК */
.single-hero__image {
    display: none; 
}

.single-hero__text .overtitle {
    color: rgba(255, 255, 255, 0.8) !important; 
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: block;
    letter-spacing: 2px;
}

.single-hero__text .title {
    font-size: 3.5rem;
    line-height: 1.2;
}
/* =========================================
   АНИМАЦИИ ПОЯВЛЕНИЯ (FADE IN UP)
   ========================================= */

/* Класс для элементов, которые ждут, пока до них доскроллят */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px); /* Смещены вниз на 40px */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Этот класс будет добавляться скриптом, когда элемент появляется на экране */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0); /* Встают на свое место */
}

/* Анимация для главного экрана (срабатывает сразу без скролла) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-animate {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

.hero-animate-delay-1 {
    animation: fadeInUp 1s ease-out 0.3s forwards;
    opacity: 0;
}

.hero-animate-delay-2 {
    animation: fadeInUp 1s ease-out 0.6s forwards;
    opacity: 0;
}

/* =========================================
   АНИМАЦИИ ПРИ НАВЕДЕНИИ (HOVER EFFECTS)
   ========================================= */

/* 1. Карточки "Nos Engagements" (Легкое всплытие и тень) */
.card-home {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-radius: 12px; /* Если у вас еще нет скругления */
}

.card-home:hover {
    transform: translateY(-10px); /* Приподнимается на 10 пикселей вверх */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Появляется мягкая, дорогая тень */
}

/* 2. Фотографии продуктов (Элегантный зум) */
.product-item {
    overflow: hidden; /* Важно: чтобы при увеличении фото не вылезало за края */
    border-radius: 8px;
    cursor: pointer;
}

.product-item img {
    transition: transform 0.8s ease; /* Очень плавный переход (0.8 секунд) */
    will-change: transform;
    width: 100%;
    display: block;
}

.product-item:hover img {
    transform: scale(1.06); /* Картинка плавно приближается */
}

/* Эффект для текста под продуктом */
.product-item h4 {
    transition: color 0.3s ease;
}

.product-item:hover h4 {
    color: var(--primary-green); /* Заголовок продукта зеленеет при наведении */
}

/* 3. Текстовые ссылки ("Voir toute la collection", "En savoir plus") */
.view-all, .hero-link {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.view-all:hover, .hero-link:hover {
    transform: translateX(8px); /* Ссылка плавно сдвигается вправо, как бы приглашая кликнуть */
    opacity: 0.8;
}

/* 4. Главные кнопки (Кнопка в Hero и "Demander un devis") */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px); /* Кнопка чуть-чуть тянется к мышке */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Тень становится глубже */
}

/* =========================================
   СТИЛИ ДЛЯ NEWSLETTER (CONTACT FORM 7)
   ========================================= */

/* Убираем лишние отступы, которые CF7 добавляет автоматически */
.footer-col .wpcf7 p {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-newsletter-cf7 {
    display: flex; /* Выстраиваем в ряд */
    align-items: stretch;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Тонкая рамка */
    border-radius: 4px;
    overflow: hidden;
    max-width: 300px; /* Ограничиваем ширину */
}

/* Стили для поля ввода */
.footer-newsletter-cf7 .wpcf7-form-control-wrap {
    flex-grow: 1; /* Поле занимает всё свободное место */
}

.footer-newsletter-cf7 input[type="email"] {
    width: 100% !important;
    border: none !important;
    padding: 12px 15px !important;
    font-size: 0.9rem;
    background: transparent;
    outline: none;
}

/* Стили для кнопки-стрелочки */
.footer-newsletter-cf7 input[type="submit"] {
    background-color: var(--text-dark) !important; /* Цвет вашей темы */
    color: var(--white) !important;
    border: none !important;
    padding: 0 20px !important;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.footer-newsletter-cf7 input[type="submit"]:hover {
    background-color: var(--primary-green) !important; /* Цвет при наведении */
}

/* Скрываем спиннеры и сообщения об ошибках, чтобы не ломали футер */
.footer-col .wpcf7-response-output {
    margin: 10px 0 0 !important;
    font-size: 0.8rem;
    border: none !important;
    padding: 0 !important;
}
/* =========================================
   АДАПТИВНОСТЬ (Планшеты до 992px)
   ========================================= */
@media (max-width: 992px) {
    /* --- ШАПКА --- */
    .burger-menu { display: flex; }
    
    .header-content {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }
    .contact-card {
        display: flex;
        flex-direction: column;
    }
    
    .contact-card__image {
        order: -1; /* Минус 1 заставляет этот блок встать самым первым */
        padding-bottom: 0; /* Убираем лишний отступ снизу, чтобы картинка была ближе к заголовку */
    }
    
    .contact-card__content {
        order: 2; /* Текст и форма идут вторыми */
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 280px;
        height: 100vh;
        background-color: var(--primary-green);
        padding: 100px 30px;
        transition: 0.4s;
        box-shadow: -10px 0 30px rgba(0,0,0,0.2);
        z-index: 1000;
        display: block;
    }

    nav.active { right: 0; }

    nav ul {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }

    nav ul li a { font-size: 1.2rem; }

    .burger-menu.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
    .burger-menu.active span:nth-child(2) { opacity: 0; }
    .burger-menu.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

    /* --- СЕТКИ --- */
    .cards-grid, .products-grid, .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-content, .about-hero__content, .expertise__content, 
    .contact__grid, .partners__grid, .contact-card {
        flex-direction: column;
        text-align: center;
    }

    .products-header {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .philosophy__grid { grid-template-columns: 1fr; }
    .philosophy__grid .card:nth-child(1), .philosophy__grid .card:nth-child(2),
    .philosophy__grid .card:nth-child(3), .philosophy__grid .card:nth-child(4) {
        grid-column: span 1;
    }

    /* --- ФУТЕР --- */
    .footer-content {
        grid-template-columns: repeat(2, 1fr); /* На планшетах делаем 2 ряда по 2 колонки */
        text-align: left; /* Возвращаем выравнивание влево, так как колонок стало больше */
        gap: 50px 30px;
    }
    .footer-col { 
        align-items: flex-start; 
    }
    .footer-desc { margin: 0 auto; }
    .newsletter-form { justify-content: center; width: 100%; max-width: 400px; }
    .footer-col ul { padding: 0; }
    
    .contact-card__content { padding: 40px; }
}

/* =========================================
   ОТДЕЛЬНАЯ СТАТЬЯ / УСЛУГА (single.php)
   ========================================= */
   .single-hero__container {
        flex-direction: column;
        text-align: center;
    }
    .single-hero__text .title {
        font-size: 2.5rem;
    }

    /* =========================================
   ФИНАЛЬНЫЙ ЛОСК ДЛЯ ШАПКИ СТАТЬИ
   ========================================= */

   .single-hero__container {
        flex-direction: column !important;
        text-align: center;
    }
    .single-hero__text {
        text-align: center;
    }
    .single-hero__image {
        justify-content: center;
        margin-top: 40px;
    }

    /* МОБИЛЬНАЯ ВЕРСИЯ (до 992px) */
@media (max-width: 992px) {
    .single-hero {
        padding: 60px 0;
    }

    .single-hero__text .title {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    /* ПОКАЗЫВАЕМ ФОТО НА МОБИЛКАХ */
    .single-hero__image {
        display: block;
        width: 100%;
        max-width: 450px;
        margin-top: 20px;
    }

    .single-hero__image img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
}

/* =========================================
   АДАПТИВНОСТЬ (Телефоны до 600px)
   ========================================= */
@media (max-width: 600px) {
    .cards-grid, .products-grid, .services-grid, .partners__grid {
        grid-template-columns: 1fr;
    }

    .hero h1 { font-size: 2.2rem; }
    .cta h2 { font-size: 2rem; }
    .card--image { flex-direction: column; }
    .product-item:nth-child(even) { transform: translateY(0); }

    /* --- ФОРМА CONTACT FORM 7 НА МОБИЛКЕ --- */
    .contact-card__title { font-size: 1.8rem; }
    .contact-card__content { padding: 30px 20px; text-align: left; }
    .contact-card__image { padding: 20px; }
    
    .submit-glass {
        width: 100%; 
        margin-top: 10px;
    }
    
    .form-row-glass {
        grid-template-columns: 1fr !important; /* На телефонах поля в столбик */
    }
    .single-content {
        padding: 30px 20px;
        font-size: 1rem;
    }
    .single-hero {
        padding: 50px 0;
    }
    .single-hero__text .title {
        font-size: 2rem;
    }
    .single-hero__text .title {
        font-size: 2rem;
    }
.footer-content {
        grid-template-columns: 1fr; /* На телефонах 1 колонка */
        text-align: center;
    }
    .footer-col { 
        align-items: center; 
    }
    .footer-newsletter-cf7 {
        max-width: 100%; /* Форма растягивается на всю ширину экрана на телефонах */
        width: 100%;
    }

    .footer-newsletter-cf7 input[type="email"] {
        padding: 15px !important; /* Увеличиваем отступы, чтобы было удобно попадать пальцем */
        font-size: 1rem; /* Делаем шрифт чуть крупнее, чтобы телефон не пытался "зумить" страницу */
    }

    .footer-newsletter-cf7 input[type="submit"] {
        padding: 0 25px !important; /* Делаем кнопку шире для удобного нажатия */
        font-size: 1.4rem; /* Увеличиваем саму стрелочку */
    }
    
    /* Если сообщения об успехе/ошибке появляются, даем им немного воздуха снизу */
    .footer-col .wpcf7-response-output {
        margin-bottom: 20px !important;
    }
    }