/* ------------------------------------------------------------------
   Lato, hebergee en local (5 aout 2026)
   Elementor la chargeait depuis fonts.googleapis.com — 18 variantes, sur
   chaque page, avec l'adresse IP du visiteur transmise a Google. On sert les
   4 graisses reellement utilisees, latin et latin-ext. Licence OFL.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://eau808usa.coddons.com/wp-content/uploads/808-assets/fonts/lato-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Eau 808 — lisibilite a l'echelle du site.

   Corrige les couleurs de texte qui echouent au contraste WCAG AA, mesurees
   dans un vrai navigateur sur les pixels reellement rendus (447 blocs sous le
   seuil, 41 motifs distincts, releve du 1er aout 2026).

   Principe : on n'invente aucune couleur et on ne change pas la charte
   "Marine & Or". Le Kit Elementor contient DEJA une couleur custom nommee
   "Or texte" (#00237D) — c'est celle qui etait prevue pour le texte, tandis
   que l'or moyen #00237D (accent) est fait pour les aplats. Les widgets
   utilisaient simplement la mauvaise des deux. On applique la charte.

   Contrastes sur ivoire #FFFFFF :
     #00237D  2.28  ECHEC  ->  #00237D  4.98  OK
     #5C6A85  2.89  ECHEC  ->  #5C6A85  5.07  OK
     #CC3366  4.42  ECHEC  ->  #00237D  4.98  OK
     #767676  4.31  ECHEC  ->  #4C5B82  6.38  OK
   Texte sur aplat or #00237D :
     blanc    2.40  ECHEC  ->  marine #062D50  5.84  OK

   POURQUOI !important PARTOUT ICI — ce n'est pas de la facilite.
   Le site est regle sur elementor_css_print_method = "internal" : tout le CSS
   genere par Elementor (y compris le CSS custom de chaque widget, du type
   ".fiche__valeur a{color:#00237D}") est imprime en <style> DANS la page,
   donc systematiquement APRES cette feuille externe. A specificite egale,
   c'est la derniere regle chargee qui gagne : sans !important, la moitie des
   corrections ci-dessous restaient sans effet (verifie : .fiche__cle et
   .fiche__valeur a demeuraient inchanges). S'y ajoutent des styles poses en
   dur dans le HTML (style="color:#00237D"), qu'aucune feuille externe ne peut
   battre autrement. */

/* ------------------------------------------------------------------
   1. Liens de contenu — le thema impose a{color:#CC3366} dans reset.css,
      d'ou des liens roses sur un site marine/or : visible sur les pages
      legales (commandes@808water.fr, "privacy policy", "mentions legales").
   ------------------------------------------------------------------ */
.elementor-widget-text-editor a,
.elementor-widget-heading a,
.woocommerce-MyAccount-content a,
.eau808-fiche a,
.fiche__valeur a,
.posted_in a {
  color: #00237D !important;
}
.elementor-widget-text-editor a:hover,
.woocommerce-MyAccount-content a:hover,
.fiche__valeur a:hover,
.posted_in a:hover {
  color: #062D50 !important;
}

/* Lien d'evitement clavier : reduit a 1x1px tant qu'il n'a pas le focus, donc
   invisible — mais il heritait du rose du thema, et devenait rose a l'ecran
   des qu'un utilisateur au clavier l'atteignait. On corrige les deux etats. */
.skip-link.screen-reader-text {
  color: #062D50 !important;
}
.skip-link.screen-reader-text:focus {
  color: #062D50 !important;
  background: #FFFFFF;
  border: 2px solid #00237D;
}

/* ------------------------------------------------------------------
   2. Or utilise en TEXTE sur fond clair -> or texte de la charte.
      Les aplats or (fond de bouton, filets, reperes) ne sont pas touches :
      un element purement graphique n'a pas d'exigence de contraste de texte.
   ------------------------------------------------------------------ */
.eau808-fiche__action,
.woocommerce-MyAccount-navigation li a,
.woocommerce-MyAccount-navigation li.is-active a,
.eau808-nav-col li a,
.eau808-nav-col li.is-active a,
.woocommerce-orders-table__cell-order-number a {
  color: #00237D !important;
}
.eau808-fiche__action:hover,
.woocommerce-MyAccount-navigation li a:hover,
.eau808-nav-col li a:hover {
  color: #062D50 !important;
}

/* Le repere de l'onglet actif reste en or moyen : c'est un filet, pas du
   texte — il conserve donc l'accent de la charte. */
.woocommerce-MyAccount-navigation li.is-active a,
.eau808-nav-col li.is-active a {
  border-left-color: #00237D !important;
}

/* Styles poses en dur dans le HTML des widgets. */
a[style*="color:#00237D"],
a[style*="color: #00237D"] {
  color: #00237D !important;
}

/* Menu principal — NE PAS forcer de couleur ici.
   Tant que le header etait ivoire, l'item actif en or moyen tombait a 2.28 et
   cette feuille le corrigeait en or texte #00237D. Depuis le passage au header
   bleu plein (consigne A-10), la situation est inversee : le menu est blanc et
   l'item actif en or clair #C7CEDD sur marine, soit 14.01 et 9.08 — tres au-dessus
   du seuil. Reappliquer l'or fonce ici le ferait retomber a 2.67 sur ce fond,
   c'est-a-dire illisible. Les couleurs du menu sont desormais portees par les
   reglages du header lui-meme (template 46), la ou elles doivent etre. */

/* Boutons-texte Elementor dont le libelle est en or sur fond clair
   ("Our story →", "Explore our water →") : pas d'aplat derriere, donc le
   libelle est du texte ordinaire et doit atteindre 4.5. */
.elementor-button[style*="color:#00237D"],
.elementor-button[style*="color: #00237D"],
.elementor-button[style*="color:#00237D"] .elementor-button-text,
.elementor-button[style*="color: #00237D"] .elementor-button-text {
  color: #00237D !important;
}

/* ------------------------------------------------------------------
   3. Gris discret des legendes, dates et etiquettes.
      #5C6A85 est trop clair des 12-13px : c'est le principal responsable
      de l'impression de "texte delave" signalee.
   ------------------------------------------------------------------ */
.fiche__cle,
.eau808-fiche__label,
.eau808-fiche__note,
.eau808-fiche__row--muted .eau808-fiche__label,
.woocommerce-result-count,
.tableau-donnees th,
.tableau-donnees caption,
table.shop_table thead th,
.woocommerce-MyAccount-content label,
.woocommerce-MyAccount-content legend {
  color: #5C6A85 !important;
}
[style*="color:#8A94AC"],
[style*="color: #8A94AC"] {
  color: #5C6A85 !important;
}

/* Fil d'Ariane WooCommerce : gris #767676 par defaut du thema (4.31). */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: #4C5B82 !important;
}
.woocommerce-breadcrumb a:hover {
  color: #062D50 !important;
}

/* ------------------------------------------------------------------
   4. Texte blanc sur aplat or : 2.40, sous le seuil. Le marine sur or
      donne 5.84 et c'est deja la convention des boutons du portail Trade.
      Concerne les boutons d'envoi des formulaires ("Send message",
      "Envoyer le message") sur Contact EN/FR et Trade Support EN/FR.
   ------------------------------------------------------------------ */
.elementor-form .elementor-button,
.elementor-form .elementor-button .elementor-button-text,
.elementor-form button[type="submit"],
.elementor-form button[type="submit"] .elementor-button-text {
  /* Depuis le passage a la palette bleu/blanc, l'aplat de ces boutons est
     #00237D : un libelle marine y tomberait a 1.03. En blanc : 11.42. */
  color: #FFFFFF !important;
}

/* ------------------------------------------------------------------
   5 ter. Libelles de section ("eyebrows") poses sur les photos des heros.

   Ils etaient en or clair, qui tranchait bien sur ces fonds bleutes. Le passage
   a la palette bleu/blanc les a fait basculer en #C7CEDD, soit un bleu clair
   sur un fond... bleu : mesure sur les pixels reels, la mediane tombait entre
   3.33 et 5.56 et le pire cas a 2.62 (photo claire du hero d'accueil).

   Le blanc pur remonte le contraste, mais ne suffit pas seul sur la zone la
   plus claire (4.04). L'ombre portee, discrete, garantit la lisibilite quelle
   que soit la photo derriere, sans toucher aux images ni au design.
   ------------------------------------------------------------------ */
.elementor-element-7d96639 .elementor-heading-title,
.elementor-element-c8029e8 .elementor-heading-title,
.elementor-element-c8e59a3 .elementor-heading-title,
.elementor-element-969ced6 .elementor-heading-title,
.elementor-element-34d6e22 .elementor-heading-title,
.elementor-element-86b8ed2 .elementor-heading-title,
.elementor-element-ef4a1a2 .elementor-heading-title,
.elementor-element-8a2bebd .elementor-heading-title,
.elementor-element-4244d2c .elementor-heading-title,
.elementor-element-fr-c3-label .elementor-heading-title,
/* Ajoutes le 3 aout 2026 apres re-verification du live : ces deux libelles
   avaient echappe a la passe precedente. Mesure sur pixels avant correction :
   mediane 2.54, pire cas 1.53 (bleu clair sur une photo claire). */
.elementor-element-s3-label .elementor-heading-title,
.elementor-element-fr-t3-label .elementor-heading-title {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(6, 45, 80, 0.85);
}

/* ------------------------------------------------------------------
   Decision D1 — le portail est en anglais seul.

   Les pages FR du portail sont depubliees. Laisser le bouton FR du header sur
   ces pages proposerait donc une bascule vers des pages inaccessibles (ou vers
   les quelques pages FR encore publiees, ce qui donnerait un portail a moitie
   traduit). On le masque sur les pages du portail uniquement.

   Le site vitrine public reste bilingue : le bouton y demeure intact.
   ------------------------------------------------------------------ */
body.eau808-portal-page [data-id="header-btn-lang"],
body.eau808-portal-page .elementor-element-header-btn-lang {
  display: none !important;
}

/* ------------------------------------------------------------------
   5 quinquies. Section CTA de /trade/ — voile sur la photo de fond.

   Cette section utilise une photo de Versailles tres claire (rideaux ivoire,
   coffret blanc) SANS aucun voile, contrairement aux autres sections a image du
   site. Mesure sur les pixels reels : titre a 4.22 de mediane et 2.36 au pire,
   libelle a 4.01/2.42 — le texte blanc se confond par endroits avec l'image.
   Constate visuellement, pas seulement calcule.

   Le reglage d'overlay d'Elementor n'a pas pris sur ce conteneur (le
   pseudo-element existe mais reste transparent) : on lui donne directement sa
   couleur ici. La version FR utilise une photo plus sombre et n'en a pas besoin
   (mesuree 8.25 / 6.78 / 8.73), on ne la touche pas. */
.elementor-element-s3-cta::before {
  background-color: rgba(6, 45, 80, 0.62) !important;
}

/* ------------------------------------------------------------------
   5 bis. Widgets Elementor dont la couleur est definie element par element.

   Ces cas ne sont atteignables par aucun selecteur generique : leur couleur
   vient du CSS que genere Elementor pour chaque widget. On les cible donc par
   leur identifiant, releve un a un dans le navigateur.

   (Les regles qui corrigeaient l'or ont disparu d'elles-memes : l'or a ete
   remplace a la source dans les widgets lors du passage a la palette
   bleu/blanc. Ne restent ici que le gris trop clair et le rose du thema.)
   ------------------------------------------------------------------ */

/* Legendes, credits photo et dates de mise a jour : #5C6A85 ne fait que 2.89
   sur blanc. Ce gris n'etait ni or ni beige, il n'a donc pas ete touche par le
   changement de palette et reste a corriger ici. */
.elementor-element-ebc0d47,
.elementor-element-9a3a1b6 p,
.elementor-element-d6ee563,
.elementor-element-gallery-credit,
.elementor-element-priv-date,
.elementor-element-terms-date,
.elementor-element-159659c,
.elementor-element-e43681a,
.elementor-element-fr-c1-note,
.elementor-element-fr-c2-r-note,
.elementor-element-fr-pp-date,
.elementor-element-fr-tu-date {
  color: #5C6A85 !important;
}

/* Lien "privacy policy" / "politique de confidentialite" sous les formulaires
   de contact : encore en rose #CC3366 par defaut du thema. */
.elementor-element-contact-form a,
.elementor-element-contact-form-fr a {
  color: #00237D !important;
}

/* ------------------------------------------------------------------
   5 quater. Formulaires — champs, liens et icones (retours client).
   ------------------------------------------------------------------ */

/* Champs de saisie : la bordure grise #69727D (defaut Elementor) et les angles
   arrondis de 4px juraient avec la charte, qui est en angles vifs. On garde une
   bordure — supprimer tout contour rendrait les champs difficiles a reperer —
   mais dans un bleu tres clair qui se fond dans le fond de page.
   Le focus, lui, reste franchement visible : c'est un point d'accessibilite,
   un champ actif doit se distinguer sans ambiguite. */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="url"],
.elementor-field-group input[type="number"],
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-field-textual {
  border: 1px solid #D7DEEA !important;
  border-radius: 0 !important;
  background-color: #FFFFFF !important;
  color: #062D50 !important;
  box-shadow: none !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus,
.elementor-field-textual:focus {
  border-color: #00237D !important;
  box-shadow: 0 0 0 3px rgba(0, 35, 125, 0.14) !important;
  outline: none !important;
}
.elementor-field-group input::placeholder,
.elementor-field-group textarea::placeholder {
  color: #5C6A85 !important;
}

/* Asterisque des champs obligatoires : rouge par defaut d'Elementor, seule
   tache de couleur hors palette qui restait dans les formulaires. Le bleu de
   marque suffit a la signaler — l'information "obligatoire" reste par ailleurs
   portee par l'attribut required, donc rien n'est perdu pour l'accessibilite. */
.elementor-mark-required .elementor-field-label:after,
.elementor-field-required .elementor-field-label:after,
.elementor-field-label .required,
.elementor-field-group > label span.required {
  color: #00237D !important;
}

/* Liens a l'interieur des formulaires ("privacy policy", "politique de
   confidentialite" de la case de consentement). Ils restaient au rose #CC3366
   du thema sur /trade-application/ et son equivalent FR : la regle precedente
   ne visait que le formulaire de la page Contact, par son identifiant. */
.elementor-widget-form a,
.elementor-field-type-acceptance a,
.elementor-field-option a {
  color: #00237D !important;
  text-decoration: underline;
}
.elementor-widget-form a:hover,
.elementor-field-type-acceptance a:hover {
  color: #062D50 !important;
}

/* Icones des reseaux sociaux : le lien retombait en display:block (regle du
   thema plus forte que celle posee dans le widget), si bien que le SVG se
   calait sur la ligne de base — mesure : 4px de marge en haut contre 18px en
   bas. On force la mise en page centree et on annule l'interligne, qui est ce
   qui decalait le glyphe vers le haut. */
.eau808-social {
  display: flex !important;
  gap: 8px;
  margin-top: 22px;
}
.eau808-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px;
  height: 44px;
  line-height: 0 !important;
  padding: 0 !important;
}
.eau808-social__link svg {
  display: block;
}

/* ------------------------------------------------------------------
   6. Debordement horizontal des "fiches" (Contact + pages legales).
      Mesure : /legal-notice/ et /fr/mentions-legales/ debordent de 7px en
      390px, /contact/ et /fr/contact-fr/ de 6px en 768px — la page entiere
      defile alors lateralement. En cause : une valeur insecable (adresse
      email, numero de telephone) dans une ligne en flex qui ne se replie pas.
   ------------------------------------------------------------------ */
.fiche__ligne {
  flex-wrap: wrap;
}
.fiche__valeur,
.fiche__cle {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   7. Cibles tactiles du footer.
      Les liens legaux ("Legal notice", "Privacy policy", "Terms of use")
      mesurent 18px de haut ; WCAG 2.2 (2.5.8) demande 24px minimum. On ne
      touche ni a la taille du texte ni a l'interligne visible : seul un
      padding vertical porte la zone cliquable a 24px.
   ------------------------------------------------------------------ */
.elementor-location-footer a,
footer a {
  display: inline-block;
  padding-block: 3px;
}

/* ------------------------------------------------------------------
   8. Lisibilite du corps de texte.
      Lato 300 (Light) en 13-15px rend le texte pale et fin a l'ecran ;
      le poids 400 est concu pour la lecture courante. Les grands titres
      gardent le 300, ou la finesse est un parti pris et reste lisible.
   ------------------------------------------------------------------ */
.fiche__cle,
.fiche__valeur,
.eau808-fiche__label,
.eau808-fiche__note,
.woocommerce-result-count {
  font-weight: 400 !important;
}


/* ------------------------------------------------------------------
   9. Blocs section 1 de /trade/ : listes en deux colonnes et tableau
      du minimum d'ouverture. Ces blocs passent par le widget HTML
      d'Elementor, qui n'herite d'aucune typographie : tout est
      declare ici, en bleu/blanc, sans aucune teinte tierce.
   ------------------------------------------------------------------ */
ul.eau808-cols {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  max-width: 860px;
  column-count: 2;
  column-gap: 56px;
  text-align: left;
}
ul.eau808-cols li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 14px;
  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #062D50;
  break-inside: avoid;
}
ul.eau808-cols li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00237D;
}
@media (max-width: 767px) {
  ul.eau808-cols { column-count: 1; margin-top: 28px; }
}

/* Tableau du minimum d'ouverture : le defilement horizontal reste
   contenu dans son conteneur, la page ne defile jamais en largeur. */
.eau808-table-wrap {
  width: 100%;
  max-width: 640px;
  margin: 40px auto 0;
  overflow-x: auto;
}
.eau808-table-wrap table.eau808-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Lato", sans-serif;
  font-size: 17px;
  text-align: left;
}
.eau808-table-wrap table.eau808-table thead th {
  padding: 14px 20px;
  background: #00237D;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eau808-table-wrap table.eau808-table tbody th {
  padding: 14px 20px;
  font-weight: 400;
  color: #062D50;
  border-bottom: 1px solid #D7DEEA;
  white-space: nowrap;
}
.eau808-table-wrap table.eau808-table tbody td {
  padding: 14px 20px;
  font-weight: 700;
  color: #00237D;
  border-bottom: 1px solid #D7DEEA;
  text-align: right;
}
.eau808-table-wrap table.eau808-table tbody tr:last-child th,
.eau808-table-wrap table.eau808-table tbody tr:last-child td {
  border-bottom: none;
}
.eau808-table-note {
  margin: 24px 0 0;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #4C5B82;
  text-align: left;
}


/* ------------------------------------------------------------------
   10. Corps de texte long des pages trade (classe .eau808-prose).
       Sans reglage, les h2 places dans un widget text-editor heritent
       de 16px / poids 300 : ils sont plus PALES et plus FINS que les
       paragraphes qu'ils annoncent, et la hierarchie s'inverse.
       La classe est posee explicitement sur les widgets concernes,
       pour ne rien changer aux text-editor du reste du site.
   ------------------------------------------------------------------ */
.eau808-prose h2 {
  font-family: "Lato", sans-serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #062D50 !important;
  margin: 48px 0 14px !important;
}
.eau808-prose h2:first-child {
  margin-top: 0 !important;
}
.eau808-prose h3 {
  font-family: "Lato", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #062D50 !important;
  margin: 32px 0 10px !important;
}
.eau808-prose p,
.eau808-prose li {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #4C5B82 !important;
}
.eau808-prose p {
  margin: 0 0 16px !important;
}
.eau808-prose ul {
  margin: 0 0 16px !important;
  padding-left: 22px !important;
}
.eau808-prose li {
  margin-bottom: 8px !important;
}
.eau808-prose li::marker {
  color: #00237D;
}
.eau808-prose strong {
  font-weight: 700 !important;
  color: #062D50 !important;
}
@media (max-width: 767px) {
  .eau808-prose h2 { font-size: 22px !important; margin-top: 36px !important; }
  .eau808-prose h3 { font-size: 18px !important; }
}


/* ------------------------------------------------------------------
   11. Points bloquants du pack juridique. Ces pages sont en brouillon
       et ne peuvent pas etre publiees tant que le conseil juridique
       de Floride n'a pas remplace les mentions entre crochets. Le
       surlignage les rend impossibles a manquer en relecture ; il
       disparaitra avec les crochets eux-memes.
   ------------------------------------------------------------------ */
mark.eau808-hold {
  display: inline;
  padding: 2px 6px;
  background: #FFF4CE;
  border-bottom: 2px solid #00237D;
  color: #062D50;
  font-weight: 700;
}


/* ------------------------------------------------------------------
   12. Textes de carte a recopier (section 17). Un etablissement les
       recopie sur sa carte : ils doivent se lire comme une citation
       isolee, pas comme du corps de texte, pour qu'on voie ou
       commence et ou finit le libelle a reprendre.
   ------------------------------------------------------------------ */
.eau808-menucopy__item {
  border-left: 3px solid #00237D;
  background: #F6F8FC;
  padding: 16px 20px;
  margin: 0 0 12px;
}
.eau808-menucopy__label {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00237D;
  margin-bottom: 6px;
}
.eau808-menucopy__text {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #062D50;
}
.eau808-menucopy__item--muted {
  border-left-color: #C7CEDD;
  background: #FFFFFF;
}
.eau808-menucopy__item--muted .eau808-menucopy__label {
  color: #4C5B82;
}
.eau808-menucopy__item--muted .eau808-menucopy__text {
  color: #4C5B82;
  font-style: italic;
}


/* ------------------------------------------------------------------
   13. Cartes du catalogue professionnel (spec section 7).
       La carte porte 12 informations : sans mise en forme, elle se lit
       comme un bloc de texte compact. Les specifications sont donc
       posees en paires libelle / valeur alignees, et la ligne de
       commande est detachee en bas de carte.
   ------------------------------------------------------------------ */
.eau808-card__desc {
  margin: 8px 0 14px !important;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #4C5B82;
}
.eau808-card__specs {
  margin: 0 0 16px;
  padding: 14px 0 4px;
  border-top: 1px solid #D7DEEA;
}
.eau808-card__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
}
.eau808-card__spec dt {
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4C5B82;
  margin: 0;
}
.eau808-card__spec dd {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #062D50;
  text-align: right;
  white-space: nowrap;
}
.eau808-card__spec dd .woocommerce-Price-amount {
  color: #00237D;
}

/* Ligne de commande : quantite en caisses, equivalent palettes, bouton. */
.eau808-card__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #D7DEEA;
}
.eau808-card__qty-label {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00237D;
  width: 100%;
}
.eau808-card__qty {
  width: 84px;
  padding: 9px 10px;
  border: 1px solid #D7DEEA;
  border-radius: 0;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: #062D50;
  background: #FFFFFF;
}
.eau808-card__qty:focus {
  outline: none;
  border-color: #00237D;
  box-shadow: 0 0 0 3px rgba(0, 35, 125, 0.12);
}
.eau808-card__pallets {
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4C5B82;
}
.eau808-card__add {
  flex: 1 1 100%;
  margin-top: 4px !important;
}

/* Tableau des conditionnements, deux formats cote a cote. */
.eau808-packtable td.eau808-packtable__num {
  font-weight: 700;
  color: #00237D;
  text-align: right;
}


/* ------------------------------------------------------------------
   13 bis. Alignement des cartes du catalogue.
       Les descriptions des trois gammes n'ont pas la meme longueur :
       sans hauteur minimale, le bloc de specifications demarrait a une
       hauteur differente dans chaque colonne et les lignes ne se
       repondaient plus d'une carte a l'autre. La carte devient une
       colonne flex, la description reserve trois lignes, et la zone de
       commande est poussee en bas : les boutons s'alignent quelle que
       soit la longueur du texte.
   ------------------------------------------------------------------ */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .eau808-card__desc {
  min-height: 4.8em;
}
.woocommerce ul.products li.product .eau808-card__form {
  margin-top: auto;
}

/* Le prix WooCommerce de la boucle repete "Wholesale price per case", deja
   present dans les specifications et mieux qualifie. Il n'est PAS un enfant
   direct de li.product : le theme le rend a l'interieur du lien produit, ce
   qui rendait le selecteur precedent inoperant - le prix restait affiche deux
   fois, constate au navigateur. */
.woocommerce ul.products li.product .woocommerce-loop-product__link > .price,
.woocommerce ul.products li.product > .price {
  display: none !important;
}

@media (max-width: 767px) {
  .woocommerce ul.products li.product .eau808-card__desc {
    min-height: 0;
  }
}


/* ------------------------------------------------------------------
   14. Recapitulatif de la commande d'ouverture (spec section 8).
       Injecte dans les blocs WooCommerce du panier et de la commande,
       qui n'apportent aucun style pour du contenu ajoute.
   ------------------------------------------------------------------ */
.eau808-opening-summary {
  margin: 16px 0;
  padding: 18px 20px;
  background: #FFFFFF;
  border: 1px solid #D7DEEA;
}
.eau808-opening-summary h3 {
  margin: 0 0 12px !important;
  font-family: "Lato", sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00237D !important;
}
.eau808-opening-summary dl {
  margin: 0;
}
.eau808-opening-summary dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid #EFF2F8;
}
.eau808-opening-summary dl > div:last-child {
  border-bottom: none;
}
.eau808-opening-summary dt {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4C5B82;
}
.eau808-opening-summary dd {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #062D50;
  text-align: right;
}
.eau808-opening-summary__note {
  margin: 12px 0 0 !important;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #4C5B82;
}


/* ------------------------------------------------------------------
   15. Minimum non atteint : ce qui se voit.
       Le bouton de passage en caisse est rendu par React ; l'attribut
       disabled serait perdu au re-rendu. L'etat est donc porte par une
       classe, reappliquee a chaque mise a jour du panier.
   ------------------------------------------------------------------ */
.eau808-minui-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(1);
}
.eau808-minui-block {
  margin: 0 0 32px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid #00237D;
  border-left-width: 4px;
}
.eau808-minui-block h2 {
  margin: 0 0 8px !important;
  font-family: "Lato", sans-serif;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #062D50 !important;
}
.eau808-minui-block p {
  margin: 0 0 12px !important;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #4C5B82;
}
.eau808-minui-block p:last-child {
  margin-bottom: 0 !important;
}
a.eau808-minui-back {
  display: inline-block;
  padding: 12px 24px;
  background: #00237D;
  color: #FFFFFF !important;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
a.eau808-minui-back:hover,
a.eau808-minui-back:focus {
  background: #062D50;
  color: #FFFFFF !important;
}


/* ------------------------------------------------------------------
   16. Champ de quantite du panier.
       Il est dimensionne par WooCommerce pour des quantites a un ou
       deux chiffres. Ici on compte en caisses : un panier de 375
       caisses s'affichait "37", le dernier chiffre etant coupe. Un
       partenaire ne pouvait pas relire ce qu'il commandait.
   ------------------------------------------------------------------ */
.wc-block-components-quantity-selector {
  max-width: none !important;
  width: auto !important;
  min-width: 132px;
}
.wc-block-components-quantity-selector__input {
  width: 100% !important;
  min-width: 60px;
  padding-left: 4px !important;
  padding-right: 4px !important;
  font-variant-numeric: tabular-nums;
  text-align: center;
}


/* ------------------------------------------------------------------
   17. Grille Quick Order.
       Une seule ligne par reference, un champ de saisie par ligne :
       le partenaire qui recommande doit pouvoir tout remplir sans
       quitter le clavier.
   ------------------------------------------------------------------ */
.eau808-qo__table tbody th {
  font-weight: 400;
  color: #062D50;
}
.eau808-qo__table td {
  vertical-align: middle;
}
.eau808-qo__input {
  width: 88px;
  padding: 9px 10px;
  border: 1px solid #D7DEEA;
  border-radius: 0;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: #062D50;
  background: #FFFFFF;
  text-align: right;
}
.eau808-qo__input:focus {
  outline: none;
  border-color: #00237D;
  box-shadow: 0 0 0 3px rgba(0, 35, 125, 0.12);
}
.eau808-qo__note {
  margin: 16px 0 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5B82;
}
.eau808-qo__submit {
  margin-top: 20px;
}

/* Libelle reserve aux lecteurs d'ecran : le champ porte deja l'en-tete de
   colonne visuellement, mais un lecteur d'ecran a besoin d'un libelle propre
   sur chaque champ pour annoncer de quel produit il s'agit. */
.eau808-qo .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------------
   18. Catalogue groupe par gamme.
       Chaque gamme est une section : son titre annonce les produits
       qui suivent, au lieu d'un pave de descriptions detache des
       cartes. Le filet superieur separe les gammes sans alourdir.
   ------------------------------------------------------------------ */
.eau808-range + .eau808-range {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid #D7DEEA;
}
.eau808-range__title {
  margin: 0 0 6px !important;
  font-family: "Lato", sans-serif;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  color: #062D50 !important;
}
.eau808-range__desc {
  margin: 0 0 28px !important;
  max-width: 62em;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #4C5B82;
}
@media (max-width: 767px) {
  .eau808-range + .eau808-range {
    margin-top: 40px;
    padding-top: 32px;
  }
  .eau808-range__title { font-size: 22px !important; }
}


/* ------------------------------------------------------------------
   19. Bloc "Documents you are agreeing to", au-dessus de la case
       d'acceptation du formulaire de candidature.
       C'est lui qui rend le clickwrap opposable : le candidat doit
       pouvoir lire ce qu'il accepte. Il est donc mis en evidence,
       pas fondu dans le formulaire.
   ------------------------------------------------------------------ */
.eau808-agreement {
  margin: 8px 0 4px;
  padding: 20px 24px;
  background: #F6F8FC;
  border-left: 3px solid #00237D;
}
.eau808-agreement__title {
  margin: 0 0 6px !important;
  font-family: "Lato", sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00237D !important;
}
.eau808-agreement__intro {
  margin: 0 0 12px !important;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5B82;
}
.eau808-agreement__list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.eau808-agreement__list li {
  position: relative;
  margin: 0 0 8px !important;
  padding-left: 20px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.eau808-agreement__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00237D;
}
.eau808-agreement__list a {
  color: #00237D;
  text-decoration: underline;
}
.eau808-agreement__list a:hover,
.eau808-agreement__list a:focus {
  color: #062D50;
}


/* ------------------------------------------------------------------
   20. Formulaire de candidature en etapes (spec section 2).
       Les notes et rappels intercales dans le formulaire ne doivent
       pas se lire comme des champs : ils sont detaches visuellement.
   ------------------------------------------------------------------ */
.eau808-form-note {
  margin: 4px 0 0;
  padding: 12px 16px;
  background: #F6F8FC;
  border-left: 3px solid #00237D;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5B82;
}
.eau808-form-terms {
  padding: 20px 24px;
  background: #FFFFFF;
  border: 1px solid #D7DEEA;
}
.eau808-form-terms h3 {
  margin: 0 0 10px !important;
  font-family: "Lato", sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00237D !important;
}
.eau808-form-terms p {
  margin: 0 0 12px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #4C5B82;
}
.eau808-form-terms p:last-child {
  margin-bottom: 0;
}

/* Indicateur d'etapes : sans contraste suffisant, on ne voit pas ou l'on
   en est dans un formulaire de sept ecrans. */
.elementor-field-type-step .e-form__indicators__indicator__label {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.e-form__indicators__indicator--state-inactive {
  color: #4C5B82;
}
.e-form__indicators__indicator--state-active,
.e-form__indicators__indicator--state-completed {
  color: #00237D;
}

/* Le message d'erreur doit se distinguer du libelle du champ, sinon il se
   lit comme une precision et non comme un refus. */
.elementor-form .elementor-message-danger,
.elementor-form .elementor-field-group .elementor-error-message {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #B3261E;
}
.elementor-form .elementor-field-group input:invalid:not(:placeholder-shown),
.elementor-form .elementor-field-group select:invalid {
  border-color: #B3261E;
}


/* ------------------------------------------------------------------
   21. Recapitulatif d'erreurs du formulaire (P. l.340).
       Sur sept etapes, la bulle native signale un champ a la fois
       sans dire combien il en reste. Ce bloc annonce le total et se
       place en tete, la ou le regard revient apres un clic refuse.
   ------------------------------------------------------------------ */
.eau808-form-errors {
  display: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #FDF2F2;
  border-left: 4px solid #B3261E;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #7A1A15;
}
.eau808-form-errors:focus {
  outline: 2px solid #B3261E;
  outline-offset: 2px;
}
.eau808-form-errors__list {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #8A3A35;
}


/* ------------------------------------------------------------------
   22. Page d'activation du compte partenaire.
       C'est le premier ecran d'un partenaire approuve : il doit etre
       simple et sans ambiguite, un seul geste a faire.
   ------------------------------------------------------------------ */
.eau808-activate {
  max-width: 460px;
}
.eau808-activate h2 {
  margin: 0 0 12px !important;
  font-family: "Lato", sans-serif;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #062D50 !important;
}
.eau808-activate p {
  margin: 0 0 14px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #4C5B82;
}
.eau808-activate label {
  display: inline-block;
  margin-bottom: 4px;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00237D;
}
.eau808-activate input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #D7DEEA;
  border-radius: 0;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #062D50;
  background: #FFFFFF;
}
.eau808-activate input[type="password"]:focus {
  outline: none;
  border-color: #00237D;
  box-shadow: 0 0 0 3px rgba(0, 35, 125, 0.12);
}
.eau808-activate__hint {
  font-size: 14px !important;
  color: #4C5B82;
}
.eau808-activate__error {
  padding: 12px 16px;
  background: #FDF2F2;
  border-left: 4px solid #B3261E;
  color: #7A1A15 !important;
  font-weight: 700;
}
.eau808-activate button {
  margin-top: 8px;
  padding: 13px 28px;
  background: #00237D;
  border: none;
  color: #FFFFFF;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.eau808-activate button:hover,
.eau808-activate button:focus {
  background: #062D50;
}


/* ------------------------------------------------------------------
   23. Historique des commandes, onze colonnes (spec section 11).
       Onze colonnes tiennent sur un ecran large et nulle part
       ailleurs. Sous 1024 px le tableau devient une pile de fiches,
       chaque cellule reprenant son intitule : sans quoi on lirait une
       suite de donnees sans savoir ce qu'elles designent.
   ------------------------------------------------------------------ */
/* Onze colonnes depassent la largeur utile d'un ecran de 1440 : mesure faite,
   la page defilait horizontalement (1607 px pour 1440). Le defilement doit
   rester DANS le tableau, jamais gagner la page entiere. */
.woocommerce-orders-table {
  font-size: 14px;
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.woocommerce-orders-table tbody,
.woocommerce-orders-table thead {
  display: table;
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  white-space: normal;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: 10px 12px !important;
  vertical-align: top;
}
.eau808-hist__produits {
  display: block;
  font-size: 13px;
  line-height: 1.5;
}
.eau808-hist__vide {
  color: #5C6A85;
}
.eau808-hist__paye {
  color: #1F7A3D;
  font-weight: 700;
}
.eau808-hist__du {
  color: #B3261E;
  font-weight: 700;
}
.eau808-hist__reorder {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table thead {
    min-width: 0;
  }
  .woocommerce-orders-table,
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td {
    display: block;
    width: 100%;
  }
  .woocommerce-orders-table thead {
    display: none;
  }
  .woocommerce-orders-table tr {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #D7DEEA;
  }
  .woocommerce-orders-table td::before {
    content: attr(data-title);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00237D;
  }
  .woocommerce-orders-table td {
    padding: 8px 0 !important;
    border: none !important;
  }
}

.eau808-reorder-msg {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #F1F7F2;
  border-left: 4px solid #1F7A3D;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #17552B;
}


/* ------------------------------------------------------------------
   24. Ecran de confirmation de commande (spec section 10).
       C'est le dernier ecran du parcours : il doit se lire d'un coup
       d'oeil et rester imprimable, un partenaire l'imprime souvent
       avant d'avoir recu l'e-mail.
   ------------------------------------------------------------------ */
.eau808-confirmation {
  margin: 0 0 32px;
  padding: 24px 28px;
  background: #F6F8FC;
  border-left: 4px solid #00237D;
}
.eau808-confirmation h2 {
  margin: 0 0 10px !important;
  font-family: "Lato", sans-serif;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #062D50 !important;
}
.eau808-confirmation p,
.eau808-confirmation li {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #4C5B82;
}
.eau808-confirmation ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.eau808-confirmation li {
  margin-bottom: 6px;
}
.eau808-confirmation li::marker {
  color: #00237D;
}
.eau808-confirmation__final {
  font-weight: 700;
  color: #062D50 !important;
}
.eau808-confirmation__recap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #D7DEEA;
}
.eau808-confirmation__recap dl {
  margin: 0;
}
.eau808-confirmation__recap dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
}
.eau808-confirmation__recap dt {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #4C5B82;
}
.eau808-confirmation__recap dd {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #062D50;
  text-align: right;
}

@media print {
  .eau808-confirmation {
    background: none;
    border-left: 2px solid #000;
  }
}


/* ------------------------------------------------------------------
   25. Page Payment Information et facture pro-forma.
       Le partenaire vient y chercher un montant et des instructions
       de virement : les deux doivent se trouver sans lecture.
   ------------------------------------------------------------------ */
.eau808-pay__carte {
  margin: 0 0 20px;
  padding: 20px 24px;
  background: #FFFFFF;
  border: 1px solid #D7DEEA;
}
.eau808-pay__carte h3 {
  margin: 0 0 12px !important;
  font-family: "Lato", sans-serif;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #062D50 !important;
}
.eau808-pay__carte dl {
  margin: 0;
}
.eau808-pay__carte dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #EFF2F8;
}
.eau808-pay__carte dl > div:last-child {
  border-bottom: none;
}
.eau808-pay__carte dt {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #4C5B82;
  flex: 0 0 auto;
}
.eau808-pay__carte dd {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #062D50;
  text-align: right;
}
a.eau808-pay__proforma {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  background: #00237D;
  color: #FFFFFF !important;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
a.eau808-pay__proforma:hover,
a.eau808-pay__proforma:focus {
  background: #062D50;
}
.eau808-pay__vide {
  font-family: "Lato", sans-serif;
  color: #4C5B82;
}
.eau808-pay__suivantes {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #D7DEEA;
}

/* Pro-forma : page autonome, pensee pour l'impression. */
body.eau808-proforma {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px;
  font-family: "Lato", Arial, sans-serif;
  color: #062D50;
  background: #FFFFFF;
}
body.eau808-proforma h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 300;
}
body.eau808-proforma h2 {
  margin: 28px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00237D;
}
body.eau808-proforma table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
body.eau808-proforma th,
body.eau808-proforma td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #D7DEEA;
}
body.eau808-proforma thead th {
  background: #00237D;
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Fond neutre et filet rouge de la charte : ce document est permanent et vu
   par le partenaire. Un bandeau jaune pale sur une pro-forma 808 ferait bon
   marche, alors que le rouge P186C signale mieux en restant dans la charte. */
.eau808-proforma__avis {
  padding: 12px 16px;
  background: #EFF2F8;
  border-left: 3px solid #B3261E;
  font-size: 14px;
  line-height: 1.6;
}
body.eau808-proforma footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #D7DEEA;
  font-size: 13px;
  color: #4C5B82;
}


/* ------------------------------------------------------------------
   26. Tableau de bord du partenaire (spec section 6).
       Huit cartes decrites, plutot qu'une liste de liens : le
       partenaire doit savoir ce qu'il trouvera avant de cliquer.
   ------------------------------------------------------------------ */
.eau808-dash__accueil {
  margin: 0 0 8px !important;
  font-family: "Lato", sans-serif;
  font-size: 26px !important;
  font-weight: 300 !important;
  color: #062D50 !important;
}
.eau808-dash__intro {
  margin: 0 0 28px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #4C5B82;
  max-width: 62em;
}
.eau808-dash__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.eau808-dash__carte {
  display: block;
  padding: 20px 22px;
  background: #FFFFFF;
  border: 1px solid #D7DEEA;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.eau808-dash__carte:hover,
a.eau808-dash__carte:focus {
  border-color: #00237D;
  box-shadow: 0 0 0 3px rgba(0, 35, 125, 0.08);
}
.eau808-dash__carte h3 {
  margin: 0 0 6px !important;
  font-family: "Lato", sans-serif;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #00237D !important;
}
.eau808-dash__carte p {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5B82;
}
.eau808-dash__carte--attente {
  background: #F6F8FC;
  border-style: dashed;
}
.eau808-dash__carte--attente h3 {
  color: #4C5B82 !important;
}
.eau808-dash__attente {
  margin-top: 8px !important;
  font-style: italic;
  color: #5C6A85 !important;
}
.eau808-dash__contact {
  margin-top: 28px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: #4C5B82;
}
.eau808-dash__contact a {
  color: #00237D;
}

@media (max-width: 767px) {
  .eau808-dash__grille {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Factures et releves (Lot 5A, spec section 13)
   Les tableaux sont larges : sur telephone ils passent en liste, chaque
   cellule reprenant son libelle via data-libelle. Un tableau qui deborde
   horizontalement cache ses dernieres colonnes, et la derniere ici est
   justement le bouton de telechargement.
   ------------------------------------------------------------------ */
.eau808-fac__rappel {
  padding: 12px 16px;
  background: #EFF2F8;
  border-left: 3px solid #B3261E;
  font-family: "Lato", sans-serif;
  color: #062D50 !important;
}
.eau808-fac__section {
  margin-top: 40px;
}
.eau808-fac__section h2 {
  margin-bottom: 12px !important;
  font-family: "Lato", sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00237D !important;
}
.eau808-fac__section h3 {
  margin: 28px 0 10px !important;
  font-family: "Lato", sans-serif;
  font-size: 15px !important;
  color: #062D50 !important;
}
.eau808-fac__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: #062D50;
}
.eau808-fac__table th,
.eau808-fac__table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #D7DEEA;
  vertical-align: top;
}
.eau808-fac__table thead th {
  background: #00237D;
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eau808-fac__vide,
.eau808-fac__attente {
  font-family: "Lato", sans-serif;
  color: #5C6A85;
}
a.eau808-fac__pdf,
a.eau808-fac__memo {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #00237D;
  white-space: nowrap;
}
.eau808-fac__confirmation,
.eau808-fac__erreur {
  padding: 12px 16px;
  font-family: "Lato", sans-serif;
  background: #EFF2F8;
}
.eau808-fac__confirmation {
  border-left: 3px solid #00237D;
}
.eau808-fac__erreur {
  border-left: 3px solid #B3261E;
}
.eau808-fac__form {
  max-width: 520px;
  font-family: "Lato", sans-serif;
}
.eau808-fac__form label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4C5B82;
}
.eau808-fac__form input,
.eau808-fac__form select,
.eau808-fac__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D7DEEA;
  border-radius: 2px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  color: #062D50;
  background: #FFFFFF;
}
.eau808-fac__form--releve {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.eau808-fac__form--releve p {
  margin: 0 !important;
}
.eau808-fac__ar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Lato", sans-serif;
  color: #062D50;
}
.eau808-fac__ar li {
  padding: 4px 0;
}

/* Documents autonomes : le releve et l'avoir reprennent la mise en page de la
   pro-forma, avec un sous-titre qui porte la periode ou la date d'emission. */
.eau808-document__soustitre {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #4C5B82;
}

@media (max-width: 767px) {
  .eau808-fac__table thead {
    display: none;
  }
  .eau808-fac__table,
  .eau808-fac__table tbody,
  .eau808-fac__table tr,
  .eau808-fac__table td {
    display: block;
    width: 100%;
  }
  .eau808-fac__table tr {
    margin-bottom: 16px;
    border: 1px solid #D7DEEA;
  }
  .eau808-fac__table td {
    border: none;
    border-bottom: 1px solid #EFF2F8;
  }
  .eau808-fac__table td::before {
    content: attr(data-libelle);
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5C6A85;
  }
  .eau808-fac__form--releve {
    display: block;
  }
  .eau808-fac__form--releve p {
    margin-bottom: 12px !important;
  }
}

@media print {
  body.eau808-document {
    padding: 0;
  }
}

/* Lieux de livraison (Lot 5B, spec section 14) */
.eau808-lieu__regle {
  padding: 12px 16px;
  background: #EFF2F8;
  border-left: 3px solid #00237D;
  font-family: "Lato", sans-serif;
  color: #062D50 !important;
}
.eau808-lieu__carte {
  margin-bottom: 24px;
  padding: 20px 24px;
  border: 1px solid #D7DEEA;
  background: #FFFFFF;
}
.eau808-lieu__carte--pending { border-left: 3px solid #5C6A85; }
.eau808-lieu__carte--approved { border-left: 3px solid #00237D; }
.eau808-lieu__carte--declined { border-left: 3px solid #B3261E; }
.eau808-lieu__carte h3 {
  margin: 0 0 4px !important;
  font-family: "Lato", sans-serif;
  font-size: 18px !important;
  color: #062D50 !important;
}
.eau808-lieu__statut {
  margin: 0 0 8px !important;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4C5B82 !important;
}
.eau808-lieu__adresse {
  margin: 0 !important;
  font-family: "Lato", sans-serif;
  color: #062D50 !important;
}
.eau808-lieu__fige {
  margin: 4px 0 16px !important;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  color: #5C6A85 !important;
}
.eau808-lieu__equip {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #D7DEEA;
}
.eau808-lieu__equip legend {
  padding: 0 6px;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4C5B82;
}
.eau808-lieu__case {
  display: block;
  padding: 3px 0;
  font-family: "Lato", sans-serif;
  color: #062D50;
}
.eau808-lieu__case input {
  width: auto;
  margin-right: 8px;
}

/* Reclamations (Lot 5C, pack P. l.180-199) */
.eau808-rec__delais {
  margin: 0 0 16px;
  padding-left: 20px;
  font-family: "Lato", sans-serif;
  color: #062D50;
}
.eau808-rec__delais li { padding: 3px 0; }
.eau808-rec__aide {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #4C5B82;
}
.eau808-rec__form input[type="file"] {
  padding: 8px 0;
  border: none;
}
a.eau808-rec__bouton {
  display: inline-block;
  padding: 12px 24px;
  background: #00237D;
  color: #FFFFFF !important;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
a.eau808-rec__bouton:hover,
a.eau808-rec__bouton:focus { background: #062D50; }
.eau808-rec__lien { margin-top: 24px; }

/* Demandes de conformite (Lot 5C) */
.eau808-req__piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.eau808-req__delai {
  margin-top: 16px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #4C5B82 !important;
}

/* ------------------------------------------------------------------
   Commande lecture/pause du hero — mobile (5 aout 2026)
   La video de fond du hero porte elementor-hidden-mobile : elle ne joue pas
   sur telephone. Son bouton, lui, restait affiche - une commande pour une
   video absente, posee sur le coin du bouton TRADE ENQUIRIES. Deux cibles
   tactiles superposees, dont l'une des deux actions principales du site.
   On masque le bouton la ou sa video l'est. Le toggle de la section
   lifestyle reste : sa video, elle, joue sur mobile.
   ------------------------------------------------------------------ */
/* MISE A JOUR 6 aout 2026 : la video du hero joue desormais sur mobile
   (background_play_on_mobile = yes). Le masquage ci-dessus n'a plus lieu
   d'etre, et il deviendrait un manquement : une animation en boucle de plus
   de 5 secondes qui demarre seule DOIT offrir un moyen de l'arreter
   (WCAG 2.2.2 Pause, Stop, Hide). Le hero boucle sur 8 secondes.
   On remet donc le bouton, place en bas a droite comme le client l'avait
   demande le 5 aout - la ou il ne croise plus TRADE ENQUIRIES.
   La taille reste a 44px : c'est une cible tactile, l'audit a deja releve
   des cibles sous 24px ailleurs. On l'eloigne, on ne le rapetisse pas. */
@media (max-width: 767px) {
  .elementor-element-hero-video-toggle {
    display: block;
  }
}


/* ---- eau808-fix-debordements (5 aout 2026) ----------------------------
   1. Quick Order : un <label class=screen-reader-text> en position absolue,
      large de 1px mais place a x=655, echappait au clipping du conteneur de
      table et etendait le document de 266px en 390px de large.
      Rendre le conteneur positionne suffit : l'absolu se cale sur lui et se
      fait clipper par son overflow-x. Le tableau continue de defiler en
      interne et le libelle reste lu par les lecteurs d'ecran.
      Mesure : scrollX 266 -> 0, scrollWidth 656 -> 390.
   2. Formulaire de candidature : les indicateurs des 7 etapes, en flex
      nowrap, sortaient a 477px pour un ecran de 390. On les fait passer a la
      ligne plutot que de les masquer : un candidat doit voir ou il en est.
   -------------------------------------------------------------------- */
.eau808-table-wrap { position: relative; }

@media (max-width: 767px) {
  /* wrap empilait les 7 etapes sur 606px de haut : le candidat ne voyait plus
     le premier champ. Le defilement garde la barre a 60px. Limite assumee :
     sans JS, l'indicateur actif peut sortir du champ visible aux etapes 6-7. */
  .e-form__indicators { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}

/* ---- eau808-fix-etape-validee (5 aout 2026) ---------------------------
   Formulaire de candidature : a l'etat 'completed', Elementor remplit le
   cercle en #002 37D et laisse le chiffre de la MEME couleur. Mesure : 1,00:1,
   le numero de l'etape validee est invisible. Le chiffre passe en blanc.
   -------------------------------------------------------------------- */
.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
  color: #FFFFFF;
}

/* ---- eau808-fix-cta-trade (5 aout 2026) -------------------------------
   CTA 'Become a partner' de /trade/ : le voile etait declare
   rgba(6,45,80,.62) MAIS porte une opacity:.5 -> opacite reelle 0,31.
   La photo (versailles-1.jpg, rideaux ivoire, tres claire) transparaissait
   et le texte blanc tombait a 2,44:1 sur le pire pixel.
   On retire la double attenuation : le voile retrouve les .62 prevus.
   Mesure sur pixels, texte masque, pire pixel du fond :
     titre       2,44 -> 8,03:1  (seuil 3, cible 4,5)
     paragraphe  2,44 -> 7,92:1  (seuil 4,5, cible 5,5)
   -------------------------------------------------------------------- */
.elementor-element-s3-cta::before { opacity: 1; }

/* ---- eau808-fix-boutons-roses (5 aout 2026) ---------------------------
   Le reset.css du theme pose color ET border en #CC3366 (rose framboise)
   sur tout button / [type=button] / [type=submit]. Nos boutons Elementor le
   surchargent, ceux de nos mu-plugins l'heritaient : 7 boutons du portail
   sortaient en rose sur une charte bleu et blanc.
   MEME SPECIFICITE que le theme, chargee apres, et SANS !important :
   ainsi toute regle portant une classe continue de gagner. C'est ce qui
   protege ADD TO ORDER (.eau808-card__add, blanc sur fond bleu plein) :
   avec !important ou un selecteur a classe, il serait passe bleu sur bleu.
   Verifie avant pose : ADD TO ORDER, Download PDF et les boutons du panier
   restent inchanges ; les 7 roses passent en #00237D.
   -------------------------------------------------------------------- */
button, [type="button"], [type="submit"] {
  color: #00237D;
  border-color: #00237D;
}
button:hover, button:focus,
[type="button"]:hover, [type="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus {
  background-color: #00237D;
  border-color: #00237D;
  color: #FFFFFF;
}




/* ---- eau808-fix-hero-hospitality (6 aout 2026) ------------------------
   Hero de /hospitality/ : le chapo (#C7CEDD, 24px, donc GRAND TEXTE au sens
   WCAG, seuil 3:1) tombait a 2,12 sur negresco.jpg - une photo claire a cet
   endroit. Les 3 autres heros partagent la meme couleur et tiennent
   (9,84 a 11,56) : c'est le cadrage de celui-ci qui est en cause, pas la teinte.
   Le voile est un degrade porteur d'une opacity:0.5 qui le divisait par deux -
   meme motif que le CTA de /trade/. On le remonte a 0.7 (+40 %).
   Mesure sur pixels, texte masque, pire pixel : 2,12 -> 3,74 (cible 3,5).
   #C7CEDD est conserve : la famille des 4 heros reste coherente.
   -------------------------------------------------------------------- */
.elementor-element-0e9bee2::before { opacity: 0.7; }



/* ---- eau808-pause-fixe (6 aout 2026) ---------------------------------
   Diagnostic avant correction, comme demande : l'offsetParent du bouton
   est <div.elementor-element-hero-vid>, en position:absolute et de
   HAUTEUR NULLE. En paysage 844x390 ce conteneur tombe a y=490, soit
   100px SOUS la fenetre : tout ancrage a lui sort de l'ecran, et le
   bouton depassait de 68px. C'est pour cela que mes deux essais
   precedents ont echoue - et que le second avait empire les choses.
   Le seul repere qui ne bouge ni avec l'orientation ni avec le
   defilement, c'est la fenetre : position fixed.
   L'affichage reste conditionne a la presence de la section a l'ecran
   (observateur d'intersection, cote JS) - sans quoi un bouton de pause
   flotterait au-dessus d'une page ou aucune video ne joue.
   -------------------------------------------------------------------- */
/* !important assume : le widget HTML d'Elementor ecrit le placement en
   style INLINE sur le bouton (position:absolute;bottom:32px;right:32px).
   Un style inline bat toute feuille externe ; sans !important cette regle
   ne s'applique pas - mesure faite, position calculee restait 'absolute'.
   L'alternative etait de modifier le widget dans _elementor_data, donc de
   toucher la page d'accueil pour un probleme de placement. */
.video-toggle {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 120;
  transition: opacity .2s ease;
}

/* Deux boutons coexistent sur l'accueil (hero et lifestyle). Fixes tous
   les deux, ils se superposeraient : le JS n'en laisse qu'un visible. */
.video-toggle.eau808-toggle--cache {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ---- eau808-social-couleurs (7 aout 2026) -----------------------------
   Regression de ma main, corrigee le meme jour. En remplacant le widget
   HTML du pied de page par le shortcode, j'ai repris les SVG mais PAS le
   bloc <style> que le widget portait avec eux : les icones heritaient de
   la couleur de lien par defaut et sortaient en ROSE (#CC3366) - hors
   charte depuis le 2 aout, et a 2,82:1 sur le marine du pied de page,
   sous le seuil de 3:1 des composants graphiques (WCAG 1.4.11).
   J'avais mesure le comportement des icones, pas leur apparence.
   Les valeurs ci-dessous sont celles du widget d'origine, reprises telles
   quelles depuis la sauvegarde du gabarit - pas une couleur choisie par moi.
   -------------------------------------------------------------------- */
.eau808-social__link {
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .35);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.eau808-social__link:hover {
  color: #062D50;
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.eau808-social__link:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/*
 * DEUX DEFAUTS D'AFFICHAGE, UNE SEULE RACINE - mesures du 8 aout 2026.
 *
 * La colonne de contenu du portail fait 636 px dans un viewport de 1440.
 *
 * 1. LE TABLEAU DES COMMANDES defile : scrollWidth 1219 contre clientWidth 634.
 *    Il n'est donc pas casse - mais RIEN NE LE DIT. La barre mesure 2 px, et
 *    l'oeil ne voit qu'un tableau coupe : montants tronques, boutons hors du
 *    cadre. Un defilement qu'on ne voit pas est un contenu perdu.
 *
 *    On ne bricole pas les largeurs de colonne : on rend le defilement
 *    VISIBLE. L'ombre de droite s'efface d'elle-meme quand on atteint la fin.
 *
 * 2. LES ENGAGEMENTS s'affichaient sur 9, 11 et 7 lignes de deux mots : la
 *    colonne d'etiquette faisait 135 px. C'est le TEXTE CONTRACTUEL que le
 *    partenaire a accepte - il doit se lire, pas se deviner.
 *
 *    Sous 900 px de contenu, etiquette et valeur s'empilent : une ligne de
 *    texte long a besoin de toute la largeur, pas d'un tiers.
 */
.woocommerce-orders-table{
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
  scrollbar-width: thin;
}

.woocommerce-MyAccount-content dl.wc-block-order-confirmation-additional-fields-list,
.woocommerce-MyAccount-content .woocommerce-order-details dl,
.woocommerce-MyAccount-content dl{
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  column-gap: 1.25rem;
  row-gap: .35rem;
}

.woocommerce-MyAccount-content dl > dt,
.woocommerce-MyAccount-content dl > dd{
  width: auto;
  max-width: none;
  margin: 0;
}

@media (max-width: 1100px){
  .woocommerce-MyAccount-content dl{ grid-template-columns: 1fr; }
  .woocommerce-MyAccount-content dl > dd{ margin-bottom: .6rem; }
}

/*
 * La classe reelle est wc-block-components-additional-fields-list, et
 * WooCommerce la cible avec trois classes : ma premiere regle s'appliquait,
 * mais ses colonnes gagnaient (grid-template-columns mesure : 135px 551px).
 * Meme specificite, feuille chargee apres : c'est celle-ci qui s'applique.
 */
.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list{
  grid-template-columns: minmax(18rem, 1fr) minmax(5rem, auto);
  column-gap: 1.25rem;
}

@media (max-width: 1100px){
  .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list{
    grid-template-columns: 1fr;
  }
}


/*
 * Et finalement : UNE SEULE COLONNE, toujours.
 *
 * Elargir l'etiquette de 135 a 288 px a fait tomber les engagements de 9, 11
 * et 7 lignes a 5, 5 et 4. Mieux - mais une phrase contractuelle sur 5 lignes
 * de 288 px, avec "Yes" seul en face, ne se lit toujours pas comme un texte.
 *
 * La racine n'est pas la grille : la colonne de contenu du portail fait 636 px
 * dans un viewport de 1440, et une media query ne le sait pas - elle mesure la
 * fenetre, pas le cadre.
 *
 * Empilees, ces phrases disposent des 636 px entiers. Et "Yes" en dessous se
 * lit tres bien : c'est une reponse, pas une colonne a aligner.
 */
.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list{
  grid-template-columns: 1fr;
  row-gap: .25rem;
}

.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list > dd{
  margin-bottom: 1rem;
  font-weight: 600;
}


/*
 * LES BOUTONS D'ACTION SONT CONTENUS PAR CONSTRUCTION, PAS PAR REGLAGE.
 *
 * Mesure du 8 aout 2026, sonde "chaque enfant contre SON parent" :
 *   A.button "REORDER"  133 px dans une cellule de 107  ->  depasse de 39 px
 *   A.button "VIEW"     100 px dans 107 moins 24 de marge ->  depasse de 6 px
 *
 * La cellule fait 107 px comme LES ONZE AUTRES : la table est en display:block
 * pour pouvoir defiler, et elle perd alors la repartition par contenu : toutes
 * les colonnes recoivent la meme largeur, que leur contenu soit une date ou
 * deux boutons.
 *
 * On ne regle DONC PAS le rembourrage jusqu'a ce que ca rentre - le prochain
 * libelle plus long ressortirait. Les boutons prennent 100 % de leur cellule :
 * quelle que soit sa largeur, ils y tiennent.
 *
 * Empiles et de meme largeur, ils sont aussi plus lisibles que deux blocs de
 * longueurs differentes.
 *
 * La hauteur de cible NE BOUGE PAS : 42 px mesures, bien au-dessus du seuil
 * de 24 px (WCAG 2.5.8). Seules les marges HORIZONTALES sont reprises.
 */
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions,
.woocommerce-orders-table td:last-child{
  white-space: normal;
}

.woocommerce-orders-table td .button{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  margin: 0 0 6px;
}

.woocommerce-orders-table td .button:last-child{
  margin-bottom: 0;
}


/*
 * LES ECRANS A TABLEAU PRENNENT LA PLACE QUI EST LA. PAS LES AUTRES.
 *
 * Releve du 8 aout 2026, chaine des conteneurs :
 *
 *   fenetre 1440  ->  SECTION 1440 px  ->  .e-con-inner MAX-WIDTH: 900px
 *                      nav 200 + contenu 636 = 836
 *                      marges VIDES : 270 px a gauche, 270 a droite
 *   fenetre 1920  ->  marges vides : 510 px de chaque cote
 *
 * Il y a donc bien de la place, et le verrou est un max-width:900px sur le
 * conteneur Elementor. La section, elle, occupe deja toute la fenetre.
 *
 * MAIS ON NE L'ELARGIT PAS PARTOUT : 636 px est une bonne longueur de ligne
 * - soixante-dix caracteres, la mesure d'un texte qui se lit. Elargir la prose
 * degraderait Account Details, Payment Information, la FAQ et les politiques
 * pour un seul ecran qui a besoin de place.
 *
 * :has() cible DONC les seuls conteneurs QUI PORTENT UN TABLEAU - commandes,
 * factures, lieux. Un navigateur qui ne le connait pas garde l'etat actuel :
 * le tableau defile, et ses ombres le disent. Aucune regression possible.
 *
 * calc(100vw - 96px) : les 24 px de padding de la section, de chaque cote,
 * plus autant de respiration. Le tableau ne touche jamais le bord.
 */
@media (min-width: 1200px){
  .eau808-portal-page .e-con-inner:has(table.shop_table),
  .eau808-portal-page .e-con-inner:has(.woocommerce-orders-table),
  .eau808-portal-page .e-con-inner:has(.eau808-fac__table){
    max-width: min(1500px, calc(100vw - 96px));
  }
}


/*
 * LE DEFILEMENT APPARTIENT AU CONTENEUR, PAS AU TABLEAU.
 *
 * La cause n'avait jamais ete corrigee - elle avait ete contournee.
 *
 * En display:block, une table perd son algorithme : les onze colonnes ont
 * recu 107 px chacune, que leur contenu soit une date ou deux boutons. La
 * colonne d'actions ne pouvait donc pas etre plus large que les autres, le
 * bouton pas plus large que la colonne, et "REORDER" s'ecrivait "REORDE".
 *
 * Le rembourrage n'etait que le dernier maillon.
 *
 * Le defilement passe donc au conteneur, et la table redevient une table :
 * chaque colonne prend la largeur de son contenu, et le mot tient entier.
 * Les ombres suivent le conteneur : c'est lui qui defile maintenant.
 */
.woocommerce-MyAccount-content:has(table.shop_table),
.woocommerce-MyAccount-content:has(.eau808-fac__table),
.eau808-content-col:has(table.shop_table),
.eau808-content-col:has(.eau808-fac__table){
  overflow-x: auto;
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.woocommerce-orders-table,
table.shop_table,
.eau808-fac__table{
  display: table;
  width: auto;
  min-width: 100%;
  overflow: visible;
  background: none;
}

/* Le bouton prend la largeur de sa cellule, qui prend celle de son contenu. */
.woocommerce-orders-table td .button{
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}


/*
 * TOUT CONTENEUR QUI PORTE UN TABLEAU, PAS UNE LISTE DE CLASSES.
 *
 * Defaut releve le 8 aout 2026 sur /trade-quick-order/ : la colonne PALLETS
 * - LE CHAMP DE SAISIE - etait coupee net. La page n'a QUE cette fonction.
 *
 * Ma regle precedente enumerait trois classes - shop_table, orders-table,
 * fac__table. Quick Order n'en porte aucune. C'etait, pour la troisieme fois
 * de la semaine, DEUX DEFINITIONS DU PERIMETRE DONT UNE SEULE A JOUR : apres
 * les notices et la feuille du portail.
 *
 * La question n'est pas "quelle classe porte ce tableau", mais "ce conteneur
 * porte-t-il un tableau"? Elle ne perime pas.
 */
@media (min-width: 1200px){
  .eau808-portal-page .e-con-inner:has(table){
    max-width: min(1500px, calc(100vw - 96px));
  }
}

.woocommerce-MyAccount-content:has(table),
.eau808-content-col:has(table){
  overflow-x: auto;
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table{
  max-width: none;
}


/*
 * DEUX LARGEURS EN DUR, TROUVEES EN MESURANT LA CHAINE.
 *
 * 1. /trade-quick-order/ : DIV.eau808-table-wrap portait max-width:640px.
 *    La table fait 701 px, la place disponible 1 040. Le champ DE SAISIE -
 *    la seule fonction de cette page - etait donc tranche net.
 *
 *    C'est MON enveloppe, avec une largeur ecrite en dur. Elle a tenu tant
 *    que la colonne faisait 636 px ; elle a cesse d'etre juste le jour ou la
 *    colonne a change. Une valeur en dur n'est jamais vraie longtemps.
 *
 * 2. La colonne d'actions du tableau des commandes : width:1% + nowrap est
 *    la facon dont une colonne demande EXACTEMENT son contenu - ni plus, ni
 *    moins. "le reste aux autres". Sans elle, la repartition la comprimait
 *    et "REORDER" s'ecrivait "REORDE".
 */
.eau808-table-wrap{
  max-width: 100%;
}

.woocommerce-orders-table th:last-child,
.woocommerce-orders-table td:last-child{
  width: 1%;
  white-space: nowrap;
}

.woocommerce-orders-table td:last-child .button{
  width: 100%;
  min-width: max-content;
}


/*
 * Et la combinaison precedente se mordait la queue : une cellule a width:1%
 * prend la largeur de son contenu - mais un contenu a width:100% n'en a aucune
 * a lui. Les deux se renvoyaient la question, et le bouton sortait de 135 px.
 *
 * Le bouton demande donc sa propre largeur (max-content), et s'etire jusqu'a
 * celle de la cellule (min-width:100%). La cellule, elle, suit le plus large.
 */
.woocommerce-orders-table td:last-child .button{
  width: max-content;
  min-width: 100%;
}


/*
 * Et width:1% a vide la cellule au lieu de la serrer sur son contenu.
 *
 * Cette astuce ne vaut que pour un contenu INLINE : un bloc de largeur auto
 * ne contribue pas a la largeur preferee de la cellule. Resultat : cellule
 * quasi nulle, boutons lisibles MAIS HORS DE LA GRILLE - vu sur la capture.
 *
 * On laisse donc la cellule prendre sa largeur naturelle, et c'est le bouton
 * qui la dicte : max-content (il demande son mot entier) et nowrap.
 */
.woocommerce-orders-table th:last-child,
.woocommerce-orders-table td:last-child{
  width: auto;
  white-space: nowrap;
}

.woocommerce-orders-table td:last-child .button{
  display: block;
  width: 100%;
  min-width: max-content;
  margin: 0 0 6px;
}

.woocommerce-orders-table td:last-child .button:last-child{
  margin-bottom: 0;
}


/*
 * LA CAUSE FINALE : un width:100% !important.
 *
 * trade-portal.css porte :
 *   table.shop_table, table.shop_table_responsive { width: 100% !important }
 *
 * Tant qu'elle s'applique, la table est ETIREE a la largeur de son cadre et
 * repartit ses onze colonnes a egalite : 107 px chacune. Que la cellule
 * contienne une date ou deux boutons, elle aura 107 px.
 *
 * Tout ce que j'ai pose ensuite - display:table, width:auto, width:1% - a
 * perdu contre ce !important. Je l'ai contourne trois fois avant de le voir.
 *
 * min-width:100% garde le tableau pleine largeur quand il est PLUS ETROIT que
 * son cadre - le seul besoin que servait ce 100 %.
 */
.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table{
  width: auto !important;
  min-width: 100%;
}


/*
 * LA COULEUR DE LIEN PAR DEFAUT DU PORTAIL.
 *
 * Mesure du 8 aout 2026 sur /trade-invoices/ :
 *   rgb(204, 51, 102) = #c36   ->  "#1987" et "Returns, Claims and Damages"
 *   rgb(0, 35, 125)            ->  "Download PDF" (habille explicitement)
 *
 * La charte est bleu et blanc depuis le 2 aout : il n'y a plus de troisieme
 * couleur. Et un lien rouge au-dessus d'un formulaire de reclamation se lit
 * comme une alerte, pas comme une politique a consulter.
 *
 * On corrige LA VALEUR PAR DEFAUT, pas les trois liens : sinon le prochain
 * lien ajoute ressortira rouge. Les boutons et les liens deja habilles sont
 * exclus : ils ont leur propre couleur, souvent sur fond bleu.
 */
.eau808-portal-page .woocommerce-MyAccount-content a:not([class*="button"]):not([class*="elementor-button"]),
.eau808-portal-page .eau808-content-col a:not([class*="button"]):not([class*="elementor-button"]),
.eau808-portal-page .eau808-fac__section a:not([class*="button"]){
  color: #00237d;
}

.sau808-interdit-rouge{}


/*
 * L'EMPILEMENT MOBILE VAUT POUR TOUS LES TABLEAUX DU PORTAIL.
 *
 * Defaut vu SUR LA CAPTURE a 390 px : /trade-quick-order/ restait en colonnes
 * - PRODUCT | FORMAT - et les trois autres, DONT LA COLONNE DES CHAMPS DE
 * SAISIE, etaient hors ecran. Sur telephone, le partenaire ne pouvait pas
 * saisir ses quantites du tout.
 *
 * La regle d'empilement existait - elle nommait .eau808-fac__table. La table
 * de Quick Order s'appelle .eau808-qo__table. QUATRIEME FOIS DE LA SEMAINE
 * qu'une regle juste enumere une classe au lieu de decrire le cas.
 *
 * .eau808-table est porte par toutes nos tables du portail : c'est lui qu'on
 * cible, plus celui de WooCommerce. Une table ajoutee demain suivra sans que
 * personne ait a y penser.
 */
@media (max-width: 767px){
  .eau808-table thead,
  .eau808-qo__table thead{
    display: none;
  }

  .eau808-table,
  .eau808-table tbody,
  .eau808-table tr,
  .eau808-table th,
  .eau808-table td{
    display: block;
    width: auto;
    min-width: 0;
  }

  .eau808-table tr{
    margin-bottom: 16px;
    border: 1px solid #eff2f8;
  }

  .eau808-table th[scope="row"]{
    background: #EFF2F8;
    font-weight: 700;
    text-align: left;
  }

  /* L'etiquette revient devant la valeur : sans elle, une pile de chiffres
     ne veut rien dire. */
  .eau808-table td[data-libelle]::before{
    content: attr(data-libelle) ": ";
    font-weight: 700;
    color: #00237d;
  }

  /* Le cadre defilant n'a plus lieu d'etre une fois les fiches empilees. */
  .eau808-table-wrap{
    overflow-x: visible;
  }
}


/*
 * LA REPARTITION EGALE VENAIT DE thead ET tbody, PAS DE LA TABLE.
 *
 * Lecture du 8 aout 2026, a 1440 px :
 *   table  table-layout: auto    <- ce que j'avais corrige
 *   thead  table-layout: FIXED   min-width: 1180px
 *   tbody  table-layout: FIXED   min-width: 1180px
 *
 *   1180 / 11 colonnes = 107,27 px   -  mesure sur la cellule : 107,266
 *
 * Cinq regles posees avant celle-ci s'adressaient toutes a la table
 * exterieure : elle n'avait plus la main.
 *
 * Au-dessus du seuil mobile SEULEMENT : sous 768 px, thead passe a none et
 * tbody a block - c'est l'empilement en fiches, et il doit rester.
 */
/*
 * RETIREE APRES MESURE - elle desalignait dix colonnes sur onze.
 *
 * thead et tbody sont DEUX TABLES SEPAREES. En "fixed" avec la meme largeur
 * imposee, elles calculent forcement les memes colonnes - egales, mais
 * ALIGNEES. En "auto", chacune calcule les siennes sur son propre contenu :
 *
 *   ecarts mesures entre le th Ùm son td : -5, -33, -20, +4, +15, +44,
 *   +20, -12, +4, -42 px  -  dix colonnes sur onze.
 *
 * Le vrai defaut est que thead et tbody soient des tables du tout ; le remede
 * serait de leur rendre table-header-group / table-row-group, pour qu'UNE
 * SEULE table calcule ses colonnes. En attente d'arbitrage : on prefere onze
 * colonnes egales et alignees a des colonnes justes et decalees.
 */


/*
 * UN SEUL ROUGE D'ALERTE SUR LE SITE.
 *
 * Releve du 8 aout 2026 : QUATRE rouges coexistaient.
 *
 *   #B3261E  notices, erreurs de formulaire, champs manquants, connexion
 *             echouee - contraste MESURE 5,9 : 1 sur blanc, documente
 *   #CB182D  le rappel "ne vendez pas, ne renvoyez pas", les certificats
 *   #CC3366  la couleur de lien par defaut - deja neutralisee
 *   #d63638  le signalement dans l'ADMINISTRATION WordPress
 *
 * La charte (bleu et blanc, 2 aout) gouverne la palette de MARQUE. Le rouge
 * d'alerte n'en est pas une : c'est une langue, et tout site qui a des
 * messages d'erreur en a une. Mais IL N'Y EN A QU'UNE.
 *
 * #B3261E gagne parce qu'elle est deja celle des notices, et que son
 * contraste a ete MESURE - pas choisi.
 *
 * Le #d63638 de l'administration reste : c'est le rouge de WordPress sur ses
 * propres ecrans, pas celui du portail.
 *
 * Et c'est le SEUL rouge autorise : un etat d'alerte, jamais un lien, jamais
 * un titre, jamais un ornement.
 */


/*
 * UNE SEULE TABLE CALCULE SES COLONNES.
 *
 * Lecture du 8 aout 2026 : thead et tbody etaient EUX-MEMES des tables, en
 * table-layout fixed avec une largeur imposee de 1180 px. 1180 / 11 = 107,27 -
 * et la cellule mesurait 107,266. Deux tables separees, donc onze colonnes
 * egales quel que soit leur contenu : "REORDER" s'ecrivait "REORDE".
 *
 * Premier essai ( table-layout: auto sur les deux ) : chacune calculait alors
 * LES SIENNES, sur son propre contenu - dix colonnes desalignees sur onze,
 * jusqu'a 44 px d'ecart. Regle retiree le jour meme.
 *
 * La vraie cause n'est pas leur algorithme, c'est QU'ELLES SOIENT DES TABLES.
 * Rendues a leur role natif - table-header-group et table-row-group - il n'y a
 * plus qu'UNE table, elle calcule ses colonnes une fois, et l'alignement
 * devient structurel au lieu d'etre force.
 *
 * Au-dessus du seuil mobile SEULEMENT : sous 768 px, thead passe a none et le
 * reste a block - c'est l'empilement en fiches, et il doit rester.
 */
@media (min-width: 768px){
  .woocommerce-MyAccount-content table thead,
  .eau808-table thead,
  .eau808-fac__table thead{
    display: table-header-group;
    width: auto;
    min-width: 0;
  }

  .woocommerce-MyAccount-content table tbody,
  .eau808-table tbody,
  .eau808-fac__table tbody{
    display: table-row-group;
    width: auto;
    min-width: 0;
  }
}

/* -------------------------------------------------------------------------
   Le champ de date du checkout : le masque ne doit pas s'ecrire SUR le libelle.

   Le checkout en blocs stylise ses champs PAR TYPE, et input[type="date"]
   n'est dans aucune de ses listes : il heritait d'un padding-top de 8px la ou
   ses voisins en ont 24. Or un champ date affiche TOUJOURS son masque
   (jj/mm/aaaa), meme vide - a l'ecran, le masque et le libelle flottant
   s'ecrivaient l'un sur l'autre.

   Les valeurs sont RELEVEES sur le champ voisin (Purchase-order number,
   rempli), pas choisies : padding-top 24px, hauteur 50px. Mesure du 8 aout 2026.
   ---------------------------------------------------------------------- */
.wc-block-components-text-input input[type="date"]{
  padding-top: 24px;
  padding-bottom: 6px;
  min-height: 50px;
}

/* La phrase du delai, sous le champ : meme voix que les autres notes du
   checkout ("Your order is delivered to the approved location..."). */
.eau808-ds__note{
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #00237d;
}