/* Profils (bannière, photo, effets animés autour de la photo) et questionnaire du jour. Chargé après animations.css. */

/* ---------- Photos de profil ---------- */
.avatar { position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.grand-avatar { width: 112px; height: 112px; font-size: 36px; }

/* ---------- Effets : un anneau animé autour de la photo ---------- */
.avatar.effet::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 3px; pointer-events: none;
  background: var(--anneau, var(--degrade));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.grand-avatar.effet::before { inset: -8px; padding: 5px; }
.effet-braise { --anneau: conic-gradient(from var(--angle), #f97316, #ef4444, #fde047, #f97316); box-shadow: 0 0 14px 2px rgb(249 115 22 / .55); }
.effet-tension { --anneau: conic-gradient(from var(--angle), #22d3ee 0 12%, transparent 12% 25%, #3b82f6 25% 37%, transparent 37% 50%, #22d3ee 50% 62%, transparent 62% 75%, #3b82f6 75% 87%, transparent 87%); box-shadow: 0 0 12px 1px rgb(34 211 238 / .6); }
.effet-savant { --anneau: conic-gradient(from var(--angle), #10b981, #a7f3d0, #059669, #10b981); box-shadow: 0 0 12px 1px rgb(16 185 129 / .5); }
.effet-prisme { --anneau: conic-gradient(from var(--angle), #f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); box-shadow: 0 0 14px 1px rgb(99 102 241 / .45); }
.effet-neon { --anneau: linear-gradient(135deg, #a855f7, #ec4899); box-shadow: 0 0 0 0 rgb(168 85 247 / .7); }
.effet-or { --anneau: conic-gradient(from var(--angle), #f59e0b, #fef3c7, #d97706, #fde68a, #f59e0b); box-shadow: 0 0 14px 2px rgb(245 158 11 / .55); }
.effet-champion { --anneau: conic-gradient(from var(--angle), #fde047, #fff, #f59e0b, #fff, #fde047); box-shadow: 0 0 18px 3px rgb(253 224 71 / .7); }
.effet-garde { --anneau: conic-gradient(from var(--angle), #3b82f6 0 40%, #93c5fd 40% 50%, #1d4ed8 50% 90%, #93c5fd 90%); box-shadow: 0 0 10px 1px rgb(59 130 246 / .5); }
@media (prefers-reduced-motion: no-preference) {
  .avatar.effet::before { animation: tourne 4s linear infinite; }
  .effet-tension::before { animation-duration: 1.6s; }
  .effet-champion::before { animation-duration: 2s; }
  .effet-braise { animation: braise 1.8s ease-in-out infinite alternate; }
  @keyframes braise { to { box-shadow: 0 0 22px 6px rgb(239 68 68 / .6); } }
  .effet-neon { animation: neon 1.6s ease-out infinite; }
  @keyframes neon { to { box-shadow: 0 0 0 12px rgb(168 85 247 / 0); } }
  .effet-champion { animation: champion 1.4s ease-in-out infinite alternate; }
  @keyframes champion { to { box-shadow: 0 0 26px 8px rgb(253 224 71 / .85); } }
}

/* ---------- En-tête de profil ---------- */
.profil-tete { display: block; padding: 0; overflow: hidden; }
.profil-banniere { height: clamp(110px, 22vw, 190px); background-size: cover; background-position: center;
  background-image: linear-gradient(120deg, hsl(var(--h, 240) 70% 55%), hsl(calc(var(--h, 240) + 60) 75% 55%) 55%, hsl(calc(var(--h, 240) + 140) 70% 55%)); }
.profil-identite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; padding: 0 24px 22px; margin-top: -52px; }
.profil-identite .grand-avatar { box-shadow: 0 0 0 5px var(--surface), 0 10px 26px -8px rgb(0 0 0 / .45); flex: none; }
.profil-identite .grand-avatar.effet { box-shadow: 0 0 0 5px var(--surface); }
.profil-texte { flex: 1; min-width: 200px; padding-top: 58px; }
.profil-texte h1 { margin: 0 0 4px; }
.profil-texte h1::after { display: none; }
.profil-infos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.profil-bio { margin: 6px 0; font-size: 1.02rem; }
.profil-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 2px; }
.profil-actions.images { flex: 1; padding-top: 58px; }
.profil-tete.edition #etat-image { padding: 0 24px 16px; margin: 0; }
.moi-carte .avatar { flex: none; }
.tech .avatar { width: 46px; height: 46px; font-size: 15px; }

/* ---------- Choix de l'effet ---------- */
.choix-effets { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.choix-effets legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 10px; }
.carte-effet { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--surface); cursor: pointer; transition: border-color .2s, transform .25s, box-shadow .25s; }
.carte-effet input { position: absolute; opacity: 0; }
.carte-effet .avatar { width: 64px; height: 64px; font-size: 20px; margin: 6px 0 8px; }
.carte-effet:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.carte-effet:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.carte-effet:not(.verrouille):hover { transform: translateY(-4px); border-color: var(--accent); }
.carte-effet.verrouille { cursor: not-allowed; }
.carte-effet.verrouille .avatar { filter: grayscale(.85) opacity(.6); }
.carte-effet .progression { width: 80%; }

/* ---------- Questionnaire ---------- */
.bandeau-quiz { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bandeau-quiz .tuile-icone { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.quiz { display: grid; gap: 14px; margin-bottom: 18px; }
.question { margin: 0; min-width: 0; }
.question legend, .titre-question { font-weight: 600; font-size: 1.05rem; padding: 0; margin: 0 0 10px; display: flex; gap: 10px; align-items: flex-start; float: left; width: 100%; }
.question legend + * { clear: both; }
.numero-question { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: var(--degrade); }
.choix-quiz { display: block; margin: 8px 0 0; font-weight: 500; }
.choix-quiz input { position: absolute; opacity: 0; }
.choix-quiz span { display: block; padding: 11px 14px; border: 1px solid var(--bord); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
label.choix-quiz span:hover { border-color: var(--accent); transform: translateX(4px); }
.choix-quiz input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.choix-quiz input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.corrigee .choix-quiz span { cursor: default; }
.corrigee .choix-quiz.bonne span { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); font-weight: 600; }
.corrigee .choix-quiz.mauvaise span { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.corrigee.juste .numero-question { background: var(--ok); }
.corrigee.faux .numero-question { background: var(--danger); }
.explication { margin: 10px 0 0; }
.resultat-quiz { display: flex; align-items: center; gap: 18px; }
.score-quiz { font-size: 2.2rem; font-weight: 700; background: var(--degrade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.liste-questions .texte-question { flex: 1; min-width: 200px; }
.reponse-admin { flex-wrap: nowrap; }
.reponse-admin input[type=radio] { flex: none; width: auto; min-width: 0; }

/* Cases masquées (on clique sur la carte entière) : gardées dans leur carte, sinon leur largeur de 100 % ferait déborder la page. */
.carte-effet, .choix-quiz, .choix-emoji label { position: relative; }
.carte-effet input, .choix-quiz input, .choix-emoji input { top: 0; left: 0; width: 1px; height: 1px; }