/* Compte et simulation de la V2 (31/10/2026) : initiale et menu du compte, bandeau de simulation. Chargé par l'accueil,
   la carte et la page de connexion. */

.compte { position: relative; }
.initiale { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--slate); color: var(--surface);
  display: grid; place-items: center; font: 600 15px var(--police-texte); cursor: pointer; padding: 0; }
.bouton-rond.initiale { width: 40px; height: 40px; border: 0; }
.silhouette { display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.menu-compte { position: absolute; z-index: 35; right: 0; top: calc(100% + 8px); width: 270px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--ombre-flottante); padding: 8px; font-size: 14px;
  color: var(--ink); text-align: left; }
.menu-compte__qui { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-wrap: anywhere; }
.menu-compte__qui small { display: block; color: var(--muted); font-size: 12px; }
.menu-compte__quota { padding: 6px 10px 8px; font-size: 13px; }
.jauge { height: 6px; border-radius: 3px; background: var(--voile); margin-top: 6px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--sage); }
a.menu-compte__item { text-decoration: none; color: var(--ink); }
.menu-compte__item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; cursor: pointer; }
.menu-compte__item:hover { background: var(--voile); }

/* Bandeau permanent pendant la simulation (§9.11) */
.bandeau-simulation { position: fixed; z-index: 45; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 12px;
  align-items: center; background: var(--brick); color: #fff; font-size: 12px; line-height: 1.3; padding: 4px 6px 4px 14px;
  border-radius: 0 0 10px 10px; box-shadow: var(--ombre); max-width: calc(100vw - 24px); }
.bandeau-simulation button { background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px;
  padding: 1px 10px; cursor: pointer; font: inherit; white-space: nowrap; }
.simulation-expert { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 12px; margin: 0 0 14px; }
.simulation-expert button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  padding: 7px 14px; font: 500 13px var(--police-texte); cursor: pointer; }

/* Formulaire « Contact » (01/11/2026) : dans le panneau latéral de l'accueil, de la connexion et de la carte. */
.contact { display: flex; flex-direction: column; gap: 12px; }
.contact p { margin: 0; }
.contact__champ { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.contact__champ input, .contact__champ textarea { font: 15px var(--police-texte); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.contact__champ input:focus, .contact__champ textarea:focus { outline: 2px solid var(--slate); outline-offset: 1px; }
.contact__compteur { align-self: flex-end; font-size: 12px; }
.contact__erreur { color: var(--alerte, #B3261E); font-size: 13px; }
.contact__piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__boutons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.contact__bouton { font: 500 14px var(--police-texte); border-radius: 999px; padding: 9px 18px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.contact__bouton--plein { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.contact__bouton:disabled { opacity: .5; cursor: wait; }
.contact__merci { font-size: 15px; }
/* Mode expert réservé à l'administrateur (01/11/2026) : bouton masqué tant que le compte n'est pas administrateur. */
#lien-expert[hidden] { display: none !important; }

/* Fenêtre de confirmation commune (01/11/2026, suppression du compte). */
dialog.fenetre { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink);
  padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: var(--ombre-flottante); }
dialog.fenetre::backdrop { background: rgba(20, 21, 22, .45); }
.fenetre__corps { padding: 22px 24px 20px; }
.fenetre h3 { font-family: var(--police-titre); font-weight: 400; font-size: 20px; margin: 0 0 10px; }
.fenetre p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.fenetre__boutons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.fenetre__bouton { font: 500 14px var(--police-texte); border-radius: 999px; padding: 9px 18px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.fenetre__bouton--plein { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.fenetre__bouton--danger { background: #B3261E; color: #fff; border-color: #B3261E; }

/* Alerte « Du nouveau autour de chez moi » (03/11/2026) : bloc de la Synthèse et fenêtre des conditions. */
/* Carte en relief avec une cloche (03/11/2026, style « cartes » du dossier). */
.alerte-bloc { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  background: var(--surface-relief); box-shadow: var(--ombre-bouton); }
.alerte-bloc__cloche { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--slate) 14%, transparent); color: var(--slate); }
.alerte-bloc__cloche .picto { width: 19px; height: 19px; }
.alerte-bloc h3 { margin: 0 0 3px; font-family: var(--police-texte); font-size: 14.5px; font-weight: 500; }
.alerte-bloc p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.alerte-bloc--active .alerte-bloc__cloche { background: color-mix(in srgb, var(--sage) 20%, transparent); color: var(--sage); }
.bouton-plein-petit { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--surface); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  box-shadow: var(--ombre-bouton); }
dialog.fenetre--large { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.fenetre__liste { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fenetre__liste li { margin-bottom: 8px; }
.fenetre__liste strong { color: var(--ink); font-weight: 500; }
.fenetre__case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.fenetre__case input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.fenetre__erreur { color: #B3261E; min-height: 1em; margin: 8px 0 0; }
.fenetre__bouton:disabled { opacity: .45; cursor: not-allowed; }

/* Menu du compte au survol (01/11/2026) : un pont invisible couvre l'espace entre le bouton et le menu. */
.menu-compte::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.menu-compte__item--danger { color: #B3261E; }
.menu-compte__separe { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
/* Compte ouvert sur un autre appareil (01/11/2026, une connexion à la fois) : bandeau en haut, au-dessus de tout. */
.bandeau-remplacee { position: fixed; z-index: 60; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px 12px 16px;
  background: var(--ink); color: var(--surface); border-radius: 12px; box-shadow: var(--ombre-flottante);
  font: 14px/1.45 var(--police-texte); }
.bandeau-remplacee button { flex-shrink: 0; background: none; border: 0; color: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 2px; }