/* ==========================================================================
   Hero interne unifié — isabellejamin.fr
   Composant : .ij-hero  (toutes les pages sauf l'accueil)
   Dépend de : Bootstrap 5.3, Bootstrap Icons, Dancing Script (déjà chargés)
   Variantes pilier : .ij-hero--corps | --esprit | --mouvement | --pro
   ========================================================================== */

/* -- Tokens --------------------------------------------------------------- */
.ij-hero {
    /* Couleurs de marque (reprises de :root du site) */
    --ij-teal:        var(--bs-primary, #6DC0C0);
    --ij-coral:       var(--bs-secondary, #FD715B);

    /* Encres accessibles (contraste ≥ 4.5:1 sur fond clair) */
    --ij-ink:         #1E2B2B;   /* texte principal */
    --ij-ink-soft:    #4A5A5A;   /* texte secondaire */
    --ij-btn:         #2E7171;   /* bouton principal : 5.6:1 avec blanc */
    --ij-btn-hover:   #245C5C;

    /* Accent par défaut = Esprit (teal) — surchargé par les variantes */
    --ij-accent:      var(--ij-teal);   /* formes décoratives */
    --ij-accent-ink:  #2E7171;          /* mot en script, pastille */
    --ij-tint:        #EEF7F7;          /* fond de section */

    --ij-radius-pebble: 58% 42% 46% 54% / 52% 44% 56% 48%;
    --ij-font-script: var(--fontTitle, "Dancing Script", cursive);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ij-tint);
    color: var(--ij-ink);
    padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
}

/* Variantes pilier : mêmes repères visuels que les catégories d'articles */
.ij-hero--corps     { --ij-accent: var(--ij-coral); --ij-accent-ink: #B7412C; --ij-tint: #FDF3F0; }
.ij-hero--esprit    { --ij-accent: var(--ij-teal);  --ij-accent-ink: #2E7171; --ij-tint: #EEF7F7; }
.ij-hero--mouvement { --ij-accent: #7FC3D6;         --ij-accent-ink: #1D6680; --ij-tint: #EEF6F9; }
.ij-hero--pro       { --ij-accent: #9DB0C4;         --ij-accent-ink: #3A4D63; --ij-tint: #F1F4F7; }

/* -- Halo organique en arrière-plan ---------------------------------------- */
.ij-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -20% auto auto -12%;
    width: min(60vw, 640px);
    aspect-ratio: 1;
    border-radius: var(--ij-radius-pebble);
    background: radial-gradient(circle at 30% 30%, var(--ij-accent) 0%, transparent 68%);
    opacity: .18;
}

/* -- Fil d'Ariane intégré --------------------------------------------------- */
.ij-hero .breadcrumb {
    --bs-breadcrumb-divider-color: var(--ij-ink-soft);
    --bs-breadcrumb-item-active-color: var(--ij-ink-soft);
    font-size: .875rem;
    margin-bottom: 1.25rem;
}
.ij-hero .breadcrumb a { color: var(--ij-ink-soft); text-decoration: none; }
.ij-hero .breadcrumb a:hover { color: var(--ij-accent-ink); text-decoration: underline; }

/* -- Pastille pilier --------------------------------------------------------- */
.ij-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border-radius: 50rem;
    background: #fff;
    color: var(--ij-accent-ink);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(30, 43, 43, .06);
}
.ij-hero__eyebrow::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--ij-accent);
}

/* -- Titre : sans-serif lisible + accent manuscrit ------------------------- */
.ij-hero__title {
    margin: 1rem 0 0;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: var(--ij-ink);
}
.ij-hero__title em {
    display: block;
    margin-top: .15em;
    font-family: var(--ij-font-script);
    font-style: normal;
    font-weight: 600;
    font-size: 1.15em;
    line-height: 1.05;
    color: var(--ij-accent-ink);
}

.ij-hero__lead {
    max-width: 34rem;
    margin: 1.25rem 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ij-ink-soft);
}

/* -- Appels à l'action ------------------------------------------------------- */
.ij-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.ij-hero .btn-ij {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ij-btn);
    --bs-btn-border-color: var(--ij-btn);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ij-btn-hover);
    --bs-btn-hover-border-color: var(--ij-btn-hover);
    --bs-btn-active-bg: var(--ij-btn-hover);
    --bs-btn-focus-shadow-rgb: 46, 113, 113;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .8rem;
    --bs-btn-border-radius: 50rem;
    font-weight: 600;
}
.ij-hero .btn-ij-ghost {
    --bs-btn-color: var(--ij-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--ij-accent-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--ij-accent);
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .8rem;
    --bs-btn-border-radius: 50rem;
    font-weight: 600;
}
.ij-hero .btn-ij .bi,
.ij-hero .btn-ij-ghost .bi { transition: transform .2s ease; }
.ij-hero .btn-ij:hover .bi-arrow-right,
.ij-hero .btn-ij-ghost:hover .bi-arrow-right { transform: translateX(3px); }

/* -- Réassurance ------------------------------------------------------------- */
.ij-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    color: var(--ij-ink-soft);
}
.ij-hero__trust li { display: inline-flex; align-items: center; gap: .45rem; }
.ij-hero__trust .bi { color: var(--ij-accent-ink); font-size: 1.05rem; }

/* -- Visuel : galet organique + anneau décalé ------------------------------- */
.ij-hero__media {
    position: relative;
    width: min(100%, 520px);
    margin-inline: auto;
}
.ij-hero__media::before {             /* anneau décalé */
    content: "";
    position: absolute;
    inset: 4% -4% -4% 4%;
    border: 2px solid var(--ij-accent);
    border-radius: var(--ij-radius-pebble);
    opacity: .55;
}
.ij-hero__img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--ij-radius-pebble);
    box-shadow: 0 24px 48px -24px rgba(30, 43, 43, .35);
}

/* Carte flottante (info clé : durée, prochain atelier, tarif…) */
.ij-hero__card {
    position: absolute;
    left: -6%;
    bottom: 8%;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 20rem;
    padding: .85rem 1.1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 32px -12px rgba(30, 43, 43, .3);
    font-size: .875rem;
    line-height: 1.35;
    color: var(--ij-ink-soft);
}
.ij-hero__card strong { display: block; color: var(--ij-ink); font-size: .9375rem; }
.ij-hero__card-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ij-tint);
    color: var(--ij-accent-ink);
    font-size: 1.15rem;
}

/* -- Vague de transition vers la page --------------------------------------- */
.ij-hero__wave {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(32px, 5vw, 64px);
    color: var(--bs-body-bg, #fff);
}

/* -- Entrée douce ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .ij-hero__content > * { animation: ij-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
    .ij-hero__content > :nth-child(2) { animation-delay: .06s; }
    .ij-hero__content > :nth-child(3) { animation-delay: .12s; }
    .ij-hero__content > :nth-child(4) { animation-delay: .18s; }
    .ij-hero__content > :nth-child(5) { animation-delay: .24s; }
    .ij-hero__media { animation: ij-rise .9s .1s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes ij-rise { from { opacity: 0; transform: translateY(14px); } }

/* -- Mobile ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .ij-hero__media { width: min(78%, 360px); margin-bottom: 2rem; }
    .ij-hero__card  { left: auto; right: -8%; bottom: -4%; max-width: 13rem; }
}
@media (max-width: 575.98px) {
    .ij-hero__actions .btn { flex: 1 1 100%; }
    .ij-hero__card { display: none; }
}