.bp-observatory-toc {
display: block;
min-width: 0;
width: 100%;
margin-top: var(--space-sm);
padding: clamp(1rem, 2vw, 1.35rem);
border: 1px solid var(--bp-border-soft);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bp-surface) 64%, transparent);
text-align: left;
}
.bp-observatory-toc__title {
margin: 0 0 .7rem;
color: var(--bp-brand-dark);
font-size: var(--text-sm);
font-weight: 800;
}
.bp-observatory-toc__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: .45rem .75rem;
margin: 0;
padding: 0;
list-style: none;
}
.bp-observatory-toc__list a {
display: flex;
align-items: baseline;
gap: .55rem;
min-height: var(--touch-target);
padding: .35rem .15rem;
color: var(--bp-text);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.35;
text-decoration: none;
overflow-wrap: anywhere;
}
.bp-observatory-toc__list a span {
flex: 0 0 auto;
color: var(--bp-brand);
font-size: 1em;
font-variant-numeric: tabular-nums;
letter-spacing: .06em;
}
.bp-observatory-toc__list a:hover,
.bp-observatory-toc__list a:focus-visible {
color: var(--bp-brand-dark);
text-decoration: underline;
text-underline-offset: .2em;
} .bp-observatory-page {
--bp-observatory-border: color-mix(in srgb, var(--bp-text) 10%, transparent);
--bp-observatory-axis: color-mix(in srgb, var(--bp-text) 18%, transparent);
}
.bp-observatory-page .bp-observatory-chapter {
padding-block: clamp(3rem, 6vw, 4.5rem);
}
.bp-observatory-page .bp-observatory-chapter .bp-container--narrow {
max-width: min(96vw, 1600px);
padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.bp-observatory-page .bp-observatory-chapter .text-accent {
margin-bottom: .55rem;
color: var(--bp-brand-dark);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: .02em;
}
.bp-observatory-page .bp-observatory-chapter h2 {
max-width: 27ch;
margin-bottom: .8rem;
}
.bp-observatory-chapter__intro,
.bp-observatory-page .bp-observatory-chapter > .bp-container > .bp-container--narrow > p:not(.bp-caption) {
max-width: 66ch;
margin-bottom: 1.5rem;
}
.bp-observatory-page .bp-observatory-chapter .bp-grid {
align-items: stretch;
}
.bp-observatory-page .bp-observatory-chapter .bp-card {
height: 100%;
}
.bp-observatory-page .bp-observatory-chapter .bp-observatory-kpi {
min-height: 0;
}
.bp-observatory-page .bp-observatory-chapter .bp-observatory-disclosure {
margin-top: .35rem;
}
.bp-observatory-page .bp-observatory-chapter .bp-observatory-disclosure > summary {
min-height: 3.25rem;
} .bp-observatory-page .bp-observatory-disclosure {
position: relative;
overflow: hidden;
} .bp-observatory-page .bp-observatory-reserved-teaser {
position: relative;
margin-top: .6rem;
min-height: 8.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--bp-surface-soft, #f6f7f9);
overflow: hidden;
}
.bp-observatory-page .bp-observatory-reserved-teaser__preview {
width: 100%;
padding: 1rem 1.1rem;
display: grid;
gap: .6rem;
filter: blur(5px);
opacity: .55;
pointer-events: none;
user-select: none;
}
.bp-observatory-page .bp-observatory-reserved-teaser__row {
margin: 0;
padding: .55rem .8rem;
border-radius: var(--radius-sm, .5rem);
background: var(--bp-surface, #fff);
color: color-mix(in srgb, currentColor 45%, transparent);
font-size: var(--text-sm);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bp-observatory-page .bp-observatory-reserved-teaser__badge {
position: absolute;
z-index: 2;
max-width: min(90%, 30rem);
margin: 0;
padding: .8rem 1.1rem;
border: 1px solid color-mix(in srgb, var(--bp-accent-text, #b45309) 35%, transparent);
border-radius: var(--radius);
background: var(--bp-surface, #fff);
box-shadow: var(--shadow-panel, 0 12px 28px -12px rgba(15, 23, 42, .3));
color: var(--bp-text, #1f2937);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.45;
text-align: center;
}
.bp-observatory-page .bp-observatory-reserved-teaser__badge strong {
color: var(--bp-accent-text, #92400e);
}
.bp-observatory-page .bp-observatory-reserved-teaser__badge a {
color: var(--bp-link, #2563eb);
font-weight: 800;
text-decoration: underline;
}
.bp-observatory-disclosure summary {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
cursor: pointer;
list-style: none;
}
.bp-observatory-disclosure summary::-webkit-details-marker {
display: none;
}
.bp-observatory-disclosure summary::after {
content: "+";
flex: 0 0 auto;
font-size: 1.2rem;
line-height: 1;
color: var(--bp-accent-text);
}
.bp-observatory-disclosure[open] summary::after {
content: "−";
}
.bp-observatory-page .bp-observatory-chapter.bp-observatory-market-section {
background: var(--bp-bg);
}
.bp-observatory-page .bp-observatory-chapter.bp-observatory-market-section .text-accent {
color: var(--bp-brand-dark);
}
.bp-observatory-page .bp-section,
.bp-observatory-bridge {
scroll-margin-top: 6rem;
}
.bp-observatory-kpi {
padding: clamp(1rem, 2vw, 1.35rem);
border: 1px solid var(--bp-observatory-border);
}
.bp-observatory-kpi .bp-stat-number {
margin: 0 0 .35rem;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: .95;
color: var(--bp-brand-dark);
}
.bp-observatory-kpi .bp-stat-label {
margin: 0 0 .45rem;
}
.bp-observatory-story {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--bp-observatory-border);
border-radius: 22px;
background: var(--bp-surface);
box-shadow: 0 16px 38px color-mix(in srgb, var(--bp-brand-dark) 8%, transparent);
}
.bp-observatory-story p {
display: grid;
align-content: start;
gap: .65rem;
min-height: 8.5rem;
margin: 0;
padding: 1.15rem;
border-right: 1px solid var(--bp-observatory-border);
}
.bp-observatory-story p:last-child {
border-right: 0;
}
.bp-observatory-story span {
color: var(--bp-brand);
font-size: var(--text-xs);
font-weight: 900;
letter-spacing: .12em;
}
.bp-observatory-story strong {
color: var(--bp-brand-dark);
font-size: clamp(1rem, 1.7vw, 1.2rem);
line-height: 1.25;
}
.bp-observatory-opening-signal .bp-grid > div {
display: grid;
gap: .3rem;
padding: 1rem;
border-radius: 16px;
background: color-mix(in srgb, var(--bp-brand-tint) 35%, var(--bp-surface));
}
.bp-observatory-opening-signal .bp-grid strong {
color: var(--bp-brand-dark);
font-size: clamp(1.8rem, 4vw, 2.5rem);
line-height: 1;
}
.bp-observatory-project-card {
position: relative;
overflow: hidden;
border-top: 5px solid var(--bp-brand);
}
.bp-observatory-project-card__status {
display: inline-flex;
margin: 0;
padding: .35rem .65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bp-accent, #ffd34e) 32%, var(--bp-surface));
color: var(--bp-brand-dark);
font-size: var(--text-xs);
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.bp-observatory-report-preview {
position: relative;
min-height: 14rem;
padding: 1.2rem;
overflow: hidden;
border: 1px solid var(--bp-observatory-border);
border-radius: 18px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--bp-brand-tint) 50%, var(--bp-surface)), var(--bp-surface));
}
.bp-observatory-report-preview__label {
position: relative;
z-index: 2;
margin: 0 0 .8rem;
color: var(--bp-brand-dark);
font-size: var(--text-xs);
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
}
.bp-observatory-report-preview__blur {
display: grid;
gap: .6rem;
filter: blur(8px);
opacity: .64;
user-select: none;
}
.bp-observatory-report-preview::after {
position: absolute;
inset: auto 1.2rem 1.1rem;
height: 3rem;
border: 1px solid color-mix(in srgb, var(--bp-brand) 35%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--bp-surface) 80%, var(--bp-brand-tint));
content: "Détail réservé au rapport";
color: var(--bp-brand-dark);
font-size: var(--text-xs);
font-weight: 850;
line-height: 2.85rem;
text-align: center;
}
.bp-observatory-survey {
align-self: start;
padding: 0;
}
.bp-observatory-survey summary {
display: grid;
gap: .25rem;
padding: 1.25rem;
cursor: pointer;
list-style: none;
}
.bp-observatory-survey summary::-webkit-details-marker {
display: none;
}
.bp-observatory-survey[open] summary {
border-bottom: 1px solid var(--bp-observatory-border);
}
.bp-observatory-survey > p,
.bp-observatory-survey__form {
margin-inline: 1.25rem;
}
.bp-observatory-survey__form {
margin-bottom: 1.25rem;
}
.bp-observatory-survey__trap {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 720px) {
.bp-observatory-story {
grid-template-columns: 1fr;
}
.bp-observatory-story p {
border-right: 0;
border-bottom: 1px solid var(--bp-observatory-border);
}
.bp-observatory-story p:last-child {
border-bottom: 0;
}
}
.bp-observatory-market-section {
background: var(--bp-bg);
color: var(--bp-text);
}
.bp-observatory-market-section h2,
.bp-observatory-market-section h3,
.bp-observatory-market-section .text-accent,
.bp-observatory-market-section .text-lead,
.bp-observatory-market-section .bp-caption {
color: var(--bp-text);
}
.bp-observatory-market-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: clamp(1rem, 3vw, 2.25rem);
align-items: center;
padding: clamp(1.4rem, 4vw, 2.8rem);
border: 1px solid var(--bp-observatory-border);
border-radius: var(--radius-lg);
background: var(--bp-surface);
box-shadow: var(--shadow-card);
}
.bp-observatory-market-hero > div:first-child {
display: grid;
gap: .45rem;
}
.bp-observatory-market-hero__eyebrow,
.bp-observatory-market-scenario__tag {
font-size: var(--text-xs);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.bp-observatory-market-hero__value {
font-size: clamp(2.6rem, 6vw, 4.5rem);
line-height: .9;
color: var(--bp-brand-dark);
}
.bp-observatory-market-hero__formula {
display: grid;
grid-template-columns: 1fr;
gap: .8rem;
align-items: center;
padding: 1.25rem;
border: 1px solid var(--bp-observatory-border);
border-radius: var(--radius);
background: var(--bp-bg-info-soft);
text-align: center;
}
.bp-observatory-market-section .bp-observatory-market-scenario {
background: var(--bp-surface);
color: var(--bp-text);
border: 1px solid var(--bp-observatory-border);
}
.bp-observatory-market-scenario--central {
transform: none;
box-shadow: var(--shadow-card);
outline: 2px solid color-mix(in srgb, var(--bp-brand) 32%, transparent);
}
.bp-observatory-market-scenario__tag {
color: var(--bp-brand-dark);
}
.bp-observatory-market-forecast {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding: clamp(1.4rem, 4vw, 2.5rem);
border: 1px solid var(--bp-observatory-border);
border-radius: var(--radius-lg);
background: var(--bp-surface);
color: var(--bp-text);
}
.bp-observatory-market-forecast h3,
.bp-observatory-market-forecast .text-accent {
color: var(--bp-brand-dark);
}
.bp-observatory-market-bars,
.bp-observatory-market-bar {
display: grid;
gap: .6rem;
}
.bp-observatory-market-bars {
gap: .75rem;
}
.bp-observatory-market-bar {
padding: .85rem 1rem;
border: 1px solid color-mix(in srgb, var(--bp-brand-dark) 9%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--bp-brand-tint) 18%, var(--bp-surface));
}
.bp-observatory-market-bar--central {
border-color: color-mix(in srgb, var(--bp-brand) 42%, transparent);
background: color-mix(in srgb, var(--bp-brand-tint) 52%, var(--bp-surface));
box-shadow: 0 10px 26px color-mix(in srgb, var(--bp-brand-dark) 10%, transparent);
}
.bp-observatory-market-bar__label {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
font-weight: 700;
}
.bp-observatory-market-bar__label strong {
color: var(--bp-brand-dark);
font-size: 1.1rem;
}
.bp-observatory-market-bar__track {
height: 13px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--bp-brand-dark) 10%, var(--bp-surface));
}
.bp-observatory-market-bar__track span {
display: block;
width: var(--bp-observatory-market-width);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--bp-brand), var(--bp-accent, #ffd34e));
box-shadow: 0 2px 8px color-mix(in srgb, var(--bp-brand) 24%, transparent);
}
.bp-observatory-market-bar small {
color: var(--bp-text-muted);
}
.bp-observatory-sources {
border-left: 5px solid var(--bp-brand);
}
@media (max-width: 720px) {
.bp-observatory-market-hero,
.bp-observatory-market-forecast {
grid-template-columns: 1fr;
}
.bp-observatory-market-hero__formula {
grid-template-columns: 1fr;
}
.bp-observatory-market-scenario--central {
transform: none;
}
}
.bp-observatory-chart {
position: relative;
overflow: hidden;
margin: 0;
padding: clamp(1.1rem, 2.5vw, 1.65rem);
border: 1px solid var(--bp-observatory-border);
border-radius: 26px;
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--bp-accent, #ffd34e) 18%, transparent), transparent 32%),
color-mix(in srgb, var(--bp-surface) 97%, var(--bp-brand-tint) 3%);
box-shadow: 0 16px 42px color-mix(in srgb, var(--bp-brand-dark) 9%, transparent);
}
.bp-observatory-chart::before {
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--bp-brand), var(--bp-accent, #ffd34e));
content: "";
}
.bp-observatory-chart__meta {
display: grid;
gap: .35rem;
margin-bottom: 1rem;
padding-inline: .35rem;
}
.bp-observatory-chart__title {
margin: 0;
max-width: 46rem;
font-size: clamp(1.08rem, 2vw, 1.35rem);
font-weight: 800;
line-height: 1.2;
color: var(--bp-brand-dark);
}
.bp-observatory-chart__scroll {
overflow: hidden;
border-radius: 18px;
}
.bp-observatory-chart__svg {
display: block;
width: 100%;
height: auto;
}
.bp-observatory-chart__row {
fill: color-mix(in srgb, var(--bp-brand-tint) 36%, transparent);
}
.bp-observatory-chart__track {
fill: color-mix(in srgb, var(--bp-brand-dark) 9%, var(--bp-surface));
}
.bp-observatory-chart__bar {
fill: var(--bp-brand);
}
.bp-observatory-chart__value {
fill: var(--bp-brand-dark);
font-size: 20px;
font-weight: 800;
}
.bp-observatory-chart__label {
fill: var(--bp-text);
font-size: 19px;
font-weight: 700;
}
.bp-observatory-chart__watermark {
fill: var(--bp-text-muted);
font-size: 11px;
font-weight: 600;
}
.bp-observatory-chart__footnote {
margin: .85rem .35rem 0;
padding-top: .75rem;
border-top: 1px solid var(--bp-observatory-border);
color: var(--bp-text-muted);
}
.bp-observatory-chart__actions {
margin: .85rem .35rem 0;
}
.bp-observatory-download-btn {
justify-self: start;
min-height: 44px;
}
.bp-observatory-copy-group {
display: grid;
gap: 1rem;
}
.bp-observatory-copy-card {
display: grid;
gap: .65rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--bp-observatory-border);
background: color-mix(in srgb, var(--bp-surface) 95%, var(--bp-brand-tint) 5%);
}
.bp-observatory-copy-card h3,
.bp-observatory-copy-text {
margin: 0;
}
.bp-observatory-chart--stat .bp-observatory-chart__meta {
margin-bottom: 1rem;
}
.bp-observatory-stat-visual {
display: grid;
place-items: center;
gap: 0.35rem;
min-height: 18rem;
padding: 2rem;
border-radius: var(--radius-xl);
background:
radial-gradient(circle at top, color-mix(in srgb, var(--bp-brand) 18%, var(--bp-surface)), transparent 55%),
linear-gradient(180deg, var(--bp-surface), var(--bp-surface));
border: 1px solid color-mix(in srgb, var(--bp-border) 86%, var(--bp-surface));
text-align: center;
}
.bp-observatory-stat-visual__value {
margin: 0;
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 800;
line-height: 1;
}
.bp-observatory-stat-visual__unit {
margin: 0;
font-size: 1rem;
color: var(--bp-text-soft);
}
.bp-observatory-embed-page {
margin: 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--bp-surface-muted) 72%, var(--bp-surface)), var(--bp-surface) 35%),
var(--bp-surface, #fffaf4);
color: var(--bp-text);
}
.bp-observatory-embed {
padding: clamp(1rem, 3vw, 2rem);
}
.bp-observatory-embed__shell {
width: min(100%, 1120px);
margin: 0 auto;
display: grid;
gap: 1.5rem;
padding: clamp(1rem, 2.5vw, 2rem);
border-radius: var(--radius-xl);
background: var(--bp-surface);
box-shadow: var(--shadow-card);
}
.bp-observatory-embed--social .bp-observatory-embed__shell {
width: min(100%, 1200px);
max-height: 630px;
overflow: hidden;
}
.bp-observatory-embed--square .bp-observatory-embed__shell {
width: min(100%, 1080px);
max-height: 1080px;
overflow: hidden;
} .bp-observatory-embed--social .bp-observatory-embed__code,
.bp-observatory-embed--social .bp-observatory-embed__table,
.bp-observatory-embed--square .bp-observatory-embed__code,
.bp-observatory-embed--square .bp-observatory-embed__table {
display: none;
}
.bp-observatory-embed__header > :first-child,
.bp-observatory-embed__meta p,
.bp-observatory-embed__code p {
margin-top: 0;
}
.bp-observatory-embed__textarea {
width: 100%;
min-height: 7rem;
padding: 0.875rem 1rem;
border: 1px solid var(--bp-border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bp-surface) 92%, var(--bp-surface-muted));
color: var(--bp-text);
font: inherit;
resize: vertical;
}
.bp-observatory-embed__table .bp-table-wrap {
margin-top: 1rem;
}
.bp-observatory-copy-text {
padding: .9rem 1rem;
border-radius: 14px;
background: color-mix(in srgb, var(--bp-surface-warm) 90%, var(--bp-surface-soft) 10%);
font-size: .98rem;
}
.bp-observatory-copy-btn {
justify-self: start;
min-height: 44px;
}
@media (min-width: 900px) {
.bp-observatory-copy-group {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.bp-observatory-page *,
.bp-observatory-page *::before,
.bp-observatory-page *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
} .bp-observatory-page .bp-hero { padding-block: clamp(1.25rem, 3vw, 2.5rem); }
.bp-observatory-page .bp-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.16; }
.bp-observatory-page .bp-hero .bp-stack { gap: 1rem; }
.bp-observatory-access-label { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--bp-brand-dark); margin-left: .5rem; }
.bp-observatory-page [id] { scroll-margin-top: 5rem; }
@media (max-width: 600px) {
.bp-observatory-page .bp-hero .bp-container { padding-inline: .75rem; }
.bp-observatory-page .bp-hero .bp-container--narrow { text-align: left; }
.bp-observatory-page .bp-hero .text-lead { font-size: 1rem; }
.bp-observatory-page .bp-observatory-toc { padding: .875rem; }
.bp-observatory-page .bp-observatory-toc__list { grid-template-columns: 1fr; gap: .5rem; }
}