@charset "utf-8";
/* ===================================================== */
/* STYLE-INDEX-A-PROPOS.CSS — page d'accueil, section 3   */
/* Reprend la page « À propos » (simone-boulanger.html) : */
/* même fond vert sombre, photo à gauche, titre, sous-    */
/* titre et texte blancs, apparition en cascade.          */
/* La section fait une hauteur d'écran : on y montre un   */
/* extrait du texte et un bouton vers la page complète.   */
/* Chargé APRÈS style-index.css et style-index-mobile.css */
/* (d'où les !important). Ne touche NI aux chevrons, NI   */
/* au GSAP.                                               */
/* ===================================================== */

/* =============================== */
/* FOND (renforcé : passe devant   */
/* les fonds bg3 / mobile / tablette) */
/* =============================== */

html body section#s3 {
    background: linear-gradient(120deg, #1f2b26 0%, #2f4038 45%, #4f6158 100%) !important;
}

/* Chevrons de la section 3 : version blanche (fond sombre).
   Seule la couleur change : position et animation inchangées. */
#s3 .next-arrow .chevron-dark  { display: none !important; }
#s3 .next-arrow .chevron-light { display: block !important; }

/* =============================== */
/* MISE EN PAGE                    */
/* =============================== */

#s3 .inner {
    padding: 0 !important;
}

.ap3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 5vw, 90px);
    width: 86vw;
    max-width: 1250px;
    box-sizing: border-box;
    /* place du menu en haut, place du chevron en bas */
    padding: 70px 0 90px 0;
    text-align: left;
}

/* Photo */
.ap3-photo {
    flex: 0 0 auto;
}

#s3 .inner .ap3-photo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(380px, 28vw) !important;
    max-height: 62vh !important;
    margin: 0 !important;
    object-fit: cover !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

/* Texte */
.ap3-texte {
    flex: 1 1 auto;
    max-width: 760px;
    color: #fff;
}

#s3 .ap3-texte h2 {
    margin: 0 0 6px 0 !important;
    font-size: clamp(38px, 3.6vw, 56px) !important;
    font-weight: 200 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    color: #fff !important;
}

#s3 .ap3-texte h3 {
    margin: 0 0 clamp(18px, 3.5vh, 34px) 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.32em !important;
    line-height: 1.6 !important;
    text-transform: uppercase;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

#s3 .ap3-texte p {
    margin: 0 0 16px 0;
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 300;
    line-height: 1.65;
    text-align: justify;
    color: rgba(255, 255, 255, 0.88);
}

/* Version courte du texte : seulement sur les écrans moins hauts / étroits */
.ap3-court { display: none; }

/* Bouton « En savoir plus » (même style que sur la page À propos) */
.ap3-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(8px, 2vh, 20px);
    padding: 0.4rem 1.3rem;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    transition: background 0.4s ease;
}

.ap3-lien:hover {
    background: rgba(255, 255, 255, 0.26);
}

.ap3-lien span {
    font-size: 22px;
    line-height: 1;
}

/* =============================== */
/* ORDINATEUR (≥ 1025 px) : FOND   */
/* CLAIR, comme la section 2 —     */
/* image bg3.jpg + voile chaud ;   */
/* menu, textes, bouton et chevron */
/* en sombre. Tablette et mobile   */
/* gardent le vert sombre.         */
/* =============================== */

@media (min-width: 1025px) {
    html body section#s3 {
        background: #ecebe7 url("../images/bg3.jpg") center / cover no-repeat !important;
        --fond-clair: 1;              /* lu par le script du menu : menu sombre */
    }
    .ap3-texte { color: #222; }
    #s3 .ap3-texte h2 { color: rgba(0, 0, 0, 0.8) !important; }
    #s3 .ap3-texte h3 { color: rgba(0, 0, 0, 0.5) !important; }
    #s3 .ap3-texte p  { color: rgba(0, 0, 0, 0.75); }
    #s3 .inner .ap3-photo img { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); }
    .ap3-lien {
        color: #333;
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.4);
    }
    .ap3-lien:hover { background: rgba(0, 0, 0, 0.1); }
    /* Chevron sombre (seule la couleur change : position inchangée) */
    html body #s3 .next-arrow .chevron-dark  { display: block !important; }
    html body #s3 .next-arrow .chevron-light { display: none !important; }
}

/* Écran d'ordinateur peu haut : un seul paragraphe */
@media (min-width: 1025px) and (max-height: 820px) {
    .ap3-long { display: none; }
}

/* =============================== */
/* TABLETTE (≤ 1024 px) ET MOBILE  */
/* Photo au-dessus, texte court    */
/* =============================== */

@media (max-width: 1024px) {
    .ap3 {
        flex-direction: column;
        gap: clamp(14px, 3vh, 30px);
        width: 100%;
        padding: 70px 30px 120px 30px;
        text-align: center;
    }
    #s3 .inner .ap3-photo img {
        max-width: 70vw !important;
        max-height: 30vh !important;
    }
    .ap3-texte { max-width: 640px; }
    #s3 .ap3-texte h2,
    #s3 .ap3-texte h3 {
        text-align: center !important;
    }
    .ap3-long, .ap3-premier { display: none; }
    .ap3-court { display: block; }
    #s3 .ap3-texte p { font-size: 16px; text-align: center; }   /* texte court, centré */
}

@media (max-width: 768px) {
    .ap3 {
        padding: 64px 22px 120px 22px;   /* chevron mobile plus haut (bottom: 55px) */
    }
    #s3 .inner .ap3-photo img {
        max-height: 28svh !important;
    }
    #s3 .ap3-texte h2 {
        font-size: 30px !important;
    }
    #s3 .ap3-texte h3 {
        font-size: 12px !important;
        letter-spacing: 0.26em !important;
        margin-bottom: 12px !important;
    }
    #s3 .ap3-texte p {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 8px;
    }
    .ap3-lien { font-size: 15px; }
}

/* Très petits téléphones : on retire la photo pour garder le texte lisible */
@media (max-width: 768px) and (max-height: 600px) {
    .ap3-photo { display: none; }
}

/* =============================== */
/* APPARITION EN CASCADE           */
/* (quand la section 3 arrive à    */
/* l'écran — scripts/index-a-propos.js) */
/* Sans le script, tout reste      */
/* visible normalement.            */
/* =============================== */

.ap3-anime .ap3-el {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

/* La photo arrive de la gauche (d'en haut sur tablette / mobile) */
.ap3-anime .ap3-el.ap3-photo {
    transform: translateX(-40px);
}
@media (max-width: 1024px) {
    .ap3-anime .ap3-el.ap3-photo { transform: translateY(-20px); }
}

.ap3-anime .ap3-el.ap3-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ap3-anime .ap3-el {
        opacity: 1;
        transform: none;
        transition: none;
    }
}