/* =============================================================
   Aplastic94 — Page "Mon compte" : écran de connexion/inscription
   ============================================================= */

/* En-tête et pied de page standard du site conservés (menus, footer). */
body.is-myaccount-guest .myaccount-main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.myaccount-guest {
  display: flex;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h, 129px));
  width: 100%;
}

/* ─── Colonne gauche : contenu de marque ──────────────────────────────── */
.myaccount-guest__left {
  flex: 1 1 46%;
  box-sizing: border-box;
  padding: 3rem clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* Doit rester au-dessus de .myaccount-guest__right (z-index 2) : cette
     colonne est en fait à sa gauche dans le flux, mais l'image (qui déborde
     largement vers la gauche depuis la colonne de droite) ne doit jamais
     passer par-dessus le texte ici — seul son fond opaque doit la masquer. */
  z-index: 3;
}

.myaccount-guest__headline {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--c-navy);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.myaccount-guest__intro {
  font-size: 1rem;
  color: var(--c-text-mid);
  line-height: 1.6;
  margin: 0 0 3.5rem;
  max-width: 440px;
}

.myaccount-guest__features {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin-bottom: 3.5rem;
}

.myaccount-guest__feature {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.myaccount-guest__feature-icon {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.myaccount-guest__feature-icon svg {
  width: 28px;
  height: 28px;
}

.myaccount-guest__feature-icon--teal {
  background: rgba(109, 183, 178, 0.18);
  color: var(--c-navy);
}

.myaccount-guest__feature-icon--fuchsia {
  background: rgba(215, 19, 97, 0.12);
  color: var(--c-fuchsia);
}

.myaccount-guest__feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.myaccount-guest__feature-body strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--c-navy);
}

.myaccount-guest__feature-body span {
  display: block;
  font-size: 0.85rem;
  color: var(--c-text-mid);
  line-height: 1.5;
  max-width: 260px;
}

.myaccount-guest__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  margin-top: 1rem;
}

.myaccount-guest__badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.myaccount-guest__badge-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--c-teal-text);
}

.myaccount-guest__badge-icon svg {
  width: 100%;
  height: 100%;
}

.myaccount-guest__badge-text {
  display: flex;
  flex-direction: column;
}

.myaccount-guest__badge-text strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--c-navy);
}

.myaccount-guest__badge-text span {
  font-size: 0.72rem;
  color: var(--c-text-mid);
}

/* ─── Image produit : grande, calée à gauche de la colonne droite (donc
   entièrement visible, pas cachée sous la colonne gauche) et derrière la
   carte (voir z-index) pour donner l'impression qu'elle en "sort" ────────── */
.myaccount-guest__image {
  position: absolute;
  top: 50%;
  left: -35%;
  transform: translateY(-50%);
  z-index: 1;
  width: 394px !important;
  height: 450px !important;
  max-width: none !important;
}

/* ─── Colonne droite : carte de connexion/inscription ─────────────────── */
.myaccount-guest__right {
  flex: 1 1 54%;
  box-sizing: border-box;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  position: relative;
  z-index: 2;
}

.myaccount-guest__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  background: var(--c-gray);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 10px 30px rgba(22, 38, 61, 0.08);
  padding: 3rem;
}

/* Neutralise le cadre par défaut que WooCommerce pose sur les formulaires
   (woocommerce-blocktheme.css) : un seul cadre visible, celui de la carte
   ci-dessus, pas un cadre imbriqué autour du <form> lui-même. */
.myaccount-guest__card .myaccount-guest__form-panel,
.myaccount-guest__card form {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.myaccount-guest__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-navy);
  margin: 0 0 0.5rem;
}

.myaccount-guest__switch {
  font-size: 0.9rem;
  color: var(--c-text-mid);
  margin: 0 0 1.5rem;
}

.myaccount-guest__switch a {
  color: var(--c-fuchsia);
  font-weight: 700;
  text-decoration: underline;
}

.myaccount-guest__divider {
  position: relative;
  text-align: center;
  margin: 0 0 1.75rem;
  border-top: 1.5px solid var(--c-text-light);
}

.myaccount-guest__divider span {
  position: relative;
  top: -0.7rem;
  background: var(--c-gray);
  padding: 0 0.75rem;
  font-size: 0.8rem;
  color: var(--c-text-mid);
}

.myaccount-guest__field {
  margin: 0 0 1.25rem;
}

.myaccount-guest__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 0.4rem;
}

.myaccount-guest__input-wrap {
  position: relative;
  display: block;
}

.myaccount-guest__input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius, 8px);
  font-size: 0.92rem;
  color: var(--c-navy);
}

.myaccount-guest__input-wrap input:focus {
  outline: none;
  border-color: var(--c-fuchsia);
}

.myaccount-guest__input-icon,
.myaccount-guest__toggle-pwd {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--c-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.myaccount-guest__toggle-pwd {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.myaccount-guest__toggle-pwd.is-visible {
  color: var(--c-fuchsia);
}

.myaccount-guest__input-icon svg,
.myaccount-guest__toggle-pwd svg {
  width: 100%;
  height: 100%;
}

.myaccount-guest__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.myaccount-guest__remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--c-text-mid);
}

.woocommerce-LostPassword.lost_password {
  font-size: 0.85rem;
  color: var(--c-fuchsia);
  font-weight: 700;
  text-decoration: none;
  margin: 0;
}

.woocommerce-LostPassword.lost_password:hover {
  text-decoration: underline;
}

.myaccount-guest__submit,
.myaccount-guest__submit.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--c-fuchsia);
  color: var(--c-white);
  border: none;
  border-radius: var(--radius, 8px);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--trans);
}

.myaccount-guest__submit svg {
  width: 18px;
  height: 18px;
}

.myaccount-guest__submit:hover {
  background: var(--c-navy);
}

.myaccount-guest__note {
  font-size: 0.82rem;
  color: var(--c-text-mid);
  margin: 0 0 1.5rem;
}

/* ─── Bandeau réassurance (bas de page, écran déconnecté uniquement) :
   même fond que le reste de l'écran (transparent), icônes plus grosses et
   colorées, séparateurs en trait vertical entre chaque item ────────────── */
.myaccount-guest__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  justify-content: center;
  background: transparent;
  padding: 1.75rem clamp(1.5rem, 4vw, 4rem) 2.5rem;
}

.myaccount-guest__footer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--c-text-mid);
  line-height: 1.5;
}

.myaccount-guest__footer-item strong {
  color: var(--c-navy);
  font-weight: 700;
}

.myaccount-guest__footer-sep {
  width: 1.5px;
  height: 32px;
  background: var(--c-text-light);
}

.myaccount-guest__footer-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.myaccount-guest__footer-icon--teal {
  color: var(--c-teal-text);
}

.myaccount-guest__footer-icon--fuchsia {
  color: var(--c-fuchsia);
}

.myaccount-guest__footer-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .myaccount-guest {
    flex-direction: column;
  }
  /* La carte de connexion doit être visible sans avoir à défiler : elle
     passe visuellement en premier (l'ordre du HTML ne change pas, seul
     l'ordre d'affichage change via flexbox). */
  .myaccount-guest__right {
    order: -1;
  }
  .myaccount-guest__image {
    display: none;
  }
  .myaccount-guest__footer {
    justify-content: flex-start;
  }
}

/* =============================================================
   Aplastic94 — Page "Mon compte" : tableau de bord connecté
   (menu + contenu, entièrement natif WooCommerce, sans template
   surchargé — voir woocommerce/myaccount/*.php du plugin)
   ============================================================= */

/* ─── Mise en page 2 colonnes (menu / contenu) ────────────────────────────
   Le shortcode [woocommerce_my_account] enveloppe TOUJOURS sa sortie dans
   <div class="woocommerce">, y compris côté déconnecté (le formulaire de
   connexion, dans .myaccount-guest__card) — ce wrapper commun n'est donc
   jamais stylé directement pour ne pas risquer de toucher l'écran de
   connexion ci-dessus. Colonne flottée (pas de grid/flex sur le parent
   partagé) : le menu flotte à gauche à largeur fixe, le contenu vient
   s'aligner à sa droite via une marge, technique volontairement basique
   pour ne dépendre d'aucun support CSS récent. Un clearfix sur .woocommerce
   évite que la colonne flottée ne déborde sous le pied de page si le menu
   est plus haut que le contenu.
   !important sur float/width/display/margin : WooCommerce charge son propre
   CSS classique (assets/css/woocommerce-layout.css, jamais désactivé par ce
   thème) qui pose déjà ".woocommerce-account .woocommerce-MyAccount-
   navigation{float:left;width:30%}" et "...-content{float:right;width:68%}"
   — un sélecteur à 2 classes, plus spécifique que le nôtre à 1 classe, qui
   l'emporterait sinon quel que soit l'ordre de chargement des feuilles. */
main[data-page="myaccount"] .woocommerce::after {
  content: '';
  display: table;
  clear: both;
}

/* WooCommerce (assets/css/woocommerce-blocktheme.css, chargée pour tout
   thème bloc) plafonne délibérément ".woocommerce-account main .woocommerce"
   à 1000px — pensé pour un compte à une seule colonne, pas pour notre mise
   en page menu + carte. On l'aligne sur la largeur max du site (1440px).
   Scopé à body:not(.is-myaccount-guest) pour ne jamais toucher l'écran de
   connexion, qui partage la même classe .woocommerce sur son propre wrapper
   (déjà plafonné à 600px par .myaccount-guest__card, donc sans effet ici
   de toute façon, mais on documente l'intention). */
body:not(.is-myaccount-guest) main[data-page="myaccount"] .woocommerce {
  max-width: 1440px !important;
}

/* ─── Menu latéral ─────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
  float: left !important;
  width: 260px !important;
  box-sizing: border-box;
  margin: 2.5rem 2rem 5rem 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-text-mid);
  text-decoration: none;
  transition: background var(--trans), color var(--trans);
}

.woocommerce-MyAccount-navigation-link a::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.woocommerce-MyAccount-navigation-link a:hover {
  background: var(--c-gray);
  color: var(--c-navy);
}

.woocommerce-MyAccount-navigation-link.is-active a {
  background: rgba(215, 19, 97, 0.08);
  color: var(--c-fuchsia);
}

/* "Se déconnecter" : détaché visuellement du reste du menu par un séparateur,
   couleur neutre au repos (ce n'est pas une page comme les autres). */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--c-border);
}

/* Icônes par point de menu, technique CSS mask (cohérent avec les icônes de
   moyens de paiement de checkout.css) : un seul SVG par item, coloré via
   currentColor donc il suit automatiquement l'état hover/actif ci-dessus. */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5Z'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8l9 5 9-5Z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8l9 5 9-5Z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 0 0 5 9.5C5 14.5 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 0 0 5 9.5C5 14.5 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M6 14h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M6 14h4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h9'/%3E%3Cpath d='M10 12h11'/%3E%3Cpath d='m18 8 4 4-4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h9'/%3E%3Cpath d='M10 12h11'/%3E%3Cpath d='m18 8 4 4-4 4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(215, 19, 97, 0.06);
  color: var(--c-fuchsia);
}

/* ─── Carte de contenu ─────────────────────────────────────────────────── */
/* display:flow-root établit un nouveau contexte de bloc : l'élément se cale
   automatiquement à côté du menu flottant et occupe tout l'espace restant,
   sans avoir à deviner sa largeur exacte en dur (contrairement à un
   margin-left calculé à la main, fragile au moindre écart). */
.woocommerce-MyAccount-content {
  display: flow-root !important;
  float: none !important;
  width: auto !important;
  margin: 2.5rem 0 5rem !important;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.25rem 2.5rem;
}

/* Titre de section injecté en PHP (voir woocommerce_account_content dans
   functions.php) : le natif WooCommerce n'affiche aucun titre de page. */
.woocommerce-MyAccount-content-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-navy);
  margin: 0 0 1.5rem;
}

/* Bouton "Retour" éventuel + paragraphes d'intro (tableau de bord, ex :
   "Bonjour X (vous n'êtes pas X ? Déconnexion)"). */
.woocommerce-MyAccount-content > p {
  font-size: 0.95rem;
  color: var(--c-text-mid);
  line-height: 1.7;
  margin: 0 0 1.25rem;
  max-width: 640px;
}

.woocommerce-MyAccount-content > p strong {
  color: var(--c-navy);
}

.woocommerce-MyAccount-content a {
  color: var(--c-fuchsia);
  font-weight: 700;
  text-decoration: none;
}

.woocommerce-MyAccount-content a:hover {
  text-decoration: underline;
}

.woocommerce-MyAccount-content h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-navy);
  margin: 0 0 1rem;
}

/* ─── Notices (classic : .woocommerce-message / -error / -info) ──────────
   Imprimées par le bloc "wp:woocommerce/store-notices" du gabarit de page
   (voir templates/page-my-account.html), qui appelle wc_print_notices() —
   donc le HTML classique, pas les bannières de bloc utilisées côté panier
   (voir main.css .wc-block-components-notice-banner). Même traitement
   visuel (carte + liseré coloré) pour rester cohérent. */
main[data-page="myaccount"] .woocommerce-message,
main[data-page="myaccount"] .woocommerce-error,
main[data-page="myaccount"] .woocommerce-info {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  list-style: none;
  background: var(--c-white);
  color: var(--c-text);
  border-left: 4px solid var(--c-teal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}

main[data-page="myaccount"] .woocommerce-error {
  border-left-color: var(--c-fuchsia);
}

main[data-page="myaccount"] .woocommerce-error li {
  list-style: none;
}

main[data-page="myaccount"] .woocommerce-message .button,
main[data-page="myaccount"] .woocommerce-info .button {
  margin-left: auto;
}

/* Certaines notices (ex : "Confirmez votre adresse e-mail") sont rendues en
   bannière de bloc même dans ce contexte classique — même traitement que
   .is-success de main.css (notice panier), déclinaison "info" en teal. */
main[data-page="myaccount"] .wc-block-components-notice-banner.is-info {
  position: relative !important;
  display: flex !important;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--c-white) !important;
  color: var(--c-text) !important;
  border: none !important;
  border-left: 4px solid var(--c-teal) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem !important;
  margin: 0 0 1.5rem !important;
  list-style: none;
  font-size: 0.88rem;
}

main[data-page="myaccount"] .wc-block-components-notice-banner.is-info svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: var(--c-teal-text);
}

main[data-page="myaccount"] .wc-block-components-notice-banner.is-info .button {
  display: inline-flex;
  margin: 0.6rem 0.6rem 0 0;
  padding: 0.4rem 0.9rem !important;
  background: var(--c-fuchsia) !important;
  color: var(--c-white) !important;
  font-size: 0.82rem;
  font-weight: 600;
  border: none !important;
  border-radius: var(--radius);
  text-decoration: none !important;
}

/* ─── Boutons ─────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content .button,
main[data-page="myaccount"] .woocommerce-message .button,
main[data-page="myaccount"] .woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.25rem;
  background: var(--c-fuchsia);
  color: var(--c-white) !important;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--trans);
}

.woocommerce-MyAccount-content .button:hover,
main[data-page="myaccount"] .woocommerce-message .button:hover,
main[data-page="myaccount"] .woocommerce-info .button:hover {
  background: var(--c-navy);
}

/* Actions secondaires (Annuler, Précédent...) : cadre discret plutôt que
   fuchsia plein, pour ne pas concurrencer l'action principale de la page. */
.woocommerce-MyAccount-content .button.cancel,
.woocommerce-MyAccount-content .button.woocommerce-Button--previous,
.woocommerce-MyAccount-content .button.woocommerce-button--previous {
  background: var(--c-white);
  color: var(--c-navy) !important;
  border: 1.5px solid var(--c-border);
}

.woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-MyAccount-content .button.woocommerce-Button--previous:hover,
.woocommerce-MyAccount-content .button.woocommerce-button--previous:hover {
  background: var(--c-gray);
  color: var(--c-navy) !important;
}

/* ─── Tableaux (commandes, téléchargements, moyens de paiement) ──────────
   Toutes les tables .shop_table_responsive partagent le même habillage :
   sans bordures de cellule "à l'ancienne", lignes séparées par un simple
   filet, en-têtes discrets. Préfixe main[data-page="myaccount"] + !important
   sur les propriétés qui ont un équivalent dans woocommerce.css (bordure,
   arrondi, marge, alignement) : ce fichier plugin cible déjà ".woocommerce
   table.shop_table" avec la même spécificité que nos règles sans préfixe —
   un pur hasard d'ordre de chargement déciderait sinon du gagnant. */
main[data-page="myaccount"] .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border: none !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  margin: 0 0 1.5rem !important;
  font-size: 0.88rem;
}

main[data-page="myaccount"] .woocommerce-MyAccount-content table.shop_table th,
main[data-page="myaccount"] .woocommerce-MyAccount-content table.shop_table td {
  padding: 0.9rem 0.75rem;
  text-align: left !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--c-border) !important;
}

main[data-page="myaccount"] .woocommerce-MyAccount-content table.shop_table thead th {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-mid);
  border-bottom: 1.5px solid var(--c-border) !important;
}

main[data-page="myaccount"] .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th,
main[data-page="myaccount"] .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
  border-bottom: none !important;
}

.woocommerce-MyAccount-content table.shop_table td a:not(.button),
.woocommerce-MyAccount-content table.shop_table th a:not(.button) {
  color: var(--c-navy);
}

.woocommerce-MyAccount-content table.shop_table td a:not(.button):hover,
.woocommerce-MyAccount-content table.shop_table th a:not(.button):hover {
  color: var(--c-fuchsia);
}

.woocommerce-MyAccount-content table.shop_table .button {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  margin: 0.15rem 0.35rem 0.15rem 0;
}

/* Pastille de statut de commande, colorée selon l'état (classe posée par
   WooCommerce sur la ligne : woocommerce-orders-table__row--status-{slug}). */
.woocommerce-orders-table__cell-order-status {
  font-weight: 700;
}

.woocommerce-orders-table__cell-order-status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--c-text-light);
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
  color: var(--c-teal-text);
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before {
  background: var(--c-teal);
}

.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
  color: #B8860B;
}

.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before {
  background: var(--c-gold);
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
  color: var(--c-fuchsia);
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before {
  background: var(--c-fuchsia);
}

/* ─── Pagination ───────────────────────────────────────────────────────── */
.woocommerce-Pagination {
  display: flex;
  gap: 0.75rem;
  margin: 0;
}

.woocommerce-Pagination .button {
  background: var(--c-white);
  color: var(--c-navy) !important;
  border: 1.5px solid var(--c-border);
}

.woocommerce-Pagination .button:hover {
  background: var(--c-gray);
}

/* ─── Adresses (liste) ─────────────────────────────────────────────────── */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.woocommerce-Address {
  background: var(--c-gray);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.85rem;
}

.woocommerce-Address-title h2 {
  margin: 0;
}

.woocommerce-Address-title .edit {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-fuchsia);
}

.woocommerce-Address address {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--c-text-mid);
  line-height: 1.7;
}

/* ─── Formulaires (édition d'adresse / de compte) ─────────────────────────
   Style aligné sur .myaccount-guest__field de l'écran de connexion, sans
   icône (ces champs n'en ont pas côté formulaire natif). */
.woocommerce-MyAccount-content form .form-row,
.woocommerce-MyAccount-content fieldset p {
  margin: 0 0 1.25rem;
}

.woocommerce-MyAccount-content form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 0.4rem;
}

.woocommerce-MyAccount-content form label .required {
  color: var(--c-fuchsia);
  text-decoration: none;
}

.woocommerce-MyAccount-content form .input-text,
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--c-navy);
  background: var(--c-white);
}

.woocommerce-MyAccount-content form .input-text:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus {
  outline: none;
  border-color: var(--c-fuchsia);
}

.woocommerce-MyAccount-content form span[id$="_description"] {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--c-text-mid);
  font-style: normal;
}

.woocommerce-MyAccount-content fieldset {
  border: none;
  padding: 1.5rem 0 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--c-border);
}

.woocommerce-MyAccount-content fieldset legend {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-navy);
  padding: 0 0 1rem;
}

/* Sélecteur de pays (select2, chargé par wc-country-select) : même
   habillage que les champs texte, remplace le cadre par défaut du plugin. */
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  height: auto;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
}

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.3;
  color: var(--c-navy);
}

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.5rem;
}

.woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-fuchsia);
}

/* ─── Vue d'une commande (woocommerce/myaccount/view-order.php) ──────────── */
.woocommerce-MyAccount-content p mark.order-number,
.woocommerce-MyAccount-content p mark.order-date,
.woocommerce-MyAccount-content p mark.order-status {
  background: none;
  font-weight: 800;
  color: var(--c-navy);
}

.woocommerce-order-details__title,
.woocommerce-order-downloads__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-navy);
  margin: 2rem 0 1rem;
}

.woocommerce-order-details__title:first-child,
.woocommerce-order-downloads__title:first-child {
  margin-top: 0;
}

.woocommerce-table--order-details .product-name a {
  color: var(--c-navy);
  font-weight: 700;
}

.woocommerce-table--order-details .product-quantity {
  color: var(--c-text-mid);
  font-weight: 400;
}

.woocommerce-table--order-details tfoot th {
  text-align: left;
  font-weight: 600;
  color: var(--c-text-mid);
}

.woocommerce-table--order-details tfoot td {
  text-align: right;
  font-weight: 700;
  color: var(--c-navy);
}

.order-actions--heading {
  vertical-align: top;
  padding-top: 1.1rem !important;
}

.order-actions-button {
  margin: 0 0.5rem 0.5rem 0;
}

.order-again {
  margin: 1.5rem 0 0;
}

/* Coordonnées client (adresses de facturation / livraison sous le détail
   de la commande) : deux colonnes, même traitement visuel que la liste des
   adresses ci-dessus mais sans le fond gris (déjà dans la carte contenu). */
.woocommerce-customer-details {
  margin-top: 2rem;
}

.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.woocommerce-column__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--c-navy);
  margin: 0 0 0.6rem;
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--c-text-mid);
  line-height: 1.7;
}

/* Notes de suivi de commande */
.woocommerce-OrderUpdates {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.woocommerce-OrderUpdate-inner {
  background: var(--c-gray);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}

.woocommerce-OrderUpdate-meta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-text-mid);
  margin: 0 0 0.35rem;
}

.woocommerce-OrderUpdate-description p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--c-navy);
}

/* ─── Téléchargements (liste, version historique .digital-downloads) ─────── */
.woocommerce-Downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.woocommerce-Downloads li {
  padding: 0.9rem 1.1rem;
  background: var(--c-gray);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.woocommerce-Count {
  color: var(--c-text-mid);
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
    position: static;
    margin: 1.5rem 0 1.25rem;
    padding: 0.75rem;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .woocommerce-MyAccount-navigation-link {
    flex: 1 1 auto;
  }

  .woocommerce-MyAccount-navigation-link a {
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .woocommerce-MyAccount-content {
    margin: 0 0 3.5rem !important;
    padding: 1.5rem;
  }

  .woocommerce-Addresses,
  .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .woocommerce-MyAccount-content table.shop_table_responsive thead {
    display: none;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive tbody tr,
  .woocommerce-MyAccount-content table.shop_table_responsive tfoot tr {
    display: block;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    margin: 0 0 1rem;
    padding: 0.25rem 1rem;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td,
  .woocommerce-MyAccount-content table.shop_table_responsive th {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    border-bottom: 1px solid var(--c-border) !important;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive tr > :last-child {
    border-bottom: none !important;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td::before,
  .woocommerce-MyAccount-content table.shop_table_responsive th::before {
    content: attr(data-title);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-mid);
    text-align: left;
  }
}