/*
 * Page Partenaires (1.127) : bac à pochettes (.pc), polaroïds (.pp), rubrique « Ils m'ont fait confiance » en badges VIP (.tb) ou projecteur (.ts).
 * Chargée par la seule page Partenaires (djb_partners_enqueue(), inc/partenaires.php) ; script : assets/js/partenaires.js.
 *
 * Couleurs : quatre teintes --pt-1 à --pt-4 donnent l'étiquette des disques, les adhésifs des polaroïds, les rubans des badges et
 * le faisceau du projecteur. En ambiance d'origine et en Soirée elles sont sobres (or, bronze, taupe, champagne) ; en Disco et en
 * Funk elles prennent les couleurs de l'ambiance (--amb-accent, --amb-c1 à --amb-c3, écrites par inc/ambiances.php).
 * Le nombre par ligne (--per) vient du réglage ; il diminue tout seul sur tablette (3 au plus) et sur téléphone (2).
 */

:root {
	--pt-1: #C9A24B;
	--pt-2: #A67C52;
	--pt-3: #8C7F70;
	--pt-4: #D9C79E;
}
html.djb-disco,
html.djb-funk,
html.djb-electro,
html.djb-urbain {
	--pt-1: var(--amb-accent, #C9A24B);
	--pt-2: var(--amb-c1, #A67C52);
	--pt-3: var(--amb-c2, #8C7F70);
	--pt-4: var(--amb-c3, #D9C79E);
}

/* ---------- Nombre par ligne : réglage, puis tablette et téléphone ---------- */
.pc, .pp, .tb, .ts { --n: var(--per, 3); }
@media (max-width: 960px) {
	:is(.pc, .pp, .tb, .ts):is([data-per="4"], [data-per="5"], [data-per="6"]) { --n: 3; }
}
@media (max-width: 640px) {
	:is(.pc, .pp, .tb, .ts):is([data-per="3"], [data-per="4"], [data-per="5"], [data-per="6"]) { --n: 2; }
}

/* ---------- La photo d'un partenaire : format, cadrage (--pos), zoom (--z du partenaire x --gz du réglage) ---------- */
.pt-ph { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); background: var(--media); }
.pt-ph__img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: var(--pos, center);
	transform: scale(calc(var(--z, 1) * var(--gz, 1))); transform-origin: var(--pos, center);
	transition: transform 0.6s ease, filter 0.4s ease;
}
.pt-ph--mono { display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--pt-1) 34%, var(--media)), var(--media)); }
.pt-ph__mono { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 5vw, 56px); line-height: 1; color: var(--accent); }
[data-tone="bw"] .pt-ph__img,
[data-tone="bwhover"] .pt-ph__img { filter: grayscale(1) contrast(1.04); }
.pt-contact__phone { font-size: 13px; color: var(--muted-2); }

/* La carte « Vous êtes prestataire ? » */
.pt-join__cat { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--muted-2); }
.pt-join__text { display: block; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ======================================================================
 * Polaroïds
 * ==================================================================== */
.pp { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 46px 28px; padding: 30px 0 8px; }
.pp__i {
	position: relative; perspective: 1100px; rotate: var(--r, 0deg); container-type: inline-size;
	transition: rotate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp__i:hover, .pp__i:focus-within, .pp__i.is-flipped { rotate: 0deg; translate: 0 -8px; z-index: 3; }
/* L'adhésif qui tient le polaroïd : une des quatre teintes de l'ambiance */
.pp__i:not(.pp__i--join)::before {
	content: ""; position: absolute; z-index: 4; left: 50%; top: -11px; width: 74px; height: 22px; margin-left: -37px;
	background: color-mix(in srgb, var(--t, var(--pt-4)) 62%, transparent); transform: rotate(-3deg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); pointer-events: none;
}
.pp__in { position: relative; display: block; }
.pp__f, .pp__b { background: #FBF8F2; color: #1D1A17; border-radius: 3px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(29, 26, 23, 0.07); }
.pp__f { position: relative; display: block; padding: 10px 10px 0; }
.pp__turn { position: absolute; inset: 0; z-index: 2; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 3px; }
.pp__turn:focus-visible { outline-offset: -4px; }
.pp__cap { display: block; padding: 10px 2px 14px; text-align: left; }
.pp__name { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.2; }
.pp__cat { display: block; margin-top: 3px; font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: 0.16em; color: #7E6226; }
/* Le dos : sans le script, il suit la photo (rien n'est caché). Tout le texte suit la taille du polaroïd (unités « cqw » = 1 % de sa largeur ; le script
   assets/js/partenaires.js cherche ensuite la plus grande taille pour laquelle tout le texte tient) : grand polaroïd = grand texte. */
.pp__b { display: flex; flex-direction: column; gap: 0.5em; margin-top: 10px; padding: 1.3em 1.2em 1.1em; text-align: left; font-size: 13px; font-size: clamp(12px, 6cqw, 26px); }
.pp__bcat { font-size: 0.74em; font-weight: 800; line-height: 1.3; letter-spacing: 0.16em; color: #7E6226; }
.pp__bname { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5em; line-height: 1.15; }
.pp__text { font-size: 1em; line-height: 1.5; color: #3E3831; }
.pp__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; margin-top: auto; padding-top: 0.4em; font-size: 0.95em; }
.pp__contact .pt-contact__phone { font-size: 1em; font-weight: 700; color: #1D1A17; }
.pp__contact .arrow-link { font-size: 1em; }
.pp__back { align-self: flex-start; padding: 0.3em 0 0; background: none; border: 0; cursor: pointer; font-size: 0.8em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #7E6226; }
/* Polaroïd très étroit (6 par ligne) : le métier, déjà écrit devant, n'est pas répété et les marges se resserrent, pour que le texte garde une taille lisible */
@container (max-width: 200px) {
	.pp__b { gap: 0.35em; padding: 0.9em 0.85em 0.8em; }
	.pp__bcat { display: none; }
}
.pp.is-live .pp__b { cursor: pointer; } /* un clic sur le texte retourne le polaroïd vers sa photo, comme pour les avis */
.pp.is-live .pp__b a { cursor: pointer; }
.pp:not(.is-live) .pp__turn, .pp:not(.is-live) .pp__back { display: none; }
/* Le polaroïd se retourne */
.pp.is-live .pp__in { transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pp.is-live .pp__i.is-flipped .pp__in { transform: rotateY(180deg); }
.pp.is-live .pp__f { -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible; }
.pp.is-live .pp__b {
	position: absolute; inset: 0; margin: 0; overflow: auto; transform: rotateY(180deg);
	-webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: hidden; transition: visibility 0s 0.4s;
}
.pp.is-live .pp__i.is-flipped .pp__b { visibility: visible; transition: visibility 0s; }
.pp.is-live .pp__i.is-flipped .pp__f { visibility: hidden; transition: visibility 0s 0.4s; }
/* Noir et blanc, en couleur au survol ou quand le polaroïd est retourné */
.pp__i:hover .pt-ph__img, .pp__i:focus-within .pt-ph__img { transform: scale(calc(var(--z, 1) * var(--gz, 1) * 1.04)); }
[data-tone="bwhover"] .pp__i:hover .pt-ph__img, [data-tone="bwhover"] .pp__i:focus-within .pt-ph__img { filter: none; }
/* La dernière case */
.pp__i--join { rotate: 0deg; }
.pp__i--join .pp__in { height: 100%; }
.pp__f--join { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; height: 100%; min-height: 190px; padding: 24px; background: transparent; color: var(--cream); border: 2px dashed var(--line-strong); box-shadow: none; }

/* ======================================================================
 * Bac à pochettes
 * ==================================================================== */
.pc { --pop: 30%; --gap: 22px; container-type: inline-size; }
.pc[data-fmt="landscape"] { --pop: 26%; }
/* La première ligne garde de la place au-dessus des pochettes pour les disques sortis (0,22 x la largeur d'une pochette) ; les lignes suivantes les cachent derrière la ligne du dessus. */
.pc__row {
	display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); isolation: isolate;
	padding-top: 70px; padding-top: calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n) * 0.22);
}
.pc__s { position: relative; display: block; margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* La pochette ; le disque est derrière, une étiquette de la couleur de l'ambiance */
.pc__c { position: relative; z-index: 1; display: block; margin-top: var(--pop); overflow: hidden; border-radius: 4px; background: var(--media); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.55); transition: box-shadow 0.25s ease; }
.pc__c::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--t, var(--pt-1)); mix-blend-mode: soft-light; opacity: 0.4; pointer-events: none; }
.pc__t { position: absolute; z-index: 1; inset: auto 0 0 0; display: block; padding: 34px 12px 12px; color: #F5EFE4; background: linear-gradient(180deg, rgba(20, 17, 14, 0), rgba(20, 17, 14, 0.88)); }
.pc__t b { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.15; }
.pc__t small { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 800; line-height: 1.3; letter-spacing: 0.15em; color: #E9D9AE; }
.pc__v {
	position: absolute; z-index: 0; top: 0; left: 0; right: 0; width: 88%; margin: 0 auto; aspect-ratio: 1; border-radius: 50%;
	background: repeating-radial-gradient(#15110E 0 2px, #342B22 2px 4px);
	box-shadow: 0 0 0 1px rgba(245, 239, 228, 0.22), 0 6px 14px rgba(0, 0, 0, 0.45);
	translate: 0 28%; transition: translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pc[data-fmt="landscape"] .pc__v { width: 74%; }
.pc__v i { position: absolute; inset: 26%; display: grid; place-items: center; border-radius: 50%; background: var(--t, var(--pt-1)); color: #1C1916; font-style: normal; font-size: clamp(11px, 1.5vw, 15px); font-weight: 800; line-height: 1; }
/* En Disco et Funk le disque sorti rayonne de la couleur de son étiquette */
html.djb-disco .pc__v, html.djb-funk .pc__v, html.djb-electro .pc__v, html.djb-urbain .pc__v { box-shadow: 0 0 0 1px rgba(245, 239, 228, 0.34), 0 0 26px -6px var(--t, var(--pt-1)); }
html.djb-party .pc__v { box-shadow: 0 0 0 1px rgba(245, 239, 228, 0.3), 0 6px 14px rgba(0, 0, 0, 0.45); }
.pc__v::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: #0C0A08; transform: translate(-50%, -50%); }
.pc__s:hover .pc__v, .pc__s:focus-visible .pc__v, .pc__s.is-on .pc__v { translate: 0 -24%; }
.pc[data-spin="on"] .pc__s:hover .pc__v, .pc[data-spin="on"] .pc__s:focus-visible .pc__v, .pc[data-spin="on"] .pc__s.is-on .pc__v { animation: pc-spin 5s linear infinite; }
.pc__s.is-on .pc__c { box-shadow: 0 0 0 2px var(--pt-1), 0 12px 24px -10px rgba(0, 0, 0, 0.55); }
.pc__s:focus-visible { outline: none; }
.pc__s:focus-visible .pc__c { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-tone="bwhover"] .pc__s:hover .pt-ph__img, [data-tone="bwhover"] .pc__s:focus-visible .pt-ph__img, [data-tone="bwhover"] .pc__s.is-on .pt-ph__img { filter: none; }
.pc__s:hover .pt-ph__img { transform: scale(calc(var(--z, 1) * var(--gz, 1) * 1.04)); }
/* La dernière case */
.pc__s--join { cursor: default; }
.pc__s--join .pc__c { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; aspect-ratio: var(--ar, 4 / 5); padding: 16px; overflow: auto; background: transparent; color: var(--cream); border: 2px dashed var(--line-strong); box-shadow: none; }
.pc__s--join .pc__c::after { display: none; }
.pc__s--join .pt-join__text { font-size: 13px; line-height: 1.55; }
/* « En lecture » : le partenaire choisi */
.pc__np { margin-top: 34px; }
.pc__p { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 22px; align-items: center; padding: 18px 22px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; color: var(--cream); }
.pc:not(.is-live) .pc__p + .pc__p { margin-top: 14px; }
.pc.is-live .pc__p:not(.is-on) { display: none; }
.pc.is-live .pc__p.is-on { animation: pc-in 0.4s ease; }
.pc__eq { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.pc__eq i { flex: 1; height: 100%; border-radius: 2px 2px 0 0; background: var(--pt-1); transform-origin: 50% 100%; animation: pc-eq 0.9s ease-in-out infinite alternate; }
.pc__eq i:nth-child(2) { background: var(--pt-2); animation-delay: -0.3s; }
.pc__eq i:nth-child(3) { background: var(--pt-3); animation-delay: -0.6s; }
.pc__eq i:nth-child(4) { background: var(--pt-4); animation-delay: -0.15s; }
.pc__eq i:nth-child(5) { animation-delay: -0.45s; }
.pc__k { font-size: 10.5px; font-weight: 800; line-height: 1.4; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; }
.pc__n { margin: 2px 0 4px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; }
.pc__d { max-width: 64ch; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.pc__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 10px; }
@keyframes pp-open { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes pc-spin { to { rotate: 360deg; } }
@keyframes pc-eq { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
@keyframes pc-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ======================================================================
 * Encadré « Vous êtes prestataire ? » (1.133) : un petit cadre sous la présentation des partenaires, sur deux lignes (phrase, puis lien).
 * Réglages (Pages › Partenaires › Modifier) : data-h hauteur, data-fs taille du texte, data-align alignement, data-w largeur, data-frame contour, data-link place du lien.
 * ==================================================================== */
.pj {
	--pj-py: 14px; --pj-px: 22px; --pj-fs: 14.5px;
	display: flex; flex-direction: column; align-items: center; gap: 0.3em; box-sizing: border-box; max-width: 100%; margin: 22px auto 0; padding: var(--pj-py) var(--pj-px);
	font-size: var(--pj-fs); line-height: 1.5; text-align: center; color: var(--muted); background: var(--seal); border: 2px dashed var(--line-strong); border-radius: 10px;
}
.pj p { margin: 0; }
.pj__l1 { text-wrap: balance; }
.pj__cat { margin-right: 0.5em; font-size: 0.82em; font-weight: 800; letter-spacing: 0.14em; color: var(--muted-2); }
.pj .arrow-link { font-size: 1em; }
.pj[data-h="fine"] { --pj-py: 8px; --pj-px: 18px; }
.pj[data-h="normal"] { --pj-py: 22px; --pj-px: 28px; }
.pj[data-h="high"] { --pj-py: 34px; --pj-px: 34px; }
.pj[data-fs="small"] { --pj-fs: 13px; }
.pj[data-fs="large"] { --pj-fs: 16.5px; }
.pj[data-fs="xlarge"] { --pj-fs: 19px; }
.pj[data-w="medium"] { max-width: 860px; }
.pj[data-w="small"] { max-width: 560px; }
.pj[data-align="left"] { align-items: flex-start; margin-left: 0; margin-right: auto; text-align: left; }
.pj[data-align="right"] { align-items: flex-end; margin-left: auto; margin-right: 0; text-align: right; }
.pj[data-frame="solid"] { border-style: solid; }
.pj[data-frame="none"] { border-color: transparent; }
/* Lien à droite du texte, sur la même ligne (sur téléphone il repasse dessous) */
@media (min-width: 641px) {
	.pj[data-link="side"] { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.3em 1.6em; }
	.pj[data-link="side"] .pj__l1 { flex: 0 1 auto; min-width: 0; }
	.pj[data-link="side"] .pj__l2 { flex: none; white-space: nowrap; }
	.pj[data-link="side"][data-align="left"] { justify-content: flex-start; }
	.pj[data-link="side"][data-align="right"] { justify-content: flex-end; }
}
@media (max-width: 640px) {
	.pj { margin-top: 16px; }
	.pj[data-w] { max-width: 100%; }
}

/* ======================================================================
 * « Ils m'ont fait confiance » : texte, badges VIP, projecteur
 * ==================================================================== */
.trust__text { max-width: 560px; margin: 14px auto 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.trust .section-head { margin-bottom: 52px; }
/* Le logo : centré dans sa tuile, proportionné par le réglage « Taille des logos » (--lz) */
.tr-logo { position: absolute; inset: 0; margin: auto; width: auto; height: auto; object-fit: contain; max-width: min(100%, calc(84% * var(--lz, 1))); max-height: min(100%, calc(84% * var(--lz, 1))); transition: filter 0.35s ease; }
[data-tone="bw"] .tr-logo, [data-tone="bwhover"] .tr-logo { filter: grayscale(1) contrast(1.08); }

/* Badges VIP */
.tb { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 34px 24px; }
.tb__i { position: relative; display: block; transform-origin: 50% 0; transition: translate 0.3s ease; }
.tb[data-sway="on"] .tb__i { animation: tb-sway var(--dur, 5s) ease-in-out var(--d, 0s) infinite alternate; }
.tb__i:hover, .tb__i:focus-within { animation-play-state: paused; }
.tb.is-off .tb__i { animation-play-state: paused; }
.tb__s {
	position: absolute; z-index: 2; top: -26px; left: 50%; width: 24px; height: 84px; margin-left: -12px;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%); mask-image: linear-gradient(to bottom, transparent, #000 34%);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.22)), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 6px, transparent 6px 12px), var(--t, var(--pt-1));
}
.tb__s::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 34px; height: 16px; margin-left: -17px; border-radius: 3px; background: linear-gradient(#EDE7DA, #A59E8E); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.tb__c {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 52px; padding: 36px 14px 16px;
	background: #FBF8F2; color: #1D1A17; text-align: center; border-radius: 14px; border-bottom: 6px solid var(--t, var(--pt-1));
	box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(29, 26, 23, 0.08);
	transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.tb__c::before { content: ""; position: absolute; top: 20px; left: 50%; width: 44px; height: 8px; margin-left: -22px; border-radius: 99px; background: var(--night, #1C1916); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
a.tb__c:hover, a.tb__c:focus-visible { translate: 0 -4px; box-shadow: 0 26px 42px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(29, 26, 23, 0.08); }
.tb__k { margin-top: 6px; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.28em; color: #6E5A2E; }
.tb__l { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; }
.tb__e { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14px; line-height: 1.3; color: #3E3831; }
.tb__y { padding: 4px 10px; border: 1px solid var(--t, var(--pt-1)); border-radius: 99px; font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.16em; color: #6E5A2E; }
[data-tone="bwhover"] .tb__c:hover .tr-logo, [data-tone="bwhover"] .tb__c:focus-visible .tr-logo { filter: none; }
@keyframes tb-sway { from { rotate: -2.4deg; } to { rotate: 2.4deg; } }

/* Projecteur : les logos sont dans la pénombre ; un faisceau suit la souris (ou balaie tout seul) et les allume */
.ts { position: relative; padding: 6px 0; }
.ts__g { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 18px; }
.ts__t { display: block; }
.ts__a { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: #F7F2EA; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); transition: translate 0.3s ease; }
a.ts__a:hover, a.ts__a:focus-visible { translate: 0 -3px; }
.ts__lit, .ts__glow { display: none; }
.ts.is-live .ts__g:not(.ts__lit) .ts__t { opacity: 0.2; filter: grayscale(0.7); }
.ts.is-live .ts__lit {
	position: absolute; inset: 6px 0; display: grid; pointer-events: none;
	-webkit-mask-image: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, 0.85) 38%, transparent 100%);
	mask-image: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), #000 0, rgba(0, 0, 0, 0.85) 38%, transparent 100%);
}
.ts.is-live .ts__lit .ts__a { box-shadow: 0 0 26px -4px color-mix(in srgb, var(--pt-1) 62%, transparent); }
.ts.is-live .ts__glow {
	position: absolute; inset: -20px; display: block; pointer-events: none; mix-blend-mode: screen;
	background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pt-1) 24%, transparent), transparent 72%);
}

@media (max-width: 960px) {
	.pp { gap: 40px 22px; }
}
@media (max-width: 640px) {
	.pp { gap: 36px 16px; }
	/* Sur téléphone la carte est trop petite pour retourner son texte : elle s'ouvre sur toute la largeur, sans retournement */
	.pp.is-live .pp__i.is-flipped { grid-column: 1 / -1; }
	.pp.is-live .pp__in { transform-style: flat; }
	.pp.is-live .pp__i.is-flipped .pp__in { transform: none; }
	.pp.is-live .pp__b { display: none; position: relative; inset: auto; transform: none; overflow: visible; visibility: visible; }
	.pp.is-live .pp__i.is-flipped .pp__b { display: flex; animation: pp-open 0.35s ease; }
	.pp.is-live .pp__i.is-flipped .pp__f { display: none; }
	.pc { --gap: 14px; }
	.pc__p { grid-template-columns: minmax(0, 1fr); padding: 16px; }
	.pc__eq { height: 34px; }
	.pc__t { padding: 26px 9px 9px; }
	.tb { gap: 26px 14px; }
	.tb__c { padding: 34px 8px 12px; }
	.ts__g { gap: 12px; }
	.trust .section-head { margin-bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.pp__i, .pp.is-live .pp__in, .pc__v, .pc__c, .tb__i, .tb__c, .ts__a, .pt-ph__img { transition: none; }
	.tb[data-sway="on"] .tb__i, .pc[data-spin="on"] .pc__s .pc__v, .pc.is-live .pc__p.is-on, .pp.is-live .pp__i.is-flipped .pp__b { animation: none !important; }
	.pc__eq i { animation: none; transform: scaleY(0.6); }
	.pp.is-live .pp__b, .pp.is-live .pp__i.is-flipped .pp__f { transition: none; }
}