/* Profil.html : retouches posées sur carnet.css (que Carnet.dc.html et Inscription.html partagent). */

/* Enregistrer : sable plein quand il y a quelque chose à enregistrer, contour pointillé sinon. */
#enregistrer[disabled] { background: transparent; color: #5a4226; opacity: 1; box-shadow: none; outline: 2px dashed #8a6a3a; outline-offset: -2px; cursor: not-allowed; }
#enregistrer:not([disabled]) { font-size: 14px; padding: 14px 28px; }

/* Vitrine : l'état verrouillé (« Il manque N octets ») se lit sur le papier. */
.vitrine .bouton.or[disabled] { background: transparent; color: #5a4226; opacity: 1; border-color: transparent; box-shadow: none; outline: 2px dashed #8a6a3a; outline-offset: -2px; }

/* Champs de saisie : une case sur le papier, pour ne pas se confondre avec les lignes du carnet. */
input.encre { padding: 9px 12px; border: 1.5px solid #8a6a3a; border-radius: 3px; background: rgba(255, 252, 240, 0.7); }
input.encre:focus { border-color: var(--rouille); background: #FFFCF0; }

/* Fiche : la légende se lit à côté du portrait. */
#v-garde-robe .fiche { padding: 6px 0; background: none; box-shadow: none; gap: 28px; }
.identite small { font-size: 16px; line-height: 1.6; color: var(--encre); padding-left: 14px; border-left: 3px solid var(--rouille); }

/* Rotation du portrait : des cibles qui se touchent au doigt. */
.tourner button { width: 40px; height: 36px; font-size: 18px; }

/* Octets : la pastille se détache du bord du livre ; bas des pages : de l'air avant le folio. */
.dessus .solde { margin-bottom: 10px; }
.page { padding-bottom: 52px; }

/* Nuanciers ronds, comme à l'inscription. */
.nuance { border-radius: 50%; }
.nuance[aria-pressed=true] { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--papier), 0 0 0 5px var(--rouille); }

/* Rareté « rare » : vert sauge de la palette, plus le bleu. */
.r-rare { --r: #4E7A52; }

/* Compte : un titre par formulaire, un filet entre les deux. */
.groupe-titre { margin: 0; font: 700 13px 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre); }
#v-compte form.colonne + form.colonne, #v-compte form.colonne + .rangee { padding-top: 18px; border-top: 1px dashed rgba(122, 82, 40, 0.55); }

/* Newsletter : une case et sa phrase, lisibles à côté des formulaires. */
.case-profil { display: flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font: 400 14px/1.45 'IBM Plex Sans', system-ui, sans-serif; color: var(--encre); cursor: pointer; }
.case-profil input { flex: none; margin-top: 3px; accent-color: var(--encre); cursor: pointer; }
.case-profil input:disabled { cursor: not-allowed; }

/* Mobile : retour et octets sur la première rangée, les trois onglets pleine largeur dessous. */
@media (max-width: 860px) {
  /* Le livre ne dépasse plus du viewport : une colonne qui peut rétrécir sous sa largeur de contenu. */
  .pages { grid-template-columns: minmax(0, 1fr); }
  .identite small { font-size: 14px; padding-left: 10px; }
  .dessus .retour { order: 1; }
  .dessus .solde { order: 2; margin-left: auto; }
  .dessus .onglets { order: 3; flex: 1 1 100%; }
  .dessus .onglet { flex: 1; text-align: center; padding-inline: 6px; }
}