/**
 * À propos — CSS
 */


/* ============================================
   Variables locales
   ============================================ */
.c2s-page-a-propos {
    --_nav-h: calc(2.5em + 45px);
}


/* ============================================
   Hero
   ============================================ */
.c2s-apropos-hero {
    padding-top: calc(var(--_nav-h) + var(--space-16));
    padding-bottom: var(--space-12);
}

.c2s-apropos-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-6);
}

.c2s-apropos-hero__title {
    grid-column: 2 / 13;
    font-size: 8rem;
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-heading);
    margin-bottom: var(--space-6);
}

.c2s-apropos-hero__sub {
    grid-column: 2 / 10;
    font-size: var(--18px-size);
    color: var(--color-body-light);
    line-height: 1.5;
}


/* ============================================
   Intro — Bio + Photo
   ============================================ */
.c2s-apropos-intro {
    border-top: 1px solid var(--color-border);
    padding-top: var(--col);
    padding-bottom: calc(var(--col) * 1.5);
}

.c2s-apropos-intro__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
}

.c2s-apropos-intro__arrow {
    grid-column: 1;
    grid-row: 1;
    width: var(--14px-size);
    height: var(--14px-size);
    margin-top: var(--space-1);
    color: var(--color-body-light);
}

.c2s-apropos-intro__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.c2s-apropos-intro__text {
    grid-column: 2 / 7;
    grid-row: 1;
}

.c2s-apropos-intro__text p {
    font-size: var(--16px-size);
    color: var(--color-body-light);
    line-height: 1.7;
}

.c2s-apropos-intro__photo {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
}

.c2s-apropos-intro__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.c2s-apropos-intro__distinctions {
    grid-column: 2 / 7;
    grid-row: 2;
    margin-top: var(--space-12);
}

.c2s-apropos-intro__distinctions .directional-list__info,
.c2s-apropos-intro__distinctions .directional-list__item {
    padding-left: 0;
    padding-right: 0;
}

.c2s-apropos-intro__distinctions .directional-list__col-award {
    min-width: 0;
    flex: 1 1 45%;
    overflow: hidden;
}

.c2s-apropos-intro__distinctions .directional-list__col-client {
    min-width: 0;
    flex: 1 1 30%;
    overflow: hidden;
}

.c2s-apropos-intro__distinctions .directional-list__col-year {
    flex: 0 0 auto;
    min-width: 3em;
}

.c2s-apropos-intro__distinctions .directional-list__p {
    font-size: var(--16px-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c2s-apropos-intro__distinctions .directional-list__eyebrow {
    font-size: var(--12px-size);
}

.c2s-apropos-intro__distinctions-label {
    font-size: var(--14px-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-body-light);
    margin-bottom: var(--space-8);
}


/* ============================================
   Section générique (label + content)
   ============================================ */
.c2s-apropos-section {
    border-top: 1px solid var(--color-border);
    padding-top: calc(var(--col) * 1.5);
    padding-bottom: calc(var(--col) * 1.5);
}

.c2s-apropos-section__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
}

.c2s-apropos-section__label {
    grid-column: 1 / 4;
}

.c2s-apropos-section__label-text {
    font-size: var(--14px-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-body-light);
}

.c2s-apropos-section__content {
    grid-column: 5 / 13;
}

.c2s-apropos-section__content p {
    font-size: var(--18px-size);
    color: var(--color-body-light);
    line-height: 1.6;
}


/* ============================================
   Formations
   ============================================ */
.c2s-apropos-formations__list {
    grid-column: 5 / 13;
}

.c2s-apropos-formation {
    position: relative;
    padding-block: var(--space-8);
}

.c2s-apropos-formation__inner {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
}

.c2s-apropos-formation__year {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    flex-shrink: 0;
    min-width: 3.5em;
}

.c2s-apropos-formation__info {
    flex: 1;
}

.c2s-apropos-formation__title {
    font-size: var(--20px-size);
    font-weight: 500;
    color: var(--color-heading);
    line-height: 1.3;
    margin-bottom: var(--space-1);
}

.c2s-apropos-formation__org {
    font-size: var(--14px-size);
    color: var(--color-body-light);
}

.c2s-apropos-formation--last {
    position: relative;
    height: 0;
}


/* ============================================
   Stats — Chiffres clés
   ============================================ */
.c2s-apropos-stats {
    background-color: var(--color-heading);
    padding-top: calc(var(--col) * 1.5);
    padding-bottom: calc(var(--col) * 1.5);
}

.c2s-apropos-stats .container {
    container-type: inline-size;
}

.c2s-apropos-stats__heading {
    font-size: var(--72px-size);
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-16);
    padding-left: calc((100% - 11 * var(--space-6)) / 12 + var(--space-6));
}

.c2s-apropos-stats__item {
    height: calc((100cqi - 11 * var(--space-6)) / 6 + var(--space-6));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c2s-apropos-stats__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 0 var(--space-6);
    height: 100%;
}

.c2s-apropos-stats__border {
    grid-column: 1 / 13;
    grid-row: 1;
}

.c2s-apropos-stats__number {
    grid-column: 2 / 6;
    grid-row: 2;
    display: flex;
    align-items: center;
}

.c2s-apropos-stats__number .c2s-counter {
    font-size: var(--72px-size);
    font-weight: 500;
    color: var(--color-primary);
}

.c2s-apropos-stats__content {
    grid-column: 7 / 13;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c2s-apropos-stats__title {
    font-size: var(--34px-size);
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-4);
}

.c2s-apropos-stats__desc-text {
    font-size: var(--16px-size);
    color: var(--darkgrey);
    line-height: 1.6;
    margin-bottom: 0;
}


/* ============================================
   Responsive — Tablet + Mobile (≤ 991px)
   "Tablette = mobile" : un seul breakpoint (cf. global.css §8).
   Variables réutilisées : --display-* (em-based, scale avec base font-size),
   --space-* (rem fixes, échelle 1/2/3/4/6/8/10/12/16/20/24/30).
   ============================================ */
@media screen and (max-width: 991px) {
    /* Hero : H1 mobile-friendly (8rem desktop → clamp scale 2rem→5rem
       suivant le viewport). Le clamp évite le débordement horizontal sur
       petits écrans tout en gardant l'impact visuel sur tablette. */
    .c2s-apropos-hero {
        padding-top: calc(var(--_nav-h) + var(--space-12));
        padding-bottom: var(--space-10);
    }

    .c2s-apropos-hero__title {
        grid-column: 1 / 13;
        font-size: clamp(2.5rem, 9vw, 5rem);
        line-height: 1.05;
        margin-bottom: var(--space-4);
    }

    .c2s-apropos-hero__sub {
        grid-column: 1 / 10;
    }

    .c2s-apropos-intro__arrow {
        grid-column: 1;
    }

    .c2s-apropos-intro__text {
        grid-column: 2 / 8;
    }

    .c2s-apropos-intro__photo {
        grid-column: 8 / 13;
    }

    .c2s-apropos-intro__distinctions {
        grid-column: 2 / 8;
    }

    .c2s-apropos-stats__border {
        grid-column: 1 / 13;
    }

    .c2s-apropos-stats__number {
        grid-column: 1 / 4;
    }

    .c2s-apropos-stats__content {
        grid-column: 5 / 13;
    }

    /* Stats — espacement vertical autour de la ligne animée :
       desktop utilise un calc de height ; sur tablette/mobile on bascule
       en hauteur auto + padding-block sur l'item, et on pousse number/content
       loin de la border via margin-top. Objectif : espace au-dessus de la
       ligne (pad-bottom item N + pad-top item N+1 = 2 × space-6 = space-12)
       = espace en-dessous (margin-top number/content = space-12). */
    .c2s-apropos-stats__item {
        height: auto;
        padding-block: var(--space-6);
    }

    .c2s-apropos-stats__number,
    .c2s-apropos-stats__content {
        margin-top: var(--space-12);
    }

    /* Section générique (À propos / La création / La conception …) :
       label sur la gauche + content sur la droite passent en stack vertical
       lisible sur tablette/mobile. On garde --space-6 (cohérent avec le gap
       desktop mais en gap row sur mobile). */
    .c2s-apropos-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .c2s-apropos-section__label,
    .c2s-apropos-section__content,
    .c2s-apropos-formations__list {
        grid-column: 1 / -1;
    }

    /* Stats : titres trop gros (72px / 34px desktop) → on tape dans les
       --display-* qui scalent fluidement avec le base font-size. */
    .c2s-apropos-stats__heading {
        font-size: var(--display-md);
        line-height: 1.05;
        padding-left: 0;
        margin-bottom: var(--space-10);
    }

    .c2s-apropos-stats__number .c2s-counter {
        font-size: var(--display-lg);
    }

    .c2s-apropos-stats__title {
        font-size: var(--display-sm);
    }
}


/* ============================================
   Responsive — Mobile
   ============================================ */
@media screen and (max-width: 767px) {
    .c2s-apropos-hero {
        padding-top: calc(var(--_nav-h) + var(--space-10));
        padding-bottom: var(--space-8);
    }

    .c2s-apropos-hero__title,
    .c2s-apropos-hero__sub {
        grid-column: 1 / -1;
    }

    /* Mobile : on stacke proprement photo → texte → distinctions.
       En grid 1 col, grid-column: 2 / -1 créait une col implicite hors
       viewport (texte invisible). On force tout en 1 / -1 + ordre explicite,
       et on cache la flèche décorative qui n'a plus de sens sans la 2ᵉ col. */
    .c2s-apropos-intro__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-8);
    }

    .c2s-apropos-intro__arrow {
        display: none;
    }

    .c2s-apropos-intro__photo {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
    }

    .c2s-apropos-intro__text {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
    }

    .c2s-apropos-intro__distinctions {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: var(--space-4);
        min-width: 0;
    }

    /* "Tableau" Prix & Certifications : sur mobile, le padding horizontal
       en var(--col) et les min-width forcés faisaient déborder la liste hors
       de la grille système. On reset les min-width, on stacke chaque ligne
       en deux niveaux (titre en haut, organisme + année en bas), et on laisse
       les paragraphes wrapper sans nowrap pour rester dans le container. */
    .c2s-apropos-intro__distinctions .directional-list,
    .c2s-apropos-intro__distinctions .directional-list__info,
    .c2s-apropos-intro__distinctions .directional-list__item {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Header (eyebrows) ET items : même grille 2 lignes pour rester lisible
       sans tronquer le label "Organisation". */
    .c2s-apropos-intro__distinctions .directional-list__info,
    .c2s-apropos-intro__distinctions .directional-list__item {
        flex-wrap: wrap;
        column-gap: var(--space-3);
        row-gap: var(--space-2);
        padding-inline: 0;
    }

    .c2s-apropos-intro__distinctions .directional-list__info {
        padding-bottom: var(--space-3);
    }

    .c2s-apropos-intro__distinctions .directional-list__item {
        padding-block: var(--space-6);
    }

    /* Award/eyebrow titre : pleine largeur, première ligne.
       Organisme + année : flex sur la deuxième ligne, organisme à gauche,
       année calée à droite. */
    .c2s-apropos-intro__distinctions .directional-list__col-award {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        order: 1;
    }

    .c2s-apropos-intro__distinctions .directional-list__col-client {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        order: 2;
    }

    .c2s-apropos-intro__distinctions .directional-list__col-year {
        flex: 0 0 auto;
        min-width: auto;
        margin-left: auto;
        order: 3;
    }

    .c2s-apropos-intro__distinctions .directional-list__p {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        font-size: var(--14px-size);
        line-height: 1.35;
    }

    .c2s-apropos-intro__distinctions .directional-list__eyebrow {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .c2s-apropos-formation__inner {
        flex-direction: column;
        gap: var(--space-2);
    }

    .c2s-apropos-formation__year {
        min-width: auto;
    }

    /* Sur mobile portrait, number et content stackent :
       - number reste séparé de la ligne par margin-top: var(--space-12)
         (hérité du bloc 991) → équilibre avec padding-block: var(--space-6).
       - content vient directement APRÈS number (row 3) : on retire la
         margin-top pour ne pas doubler l'écart avec la margin-bottom du
         number. */
    .c2s-apropos-stats__grid {
        grid-template-rows: auto auto auto;
    }

    .c2s-apropos-stats__border {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .c2s-apropos-stats__number {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: var(--space-4);
    }

    .c2s-apropos-stats__number .c2s-counter {
        font-size: var(--48px-size);
    }

    .c2s-apropos-stats__content {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0;
    }
}