/* =========================================================
   Animations du site AEIC (communes aux 6 pages)
   ========================================================= */

/* Défilement fluide vers les ancres (ex : actions.html#education),
   en laissant la place du menu fixe en haut */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* ---------- Transition douce entre les pages ---------- */
/* Chrome, Edge, Safari récents : fondu entre deux pages du site.
   Les autres navigateurs changent de page normalement. */
@view-transition {
    navigation: auto;
}

/* Le menu reste immobile pendant le changement de page */
header#header {
    view-transition-name: site-header;
}

::view-transition-old(root) {
    animation: aeic-page-out 0.35s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: aeic-page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes aeic-page-out {
    to { opacity: 0; transform: translateY(-15px); }
}

@keyframes aeic-page-in {
    from { opacity: 0; transform: translateY(20px); }
}

/* ---------- Barre de progression de lecture ---------- */
.aeic-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 1100;
    pointer-events: none;
}

/* ---------- Apparition des blocs au défilement ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.reveal-left  { transform: translateX(-50px); }
.reveal.reveal-right { transform: translateX(50px); }
.reveal.reveal-zoom  { transform: scale(0.9); }

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Le trait sous les titres de section se dessine */
.section-title.reveal h2:after {
    width: 0;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.section-title.reveal.is-visible h2:after {
    width: 70px;
}

/* ---------- Bandeau du haut des pages intérieures ---------- */
.page-header {
    background-size: 200% 200% !important;
    animation: aeic-gradient 14s ease infinite;
}

.page-header h1 {
    animation: aeic-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-header p,
.page-header .breadcrumb {
    animation: aeic-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes aeic-fade-up {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: none; }
}

@keyframes aeic-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Section « Notre impact » : bords en biais ---------- */
/* Adoucit le passage entre les sections blanches et le bloc bleu */
.stats {
    clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
    padding-top: 120px;
    padding-bottom: 120px;
}

@media (max-width: 768px) {
    .stats {
        clip-path: polygon(0 25px, 100% 0, 100% calc(100% - 25px), 0 100%);
        padding-top: 90px;
        padding-bottom: 90px;
    }
}

/* ---------- Petits effets au survol ---------- */
.about-image img,
.action-image img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-image:hover img {
    transform: scale(1.04);
}

.stat-item {
    transition: transform 0.4s ease;
}

.stat-item:hover {
    transform: translateY(-6px);
}

/* ---------- Respect des personnes sensibles aux animations ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal,
    .reveal.reveal-left,
    .reveal.reveal-right,
    .reveal.reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .section-title.reveal h2:after { width: 70px; transition: none; }
    .page-header,
    .page-header h1,
    .page-header p,
    .page-header .breadcrumb { animation: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
    .aeic-progress { display: none; }
}