:root {
	/* Marque Proxyphar — valeurs relevées dans le logo fourni.
	   Contrastes mesurés sur blanc : violet 9,14:1 (tout usage),
	   magenta 3,96:1 (gros texte et décor), orange 2,81:1 (décor seul).
	   Les couleurs de statut restent sémantiques et ne sont jamais
	   remplacées par des couleurs de marque. */
	/* Interface : les tons réellement employés sur proxyphar.fr, pour la
	   continuité visuelle. Ils sont plus sourds que ceux du logo. */
	--pp360-violet: #5A3D8E;          /* 8,42:1 sur blanc — tout usage      */
	--pp360-violet-fonce: #2E2545;    /* 14,3:1 — titres                     */
	--pp360-violet-pale: #F1ECF7;
	--pp360-magenta: #E62E7F;         /* 4,15:1 — gros texte et décor        */
	--pp360-orange: #EE7B26;          /* 2,8:1  — décor seul                 */
	--pp360-bleuvert: #7EBEC5;        /* 2,09:1 — décor seul                 */

	/* Logo : ses couleurs d'origine, relevées dans le fichier fourni.
	   Un logo se reproduit dans ses teintes, pas dans celles de la page. */
	--pp360-logo-violet: #642C8F;
	--pp360-logo-magenta: #F90079;
	--pp360-logo-orange: #FB7100;

	--pp360-fond: #FCF5F3;   /* le blanc chaud du site */
	--pp360-surface: #FFFFFF;
	--pp360-bordure: #DDDDDD;
	--pp360-encre: #303030;  /* la couleur de texte du site */
	--pp360-encre-2: #656363;
	--pp360-lavande: var(--pp360-violet-pale);
	--pp360-ok: #2E7D32;
	--pp360-ok-bg: #EAF5EB;
	--pp360-warn: #C97A10;
	--pp360-warn-bg: #FFF4E3;
	--pp360-ko: #C62828;
	--pp360-ko-bg: #FDECEC;
	--pp360-na: #656363;
	--pp360-na-bg: #F4F1F0;
}

/* Tout est prefixe et cantonne a .pp360-app pour ne pas heurter le theme. */
.pp360-app {
	color: var(--pp360-encre); line-height: 1.6;
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pp360-app * { box-sizing: border-box; }

.pp360-entete {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
	padding-bottom: 12px; border-bottom: 2px solid var(--pp360-lavande);
}
.pp360-entete h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--pp360-violet-fonce); }
.pp360-compte { font-size: .86rem; color: var(--pp360-encre-2); font-weight: 600; }
.pp360-delegue {
	background: var(--pp360-warn-bg); border: 1px solid #F2D9AE; color: #8A5407;
	padding: 8px 14px; border-radius: 8px; font-size: .86rem; margin-bottom: 14px;
}

.pp360-vide, .pp360-alerte {
	background: var(--pp360-surface); border: 1px dashed var(--pp360-bordure);
	border-radius: 12px; padding: 36px 24px; text-align: center; color: var(--pp360-encre-2);
}
.pp360-vide h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--pp360-encre); }
.pp360-alerte {
	border-style: solid; border-color: #F3C4C4; background: var(--pp360-ko-bg);
	color: var(--pp360-ko); text-align: left; padding: 16px 18px;
}
.pp360-detail { font-size: .84rem; color: var(--pp360-encre-2); }

.pp360-btn {
	display: inline-block; background: var(--pp360-violet); color: #fff !important;
	padding: 10px 20px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.pp360-btn:hover { filter: brightness(1.12); color: #fff !important; }

/* Fiche d'audit depliable */
.pp360-audit {
	background: var(--pp360-surface); border: 1px solid var(--pp360-bordure);
	border-left: 5px solid var(--pp360-bordure); border-radius: 12px;
	margin-bottom: 12px; overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.pp360-audit.pp360-ok { border-left-color: var(--pp360-ok); }
.pp360-audit.pp360-warn { border-left-color: var(--pp360-warn); }
.pp360-audit.pp360-ko { border-left-color: var(--pp360-ko); }

.pp360-audit > summary {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 16px 20px; cursor: pointer; list-style: none;
}
.pp360-audit > summary::-webkit-details-marker { display: none; }
.pp360-audit > summary:hover { background: #FAFBFD; }
.pp360-audit[open] > summary { border-bottom: 1px solid var(--pp360-fond); }

.pp360-pastille {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
	border: 3px solid var(--pp360-bordure); font-weight: 800; font-size: 1.02rem; line-height: 1;
}
.pp360-pastille small { font-size: .56rem; font-weight: 600; color: var(--pp360-encre-2); margin-top: 2px; }
.pp360-pastille.pp360-ok { border-color: var(--pp360-ok); color: var(--pp360-ok); }
.pp360-pastille.pp360-warn { border-color: var(--pp360-warn); color: var(--pp360-warn); }
.pp360-pastille.pp360-ko { border-color: var(--pp360-ko); color: var(--pp360-ko); }

.pp360-resume { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pp360-type { font-weight: 700; font-size: 1rem; }
.pp360-meta { font-size: .84rem; color: var(--pp360-encre-2); }

.pp360-badge {
	display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
	font-size: .76rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.pp360-badge.pp360-ok { background: var(--pp360-ok-bg); color: var(--pp360-ok); border-color: #BFDDC2; }
.pp360-badge.pp360-warn { background: var(--pp360-warn-bg); color: var(--pp360-warn); border-color: #F2D9AE; }
.pp360-badge.pp360-ko { background: var(--pp360-ko-bg); color: var(--pp360-ko); border-color: #F3C4C4; }
.pp360-badge.pp360-na { background: var(--pp360-na-bg); color: var(--pp360-na); border-color: var(--pp360-bordure); }

.pp360-corps { padding: 18px 20px 22px; }
.pp360-corps h4 {
	margin: 20px 0 10px; font-size: .78rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .1em; color: var(--pp360-violet);
}
.pp360-corps h4:first-child { margin-top: 0; }
.pp360-corps p { margin: 0 0 10px; font-size: .93rem; color: var(--pp360-encre-2); }
.pp360-corps ul { margin: 0 0 10px; padding-left: 20px; }
.pp360-corps li { font-size: .93rem; color: var(--pp360-encre-2); line-height: 1.7; }

/* Barres de notation : marque fine, extremite arrondie, valeur toujours ecrite */
.pp360-barres { display: flex; flex-direction: column; gap: 13px; }
.pp360-barre { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.pp360-axe { font-size: .88rem; }
.pp360-val { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp360-val.pp360-ok { color: var(--pp360-ok); }
.pp360-val.pp360-warn { color: var(--pp360-warn); }
.pp360-val.pp360-ko { color: var(--pp360-ko); }
.pp360-piste {
	grid-column: 1 / -1; display: block; height: 10px;
	background: var(--pp360-fond); border-radius: 5px; overflow: hidden;
}
.pp360-remplissage { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.pp360-remplissage.pp360-ok { background: var(--pp360-ok); }
.pp360-remplissage.pp360-warn { background: var(--pp360-warn); }
.pp360-remplissage.pp360-ko { background: var(--pp360-ko); }

.pp360-pieces { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pp360-pieces li { margin: 0; }
.pp360-pieces a {
	display: inline-block; padding: 8px 14px; background: var(--pp360-fond);
	border: 1px solid var(--pp360-bordure); border-radius: 8px;
	font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--pp360-violet);
}
.pp360-pieces a:hover { border-color: var(--pp360-violet); background: #F7F4FD; }

@media (max-width: 600px) {
	.pp360-audit > summary { padding: 14px; gap: 10px; }
	.pp360-pastille { width: 48px; height: 48px; font-size: .9rem; }
	.pp360-entete h2 { font-size: 1.25rem; }
}

/* --- v2 : officines, écarts détaillés --------------------------------- */
.pp360-officine { margin: 4px 0 0; font-size: .9rem; color: var(--pp360-encre-2); }
.pp360-entete > div { min-width: 0; }

.pp360-ecarts { list-style: none; padding: 0; margin: 0 0 10px; }
.pp360-ecarts li {
	position: relative; padding: 10px 12px 10px 16px; margin-bottom: 8px;
	background: var(--pp360-ko-bg); border-left: 3px solid var(--pp360-ko);
	border-radius: 0 8px 8px 0; font-size: .92rem; color: var(--pp360-encre);
	line-height: 1.5;
}
.pp360-ecarts strong { font-weight: 700; }
.pp360-ecart-section {
	display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
	background: rgba(255,255,255,.7); border: 1px solid #F3C4C4;
	font-size: .72rem; font-weight: 600; color: var(--pp360-ko); white-space: nowrap;
}


/* ─────────────── En-tête de marque Proxyphar ─────────────── */
.pp360-marque {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
	padding-bottom: 18px; border-bottom: 3px solid var(--pp360-violet);
	position: relative;
}
/* Le filet reprend le dégradé du logo, violet vers magenta. */
.pp360-marque::after {
	content: ''; position: absolute; left: 0; bottom: -3px; height: 3px; width: 38%;
	background: linear-gradient(90deg, var(--pp360-logo-violet), var(--pp360-logo-magenta));
}
.pp360-logo { display: flex; flex-direction: column; gap: 2px; }
.pp360-logo img { max-height: 54px; width: auto; }

/* Mot-écrit reconstitué en typographie : toujours net, aucune police à charger.
   Pas de Google Fonts — dépendance externe et transfert d'adresses IP évités. */
.pp360-mot {
	font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1;
	font-family: inherit;
}
.pp360-mot-a { color: var(--pp360-logo-violet); }
.pp360-mot-b { color: var(--pp360-logo-magenta); }
.pp360-baseline {
	align-self: flex-end; color: var(--pp360-logo-orange);
	font-size: .72rem; font-weight: 700; letter-spacing: -.01em;
}
.pp360-titre-espace {
	font-size: 1.05rem; font-weight: 700; color: var(--pp360-violet);
	letter-spacing: .02em; padding-bottom: 2px;
}

/* Le séparateur de la barre « Mes audits » reprend la marque en plus discret. */
.pp360-entete { border-bottom-color: var(--pp360-violet-pale); }

@media (max-width: 600px) {
	.pp360-marque { align-items: flex-start; gap: 10px; }
	.pp360-mot { font-size: 1.7rem; }
	.pp360-titre-espace { font-size: .95rem; }
}