/* ==========================================================================
   Hero d'accueil — isabellejamin.fr
   Étend le composant .ij-hero (hero-interne.css doit être chargé AVANT).
   Spécificités accueil : double visuel (paysage + portrait), slogan en accent,
   et 3 portes d'entrée Corps / Esprit / Mouvement posées sur la vague.
   ========================================================================== */

.ij-hero--home {
    --ij-accent: var(--ij-teal);
    --ij-accent-ink: #2E7171;
    --ij-tint: #EEF7F7;
    padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}

/* Halo bicolore : les 3 piliers se mélangent en fond */
.ij-hero--home::before {
    background:
        radial-gradient(circle at 25% 30%, var(--ij-coral) 0%, transparent 55%),
        radial-gradient(circle at 75% 60%, var(--ij-teal) 0%, transparent 60%);
    opacity: .16;
}

/* Titre : H1 SEO en sans-serif, slogan de marque en manuscrit */
.ij-hero--home .ij-hero__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.ij-hero--home .ij-hero__title em { font-size: 1.1em; }
.ij-hero--home .ij-hero__title em .c { color: #B7412C; }  /* Corps */
.ij-hero--home .ij-hero__title em .e { color: #2E7171; }  /* Esprit */
.ij-hero--home .ij-hero__title em .m { color: #1D6680; }  /* Mouvement */
.ij-hero--home .ij-hero__title em .sep { color: var(--ij-ink-soft); }

/* Signature praticienne */
.ij-hero__signature {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    font-size: .9375rem;
    color: var(--ij-ink-soft);
}
.ij-hero__signature strong { display: block; color: var(--ij-ink); font-size: 1rem; }

/* Visuel double : paysage en galet + portrait en médaillon */
.ij-hero__portrait {
    position: absolute;
    right: -2%;
    bottom: 4%;
    width: 34%;
    height: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 16px 32px -16px rgba(30, 43, 43, .4);
}
.ij-hero--home .ij-hero__card { left: -8%; bottom: auto; top: 10%; }

/* -- Portes d'entrée piliers ------------------------------------------------ */
.ij-pillars {
    position: relative;
    z-index: 1;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
.ij-pillars::before {               /* fond blanc qui prolonge la vague */
    content: "";
    position: absolute;
    z-index: -1;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: var(--bs-body-bg, #fff);
}

.ij-pillars .ij-hero__wave { bottom: calc(55% - 1px); }

.ij-pillar {
    --p-accent: var(--ij-teal);
    --p-ink: #2E7171;
    --p-tint: #EEF7F7;
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 100%;
    padding: 1.25rem 1.25rem 1.25rem 1rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 18px 40px -24px rgba(30, 43, 43, .35);
    color: var(--ij-ink);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ij-pillar--corps     { --p-accent: var(--ij-coral); --p-ink: #B7412C; --p-tint: #FDF3F0; }
.ij-pillar--esprit    { --p-accent: var(--ij-teal);  --p-ink: #2E7171; --p-tint: #EEF7F7; }
.ij-pillar--mouvement { --p-accent: #7FC3D6;         --p-ink: #1D6680; --p-tint: #EEF6F9; }

.ij-pillar:hover,
.ij-pillar:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -24px rgba(30, 43, 43, .45);
    color: var(--ij-ink);
}
.ij-pillar:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }

.ij-pillar__thumb {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--ij-radius-pebble);
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--p-tint);
}
.ij-pillar__body { min-width: 0; flex: 1; }
.ij-pillar__kicker {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--p-ink);
}
.ij-pillar__title {
    display: block;
    margin-top: .1rem;
    font-family: var(--ij-font-script);
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--ij-ink);
}
.ij-pillar__text { display: block; margin-top: .2rem; font-size: .875rem; color: var(--ij-ink-soft); }
.ij-pillar__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--p-tint);
    color: var(--p-ink);
    transition: transform .25s ease;
}
.ij-pillar:hover .ij-pillar__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .ij-pillar, .ij-pillar__arrow { transition: none; }
    .ij-pillar:hover { transform: none; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .ij-pillar__arrow { display: none; }
}
@media (max-width: 991.98px) {
    .ij-hero--home .ij-hero__card { display: none; }
    .ij-pillars::before { height: 85%; }
    .ij-pillars .ij-hero__wave { bottom: calc(85% - 1px); }
    .ij-hero__portrait { width: 32%; right: -6%; }
}