/* ═══════════════════════════════════════════════════════════════════
   assets/syn-profil.css — Mon profil (refonte, lot 12)

   Une vraie page : en-tête d'identité, puis six sections menées par une
   colonne de navigation (ordinateur) ou une bande défilante (téléphone).
   Tout est limité à #page-profil. Jetons : assets/syn-theme.css ; champs,
   boutons et rythme : assets/syn-communs.css (sections 4 et 6).
   ═══════════════════════════════════════════════════════════════════ */

#page-profil{ max-width:1120px; margin:0 auto; }
#page-profil [hidden]{ display:none !important; }
#page-profil a.btn{ text-decoration:none; }

/* ── En-tête ───────────────────────────────────────────────────────── */
#page-profil .prHero{ display:flex; align-items:center; gap:20px; padding:22px 24px; margin:4px 0 24px; border-radius:var(--r2);
  background:linear-gradient(120deg, var(--synT), var(--surface) 70%); border:1px solid var(--bd); box-shadow:var(--sh); }
#page-profil .prPhoto{ position:relative; flex-shrink:0; }
#page-profil .profileAvatar{ width:84px; height:84px; margin:0; border-radius:50%; font-size:30px; font-weight:800; overflow:hidden;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--surface); }
#page-profil .profileAvatar img, #page-profil .prPhotoApercu img{ width:100%; height:100%; object-fit:cover; display:block; }
#page-profil .prHeroTexte{ min-width:0; }
#page-profil .prNom{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--tx); overflow-wrap:anywhere; }
#page-profil .prHeroLigne{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:6px; }
#page-profil .prHeroLigne .profileUsername{ margin:0; font-family:var(--m); font-size:13px; font-weight:700; color:var(--mu); text-align:left; }
#page-profil .prHeroLigne .profileRole{ margin:0; padding:3px 10px; border-radius:var(--pill); background:var(--surface); border:1px solid var(--bd);
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
#page-profil .prHeroStatut{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13.5px; font-weight:600; color:var(--tx); }
#page-profil .prHeroStatut:empty{ display:none; }
#page-profil .prHeroStatut small{ color:var(--mu); font-weight:500; font-size:13px; }

/* Pastilles de disponibilité (mêmes couleurs que la messagerie). */
#page-profil .prPoint{ --pc:var(--ok); display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--pc); flex-shrink:0; }
#page-profil .prPoint[data-statut="occupe"]{ --pc:var(--amb); }
#page-profil .prPoint[data-statut="absent"]{ --pc:var(--mu); }
#page-profil .prPoint[data-statut="ne_pas_deranger"]{ --pc:var(--red); }
#page-profil .prPointHero{ position:absolute; right:2px; bottom:2px; width:20px; height:20px; box-shadow:0 0 0 4px var(--surface); }

/* ── Cadre : navigation + sections ─────────────────────────────────── */
#page-profil .prCadre{ display:grid; grid-template-columns:220px minmax(0, 1fr); gap:28px; align-items:start; }
#page-profil .prNav{ position:sticky; top:calc(var(--topbar-h, 56px) + 16px); display:flex; flex-direction:column; gap:4px;
  padding:8px; border:1px solid var(--bd); border-radius:var(--r2); background:var(--surface); box-shadow:var(--sh); }
#page-profil .prNavItem{ flex:none; display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:0 12px; border:0; border-radius:var(--r);
  background:none; box-shadow:none; color:var(--mu); font-family:var(--f); font-size:14px; font-weight:700; text-align:left; cursor:pointer;
  transition:background var(--tC) var(--eS), color var(--tC) var(--eS); }
#page-profil .prNavItem svg{ width:18px; height:18px; flex-shrink:0; }
#page-profil .prNavItem:hover{ background:var(--surface2); color:var(--tx); }
#page-profil .prNavItem.active{ background:var(--synT); color:var(--syn); box-shadow:none; }
#page-profil .prNavItem:focus-visible{ outline:2px solid var(--syn); outline-offset:2px; }
#page-profil .prNavItem .profileTabBadge{ margin-left:auto; }

#page-profil .prCorps.profileBody{ flex:none; overflow:visible; padding:0; }
#page-profil .prSec{ scroll-margin-top:calc(var(--topbar-h, 56px) + 20px); margin:0 0 40px; }
#page-profil .prSec:last-child{ margin-bottom:24px; }
#page-profil .prSecTete{ margin:0 0 14px; }
#page-profil .prSecT{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--tx); }
#page-profil .prSecSous{ margin:4px 0 0; font-size:13.5px; color:var(--mu); line-height:1.5; }

#page-profil .profileSection{ padding:20px; margin:0 0 16px; border:1px solid var(--bd); border-radius:var(--r2); background:var(--surface); box-shadow:var(--sh); }
#page-profil .profileSection:last-child{ margin-bottom:0; }
#page-profil .profileSectionTitle{ font-size:14px; font-weight:800; margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--bd); }
#page-profil .profileSection > .admHelp{ margin:0 0 12px; line-height:1.5; }
#page-profil .settingRow{ gap:16px; }

/* Raccourci vers la messagerie : une carte comme les autres. */
#page-profil .profileActionBtn{ display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:16px 20px; border:1px solid var(--bd); border-radius:var(--r2);
  background:var(--surface); box-shadow:var(--sh); color:var(--tx); text-decoration:none; transition:border-color var(--tC) var(--eS); }
#page-profil .profileActionBtn:hover{ border-color:var(--syn); }
#page-profil .profileActionIcon{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r); background:var(--synT); color:var(--syn); }
#page-profil .profileActionIcon svg{ width:20px; height:20px; }
#page-profil .profileActionText{ display:flex; flex-direction:column; flex:1; min-width:0; }
#page-profil .profileActionLabel{ font-weight:800; font-size:14px; }
#page-profil .profileActionSub{ font-size:12.5px; color:var(--mu); }
#page-profil .profileActionGo{ color:var(--mu); font-size:20px; }

/* ── Photo ─────────────────────────────────────────────────────────── */
#page-profil .prPhotoLigne{ display:flex; align-items:center; gap:20px; }
#page-profil .prPhotoApercu{ flex-shrink:0; width:96px; height:96px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--synT); color:var(--syn); font-size:32px; font-weight:800; }
#page-profil .prPhotoTexte{ min-width:0; }
#page-profil .prPhotoTexte .admHelp{ margin:0; line-height:1.5; }
#page-profil .prPhotoActions{ margin-top:14px; padding-top:0; }
#page-profil .prPhotoActions label.btn{ cursor:pointer; }
#page-profil .prPhotoActions .btn svg{ width:17px; height:17px; }
#page-profil #prPhotoFichier:focus-visible + .btn, #page-profil label.btn:focus-within{ outline:2px solid var(--syn); outline-offset:2px; }
#page-profil .prPhotoLigne.envoi .prPhotoApercu{ opacity:.5; }

/* ── Disponibilité ─────────────────────────────────────────────────── */
#page-profil .prStatuts{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 var(--fGap); }
#page-profil .prStatut{ display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:0 16px; border:1px solid var(--bd); border-radius:var(--pill);
  background:var(--surface); color:var(--tx); font-family:var(--f); font-size:14px; font-weight:700; cursor:pointer;
  transition:border-color var(--tC) var(--eS), background var(--tC) var(--eS); }
#page-profil .prStatut:hover{ border-color:var(--syn); }
#page-profil .prStatut[aria-pressed="true"]{ border-color:var(--syn); background:var(--synT); color:var(--syn); }
#page-profil .prStatut:focus-visible{ outline:2px solid var(--syn); outline-offset:2px; }

/* ── Heures calmes ─────────────────────────────────────────────────── */
#page-profil .prCalmeReglages{ margin-top:var(--fGap); padding-top:var(--fGap); border-top:1px dashed var(--bd); }
#page-profil .prCalmeReglages[hidden]{ display:none; }
#page-profil .prCalmeReglages .profileGrid{ max-width:360px; }
#page-profil .prJours{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--fLab); }
#page-profil .prJour{ width:42px; height:42px; border:1px solid var(--bd); border-radius:50%; background:var(--surface); color:var(--mu);
  font-family:var(--f); font-size:14px; font-weight:800; cursor:pointer; transition:background var(--tC) var(--eS), color var(--tC) var(--eS); }
#page-profil .prJour[aria-pressed="true"]{ background:var(--syn); border-color:var(--syn); color:#fff; }
#page-profil .prJour:focus-visible{ outline:2px solid var(--syn); outline-offset:2px; }
#page-profil .prCalmeEtat{ margin-top:var(--fGap); font-size:13px; color:var(--mu); }
#page-profil .prCalmeEtat.on{ color:var(--syn); font-weight:700; }

/* Éditeur des accès rapides (index-home.js) : icônes comme sur l'accueil. */
#page-profil .homeCfgIco svg, #page-profil .homeCfgChip svg{ width:16px; height:16px; vertical-align:-3px; color:var(--syn); }

/* ── Synchronisation des préférences ───────────────────────────────── */
#page-profil .prSync{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r); background:var(--surface2); color:var(--mu); font-size:13px; }
#page-profil .prSync svg{ width:18px; height:18px; flex-shrink:0; }
#page-profil .prSync.err{ color:var(--red); }

/* ── Déconnexion ───────────────────────────────────────────────────── */
#page-profil #profil-deconnexion .btn.full{ width:100%; }

/* ── Téléphone ─────────────────────────────────────────────────────── */
@media (max-width:860px){
  #page-profil .prCadre{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  #page-profil .prNav{ top:var(--topbar-h, 56px); z-index:6; flex-direction:row; gap:6px; margin:0 -16px; padding:8px 16px; overflow-x:auto;
    border:0; border-bottom:1px solid var(--bd); border-radius:0; box-shadow:none; background:var(--bg); scrollbar-width:none; }
  #page-profil .prNav::-webkit-scrollbar{ display:none; }
  #page-profil .prNavItem{ width:auto; flex:none; min-height:40px; padding:0 14px; border:1px solid var(--bd); border-radius:var(--pill); background:var(--surface); white-space:nowrap; }
  #page-profil .prNavItem.active{ border-color:var(--syn); }
  #page-profil .prSec{ scroll-margin-top:calc(var(--topbar-h, 56px) + 72px); margin-bottom:32px; }
}
@media (max-width:520px){
  #page-profil .prHero{ flex-direction:column; text-align:center; gap:14px; padding:22px 18px; }
  #page-profil .prHeroLigne, #page-profil .prHeroStatut{ justify-content:center; }
  #page-profil .prNom{ font-size:21px; }
  #page-profil .profileSection{ padding:16px; }
  #page-profil .prPhotoLigne{ flex-direction:column; text-align:center; }
  #page-profil .prPhotoActions{ justify-content:center; }
  #page-profil .prStatut{ flex:1 1 calc(50% - 8px); justify-content:flex-start; }
  #page-profil .prCalmeReglages .profileGrid{ grid-template-columns:1fr 1fr; max-width:none; }
}

:root.anims-off #page-profil *{ transition:none !important; animation:none !important; }