/*
Theme Name:   Briune Child
Theme URI:    https://briune.fr
Description:  Thème enfant Kadence pour Briune — licols artisanaux faits main. Design system : crème, bruns chauds, terracotta. Cormorant Garamond + Mulish.
Author:       Alexandre Cadot
Template:     kadence
Version:      1.2.0
Text Domain:  briune-child
*/

/* ==========================================================
   1. TOKENS — source unique de vérité
   ========================================================== */
:root {
  --briune-creme:      #F6F1EA;
  --briune-sable:      #D8C7B8;
  --briune-terracotta: #BC7A58;
  --briune-terre:      #A66545;
  --briune-taupe:      #6E5A4C;
  --briune-espresso:   #4A372B;

  --briune-sable-32:   rgba(216, 199, 184, 0.32);
  --briune-sable-25:   rgba(216, 199, 184, 0.25);
  --briune-bordure:    rgba(74, 55, 43, 0.16);
  --briune-bordure-input: rgba(74, 55, 43, 0.22);

  --briune-serif: 'Cormorant Garamond', Georgia, serif;
  --briune-sans:  'Mulish', -apple-system, sans-serif;

  --briune-section: clamp(56px, 8vw, 96px);
  --briune-radius:  6px;
}

/* ==========================================================
   2. BASE
   ========================================================== */
body {
  background-color: var(--briune-creme);
  color: var(--briune-taupe);
  font-family: var(--briune-sans);
  font-size: 16px;
  line-height: 1.75;
}

h1, h2, h3, h4 {
  font-family: var(--briune-serif);
  font-weight: 600;
  color: var(--briune-espresso);
}
h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
h3 { font-size: 23px; }

a { color: var(--briune-terracotta); }
a:hover { color: var(--briune-terre); }

/* Kicker — petites capitales au-dessus des titres */
.briune-kicker {
  font-family: var(--briune-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--briune-terracotta);
}

/* Titre italique de section (style maquette) */
.briune-titre-italique { font-style: italic; }

/* ==========================================================
   3. BOUTONS — pilule terracotta
   ========================================================== */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
  background-color: var(--briune-terracotta);
  color: var(--briune-creme);
  font-family: var(--briune-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 15px 30px;
  border: none;
  transition: background-color .2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--briune-terre);
  color: var(--briune-creme);
}
/* Bouton secondaire (style "outline" dans l'éditeur) */
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--briune-taupe);
  border: 1px solid var(--briune-bordure-input);
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--briune-sable-25);
  color: var(--briune-espresso);
}

/* ==========================================================
   4. FORMULAIRES
   ========================================================== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], select, textarea {
  background: #fff;
  border: 1px solid var(--briune-bordure-input);
  border-radius: 3px;
  padding: 13px 15px;
  font-family: var(--briune-sans);
  font-size: 16px; /* ≥16px : évite le zoom iOS */
  color: var(--briune-taupe);
}

/* ==========================================================
   5. COMPOSANTS BRIUNE (classes utilisées par les patterns)
   ========================================================== */

/* Barre d'information tout en haut */
.briune-topbar {
  background: var(--briune-sable);
  color: var(--briune-espresso);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 20px;
}

/* Bandeau à fond sable (réassurance, fait-main, témoignages) */
.briune-bandeau {
  background: var(--briune-sable-32);
  border-top: 1px solid var(--briune-bordure);
  border-bottom: 1px solid var(--briune-bordure);
}

/* Cartes catégories en arche */
.briune-arche {
  border-radius: 170px 170px 6px 6px;
  overflow: hidden;
  border: 1px solid rgba(96, 84, 75, 0.18);
}
.briune-arche .wp-block-cover__inner-container { align-self: flex-end; }
.briune-arche h3, .briune-arche p { color: var(--briune-creme); }

/* Bloc atelier (fond taupe) */
.briune-atelier { background-color: var(--briune-taupe); }
.briune-atelier h2 { color: var(--briune-creme); }
.briune-atelier p { color: rgba(246, 241, 234, 0.9); }
.briune-atelier .briune-kicker { color: var(--briune-sable); }
.briune-atelier a { color: var(--briune-creme); }

/* Cartes témoignage */
.briune-temoignage {
  background: var(--briune-creme);
  border: 1px solid var(--briune-bordure);
  border-radius: var(--briune-radius);
  padding: 30px 28px;
}
.briune-temoignage .citation {
  font-family: var(--briune-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--briune-espresso);
}
.briune-temoignage .auteur { font-size: 13px; color: var(--briune-terracotta); font-weight: 600; margin-top: 18px; }
.briune-temoignage .lieu { font-size: 12px; color: rgba(110, 90, 76, 0.72); }

/* Ligne de marque (grande citation italique) */
.briune-ligne-marque {
  font-family: var(--briune-serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.35;
  color: var(--briune-terracotta);
  text-align: center;
}

/* FAQ en accordéons (bloc Détails natif) */
.briune-faq details {
  border-bottom: 1px solid var(--briune-bordure);
  padding: 22px 4px;
}
.briune-faq details:first-of-type { border-top: 1px solid var(--briune-bordure); }
.briune-faq summary {
  font-weight: 600;
  font-size: 16px;
  color: var(--briune-espresso);
  cursor: pointer;
}

/* Bloc capture email / guide des tailles */
.briune-guide {
  background: var(--briune-sable-25);
  border: 1px solid var(--briune-bordure);
  border-radius: 8px;
}

/* ==========================================================
   6. WOOCOMMERCE — cartes produit sobres
   ========================================================== */
.woocommerce ul.products li.product {
  background: transparent;
  text-align: center;
}
.woocommerce ul.products li.product img {
  border-radius: 5px;
  border: 1px solid var(--briune-bordure);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--briune-serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--briune-espresso);
}
.woocommerce ul.products li.product .price {
  color: var(--briune-terracotta);
  font-weight: 600;
}
.woocommerce span.onsale {
  background: var(--briune-terracotta);
  border-radius: 999px;
}

/* ==========================================================
   7. MOBILE
   ========================================================== */
@media (max-width: 768px) {
  .briune-arche { border-radius: 70px 70px 5px 5px; }
  .briune-temoignage .citation { font-size: 18px; }
}

/* ==========================================================
   8. CLASSES DE COULEURS WP (générées en dur — fiabilité)
   ========================================================== */
.has-briune-creme-color { color: var(--briune-creme) !important; }
.has-briune-sable-color { color: var(--briune-sable) !important; }
.has-briune-terracotta-color { color: var(--briune-terracotta) !important; }
.has-briune-terre-color { color: var(--briune-terre) !important; }
.has-briune-taupe-color { color: var(--briune-taupe) !important; }
.has-briune-espresso-color { color: var(--briune-espresso) !important; }

.has-briune-creme-background-color { background-color: var(--briune-creme) !important; }
.has-briune-sable-background-color { background-color: var(--briune-sable) !important; }
.has-briune-terracotta-background-color { background-color: var(--briune-terracotta) !important; }
.has-briune-terre-background-color { background-color: var(--briune-terre) !important; }
.has-briune-taupe-background-color { background-color: var(--briune-taupe) !important; }
.has-briune-espresso-background-color { background-color: var(--briune-espresso) !important; }

/* ==========================================================
   9. FONDS DE SECOURS (avant l'ajout des photos)
   ========================================================== */
/* Hero sans photo : base espresso pour garder le texte crème lisible */
.briune-hero { background-color: var(--briune-espresso); }
.briune-hero h1, .briune-hero p { color: var(--briune-creme); }

/* Cartes catégories sans photo : fond sable, texte lisible */
.briune-arche { background-color: var(--briune-sable); }

/* ==========================================================
   10. RYTHME VERTICAL & RESPIRATION (v1.2)
   ========================================================== */
/* Espacement généreux entre les sections de la page */
.entry-content > * + * { margin-block-start: var(--briune-section) !important; }

/* La barre d'info et le hero se touchent */
.briune-topbar + * { margin-block-start: 0 !important; }
.entry-content > .briune-topbar { margin-block-start: 0 !important; }

/* Bandeaux pleine largeur : padding interne au lieu de coller au texte */
.briune-bandeau { padding-block: clamp(44px, 6vw, 80px); }
.briune-bandeau > * + * { margin-block-start: 18px; }

/* Hero : respiration du contenu */
.briune-hero .wp-block-cover__inner-container {
  padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px);
  max-width: 1280px;
  margin: 0 auto;
}
.briune-hero h1 { margin-block: 10px 0; }
.briune-hero .wp-block-buttons { margin-block-start: 26px; }

/* Kicker collé à son titre, titre aéré de son contenu */
.briune-kicker { margin-block-end: 8px !important; }
.briune-kicker + h1, .briune-kicker + h2, .briune-kicker + .briune-ligne-marque { margin-block-start: 0 !important; }
h2.wp-block-heading { margin-block-end: 28px; }

/* Bloc atelier : padding du contenu texte */
.briune-atelier .wp-block-media-text__content { padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); }

/* Bloc guide des tailles : padding interne */
.briune-guide { padding: clamp(32px, 4.5vw, 56px); }

/* Colonnes : écarts plus généreux */
.wp-block-columns { gap: clamp(16px, 2vw, 28px); }

/* Boutons : ne pas coller au texte au-dessus */
.wp-block-buttons { margin-block-start: 18px; }

/* Bas de page : de l'air avant le footer */
.entry-content > *:last-child { margin-block-end: var(--briune-section); }

/* Arches : le nom de la catégorie respire */
.briune-arche .wp-block-cover__inner-container { padding: 18px; }