/* Page À propos — SYSTEME COMMUN (charge avant les CSS de section).
   Garantit la coherence entre les sections construites separement :
   tokens, wrappers, eyebrow, systeme de reveal au scroll, utilitaires media.
   Chaque section prefixe ses propres classes (hero-, jrn-, val-, cls-). */

.about {
    /* Couleurs */
    --ab-purple: #2F156C;
    --ab-purple-soft: #3A1C77;
    --ab-deep: #160A36;          /* fonds immersifs sombres */
    --ab-cream: #F6F1E7;         /* respirations claires */
    --ab-paper: #FFFFFF;
    --ab-orange: #FF8000;
    --ab-orange-soft: #FFA63D;
    --ab-green: #26D276;
    --ab-ink: #2F156C;
    --ab-on-dark: rgba(255, 255, 255, 0.92);
    --ab-on-dark-dim: rgba(255, 255, 255, 0.74);

    /* Rythme & forme */
    --ab-wrap: 1180px;
    --ab-section-y: clamp(52px, 7vh, 96px);
    --ab-radius: 22px;
    --ab-radius-lg: 32px;
    --ab-shadow: 0 30px 80px rgba(10, 4, 30, 0.45);
    --ab-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    overflow: clip;              /* contient les decors en absolute, pas de scroll-x */
    background: var(--ab-purple);
}

/* Wrapper de contenu centre */
.ab-wrap {
    max-width: var(--ab-wrap);
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 40px);
}

/* Eyebrow (surtitre) — signature orange reutilisable */
.ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ab-orange);
}
.ab-eyebrow::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--ab-orange);
    border-radius: 1px;
}

/* Fil d'Ariane discret (sur fond sombre) */
.about-breadcrumb {
    position: relative;
    z-index: 3;
    padding-block: 20px 0;
    font-size: 0.85rem;
    color: var(--ab-on-dark-dim);
}
.about-breadcrumb a { color: var(--ab-on-dark); transition: color 0.2s; }
.about-breadcrumb a:hover { color: var(--ab-orange); }
.about-bc-sep { margin: 0 8px; }

/* Utilitaire media : image plein cadre + voile degrade pour la lisibilite */
.ab-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--ab-radius);
    background: var(--ab-deep);
}
.ab-media > img,
.ab-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Systeme de reveal au scroll (gere par about/base.js)
   Sans JS (ou si .about-anim absent), les elements restent visibles. */
.about-anim .ab-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ab-ease), transform 0.8s var(--ab-ease);
    will-change: opacity, transform;
}
.about-anim .ab-reveal.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .about-anim .ab-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .about * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}