/**
 * Fiche annonce publique — styles publics (voie A « Houzez », décision PUB-01).
 *
 * Feuille AUTONOME : le front public ne charge jamais `tunnel.css`. Les variables
 * `--cip-*` et la grille `.cip-equip-grid` sont donc RÉ-EXPOSÉES ici (mêmes replis
 * neutres — aucune couleur de marque codée en dur, §3 ; la palette réelle vient du
 * thème via `--cip-brand-*`). Classes publiques préfixées `cip-` (§8.3, §12.2).
 */

.cip-listing {
	/* Mapping sur la charte RÉELLE du thème enfant (`--cip-marine`, `--cip-or`,
	   `--cip-blanc`, `--cip-anthracite`, `--cip-gris`, `--cip-gris-bordure`,
	   `--cip-bleu-pale`), avec un repli neutre EN DUR comme filet si le thème est
	   absent. Aucune couleur de marque n'est codée en dur DANS les règles (§3) :
	   les valeurs vivent dans le thème, ces lignes ne font que remapper des noms. */
	--cip-color-primary: var(--cip-marine, #1f3a5f);
	--cip-color-primary-contrast: var(--cip-blanc, #ffffff);
	--cip-color-accent: var(--cip-or, #b08d57);
	--cip-color-text: var(--cip-anthracite, #1a1a1a);
	--cip-color-muted: var(--cip-gris, #6b7280);
	--cip-color-border: var(--cip-gris-bordure, #e2e5ea);
	--cip-color-surface: var(--cip-blanc, #ffffff);
	--cip-color-surface-alt: var(--cip-bleu-pale, #f6f7f9);
	--cip-color-accent-soft: var(--cip-or-pale, #f7f1e3);
	--cip-radius: var(--cip-radius-base, 10px);
	--cip-gap: var(--cip-gap-base, 1.5rem);
	--cip-font-titre: 'Cormorant Garamond', Georgia, serif;

	color: var(--cip-color-text);
	font-size: 14px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 0 0;
	box-sizing: border-box;
}

/* Disposition deux colonnes (sous la galerie pleine largeur) ------------- */
.cip-content-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 32px 40px 60px;
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.cip-col-left {
	flex: 1;
	min-width: 0;
}

.cip-col-right {
	flex: 0 0 360px;
	min-width: 360px;
	position: sticky;
	top: 90px;
}

/* La première section de la colonne gauche (l'en-tête) ne prend pas la
   marge haute des sections : elle démarre au ras du haut de colonne. */
.cip-col-left > .cip-property-header {
	margin-top: 0;
}

.cip-listing *,
.cip-listing *::before,
.cip-listing *::after {
	box-sizing: border-box;
}

.cip-listing__section {
	margin-top: 28px;
	padding: 28px 32px;
	background: var(--cip-color-surface);
	border: 1px solid var(--cip-color-border);
	border-radius: 0;
}

.cip-listing__section-title {
	position: relative;
	font-family: var(--cip-font-titre);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 14px;
	padding: 0 0 7px 12px;
	border-bottom: 2px solid var(--cip-color-accent);
}

/* Barrette verticale or devant chaque titre de section (fidélité maquette). */
.cip-listing__section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 7px;
	width: 4px;
	border-radius: 2px;
	background: var(--cip-color-accent);
}

/* Fil d'Ariane ----------------------------------------------------------- */
.cip-breadcrumb {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	box-sizing: border-box;
	background: var(--cip-color-surface);
	border-bottom: 1px solid var(--cip-color-border);
	padding: 12px 40px;
	font-size: 11px;
	color: var(--cip-color-muted);
	letter-spacing: 0.3px;
}

.cip-breadcrumb a {
	color: var(--cip-color-muted);
	text-decoration: none;
}

.cip-breadcrumb a:hover {
	color: var(--cip-color-accent);
}

.cip-breadcrumb span {
	color: var(--cip-color-primary);
	font-weight: 500;
}

/* Galerie ---------------------------------------------------------------- */
.cip-gallery {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: #1a1a1a;
	padding: 0;
}

.cip-gallery__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	color: var(--cip-color-muted);
	font-style: italic;
}

.cip-gallery__img,
.cip-gallery__main img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
}

.cip-gallery__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	background: var(--cip-color-accent);
	color: var(--cip-color-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 0;
}

.cip-gallery__count {
	position: absolute;
	right: 20px;
	bottom: 110px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 11px;
	padding: 6px 12px;
	border-radius: 0;
	letter-spacing: 0.5px;
}

.cip-gallery__thumbs {
	display: flex;
	gap: 4px;
	padding: 4px 0 0;
	background: #111;
	overflow-x: auto;
	flex-wrap: nowrap;
	margin-top: 0;
}

.cip-gallery__thumb {
	width: 140px;
	height: 90px;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: 0.7;
	transition: opacity 0.2s;
	flex-shrink: 0;
}

.cip-gallery__thumb.is-active,
.cip-gallery__thumb:hover {
	opacity: 1;
}

/* Hello Elementor (reset.css) pose `button{border:1px solid #c36;color:#c36;
   border-radius:3px}` + `button:hover/:focus{background-color:#c36}`. On neutralise
   bordure / fond / outline / radius sur TOUS les états des miniatures. `!important`
   car ces règles du thème parent peuvent être chargées après notre feuille. */
.cip-gallery__thumb,
.cip-gallery__thumb:hover,
.cip-gallery__thumb:focus,
.cip-gallery__thumb:focus-visible,
.cip-gallery__thumb.is-active {
	border: none !important;
	background: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.cip-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* En-tête ---------------------------------------------------------------- */
.cip-property-header {
	margin-top: 21px;
	padding: 28px 32px;
	background: var(--cip-color-surface);
	border: 1px solid var(--cip-color-border);
	border-radius: 0;
}

.cip-property-header__type {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--cip-color-accent);
}

.cip-property-header__title {
	font-family: var(--cip-font-titre);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--cip-color-primary);
}

.cip-property-header__location {
	color: var(--cip-color-muted);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 20px;
}

.cip-property-header__pin {
	color: var(--cip-color-muted);
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-right: 4px;
}

.cip-property-header__price-row {
	position: relative; /* ancre le menu de partage (.cip-share-menu, absolu) */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 11px 18px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--cip-color-border);
}

.cip-property-header__price {
	font-family: var(--cip-font-titre);
	font-size: 38px;
	font-weight: 600;
	color: var(--cip-color-primary);
}

.cip-property-header__price-detail {
	color: var(--cip-color-muted);
	font-size: 11px;
}

/* Préfixe `.cip-listing` (spécificité 0,2,0) : bat le reset Hello Elementor
   `[type=button]{border:1px solid #c36;border-radius:3px;color:#c36}` — un sélecteur
   d'ATTRIBUT en (0,1,0), à égalité avec une simple classe et tranché par l'ordre de
   chargement (le thème charge après le plugin). Le préfixe gagne quel que soit l'ordre. */
.cip-listing .cip-property-header__share {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--cip-color-border);
	border-radius: 2px;
	background: var(--cip-color-surface);
	color: var(--cip-color-muted);
	cursor: pointer;
	font-size: 11px;
}

.cip-listing .cip-property-header__share:hover,
.cip-listing .cip-property-header__share:focus {
	border-color: var(--cip-color-accent);
	color: var(--cip-color-accent);
	background: var(--cip-color-surface);
	outline: none;
}

/* Menu de partage (injecté par share.js) — AUTONOME, réutilisable hors fiche.
   Scopé sous `.cip-share-menu` (jamais `.cip-listing`) pour rester copiable tel quel par
   le futur shortcode de partage. Le sélecteur descendant (0,2,0) bat aussi le reset Hello
   Elementor `[type=button]{border:1px solid #c36;color:#c36}` (0,1,0) sur « Copier le lien ».
   Replis en dur dans les var() : le menu reste lisible même hors du scope `.cip-*` du thème. */
.cip-share-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 6px;
	background: var(--cip-color-surface, #ffffff);
	border: 1px solid var(--cip-color-border, #e2e5ea);
	border-radius: 2px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cip-share-menu[hidden] {
	display: none;
}

.cip-share-menu .cip-share-menu__item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 2px;
	background: none;
	color: var(--cip-color-text, #1a1a1a);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.cip-share-menu .cip-share-menu__item:hover,
.cip-share-menu .cip-share-menu__item:focus {
	background: var(--cip-color-surface-alt, #f6f7f9);
	color: var(--cip-color-primary, #1f3a5f);
	outline: none;
}

.cip-share-menu .cip-share-menu__copy.is-copied {
	color: var(--cip-color-accent, #b08d57);
	font-weight: 600;
}

/* Barre de specs --------------------------------------------------------- */
.cip-specs-bar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin-top: 21px;
	padding: 0;
	border: 1px solid var(--cip-color-primary);
	border-radius: 0;
	background: var(--cip-color-primary);
}

.cip-spec-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	padding: 16px 12px;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.cip-spec-box:last-child {
	border-right: none;
}

.cip-spec-box__value {
	font-family: var(--cip-font-titre);
	font-size: 22px;
	font-weight: 700;
	color: var(--cip-color-accent);
}

.cip-spec-box__label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--cip-color-primary-contrast);
	opacity: 0.82;
}

/* Description ------------------------------------------------------------- */
.cip-listing__description-text {
	font-size: 14px;
	line-height: 1.8;
	text-align: justify;
}

.cip-listing__description-text p {
	margin: 0 0 14px;
}

/* Caractéristiques détaillées : tableau clé-valeur (2 colonnes, maquette) -- */
.cip-chars-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.cip-char-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f0ede8;
	font-size: 13px;
}

.cip-char-row:nth-child(odd) {
	padding-right: 24px;
}

.cip-char-row:nth-child(even) {
	padding-left: 24px;
	border-left: 1px solid #f0ede8;
}

.cip-char-label {
	color: var(--cip-color-muted);
}

.cip-char-value {
	font-weight: 600;
	color: var(--cip-color-primary);
}

/* Points forts / tags ---------------------------------------------------- */
.cip-points-forts {
	margin-top: 24px;
}

.cip-points-forts__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--cip-color-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
}

.cip-tags-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.cip-tag {
	background: var(--cip-color-surface-alt);
	border: 1px solid var(--cip-color-border);
	color: var(--cip-color-primary);
	font-size: 11px;
	padding: 5px 12px;
	border-radius: 2px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

/* DPE / GES : barres horizontales en escalier (maquette) ----------------- */
.cip-dpe-wrap {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.cip-dpe-block {
	flex: 1;
}

.cip-dpe-block-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--cip-color-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
}

.cip-dpe-bars {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cip-dpe-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
}

.cip-dpe-bar-fill {
	height: 22px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	color: white;
	font-weight: 700;
	font-size: 12px;
	min-width: 36px;
}

.cip-dpe-bar-value {
	color: var(--cip-color-muted);
	font-size: 11px;
}

.cip-dpe-bar--active .cip-dpe-bar-fill {
	outline: 3px solid var(--cip-color-primary);
}

.cip-dpe-legal {
	font-size: 11px;
	color: var(--cip-color-muted);
	margin-top: 16px;
	font-style: italic;
}

/* Localisation ----------------------------------------------------------- */
.cip-map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 220px;
	border: 1px solid var(--cip-color-border);
	border-radius: 0;
	background: var(--cip-color-surface-alt);
	color: var(--cip-color-muted);
	text-align: center;
	padding: 14px;
}

.cip-map-placeholder__pin {
	color: var(--cip-color-muted);
	opacity: 0.4;
}

.cip-map-placeholder__text {
	font-size: 13px;
}

.cip-location__disclaimer {
	margin-top: 11px;
	font-size: 13px;
	font-style: italic;
	color: var(--cip-color-muted);
}

/* Visite / vidéo --------------------------------------------------------- */
.cip-tour-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.cip-tour-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 19px;
	border: 1px solid var(--cip-color-border);
	border-radius: var(--cip-radius);
	background: var(--cip-color-surface);
	color: var(--cip-color-text);
	text-decoration: none;
	font-weight: 600;
}

.cip-tour-card:hover {
	border-color: var(--cip-color-primary);
	color: var(--cip-color-primary);
}

.cip-tour-card__icon {
	color: var(--cip-color-accent);
}

/* Colonne droite — coque du formulaire de contact (placeholder T11) ------ */
.cip-contact-form {
	border: 1px solid var(--cip-color-border);
	border-radius: 2px;
	background: var(--cip-color-surface);
	overflow: hidden;
}

.cip-contact-form__head {
	background: var(--cip-color-primary);
	color: var(--cip-color-primary-contrast);
	padding: 15px 18px;
}

.cip-contact-form__title {
	margin: 0;
	font-family: var(--cip-font-titre);
	font-size: 22px;
	/* Sélecteur de classe (0,1,0) : bat la règle `h2` du thème (0,0,1) qui, sinon,
	   repeindrait le titre en marine → invisible sur l'en-tête marine. */
	color: var(--cip-color-primary-contrast);
}

.cip-contact-form__subtitle {
	margin: 3px 0 0;
	font-size: 12px;
	opacity: 0.85;
}

/* Honeypot anti-bot : hors flux et invisible (jamais rempli par un humain — §4.3). */
.cip-hp {
	display: none !important;
}

.cip-form-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
}

.cip-form-row {
	display: flex;
	gap: 11px;
}

.cip-form-row--phone .cip-field--indicatif {
	flex: 0 0 92px;
}

.cip-form-row--phone .cip-field--phone {
	flex: 1;
}

.cip-form-row--split .cip-field {
	flex: 1;
}

.cip-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.cip-field__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--cip-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cip-field__req {
	color: var(--cip-color-accent);
	margin-left: 2px;
}

/* Préfixe `.cip-listing` (0,2,1) : bat le reset `input[type=text/email/tel]…
   {border:1px solid #666;border-radius:3px}` (0,1,1). Sans préfixe, coins 3px + bordure
   grise du reset l'emportent → nos 2px ne s'appliquent pas. */
.cip-listing .cip-field input,
.cip-listing .cip-field select,
.cip-listing .cip-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--cip-color-border);
	border-radius: 2px;
	background: var(--cip-color-surface);
	font: inherit;
	color: var(--cip-color-text);
}

.cip-field textarea {
	resize: vertical;
}

.cip-field--quality {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}

/* Le libellé « Vous êtes » occupe toute la largeur au-dessus des 2 cartes. */
.cip-field--quality > .cip-field__label {
	flex: 0 0 100%;
}

.cip-radio,
.cip-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 12px;
	color: var(--cip-color-text);
}

/* Cases à cocher aux couleurs de la charte + taille lisible (native stylée).
   Cible les checkboxes réelles ; les radios « Vous êtes » sont masqués (habillage carte). */
.cip-listing .cip-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cip-color-primary);
	flex-shrink: 0;
	margin-top: 1px;
}

.cip-checkbox--legal {
	color: var(--cip-color-muted);
	font-size: 11px;
}

/* Radios « Vous êtes » habillés en cartes cliquables (inputs réels masqués). */
.cip-radio--card {
	flex: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px 8px;
	border: 1px solid var(--cip-color-border);
	border-radius: 2px;
	font-size: 11px;
	font-weight: 500;
	color: var(--cip-color-muted);
	cursor: pointer;
}

.cip-radio--card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Carte sélectionnée : bordure marine + fond bleu pâle (comme la maquette). */
.cip-radio--card:has(input:checked) {
	border-color: var(--cip-color-primary);
	background: var(--cip-color-surface-alt);
	color: var(--cip-color-primary);
	font-weight: 600;
}

/* Encart financement : fond or très clair, bordure dorée (maquette). */
.cip-checkbox--financing {
	background: var(--cip-color-accent-soft);
	border: 1px solid var(--cip-color-accent);
	border-radius: 2px;
	padding: 12px 14px;
	color: var(--cip-color-primary);
	font-size: 12px;
	font-weight: 500;
}

/* Soumission en cours : le JS pose `disabled` sur le CTA le temps de la requête
   (libellé « Envoi en cours… »). Le bouton reste en or plein, curseur d'attente. */
.cip-listing .cip-contact-form__submit:disabled {
	cursor: wait;
}

/* Préfixe `.cip-listing` (0,2,0) : bat le reset `[type=button]{border:1px solid #c36;
   color:#c36;background:transparent;border-radius:3px}` (0,1,0) tranché par l'ordre de
   chargement. Sans préfixe, le bouton reste rose (bordure+texte) sur fond transparent. */
.cip-listing .cip-contact-form__submit {
	padding: 12px 14px;
	border: 0;
	border-radius: 2px;
	background: var(--cip-color-accent);
	color: var(--cip-color-primary);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cip-listing .cip-contact-form__submit:hover,
.cip-listing .cip-contact-form__submit:focus {
	/* Conserve le fond or + texte marine au survol/focus : bat aussi le
	   `button:hover/:focus{background-color:#c36}` de Hello Elementor. */
	background: var(--cip-color-accent);
	color: var(--cip-color-primary);
	outline: none;
}

.cip-contact-form__reassurance {
	margin: 0;
	font-size: 11px;
	color: var(--cip-color-muted);
	text-align: center;
}

/* Zone d'erreur inline (validation 422 / rate-limit 429 / annonce indisponible 404). */
.cip-contact-form__error {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--cip-color-accent);
	border-radius: 2px;
	background: var(--cip-color-accent-soft);
	color: var(--cip-color-primary);
	font-size: 12px;
}

.cip-contact-form__error ul {
	margin: 0;
	padding-left: 18px;
}

/* Champ invalide signalé par le JS (aria-invalid) : contour accent. */
.cip-listing .cip-field input[aria-invalid="true"],
.cip-listing .cip-field select[aria-invalid="true"],
.cip-listing .cip-field textarea[aria-invalid="true"] {
	border-color: var(--cip-color-accent);
}

/* Bloc de confirmation (révélé au succès ; le formulaire est alors masqué). */
.cip-contact-form__success {
	padding: 22px 18px;
	text-align: center;
}

.cip-contact-form__success-title {
	margin: 0 0 6px;
	font-family: var(--cip-font-titre);
	font-size: 20px;
	color: var(--cip-color-primary);
}

.cip-contact-form__success-message {
	margin: 0;
	font-size: 13px;
	color: var(--cip-color-text);
}

/* Encart vendeur ANONYMISÉ (RGPD) : texte statique, ni avatar ni nom ----- */
.cip-seller-box {
	margin: 0 18px;
	padding: 12px 14px;
	border-radius: 2px;
	background: var(--cip-color-surface-alt);
	text-align: center;
}

.cip-seller-box__label {
	font-weight: 600;
	color: var(--cip-color-text);
}

.cip-seller-response {
	margin: 8px 18px 18px;
	font-size: 11px;
	color: var(--cip-color-muted);
	text-align: center;
}

/* Annonce non disponible (garde 404) ------------------------------------- */
.cip-listing--unavailable {
	text-align: center;
	padding: 56px 21px;
}

.cip-listing__unavailable h1 {
	margin-bottom: 7px;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1000px) {
	.cip-content-wrap {
		flex-wrap: wrap;
		padding: 24px 20px 48px;
	}

	.cip-col-right {
		flex-basis: 100%;
		min-width: 0;
		width: 100%;
		position: static;
		top: auto;
	}
}

@media (max-width: 860px) {
	.cip-property-header__title {
		font-size: 22px;
	}

	.cip-listing .cip-property-header__share {
		margin-left: 0;
	}
}

/* Lightbox PhotoSwipe ----------------------------------------------------- */

/* L'image principale est enrobée d'un <a> (item/déclencheur PhotoSwipe) : le rendre
   bloc pour que l'image conserve sa pleine largeur, et signaler l'agrandissement. */
.cip-gallery__main-link {
	display: block;
	cursor: zoom-in;
}

/* Surcouche charte du viewer PhotoSwipe (sobre/prestige). Le conteneur `.pswp` est
   injecté par PhotoSwipe dans <body> (HORS `.cip-listing`) : on emploie donc les
   variables de thème `--cip-marine`/`--cip-or` (définies plus haut dans l'arbre) avec
   des REPLIS EN DUR, jamais `--cip-color-*` (scopées `.cip-listing`, non héritées ici). */
.pswp {
	--pswp-bg: #10203a;
	--pswp-icon-color: #ffffff;
	--pswp-icon-color-secondary: var(--cip-marine, #1a3c5e);
}

/* Contrôles PhotoSwipe = <button>. PhotoSwipe pose DÉJÀ son propre reset (border:0;
   background:none; padding:0…) mais en (0,1,0)/(0,1,1), À ÉGALITÉ avec le reset Hello
   Elementor `[type=button]{border:1px solid #c36;border-radius:3px;color:#c36}` +
   `[type=button]:hover{background:#c36}` — que le thème GAGNE par ordre de chargement.
   Symptômes : contrôles rouges au repos, rectangle #c36 au survol (croix/loupe), et
   padding parasite qui décale la zone cliquable → le clic « traverse » vers le fond, qui
   ferme le viewer (flèches KO). Remède : préfixe `.pswp` → (0,2,x) bat (0,1,0)/(0,1,1)
   SANS !important, au repos ET aux états ; restaure la capture du clic + l'empilement. */
.pswp .pswp__button,
.pswp .pswp__button:hover,
.pswp .pswp__button:active,
.pswp .pswp__button:focus {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
	outline: none;
	box-shadow: none;
	transition: none;
	pointer-events: auto;
	z-index: 10;
}

/* Le reset thème/Elementor sur [type=button] (boutons PhotoSwipe générés en
   `type="button"`) rabote la width des <button> : l'icône étant en position
   absolue, le bouton n'a plus de contenu en flux → largeur nulle → zone
   cliquable et icône invisibles. On RÉ-AFFIRME les dimensions natives
   PhotoSwipe à notre spécificité (0,2,x), sans !important. Le `padding:0`
   ci-dessus empêche en parallèle le reset thème de réinjecter son padding. */
.pswp .pswp__button {
	width: 50px;
	height: 60px;
}

.pswp .pswp__button--arrow {
	width: 75px;
	height: 100px;
}

/* Icônes SVG des contrôles (croix `--close`, flèches `--arrow`, loupe `--zoom` : toutes
   portent `.pswp__icn`). Fill EXPLICITE — ne PAS reposer sur `color`/`currentColor`, sinon
   invisibles (le reset thème repeint la couleur du <button>). Blanc au repos, or au survol. */
.pswp .pswp__icn {
	fill: #ffffff;
	opacity: 1;
}

.pswp .pswp__button:hover .pswp__icn {
	fill: var(--cip-or, #c5a656);
}

/* Compteur x/y natif du viewer (distinct du `.cip-gallery__count` de la page) en or. */
.pswp .pswp__counter {
	color: var(--cip-or, #c5a656);
	font-weight: 600;
	opacity: 1;
}