/*
 Theme Name:  Nos Vignes
 Theme URI:    https://divilife.com
 Description:  Child Theme for Divi
 Author:       Tim Strifler
 Author URI:   https://divilife.com
 Template:     Divi
 Version:      1.0.0
*/

/*****Add any custom CSS below this line*****/

/*====== HOME =========*/
/* =========================================================
   SECTION HERO – NOS VIGNES
   ========================================================= */
:root {
  --nv-primary: #314e2c;  /* vert profond terroir */
  --nv-accent: #b43b3b;   /* rouge vin */
  --nv-sand: #f6f1e9;     /* beige papier */
}

/* ===== Structure principale ===== */
.nv-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 80vh;
  color: #fff;
  text-align: center;
  background-color: #111;
  overflow: hidden;
}

/* Image de fond (à remplacer par ACF image hero) */
.nv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/wp-content/uploads/2025/hero-vigne-coucher-soleil.jpg') center/cover no-repeat;
  opacity: 0.45;
  z-index: 0;
}

/* Contenu central */
.nv-hero-inner {
  position: relative;
  z-index: 1;
  padding: 2rem;
  margin-inline: auto;
}

/* Badge au-dessus du titre */
.nv-badge {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  margin-bottom: 1rem;
}

/* Titre principal */
.nv-hero h1 {
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0.2px;
  line-height: 1.2;
  margin-bottom: 1rem;
	color: #fff;
}

/* Sous-titre */
.nv-hero p.lead {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}

/* Boutons */
.nv-hero .btn {
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: 50px;
  transition: all 0.2s ease-in-out;
}

.nv-hero .nv-cta-accent {
  background-color: var(--nv-accent);
  border-color: var(--nv-accent);
  color: #fff !important;
}
.nv-hero .nv-cta-accent:hover {
  background-color: #992f2f;
  border-color: #992f2f;
}

.nv-hero .btn-outline-light {
  border-width: 2px;
  color: #fff;
}
.nv-hero .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .nv-hero {
    min-height: 70vh;
    padding: 2rem 1rem;
  }
  .nv-hero-inner {
    padding: 1.5rem;
  }
  .nv-hero .d-flex {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ================================
   Section concept + cartes résumés
   ================================ */
:root{
  --nv-primary:#314e2c;
  --nv-accent:#b43b3b;
  --nv-sand:#f6f1e9;
}

/* Section claire générique */
.nv-section { padding: 72px 0; }
.nv-section-light { background: #fff; }

/* Intro centrée */
.nv-concept-intro {margin: 0 auto 2rem; text-align: center; }
.nv-concept-intro .text-muted { color: #6c757d; }

/* Ligne des 3 étapes */
.nv-etapes { row-gap: 2rem; }

/* Colonnes en hauteur égale (fallback au cas où) */
.nv-etapes .et_pb_column {
  display: flex;
}
.nv-etapes .et_pb_module {
  width: 100%;
}

/* Carte Résumé (Blurb) */
.nv-resume.et_pb_blurb {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  padding: 1.75rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nv-resume.et_pb_blurb:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Titre & texte du Résumé */
.nv-resume .et_pb_module_header {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.nv-resume .et_pb_blurb_description {
  color: #6c757d;
  margin: 0;
}

/* Pastille numérotée avant chaque Résumé (1,2,3) */
.nv-resume.et_pb_blurb {
  position: relative;
  padding-top: 4.2rem; /* place pour la pastille */
}
.nv-resume.et_pb_blurb::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 1.75rem;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--nv-sand);
  border: 1px solid #e9ecef;
}

/* Chiffre dans la pastille (par nth-child de la colonne) */
.nv-etapes .et_pb_column:nth-child(1) .nv-resume.et_pb_blurb::after { content: "1"; }
.nv-etapes .et_pb_column:nth-child(2) .nv-resume.et_pb_blurb::after { content: "2"; }
.nv-etapes .et_pb_column:nth-child(3) .nv-resume.et_pb_blurb::after { content: "3"; }

.nv-resume.et_pb_blurb::after {
  position: absolute;
  top: 1rem;
  left: 1.75rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--nv-primary);
}

/* Bouton "Voir les formules" style outline sobre */
.nv-btn-outline .et_pb_button {
  border: 2px solid #dee2e6;
  background: transparent;
  color: #343a40;
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  font-weight: 600;
}
.nv-btn-outline .et_pb_button:hover {
  border-color: #adb5bd;
  background: #f8f9fa;
}

/* Responsive */
@media (max-width: 980px){
  .nv-etapes .et_pb_column { display:block; }
  .nv-resume.et_pb_blurb { margin-bottom: 1rem; }
}
/*=========== GENERIQUES ==================*/

.vertical-align 
{ 
	display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/**** grilles ====*/
.ch_grid { list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.ch_grid.nbcol_2 { grid-template-columns: repeat(2, 1fr); }
.ch_grid.nbcol_3 { grid-template-columns: repeat(3, 1fr); }
.ch_grid.nbcol_4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .ch_grid.nbcol_3, .ch_grid.nbcol_4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .ch_grid, .ch_grid.nbcol_3, .ch_grid.nbcol_4 { grid-template-columns: 1fr; } }

.ch_grid_item {
  border:1px solid #e9ecef; border-radius:16px; overflow:hidden; background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column;
}
.ch_grid_item:hover { transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.06); }

.ch_grid_thumb .ratio-3x2 { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.ch_grid_content { padding:1rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.ch_grid_title { font-size:1.1rem; margin:0; }
.ch_grid_title a { text-decoration:none; color:inherit; }
.ch_grid_excerpt p { margin:.25rem 0 0; color:#6c757d; }

.ch_grid_actions { margin-top:auto; display:flex; gap:.5rem; }
.ch_grid_actions .btn { border-radius:10px; padding:.55rem 1rem; font-weight:400; }


.ch_grid_actions .btn.btn-outline-secondary {
	color: #6c757d;
	border: solid 1px #6c757d;
}

.ch_grid_actions .btn.nv-cta-primary {
	background-color: #314e2c;
	border: solid 1px #314e2c;
	color: #fff;
}

/*============== CSS PAGES =====================*/
/* ============ Variables (ajuste au besoin) ============ */
:root{

  --gap: 2.2rem;
  --brand: #7b2f2f;       /* bordeaux Nos Vignes */
  --ink: #1f2937;
  --muted:#6b7280;
  --band:#faf9f7;         /* bandeau très léger */
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* ========= Conteneurs de section ========= */
.et_pb_section.ch_section_main_content { 
  padding-top: clamp(1.2rem, 2vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.et_pb_section.ch_section_main_content .et_pb_row,
.et_pb_section.ch_section_cta .et_pb_row,
.et_pb_section.ch_section_header_titre .et_pb_row,


/* ========= 1) HEADER : bandeau + resserrer + hiérarchie ========= */
.et_pb_section.ch_section_header_titre,
.et_pb_section.ch_ssection_header_titre{
  background: linear-gradient(180deg, var(--band), #fff 80%);
  border-bottom: 1px solid #eee;
  padding-top: clamp(1.2rem, 3vw, 2.2rem);
  padding-bottom: clamp(.6rem, 2vw, 1rem);
}
.ch_section_header_titre h1,
.ch_ssection_header_titre h1{
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  line-height: 1.1;
  letter-spacing: .2px;
  margin-bottom: .4rem;
  color: var(--ink);
}
.ch_section_header_titre .ch_cat_accroche,
.ch_ssection_header_titre .ch_cat_accroche{
  tmp_max-width: 70ch;
  color: var(--muted);
  margin-top: .2rem;
}

/* ========= 2) GRILLE : 60/40 + image “qui porte” ========= */
/* passer la row en grille souple */
.tmp_et_pb_section.ch_section_main_content .et_pb_row{
  display: grid;
  grid-template-columns: 1.15fr .85fr; /* 60/40 */
  gap: var(--gap);
  align-items: start;
}

/* colonne texte */
.ch_section_main_content .ch_cat_description{
  font-size: 1.06rem;
  line-height: 1.72;
}
.ch_section_main_content .ch_cat_description h3{
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  tmp_margin: .4rem 0 .6rem;
}
.ch_section_main_content .ch_cat_description p + h3{ margin-top: 1.2rem; }
/* puces plus denses et lisibles */
.tmp_ch_section_main_content .ch_cat_description li{
  margin: .3rem 0 .3rem 1.1rem;
}
.ch_section_main_content .ch_cat_description li::marker{
  color: var(--brand);
}

/* colonne image : agrandir, déborder, shadow, sticky */
.ch_col_main_image .et_pb_code_inner{
  /* permet de gérer les débords sans casser Divi */
  position: relative;
}
.ch_col_main_image img{
  display:block;
  tmp_width: 110%;           /* léger débord pour “remplir” l’écran */
  tmp_max-width: none;
  tmp_margin-left: -10%;     /* décale vers la droite */
  border-radius: 16px;
  box-shadow: var(--shadow);
}
@media (min-width: 981px){
  .ch_col_main_image{ position: sticky; top: 96px; } /* reste en vue au scroll */
}

/* ========= 3) CTA : bande pleine largeur + boutons visibles ========= */
.et_pb_section.ch_section_cta{
  background: radial-gradient(1200px 400px at 20% 0%, #fff 0%, var(--band) 100%);
  border-top: 1px solid #eee;
  tmp_padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(2rem, 4vw, 3rem);
}
.tmp_ch_section_cta .et_pb_row{
  display:flex; 
  gap:1rem; 
  flex-wrap:wrap; 
  align-items:center; 
  justify-content:center;
}
.ch_section_cta .et_pb_button, 
.ch_section_cta a.nv-btn{
  display:inline-block; 
  padding:.9rem 1.2rem; 
  border-radius:999px; 
  font-weight:700;
}
.ch_section_cta .nv-btn-primary{ background:var(--brand); color:#fff; }
.ch_section_cta .nv-btn-ghost{ border:1px solid var(--ink); color:var(--ink); }

/* ========= Mobile : revenir à 1 colonne, enlever débord ========= */
@media (max-width: 980px){
  .et_pb_section.ch_section_main_content .et_pb_row{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .ch_col_main_image img{
    width: 100%;
    margin: 0;
  }
}