/*
Theme Name: Oh My Brood
Theme URI: https://ohmybrood.be/
Author: Oh My Brood
Description: Thème WordPress responsive personnalisé pour Oh My Brood Bio.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oh-my-brood
Tags: full-site-editing, custom-logo, custom-menu, e-commerce, food-and-drink, blog, wide-blocks
*/

/* =========================================================
   OH MY BROOD BIO
   STYLE.CSS COMPLET
   Palette inspirée du logo
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  /* Couleurs du logo */
  --brand-brown: #95511f;
  --brand-brown-dark: #7c3f16;
  --brand-chocolate: #4c2d1f;

  /* Tons naturels */
  --cream: #fbf7f2;
  --warm-white: #fffdfa;
  --sand: #f2e6da;
  --sand-dark: #e7d4c2;
  --wheat: #d8b28b;
  --caramel: #b86d34;

  /* Textes */
  --ink: #39271f;
  --text-muted: #75645b;

  /* Interface */
  --border: #e4d4c5;
  --white: #ffffff;

  /* Ombres */
  --shadow-sm:
    0 8px 24px rgba(76, 45, 31, 0.06);

  --shadow-md:
    0 16px 40px rgba(76, 45, 31, 0.1);

  --shadow-lg:
    0 24px 60px rgba(76, 45, 31, 0.14);

  /* Rayons */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 30px;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "Figtree",
    Arial,
    sans-serif;

  background:
    var(--cream);

  color:
    var(--ink);

  line-height: 1.6;

  -webkit-font-smoothing:
    antialiased;
}

img {
  display: block;

  max-width: 100%;
}

a {
  color: inherit;

  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {

  margin-top: 0;

  font-family:
    "Outfit",
    Arial,
    sans-serif;

  color:
    var(--brand-chocolate);

  letter-spacing:
    -0.025em;

}

p {
  margin-top: 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  margin-inline:
    auto;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  background:
    rgba(
      251,
      247,
      242,
      0.95
    );

  backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid
    var(--border);

}

.header-inner {

  min-height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1.5rem;

  font-weight:
    700;

  color:
    var(--brand-chocolate);

}

.logo strong {

  color:
    var(--brand-brown);

}

.logo-image {

  width:
    175px;

  height:
    auto;

}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

}

.main-nav a {

  position:
    relative;

  padding:
    10px 0;

  color:
    var(--brand-chocolate);

  font-size:
    0.95rem;

  font-weight:
    600;

  transition:
    color 0.2s ease;

}

.main-nav a::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    2px;

  width:
    0;

  height:
    2px;

  border-radius:
    20px;

  background:
    var(--brand-brown);

  transition:
    width 0.2s ease;

}

.main-nav a:hover {

  color:
    var(--brand-brown);

}

.main-nav a:hover::after {

  width:
    100%;

}


/* =========================================================
   BOUTONS
========================================================= */

.btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    46px;

  padding:
    12px 22px;

  border:
    1px solid
    transparent;

  border-radius:
    13px;

  font-weight:
    700;

  text-align:
    center;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}

.btn:hover {

  transform:
    translateY(-2px);

}

.btn-primary {

  background:
    var(--brand-brown);

  color:
    var(--white);

  box-shadow:
    0 10px 24px
    rgba(149, 81, 31, 0.22);

}

.btn-primary:hover {

  background:
    var(--brand-brown-dark);

}

.btn-secondary {

  background:
    var(--warm-white);

  color:
    var(--brand-chocolate);

  border-color:
    var(--border);

}

.btn-secondary:hover {

  background:
    var(--sand);

}

.btn-light {

  margin-top:
    28px;

  background:
    var(--cream);

  color:
    var(--brand-brown);

}

.btn-light:hover {

  background:
    var(--sand);

}

button:disabled {

  opacity:
    0.45;

  cursor:
    not-allowed;

  transform:
    none !important;

}


/* =========================================================
   HERO
========================================================= */

.hero {

  position:
    relative;

  overflow:
    hidden;

  padding:
    105px 0 95px;

  background:

    radial-gradient(
      circle at 85% 15%,
      rgba(
        216,
        178,
        139,
        0.32
      ),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      var(--cream) 0%,
      #f8efe7 55%,
      var(--sand) 100%
    );

}

.hero::before {

  content:
    "";

  position:
    absolute;

  width:
    320px;

  height:
    320px;

  left:
    -140px;

  bottom:
    -140px;

  border-radius:
    50%;

  background:
    rgba(
      149,
      81,
      31,
      0.06
    );

}

.hero-grid {

  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    1.05fr 0.95fr;

  align-items:
    center;

  gap:
    70px;

}

.eyebrow {

  margin-bottom:
    15px;

  color:
    var(--brand-brown);

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

}

.eyebrow.light {

  color:
    var(--wheat);

}

.hero h1 {

  margin-bottom:
    28px;

  max-width:
    760px;

  font-size:
    clamp(
      3.3rem,
      7vw,
      5.8rem
    );

  line-height:
    0.96;

}

.hero h1 span {

  display:
    block;

  color:
    var(--brand-brown);

}

.hero-text {

  max-width:
    630px;

  margin-bottom:
    0;

  color:
    var(--text-muted);

  font-size:
    1.14rem;

  line-height:
    1.8;

}

.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    14px;

  margin-top:
    32px;

}

.hero-image {

  position:
    relative;

}

.hero-image::before {

  content:
    "";

  position:
    absolute;

  inset:
    18px -18px -18px 18px;

  z-index:
    -1;

  border-radius:
    var(--radius-lg);

  background:
    var(--wheat);

}

.hero-image img {

  width:
    100%;

  height:
    560px;

  object-fit:
    cover;

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

  padding:
    100px 0;

}

.section-sand {

  background:
    var(--sand);

}

.section-heading {

  max-width:
    740px;

  margin:
    0 auto 56px;

  text-align:
    center;

}

.section-heading h2 {

  margin-bottom:
    18px;

  font-size:
    clamp(
      2.3rem,
      5vw,
      3.6rem
    );

  line-height:
    1.05;

}

.section-heading > p:last-child {

  margin-bottom:
    0;

  color:
    var(--text-muted);

  font-size:
    1.08rem;

}


/* =========================================================
   WEBSHOP
========================================================= */

.webshop {

  background:
    var(--warm-white);

}

.shop-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    28px;

}

.product-card {

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--white);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.product-card:hover {

  transform:
    translateY(-7px);

  box-shadow:
    var(--shadow-lg);

}

.product-image {

  position:
    relative;

  height:
    290px;

  overflow:
    hidden;

  background:
    var(--sand);

}

.product-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform 0.35s ease;

}

.product-card:hover
.product-image img {

  transform:
    scale(1.04);

}

.product-badge {

  position:
    absolute;

  top:
    16px;

  left:
    16px;

  padding:
    7px 13px;

  border-radius:
    999px;

  background:
    var(--brand-brown);

  color:
    var(--white);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

  box-shadow:
    0 8px 22px
    rgba(76, 45, 31, 0.14);

}

.product-content {

  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  padding:
    26px;

}

.product-category {

  margin-bottom:
    7px;

  color:
    var(--brand-brown);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

}

.product-content h3 {

  margin-bottom:
    14px;

  font-size:
    1.55rem;

  line-height:
    1.15;

}

.product-description {

  margin-bottom:
    16px;

  color:
    var(--text-muted);

}

.product-allergen {

  margin:
    2px 0 16px;

  padding:
    11px 13px;

  border-left:
    3px solid
    var(--brand-brown);

  border-radius:
    8px;

  background:
    var(--sand);

  color:
    var(--brand-chocolate);

  font-size:
    0.9rem;

  font-weight:
    600;

}

.product-info {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    8px;

}

.product-info span {

  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    var(--sand);

  color:
    var(--brand-chocolate);

  font-size:
    0.76rem;

  font-weight:
    700;

}

.product-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-top:
    24px;

  padding-top:
    20px;

  border-top:
    1px solid
    var(--border);

}

.product-price {

  white-space:
    nowrap;

  color:
    var(--brand-brown);

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1.6rem;

  font-weight:
    800;

}


/* =========================================================
   PANIER
========================================================= */

.cart {

  margin-top:
    70px;

  padding:
    36px;

  background:
    var(--cream);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-md);

}

.cart-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

  border-bottom:
    1px solid
    var(--border);

}

.cart-header h2 {

  margin-bottom:
    0;

  font-size:
    2.3rem;

}

#cart-count {

  padding:
    7px 13px;

  border-radius:
    999px;

  background:
    var(--sand);

  color:
    var(--brand-brown);

  font-size:
    0.85rem;

  font-weight:
    800;

}

#cart-items {

  min-height:
    80px;

}

.cart-empty {

  margin:
    28px 0 8px;

  color:
    var(--text-muted);

  text-align:
    center;

}

.cart-item {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    22px 0;

  border-bottom:
    1px solid
    var(--border);

}

.cart-item-info {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}

.cart-item-info strong {

  color:
    var(--brand-chocolate);

}

.cart-item-info span {

  color:
    var(--brand-brown);

  font-weight:
    700;

}

.cart-controls {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}

.cart-controls button {

  min-width:
    38px;

  min-height:
    38px;

  padding:
    7px 10px;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  background:
    var(--warm-white);

  color:
    var(--brand-chocolate);

  font-weight:
    800;

}

.cart-controls button:hover {

  background:
    var(--sand);

}

.cart-controls
.remove-item {

  width:
    auto;

  margin-left:
    6px;

  color:
    #8c3528;

}

.cart-quantity {

  min-width:
    24px;

  text-align:
    center;

  font-weight:
    800;

}

.cart-summary {

  margin-top:
    30px;

}

.cart-total-line {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    14px;

  font-size:
    1.35rem;

}

.cart-total-line strong {

  color:
    var(--brand-brown);

  font-size:
    1.8rem;

}

.cart-note {

  margin-bottom:
    20px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

}

.checkout-button {

  width:
    100%;

}


/* =========================================================
   FEATURE CARDS
========================================================= */

.feature-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    24px;

}

.feature-card {

  padding:
    30px;

  background:
    var(--warm-white);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}

.feature-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow-md);

}

.feature-icon {

  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    20px;

  border-radius:
    16px;

  background:
    var(--sand);

  font-size:
    1.8rem;

}

.feature-card h3 {

  margin-bottom:
    10px;

  font-size:
    1.35rem;

}

.feature-card p {

  margin-bottom:
    0;

  color:
    var(--text-muted);

}


/* =========================================================
   HISTOIRE
========================================================= */

.story-grid {

  display:
    grid;

  grid-template-columns:
    0.95fr 1.05fr;

  align-items:
    center;

  gap:
    70px;

}

.story-image {

  position:
    relative;

}

.story-image::after {

  content:
    "";

  position:
    absolute;

  right:
    -18px;

  bottom:
    -18px;

  width:
    42%;

  height:
    42%;

  z-index:
    0;

  border-radius:
    var(--radius-md);

  background:
    var(--wheat);

}

.story-image img {

  position:
    relative;

  z-index:
    1;

  width:
    100%;

  height:
    560px;

  object-fit:
    cover;

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);

}

.story-content h2 {

  margin-bottom:
    28px;

  font-size:
    clamp(
      2.4rem,
      5vw,
      3.6rem
    );

  line-height:
    1.05;

}

.story-content p {

  margin-bottom:
    18px;

  color:
    var(--text-muted);

  font-size:
    1.03rem;

}

blockquote {

  margin:
    30px 0;

  padding-left:
    22px;

  border-left:
    4px solid
    var(--brand-brown);

  color:
    var(--brand-brown);

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1.75rem;

  font-weight:
    700;

  line-height:
    1.25;

}


/* =========================================================
   VALEURS
========================================================= */

.values-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    25px;

}

.value-card {

  padding:
    32px;

  background:
    var(--warm-white);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-sm);

}

.value-number {

  display:
    inline-block;

  margin-bottom:
    20px;

  color:
    var(--brand-brown);

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1.1rem;

  font-weight:
    800;

}

.value-card h3 {

  margin-bottom:
    12px;

  font-size:
    1.45rem;

}

.value-card p {

  margin-bottom:
    0;

  color:
    var(--text-muted);

}


/* =========================================================
   CTA
========================================================= */

.cta-section {

  padding:
    30px 0 100px;

  background:
    var(--cream);

}

.cta-box {

  position:
    relative;

  overflow:
    hidden;

  padding:
    76px 70px;

  border-radius:
    var(--radius-xl);

  background:

    radial-gradient(
      circle at 90% 10%,
      rgba(
        184,
        109,
        52,
        0.28
      ),
      transparent 30%
    ),

    var(--brand-chocolate);

  color:
    var(--cream);

  text-align:
    center;

}

.cta-box::before {

  content:
    "";

  position:
    absolute;

  left:
    -80px;

  bottom:
    -100px;

  width:
    250px;

  height:
    250px;

  border-radius:
    50%;

  background:
    rgba(
      216,
      178,
      139,
      0.1
    );

}

.cta-box > * {

  position:
    relative;

  z-index:
    1;

}

.cta-box h2 {

  max-width:
    780px;

  margin:
    0 auto 18px;

  color:
    var(--white);

  font-size:
    clamp(
      2.5rem,
      5vw,
      4rem
    );

  line-height:
    1.05;

}

.cta-box p {

  max-width:
    700px;

  margin:
    0 auto;

  color:
    var(--sand);

  font-size:
    1.08rem;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

  background:
    var(--warm-white);

}

.contact-grid {

  display:
    grid;

  grid-template-columns:
    1.6fr 1fr 1fr;

  gap:
    50px;

}

.contact-intro h2 {

  margin-bottom:
    16px;

  font-size:
    2.6rem;

}

.contact-intro p {

  color:
    var(--text-muted);

}

.contact-card {

  padding:
    26px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--cream);

}

.contact-card h3 {

  margin-bottom:
    12px;

}

.contact-card p {

  margin-bottom:
    10px;

  color:
    var(--text-muted);

}

.contact-card a {

  color:
    var(--brand-brown);

  font-weight:
    700;

}

.contact-card a:hover {

  text-decoration:
    underline;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

  padding:
    48px 0;

  background:
    var(--brand-chocolate);

  color:
    var(--sand);

}

.footer-inner {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

}

.footer-logo {

  color:
    var(--white);

}

.footer-logo strong {

  color:
    var(--wheat);

}

.site-footer p {

  margin:
    10px 0 0;

  color:
    var(--sand);

}

.footer-right {

  text-align:
    right;

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

  width:
    11px;

}

::-webkit-scrollbar-track {

  background:
    var(--cream);

}

::-webkit-scrollbar-thumb {

  border:
    3px solid
    var(--cream);

  border-radius:
    999px;

  background:
    var(--brand-brown);

}


/* =========================================================
   SÉLECTION DE TEXTE
========================================================= */

::selection {

  background:
    var(--wheat);

  color:
    var(--brand-chocolate);

}


/* =========================================================
   RESPONSIVE - TABLETTE
========================================================= */

@media
(max-width: 1050px) {

  .main-nav {

    gap:
      17px;

  }

  .hero-grid,
  .story-grid {

    gap:
      45px;

  }

  .shop-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

  .feature-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


/* =========================================================
   RESPONSIVE - 900PX
========================================================= */

@media
(max-width: 900px) {

  .main-nav {

    display:
      none;

  }

  .hero {

    padding:
      75px 0;

  }

  .hero-grid,
  .story-grid,
  .contact-grid {

    grid-template-columns:
      1fr;

  }

  .hero-image {

    max-width:
      700px;

  }

  .hero-image img,
  .story-image img {

    height:
      460px;

  }

  .values-grid {

    grid-template-columns:
      1fr;

  }

  .contact-grid {

    gap:
      22px;

  }

  .footer-inner {

    flex-direction:
      column;

  }

  .footer-right {

    text-align:
      left;

  }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media
(max-width: 650px) {

  .container {

    width:
      min(
        100% - 30px,
        1180px
      );

  }

  .header-inner {

    min-height:
      72px;

  }

  .logo {

    font-size:
      1.2rem;

  }

  .logo-image {

    width:
      135px;

  }

  .header-inner > .btn {

    padding:
      10px 14px;

    font-size:
      0.85rem;

  }

  .hero {

    padding:
      62px 0;

  }

  .hero h1 {

    font-size:
      3rem;

  }

  .hero-actions {

    flex-direction:
      column;

  }

  .hero-actions .btn {

    width:
      100%;

  }

  .hero-image::before {

    display:
      none;

  }

  .hero-image img,
  .story-image img {

    height:
      360px;

  }

  .section {

    padding:
      75px 0;

  }

  .shop-grid,
  .feature-grid {

    grid-template-columns:
      1fr;

  }

  .product-footer {

    align-items:
      stretch;

    flex-direction:
      column;

  }

  .product-footer .btn {

    width:
      100%;

  }

  .cart {

    padding:
      24px;

  }

  .cart-header {

    flex-direction:
      column;

    gap:
      12px;

  }

  .cart-item {

    align-items:
      flex-start;

    flex-direction:
      column;

  }

  .cart-controls {

    flex-wrap:
      wrap;

  }

  .cta-box {

    padding:
      55px 24px;

  }

  .story-image::after {

    display:
      none;

  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media
(max-width: 420px) {

  .hero h1 {

    font-size:
      2.55rem;

  }

  .section-heading h2 {

    font-size:
      2.25rem;

  }

  .product-content {

    padding:
      21px;

  }

}