/* ---------- Bulle de profil (03/11) : profil.js. Au téléphone, une bulle grise (vide) remplace « Se connecter » ; une fois
   connecté, sur ordinateur comme au téléphone, la pilule « Se connecter » devient la bulle avec la photo de la personne.
   Couleurs prises sur la page (--photo, --encre, --surface…), avec des valeurs de repli pour les pages qui ne les ont pas. */
.profil-bulle { position: relative; display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--photo, #dfe1e6); color: var(--faible, #575d6b); cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.profil-bulle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--teinte-rgb, 10 10 11) / .1); pointer-events: none; }
.profil-bulle:active { transform: scale(.94); }
.profil-bulle:focus-visible { outline: 2px solid var(--focus, #3b5bdb); outline-offset: 2px; }
.profil-bulle svg { width: 100%; height: 100%; display: block; }
.profil-bulle img { width: 100%; height: 100%; display: block; object-fit: cover; }
html.connecte .profil-bulle { display: inline-flex; }
html.connecte .profil-bulle::after { box-shadow: inset 0 0 0 1px rgb(var(--teinte-rgb, 10 10 11) / .12), 0 0 0 2px var(--surface, #fff); }
html.connecte .tete-actions .pilule[data-lien="compte"] { display: none; }
@media (hover: hover) { .profil-bulle:hover { box-shadow: 0 0 0 3px rgb(var(--teinte-rgb, 10 10 11) / .08); } }
@media (max-width: 820px) { .profil-bulle { display: inline-flex; } }
@media (pointer: coarse) { .profil-bulle { width: 44px; height: 44px; } }

/* menu du compte, sous la bulle */
.profil-menu { position: fixed; z-index: 90; width: min(300px, calc(100vw - 24px)); padding: 18px 14px 10px; border-radius: 22px; background: var(--surface, #fff); color: var(--encre, #0a0a0b); border: 1px solid rgb(var(--teinte-rgb, 10 10 11) / .08); box-shadow: 0 24px 60px -24px rgb(var(--ombre-rgb, 10 10 11) / .45), 0 2px 6px rgb(var(--ombre-rgb, 10 10 11) / .06); font: 15px/1.4 var(--police, system-ui, sans-serif); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
.profil-menu.ouvert { opacity: 1; transform: none; }
.profil-tete { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 14px; border-bottom: 1px solid var(--trait, #dde2ec); text-align: center; }
.profil-grande { position: relative; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--photo, #dfe1e6); color: var(--faible, #575d6b); overflow: hidden; cursor: pointer; }
.profil-grande img, .profil-grande svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.profil-grande span { position: absolute; right: 0; bottom: 0; left: 0; padding: 4px 0 6px; background: rgb(0 0 0 / .55); color: #fff; font-size: 11px; font-weight: 500; opacity: 0; transition: opacity .2s; }
.profil-grande:hover span, .profil-grande:focus-visible span { opacity: 1; }
.profil-nom { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.profil-courriel { color: var(--doux, #555b68); font-size: 13.5px; overflow-wrap: anywhere; }
.profil-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.profil-liste a, .profil-liste button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.profil-liste a:hover, .profil-liste button:hover, .profil-liste a:focus-visible, .profil-liste button:focus-visible { background: rgb(var(--teinte-rgb, 10 10 11) / .05); outline: none; }
.profil-liste svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }

/* fenêtre de la photo : centrée sur ordinateur, posée en bas de l'écran au téléphone */
.profil-voile { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(var(--ombre-rgb, 10 10 11) / .45); opacity: 0; transition: opacity .2s ease; }
.profil-voile.ouvert { opacity: 1; }
.profil-fenetre { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 22px 18px; border-radius: 26px; background: var(--surface, #fff); color: var(--encre, #0a0a0b); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .55); font: 15px/1.45 var(--police, system-ui, sans-serif); transform: translateY(10px); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.profil-voile.ouvert .profil-fenetre { transform: none; }
.profil-fenetre h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.profil-aide { margin: 0 0 16px; color: var(--doux, #555b68); font-size: 14px; }
.profil-cadre { position: relative; width: min(260px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 20px; overflow: hidden; background: var(--photo, #dfe1e6); color: var(--faible, #575d6b); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.profil-cadre:active { cursor: grabbing; }
.profil-cadre canvas, .profil-cadre svg { width: 100%; height: 100%; display: block; }
/* le cercle : ce qui sera gardé ; autour, un voile sombre */
.profil-cadre::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 200px rgb(0 0 0 / .45), inset 0 0 0 2px rgb(255 255 255 / .9); pointer-events: none; }
.profil-cadre.vide { cursor: default; }
.profil-cadre.vide::after { box-shadow: none; }
.profil-cadre.vide img { border-radius: 50%; }
.profil-zoom { display: flex; align-items: center; gap: 12px; width: min(260px, 100%); margin: 14px auto 0; color: var(--doux, #555b68); }
.profil-zoom svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.profil-zoom input { flex: 1; min-width: 0; height: 44px; accent-color: var(--encre, #0a0a0b); }
.profil-zoom[hidden] { display: none; }
.profil-choisir { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 14px; border: 1px dashed var(--trait-2, #cdd3df); border-radius: 14px; background: none; color: var(--encre, #0a0a0b); font: inherit; font-weight: 500; cursor: pointer; }
.profil-choisir:hover { border-color: var(--encre, #0a0a0b); }
.profil-choisir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profil-anciennes { margin-top: 18px; }
.profil-anciennes[hidden] { display: none; }
.profil-anciennes h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 500; color: var(--doux, #555b68); }
.profil-vignettes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.profil-vignettes li { position: relative; }
.profil-vignette { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--photo, #dfe1e6); color: var(--faible, #575d6b); overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgb(var(--teinte-rgb, 10 10 11) / .1); transition: box-shadow .2s, transform .2s; }
.profil-vignette img, .profil-vignette svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.profil-vignette[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--encre, #0a0a0b); }
.profil-oublier { position: absolute; top: -6px; right: -6px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--encre, #0a0a0b); color: var(--sur-encre, #fff); cursor: pointer; }
.profil-oublier svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.profil-vignettes li:hover .profil-oublier, .profil-oublier:focus-visible { display: inline-flex; }
@media (pointer: coarse) { .profil-vignettes li .profil-oublier { display: inline-flex; } }
.profil-erreur { margin: 12px 0 0; color: var(--erreur, #b42318); font-size: 14px; }
.profil-erreur:empty { display: none; }
.profil-boutons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.profil-boutons button { min-height: 44px; padding: 0 20px; border-radius: 999px; font: inherit; font-weight: 500; cursor: pointer; }
.profil-annuler { border: 1px solid var(--trait-2, #cdd3df); background: none; color: var(--encre, #0a0a0b); }
.profil-enregistrer { border: 1px solid transparent; background: var(--encre, #0a0a0b); color: var(--sur-encre, #fff); }
.profil-enregistrer:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
  .profil-voile { align-items: flex-end; padding: 0; }
  .profil-fenetre { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateY(40px); }
  .profil-boutons button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .profil-menu, .profil-voile, .profil-fenetre, .profil-bulle { transition: none; } }