/*
Theme Name:  Serena Beauty
Theme URI:   https://serenabeautyshop.com/
Description: Thème enfant de Twenty Twenty-Five portant la charte graphique de
             Serena Beauty Shop. Les couleurs, les typographies et l'échelle
             d'espacement sont définies dans theme.json ; cette feuille ne
             traite que ce que theme.json ne sait pas exprimer.
Author:      HMH Fusion
Template:    twentytwentyfive
Version:     0.8.3
Text Domain: serena
License:     GPL-2.0-or-later
*/

/* ---------------------------------------------------------------------------
   Rappel de la charte — les valeurs font foi dans theme.json, reprises ici en
   variables CSS pour les règles ci-dessous et pour le CSS de WooCommerce, qui
   ne lit pas les préréglages du thème.
   Source : LISEZ-MOI-Shopify.md, section 2.
   --------------------------------------------------------------------------- */
:root {
  --serena-ground:      #FFFFFF;
  --serena-ink:         #0F0F0F;
  --serena-ink-2:       #5B5B5B;
  --serena-ink-3:       #A89F99;
  --serena-accent:      #C89BA0;
  --serena-accent-soft: #E8CFCF;
  --serena-alt:         #F7F1EE;
  --serena-rule:        #EDEDED;
  --serena-product-bg:  #F5F0EC;
  --serena-blush:       #ECDCD9;
  --serena-ink-4:       #8A827D;

  --serena-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serena-body:    'Jost', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}

/* ---------------------------------------------------------------------------
   Conventions typographiques
   Libellés de boutons et de navigation : majuscules, 11-12 px, interlettrage
   1,5 à 2,5 px. Titres de page : Cormorant 500, 40-46 px. Corps : Jost 300,
   14-16 px, interligne 1,7.
   --------------------------------------------------------------------------- */
body {
  font-family: var(--serena-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--serena-ink);
  background: var(--serena-ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading {
  font-family: var(--serena-display);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

/* Le libellé en capitales espacées : navigation, boutons, éléments d'interface. */
.serena-label,
.wp-block-navigation .wp-block-navigation-item__content,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--serena-body);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

::selection {
  background: var(--serena-accent-soft);
  color: var(--serena-ink);
}

/* ---------------------------------------------------------------------------
   Boutons — noir plein, bascule sur le rose poudré au survol.
   La règle vise les boutons WooCommerce, que theme.json ne couvre pas.
   --------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
  background: var(--serena-ink);
  color: var(--serena-ground);
  border: 1px solid var(--serena-ink);
  border-radius: 0;
  padding: 14px 28px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--serena-accent-soft);
  color: var(--serena-ink);
  border-color: var(--serena-accent-soft);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.wc-block-components-button:focus-visible {
  outline: 2px solid var(--serena-accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Prix — le prix barré passe en gris tertiaire, le prix promotionnel en rose.
   --------------------------------------------------------------------------- */
.woocommerce .price,
.wc-block-components-product-price {
  font-family: var(--serena-body);
  font-weight: 400;
  color: var(--serena-ink);
}

.woocommerce .price del,
.wc-block-components-product-price del {
  color: var(--serena-ink-3);
  opacity: 1;
  font-weight: 300;
}

.woocommerce .price ins,
.wc-block-components-product-price ins {
  color: var(--serena-accent);
  text-decoration: none;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Cartes produit — fond crème derrière la photo, pas d'ombre, pas d'arrondi.
   La maquette pose un rectangle net sur fond #F5F0EC.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
  background: var(--serena-product-bg);
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--serena-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 1.5;
}

/* Le badge « Promo » de WooCommerce reprend l'accent de la charte. */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
  background: var(--serena-accent);
  color: var(--serena-ground);
  border-radius: 0;
  font-family: var(--serena-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Champs de formulaire — filets discrets, pas d'arrondi.
   --------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  font-family: var(--serena-body);
  font-weight: 300;
  border: 1px solid var(--serena-rule);
  border-radius: 0;
  padding: 12px 14px;
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--serena-ink);
  outline: none;
}

::placeholder { color: var(--serena-ink-3); opacity: 1; }

/* ---------------------------------------------------------------------------
   Bandes alternées et filets
   --------------------------------------------------------------------------- */
.serena-band { background: var(--serena-alt); }

hr.wp-block-separator,
.woocommerce-tabs,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--serena-rule);
}

/* ---------------------------------------------------------------------------
   Accessibilité — respecter la préférence de mouvement réduit.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Fidélité à la maquette « Serena Beauty.dc.html »
   Ce qui suit reprend les valeurs du fichier de design, section par section.
   Les mesures ne sont pas approximatives : elles sont relevées dans la
   maquette. Les textes, eux, ne viennent pas de la maquette — voir les
   commentaires des gabarits.
   --------------------------------------------------------------------------- */

/* Bandeau d'annonce — noir pleine largeur, au-dessus de l'en-tête. */
.serena-annonce {
  background: var(--serena-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1.5px;
  padding: 10px 16px;
  text-align: center;
}
.serena-annonce p { margin: 0; }

/* En-tête — blanc, collant, filet bas. Hauteur 82 px dans la maquette. */
.serena-entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--serena-ground);
  border-bottom: 1px solid var(--serena-rule);
}
.serena-entete .wp-block-navigation .wp-block-navigation-item__content {
  font-size: 12.5px;
  letter-spacing: 1.3px;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.serena-entete .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.serena-entete .wp-block-navigation .wp-block-navigation-item__content:hover {
  border-bottom-color: var(--serena-ink);
}

/* Le bloc-marque : carré noir arrondi + mot-symbole SERENA·BEAUTY. */
.serena-marque { gap: 11px !important; }
/* Le fichier de marque porte son propre fond noir : l'image remplit le carré
   arrondi de bord à bord, sans marge intérieure. Le noir du thème reste
   déclaré dessous, au cas où le logo serait un jour remplacé par un PNG
   transparent. */
.serena-marque-lien {
  display: block;
  flex: none;
  line-height: 0;
}
.serena-marque-lien img {
  width: 50px;
  height: 50px;
  border-radius: 11px;
  background: var(--serena-ink);
  object-fit: cover;
  display: block;
}

/* Réseaux sociaux du pied de page : pastilles cerclées de 34 px (maquette). */
.serena-social { display: flex; gap: 14px; margin-top: 20px; }
.serena-social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C7BDB5;
  transition: color .15s ease, border-color .15s ease;
}
.serena-social a:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* Le logo du pied de page, sur le noir du bandeau — 78 px comme la maquette. */
.serena-logo-pied {
  display: block;
  line-height: 0;
  margin-bottom: 14px;
}
.serena-logo-pied img {
  width: 78px;
  height: auto;
  border-radius: 8px;
  display: block;
}
.serena-marque .wp-block-site-title a {
  font-family: var(--serena-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--serena-ink);
  text-decoration: none;
}

/* Héros — deux colonnes 1fr / 1.1fr, 520 px de haut, fond crème. */
.serena-heros { background: var(--serena-alt); min-height: 520px; }
/* Les colonnes doivent porter elles-mêmes la hauteur de la bande : sinon la
   rangée se cale sur le texte et le visuel s'arrête avant le bas. */
.serena-heros .wp-block-columns {
  gap: 0;
  align-items: stretch;
  min-height: 520px;
  margin: 0;
}
.serena-heros .serena-heros-visuel {
  background: var(--serena-blush, #ECDCD9);
  align-self: stretch;
}
.serena-heros .serena-heros-visuel img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}
.serena-heros h1 {
  font-family: var(--serena-body);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Le libellé de rubrique : petites capitales roses au-dessus d'un titre. */
.serena-kicker {
  color: var(--serena-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Titre de section centré, souligné d'un trait court — motif de la maquette. */
.serena-titre-section {
  font-family: var(--serena-body);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}
.serena-trait::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--serena-ink);
  margin: 12px auto 0;
}

/* Bande des univers — pastilles rondes, six par rangée. */
.serena-univers ul.wc-block-product-categories-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.serena-univers ul.wc-block-product-categories-list li { margin: 0; }
.serena-univers .wc-block-product-categories-list-item a {
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
}
/* WooCommerce enveloppe la vignette dans un <span> en ligne : sans le passer
   en bloc, la largeur de 100 % se calcule sur un conteneur nul et la pastille
   se réduit à quelques pixels, le nom venant se coller à côté. */
.serena-univers .wc-block-product-categories-list-item > a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* WooCommerce fixe la vignette à 50 x 50 px depuis sa propre feuille, chargée
   après celle du thème. On reprend la main par la spécificité — trois classes
   contre une — plutôt qu'à coups de !important. */
.serena-univers .wc-block-product-categories-list-item > a > .wc-block-product-categories-list-item__image {
  display: block;
  width: 100%;
  height: auto;
  /* WooCommerce borne la vignette par un max-width de 50 px : sans le lever,
     la largeur de 100 % reste clampée et la pastille garde sa taille d'icône. */
  max-width: none;
  max-height: none;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--serena-blush, #ECDCD9);
  margin-bottom: 14px;
}
.serena-univers .wc-block-product-categories-list-item > a > .wc-block-product-categories-list-item__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.serena-univers .wc-block-product-categories-list-item__name {
  display: block;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .serena-univers ul.wc-block-product-categories-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .serena-univers ul.wc-block-product-categories-list { grid-template-columns: repeat(2, 1fr); }
}

/* Bandeau éditorial — visuel pleine largeur, encart blanc translucide dessus. */
.serena-editorial { position: relative; min-height: 360px; background: var(--serena-blush, #ECDCD9); overflow: hidden; }
.serena-editorial .serena-editorial-fond img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.serena-editorial > .wp-block-cover__inner-container { padding: 0 8vw; }
/* Le bloc « Bannière » de WordPress force le texte en blanc : illisible sur
   l'encart clair de la maquette. On le ramène à l'encre de la charte. */
.serena-editorial .serena-editorial-encart,
.serena-editorial .serena-editorial-encart h2,
.serena-editorial .serena-editorial-encart p,
.serena-editorial .serena-editorial-encart a { color: var(--serena-ink); }
.serena-editorial .serena-editorial-encart .serena-kicker { color: var(--serena-accent); }
.serena-editorial .serena-editorial-encart p.has-ink-2-color { color: var(--serena-ink-2); }
.serena-editorial-encart {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .9);
  padding: 44px 42px;
  max-width: 560px;
  margin-left: 0;
}

/* Carte produit — cadre crème, badge, titre, prix, bouton pleine largeur. */
.serena-grille-produits .wc-block-product,
.serena-grille-produits .wp-block-post {
  background: var(--serena-ground);
}
.serena-grille-produits .wc-block-components-product-image,
.serena-grille-produits .wp-block-woocommerce-product-image {
  position: relative;
  background: var(--serena-product-bg);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 16px;
}
.serena-grille-produits .wc-block-components-product-image img,
.serena-grille-produits .wp-block-woocommerce-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.serena-grille-produits .wc-block-components-product-title,
.serena-grille-produits .wp-block-post-title {
  font-family: var(--serena-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--serena-ink-2);
  min-height: 38px;
  margin: 0 0 10px;
}
.serena-grille-produits .wp-block-post-title a { color: var(--serena-ink-2); text-decoration: none; }
.serena-grille-produits .wc-block-components-product-price { font-size: 15px; }
.serena-grille-produits .wp-block-button__link,
.serena-grille-produits .wc-block-components-product-button .wc-block-components-product-button__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0;
  background: var(--serena-ink);
  color: var(--serena-ground);
  border: 1px solid var(--serena-ink);
  border-radius: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.serena-grille-produits .wc-block-components-product-button .wc-block-components-product-button__button:hover {
  background: var(--serena-accent-soft);
  color: var(--serena-ink);
  border-color: var(--serena-accent-soft);
}

/* Bandeau de réassurance — cinq colonnes, pictogramme rose à gauche. */
.serena-reassurance { border-top: 1px solid var(--serena-rule); }
.serena-reassurance .serena-item { display: flex; align-items: center; gap: 13px; }
.serena-reassurance .serena-item svg { flex: none; stroke: var(--serena-accent); }
.serena-reassurance .serena-item strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.serena-reassurance .serena-item span {
  font-size: 12px;
  font-weight: 300;
  color: var(--serena-ink-4, #8A827D);
}

/* Pied de page — noir, quatre colonnes, liens gris chaud. */
.serena-pied {
  background: var(--serena-ink);
  color: #fff;
}
.serena-pied h2, .serena-pied h3, .serena-pied h4, .serena-pied .wp-block-heading {
  color: var(--serena-accent-soft);
  font-family: var(--serena-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.serena-pied .wp-block-site-title a { color: #fff; }
.serena-pied p, .serena-pied li { color: #9A938E; font-size: 13px; font-weight: 300; }
.serena-pied a { color: #C7BDB5; text-decoration: none; }
.serena-pied a:hover { color: #fff; }
.serena-pied ul { list-style: none; margin: 0; padding: 0; }
.serena-pied ul li { margin-bottom: 11px; }
.serena-pied .serena-pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #7A726D;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .5px;
}
.serena-pied .serena-pied-bas p { color: #7A726D; font-size: 11px; margin: 0; }

/* ---------------------------------------------------------------------------
   Page collection et fiche produit — d'après la maquette.
   --------------------------------------------------------------------------- */

/* Le fil d'Ariane de WooCommerce : petites capitales grises, comme la maquette. */
.serena-collection .wc-block-breadcrumbs,
.serena-fiche .wc-block-breadcrumbs { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

/* Le tri, à droite entre deux filets. */
.serena-barre-tri { width: 100%; }
.serena-barre-tri select {
  font-family: var(--serena-body);
  font-size: 12px;
  border: 1px solid var(--serena-rule);
  border-radius: 0;
  padding: 8px 12px;
}

/* Fiche produit : la galerie suit le défilement, le détail reste lisible. */
@media (min-width: 782px) {
  .serena-fiche-visuel { position: sticky; top: 100px; align-self: flex-start; }
}
.serena-fiche-visuel .wp-block-woocommerce-product-image-gallery img { background: var(--serena-product-bg); }

/* Le bouton « Ajouter au panier » de la fiche : 54 px de haut, pleine largeur
   à côté du sélecteur de quantité, comme la maquette. */
.serena-fiche .cart button.single_add_to_cart_button {
  flex: 1;
  height: 54px;
  padding: 0 28px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.serena-fiche form.cart { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.serena-fiche .quantity input.qty {
  height: 54px;
  width: 90px;
  border: 1px solid #D8D0CA;
  border-radius: 0;
  text-align: center;
  font-family: var(--serena-body);
}

/* Onglets de description : filets de la charte, libellés en capitales. */
.serena-fiche .woocommerce-tabs ul.tabs li a {
  font-family: var(--serena-body);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Espace client
   Deux écrans dans un seul gabarit. WordPress pose « logged-in » sur le corps
   de page : c'est ce qui distingue la page de connexion du tableau de bord.
   --------------------------------------------------------------------------- */

.serena-compte .woocommerce { margin: 0; }

/* --- Écran de connexion : colonne unique de 440 px, centrée (maquette) --- */
body:not(.logged-in) .serena-compte {
  max-width: 520px;   /* 440 px de contenu + les 40 px de marge de chaque côté */
  margin-inline: auto;
}
body:not(.logged-in) .serena-compte .serena-compte-titre,
body:not(.logged-in) .serena-compte .serena-compte-sous { text-align: center; }

/* WooCommerce coiffe le formulaire d'un « Se connecter » en titre de niveau 2.
   Registration ouverte, il est enveloppé dans .u-columns ; fermée, il ne l'est
   pas — d'où les deux sélecteurs. */
.serena-compte .woocommerce > h2,
body:not(.logged-in) .serena-compte .u-columns h2 {
  font-family: var(--serena-body);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-align: center;
  color: var(--serena-ink-2);
  margin: 0 0 20px;
}

/* Connecté, le sous-titre n'a plus d'objet. */
body.logged-in .serena-compte-sous { display: none; }

.serena-compte form.woocommerce-form-login,
.serena-compte form.woocommerce-form-register,
.serena-compte form.woocommerce-ResetPassword {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.serena-compte .woocommerce-form-row,
.serena-compte form .form-row { padding: 0; margin: 0 0 14px; }
.serena-compte form label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--serena-ink-2);
  margin-bottom: 7px;
}
.serena-compte form .woocommerce-form-login__rememberme,
.serena-compte form label.woocommerce-form__label-for-checkbox {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 300;
}
.serena-compte form input.input-text,
.serena-compte form input[type="text"],
.serena-compte form input[type="email"],
.serena-compte form input[type="password"],
.serena-compte form input[type="tel"],
.serena-compte form select {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--serena-rule);
  border-radius: 0;
  font-family: var(--serena-body);
  font-weight: 300;
  font-size: 15px;
  background: var(--serena-ground);
}
.serena-compte form input:focus,
.serena-compte form select:focus { border-color: var(--serena-ink); outline: none; }

.serena-compte form button.woocommerce-button,
.serena-compte form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 18px;
  background: var(--serena-ink);
  color: var(--serena-ground);
  border: 1px solid var(--serena-ink);
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.serena-compte form button[type="submit"]:hover {
  background: var(--serena-accent-soft);
  color: var(--serena-ink);
  border-color: var(--serena-accent-soft);
}

.serena-compte .woocommerce-LostPassword {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
}
.serena-compte .woocommerce-LostPassword a {
  color: var(--serena-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--serena-rule);
}
.serena-compte .woocommerce-LostPassword a:hover { color: var(--serena-ink); border-bottom-color: var(--serena-ink); }

/* Connexion et création de compte : deux colonnes chez WooCommerce, empilées
   ici, séparées d'un filet — la maquette ne montre qu'un lien discret. */
body:not(.logged-in) .serena-compte .u-columns > .col-1,
body:not(.logged-in) .serena-compte .u-columns > .col-2 { width: 100%; float: none; }
body:not(.logged-in) .serena-compte .u-columns > .col-2 {
  border-top: 1px solid var(--serena-rule);
  margin-top: 34px;
  padding-top: 30px;
}
/* --- Tableau de bord : navigation à gauche, contenu à droite --- */
body.logged-in .serena-compte { max-width: 1180px; margin-inline: auto; }

@media (min-width: 782px) {
  body.logged-in .serena-compte .woocommerce {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 40px;
  }
}
.serena-compte .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.serena-compte .woocommerce-MyAccount-navigation li { margin: 0; }
.serena-compte .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 0 13px 14px;
  border-left: 2px solid transparent;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--serena-ink-2);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.serena-compte .woocommerce-MyAccount-navigation li a:hover { color: var(--serena-ink); }
.serena-compte .woocommerce-MyAccount-navigation li.is-active a {
  border-left-color: var(--serena-accent);
  color: var(--serena-ink);
}
.serena-compte .woocommerce-MyAccount-navigation li--woocommerce-logout a { color: var(--serena-ink-3); }

.serena-compte .woocommerce-MyAccount-content > h2,
.serena-compte .woocommerce-MyAccount-content > h3 {
  font-family: var(--serena-display);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 18px;
}

/* Les trois portes d'entrée du tableau de bord. */
.serena-compte-bonjour { font-size: 16px; font-weight: 300; margin: 0 0 26px; }
.serena-compte-bonjour strong { font-weight: 400; }
.serena-compte-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.serena-compte-carte {
  display: block;
  padding: 24px 22px;
  border: 1px solid var(--serena-rule);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.serena-compte-carte:hover { border-color: var(--serena-ink); background: var(--serena-alt); }
.serena-compte-carte-titre {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--serena-ink);
  margin-bottom: 9px;
}
.serena-compte-carte-texte {
  display: block;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--serena-ink-2);
}
.serena-compte-sortie {
  margin: 30px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--serena-ink-3);
}
.serena-compte-sortie a {
  color: var(--serena-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--serena-rule);
}
.serena-compte-sortie a:hover { color: var(--serena-ink); border-bottom-color: var(--serena-ink); }

/* Tableau des commandes : filets de la charte, en-têtes en capitales. */
.serena-compte table.woocommerce-orders-table,
.serena-compte table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
}
.serena-compte table.shop_table th {
  border: 0;
  border-bottom: 1px solid var(--serena-ink);
  padding: 0 12px 12px 0;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.serena-compte table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--serena-rule);
  padding: 18px 12px 18px 0;
  font-size: 14px;
  font-weight: 300;
  vertical-align: middle;
}
.serena-compte table.shop_table td:last-child,
.serena-compte table.shop_table th:last-child { padding-right: 0; text-align: right; }

/* Adresses : deux cartes côte à côte. */
.serena-compte .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.serena-compte .woocommerce-Address { width: auto; float: none; border: 1px solid var(--serena-rule); padding: 24px 22px; }
.serena-compte .woocommerce-Address-title h2,
.serena-compte .woocommerce-Address-title h3 { font-size: 20px; margin: 0 0 12px; }
.serena-compte .woocommerce-Address address { font-style: normal; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--serena-ink-2); }
.serena-compte .woocommerce-Address .edit {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--serena-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--serena-ink);
  padding-bottom: 2px;
}
.serena-compte .woocommerce-Address .edit:hover { color: var(--serena-accent); border-bottom-color: var(--serena-accent); }

/* Le bouton « Voir » du tableau des commandes : discret et compact, il ne doit
   pas peser autant qu'un bouton d'achat. */
.serena-compte table.shop_table .button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  background: transparent;
  color: var(--serena-ink);
  border: 1px solid var(--serena-rule);
  border-radius: 0;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.serena-compte table.shop_table .button:hover {
  background: var(--serena-ink);
  color: var(--serena-ground);
  border-color: var(--serena-ink);
}

/* Messages et états vides. */
.serena-compte .woocommerce-message,
.serena-compte .woocommerce-info,
.serena-compte .woocommerce-error {
  border: 1px solid var(--serena-rule);
  border-top: 2px solid var(--serena-accent);
  background: var(--serena-alt);
  border-radius: 0;
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 300;
  color: var(--serena-ink);
  list-style: none;
}
.serena-compte .woocommerce-error { border-top-color: #B4483F; }
.serena-compte .woocommerce-info::before,
.serena-compte .woocommerce-message::before,
.serena-compte .woocommerce-error::before { content: none; }
.serena-compte .woocommerce-info .button,
.serena-compte .woocommerce-message .button { float: none; margin-left: 14px; }

/* Le formulaire de coordonnées reprend la largeur du contenu, pas 440 px. */
body.logged-in .serena-compte form.woocommerce-EditAccountForm button[type="submit"],
body.logged-in .serena-compte form.edit-account button[type="submit"],
body.logged-in .serena-compte .woocommerce-address-fields button[type="submit"] {
  width: auto;
  padding: 0 34px;
}
.serena-compte fieldset { border: 0; border-top: 1px solid var(--serena-rule); padding: 24px 0 0; margin: 30px 0 0; }
.serena-compte fieldset legend {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 0;
}

/* Repli mobile : la maquette est dessinée pour 1440 px de large. */
@media (max-width: 900px) {
  .serena-heros > .wp-block-columns { flex-wrap: wrap !important; }
  .serena-heros .serena-heros-visuel img { min-height: 320px; }
  .serena-editorial-encart { max-width: none; padding: 32px 24px; }
}