/* ============================================================
   Le Pont TARIN — brand stylesheet (Stage 2)
   Palette, typography, logo and decorative treatment sourced
   from the 2026 brandbook. Loaded after style.css / coloring.css
   so it can override the Calmind template's CSS variables.
   ============================================================ */

@font-face {
  font-family: "Moulay";
  src: url("../fonts/brand/Moulay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Moulay";
  src: url("../fonts/brand/Moulay-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZT Bros Oskon";
  src: url("../fonts/brand/ZTBrosOskon90s-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The template declares its variables on the universal selector (`*`),
   not `:root`, so every element carries its own copy. To win the
   cascade we must override on the same selector, not just `:root`. */
:root,
* {
  /* ---- Brand palette ---- */
  --tarin-soft-linen: #E5D7B5;
  --tarin-light-olive: #898765;
  --tarin-deep-moss: #2B2C1E;
  --tarin-dark-wood: #351F15;
  --tarin-clay: #C0A887;
  --tarin-maroon: #5E2828;
  --tarin-brick: #A85331;
  --tarin-leather: #774F33;

  /* ---- Template color hooks ---- */
  --primary-color: var(--tarin-brick);
  --primary-color-rgb: 168, 83, 49;
  --secondary-color: var(--tarin-maroon);
  --secondary-color-rgb: 94, 40, 40;

  /* ---- Typography ---- */
  --body-font: "Moulay", Helvetica, Arial, sans-serif;
  --body-font-weight: 300;
  --body-font-color: #3D3226;

  --heading-font: "Moulay", Helvetica, Arial, sans-serif;
  --heading-font-weight: 600;
  --heading-font-color: var(--tarin-dark-wood);
  --heading-font-color-bg-dark: var(--tarin-soft-linen);

  --alt-font: "ZT Bros Oskon", Georgia, serif;

  --mainmenu-font-weight: 600;
  --btn-font-weight: 600;

  /* ---- Surfaces ---- */
  --bg-default: #FCF9F2;
  --bg-light: var(--tarin-soft-linen);
  --bg-dark-1: var(--tarin-dark-wood);
  --bg-dark-2: var(--tarin-dark-wood);
  --bg-dark-3: var(--tarin-deep-moss);
  --bg-dark-1-rgb: 53, 31, 21;
  --bg-color-even: #EFE6D5;
  --bg-color-odd: #F6F1E6;
  --border-color: #D8C9AD;

  --btn-hover-bg: var(--tarin-deep-moss);
}

body {
  background: var(--bg-default);
}

/* Secondary accent color (icons, small highlights). Maroon (--secondary-color)
   is too dark against the site's photo overlays and dark sections (hero
   contact row, CTA band, footer contact icons, HoReCa/Producer numbered
   lists), so on those dark backgrounds we use a light brand tone instead —
   Clay, not white, to stay warm and stay off pure white/black per brandbook. */
.id-color-2,
a.id-color-2,
span.id-color-2 {
  color: var(--tarin-clay);
}

/* Same fix for footer link hover. The template's global `a:hover` rule sets
   a dark body-text color and — because a pseudo-class outranks the plain
   `footer a` element selector — wins over the footer's own light link color,
   so any hovered footer link (nav list, subfooter Legal/Privacy links, etc.)
   turned dark and disappeared into the Dark Wood background.
   `footer .widget a:hover` must stay listed too: coloring.css sets it to
   Maroon with higher specificity than `footer a:hover`. */
footer a:hover,
footer .widget a:hover {
  color: var(--tarin-clay);
}

/* Elegant serif accent for pull-quotes & signature taglines,
   echoing the "Le pont" / TARIN pairing in the primary logo. */
.alt-font {
  font-family: var(--alt-font);
  font-weight: 400;
}

blockquote,
.brand-quote {
  font-family: var(--alt-font);
  font-weight: 400;
}

/* Buttons: soften further per the brandbook's "no sharp edges" logo concept */
.btn-main,
a.btn-line {
  letter-spacing: .5px;
}

/* Subtitle eyebrow labels already inherit --primary-color via subtitle-color */

/* ---- Decorative bird watermark ---- */
.tarin-watermark {
  position: absolute;
  pointer-events: none;
  opacity: .22;
  z-index: 1;
}

/* ---- Leaf pattern divider strip ---- */
.tarin-pattern-strip {
  background-image: url("../images/brand/pattern-dark.png");
  background-repeat: repeat;
  background-size: 420px auto;
}

/* ---- Paper texture accent on quote / stat blocks ---- */
.tarin-paper {
  background-image: url("../images/brand/paper-texture-1.jpg");
  background-size: cover;
  background-position: center;
}

/* ---- Stamp accent ---- */
.tarin-stamp {
  width: 110px;
  height: auto;
  opacity: .9;
}

/* Slightly warmer, rounder image corners across content photography */
.rounded-1 {
  border-radius: 14px !important;
}

/* Main menu over the hero photo (header at page top, before the white bar
   appears on scroll): white links, Soft Linen for the active/hovered item.
   Scoped to desktop (`:not(.header-mobile)`) and `:not(.smaller)` so the
   scrolled white header and the mobile dropdown keep their dark text. */
header:not(.smaller):not(.header-mobile) #mainmenu > li > a.menu-item {
  color: #fff;
}

header:not(.smaller):not(.header-mobile) #mainmenu > li > a.menu-item:hover {
  color: var(--tarin-soft-linen);
}

/* style.css forces the active item with !important, so this needs it too. */
header:not(.smaller):not(.header-mobile) #mainmenu > li > a.menu-item.active {
  color: var(--tarin-soft-linen) !important;
}

/* Header "Let's talk" button over the hero photo (page top): light outline
   and text instead of the template's dark `.btn-line.dark`. Hover matches the
   menu (Soft Linen). Scrolled white header and mobile keep the dark version. */
header:not(.smaller):not(.header-mobile) .menu_side_area a.btn-line.dark,
header:not(.smaller):not(.header-mobile) .menu_side_area a.btn-line.dark:hover {
  color: #fff;
  border-color: var(--tarin-soft-linen);
}

header:not(.smaller):not(.header-mobile) .menu_side_area a.btn-line.dark:hover {
  color: var(--tarin-soft-linen);
  border-color: var(--tarin-soft-linen);
}

/* Numbered advantage lists (HoReCa "What We Bring to You", Producer "Why Become
   a Partner"). The template's `.d-flex` is `white-space: nowrap`, which made
   long descriptions run past the column under the photo, so wrapping is
   restored here. The divider is a faint Soft Linen tint on the Dark Wood
   background instead of Bootstrap's bright `border-light-subtle`. */
.tarin-adv-item {
  white-space: normal;
  border-bottom: 1px solid rgba(229, 215, 181, .12);
}

.tarin-adv-item > div:last-child {
  min-width: 0;
}

.tarin-adv-item p {
  line-height: 1.5;
}

/* Quote / tagline bands: the brand leaf pattern (pattern_light.svg) as a very
   faint texture on the section's own light background. The SVG is cream
   (#e0d1aa at .42 opacity), which is nearly invisible on light backgrounds,
   so it is multiplied onto them (slightly darkens instead of lightening).
   Tiled at 640px; `cover` blew the leaves up to the full band width. */
.tarin-pattern-band {
  position: relative;
  overflow: hidden;
}

.tarin-pattern-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brand/pattern_light.svg") center top / 640px auto repeat;
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events: none;
}

.tarin-pattern-band > .container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Responsive fixes (tablet / mobile)
   Every rule below is scoped to a max-width query or to `header.header-mobile`
   (the class designesia.js adds at <=993px, the template's own breakpoint),
   so desktop is unaffected.
   ========================================================================== */

/* The mobile/tablet header bar is white, so it needs the dark logo. The
   template only swaps to `.logo-mobile` at <=767px, which left the white
   logo invisible on tablets (768-993px). */
header.header-mobile .logo-main,
header.header-mobile .logo-scroll {
  display: none !important;
}

header.header-mobile .logo-mobile {
  display: block !important;
}

/* Collapsed mobile menu: on tablets its first item ("Home") peeked out under
   the header bar. It is only needed while the menu is open. */
header.header-mobile:not(.menu-open) #mainmenu {
  display: none;
}

/* Inner-page banners: the template pads #subheader with 40px on small
   screens (for a transparent header), so the eyebrow and title sat under our
   white header bar. Clear the top-bar + header height instead. */
@media (max-width: 992px) {
  #subheader {
    padding: 160px 0 90px 0 !important;
  }
}

@media (max-width: 575px) {
  #subheader {
    padding: 120px 0 90px 0 !important;
  }

  #subheader h1 {
    font-size: 40px;
  }

  /* Home hero */
  h1.fs-64 {
    font-size: 44px;
  }

  /* Button + phone rows and the hero contact line were `nowrap` and ran
     off the right edge. */
  main .de-flex.justify-content-start {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .tarin-hero-contact {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .tarin-hero-contact .tarin-dot {
    display: none;
  }

  .tarin-hero-contact > span:first-child {
    margin-right: 20px;
  }

  .tarin-contact-card {
    padding: 24px !important;
  }

  /* Numbered lists: narrower number column to leave room for the text. */
  .tarin-adv-item > div:first-child {
    min-width: 44px !important;
    margin-right: 1rem !important;
  }
}

/* Tablet: container gutters were only ~10px. */
@media (min-width: 576px) and (max-width: 991px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Contact page: the form card sat flush against the phone row when the two
   columns stack. */
@media (max-width: 991px) {
  .tarin-contact-card {
    margin-top: 32px;
  }
}

/* Tablet: the open mobile menu started under the top bar and collided with
   the logo row (the top bar is hidden on phones, so only tablets need this). */
@media (min-width: 576px) and (max-width: 992px) {
  header.header-mobile #mainmenu {
    margin-top: 50px;
  }
}

/* Laptop/small-desktop gap (993-1400px): the template only switches to the
   burger menu at 992px, but the horizontal nav + "Nous contacter" button
   were sized for wide desktops and wrapped to a second row as soon as
   French labels ("Espace producteurs", etc.) made the menu wider than
   English. Tightened spacing/sizing here instead of moving the burger
   breakpoint, so it stays exactly where the template puts it. */
@media (min-width: 993px) and (max-width: 1150px) {
  header div#logo img {
    max-width: 130px;
  }

  #mainmenu li {
    margin-right: 9px;
  }

  #mainmenu a.menu-item {
    font-size: 12px;
  }

  .menu_side_area a.btn-line {
    padding: 5px 12px;
    font-size: 12px;
  }
}

@media (min-width: 1151px) and (max-width: 1400px) {
  header div#logo img {
    max-width: 160px;
  }

  #mainmenu li {
    margin-right: 16px;
  }

  #mainmenu a.menu-item {
    font-size: 13px;
  }

  .menu_side_area a.btn-line {
    padding: 6px 18px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

/* Open mobile/tablet menu: the template renders each link `inline-block`,
   so only the words were tappable. Make the whole row the tap target. */
header.header-mobile #mainmenu a.menu-item {
  display: block;
}

@media (max-width: 575px) {
  /* Smaller logo in the header bar (was 190px). */
  header.header-mobile div#logo img {
    max-width: 150px;
  }

  /* Section headings: 36px / 1.6 was large and airy on a phone. */
  main h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  main h2.alt-font {
    font-size: 32px;
  }

  /* Breadcrumb pill: it is centred with `left: 50%`, which caps its width at
     half the banner and forced "Home > Our services" onto two lines. */
  .crumb-wrapper {
    white-space: nowrap;
  }
}

/* ==========================================================================
   Top bar: language switch + social links
   ========================================================================== */
.tarin-lang {
  display: flex;
  align-items: center;
  margin-right: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
}

.tarin-lang [aria-current] {
  color: #fff;
  font-weight: 300;
}

#topbar .tarin-lang a {
  color: var(--tarin-clay);
  transition: color .2s ease;
}

#topbar .tarin-lang a:hover,
#topbar .tarin-lang a:focus-visible {
  color: #fff;
}

.tarin-lang-sep {
  margin: 0 8px;
  color: #fff;
  opacity: .45;
}

#topbar .social-icons a + a,
footer .social-icons a + a {
  margin-left: 14px;
}

/* The template lays the top-bar icons out as inline boxes with padding and
   `margin-top: 5px` (style.css `#topbar .social-icons i`), so they sit ~2px
   below the centre of the bar and of the text next to them. Centre them
   with flexbox instead, whatever the template's offsets. */
#topbar .social-icons {
  display: flex;
  align-items: center;
}

#topbar .social-icons a {
  display: flex;
  align-items: center;
}

/* Keeps the template's 30x30 hover square; the glyph is centred in it. */
#topbar .social-icons i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* ==========================================================================
   Legal pages (Legal notice / Privacy policy)
   ========================================================================== */
.tarin-legal h2 {
  font-size: 26px;
  line-height: 1.3;
  margin: 2.4rem 0 .75rem;
}

.tarin-legal .tarin-legal-meta + h2,
.tarin-legal > .container .col-lg-8 > h2:first-child {
  margin-top: 0;
}

.tarin-legal p,
.tarin-legal li {
  line-height: 1.75;
}

.tarin-legal ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}

.tarin-legal li {
  margin-bottom: .5rem;
}

.tarin-legal a {
  color: var(--tarin-brick);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tarin-legal a:hover {
  color: var(--tarin-maroon);
}

.tarin-legal .tarin-legal-meta {
  margin-bottom: 1.5rem;
  opacity: .8;
}

@media (max-width: 575px) {
  .tarin-legal h2 {
    font-size: 22px;
  }
}

/* ==========================================================================
   Brand-pattern banner (Contact page): the leaf pattern on a dark moss
   ground instead of a photo. The existing .sw-overlay darkens it so the
   white title keeps its contrast.
   ========================================================================== */
#subheader.tarin-pattern-hero {
  background-color: #6c6b50;
  background-image: url("../images/brand/pattern-dark.png");
  background-position: center;
  background-repeat: repeat !important;
  background-size: 420px auto !important;
}

/* ==========================================================================
   Cookie notice (js/cookie-consent.js)
   ========================================================================== */
.tarin-cookie[hidden] {
  display: none !important;
}

.tarin-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 100000;
  width: min(540px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #f4ecd8;
  color: var(--tarin-dark-wood);
  border: 1px solid rgba(53, 31, 21, .18);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(30, 18, 10, .28);
  font-family: var(--body-font);
  font-size: 14.5px;
  line-height: 1.55;
}

@media (prefers-reduced-motion: no-preference) {
  .tarin-cookie {
    animation: tarinCookieIn .28s ease-out;
  }
}

@keyframes tarinCookieIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.tarin-cookie__inner {
  padding: 22px 24px 20px;
}

.tarin-cookie__title {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--tarin-dark-wood);
}

.tarin-cookie__title:focus {
  outline: none;
}

.tarin-cookie__text {
  margin: 0 0 14px;
}

.tarin-cookie__text a {
  color: var(--tarin-brick);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tarin-cookie__prefs {
  margin: 0 0 14px;
  border-top: 1px solid rgba(53, 31, 21, .16);
}

.tarin-cookie__prefs[hidden] {
  display: none !important;
}

.tarin-cookie__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(53, 31, 21, .16);
  cursor: pointer;
}

.tarin-cookie__row strong {
  display: block;
}

.tarin-cookie__row small {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  opacity: .85;
}

.tarin-cookie__row input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--tarin-brick);
}

.tarin-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tarin-cookie__btn {
  appearance: none;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--tarin-dark-wood);
  border-radius: 40px;
  background: var(--tarin-dark-wood);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.tarin-cookie__btn--accept {
  border-color: var(--tarin-brick);
  background: var(--tarin-brick);
}

.tarin-cookie__btn:hover {
  background: var(--tarin-maroon);
  border-color: var(--tarin-maroon);
}

.tarin-cookie__btn[hidden],
.tarin-cookie__link[hidden] {
  display: none !important;
}

.tarin-cookie__link {
  appearance: none;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--tarin-dark-wood);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tarin-cookie :focus-visible {
  outline: 3px solid var(--tarin-brick);
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .tarin-cookie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }

  .tarin-cookie__inner {
    padding: 18px 18px 16px;
  }

  .tarin-cookie__btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Language switch inside the mobile / tablet menu. Hidden in the desktop
   nav (the top bar carries the switch there); shown only while the burger
   menu is active (`header-mobile`, the template's own <=993px class).
   ========================================================================== */
#mainmenu .tarin-menu-lang {
  display: none;
}

header.header-mobile #mainmenu .tarin-menu-lang {
  display: flex;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(53, 31, 21, .12);
}

header.header-mobile #mainmenu .tarin-menu-lang > * {
  flex: 1 1 50%;
  display: block;
  padding: 16px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
}

header.header-mobile #mainmenu .tarin-menu-lang [aria-current] {
  color: var(--tarin-brick);
  font-weight: 300;
}

header.header-mobile #mainmenu .tarin-menu-lang a {
  color: var(--tarin-dark-wood);
}

/* Footer language switch: same rule as the top bar - the active language is
   the lighter weight, the link to the other language the heavier one. */
.tarin-footer-lang [aria-current] {
  color: #fff;
  font-weight: 300;
}

.tarin-footer-lang a {
  font-weight: 600;
}