/* Eau 808 — Trade portal. Applies the site's active design (Marine & Or:
   ivoire #FFFFFF, marine #062D50, gold #00237D, Lato 300/400, sharp corners,
   no shadows, hairline rules instead of cards) to WooCommerce's own
   templates (My Account, Shop, Product, Cart, Checkout), which ship
   unstyled by default on this theme. */

/* ---------- Two-column account layout ---------- */
.elementor-element-to-account,
.elementor-element-to-account .elementor-widget-container,
.elementor-element-to-account .elementor-shortcode,
div.woocommerce-account {
  /* No explicit width anywhere in this chain meant it sized to its own
     content (nav + a small table) instead of filling the Elementor
     container — harmless while that container was narrow, but widening the
     container (see boxed_width fix) just made the unfilled gap bigger, not
     smaller. Force every link in the chain to actually stretch.
     !important: Elementor's own per-instance rule for this element
     (.elementor-1720 .elementor-element.elementor-element-to-account) has
     higher selector specificity than the plain class selectors here, so
     without !important it silently won and the first attempt at this fix
     had no visible effect at all. */
  width: 100% !important;
}
/* The actual DOM is .woocommerce-account > .woocommerce > (nav + content)
   — .woocommerce-account itself has exactly ONE child (.woocommerce), so
   making IT the flex container (as this rule did until now) never had any
   visible effect: flexing a single child does nothing. The two-column look
   in every earlier screenshot was coming entirely from WooCommerce's own
   legacy float rule (see below), which is why disabling that float without
   fixing this actually collapsed the layout instead of improving it. */
.woocommerce-account > .woocommerce {
  display: flex;
  width: 100%;
  gap: 64px;
  align-items: flex-start;
}
/* WooCommerce ships a legacy clearfix on .woocommerce (::before/::after with
   content:" "; display:table). Harmless while the element was a block — but
   a pseudo-element with `content` becomes a real FLEX ITEM once its parent
   is display:flex. So this container held four items, not two, and the 64px
   gap was paid three times instead of once. Measured on desktop: the content
   column sat at 508px inside a 900px wrapper (900 - 200 nav - 3×64 = 508);
   hiding these two pseudo-elements in the live page took it straight to the
   expected 636px. That leftover ~128px was the "unused space on the right"
   reported repeatedly — it was never a width rule losing the cascade. */
.woocommerce-account > .woocommerce::before,
.woocommerce-account > .woocommerce::after {
  display: none !important;
}
/* woocommerce-layout.css (loaded after this file) still ships the pre-flex
   two-column account layout: .woocommerce-account .woocommerce-MyAccount-
   navigation{float:left;width:30%} and ...-content{float:right;width:68%}.
   That selector (.woocommerce-account + the element class) is MORE specific
   than the plain single-class selectors below, so it silently won — the
   nav sat at a fixed 30% and the content at a fixed 68% of whatever the
   outer box measured, floated rather than flexed, which is why the table
   stayed narrow (and wrapped its Total column) no matter how much space
   sat unused to its right. Match its exact selector plus !important so
   this fix can never lose the same way again. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation,
.eau808-nav-col {
  float: none !important;
  width: auto !important;
  flex: 0 0 200px !important;
}
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-MyAccount-content,
.eau808-content-col {
  float: none !important;
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
/* Sous 1025px, le header bascule en menu hamburger et celui-ci contient deja
   TOUS les items du portail (tableau de bord, commandes, adresses, panier,
   catalogue, telechargements, supports, assistance, deconnexion). Garder en
   plus la colonne laterale afficherait deux fois la meme navigation et
   repousserait le contenu vers le bas. On la masque donc exactement sur la
   plage ou le hamburger prend le relais.

   Le seuil de 1024px n'est pas arbitraire : mesure faite sur le site, le
   hamburger est visible jusqu'a 1024px inclus et le menu horizontal reapparait
   a 1025px. Choisir 767px aurait laisse la plage 768-1024px sans menu portail
   NI colonne laterale, donc sans aucune navigation de compte. */
@media (max-width: 1024px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-navigation,
  .eau808-nav-col {
    display: none !important;
  }
  .woocommerce-account > .woocommerce {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-account .woocommerce-MyAccount-content,
  .eau808-content-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .woocommerce-account > .woocommerce {
    flex-direction: column;
    gap: 40px;
    /* Measured in a real 390px mobile viewport: the nav rendered at 192px
       and the content column at 185px inside a 358px parent. align-items:
       flex-start (set above for the desktop row layout, where it correctly
       stops the nav stretching to the content's full height) becomes a
       CROSS-AXIS rule on width once the direction flips to column — it
       replaces the default `stretch`, so both children shrink-wrap their
       own content instead of filling the screen. Restore stretch here. */
    align-items: stretch;
  }
  /* These selectors must MATCH the specificity of the desktop block above
     (.woocommerce-account + element class = two classes). A media query
     adds no specificity of its own, so the previous single-class version
     of this rule lost the cascade to the desktop `width: auto !important`
     no matter which loaded last — the computed width came back as a
     resolved `auto` (185.422px), never as 100%. */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content,
  .eau808-nav-col,
  .eau808-content-col {
    /* flex-basis 200px / flex-grow 1 govern HEIGHT in a column direction,
       which is never what we want for these two — reset both to auto so
       each block is simply as tall as its content. */
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
table.shop_table,
table.shop_table_responsive {
  width: 100% !important;
}

/* ---------- Account navigation — reads as wayfinding, not a settings list ---------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #EFF2F8;
}
.woocommerce-MyAccount-navigation ul li a {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #062D50;
  text-decoration: none;
  display: block;
  padding: 16px 0 16px 16px;
  border-left: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  color: #00237D;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #00237D;
  border-left-color: #00237D;
}

/* ---------- Content column typography ---------- */
.woocommerce-MyAccount-content {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: #4C5B82;
}
.woocommerce-MyAccount-content > p:first-child {
  max-width: 640px;
}
.woocommerce-MyAccount-content a {
  color: #00237D;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #062D50;
  letter-spacing: -0.01em;
}
.woocommerce-MyAccount-content h2 {
  font-size: 28px;
  margin: 0 0 24px;
}
.woocommerce-MyAccount-content h3 {
  font-size: 20px;
}
.woocommerce-MyAccount-content fieldset {
  border: 1px solid #C7CEDD;
  border-radius: 0;
  padding: 24px;
}
.woocommerce-MyAccount-content fieldset legend {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #00237D;
  padding: 0 8px;
}
.woocommerce-MyAccount-content label {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5C6A85;
}
.woocommerce-MyAccount-content .woocommerce-Input,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select {
  font-family: 'Lato', sans-serif;
  border: 1px solid #C7CEDD;
  border-radius: 0;
  padding: 12px 14px;
  color: #062D50;
  background: #FFFFFF;
}

/* ---------- Empty states & notices — composed, not a cramped default box ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #4C5B82;
  background: #EFF2F8;
  border-top: 1px solid #00237D;
  border-radius: 0;
  box-shadow: none;
  padding: 40px 40px 40px 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: #00237D;
  left: 24px;
}
.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: 0 !important;
}

/* ---------- Champs des formulaires WooCommerce natifs ----------
   Les pages My Account (edit-account, adresses) sont des gabarits WooCommerce,
   pas des formulaires Elementor : leurs champs portent .woocommerce-Input et
   echappaient donc a la regle posee ailleurs sur le site. Ils gardaient la
   bordure brune du thema (rgba(32,7,7,.8)) et des angles arrondis de 4px,
   en rupture avec le reste. On applique ici exactement le meme traitement :
   bordure bleu tres clair qui se fond, angles vifs, focus franchement visible. */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea,
.woocommerce-MyAccount-content .woocommerce-Input,
.woocommerce-MyAccount-content .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 1px solid #D7DEEA !important;
  border-radius: 0 !important;
  background-color: #FFFFFF !important;
  color: #062D50 !important;
  box-shadow: none !important;
  padding: 12px 14px;
}
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #00237D !important;
  box-shadow: 0 0 0 3px rgba(0, 35, 125, 0.14) !important;
  outline: none !important;
}

/* ---------- Data tables (orders, downloads history) ---------- */
table.shop_table {
  font-family: 'Lato', sans-serif;
  border-collapse: collapse;
  width: 100%;
}
table.shop_table thead th {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5C6A85;
  font-weight: 400;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #C7CEDD;
}
table.shop_table td {
  border-bottom: 1px solid #EFF2F8;
  padding: 16px 12px;
  color: #4C5B82;
}

/* ---------- Reusable data-sheet component ("fiche") — replaces ad-hoc
   list rows on Downloads / Marketing with the pattern already used on the
   legal pages: label left, value/action right, hairline rules between. ---------- */
.eau808-fiche {
  max-width: 640px;
  background: #EFF2F8;
  border-top: 1px solid #00237D;
}
.eau808-fiche__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 32px;
  border-bottom: 1px solid #C7CEDD;
}
.eau808-fiche__row:last-child {
  border-bottom: 0;
}
.eau808-fiche__row--muted .eau808-fiche__label {
  color: #5C6A85;
}
.eau808-fiche__label {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #062D50;
}
.eau808-fiche__action {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00237D;
  text-decoration: none;
  white-space: nowrap;
}
.eau808-fiche__action:hover {
  color: #062D50;
}
.eau808-fiche__note {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #5C6A85;
  font-style: italic;
}

/* ---------- Shop, product, cart and checkout ---------- */
/* Native WooCommerce templates (Shop archive, single Product) render inside
   the theme's raw #primary wrapper, not an Elementor-designed section — so
   unlike every other page on the site they inherit no background at all
   (plain browser white), which reads as a broken seam against the site's
   ivoire tone everywhere else. */
body.woocommerce-page,
body.single-product {
  background-color: #FFFFFF !important;
}
/* The sticky header (Elementor container "header-main", sticky effect
   starting after just 60px of scroll) removes itself from normal document
   flow once fixed. Elementor's own canvas-rendered pages seem to absorb
   this without visible overlap (generous built-in hero/section spacing),
   but every plain theme template — both #primary.content-area (Shop,
   Product category, single Product) and #content.site-main (Cart, and any
   other plain, non-Elementor-canvas Page) — starts its content right at
   the top with no such buffer, so the fixed header visibly covers the
   first ~100px of content as soon as the page is scrolled. Reserve enough
   top clearance on both wrapper shapes so nothing ever sits under it. */
#primary.content-area {
  background-color: #FFFFFF;
  padding: 140px max(24px, 5vw) 80px;
}
body.woocommerce-cart #content.site-main,
body.woocommerce-checkout #content.site-main {
  padding: 140px max(24px, 5vw) 80px;
}
/* The theme's .alignwide utility (used by the Cart/Checkout blocks) pulls
   -80px of margin on each side to deliberately bleed wider than the normal
   content column — but #content.site-main carries no horizontal padding of
   its own to absorb that here, so the block overflowed straight past the
   left edge of the viewport (the "PRODUCT" column header was rendering
   partly off-screen). A data table doesn't need the extra bleed width
   anyway, so just neutralize it on these two pages instead of trying to
   replicate it. */
body.woocommerce-cart .alignwide,
body.woocommerce-checkout .alignwide {
  margin-inline: 0;
}
.woocommerce-breadcrumb {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #5C6A85;
  margin-bottom: 24px;
}
.woocommerce-breadcrumb a {
  color: #5C6A85;
}
.woocommerce-products-header__title.page-title {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #062D50;
  font-size: 36px;
  letter-spacing: -0.01em;
}
.woocommerce-result-count {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #5C6A85;
}
.woocommerce-ordering select.orderby {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  border: 1px solid #C7CEDD;
  border-radius: 0;
  padding: 10px 14px;
  color: #062D50;
  background: #FFFFFF;
}
.woocommerce,
.woocommerce ul.products li.product,
.wc-block-checkout,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-components-product-name,
.wc-block-components-totals-item {
  font-family: 'Lato', sans-serif;
  color: #4C5B82;
}
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 48px 32px;
}
/* Meme piege que le clearfix de .woocommerce sur le tableau de bord : WooCommerce
   pose un ::before et un ::after porteurs de content sur ul.products. Inoffensifs
   sur une liste, ils deviennent de VRAIS items de grille des que le conteneur
   passe en display:grid — le ::before occupait donc la premiere cellule, decalant
   tous les produits d'un cran (mesure : "Still 75cl" demarrait en colonne 2, la
   colonne 1 restait vide) et le ::after en consommait une autre a la fin.
   C'est la cause reelle de la rangee bancale signalee, pas le nombre de colonnes. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

/* Le catalogue du portail demande bien columns="3" dans son shortcode, mais la
   grille auto-fill ci-dessus n'en tenait pas compte : dans la colonne de contenu
   (696px), trois pistes de 220px plus deux gouttieres de 32px depassaient de peu,
   d'ou un repli a 2 colonnes et une rangee bancale (1 produit seul, puis 2, 2, 1).
   On honore la demande de 3 colonnes des qu'il y a la place, en laissant la
   grille se replier d'elle-meme en dessous. */
@media (min-width: 900px) {
  .woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 899px) and (min-width: 480px) {
  .woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .woocommerce ul.products.columns-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.woocommerce ul.products li.product {
  /* WooCommerce's legacy woocommerce-layout.css still ships a float-based
     grid (li.product { float:left; width:22.05%/30.75% }) for pre-CSS-Grid
     themes. It loads after this file and, without !important, wins the
     cascade — shrinking every card to ~30% of its actual grid column and
     leaving image/title/button unaligned and overflowing. Override it. */
  float: none !important;
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.woocommerce ul.products li.product img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.wc-block-components-product-name {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #062D50;
  margin: 0 0 8px;
}
.woocommerce .price,
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-components-totals-item__value {
  color: #062D50;
}
.eau808-trade-locked {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  color: #5C6A85;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: #00237D !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 28px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
  background-color: #062D50 !important;
  color: #FFFFFF !important;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-address-form input,
.wc-block-components-radio-control__option {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-color: #C7CEDD !important;
}
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-item,
.wc-block-components-totals-wrapper {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- "Products (Block)" widget family (e.g. the empty-cart's
   "New in store" cross-sells) — an entirely separate WooCommerce Blocks
   widget with its own class names (wc-block-grid__*), not the classic
   ul.products/li.product markup styled above, so none of it matched. ---------- */
.wc-block-grid__product-link,
.wc-block-grid__product-link:hover,
.wc-block-grid__product-link:visited {
  /* The underline actually belongs to this wrapping <a>, not the title div
     nested inside it — text-decoration:none on the child alone doesn't
     reliably suppress a decoration painted by an ancestor link. */
  text-decoration: none !important;
}
.wc-block-grid__product-title {
  /* WooCommerce Blocks' own CSS declares .wc-block-grid__product-title
     {color:inherit} at the same specificity, loaded after this file — an
     equal-specificity tie goes to whichever rule loads last, so it was
     silently winning and pulling the color back from its parent <a> (the
     site's default red/pink link color). !important settles the tie. */
  /* WooCommerce Blocks' own rule also sets font-size:inherit and
     font-weight:700 on this exact selector — same tie, same fix. */
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #062D50 !important;
  text-decoration: none !important;
  margin: 0 0 8px !important;
}
.wc-block-grid__product-price {
  font-family: 'Lato', sans-serif !important;
  font-size: 17px !important;
  color: #062D50 !important;
}
.wc-block-grid__product-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: #00237D !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 28px !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover {
  background-color: #062D50 !important;
  color: #FFFFFF !important;
}