/* KARIMEX — Espace Client Professionnel. S'ajoute a styles.css, dont il reprend
   les jetons et les deux terrains : fond vert (encre claire), cartes blanches
   (encre foncee). Aucun style en ligne : la politique de la page les refuse. */

[hidden] { display: none !important; }

main:focus { outline: none; }

.ec-bloc { padding-top: var(--pas-5); padding-bottom: var(--pas-5); }

.ec-entete-actions { margin-left: auto; display: flex; gap: 10px; }

.ec-accueil {
  display: grid; grid-template-columns: 1fr minmax(0, 520px);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}

.ec-promesses { list-style: none; margin: var(--pas-4) 0 0; padding: 0; display: grid; gap: var(--pas-2); }
.ec-promesses li {
  display: grid; gap: 2px; padding-left: 18px;
  border-left: 3px solid var(--vert-sur-fond);
}
.ec-promesses span { color: var(--sur-fond-doux); font-size: .95rem; line-height: 1.5; }

.ec-carte {
  background: #fff; color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--rayon-lg);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--ombre);
}
.ec-carte a, .ec-aide a { color: var(--vert-texte); text-decoration: underline; }
.ec-carte :focus-visible { outline-color: var(--vert-texte); }

/* --- Onglets ------------------------------------------------------------- */
.ec-onglets {
  display: flex; gap: 4px; padding: 4px; margin-bottom: var(--pas-3);
  background: #eef4f0; border-radius: 999px; overflow-x: auto;
}
.ec-onglets button {
  flex: 1 0 auto; min-height: 44px; padding: 8px 18px;
  font: inherit; font-weight: 700; font-size: .92rem;
  background: none; border: 0; border-radius: 999px;
  color: var(--gris); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ec-onglets button[aria-selected="true"] { background: var(--vert-texte); color: #fff; }
.ec-onglets-sombres { background: var(--fond-doux); max-width: 520px; }
.ec-onglets-sombres button { color: var(--sur-fond-doux); }
.ec-onglets-sombres button[aria-selected="true"] { background: #fff; color: var(--vert-texte); }

/* --- Formulaires --------------------------------------------------------- */
.ec-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pas-2); }
.ec-large { grid-column: 1 / -1; }
.ec-champ { display: grid; gap: 5px; align-content: start; min-width: 0; }
form > .ec-champ { margin-bottom: var(--pas-2); }
.ec-champ label { font-weight: 600; font-size: .88rem; }
.ec-champ input, .ec-champ select {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font: inherit; font-size: 16px; color: var(--texte);
  background: #fff; border: 1px solid var(--bord-fort); border-radius: 12px;
}
.ec-champ input[aria-invalid="true"] { border-color: var(--rouge-texte); }
.ec-erreur-champ { color: var(--rouge-texte); font-size: .84rem; line-height: 1.4; margin: 0; }

.ec-accord { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--pas-2); font-size: .9rem; line-height: 1.45; }
.ec-accord input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--vert-texte); }

.ec-message {
  margin: var(--pas-2) 0 0; padding: 10px 14px; border-radius: 12px; max-width: none;
  background: #fdecee; color: var(--rouge-texte); font-size: .92rem; line-height: 1.45;
}
.ec-message.ok { background: #e7f5ec; color: var(--vert-texte); }
.ec-envoi { width: 100%; margin-top: var(--pas-3); min-height: 50px; }
.ec-envoi[disabled] { opacity: .6; cursor: progress; }
.ec-lien {
  display: block; margin: var(--pas-2) auto 0; min-height: 44px; padding: 8px;
  font: inherit; font-weight: 600; font-size: .92rem;
  color: var(--vert-texte); background: none; border: 0; cursor: pointer; text-decoration: underline;
}
.ec-aide { margin: var(--pas-2) 0 0; color: var(--gris); font-size: .88rem; line-height: 1.5; max-width: none; }

/* --- Etats d'un compte ---------------------------------------------------- */
.ec-etat { max-width: 620px; margin: 0 auto; }
.ec-etat h1, .ec-bonjour {
  font-size: clamp(1.6rem, 1rem + 2vw, 2.2rem); line-height: 1.15;
  letter-spacing: -.03em; margin: 0 0 var(--pas-2);
}
.ec-etat .bouton { margin-top: var(--pas-3); }
.ec-etat .bouton-plein { color: #fff; text-decoration: none; }

/* --- Catalogue ------------------------------------------------------------ */
.ec-filtres { display: grid; grid-template-columns: 2fr 1fr; gap: var(--pas-2); margin-bottom: var(--pas-2); }
.ec-note { color: var(--sur-fond-doux); font-size: .9rem; line-height: 1.5; max-width: 80ch; }
.ec-note a { text-decoration: underline; }
.ec-compteur { font-weight: 600; font-size: .92rem; margin-bottom: var(--pas-2); }
.ec-articles {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pas-2);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.ec-article {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; color: var(--texte); border-radius: var(--rayon); box-shadow: var(--ombre-fine);
}
.ec-visuel {
  display: flex; align-items: center; justify-content: center;
  height: 140px; background: #f3f7f4; font-size: 3rem;
}
.ec-visuel img { width: 100%; height: 100%; object-fit: contain; }
.ec-article-corps { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 14px; }
.ec-article-nom { font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.ec-article-detail { color: var(--gris); font-size: .82rem; line-height: 1.35; }
.ec-prix { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--vert-texte); font-variant-numeric: tabular-nums; }
.ec-prix.vide { font-weight: 600; font-size: .86rem; color: var(--gris); }
.ec-dispo { font-size: .8rem; font-weight: 600; color: var(--vert-texte); }
.ec-dispo.non { color: var(--rouge-texte); }
.ec-plus { display: flex; margin: var(--pas-3) auto 0; min-height: 46px; }

/* --- Activite ------------------------------------------------------------- */
.ec-chiffres {
  list-style: none; margin: 0 0 var(--pas-3); padding: 0; display: grid; gap: var(--pas-2);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.ec-chiffres li { display: grid; gap: 2px; padding: 16px; background: #fff; color: var(--texte); border-radius: var(--rayon); }
.ec-chiffres b { font-size: 1.35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ec-chiffres span { color: var(--gris); font-size: .85rem; }
.ec-sous-titre { font-size: 1.2rem; letter-spacing: -.02em; margin: var(--pas-4) 0 var(--pas-2); }
.ec-lignes { list-style: none; margin: 0; padding: 0; background: #fff; color: var(--texte); border-radius: var(--rayon); overflow: hidden; }
.ec-ligne {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--bord);
}
.ec-ligne:last-child { border-bottom: 0; }
.ec-ligne-num { font-weight: 700; font-size: .94rem; overflow-wrap: anywhere; }
.ec-ligne-date { display: block; color: var(--gris); font-size: .82rem; font-weight: 400; }
.ec-ligne-montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-statut {
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: #eef4f0; color: var(--vert-texte); font-size: .78rem; font-weight: 700;
}
.ec-statut.fin { background: #eceff1; color: var(--gris); }
.ec-vide { color: var(--sur-fond-doux); font-size: .92rem; }
.ec-erreur-lecture { color: var(--rouge-sur-fond); font-size: .92rem; }

/* --- Fiche ---------------------------------------------------------------- */
.ec-fiche { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 10px 20px; }
.ec-fiche dt { color: var(--gris); font-size: .88rem; }
.ec-fiche dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ec-pied { background: var(--fond-pied); padding: var(--pas-3) 0; font-size: .88rem; }
.ec-pied .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ec-pied a { color: #dfe9e4; padding: 6px 0; }

@media (max-width: 860px) {
  .ec-accueil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ec-bloc { padding-top: var(--pas-4); padding-bottom: var(--pas-4); }
  .ec-entete-actions .bouton { padding: 10px 12px; font-size: .84rem; }
  .entete .marque img { height: 42px; }
  .ec-onglets button { flex: 1 1 auto; padding: 8px 10px; font-size: .84rem; }
  .ec-grille, .ec-filtres { grid-template-columns: minmax(0, 1fr); }
  .ec-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-visuel { height: 110px; }
  .ec-ligne { grid-template-columns: 1fr auto; }
  .ec-ligne-montant { grid-column: 1 / -1; }
}

/* Changer son mot de passe, sous la fiche du compte. */
#formMotDePasse { margin-top: var(--pas-2); }
#formMotDePasse h2 { font-size: 1.15rem; margin: 0 0 var(--pas-2); }
#formMotDePasse .ec-message { margin-bottom: var(--pas-2); }