/* Hey Mika : Paramètres (maquettes 19 et 20) : Mon compte, Équipe, Abonnement et factures, Notifications.
   Mesures prises sur les maquettes à l'échelle 1,8 (fenêtre de 1600×1000). Toutes les classes de ce fichier commencent
   par « pr- » (CHANTIER, règle 14) ; les composants du socle (carte, champ, saisie, btn, badge, avatar, inter, modale)
   sont repris tels quels et seulement ajustés sous une classe « pr- ». Aucune couleur hors des variables de base.css. */

/* ---------- titre et onglets soulignés ---------- */
.pr-titre { margin: 0; letter-spacing: 0; } /* la maquette n'a pas l'interlettrage de .t-page : « Paramètres » = Syne 700 33 px, 211,7 px d'encre */
.pr-onglets { display: flex; gap: 5px; margin-top: 20px; border-bottom: 1px solid var(--ligne-2); }
.pr-onglet { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 47px; padding: 0 15px; font-size: 15.75px; font-weight: 600; color: var(--texte); white-space: nowrap; cursor: pointer; transition: color .15s; }
.pr-onglet svg { width: 16px; height: 16px; flex: none; }
.pr-onglet:hover, .pr-onglet[aria-current="page"] { color: var(--encre); }
.pr-onglet[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); }
.pr-contenu { margin-top: 24.5px; }
.pr-contenu > * + * { margin-top: 20px; }

/* ---------- cartes ---------- */
.pr-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.pr-carte { min-width: 0; padding: 25px 25px 24px; }
.pr-titre-carte { margin: 0; font: 700 20.25px/26.5px var(--titre); color: var(--encre); }
.pr-titre-carte, .pr-modale .modale-entete h2, .pr-prix-ht { font-variant-numeric: lining-nums; } /* Syne : chiffres alignés, comme « Membres · 2 / 3 » (maquette 20) */
.pr-carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.pr-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; color: var(--texte); }
.pr-note svg { width: 15px; height: 15px; flex: none; }

/* boutons de 38 px (Changer la photo, Mettre à jour, Déconnecter tous les appareils, Inviter un membre) */
.btn.pr-btn { height: 38px; padding: 0 17px; gap: 8px; font-size: 14.5px; font-weight: 600; }
.btn.pr-btn.btn-secondaire { padding: 0 16px; }
.btn.pr-btn svg { width: 16px; height: 16px; }
.btn.pr-btn-48 { height: 50px; padding: 0 20px; gap: 8px; font-size: 15px; font-weight: 600; }
.btn.pr-btn-48 svg { width: 16px; height: 16px; }
/* lien d'action en texte orange (Mot de passe oublié ?, Déconnecter, Modifier) */
.pr-lien { display: inline; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--orange-texte); white-space: nowrap; cursor: pointer; }
.pr-lien:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.pr-lien:disabled { cursor: not-allowed; opacity: .5; }

/* ---------- champs ---------- */
.champ.pr-champ { gap: 6.25px; }
.pr-champ > label, .pr-label { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.pr-page .saisie, .pr-modale .saisie { height: 51px; font-size: 15.5px; } /* maquettes 19 et 20 : champs de 51 px, texte de 15,5 px */
.pr-erreur { margin: 0; }
.pr-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

/* ---------- Mon compte : informations ---------- */
.pr-photo { display: flex; align-items: center; gap: 16px; margin-top: 17.5px; }
.pr-photo.pr-survol .avatar { box-shadow: 0 0 0 3px var(--orange); }
.pr-avatar-62 { width: 62px; height: 62px; font-size: 19.5px; }
.pr-avatar-36 { width: 36px; height: 36px; font-size: 13px; }
.pr-teinte-bleu { background: var(--bleu-fond); color: var(--bleu); }
.pr-teinte-vert { background: var(--vert-fond); color: var(--vert); }
.pr-teinte-jaune { background: var(--jaune-fond); color: var(--jaune); }
.pr-teinte-peche { background: var(--peche); color: var(--orange-texte); }
.pr-teinte-sable { background: var(--sable); color: var(--texte); }
.pr-infos .pr-deux { margin-top: 17.25px; }
.pr-champ-email { margin-top: 15px; }

/* ---------- Mon compte : mot de passe ---------- */
.pr-form-mdp { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.pr-champ .saisie-groupe > .droite { right: 10px; }
.pr-oeil, .pr-coche { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--encre); }
.pr-oeil:hover { background: var(--sable); }
.pr-coche[hidden] { display: none; }
.pr-champ .saisie-groupe svg { width: 16px; height: 16px; }
.pr-jauge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; height: 5px; margin-top: 0.75px; }
.pr-jauge i { border-radius: 99px; background: var(--sable-2); transition: background .2s; }
.pr-jauge[data-niveau="1"] i:nth-child(-n+1) { background: var(--orange); }
.pr-jauge[data-niveau="2"] i:nth-child(-n+2) { background: var(--orange-2); }
.pr-jauge[data-niveau="3"] i:nth-child(-n+3), .pr-jauge[data-niveau="4"] i { background: var(--vert-vif); }
.pr-mdp-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 5.5px; }

/* ---------- listes à lignes (appareils, paiement, notifications) ---------- */
.pr-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.pr-ligne { display: flex; align-items: center; gap: 11px; padding: 11.25px 0; border-top: 1px solid var(--ligne); }
.pr-ligne:first-child { border-top: 0; }
.pr-carre { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sable); color: var(--orange-texte); }
.pr-carre svg { width: 16px; height: 16px; }
.pr-ligne-texte { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pr-ligne-texte b { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--encre); overflow-wrap: anywhere; }
.pr-ligne-texte > span { font-size: 12px; line-height: 1.45; color: var(--texte); overflow-wrap: anywhere; }
.badge.pr-badge { height: 27px; padding: 0 12px; font-size: 13px; }
.pr-ligne-texte .pr-lien { font-size: inherit; } /* « Modifier », « Ajouter un numéro » : à la taille de leur ligne */
.pr-vide { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; }
.pr-vide .tourne, .pr-ligne .tourne { animation: tourne .9s linear infinite; }

/* ---------- Équipe ---------- */
.pr-table { margin-top: 14px; }
.pr-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 135px; align-items: center; column-gap: 16px; min-height: 66px; border-top: 1px solid var(--ligne); }
.pr-tete { min-height: 33px; border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.pr-tete + .pr-tr { border-top: 1px solid var(--ligne); }
.pr-qui { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pr-statut { display: flex; align-items: center; gap: 8px; }
.pr-role { font-size: 13.5px; font-weight: 600; color: var(--encre); }
.pr-choix-role { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px; border: 1px solid var(--champ-bord); border-radius: var(--r-pilule); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--encre); cursor: pointer; }
.pr-choix-role:hover { border-color: #D6CEC8; }
.pr-choix-role svg { width: 14px; height: 14px; }
.menu.pr-menu-roles { width: 320px; }
.menu.pr-menu-roles button[role="menuitemradio"] { align-items: flex-start; }
.menu.pr-menu-roles button[role="menuitemradio"] > svg { margin-left: auto; color: var(--orange-texte); }
.pr-menu-role { display: flex; flex-direction: column; gap: 2px; }
.pr-menu-role b { font-size: 14px; font-weight: 600; }
.pr-menu-role small { font-size: 12.5px; color: var(--texte); white-space: normal; }

/* ---------- fenêtres (Inviter un membre, lien à copier, numéro WhatsApp) ---------- */
@media (min-width: 1081px) { .voile.pr-voile { left: 297px; } }
.modale.pr-modale { padding: 31px 32px 31px; }
.pr-modale .modale-entete h2 { margin-top: 5.6px; font-size: 27.25px; }
.pr-modale .modale-entete p { margin-top: 13.6px; font-size: 13.25px; }
.pr-modale .fermer svg { width: 16px; height: 16px; }
.pr-modale .modale-pied { gap: 11px; margin-top: 22.1px; }
.pr-modale .modale-pied .btn { height: 49px; padding: 0 25px; gap: 9px; font-size: 15.5px; font-weight: 600; }
.pr-modale .modale-pied .btn-secondaire { padding: 0 23px; }
.pr-modale .modale-pied .btn svg { width: 16px; height: 16px; }
.pr-inviter { margin-top: 17.9px; }
.pr-form-tel { margin-top: 22px; }
.pr-inviter .pr-champ > label { font-size: 14px; }
.pr-roles { display: flex; flex-direction: column; gap: 9.8px; margin-top: 18.5px; }
.pr-roles .pr-label { margin: 0 0 -2.75px; font-size: 14px; }
.pr-option { display: flex; align-items: center; gap: 13px; min-height: 65.5px; padding: 10px 15px; border: 1px solid var(--champ-bord); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.pr-option:hover { border-color: #D6CEC8; }
.pr-option.choisi { border-color: var(--orange); background: var(--peche-clair); box-shadow: var(--anneau); }
.pr-option input:focus-visible + .rond { box-shadow: var(--anneau); }
.pr-option:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.pr-option-texte { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-option .pr-option-texte { gap: 2px; padding-top: 2px; }
.pr-option-texte b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--encre); }
.pr-option-texte > span { font-size: 12.25px; line-height: 1.4; color: var(--texte); }
.pr-wa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18.5px; }
.pr-mention { flex: 1; min-width: 0; margin: 0; font-size: 12.25px; line-height: 1.45; color: var(--texte); }
.pr-copie { margin-top: 24px; }
.pr-copie-ligne { display: flex; gap: 10px; }
.pr-copie-ligne .saisie { flex: 1; min-width: 0; font-size: 14px; color: var(--texte); }

/* ---------- Abonnement et factures ---------- */
.pr-formule .pr-carte-entete { min-height: 0; } /* titre au même niveau que « Paiement » */
.pr-formule-bloc { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; padding: 20px 22px; border-radius: var(--r-bloc); background: var(--sable); }
.pr-formule-nom { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--encre); }
.pr-formule-detail { font-size: 14.5px; color: var(--texte); }
.pr-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 14.5px; color: var(--texte); }
.pr-prix-ht { font: 700 30px/1.1 var(--titre); color: var(--encre); }
.pr-prix-ttc { font-size: 13px; color: var(--texte); }
.pr-carte-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.pr-table-factures { margin-top: 10px; }
.pr-table-factures .pr-tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 96px; min-height: 58px; font-size: 13.5px; color: var(--encre); }
.pr-table-factures .pr-tr > :last-child { justify-self: end; }
.pr-table-factures b { font-weight: 600; }

/* ---------- petits écrans ---------- */
@media (max-width: 1080px) {
  .pr-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pr-onglets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-bottom: 0; margin-top: 16px; }
  .pr-onglet { height: auto; min-height: 46px; padding: 8px 10px; gap: 8px; font-size: 14px; line-height: 1.2; white-space: normal; border-bottom: 1px solid var(--ligne-2); }
  .pr-contenu { margin-top: 20px; }
  .pr-carte { padding: 20px 18px; }
  .pr-titre-carte { font-size: 19px; }
  .pr-carte-entete { flex-wrap: wrap; }
  .pr-deux { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pr-photo { flex-wrap: wrap; }
  .pr-mdp-pied { flex-wrap: wrap; }
  .pr-tete { display: none; }
  .pr-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "qui statut" "role role"; row-gap: 8px; padding: 12px 0; }
  .pr-tr:first-of-type, .pr-tete + .pr-tr { border-top: 0; }
  .pr-qui { grid-area: qui; }
  .pr-col-role { grid-area: role; padding-left: 48px; }
  .pr-statut { grid-area: statut; justify-content: flex-end; }
  .pr-table-factures .pr-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; }
  .pr-modale .modale-entete h2 { margin-top: 4px; font-size: 23px; }
  .pr-option { min-height: 0; padding: 12px 14px; }
  .pr-roles { gap: 8px; }
  .pr-modale .modale-pied { flex-wrap: wrap; }
  .pr-mention { flex-basis: 100%; }
  .pr-modale .modale-pied .btn { flex: 1; padding: 0 14px; }
  .pr-copie-ligne { flex-wrap: wrap; }
  .pr-copie-ligne .btn { width: 100%; }
}