/* =====================================================================
   INKADH — Widget : Hero Carousel
   ===================================================================== */
.inkadh-hero {
    position: relative;
    overflow: hidden;
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    display: grid;               /* slides empilées dans une seule cellule → crossfade + hauteur stable */
}
.inkadh-hero.is-loading {
    opacity: 0;
    visibility: hidden;
}
.inkadh-hero.is-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}
/* Admin bar (32px) visible when logged in */
.admin-bar .inkadh-hero {
    height: calc(100vh - 132px);
    max-height: calc(100vh - 132px);
}
.inkadh-hero-slide {
    grid-area: 1 / 1;                /* toutes les slides dans la même cellule */
    display: flex;
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    align-items: stretch;
    justify-content: center;
    position: relative;
    background-color: #071338;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.inkadh-hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.admin-bar .inkadh-hero-slide {
    height: calc(100vh - 132px);
    max-height: calc(100vh - 132px);
}
.inkadh-hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .7s ease;
}

/* Apparition progressive du contenu de la slide active (rise + fade, GPU) */
@keyframes inkadh-hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.inkadh-hero-slide.active .inkadh-hero-title { animation: inkadh-hero-rise .6s .10s cubic-bezier(.4,0,.2,1) both; }
.inkadh-hero-slide.active .inkadh-hero-desc  { animation: inkadh-hero-rise .6s .22s cubic-bezier(.4,0,.2,1) both; }
.inkadh-hero-slide.active .inkadh-hero-btns  { animation: inkadh-hero-rise .6s .34s cubic-bezier(.4,0,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
    .inkadh-hero-slide { transition-duration: .01ms; }
    .inkadh-hero-slide.active .inkadh-hero-title,
    .inkadh-hero-slide.active .inkadh-hero-desc,
    .inkadh-hero-slide.active .inkadh-hero-btns { animation-duration: .01ms; }
}

/* decorative circles */
.inkadh-hero-slide::before,
.inkadh-hero-slide::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.07);
    pointer-events: none;
}
.inkadh-hero-slide::before { width:380px; height:380px; top:-90px; left:50%; transform:translateX(-50%); }
.inkadh-hero-slide::after  { width:280px; height:280px; bottom:-100px; right:-60px; }
.inkadh-hero-circle-deco {
    position:absolute; width:180px; height:180px; border-radius:50%;
    border:1.5px dashed rgba(255,255,255,0.06); top:8px; left:55%;
    pointer-events:none; z-index:1;
}

.inkadh-hero-inner {
    display:flex !important; align-items:center !important; justify-content:center !important; gap:0 !important;
    width:100% !important; max-width:1140px !important; margin:0 auto !important;
    padding:70px 60px 0 60px !important;
    position:relative !important; z-index:2 !important; height:100% !important;
}
.inkadh-hero-content { flex:0 0 auto; max-width:560px; width:100%; text-align:center; }
.inkadh-hero-title {
    font-size:2.2rem; font-weight:600; color:#fff; line-height:1.3; margin-bottom:28px;
}
.inkadh-hero-badge {
    display:inline-block; background:#2342F7; color:#fff;
    padding:4px 18px 6px; border-radius:2px; font-weight:700;
}
.inkadh-hero-desc {
    color:#fff; font-size:0.95rem; max-width:500px;
    line-height:1.7; margin-bottom:36px;
}
.inkadh-hero-desc p,
.inkadh-hero-desc span,
.inkadh-hero-desc a { color:inherit; }
.inkadh-hero-desc p:last-child { margin-bottom:0; }
.inkadh-hero-title p { display:inline; margin:0; }
.inkadh-hero-btns { display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; width:100%; }
.inkadh-btn-solid {
    background:#fff; color:#071338; font-weight:700; font-size:0.95rem;
    padding:11px 28px; border:2px solid #fff; border-radius:8px;
    text-decoration:none; transition:all .25s;
}
.inkadh-btn-solid:hover { background:transparent; color:#fff; }
.inkadh-btn-outline {
    background:transparent; color:#fff; font-weight:700; font-size:0.95rem;
    padding:11px 28px; border:2px solid #2342F7; border-radius:8px;
    text-decoration:none; transition:all .25s;
}
.inkadh-btn-outline:hover { background:#2342F7; color:#fff; }

.inkadh-hero-img-wrapper {
    flex:0 0 auto; display:flex; align-items:flex-end;
    margin-left:150px; align-self:flex-end;
}
.inkadh-hero-person {
    height: calc(100vh - 130px); width:auto; max-width:480px; object-fit:contain;
    display:block; filter:drop-shadow(0 8px 32px rgba(10,24,75,0.5));
}

/* controls — override .inkadh-carousel-btn generic rule via higher specificity */
.inkadh-hero .inkadh-carousel-btn {
    width:59px !important;
    height:59px !important;
    border-radius:40px !important;
    border:2px solid rgba(255,255,255,0.36) !important;
}
.inkadh-hero .inkadh-carousel-btn svg {
    width:22px !important;
    height:22px !important;
    pointer-events:none;
    color: rgba(255,255,255,0.407) !important;
}
.inkadh-hero-btn-prev { left:70px !important; }
.inkadh-hero-btn-next { right:70px !important; }

.inkadh-hero-dots {
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:10;
}
.inkadh-hero-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,0.35); cursor:pointer;
    transition:background .2s, transform .2s;
}
.inkadh-hero-dot.active { background:#fff; transform:scale(1.25); }

@media (max-width: 1100px) {
    .inkadh-hero-inner {
        padding-left:   80px !important;
        padding-right:  40px !important;
        max-width: 100% !important;
    }
    .inkadh-hero-img-wrapper { margin-left: 60px; }
    .inkadh-hero-person      { max-width: 360px; }
    .inkadh-hero-btn-prev    { left: 16px !important; }
    .inkadh-hero-btn-next    { right: 16px !important; }
}

@media (max-width: 900px) {
    /* Hauteur auto sur tablette/mobile */
    .inkadh-hero,
    .inkadh-hero-slide {
        height: auto !important;
        max-height: none !important;
        min-height: 560px;
    }
    .admin-bar .inkadh-hero,
    .admin-bar .inkadh-hero-slide {
        height: auto !important;
        max-height: none !important;
    }

    /* Colonne : texte au-dessus, image en dessous */
    .inkadh-hero-inner {
        flex-direction:  column !important;
        align-items:     center !important;
        justify-content: center !important;
        padding-top:     48px !important;
        padding-bottom:  0    !important;
        padding-left:    36px !important;
        padding-right:   36px !important;
        height: auto !important;
        gap: 24px !important;
    }

    .inkadh-hero-content {
        max-width: 100%;
        text-align: center;
        align-self: center;
    }
    .inkadh-hero-btns    { justify-content: center; }
    .inkadh-hero-title   { font-size: 2rem; }
    .inkadh-hero-desc    { max-width: 100%; margin-left: auto; margin-right: auto; }

    .inkadh-hero-img-wrapper { display: none; }

    /* Boutons nav plus petits, collés aux bords */
    .inkadh-hero .inkadh-carousel-btn {
        width:  44px !important;
        height: 44px !important;
    }
    .inkadh-hero-btn-prev { left:  10px !important; }
    .inkadh-hero-btn-next { right: 10px !important; }
}

/* ===== Mobile (≤768px) : carousel piloté au SWIPE, dots en bas ===== */
@media (max-width: 768px) {
    /* Les flèches latérales chevauchaient le texte → on les masque.
       Navigation par glissement (swipe) + dots tactiles à la place. */
    .inkadh-hero .inkadh-carousel-btn { display: none !important; }

    /* Contenu centré, confortable, avec de la place en bas pour les dots */
    .inkadh-hero-inner {
        justify-content: center !important;
        padding-top: 40px !important;
        padding-bottom: 76px !important;   /* réserve l'espace des dots : plus aucun chevauchement */
    }

    /* Dots plus grands, centrés, bien visibles, faciles à toucher */
    .inkadh-hero-dots {
        bottom: 26px;
        gap: 12px;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(7,19,56,.28);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .inkadh-hero-dot {
        width: 9px;
        height: 9px;
        background: rgba(255,255,255,.5);
    }
    .inkadh-hero-dot.active {
        background: #fff;
        transform: scale(1.5);
    }

    /* Zone de glissement fluide (le swipe horizontal ne bloque pas le scroll vertical) */
    .inkadh-hero-slide { touch-action: pan-y; }
}

@media (max-width: 600px) {
    .inkadh-hero,
    .inkadh-hero-slide   { min-height: 480px; }

    .inkadh-hero-inner {
        padding-top:   36px !important;
        padding-left:  20px !important;
        padding-right: 20px !important;
        gap: 16px !important;
    }

    .inkadh-hero-title  { font-size: 1.6rem; }
    .inkadh-hero-badge  { font-size: 0.82rem; }
    .inkadh-hero-desc   { font-size: 0.88rem; }

    .inkadh-hero-btns {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .inkadh-btn-solid,
    .inkadh-btn-outline { font-size: 0.88rem; padding: 10px 22px; width: 100%; text-align: center; }

    /* Cacher les décors sur très petit écran */
    .inkadh-hero-circle-deco          { display: none; }
    .inkadh-hero-slide::before,
    .inkadh-hero-slide::after          { display: none; }
}

@media (max-width: 400px) {
    .inkadh-hero,
    .inkadh-hero-slide   { min-height: 420px; }
    .inkadh-hero-title   { font-size: 1.35rem; }
    .inkadh-hero-inner {
        padding-left:  14px !important;
        padding-right: 14px !important;
    }
}