.apropos-main {
    padding-top: calc(var(--header-height) + var(--space-3xl));
}

.apropos-main .section-header h2,
.apropos-territoire h2 {
    font-size: var(--text-h2);

    text-wrap: balance;
}

.apropos-main .subtitle {
    text-wrap: pretty;
}

.apropos-intro {
    padding-bottom: var(--space-4xl);
    background-color: var(--white);
    background-image: var(--surface-halo);
}

.apropos-intro .section-header {
    margin-bottom: 0;
}

.apropos-eyebrow {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-md);
}

.apropos-intro h1 {
    max-width: 26ch;
    text-wrap: balance;
    color: var(--color-forest);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-md);
}

.apropos-intro h1.animate-on-scroll {
    transition-delay: 0.1s;
}

.apropos-intro .animate-on-scroll:not(.visible) {
    transform: translateY(var(--reveal-shift-sm));
}

.apropos-manifeste {
    padding-bottom: var(--space-5xl);
    background-color: var(--white);
    background-image: var(--surface-halo);
}

.manifeste-grid {
    display: grid;
    gap: var(--space-3xl);
}

.manifeste-item {
    position: relative;
    padding-left: var(--space-lg);
    transition-delay: var(--step-delay, 0s);
}

.manifeste-rule {
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--duration-slow) var(--ease-entrance);
}

.manifeste-item.visible .manifeste-rule {
    transform: scaleY(1);

    transition-delay: calc(var(--step-delay, 0s) + 0.25s);
}

.manifeste-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-badge);
    color: var(--color-primary-dark);
    margin: 0 0 var(--space-md);
}

.manifeste-statement {
    max-width: 34ch;
    font-size: var(--text-statement);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-forest);
    margin: 0;
}

.apropos-valeurs {
    padding: var(--space-5xl) 0;
    background-color: var(--surface-muted);
}

.valeurs-grid {
    display: grid;
    gap: var(--space-lg);
}

.valeur-reveal {
    display: flex;
}

.valeurs-grid .valeur-reveal { transition-delay: var(--step-delay, 0s); }

.valeur-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
}

.valeur-icon {
    font-size: var(--icon-xl);
    color: var(--color-forest);
}

.valeur-card h3 {
    color: var(--color-forest);
    margin: 0;
}

.valeur-card p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--fg2);
    margin: 0;
}

.apropos-approche {
    padding: var(--space-5xl) 0;
    background-color: var(--white);
    background-image: var(--surface-halo);
}

.approche-steps {
    list-style: none;
    display: grid;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
}

.approche-steps > li { transition-delay: var(--step-delay, 0s); }
.approche-steps > li .approche-step::before { transition-delay: calc(var(--step-delay, 0s) + 0.2s); }

.approche-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-top: var(--space-md);
}

.approche-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2.75rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-medium) var(--ease-entrance);
}

.approche-step-reveal.visible .approche-step::before {
    transform: scaleX(1);
}

.approche-num {
    line-height: var(--leading-tight);
    color: var(--fg2);

    font-variant-numeric: tabular-nums;
}

.approche-step h3 {
    color: var(--color-forest);
    margin: var(--space-2xs) 0 0;
}

.approche-step p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--fg2);
    margin: 0;
}

@property --sonar-r {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.apropos-territoire {
    --station-x: 82%;
    --station-y: 78%;
    --station-size: 56px;
    --sonar-reach: 1400px;
    position: relative;
    overflow: hidden;
    padding: var(--space-5xl) 0;
    background-color: var(--color-forest-light);
    color: var(--fg-on-dark);
}

.apropos-territoire::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    --sonar-r: var(--sonar-reach);
    background-image:
        radial-gradient(circle at var(--station-x) var(--station-y),
            var(--white-08) 0, var(--white-03) 26%, transparent 58%),
        radial-gradient(circle at var(--station-x) var(--station-y),
            transparent 149px,  var(--white-05) 149px,  var(--white-05) 150px,  transparent 150px,
            transparent 289px,  var(--white-05) 289px,  var(--white-05) 290px,  transparent 290px,
            transparent 459px,  var(--white-05) 459px,  var(--white-05) 460px,  transparent 460px,
            transparent 659px,  var(--white-03) 659px,  var(--white-03) 660px,  transparent 660px,
            transparent 889px,  var(--white-03) 889px,  var(--white-03) 890px,  transparent 890px,
            transparent 1149px, var(--white-03) 1149px, var(--white-03) 1150px, transparent 1150px);
    -webkit-mask-image: radial-gradient(circle at var(--station-x) var(--station-y),
                            #000 0,
                            #000 calc(var(--sonar-r) * 0.28),
                            transparent var(--sonar-r));
            mask-image: radial-gradient(circle at var(--station-x) var(--station-y),
                            #000 0,
                            #000 calc(var(--sonar-r) * 0.28),
                            transparent var(--sonar-r));
    transition: --sonar-r var(--duration-sonar) var(--ease-scroll) 0.35s;
}

.apropos-territoire:has(h2:not(.visible))::before {
    --sonar-r: 0px;
}

@keyframes sonar-safety-net-sweep {
    to { --sonar-r: var(--sonar-reach); }
}

html.is-loading .apropos-territoire::before {
    animation: sonar-safety-net-sweep var(--duration-sonar) 2s forwards;
}

.apropos-territoire::after {
    content: '';
    position: absolute;
    left: var(--station-x);
    top: var(--station-y);
    width: var(--station-size);
    height: var(--station-size);
    transform: translate(-50%, -50%);
    background-image: url('../assets/logo-monogramme-noir.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    transition: opacity var(--duration-slow) ease-out,
                transform var(--duration-reveal) var(--ease-scroll);
}

.apropos-territoire:has(h2:not(.visible))::after {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--reveal-shift)));
}

@keyframes station-safety-net-reveal {
    to { opacity: 1; transform: translate(-50%, -50%); }
}

html.is-loading .apropos-territoire::after {
    animation: station-safety-net-reveal var(--duration-slow) 2s forwards;
}

.territoire-content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.territoire-eyebrow.animate-on-scroll  { transition-delay: 0s; }
.apropos-territoire h2.animate-on-scroll { transition-delay: 0.08s; }
.apropos-territoire p.animate-on-scroll  { transition-delay: 0.16s; }
.territoire-regions.animate-on-scroll    { transition-delay: var(--registre-start); }

.territoire-eyebrow {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.apropos-territoire h2 {
    letter-spacing: var(--tracking-tight);
    color: var(--fg-on-dark);
    margin: 0 0 var(--space-md);
}

.apropos-territoire p {
    line-height: var(--leading-relaxed);
    color: var(--fg-on-dark-muted);
    margin: 0;
}

.territoire-regions {
    --registre-start: 0.24s;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;

    margin: var(--space-xl) 0 0;
    padding: 0;
    text-align: left;
}

.territoire-regions li {
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--white-10);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: var(--fg-on-dark);
    transition: opacity var(--duration-base) ease-out;
}

.territoire-regions:not(.visible) li {
    opacity: 0;
}

.territoire-regions li:nth-child(1) { transition-delay: calc(var(--registre-start) + 0.03s); }
.territoire-regions li:nth-child(2) { transition-delay: calc(var(--registre-start) + 0.06s); }
.territoire-regions li:nth-child(3) { transition-delay: calc(var(--registre-start) + 0.09s); }
.territoire-regions li:nth-child(4) { transition-delay: calc(var(--registre-start) + 0.12s); }
.territoire-regions li:nth-child(5) { transition-delay: calc(var(--registre-start) + 0.15s); }
.territoire-regions li:nth-child(6) { transition-delay: calc(var(--registre-start) + 0.18s); }
.territoire-regions li:nth-child(7) { transition-delay: calc(var(--registre-start) + 0.21s); }
.territoire-regions li:nth-child(8) { transition-delay: calc(var(--registre-start) + 0.24s); }

html.is-loading .territoire-regions li {
    animation: fouc-safety-net-reveal var(--duration-slow) 2s forwards;
}

@media (min-width: 841px) {
    .manifeste-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .manifeste-grid .manifeste-item:nth-child(2) { --step-delay: 0.08s; }

    .valeurs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .valeurs-grid .valeur-reveal:nth-child(even) { --step-delay: 0.08s; }

    .approche-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl) var(--space-xl);
    }

    .approche-steps > li:nth-child(even) { --step-delay: 0.08s; }

    .territoire-regions {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-3xl);
    }
}

@media (min-width: 950px) {
    .valeurs-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .valeurs-grid .valeur-reveal:nth-child(1) { --step-delay: 0s; }
    .valeurs-grid .valeur-reveal:nth-child(2) { --step-delay: 0.08s; }
    .valeurs-grid .valeur-reveal:nth-child(3) { --step-delay: 0.16s; }
    .valeurs-grid .valeur-reveal:nth-child(4) { --step-delay: 0.24s; }

    .approche-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }

    .approche-steps > li:nth-child(1) { --step-delay: 0s; }
    .approche-steps > li:nth-child(2) { --step-delay: 0.08s; }
    .approche-steps > li:nth-child(3) { --step-delay: 0.16s; }
    .approche-steps > li:nth-child(4) { --step-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {

    .apropos-main .animate-on-scroll,
    .apropos-intro .animate-on-scroll:not(.visible) {
        transform: none;
        transition: opacity var(--duration-base) ease-out;
    }

    .manifeste-rule,
    .approche-step::before {
        transform: none;
        transition: none;
    }

    .apropos-territoire:has(h2:not(.visible))::after {
        transform: translate(-50%, -50%);
    }

    .apropos-territoire:has(h2:not(.visible))::before {
        --sonar-r: var(--sonar-reach);
    }

}