/* ---------- PROFILE / HOUSEHOLD ---------- */
  .profile-content{flex:1; overflow-y:auto; padding:16px 18px;}
  .member-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border);}
  .member-row:last-child{border-bottom:none;}
  .member-row .avatar{width:38px; height:38px; font-size:14px; flex-shrink:0;}
  .member-info{flex:1; min-width:0;}
  .member-name{font-size:14px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px;}
  .member-role{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:1px;}
  .member-you{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--accent); background:var(--accent-bg); padding:2px 8px; border-radius:999px; font-weight:700; flex-shrink:0;}
  .add-member-btn{width:100%; margin-top:14px; border:1.5px dashed var(--border-soft); background:none; border-radius:14px; padding:13px; font-size:13px; font-weight:600; color:var(--ink-soft);}
  .add-member-btn:hover{color:var(--ink); border-color:var(--ink-soft);}
  .add-member-form{display:none; flex-direction:column; gap:8px; margin-top:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px;}
  .add-member-form.open{display:flex;}
  .add-member-form input, .add-member-form select{border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:10px 12px; font-size:13.5px; color:var(--ink); font-family:'Inter',sans-serif;}
  .add-member-form input:focus, .add-member-form select:focus{outline:none; border-color:var(--ink-soft);}
  .add-member-form button{background:var(--action); color:#fff; border:none; border-radius:999px; padding:10px; font-size:13px; font-weight:600;}
  .add-member-form button:hover{opacity:.88;}
  .add-member-actions{display:flex; gap:8px;}
  .add-member-actions button{flex:1;}
  .add-member-form button.add-member-cancel{background:none; border:1px solid var(--border-soft); color:var(--ink);}
  .invite-sent-note{font-size:12px; color:var(--sam); font-weight:600; text-align:center; margin:2px 0 0; min-height:16px; opacity:0; transition:opacity .2s;}
  .invite-sent-note.show{opacity:1;}
  .member-row.pending .avatar{filter:grayscale(.7); opacity:.65;}
  .member-row.pending .member-name{color:var(--ink-soft);}
  .pending-badge{display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--accent); background:var(--accent-bg); padding:3px 8px; border-radius:999px; font-weight:700; flex-shrink:0;}
  .pending-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .cancel-invite-btn{width:20px; height:20px; padding:0; border-radius:50%; border:none; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .cancel-invite-btn:hover{background:var(--bg); color:#D6362C;}
  .cancel-invite-btn svg{width:11px; height:11px;}
  .known-profiles-toggle{width:100%; border:1.5px dashed var(--border-soft); background:none; border-radius:10px; padding:9px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
  .known-profiles-toggle:hover{color:var(--ink); border-color:var(--ink-soft);}
  .known-contacts-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
  .known-contact-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-soft); background:var(--bg); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
  .known-contact-chip:hover{border-color:var(--accent); color:var(--accent);}
  .invitation-card{display:flex; align-items:center; gap:12px; background:var(--accent-bg); border:1px solid var(--accent); border-radius:14px; padding:13px 14px; margin-bottom:12px;}
  .invitation-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
  .invitation-text strong{font-size:13.5px; color:var(--ink);}
  .invitation-text span{font-size:12px; color:var(--ink-soft); line-height:1.4;}
  .invitation-accept{flex-shrink:0; border:none; background:var(--action); color:#fff; border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:600; font-family:'Inter',sans-serif;}
  .invitation-accept:hover{opacity:.88;}
  .invite-code-row{display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap;}
  .invite-code-label{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
  .invite-code{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; letter-spacing:.12em; color:var(--ink); background:var(--accent-bg); padding:2px 8px; border-radius:6px;}
  .invite-code-copy{background:none; border:none; font-size:11px; color:var(--accent); text-decoration:underline; padding:0;}
  .resend-link{background:none; border:none; font-size:11px; color:var(--ink-soft); text-decoration:underline; padding:0; margin-top:2px; flex-shrink:0;}
  .resend-link:hover{color:var(--ink);}
  .profile-note{font-size:12px; color:var(--ink-soft); line-height:1.55; margin-top:20px; font-style:italic;}
  .profile-section-divider{height:1px; background:var(--border); margin:26px 0 20px;}
  .account-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px;}
  .account-field-label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
  .account-field-label:not(:first-child){margin-top:14px;}
  .account-name-row{display:flex; gap:8px;}
  .account-name-row input{flex:1; min-width:0; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:10px 12px; font-size:13.5px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
  .account-name-row input:focus{outline:none; border-color:var(--ink-soft);}
  .account-name-row button{flex-shrink:0; border:none; background:var(--action); color:#fff; border-radius:10px; padding:0 16px; font-size:12.5px; font-weight:600;}
  .account-name-row button:hover{opacity:.88;}
  .account-email{font-size:13px; color:var(--ink-soft); padding:10px 12px; background:var(--bg); border-radius:10px;}
  .account-toggle-row{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:13px; color:var(--ink); cursor:pointer;}
  .account-toggle{appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px; background:var(--border); position:relative; cursor:pointer; flex-shrink:0; transition:background .15s; margin:0;}
  .account-toggle::before{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .account-toggle:checked{background:var(--accent-fill);}
  .account-toggle:checked::before{transform:translateX(16px);}
  .space-row{display:flex; align-items:center; gap:8px; padding:8px 2px; border-bottom:1px solid var(--border);}
  .space-row:last-child{border-bottom:none;}
  .space-row.active-space{background:var(--accent-bg); border-radius:10px; padding:8px 10px; border-bottom:none;}
  .space-name-input{flex:1; min-width:0; border:1px solid transparent; background:none; border-radius:8px; padding:6px 8px; font-size:13.5px; font-weight:700; color:var(--ink); font-family:'Inter',sans-serif;}
  .space-name-input:hover{border-color:var(--border);}
  .space-name-input:focus{outline:none; border-color:var(--ink-soft); background:var(--surface);}
  .space-active-badge{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--accent); background:var(--surface); padding:3px 8px; border-radius:999px; font-weight:700; flex-shrink:0;}
  .space-switch-btn{flex-shrink:0; border:1px solid var(--border-soft); background:none; border-radius:999px; padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
  .space-switch-btn:hover{color:var(--ink); border-color:var(--ink-soft);}
  .space-card{border:1px solid var(--border); border-radius:14px; padding:4px 10px 10px; margin-bottom:10px;}
  .space-card.active-space{border-color:var(--accent);}
  .space-card .space-row{border-bottom:none;}
  .space-card-members{border-top:1px solid var(--border); margin-top:2px;}
  .space-card-empty{font-size:12px; color:var(--ink-soft); padding:10px 4px;}
  .space-card .add-member-btn{margin-top:8px; padding:10px;}
  .space-card .add-member-form{margin-top:8px;}
  .sign-out-btn{width:100%; margin-top:16px; background:none; border:1px solid var(--border-soft); border-radius:999px; padding:12px; font-size:13px; font-weight:600; color:#D6362C; display:flex; align-items:center; justify-content:center;}
  .sign-out-btn:hover{background:#F3DAD7; border-color:#D6362C;}
  .icon-circle.active{background:var(--action); color:#fff; border-color:var(--action);}
  .icon-circle svg{width:15px; height:15px;}


/* ---- demande d'accès par code ----
   Volontairement en retrait : la personne est là, visible, mais n'a encore
   aucun droit tant qu'un membre en place n'a pas accepté. */
.member-row.requested{opacity:.55;}
.member-row.requested .avatar{filter:grayscale(1);}
.request-note{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:4px;}
.request-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.request-accept{border:none; background:var(--action); color:#fff; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; font-family:'Inter',sans-serif; white-space:nowrap;}
.request-accept:hover{opacity:.88;}
/* La carte du demandeur, elle, reste pleinement lisible : c'est son seul repère
   pour savoir que sa demande est partie. */
.request-card{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 15px; margin-bottom:10px;}
.request-card-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.request-card-text strong{font-size:13.5px; color:var(--ink);}
.request-card-text span{font-size:12px; color:var(--ink-soft); line-height:1.45;}
.request-cancel{flex-shrink:0; border:1px solid var(--border-soft); background:none; color:var(--ink-soft); border-radius:999px; padding:7px 13px; font-size:12px; font-weight:600; font-family:'Inter',sans-serif;}
.request-cancel:hover{color:#8B4A3F; border-color:#8B4A3F;}

/* ---- code de l'espace ----
   Collé sous le nom : marge du haut négative pour annuler l'espacement de
   .space-row, sinon le code flotterait entre le nom et les membres sans se
   rattacher visuellement à l'un ou à l'autre. */
.space-code-row{display:flex; align-items:center; gap:7px; margin:-4px 0 10px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.space-code-label{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.space-code{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--ink); background:var(--bg); border-radius:7px; padding:3px 9px;}
.space-code-copy{width:26px; height:26px; flex-shrink:0; border:1px solid var(--border); background:var(--surface); border-radius:8px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
.space-code-copy svg{width:13px; height:13px;}
.space-code-copy:hover{color:var(--ink); border-color:var(--ink-soft);}

/* ---- code QR de l'espace ----
   Fond blanc obligatoire derrière le motif : un QR sur fond crème passe encore,
   mais la marge de contraste tombe et certains appareils photo décrochent. */
.qr-overlay{position:fixed; inset:0; z-index:80; background:rgba(30,26,22,.55); display:none; align-items:center; justify-content:center; padding:24px;}
.qr-overlay.open{display:flex;}
.qr-card{background:var(--surface); border-radius:20px; padding:22px 22px 18px; max-width:300px; width:100%; text-align:center;}
.qr-space{font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:var(--ink); margin-bottom:14px; word-break:break-word;}
.qr-visuel{background:#fff; border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center;}
.qr-visuel svg{display:block; width:100%; height:auto; max-width:220px;}
.qr-absent{font-size:12.5px; line-height:1.55; color:var(--ink-soft); padding:28px 10px; text-align:center;}
.qr-code{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:700; letter-spacing:.2em; color:var(--ink); margin-top:14px;}
.qr-hint{font-size:12px; line-height:1.5; color:var(--ink-soft); margin:10px 0 16px;}
.qr-close{width:100%; border:none; background:var(--action); color:#fff; border-radius:12px; padding:11px; font-size:13.5px; font-weight:600; font-family:'Inter',sans-serif;}

  /* ---------- la pastille du compte ----------
     Ce qui distingue une personne d'une autre dans une journée pleine de
     pastilles : une photo, ou à défaut une couleur choisie. */
  .account-look{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
  .account-look-avatar{flex-shrink:0;}
  .account-look-avatar .avatar{width:52px; height:52px; font-size:19px; border-width:2px;}
  .account-look-actions{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0;}
  .account-look-btn{
    border:1px solid var(--border-soft); background:var(--bg); border-radius:9px;
    padding:7px 11px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    color:var(--ink); cursor:pointer;
  }
  .account-look-btn:hover{border-color:var(--ink-soft);}
  .account-look-btn.discret{background:none; border-color:transparent; color:var(--ink-soft); padding:2px 0; text-decoration:underline;}
  .account-look-btn.discret:hover{color:#E5342A;}
  .account-look-note{font-size:11px; font-style:italic; color:var(--ink-soft);}

  .account-colors{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:4px;}
  .account-color{
    width:28px; height:28px; border-radius:50%; border:2px solid transparent;
    cursor:pointer; padding:0; box-shadow:0 0 0 1px var(--border) inset;
  }
  .account-color.choisie{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface) inset;}

  /* Une pastille qui porte une photo : l'image remplit le rond. */
  .avatar-photo{background:var(--surface-soft); overflow:hidden; padding:0;}
  .avatar-photo img{width:100%; height:100%; object-fit:cover; display:block;}

  /* ---------- UN ESPACE SE REPLIE, SOUS SA BANDE NOIRE ----------
     Trois espaces dépliés d'un coup — chacun avec ses membres, son code et son
     formulaire d'ajout — font une page qu'on parcourt au pouce sans rien
     trouver. La bande reprend celle des cartes de projet : même geste, même
     langage, on sait qu'on peut appuyer dessus. */
  .space-card{padding:0; overflow:hidden;}
  .espace-entete{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--action); padding:11px 8px 11px 14px; cursor:pointer; user-select:none;
  }
  .espace-entete:hover{background:#2C2823;}
  .espace-entete-texte{min-width:0; flex:1;}
  .espace-entete-texte h3{margin:0; font-size:14.5px; font-weight:600; color:#fff;}
  .espace-entete-sous{
    font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase;
    letter-spacing:.06em; color:rgba(255,255,255,.55); margin-top:3px;
  }
  .espace-entete-actions{display:flex; align-items:center; gap:1px; flex-shrink:0;}
  .espace-utiliser{
    border:1px solid rgba(255,255,255,.3); background:none; color:#fff; border-radius:999px;
    padding:5px 11px; font-size:11.5px; font-weight:600; font-family:'Inter',sans-serif;
    white-space:nowrap;
  }
  .espace-utiliser:hover{background:rgba(255,255,255,.16);}
  .espace-corps{padding:4px 10px 10px;}
  .space-card.replie .espace-corps{display:none;}
  .space-card.active-space{border-color:var(--ink-soft);}

  /* Sortir quelqu'un : présent seulement pour qui a créé l'espace, et discret
     jusqu'à ce qu'on le vise — ce n'est pas un geste à faire par mégarde. */
  .membre-retirer{
    flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
    background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  }
  .membre-retirer svg{width:15px; height:15px;}
  .membre-retirer:hover{border-color:#D6362C; color:#D6362C; background:#FDF3F2;}

  /* Confier la gestion : un bouclier, allumé quand la personne gère. Le mot
     « Fondateur » à côté de qui a créé l'espace — c'est la seule chose qui
     explique pourquoi cette ligne-là n'a ni bouclier ni bouton retirer. */
  .membre-gestion{
    flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
    background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
    margin-right:2px;
  }
  .membre-gestion svg{width:15px; height:15px;}
  .membre-gestion:hover{border-color:var(--ink-soft); color:var(--ink);}
  .membre-gestion.on{background:var(--action); border-color:var(--action); color:#fff;}
  .membre-role{
    flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
    border:1px solid var(--accent-bg); background:var(--accent-bg); border-radius:5px;
    padding:3px 7px 2px;
  }
  .espace-lecture{
    font-size:12px; line-height:1.5; color:var(--ink-soft); font-style:italic;
    padding:10px 2px 4px;
  }

  /* ---------- L'ADRESSE ----------
     La raison d'abord, les champs ensuite : une demande d'adresse qui ne dit
     pas à quoi elle sert se fait refuser, et c'est normal. */
  .adresse-pourquoi{
    margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--ink-soft);
  }
  .adresse-pourquoi b{color:var(--ink); font-weight:600;}
  .adresse-champ{
    width:100%; border:1px solid var(--border); border-radius:9px; background:var(--bg);
    padding:9px 11px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  }
  .adresse-champ:focus{outline:none; border-color:var(--accent);}
  .adresse-duo{display:grid; grid-template-columns:1fr 118px; gap:9px; margin-top:2px;}
  .adresse-pied{display:flex; align-items:center; gap:10px; margin-top:13px;}
  .adresse-pied button{
    margin-left:auto; flex-shrink:0; background:var(--action); color:#fff; border:none;
    border-radius:9px; padding:9px 16px; font-family:'Inter',sans-serif;
    font-size:13.5px; font-weight:600; cursor:pointer;
  }
  /* La zone trouvée : la preuve que l'adresse a servi à quelque chose. */
  .adresse-zone{
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--ink-soft); line-height:1.5;
  }
  .adresse-zone.trouvee{color:var(--accent);}

  /* Le menu de la langue, dans les réglages du compte : même allure que les
     autres champs de la carte, pour qu'il se lise comme un réglage et non
     comme un bouton d'action. */
  .account-select{
    width:100%; box-sizing:border-box; margin-top:4px;
    border:1px solid var(--border); background:var(--surface); border-radius:10px;
    padding:10px 12px; font-size:14px; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .account-select:focus{outline:none; border-color:var(--ink-soft);}

.feedback-form p { font-size:13px; line-height:1.5; }
.feedback-form textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:110px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; }
.feedback-form button { margin-top:12px; border:0; border-radius:10px; padding:12px 16px; background:var(--action); color:white; font-weight:600; }
.feedback-form button:disabled { opacity:.55; }