/* ==========================================================
   LE CANEBIER EN PROVENCE
   CHARTE GRAPHIQUE + AGE GATE
   ========================================================== */


/* ==========================================================
   1. COULEURS DE LA MARQUE
   ========================================================== */

:root {
  --petrole: #174365;
  --petrole-fonce: #11384f;

  --or: #c2a368;
  --or-clair: #d4bd8b;
  --or-fonce: #a98950;

  --creme: #f5f1e8;
  --ivoire: #fbfaf7;
  --blanc: #ffffff;

  --texte: #263238;
  --texte-doux: #6e6a65;
}


/* ==========================================================
   2. TYPOGRAPHIES
   ========================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
}

body {
  font-family: 'Mulish', Arial, sans-serif;
  color: var(--texte);
  background: var(--ivoire);
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--petrole-fonce);
}

.product-title,
.product-title a {
  font-family: 'Cormorant Garamond', Georgia, serif;
}


/* ==========================================================
   3. BARRE SUPÉRIEURE
   ========================================================== */

#header .header-nav {
  background: var(--petrole-fonce);
  color: var(--creme);
  border: 0;
}

#header .header-nav a {
  color: var(--creme);
}

#header .header-nav a:hover {
  color: var(--or-clair);
}


/* ==========================================================
   4. EN-TÊTE PRINCIPAL
   ========================================================== */

#header {
  background: var(--blanc);
  color: var(--texte);
}

#header .header-top {
  background: var(--blanc);
  padding-top: 18px;
  padding-bottom: 18px;
  box-shadow: 0 4px 15px rgba(17, 56, 79, 0.06);
}

#header .header-top a {
  color: var(--texte);
}

#header .header-top a:hover {
  color: var(--or-fonce);
}


/* ==========================================================
   5. MENU PRINCIPAL
   ========================================================== */

#_desktop_top_menu .top-menu > li > a {
  color: #4d5357;
  font-family: 'Mulish', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
  padding-top: 15px;
  padding-bottom: 15px;
  transition: color 0.2s ease;
}

#_desktop_top_menu .top-menu > li > a:hover {
  color: var(--or-fonce);
}


/* ==========================================================
   6. RECHERCHE
   ========================================================== */

#search_widget form input {
  border: 1px solid #e7e2da;
  background: #f8f7f4;
  border-radius: 7px;
  color: var(--texte);
}

#search_widget form input:focus {
  border-color: var(--or);
  background: var(--blanc);
}


/* ==========================================================
   7. FOND DES PAGES
   ========================================================== */

#wrapper {
  background: #f7f6f3;
}


/* ==========================================================
   8. FIL D'ARIANE
   ========================================================== */

.breadcrumb {
  font-family: 'Mulish', Arial, sans-serif;
  font-size: 14px;
}

.breadcrumb a {
  color: var(--petrole);
}

.breadcrumb a:hover {
  color: var(--or-fonce);
}


/* ==========================================================
   9. CATÉGORIES
   ========================================================== */

.block-category {
  background: var(--blanc);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(17, 56, 79, 0.05);
}

.block-category h1 {
  font-size: 36px;
  color: var(--petrole-fonce);
}


/* ==========================================================
   10. CARTES PRODUITS
   ========================================================== */

.product-miniature .thumbnail-container {
  background: var(--blanc);
  border: 1px solid #eee9df;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(17, 56, 79, 0.05);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.product-miniature .thumbnail-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(17, 56, 79, 0.10);
}

.product-miniature .product-title a {
  color: var(--petrole-fonce);
}

.product-miniature .product-price-and-shipping {
  color: var(--or-fonce);
}


/* ==========================================================
   11. BOUTONS
   ========================================================== */

.btn-primary {
  background: var(--or);
  border-color: var(--or);
  color: var(--blanc);
  border-radius: 5px;
  box-shadow: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--petrole);
  border-color: var(--petrole);
  color: var(--blanc);
}


/* ==========================================================
   12. NEWSLETTER
   ========================================================== */

.block_newsletter {
  background: var(--blanc);
}

.block_newsletter h3,
.block_newsletter .h3 {
  color: var(--petrole-fonce);
}


/* ==========================================================
   13. PIED DE PAGE
   ========================================================== */

.footer-container {
  background: var(--petrole);
  color: var(--creme);
}

.footer-container a {
  color: var(--creme);
}

.footer-container a:hover {
  color: var(--or-clair);
}

.footer-container h3,
.footer-container .h3,
.footer-container .h4 {
  color: var(--or-clair);
}


/* ==========================================================
   14. AGE GATE — FOND
   ========================================================== */

#age-gate-overlay {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 28px;

  box-sizing: border-box;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(30, 82, 101, 0.55),
      rgba(12, 43, 59, 0.98) 65%
    );
}


/* ==========================================================
   15. AGE GATE — FENÊTRE
   ========================================================== */

#age-gate-box {
  position: relative;

  width: 100%;
  max-width: 550px;

  padding: 48px 44px 42px;

  box-sizing: border-box;

  background: var(--ivoire);

  border-radius: 14px;

  border-top: 5px solid var(--or);

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.25);

  text-align: center;
}


/* Ligne dorée très discrète */

#age-gate-box::before {
  content: "";

  position: absolute;

  top: 10px;
  left: 35px;
  right: 35px;

  height: 1px;

  background: rgba(194, 163, 104, 0.45);
}


/* ==========================================================
   16. AGE GATE — TITRE
   ========================================================== */

#age-gate-box h2 {
  margin: 0 0 22px;

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: 38px;
  font-weight: 600;

  letter-spacing: 0.01em;

  color: var(--petrole-fonce);
}


/* ==========================================================
   17. AGE GATE — TEXTE
   ========================================================== */

#age-gate-box p {
  margin: 0 auto 28px;

  max-width: 440px;

  font-family: 'Mulish', Arial, sans-serif;

  font-size: 17px;
  line-height: 1.65;

  color: #514e49;
}


/* ==========================================================
   18. AGE GATE — BOUTON PRINCIPAL
   ========================================================== */

#age-gate-yes {
  display: block;

  width: 100%;

  padding: 16px 22px;

  border: 1px solid var(--petrole);
  border-radius: 6px;

  background: var(--petrole);

  color: var(--blanc);

  font-family: 'Mulish', Arial, sans-serif;

  font-size: 17px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

#age-gate-yes:hover {
  background: var(--petrole-fonce);
  border-color: var(--petrole-fonce);
}

#age-gate-yes:active {
  transform: translateY(1px);
}


/* ==========================================================
   19. AGE GATE — QUITTER
   ========================================================== */

#age-gate-no {
  display: inline-block;

  margin-top: 12px;

  padding: 12px 15px;

  border: 0;

  background: transparent;

  color: #907c68;

  font-family: 'Mulish', Arial, sans-serif;

  font-size: 15px;
  font-weight: 400;

  cursor: pointer;

  transition: color 0.2s ease;
}

#age-gate-no:hover {
  color: var(--petrole);
}


/* ==========================================================
   20. AGE GATE — TEXTE LÉGAL
   ========================================================== */

#age-gate-box .age-gate-legal {
  margin: 22px auto 0;

  max-width: 430px;

  font-size: 12.5px;
  line-height: 1.55;

  color: #99928a;
}


/* ==========================================================
   21. AGE GATE — MOBILE
   ========================================================== */

@media (max-width: 600px) {

  #age-gate-overlay {
    padding: 16px;
  }

  #age-gate-box {
    max-width: 100%;

    padding:
      38px
      24px
      32px;

    border-radius: 11px;
  }

  #age-gate-box h2 {
    font-size: 32px;
  }

  #age-gate-box p {
    font-size: 15.5px;
    line-height: 1.6;
  }

  #age-gate-yes {
    font-size: 16px;
    padding: 15px 16px;
  }

  #age-gate-no {
    font-size: 14px;
  }

}


/* ==========================================================
   22. PETITS ÉCRANS
   ========================================================== */

@media (max-width: 380px) {

  #age-gate-box {
    padding:
      32px
      18px
      27px;
  }

  #age-gate-box h2 {
    font-size: 29px;
  }

}
/* ==========================================================
   TITRES PRODUITS — PLUS VISIBLES
   ========================================================== */

.product-miniature .product-title,
.product-miniature .product-title a {
  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: 20px;
  line-height: 1.2;

  font-weight: 600;

  color: var(--petrole-fonce);

  text-align: center;

  letter-spacing: 0.01em;

  margin-top: 12px;
  margin-bottom: 10px;
}

.product-miniature .product-title a:hover {
  color: var(--or-fonce);
}

/* Prix légèrement mieux équilibré avec le nouveau titre */

.product-miniature .product-price-and-shipping,
.product-miniature .price {
  font-family: 'Mulish', Arial, sans-serif;

  font-size: 20px;
  line-height: 1.2;

  font-weight: 700;

  color: var(--or-fonce);

  margin-top: 6px;
}

/* Mobile */

@media (max-width: 767px) {

  .product-miniature .product-title,
  .product-miniature .product-title a {
    font-size: 18px;
  }

  .product-miniature .product-price-and-shipping,
  .product-miniature .price {
    font-size: 18px;
  }

}
/* ==========================================================
   23. BANDEAU « SITE EN CONSTRUCTION »
   ========================================================== */

.lcb-rebuild-bar {
  background: var(--or);
  color: #3a2e12;

  text-align: center;

  font-family: 'Mulish', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;

  padding: 8px 16px;

  position: relative;
  z-index: 1000;
}

.lcb-rebuild-bar a {
  color: #3a2e12;
  text-decoration: underline;
}

.lcb-rebuild-bar a:hover {
  color: var(--petrole-fonce);
}

@media (max-width: 600px) {
  .lcb-rebuild-bar {
    font-size: 12px;
    padding: 7px 12px;
  }
}
/* ==========================================================
   24. FOOTER — TITRE "VOTRE COMPTE" EN DORÉ
   ========================================================== */

.footer-container .myaccount-title a,
.footer-container p.h3 a {
  color: var(--or-clair);
}

.footer-container .myaccount-title a:hover,
.footer-container p.h3 a:hover {
  color: var(--or);
}