/*
 * Boutique Design : la page de connexion, et les pages « mot de passe oublie »
 * et « nouveau mot de passe » qui en partent.
 *
 * Les couleurs et les arrondis viennent de la palette du site, calculee par le
 * plugin depuis ses reglages.
 *
 * La refonte de Mon compte vit dans compte.css (module Compte), et le lien du
 * header dans entete.css.
 */

/* ------------------------------------------------------------------ *
 * 1. La carte
 * ------------------------------------------------------------------ */

.dilo-page-connexion .page-header,
.dilo-page-connexion .entry-title {
  display: none;
}

.dilo-compte {
  max-width: 520px;
  margin: 0 auto;
  /* De l'air au-dessus : sans cela la carte se colle au header, qui n'est
     suivi d'aucun titre de page sur cette page. */
  padding: 40px 0 48px;
  color: var(--dilo-primaire);
}

.dilo-compte__carte {
  padding: 28px 24px 24px;
  background: var(--dilo-fond);
  border: 1px solid var(--dilo-ligne);
  border-radius: var(--dilo-rayon);
  box-shadow: var(--dilo-ombre);
}

.dilo-compte__entete {
  margin-bottom: 20px;
  text-align: center;
}

.dilo-compte__titre {
  margin: 0 0 8px;
  color: var(--dilo-primaire);
  font-size: 24px;
  line-height: 1.25;
  text-wrap: balance;
}

.dilo-compte__sous-titre {
  margin: 0;
  color: var(--dilo-muted);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Les onglets (module Compte seulement) restent masques tant que le script
   n'a pas pris la main : sans JavaScript, les deux formulaires s'affichent
   l'un sous l'autre. */
.dilo-compte__onglets {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--dilo-doux);
  border: 1px solid var(--dilo-ligne);
  border-radius: 999px;
}

.dilo-compte__onglets[hidden] {
  display: none;
}

.dilo-compte__onglet {
  flex: 1 1 0;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--dilo-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Le theme Hello Elementor peint tous les boutons en framboise au survol et
 * au focus (reset.css : "button:focus, button:hover { background: #c36 }").
 * Les etats sont donc declares ici, sinon l'onglet vire au rose.
 */
.dilo-compte__onglet:hover,
.dilo-compte__onglet:focus {
  color: var(--dilo-primaire);
  background: var(--dilo-ligne-forte);
}

.dilo-compte__onglet[aria-selected="true"],
.dilo-compte__onglet[aria-selected="true"]:hover,
.dilo-compte__onglet[aria-selected="true"]:focus {
  color: #FFFFFF;
  background: var(--dilo-primaire);
}

.dilo-compte__onglet:focus-visible {
  outline: 2px solid var(--dilo-accent);
  outline-offset: 2px;
}

.dilo-compte__messages:empty {
  display: none;
}

/* Une fois les onglets en place, les titres "Connexion" et "Inscription"
   du template WooCommerce feraient doublon. Sans espace client, le titre
   "Se connecter" double celui de la carte. Ils restent lus par les lecteurs
   d'ecran. */
.dilo-compte--onglets .dilo-compte__formulaires h2,
.dilo-compte--connexion-seule .dilo-compte__formulaires h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dilo-compte__formulaires .u-columns,
.dilo-compte__formulaires .col2-set {
  display: block;
  width: auto;
  margin: 0;
}

.dilo-compte__formulaires .u-column1,
.dilo-compte__formulaires .u-column2 {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Separateur entre les deux formulaires quand le JavaScript est absent. */
.dilo-compte__formulaires .u-column2 {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--dilo-ligne);
}

.dilo-compte--onglets .dilo-compte__formulaires .u-column2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.dilo-compte--onglets .dilo-compte__formulaires [hidden] {
  display: none;
}

.dilo-compte__retour {
  margin: 18px 0 0;
  font-size: 14px;
  text-align: center;
}

.dilo-compte__retour a {
  color: var(--dilo-muted);
}

.dilo-compte__liens {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dilo-compte__bouton {
  display: block;
  min-height: 48px;
  padding: 13px 18px;
  color: #FFFFFF;
  background: var(--dilo-primaire);
  border-radius: var(--dilo-rayon-champ);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.dilo-compte__bouton:hover,
.dilo-compte__bouton:focus-visible {
  color: #FFFFFF;
  background: var(--dilo-accent);
  text-decoration: none;
}

.dilo-compte__bouton--doux {
  color: var(--dilo-primaire);
  background: var(--dilo-ligne-forte);
}

.dilo-compte__bouton--doux:hover,
.dilo-compte__bouton--doux:focus-visible {
  color: var(--dilo-primaire);
  background: var(--dilo-ligne-appuyee);
}

.dilo-compte__deconnexion {
  margin: 18px 0 0;
  font-size: 14px;
  text-align: center;
}

.dilo-compte__deconnexion a {
  color: var(--dilo-erreur);
}

/* ------------------------------------------------------------------ *
 * 2. Champs et boutons
 * ------------------------------------------------------------------ */

.dilo-compte .form-row {
  display: block;
  margin: 0 0 16px;
  padding: 0;
}

.dilo-compte label {
  display: block;
  margin-bottom: 6px;
  color: var(--dilo-primaire);
  font-size: 14px;
  font-weight: 600;
}

.dilo-compte .required,
.dilo-page-mdp .required {
  color: var(--dilo-erreur);
  text-decoration: none;
}

.dilo-compte input[type="text"],
.dilo-compte input[type="email"],
.dilo-compte input[type="tel"],
.dilo-compte input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--dilo-primaire);
  background: var(--dilo-fond);
  border: 1px solid var(--dilo-ligne);
  border-radius: var(--dilo-rayon-champ);
  /* 16px evite le zoom automatique des champs sur iPhone. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
}

.dilo-compte input:focus {
  border-color: var(--dilo-accent);
  outline: 2px solid rgba(var(--dilo-accent-rgb), .18);
  outline-offset: 0;
}

/*
 * Champ mot de passe avec bouton oeil. Le conteneur enveloppe le champ seul,
 * jamais le paragraphe : le bouton se cale ainsi sur le champ meme quand un
 * indicateur de solidite le suit.
 */
.dilo-mdp {
  position: relative;
  display: block;
  width: 100%;
}

.dilo-mdp input {
  padding-right: 52px !important;
}

.dilo-mdp__oeil {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--dilo-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

/* Meme raison que pour les onglets : sans ces etats, le theme met du
   framboise derriere l'oeil. */
.dilo-mdp__oeil:hover,
.dilo-mdp__oeil:focus {
  color: var(--dilo-primaire);
  background: var(--dilo-doux);
}

.dilo-mdp__oeil:focus-visible {
  outline: 2px solid var(--dilo-accent);
  outline-offset: -2px;
}

.dilo-mdp__oeil svg {
  width: 20px;
  height: 20px;
}

/* Indicateur de solidite, sous le mot de passe de l'inscription. */
.dilo-force {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--dilo-muted);
}

.dilo-force__barre {
  display: block;
  height: 4px;
  margin-bottom: 6px;
  background: var(--dilo-ligne);
  border-radius: 999px;
  overflow: hidden;
}

/* La jauge est animee en transform, pas en largeur : le navigateur n'a pas
   besoin de recalculer la mise en page a chaque frappe. */
.dilo-force__jauge {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--dilo-erreur);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}

.dilo-force[data-niveau="1"] .dilo-force__jauge {
  transform: scaleX(.33);
}

.dilo-force[data-niveau="2"] .dilo-force__jauge {
  background: var(--dilo-etoile-texte);
  transform: scaleX(.66);
}

.dilo-force[data-niveau="3"] .dilo-force__jauge {
  background: var(--dilo-succes);
  transform: scaleX(1);
}

.dilo-compte .woocommerce-form-login__rememberme,
.dilo-compte .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 400;
}

.dilo-compte .woocommerce-form__input-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--dilo-primaire);
}

/* Sur la page de connexion, le bouton prend toute la largeur de la carte. */
.dilo-compte button[type="submit"],
.dilo-compte .woocommerce-button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  color: #FFFFFF !important;
  background: var(--dilo-primaire) !important;
  border: 0;
  border-radius: var(--dilo-rayon-champ);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}

/* Pendant l'envoi du formulaire, pour eviter un second appui. */
.dilo-compte button[type="submit"][disabled] {
  opacity: .7;
  cursor: progress;
}

.dilo-compte button[type="submit"]:hover {
  background: var(--dilo-accent) !important;
}

.dilo-compte button[type="submit"]:focus-visible {
  outline: 2px solid var(--dilo-accent);
  outline-offset: 2px;
}

.dilo-compte .woocommerce-LostPassword {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
}

.dilo-compte .woocommerce-LostPassword a {
  color: var(--dilo-accent);
}

.dilo-compte .woocommerce-privacy-policy-text {
  margin-top: 14px;
  color: var(--dilo-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * 3. Messages WooCommerce
 *
 * .dilo-page-mdp : pages « mot de passe oublie » et « nouveau mot de
 * passe ». Memes valeurs que dans compte.css, pour que ces pages soient
 * identiques avec ou sans le module Compte.
 * ------------------------------------------------------------------ */

.dilo-compte .woocommerce-error,
.dilo-compte .woocommerce-info,
.dilo-compte .woocommerce-message,
.dilo-page-mdp .woocommerce-error,
.dilo-page-mdp .woocommerce-info,
.dilo-page-mdp .woocommerce-message {
  margin: 0 0 18px;
  padding: 14px 16px;
  color: var(--dilo-primaire);
  background: var(--dilo-doux);
  border: 1px solid var(--dilo-ligne);
  border-left: 4px solid var(--dilo-accent);
  border-radius: var(--dilo-rayon-champ);
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
}

.dilo-compte .woocommerce-error::before,
.dilo-compte .woocommerce-info::before,
.dilo-compte .woocommerce-message::before,
.dilo-page-mdp .woocommerce-error::before,
.dilo-page-mdp .woocommerce-info::before,
.dilo-page-mdp .woocommerce-message::before {
  content: none;
}

.dilo-compte .woocommerce-error,
.dilo-page-mdp .woocommerce-error {
  border-left-color: var(--dilo-erreur);
}

.dilo-compte .woocommerce-message,
.dilo-page-mdp .woocommerce-message {
  border-left-color: var(--dilo-succes);
}

.dilo-compte .woocommerce-error li,
.dilo-page-mdp .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dilo-compte .woocommerce-error li + li {
  margin-top: 6px;
}

/* ------------------------------------------------------------------ *
 * 4. Liens
 * ------------------------------------------------------------------ */

/*
 * Les liens ne sont plus soulignes au repos : couleur d'accent et graisse
 * suffisent a les distinguer. Le soulignement revient au survol et au focus,
 * pour que la cible reste evidente au clavier comme a la souris.
 * :visited est traite comme le reste, sinon le navigateur affiche les liens
 * deja ouverts dans son bordeaux par defaut.
 */
.dilo-compte a:not(.dilo-compte__bouton),
.dilo-compte a:not(.dilo-compte__bouton):visited {
  color: var(--dilo-accent);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.dilo-compte a:not(.dilo-compte__bouton):hover,
.dilo-compte a:not(.dilo-compte__bouton):focus-visible {
  color: var(--dilo-primaire);
  text-decoration: underline;
}

/*
 * Les boutons ne prennent jamais de soulignement. Ils sont vises avec leur
 * parent (.dilo-compte .dilo-compte__bouton) parce que le theme applique
 * ".page-content a { text-decoration: underline }", plus specifique qu'une
 * simple classe.
 */
.dilo-compte .dilo-compte__bouton,
.dilo-compte .dilo-compte__bouton:link,
.dilo-compte .dilo-compte__bouton:visited,
.dilo-compte .dilo-compte__bouton:hover,
.dilo-compte .dilo-compte__bouton:focus,
.dilo-compte .dilo-compte__bouton:focus-visible {
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 5. Mot de passe oublie et reinitialisation
 *
 * Ces deux formulaires s'affichent sur /mon-compte/lost-password, hors de
 * la zone de contenu du compte : ils sont mis en carte a leur tour.
 * ------------------------------------------------------------------ */

.woocommerce-account form.woocommerce-ResetPassword {
  max-width: 520px;
  /* De l'air au-dessus, comme sur la page de connexion : cette page n'a pas
     de titre, la carte se collait au header. */
  margin: 40px auto 48px;
  padding: 28px 24px;
  color: var(--dilo-primaire);
  background: var(--dilo-fond);
  border: 1px solid var(--dilo-ligne);
  border-radius: var(--dilo-rayon);
  box-shadow: var(--dilo-ombre);
}

/*
 * WooCommerce reutilise ici "form-row-first", une classe faite pour deux
 * champs cote a cote : elle impose 47 % de largeur et un flottant. Seule,
 * la ligne devenait un champ minuscule sous un bouton pleine largeur.
 */
.woocommerce-account form.woocommerce-ResetPassword .form-row,
.woocommerce-account form.woocommerce-ResetPassword .form-row-first,
.woocommerce-account form.woocommerce-ResetPassword .form-row-last,
.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--first {
  float: none;
  width: auto;
  margin: 0 0 16px;
  padding: 0;
}

/* Le vide-flottants de WooCommerce n'a plus lieu d'etre sans flottant. */
.woocommerce-account form.woocommerce-ResetPassword .clear {
  display: none;
}

/* Le texte d'explication passe au second plan, devant le champ. */
.woocommerce-account form.woocommerce-ResetPassword > p:first-of-type {
  margin: 0 0 20px;
  color: var(--dilo-muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.woocommerce-account form.woocommerce-ResetPassword label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.woocommerce-account form.woocommerce-ResetPassword input[type="text"],
.woocommerce-account form.woocommerce-ResetPassword input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--dilo-primaire);
  background: var(--dilo-fond);
  border: 1px solid var(--dilo-ligne);
  border-radius: var(--dilo-rayon-champ);
  font-family: inherit;
  font-size: 16px;
}

.woocommerce-account form.woocommerce-ResetPassword .form-row {
  margin-bottom: 16px;
}

.woocommerce-account form.woocommerce-ResetPassword button[type="submit"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  color: #FFFFFF !important;
  background: var(--dilo-primaire) !important;
  border: 0;
  border-radius: var(--dilo-rayon-champ);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * 6. Ecrans larges
 * ------------------------------------------------------------------ */

@media (min-width: 600px) {
  .dilo-compte {
    padding: 64px 0 72px;
  }

  .dilo-compte__carte {
    padding: 36px 34px 30px;
  }

  .dilo-compte__titre {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dilo-force__jauge {
    transition: none;
  }
}

/*
 * La page de connexion est creee par le plugin et affichee avec le gabarit de
 * page du theme. Certains themes donnent a leur zone principale une largeur de
 * 100 % plus une marge interieure, sans compter cette marge dans la largeur :
 * la page deborde alors sur mobile. Seul le mode de calcul est change, pas la
 * largeur maximale du theme, et seulement sur cette page.
 */
body.dilo-page-connexion .site-main {
  box-sizing: border-box;
}