/**
 * Aquabobble — CSS dédié
 *
 * La majeure partie du style projet provient des feuilles partagées
 * (`pages/projets/assets/css/projets-projet.css` + horizontal-scroll),
 * chargées globalement. On ne met ici que les ajustements spécifiques.
 */

.c2s-page-aquabobble .c2s-projet-hero {
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--space-16);
}


/* ============================================
   Back-office & automatisations
   ============================================ */
.c2s-page-aquabobble .c2s-projet-admin {
    padding-block: var(--space-16);
}

/* Histoire (gauche) + chiffres empilés (droite) */
.c2s-projet-admin__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em var(--space-12);
    align-items: stretch;
    margin-bottom: var(--space-16);
}

/* Colonne gauche : titre + storytelling */
.c2s-projet-admin__intro {
    grid-column: span 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.c2s-projet-admin__title {
    color: var(--color-heading);
    font-weight: 500;
    margin: 0;
}

/* Storytelling */
.c2s-projet-admin__story-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 42em;
    margin: 0;
}

.c2s-projet-admin__story-p {
    font-size: var(--20px-size);
    color: var(--color-body-light);
    line-height: 1.6;
    margin: 0;
}

.c2s-projet-admin__story-punch {
    font-size: var(--20px-size);
    color: var(--color-heading);
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* Chiffres animés (counter) : col 8-12, empilés verticalement */
.c2s-projet-admin__stats {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c2s-projet-admin__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.c2s-projet-admin__stat:last-child {
    border-bottom: 1px solid var(--color-border);
}

.c2s-projet-admin__stat-num {
    flex: 0 0 auto;
    min-width: 2.4em;
    font-size: var(--48px-size);
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
}

.c2s-projet-admin__stat-label {
    font-size: var(--16px-size);
    color: var(--color-body-light);
    line-height: 1.35;
}

/* Captures back-office — tout sur 1 ligne, même hauteur */
.c2s-projet-admin__shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5em;
    margin-top: var(--space-16);
    margin-bottom: var(--space-20);
}

.c2s-projet-admin__shot {
    margin: 0;
}

.c2s-projet-admin__shot-img-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 1.25em;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-color: var(--darklighter);
}

.c2s-projet-admin__shot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.c2s-projet-admin__shot-caption {
    margin-top: var(--space-3);
    font-size: var(--14px-size);
    color: var(--color-body-light);
    line-height: 1.4;
}

/* Détail des automatisations */
.c2s-projet-admin__cards-title {
    margin: 0 0 var(--space-8);
    font-size: var(--34px-size);
    font-weight: 500;
    color: var(--color-heading);
    line-height: 1.15;
}

.c2s-projet-admin__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5em;
}

.c2s-projet-admin__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 1em;
}

.c2s-projet-admin__card-title {
    font-size: var(--20px-size);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0;
}

.c2s-projet-admin__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.c2s-projet-admin__card-list li {
    position: relative;
    padding-left: 1.4em;
    font-size: var(--16px-size);
    color: var(--color-body-light);
    line-height: 1.5;
}

.c2s-projet-admin__card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.45em;
    height: 0.45em;
    border-radius: 100em;
    background: var(--color-primary);
}

/* ============================================
   Responsive
   ============================================ */
@media screen and (max-width: 991px) {
    .c2s-projet-admin__top {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .c2s-projet-admin__intro,
    .c2s-projet-admin__stats {
        grid-column: 1 / -1;
    }

    .c2s-projet-admin__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .c2s-projet-admin__shots {
        grid-template-columns: 1fr;
    }

    .c2s-projet-admin__shot-img-wrap {
        aspect-ratio: 16 / 10;
    }

    .c2s-projet-admin__grid {
        grid-template-columns: 1fr;
    }

    .c2s-projet-admin__stat {
        padding-block: var(--space-4);
    }

    .c2s-projet-admin__stat-num {
        font-size: var(--40px-size);
        min-width: 2.2em;
    }
}