/* ============================================
   Fast2 — About / Positioning page
   ============================================ */

/* ── Hero ── */
.about-hero {
    position: relative;
    padding: calc(var(--header-height) + var(--sp-4xl)) 0 var(--sp-4xl);
    background: var(--c-dark);
    color: var(--c-white);
    overflow: hidden;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 55% at 80% 45%, rgba(233, 30, 99, 0.20) 0%, transparent 65%),
        radial-gradient(ellipse 45% 45% at 10% 60%, rgba(27, 58, 158, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

.about-hero__content {
    position: relative;
    z-index: 1;
    max-width: 750px;
}

.about-hero__badge {
    display: inline-flex;
    padding: var(--sp-xs) var(--sp-md);
    background: rgba(233, 30, 99, 0.12);
    border: 1px solid rgba(233, 30, 99, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-primary-light);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-bottom: var(--sp-xl);
}

.about-hero__title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--c-white);
    margin-bottom: var(--sp-lg);
    letter-spacing: var(--ls-tight);
}

.about-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--lh-relaxed);
    max-width: 600px;
}

.about-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
    opacity: 0.3;
}

/* ── Intro text ── */
.about-intro {
    text-align: center;
    padding: var(--sp-xl) 0;
}

.about-intro__lead {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--c-dark);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-lg);
}

.about-intro__text {
    font-size: var(--fs-body);
    color: var(--c-text-light);
    line-height: var(--lh-relaxed);
    max-width: 650px;
    margin-inline: auto;
}

/* ── Limit cards (le problème) ── */
.about-limit-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    text-align: center;
    transition: all var(--transition-normal);
}

.about-limit-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: transparent;
}

.about-limit-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-md);
}

.about-limit-card__icon--formation {
    background: var(--c-primary-50);
    color: var(--c-primary);
}

.about-limit-card__icon--accomp {
    background: #EFF6FF;
    color: var(--c-secondary);
}

.about-limit-card__icon--support {
    background: #FFFBEB;
    color: var(--c-tertiary);
}

.about-limit-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--c-dark);
    margin-bottom: var(--sp-md);
}

.about-limit-card__good {
    font-size: var(--fs-small);
    color: var(--c-success);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-xs);
}

.about-limit-card__but {
    font-size: var(--fs-small);
    color: var(--c-text-light);
    line-height: var(--lh-relaxed);
    font-style: italic;
}

/* ── La réponse (highlight section) ── */
.about-answer {
    background: var(--c-surface);
}

.about-answer__content {
    text-align: center;
    padding: var(--sp-xl) 0;
}

.about-answer__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--c-dark);
    margin-bottom: var(--sp-lg);
}

.about-answer__text {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--c-text);
    line-height: var(--lh-relaxed);
    max-width: 650px;
    margin-inline: auto;
}

/* ── 3 Dimensions ── */
.about-dimensions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--c-white);
}

.about-dimension {
    padding: var(--sp-2xl) var(--sp-xl);
    text-align: center;
    position: relative;
    transition: background var(--transition-normal);
}

.about-dimension:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    height: 60%;
    width: 1px;
    background: var(--c-border);
}

.about-dimension:hover {
    background: var(--c-light);
}

.about-dimension__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-md);
    background: var(--c-primary-50);
    color: var(--c-primary);
}

.about-dimension__icon--blue {
    background: #EFF6FF;
    color: var(--c-secondary);
}

.about-dimension__icon--amber {
    background: #FFFBEB;
    color: var(--c-tertiary);
}

.about-dimension__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--c-dark);
    margin-bottom: var(--sp-sm);
}

.about-dimension__text {
    font-size: var(--fs-small);
    color: var(--c-text-light);
    line-height: var(--lh-relaxed);
}

.about-dimensions__footer {
    text-align: center;
    margin-top: var(--sp-2xl);
    font-size: var(--fs-body);
    color: var(--c-text);
    line-height: var(--lh-relaxed);
    max-width: 700px;
    margin-inline: auto;
    font-style: italic;
}

/* ── F.A.S.T. section ── */
.about-fast-section {
    background: var(--c-dark);
    color: var(--c-white);
}

.about-fast-section .section__header h2 {
    color: var(--c-white);
}

.about-fast-section .divider {
    background: var(--c-primary);
}

.about-fast-section__title {
    font-size: var(--fs-h1);
    letter-spacing: 0.15em;
}

.about-fast-letter {
    color: var(--c-white);
}

.about-fast-dot {
    color: var(--c-primary);
}

.about-fast-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
    max-width: 900px;
    margin-inline: auto;
}

.about-fast-item {
    display: flex;
    gap: var(--sp-lg);
    padding: var(--sp-xl);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.about-fast-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(233, 30, 99, 0.2);
    transform: translateY(-2px);
}

.about-fast-item__letter {
    font-family: var(--ff-display);
    font-size: 2.5rem;
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    text-align: center;
}

.about-fast-item__letter--blue { color: var(--c-secondary-light); }
.about-fast-item__letter--amber { color: var(--c-tertiary); }
.about-fast-item__letter--green { color: var(--c-success); }

.about-fast-item__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--c-white);
    margin-bottom: var(--sp-xs);
}

.about-fast-item__text {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--lh-relaxed);
}

/* ── Audience section ── */
.about-audience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-2xl);
}

.about-audience__heading {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--c-dark);
    margin-bottom: var(--sp-lg);
}

.about-audience__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.about-audience__list li {
    padding-left: var(--sp-lg);
    position: relative;
    font-size: var(--fs-small);
    color: var(--c-text);
    line-height: var(--lh-relaxed);
}

.about-audience__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
}

.about-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.about-skill-tag {
    padding: var(--sp-xs) var(--sp-md);
    background: var(--c-light);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text);
    transition: all var(--transition-fast);
}

.about-skill-tag:hover {
    background: var(--c-primary-50);
    border-color: var(--c-primary-100);
    color: var(--c-primary-dark);
}

/* ── Heritage section (25 ans) ── */
.about-heritage {
    position: relative;
    background: var(--c-dark);
    color: var(--c-white);
    padding: var(--sp-4xl) 0;
    text-align: center;
    overflow: hidden;
}

.about-heritage__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(233, 30, 99, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.about-heritage__content {
    position: relative;
    z-index: 1;
}

.about-heritage__number {
    font-family: var(--ff-display);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    line-height: 1;
    margin-bottom: var(--sp-md);
    opacity: 0.9;
}

.about-heritage__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--c-white);
    margin-bottom: var(--sp-lg);
}

.about-heritage__text {
    font-size: var(--fs-body);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--lh-relaxed);
    max-width: 600px;
    margin: 0 auto var(--sp-2xl);
}

.about-heritage__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
}

.about-heritage__logo img {
    height: 80px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--transition-normal);
}

.about-heritage__logo:hover img {
    opacity: 1;
}

.about-heritage__logo--text {
    font-family: var(--ff-display);
    font-size: 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.about-heritage__logo--text:hover {
    color: var(--c-white);
}

.about-heritage__sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
}

/* ── FAQ ── */
.about-faq {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.about-faq__item {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.about-faq__item:hover {
    border-color: var(--c-primary-100);
}

.about-faq__item[open] {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-sm);
}

.about-faq__question {
    padding: var(--sp-lg) var(--sp-xl);
    font-family: var(--ff-display);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--c-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    transition: color var(--transition-fast);
}

.about-faq__question::-webkit-details-marker {
    display: none;
}

.about-faq__question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: var(--fw-regular);
    color: var(--c-primary);
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.about-faq__item[open] .about-faq__question::after {
    transform: rotate(45deg);
}

.about-faq__question:hover {
    color: var(--c-primary);
}

.about-faq__answer {
    padding: 0 var(--sp-xl) var(--sp-lg);
    font-size: var(--fs-small);
    color: var(--c-text-light);
    line-height: var(--lh-relaxed);
}

/* ── CTA final ── */
.about-cta {
    padding: var(--sp-4xl) 0;
    background: var(--c-surface);
}

.about-cta__title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--c-dark);
    margin-bottom: var(--sp-md);
}

.about-cta__text {
    color: var(--c-text-light);
    max-width: 500px;
    margin: 0 auto var(--sp-xl);
    line-height: var(--lh-relaxed);
}

.about-cta__actions {
    display: flex;
    gap: var(--sp-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .about-fast-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .about-hero {
        padding: calc(var(--header-height) + var(--sp-2xl)) 0 var(--sp-2xl);
        min-height: auto;
    }

    .about-dimensions {
        grid-template-columns: 1fr;
    }

    .about-dimension:not(:last-child)::after {
        top: auto;
        bottom: 0;
        left: 10%;
        right: 10%;
        width: 80%;
        height: 1px;
    }

    .about-audience {
        grid-template-columns: 1fr;
        padding: var(--sp-xl);
    }

    .about-fast-item {
        flex-direction: column;
        text-align: center;
    }

    .about-fast-item__letter {
        width: auto;
    }

    .about-cta__actions {
        flex-direction: column;
    }

    .about-cta__actions .btn {
        width: 100%;
    }

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