/* ============================================================
YELLOWPONIES — site-specific styles
Header marquee, custom cursor, page-transition curtain,
hero playground, manifeste fanzine, strates magazine,
stepper form, méthodo cards.
============================================================ */
html { scroll-behavior: smooth; }
/* Force variable axis activation. The DS font 'Adelphi PE' has THREE axes:
wght (100-900), opsz (6-18, Text→Display), slnt (-9.5→0).
font-optical-sizing:auto in the DS handles opsz, but we force opsz=18
on the biggest display headlines so the chunky DISPLAY drawing kicks in
regardless of computed font-size. */
h1, h2, h3,
.hero-h1, .fanzine h2, .cases-heading h2, .case-title, .methodo-card h3,
.cta-black h2, .equipe-hero h1, .founder-info h3, .stable-heading h2,
.projets-hero h1, .strate-title, .contact-aside h1, .contact-form h2 {
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
h4, .yps-marquee-item, .yps-logo, .yps-footer-logo, .stable-card .info .name,
.tweaks-head h4, .kpi-block .kpi-value, .strate-kpi .v, .badge {
font-variation-settings: "wght" 800, "opsz" 14, "slnt" 0;
}
.tweaks-row .seg button, .case-meta, .strate-eyebrow,
.cases-eyebrow, .stable-card .info .role, .methodo-card .step-eyebrow,
.tag, .strate-tag, .chip, .field-label, .btn-secondary, .btn-primary,
.yps-header-cta, .case-cta, .strate-link, .founder-info .echange, .founder-info .role,
.stable-heading .count, .projets-filter, .yps-footer-col h5, .yps-footer-col a,
.yps-footer-col span, .yps-footer-bottom, .hero-promise, .hero-scroll-hint,
.tweaks-row .lbl, .stepper-item, .contact-coords {
font-variation-settings: "wght" 700, "opsz" 6, "slnt" 0;
}
.yps-clients-track span { font-variation-settings: "wght" 900, "opsz" 16, "slnt" 0; }
.fanzine-page { font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0; }
.hero-sub, .case-sub, .strate-summary, .founder-info p, .methodo-card p,
.contact-aside .note, .form-head .timer { font-variation-settings: "wght" 400, "opsz" 6, "slnt" 0; }
body, p { font-variation-settings: "wght" 400, "opsz" 6, "slnt" 0; }
.fanzine-col p { font-variation-settings: "wght" 500, "opsz" 6, "slnt" 0; }
.fanzine-col p strong, .hero-sub strong, .equipe-hero .sub strong, .contact-aside .note strong { font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0; }
/* Italic body copy still uses Adelphi but via a Georgia-italic fallback; if
Adelphi loads with the slnt axis we use it for sparse oblique accents. */
.hero-promise .moon, .contact-coords .loc, .yps-footer-bottom .moon { font-variation-settings: "wght" 700, "slnt" 0; }
body {
font-family: var(--yp-font-body);
background: #FAFAF7;
color: var(--yp-black);
cursor: auto;
}
::selection { background: var(--yp-yellow); color: var(--yp-black); }
/* ---------- LAYOUT HELPERS ---------- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--yp-gutter); }
.container-wide { max-width: 1600px; margin: 0 auto; padding: 0 var(--yp-gutter); }
.divider-black { border-top: 2px solid var(--yp-black); }
/* ---------- BRAND ICONOGRAPHY HELPERS ---------- */
.yp-icon { display: inline-block; vertical-align: middle; }
.yp-icon-img { display: block; max-width: 100%; height: auto; }
.yp-bolt-bg {
position: absolute;
pointer-events: none;
opacity: 0.15;
z-index: 0;
filter: drop-shadow(0 0 0 transparent);
}
.yp-bolt-bg.bolt-pink { opacity: 0.22; }
/* ============================================================
HEADER STYLE: "MINIMAL" — toggled via body[data-header-style="minimal"]
Inspired by minimalist Dutch design (pieterkoopt.nl):
- single horizontal row (no separate marquee strip)
- centred nav with text-roll hover animation
- pill CTA on the right with brand colours
(Legacy — superseded by the compact .yps-topbar header below.
All `data-header-style="minimal"` rules removed; the new header
is now the only style.)
============================================================ */
/* ============================================================
HEADER — Marquee variant (2-level) — default
============================================================ */
/* ============================================================
HEADER — Compact topbar (Pieter Koopt-inspired, YPS branded)
Two clusters: logo + utilities (audio / lang / whatsapp) on the
left, nav pills + BRIEFER MOI CTA on the right.
============================================================ */
.yps-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--yp-black);
color: var(--yp-white);
border-bottom: 2px solid var(--yp-yellow);
}
.yps-topbar {
max-width: 1680px;
margin: 0 auto;
padding: 12px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.yps-topbar-left {
display: flex;
align-items: center;
gap: 14px;
}
.yps-logo {
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
margin-right: 4px;
/* Reserve flex space; the larger img is positioned absolutely so it
can overflow downward across the header / section boundary. */
width: 132px;
height: 36px;
}
.yps-logo img {
position: absolute;
top: -4px;
left: 0;
height: 78px;
width: auto;
display: block;
filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25));
pointer-events: none;
z-index: 2;
}
/* Allow the logo to dip below the header bottom-border. */
.yps-header { overflow: visible; }
.yps-topbar { overflow: visible; }
.yps-topbar-divider {
width: 1px;
height: 26px;
background: rgba(255,255,255,0.2);
}
.yps-iconbtn {
appearance: none;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 999px;
color: var(--yp-white);
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.06em;
text-decoration: none;
padding: 0;
}
.yps-iconbtn:hover {
background: var(--yp-yellow);
color: var(--yp-black);
border-color: var(--yp-yellow);
transform: translateY(-1px);
}
.yps-audio-bars {
display: inline-flex;
align-items: center;
gap: 2px;
height: 16px;
}
.yps-audio-bars span {
display: inline-block;
width: 2px;
height: 100%;
background: currentColor;
transform-origin: bottom;
transform: scaleY(0.4);
transition: transform 220ms ease;
}
.yps-audio-bars span:nth-child(1) { transform: scaleY(0.35); }
.yps-audio-bars span:nth-child(2) { transform: scaleY(0.6); }
.yps-audio-bars span:nth-child(3) { transform: scaleY(0.45); }
.yps-audio-bars span:nth-child(4) { transform: scaleY(0.8); }
.yps-audio-bars span:nth-child(5) { transform: scaleY(0.3); }
.yps-audio-btn[aria-pressed="true"] {
background: var(--yp-yellow);
color: var(--yp-black);
border-color: var(--yp-yellow);
}
.yps-audio-btn[aria-pressed="true"] .yps-audio-bars span {
animation: yps-eq 0.8s ease-in-out infinite;
}
.yps-audio-btn[aria-pressed="true"] .yps-audio-bars span:nth-child(2) { animation-delay: 0.1s; }
.yps-audio-btn[aria-pressed="true"] .yps-audio-bars span:nth-child(3) { animation-delay: 0.25s; }
.yps-audio-btn[aria-pressed="true"] .yps-audio-bars span:nth-child(4) { animation-delay: 0.05s; }
.yps-audio-btn[aria-pressed="true"] .yps-audio-bars span:nth-child(5) { animation-delay: 0.18s; }
@keyframes yps-eq {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(1); }
}
.yps-lang-btn { width: auto; padding: 0 12px; }
.yps-lang-current {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.yps-wa-btn svg { display: block; }
.yps-topbar-right {
display: flex;
align-items: center;
gap: 8px;
}
.yps-topbar-link {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--yp-white);
padding: 10px 16px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px;
background: transparent;
overflow: hidden;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.yps-topbar-link:hover {
background: var(--yp-yellow);
color: var(--yp-black);
border-color: var(--yp-yellow);
}
.yps-topbar-link.is-active {
background: var(--yp-pink);
color: var(--yp-black);
border-color: var(--yp-pink);
}
.yps-topbar-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 20px;
background: var(--yp-yellow);
color: var(--yp-black);
text-decoration: none;
border: 1px solid var(--yp-yellow);
border-radius: 8px;
margin-left: 10px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.yps-topbar-cta:hover {
background: var(--yp-pink);
border-color: var(--yp-pink);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--yp-white);
}
.yps-topbar-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--yp-black);
color: var(--yp-yellow);
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 16px;
line-height: 1;
padding-bottom: 2px;
transition: background 200ms ease, color 200ms ease;
}
.yps-topbar-cta:hover .yps-topbar-cta-arrow {
background: var(--yp-white);
color: var(--yp-pink);
}
@media (max-width: 720px) {
.yps-topbar-link:not(.is-active) { display: none; }
/* CTA "Nous briefer" caché sur mobile — accessible via le drawer burger */
.yps-topbar-right .bf,
.bf-glitch { display: none !important; }
}
@media (max-width: 540px) {
.yps-topbar-divider { display: none; }
.yps-iconbtn { width: 34px; height: 34px; }
.yps-topbar-link { display: none; }
.yps-topbar-cta-label { display: none; }
.yps-topbar-cta { padding: 8px; }
}
/* ============================================================
CTA "Nous briefer" — variante H · Glitch RGB cyberpunk
------------------------------------------------------------
Markup :
Nous briefer
LIVE
Source : brief-button.jsx du handoff YPS 2 (variante glitch, sage).
Utilise les tokens YP (--yp-yellow, --yp-pink, --yp-blue, --yp-black).
============================================================ */
.bf {
font-family: var(--yp-font-display, 'Adelphi PE VF', 'Impact', sans-serif);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 2px solid var(--yp-black);
padding: 11px 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
text-decoration: none;
user-select: none;
margin-left: 10px;
line-height: 1;
}
.bf-glitch {
background: var(--yp-black);
color: var(--yp-white);
overflow: hidden;
isolation: isolate;
padding-right: 42px; /* place pour le badge LIVE */
}
.bf-glitch .bf-glitch-label {
position: relative;
display: inline-block;
z-index: 2;
}
.bf-glitch .bf-glitch-label::before,
.bf-glitch .bf-glitch-label::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.bf-glitch .bf-glitch-label::before {
color: var(--yp-pink);
transform: translate(-1.5px, 0);
mix-blend-mode: screen;
animation: bf-glitch-x 3.2s steps(2) infinite;
}
.bf-glitch .bf-glitch-label::after {
color: var(--yp-blue, #00E1FF);
transform: translate(1.5px, 0);
mix-blend-mode: screen;
animation: bf-glitch-x 3.2s steps(2) infinite reverse;
}
/* Scanlines en overlay */
.bf-glitch::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.06) 0,
rgba(255, 255, 255, 0.06) 1px,
transparent 1px,
transparent 3px
);
pointer-events: none;
z-index: 3;
}
/* Faisceau jaune vertical qui balaye */
.bf-glitch::after {
content: '';
position: absolute;
left: 0; right: 0;
top: -8px;
height: 4px;
background: linear-gradient(
to bottom,
transparent 0%,
var(--yp-yellow) 50%,
transparent 100%
);
opacity: 0.7;
animation: bf-scan-beam 4s linear infinite;
z-index: 4;
pointer-events: none;
mix-blend-mode: screen;
}
/* Badge "● LIVE" rose en haut à droite */
.bf-glitch .bf-glitch-live {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--yp-font-display, 'Adelphi PE VF', 'Impact', sans-serif);
font-size: 8px;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--yp-pink);
z-index: 5;
animation: bf-blink 1.4s steps(2) infinite;
}
.bf-glitch .bf-glitch-live::before {
content: '';
width: 5px;
height: 5px;
background: var(--yp-pink);
border-radius: 50%;
}
/* Hover : tremblement + split RGB élargi + faisceau accéléré */
.bf-glitch:hover {
animation: bf-glitch-jump 0.18s steps(2) infinite;
}
.bf-glitch:hover .bf-glitch-label::before {
transform: translate(-4px, -1px);
animation-duration: 0.6s;
}
.bf-glitch:hover .bf-glitch-label::after {
transform: translate(4px, 1px);
animation-duration: 0.6s;
}
.bf-glitch:hover::after {
animation-duration: 0.7s;
}
/* Keyframes */
@keyframes bf-glitch-x {
0%, 88%, 100% { clip-path: inset(0 0 0 0); }
90% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
92% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
94% { clip-path: inset(40% 0 40% 0); transform: translate(-1px, 0); }
96% { clip-path: inset(10% 0 70% 0); transform: translate(2px, 0); }
98% { clip-path: inset(0 0 80% 0); transform: translate(-4px, 0); }
}
@keyframes bf-glitch-jump {
0% { transform: translate(0, 0); }
25% { transform: translate(-2px, 1px); }
50% { transform: translate(2px, -1px); }
75% { transform: translate(-1px, -2px); }
100% { transform: translate(1px, 2px); }
}
@keyframes bf-scan-beam {
0% { top: -8px; }
100% { top: calc(100% + 8px); }
}
@keyframes bf-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.3; }
}
/* Respect prefers-reduced-motion : on garde le visuel statique
(split RGB visible) mais on tue toutes les animations. */
@media (prefers-reduced-motion: reduce) {
.bf-glitch,
.bf-glitch .bf-glitch-label::before,
.bf-glitch .bf-glitch-label::after,
.bf-glitch::after,
.bf-glitch .bf-glitch-live {
animation: none !important;
}
}
/* Mobile : on garde le bouton visible mais on réduit le padding
(le burger est l'option principale, mais le CTA reste accessible
tant que la nav inline est cachée). */
@media (max-width: 540px) {
.bf { font-size: 11px; padding: 9px 14px; padding-right: 38px; margin-left: 6px; }
.bf-glitch .bf-glitch-live { font-size: 7px; right: 6px; }
}
/* Override old marquee/header-bar layout — keep CSS but hide
in case any page still has the markup. */
.yps-header-bar, .yps-marquee-nav { display: none; }
/* ============================================================
HEADER — Marquee variant (2-level) — legacy markup
(Hidden via .yps-header-bar { display: none } above.)
============================================================ */
.yps-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px var(--yp-gutter);
border-bottom: 2px solid var(--yp-black);
gap: 16px;
}
.yps-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--yp-black);
}
.yps-logo img {
height: 95px;
width: auto;
display: block;
}
.yps-header-cta {
background: var(--yp-pink);
color: var(--yp-black);
border: 2px solid var(--yp-black);
font-family: var(--yp-font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
padding: 10px 22px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: box-shadow .25s ease, transform .15s ease;
}
.yps-header-cta:hover {
box-shadow: var(--yp-shadow-yellow);
transform: translate(-3px, -3px);
}
/* Marquee navigation */
.yps-marquee-nav {
overflow: hidden;
background: var(--yp-white);
height: 46px;
display: flex;
align-items: center;
position: relative;
}
.yps-marquee-track {
display: inline-flex;
white-space: nowrap;
animation: yps-marquee 32s linear infinite;
will-change: transform;
}
.yps-marquee-nav:hover .yps-marquee-track { animation-play-state: paused; }
.yps-marquee-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 28px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--yp-black);
text-decoration: none;
position: relative;
transition: transform .2s ease;
}
.yps-marquee-item:hover { transform: scale(1.08); }
.yps-marquee-item .num {
color: var(--yp-pink);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.yps-marquee-item.is-active .num { color: var(--yp-black); background: var(--yp-yellow); padding: 2px 6px; }
.yps-marquee-item .dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--yp-black);
margin: 0 4px;
}
@keyframes yps-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ============================================================
CUSTOM CURSOR
------------------------------------------------------------
[15/05/2026] Bloc retiré — la gestion du curseur custom est
désormais 100% dans `public/cursor.{css,js}` (module autonome
du handoff Claude Design). Voir Base.astro pour le chargement.
============================================================ */
/* ============================================================
PAGE TRANSITION — White overlay + galloping yellow pony in center
============================================================ */
.yps-pony-transition {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
display: none;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--yp-white);
opacity: 0;
transition: opacity .25s ease;
}
.yps-pony-transition.is-active { display: flex; }
.yps-pony-transition.is-fading-in { animation: pony-trans-in .9s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes pony-trans-in {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
.yps-pony-runner {
position: relative;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.yps-pony-runner img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.yps-pony-label {
position: absolute;
bottom: calc(50% - 130px);
left: 50%;
transform: translateX(-50%);
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--yp-black);
white-space: nowrap;
opacity: 0;
animation: pony-label .9s cubic-bezier(.6,0,.4,1) forwards;
}
.yps-pony-label::before, .yps-pony-label::after {
content: '⚡';
margin: 0 10px;
color: var(--yp-pink);
}
@keyframes pony-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes pony-legs {
0%, 100% { transform: rotate(-26deg); }
50% { transform: rotate(26deg); }
}
@keyframes pony-flap {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(10deg); }
}
@keyframes pony-label {
0% { opacity: 0; transform: translate(-50%, 10px); }
30% { opacity: 1; transform: translate(-50%, 0); }
70% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -4px); }
}
/* ============================================================
FOOTER
============================================================ */
.yps-footer {
background: var(--yp-black);
color: var(--yp-white);
border-top: 3px solid var(--yp-yellow);
padding: 56px var(--yp-gutter) 32px;
}
.yps-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 40px;
max-width: 1440px;
margin: 0 auto;
}
.yps-footer-brand {
display: flex;
flex-direction: column;
gap: 14px;
}
.yps-footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
}
.yps-footer-logo img {
height: 56px;
width: auto;
display: block;
}
.yps-footer-tag {
font-family: 'Georgia', serif;
font-style: italic;
font-weight: 400;
color: #E0E0DC;
font-size: 16px;
}
.yps-footer-col h5 {
font-family: var(--yp-font-body);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
color: var(--yp-yellow);
margin: 0 0 14px;
}
.yps-footer-col a, .yps-footer-col span {
display: block;
color: var(--yp-white);
text-decoration: none;
font-size: 15px;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: 600;
}
.yps-footer-col a:hover { color: var(--yp-yellow); }
.yps-footer-bottom {
margin-top: 48px;
padding-top: 20px;
border-top: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #999;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.yps-footer-bottom .moon { color: var(--yp-pink); }
/* ============================================================
PLACEHOLDER FRAME (dashed) — used for images
============================================================ */
.yps-placeholder {
position: relative;
background: #F0EFE8;
border: 2px dashed var(--yp-black);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Georgia', serif;
font-style: italic;
color: #555;
font-size: 13px;
text-align: center;
padding: 12px;
overflow: hidden;
}
.yps-placeholder::before, .yps-placeholder::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.yps-placeholder::before {
background:
linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(0,0,0,.18), transparent calc(50% + 1px));
}
.yps-placeholder::after {
background:
linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(0,0,0,.18), transparent calc(50% + 1px));
}
.yps-placeholder > * { position: relative; z-index: 2; }
.yps-placeholder-label {
background: #FAFAF7;
padding: 4px 8px;
border: 1px solid #888;
font-size: 12px;
}
/* ============================================================
ACCUEIL — Hero playground
============================================================ */
.hero-playground {
position: relative;
padding: 56px var(--yp-gutter) 72px;
background: #FAFAF7;
overflow: hidden;
min-height: 72vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-h1 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.98;
font-size: clamp(40px, 5.8vw, 96px);
margin: 0;
max-width: 22ch;
position: relative;
z-index: 3;
text-wrap: balance;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.hero-sub-lead {
margin: 32px 0 0;
font-family: var(--yp-font-body);
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.5;
max-width: 56ch;
color: #2A2A2A;
position: relative;
z-index: 3;
font-variation-settings: "wght" 400, "opsz" 8, "slnt" 0;
text-wrap: pretty;
}
.hero-sub-lead strong {
font-weight: 800;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.hero-h1 .hl-yellow,
.hero-h1 .hl-pink {
display: inline;
padding: 0 0.12em;
color: var(--yp-black);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.hero-h1 .hl-yellow {
background: var(--yp-yellow);
}
.hero-h1 .hl-pink {
background: var(--yp-pink);
border: 2px solid var(--yp-black);
box-shadow: 4px 4px 0 var(--yp-black);
}
/* ---------- HERO CTA ---------- */
.hero-cta {
margin-top: 40px;
align-self: flex-start;
width: fit-content;
max-width: max-content;
display: inline-flex;
align-items: center;
gap: 16px;
padding: 0;
background: transparent;
color: var(--yp-black);
text-decoration: none;
border: 0;
border-radius: 0;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
position: relative;
z-index: 3;
cursor: pointer;
box-shadow: none;
transition: none;
}
.hero-cta-label {
display: inline-block;
border-bottom: 2px solid var(--yp-black);
padding-bottom: 4px;
transition: color 200ms ease, border-color 200ms ease;
}
.hero-cta:hover {
background: transparent;
color: var(--yp-black);
transform: none;
box-shadow: none;
}
.hero-cta:hover .hero-cta-label {
color: var(--yp-pink);
border-color: var(--yp-pink);
}
.hero-cta-pony {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--yp-yellow);
border-radius: 999px;
border: 2px solid var(--yp-black);
box-shadow: 3px 3px 0 var(--yp-black);
transition: transform 200ms ease, box-shadow 200ms ease;
animation: pony-bob 1.8s ease-in-out infinite;
flex: 0 0 auto;
}
.hero-cta:hover .hero-cta-pony {
animation: pony-gallop 0.55s ease-in-out infinite;
box-shadow: 5px 5px 0 var(--yp-pink);
}
.hero-cta-pony img {
width: 34px;
height: 34px;
object-fit: contain;
display: block;
}
@keyframes pony-bob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-3px) rotate(-4deg); }
}
@keyframes pony-gallop {
0% { transform: translateY(0) rotate(-6deg); }
25% { transform: translateY(-4px) rotate(4deg); }
50% { transform: translateY(0) rotate(-6deg); }
75% { transform: translateY(-4px) rotate(4deg); }
100% { transform: translateY(0) rotate(-6deg); }
}
.hero-sub {
margin-top: 32px;
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(18px, 1.6vw, 24px);
max-width: 38ch;
color: #222;
position: relative;
z-index: 3;
}
.hero-sub strong {
font-style: normal;
font-family: var(--yp-font-body);
font-weight: 700;
}
.hero-promise {
margin-top: 24px;
font-family: var(--yp-font-body);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--yp-black);
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid var(--yp-black);
padding: 8px 14px;
background: var(--yp-white);
position: relative;
z-index: 3;
}
.hero-promise .moon { color: var(--yp-pink); }
.hero-floats {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.hero-float {
position: absolute;
pointer-events: auto;
background: var(--yp-white);
border: 2px solid var(--yp-black);
transition: transform .4s var(--yp-ease-spring), box-shadow .3s ease;
padding: 8px;
}
.hero-float .yps-placeholder {
width: 100%; height: 100%;
border: none;
}
.hero-float-icon {
width: 70%;
height: 70%;
object-fit: contain;
margin: auto;
display: block;
transition: transform .45s var(--yp-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.hero-float-pony {
width: 100%;
height: 110%;
object-fit: contain;
object-position: center bottom;
display: block;
transition: transform .45s var(--yp-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.hero-float {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-float-tag {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
background: var(--yp-black);
color: var(--yp-white);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 0.08em;
padding: 4px 8px;
white-space: nowrap;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.hero-float:hover { transform: rotate(0) scale(1.04); }
.hero-float.f1:hover .hero-float-icon,
.hero-float.f2:hover .hero-float-icon,
.hero-float.f3:hover .hero-float-icon,
.hero-float.f1:hover .hero-float-pony,
.hero-float.f2:hover .hero-float-pony,
.hero-float.f3:hover .hero-float-pony {
animation: hero-float-wiggle .55s ease-in-out infinite;
}
@keyframes hero-float-wiggle {
0% { transform: translateY(0) rotate(-6deg); }
25% { transform: translateY(-5px) rotate(6deg); }
50% { transform: translateY(0) rotate(-4deg); }
75% { transform: translateY(-5px) rotate(4deg); }
100% { transform: translateY(0) rotate(-6deg); }
}
.hero-float.f1 {
top: 6%;
right: 4%;
width: 230px; height: 230px;
transform: rotate(8deg);
box-shadow: 10px 10px 0 var(--yp-pink);
}
.hero-float.f2 {
bottom: 12%;
right: 18%;
width: 200px; height: 260px;
transform: rotate(-6deg);
box-shadow: 10px 10px 0 var(--yp-yellow);
}
.hero-float.f3 {
top: 38%;
right: 28%;
width: 240px; height: 180px;
transform: rotate(4deg);
box-shadow: 10px 10px 0 var(--yp-black);
}
.hero-bolt {
position: absolute;
width: 720px;
height: 380px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.18;
pointer-events: none;
z-index: 1;
}
.hero-bolt.b1 { top: -80px; left: -120px; transform: rotate(-12deg); }
.hero-bolt.b2 { bottom: -100px; right: -120px; transform: rotate(180deg); opacity: 0.12; }
.hero-scroll-hint {
position: absolute;
bottom: 24px;
left: var(--yp-gutter);
display: flex;
align-items: center;
gap: 12px;
font-family: var(--yp-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hero-scroll-hint::before {
content: '';
width: 38px; height: 2px;
background: var(--yp-black);
}
/* ============================================================
QUI CES GENS (Section 2 — yellow teaser team)
============================================================ */
.qui-section {
position: relative;
background: var(--yp-yellow);
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
padding: 100px 0 120px;
overflow: hidden;
}
.qui-bolt {
position: absolute;
width: 540px;
height: 280px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.12;
pointer-events: none;
z-index: 1;
}
.qui-bolt.b1 { top: -60px; left: -120px; transform: rotate(-12deg); }
.qui-bolt.b2 { bottom: -80px; right: -140px; transform: rotate(160deg); opacity: 0.08; }
.qui-inner {
position: relative;
z-index: 2;
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 64px;
align-items: center;
}
/* ----- LEFT: content ----- */
.qui-content { position: relative; }
.qui-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--yp-black);
margin-bottom: 28px;
display: inline-flex;
align-items: center;
gap: 10px;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.qui-eyebrow::before {
content: '';
width: 28px;
height: 2px;
background: var(--yp-black);
display: inline-block;
}
.qui-title {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(48px, 6vw, 104px);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0 0 32px;
color: var(--yp-black);
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.qui-outline {
-webkit-text-stroke: 2px var(--yp-black);
color: transparent;
}
.qui-mark {
display: inline-block;
background: var(--yp-pink);
color: var(--yp-black);
padding: 0 0.18em 0.04em;
margin-left: 0.04em;
border: 2px solid var(--yp-black);
box-shadow: 6px 6px 0 var(--yp-black);
transform: rotate(-4deg);
}
.qui-text {
max-width: 50ch;
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.55;
color: #1A1A1A;
display: flex;
flex-direction: column;
gap: 16px;
}
.qui-text p { margin: 0; }
.qui-lead {
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(20px, 1.5vw, 26px) !important;
line-height: 1.35 !important;
color: var(--yp-black);
margin-bottom: 6px !important;
}
.qui-lead em { font-style: italic; }
.qui-text strong { font-weight: 800; font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0; }
.qui-cta {
margin-top: 36px;
align-self: flex-start;
width: fit-content;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 24px 12px 12px;
background: var(--yp-black);
color: var(--yp-white);
text-decoration: none;
border: 2px solid var(--yp-black);
border-radius: 999px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 4px 4px 0 var(--yp-pink);
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.qui-cta:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 var(--yp-pink);
}
.qui-cta-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--yp-yellow);
border-radius: 999px;
border: 2px solid var(--yp-white);
flex: 0 0 auto;
transition: transform 240ms ease;
}
.qui-cta-icon img {
width: 28px;
height: 28px;
object-fit: contain;
display: block;
animation: pony-bob 1.8s ease-in-out infinite;
}
.qui-cta:hover .qui-cta-icon img {
animation: pony-gallop 0.55s ease-in-out infinite;
}
/* ----- RIGHT: collage ----- */
.qui-collage {
position: relative;
min-height: 540px;
perspective: 1200px;
}
.qui-photo {
position: absolute;
background: var(--yp-white);
border: 2px solid var(--yp-black);
box-shadow: 8px 8px 0 var(--yp-black);
padding: 10px 10px 14px;
transition: transform .4s var(--yp-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .3s ease;
will-change: transform;
}
.qui-photo .qui-photo-frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #1a1a1a;
}
.qui-photo .qui-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
filter: grayscale(1) contrast(1.05);
}
.qui-photo .yps-placeholder {
position: absolute;
inset: 0;
border: 0;
filter: grayscale(1) contrast(1.05);
}
.qui-photo:hover {
box-shadow: 12px 12px 0 var(--yp-black);
}
/* coloured shape that overlaps each photo corner */
.qui-photo-shape {
position: absolute;
width: 88px;
height: 88px;
border: 2px solid var(--yp-black);
border-radius: 999px;
z-index: 2;
}
.qui-photo .qui-photo-shape.shape-pink { background: var(--yp-pink); top: -34px; right: -28px; }
.qui-photo .qui-photo-shape.shape-yellow { background: var(--yp-yellow); top: -34px; right: -28px; }
.qui-photo .qui-photo-shape.shape-blue { background: var(--yp-blue); bottom: -34px; left: -28px; }
/* mini-tag under each photo card */
.qui-photo-tag {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
background: var(--yp-black);
color: var(--yp-white);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 0.1em;
padding: 4px 10px;
white-space: nowrap;
z-index: 3;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
/* individual photo card positions/sizes */
.qui-photo.p1 {
top: 0; left: 6%;
width: 240px; height: 300px;
transform: rotate(-6deg);
z-index: 3;
}
.qui-photo.p2 {
top: 38%; right: 8%;
width: 200px; height: 260px;
transform: rotate(5deg);
z-index: 2;
}
.qui-photo.p3 {
bottom: 0; left: 28%;
width: 220px; height: 280px;
transform: rotate(-3deg);
z-index: 4;
}
/* floating brand icons */
.qui-icon {
position: absolute;
width: 100px;
height: 100px;
object-fit: contain;
z-index: 1;
pointer-events: none;
will-change: transform;
}
.qui-icon.i1 { top: 8%; right: 18%; width: 130px; height: 130px; transform: rotate(-8deg); opacity: 0.85; }
.qui-icon.i2 { bottom: 8%; right: 30%; width: 78px; height: 78px; transform: rotate(12deg); }
.qui-icon.i3 { top: 44%; left: 0%; width: 90px; height: 90px; transform: rotate(-4deg); opacity: 0.9; }
/* "11 poneys" stamp */
.qui-stamp {
position: absolute;
bottom: -10%;
right: -2%;
width: 150px;
height: 150px;
border-radius: 50%;
background: var(--yp-black);
color: var(--yp-white);
border: 2px solid var(--yp-black);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transform: rotate(-12deg);
z-index: 5;
box-shadow: 4px 4px 0 var(--yp-pink);
}
.qui-stamp-num {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 56px;
line-height: 1;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.qui-stamp-lbl {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
@media (max-width: 980px) {
.qui-inner {
grid-template-columns: 1fr;
gap: 80px;
}
.qui-collage {
min-height: 460px;
}
}
/* Grille fondateurs 2×2 sur mobile : le collage absolu desktop déborde,
on repasse en grille régulière (3 portraits + stamp "11 poneys"). */
@media (max-width: 720px) {
.qui-collage {
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 12px; /* row-gap large pour dégager le tag bas */
perspective: none;
}
.qui-collage .qui-icon { display: none; } /* déco flottante off (chevauchait) */
.qui-collage .qui-photo,
.qui-collage .qui-stamp {
position: static;
transform: none;
inset: auto;
width: auto;
height: auto;
aspect-ratio: 1 / 1.4;
margin: 0;
}
.qui-collage .qui-photo { box-shadow: 4px 4px 0 var(--yp-black); padding: 8px; }
.qui-collage .qui-photo:hover { box-shadow: 4px 4px 0 var(--yp-black); }
.qui-photo .qui-photo-img { object-position: center top; } /* visage en haut */
.qui-photo-tag {
bottom: -10px;
transform: translateX(-50%); /* centré, sans rotation */
font-size: 9px;
padding: 4px 8px;
}
.qui-collage .qui-stamp {
border-radius: 0; /* carré : 4e cellule alignée aux portraits */
aspect-ratio: 1 / 1.4;
box-shadow: 4px 4px 0 var(--yp-pink);
gap: 6px;
}
.qui-stamp-num { font-size: clamp(48px, 14vw, 80px); }
.qui-stamp-lbl { font-size: 11px; }
}
/* ============================================================
APPROCHE HERO
============================================================ */
.approche-hero {
position: relative;
padding: 90px var(--yp-gutter) 100px;
max-width: 1480px;
margin: 0 auto;
overflow: hidden;
}
.approche-bolt {
position: absolute;
width: 540px;
height: 280px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.approche-bolt.b1 { top: -60px; right: -120px; transform: rotate(-12deg); }
.approche-bolt.b2 { bottom: -100px; left: -160px; transform: rotate(140deg); opacity: 0.08; }
.approche-h1 {
position: relative;
z-index: 2;
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.95;
font-size: clamp(40px, 5.2vw, 88px);
margin: 0;
max-width: 22ch;
text-wrap: balance;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.approche-h1 .hl-yellow {
background: var(--yp-yellow);
color: var(--yp-black);
padding: 0 0.12em;
display: inline-block;
}
.approche-h1 .hl-outline {
-webkit-text-stroke: 2px var(--yp-black);
color: transparent;
display: inline-block;
}
.approche-h1 .hl-pink-stabilo {
background: var(--yp-pink);
color: var(--yp-black);
padding: 0 0.14em;
display: inline-block;
border: 2px solid var(--yp-black);
box-shadow: 6px 6px 0 var(--yp-black);
transform: rotate(-1.5deg);
margin: 0 0.04em;
}
.approche-body {
position: relative;
z-index: 2;
margin-top: 48px;
max-width: 58ch;
display: flex;
flex-direction: column;
gap: 18px;
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.6;
color: #1A1A1A;
}
.approche-body p { margin: 0; }
.approche-body strong {
font-weight: 800;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.approche-body em {
font-style: italic;
font-family: 'Georgia', serif;
}
.approche-lead {
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(20px, 1.6vw, 26px) !important;
line-height: 1.4 !important;
color: var(--yp-black);
}
.approche-lead strong {
font-family: var(--yp-font-body);
font-style: normal;
}
.approche-aside {
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(16px, 1.1vw, 19px);
color: #4A4A4A;
padding-left: 18px;
border-left: 3px solid var(--yp-pink);
margin-top: 8px;
}
/* Floating decorative imagery */
.approche-floats {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.approche-float {
position: absolute;
object-fit: contain;
will-change: transform;
}
.approche-float.f1 {
top: 6%;
right: 4%;
width: 220px;
height: 320px;
transform: rotate(-6deg);
}
.approche-float.f2 {
bottom: 8%;
right: 16%;
width: 140px;
height: 140px;
transform: rotate(14deg);
opacity: 0.85;
}
.approche-float.f3 {
top: 38%;
right: 28%;
width: 100px;
height: 100px;
transform: rotate(-12deg);
opacity: 0.7;
}
@media (max-width: 980px) {
.approche-floats { display: none; }
}
/* ============================================================
APPROCHE — JUMP NAV (sticky anchor strip)
============================================================ */
.approche-jumpnav {
position: sticky;
top: 0;
z-index: 50;
background: #FAFAF7;
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
}
.approche-jumpnav-inner {
max-width: 1480px;
margin: 0 auto;
padding: 18px var(--yp-gutter);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 32px;
}
.approche-jumpnav-lbl {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #4A4A4A;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.approche-jumpnav-item {
display: inline-flex;
align-items: baseline;
gap: 8px;
text-decoration: none;
color: var(--yp-black);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 200ms ease, transform 200ms ease;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.approche-jumpnav-item .num {
color: var(--yp-pink);
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 16px;
letter-spacing: -0.02em;
}
.approche-jumpnav-item:hover {
color: var(--yp-pink);
transform: translateY(-1px);
}
/* ============================================================
APPROCHE — PILIER DEEP DIVE
============================================================ */
.ap-pilier {
position: relative;
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
display: grid;
grid-template-columns: 220px 1fr;
gap: 56px;
max-width: 1480px;
margin-left: auto;
margin-right: auto;
padding: 100px var(--yp-gutter) 120px;
align-items: flex-start;
}
/* Collapse the doubled black line between the sticky jumpnav and the
first pilier (both had their own 2px border). */
.ap-pilier-01 { margin-top: -2px; }
.ap-pilier-01 { background: #FAFAF7; color: var(--yp-black); }
.ap-pilier-02 {
background: var(--yp-black);
color: var(--yp-white);
margin-top: -2px;
}
.ap-pilier-03 { background: var(--yp-yellow); color: var(--yp-black); margin-top: -2px; }
.ap-pilier-rail {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.ap-pilier-num {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(120px, 13vw, 220px);
line-height: 0.82;
color: transparent;
-webkit-text-stroke: 0;
opacity: 0.22;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
/* Faded outline — visible but blended into each pilier's background. */
.ap-pilier-01 .ap-pilier-num {
-webkit-text-stroke: 2.5px var(--yp-black);
opacity: 0.22;
}
.ap-pilier-02 .ap-pilier-num {
-webkit-text-stroke: 2.5px var(--yp-yellow);
opacity: 0.35;
}
.ap-pilier-03 .ap-pilier-num {
-webkit-text-stroke: 2.5px var(--yp-black);
opacity: 0.22;
}
.ap-pilier-label {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: inherit;
opacity: 0.55;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.ap-pilier-body { max-width: 920px; }
.ap-pilier-head {
display: grid;
grid-template-columns: 140px 1fr;
gap: 32px;
align-items: center;
margin-bottom: 36px;
}
.ap-pilier-icon {
width: 140px;
height: 140px;
border-radius: 50%;
background: var(--yp-yellow);
border: 2px solid var(--yp-black);
box-shadow: 8px 8px 0 var(--yp-black);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ap-pilier-icon-pink { background: var(--yp-pink); box-shadow: 8px 8px 0 var(--yp-yellow); }
.ap-pilier-02 .ap-pilier-icon { border-color: var(--yp-white); box-shadow: 8px 8px 0 var(--yp-pink); }
.ap-pilier-icon img,
.ap-pilier-icon svg { width: 70%; height: 70%; object-fit: contain; }
.ap-pilier-title {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(48px, 5.4vw, 88px);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0 0 10px;
text-wrap: balance;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.ap-pilier-title .hl-yellow-stabilo {
background: var(--yp-yellow);
color: var(--yp-black);
padding: 0 0.12em;
display: inline-block;
}
.ap-pilier-title .hl-pink-stabilo-on-black {
background: var(--yp-pink);
color: var(--yp-black);
padding: 0 0.12em;
display: inline-block;
border: 2px solid var(--yp-white);
box-shadow: 6px 6px 0 var(--yp-white);
transform: rotate(-1.5deg);
margin: 0 0.04em;
}
.ap-pilier-sub {
margin: 0;
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(18px, 1.5vw, 24px);
opacity: 0.75;
}
.ap-pilier-pitch {
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(22px, 2vw, 32px);
line-height: 1.35;
margin: 0 0 40px;
max-width: 32ch;
border-left: 4px solid var(--yp-pink);
padding-left: 22px;
}
.ap-pilier-02 .ap-pilier-pitch { border-left-color: var(--yp-yellow); }
.ap-pilier-content {
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.65;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 64ch;
}
.ap-pilier-02 .ap-pilier-content { color: #DADADA; }
.ap-pilier-content p { margin: 0; }
.ap-pilier-content strong { font-weight: 800; font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0; }
.ap-pilier-02 .ap-pilier-content strong { color: var(--yp-white); }
.ap-pilier-content em { font-style: italic; }
.ap-pilier-callout {
margin: 48px 0;
padding: 28px 32px;
background: var(--yp-white);
border: 2px solid var(--yp-black);
border-left: 8px solid var(--yp-pink);
max-width: 64ch;
}
.ap-pilier-callout-dark {
background: #161616;
border-color: var(--yp-yellow);
border-left-color: var(--yp-yellow);
color: var(--yp-white);
}
.ap-pilier-callout-tag {
display: inline-block;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--yp-pink);
margin-bottom: 10px;
}
.ap-pilier-callout-dark .ap-pilier-callout-tag { color: var(--yp-yellow); }
.ap-pilier-callout p {
margin: 0;
font-family: var(--yp-font-display);
font-weight: 800;
font-size: clamp(20px, 1.8vw, 28px);
line-height: 1.25;
text-transform: uppercase;
letter-spacing: -0.02em;
}
.ap-pilier-callout p em {
background: var(--yp-yellow);
color: var(--yp-black);
font-style: normal;
padding: 0 0.1em;
}
.ap-pilier-section { margin-top: 56px; }
.ap-pilier-h3 {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 2px solid currentColor;
display: inline-flex;
gap: 12px;
align-items: center;
}
.ap-pilier-h3::before {
content: '↘';
font-family: var(--yp-font-display);
font-size: 18px;
color: var(--yp-pink);
}
.ap-pilier-02 .ap-pilier-h3::before { color: var(--yp-yellow); }
.ap-presta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.ap-presta-card {
position: relative;
padding: 28px 28px 32px;
background: var(--yp-white);
border: 2px solid var(--yp-black);
transition: box-shadow .25s ease, transform .25s ease;
}
.ap-presta-card:hover { box-shadow: 6px 6px 0 var(--yp-pink); transform: translate(-2px, -2px); }
.ap-presta-card-dark {
background: #161616;
border-color: var(--yp-white);
color: var(--yp-white);
}
.ap-presta-card-dark:hover { box-shadow: 6px 6px 0 var(--yp-yellow); }
.ap-presta-card-num {
display: inline-block;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 14px;
color: var(--yp-pink);
margin-bottom: 12px;
}
.ap-presta-card-dark .ap-presta-card-num { color: var(--yp-yellow); }
.ap-presta-card h4 {
font-family: var(--yp-font-display);
font-weight: 800;
font-size: clamp(20px, 1.6vw, 26px);
line-height: 1.15;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0 0 10px;
}
.ap-presta-card p {
margin: 0;
font-family: var(--yp-font-body);
font-size: 15px;
line-height: 1.55;
opacity: 0.85;
}
.ap-kpi-block { margin-top: 56px; }
.ap-kpi-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 24px;
}
.ap-kpi-list li {
position: relative;
padding: 14px 18px;
background: rgba(255, 235, 0, 0.18);
border: 2px solid var(--yp-black);
font-family: var(--yp-font-body);
font-size: 15px;
line-height: 1.4;
}
.ap-kpi-list li span {
display: inline-block;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 18px;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-right: 6px;
}
.ap-kpi-block-dark .ap-kpi-list li {
background: rgba(255, 235, 0, 0.12);
border-color: var(--yp-yellow);
color: var(--yp-white);
}
.ap-kpi-block-dark .ap-kpi-list li span { color: var(--yp-yellow); }
@media (max-width: 1024px) {
.ap-pilier { grid-template-columns: 1fr; gap: 24px; padding: 64px var(--yp-gutter) 80px; }
.ap-pilier-rail { position: static; flex-direction: row; align-items: center; gap: 18px; }
.ap-pilier-num { font-size: 100px; }
.ap-pilier-head { grid-template-columns: 1fr; gap: 24px; }
.ap-pilier-icon { width: 100px; height: 100px; }
.ap-presta-grid { grid-template-columns: 1fr; }
.ap-kpi-list { grid-template-columns: 1fr; }
}
/* ============================================================
APPROCHE — METTEZ-NOUS À L'ÉPREUVE
============================================================ */
.ap-epreuve {
background: var(--yp-pink);
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
padding: 100px 0 120px;
margin-top: -2px;
}
.ap-epreuve-inner {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
}
.ap-epreuve-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--yp-black);
margin-bottom: 22px;
}
.ap-epreuve-title {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(56px, 7.4vw, 132px);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0 0 40px;
color: var(--yp-black);
text-wrap: balance;
}
.ap-epreuve-title .hl-pink-stabilo {
background: var(--yp-yellow);
color: var(--yp-black);
padding: 0 0.12em;
display: inline-block;
border: 2px solid var(--yp-black);
box-shadow: 8px 8px 0 var(--yp-black);
transform: rotate(-2deg);
margin: 0 0.04em;
}
.ap-epreuve-content {
max-width: 62ch;
display: flex;
flex-direction: column;
gap: 16px;
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.6;
color: #1A1A1A;
margin-bottom: 56px;
}
.ap-epreuve-content p { margin: 0; }
.ap-epreuve-content strong { font-weight: 800; }
.ap-epreuve-content em { font-style: italic; font-family: 'Georgia', serif; }
.ap-epreuve-lead {
font-family: 'Georgia', serif !important;
font-style: italic;
font-size: clamp(20px, 1.6vw, 26px) !important;
line-height: 1.4 !important;
color: var(--yp-black);
}
.ap-epreuve-lead strong {
font-family: var(--yp-font-body) !important;
font-style: normal;
}
.ap-epreuve-formats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ap-epreuve-card {
padding: 32px 28px 34px;
background: var(--yp-white);
border: 2px solid var(--yp-black);
display: flex;
flex-direction: column;
gap: 12px;
transition: transform .25s ease, box-shadow .25s ease;
}
.ap-epreuve-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--yp-black); }
.ap-epreuve-card-featured {
background: var(--yp-black);
color: var(--yp-white);
}
.ap-epreuve-card-featured:hover { box-shadow: 8px 8px 0 var(--yp-yellow); }
.ap-epreuve-card-tag {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--yp-pink);
}
.ap-epreuve-card-featured .ap-epreuve-card-tag { color: var(--yp-yellow); }
.ap-epreuve-card h3 {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(24px, 2vw, 32px);
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0;
}
.ap-epreuve-card-desc {
margin: 0;
font-family: var(--yp-font-body);
font-size: 15px;
line-height: 1.55;
opacity: 0.92;
flex-grow: 1;
}
.ap-epreuve-card-meta {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid rgba(0,0,0,.18);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ap-epreuve-card-featured .ap-epreuve-card-meta { border-top-color: rgba(255,255,255,.18); }
.ap-epreuve-card-meta .dot { opacity: 0.5; }
@media (max-width: 1024px) {
.ap-epreuve-formats { grid-template-columns: 1fr; }
}
.piliers {
position: relative;
background: var(--yp-black);
color: var(--yp-white);
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
padding: 120px 0 140px;
overflow: hidden;
}
.piliers-bolt {
position: absolute;
top: 8%;
right: -120px;
width: 540px; height: 320px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.15;
transform: rotate(20deg);
pointer-events: none;
z-index: 1;
}
.piliers-intro {
position: relative;
z-index: 2;
max-width: 1480px;
margin: 0 auto 80px;
padding: 0 var(--yp-gutter);
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 56px;
align-items: end;
}
.piliers-h2 {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(56px, 6.5vw, 120px);
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0;
color: var(--yp-white);
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.piliers-h2-hl {
background: var(--yp-yellow);
color: var(--yp-black);
padding: 0 0.12em;
display: inline-block;
}
.piliers-h2-outline {
-webkit-text-stroke: 2px var(--yp-white);
color: transparent;
}
.piliers-lead {
margin: 0;
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(18px, 1.5vw, 24px);
line-height: 1.5;
max-width: 42ch;
color: #DADADA;
padding-bottom: 8px;
}
.piliers-lead strong {
font-family: var(--yp-font-body);
font-style: normal;
font-weight: 800;
color: var(--yp-white);
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.piliers-stack {
position: relative;
z-index: 2;
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
display: flex;
flex-direction: column;
gap: 24px;
}
/* Single pilier card */
.pilier {
position: relative;
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
gap: 56px;
align-items: center;
background: #0E0E0E;
border: 2px solid var(--yp-yellow);
padding: 56px 56px 64px;
overflow: hidden;
transition: border-color .25s ease, transform .25s ease;
}
.pilier:hover {
border-color: var(--yp-pink);
}
.pilier-flip { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
.pilier-flip .pilier-visual { order: 2; }
.pilier-flip .pilier-content { order: 1; }
/* Visual side: big number + XL icon + deco */
.pilier-visual {
position: relative;
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
}
.pilier-num {
position: absolute;
top: -32px;
left: -16px;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(140px, 13vw, 220px);
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 2px #2A2A2A;
z-index: 1;
pointer-events: none;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.pilier-flip .pilier-num { left: auto; right: -16px; }
.pilier-icon {
position: relative;
z-index: 2;
width: 260px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
background: var(--yp-yellow);
border: 2px solid var(--yp-white);
border-radius: 50%;
box-shadow: 10px 10px 0 var(--yp-white);
transition: transform .4s var(--yp-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.pilier:hover .pilier-icon {
transform: rotate(-6deg) scale(1.04);
}
.pilier-icon img,
.pilier-icon svg {
width: 72%;
height: 72%;
object-fit: contain;
display: block;
}
.pilier-icon.icon-strat { background: var(--yp-yellow); }
.pilier-icon.icon-product { background: var(--yp-pink); }
.pilier-icon.icon-growth { background: var(--yp-yellow); }
.pilier-deco {
position: absolute;
width: 80px;
height: 80px;
z-index: 3;
pointer-events: none;
animation: pilier-deco-spin 12s linear infinite;
}
.pilier-deco img { width: 100%; height: 100%; object-fit: contain; }
.pilier-visual .pilier-deco.deco-burst { top: 10%; right: 10%; }
.pilier-visual .pilier-deco.deco-burst-pink { top: 10%; right: 10%; width: 90px; height: 90px; }
@keyframes pilier-deco-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Content side */
.pilier-content { color: var(--yp-white); }
.pilier-kicker {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--yp-yellow);
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.pilier-kicker::before {
content: '';
width: 24px; height: 2px;
background: var(--yp-yellow);
display: inline-block;
}
.pilier-title {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(40px, 4.4vw, 76px);
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0 0 24px;
color: var(--yp-white);
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.pilier-title-2 {
background: var(--yp-yellow);
color: var(--yp-black);
padding: 0 0.18em 0.04em;
display: inline-block;
}
.pilier-flip .pilier-title-2 {
background: var(--yp-pink);
}
.pilier-subhead {
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(18px, 1.4vw, 24px);
line-height: 1.3;
color: #C8C8C8;
margin: -10px 0 22px;
}
.pilier-desc {
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.1vw, 19px);
line-height: 1.55;
color: #C8C8C8;
margin: 0 0 32px;
max-width: 60ch;
}
.pilier-desc strong {
color: var(--yp-white);
font-weight: 800;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.pilier-desc em { font-style: italic; }
.pilier-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.pilier-sub {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8A8A8A;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid #2A2A2A;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.pilier-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pilier-list li {
position: relative;
padding-left: 22px;
font-family: var(--yp-font-body);
font-size: 15px;
line-height: 1.5;
color: #E5E5E5;
}
.pilier-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 10px;
height: 2px;
background: var(--yp-pink);
}
.pilier-list-kpi li::before { background: var(--yp-yellow); }
/* Responsive */
@media (max-width: 1024px) {
.piliers-intro {
grid-template-columns: 1fr;
gap: 28px;
}
.pilier, .pilier-flip {
grid-template-columns: 1fr;
gap: 36px;
padding: 40px 32px 48px;
}
.pilier-flip .pilier-visual { order: 0; }
.pilier-flip .pilier-content { order: 0; }
.pilier-visual { min-height: 280px; }
.pilier-icon { width: 200px; height: 200px; box-shadow: 8px 8px 0 var(--yp-white); }
.pilier-num { font-size: 120px; top: -16px; }
.pilier-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* ============================================================
CLIENT MARQUEE (small ticker between sections)
============================================================ */
.yps-clients {
background: var(--yp-white);
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
padding: 20px 0;
overflow: hidden;
position: relative;
}
.yps-clients-viewport {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 6px;
}
.yps-clients-track {
display: inline-flex;
white-space: nowrap;
animation: yps-marquee 80s linear infinite;
}
.yps-clients-track.is-reverse {
animation-direction: reverse;
}
.yps-clients[data-lines="2"] .yps-clients-viewport {
padding: 4px 0;
gap: 10px;
}
.yps-clients:hover .yps-clients-track,
.yps-clients-track:hover {
animation-play-state: paused;
}
.yps-clients.is-scrubbing .yps-clients-track,
.yps-clients.is-scrubbing:hover .yps-clients-track {
animation-play-state: running !important;
animation-duration: 14s !important;
}
.yps-clients[data-dir="reverse"] .yps-clients-track {
animation-direction: reverse;
}
/* Side arrow indicators — visible on section hover, hint at drag-scrub.
Non-interactive so the cursor still scrubs underneath. */
.yps-clients-hint {
position: absolute;
top: 0;
bottom: 0;
width: 96px;
z-index: 4;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 38px;
line-height: 1;
color: var(--yp-black);
opacity: 0;
transition: opacity .25s ease;
}
.yps-clients:hover .yps-clients-hint { opacity: 1; }
.yps-clients-hint.left {
left: 0;
justify-content: flex-start;
padding-left: 18px;
background: linear-gradient(to right, var(--yp-white) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
animation: yps-hint-pulse-left 1.4s ease-in-out infinite;
}
.yps-clients-hint.right {
right: 0;
justify-content: flex-end;
padding-right: 18px;
background: linear-gradient(to left, var(--yp-white) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
animation: yps-hint-pulse-right 1.4s ease-in-out infinite;
}
.yps-clients.is-scrubbing .yps-clients-hint { opacity: 0.35; }
@keyframes yps-hint-pulse-left {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-6px); }
}
@keyframes yps-hint-pulse-right {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.yps-clients-track span {
display: inline-block;
padding: 0 40px;
font-family: var(--yp-font-display);
font-weight: 800;
font-size: 28px;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--yp-black);
}
.yps-clients-track span.sep {
color: var(--yp-pink);
font-size: 36px;
padding: 0 12px;
}
.yps-clients-track .client-logo {
display: inline-flex;
align-items: center;
padding: 0 32px;
height: 38px;
}
.yps-clients-track .client-logo img {
height: 100%;
width: auto;
display: block;
object-fit: contain;
}
/* ============================================================
MANIFESTE FANZINE (yellow background)
============================================================ */
.fanzine {
background: var(--yp-yellow);
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
position: relative;
padding: 80px 0;
overflow: hidden;
}
.fanzine.fanzine-pink {
background: var(--yp-pink);
}
.fanzine.fanzine-pink .fanzine-bolt {
filter: invert(1) hue-rotate(180deg);
opacity: 0.10;
}
.fanzine.fanzine-pink h2 .outline {
-webkit-text-stroke: 2px var(--yp-black);
color: transparent;
}
.fanzine-inner {
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
position: relative;
z-index: 2;
}
.fanzine-page:empty { border: 0; }
.fanzine-page {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
align-self: start;
padding-top: 6px;
border-right: 2px solid var(--yp-black);
padding-right: 8px;
margin-right: 8px;
}
.fanzine-content {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.fanzine h2 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.92;
font-size: clamp(48px, 7vw, 112px);
margin: 0;
max-width: 18ch;
}
.fanzine h2 .outline {
-webkit-text-stroke: 3px var(--yp-black);
color: transparent;
display: inline-block;
}
.fanzine-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 16px;
}
.fanzine-col p {
font-family: var(--yp-font-body);
font-size: 17px;
line-height: 1.55;
font-weight: 500;
max-width: 44ch;
}
.fanzine-col p strong { font-weight: 900; }
.fanzine-bolt {
position: absolute;
width: 900px;
height: 480px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: grayscale(100%) brightness(0) saturate(100%);
opacity: 0.08;
pointer-events: none;
z-index: 1;
}
.fanzine-bolt.b1 { top: -120px; right: -200px; transform: rotate(8deg); }
.fanzine-bolt.b2 { bottom: -180px; left: -240px; transform: rotate(-160deg); }
/* ============================================================
EDITORIAL CASE ROWS (Accueil — 3 projets en lignes)
============================================================ */
.cases {
padding: 80px 0;
background: #FAFAF7;
}
.cases-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 32px;
padding: 0 var(--yp-gutter);
max-width: 1480px;
margin: 0 auto 64px;
}
.cases-heading-text { max-width: 70ch; }
.cases-heading h2 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
font-size: clamp(48px, 5.6vw, 100px);
line-height: 0.95;
margin: 0 0 22px;
max-width: 22ch;
text-wrap: balance;
}
.cases-heading h2 .hl { background: var(--yp-yellow); padding: 0 0.08em; }
.cases-h2-sub {
display: inline-block;
font-family: 'Georgia', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 1.7vw, 30px);
letter-spacing: 0;
text-transform: none;
color: #4A4A4A;
margin-top: 6px;
line-height: 1.2;
}
.cases-lead {
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.55;
color: #2A2A2A;
margin: 0;
max-width: 56ch;
}
.cases-lead strong {
font-weight: 800;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.cases-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 12px;
margin-bottom: 16px;
}
.case-row {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 48px;
align-items: center;
padding-top: 48px;
padding-bottom: 48px;
border-top: 2px solid var(--yp-black);
}
.case-row:last-of-type { border-bottom: 2px solid var(--yp-black); }
.case-info { display: flex; flex-direction: column; gap: 16px; }
.case-meta {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--yp-font-body);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
}
.case-meta .num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
background: var(--yp-yellow);
border: 2px solid var(--yp-black);
}
.case-title {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.9;
font-size: clamp(48px, 5.5vw, 88px);
}
.case-sub {
font-family: 'Georgia', serif;
font-style: italic;
font-size: 17px;
color: #333;
}
.case-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.tag {
display: inline-flex;
align-items: center;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 6px 12px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
color: var(--yp-black);
}
.tag.tag-yellow { background: var(--yp-yellow); }
.tag.tag-pink { background: var(--yp-pink); }
.tag.tag-black { background: var(--yp-black); color: var(--yp-white); }
.kpi-block {
display: inline-flex;
flex-direction: column;
background: var(--yp-white);
color: var(--yp-black);
padding: 14px 22px;
border: 2px solid var(--yp-black);
box-shadow: 6px 6px 0 var(--yp-pink);
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-top: 8px;
align-self: flex-start;
transition: box-shadow .25s ease, transform .15s ease;
}
.kpi-block:hover { box-shadow: 10px 10px 0 var(--yp-pink); transform: translate(-3px,-3px); }
.kpi-block .kpi-value {
font-size: 32px;
line-height: 1;
}
.kpi-block .kpi-label {
font-family: var(--yp-font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
margin-top: 6px;
color: #555;
}
.kpi-block.kpi-yellow { box-shadow: 6px 6px 0 var(--yp-yellow); }
.kpi-block.kpi-yellow:hover { box-shadow: 10px 10px 0 var(--yp-yellow); }
.kpi-block.kpi-black { box-shadow: 6px 6px 0 var(--yp-black); }
.kpi-block.kpi-black:hover { box-shadow: 10px 10px 0 var(--yp-black); }
.case-cta {
margin-top: 12px;
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
padding: 10px 22px;
font-family: var(--yp-font-body);
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.15em;
text-decoration: none;
color: var(--yp-black);
align-self: flex-start;
transition: box-shadow .25s ease, transform .15s ease;
cursor: pointer;
}
.case-cta:hover {
box-shadow: var(--yp-shadow-pink);
transform: translate(-3px,-3px);
}
.case-image {
position: relative;
aspect-ratio: 4 / 3;
background: #F0EFE8;
border: 2px solid var(--yp-black);
box-shadow: 10px 10px 0 var(--yp-pink);
transition: box-shadow .3s ease, transform .3s ease;
overflow: hidden;
}
.case-image .case-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.case-image:hover .case-img { transform: scale(1.03); }
.case-image:hover {
box-shadow: 16px 16px 0 var(--yp-pink);
transform: translate(-4px, -4px);
}
.case-row.flip { grid-template-columns: 1.3fr 1fr; }
.case-row.flip .case-image { order: -1; box-shadow: 10px 10px 0 var(--yp-yellow); }
.case-row.flip .case-image:hover { box-shadow: 16px 16px 0 var(--yp-yellow); }
/* ============================================================
MÉTHODO — 4 cards numbered
============================================================ */
.methodo {
padding: 80px var(--yp-gutter);
background: #FAFAF7;
border-top: 2px solid var(--yp-black);
}
.methodo-inner { max-width: 1440px; margin: 0 auto; }
.methodo-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 48px; }
.methodo-heading h2 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
font-size: clamp(40px, 5.5vw, 80px);
line-height: 0.92;
margin: 0;
max-width: 16ch;
}
.methodo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.methodo-card {
background: var(--yp-white);
border: 2px solid var(--yp-black);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 280px;
position: relative;
transition: box-shadow .25s ease, transform .15s ease;
cursor: default;
overflow: hidden;
}
.methodo-card:hover {
box-shadow: var(--yp-shadow-yellow-lg);
transform: translate(-4px, -4px);
}
.methodo-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.methodo-card-icon {
width: 64px;
height: 64px;
object-fit: contain;
display: block;
transition: transform .25s ease;
}
.methodo-card:hover .methodo-card-icon { transform: rotate(-8deg) scale(1.08); }
.methodo-card .badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
background: var(--yp-yellow);
border: 2px solid var(--yp-black);
border-radius: 50%;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 24px;
color: var(--yp-black);
}
.methodo-card h3 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.02em;
font-size: 28px;
line-height: 1;
margin: 0;
}
.methodo-card .step-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #666;
}
.methodo-card p {
font-family: var(--yp-font-body);
font-size: 14px;
line-height: 1.55;
color: #222;
margin: 0;
}
.methodo-card .bullets {
list-style: none;
padding: 0;
margin: auto 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.methodo-card .bullets li {
font-family: var(--yp-font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding-left: 14px;
position: relative;
}
.methodo-card .bullets li::before {
content: '→';
position: absolute;
left: 0;
color: var(--yp-pink);
font-weight: 900;
}
/* ============================================================
BIG BLACK CTA
============================================================ */
.cta-black {
background: var(--yp-black);
color: var(--yp-white);
padding: 120px var(--yp-gutter);
text-align: center;
border-top: 3px solid var(--yp-yellow);
position: relative;
overflow: hidden;
}
.cta-black h2 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.92;
font-size: clamp(56px, 8vw, 130px);
margin: 0 auto;
max-width: 14ch;
position: relative;
z-index: 2;
}
.cta-black h2 .hl-yellow {
background: var(--yp-yellow);
color: var(--yp-black);
padding: 0 0.1em;
display: inline-block;
}
.cta-black .sub {
margin-top: 24px;
font-family: 'Georgia', serif;
font-style: italic;
font-size: 20px;
color: #DDDDD8;
position: relative;
z-index: 2;
}
.cta-black .btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 40px;
padding: 22px 36px;
background: var(--yp-yellow);
color: var(--yp-black);
border: 2px solid var(--yp-yellow);
font-family: var(--yp-font-body);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 16px;
text-decoration: none;
cursor: pointer;
transition: box-shadow .25s ease, transform .15s ease;
position: relative;
z-index: 2;
}
.cta-black .btn:hover {
box-shadow: 10px 10px 0 var(--yp-pink);
transform: translate(-4px,-4px);
}
.cta-black .moon { color: var(--yp-pink); }
.cta-black .bolt-bg {
position: absolute;
width: 900px;
height: 480px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: brightness(0) saturate(100%) invert(89%) sepia(89%) saturate(2476%) hue-rotate(359deg) brightness(108%) contrast(108%);
opacity: 0.10;
z-index: 1;
}
.cta-black .bolt-bg.b1 { top: -120px; left: -160px; transform: rotate(-12deg); }
.cta-black .bolt-bg.b2 { bottom: -160px; right: -140px; transform: rotate(180deg); }
/* ============================================================
EQUIPE — manifeste + founders + stable
============================================================ */
.equipe-hero {
padding: 80px var(--yp-gutter) 60px;
max-width: 1440px;
margin: 0 auto;
}
.equipe-hero .eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
margin-bottom: 20px;
}
.equipe-hero h1 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.92;
font-size: clamp(48px, 6.4vw, 108px);
margin: 0;
max-width: 14ch;
}
.equipe-hero h1 .hl { background: var(--yp-yellow); padding: 0 0.08em; }
.equipe-hero .sub {
margin-top: 28px;
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(22px, 2vw, 32px);
line-height: 1.35;
max-width: 38ch;
color: #222;
}
.equipe-hero .sub strong { font-family: var(--yp-font-body); font-style: normal; font-weight: 800; }
.equipe-hero .sub .hl-pink-stabilo {
font-family: var(--yp-font-body);
font-style: normal;
font-weight: 800;
background: var(--yp-pink);
color: var(--yp-black);
padding: 0 0.12em;
box-shadow: 4px 4px 0 var(--yp-black);
display: inline-block;
transform: rotate(-1.5deg);
margin: 0 0.04em;
border: 2px solid var(--yp-black);
line-height: 1.05;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.founder-row {
max-width: 1440px;
margin: 0 auto;
padding: 80px var(--yp-gutter);
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 64px;
align-items: center;
border-top: 2px solid var(--yp-black);
}
.founder-row.flip { grid-template-columns: 1.3fr 1fr; }
.founder-row.flip .founder-image { order: -1; }
.founder-image {
aspect-ratio: 3 / 4;
background: #F0EFE8;
border: 2px solid var(--yp-black);
box-shadow: 12px 12px 0 var(--yp-pink);
position: relative;
overflow: hidden;
}
.founder-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
display: block;
filter: grayscale(1) contrast(1.05);
transition: transform .5s ease, filter .3s ease;
}
.founder-row:hover .founder-photo {
transform: scale(1.03);
filter: grayscale(0.7) contrast(1.08);
}
.founder-row:nth-of-type(even) .founder-image { box-shadow: 12px 12px 0 var(--yp-yellow); }
.founder-info .num {
font-family: var(--yp-font-body);
font-weight: 800;
letter-spacing: 0.2em;
font-size: 12px;
text-transform: uppercase;
color: #666;
margin-bottom: 12px;
}
.founder-info h3 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.9;
font-size: clamp(48px, 6vw, 96px);
margin: 0;
}
.founder-info .role {
display: inline-block;
background: var(--yp-yellow);
border: 2px solid var(--yp-black);
padding: 6px 14px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 16px 0;
}
.founder-info p {
font-family: var(--yp-font-body);
font-size: 15px;
line-height: 1.6;
color: #222;
max-width: 55ch;
margin: 0 0 12px;
}
.founder-info .echange {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 16px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
padding: 12px 22px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--yp-black);
cursor: pointer;
transition: box-shadow .25s ease, transform .15s ease;
}
.founder-info .echange:hover {
box-shadow: var(--yp-shadow-yellow);
transform: translate(-3px,-3px);
}
.stable-section {
padding: 80px var(--yp-gutter);
max-width: 1440px;
margin: 0 auto;
border-top: 2px solid var(--yp-black);
}
.stable-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 32px;
margin-bottom: 56px;
}
.stable-heading-text { max-width: 80ch; }
.stable-heading .eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
margin-bottom: 12px;
}
.stable-heading h2 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.95;
font-size: clamp(40px, 4.6vw, 80px);
margin: 0 0 24px;
text-wrap: balance;
max-width: 22ch;
}
.stable-heading h2 .hl {
background: var(--yp-yellow);
padding: 0 0.08em;
display: inline-block;
}
.stable-heading h2 .hl-pink-stabilo-sm {
font-family: var(--yp-font-display);
background: var(--yp-pink);
color: var(--yp-black);
padding: 0 0.14em;
display: inline-block;
border: 2px solid var(--yp-black);
box-shadow: 4px 4px 0 var(--yp-black);
transform: rotate(-1.5deg);
margin: 0 0.04em;
}
.stable-lead {
font-family: var(--yp-font-body);
font-size: clamp(15px, 1.05vw, 18px);
line-height: 1.55;
color: #2A2A2A;
margin: 0 0 14px;
max-width: 70ch;
}
.stable-lead strong {
font-weight: 800;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.stable-lead-quote {
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(16px, 1.15vw, 19px);
color: #4A4A4A;
padding-left: 16px;
border-left: 3px solid var(--yp-pink);
}
.stable-lead-quote em {
color: var(--yp-black);
font-weight: 800;
font-family: var(--yp-font-body);
font-style: normal;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-right: 6px;
}
.stable-heading .count {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--yp-pink);
border: 2px solid var(--yp-black);
padding: 8px 14px;
}
.stable-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stable-card {
background: var(--yp-white);
border: 2px solid var(--yp-black);
transition: box-shadow .25s ease, transform .15s ease;
cursor: default;
}
.stable-card:hover {
box-shadow: 10px 10px 0 var(--yp-yellow);
transform: translate(-4px,-4px);
}
.stable-card .photo {
aspect-ratio: 1 / 1;
background: #F0EFE8;
border-bottom: 2px solid var(--yp-black);
position: relative;
}
.stable-card .info { padding: 14px 16px 18px; }
.stable-card .info .name {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 20px;
letter-spacing: -0.02em;
margin: 0;
}
.stable-card .info .role {
font-family: var(--yp-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--yp-pink);
margin-top: 4px;
}
.stable-card.hiring {
border: 2px dashed var(--yp-black);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.stable-card.hiring:hover {
background: var(--yp-yellow);
box-shadow: none;
transform: translate(0,0);
}
.stable-card.hiring .plus {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 48px;
line-height: 1;
color: var(--yp-black);
margin-bottom: 8px;
}
.stable-card.hiring p {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0;
}
/* ============================================================
PROJETS — strates magazine
============================================================ */
.strate {
min-height: 560px;
display: grid;
grid-template-columns: 1.4fr 1fr;
border-bottom: 2px solid var(--yp-black);
position: relative;
}
/* ============================================================
PAGE PROJETS — Stack scroll animation (vanilla, no GSAP)
Structure : .strate-stack > .strate-wrap > .strate
- .strate-wrap : sticky 100vh, overflow:hidden, z-index croissant (inline)
- .strate : l'inner qui rote autour de bottom-left (30 → 0)
Le JS de projets.astro applique transform sur .strate au scroll.
============================================================ */
.strate-stack {
position: relative;
/* Pas d'overflow:hidden ici sinon sticky cassé */
}
.strate-stack .strate-wrap {
position: sticky;
top: 0;
min-height: 100vh;
height: 100vh;
overflow: hidden;
display: block;
}
.strate-stack .strate-wrap .strate {
/* L'inner remplit son wrapper et rote autour de bottom-left */
width: 100%;
height: 100%;
min-height: 100%;
transform-origin: bottom left;
will-change: transform;
/* La grille existante (1.4fr/1fr ou flip) reste */
}
.strate-stack .strate-image {
min-height: 100%;
}
.strate-stack .strate-info {
min-height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.strate-stack .strate-wrap {
position: relative;
top: auto;
min-height: 560px;
height: auto;
overflow: visible;
}
.strate-stack .strate-wrap .strate {
height: auto;
transform: none !important;
}
}
@media (max-width: 900px) {
/* Sur mobile, on désactive le sticky-stack — pas de place pour 16×100vh */
.strate-stack .strate-wrap {
position: relative;
top: auto;
min-height: auto;
height: auto;
overflow: visible;
}
.strate-stack .strate-wrap .strate {
height: auto;
transform: none !important;
}
}
.strate.flip { grid-template-columns: 1fr 1.4fr; }
.strate.flip .strate-image { order: 2; }
.strate.flip .strate-info { order: 1; }
.strate-image {
position: relative;
border-right: 2px solid var(--yp-black);
min-height: 560px;
}
.strate.flip .strate-image { border-right: none; border-left: 2px solid var(--yp-black); }
.strate-image-frame {
position: absolute;
inset: 48px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 8px 8px 0 var(--yp-black);
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.strate-image-frame img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
.strate:hover .strate-image-frame {
transform: translate(-4px, -4px);
box-shadow: 12px 12px 0 var(--yp-pink);
}
.strate.bg-black .strate-image-frame {
border-color: var(--yp-yellow);
background: var(--yp-black);
box-shadow: 8px 8px 0 var(--yp-yellow);
}
.strate.bg-black:hover .strate-image-frame {
box-shadow: 12px 12px 0 var(--yp-yellow);
}
.strate.bg-yellow .strate-image-frame:hover,
.strate.bg-paper .strate-image-frame:hover { box-shadow: 12px 12px 0 var(--yp-black); }
@media (max-width: 900px) {
.strate-image-frame { inset: 24px; box-shadow: 5px 5px 0 var(--yp-black); }
.strate.bg-black .strate-image-frame { box-shadow: 5px 5px 0 var(--yp-yellow); }
}
.strate.bg-yellow { background: var(--yp-yellow); }
.strate.bg-paper { background: #FAFAF7; }
.strate.bg-gray { background: #ECEBE3; }
.strate.bg-black { background: var(--yp-black); color: var(--yp-white); }
.strate.bg-black .strate-info { color: var(--yp-white); }
.strate-info {
padding: 80px 64px;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
}
.strate-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 14px;
}
.strate-eyebrow .num {
display: inline-flex;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 16px;
letter-spacing: 0.1em;
}
.strate-eyebrow .dot {
display: inline-block;
width: 6px; height: 6px;
background: currentColor;
}
.strate-title {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.9;
font-size: clamp(48px, 6vw, 96px);
margin: 0;
}
.strate-summary {
font-family: var(--yp-font-body);
font-size: 17px;
line-height: 1.55;
max-width: 50ch;
margin: 0;
color: inherit;
opacity: 0.92;
}
.strate.bg-black .strate-summary { color: #DDD; }
.strate-kpi {
display: inline-flex;
flex-direction: column;
margin-top: 4px;
align-self: flex-start;
padding: 14px 20px;
font-family: var(--yp-font-display);
font-weight: 900;
letter-spacing: -0.02em;
border: 2px solid var(--yp-black);
}
.strate-kpi .v { font-size: 32px; line-height: 1; }
.strate-kpi .l { font-family: var(--yp-font-body); font-size: 10px; letter-spacing: 0.18em; font-weight: 700; margin-top: 6px; text-transform: uppercase; }
.strate.bg-paper .strate-kpi { background: var(--yp-yellow); color: var(--yp-black); }
.strate.bg-yellow .strate-kpi { background: var(--yp-pink); color: var(--yp-black); }
.strate.bg-gray .strate-kpi { background: var(--yp-black); color: var(--yp-yellow); }
.strate.bg-gray .strate-kpi .l { color: var(--yp-white); }
.strate.bg-black .strate-kpi { background: var(--yp-yellow); color: var(--yp-black); border-color: var(--yp-yellow); }
.strate-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.strate-tag {
display: inline-flex;
align-items: center;
font-family: var(--yp-font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 5px 10px;
border: 1.5px solid currentColor;
}
.strate-link {
margin-top: 8px;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: inherit;
padding: 12px 22px;
border: 2px solid currentColor;
cursor: pointer;
transition: transform .15s ease;
}
.strate-link:hover { transform: translateX(4px); }
.strate.bg-yellow .strate-link:hover { background: var(--yp-black); color: var(--yp-yellow); border-color: var(--yp-black); }
.strate.bg-black .strate-link:hover { background: var(--yp-yellow); color: var(--yp-black); border-color: var(--yp-yellow); }
/* Projets page hero */
.projets-hero {
padding: 80px var(--yp-gutter) 60px;
max-width: 1440px;
margin: 0 auto;
}
.projets-hero h1 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.95;
font-size: clamp(48px, 5.6vw, 100px);
margin: 0;
max-width: 20ch;
text-wrap: balance;
}
.projets-hero h1 .hl { background: var(--yp-yellow); padding: 0 0.08em; }
.projets-h1-sub {
display: inline-block;
font-family: 'Georgia', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 1.7vw, 30px);
letter-spacing: 0;
text-transform: none;
color: #4A4A4A;
margin-top: 6px;
line-height: 1.2;
}
.projets-lead {
margin: 28px 0 0;
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.55;
color: #2A2A2A;
max-width: 64ch;
}
.projets-lead strong {
font-weight: 800;
font-variation-settings: "wght" 800, "opsz" 8, "slnt" 0;
}
.projets-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
padding-bottom: 24px;
border-bottom: 2px solid var(--yp-black);
}
.projets-filter {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 10px 18px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
color: var(--yp-black);
border-radius: 999px;
cursor: pointer;
transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.projets-filter.is-active { background: var(--yp-black); color: var(--yp-yellow); }
.projets-filter:hover {
background: var(--yp-yellow);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--yp-black);
}
.projets-filter.is-active:hover { background: var(--yp-pink); color: var(--yp-black); }
/* ============================================================
CAS CLIENT — page template (bento grid, JSON-driven)
============================================================ */
.cas-loading {
padding: 120px var(--yp-gutter);
text-align: center;
font-family: var(--yp-font-body);
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #999;
}
.cas-hero {
background: #FAFAF7;
padding: 60px 0 80px;
border-bottom: 2px solid var(--yp-black);
}
.cas-hero-inner {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
}
.cas-back {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--yp-black);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 16px;
border: 2px solid var(--yp-black);
border-radius: 999px;
margin-bottom: 36px;
transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.cas-back:hover {
background: var(--yp-yellow);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--yp-black);
}
.cas-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 24px;
color: #2A2A2A;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.cas-meta-tag {
background: var(--yp-black);
color: var(--yp-yellow);
padding: 6px 12px;
}
.cas-meta-sep { opacity: 0.4; }
.cas-meta-client { color: var(--yp-pink); }
.cas-h1 {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(40px, 6vw, 96px);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0;
max-width: 22ch;
text-wrap: balance;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.cas-tags {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cas-tag {
display: inline-flex;
align-items: center;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 14px;
border: 1.5px solid var(--yp-black);
border-radius: 999px;
color: var(--yp-black);
background: transparent;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
/* ----- BENTO GRID ----- */
.cas-bento {
background: #FAFAF7;
padding: 64px 0 96px;
}
.cas-bento-grid {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: 20px;
}
/* Bento block base */
.bento {
position: relative;
background: var(--yp-white);
border: 2px solid var(--yp-black);
padding: 36px 36px 40px;
display: flex;
flex-direction: column;
gap: 18px;
overflow: hidden;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.bento:hover {
transform: translate(-4px, -4px);
box-shadow: 6px 6px 0 var(--yp-black);
}
.bento-label {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: inherit;
opacity: 0.75;
display: inline-flex;
align-items: center;
gap: 10px;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.bento-label::before {
content: '';
width: 22px;
height: 2px;
background: currentColor;
display: inline-block;
}
.bento-text {
font-family: var(--yp-font-display);
font-weight: 700;
font-size: clamp(20px, 1.7vw, 28px);
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0;
font-variation-settings: "wght" 700, "opsz" 14, "slnt" 0;
}
.bento-text-sm {
font-size: clamp(15px, 1.1vw, 19px);
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.005em;
}
.bento-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.bento-list li {
position: relative;
padding-left: 28px;
font-family: var(--yp-font-display);
font-weight: 700;
font-size: clamp(16px, 1.3vw, 21px);
line-height: 1.3;
letter-spacing: -0.005em;
font-variation-settings: "wght" 700, "opsz" 14, "slnt" 0;
}
.bento-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 16px;
height: 4px;
background: currentColor;
}
/* Block-specific color/spans
Layout (12-col fluid):
row 1: challenge (5) actions (7)
row 2: reponse (7) logo (5)
row 3: resultat (5) carouselH (7)
row 4: carouselV(5) testimonial (7)
row 5 (only if extra): extra full width
*/
.bento-challenge {
grid-column: span 5;
background: var(--yp-yellow);
color: var(--yp-black);
}
.bento-actions {
grid-column: span 7;
background: var(--yp-white);
color: var(--yp-black);
}
.bento-reponse {
grid-column: span 7;
background: var(--yp-pink);
color: var(--yp-black);
}
.bento-logo {
grid-column: span 5;
background: var(--yp-white);
color: var(--yp-black);
align-items: center;
justify-content: center;
text-align: center;
}
.bento-logo .bento-label { align-self: flex-start; }
.bento-logo-wrap {
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 8px;
}
.bento-logo-wrap .cas-img-frame {
width: auto;
max-width: 70%;
max-height: 160px;
}
.bento-logo-wrap .cas-img-frame img {
width: 100%;
height: 100%;
object-fit: contain;
}
.bento-logo-fallback {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(30px, 3vw, 56px);
line-height: 1;
letter-spacing: -0.04em;
text-transform: uppercase;
text-align: center;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.bento-resultat {
grid-column: span 5;
background: var(--yp-black);
color: var(--yp-white);
justify-content: center;
}
.bento-resultat .bento-label { color: var(--yp-yellow); opacity: 1; }
.bento-num {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(72px, 9vw, 144px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--yp-yellow);
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.bento-num.is-emoji {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
font-weight: 400;
font-size: clamp(80px, 10vw, 160px);
}
.bento-resultat .bento-text { color: var(--yp-white); }
.bento-resultat .bento-text-sm { color: #D8D8D8; }
.bento-carousel-h {
grid-column: span 7;
padding: 0;
background: var(--yp-black);
min-height: 320px;
}
.bento-carousel-h .cas-img-frame,
.bento-carousel-h .cas-video-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.bento-carousel-v {
grid-column: span 5;
padding: 0;
background: var(--yp-black);
min-height: 420px;
}
.bento-carousel-v .cas-img-frame,
.bento-carousel-v .cas-video-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.bento-testimonial {
grid-column: span 7;
background: var(--yp-yellow);
color: var(--yp-black);
}
.bento-quote {
margin: 0;
position: relative;
font-family: 'Georgia', serif;
font-style: italic;
font-size: clamp(20px, 1.9vw, 32px);
line-height: 1.3;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 8px;
}
.bento-quote-mark {
font-family: var(--yp-font-display);
font-style: normal;
font-weight: 900;
font-size: clamp(56px, 6vw, 96px);
line-height: 0.8;
color: var(--yp-pink);
margin-bottom: 8px;
}
.bento-attrib {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 14px;
padding-top: 16px;
border-top: 2px solid var(--yp-black);
}
.bento-author {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(16px, 1.3vw, 20px);
letter-spacing: -0.01em;
text-transform: uppercase;
font-variation-settings: "wght" 900, "opsz" 14, "slnt" 0;
}
.bento-role {
font-family: var(--yp-font-body);
font-weight: 500;
font-size: 13px;
color: #4A4A4A;
}
.bento-extra {
grid-column: span 12;
background: var(--yp-pink);
color: var(--yp-black);
}
/* ----- IMAGE / PLACEHOLDER FRAMES ----- */
.cas-img-frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #1A1A1A;
}
.cas-img-frame.is-fallback {
background: var(--yp-yellow);
}
.cas-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cas-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cas-img-free .cas-img {
object-fit: contain;
background: var(--yp-white);
}
.cas-ph {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 28px;
text-align: center;
background:
repeating-linear-gradient(
135deg,
var(--yp-yellow) 0 18px,
#FFD800 18px 36px
);
}
.cas-ph-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--yp-black);
color: var(--yp-yellow);
padding: 4px 10px;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.cas-ph-name {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(16px, 1.4vw, 22px);
letter-spacing: -0.015em;
text-transform: uppercase;
color: var(--yp-black);
max-width: 88%;
line-height: 1.05;
font-variation-settings: "wght" 900, "opsz" 16, "slnt" 0;
}
.cas-ph-hint {
font-family: var(--yp-font-body);
font-size: 11px;
color: #4A4A4A;
max-width: 88%;
line-height: 1.35;
}
.cas-ph-hint code {
background: var(--yp-black);
color: var(--yp-yellow);
padding: 1px 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
}
/* ----- LONG DESCRIPTION ----- */
.cas-long {
background: var(--yp-white);
border-top: 2px solid var(--yp-black);
border-bottom: 2px solid var(--yp-black);
padding: 96px 0;
}
.cas-long-inner {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
gap: 64px;
}
.cas-long-eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--yp-pink);
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.cas-long-text {
display: flex;
flex-direction: column;
gap: 18px;
font-family: var(--yp-font-body);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.65;
color: #1A1A1A;
max-width: 70ch;
}
.cas-long-text p { margin: 0; }
/* ----- FEATURES ----- */
.cas-features {
background: var(--yp-yellow);
padding: 96px 0;
border-bottom: 2px solid var(--yp-black);
}
.cas-features-inner {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
}
.cas-features-h2 {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(40px, 5vw, 80px);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0 0 48px;
max-width: 22ch;
text-wrap: balance;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.cas-features-h2 .hl-yellow-stabilo {
background: var(--yp-white);
color: var(--yp-black);
padding: 0 0.14em;
display: inline-block;
border: 2px solid var(--yp-black);
box-shadow: 6px 6px 0 var(--yp-black);
transform: rotate(-1deg);
}
.cas-features-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 32px;
}
.cas-features-list li {
position: relative;
padding: 22px 24px 24px 60px;
background: var(--yp-white);
border: 2px solid var(--yp-black);
font-family: var(--yp-font-body);
font-size: clamp(15px, 1vw, 17px);
line-height: 1.5;
color: #1A1A1A;
transition: box-shadow 200ms ease, transform 200ms ease;
}
.cas-features-list li:hover {
transform: translate(-3px, -3px);
box-shadow: 6px 6px 0 var(--yp-pink);
}
.cas-features-bolt {
position: absolute;
left: 18px;
top: 22px;
font-size: 22px;
color: var(--yp-pink);
line-height: 1;
}
/* ----- DÉCOUVREZ AUSSI ----- */
.cas-related {
background: var(--yp-white);
padding: 96px 0;
}
.cas-related-head {
max-width: 1480px;
margin: 0 auto 48px;
padding: 0 var(--yp-gutter);
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
}
.cas-related-h2 {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: clamp(40px, 5vw, 80px);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0;
font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
}
.cas-related-h2 .hl { background: var(--yp-yellow); padding: 0 0.08em; }
.cas-related-cta {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--yp-black);
padding: 10px 18px;
border: 2px solid var(--yp-black);
border-radius: 999px;
transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.cas-related-cta:hover {
background: var(--yp-yellow);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--yp-black);
}
.cas-related-grid {
max-width: 1480px;
margin: 0 auto;
padding: 0 var(--yp-gutter);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.cas-related-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--yp-black);
background: var(--yp-white);
border: 2px solid var(--yp-black);
overflow: hidden;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.cas-related-card:hover {
transform: translate(-5px, -5px);
box-shadow: 8px 8px 0 var(--yp-yellow);
}
.cas-related-img {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #F0EFE8;
border-bottom: 2px solid var(--yp-black);
}
.cas-related-img .cas-img-frame {
position: absolute;
inset: 0;
}
.cas-related-meta {
padding: 20px 20px 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.cas-related-cat {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--yp-pink);
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
.cas-related-title {
font-family: var(--yp-font-display);
font-weight: 800;
font-size: clamp(17px, 1.3vw, 22px);
line-height: 1.15;
letter-spacing: -0.015em;
text-transform: uppercase;
margin: 0;
font-variation-settings: "wght" 800, "opsz" 16, "slnt" 0;
}
.cas-related-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 8px;
}
.cas-related-tag {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--yp-black);
color: var(--yp-white);
padding: 3px 8px;
font-variation-settings: "wght" 800, "opsz" 6, "slnt" 0;
}
@media (max-width: 1024px) {
.cas-bento-grid {
grid-template-columns: 1fr;
grid-auto-rows: minmax(160px, auto);
}
.bento-challenge, .bento-actions, .bento-reponse, .bento-logo,
.bento-resultat, .bento-carousel-h, .bento-carousel-v,
.bento-testimonial, .bento-extra {
grid-column: span 1;
}
.bento-carousel-h, .bento-carousel-v { min-height: 280px; }
.cas-long-inner { grid-template-columns: 1fr; gap: 24px; }
.cas-features-list { grid-template-columns: 1fr; }
.cas-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.cas-related-grid { grid-template-columns: 1fr; }
}
/* ============================================================
CONTACT — split aside + form
============================================================ */
.contact-wrap {
display: grid;
grid-template-columns: 1fr 1.4fr;
min-height: calc(100vh - 96px);
border-top: 2px solid var(--yp-black);
}
.contact-aside {
background: var(--yp-yellow);
padding: 64px var(--yp-gutter);
border-right: 2px solid var(--yp-black);
position: relative;
display: flex;
flex-direction: column;
gap: 36px;
overflow: hidden;
}
.contact-aside .eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.25em;
text-transform: uppercase;
position: relative;
z-index: 2;
}
.contact-aside h1 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.9;
font-size: clamp(48px, 6vw, 100px);
margin: 0;
position: relative;
z-index: 2;
}
.contact-aside .note {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
font-family: 'Georgia', serif;
font-style: italic;
font-size: 15px;
position: relative;
z-index: 2;
max-width: 40ch;
}
.contact-aside .note strong {
font-family: var(--yp-font-body);
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
}
.stepper {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
z-index: 2;
}
.stepper-item {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px dashed var(--yp-black);
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
.stepper-item:last-child { border-bottom: none; }
.stepper-item .step-dot {
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid var(--yp-black);
background: var(--yp-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 14px;
}
.stepper-item.is-done .step-dot {
background: var(--yp-black);
color: var(--yp-white);
}
.stepper-item.is-active .step-dot {
background: var(--yp-black);
color: var(--yp-white);
}
.stepper-item .status {
font-family: 'Georgia', serif;
font-style: italic;
font-weight: 400;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--yp-pink);
white-space: nowrap;
}
.contact-coords {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
z-index: 2;
font-family: var(--yp-font-body);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.contact-coords .h {
font-size: 11px;
letter-spacing: 0.22em;
margin-bottom: 4px;
}
.contact-coords a { color: var(--yp-black); text-decoration: none; }
.contact-coords .loc { display: inline-flex; align-items: center; gap: 8px; color: var(--yp-pink); }
.contact-aside-bolt {
position: absolute;
width: 720px;
height: 380px;
bottom: -120px;
right: -180px;
background-image: url('ds/lightning-rose.png');
background-size: contain;
background-repeat: no-repeat;
filter: grayscale(100%) brightness(0) saturate(100%);
opacity: 0.08;
transform: rotate(160deg);
pointer-events: none;
}
.contact-form {
padding: 64px var(--yp-gutter);
display: flex;
flex-direction: column;
gap: 32px;
background: #FAFAF7;
}
.form-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
}
.form-head .eyebrow {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.form-head .timer {
font-family: 'Georgia', serif;
font-style: italic;
font-weight: 400;
font-size: 13px;
color: var(--yp-pink);
}
.contact-form h2 {
font-family: var(--yp-font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.035em;
line-height: 0.92;
font-size: clamp(36px, 4.5vw, 64px);
margin: 0;
max-width: 18ch;
}
.field-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 12px;
}
.field-label .hint {
font-family: 'Georgia', serif;
font-style: italic;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
font-size: 12px;
color: #777;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 18px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
color: var(--yp-black);
cursor: pointer;
transition: background .15s ease, color .15s ease, transform .12s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.chip:hover { background: #F0EFE8; }
.chip.is-selected { background: var(--yp-yellow); }
.chip.is-selected::before { content: '✓ '; font-weight: 900; }
.chip.is-selected-black { background: var(--yp-black); color: var(--yp-white); }
.chip.is-selected-pink { background: var(--yp-pink); }
.field-textarea {
width: 100%;
font-family: var(--yp-font-body);
font-size: 16px;
padding: 16px 18px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
resize: vertical;
min-height: 140px;
outline: none;
}
.field-textarea:focus { box-shadow: var(--yp-shadow-yellow); }
.field-textarea::placeholder { color: #999; font-style: italic; font-family: 'Georgia', serif; }
.field-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.field-drop {
border: 2px dashed var(--yp-black);
padding: 32px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Georgia', serif;
font-style: italic;
font-size: 15px;
color: #555;
background: transparent;
cursor: pointer;
}
.field-drop:hover { background: var(--yp-white); }
.form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 2px solid var(--yp-black);
padding-top: 24px;
}
.form-footer .left { display: flex; gap: 12px; }
.btn-secondary {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 14px 22px;
border: 2px solid var(--yp-black);
background: var(--yp-white);
color: var(--yp-black);
cursor: pointer;
}
.btn-secondary:hover {
box-shadow: var(--yp-shadow-pink);
transform: translate(-3px,-3px);
}
.btn-primary {
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 16px 30px;
border: 2px solid var(--yp-black);
background: var(--yp-black);
color: var(--yp-white);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary:hover {
box-shadow: var(--yp-shadow-yellow);
transform: translate(-3px,-3px);
}
/* ============================================================
TWEAKS PANEL
============================================================ */
.tweaks-panel {
position: fixed;
right: 24px;
bottom: 24px;
width: 280px;
background: var(--yp-white);
border: 2px solid var(--yp-black);
box-shadow: 10px 10px 0 var(--yp-pink);
z-index: 9000;
display: none;
flex-direction: column;
}
.tweaks-panel.is-open { display: flex; }
.tweaks-head {
padding: 12px 16px;
border-bottom: 2px solid var(--yp-black);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--yp-yellow);
}
.tweaks-head h4 {
font-family: var(--yp-font-display);
font-weight: 900;
font-size: 16px;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0;
}
.tweaks-head button {
border: 1.5px solid var(--yp-black);
background: var(--yp-white);
width: 28px; height: 28px;
cursor: pointer;
font-weight: 900;
}
.tweaks-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tweaks-row { display: flex; flex-direction: column; gap: 6px; font-family: var(--yp-font-body); font-size: 12px; }
.tweaks-row .lbl { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
.tweaks-row .seg { display: flex; gap: 0; border: 2px solid var(--yp-black); }
.tweaks-row .seg button {
flex: 1;
background: var(--yp-white);
border: none;
padding: 8px 6px;
font-family: var(--yp-font-body);
font-weight: 800;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
border-right: 1.5px solid var(--yp-black);
}
.tweaks-row .seg button:last-child { border-right: none; }
.tweaks-row .seg button.is-active { background: var(--yp-black); color: var(--yp-white); }
/* ============================================================
RESPONSIVE — quick desktop-down adjustments
============================================================ */
@media (max-width: 1024px) {
.contact-wrap { grid-template-columns: 1fr; }
.contact-aside { border-right: none; border-bottom: 2px solid var(--yp-black); }
.stable-grid { grid-template-columns: repeat(3, 1fr); }
.methodo-grid { grid-template-columns: repeat(2, 1fr); }
.strate, .strate.flip { grid-template-columns: 1fr; }
.strate.flip .strate-image { order: -1; }
.strate-image { min-height: 320px; border-right: none; border-bottom: 2px solid var(--yp-black); }
.yps-footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.case-row, .case-row.flip, .founder-row, .founder-row.flip { grid-template-columns: 1fr; }
.founder-row.flip .founder-image, .case-row.flip .case-image { order: -1; }
.stable-grid { grid-template-columns: repeat(2, 1fr); }
.field-cols { grid-template-columns: 1fr; }
}
/* ============================================================
CASE STUDY — REALISATION TEMPLATE
------------------------------------------------------------
Source : `Realisation Parc Spirou.html` (handoff Claude Design,
mai 2026). Extrait du