/* Ocean Tracker — styles du globe interactif */

.oct-wrapper {
	--oct-bg: #070d1a;
	--oct-bg-2: #0c1426;
	--oct-line: rgba(120, 160, 220, 0.18);
	--oct-text: #e8eefc;
	--oct-text-dim: #8a99b8;
	--oct-accent: #4aa3ff;
	position: relative;
	width: 100%;
	color: var(--oct-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Barre de filtres ---- */
.oct-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 4px;
}
.oct-filters-loading { color: var(--oct-text-dim); font-size: 13px; }

.oct-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--oct-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--oct-text-dim);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.18s ease;
}
.oct-chip:hover { color: var(--oct-text); border-color: rgba(120, 160, 220, 0.4); }
.oct-chip.is-active {
	color: #08101f;
	background: var(--oct-text);
	border-color: var(--oct-text);
	font-weight: 600;
}
.oct-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.oct-chip-all.is-active { background: var(--oct-accent); border-color: var(--oct-accent); color: #fff; }

.oct-count {
	margin-left: auto;
	font-size: 12px;
	color: var(--oct-text-dim);
	letter-spacing: 0.02em;
}

/* ---- Conteneur du globe ---- */
.oct-globe-container {
	position: relative;
	width: 100%;
	height: var(--oct-height, 600px);
	border-radius: 16px;
	overflow: hidden;
	background:
		radial-gradient(120% 120% at 50% 0%, #122244 0%, var(--oct-bg) 55%, #02060f 100%);
	border: 1px solid var(--oct-line);
}
.oct-globe-canvas { width: 100%; height: 100%; }
.oct-globe-canvas canvas { display: block; }

.oct-globe-hint {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 14px;
	font-size: 12px;
	color: var(--oct-text-dim);
	background: rgba(8, 16, 31, 0.6);
	border: 1px solid var(--oct-line);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	pointer-events: none;
	z-index: 3;
}

/* ---- Chargement ---- */
.oct-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--oct-text-dim);
	font-size: 14px;
	z-index: 4;
}
.oct-spinner {
	width: 18px; height: 18px;
	border: 2px solid rgba(255,255,255,0.15);
	border-top-color: var(--oct-accent);
	border-radius: 50%;
	animation: oct-spin 0.8s linear infinite;
}
@keyframes oct-spin { to { transform: rotate(360deg); } }

/* ---- Marqueur bateau « en direct » ---- */
.oct-boat-marker {
	position: relative;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%);
	pointer-events: auto;
	cursor: pointer;
}
.oct-boat-dot {
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #ffcb3d;
	box-shadow: 0 0 8px 2px rgba(255, 203, 61, 0.8);
	pointer-events: none;
}
.oct-boat-pulse {
	position: absolute;
	top: 50%; left: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: rgba(255, 203, 61, 0.55);
	animation: oct-pulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes oct-pulse {
	0%   { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(3.2); opacity: 0; }
}

/* ---- Anneau du relevé sélectionné ---- */
.oct-active-ring {
	position: absolute;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.55), inset 0 0 6px rgba(255,255,255,0.4);
	pointer-events: none;
	z-index: 5;
	animation: oct-ring-pulse 1.5s ease-in-out infinite;
}
@keyframes oct-ring-pulse {
	0%, 100% { box-shadow: 0 0 10px 1px rgba(255,255,255,0.5); transform: translate(-50%, -50%) scale(1); }
	50%      { box-shadow: 0 0 18px 5px rgba(255,255,255,0.8); transform: translate(-50%, -50%) scale(1.12); }
}

/* ---- Boutons de zoom ---- */
.oct-zoom {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	z-index: 4;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.oct-zoom button {
	width: 40px;
	height: 40px;
	border: 1px solid var(--oct-line);
	background: rgba(12, 20, 38, 0.82);
	color: var(--oct-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	backdrop-filter: blur(6px);
	transition: background 0.15s ease;
}
.oct-zoom button:hover { background: rgba(40, 60, 100, 0.9); }
.oct-zoom-in { border-radius: 10px 10px 0 0; border-bottom: none; }
.oct-zoom-out { border-radius: 0 0 10px 10px; }

/* ---- Card de détail ---- */
.oct-card {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 290px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	overflow: auto;
	background: rgba(12, 20, 38, 0.92);
	border: 1px solid var(--oct-line);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	z-index: 5;
	animation: oct-card-in 0.22s ease;
}
@keyframes oct-card-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.oct-card-close {
	position: absolute;
	top: 8px; right: 8px;
	width: 28px; height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: var(--oct-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}
.oct-card-close:hover { background: rgba(255,255,255,0.18); }
.oct-card-desc {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oct-text-dim);
}
.oct-card-photo { width: 100%; height: 150px; overflow: hidden; border-radius: 14px 14px 0 0; background: #0a1426; }
.oct-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oct-card-body { padding: 16px 18px 18px; position: relative; }
.oct-card-body h3 { margin: 0 0 12px; font-size: 16px; color: var(--oct-text); padding-right: 16px; }
.oct-card-tag {
	display: inline-block;
	width: 28px; height: 4px;
	border-radius: 4px;
	margin-bottom: 10px;
}
.oct-card-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13px;
	border-top: 1px solid rgba(255,255,255,0.05);
}
.oct-card-row:first-of-type { border-top: none; }
.oct-card-row span { color: var(--oct-text-dim); }
.oct-card-row strong { color: var(--oct-text); font-weight: 600; text-align: right; }

.oct-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #ffcb3d;
	margin-bottom: 10px;
}
.oct-live-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #ffcb3d;
	box-shadow: 0 0 6px 1px rgba(255,203,61,0.8);
	animation: oct-blink 1.4s ease-in-out infinite;
}
@keyframes oct-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.oct-card { left: 12px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.oct-boat-pulse, .oct-live-dot, .oct-spinner { animation: none; }
}

/* =====================================================================
   Widget mini-globe [ocean_globe_widget] : petit globe décoratif qui
   ouvre, au clic, un popup contenant l'expérience complète.
   Le positionnement (bas droite, chevauchement sur une image, etc.) se
   fait au cas par cas via du CSS additionnel ciblant .oct-widget — voir
   la documentation du shortcode.
   ===================================================================== */

.oct-widget {
	--oct-widget-size: 200px;
	width: var(--oct-widget-size);
	height: var(--oct-widget-size);
	/* Masqué par défaut : n'apparaît que sur grand écran, cf. media query
	   « desktop only » plus bas. Sur mobile/tablette, ce widget ne sert à
	   rien (le clic-pour-ouvrir-un-popup géant n'a pas de sens en tactile
	   sur petit écran) : on ne le charge même pas visuellement. */
	display: none;
}

.oct-widget-orb {
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: transparent;
}
.oct-widget-orb canvas { display: block; }
.oct-widget-orb:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
	border-radius: 50%;
}

/* ---- Popup (réutilise l'expérience complète .oct-wrapper existante) ---- */
.oct-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(4, 10, 20, 0.84);
	backdrop-filter: blur(4px);
}
.oct-modal-overlay[hidden] { display: none; }

.oct-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 92vw;
	height: 88vh;
	max-width: 1400px;
	/* Fond blanc pour le popup lui-même — le globe conserve son propre
	   fond sombre (.oct-globe-container a sa propre déclaration, non
	   affectée par ce changement). */
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

/* À l'intérieur du popup, .oct-wrapper doit remplir tout l'espace
   disponible : on bascule sur flexbox plutôt que sur --oct-height pour
   éviter les soucis de hauteur en pourcentage imbriquée. */
.oct-modal-panel .oct-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 16px 16px;
}
/* Filtres alignés avec la croix de fermeture (même ligne) plutôt que
   repoussés sous elle : réduit la hauteur inutile en haut du popup.
   padding-right laisse la place au bouton (40px + marge). */
.oct-modal-panel .oct-filters { flex: 0 0 auto; padding: 14px 60px 20px 4px; }
.oct-modal-panel .oct-globe-container { flex: 1 1 auto; min-height: 0; height: auto; }

/* Contraste des filtres sur le fond désormais blanc du popup (le reste
   des styles .oct-chip / .oct-count vient de la feuille de style
   générale ci-dessus, conçue pour un fond sombre). */
.oct-modal-panel .oct-count { color: #5b6472; }
.oct-modal-panel .oct-chip {
	color: #4a5568;
	border-color: rgba(15, 23, 42, 0.14);
	background: rgba(15, 23, 42, 0.035);
}
.oct-modal-panel .oct-chip:hover {
	color: #1f2430;
	border-color: rgba(15, 23, 42, 0.3);
}
.oct-modal-panel .oct-chip.is-active {
	background: var(--oct-accent);
	border-color: var(--oct-accent);
	color: #fff;
}

.oct-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 20;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.06);
	color: #1f2430;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.oct-modal-close:hover { background: rgba(15, 23, 42, 0.12); }
.oct-modal-close svg { display: block; }

body.oct-modal-open { overflow: hidden; }

/* Le widget mini-globe est visible aussi bien en desktop (superposé sur
   la photo) qu'en mobile (inséré dans le flux normal, voir plus bas et
   placeHeroWidgetForViewport() dans globe.js). */
@media (min-width: 1025px) {
	.oct-widget { display: block; }
}
@media (max-width: 1024px) {
	.oct-widget { display: block; }
}

/* ---- Placement sur la page d'accueil (voir OCT_Hero_Widget) ----
   Le widget est injecté en dehors du bloc Couverture (contournement du
   plugin multilingue) : on le positionne donc par rapport au document,
   en s'appuyant sur la hauteur connue du bandeau (100vh), plutôt que par
   rapport à un bloc parent. */
.oct-hero-widget {
	position: absolute;
	/* Widget de 460px (voir size="460" dans OCT_Hero_Widget) : ~310px
	   restent sur la photo, ~150px débordent sur le fond blanc (même
	   proportion qu'aux tailles précédentes). Les 30px supplémentaires
	   font de la place à l'étiquette, collée au globe. */
	top: calc(100vh - 340px);
	right: 56px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

/* Étiquette au-dessus du globe : reprend la police et la couleur des
   titres du site (Plus Jakarta Sans / blanc), comme le H1 du bandeau.
   Masquée tant que le globe décoratif n'a pas fini de charger sa texture
   (classe .is-ready ajoutée en JS dans startOrb()) : évite qu'elle
   s'affiche seule, sans planète, pendant le chargement. */
.oct-hero-widget-label {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.oct-hero-widget.is-ready .oct-hero-widget-label {
	opacity: 1;
}

/* Taille du globe pour ce placement précis : déclarée ici (avec
   !important) plutôt que via l'attribut size="" du shortcode, pour
   pouvoir la faire varier ensuite en mobile. */
.oct-hero-widget .oct-widget {
	--oct-widget-size: 460px !important;
}

/* ---- Mobile : le widget rejoint le flux normal de la page ----
   placeHeroWidgetForViewport() (globe.js) déplace réellement le bloc
   entre le bandeau et « Nos projets ». Le globe est tiré vers le haut
   (margin-top négatif) pour chevaucher la limite photo/blanc, comme en
   desktop — sans fond opaque, pour rester posé « à cheval » sur les
   deux zones. Le texte passe sous le globe (order) puisqu'il retombe
   de toute façon sur le fond blanc. */
@media (max-width: 1024px) {
	.oct-hero-widget {
		/* position:relative (et non static) : le rendu en flux normal est
		   identique, mais ça permet au z-index de s'appliquer, pour que le
		   globe passe bien AU-DESSUS de la bannière photo à l'endroit où il
		   la chevauche (sans ça, il pouvait passer dessous). */
		position: relative;
		top: auto;
		right: auto;
		z-index: 5;
		flex-direction: column;
		gap: 10px;
		padding: 0 16px 34px;
		margin-top: -80px;
	}
	.oct-hero-widget .oct-widget {
		--oct-widget-size: clamp(230px, calc(100vw - 48px), min(340px, calc(100vw - 64px))) !important;
		order: 1;
	}
	.oct-hero-widget-label {
		order: 2;
		color: #33378d;
		text-shadow: none;
		font-size: 16px;
		white-space: normal;
		max-width: 90vw;
	}

	/* Chevrons animés du bandeau (indicateur de défilement) : supprimés
	   en mobile à la demande. */
	.chevrons-link {
		display: none !important;
	}
}