/* ============================================================
   CURSOR
============================================================ */

.cursor {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9998;
mix-blend-mode: multiply;
}

.cursor__dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-olive);
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s, border-radius var(--transition-slow);
}

.cursor__ring {
position: absolute;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(155,172,109,.4);
transform: translate(-50%, -50%);
transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), border-radius var(--transition-slow), border-color 0.2s, background-color 0.2s;
}

.cursor--hovering .cursor__ring {
width: 60px;
height: 60px;
border-radius: var(--radius-organic);
border-color: rgba(155,172,109,.7);
}

.cursor--clicking .cursor__dot {
width: 12px;
height: 12px;
border-radius: var(--radius-organic);
}

.cursor--text .cursor__dot {
width: 4px;
height: 26px;
border-radius: 2px;
}

.cursor--text .cursor__ring {
opacity: 0;
}

@media (hover: none) {
.cursor {
display: none;
}
}

/* ============================================================
   POST CARD
============================================================ */

.post-card {
border-radius: var(--radius-md);
overflow: hidden;
background-color: var(--color-white);
transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.post-card__link {
display: flex;
flex-direction: column;
height: 100%;
}

.post-card:hover {
box-shadow: 0 20px 60px rgba(42,61,45,.12);
transform: translateY(-6px);
}

.post-card__image-wrap {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background-color: var(--color-border);
}

.post-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease-out);
}

.post-card:hover .post-card__image {
transform: scale(1.05);
}

.post-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-olive) 0%, var(--color-dark) 100%);
}

.post-card__cat {
position: absolute;
top: 1rem;
left: 1rem;
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background-color: var(--color-cream);
color: var(--color-dark);
padding: 0.3rem 0.75rem;
border-radius: 100px;
}

.post-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.5rem;
}

.post-card__title {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
font-weight: 400;
line-height: 1.3;
margin-bottom: 0.75rem;
transition: color var(--transition-fast);
}

.post-card:hover .post-card__title {
color: var(--color-olive);
}

.post-card__excerpt {
font-size: 0.9rem;
line-height: 1.6;
color: var(--color-text-muted);
flex: 1;
}

.post-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}

.post-card__date,
.post-card__reading {
font-family: var(--font-ui);
font-size: 0.75rem;
color: var(--color-text-muted);
}

.post-card__arrow {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--color-olive);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateX(-8px) scale(0.85);
transition: opacity var(--transition-base), transform var(--transition-base), border-radius var(--transition-slow);
}

.post-card__arrow svg {
width: 16px;
height: 16px;
}

.post-card:hover .post-card__arrow {
opacity: 1;
transform: translateX(0) scale(1);
border-radius: var(--radius-organic);
}

/* ============================================================
   HERO GENERIC
============================================================ */

.hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 85vh;
overflow: hidden;
background-color: var(--color-dark);
}

.hero__bg {
position: absolute;
inset: 0;
}

.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
}

.hero__bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(42,61,45,.3) 0%, rgba(42,61,45,.75) 100%);
}

.hero__content {
position: relative;
z-index: 2;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
padding-bottom: clamp(4rem, 8vw, 7rem);
}

.hero__eyebrow {
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-olive);
margin-bottom: 1.5rem;
}

.hero__title {
font-family: var(--font-display);
font-size: clamp(3.5rem, 9vw, 9rem);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--color-cream);
margin-bottom: 2rem;
}

.hero__title em {
font-style: italic;
color: var(--color-olive);
}

.hero__desc {
font-size: clamp(1rem, 1.5vw, 1.2rem);
font-weight: 300;
color: rgba(234,229,224,.75);
max-width: 44ch;
margin-bottom: 3rem;
line-height: 1.7;
}

.hero__cta-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.hero__scroll {
position: absolute;
bottom: 2.5rem;
right: var(--container-px);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: rgba(234,229,224,.4);
font-family: var(--font-ui);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
writing-mode: vertical-rl;
}

.hero__scroll-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, rgba(234,229,224,.4), transparent);
animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
0%, 100% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.5); opacity: 0.5; }
}

/* ============================================================
   ORGANIC BLOB SHAPE
============================================================ */

.blob {
border-radius: var(--radius-organic);
animation: morphBlob 8s ease-in-out infinite alternate;
}

@keyframes morphBlob {
0% { border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
25% { border-radius: 45% 55% 65% 35% / 60% 40% 55% 45%; }
50% { border-radius: 55% 45% 40% 60% / 35% 65% 45% 55%; }
75% { border-radius: 40% 60% 50% 50% / 55% 45% 60% 40%; }
100% { border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
}

/* ============================================================
   SECTION INTRO / SPLIT
============================================================ */

.section-intro {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(2rem, 5vw, 6rem);
margin-bottom: clamp(3rem, 6vw, 6rem);
}

.section-intro__text {
flex: 1;
max-width: 36ch;
}

.section-intro__aside {
flex: 1;
max-width: 44ch;
}

/* ============================================================
   PROJECT CARD (Références)
============================================================ */

.project-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
}

.project-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s var(--ease-out);
}

.project-card:hover .project-card__image {
transform: scale(1.07);
}

.project-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(42,61,45,.85) 0%, rgba(42,61,45,.1) 60%);
opacity: 0;
transition: opacity var(--transition-base);
}

.project-card:hover .project-card__overlay {
opacity: 1;
}

.project-card__info {
position: absolute;
bottom: 2rem;
left: 2rem;
right: 2rem;
transform: translateY(1rem);
opacity: 0;
transition: transform var(--transition-base), opacity var(--transition-base);
}

.project-card:hover .project-card__info {
transform: translateY(0);
opacity: 1;
}

.project-card__cat {
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-olive);
display: block;
margin-bottom: 0.5rem;
}

.project-card__title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.75rem);
color: var(--color-cream);
line-height: 1.2;
}

.project-card__link-icon {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--color-cream);
color: var(--color-dark);
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.7) rotate(-45deg);
opacity: 0;
transition: transform var(--transition-base), opacity var(--transition-base), border-radius var(--transition-slow);
}

.project-card__link-icon svg {
width: 18px;
height: 18px;
}

.project-card:hover .project-card__link-icon {
transform: scale(1) rotate(0deg);
opacity: 1;
border-radius: var(--radius-organic-2);
}

/* ============================================================
   LOGO GRID (Références clients)
============================================================ */

.logos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}

.logo-item {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background-color: var(--color-white);
border: 1px solid var(--color-border);
transition: background-color var(--transition-base);
}

.logo-item:hover {
background-color: var(--color-olive);
}

.logo-item img {
max-width: 120px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1);
transition: filter var(--transition-base), opacity var(--transition-base);
}

.logo-item:hover img {
filter: grayscale(0) brightness(0) invert(1);
}

/* ============================================================
   EXPERTISE CARD
============================================================ */

.expertise-card {
padding: 2.5rem;
border-radius: var(--radius-lg);
background-color: var(--color-white);
border: 1px solid var(--color-border);
transition: border-radius var(--transition-slow), box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base);
position: relative;
overflow: hidden;
}

.expertise-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(155,172,109,.08) 0%, transparent 60%);
opacity: 0;
transition: opacity var(--transition-slow);
}

.expertise-card:hover {
border-radius: var(--radius-organic-2);
box-shadow: 0 24px 64px rgba(42,61,45,.1);
transform: translateY(-4px);
}

.expertise-card:hover::before {
opacity: 1;
}

.expertise-card__number {
font-family: var(--font-display);
font-size: 4rem;
color: rgba(155,172,109,.15);
line-height: 1;
margin-bottom: 1rem;
}

.expertise-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-sm);
background-color: var(--color-olive);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: border-radius var(--transition-slow);
}

.expertise-card:hover .expertise-card__icon {
border-radius: var(--radius-organic);
}

.expertise-card__icon svg {
width: 26px;
height: 26px;
color: var(--color-white);
}

.expertise-card__title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 400;
line-height: 1.2;
margin-bottom: 0.75rem;
}

.expertise-card__text {
font-size: 0.9rem;
line-height: 1.7;
color: var(--color-text-muted);
}

/* ============================================================
   STAT BLOCK
============================================================ */

.stat-block {
text-align: center;
}

.stat-block__number {
font-family: var(--font-display);
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 400;
color: var(--color-olive);
line-height: 1;
}

.stat-block__label {
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 0.5rem;
}

/* ============================================================
   FORM ELEMENTS
============================================================ */

.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.form-label {
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
}

.form-control {
padding: 1rem 1.25rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-white);
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text);
transition: border-color var(--transition-fast), border-radius var(--transition-slow), box-shadow var(--transition-fast);
outline: none;
}

.form-control::placeholder {
color: rgba(42,61,45,.3);
}

.form-control:focus {
border-color: var(--color-olive);
border-radius: var(--radius-organic-3);
box-shadow: 0 0 0 3px rgba(155,172,109,.12);
}

textarea.form-control {
resize: vertical;
min-height: 140px;
}

.form-error {
font-size: 0.8rem;
color: #c0392b;
}

.form-success {
font-size: 0.9rem;
color: var(--color-olive);
font-weight: 500;
}

/* ============================================================
   REVEAL LINES (text animation prep)
============================================================ */

.reveal-wrap {
overflow: hidden;
display: block;
}

.reveal-line {
display: block;
will-change: transform;
}

/* ============================================================
   MARQUEE
============================================================ */

.marquee {
overflow: hidden;
white-space: nowrap;
}

.marquee__track {
display: inline-flex;
gap: 2rem;
animation: marquee 20s linear infinite;
}

.marquee__track:hover {
animation-play-state: paused;
}

@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

.marquee__item {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 3.5rem);
font-style: italic;
color: rgba(42,61,45,.12);
flex-shrink: 0;
transition: color var(--transition-base);
}

.section--dark .marquee__item {
color: rgba(234,229,224,.08);
}

/* ============================================================
   SEPARATOR
============================================================ */

.separator {
height: 1px;
background-color: var(--color-border);
margin-block: var(--section-py);
}

.section--dark .separator {
background-color: rgba(234,229,224,.1);
}

/* ============================================================
   BADGE / PILL
============================================================ */

.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
border-radius: 100px;
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 600;
}

.badge--olive {
background-color: rgba(155,172,109,.15);
color: var(--color-olive-dark);
}

.badge--dark {
background-color: rgba(42,61,45,.08);
color: var(--color-dark);
}

.badge::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background-color: currentColor;
flex-shrink: 0;
}