/* --------------------------------------------------------------------------
   css/compte.css — Comptes (Ultimate Member) et page Expert

   1.   INSCRIPTION (« Créer mon compte »)
   2.   CONNEXION (Ultimate Member)
   3.   MON COMPTE (Ultimate Member)
   4.   RÉINITIALISATION DU MOT DE PASSE (UM)
   5.   BIENVENUE (après validation du compte)
   6.   PAGE EXPERT (profil) — shortcode [profil_expert]
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. INSCRIPTION (« Créer mon compte »)
   ========================================================================== */

/* CRÉER MON COMPTE */
.section-compte {
  padding-block: 50px;
}
.carte-compte {
  max-width: 900px;
  padding: 50px 10%;
  border: 1px solid #efefef;
  border-radius: 5px;
}
.carte-compte h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.carte-compte .compte-intro,
.carte-compte .compte-form {
  padding-top: 30px;
}
@media (max-width: 781px) {
  .carte-compte h1 { font-size: 7vw; }
}


/* ==========================================================================
   2. CONNEXION (Ultimate Member)
   ========================================================================== */
.section-unique {
  margin-block: 0;
  padding-block: 50px;
}
.carte-connexion {
  width: min(900px, 90%);
  max-width: none;
  padding: 50px 10%;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--texte-fonce) 8%, var(--wp--preset--color--blanc));
  border-radius: 5px;
}
.carte-connexion h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
}
.carte-connexion .connexion-aide {
  margin: 30px 0 0;
}
.carte-connexion .um {
  margin-top: 10px;
}
@media (max-width: 600px) {
  .section-unique {
    padding-block: 0;
    background-color: var(--wp--preset--color--blanc) !important; /* les classes de couleur WP sont en !important */
  }
  .carte-connexion {
    width: 100%;
    padding: 32px 5%;   /* marges latérales : passe à 10% si tu veux plus d'air */
    border: 0;
    border-radius: 0;
  }
  .carte-connexion h1 { font-size: 7vw; }
}

/* UM : règles générales (à ne mettre qu'une fois) */
.um_request_name { display: none; }          /* champ anti-robot parfois affiché */
.um:not(.um-admin) { color: var(--wp--preset--color--texte-fonce); }
body .um a.um-button,
body .um input[type=submit].um-button {
  background-color: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--blanc);
  font-weight: 700;
}
body .um a.um-button:hover,
body .um a.um-button:focus,
body .um input[type=submit].um-button:hover,
body .um input[type=submit].um-button:focus {
  background-color: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 85%, black);
}


/* ==========================================================================
   3. MON COMPTE (Ultimate Member)
   ========================================================================== */
.page-um {
  margin-block: 0;
  padding-block: 20px;
}
.page-um > h1 {
  margin: 0;
  padding-top: 30px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
}
.page-um .contenu-um {
  width: min(900px, 80%);
  max-width: none;
  padding: 40px 0 30px;
}
@media (max-width: 600px) {
  .page-um { padding-block: 0; }
  .page-um > h1 {
    padding-top: 12px;
    font-size: 7vw;
  }
  .page-um .contenu-um {
    width: 90%;
    padding-top: 16px;
  }
}
/* UM : espace compte */
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon {
  color: var(--wp--preset--color--bleu-clair);
}
/* UM : masque le bloc avatar + nom (UM le ré-affiche en mobile via une classe !important) */
.um.um-account .um-account-meta.um-account-meta {
  display: none !important;
}


/* ==========================================================================
   4. RÉINITIALISATION DU MOT DE PASSE (UM)
   ========================================================================== */
/* Les règles générales UM (.um_request_name, .um-button…) sont dans la section 2 de ce fichier (Connexion). */
.section-mdp { margin-block: 0; padding-block: 50px; }
.section-mdp h1 {
  margin: 0 0 20px;
  font-size: clamp(1.75rem, 7vw, 2.25rem);   /* 36px max */
  font-weight: 600;
  line-height: 1.2;
}
.mdp-formulaire { max-width: 900px; }


/* ==========================================================================
   5. BIENVENUE (après validation du compte)
   ========================================================================== */
/* Réutilise .section-unique et .carte-connexion (section 2 de ce fichier). À placer APRÈS elle. */
.carte-bienvenue { padding: 50px; }
.carte-bienvenue h1 { margin-bottom: 20px; font-weight: 600; }
.bienvenue-bouton { margin-block: 30px 40px; }
@media (max-width: 600px) {
  .carte-bienvenue { padding: 32px 5%; }
}


/* ==========================================================================
   6. PAGE EXPERT (profil) — shortcode [profil_expert]
   ========================================================================== */

/* --- Section & grille --- */
.section-expert { margin-block: 0; padding-block: 20px 50px; }
.profil-expert {
  display: grid;
  grid-template-columns: 20.875% 1fr;
  column-gap: 5.5%;
  align-items: start;
}
.profil-expert [hidden] { display: none; }
@media (max-width: 980px) {
  .profil-expert { grid-template-columns: 1fr; }
  .profil-photo-col { width: 100%; max-width: 250px; margin-inline: auto; }
}

/* --- Colonne photo --- */
.profil-photo { margin-top: 20px; }
.profil-photo__img {
  display: block;
  width: 100%;
  height: auto;          /* neutralise l'attribut height="1024" → l'aspect-ratio reprend la main */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.profil-lien-modifier,
.profil-linkedin { margin: 15px 0 0; text-align: center; font-size: 15px; }
.profil-linkedin { margin-top: 20px; }

/* --- Liens / boutons-liens --- */
.profil-lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--bleu-clair);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}
.profil-outils { margin: 0; text-align: right; font-size: 15px; }
.profil-note { margin: 0 0 10px; padding: 10px 0; text-align: right; font-size: 12px; font-weight: 700; line-height: 1.2; }
@media (max-width: 980px) {
  .profil-outils, .profil-note { text-align: left; }
}

/* --- Alertes --- */
.profil-alerte {
  --profil-alerte-couleur: var(--wp--preset--color--erreur);
  margin: 0 0 10px;
  padding: 10px 30px 10px 20px;
  background-color: var(--wp--preset--color--blanc);
  border-left: 4px solid var(--profil-alerte-couleur);
  border-radius: 5px;
  font-size: 15px;
  line-height: 1.4;
}
.profil-alerte--ok { --profil-alerte-couleur: var(--wp--preset--color--succes); }
.profil-alerte--attention { --profil-alerte-couleur: var(--wp--preset--color--orange); }
.profil-alerte p { margin: 0; }
.profil-alerte ul { margin: 15px 0 0; padding-left: 1.2em; list-style: square; }

/* --- Cartes --- */
.profil-carte {
  margin-block: 30px 15px;
  padding: 30px;
  background-color: var(--wp--preset--color--blanc);
  border-radius: 5px;
}
.profil-carte--identite { margin-top: 0; }
.profil-carte__titre {
  margin: 0 0 10px;
  color: var(--wp--preset--color--or);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}
.profil-carte p { margin-block: 0 .5em; }

/* --- Identité --- */
.profil-nom { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.4; }
.profil-titre { margin: .25rem 0 .75rem; font-size: 22px; font-weight: 500; line-height: 1.4; }
.profil-ligne { margin: .15rem 0; }
@media (max-width: 767px) {
  .profil-nom { font-size: 5vw; }
  .profil-titre { font-size: 4vw; }
  .profil-ligne { font-size: 15px; }
}

/* --- Tags d'expertises --- */
.profil-tags { display: flex; flex-wrap: wrap; gap: 10px 25px; margin: 0; padding: 0; list-style: none; }
.profil-tags li {
  padding: .1em 1em;
  border-radius: 5px;
  background-color: var(--wp--preset--color--or);
  color: var(--wp--preset--color--blanc);
  font-size: 14px;
}

/* --- Informations complémentaires (lecture) --- */
.profil-infos { margin: 0; }
.profil-infos > div { margin: 0 0 .35rem; }
.profil-infos dt { display: inline; }
.profil-infos dt::after { content: " : "; }
.profil-infos dd { display: inline; margin: 0; font-weight: 700; }

/* --- CV (lecture) --- */
.profil-cv__vignette { border: 1px solid color-mix(in srgb, var(--wp--preset--color--texte-fonce) 25%, var(--wp--preset--color--blanc)); }

/* --- Disponibilité --- */
.profil-dispo { margin: 30px 0 0 30px; }
.profil-dispo__etat {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0 15px;
  border-radius: 5px;
  color: var(--wp--preset--color--blanc);
  line-height: 2;
}
.profil-dispo__etat--oui { background-color: var(--wp--preset--color--succes); }
.profil-dispo__etat--non { background-color: var(--wp--preset--color--erreur); }
.profil-dispo__question label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-weight: 700;
  line-height: 2;
}
.profil-dispo__valider { margin-left: 10px; }
.profil-dispo__msg { margin: 15px 0 0; font-size: 15px; font-weight: 700; }
@media (max-width: 767px) {
  .profil-dispo { margin: 30px 0 0; text-align: center; }
  .profil-dispo__etat { margin-right: 0; }
  .profil-dispo__question label { flex-direction: column; line-height: 1.6; }
  .profil-dispo__modifier { display: block; margin: 10px auto 0; }
  .profil-dispo__valider { margin: 10px 0 0; }
}
/* Interrupteur (https://codepen.io/n_mache/pen/rNbdjbp) */
.profil-expert .switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 50px;
  height: 26px;
  margin: 0;
  border: 1px solid var(--wp--preset--color--erreur);
  border-radius: 15px;
  background: color-mix(in srgb, var(--wp--preset--color--erreur) 75%, var(--wp--preset--color--blanc));
  overflow: hidden;
  cursor: pointer;
  transition: all .1s ease-out;
}
.profil-expert .switch:checked { border-color: var(--wp--preset--color--succes); background: var(--wp--preset--color--succes); }
.profil-expert .switch::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.profil-expert .switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: all .1s ease-out;
}
.profil-expert .switch:checked::after { left: 25px; }

/* --- Formulaire d'édition --- */
.profil-champ { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.profil-champ > label,
.profil-champ > legend { display: block; padding: 0; font-size: 19px; font-weight: 700; }
.profil-consigne { display: block; margin: .15rem 0 .4rem; font-size: 12px; font-weight: 400; line-height: 1.2; }
.profil-champ input[type="text"],
.profil-champ textarea,
.profil-champ select {
  width: 100%;
  max-width: 36rem;
  margin-top: 5px;
  padding: 5px 10px;
  font-size: 15px;
}
.profil-champ textarea { line-height: 1.6; max-width: 100%; }
.profil-champ select { max-width: 200px; }
.profil-champ__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 5px; }
.profil-champ__ligne input[type="text"] { width: auto; max-width: 8rem; margin: 0; }
.profil-champ__ligne span { font-size: 15px; font-weight: 400; }
.profil-champ__ligne input + span { margin-right: 20px; }
.profil-actions { margin: 15px 0 0; }

/* Expertises (édition) */
.profil-expertises-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.profil-expertise { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 15px; font-size: 15px; }
.profil-expertise label { font-weight: 400; }
.profil-expertise .input-container { position: relative; flex: 1; }
.profil-expertise .input-container input { width: 100%; padding-left: 25px; font-size: 15px; }
.clear-input {
  position: absolute;
  left: 10px;
  bottom: 0;
  display: none;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.1em;
  line-height: 1.8;
  cursor: pointer;
}
.input-container.has-value .clear-input { display: block; }
@media (max-width: 980px) { .profil-expertises-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .profil-expertises-grille { grid-template-columns: 1fr; } }

/* CV (édition, ACF) */
.champ-acf-cv .acf-field-file { padding: 0; }
.champ-acf-cv .acf-label p { color: var(--wp--preset--color--texte-fonce); font-size: 12px; line-height: 1.4; }
.champ-acf-cv .acf-input .hide-if-value p a[data-name="add"] { font-size: 15px; }
.champ-acf-cv .acf-icon.-cancel.dark,
.champ-acf-cv .acf-icon.-pencil.dark { text-decoration: none; }
.delete-cv { padding: 15px 0 0 !important; display: flex; align-items: center; border-top: none !important; }
.delete-cv .acf-label label { line-height: 1; margin-bottom: 0 !important; font-size: 15px; font-weight: 400 !important; }
.delete-cv .acf-label { margin: 0 !important; }
.delete-cv .acf-input { display: inline-block; margin-bottom: 4px; margin-left: 10px; }

/* Photo (édition, ACF) */
.formulaire-acf-photo .acf-field-image-aspect-ratio-crop { width: 100% !important; }
.formulaire-acf-photo .acf-field-image-aspect-ratio-crop .acf-label ol {
  margin-left: 15px;
  color: var(--wp--preset--color--texte-fonce);
  font-size: 12px;
  line-height: 1.4;
  list-style-position: outside;
}
.formulaire-acf-photo .acf-field-image-aspect-ratio-crop .hide-if-value p a[data-name="add"] { font-size: 15px; }
.formulaire-acf-photo .acf-form-submit { display: flex; justify-content: center; margin-top: 15px; }
.formulaire-acf-photo .acf-form-submit button { cursor: pointer; }
.formulaire-acf-photo .acf-icon.-pencil.dark { text-decoration: none; }


.profil-expert .btn,
.profil-expert .formulaire-acf-photo button,
.profil-expert .js-acf-image-aspect-ratio-crop-crop {   /* bouton « Recadrer/Valider » d'ACF */
  text-transform: uppercase;
}

/* Inputs texte et liste déroulante : même hauteur (32px) */
.profil-champ input[type="text"],
.profil-champ select {
  box-sizing: border-box;
  height: 32px;
  padding-block: 0;      /* le texte reste centré verticalement */
}

/* Liste déroulante : flèche personnalisée, cohérente avec le reste */
.profil-champ select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;   /* place pour la flèche */
  background: var(--wp--preset--color--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  cursor: pointer;
}