/* ==================================================================
   Ruban Pro — connexion et création de compte (direction J).
   Portée depuis maquettes/j-nouveau-style/connexion.css. Le conteneur
   porte « j-ec j-cx » : il reprend les champs, boutons et
   neutralisations du thème définis dans espace.css. Préfixe « j-cx- ».
   ================================================================== */

/* Le contenu éditorial du thème (.m-contenu) impose ses titres : on les reprend. */
.m-contenu .j-ec.j-cx .j-cx-titre { font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.m-contenu .j-ec.j-cx .j-cx-atouts__t { margin: 24px 28px 0; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
.m-contenu .j-ec.j-cx .j-sous { margin-top: 6px; }
.j-cx [hidden] { display: none !important; }

/* Aperçu : rendu du configurateur (image de repli + canevas). */
.j-cx-apercu .rpc-rendu { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.j-cx-apercu :is(img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Boutons de formulaire du thème WooCommerce : la page garde ceux de la maquette. */
.j-cx .j-cx-onglets button, .j-cx .j-cx-voir { cursor: pointer; font-family: inherit; }
.j-cx .j-cx-onglets button:focus-visible, .j-cx .j-cx-voir:focus-visible { outline: 2px solid var(--j-bleu); outline-offset: 2px; }
.j-cx .j-btn .j-ico { width: 19px; height: 19px; }

.j-ec.j-cx { padding-block: 22px 64px; }

.j-cx__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1080px;
  margin: 18px auto 0;
}

/* ------------------------------------------------------------ carte */
.j-cx-carte { padding: 30px 32px 26px; border: 1px solid var(--j-trait); border-radius: var(--j-r-l, 12px); background: #fff; box-shadow: var(--j-ombre); }
.j-cx-titre { color: var(--j-encre); font: 800 clamp(26px, 2.6vw, 32px)/1.12 var(--j-police); letter-spacing: -.03em; }

.j-cx-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 22px 0 22px; padding: 4px; border-radius: 8px; background: var(--j-fond); }
.j-cx-onglets button {
  min-height: 42px; padding: 6px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--j-gris); font-size: 14.5px; font-weight: 600; line-height: 1.2;
}
.j-cx-onglets button:hover { color: var(--j-encre); }
.j-cx-onglets button[aria-selected="true"] { background: #fff; color: var(--j-bleu); font-weight: 700; box-shadow: 0 1px 3px rgba(16, 32, 64, .12); }

.j-cx-volet:focus { outline: none; }
.j-cx-form { display: grid; gap: 16px; }
.j-cx-form > .j-btn { margin-top: 4px; }

/* libellé en <label for> (champs à bouton) : même rendu que .j-champ > span */
.j-cx .j-champ > label { color: var(--j-texte); font-size: 13.5px; }
.j-cx .j-champ > label i { color: #d93a3a; font-style: normal; }
.j-cx .j-champ textarea { width: 100%; }
.j-cx .j-champ.est-erreur input { border-color: #d93a3a; }
.j-cx-erreur { color: #c62828 !important; font-size: 12.5px !important; }

/* mot de passe + bouton afficher */
.j-cx-mdp { position: relative; }
.j-cx .j-champ .j-cx-mdp input { padding-right: 104px; }
.j-cx-voir {
  position: absolute; top: 5px; right: 5px; bottom: 5px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border: 0; border-radius: 4px; background: var(--j-fond); color: var(--j-encre); font-size: 13px; font-weight: 600;
}
.j-cx-voir:hover { background: var(--j-bleu-pale); color: var(--j-bleu); }
.j-cx-voir .j-ico { width: 17px; height: 17px; }

/* robustesse */
.j-cx-force { display: grid; gap: 6px; margin-top: 4px; }
.j-cx-force__barre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.j-cx-force__barre i { height: 4px; border-radius: 2px; background: var(--j-trait); transition: background .2s; }
.j-cx-force[data-niveau="1"] i:nth-child(-n+1) { background: #d93a3a; }
.j-cx-force[data-niveau="2"] i:nth-child(-n+2) { background: #e0911b; }
.j-cx-force[data-niveau="3"] i:nth-child(-n+3) { background: #5a9e2f; }
.j-cx-force[data-niveau="4"] i:nth-child(-n+4) { background: var(--j-vert); }

.j-cx-ligne { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: -4px; }
.j-cx-ligne .j-coche { margin-top: 0; }
.j-cx-lien { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; }

.j-cx-groupe { min-width: 0; margin: 0; padding: 0; border: 0; }
.j-cx-groupe legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; color: var(--j-encre); font: 700 15.5px/1.2 var(--j-police); }
.j-cx-groupe .j-champs { clear: both; align-items: start; }
.j-cx-groupe + .j-cx-groupe { padding-top: 16px; border-top: 1px solid var(--j-trait); }

/* profil : particulier ou professionnel (radios en segments) */
.j-cx-profil { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.j-cx-profil legend { float: left; width: 100%; margin-bottom: 2px; padding: 0; color: var(--j-encre); font: 700 15.5px/1.2 var(--j-police); }
.j-cx-segments { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--j-trait); border-radius: 8px; }
.j-cx-segments label { position: relative; cursor: pointer; }
.j-cx-segments input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.j-cx-segments span {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 10px;
  border-radius: 6px; color: var(--j-gris); font-size: 14.5px; font-weight: 600; text-align: center;
}
.j-cx-segments label:hover span { color: var(--j-encre); }
.j-cx-segments input:checked + span { background: var(--j-bleu-pale); color: var(--j-bleu); font-weight: 700; }
.j-cx-segments input:focus-visible + span { outline: 2px solid var(--j-bleu); outline-offset: 2px; }
.j-cx-profil__note { margin: 0; }
/* Avec JavaScript, seule la note du profil choisi reste ; sans, les deux. */
.j-cx-js .j-cx-profil__note[hidden], .j-cx-js .j-cx .j-cx-sans-js { display: none; }
.j-cx-si-pro { display: none; }
.est-pro .j-cx-si-pro { display: inline; }
.j-cx-groupe legend small { color: var(--j-gris); font-size: 13px; font-weight: 500; }
.j-cx-profil + .j-cx-groupe { padding-top: 16px; border-top: 1px solid var(--j-trait); }

.j-cx-cgv { align-items: flex-start; margin-top: 0; font-size: 13.5px; line-height: 1.45; }
.j-cx-cgv input { flex: none; margin-top: 1px; }
.j-cx-cgv i { color: #d93a3a; font-style: normal; }
.j-cx-cgv .j-lien { font-size: inherit; font-weight: 600; }
.j-cx-cgv.est-erreur { color: #c62828; }
.j-cx-cgv.est-erreur input { outline: 2px solid #d93a3a; outline-offset: 1px; }

.j-cx-petit { color: var(--j-gris); font-size: 13px; }
.j-cx-obligatoire { margin-top: -8px; }
.j-cx-obligatoire i { color: #d93a3a; font-style: normal; }

/* mot de passe oublié */
.j-cx-oubli { display: grid; gap: 12px; margin-top: 18px; padding: 18px; border: 1px solid var(--j-trait-2); border-radius: var(--j-r); background: var(--j-bleu-voile); }
.j-cx-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.j-cx-btns .j-btn { min-height: 42px; font-size: 14px; }

.j-cx-retour { display: flex; gap: 8px; padding: 10px 14px; border-radius: 6px; background: var(--j-ambre); color: #5b4a17; font-size: 13.5px; }
.j-cx-bascule { margin-top: 20px; color: var(--j-texte); font-size: 14px; text-align: center; }
.j-cx-bascule .j-lien { font-size: 14px; font-weight: 700; }

.j-cx-invite { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: var(--j-r); background: var(--j-fond); color: var(--j-texte); font-size: 13.5px; }
.j-cx-invite b { color: var(--j-encre); }
.j-cx-invite .j-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--j-bleu); }

/* ------------------------------------------------------------ atouts */
.j-cx-atouts { position: sticky; top: 96px; overflow: hidden; padding: 0 0 26px; border-radius: var(--j-r-l, 12px); background: var(--j-nuit); color: #c5ccd8; }
.j-cx-apercu { position: relative; overflow: hidden; aspect-ratio: 16 / 6.2; background: #1a2130; }
.j-cx-apercu canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-cx-atouts__t { margin: 24px 28px 0; color: #fff; font: 800 24px/1.15 var(--j-police); letter-spacing: -.025em; }
.j-cx-atouts__chapo { margin: 8px 28px 0; font-size: 14.5px; }
.j-cx-liste { display: grid; gap: 16px; margin: 22px 28px 0; padding: 0; list-style: none; }
.j-cx-liste li { display: flex; align-items: flex-start; gap: 14px; font-size: 13.5px; line-height: 1.45; }
.j-cx-liste .j-ico { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 8px; background: rgba(10, 92, 255, .18); color: #7ea8ff; }
.j-cx-liste b { display: block; margin-bottom: 2px; color: #fff; font-size: 14.5px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .j-cx__grille { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .j-cx-atouts { position: static; }
}
@media (max-width: 620px) {
  .j-ec.j-cx { padding-top: 14px; }
  .j-cx-carte { padding: 22px 18px 20px; }
  .j-cx .j-champ--moitie { grid-column: span 6; }
  .j-cx-onglets button { font-size: 13.5px; }
  .j-cx-atouts__t, .j-cx-atouts__chapo, .j-cx-liste, .m-contenu .j-ec.j-cx .j-cx-atouts__t { margin-inline: 20px; }
}

/* ------------------------------------------------------------ carte seule (mot de passe) */
.j-cx__grille--seule { grid-template-columns: minmax(0, 560px); justify-content: center; }
.j-cx-form--haut { margin-top: 22px; }
.j-cx-invite--haut { margin-top: 20px; }
.j-cx-texte { margin-top: 14px !important; }

/* ------------------------------------------------------------ messages de WooCommerce dans la carte */
.j-cx-messages { margin-top: 18px; }
.j-cx-messages:not(:has(li, .woocommerce-message, .woocommerce-info, .woocommerce-error)) { display: none; }
.j-cx-messages :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { margin: 0 0 8px !important; font-size: 14px; }
.j-cx-messages :is(.woocommerce-error, .woocommerce-message, .woocommerce-info):focus { outline: none; }
.m-contenu .j-cx-messages :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { padding: 12px 16px !important; list-style: none; line-height: 1.5; }
.j-cx-messages .woocommerce-error li { margin: 0; }