/* AMIS ENTRE ARTISTES (CCB) — voir php/ccband-amis.php */

/* ---------- page d'un artiste : « Amis avec » ---------- */
.amis-bloc { padding: 30px 40px; border-radius: 10px; }
.amis-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.amis-entete h2 { margin: 0; }
.amis-entete h2 small, .amis-profil h2 small { font-size: .55em; opacity: .6; margin-left: 6px; vertical-align: middle; }

.amis-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 12px; }
.amis-grille li { position: relative; min-width: 0; }
.amis-grille a, .amis-demande > a { display: block; text-decoration: none; color: inherit; text-align: center; }
.amis-grille img, .amis-grille .amis-initiale, .amis-demande img, .amis-demande .amis-initiale {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
	background: #555; transition: transform .15s, box-shadow .15s;
}
.amis-initiale { display: flex !important; align-items: center; justify-content: center; font-size: 2.2em; font-weight: bold; color: #FBC11A; }
.amis-grille a:hover img, .amis-grille a:hover .amis-initiale { transform: scale(1.05); box-shadow: 0 0 0 3px #FBC11A; }
/* nom sous la photo : majuscules et gras comme les titres des cartes d'artistes, 2 lignes max */
.amis-nom {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
	margin-top: 8px; font-family: 'GT Walsheim bold', sans-serif; font-weight: bold; font-size: 13px; line-height: 1.2;
	text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere;
}
.amis-vide { margin: 0; opacity: .75; }
.amis-gerer { color: #FBC11A; font-size: 14px; }

/* ---------- boutons ---------- */
.amis-bouton {
	display: inline-block; border: 2px solid #FBC11A; background: #FBC11A; color: #111; border-radius: 999px;
	padding: 8px 18px; font-size: 14px; font-weight: bold; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.amis-bouton:hover { filter: brightness(1.08); color: #111; text-decoration: none; }
.amis-bouton:disabled { opacity: .5; cursor: wait; }
.amis-envoyee, .amis-amis, .amis-refuser { background: transparent; color: #FBC11A; }
.amis-envoyee:hover, .amis-amis:hover, .amis-refuser:hover { color: #FBC11A; }
.amis-refuser { border-color: #888; color: #ccc; }

/* ---------- profil ---------- */
/* la section est déjà une carte (php/ccband-profil.css) : pas de cadre en plus, même titre et même pastille que les autres */
.amis-profil { color: #fff; }
.amis-profil h2 { margin: 0 0 16px; color: #fff; }
.amis-profil a, .amis-profil a:hover, .amis-profil .amis-nom { color: #fff; }
/* page publique : cartes blanches */
.amis-bloc .amis-grille a, .amis-bloc .amis-grille a:hover, .amis-bloc .amis-nom { color: #111; }
.amis-bloc .amis-envoyee, .amis-bloc .amis-amis, .amis-bloc .amis-envoyee:hover, .amis-bloc .amis-amis:hover { color: #111; }
.amis-bloc .amis-gerer { color: #9A6B00; }
.amis-notif { border: 2px solid #FBC11A; border-radius: 10px; padding: 16px 18px; margin-bottom: 26px; }
.amis-notif h3 { margin: 0 0 14px; font-size: 18px; color: #FBC11A; }
.amis-demandes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.amis-demande { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.amis-demande > a { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-width: 0; text-align: left; }
.amis-demande img, .amis-demande .amis-initiale { width: 56px; flex: 0 0 56px; }
.amis-demande .amis-initiale { font-size: 1.4em; }
.amis-demande .amis-nom { margin: 0; font-size: 16px; font-weight: bold; }
.amis-choix { display: flex; gap: 8px; }
.amis-modifiable .amis-retirer {
	position: absolute; top: -4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0;
	background: #111; color: #fff; font-size: 17px; line-height: 26px; padding: 0; cursor: pointer; opacity: .85;
}
.amis-modifiable .amis-retirer:hover { background: #E5193F; opacity: 1; }

/* ---------- page du lien reçu par email (/amis/) ---------- */
/* fond sombre comme les autres pages ; marge haute > barre de menu fixe (avant, elle recouvrait le haut de la carte) */
#amis-lien { background: #313131; padding: 150px 16px 90px; min-height: 70vh; }
.amis-lien-carte {
	max-width: 560px; margin: 0 auto; text-align: center; background: #fff; color: #111;
	border-radius: 20px; padding: 40px 36px 32px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.amis-lien-surtitre { margin: 0 0 6px !important; font-size: 13px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: #9A6B00; }
.amis-lien-carte h1 { font-size: 26px; line-height: 1.25; margin: 0 0 14px; color: #111; }
.amis-lien-carte h1 a { color: #111; text-decoration: underline; text-decoration-color: #F8C11A; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.amis-lien-carte p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: #444; }
.amis-lien-carte b { color: #111; }
.amis-lien-form, .amis-lien-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0 0 !important; }
.amis-lien-form .amis-bouton, .amis-lien-actions .amis-bouton { min-width: 150px; padding: 12px 24px; font-size: 16px; text-align: center; }
.amis-lien-carte .amis-secondaire { background: transparent; border-color: #D8D8D8; color: #333; }
.amis-lien-carte .amis-secondaire:hover { border-color: #111; color: #111; filter: none; }
.amis-lien-carte .amis-nom-maj { text-transform: uppercase; }
.amis-lien-note { margin-top: 20px !important; font-size: 13px !important; color: #888 !important; }
.amis-lien-note a { color: #888; text-decoration: underline; }

/* les deux artistes côte à côte, un badge entre eux */
.amis-duo { display: flex; justify-content: center; align-items: center; margin: 0 0 22px; }
.amis-avatar { display: block; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); background: #555; text-decoration: none; }
.amis-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amis-avatar .amis-initiale { width: 100%; height: 100%; font-size: 2.6em; }
.amis-duo .amis-avatar + .amis-duo-badge + .amis-avatar { margin-left: -14px; }
.amis-duo-badge {
	position: relative; z-index: 2; flex: none; width: 44px; height: 44px; margin-left: -14px; border-radius: 50%;
	background: #F8C11A; color: #111; border: 4px solid #fff; font-size: 24px; font-weight: bold; line-height: 36px;
}
.amis-duo-ok .amis-duo-badge { background: #2BB673; color: #fff; }

@media (max-width: 575px)
{
	#amis-lien { padding: 40px 14px 60px; }
	#amis-lien > .container { padding: 0; }
	.amis-lien-carte { padding: 30px 20px 24px; border-radius: 16px; }
	.amis-lien-carte h1 { font-size: 22px; }
	.amis-avatar { width: 92px; height: 92px; }
	.amis-lien-form .amis-bouton, .amis-lien-actions .amis-bouton { flex: 1 1 100%; }
}

/* ---------- message ---------- */
.amis-avis {
	position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 99999; opacity: 0; pointer-events: none;
	background: #111; color: #fff; border-left: 4px solid #FBC11A; border-radius: 8px; padding: 12px 18px; font-size: 15px;
	box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px);
}
.amis-avis.amis-visible { opacity: 1; transform: translate(-50%, 0); }
.amis-avis-erreur { border-left-color: #E5193F; }

@media (max-width: 575px)
{
	.amis-bloc { padding: 24px 0; }
	.amis-grille { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* ---------- bouton « + Ami » posé sur les cartes de la recherche d'artistes (php/ccband-recherche.php) ---------- */
.artistes-liste-item--infos { position: relative; }
.amis-bouton-carte {
	position: absolute; right: 8px; top: 8px; z-index: 3;
	padding: 4px 10px; font-size: 11px; border-width: 1.5px; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.amis-bouton-carte.amis-envoyee, .amis-bouton-carte.amis-amis { background: #fff; color: #111; border-color: #ccc; }
.amis-bouton-carte.amis-amis { border-color: #2BB673; color: #1E8A55; }
.amis-bouton-carte.amis-recue { background: #2BB673; border-color: #2BB673; color: #fff; }
/* le nom passe sous le bouton : on lui laisse la place */
.artistes-liste-item--infos:has(.amis-bouton-carte) .artistes-liste-item--infos_titre { padding-right: 70px; }

/* ---------- Top 8 : étoile sur la vignette (page publique et profil) ---------- */
.amis-grille li.amis-top img, .amis-grille li.amis-top .amis-initiale { box-shadow: 0 0 0 3px #FBC11A; }
.amis-etoile-top {
	position: absolute; top: -4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
	background: #FBC11A; color: #111; font-size: 14px; line-height: 24px; text-align: center; pointer-events: none;
}
.amis-modifiable .amis-etoile {
	position: absolute; top: -4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0;
	background: #111; color: #FBC11A; font-size: 15px; line-height: 26px; cursor: pointer; opacity: .85;
}
.amis-modifiable .amis-etoile[aria-pressed="true"] { background: #FBC11A; color: #111; opacity: 1; }
.amis-modifiable .amis-etoile:hover { opacity: 1; transform: scale(1.1); }
.amis-modifiable .amis-etoile:disabled { opacity: .4; cursor: wait; }
.amis-aide { margin: -6px 0 16px; font-size: 14px; opacity: .8; }
.amis-voir-tout { margin: 18px 0 0; text-align: center; }
.amis-bloc .amis-voir-tout .amis-secondaire { background: transparent; color: #111; border-color: #D8D8D8; }

/* ---------- page d'un artiste : amis en commun ---------- */
.amis-commun { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; font-size: 14px; color: #444; }
.amis-commun a { color: #111; font-weight: bold; }
.amis-commun-photos { display: inline-flex; flex: none; }
.amis-commun-photos img, .amis-commun-photos .amis-initiale {
	width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #555; font-size: 14px !important;
}
.amis-commun-photos > * + * { margin-left: -9px; }

/* ---------- profil : les amis jouent bientôt ---------- */
.amis-concerts { border: 2px solid rgba(255,255,255,.15); border-radius: 10px; padding: 16px 18px; margin-bottom: 26px; }
.amis-concerts h3 { margin: 0 0 12px; font-size: 18px; color: #fff; }
.amis-concerts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.amis-concerts li { display: flex; gap: 14px; align-items: baseline; }
.amis-concert-date {
	flex: 0 0 92px; font-weight: bold; color: #FBC11A; font-size: 14px; text-transform: uppercase; letter-spacing: .02em;
}
.amis-concert-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.amis-concert-amis a { font-family: 'GT Walsheim bold', sans-serif; font-weight: bold; text-transform: uppercase; color: #fff; }
.amis-concert-nom { color: #ddd !important; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(251,193,26,.6); }
.amis-concert-lieu { font-size: 13px; opacity: .7; }
@media (max-width: 575px) { .amis-concert-date { flex-basis: 74px; font-size: 12px; } }

/* ---------- profil : zones Top 8 / autres amis en glisser-déposer (2026-11-08) ---------- */
.amis-zone-titre { margin: 18px 0 6px; font-size: 18px; }
.amis-zone-titre small { font-size: 14px; font-weight: 400; opacity: .75; }
.amis-zones .amis-aide { margin: 0 0 10px; }
.amis-zone { min-height: 112px; padding: 12px; border: 2px dashed rgba(251, 193, 26, .35); border-radius: 12px; transition: border-color .15s, background-color .15s; }
.amis-zone[data-amis-zone="autres"] { border-color: rgba(255, 255, 255, .15); }
.amis-zone:empty::before { content: attr(data-vide); grid-column: 1 / -1; align-self: center; text-align: center; font-size: 14px; opacity: .6; }
.amis-zone > li { cursor: grab; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.amis-zone img { -webkit-user-drag: none; pointer-events: none; }
.amis-en-glisse, .amis-en-glisse * { cursor: grabbing !important; }
.amis-en-glisse .amis-zone { background: rgba(251, 193, 26, .06); }
.amis-en-glisse .amis-zone[data-amis-zone="top"] { border-color: #FBC11A; }
li.amis-trou { border-radius: 12px; background: rgba(251, 193, 26, .25); outline: 2px dashed #FBC11A; outline-offset: -2px; }
li.amis-glisse { position: fixed; z-index: 9999; margin: 0; pointer-events: none; list-style: none; transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
li.amis-glisse .amis-nom { color: #fff; text-shadow: 0 1px 3px #000; }

/* ---------- court-circuit.live : « Amis avec » en lecture seule sur la page artiste (2026-11-13) ---------- */
.amis-ccl { padding: 30px 0 30px 40px; } /* comme les autres blocs : pas de marge à droite, la ligne du titre va jusqu'au bord */
.amis-ccl h2 small { font-size: .55em; opacity: .6; margin-left: 6px; vertical-align: baseline; line-height: 0; }
.amis-ccl .amis-grille { margin-top: 18px; padding-right: 40px; }
.amis-ccl .amis-voir-tout { padding-right: 40px; }
.amis-ccl .amis-grille a, .amis-ccl .amis-grille a:hover, .amis-ccl .amis-nom { color: inherit; }
.amis-ccl .amis-grille a:hover img, .amis-ccl .amis-grille a:hover .amis-initiale { box-shadow: 0 0 0 3px #E6173A; }
.amis-concert {
	display: block; margin: 6px auto 0; padding: 3px 8px; width: fit-content; max-width: 100%;
	background: #E6173A; color: #fff; border-radius: 10px; font-size: 11px; font-weight: bold; line-height: 1.3;
	text-align: center;
}
@media (max-width: 767px) { .amis-ccl .amis-grille, .amis-ccl .amis-voir-tout { padding-right: 0; } }