/* ============================================================
   OCG THEME — main stylesheet
   Design tokens are taken directly from the OCG Figma file.
   Edit colors/fonts in ONE place: the :root block below.
   ============================================================ */

:root {
  /* Brand colors */
  --ocg-blue:        #144D8D;  /* primary brand blue: bars, buttons, prices */
  --ocg-blue-dark:   #063E7D;  /* darker headings */
  --ocg-blue-deep:   #07366B;  /* section titles */
  --ocg-blue-mid:    #374A8D;  /* card link text */
  --ocg-green:       #92B722;  /* primary CTA green */
  --ocg-green-alt:   #A5C422;  /* highlighted card border / badges */

  /* Neutrals */
  --ocg-text:        #2B2C2D;
  --ocg-text-soft:   #f3f4f5;  /* light text on dark */
  --ocg-muted:       #6B7280;
  --ocg-white:       #FFFFFF;

  /* Surfaces */
  --ocg-surface:     #F4F6F8;  /* product cards */
  --ocg-surface-2:   #F7F9FA;
  --ocg-surface-3:   #F0F5FC;  /* light-blue section */

  /* Borders */
  --ocg-border:      #DCE5F1;
  --ocg-border-2:    #D1DBE8;
  --ocg-border-3:    #CFD1D9;

  /* Type */
  --ocg-font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ocg-display:     var(--ocg-font);  /* headings now use Inter (was "Outfit") */

  /* Layout */
  --ocg-container:   1200px;
  --ocg-radius:      20px;
  --ocg-pill:        145px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--ocg-font);
  color: var(--ocg-text);
  background: var(--ocg-white);
  line-height: 1.5;
  font-size: 16px;
}
.ocg-container {
  max-width: var(--ocg-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.ocg-section { padding-block: 56px; }

/* ---------- Buttons ---------- */
.ocg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 23px;
  border-radius: var(--ocg-pill);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: 1px solid transparent;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}
.ocg-btn--green { background: var(--ocg-green); color: #fff; }
.ocg-btn--green:hover { filter: brightness(.94); }
.ocg-btn--outline-blue { background: #fff; border-color: var(--ocg-blue); color: var(--ocg-blue); }
.ocg-btn--outline-blue:hover { background: var(--ocg-blue); color: #fff; }
.ocg-btn--ghost-blue { background: transparent; border-color: var(--ocg-blue); color: var(--ocg-blue); }
.ocg-btn--ghost-blue:hover { background: var(--ocg-blue); color:#fff; }

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.ocg-topbar {
  background: var(--ocg-blue);
  color: #fff;
  font-size: 15px;
  height: 56px;
}
.ocg-topbar .ocg-container {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ocg-topbar__left,
.ocg-topbar__right { display: flex; align-items: center; gap: 16px; }
.ocg-topbar__label { font-weight: 500; }
.ocg-social { display: flex; align-items: center; gap: 10px; }
.ocg-social a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: #fff; border-radius: 50%;
  transition: transform .15s ease;
}
.ocg-social a:hover { transform: translateY(-1px); }
.ocg-social svg { width: 16px; height: 16px; fill: var(--ocg-blue); }
.ocg-lang { display: flex; align-items: center; gap: 6px; }
.ocg-lang a { font-weight: 600; opacity: .7; }
.ocg-lang a.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.ocg-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ocg-text-soft); font-weight: 500; }
.ocg-phone svg { width: 16px; height: 16px; fill: currentColor; }

/* ============================================================
   MAIN HEADER
   ============================================================ */
.ocg-header { background: #fff; border-bottom: 1px solid #eef1f5; }
.ocg-header .ocg-container {
  height: 100px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.ocg-logo { flex: 0 0 auto; }
.ocg-logo img { height: 70px; width: auto; }
.ocg-logo__fallback {
  font-family: var(--ocg-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ocg-blue);
  letter-spacing: .5px;
}
.ocg-nav { flex: 1 1 auto; }
.ocg-nav ul {
  display: flex;
  gap: 35px;
  justify-content: center;
  flex-wrap: wrap;
}
.ocg-nav a {
  color: var(--ocg-text);
  font-size: 16px;
  text-transform: capitalize;
}
.ocg-nav .current-menu-item > a,
.ocg-nav a.is-active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ocg-cart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ocg-blue);
  font-weight: 700;
  font-size: 15px;
}
.ocg-cart svg { width: 24px; height: 24px; stroke: var(--ocg-blue); fill: none; }

/* mobile nav toggle (hidden on desktop) */
.ocg-nav-toggle { display: none; background: none; border: 0; padding: 8px; }
.ocg-nav-toggle svg { width: 26px; height: 26px; stroke: var(--ocg-text); }

/* ============================================================
   HERO
   ============================================================ */
.ocg-hero {
  position: relative;
  min-height: 495px;
  background: #000 center/cover no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ocg-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(89.6deg, rgba(3,26,53,.55) 30%, rgba(161,180,202,.35) 95%);
}
.ocg-hero__inner { position: relative; z-index: 1; max-width: 660px; padding-block: 40px; }
.ocg-hero h1 {
  margin: 0 0 25px;
  color: #fff;
  font-size: 48px;
  line-height: 1.18;
  font-weight: 700;
}
.ocg-hero p {
  margin: 0 0 40px;
  color: var(--ocg-text-soft);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

/* ============================================================
   SECTION HEADERS (Meilleures ventes, Nouveautés, ...)
   ============================================================ */
.ocg-rowhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.ocg-rowhead h2 {
  margin: 0;
  color: var(--ocg-blue-deep);
  font-size: 41px;
  font-weight: 700;
  line-height: 1.05;
}
.ocg-arrows { display: flex; gap: 9px; }
.ocg-arrows button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  background: #c5c7d0;
}
.ocg-arrows button.is-primary { background: var(--ocg-blue); }
.ocg-arrows svg { width: 18px; height: 18px; stroke: #fff; fill: none; }

/* ============================================================
   PRODUCT GRID + CARD
   ============================================================ */
.ocg-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
}
.ocg-card {
  position: relative;
  background: var(--ocg-surface);
  border: 1px solid transparent;
  border-radius: var(--ocg-radius);
  padding: 20px 17px;
  display: flex;
  flex-direction: column;
  min-height: 481px;
}
.ocg-card.is-featured { border-color: var(--ocg-green-alt); }
.ocg-card__badge {
  position: absolute;
  top: 20px; left: 14px;
  padding: 2px 12px;
  border-radius: 62px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.ocg-card__badge--new { background: var(--ocg-blue); }
.ocg-card__badge--off { background: var(--ocg-green-alt); }
.ocg-card__media {
  height: 229px;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.ocg-card__media img { max-height: 100%; width: auto; object-fit: contain; }
.ocg-card__placeholder {
  width: 100%; height: 100%;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, #e9edf2 0 12px, #eef2f6 12px 24px);
  display: grid; place-items: center;
  color: #9aa6b2; font-size: 13px; text-align: center;
}
.ocg-card__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ocg-text);
  margin: 0 0 14px;
  min-height: 26px;
}
.ocg-card__ref { color: var(--ocg-muted); font-size: 14px; margin: 0 0 8px; }
.ocg-card__ref span { color: var(--ocg-text); }
.ocg-card__pricelabel { color: var(--ocg-muted); font-size: 15px; margin: 0; }
.ocg-card__price {
  color: var(--ocg-blue);
  font-size: 24px;
  font-weight: 700;
  margin: 2px 0 16px;
}
.ocg-card .ocg-btn { width: 100%; padding-block: 12px; margin-top: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.ocg-footer { background: var(--ocg-blue); color: #fff; padding-top: 56px; }
.ocg-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 40px;
  padding-bottom: 40px;
}
.ocg-footer__brand img { width: 121px; margin-bottom: 18px; }
.ocg-footer__brand .ocg-logo__fallback { color: #fff; margin-bottom: 18px; }
.ocg-footer__brand p { font-size: 15px; line-height: 1.73; max-width: 525px; margin: 0; }
.ocg-footer h3 {
  font-size: 16px; font-weight: 700; text-transform: capitalize;
  margin: 0 0 18px;
}
.ocg-footer__col p, .ocg-footer__col li { font-size: 14px; line-height: 30px; margin: 0; }
.ocg-footer__col strong { font-weight: 600; }
.ocg-footer__social h3 { margin-bottom: 14px; }
.ocg-footer__social .ocg-social { justify-content: flex-end; }
.ocg-footer__bottom {
  border-top: 2px solid rgba(255,255,255,.2);
  padding-block: 16px;
  text-align: center;
  font-size: 14px;
}
.ocg-footer__bottom strong { font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .ocg-products { grid-template-columns: repeat(2, 1fr); }
  .ocg-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ocg-topbar__label { display: none; }
  .ocg-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid #eef1f5;
    display: none; z-index: 50;
  }
  .ocg-header { position: relative; }
  .ocg-header.nav-open .ocg-nav { display: block; }
  .ocg-nav ul { flex-direction: column; gap: 0; }
  .ocg-nav li { padding: 14px 24px; border-bottom: 1px solid #f1f4f7; }
  .ocg-nav-toggle { display: inline-flex; margin-left: auto; }
  .ocg-nav { order: 5; }
  .ocg-hero h1 { font-size: 34px; }
  .ocg-hero p { font-size: 17px; }
  .ocg-rowhead h2 { font-size: 30px; }
}
@media (max-width: 560px) {
  .ocg-products { grid-template-columns: 1fr; }
  .ocg-footer__grid { grid-template-columns: 1fr; }
  .ocg-footer__social .ocg-social { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   PRO BANNER (Dentistes / Prothésistes)
   ============================================================ */
.ocg-pro { text-align: center; }
.ocg-pro__title {
  color: var(--ocg-blue-dark);
  font-size: 41px; font-weight: 700; line-height: 1.05;
  max-width: 781px; margin: 0 auto 40px;
}
.ocg-pro__banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--ocg-radius);
  overflow: hidden;
  text-align: left;
}
.ocg-pro__panel { padding: 48px 56px; display: flex; flex-direction: column; gap: 24px; }
.ocg-pro__panel--blue  { background: var(--ocg-blue); }
.ocg-pro__panel--green { background: var(--ocg-green); }
.ocg-pro__panel h3 { color: #fff; font-size: 40px; font-weight: 600; margin: 0; line-height: 1.1; }
.ocg-pro__panel p  { color: var(--ocg-text-soft); font-size: 16px; font-weight: 500; margin: 0; }
.ocg-pro__panel .ocg-btn { align-self: flex-start; background:#fff; color: var(--ocg-blue-mid); border-color: var(--ocg-border-3); }
.ocg-pro__panel .ocg-btn:hover { filter: brightness(.97); }

/* ============================================================
   EVENTS
   ============================================================ */
.ocg-events { background: var(--ocg-surface-3); }
.ocg-events__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-auto-rows: 1fr;
  gap: 24px;
}
.ocg-event {
  position: relative;
  border-radius: var(--ocg-radius);
  overflow: hidden;
  min-height: 290px;
  background: #20364d;
  display: flex; align-items: flex-end;
  padding: 28px;
  color: #fff;
}
.ocg-event--lg { grid-row: span 2; min-height: 606px; }
.ocg-event__ph { position: absolute; inset: 0; background:
    repeating-linear-gradient(45deg, #2b425c 0 16px, #324a66 16px 32px); }
.ocg-event::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.ocg-event__body { position: relative; z-index: 1; max-width: 460px; }
.ocg-event h3 { font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.ocg-event--lg h3 { font-size: 30px; }
.ocg-event p { font-size: 15px; line-height: 1.5; margin: 0 0 16px; opacity: .95; }
.ocg-event .ocg-btn { background: transparent; border-color: #fff; color: #fff; padding: 12px 22px; }
.ocg-event .ocg-btn:hover { background: #fff; color: var(--ocg-text); }

/* ============================================================
   PARTNERS
   ============================================================ */
.ocg-partners { text-align: center; }
.ocg-partners h2 {
  color: var(--ocg-blue-deep);
  font-size: 41px; font-weight: 700; line-height: 1.1;
  max-width: 940px; margin: 0 auto 40px;
}
.ocg-partners__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 40px;
}
.ocg-partners__logo {
  height: 60px; width: 150px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--ocg-border);
  border-radius: 10px;
  color: #9aa6b2; font-size: 13px;
}
.ocg-partners__dots { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.ocg-partners__dots span { width: 18px; height: 4px; border-radius: 3px; background: var(--ocg-blue); opacity: .2; }
.ocg-partners__dots span.is-active { opacity: 1; }

/* ============================================================
   CONTACT
   ============================================================ */
.ocg-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.ocg-contact__title { color: var(--ocg-blue-dark); font-size: 41px; font-weight: 700; line-height: 1.1; margin: 0 0 24px; }
.ocg-contact__sub   { color: #5a6569; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0 0 16px; }
.ocg-contact__text  { color: var(--ocg-text); font-size: 18px; line-height: 1.7; margin: 0; }
.ocg-form {
  background: var(--ocg-surface-3);
  border: 1px solid var(--ocg-border);
  border-radius: 23px;
  padding: 40px 31px;
  display: flex; flex-direction: column; gap: 23px;
}
.ocg-form__row { display: flex; gap: 15px; }
.ocg-form__row .ocg-field { flex: 1; }
.ocg-field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--ocg-border-2);
  border-radius: 11px;
  padding: 14px 16px;
  font: inherit; color: var(--ocg-text);
}
.ocg-field::placeholder { color: var(--ocg-muted); }
textarea.ocg-field { min-height: 86px; resize: vertical; }
.ocg-form .ocg-btn { align-self: center; min-width: 175px; padding: 13px 23px; }

@media (max-width: 1100px) {
  .ocg-pro__banner { grid-template-columns: 1fr; }
  .ocg-events__grid { grid-template-columns: 1fr; }
  .ocg-event--lg { grid-row: auto; min-height: 320px; }
  .ocg-contact__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .ocg-pro__panel { padding: 32px 24px; }
  .ocg-pro__title, .ocg-partners h2, .ocg-contact__title { font-size: 28px; }
  .ocg-form__row { flex-direction: column; }
}

/* ============================================================
   VISUAL-UPDATE PASS — real icons, Compte, EN flag, Contact page
   ============================================================ */
:root { --ocg-muted: #5A6569; --ocg-lightblue: #3FB6E0; --ocg-nav: #413F3F; }

/* real social icons (img in circle) */
.ocg-social { display: inline-flex; align-items: center; gap: 10px; list-style: none; }
.ocg-social a { width: 32px; height: 32px; border-radius: 50%; background: #fff; overflow: hidden; display: block; text-decoration: none; }
.ocg-social a img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* header actions: Panier + Compte */
.ocg-headactions { display: inline-flex; align-items: center; gap: 22px; }
.ocg-cart, .ocg-account { display: inline-flex; align-items: center; gap: 8px; color: var(--ocg-blue); font-weight: 700; font-size: 15px; text-decoration: none; }
.ocg-cart svg, .ocg-account svg { width: 22px; height: 22px; stroke: var(--ocg-blue); fill: none; }

/* EN + flag */
.ocg-lang { display: inline-flex; align-items: center; gap: 7px; }
.ocg-lang__flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; }
.ocg-lang a { color: #fff; text-decoration: none; font-size: 15px; }
.ocg-lang b { font-weight: 600; }

/* header logo image */
.ocg-logo img { height: 70px; width: auto; display: block; }

/* partner logos as images */
.ocg-partners__logo img { height: 54px; width: auto; object-fit: contain; }

/* ---------- CONTACT PAGE (exact replica) ---------- */
.ocgc { padding: 56px 0 80px; }
.ocgc__title { text-align:center; color:#0B3D7D; font-size:42px; font-weight:700; margin:0 0 22px; }
.ocgc__intro { max-width:945px; margin:0 auto 54px; text-align:center; color:#4B5563; font-size:18px; line-height:1.75; }
.ocgc__card { background:#EAF1FB; border-radius:24px; padding:56px 60px; display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start; }
.ocgc__left h2 { color:#0B3D7D; font-size:34px; font-weight:700; line-height:1.2; margin:0 0 26px; }
.ocgc__left .sub { color:#5A6066; font-size:22px; font-weight:600; margin:0 0 18px; }
.ocgc__left .lead { color:#5A6066; font-size:16px; line-height:1.6; margin:0; }
.ocgc__form { display:flex; flex-direction:column; gap:20px; }
.ocgc__row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ocgc__field { width:100%; background:#fff; border:1px solid #DDE5F0; border-radius:10px; padding:17px 18px; font:inherit; color:#2B2C2D; }
.ocgc__field::placeholder { color:#9AA6B2; }
textarea.ocgc__field { min-height:104px; resize:vertical; }
.ocgc__submit { display:flex; justify-content:center; margin-top:4px; }
.ocgc__submit .btn { background:#fff; border:1px solid #144D8D; color:#144D8D; border-radius:40px; padding:14px 34px; font-weight:600; font-size:16px; cursor:pointer; }
.ocgc__submit .btn:hover { background:#144D8D; color:#fff; }
.ocgc__info { display:flex; justify-content:center; gap:72px; flex-wrap:wrap; margin:64px 0 44px; }
.ocgc__infoitem { display:flex; align-items:center; gap:16px; color:#2B2C2D; font-size:18px; }
.ocgc__infoicon { width:48px; height:48px; border-radius:50%; background:#EAF1FB; display:grid; place-items:center; flex:0 0 auto; }
.ocgc__infoicon svg { width:22px; height:22px; stroke:#144D8D; fill:none; }
.ocgc__map { position:relative; border-radius:16px; overflow:hidden; height:445px; }
.ocgc__map iframe { width:100%; height:100%; border:0; display:block; }
.ocgc__mapbtn { position:absolute; top:24px; left:24px; background:#92B722; color:#fff; border-radius:8px; padding:12px 20px; font-weight:600; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
@media (max-width:980px){ .ocgc__card{grid-template-columns:1fr; gap:32px; padding:36px 28px} .ocgc__info{gap:32px} }
@media (max-width:560px){ .ocgc__row{grid-template-columns:1fr} .ocgc__title{font-size:30px} .ocgc__left h2{font-size:26px} }

/* ---------- HEADER SPACING FIX (single-line nav, aligned row) ----------
   NOTE: these nav rules are DESKTOP-ONLY. Unscoped, they came later in the
   file than the mobile block above and overrode `display:none`, which left
   the mobile menu permanently open with no way to close it. */
.ocg-header .ocg-container { max-width: 1300px; gap: 28px; }
.ocg-topbar .ocg-container { max-width: 1300px; }
@media (min-width: 861px) {
  .ocg-nav { display: flex; justify-content: center; }
  .ocg-nav ul { flex-wrap: nowrap !important; gap: 24px; align-items: center; margin: 0; padding: 0; list-style: none; }
  .ocg-nav li { margin: 0; padding: 0; }
  .ocg-nav a { white-space: nowrap; text-decoration: none; }
  .ocg-nav a.is-active, .ocg-nav .current-menu-item > a { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
}
@media (min-width: 861px) and (max-width: 1280px){ .ocg-nav ul { gap: 18px; } .ocg-nav a { font-size: 15px; } }

/* ---------- À PROPOS PAGE (recalibrated to Figma, tighter) ---------- */
.ocg-about__intro { background: var(--ocg-surface-2); padding: 56px 0; }
.ocg-about__grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; max-width:1120px; margin-inline:auto; }
.ocg-about__grid h2 { color: var(--ocg-blue); font-size:28px; font-weight:700; margin:0 0 16px; }
.ocg-about__grid h3 { color:#5A6569; font-size:18px; font-weight:700; margin:22px 0 10px; }
.ocg-about__grid p { color:#5A6569; font-size:15px; line-height:1.7; margin:0; }
.ocg-about__grid img { width:100%; border-radius:16px; display:block; }

.ocg-vision { padding: 48px 0; }
.ocg-vision__img { width:100%; border-radius:20px; display:block; }

.ocg-values { background: var(--ocg-surface-2); padding: 52px 0 64px; text-align:center; }
.ocg-values h2 { color: var(--ocg-blue); font-size:28px; font-weight:700; margin:0 0 34px; }
.ocg-values__grid { display:grid !important; grid-template-columns: repeat(4,1fr); gap:22px; max-width:1040px; margin-inline:auto; }
.ocg-value { background:#fff; border:1px solid #EDEFF2; border-radius:12px; padding:28px 16px; box-shadow:0 1px 3px rgba(16,40,80,.05); }
.ocg-value img { width:62px; height:62px; margin:0 auto 14px; display:block; }
.ocg-value span { color: var(--ocg-blue); font-size:17px; font-weight:700; }

.ocg-aboutcta { text-align:center; padding: 60px 0; }
.ocg-aboutcta h2 { color: var(--ocg-blue); font-size:28px; font-weight:700; margin:0 0 26px; }
.ocg-btn--green-outline { background:#fff; border:1px solid var(--ocg-green); color: var(--ocg-green); border-radius:40px; padding:12px 30px; font-weight:600; }
.ocg-btn--green-outline:hover { background:var(--ocg-green); color:#fff; }
@media (max-width:1000px){ .ocg-about__grid{grid-template-columns:1fr; gap:28px} .ocg-values__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .ocg-values__grid{grid-template-columns:repeat(2,1fr); gap:14px} .ocg-about__grid h2,.ocg-values h2,.ocg-aboutcta h2{font-size:24px} }

/* ============================================================
   PARTENAIRES PAGE
   ============================================================ */
.ocg-partpage h1, .ocg-partpage h2 { color: var(--ocg-blue-deep); font-weight: 700; }

/* logo wall */
.ocg-pwall { background:#fff; padding: 54px 0 46px; text-align:center; }
.ocg-pwall h1 { font-size: 30px; margin: 0 0 40px; }
.ocg-pwall__row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 40px 64px; max-width: 900px; margin: 0 auto; }
.ocg-pwall__row img { height: 40px; width:auto; object-fit:contain; }

/* filterable cards */
.ocg-pcards { background: var(--ocg-surface-3, #F0F5FC); padding: 56px 0 64px; }
.ocg-pcards h2 { font-size: 30px; text-align:center; margin: 0 0 32px; }
.ocg-pfilters { display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; max-width: 760px; margin: 0 auto 40px; }
.ocg-pfilter { background:#fff; border:1px solid #BBD0EC; color: var(--ocg-blue); border-radius:40px; padding:9px 20px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; }
.ocg-pfilter:hover { border-color: var(--ocg-blue); }
.ocg-pfilter.is-active { background: var(--ocg-green); border-color: var(--ocg-green); color:#fff; }
.ocg-pcards__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.ocg-pcard { background:#fff; border:1px solid #E3E9F1; border-radius:14px; padding: 24px; display:flex; flex-direction:column; }
.ocg-pcard__logo { height: 70px; display:flex; align-items:center; margin-bottom: 18px; }
.ocg-pcard__logo img { max-height: 44px; max-width: 150px; width:auto; object-fit:contain; }
.ocg-pcard__tag { align-self:flex-start; background: var(--ocg-blue); color:#fff; font-size:12px; font-weight:600; border-radius:40px; padding:6px 14px; margin-bottom:14px; }
.ocg-pcard__desc { color: var(--ocg-muted); font-size:14px; line-height:1.6; margin:0 0 18px; }
.ocg-pcard__link { margin-top:auto; color: var(--ocg-blue); font-weight:600; font-size:14px; text-decoration:underline; text-underline-offset:3px; }

/* join / devenez partenaire */
.ocg-pjoin { background:#fff; padding: 64px 0 76px; }
.ocg-pjoin__grid { display:grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items:center; }
.ocg-pjoin__kicker { color: var(--ocg-muted); font-size:14px; font-weight:600; }
.ocg-pjoin__intro h2 { font-size: 34px; margin: 10px 0 18px; line-height:1.15; }
.ocg-pjoin__intro p { color: var(--ocg-muted); font-size:15px; line-height:1.7; margin:0; }
.ocg-pjoin__form { background: var(--ocg-surface-1, #F7F9FA); border-radius:16px; padding: 30px; display:flex; flex-direction:column; gap:16px; }
.ocg-pjoin__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ocg-pjoin__form input, .ocg-pjoin__form textarea { width:100%; background:#fff; border:1px solid #DDE5F0; border-radius:10px; padding:15px 16px; font:inherit; color:#2B2C2D; }
.ocg-pjoin__form textarea { min-height:96px; resize:vertical; }
.ocg-pjoin__submit { display:flex; justify-content:center; margin-top:4px; }
.ocg-pjoin__submit button { background:#fff; border:1px solid var(--ocg-blue); color:var(--ocg-blue); border-radius:40px; padding:13px 34px; font-weight:600; font-size:15px; cursor:pointer; }
.ocg-pjoin__submit button:hover { background:var(--ocg-blue); color:#fff; }

@media (max-width:1000px){ .ocg-pcards__grid{grid-template-columns:repeat(2,1fr)} .ocg-pjoin__grid{grid-template-columns:1fr; gap:28px} }
@media (max-width:560px){ .ocg-pcards__grid{grid-template-columns:1fr} .ocg-pjoin__row{grid-template-columns:1fr} .ocg-pwall__row{gap:28px 36px} }

/* ============================================================
   ÉVÉNEMENTS PAGE + BOOKING MODAL
   ============================================================ */
.ocg-evpage { padding: 52px 0 72px; }
.ocg-ev__title { text-align:center; color: var(--ocg-blue-deep); font-size: 34px; font-weight:700; margin: 0 0 18px; }
.ocg-ev__intro { max-width: 760px; margin: 0 auto 44px; text-align:center; color: var(--ocg-muted); font-size:16px; line-height:1.7; }
.ocg-ev__list { display:flex; flex-direction:column; gap: 22px; }
.ocg-evrow { display:grid; grid-template-columns: 300px 1fr; gap: 34px; align-items:center; background: var(--ocg-surface-3,#F0F5FC); border-radius:16px; padding: 22px; }
.ocg-evrow.is-hidden { display:none; }
.ocg-evrow__img img { width:100%; height: 210px; object-fit:cover; border-radius:12px; display:block; }
.ocg-evrow__body h2 { color: var(--ocg-blue-deep); font-size:22px; font-weight:700; margin:0 0 12px; }
.ocg-evrow__body p { color: var(--ocg-muted); font-size:15px; line-height:1.6; margin:0 0 20px; }
.ocg-evrow__btn { background:#fff; border:1px solid var(--ocg-blue); color:var(--ocg-blue); border-radius:40px; padding:11px 26px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; }
.ocg-evrow__btn:hover { background:var(--ocg-blue); color:#fff; }
.ocg-ev__more { text-align:center; margin-top: 40px; }
.ocg-ev__morebtn { background: var(--ocg-green); color:#fff; border:0; border-radius:40px; padding:14px 46px; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.ocg-ev__morebtn:hover { filter: brightness(.95); }

/* modal */
.ocg-modal { position:fixed; inset:0; z-index:9999; display:none; }
.ocg-modal.is-open { display:block; }
.ocg-modal__overlay { position:absolute; inset:0; background: rgba(20,40,80,.55); }
.ocg-modal__card { position:relative; z-index:1; width: min(560px, calc(100% - 32px)); margin: 6vh auto; background:#fff; border-radius:20px; padding: 30px 34px 34px; box-shadow:0 30px 80px rgba(0,0,0,.3); max-height: 88vh; overflow:auto; }
.ocg-modal__x { position:absolute; top:16px; right:18px; width:32px; height:32px; border-radius:50%; border:1px solid #E1E6EE; background:#fff; font-size:20px; line-height:1; color:#5A6569; cursor:pointer; }
.ocg-modal__kicker { color: var(--ocg-muted); font-size:14px; }
.ocg-modal__event { color: var(--ocg-blue); font-size:26px; font-weight:700; margin:4px 0 0; }
.ocg-modal__date { display:inline-flex; align-items:center; gap:8px; color:#2B2C2D; font-size:14px; margin-top:6px; }
.ocg-modal__date svg { width:18px; height:18px; stroke: var(--ocg-green); }
.ocg-modal__datev { font-style:normal; font-weight:600; }

.ocg-steps { display:flex; gap:10px; justify-content:space-between; border-bottom:1px solid #EEF1F5; padding: 18px 0; margin-bottom: 20px; }
.ocg-step { display:flex; align-items:center; gap:8px; color:#9AA6B2; font-weight:600; font-size:15px; }
.ocg-step b { width:26px; height:26px; border-radius:50%; background:#D8DEE7; color:#fff; display:grid; place-items:center; font-size:13px; }
.ocg-step.is-active { color: var(--ocg-green); }
.ocg-step.is-active b { background: var(--ocg-green); }
.ocg-step.is-done { color: var(--ocg-blue); }
.ocg-step.is-done b { background: var(--ocg-blue); }

.ocg-pane { display:none; }
.ocg-pane.is-active { display:block; }
.ocg-pane__lead { color:#2B2C2D; font-size:15px; margin:0 0 18px; }
.ocg-bform { display:flex; flex-direction:column; gap:14px; }
.ocg-bform input, .ocg-bform textarea { width:100%; border:1px solid #DDE5F0; border-radius:10px; padding:14px 16px; font:inherit; }
.ocg-bform textarea { min-height:90px; resize:vertical; }
.ocg-bform__err { color:#C0392B; font-size:13px; margin:0; min-height:16px; }

.ocg-btn-green { background: var(--ocg-green); color:#fff; border:0; border-radius:40px; padding:13px 28px; font:inherit; font-weight:700; font-size:15px; cursor:pointer; }
.ocg-btn-green:hover { filter:brightness(.96); }
.ocg-btn-ghost { background:#fff; color: var(--ocg-blue); border:1px solid #C9D6EA; border-radius:40px; padding:13px 28px; font:inherit; font-weight:600; cursor:pointer; }
.ocg-btn-blue { background: var(--ocg-blue); color:#fff; border:0; border-radius:40px; padding:13px 40px; font:inherit; font-weight:700; cursor:pointer; }

.ocg-recap { border:1px solid #E7ECF3; border-radius:14px; padding: 18px 20px; }
.ocg-recap__row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:15px; }
.ocg-recap__row span { color:#5A6569; }
.ocg-recap__row b { color:#2B2C2D; font-weight:600; text-align:right; }
.ocg-recap__row b.is-blue { color: var(--ocg-blue); }
.ocg-recap hr { border:0; border-top:1px solid #EEF1F5; margin:8px 0; }
.ocg-recap__cap { color:#8A95A1; font-size:12px; letter-spacing:.06em; font-weight:600; }

.ocg-modal__actions { display:flex; gap:14px; justify-content:center; margin-top:22px; }
.ocg-modal__actions.center { justify-content:center; }

.ocg-done__title { text-align:center; color: var(--ocg-blue); font-size:22px; font-weight:700; margin: 4px 0 14px; }
.ocg-done__text { text-align:center; color:#5A6569; font-size:15px; line-height:1.6; margin:0 0 20px; }
.ocg-done__ev { color: var(--ocg-blue); font-size:18px; font-weight:700; margin-top:8px; }
.ocg-done__date { color: var(--ocg-blue); font-size:16px; font-weight:600; margin-top:4px; }

@media (max-width:640px){ .ocg-evrow{grid-template-columns:1fr; gap:16px} .ocg-modal__actions{flex-direction:column} }

/* ============================================================
   WOOCOMMERCE — cards, shop grid, single product
   ============================================================ */
/* product card */
.ocg-shop__products { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ocg-pcardw { position:relative; background:#fff; border:1px solid #E6EBF1; border-radius:14px; padding:18px; display:flex; flex-direction:column; }
.ocg-pcardw.is-featured { border-color: var(--ocg-green); }
.ocg-pcardw__badge { position:absolute; top:14px; left:14px; background: var(--ocg-green); color:#fff; font-size:12px; font-weight:700; border-radius:20px; padding:5px 12px; z-index:2; }
.ocg-pcardw__img { display:block; background:#F5F7F9; border-radius:10px; aspect-ratio:1/1; overflow:hidden; margin-bottom:16px; }
.ocg-pcardw__img img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ocg-pcardw__name { color: var(--ocg-blue-deep); font-size:16px; font-weight:700; text-decoration:none; }
.ocg-pcardw__ref { color: var(--ocg-muted); font-size:13px; margin:4px 0 12px; }
.ocg-pcardw__plabel { color: var(--ocg-muted); font-size:13px; }
.ocg-pcardw__price { color: var(--ocg-blue); font-size:20px; font-weight:700; margin-bottom:14px; }
.ocg-pcardw__price .amount, .ocg-pcardw__price del, .ocg-pcardw__price ins { color: var(--ocg-blue); text-decoration:none; }
.ocg-pcardw__btn { margin-top:auto; text-align:center; background:#fff; border:1px solid var(--ocg-blue); color:var(--ocg-blue); border-radius:40px; padding:11px 14px; font-weight:600; font-size:14px; text-decoration:none; }
.ocg-pcardw__btn:hover, .ocg-pcardw.is-featured .ocg-pcardw__btn { background:var(--ocg-blue); color:#fff; }
.ocg-pcardw.is-featured .ocg-pcardw__btn { background:var(--ocg-green); border-color:var(--ocg-green); }

/* shop layout */
.ocg-shop { padding:40px 0 64px; }
.ocg-shop__grid { display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:start; }
.ocg-shop__side { background:#fff; border:1px solid #E6EBF1; border-radius:14px; padding:20px; }
.ocg-shop__search { display:flex; align-items:center; gap:8px; border:1px solid #DDE5F0; border-radius:40px; padding:9px 14px; margin-bottom:20px; }
.ocg-shop__search svg { width:16px; height:16px; stroke:#9AA6B2; flex:0 0 auto; }
.ocg-shop__search input { border:0; outline:0; font:inherit; width:100%; background:transparent; }
.ocg-shop__side h3 { color: var(--ocg-blue); font-size:17px; font-weight:700; margin:0 0 14px; }
.ocg-shop__cols { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px; }
.ocg-shop__cols label { display:flex; align-items:center; gap:10px; font-size:14px; color:#2B2C2D; cursor:pointer; }
.ocg-shop__cols input { width:16px; height:16px; accent-color: var(--ocg-blue); }
.ocg-shop__apply { width:100%; background: var(--ocg-blue); color:#fff; border:0; border-radius:8px; padding:12px; font:inherit; font-weight:600; cursor:pointer; }
.ocg-shop__foot { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:34px; flex-wrap:wrap; }
.ocg-shop__count { color: var(--ocg-muted); font-size:14px; margin-left:auto; }
.woocommerce-pagination ul { display:flex; gap:8px; list-style:none; padding:0; margin:0; align-items:center; }
.woocommerce-pagination a, .woocommerce-pagination span { display:grid; place-items:center; min-width:34px; height:34px; border-radius:50%; background:#EEF2F7; color:#2B2C2D; text-decoration:none; padding:0 6px; }
.woocommerce-pagination .current { background: var(--ocg-blue); color:#fff; }
.woocommerce-pagination .next, .woocommerce-pagination .prev { background: var(--ocg-green); color:#fff; border-radius:20px; padding:0 16px; }

/* single product */
.ocg-single { padding:40px 0 70px; }
.ocg-single__top { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.ocg-single__gallery { background:#F5F7F9; border-radius:16px; padding:20px; }
.ocg-single__gallery img { border-radius:10px; }
.ocg-single__name { color: var(--ocg-blue-deep); font-size:30px; font-weight:700; margin:0 0 6px; }
.ocg-single__ref { color: var(--ocg-muted); font-size:14px; }
.ocg-single__desc { color: var(--ocg-muted); font-size:15px; line-height:1.7; margin:14px 0; }
.ocg-single__price { color: var(--ocg-blue); font-size:28px; font-weight:700; margin:10px 0 22px; }
.ocg-single__price .amount { color: var(--ocg-blue); }
.ocg-qty { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.ocg-qty__label { color:#2B2C2D; font-weight:600; }
.ocg-qty__box { display:inline-flex; align-items:center; border:1px solid #DDE5F0; border-radius:8px; overflow:hidden; }
.ocg-qty__box button { width:40px; height:44px; border:0; background:#F5F7F9; font-size:20px; cursor:pointer; color:#2B2C2D; }
.ocg-qty__in { width:56px; height:44px; text-align:center; border:0; border-left:1px solid #DDE5F0; border-right:1px solid #DDE5F0; font:inherit; -moz-appearance:textfield; }
.ocg-qty__in::-webkit-outer-spin-button, .ocg-qty__in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ocg-single__actions { display:flex; gap:16px; margin-bottom:8px; }
.ocg-atc { background:#fff; border:1px solid var(--ocg-blue); color:var(--ocg-blue); border-radius:40px; padding:13px 30px; font:inherit; font-weight:600; cursor:pointer; }
.ocg-atc:hover { background:var(--ocg-blue); color:#fff; }
.ocg-buynow { background: var(--ocg-green); color:#fff; border-radius:40px; padding:13px 30px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; }
.ocg-buynow:hover { filter:brightness(.96); }

/* accordion */
.ocg-acc { margin-top:26px; border-top:1px solid #E7ECF3; }
.ocg-acc__item { border-bottom:1px solid #E7ECF3; }
.ocg-acc__head { width:100%; background:none; border:0; padding:16px 0; display:flex; justify-content:space-between; align-items:center; font:inherit; font-size:16px; font-weight:600; color: var(--ocg-blue-deep); cursor:pointer; }
.ocg-acc__ic { width:12px; height:12px; border-right:2px solid #5A6569; border-bottom:2px solid #5A6569; transform:rotate(45deg); transition:.2s; }
.ocg-acc__item.is-open .ocg-acc__ic { transform:rotate(-135deg); }
.ocg-acc__body { display:none; padding:0 0 18px; color: var(--ocg-muted); font-size:15px; line-height:1.7; }
.ocg-acc__item.is-open .ocg-acc__body { display:block; }

/* quick order */
.ocg-quick { background:#F4F6F8; border-radius:16px; padding:30px; display:flex; flex-direction:column; gap:16px; margin:44px 0; }
.ocg-quick__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ocg-quick input { width:100%; background:#fff; border:1px solid #E1E7EF; border-radius:8px; padding:15px 16px; font:inherit; }
.ocg-quick__submit { display:flex; justify-content:center; }
.ocg-quick__submit button { background: var(--ocg-blue); color:#fff; border:0; border-radius:8px; padding:14px 34px; font:inherit; font-weight:600; cursor:pointer; }

/* related */
.ocg-related { margin-top:20px; }
.ocg-related h2 { color: var(--ocg-blue-deep); font-size:26px; font-weight:700; margin:0 0 24px; }
.ocg-related__grid { grid-template-columns:repeat(4,1fr); }
.ocg-related__cta { text-align:center; margin-top:36px; }

@media (max-width:1000px){ .ocg-shop__grid{grid-template-columns:1fr} .ocg-single__top{grid-template-columns:1fr; gap:28px} .ocg-shop__products{grid-template-columns:repeat(2,1fr)} .ocg-related__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .ocg-shop__products,.ocg-related__grid{grid-template-columns:1fr} .ocg-single__actions{flex-direction:column} .ocg-quick__row{grid-template-columns:1fr} }

/* ---------- WooCommerce card overrides (beat default li.product / .button) ---------- */
.ocg-shop__products, .ocg-related__grid { display:grid !important; float:none !important; }
.ocg-shop__products li.product, ul.products li.ocg-pcardw {
	width:auto !important; float:none !important; margin:0 !important; clear:none !important;
}
.woocommerce ul.products li.product a img, .ocg-pcardw__img img { margin:0 !important; box-shadow:none !important; }
.ocg-pcardw { align-items:stretch; }
.ocg-pcardw__img { width:100% !important; height:auto; aspect-ratio:1/1; }
.ocg-pcardw__name { display:block; }
/* button: full-width pill, not WooCommerce's inline oval */
.ocg-pcardw .ocg-pcardw__btn, ul.products li.product .ocg-pcardw__btn {
	display:block !important; width:100% !important; box-sizing:border-box;
	padding:11px 14px !important; border-radius:40px !important; text-align:center !important;
	font-size:14px !important; line-height:1.3 !important; white-space:nowrap; background:#fff !important; color:var(--ocg-blue) !important;
	border:1px solid var(--ocg-blue) !important; min-height:0 !important; height:auto !important;
}
.ocg-pcardw.is-featured .ocg-pcardw__btn { background:var(--ocg-green) !important; border-color:var(--ocg-green) !important; color:#fff !important; }
.ocg-pcardw__btn:hover { background:var(--ocg-blue) !important; color:#fff !important; }
/* WooCommerce sometimes adds price/rating we don't use in the card */
.ocg-pcardw .price, .ocg-pcardw .star-rating, .ocg-pcardw .added_to_cart { display:none; }

/* ---------- STORE FIXES: card layout wins over WooCommerce defaults ---------- */
.ocg-shop__products.products { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:22px !important; }
.ocg-shop__products li.product { width:100% !important; float:none !important; margin:0 !important; clear:none !important; }
.ocg-related__grid.products { grid-template-columns:repeat(4,1fr) !important; }
.ocg-pcardw__img { aspect-ratio:1/1; }
.ocg-pcardw__img img { width:100% !important; height:100% !important; object-fit:contain; }
.ocg-pcardw__btn { display:block !important; width:100% !important; height:auto !important; border-radius:40px !important; padding:11px 14px !important; line-height:1.2 !important; }
.ocg-single__top { background:#F7F9FA; border-radius:18px; padding:32px; }
@media (max-width:1000px){ .ocg-shop__products.products{grid-template-columns:repeat(2,1fr) !important} .ocg-related__grid.products{grid-template-columns:repeat(2,1fr) !important} }
@media (max-width:560px){ .ocg-shop__products.products,.ocg-related__grid.products{grid-template-columns:1fr !important} }

/* ---------- HOMEPAGE FIXES: hero left, event photos, partners carousel ---------- */
/* hero text to the left */
.ocg-hero__inner { margin-left:0 !important; margin-right:auto !important; text-align:left !important; align-items:flex-start !important; max-width:600px; }
.ocg-hero__inner p, .ocg-hero__inner h1 { text-align:left !important; }

/* real event photos fill the card */
.ocg-event__ph { background-size:cover !important; background-position:center !important; background-repeat:no-repeat; }

/* partners carousel */
.ocg-carousel { position:relative; display:flex; align-items:center; gap:8px; margin-top:8px; }
.ocg-carousel__viewport { overflow:hidden; flex:1; }
.ocg-carousel__track { display:flex; transition:transform .5s ease; }
.ocg-carousel__item { flex:0 0 20%; display:flex; justify-content:center; padding:10px 8px; box-sizing:border-box; }
.ocg-partners__logo { background:#fff; border:1px solid #EEF1F5; border-radius:12px; height:88px; width:100%; display:flex; align-items:center; justify-content:center; padding:14px; }
.ocg-partners__logo img { max-height:42px; max-width:80%; width:auto; object-fit:contain; }
.ocg-carousel__arrow { flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid #D8E0EC; background:#fff; cursor:pointer; display:grid; place-items:center; }
.ocg-carousel__arrow svg { width:18px; height:18px; fill:none; stroke:var(--ocg-blue); stroke-width:2.4; }
.ocg-carousel__arrow:hover { background:var(--ocg-blue); }
.ocg-carousel__arrow:hover svg { stroke:#fff; }
.ocg-carousel__dots { position:absolute; bottom:-26px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.ocg-carousel__dots span { width:22px; height:5px; border-radius:4px; background:#D3DBE6; cursor:pointer; transition:.2s; }
.ocg-carousel__dots span.is-active { background:var(--ocg-blue); width:30px; }
.ocg-partners { padding-bottom:64px; }
@media (max-width:900px){ .ocg-carousel__item{flex:0 0 33.333%} }
@media (max-width:560px){ .ocg-carousel__item{flex:0 0 50%} }

/* ---------- HOMEPAGE v2 FIXES: hero left, pro visuals, marquee ---------- */
/* 1. Hero hard-left */
.ocg-hero .ocg-container { display:flex !important; justify-content:flex-start !important; }
.ocg-hero__inner { margin:0 !important; max-width:560px !important; text-align:left !important; align-items:flex-start !important; }
.ocg-hero__inner h1, .ocg-hero__inner p { text-align:left !important; }

/* 2. Pro banner panels: faint dental imagery behind, colour overlay keeps text crisp */
.ocg-pro__panel--blue  { background:
	linear-gradient( rgba(20,77,141,.88), rgba(20,77,141,.88) ),
	url('../images/page/pro-left.png') center/cover no-repeat !important; }
.ocg-pro__panel--green { background:
	linear-gradient( rgba(146,183,34,.85), rgba(146,183,34,.85) ),
	url('../images/page/pro-right.png') center/cover no-repeat !important; }

/* 3. Partners continuous marquee (seamless loop, no blank slots) */
.ocg-marquee { overflow:hidden; position:relative; margin-top:14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ocg-marquee__track { display:flex; width:max-content; animation:ocg-scroll 28s linear infinite; }
.ocg-marquee:hover .ocg-marquee__track { animation-play-state:paused; }
.ocg-marquee__item { flex:0 0 auto; width:210px; display:flex; justify-content:center; padding:10px 12px; box-sizing:border-box; }
@keyframes ocg-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:560px){ .ocg-marquee__item{ width:150px; } }

/* ---------- HOMEPAGE v3: hero hard-left (container reset) + pro imagery visible ---------- */
/* Hero: break the centered container so text hugs the left */
.ocg-hero .ocg-container {
	max-width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	justify-content: flex-start !important;
	padding-left: clamp(28px, 6vw, 96px) !important;
	padding-right: 24px !important;
}
.ocg-hero__inner { margin: 0 !important; max-width: 560px !important; text-align: left !important; }
.ocg-hero__inner h1, .ocg-hero__inner p { text-align: left !important; }

/* Pro banner: lighter gradient (dense on the text side, clear on the image side) */
.ocg-pro__panel--blue {
	background: linear-gradient(90deg, rgba(20,77,141,.55) 0%, rgba(20,77,141,.78) 55%, rgba(20,77,141,.85) 100%),
		url('../images/page/pro-left.png') left center/cover no-repeat !important;
}
.ocg-pro__panel--green {
	background: linear-gradient(90deg, rgba(146,183,34,.90) 0%, rgba(146,183,34,.82) 45%, rgba(146,183,34,.45) 100%),
		url('../images/page/pro-right.png') right center/cover no-repeat !important;
}

/* Pro section background */
.ocg-section.ocg-pro { background: #F7F9FA; }

/* form success / error notice */
.ocg-formnotice { border-radius:10px; padding:13px 16px; font-size:14px; font-weight:600; margin-bottom:4px; }
.ocg-formnotice.is-ok { background:#EAF6E0; border:1px solid #B7D98A; color:#4A6B12; }
.ocg-formnotice.is-err { background:#FBEAEA; border:1px solid #E7B4B4; color:#B0342C; }

/* ============================================================
   BLOG — Actualités listing + single article
   ============================================================ */
.ocg-blog { padding:52px 0 72px; }
.ocg-blog__title { text-align:center; color:var(--ocg-blue-deep); font-size:38px; font-weight:700; margin:0 0 16px; }
.ocg-blog__intro { max-width:760px; margin:0 auto 48px; text-align:center; color:var(--ocg-muted); font-size:16px; line-height:1.7; }
.ocg-blog__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.ocg-postcard { background:#fff; border:1px solid #E6EBF1; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ocg-postcard__cover { display:block; height:200px; background:#EEF2F7 center/cover no-repeat; }
.ocg-postcard__body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:12px; }
.ocg-postcard__date { color:var(--ocg-green); font-size:12px; font-weight:700; letter-spacing:.06em; }
.ocg-postcard__title { font-size:19px; line-height:1.35; margin:0; }
.ocg-postcard__title a { color:var(--ocg-blue-deep); text-decoration:none; }
.ocg-postcard__more { color:var(--ocg-blue); font-weight:600; font-size:14px; text-decoration:none; margin-top:2px; }
.ocg-postcard__more:hover { text-decoration:underline; }
.ocg-blog__more { text-align:center; margin-top:44px; }
.ocg-blog__morebtn { background:var(--ocg-green); color:#fff; border:0; border-radius:40px; padding:14px 46px; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.ocg-blog__morebtn:hover { filter:brightness(.96); }
.ocg-blog__morebtn:disabled { opacity:.6; cursor:default; }

/* single article */
.ocg-article__cover { height:420px; background:#0b3d7d center/cover no-repeat; }
.ocg-article__wrap { position:relative; display:block; max-width:820px; padding-top:44px; padding-bottom:72px; }
.ocg-share { position:absolute; left:-72px; top:60px; display:flex; flex-direction:column; gap:14px; }
.ocg-share a { width:38px; height:38px; border-radius:50%; overflow:hidden; display:block; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.ocg-share img { width:100%; height:100%; object-fit:cover; }
.ocg-article__date { color:var(--ocg-green); font-size:13px; font-weight:700; letter-spacing:.06em; }
.ocg-article__title { color:var(--ocg-blue-deep); font-size:36px; line-height:1.2; font-weight:700; margin:10px 0 26px; }
.ocg-article__content { color:#2B2C2D; font-size:17px; line-height:1.8; }
.ocg-article__content h2, .ocg-article__content h3 { color:var(--ocg-blue-deep); margin:32px 0 12px; }
.ocg-article__content img { max-width:100%; height:auto; border-radius:12px; margin:20px 0; }
.ocg-article__content p { margin:0 0 18px; }
.ocg-article__meta { display:flex; align-items:center; gap:12px; color:var(--ocg-muted); font-size:14px; margin:36px 0 0; padding-top:22px; border-top:1px solid #E7ECF3; }
.ocg-article__meta a { color:var(--ocg-blue); text-decoration:none; }
.ocg-article__dot { color:#C4CDD8; }
.ocg-article__comments { margin-top:40px; }
.ocg-article__comments .comment-form input[type=text], .ocg-article__comments .comment-form input[type=email], .ocg-article__comments .comment-form input[type=url], .ocg-article__comments .comment-form textarea { width:100%; border:1px solid #DDE5F0; border-radius:8px; padding:13px 15px; font:inherit; margin-bottom:14px; }
.ocg-article__comments .form-submit input { background:var(--ocg-blue); color:#fff; border:0; border-radius:40px; padding:12px 30px; font-weight:600; cursor:pointer; }
@media (max-width:1000px){ .ocg-blog__grid{grid-template-columns:repeat(2,1fr)} .ocg-share{position:static; flex-direction:row; margin-bottom:20px} }
@media (max-width:600px){ .ocg-blog__grid{grid-template-columns:1fr} .ocg-article__cover{height:240px} .ocg-article__title{font-size:27px} }
.ocg-blog__empty { text-align:center; color:var(--ocg-muted); font-size:16px; padding:30px 0 20px; }

/* ============================================================
   MINI-CART DRAWER + product-row arrow scroll
   ============================================================ */
.ocg-minicart { position:fixed; inset:0; z-index:10000; display:none; }
.ocg-minicart.is-open { display:block; }
.ocg-minicart__overlay { position:absolute; inset:0; background:rgba(20,40,80,.5); }
.ocg-minicart__panel { position:absolute; top:0; right:0; height:100%; width:min(400px,90vw); background:#fff; box-shadow:-8px 0 40px rgba(0,0,0,.2); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; }
.ocg-minicart.is-open .ocg-minicart__panel { transform:translateX(0); }
.ocg-minicart__head { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid #EEF1F5; font-weight:700; color:var(--ocg-blue-deep); font-size:18px; }
.ocg-minicart__head button { background:none; border:0; font-size:26px; line-height:1; color:#5A6569; cursor:pointer; }
.ocg-minicart__body { padding:20px 24px; overflow:auto; flex:1; }
.ocg-minicart__empty { color:var(--ocg-muted); text-align:center; padding:40px 0; }
.ocg-minicart__items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.ocg-minicart__items li { display:flex; gap:12px; align-items:center; }
.ocg-mc__img img { width:54px; height:54px; object-fit:contain; background:#F5F7F9; border-radius:8px; }
.ocg-mc__meta { display:flex; flex-direction:column; gap:2px; font-size:14px; }
.ocg-mc__meta b { color:var(--ocg-blue-deep); }
.ocg-mc__meta span { color:var(--ocg-muted); }
.ocg-minicart__total { display:flex; justify-content:space-between; margin:22px 0; padding-top:16px; border-top:1px solid #EEF1F5; font-size:16px; color:var(--ocg-blue-deep); }
.ocg-minicart__actions { display:flex; flex-direction:column; gap:12px; }
.ocg-minicart__actions a { text-align:center; }

/* product row horizontal scroll (arrows) */
.ocg-products--scroll { display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:22px; scrollbar-width:none; padding-bottom:6px; }
.ocg-products--scroll::-webkit-scrollbar { display:none; }
.ocg-products--scroll > * { flex:0 0 calc((100% - 66px)/4); scroll-snap-align:start; }
@media (max-width:1000px){ .ocg-products--scroll > * { flex:0 0 calc((100% - 22px)/2); } }
@media (max-width:600px){ .ocg-products--scroll > * { flex:0 0 100%; } }

/* ============================================================
   GENERIC PAGE + WOOCOMMERCE ACCOUNT / LOGIN
   The theme dequeues WooCommerce's default CSS, so the classic
   [woocommerce_my_account] shortcode pages are styled here using
   the OCG tokens. Cart/Checkout use WC blocks (self-styled).
   ============================================================ */
.ocg-page { max-width: 1100px; }
.ocg-page__title {
  font-family: var(--ocg-display);
  color: var(--ocg-blue-deep);
  font-size: 34px;
  margin: 4px 0 26px;
}
.ocg-page__content { color: var(--ocg-text); line-height: 1.6; }
.ocg-page__content a { color: var(--ocg-blue); }

/* --- My Account: sidebar nav + content --- */
.ocg-page .woocommerce-account .woocommerce {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}
.ocg-page .woocommerce-MyAccount-navigation {
  flex: 0 0 230px;
}
.ocg-page .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  border: 1px solid var(--ocg-border);
  border-radius: 14px;
  overflow: hidden;
}
.ocg-page .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ocg-border); }
.ocg-page .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.ocg-page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 18px;
  color: var(--ocg-blue-deep);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.ocg-page .woocommerce-MyAccount-navigation li a:hover { background: var(--ocg-surface-3); }
.ocg-page .woocommerce-MyAccount-navigation li.is-active a { background: var(--ocg-blue); color: #fff; }
.ocg-page .woocommerce-MyAccount-content { flex: 1 1 auto; min-width: 0; }

/* --- Login / register columns --- */
.ocg-page .woocommerce .col2-set,
.ocg-page .woocommerce #customer_login.u-columns {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.ocg-page .woocommerce .col2-set .col-1,
.ocg-page .woocommerce .col2-set .col-2 { flex: 1 1 320px; }
.ocg-page .woocommerce h2 {
  font-family: var(--ocg-display);
  color: var(--ocg-blue-deep);
  font-size: 22px;
  margin: 0 0 16px;
}

/* --- Forms: match .ocg-field / .ocg-btn --- */
.ocg-page .woocommerce form .form-row { margin: 0 0 16px; display: flex; flex-direction: column; }
.ocg-page .woocommerce form .form-row label { margin-bottom: 6px; font-weight: 600; color: var(--ocg-text); }
.ocg-page .woocommerce form .form-row .required { color: var(--ocg-blue); text-decoration: none; }
.ocg-page .woocommerce input.input-text,
.ocg-page .woocommerce input[type="text"],
.ocg-page .woocommerce input[type="email"],
.ocg-page .woocommerce input[type="password"],
.ocg-page .woocommerce input[type="tel"],
.ocg-page .woocommerce select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--ocg-border-2);
  border-radius: 11px;
  padding: 14px 16px;
  font: inherit;
  color: var(--ocg-text);
  box-sizing: border-box;
}
.ocg-page .woocommerce input.input-text:focus,
.ocg-page .woocommerce select:focus { outline: none; border-color: var(--ocg-blue); }
.ocg-page .woocommerce button.button,
.ocg-page .woocommerce a.button,
.ocg-page .woocommerce input.button,
.ocg-page .woocommerce .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: var(--ocg-pill);
  background: var(--ocg-blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease;
  text-decoration: none;
}
.ocg-page .woocommerce button.button:hover,
.ocg-page .woocommerce a.button:hover,
.ocg-page .woocommerce input.button:hover { filter: brightness(1.08); }
.ocg-page .woocommerce .woocommerce-form-login__rememberme { font-weight: 500; }
.ocg-page .woocommerce .woocommerce-LostPassword a { color: var(--ocg-blue); }

/* --- Notices / messages --- */
.ocg-page .woocommerce-message,
.ocg-page .woocommerce-info,
.ocg-page .woocommerce-error {
  list-style: none;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  border-left: 4px solid var(--ocg-blue);
  background: var(--ocg-surface-3);
  color: var(--ocg-text);
}
.ocg-page .woocommerce-error { border-left-color: #C0392B; background: #FBEAE8; }
.ocg-page .woocommerce-message { border-left-color: var(--ocg-green); background: #F2F7E0; }

/* --- Order/details tables --- */
.ocg-page .woocommerce table.shop_table,
.ocg-page .woocommerce table.account-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ocg-border);
  border-radius: 12px;
  overflow: hidden;
}
.ocg-page .woocommerce table.shop_table th,
.ocg-page .woocommerce table.shop_table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ocg-border);
  text-align: left;
}
.ocg-page .woocommerce table.shop_table thead th { background: var(--ocg-surface); color: var(--ocg-blue-deep); }

/* --- Responsive: stack account nav --- */
@media (max-width: 820px) {
  .ocg-page .woocommerce-account .woocommerce { flex-direction: column; }
  .ocg-page .woocommerce-MyAccount-navigation { flex: 1 1 auto; width: 100%; }
}

/* Password show/hide: hide native WC toggle, use labelled checkbox instead */
.woocommerce .show-password-input,
.woocommerce .hide-password-input { display: none !important; }
.ocg-showpass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ocg-text);
  user-select: none;
}
.ocg-showpass input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ocg-blue);
}

/* Header cart count badge */
.ocg-cart__icon { position: relative; display: inline-flex; }
.ocg-cart__count {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--ocg-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.ocg-cart__count[hidden] { display: none; }

/* Cart page — "Valider la commande" checkout button in brand blue + white text */
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wc-block-cart__submit-container a,
.wp-block-woocommerce-proceed-to-checkout a,
.wc-proceed-to-checkout a.checkout-button {
  background-color: var(--ocg-blue) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--ocg-blue) !important;
}
.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--ocg-blue-dark) !important;
  color: #fff !important;
}
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-cart__submit-button span {
  color: #fff !important;
}

/* Cart page — product-suggestion (cross-sell) "Ajouter au panier" buttons */
.woocommerce-cart .wc-block-components-product-button a,
.woocommerce-cart .wc-block-components-product-button button,
.woocommerce-cart .wc-block-components-product-button .wc-block-components-button,
.woocommerce-cart .wc-block-grid__product .wp-block-button__link,
.woocommerce-cart .wp-block-button__link,
.woocommerce-cart .cross-sells a.button,
.woocommerce-cart a.add_to_cart_button {
  background-color: var(--ocg-blue) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--ocg-blue) !important;
}
.woocommerce-cart .wc-block-components-product-button a:hover,
.woocommerce-cart .wc-block-components-product-button button:hover,
.woocommerce-cart .wp-block-button__link:hover,
.woocommerce-cart a.add_to_cart_button:hover {
  background-color: var(--ocg-blue-dark) !important;
  color: #fff !important;
}
.woocommerce-cart .wc-block-components-product-button .wc-block-components-button__text,
.woocommerce-cart .wp-block-button__link span {
  color: #fff !important;
}

/* ============================================================
   MOBILE / TABLET REFINEMENTS  (keep this block LAST in the file
   so it is not overridden by earlier desktop-only overrides)
   ============================================================ */

/* --- Tablet & phone: compact header --- */
@media (max-width: 860px) {
  .ocg-header .ocg-container {
    height: auto;
    min-height: 68px;
    padding-block: 10px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ocg-logo img { height: 50px; }

  /* Mobile menu panel: scrollable so long menus never trap the user */
  .ocg-header.nav-open .ocg-nav {
    display: block;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    box-shadow: 0 12px 24px rgba(7, 54, 107, .10);
  }
  .ocg-nav ul { flex-direction: column; gap: 0; flex-wrap: wrap !important; }
  .ocg-nav li { padding: 0; border-bottom: 1px solid #f1f4f7; }
  .ocg-nav li:last-child { border-bottom: 0; }
  .ocg-nav a {
    display: block;
    padding: 14px 24px;   /* comfortable tap target */
    font-size: 16px;
    white-space: normal;
  }
  .ocg-headactions { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
  .ocg-nav-toggle { display: inline-flex; margin-left: 0; }
}

/* --- Phone: icons only in header, softer headings --- */
@media (max-width: 560px) {
  .ocg-header .ocg-container { min-height: 60px; gap: 10px; }
  .ocg-logo img { height: 42px; }

  /* Hide the "Panier"/"Compte" labels, keep icons + count badge */
  .ocg-cart, .ocg-account { font-size: 0; gap: 0; }
  .ocg-cart__count { font-size: 11px; }
  .ocg-headactions { gap: 14px; }

  .ocg-hero { min-height: 420px; }
  .ocg-hero h1 { font-size: 28px; line-height: 1.15; }
  .ocg-hero p { font-size: 16px; }

  /* Pro banner headings were staying at 40px on phones */
  .ocg-pro__panel h3 { font-size: 27px; }
  .ocg-pro__panel { padding: 28px 22px; gap: 18px; }

  .ocg-rowhead h2 { font-size: 24px; }

  /* Contact map was a fixed 445px tall */
  .ocgc__map { height: 260px; }

  /* À Propos value cards: 2 columns is cramped on a phone */
  .ocg-values__grid { grid-template-columns: 1fr; }
}

/* --- Contact info: left-aligned on tablet/phone (was centred) --- */
@media (max-width: 860px) {
  .ocgc__info { justify-content: flex-start; gap: 28px 44px; }
}
@media (max-width: 560px) {
  .ocgc__info { flex-direction: column; align-items: flex-start; gap: 22px; margin: 40px 0 32px; }
  .ocgc__infoitem { align-items: flex-start; width: 100%; font-size: 17px; }
  .ocgc__infoicon { margin-top: 1px; }
}

/* --- "Notre vision": real-text card replaces the flattened banner on phones --- */
.ocg-vision__card { display: none; }

@media (max-width: 700px) {
  .ocg-vision__img { display: none; }
  .ocg-vision__card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: 60% center;
    background-repeat: no-repeat;
    min-height: 380px;
  }
  /* Brand-blue wash so the text stays legible over the photo */
  .ocg-vision__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(20, 77, 141, .96) 0%,
      rgba(20, 77, 141, .92) 55%,
      rgba(20, 77, 141, .55) 100%);
  }
  .ocg-vision__inner {
    position: relative;
    z-index: 1;
    padding: 30px 24px 34px;
    color: #fff;
  }
  .ocg-vision__title {
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
  }
  .ocg-vision__inner p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .95);
  }
  .ocg-vision__inner p:last-child { margin-bottom: 0; }
}

/* --- Pro banner: two separate cards once the panels stack (<=1100px) --- */
@media (max-width: 1100px) {
  .ocg-pro__banner {
    gap: 20px;
    border-radius: 0;      /* rounding moves to each panel */
    overflow: visible;
  }
  .ocg-pro__panel {
    border-radius: var(--ocg-radius);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(7, 54, 107, .08);
  }
}
@media (max-width: 560px) {
  .ocg-pro__banner { gap: 16px; }
}