/* Street Shakers — À propos : musiciens, retournement des portraits, fenêtres CV */
/* ---------- A PROPOS ---------- */
.apropos{ background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* planète du logo avec son orbite rouge, en fond de toute la section, très transparentes (décor, ne gêne pas les clics) */
.apropos{ position:relative; overflow:clip; isolation:isolate; }
.apropos::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../img/planete-orbite-fond.png') center / cover no-repeat;
  opacity:.14;
}

.profiles-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px 20px; }
.profile-card{ text-align:center; flex:0 1 170px; }

/* 6 médaillons (5 musiciens + Patou, technique et son) : une seule ligne sur ordinateur */
@media (min-width: 981px){ .profiles-grid{ flex-wrap:nowrap; } }
.avatar{
  width:78px; height:78px; border-radius:50%; margin:0 auto 14px; position:relative;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .3s ease;
}

.avatar svg{ width:62%; height:62%; overflow:visible; }

.c-bleu{ background:var(--bleu); color:var(--bleu); }
.c-rouge{ background:var(--rouge); color:var(--rouge); }
.c-jaune{ background:var(--jaune); color:var(--jaune); }
.avatar svg{ fill:none; stroke:var(--ecru); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.avatar svg .f{ fill:var(--ecru); stroke:none; }
.avatar svg .h{ fill:currentColor; stroke:none; }
.avatar.c-jaune svg{ stroke:var(--noir); }
.avatar.c-jaune svg .f{ fill:var(--noir); }
.avatar{ background:transparent !important; perspective:600px; border:0; padding:0; font:inherit; -webkit-appearance:none; appearance:none; }
.avatar .flip{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,1.35,.5,1); }
.avatar.flipped .flip, .profile-card:has(.bio-pop:popover-open) .flip{ transform:rotateY(180deg); }
.avatar .face{ position:absolute; inset:0; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.avatar .front{ background:currentColor; }
.avatar .back{ transform:rotateY(180deg); background:#fff; box-shadow:inset 0 0 0 3px currentColor; }
.avatar .back img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.profile-card .pname{
  position:relative; z-index:3; /* toujours devant le liséré clignotant (17 octobre 2026) */
  display:block; height:1.5rem; margin-bottom:32px; font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; font-size:0.95rem; letter-spacing:0.12em;
  opacity:0; transform:translateY(8px); transition:opacity .35s ease .2s, transform .35s ease .2s;
}
.profile-card:has(.avatar.flipped) .pname, .profile-card:has(.bio-pop:popover-open) .pname{ opacity:1; transform:translateY(0); }
.profile-card h4{ font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; font-size:0.92rem; letter-spacing:0.1em; }
.profile-card > p{ font-size:0.9rem; opacity:0.72; margin-top:2px; }


/* ---------- FENÊTRE PORTRAIT + CV (À propos) ----------
   Une fenêtre par musicien (attribut HTML « popover ») : s'ouvre au clic sur son bouton, se ferme
   au clic dessus, au clic à côté ou avec Échap. Elle se place dans l'espace libre à droite du titre
   (ancrage CSS sur .bio-slot) ; sans ancrage (navigateurs plus anciens), elle se place à droite de l'écran. */
.apropos-top{ display:grid; grid-template-columns:minmax(0,64ch) minmax(0,1fr); gap:48px; align-items:start; margin-bottom:28px; }
.apropos-top .section-head{ margin-bottom:0; }
.bio-slot{ align-self:stretch; anchor-name:--bio-slot; }
.bio-pop{
  --c:var(--rouge);
  position:fixed; inset:auto; margin:0; padding:0; width:min(430px, calc(100vw - 32px)); max-height:calc(100vh - 110px); overflow:auto;
  top:calc(72px + 10vh); right:max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  background:var(--ecru); color:var(--noir); border:3px solid var(--noir); border-radius:18px;
  box-shadow:9px 9px 0 var(--c); text-align:left; transform:rotate(-1deg);
}
@supports (anchor-name: --a){
  .bio-pop{ position-anchor:--bio-slot; top:anchor(top); left:anchor(center); right:auto; translate:-50% 0; }
}
.bio-pop:popover-open{ animation:bio-in .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes bio-in{ from{ opacity:0; transform:translateY(14px) scale(.92) rotate(-3deg); } to{ opacity:1; transform:rotate(-1deg); } }
.bio-pop::backdrop{ background:transparent; }
.bio-pop[data-color="bleu"]{ --c:var(--bleu); }
.bio-pop[data-color="jaune"]{ --c:var(--jaune); }
.bio-band{ height:14px; background:var(--c); border-bottom:3px solid var(--noir); }
.bio-top{ display:flex; align-items:center; gap:18px; padding:20px 22px 6px; }
.bio-photo{ flex:0 0 112px; height:112px; border-radius:50%; overflow:hidden; background:#fff; border:3px solid var(--noir); box-shadow:0 0 0 4px var(--c); }
.bio-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.bio-inst{ font-family:'Outfit',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; font-size:0.82rem; color:var(--c); }
.bio-pop[data-color="jaune"] .bio-inst{ color:var(--noir); }
.bio-name{ font-family:'Permanent Marker','Outfit',sans-serif; font-weight:400; font-size:2.1rem; line-height:1.05; text-transform:uppercase; }
.bio-cv{ padding:10px 22px 20px; font-size:0.9rem; line-height:1.55; }
.bio-cv p{ margin-bottom:8px; }
.bio-cv ul{ list-style:none; display:grid; gap:6px; margin-top:6px; }
.bio-cv li{ padding-left:18px; position:relative; }
.bio-cv li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--c); }
.bio-hit{ position:absolute; inset:0; width:100%; height:100%; background:transparent; border:0; cursor:pointer; }
@media (max-width: 980px){
  .apropos-top{ grid-template-columns:1fr; gap:0; }
  .bio-pop{ top:auto; left:16px; right:16px; bottom:16px; width:auto; translate:none; max-height:78vh; }
}


/* À propos : occupe toute la hauteur de l'écran sur ordinateur, contenu centré verticalement */
@media (min-width: 981px){
  .apropos{ min-height:calc(100vh - 74px); min-height:calc(100svh - 74px); display:flex; align-items:center; }
  .apropos > .wrap{ width:100%; }
}

/* liséré clignotant autour de chaque bouton (couleur du bouton) :
   1) clignote (7 fois, pause de 4 s, en boucle) pour inviter à cliquer, 2) double d'épaisseur quand le portrait apparaît,
   3) disparaît quand la fiche CV est ouverte */
.avatar::after{
  content:""; position:absolute; inset:-9px; border-radius:50%; border:4px solid currentColor; pointer-events:none;
  transition:inset .3s ease, border-width .3s ease, opacity .3s ease;
}
@keyframes ring-blink{
  0%{ opacity:1; }
  3.66%{ opacity:.15; }
  7.32%{ opacity:1; }
  10.98%{ opacity:.15; }
  14.63%{ opacity:1; }
  18.29%{ opacity:.15; }
  21.95%{ opacity:1; }
  25.61%{ opacity:.15; }
  29.27%{ opacity:1; }
  32.93%{ opacity:.15; }
  36.59%{ opacity:1; }
  40.24%{ opacity:.15; }
  43.90%{ opacity:1; }
  47.56%{ opacity:.15; }
  51.22%{ opacity:1; }
  100%{ opacity:1; }
}
/* 7 clignotements puis 4 s de pause, en boucle (100 % CSS).
   Même rythme pour le liséré fin (au repos) et le liséré épais (portrait visible). */
.avatar::after{ animation:ring-blink 8.2s ease-in-out infinite; }
.avatar.flipped::after{ border-width:8px; inset:-13px; }
.profile-card:has(.bio-pop:popover-open) .avatar::after{ animation:none; opacity:0; }

/* survol à la souris uniquement : sur écran tactile, le « survol » reste collé après un toucher
   et bloquait le bouton sur le portrait. Sur téléphone, c'est la classe .flipped (js/main.js) qui retourne le bouton. */
@media (hover: hover) and (pointer: fine){
  .profile-card:hover .avatar{ transform:translateY(-6px) scale(1.04); }
  .profile-card:hover .flip, .avatar:focus-visible .flip{ transform:rotateY(180deg); }
  .profile-card:hover .pname, .profile-card:has(.avatar:focus-visible) .pname{ opacity:1; transform:translateY(0); }
  .profile-card:hover .avatar::after, .avatar:focus-visible::after{ border-width:8px; inset:-13px; }
}