/* projects.css — pages /projects/ (index + case studies)
   Réutilise les tokens de style.css (couleurs, typo, espacements). Charte §10 :
   pas de gradient, pas d'ombre, pas d'arrondi >4px hors badge/CTA/photo, pas de centrage. */

body.projects-page {
    background-color: var(--blanc-focal);
}

.projects-index,
.case-study {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-m);
    background-color: var(--blanc-focal);
}

/* ===== Index /projects/ ===== */

.projects-index h1 {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: var(--text-3xl);
    color: var(--noir-focal);
    margin: var(--space-xl) 0 var(--space-l);
}

.ct-filters {
    display: flex;
    gap: var(--space-m);
    margin-bottom: var(--space-l);
}

.ct-filter {
    font-size: var(--text-base);
    color: var(--gris-moyen);
    text-decoration: none;
}

.ct-filter.is-active {
    color: var(--noir-focal);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ct-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-bottom: var(--space-xxl);
}

.ct-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ct-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ct-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
    margin-top: var(--space-s);
}

.ct-card-meta h3 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--noir-focal);
    margin: 0;
}

.ct-card p {
    font-size: var(--text-sm);
    color: var(--gris-moyen);
    margin: var(--space-xs) 0 0;
}

/* ===== Case study ===== */

.ct-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 70vh;
    height: 70dvh;
    overflow: hidden;
}

.ct-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-top: var(--space-xl);
}

.ct-header h1 {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: var(--text-3xl);
    color: var(--noir-focal);
    margin: 0;
}

.ct-subline {
    font-size: var(--text-base);
    color: var(--gris-moyen);
    margin: var(--space-xs) 0 0;
}

.ct-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-badge);
    white-space: nowrap;
}

.ct-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ct-badge.is-positive { color: var(--vert-validation); background: rgba(74, 140, 106, 0.1); }
.ct-badge.is-info { color: var(--bleu-info); background: rgba(58, 106, 196, 0.1); }

.ct-table {
    margin-top: var(--space-l);
    max-width: 680px;
}

.ct-row {
    display: flex;
    gap: var(--space-m);
    padding: var(--space-xs) 0;
}

.ct-label {
    flex: 0 0 200px;
    font-size: var(--text-sm);
    color: var(--gris-moyen);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.ct-value {
    font-size: var(--text-base);
    color: var(--noir-focal);
}

.ct-text-section {
    max-width: 680px;
    margin-top: var(--space-xl);
}

.ct-text-section h3 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--noir-focal);
    margin: 0 0 var(--space-s);
}

.ct-text-section p {
    font-size: var(--text-lg);
    line-height: var(--leading-base);
    color: var(--noir-focal);
    text-align: left;
    margin: 0;
}

.ct-images {
    margin-top: var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.ct-image {
    margin: 0;
    cursor: pointer;
}

.ct-image img {
    width: 100%;
    display: block;
}

.ct-image figcaption {
    margin-top: var(--space-s);
}

.ct-image figcaption h4 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--noir-focal);
    margin: 0;
}

.ct-image figcaption p {
    font-size: var(--text-sm);
    color: var(--gris-moyen);
    margin: 4px 0 0;
}

.ct-methode {
    margin-top: var(--space-xxl);
}

.ct-methode h3 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--noir-focal);
    margin: 0 0 var(--space-m);
}

.ct-methode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
}

.ct-methode-grid figure {
    margin: 0;
}

.ct-methode-grid img {
    width: 100%;
    display: block;
}

.ct-methode-grid figcaption {
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--gris-moyen);
}

.ct-testimonial {
    margin-top: var(--space-xxl);
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.ct-testimonial blockquote {
    font-size: var(--text-xl);
    line-height: var(--leading-base);
    color: var(--noir-focal);
    margin: 0 0 var(--space-m);
}

.ct-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.ct-testimonial-author img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-badge);
    object-fit: cover;
}

.ct-t-name {
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--noir-focal);
    margin: 0;
}

.ct-t-title {
    font-size: var(--text-sm);
    color: var(--gris-moyen);
    margin: 0;
}

/* ===== CTA — card explicite fond blanc focal, ferrée à gauche ===== */

.ct-cta {
    margin-top: var(--space-xxl);
    text-align: left;
    background-color: var(--blanc-focal);
    border: var(--border-separator);
    border-radius: var(--radius-badge);
    padding: var(--space-l);
}

.ct-cta h2 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--noir-focal);
    margin: 0 0 var(--space-xs);
    text-align: left;
}

.ct-cta p {
    font-size: var(--text-base);
    color: var(--gris-moyen);
    margin: 0 0 var(--space-m);
}

.ct-cta .cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--ocre-focal);
    color: var(--blanc-focal);
    font-size: var(--text-base);
    text-decoration: none;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-badge);
}

/* ===== Autres projets — cards riches ===== */

.ct-other-projects {
    margin-top: var(--space-m);
    padding-top: var(--space-l);
    padding-bottom: var(--space-xxl);
    display: flex;
    gap: var(--space-m);
}

.ct-op-card {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    background-color: var(--blanc-focal);
    border: var(--border-separator);
    border-radius: var(--radius-badge);
    padding: var(--space-s);
    text-decoration: none;
    color: inherit;
}

.ct-op-next {
    justify-content: flex-end;
}

.ct-op-image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-badge);
    overflow: hidden;
}

.ct-op-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-op-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ct-op-next .ct-op-body {
    text-align: right;
}

.ct-op-state {
    display: block;
    font-size: var(--text-xs);
    color: var(--gris-moyen);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.ct-op-body h4 {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--noir-focal);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-op-card i[class^="icon-"] {
    font-size: var(--text-lg);
    color: var(--gris-moyen);
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    .projects-index, .case-study {
        padding: 0 var(--space-l);
    }

    .ct-text-section,
    .ct-testimonial,
    .ct-methode,
    .ct-cta,
    .ct-other-projects {
        margin-top: var(--space-xl);
    }

    .ct-images { margin-top: var(--space-xl); gap: var(--space-l); }
}

@media (max-width: 768px) {
    .projects-index, .case-study {
        padding: 0 var(--space-m);
    }

    .projects-index h1 {
        font-size: var(--text-2xl);
        margin: var(--space-l) 0 var(--space-m);
    }

    .ct-filters {
        flex-wrap: wrap;
        row-gap: var(--space-xs);
    }

    .ct-row { flex-direction: column; gap: 4px; }
    .ct-label { flex-basis: auto; }
    .ct-methode-grid { grid-template-columns: 1fr; }
    .ct-header { flex-direction: column; align-items: flex-start; gap: var(--space-s); margin-top: var(--space-l); }
    .ct-header h1 { font-size: var(--text-2xl); }

    .ct-images { gap: var(--space-m); }

    .ct-cta { padding: var(--space-m); }

    .ct-other-projects { flex-direction: column; padding-bottom: var(--space-xl); }
    .ct-op-card { padding: var(--space-xs) var(--space-s); }
}

@media (max-width: 480px) {
    .projects-index, .case-study {
        padding: 0 var(--space-s);
    }

    .projects-index h1,
    .ct-header h1 {
        font-size: var(--text-xl);
    }

    .ct-text-section p { font-size: var(--text-base); }

    .ct-testimonial blockquote { font-size: var(--text-lg); }

    .ct-op-image { flex-basis: 48px; width: 48px; height: 48px; }
    .ct-op-body h4 { font-size: var(--text-sm); }

    .ct-cta .cta {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}