/* L'espace du compte Littero (frontend/compte/), par-dessus exposant.css. */

.cptCourriel { color: var(--muted, #5a4a40); margin-top: .25rem; }
.cptDeco { margin: .25rem 0 0; }
.cptDeco button {
  background: none; border: 0; padding: .4rem 0; min-height: 44px;
  color: var(--muted, #5a4a40); text-decoration: underline; cursor: pointer; font: inherit;
}
.cptNombre { font-weight: 400; color: var(--muted, #5a4a40); font-size: .8em; }

.cptListe { list-style: none; margin: 0; padding: 0; }
.cptListe li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  padding: .6rem 0; border-top: 1px solid rgba(42, 33, 28, .15);
}
.cptListe li:first-child { border-top: 0; }
.cptListe small { color: var(--muted, #5a4a40); }
.cptRetirer { margin-left: auto; }
.cptRetirer button {
  background: none; border: 0; padding: .4rem .2rem; min-height: 44px;
  color: var(--muted, #5a4a40); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9em;
}

/* La connexion en deux colonnes : le formulaire, puis « Pourquoi un compte ? »
   sur un fond plus clair. Empilées au téléphone. */
.cptConnexion {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-3);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.cptConnexionForm, .cptConnexionPourquoi { padding: 26px 22px 24px; }
.cptConnexionForm h1 { font-size: clamp(28px, 4vw, 32px); margin: 0 0 var(--sp-2); }
.cptConnexionForm p { color: var(--fg-2); }
.cptConnexionForm .expoForm .btn { align-self: stretch; min-height: 48px; margin-top: var(--sp-3); }
.cptConnexionPourquoi { background: var(--beige-50); border-top: 1px solid var(--border-soft); }
.cptConnexionPourquoi h2 { margin: 0 0 var(--sp-4); font-size: 22px; line-height: 1.15; color: var(--fg); }
@media (min-width: 760px) {
  .cptConnexion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cptConnexionForm, .cptConnexionPourquoi { padding: 40px 40px 36px; }
  .cptConnexionPourquoi { border-top: 0; border-left: 1px solid var(--border-soft); }
  .cptConnexionPourquoi h2 { font-size: 24px; }
}

.cptAvantages { list-style: none; margin: 0; padding: 0; line-height: 1.5; color: var(--fg-2); }
.cptAvantages li + li { margin-top: .85rem; }
.cptAvantages strong { color: var(--fg); }
.cptPasDeCompte {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border-soft);
  font-size: 14px; line-height: 1.5; color: var(--fg-3);
}

/* ---------- « Mon compte » : menu sur le côté (Simon, 2026-11-04) ----------
   Une colonne de menu, une rubrique à la fois à côté. Au téléphone, le menu
   passe au-dessus et ses liens deviennent des pastilles. */
.expoCorps--large { max-width: 1140px; }
.cptMise { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }
.cptCote {
  flex: 1 1 240px; max-width: 260px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 20px 0 10px; box-shadow: var(--shadow-sm);
}
.cptContenu { flex: 999 1 560px; min-width: 0; }
.cptQui { padding: 0 20px 14px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }
.cptNom { font-family: var(--font-display); font-size: 22px; color: var(--fg); overflow-wrap: anywhere; }
.cptQui .cptCourriel { font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.cptMenu { display: flex; flex-direction: column; padding-top: 6px; font: 500 15px/1.3 var(--font-sans); }
.cptMenu a {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  min-height: 44px; box-sizing: border-box; padding: 10px 20px; color: var(--fg-2); text-decoration: none;
}
.cptMenu a:hover { background: var(--beige-50); color: var(--brand); }
.cptMenu a[aria-current="page"] { background: var(--mauve-100); color: var(--brand); font-weight: 700; box-shadow: inset -3px 0 0 var(--brand); }
.cptMenuN { color: var(--fg-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.cptMenuSep { height: 1px; background: var(--border-soft); margin: 8px 20px; }
.cptMenu .cptDeco { margin: 0; }
.cptMenu .cptDeco button { width: 100%; text-align: left; padding: 10px 20px; text-decoration: none; font: 500 15px/1.3 var(--font-sans); color: var(--fg-3); }
.cptMenu .cptDeco button:hover { color: var(--brand); }

/* ---------- Les deux volets : Lecteur et Exposant (Simon, 2026-11-08) ----------
   Deux onglets égaux en tête de la colonne, pour qui tient une fiche
   d'exposant. Le point dit qu'un visiteur a écrit. */
.cptCote--volets { padding-top: 0; overflow: hidden; }
.cptVolets { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-soft); }
.cptVolets a {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--beige-50); color: var(--fg-3); text-decoration: none;
  font: 600 14px/1 var(--font-sans); border-bottom: 2px solid transparent;
}
.cptVolets a + a { border-left: 1px solid var(--border-soft); }
.cptVolets a:hover { color: var(--brand); }
.cptVolets a[aria-current="true"] { background: var(--paper); color: var(--brand); border-bottom-color: var(--brand); }
.cptPoint { width: 8px; height: 8px; margin: -10px 0 0 4px; border-radius: 50%; background: var(--brand); }
.cptCote--volets .cptQui { padding-top: 16px; }
.cptQui .pastille { align-self: flex-start; margin-top: 6px; }
.cptQuiEdition { font-size: 13px; color: var(--fg-3); }
.cptMenuN--alerte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--paper); font: 700 12px/20px var(--font-sans); text-align: center; }
.cptSr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Le début de chaque page : un titre, une phrase. */
.cptTete { margin-bottom: var(--sp-5); }
.cptTete h1 { margin: 0 0 6px; }
.cptTete p { margin: 0; color: var(--fg-2); font-size: 1.05rem; }
.cptLigne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cptLigne p { margin: 0; flex: 1 1 280px; }

.cptContenu > h1 { margin-top: 0; }
.cptContenu h2 { margin-top: 0; }
.cptIntro { color: var(--fg-2); font-size: 1.05rem; margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }

/* Pour commencer : trois cartes qui mènent chacune à une partie du site. */
.cptCartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.cptCarte {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-3);
  color: var(--fg); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s;
}
.cptCarte:hover { border-color: var(--brand); transform: translateY(-1px); }
.cptCarte svg { color: var(--mauve-500); }
.cptCarteTitre { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.cptCarteTexte { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.cptCarteLien { margin-top: auto; font: 600 14px/1.3 var(--font-sans); color: var(--brand); }

/* Les Rendez-vous : le bandeau prune, l'édition à gauche, « Exposer » à droite. */
.cptRdv {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6);
  background: var(--brand); color: var(--paper); border-radius: var(--r-3); padding: 26px 28px;
}
.cptRdv h2 { font-family: var(--font-display); color: var(--paper); font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
.cptRdv p { margin: 0 0 10px; color: var(--mauve-100); line-height: 1.5; }
.cptRdvSurtitre { font: 600 12px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mauve-200) !important; }
.cptRdvBloc--exposer { border-left: 1px solid var(--mauve-500); padding-left: var(--sp-6); }
.cptRdvBouton {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; margin: 4px 0 10px;
  padding: 0 18px; border-radius: var(--r-full); background: var(--paper); color: var(--brand);
  font: 600 14px/1 var(--font-sans); text-decoration: none;
}
.cptRdvBouton--contour { background: transparent; color: var(--paper); border: 1px solid var(--paper); }
.cptRdvNote { font-size: 13px; color: var(--mauve-200) !important; }
.cptRubrique .cptRdvNote { color: var(--fg-3) !important; }

/* Une rubrique : sa carte, ou le vide qui dit où trouver de quoi la remplir. */
.cptRubrique, .cptVide {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--sp-6); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4);
}
.cptVide { border-style: dashed; background: var(--beige-50); text-align: center; }
/* Les sections de « Réglages » : un titre court ; la suppression se distingue. */
.cptRubrique > h2 { font-size: 1.15rem; margin: 0 0 var(--sp-3); }
.cptRubrique--danger { border-color: #e2b7ae; }
.cptVide p { max-width: 52ch; margin: 0 auto var(--sp-4); color: var(--fg-2); line-height: 1.5; }
.cptQuiExpose { margin: 0; color: var(--fg-2); }
.cptExposer .btn { align-self: flex-start; }

@media (max-width: 760px) {
  .cptCote { max-width: none; flex-basis: 100%; padding: 16px 0 8px; }
  .cptCote--volets { padding-top: 0; }
  /* Une seule ligne de pastilles qui défile, comme dans la maquette. */
  .cptMenu { flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 12px 16px 6px; overflow-x: auto; scrollbar-width: thin; }
  .cptMenu a, .cptMenu .cptDeco button {
    flex: none; white-space: nowrap;
    min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: #fff;
  }
  .cptMenu .cptDeco { flex: none; }
  .cptMenu a[aria-current="page"] { box-shadow: none; background: var(--brand); color: var(--paper); border-color: var(--brand); }
  .cptMenu a[aria-current="page"] .cptMenuN { color: var(--mauve-100); }
  .cptMenuSep { display: none; }
  .cptMenu .cptDeco button { width: auto; }
  .cptQui { padding: 0 16px 12px; }
  .cptRdvBloc--exposer { border-left: 0; padding-left: 0; border-top: 1px solid var(--mauve-500); padding-top: var(--sp-5); }
  .cptRdv { padding: 22px 20px; }
}
.cptExposer .checkLine { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.45; cursor: pointer; }
.cptExposer .checkLine input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }