/* CPTS Centre-Hérault — CSS STRUCTUREL UNIQUEMENT
   ------------------------------------------------------------------------
   Aucun style « marque » : juste de quoi rendre les listings et le drawer
   utilisables le temps que le design system arrive. Toutes les classes
   sont préfixées `cpts-*` pour faciliter la surcharge ultérieure dans Divi
   (CSS perso ou child theme). */


/* ============================================================================
 * 1. Listings (sortie des shortcodes)
 * ========================================================================== */

.cpts {
	margin: 1.5em 0;
}

.cpts-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.cpts-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
}

.cpts-thumb {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.cpts-title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
}

.cpts-title a {
	color: inherit;
	text-decoration: none;
}

.cpts-title a:hover {
	text-decoration: underline;
}

.cpts-excerpt,
.cpts-fonction,
.cpts-descriptif,
.cpts-adresse,
.cpts-tarif,
.cpts-bio,
.cpts-convention,
.cpts-mission-link {
	margin: 0;
	font-size: .95rem;
	color: #444;
}

.cpts-fonction {
	font-weight: 600;
	color: #222;
}

.cpts-empty {
	color: #888;
	font-style: italic;
}

.cpts-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .5rem;
}

.cpts-actions .cpts-link,
.cpts-actions .cpts-doc,
.cpts-meta .cpts-contact,
.cpts-meta .cpts-doc {
	font-size: .9rem;
}

.cpts-type-tag {
	display: inline-block;
	padding: .15rem .55rem;
	background: #eee;
	border-radius: 3px;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.cpts-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	font-size: .9rem;
	color: #666;
	margin-top: .25rem;
}

.cpts-conditions {
	font-size: .9rem;
	color: #444;
	background: #fafafa;
	padding: .5rem;
	border-radius: 4px;
}

/* Variantes par CPT (juste l'essentiel) */
.cpts-item--membre .cpts-membre-photo {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.cpts-item--partenaire {
	text-align: center;
}

.cpts-partenaire-logo {
	max-height: 120px;
	width: auto;
	margin: 0 auto;
}

.cpts-actualite-link {
	color: inherit;
	text-decoration: none;
	display: block;
}


/* ============================================================================
 * 2. Boutons admin (✏️ / 🗑️ / ➕) — uniquement visibles aux gestionnaires
 * ========================================================================== */

.cpts-admin {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}

.cpts-admin--item {
	position: absolute;
	top: .5rem;
	right: .5rem;
}

.cpts-admin--add {
	margin: 0 0 1rem;
}

.cpts-admin button {
	background: rgba(255, 255, 255, .9);
	border: 1px dashed #888;
	border-radius: 4px;
	padding: .25rem .5rem;
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
	line-height: 1;
}

.cpts-admin button:hover {
	background: #f0f0f0;
	border-color: #555;
}


/* ============================================================================
 * 3. Drawer d'édition front
 * ========================================================================== */

.cpts-drawer[hidden] {
	display: none;
}

.cpts-drawer {
	position: fixed;
	inset: 0;
	/* z-index < 160000 (valeur par défaut de .media-modal WP) pour que la
	   mediathèque s'ouvre au-dessus du drawer sans qu'on ait à pousser ses
	   propres z-index. Choix : 100000, au-dessus de la plupart des UI
	   tierces (header Divi, popups Complianz...) mais sous wp.media. */
	z-index: 100000;
}

.cpts-drawer__bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.cpts-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(520px, 100vw);
	height: 100vh;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: -2px 0 12px rgba(0, 0, 0, .25);
}

.cpts-drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #eee;
}

.cpts-drawer__title {
	margin: 0;
	font-size: 1.1rem;
}

.cpts-drawer__close {
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.cpts-drawer__form {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cpts-drawer__fields {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cpts-drawer__fields label {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .9rem;
	font-weight: 500;
	color: #333;
}

.cpts-drawer__fields .cpts-checkbox {
	flex-direction: row;
	align-items: center;
	gap: .5rem;
	font-weight: 400;
}

.cpts-drawer__fields input[type="text"],
.cpts-drawer__fields input[type="url"],
.cpts-drawer__fields input[type="email"],
.cpts-drawer__fields input[type="date"],
.cpts-drawer__fields textarea,
.cpts-drawer__fields select {
	padding: .55rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font: inherit;
	background: #fff;
}

.cpts-drawer__fields textarea {
	min-height: 6em;
	resize: vertical;
	font-family: inherit;
}

.cpts-drawer__footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
}

.cpts-drawer__status {
	font-size: .85rem;
	color: #666;
}

.cpts-drawer__save {
	background: #2271b1;
	color: #fff;
	border: 0;
	padding: .6rem 1.4rem;
	border-radius: 4px;
	font: inherit;
	cursor: pointer;
}

.cpts-drawer__save:hover {
	background: #135e96;
}

.cpts-drawer__save[disabled] {
	opacity: .6;
	cursor: wait;
}

/* File picker (image / document) */
.cpts-file-picker {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.cpts-file-picker__preview {
	min-width: 60px;
}

.cpts-file-picker__preview img {
	max-width: 80px;
	max-height: 80px;
	display: block;
	border-radius: 4px;
}

.cpts-file-picker__preview a {
	font-size: .85rem;
	color: #2271b1;
}

.cpts-file-picker__pick,
.cpts-file-picker__clear {
	background: #f0f0f0;
	border: 1px solid #ccc;
	padding: .4rem .75rem;
	border-radius: 4px;
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}

.cpts-file-picker__clear[hidden] {
	display: none;
}


/* ============================================================================
 * 4. Médiathèque WordPress au-dessus du drawer
 * ----------------------------------------------------------------------------
 * Par défaut .media-modal est en z-index 160000, notre drawer en 999999.
 * Sans cette surcharge, les clics dans la mediathèque traversent vers
 * l'overlay du drawer et le ferment.
 * ========================================================================== */

/* Hiérarchie WP préservée : modal au-dessus de sa backdrop (sinon l'overlay
   recouvre le modal — même z-index + backdrop plus tard dans le DOM). */
.media-modal-backdrop {
	z-index: 1000001 !important;
}
.media-modal {
	z-index: 1000002 !important;
}