/* =====================================================================================
   COURT-CIRCUIT.BAND sur téléphone (2026-11-10)
   Une seule feuille, chargée après les autres sur toutes les pages CCB (php/ccband-pages.php).
   Tout est préfixé « html body » pour passer devant style.css, responsive.css, carrousel.css et pied.css
   (chargées plus tard dans la page), sans !important sauf contre les styles en ligne.
   Retours de Nicolas : marges gauche/droite trop grandes et inégales, titres qui débordent, carrousels coupés
   (→ appels en colonne, artistes en grille), menu du bas mal aligné sur « Profil », hero du profil qui se chevauche.
   ===================================================================================== */

@media (max-width: 767px) {

	/* ---------- 1. Une seule marge latérale : 16 px partout (avant : 40 px sur certaines pages, 20 ou 16 ailleurs) ---------- */
	html body .container:not(#menu-principal .container) { padding-left: 16px; padding-right: 16px; }
	html body .container .container { padding-left: 0; padding-right: 0; }
	html body .container3 { padding-left: 16px !important; padding-right: 16px !important; } /* accueil, artistes : style.css impose 40 px en !important */
	html body #AppelsEnCours .swiper-container,
	html body #CCBandArtistesEnLumiere .swiper-container { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none; padding: 0; }
	html body h1.big-title { padding-left: 16px; padding-right: 16px; }

	/* ---------- 2. Carrousels → appels en colonne, artistes en grille de 2 ---------- */
	html body #AppelsEnCours .swiper-wrapper,
	html body #CCBandArtistesEnLumiere .swiper-wrapper {
		overflow: visible; scroll-snap-type: none; transform: none !important;
		display: grid; gap: 14px; height: auto;
	}
	html body #AppelsEnCours .swiper-wrapper { grid-template-columns: 1fr; }
	html body #CCBandArtistesEnLumiere .swiper-wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
	html body #AppelsEnCours .swiper-slide,
	html body #CCBandArtistesEnLumiere .swiper-slide { width: auto !important; margin: 0 !important; flex: none; }
	html body #AppelsEnCours [class^="swiper-button"],
	html body #CCBandArtistesEnLumiere [class^="swiper-button"],
	html body #AppelsEnCours .swiper-pagination,
	html body #CCBandArtistesEnLumiere .swiper-pagination { display: none !important; }
	/* « Tous les appels » sous la colonne, aligné à droite comme avant */
	html body #AppelsEnCours .DspBoutMore { margin-top: 14px; }

	/* cartes d'artistes compactes : photo carrée, nom + ville en bas, toute la carte cliquable */
	html body #CCBandArtistesEnLumiere .swiper-slide-ccb:nth-child(n+7) { display: none; } /* 6 artistes : 3 rangées */
	html body #CCBandArtistesEnLumiere .DspEvent {
		position: relative; height: auto !important; aspect-ratio: 1 / 1.15; margin: 0 !important; padding: 0 !important; width: 100%;
		border-radius: 10px; overflow: hidden; background-size: cover;
		display: flex; align-items: flex-end;
	}
	html body #CCBandArtistesEnLumiere .DspEvent::before { /* dégradé pour lire le nom sur n'importe quelle photo */
		content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.85)); pointer-events: none;
	}
	html body #CCBandArtistesEnLumiere .HomeArtLumiere {
		position: static; z-index: 1; width: 100%; margin: 0 !important; padding: 10px !important;
		background: none !important; border-radius: 0 !important;
	}
	html body #CCBandArtistesEnLumiere .HomeArtLumiere > * { position: relative; z-index: 1; }
	html body #CCBandArtistesEnLumiere .HomeArtLumiere > .no-desktop { position: static; } /* sinon le lien « toute la carte » (::after) se calait sur ce bloc de 0 px : rien n'était cliquable */
	html body #CCBandArtistesEnLumiere .HomeLumiere2 { font-size: 15px; line-height: 1.15; margin: 0; text-transform: uppercase; overflow-wrap: anywhere; }
	html body #CCBandArtistesEnLumiere .HomeLumiere3 { font-size: 11px; margin: 2px 0 0; }
	html body #CCBandArtistesEnLumiere a.HomeLumiere5 { position: static; font-size: 0; padding: 0; margin: 0; border: 0; background: none; height: 0; display: block; }
	html body #CCBandArtistesEnLumiere a.HomeLumiere5::after { content: ""; position: absolute; inset: 0; z-index: 2; }
	html body #CCBandArtistesEnLumiere .HomeArtLumiere2 { display: none; }

	/* ---------- 3. Titres : jamais plus larges que l'écran ---------- */
	html body .ccb-hero-titre { font-size: min(8.4vw, 34px); }
	html body .ccb-hero-titre .ccb-hero-contour,
	html body .ccb-hero-titre .ccb-hero-plein { font-size: 1em; }
	html body h1, html body h2, html body h3 { overflow-wrap: break-word; hyphens: auto; }
	html body h2.titre-ligne-mobile { font-size: 26px; line-height: 1.15; }
	html body h1.big-title { font-size: 24px; line-height: 1.1; }

	/* ---------- 4. Menu du bas : « Profil » aligné sur les autres (avatar au-dessus, même taille, même ligne) ---------- */
	html body #menu-principal .header-menu > a[href*="/profil/"] { margin-top: 0 !important; }
	html body #menu-principal .header-menu > a[href*="/profil/"] .header-menu--item > span:not(:first-child) { display: block !important; margin: 0 auto; }
	html body #menu-principal .header-menu--item { vertical-align: top; } /* « Profil » (avatar dans un span) tombait 14 px plus bas sur la ligne de base */
	html body #menu-principal #DspAvatarTop { margin: 0 auto; }
	html body #menu-principal #DspAvatarTop img { width: 34px !important; height: 34px !important; border-radius: 50%; display: block; }

	/* ---------- 5. Recherche d'artistes : le champ reste dans son cadre jaune ---------- */
	html body #artistes-filtres { padding-left: 12px !important; padding-right: 12px !important; }
	html body #artistes-filtres input { width: 100% !important; max-width: 100%; box-sizing: border-box; }

	/* ---------- 6. Page d'un appel : blocs moins rembourrés (styles en ligne de 40 à 60 px) ---------- */
	html body #DspAplConnect h2 { padding: 18px 20px !important; }
	html body #DspAplConnect h2 + div { padding: 18px 20px !important; }
	html body .evenement-liens.home-main--section { padding: 20px !important; }
	html body #home-main--appels > div { padding: 20px !important; }
	html body .evenement-hero #EventHeaderTitre { font-size: 24px; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
	html body .evenement-hero .DspResp { padding-left: 16px !important; }
	html body .evenement-hero .nbre-vues { display: inline-flex !important; align-items: baseline; gap: 4px; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; line-height: 1.2 !important; white-space: nowrap; font-size: 11px !important; background: rgba(0,0,0,.65); border-radius: 999px; padding: 5px 10px !important; }
	html body .evenement-hero .nbre-vues span { display: inline !important; font-size: 11px !important; } /* lisible même sur une affiche claire */

	/* ---------- 7. Profil artiste : hero lisible ---------- */
	html body #vpa-hero .vpa-hero-desc { display: none; } /* la phrase d'accueil prenait tout le hero */
	html body #vpa-hero h1 { font-size: 26px; line-height: 1.1; margin: 0 0 4px; overflow-wrap: anywhere; }
	html body #vpa-hero .vpa-hero-type { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
	html body #vpa-hero .cadrage-bouton { top: auto !important; bottom: 12px; right: 12px; font-size: 12px; padding: 6px 10px; }
	html body #vpa-hero > .container { padding-bottom: 44px; } /* place pour « Recadrer la photo » sous le nom */
	/* tuiles de la fiche : moins de rembourrage (bord 16 px + tuile 22 px = texte à 48 px du bord) */
	html body #votre-page-artiste #CCBArtCoord, html body #votre-page-artiste #vpa-ficheartiste .col-lg-4 > #vpa-infos-generales,
	html body #votre-page-artiste #vpa-bio, html body #votre-page-artiste #vpa-contacts-medias,
	html body #votre-page-artiste #vpa-contacts, html body #votre-page-artiste #vpa-fiches-tech { padding: 20px 16px 16px; }
}

/* ---------- 2026-11-10, retours de Nicolas sur son téléphone ---------- */
@media (max-width: 767px) {
	/* accueil : le hero faisait 100 % de l'écran moins 75 px, avec un minimum de 600 px et le contenu centré.
	   Sur un écran visible plus court, le menu du bas (90 px) mangeait les boutons. Maintenant, le hero prend
	   la hauteur visible moins le menu, et grandit si le contenu ne tient pas (rien n'est coupé). */
	html body #page-accueil .ccb-hero {
		height: auto !important; min-height: calc(100svh - 90px);
		padding: 28px 16px 36px !important;
	}
	html body #page-accueil .ccb-hero-suite { display: none; } /* flèche « suite » : passait sous le menu */
	html body .ccb-hero-logo { margin-bottom: 12px; width: 40px; height: 40px; }
	html body .ccb-hero-titre { margin-bottom: 16px; }
	html body .ccb-hero-sous { margin-top: 10px; letter-spacing: 2px; }
	html body .ccb-hero-desc { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }
	html body .ccb-hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; gap: 10px; }
	html body .ccb-hero-actions { margin-left: auto; margin-right: auto; }
	html body .ccb-hero-btn { display: block; width: 100%; max-width: none; margin: 0; box-sizing: border-box; text-align: center; padding: 13px 20px; }

	/* menu du bas : les 5 entrées réparties sur toute la largeur (avant : tassées dans 255 px au centre) */
	html body #menu-principal .row > .header-menu { flex: 1 1 auto; display: flex; justify-content: space-around; align-items: flex-start; width: 100%; max-width: 480px; margin: 8px auto 4px !important; padding: 0 6px; }
	html body #menu-principal .header-menu > a { flex: 1 1 0; display: flex; justify-content: center; min-width: 0; }
	html body #menu-principal .header-menu--item { padding: 0 2px !important; }

	/* profil : la barre « Mes paramètres / Voir en tant que / Votre page / déconnexion » revient en haut,
	   sur la photo (elle était collée en bas, au-dessus du menu). Elle défile avec la page. */
	html body #votre-page-artiste { position: relative; }
	html body #votre-page-artiste #vpa-fixedhero {
		position: absolute !important; top: 12px !important; bottom: auto !important;
		right: 50% !important; left: auto !important; transform: translateX(50%) !important;
	}
	html body #votre-page-artiste > section:last-of-type { padding-bottom: 14px; }
}

/* ---------- 2026-11-10, page d'un appel : hero et bloc « Postuler » ---------- */
@media (max-width: 767px) {
	/* hero : le titre prend toute la largeur en bas de l'affiche, le compteur de vues juste dessous, à gauche
	   (avant : titre sur 2/3 de la largeur, compteur flottant au milieu à droite) */
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) { display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero)::after { /* voile en bas : le titre reste lisible même sur une affiche claire */
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
		background: linear-gradient(to bottom, transparent, rgba(0,0,0,.75));
	}
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) { position: relative; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) > .row { position: static; margin: 0; flex: 1 1 auto; align-content: flex-end; }
	/* barre retour / partager : reste en haut de l'affiche (elle descendait avec le titre) */
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) {
		position: absolute !important; top: 0; left: 0; right: 0; z-index: 2; max-width: none;
		display: flex; align-items: center; justify-content: space-between; padding: 14px 16px !important;
		background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent) !important; background-size: 100% 100% !important;
	}
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .fleche-retour { margin: 0 !important; position: static !important; width: 38px !important; height: 38px !important; padding: 9px; border-radius: 50%; background: rgba(0,0,0,.5); box-sizing: border-box; cursor: pointer; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .mycc-partage-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 0; background: rgba(0,0,0,.5) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .mycc-partage-btn img { width: 20px; height: 20px; filter: invert(1); }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) #DivHeart1:empty { display: none !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .DspResp,
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .DspResp ~ [class*="col"] { position: relative; z-index: 1; flex: 0 0 100%; max-width: 100%; padding: 0 16px !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) #EventHeaderTitre { font-size: 26px; line-height: 1.08; margin: 0 0 10px; padding: 0 !important; letter-spacing: -.3px; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .DspResp ~ [class*="col"] { padding-bottom: 16px !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .nbre-vues {
		position: static !important; display: inline-flex !important; gap: 4px; align-items: baseline;
		background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85) !important;
		font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px !important; width: max-content !important; max-width: 100%;
	}
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .DspResp ~ [class*="col"] > #DivHeart2.nbre-vues { padding: 4px 10px !important; } /* une vieille règle mettait 40 px à droite */
	/* bande organisateur / date : alignée sur la même marge de 16 px */
	html body section.evenement-infos { padding: 14px 16px !important; }
	html body section.evenement-infos > .row { margin: 0; padding: 0 !important; }
	html body section.evenement-infos > .row > [class*="col"] { padding: 0; }
	html body section.evenement-infos .evenement-lieu { font-size: 12px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.75); }

	/* « Postuler » : même largeur que les sections suivantes. Le rembourrage de 20 px ajouté à tous les blocs
	   (règle 6, plus haut) rentrait aussi le bloc jaune. Ici, la carte est sans marge intérieure et le jaune la remplit. */
	html body #DspAplConnect .evenement-liens.home-main--section { padding: 0 !important; overflow: hidden; }
	html body #DspAplConnect h2 { padding: 18px 20px !important; margin: 0 !important; }
	html body #DspAplConnect h2 + div { padding: 18px 20px !important; border-radius: 10px; }
}

@media (max-width: 767px) {
	/* appel clôturé : la « Sélection » est posée sur le fond de la page (#313131) → pas de marge intérieure de côté,
	   les cartes s'alignent sur les autres blocs */
	html body .evenement-liens.home-main--section[style*="#313131"] { padding-left: 0 !important; padding-right: 0 !important; }
	html body #DspAplConnect div[style*="#F8C11A"] > div { padding-left: 0 !important; margin-left: 0 !important; }
	/* page artiste publique : colonne à 40 px en ligne → 16 px comme partout */
	html body .artiste-main-mobile > .row { margin-left: 0; margin-right: 0; }
	html body .artiste-main-mobile > .row > .col-12 { padding-left: 16px !important; padding-right: 16px !important; }
}

/* =====================================================================================
   2026-11-10 — TOUS LES HEROES DE CCB SUR LE MÊME MODÈLE (demande de Nicolas : « classe et design »)
   Photo plein cadre d'au moins 300 px, voile sombre en bas, retour / partager dans deux ronds en haut,
   texte en bas à gauche sur la même marge de 16 px que les rubriques :
     surtitre jaune (petit, espacé) → titre blanc 28 px → sous-titre gris clair.
   Les règles du hero d'un appel (plus haut) couvrent aussi les listes (#artistes-hero) et les artistes (.artiste-hero).
   ===================================================================================== */
@media (max-width: 767px) {
	/* ---- listes (Appels, Artistes) et fiches artiste : même cadre que la page d'un appel ---- */
	html body :is(#artistes-hero, .artiste-hero) { height: auto !important; padding: 0 !important; background-size: cover; background-position: center; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) > .row > [class*="col"]:not(.article-boutons) {
		position: relative; z-index: 1; flex: 0 0 100%; max-width: 100%; padding: 0 16px !important;
	}
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) > .row > [class*="col"]:not(.article-boutons):last-child { padding-bottom: 20px !important; }
	html body .artiste-hero #DivHeart2:empty { display: none; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) h1 {
		font-size: 28px !important; line-height: 1.04 !important; margin: 0 0 8px !important; padding: 0 !important;
		color: #fff; text-transform: uppercase; letter-spacing: -.3px; text-shadow: 0 2px 14px rgba(0,0,0,.6);
	}
	html body #artistes-hero .sous-titre {
		margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.4 !important;
		letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8) !important;
	}

	/* ---- À propos (.ccl-hero-page) ---- */
	html body .ccl-hero-page { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; height: auto !important; min-height: 300px !important; padding: 0 16px 22px !important; }
	html body .ccl-hero-page::after { content: ""; position: absolute; inset: 35% 0 0 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.8)); }
	html body .ccl-hero-page .ccl-hero-contenu { position: relative; z-index: 1; text-align: left; align-items: flex-start; margin: 0; padding: 0; max-width: none; width: 100%; }
	html body .ccl-hero-page .ccl-hero-titre { text-align: left; margin: 0; }
	html body .ccl-hero-page .ccl-hero-contour { /* devient le surtitre jaune */
		display: block; font-size: 12px !important; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
		color: #F8C11A !important; -webkit-text-stroke: 0 !important; margin: 0 0 8px;
	}
	html body .ccl-hero-page .ccl-hero-plein { display: block; font-size: 28px !important; line-height: 1.04; color: #fff !important; margin: 0 0 8px; overflow-wrap: anywhere; }
	html body .ccl-hero-page .ccl-hero-sous { display: block; font-size: 13px !important; line-height: 1.45; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.8) !important; margin: 0; }

	/* ---- profil (#vpa-hero) : nom en bas à gauche, « Recadrer » en petit rond à droite ---- */
	html body #vpa-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: auto !important; min-height: 320px; padding: 0 !important; }
	html body #vpa-hero::after { content: ""; position: absolute; inset: 40% 0 0 0; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.75)); }
	html body #vpa-hero > .container { position: relative; z-index: 1; padding: 0 70px 20px 16px !important; margin: 0; max-width: none; }
	html body #vpa-hero > .container > .row { margin: 0; }
	html body #vpa-hero > .container > .row > [class*="col"] { padding: 0; margin: 0; flex: 0 0 100%; max-width: 100%; }
	html body #vpa-hero h1 { font-size: 28px; line-height: 1.04; margin: 0 0 8px; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
	html body #vpa-hero .vpa-hero-type { font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.8); opacity: 1; }
	html body #vpa-hero .cadrage-bouton {
		z-index: 2; top: auto !important; bottom: 18px !important; right: 16px !important; left: auto !important;
		width: 40px; height: 40px; padding: 0 !important; border-radius: 50%; font-size: 0 !important; overflow: hidden;
		display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55) !important; border: 1px solid rgba(255,255,255,.25);
	}
	html body #vpa-hero .cadrage-bouton::before { content: "✥"; font-size: 18px; line-height: 1; color: #fff; }

	/* ---- accueil : même alignement (en bas à gauche) ; le logo et le titre gardent leur style ---- */
	html body #page-accueil .ccb-hero { align-items: flex-end; justify-content: flex-start; padding: 28px 16px 26px !important; }
	html body #page-accueil .ccb-hero .ccb-hero-contenu { align-items: flex-start; text-align: left; }
	html body .ccb-hero-titre, html body .ccb-hero-desc { text-align: left; margin-left: 0; margin-right: 0; }
	html body .ccb-hero-sous { letter-spacing: .12em; font-size: 12px; }
	html body .ccb-hero-actions { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }

	/* ---- profil : barre d'outils en pastilles jaunes, tout visible (plus de défilement de côté) ---- */
	html body #votre-page-artiste #vpa-fixedhero {
		left: 16px !important; right: 16px !important; transform: none !important; top: 14px !important;
		max-width: none !important; padding: 0 !important; background: none !important; border: 0 !important;
		box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 20;
	}
	html body #votre-page-artiste #vpa-fixedhero .col-12 {
		flex-wrap: wrap !important; overflow: visible !important; justify-content: center; gap: 8px !important; margin: 0 !important;
	}
	html body #votre-page-artiste #vpa-fixedhero .btn-fixedhero,
	html body #votre-page-artiste #vpa-fixedhero .btn-fixedheroV2 {
		background: #F8C11A !important; color: #111 !important; border: 0 !important; border-radius: 999px;
		padding: 9px 14px !important; font-size: 12px !important; font-family: 'GT Walsheim bold', sans-serif; letter-spacing: .02em;
		box-shadow: 0 6px 16px rgba(0,0,0,.35); white-space: nowrap; line-height: 1.2 !important;
	}
	html body #votre-page-artiste #vpa-fixedhero .btn-fixedhero::after { color: #111; }
	html body #votre-page-artiste #vpa-fixedhero span.btn-fixedhero { /* déconnexion */
		width: 35px !important; height: 35px !important; padding: 0 !important; margin: 0 !important;
		display: inline-flex !important; align-items: center; justify-content: center;
	}
	html body #votre-page-artiste #vpa-fixedhero span.btn-fixedhero img { width: 18px; height: 18px; margin: 0 0 0 2px; }
}

/* =====================================================================================
   2026-11-10 — flèche retour retirée des heroes ; profil en une seule colonne bien carrée
   ===================================================================================== */
@media (max-width: 767px) {
	/* la flèche « retour » du hero : héritage de l'ancienne appli. Le téléphone a son propre retour et le menu du bas
	   mène partout → retirée. Le bouton partager reste, plus petit, calé sur la marge de 16 px. */
	/* (2026-11-11) flèche « retour » remise, comme dans les heroes CCL (Nicolas : « finalement je trouve ça pratique ») : chevron blanc dans une pastille ronde sombre, comme le bouton partager */
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .fleche-retour { display: block !important; width: 34px !important; height: 34px !important; padding: 8px !important; margin: 0 !important; box-sizing: border-box; border-radius: 50%; background: rgba(0, 0, 0, .5) !important; cursor: pointer; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) { justify-content: space-between; padding: 14px 16px !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .mycc-partage-btn { width: 34px; height: 34px; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .mycc-partage-btn img { width: 17px; height: 17px; }
	/* (2026-11-11) listes (Appels, Artistes) : la barre reste aussi, pour la flèche retour (avant : masquée) */

	/* PROFIL : tout sur la même colonne que le reste de la page (16 px de chaque côté).
	   Les tuiles du formulaire (Informations → Fiches techniques) étaient rentrées de 9 px de plus, plus leur rembourrage. */
	html body #votre-page-artiste #vpa-ficheartiste .vpa-boxradius { margin: 12px 0 0 !important; padding: 0 !important; display: block; }
	html body #votre-page-artiste #vpa-ficheartiste .vpa-boxradius > [class*="col-"] { padding: 0 !important; margin: 0 !important; max-width: 100%; flex: none; width: 100%; }
	html body #votre-page-artiste #CCBArtCoord,
	html body #votre-page-artiste #vpa-ficheartiste .col-lg-4 > #vpa-infos-generales,
	html body #votre-page-artiste #vpa-bio, html body #votre-page-artiste #vpa-contacts-medias,
	html body #votre-page-artiste #vpa-contacts, html body #votre-page-artiste #vpa-fiches-tech { margin: 0 0 14px !important; width: 100%; box-sizing: border-box; }
	html body #votre-page-artiste #CCBArtCoord > #vpa-infos-generales { padding: 0 !important; }

	/* photos = même format que les vidéos : pleine largeur de la colonne, 16:9, recadrées */
	html body #votre-page-artiste #vpa-galerie .vpa-boxradius { margin: 12px 0 0 !important; padding: 0 !important; background: none !important; border-radius: 0; }
	html body #votre-page-artiste #DspAllPics { margin: 0 !important; width: 100% !important; display: grid; grid-template-columns: 1fr; gap: 14px; }
	html body #votre-page-artiste #DspAllPics > * { padding: 0 !important; margin: 0 !important; height: auto !important; width: 100% !important; max-width: 100%; flex: none; position: relative; }
	html body #votre-page-artiste #DspAllPics img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
	html body #votre-page-artiste #vpa-videos .vpa-video-container { padding: 0 !important; margin: 0 0 14px !important; max-width: 100%; flex: none; width: 100%; }
	html body #votre-page-artiste #vpa-videos .vpa-video-container iframe { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border-radius: 10px; }
	html body #votre-page-artiste #vpa-videos .row { margin-left: 0; margin-right: 0; }
}
@media (max-width: 767px) {
	/* boutons de la galerie (+, Supprimer, Modifier l'ordre, Recadrer) : sur la même marge que les photos */
	html body #votre-page-artiste #DspGalMenu { margin-left: 0 !important; margin-right: 0 !important; }
	html body #votre-page-artiste #DspGalMenu > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
	html body #votre-page-artiste #DspGalMenu #btn-gallery-add { margin-left: 0 !important; }
}

/* 2026-11-10 — page d'un appel : le compteur de vues passe sous la date (bande noire), plus dans le hero */
.evenement-infos .evenement-vues { display: none; }
@media (max-width: 767px) {
	html body .evenement-hero.no-desktop #DivHeart2 { display: none !important; }
	html body .evenement-hero.no-desktop .DspResp { padding-bottom: 16px !important; }
	html body section.evenement-infos .evenement-vues {
		display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; letter-spacing: .06em;
		text-transform: uppercase; color: rgba(255,255,255,.6);
	}
}

/* 2026-11-10 — mêmes couleurs que sur ordinateur (demande de Nicolas) :
   organisateur en blanc, compteur « VU » gris + nombre blanc gras, partager = rond blanc à icône sombre */
@media (max-width: 767px) {
	html body section.evenement-infos .evenement-lieu { color: #fff; letter-spacing: normal; }
	html body section.evenement-infos .evenement-vues { color: #afafaf; font-family: 'GT Walsheim bold', sans-serif; font-size: 12px; letter-spacing: normal; }
	html body section.evenement-infos .evenement-vues span { color: #fff; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .mycc-partage-btn { width: 35px; height: 35px; background: #fff !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) .mycc-partage-btn img { width: 20px; height: 20px; filter: none; }
}

/* 2026-11-10 — profil tout neuf (pas encore d'artiste : nom + Artiste/DJ + Sauver) :
   le contenu passait sous la barre de pastilles jaunes et le champ du nom dépassait en haut */
@media (max-width: 767px) {
	html body #vpa-hero.vpa-hero-nouveau { justify-content: flex-start; }
	html body #vpa-hero.vpa-hero-nouveau::after { display: none; }
	html body #vpa-hero.vpa-hero-nouveau > .container { padding: 72px 16px 24px !important; }
}

/* 2026-11-10 — pages Appels / Artistes : même espace entre le hero et le premier titre (avant : 60 px d'un côté, 78 px de l'autre,
   une section vide ajoutait 48 px sous le hero des Artistes) */
@media (max-width: 767px) {
	html body .hero-fixed:has(#artistes-hero) + section:not([id]) { margin: 0 !important; }
	html body .hero-fixed:has(#artistes-hero) + section > .container3:first-child,
	html body .hero-fixed:has(#artistes-hero) + section:not([id]) + section > .container3:first-child { padding-top: 40px !important; }
}
/* (page Appels : remplace un padding-top: 60px!important écrit en ligne, impossible à adapter au téléphone) */
html body .container3.ccb-haut-60 { padding-top: 60px !important; }
@media (max-width: 767px) {
	html body .hero-fixed:has(#artistes-hero) + section > .container3.ccb-haut-60 { padding-top: 40px !important; }
}

/* =====================================================================================
   2026-11-10 — UNE SEULE LIGNE DE TEXTE À 32 PX (demande de Nicolas, même principe que court-circuit.live)
   Avant : titres et textes hors des blocs à 16 px, mais texte des blocs blancs à 32 ou 36 px → deux lignes verticales.
   Maintenant : blocs blancs et cartes à 16 px du bord ; TOUT le texte (hero, bande organisateur/date, titres de
   rubrique, contenu des blocs) à 32 px, à gauche comme à droite.
   ===================================================================================== */
@media (max-width: 767px) {
	/* hero : titre, surtitre, sous-titre, compteur, bouton partager */
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .DspResp,
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) .DspResp ~ [class*="col"],
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) > .row > [class*="col"]:not(.article-boutons) { padding-left: 32px !important; padding-right: 32px !important; }
	html body :is(.evenement-hero, .artiste-hero, #artistes-hero) :is(.hero-fixed, .article-boutons) { padding: 14px 32px !important; }
	html body .ccl-hero-page { padding: 0 32px 22px !important; }
	html body #vpa-hero.vpa-hero-nouveau > .container { padding: 72px 32px 24px !important; }
	/* bande organisateur / date */
	html body section.evenement-infos { padding: 14px 32px !important; }
	/* titres de rubrique posés sur le fond de la page */
	html body h2.titre-ligne-mobile { padding-left: 16px !important; padding-right: 16px !important; }
	html body .evenement-liens.home-main--section[style*="#313131"] h2 { padding-left: 16px !important; padding-right: 16px !important; }
	/* blocs blancs : 16 px dedans (texte à 16 + 16 = 32 px) */
	html body .evenement-liens.home-main--section { padding: 20px 16px !important; }
	html body #home-main--appels > div { padding: 20px 16px !important; }
	html body .evenement-liens.home-main--section[style*="#313131"] { padding-left: 0 !important; padding-right: 0 !important; }
	/* cartes d'appel : texte à 32 px */
	html body .ccb-appel-corps { padding-left: 16px !important; padding-right: 16px !important; }
	/* bloc « Postuler » / « Cet appel est clôturé » : même marge intérieure que les autres blocs */
	html body #DspAplConnect h2 { padding-left: 16px !important; padding-right: 16px !important; }
	html body #DspAplConnect h2 + div { padding-left: 16px !important; padding-right: 16px !important; }
	/* accueil : textes à 32 px, les deux gros boutons gardent la largeur des cartes (16 px) */
	html body #page-accueil .ccb-hero { padding-left: 32px !important; padding-right: 32px !important; }
	html body #page-accueil .ccb-hero .ccb-hero-actions { width: calc(100% + 32px) !important; max-width: none !important; margin-left: -16px !important; margin-right: -16px !important; }
}

/* (2026-11-11) Page d'un artiste et page d'un appel, sur téléphone : le nom est en bas du hero (au-dessus du « vu X fois ») pour laisser voir la photo,
   sur un fond sombre transparent (comme sur CCL, demande de Nicolas) — lisible quelle que soit la photo */
@media (max-width: 767px) {
	html body :is(#page-artiste, #page-evenement) :is(.artiste-hero, .evenement-hero) > .row > .DspResp {
		position: absolute !important; left: 16px; top: auto; bottom: 48px; transform: none; z-index: 1;
		flex: none; width: auto !important; max-width: calc(100% - 32px) !important; padding: 10px 16px 12px !important;
		border-radius: 12px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	}
	html body :is(#page-artiste, #page-evenement) :is(.artiste-hero, .evenement-hero) > .row > .DspResp h1 { margin: 0 !important; width: auto !important; overflow-wrap: anywhere; }
	/* « vu X fois » / « suivi par » : dans le coin en bas à droite de la photo */
	html body :is(#page-artiste, #page-evenement) :is(.artiste-hero, .evenement-hero) > .row > .DspResp ~ [class*="col"] { position: static !important; padding: 0 !important; }
	html body :is(#page-artiste, #page-evenement) :is(.artiste-hero, .evenement-hero) .nbre-vues {
		position: absolute !important; right: 12px; bottom: 12px; z-index: 1; margin: 0 !important; max-width: 60%;
		background: rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 10px;
	}
	html body #page-evenement .evenement-hero .nbre-vues { display: inline-flex !important; }   /* (il était masqué, doublé dans la bande noire) */
	html body #page-evenement .evenement-infos .evenement-vues { display: none !important; }
}

/* 2026-11-13 — bandeau d'un appel, comme celui d'un artiste (demande de Nicolas : « fait cheap », titre perdu sur l'image) :
   titre en bas à gauche sur le dégradé, petite étiquette jaune « Appel à candidatures » au-dessus,
   compteur de vues en pastille dans le coin (il passait à la ligne et remontait le titre au milieu de l'image) */
.ccb-appel-hero { position: relative; }
.ccb-appel-hero > .row > .DspResp { flex: 0 0 auto; width: 100%; max-width: 75%; }
.ccb-appel-hero > .row > .DspResp ~ [class*="col"] { position: static !important; flex: 0 0 0 !important; width: 0 !important; padding: 0 !important; }
.ccb-appel-hero .nbre-vues {
	position: absolute !important; right: 28px; bottom: 20px; z-index: 1; margin: 0 !important; width: auto !important;
	padding: 4px 10px !important; border-radius: 10px; background: rgba(0, 0, 0, .55) !important;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ccb-appel-type {
	display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 4px;
	background: #F8C11A; color: #000; font-family: 'GT Walsheim bold', sans-serif;
	font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
}
.ccb-appel-hero .big-title { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
@media (max-width: 767px) {
	html body .ccb-appel-hero .nbre-vues { right: 12px; bottom: 12px; }
	.ccb-appel-type { font-size: 10px; margin-bottom: 6px; }
}