/*
 * Socle de design partagé boutique Midocean (Mon compte, Panier, Checkout).
 * Tokens, conteneur centré, neutralisation du thème et primitives communes.
 * Aligné sur l'identité des pages produit/archive (vert de marque #2d6a4f).
 */

:root {
  --mido-green: #2d6a4f;
  --mido-green-dark: #1b4332;
  --mido-green-hover: #235741;
  --mido-green-soft: #ecfdf5;
  --mido-green-tint: #f0fdf4;
  --mido-green-border: #bbf7d0;

  --mido-ink: #111827;
  --mido-text: #374151;
  --mido-muted: #6b7280;
  --mido-faint: #9ca3af;

  --mido-border: #e5e7eb;
  --mido-border-strong: #d1d5db;
  --mido-line: #f3f4f6;
  --mido-surface: #ffffff;
  --mido-surface-soft: #f9fafb;
  --mido-surface-muted: #f8f9fa;

  --mido-danger: #dc2626;
  --mido-danger-soft: #fef2f2;
  --mido-danger-ink: #991b1b;

  --mido-radius-sm: 8px;
  --mido-radius: 10px;
  --mido-radius-lg: 12px;
  --mido-radius-pill: 999px;

  --mido-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --mido-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
  --mido-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.08);

  --mido-container: 1200px;
  --mido-gutter: 1.5rem;

  --mido-ring: 0 0 0 3px rgba(45, 106, 79, 0.15);
  --mido-transition: 0.18s ease;

  --mido-font: inherit;
}

/* ------------------------------------------------------------------ *
 * Neutralisation du thème (Hello / Elementor / Storefront…)
 * Force la pleine largeur de la colonne de contenu du thème pour que
 * notre conteneur interne centré puisse respirer, et masque les
 * sidebars/titres qui dédoublent la mise en page.
 * ------------------------------------------------------------------ */
body.midocean-my-account-active #primary,
body.midocean-my-account-active .content-area,
body.midocean-my-account-active .site-main,
body.midocean-my-account-active main.site-main,
body.midocean-my-account-active .woocommerce,
body.midocean-my-account-active main.woocommerce,
body.midocean-my-account-active .woocommerce-page .content-area,
body.midocean-my-account-active .elementor-location-single,
body.midocean-my-account-active .elementor-widget-woocommerce-my-account,
body.midocean-cart-active #primary,
body.midocean-cart-active .content-area,
body.midocean-cart-active .site-main,
body.midocean-cart-active main.site-main,
body.midocean-cart-active .woocommerce,
body.midocean-cart-active main.woocommerce,
body.midocean-cart-active .woocommerce-page .content-area,
body.midocean-cart-active .elementor-location-single,
body.midocean-cart-active .elementor-widget-woocommerce-cart,
body.midocean-checkout-active #primary,
body.midocean-checkout-active .content-area,
body.midocean-checkout-active .site-main,
body.midocean-checkout-active main.site-main,
body.midocean-checkout-active .woocommerce,
body.midocean-checkout-active main.woocommerce,
body.midocean-checkout-active .woocommerce-page .content-area,
body.midocean-checkout-active .elementor-location-single,
body.midocean-checkout-active .elementor-widget-woocommerce-checkout-page,
body.midocean-thankyou-active #primary,
body.midocean-thankyou-active .content-area,
body.midocean-thankyou-active .site-main,
body.midocean-thankyou-active main.site-main,
body.midocean-thankyou-active .woocommerce,
body.midocean-thankyou-active main.woocommerce,
body.midocean-thankyou-active .woocommerce-page .content-area,
body.midocean-thankyou-active .elementor-location-single,
body.midocean-thankyou-active .elementor-widget-woocommerce-checkout-page {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.midocean-my-account-active #secondary,
body.midocean-my-account-active .widget-area,
body.midocean-my-account-active .woocommerce-sidebar,
body.midocean-cart-active #secondary,
body.midocean-cart-active .widget-area,
body.midocean-cart-active .woocommerce-sidebar,
body.midocean-checkout-active #secondary,
body.midocean-checkout-active .widget-area,
body.midocean-checkout-active .woocommerce-sidebar,
body.midocean-thankyou-active #secondary,
body.midocean-thankyou-active .widget-area,
body.midocean-thankyou-active .woocommerce-sidebar {
  display: none !important;
}

/* Masque les titres de page dupliqués par le thème (Hello Elementor .page-header). */
body.midocean-cart-active .page-header,
body.midocean-checkout-active .page-header,
body.midocean-thankyou-active .page-header,
body.midocean-my-account-active .page-header,
body.midocean-cart-active .entry-title,
body.midocean-cart-active .page-title,
body.midocean-cart-active h1.entry-title,
body.midocean-checkout-active .entry-title,
body.midocean-checkout-active .page-title,
body.midocean-checkout-active h1.entry-title,
body.midocean-thankyou-active .entry-title,
body.midocean-thankyou-active .page-title,
body.midocean-thankyou-active h1.entry-title,
body.midocean-my-account-active .entry-title,
body.midocean-my-account-active .page-title,
body.midocean-my-account-active h1.entry-title,
body.midocean-cart-active.woocommerce-cart .entry-header,
body.midocean-checkout-active .entry-header,
body.midocean-thankyou-active .entry-header,
body.midocean-my-account-active .entry-header {
  display: none !important;
}

/* Masque le markup résiduel des blocs WC si un thème les charge encore. */
body.midocean-cart-active .wp-block-woocommerce-cart,
body.midocean-cart-active .wc-block-cart,
body.midocean-checkout-active .wp-block-woocommerce-checkout,
body.midocean-checkout-active .wc-block-checkout,
body.midocean-thankyou-active .wp-block-woocommerce-checkout,
body.midocean-thankyou-active .wc-block-checkout {
  display: none !important;
}

body.midocean-my-account-active main#main > nav.woocommerce-breadcrumb,
body.midocean-cart-active main#main > nav.woocommerce-breadcrumb,
body.midocean-checkout-active main#main > nav.woocommerce-breadcrumb,
body.midocean-thankyou-active main#main > nav.woocommerce-breadcrumb {
  display: none !important;
}

/* Notices WooCommerce alignées sur le conteneur centré. */
body.midocean-my-account-active .woocommerce > .woocommerce-notices-wrapper,
body.midocean-checkout-active .woocommerce > .woocommerce-notices-wrapper,
body.midocean-thankyou-active .woocommerce > .woocommerce-notices-wrapper {
  width: 100%;
  max-width: var(--mido-container);
  margin: 0 auto;
  padding: 0 var(--mido-gutter);
}

/* ------------------------------------------------------------------ *
 * Conteneurs centrés (wrappers rendus par le plugin).
 * ------------------------------------------------------------------ */
.midocean-account,
.midocean-cart,
.midocean-checkout,
.midocean-thankyou,
body.midocean-my-account-active .midocean-account,
body.midocean-cart-active .midocean-cart,
body.midocean-checkout-active .midocean-checkout,
body.midocean-thankyou-active .midocean-thankyou {
  width: 100% !important;
  max-width: var(--mido-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 2rem;
  margin-bottom: 3.5rem;
  padding-left: var(--mido-gutter) !important;
  padding-right: var(--mido-gutter) !important;
  box-sizing: border-box !important;
  font-family: var(--mido-font);
  color: var(--mido-text);
  -webkit-font-smoothing: antialiased;
}

.midocean-account *,
.midocean-account *::before,
.midocean-account *::after,
.midocean-cart *,
.midocean-cart *::before,
.midocean-cart *::after,
.midocean-checkout *,
.midocean-checkout *::before,
.midocean-checkout *::after,
.midocean-thankyou *,
.midocean-thankyou *::before,
.midocean-thankyou *::after {
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .midocean-account,
  .midocean-cart,
  .midocean-checkout,
  .midocean-thankyou {
    margin: 1.25rem auto 2.5rem;
    padding: 0 1rem;
  }
}

/* ------------------------------------------------------------------ *
 * Primitives partagées (titres, liens, cartes).
 * ------------------------------------------------------------------ */
/* Liens de contenu WooCommerce dans le vert de marque (au lieu du bleu par défaut).
   Cible le contenu textuel, pas les ancres structurelles (boutons, nav, étapes). */
.midocean-account .woocommerce-MyAccount-content a,
.midocean-account .woocommerce-Address a,
.midocean-account .woocommerce-info a,
.midocean-cart .woocommerce-info a,
.midocean-cart .woocommerce-message a,
.midocean-cart .cart-empty a,
.midocean-checkout .woocommerce-info a,
.midocean-checkout .woocommerce-message a,
.midocean-checkout .woocommerce-privacy-policy-text a,
.midocean-thankyou .woocommerce-info a,
.midocean-thankyou .woocommerce-message a,
.midocean-account .woocommerce-message a,
.midocean-checkout #payment a {
  color: var(--mido-green);
  text-decoration: none;
  transition: color var(--mido-transition);
}

.midocean-account .woocommerce-MyAccount-content a:hover,
.midocean-account .woocommerce-Address a:hover,
.midocean-cart .cart-empty a:hover,
.midocean-checkout .woocommerce-privacy-policy-text a:hover {
  color: var(--mido-green-dark);
  text-decoration: underline;
}

.midocean-card {
  background: var(--mido-surface);
  border: 1px solid var(--mido-border);
  border-radius: var(--mido-radius-lg);
  box-shadow: var(--mido-shadow-sm);
}

/* ------------------------------------------------------------------ *
 * Boutons partagés.
 * ------------------------------------------------------------------ */
.midocean-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  border-radius: var(--mido-radius-sm);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--mido-transition), color var(--mido-transition),
    border-color var(--mido-transition), box-shadow var(--mido-transition),
    opacity var(--mido-transition);
}

.midocean-btn:focus-visible {
  outline: none;
  box-shadow: var(--mido-ring);
}

.midocean-btn--primary {
  background: var(--mido-green);
  border-color: var(--mido-green);
  color: #fff;
}

.midocean-btn--primary:hover {
  background: var(--mido-green-dark);
  border-color: var(--mido-green-dark);
  color: #fff;
  text-decoration: none !important;
}

.midocean-btn--secondary {
  background: #fff;
  border-color: var(--mido-green);
  color: var(--mido-green);
}

.midocean-btn--secondary:hover {
  background: var(--mido-green-tint);
  color: var(--mido-green-dark);
  text-decoration: none !important;
}

.midocean-btn--ghost {
  background: transparent;
  border-color: var(--mido-border-strong);
  color: var(--mido-muted);
}

.midocean-btn--ghost:hover {
  background: var(--mido-surface-soft);
  color: var(--mido-ink);
  text-decoration: none !important;
}

.midocean-btn:disabled,
.midocean-btn[disabled],
.midocean-btn.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * Champs de formulaire harmonisés.
 * ------------------------------------------------------------------ */
.midocean-account input[type="text"],
.midocean-account input[type="email"],
.midocean-account input[type="password"],
.midocean-account input[type="tel"],
.midocean-account input[type="number"],
.midocean-account select,
.midocean-account textarea,
.midocean-cart input[type="text"],
.midocean-cart input[type="email"],
.midocean-cart input[type="tel"],
.midocean-cart input[type="number"],
.midocean-cart select,
.midocean-checkout input.input-text,
.midocean-checkout input[type="text"],
.midocean-checkout input[type="email"],
.midocean-checkout input[type="password"],
.midocean-checkout input[type="tel"],
.midocean-checkout select,
.midocean-checkout textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--mido-ink);
  background: #fff;
  border: 1px solid var(--mido-border-strong);
  border-radius: var(--mido-radius-sm);
  transition: border-color var(--mido-transition), box-shadow var(--mido-transition);
}

.midocean-account input:focus,
.midocean-account select:focus,
.midocean-account textarea:focus,
.midocean-cart input:focus,
.midocean-cart select:focus,
.midocean-checkout input:focus,
.midocean-checkout select:focus,
.midocean-checkout textarea:focus {
  outline: none;
  border-color: var(--mido-green);
  box-shadow: var(--mido-ring);
}

/* ------------------------------------------------------------------ *
 * Notices (info / message / erreur) au style apaisé et cohérent.
 * ------------------------------------------------------------------ */
.midocean-account .woocommerce-info,
.midocean-account .woocommerce-message,
.midocean-cart .woocommerce-info,
.midocean-cart .woocommerce-message,
.midocean-checkout .woocommerce-info,
.midocean-checkout .woocommerce-message,
body.midocean-my-account-active .woocommerce-info,
body.midocean-my-account-active .woocommerce-message,
body.midocean-cart-active .woocommerce-info,
body.midocean-cart-active .woocommerce-message,
body.midocean-checkout-active .woocommerce-info,
body.midocean-checkout-active .woocommerce-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem;
  background: var(--mido-green-tint);
  border: 1px solid var(--mido-green-border);
  border-left-width: 4px;
  border-left-color: var(--mido-green);
  border-radius: var(--mido-radius-sm);
  color: var(--mido-text);
  font-size: 0.9rem;
  list-style: none;
}

.midocean-account .woocommerce-info::before,
.midocean-account .woocommerce-message::before,
.midocean-cart .woocommerce-info::before,
.midocean-cart .woocommerce-message::before,
.midocean-checkout .woocommerce-info::before,
.midocean-checkout .woocommerce-message::before,
body.midocean-my-account-active .woocommerce-info::before,
body.midocean-cart-active .woocommerce-info::before,
body.midocean-checkout-active .woocommerce-info::before {
  color: var(--mido-green);
}

.midocean-account .woocommerce-error,
.midocean-cart .woocommerce-error,
.midocean-checkout .woocommerce-error {
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem;
  background: var(--mido-danger-soft);
  border: 1px solid #fecaca;
  border-left: 4px solid var(--mido-danger);
  border-radius: var(--mido-radius-sm);
  color: var(--mido-danger-ink);
  font-size: 0.9rem;
  list-style: none;
}

/* Panier & checkout : neutralise le ::before absolu WooCommerce (évite le texte coupé). */
.midocean-cart .woocommerce-info,
.midocean-cart .woocommerce-message,
.midocean-checkout .woocommerce-info,
.midocean-checkout .woocommerce-message,
body.midocean-cart-active .woocommerce-info,
body.midocean-cart-active .woocommerce-message,
body.midocean-checkout-active .woocommerce-info,
body.midocean-checkout-active .woocommerce-message {
  position: relative;
  align-items: flex-start;
  overflow: visible;
  padding: 0.9rem 1.1rem !important;
}

.midocean-cart .woocommerce-info::before,
.midocean-cart .woocommerce-message::before,
.midocean-checkout .woocommerce-info::before,
.midocean-checkout .woocommerce-message::before,
body.midocean-cart-active .woocommerce-info::before,
body.midocean-cart-active .woocommerce-message::before,
body.midocean-checkout-active .woocommerce-info::before,
body.midocean-checkout-active .woocommerce-message::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0;
  width: 1.25em;
  min-width: 1.25em;
  height: 1.25em;
  margin: 0.1em 0 0 !important;
  line-height: 1.25;
  font-family: WooCommerce !important;
}

/* ------------------------------------------------------------------ *
 * Règles critiques layout — wrappers PHP (indépendant de body class).
 * ------------------------------------------------------------------ */
body.midocean-my-account-active .woocommerce-account .woocommerce-MyAccount-navigation,
body.midocean-my-account-active .woocommerce-account .woocommerce-MyAccount-content,
.midocean-account .woocommerce-MyAccount-navigation,
.midocean-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.midocean-my-account-active .woocommerce-Addresses,
.midocean-account .woocommerce-Addresses {
  display: grid !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  width: 100% !important;
}

body.midocean-my-account-active .woocommerce-Addresses::before,
body.midocean-my-account-active .woocommerce-Addresses::after,
.midocean-account .woocommerce-Addresses::before,
.midocean-account .woocommerce-Addresses::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 768px) {
  body.midocean-my-account-active .woocommerce-Addresses,
  .midocean-account .woocommerce-Addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

body.midocean-my-account-active .woocommerce-Address,
.midocean-account .woocommerce-Address {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

body.midocean-my-account-active .woocommerce-MyAccount-content,
.midocean-account .woocommerce-MyAccount-content {
  background: var(--mido-surface) !important;
  border: 1px solid var(--mido-border) !important;
  border-radius: var(--mido-radius-lg) !important;
  box-shadow: var(--mido-shadow-sm) !important;
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  body.midocean-my-account-active .woocommerce-MyAccount-content,
  .midocean-account .woocommerce-MyAccount-content {
    padding: 2rem !important;
  }
}

body.midocean-my-account-active .woocommerce-MyAccount-content p a,
.midocean-account .woocommerce-MyAccount-content p a {
  color: var(--mido-green) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.midocean-my-account-active .woocommerce-MyAccount-content p a:hover,
.midocean-account .woocommerce-MyAccount-content p a:hover {
  text-decoration: underline !important;
}

body.midocean-my-account-active .woocommerce-Address-title .edit,
.midocean-account .woocommerce-Address-title .edit {
  color: var(--mido-green) !important;
}

.midocean-account__body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.75rem !important;
  align-items: start !important;
}

@media (min-width: 992px) {
  .midocean-account__body {
    grid-template-columns: 264px minmax(0, 1fr) !important;
    gap: 2.5rem !important;
  }
}