/* =========================================================
   HEADER — PAGE NOTRE HISTOIRE
========================================================= */

.page-story .header:not(.nav-open) .burger {
    color: var(--color-chocolate);
    border-color: rgb(53 24 22 / .25);
}

.page-story .header:not(.nav-open) .header-scroll-logo__img {
    background-color: var(--color-chocolate);
}

.page-story .page-hero {
    --page-hero-image: URL('https://signe-madeleine.ca/wp-content/uploads/2026/08/Madeleine_Ruby.webp');
    --page-hero-accent: var(--color-ruby);
}


/* =========================================================
   STORY ORIGIN
========================================================= */

.story-origin__visual {
    background-color: var(--color-ruby);
    background-image: URL('https://signe-madeleine.ca/wp-content/uploads/2026/08/Madeleines_Ruby-scaled.webp');
}

.story-origin .media-text__quote {
    color: var(--color-ruby);
}


/* =========================================================
   TEAM
========================================================= */

.team {
    position: relative;
    overflow: hidden;

    padding-block: var(--space-lg);

    background: var(--color-milk);
    color: var(--color-chocolate);
}

.team__inner {
    position: relative;
}


/* =========================================================
   TEAM HEADER
========================================================= */

.team-header {
    max-width: 760px;
    margin-bottom: var(--space-lg);
}

.team-header__meta {
    margin-bottom: 0;
}

/* L'ancien contenu WordPress contient encore un second span « 02 ». */
.team-header__meta > :not(.eyebrow) {
    display: none;
}

.team-header h2 {
    max-width: none;
}

.team-header > p {
    max-width: 620px;
    margin: var(--space-md) 0 0;
    color: var(--page-copy-color);
}


/* =========================================================
   PROFILES
========================================================= */

.profiles {
    display: flex;
    flex-direction: column;

    border-top: 1px solid rgb(53 24 22 / .14);
}

.profile {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(360px, .9fr)
        minmax(360px, 1.1fr);

    min-height: 640px;

    border-bottom: 1px solid rgb(53 24 22 / .14);
}


/* Benjamin miroir */

.profile:nth-child(even) .profile-visual {
    grid-column: 2;
}

.profile:nth-child(even) .profile-info {
    grid-column: 1;
    grid-row: 1;
}


/* =========================================================
   PROFILE VISUAL
========================================================= */

.profile-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    background: rgb(247 204 196 / .18);
}

.profile:nth-child(even) .profile-visual {
    background: rgb(247 204 196 / .48);
}


/* NUMÉRO GÉANT */

.profile-index {
    position: absolute;
    left: 4%;
    bottom: -4%;

    font-family: var(--font-primary);
    font-size: clamp(150px, 18vw, 310px);
    font-weight: 600;
    line-height: .75;

    color: rgb(247 204 196 / .55);

    pointer-events: none;
}


/* =========================================================
   PARTICLE PORTRAIT
========================================================= */

.profile-canvas-wrap {
    position: relative;

    width: clamp(300px, 31vw, 500px);
    aspect-ratio: 1;

    flex: none;
}


/* halo beaucoup plus discret */

.profile-halo {
    position: absolute;
    inset: -12%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(223 190 116 / .10),
            transparent 66%
        );

    pointer-events: none;
}


/* anneau */

.profile-ring {
    position: absolute;
    inset: -18px;

    border: 1px solid rgb(53 24 22 / .12);
    border-radius: 50%;

    animation: rotSlow 40s linear infinite;

    pointer-events: none;
}

.profile:nth-child(2) .profile-ring {
    animation-direction: reverse;
    animation-duration: 28s;
}

.profile-ring::after {
    content: "";

    position: absolute;
    top: -3px;
    left: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-caramel);

    transform: translateX(-50%);
}


/* canvas */

.profile-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    pointer-events: none;
}


/* photo */

.profile-photo {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    padding: 10px;

    object-fit: cover;

    border-radius: 50%;

    opacity: 0;
}


/* =========================================================
   PROFILE INFO
========================================================= */

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding:
        clamp(48px, 5vw, 88px)
        clamp(40px, 5vw, 84px);
}

.profile-role {
    margin-bottom: 24px;

    font-family: var(--font-accent);
    font-size: 12px;

    opacity: .5;
}

.profile-name {
    margin: 0;

    font-family: var(--font-primary);
    font-size: clamp(44px, 5vw, 76px);
    font-weight: 600;
    line-height: .9;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.profile-subtitle {
    margin:
        clamp(22px, 2vw, 34px)
        0
        0;

    font-family: var(--font-accent);
    font-size: clamp(14px, 1vw, 17px);

    color: var(--color-hazelnut);
}

.profile-text {
    max-width: 620px;

    margin:
        clamp(28px, 3vw, 44px)
        0
        0;

    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.6;
    color: var(--page-copy-color);
}

.profile-story {
    display: grid;
    gap: 1em;
}

.profile-story p {
    margin: 0;
}

/* .profile-story p:first-child {
    padding-left: clamp(18px, 1.8vw, 28px);
    border-left: 2px solid var(--color-ruby);
    font-family: var(--font-accent);
    font-size: 1.08em;
    line-height: 1.5;
} */


/* =========================================================
   PROFILE LINKS
========================================================= */

.profile-links {
    display: flex;
    gap: 28px;

    margin-top: var(--space-md);
}

.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-chocolate);
    font-family: var(--font-accent);
    font-size: clamp(11px, .8vw, 13px);
    font-weight: 400;
    text-decoration: none;
    border: 0;
    padding: 0;
}

.profile-link svg,
.profile-link::before {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* Compatibilité avec les anciens liens WordPress qui utilisent encore ↗. */
.profile-link:not(.footer-social)::before {
    content: "";
    display: block;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.profile-link:not(.footer-social):first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.86-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.34V8.99h3.41v1.57h.05c.47-.9 1.64-1.86 3.37-1.86 3.6 0 4.27 2.37 4.27 5.46v6.29zM5.33 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.55V8.99h3.56v11.46z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.86-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.34V8.99h3.41v1.57h.05c.47-.9 1.64-1.86 3.37-1.86 3.6 0 4.27 2.37 4.27 5.46v6.29zM5.33 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.55V8.99h3.56v11.46z'/%3E%3C/svg%3E");
}

.profile-link:not(.footer-social):nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85s.01-3.58.07-4.85c.15-3.23 1.66-4.77 4.92-4.92C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95C23.73 2.7 21.31.27 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85s.01-3.58.07-4.85c.15-3.23 1.66-4.77 4.92-4.92C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95C23.73 2.7 21.31.27 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E");
}

.profile-link:not(.footer-social) span {
    display: none;
}

@media (hover: hover) {
    .profile-link:hover {
        color: var(--color-ruby);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    /* ORIGIN */

    /* TEAM */

    .team-header {
        margin-bottom: var(--space-lg);
    }

    .team-header__meta {
        margin-bottom: 0;
    }

    .team-header > p {
        margin-top: var(--space-md);
    }


    /* PROFILES */

    .profile,
    .profile:nth-child(even) {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }

    .profile:nth-child(even) .profile-visual,
    .profile:nth-child(even) .profile-info {
        grid-column: auto;
        grid-row: auto;
    }

    .profile-visual {
        min-height: 440px;
        overflow: hidden;
    }

    .profile-canvas-wrap {
        width: min(72vw, 310px);
    }

    .profile-info {
        padding:
            50px
            0
            70px;
    }

    .profile-name {
        font-size: clamp(44px, 13vw, 64px);
    }

    .profile-links {
        gap: 20px;
    }
}