@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

.nh-section {
    position:   relative;
    width:      100%;
    height:     640px;
    overflow:   hidden;
    font-family:'Ubuntu', sans-serif;
    box-sizing: border-box;
    background: transparent;
}

/* ─ Cercle 480px ─────────────────────────────────────────────
   centre (580, 250) → top=10px (CY-R=250-240)
   items hauts : s0→y=13  s1→y=169  s2→y=343                */
.nh-section .nh-ellipse {
    position:      absolute;
    width:         480px;
    height:        480px;
    left:          340px;   /* CX - R = 580-240 */
    top:           10px;    /* CY - R = 250-240 */
    border-radius: 50%;
    border:        4px solid #29682D;
    z-index:       2;
    pointer-events:none;
}

/* ─ Image quart de cercle (Figma exact) ──────────────────── */
.nh-section .nh-img-wrap {
    position:      absolute;
    width:         1430px;
    height:        1430px;
    left:          -715px;
    top:           0px;
    border-radius: 50%;
    overflow:      hidden;
    z-index:       3;
    pointer-events:none;
}
.nh-section .nh-img-el {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    border-radius:  50%;
    outline:        8px solid #F3B94B;
    outline-offset: -4px;
}

/* ─ Slots ───────────────────────────────────────────────── */
.nh-section .nh-slots {
    position: absolute;
    inset:    0;
    z-index:  4;
}

/* ─ Item ────────────────────────────────────────────────── */
.nh-section .nh-item {
    position:    absolute;
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    transition:
        left    600ms cubic-bezier(.3,0,.2,1),
        top     600ms cubic-bezier(.3,0,.2,1);
}
.nh-section .nh-item.notrans { transition: none !important; }

/* ─ Texte ───────────────────────────────────────────────── */
.nh-section .nh-text {
    padding-top: 6px;
    max-width:   420px;
}
.nh-section .nh-label {
    color:       #29682D;
    font-size:   22px;
    font-weight: 700;
    line-height: 1.36;
    margin:      0 0 8px;
}
.nh-section .nh-desc {
    color:       #132417;
    font-size:   16px;
    font-weight: 500;
    line-height: 1.26;
    margin:      0;
}

/* ─ Navigation — bas DROIT, 120px au-dessus du bas ───────
   Bas de l'image = bas de la section (y=640)
   Bas des flèches = y=640-120=520 → bottom:120px          */
.nh-section .nh-nav {
    position: absolute;
    bottom:   120px;
    right:    5%;
    display:  flex;
    gap:      14px;
    z-index:  10;
}
.nh-section .nh-btn {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      #29682D;
    border-top:      0.8px solid #F3B94B;
    border-left:     0.8px solid #F3B94B;
    border-right:    0.8px solid #F3B94B;
    border-bottom:   4px solid #F3B94B;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    outline:         none;
    transition:      opacity 0.2s;
}
.nh-section .nh-btn:hover  { opacity: .85; }
.nh-section .nh-btn:active { opacity: .7; }

/* ─ Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .nh-section             { height: 580px; }
    .nh-section .nh-text   { max-width: 340px; }
    .nh-section .nh-label { font-size: 19px; }
}
@media (max-width: 900px) {
    .nh-section             { height: 520px; }
    .nh-section .nh-ellipse { left: 250px; width: 380px; height: 380px; }
    .nh-section .nh-text   { max-width: 250px; }
    .nh-section .nh-label { font-size: 16px; }
    .nh-section .nh-desc  { font-size: 13px; }
}

/* ─ MOBILE (≤ 768px) — layout vertical simplifié ─────────
   On garde la même DA (image cerclée or, icône, couleurs)
   mais on abandonne l'ellipse calculée en pixels :
   • image cerclée centrée en haut
   • slot actif (date + description) au milieu
   • nav en bas
   • slots non-actifs masqués                                  */
@media (max-width: 768px) {

    .nh-section {
        height: auto !important;
        min-height: 0;
        padding: 28px 20px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        overflow: visible;
    }

    /* Ellipse verte : on cache, l'image fait office d'élément central */
    .nh-section .nh-ellipse {
        display: none !important;
    }

    /* Image : passe d'un quart de cercle (1430px) à un disque centré */
    .nh-section .nh-img-wrap {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 220px !important;
        height: 220px !important;
        flex-shrink: 0;
    }
    .nh-section .nh-img-el {
        width: 100% !important;
        height: 100% !important;
        outline-width: 5px !important;
        outline-offset: -2px !important;
    }

    /* Conteneur des slots : flux normal, prend la largeur dispo */
    .nh-section .nh-slots {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    /* Tous les items hors actif : cachés sur mobile */
    .nh-section .nh-item {
        display: none !important;
    }

    /* Slot 0 (actif) : toujours visible, centré, pas de positionnement absolu */
    .nh-section .nh-item[data-slot="0"] {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        opacity: 1 !important;
        width: 100%;
        max-width: 480px;
        align-items: center;
        gap: 14px;
        padding: 0 8px;
    }

    /* Pendant l'animation (notrans = transitions désactivées par le JS) :
       on autorise quand même opacity à transitionner pour un fade smooth */
    .nh-section .nh-item[data-slot="0"]:not(.notrans) {
        transition: opacity 230ms ease !important;
    }

    /* Icône : taille réduite, alignée verticalement */
    .nh-section .nh-item[data-slot="0"] .nh-icon {
        width: 56px;
        height: auto;
        flex-shrink: 0;
    }

    /* Texte : pleine largeur, à gauche de l'icône */
    .nh-section .nh-item[data-slot="0"] .nh-text {
        max-width: none;
        flex: 1;
        padding-top: 0;
        text-align: left;
    }
    .nh-section .nh-label {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 4px;
    }
    .nh-section .nh-desc {
        font-size: 13px;
        line-height: 1.45;
    }

    /* Navigation : centrée sous le contenu */
    .nh-section .nh-nav {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        justify-content: center;
        gap: 18px;
        margin-top: 4px;
    }
    .nh-section .nh-btn {
        width: 50px;
        height: 50px;
    }
}

/* ─ Petit mobile (≤ 380px) ───────────────────────────────── */
@media (max-width: 380px) {
    .nh-section {
        padding: 22px 14px 20px;
        gap: 18px;
    }
    .nh-section .nh-img-wrap {
        width: 180px !important;
        height: 180px !important;
    }
    .nh-section .nh-item[data-slot="0"] .nh-icon {
        width: 48px;
    }
    .nh-section .nh-label { font-size: 15px; }
    .nh-section .nh-desc  { font-size: 12px; }
    .nh-section .nh-btn {
        width: 44px;
        height: 44px;
    }
}