/* =========================================================
   PROJET.CSS — Design system commun aux pages case study
   Dépend de style.css pour : tokens (:root), reset, nav,
   curseur custom (#cursorDot / .cursor-label), classes .nav-*.
   Aucune classe ici ne redéfinit une classe de style.css.
   ========================================================= */

/* ---------------------------------------------------------
   TOKENS ADDITIONNELS
--------------------------------------------------------- */
:root {
    --color-surface: #ffffff;
    --color-surface-muted: #eef2fc;
    --color-ink-soft: #c3cce3;

    --case-container: 1140px;
    --reading-width: 62ch;

    --rail-width: 3px;
}

/* ---------------------------------------------------------
   STRUCTURE GLOBALE
--------------------------------------------------------- */
.project-page header {
    height: auto;
}

.project-page main {
    max-width: var(--case-container);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.back-link {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: var(--space-6);
    transition: color var(--duration-fast) var(--ease-out);
}

.back-link:hover {
    color: var(--color-accent);
}

.case-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------
   RAIL DE PROGRESSION (signature element)
   Ligne fine + points, libellé en tooltip flottant au survol
   ou sur la phase active — ne pousse jamais le layout.
--------------------------------------------------------- */
.phase-rail {
    position: fixed;
    left: max(var(--space-5), calc((100vw - var(--case-container)) / 2 - 40px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    width: 8px;
    height: 260px;

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-medium) var(--ease-out);
}

.phase-rail.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.phase-rail-fill,
.phase-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--rail-width);
    height: 100%;
    transform: translateX(-50%);
    background: var(--color-border);
    border-radius: 999px;
}

.phase-rail-fill {
    background: var(--color-accent);
    height: 0%;
    z-index: 1;
    transition: height 80ms linear;
}

.phase-rail-stops {
    position: relative;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: var(--rail-width);
}

.phase-rail-stops li {
    position: relative;
    width: 8px;
    height: 8px;
}

.phase-rail-stops li span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-ink-soft);
    transition: background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.phase-rail-stops li::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + var(--space-3));
    top: 50%;
    transform: translateY(-50%) translateX(-4px);

    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-soft);
    white-space: nowrap;

    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    pointer-events: none;
}

.phase-rail-stops li:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.phase-rail-stops li.is-active span {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.35);
}

.phase-rail-stops li.is-active::after {
    color: var(--color-text);
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 1100px) {
    .phase-rail {
        display: none;
    }
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.case-hero {
    padding-top: var(--space-5);
    margin-bottom: var(--space-9);
}

.case-hero-meta h1 {
    font-size: clamp(var(--text-3xl), 4.4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    max-width: 880px;
    margin-bottom: var(--space-5);
}

.case-hero-summary {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: var(--reading-width);
    margin-bottom: var(--space-5);
}

.case-hero-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.case-hero-tags li {
    padding: 6px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.case-hero-media {
    margin-top: var(--space-7);
}

.case-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}

.case-facts div {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.case-facts dt {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-soft);
}

.case-facts dd {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   PLACEHOLDERS VISUELS
   Remplacer le <div>/<figure> par une <img> avec la même
   classe : ratio et style suivent automatiquement.
--------------------------------------------------------- */
.media-placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;

    aspect-ratio: 16 / 9;
    width: 100%;

    background: var(--color-surface-muted);
    background-image: radial-gradient(rgba(11, 15, 26, 0.06) 1px, transparent 1px);
    background-size: 16px 16px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    cursor: none;
    overflow: hidden;
    transition: border-color var(--duration-medium) var(--ease-out);
}

.media-placeholder img {
    width: 100%;
    height: 100%;
}

.media-placeholder:hover {
    border-color: var(--color-accent);
}

.media-placeholder-icon {
    font-size: 1.6rem;
    color: var(--color-ink-soft);
    line-height: 1;
}

.media-placeholder-label {
    font-size: var(--text-sm);
    color: var(--color-text-soft);
    max-width: 280px;
}

.media-placeholder--tall {
    aspect-ratio: 4 / 3;
}

.media-placeholder--square {
    aspect-ratio: 1 / 1;
}

/* Annotation flottante sur une image — petite étiquette qui
   pointe vers une zone précise du visuel, à repositionner
   au cas par cas via style="top:...;left:...". */
.media-annotation {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px 4px 6px;
    background: var(--color-text);
    color: var(--color-inverse);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: 999px;
    white-space: nowrap;
    z-index: 5;
}

.media-annotation::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   SECTIONS — bloc générique
--------------------------------------------------------- */
.case-section {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
}

.case-section:first-of-type {
    border-top: none;
}

.case-section-intro {
    max-width: var(--reading-width);
    margin-bottom: var(--space-6);
}

.case-section-intro h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: var(--line-tight);
    margin-bottom: var(--space-3);
}

.case-section-intro .case-chapo {
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   PROBLÉMATIQUE — bullets scannables
--------------------------------------------------------- */
.stake-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.stake-card {
    padding: var(--space-4) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.stake-card-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-soft);
    margin-bottom: var(--space-2);
}

.stake-card p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   PROCESS — blocs A / B / C / D
--------------------------------------------------------- */
.process-block {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--color-border);
}

.process-block:first-child {
    border-top: none;
    padding-top: 0;
}

.process-block-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.process-letter {
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.process-block h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.3px;
}

.process-block-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.process-block p {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    max-width: var(--reading-width);
    margin-bottom: var(--space-4);
}

.process-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.process-bullets li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.process-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-accent);
}

.process-block-media {
    margin-top: var(--space-5);
}

/* ---------------------------------------------------------
   GALERIES
--------------------------------------------------------- */
.gallery {
    display: grid;
    gap: var(--space-4);
}

.gallery--1 {
    grid-template-columns: 1fr;
}

.gallery--2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery--3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery--4 {
    grid-template-columns: repeat(2, 1fr);
}

/* ---------------------------------------------------------
   BEFORE / AFTER
--------------------------------------------------------- */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.compare-item {
    position: relative;
}

.compare-tag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 5;
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    background: var(--color-text);
    color: var(--color-inverse);
}

.compare-item--after .compare-tag {
    background: var(--color-accent);
}

/* ---------------------------------------------------------
   CALLOUT (insight / citation)
--------------------------------------------------------- */
.callout {
    margin-top: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
    max-width: var(--reading-width);
}

.callout p {
    font-size: var(--text-md);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    letter-spacing: -0.1px;
    margin-bottom: 0;
    max-width: none;
}

.callout--quote {
    position: relative;
    padding-left: var(--space-7);
}

.callout--quote::before {
    content: "“";
    position: absolute;
    left: var(--space-5);
    top: var(--space-3);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-accent);
    font-weight: 800;
}

/* ---------------------------------------------------------
   DÉCISIONS DE DESIGN — section signature
   Visuellement distincte : fond sombre pour marquer la
   rupture de ton (du descriptif vers l'arbitrage assumé).
--------------------------------------------------------- */
.decisions-section {
    margin: var(--space-8) calc(-1 * var(--space-6));
    padding: var(--space-8) var(--space-6);
    background: var(--color-text);
    border-radius: var(--radius-lg);
}

.decisions-section .case-section-intro h2,
.decisions-section .case-section-intro .case-chapo {
    color: var(--color-inverse);
}

.decisions-section .case-eyebrow {
    color: #8fb1ff;
}

.decisions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.decision-card {
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
}

.decision-card-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8fb1ff;
    margin-bottom: var(--space-3);
}

.decision-card p {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.78);
    line-height: var(--line-normal);
}

.decision-card p strong {
    color: var(--color-inverse);
    font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------
   RÉSULTAT
--------------------------------------------------------- */
.result-block p {
    font-size: var(--text-lg);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    letter-spacing: -0.2px;
    max-width: var(--reading-width);
}

/* ---------------------------------------------------------
   CE QUE J'AI APPRIS
--------------------------------------------------------- */
.learnings-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-5);
}

.learnings-list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.learnings-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-accent);
}

/* ---------------------------------------------------------
   NEXT PROJECT
--------------------------------------------------------- */
.next-project {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
}

.next-project-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
}

.next-project-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.6px;
    transition: color var(--duration-fast) var(--ease-out);
}

.next-project-link:hover .next-project-title {
    color: var(--color-accent);
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1100px) {

    .stake-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-block-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .gallery--3,
    .gallery--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .decisions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .project-header nav {
        padding-top: var(--space-6);
    }

    .case-hero-meta h1 {
        font-size: var(--text-3xl);
    }

    .case-hero-summary {
        font-size: var(--text-md);
    }

    .case-section {
        padding: var(--space-7) 0;
    }

    .case-section-intro h2 {
        font-size: var(--text-xl);
    }

    .stake-grid,
    .case-facts,
    .gallery--2,
    .gallery--3,
    .gallery--4,
    .decisions-grid,
    .learnings-list {
        grid-template-columns: 1fr;
    }

    .compare {
        grid-template-columns: 1fr;
    }

    .decisions-section {
        margin: var(--space-7) calc(-1 * var(--space-4));
        padding: var(--space-7) var(--space-4);
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .case-hero-tags {
        gap: var(--space-2);
    }
}