/*
 * Styles de structure des widgets Espace OPOKO. Couleurs, typographies, tailles et espacements viennent des
 * réglages Elementor (variables CSS et sélecteurs des contrôles) : ce fichier ne fixe que des valeurs par défaut.
 */

/* ---------- Manifeste ---------- */
.opoko-manifesto { margin: 0; --opoko-dim: .14; --opoko-accent: currentColor; }
.opoko-manifesto__accent { color: var(--opoko-accent); }
.opoko-manifesto__dot { color: #b01614; }
.opoko-manifesto__pill {
	display: inline-block;
	vertical-align: middle;
	height: .78em;
	width: 1.75em;
	margin: 0 .04em;
	border-radius: 999px;
	overflow: hidden;
	transform: translateY(-.06em);
}
.opoko-manifesto__pill img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.opoko-manifesto[data-opoko-reveal].is-ready [data-opoko-word] { transition: opacity .25s linear, transform .35s ease; }
	.opoko-manifesto[data-opoko-reveal].is-ready .opoko-manifesto__word:not(.is-lit) { opacity: var(--opoko-dim); }
	.opoko-manifesto[data-opoko-reveal].is-ready .opoko-manifesto__pill:not(.is-lit) { opacity: 0; transform: translateY(-.06em) scale(.3); }
}

/* ---------- Accordéon d'images ---------- */
.opoko-acc {
	--opoko-acc-h: 640px;
	--opoko-acc-grow: 3.6;
	--opoko-acc-open-m: 432px;
	--opoko-acc-closed-m: 72px;
	--opoko-acc-tint-o: .88;
	--opoko-acc-shade: #0e1847;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: #fafcf8;
}
.opoko-acc__item {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	height: var(--opoko-acc-closed-m);
	transition: height .7s cubic-bezier(.16, 1, .3, 1), flex-grow .7s cubic-bezier(.16, 1, .3, 1);
	isolation: isolate;
}
.opoko-acc__item.is-open { height: var(--opoko-acc-open-m); }
.opoko-acc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: saturate(.5); transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter 1s; z-index: -3; }
.opoko-acc__item.is-open .opoko-acc__img { transform: none; filter: none; }
.opoko-acc__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(to top, color-mix(in srgb, var(--opoko-acc-shade) 95%, transparent), color-mix(in srgb, var(--opoko-acc-shade) 30%, transparent) 50%, transparent); }
.opoko-acc__tint { position: absolute; inset: 0; z-index: -1; background: var(--opoko-acc-tint); opacity: var(--opoko-acc-tint-o); transition: opacity .7s; }
.opoko-acc__item.is-open .opoko-acc__tint { opacity: 0; }

.opoko-acc .opoko-acc__tab {
	/* Les styles de bouton globaux du kit ne doivent pas s'appliquer aux bandes de l'accordéon */
	position: absolute; inset: 0; margin: 0; border-radius: 0; box-shadow: none; width: auto; height: auto;
	display: flex; align-items: center; gap: 16px;
	padding: 0 24px;
	border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
	transition: opacity .3s;
}
.opoko-acc .opoko-acc__item.is-open .opoko-acc__tab { opacity: 0; pointer-events: none; }
.opoko-acc .opoko-acc__tab:hover, .opoko-acc .opoko-acc__tab:focus { background: none; color: inherit; }
.opoko-acc__tab-num { font-family: 'Avenir LT Pro', sans-serif; font-weight: 900; opacity: .7; }
.opoko-acc__tab-title { flex: 1; font-family: 'Avenir LT Pro', sans-serif; font-weight: 900; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; }
.opoko-acc__plus { font-size: 1.5rem; line-height: 1; }

.opoko-acc__panel {
	position: absolute; inset: auto 0 0 0;
	padding: 24px;
	opacity: 0; transform: translateY(16px); pointer-events: none;
	transition: opacity .5s, transform .5s;
}
.opoko-acc__item.is-open .opoko-acc__panel { opacity: 1; transform: none; pointer-events: auto; transition-delay: .2s; }
.opoko-acc__num { margin: 0; font-family: 'Avenir LT Pro', sans-serif; font-weight: 900; font-size: 1.125rem; color: #a8d4a7; }
.opoko-acc .opoko-acc__title { margin: .5rem 0 0; font-family: 'Avenir LT Pro', sans-serif; font-weight: 900; font-size: clamp(2rem, 1.4rem + 2.4vw, 4rem); line-height: 1; letter-spacing: -.035em; color: inherit; }
.opoko-acc__text { margin: 1rem 0 0; max-width: 46ch; opacity: .85; }
.opoko-acc__projects { margin-top: 1.25rem; max-width: 36rem; }
.opoko-acc__projects-title { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a8d4a7; }
.opoko-acc__projects-empty { margin: .5rem 0 0; font-size: .875rem; opacity: .7; }
.opoko-acc__projects ul { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid rgba(250, 252, 248, .15); }
.opoko-acc__projects li { border-bottom: 1px solid rgba(250, 252, 248, .15); }
.opoko-acc__projects a { display: flex; flex-direction: column; padding: .6rem 0; color: inherit; text-decoration: none; }
.opoko-acc__project-name { font-weight: 600; }
.opoko-acc__project-meta { font-size: .75rem; opacity: .65; }
.opoko-acc__projects a:hover .opoko-acc__project-name { text-decoration: underline; }
.opoko-acc__btn {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-top: 1.5rem; height: 48px; padding: 0 24px;
	border-radius: 999px; background: #fafcf8; color: #0e1847; font-weight: 600; text-decoration: none;
}
.opoko-acc__btn span { transition: transform .3s; }
.opoko-acc__btn:hover span { transform: translateX(4px); }

@media (min-width: 1025px) {
	.opoko-acc { flex-direction: row; height: var(--opoko-acc-h); }
	.opoko-acc__item, .opoko-acc__item.is-open { height: auto; flex: 1 1 0; }
	.opoko-acc__item.is-open { flex-grow: var(--opoko-acc-grow); }
	.opoko-acc .opoko-acc__tab { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 28px 24px; }
	.opoko-acc__tab-title { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.7rem; }
	.opoko-acc__plus { display: none; }
	.opoko-acc__panel { padding: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.opoko-acc__item, .opoko-acc__img, .opoko-acc__tint, .opoko-acc__panel { transition: none; }
}

/* ---------- Carte des bureaux ---------- */
.opoko-map { position: relative; margin: 0 auto; max-width: 680px; }
.opoko-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.opoko-map__land { fill: #cfe6cf; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.opoko-map__country { font-family: 'Avenir LT Pro', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; fill: rgba(24, 34, 106, .45); }
.opoko-map__flight { fill: none; stroke: #1e3a8a; stroke-opacity: .6; stroke-width: 1.8; stroke-dasharray: 2 6; stroke-linecap: round; }
.opoko-map__pin { position: absolute; width: 0; height: 0; }
.opoko-map__marker { position: absolute; left: -11px; top: -30px; width: 22px; height: 30px; fill: var(--c); filter: drop-shadow(0 2px 3px rgba(14, 24, 71, .35)); }
.opoko-map__pulse { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--c); opacity: 0; }
.opoko-map__label { position: absolute; white-space: nowrap; line-height: 1.2; }
.opoko-map__city { display: block; font-family: 'Avenir LT Pro', sans-serif; font-weight: 800; font-size: .875rem; color: #0e1847; }
.opoko-map__area { display: block; font-size: .7rem; color: rgba(17, 23, 51, .65); }
.opoko-map__pin.is-right .opoko-map__label { left: 14px; top: -26px; }
.opoko-map__pin.is-left .opoko-map__label { right: 14px; top: -26px; text-align: right; }
.opoko-map__pin.is-below .opoko-map__label { left: 0; top: 4px; transform: translateX(-50%); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
	.opoko-map.is-blinking .opoko-map__pulse { animation: opoko-blink 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
}
@keyframes opoko-blink {
	0% { opacity: .65; transform: scale(.4); }
	70%, 100% { opacity: 0; transform: scale(3); }
}
@media (max-width: 600px) {
	.opoko-map__area { display: none; }
	.opoko-map__city { font-size: .72rem; }
}

/* ---------- Utilitaire : visible seulement des lecteurs d'écran ---------- */
.opoko-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Histogramme ---------- */
.opoko-bars { --opoko-bars-h: 300px; margin: 0; padding-bottom: 1.8rem; color: #0e1847; }
.opoko-bars__plot { display: flex; align-items: flex-end; gap: 20px; height: var(--opoko-bars-h); border-bottom: 1px solid rgba(14, 24, 71, .12); }
.opoko-bars__col { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.opoko-bars__value { font-weight: 600; font-size: .8rem; margin-bottom: .4rem; white-space: nowrap; }
.opoko-bars__bar { display: block; width: 100%; height: var(--h); background: #004c7d; border-radius: 8px 8px 0 0; transform-origin: bottom; }
.opoko-bars__label { position: absolute; top: 100%; margin-top: .5rem; font-size: .8rem; opacity: .6; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.opoko-bars.is-ready .opoko-bars__bar { transform: scaleY(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
	.opoko-bars.is-ready.is-in .opoko-bars__bar { transform: none; }
	.opoko-bars.is-ready .opoko-bars__col:nth-child(2) .opoko-bars__bar { transition-delay: .07s; }
	.opoko-bars.is-ready .opoko-bars__col:nth-child(3) .opoko-bars__bar { transition-delay: .14s; }
	.opoko-bars.is-ready .opoko-bars__col:nth-child(4) .opoko-bars__bar { transition-delay: .21s; }
	.opoko-bars.is-ready .opoko-bars__col:nth-child(5) .opoko-bars__bar { transition-delay: .28s; }
	.opoko-bars.is-ready .opoko-bars__col:nth-child(6) .opoko-bars__bar { transition-delay: .35s; }
	.opoko-bars.is-ready .opoko-bars__col:nth-child(7) .opoko-bars__bar { transition-delay: .42s; }
}

/* ---------- Carte des projets ---------- */
.opoko-pmap { --opoko-marker: #2a3496; --opoko-marker-active: #b01614; display: grid; gap: 24px; }
.opoko-pmap.has-list { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .opoko-pmap.has-list { grid-template-columns: 1fr; } }
.opoko-pmap__map { height: 560px; border-radius: 28px; overflow: hidden; background: #dbe6d8; z-index: 0; }
.opoko-pmap__list-title { margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #004c7d; }
.opoko-pmap__list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(14, 24, 71, .12); }
.opoko-pmap__list li { border-bottom: 1px solid rgba(14, 24, 71, .12); padding: .75rem 0; }
.opoko-pmap .opoko-pmap__item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: #0e1847; text-align: left; font: inherit; cursor: pointer; }
.opoko-pmap .opoko-pmap__item:hover, .opoko-pmap .opoko-pmap__item:focus { background: none; color: #004c7d; }
.opoko-pmap__item-title { font-weight: 600; }
.opoko-pmap__item-meta { font-size: .8rem; color: rgba(17, 23, 51, .6); }
.opoko-pmap__item-link { font-size: .85rem; font-weight: 600; color: #004c7d; }
.opoko-pmap li.is-active .opoko-pmap__item-title { color: var(--opoko-marker-active); }
.opoko-pmap__marker { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--opoko-marker); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(14, 24, 71, .4); }
.opoko-pmap__marker.is-active { background: var(--opoko-marker-active); transform: scale(1.2); }