/*
Theme Name: Champs Bleutes
Theme URI: https://champs-bleutes.avril-forge.com
Description: Theme enfant Storefront pour Champs Bleutes (e-commerce eucalyptus). Charte : fond blanc, vert sauge dominant, blocs bleu ciel / rose, angles vifs (pas d'arrondis), serif elegant, perf prioritaire.
Author: Champs Bleutes
Template: storefront
Version: 0.2.1
Text Domain: champs-bleutes
*/

/* =========================================================================
   CHAMPS BLEUTES — DESIGN SYSTEM
   ADN : naturel, elegance sobre, artisanat, temps long. Angles vifs partout.
   Base visuelle : maquette "Artisan Premium" V4. Vert sauge = couleur principale.
   ========================================================================= */

:root {
  /* Verts (principale) — sauge clair demande par la cliente, plus clair que les inspirations */
  --cb-green:        #8ba795;   /* sauge, blocs de couleur */
  --cb-green-soft:   #a9c0b1;   /* sauge clair */
  --cb-green-pale:   #e5ede7;   /* voile vert tres clair (fonds de section) */
  --cb-green-deep:   #33463c;   /* vert foret — titres, footer, texte fort */
  --cb-green-ink:    #223029;   /* quasi noir vegetal */

  /* Accents secondaires (blocs texte facon V2) */
  --cb-bleu:         #cfe3f2;   /* bleu ciel */
  --cb-rose:         #f4d9e2;   /* rose poudre */
  --cb-gold:         #c9a96b;   /* accent chaud discret (V5) */

  /* Neutres */
  --cb-fond:         #ffffff;
  --cb-cream:        #f4f2ec;   /* off-white des sections calmes */
  --cb-line:         #dfe3dc;   /* filets */
  --cb-ink:          #2b332e;   /* texte courant */
  --cb-muted:        #6d7a71;   /* texte secondaire */

  /* Typo */
  --cb-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cb-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rythme */
  --cb-maxw: 1200px;
  --cb-gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---- Angles vifs : on neutralise les arrondis Storefront ------------------ */
.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button.button,
.woocommerce ul.products li.product .button,
input, select, textarea, .card, .widget, .cb-btn, img,
.woocommerce span.onsale, .woocommerce .cart-collaterals .cart_totals,
.storefront-product-section, .cb-tile, .cb-chip {
  border-radius: 0 !important;
}

/* ---- Base typographique --------------------------------------------------- */
body {
  background: var(--cb-fond);
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .site-title, .cb-serif {
  font-family: var(--cb-serif);
  color: var(--cb-green-deep);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.12;
}

p { margin: 0 0 1.15em; }

a { color: var(--cb-green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cb-gold); }

.cb-eyebrow {
  font-family: var(--cb-sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 400;
  color: var(--cb-muted);
  margin: 0 0 1.1rem;
  display: block;
}

/* =========================================================================
   HEADER / NAV (Storefront)
   ========================================================================= */
.storefront-primary-navigation,
.site-header {
  background: var(--cb-fond) !important;
  border-bottom: 1px solid var(--cb-line);
}
.site-header { padding-top: 1.1em; padding-bottom: 1.1em; }

.site-branding .site-title,
.site-title a {
  font-family: var(--cb-serif) !important;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cb-green-deep) !important;
  text-transform: none;
}
.site-title a { text-decoration: none; }
.site-branding .site-description {
  font-family: var(--cb-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .66rem;
  color: var(--cb-muted);
}

.main-navigation ul li a {
  font-family: var(--cb-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  color: var(--cb-green-deep);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--cb-gold); }

/* Bouton "Commander" (dernier item de menu avec classe .cb-menu-cta) */
.main-navigation ul li.cb-menu-cta a {
  background: var(--cb-green-deep);
  color: #fff;
  padding: .6em 1.2em;
}
.main-navigation ul li.cb-menu-cta a:hover { background: var(--cb-gold); color: #fff; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.cb-btn, .cb-btn:visited {
  display: inline-block;
  font-family: var(--cb-sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 400;
  padding: .95em 1.9em;
  border: 1px solid var(--cb-green-deep);
  background: var(--cb-green-deep);
  color: #fff;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.cb-btn:hover { background: var(--cb-gold); border-color: var(--cb-gold); color: #fff; }
.cb-btn--ghost { background: transparent; color: var(--cb-green-deep); }
.cb-btn--ghost:hover { background: var(--cb-green-deep); color: #fff; border-color: var(--cb-green-deep); }
.cb-btn--light { background: #fff; color: var(--cb-green-deep); border-color: #fff; }
.cb-btn--light:hover { background: var(--cb-gold); color: #fff; border-color: var(--cb-gold); }

/* Boutons WooCommerce alignes sur la charte */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce ul.products li.product .button,
.woocommerce .single_add_to_cart_button {
  background: var(--cb-green-deep) !important;
  color: #fff !important;
  font-family: var(--cb-sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 400;
  padding: .85em 1.6em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover { background: var(--cb-gold) !important; }
.woocommerce .button.alt { background: var(--cb-green-deep) !important; }

/* =========================================================================
   LAYOUT UTILS (homepage)
   ========================================================================= */
.cb-wrap { max-width: var(--cb-maxw); margin: 0 auto; padding: 0 var(--cb-gutter); }
.cb-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.cb-section--cream { background: var(--cb-cream); }
.cb-section--pale  { background: var(--cb-green-pale); }
.cb-center { text-align: center; }
.cb-lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--cb-muted); max-width: 42ch; }
.cb-center .cb-lead { margin-left: auto; margin-right: auto; }
.cb-h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 .55em; }
.cb-h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 .4em; }

/* =========================================================================
   HERO
   ========================================================================= */
.cb-hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(139,167,149,.30)),
    radial-gradient(120% 90% at 50% -10%, #f4f2ec 0%, #d9e4dc 42%, #8ba795 100%);
}
.cb-hero__botanical { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.cb-hero__botanical svg { width: 100%; height: 100%; }
.cb-hero__inner { position: relative; padding: 2rem var(--cb-gutter); max-width: 760px; }
.cb-hero__title {
  font-size: clamp(3rem, 9vw, 6.2rem);
  color: var(--cb-green-deep);
  margin: 0 0 .25em;
  font-weight: 500;
  letter-spacing: .02em;
}
.cb-hero__tagline {
  font-family: var(--cb-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--cb-green-deep);
  margin: 0 0 2rem;
}
.cb-hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   CULTURE (bloc d'ouverture texte)
   ========================================================================= */
.cb-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cb-split--rev .cb-split__media { order: 2; }
@media (max-width: 820px) { .cb-split { grid-template-columns: 1fr; } .cb-split--rev .cb-split__media { order: 0; } }
.cb-media-frame {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #dfe9e1, #8ba795);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cb-media-frame svg { width: 74%; height: 74%; opacity: .85; }
.cb-media-frame--wide { aspect-ratio: 3 / 2; }

/* =========================================================================
   PRINCIPES (5 valeurs)
   ========================================================================= */
.cb-principles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .cb-principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cb-principles { grid-template-columns: 1fr; } }
.cb-principle { text-align: center; }
.cb-principle__icon { width: 46px; height: 46px; margin: 0 auto 1rem; color: var(--cb-green); }
.cb-principle__icon svg { width: 100%; height: 100%; }
.cb-principle h3 { font-size: 1.12rem; margin: 0 0 .35em; }
.cb-principle p { font-size: .92rem; color: var(--cb-muted); margin: 0; }

/* =========================================================================
   TYPES (frais / seche / stabilise) — chips + double CTA
   ========================================================================= */
.cb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2.5rem 0; }
@media (max-width: 720px) { .cb-types { grid-template-columns: 1fr; } }
.cb-type {
  padding: 2rem 1.6rem;
  border: 1px solid var(--cb-line);
  background: #fff;
  position: relative;
}
.cb-type--frais { border-top: 3px solid var(--cb-green); }
.cb-type--seche { border-top: 3px solid var(--cb-gold); }
.cb-type--stab  { border-top: 3px solid var(--cb-bleu); }
.cb-type h3 { margin: 0 0 .5em; font-size: 1.35rem; }
.cb-type p { font-size: .95rem; color: var(--cb-muted); margin: 0 0 .8em; }
.cb-type__tag { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cb-green); }

/* =========================================================================
   MOMENTS DU MARIAGE (cartes)
   ========================================================================= */
.cb-moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .cb-moments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cb-moments { grid-template-columns: 1fr; } }
.cb-moment {
  display: block; text-decoration: none; color: #fff;
  aspect-ratio: 3 / 4; position: relative; overflow: hidden;
  background: var(--cb-green);
}
.cb-moment__art { position: absolute; inset: 0; opacity: .55; }
.cb-moment__art svg { width: 100%; height: 100%; }
.cb-moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(34,48,41,.72)); }
.cb-moment__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.3rem; }
.cb-moment__label h3 { color: #fff; margin: 0; font-size: 1.32rem; }
.cb-moment__label span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cb-moment:hover .cb-moment__art { opacity: .8; transition: opacity .25s ease; }

/* =========================================================================
   TIMELINE (du champ au jour J)
   ========================================================================= */
.cb-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 3rem; counter-reset: step; }
@media (max-width: 900px) { .cb-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cb-timeline { grid-template-columns: 1fr; } }
.cb-step { position: relative; text-align: center; padding-top: 2.5rem; }
.cb-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2.4rem; height: 2.4rem; line-height: 2.4rem;
  background: var(--cb-green-deep); color: #fff;
  font-family: var(--cb-serif); font-size: 1.15rem;
}
.cb-step h3 { font-size: 1.05rem; margin: 0 0 .3em; }
.cb-step p { font-size: .88rem; color: var(--cb-muted); margin: 0; }

/* =========================================================================
   BANNIERE ANTICIPATION (regle metier centrale)
   ========================================================================= */
.cb-anticip {
  background: var(--cb-green-deep); color: #fff; text-align: center;
}
.cb-anticip .cb-h2 { color: #fff; }
.cb-anticip p { color: rgba(255,255,255,.86); }
.cb-anticip__note { font-family: var(--cb-serif); font-style: italic; font-size: clamp(1.2rem,2.4vw,1.6rem); }

/* =========================================================================
   FAQ
   ========================================================================= */
.cb-faq { max-width: 760px; margin: 2.5rem auto 0; }
.cb-faq details { border-top: 1px solid var(--cb-line); padding: 1.15rem 0; }
.cb-faq details:last-child { border-bottom: 1px solid var(--cb-line); }
.cb-faq summary {
  cursor: pointer; list-style: none; font-family: var(--cb-serif);
  font-size: 1.25rem; color: var(--cb-green-deep); display: flex; justify-content: space-between; align-items: center;
}
.cb-faq summary::-webkit-details-marker { display: none; }
.cb-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--cb-gold); }
.cb-faq details[open] summary::after { content: "\2013"; }
.cb-faq p { margin: .9rem 0 0; color: var(--cb-muted); font-size: .96rem; }

/* =========================================================================
   BOOK PHOTO (lead-gen)
   ========================================================================= */
.cb-book { background: var(--cb-green-pale); }
.cb-book__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px) { .cb-book__inner { grid-template-columns: 1fr; } }
.cb-book form { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.cb-book input[type=email] {
  flex: 1 1 220px; padding: .95em 1.1em; border: 1px solid var(--cb-green); background: #fff; font-family: var(--cb-sans);
}

/* =========================================================================
   BOUTIQUE / PRODUITS (Storefront + Woo)
   ========================================================================= */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cb-serif); color: var(--cb-green-deep); font-size: 1.25rem; font-weight: 500;
}
.woocommerce ul.products li.product .price { color: var(--cb-green-deep); font-family: var(--cb-sans); font-weight: 400; }
.woocommerce ul.products li.product { text-align: center; }
.woocommerce div.product .product_title { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.woocommerce span.onsale { background: var(--cb-gold); }
.woocommerce .star-rating span { color: var(--cb-gold); }

/* Apercu boutique en home : grille robuste 4 colonnes (override du grid Storefront) */
.cb-shop-preview ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin: 2.5rem 0;
}
.cb-shop-preview ul.products::before,
.cb-shop-preview ul.products::after { content: none !important; display: none !important; }
.cb-shop-preview ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
@media (max-width: 900px) { .cb-shop-preview ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cb-shop-preview ul.products { grid-template-columns: 1fr; } }

/* Placeholder produit tasteful quand pas d'image */
.woocommerce ul.products li.product img,
.woocommerce div.product .woocommerce-product-gallery img { background: var(--cb-green-pale); }

/* =========================================================================
   PAGES DE CONTENU (entry-content)
   ========================================================================= */
.page .entry-header .entry-title,
.single .entry-header .entry-title { font-size: clamp(2rem, 5vw, 3rem); }
.entry-content { font-size: 1.06rem; }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2em; }
.entry-content blockquote {
  border-left: 3px solid var(--cb-green); background: var(--cb-green-pale);
  padding: 1.2rem 1.5rem; font-family: var(--cb-serif); font-style: italic; font-size: 1.3rem; color: var(--cb-green-deep);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  background: var(--cb-green-deep) !important;
  color: rgba(255,255,255,.82) !important;
}
.site-footer a { color: rgba(255,255,255,.82) !important; }
.site-footer a:hover { color: var(--cb-gold) !important; }
.site-footer .widget-title, .site-footer h1, .site-footer h2, .site-footer h3 { color: #fff !important; font-family: var(--cb-serif); }
.storefront-handheld-footer-bar { background: var(--cb-green-deep); }

/* =========================================================================
   DIVERS
   ========================================================================= */
.cb-hr { width: 60px; height: 2px; background: var(--cb-gold); border: 0; margin: 1.6rem 0; }
.cb-center .cb-hr { margin-left: auto; margin-right: auto; }
::selection { background: var(--cb-green); color: #fff; }