/* ============================================================
   HEADER CSS – Dijon Actualités
   Basé sur le CSS extrait de franceinfo.fr
   ============================================================ */

/* --- Polices Brown (franceinfo) --- */
@font-face {
    font-display: swap;
    font-family: BrownRegular;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/brown-regular/Brown-Regular.woff2") format("woff2"),
         url("../fonts/brown-regular/Brown-Regular.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: BrownBold;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/brown-bold/Brown-Bold.woff2") format("woff2"),
         url("../fonts/brown-bold/Brown-Bold.woff") format("woff");
}

/* --- Variables globales (:root) --- */
:root {
    --small: 560px;
    --medium: 880px;
    --large: 1200px;
    --header-mobile-height: 60px;
    --container-max-width: 1440px;
    --z-index-sticky-nav: 10;
    --z-index-dropdown: 50;
    --z-index-header: 60;
    --z-index-drawer: 80;
    --font-family: BrownRegular, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
    --font-family-bold: BrownBold, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
}

/* --- Reset minimal --- */
html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10px */
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

body {
    font: 1.5rem/2.2rem Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1;
    overflow-x: hidden;
    background-color: #fff;
    color: #202020;
}

body.no-scroll {
    overflow: hidden;
}

/* --- Screen-reader only --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   RESPONSIVE UTILITY CLASSES (hidden-on-*)
   Identique au source franceinfo
   ============================================================ */
@media screen and (max-width: 559px) {
    .hidden-on-xs { display: none !important; visibility: hidden !important; }
}
@media screen and (min-width: 560px) and (max-width: 879px) {
    .hidden-on-small { display: none !important; visibility: hidden !important; }
}
@media screen and (min-width: 880px) and (max-width: 1199px) {
    .hidden-on-medium { display: none !important; visibility: hidden !important; }
}
@media screen and (min-width: 1200px) {
    .hidden-on-large { display: none !important; visibility: hidden !important; }
}
@media screen and (max-width: 879px) {
    .hidden-on-xs-small { display: none !important; visibility: hidden !important; }
}
@media screen and (max-width: 1199px) {
    .hidden-on-xs-small-medium { display: none !important; visibility: hidden !important; }
}
@media screen and (min-width: 560px) and (max-width: 1199px) {
    .hidden-on-small-medium { display: none !important; visibility: hidden !important; }
}
@media screen and (min-width: 880px) {
    .hidden-on-medium-large { display: none !important; visibility: hidden !important; }
}

/* ============================================================
   HEADER (conteneur principal)
   ============================================================ */
.header {
    --header-border-color: #414141;
    --header-separator-color: #414141;
    --sub-header-bg-color: transparent;
    --outline-color: #fff;
    --baseIndex: 1;
    background-color: #131518;
    position: sticky;
    top: 0;
    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
    width: 100vw;
    will-change: transform;
    z-index: calc(var(--z-index-header));
}

.header.header--hidden {
    transform: translateY(-100%);
}

/* ============================================================
   ANIMATED ICON (icônes CSS pur, comme franceinfo)
   ============================================================ */
.animated-icon {
    --color: var(--icon-color, #5c5c5c);
    --color-played: var(--icon-color-played, #202020);
    --color-dark: var(--icon-color-dark, #b9b9b9);
    --color-played-dark: var(--icon-color-played-dark, #f8f8f8);
    min-height: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.animated-icon--dark {
    --color: var(--color-dark);
    --color-played: var(--color-played-dark);
}

/* --- menu-cross (burger ↔ croix) --- */
.animated-icon--menu-cross-line,
.animated-icon--menu-cross-line::before,
.animated-icon--menu-cross-line::after {
    background-color: var(--color);
    height: 1.5px;
    width: 16px;
}

.animated-icon--menu-cross-line {
    position: relative;
    transition: background-color .15s cubic-bezier(.645, .045, .355, 1);
}

.animated-icon--menu-cross-line::before,
.animated-icon--menu-cross-line::after {
    content: "";
    left: 0;
    position: absolute;
    transition-duration: .3s;
    transition-property: transform, background-color, width;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
}

.animated-icon--menu-cross-line::before { top: -5px; }
.animated-icon--menu-cross-line::after  { top:  5px; }

/* État ouvert : croix */
.animated-icon--menu-cross.animated-icon--played .animated-icon--menu-cross-line {
    background-color: transparent;
}
.animated-icon--menu-cross.animated-icon--played .animated-icon--menu-cross-line::before,
.animated-icon--menu-cross.animated-icon--played .animated-icon--menu-cross-line::after {
    background-color: var(--color-played);
    width: 20px;
}
.animated-icon--menu-cross.animated-icon--played .animated-icon--menu-cross-line::before {
    transform: translate(-2px, 5px) rotate(45deg);
}
.animated-icon--menu-cross.animated-icon--played .animated-icon--menu-cross-line::after {
    transform: translate(-2px, -5px) rotate(-45deg);
}

/* --- hamburger simple (Menu du header-sub) --- */
.animated-icon--menu-line,
.animated-icon--menu-line::before,
.animated-icon--menu-line::after {
    background-color: var(--color);
    height: 1.5px;
    width: 16px;
}

.animated-icon--menu-line {
    position: relative;
    top: -5px;
    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
}

.animated-icon--menu-line::before,
.animated-icon--menu-line::after {
    content: "";
    left: 0;
    position: absolute;
    transition-duration: .3s;
    transition-property: width, background-color;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
}

.animated-icon--menu-line::before { top:  5px; }
.animated-icon--menu-line::after  { top: 10px; }

/* --- live icon container --- */
.animated-icon--live {
    --icon-color: #e61e00;
    --icon-color-played: var(--icon-color);
    --icon-color-dark: #e61e00;
    --icon-color-played-dark: var(--icon-color-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- live bullet --- */
.animated-icon--live-bullet,
.animated-icon--live-bullet::before {
    background-color: var(--color);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.animated-icon--live-bullet {
    position: relative;
    animation: liveBulletBlink 1.2s ease-in-out infinite;
}

.animated-icon--live-bullet::before {
    content: "";
    opacity: 0;
    position: absolute;
    transition-duration: .5s;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
}

@keyframes liveBulletBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

/* live played state (pulsing) */
.animated-icon--live.animated-icon--played .animated-icon--live-bullet::before {
    opacity: .4;
    transform: scale(2.5);
}

/* --- search circle --- */
.animated-icon--search-circle {
    border: 1.5px solid var(--color);
    border-radius: 50%;
    height: 14px;
    left: -2px;
    position: relative;
    top: -2px;
    width: 14px;
}

.animated-icon--search-circle::after {
    background-color: var(--color);
    content: "";
    height: 1.5px;
    position: absolute;
    transform: translate(9px, 12px) rotate(45deg);
    width: 7px;
}

/* --- tv frame --- */
.animated-icon--tv,
.animated-icon--tv-frame {
    display: flex;
    justify-content: center;
}

.animated-icon--tv-frame {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1.5px var(--color);
    height: 12px;
    margin-top: -4px;
    width: 16px;
}

.animated-icon--tv-frame::after {
    display: flex;
    height: 1.5px;
    position: relative;
    top: 9.5px;
    width: 8px;
    align-self: center;
    background-color: var(--color);
    content: "";
}

/* --- radio headset --- */
.animated-icon--radio,
.animated-icon--radio-headset {
    display: flex;
    justify-content: center;
}

.animated-icon--radio-headset {
    border: 1.5px solid var(--color);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 14px;
    position: relative;
    width: 12px;
}

.animated-icon--radio-headset::before,
.animated-icon--radio-headset::after {
    border: 1.5px solid var(--color);
    content: "";
    height: 7px;
    position: absolute;
    width: 5px;
}

.animated-icon--radio-headset::before {
    border-radius: 5px 0 0 5px;
    border-right: none;
    left: -5px;
    top: 6px;
}

.animated-icon--radio-headset::after {
    border-left: none;
    border-radius: 0 5px 5px 0;
    right: -5px;
    top: 6px;
}

/* ============================================================
   NAVIGATION ITEM (élément de nav réutilisable)
   ============================================================ */
.navigation-item {
    --outline-offset: -2px;
    color: #b9b9b9;
    font-family: var(--font-family);
    font-weight: 400;
    height: 100%;
    line-height: normal;
    position: relative;
    transition: color .5s cubic-bezier(.645, .045, .355, 1);
}

.navigation-item__link {
    display: flex;
    height: 100%;
    min-width: 32px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 879px) {
    .navigation-item__link {
        flex-direction: column;
        gap: 2px;
        padding: 10px 4px;
    }
    .navigation-item {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 880px) {
    .navigation-item__link {
        gap: 8px;
        padding: 18px 4px;
    }
    .navigation-item {
        font-size: 1.4rem;
    }
}

.navigation-item__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .navigation-item__label {
        max-width: 180px;
    }
}

@media screen and (min-width: 1444px) {
    .navigation-item__label {
        max-width: 260px;
    }
}

.navigation-item__icon {
    flex-shrink: 0;
}

/* --- Underline (::after sur .navigation-item) --- */
.navigation-item::after {
    background-color: #f8f8f8;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 4px;
    position: absolute;
    transform: scaleX(0);
    width: calc(100% - 8px);
    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
}

.navigation-item:after,
.navigation-item__right-icon {
    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
}

/* --- États : hover, active, accent --- */
.navigation-item--accent,
.navigation-item--active,
.navigation-item:active,
.navigation-item:hover,
.navigation-item__link[aria-expanded="true"] {
    color: #f8f8f8;
}

.navigation-item--active::after {
    transform: scaleX(1);
}

.navigation-item__link[aria-expanded="true"] .navigation-item__right-icon {
    transform: rotate(180deg);
}

.navigation-item:has(.navigation-item__link[aria-expanded="true"])::after {
    transform: scaleX(1);
}

@media screen and (min-width: 880px) {
    .navigation-item:active::after,
    .navigation-item:hover::after {
        transform: scaleX(1);
    }
}

/* --- Live icon couleur rouge --- */
.navigation-item--live .navigation-item__icon {
    color: #e61e00;
}

/* ============================================================
   HEADER-MAIN & HEADER-SUB (layout)
   ============================================================ */
.header-main,
.header-sub {
    display: flex;
    max-width: 1440px;
    align-items: center;
    gap: 12px;
}

@media screen and (max-width: 879px) {
    .header-main,
    .header-sub {
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%;
    }
}

@media screen and (min-width: 880px) and (max-width: 1199px) {
    .header-main,
    .header-sub {
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .header-main,
    .header-sub {
        margin-left: auto;
        margin-right: auto;
        padding-left: 56px;
        padding-right: 56px;
        width: 100%;
    }
}

/* --- NAV et ENTRIES --- */
.header-main__nav,
.header-sub__nav {
    display: flex;
    flex: 1;
}

.header-main__entries,
.header-sub__entries {
    display: flex;
    align-items: center;
}

.header-sub__entries {
    justify-content: center;
    width: 100%;
}

@media screen and (max-width: 1199px) {
    .header-main__entries,
    .header-sub__entries {
        gap: 4px;
    }
}

@media screen and (min-width: 1200px) {
    .header-main__entries,
    .header-sub__entries {
        gap: 8px;
    }
}

/* ============================================================
   HEADER-MAIN
   ============================================================ */
.header-main {
    background: transparent;
    margin-bottom: 1px;
    position: relative;
    z-index: calc(var(--baseIndex) + 1);
}

/* Border via ::before (full-viewport-width) */
.header-main::before {
    background: #fff;
    border-bottom: 1px solid #dcdee8;
    content: "";
    display: block;
    height: calc(100% + 1px);
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: absolute;
    right: 50%;
    top: 0;
    width: 100vw;
    z-index: -1;
}

/* --- header-main : texte et icônes noirs sur fond blanc --- */
.header-main .navigation-item {
    color: #000;
}

.header-main .navigation-item--accent,
.header-main .navigation-item--active,
.header-main .navigation-item:active,
.header-main .navigation-item:hover,
.header-main .navigation-item__link[aria-expanded="true"] {
    color: #000;
}

.header-main .navigation-item::after {
    background-color: #000;
}

.header-main .animated-icon--dark {
    --color-dark: #000;
    --color-played-dark: #000;
}

.header-main .animated-icon--live.animated-icon--dark {
    --color-dark: #e61e00;
    --color-played-dark: #e61e00;
}

.header-main .navigation-item__icon,
.header-main .navigation-item__link svg {
    color: #000;
    stroke: #000;
}

.header-main .header-main__menu {
    color: #000;
}

.header-main .navigation-item.right-separator::before,
.header-main .navigation-item.left-separator::before {
    background-color: #dcdee8;
}

@media screen and (max-width: 1199px) {
    .header-main {
        --header-border-color: #dcdee8;
        height: 60px;
    }
}

@media screen and (min-width: 1200px) {
    .header-main {
        height: 56px;
    }
}

/* --- Ordre flex items --- */
.header-main__menu           { order: 1; }
.header-main__logo-link,
.header-main__title          { order: 2; }
.header-main__nav            { order: 4; }

/* --- Burger --- */
.header-main__menu {
    --outline-offset: 2px;
    min-height: 24px;
    min-width: 24px;
    align-items: center;
    align-self: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    border-radius: 24px;
    color: #202020;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.header-main__logo-link,
.header-main__menu,
.header-main__title {
    display: flex;
}

.header-main__logo-link {
    justify-content: flex-start;
}

.header-main__logo {
    align-self: center;
}

@media screen and (max-width: 1199px) {
    .header-main__logo {
        height: 32px;
        width: auto;
    }
}

@media screen and (max-width: 375px) {
    .header-main__logo {
        height: auto;
        max-height: 32px;
        max-width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .header-main__logo {
        height: 40px;
        width: auto;
    }
}

/* --- Nav principale alignée à droite --- */
.header-main__nav {
    justify-content: flex-end;
}

.header-main .header-main__radio-entry,
.header-main .header-main__tv-entry {
    white-space: nowrap;
}

/* Account logged/not-logged toggle */
.header-main .header-main__account-entry.user--logged .account--not-logged,
.header-main .header-main__account-entry.user--not-logged .account--logged {
    display: none;
}

/* --- MOBILE : masquer certains items --- */
@media screen and (max-width: 879px) {
    .header-main__account-entry .navigation-item__label,
    .header-main__account-entry .navigation-item__right-icon,
    .header-main__search-entry,
    .header-main__services-entry {
        display: none;
    }

    .header-main__account-entry.mobile-last-entry {
        order: 2;
    }

    .header-main__account-entry.mobile-last-entry.navigation-item.right-separator {
        margin-right: 0;
    }

    .header-main__account-entry.mobile-last-entry.navigation-item.right-separator::before {
        display: none;
    }
}

/* --- MEDIUM (880–1199) : search label masqué --- */
@media screen and (min-width: 880px) and (max-width: 1199px) {
    .header-main .header-main__search-entry .navigation-item__label {
        display: none;
    }

    .header-main .header-main__search-entry .navigation-item__link {
        justify-content: center;
    }
}

/* --- LARGE (1200+) : burger masqué --- */
@media screen and (min-width: 1200px) {
    .header-main__menu {
        display: none;
    }
}

/* ============================================================
   HEADER-SUB
   ============================================================ */
.header-sub {
    background: transparent;
    margin-bottom: 1px;
    position: relative;
    z-index: var(--baseIndex);
}

.header-sub::before {
    background: var(--sub-header-bg-color);
    border-bottom: 1px solid var(--header-border-color);
    content: "";
    display: block;
    height: calc(100% + 1px);
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: absolute;
    right: 50%;
    top: 0;
    width: 100vw;
    z-index: -1;
}

/* header-sub masqué en dessous de 1200 px */
@media screen and (max-width: 1199px) {
    .header-sub {
        display: none;
        visibility: hidden;
    }
}

/* Texte blanc dans header-sub */
.header-sub .navigation-item {
    color: #fff;
}

/* ============================================================
   SÉPARATEURS (.left-separator / .right-separator)
   ============================================================ */
@media screen and (max-width: 1199px) {
    .header .navigation-item.left-separator {
        margin-left: 12px;
    }
}

@media screen and (min-width: 1200px) {
    .header .navigation-item.left-separator {
        margin-left: 16px;
    }
}

.header .navigation-item.left-separator::before {
    background-color: var(--header-separator-color);
    content: "";
    height: 32px;
    position: absolute;
    width: 1px;
}

@media screen and (max-width: 1199px) {
    .header .navigation-item.left-separator::before {
        left: -8px;
        top: 14px;
    }
}

@media screen and (min-width: 1200px) {
    .header .navigation-item.left-separator::before {
        left: -12px;
        top: 12px;
    }
}

@media screen and (max-width: 1199px) {
    .header .navigation-item.right-separator {
        margin-right: 12px;
    }
}

@media screen and (min-width: 1200px) {
    .header .navigation-item.right-separator {
        margin-right: 16px;
    }
}

.header .navigation-item.right-separator::before {
    background-color: var(--header-separator-color);
    content: "";
    height: 32px;
    position: absolute;
    width: 1px;
}

@media screen and (max-width: 1199px) {
    .header .navigation-item.right-separator::before {
        right: -8px;
        top: 14px;
    }
}

@media screen and (min-width: 1200px) {
    .header .navigation-item.right-separator::before {
        right: -12px;
        top: 12px;
    }
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown {
    --background-color: #fff;
    --link-hover-background-color: #eef0f8;
    --link-color: #202020;
    --separator-color: #dcdee8;
    --header-color: #5c5c5c;
    position: relative;
}

.dropdown__list {
    --outline-offset: -2px;
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px -6px rgba(65, 65, 65, .149), 0 6px 16px 6px rgba(65, 65, 65, .102);
    left: 50%;
    max-height: 50dvh;
    max-width: 200px;
    min-width: 100%;
    min-width: max-content;
    opacity: 0;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    transition-duration: .3s;
    transition-property: transform, opacity, visibility;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
    visibility: hidden;
    z-index: var(--z-index-dropdown);
}

.dropdown__link {
    display: flex;
    max-width: 200px;
    width: 100%;
    align-items: center;
    background-color: transparent;
    border: none;
    border-bottom: 0;
    color: var(--link-color);
    column-gap: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 125%;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color .5s cubic-bezier(.645, .045, .355, 1);
}

.dropdown__link:focus-visible,
.dropdown__link:hover {
    background-color: var(--link-hover-background-color);
}

.dropdown__link:active {
    border-radius: 8px;
}

.dropdown__icon {
    flex-shrink: 0;
}

.dropdown__item:not(.dropdown__item--header):not(:last-of-type) {
    border-bottom: 1px solid var(--separator-color);
}

.dropdown__item:first-child .dropdown__link {
    border-radius: 8px 8px 0 0;
}

.dropdown__item:last-child .dropdown__link {
    border-radius: 0 0 8px 8px;
}

/* Dropdown visible (activé par JS) */
.dropdown--visible .dropdown__list {
    opacity: 1;
    transform: translate(-50%, 12px);
    visibility: visible;
}

/* Account dropdown: align right on mobile to prevent overflow */
@media (max-width: 768px) {
    #dropdown-account .dropdown__list {
        left: auto;
        right: 0;
        transform: none;
    }

    #dropdown-account.dropdown--visible .dropdown__list {
        transform: translateY(12px);
    }
}

/* Variante sombre */
.dropdown--dark {
    --background-color: #202020;
    --link-hover-background-color: #414141;
    --link-color: #f8f8f8;
    --separator-color: #414141;
    --header-color: #b9b9b9;
}

/* Services & Mon espace : fond noir, hover blanc + pastille rouge */
#dropdown-services,
#dropdown-account {
    --background-color: #000;
}

#dropdown-services .dropdown__link,
#dropdown-account .dropdown__link {
    position: relative;
}

#dropdown-services .dropdown__link::before,
#dropdown-account .dropdown__link::before {
    background-color: #ba1d41;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width .3s cubic-bezier(.645, .045, .355, 1);
    width: 0;
}

#dropdown-services .dropdown__link:hover::before,
#dropdown-account .dropdown__link:hover::before {
    width: 4px;
}

#dropdown-services .dropdown__link:hover,
#dropdown-account .dropdown__link:hover {
    background-color: #fff;
    color: #000;
    padding-left: 20px;
}

.dropdown--dark.dropdown--alternative {
    --background-color: #323232;
}

/* --- Dropdown sous-menu header-sub (fond clair, multi-colonnes) --- */
.dropdown--sub-nav .dropdown__list {
    max-width: none;
    min-width: auto;
    width: max-content;
    columns: 2;
    column-gap: 0;
    max-height: 60dvh;
    padding: 4px 0;
}

.dropdown--sub-nav .dropdown__item {
    break-inside: avoid;
}

.dropdown--sub-nav .dropdown__item:not(.dropdown__item--header):not(:last-of-type) {
    border-bottom: none;
}

.dropdown--sub-nav .dropdown__link {
    max-width: none;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 1.3rem;
}

/* ============================================================
   INPUT FIELD (champ de recherche)
   ============================================================ */
.input-field {
    --input-padding-left: 20px;
    --input-padding-right: 48px;
    --icon-margin-left: 12px;
    --label-color: #5c5c5c;
    --label-bg-color: #fff;
    --input-color: #000;
    --input-border-color: #919191;
    --input-hover-border-color: #424242;
    --input-focus-color: #000;
    --input-focus-border-color: #2c69f6;
    position: relative;
}

.input-field__left-icon {
    margin-right: 4px;
}

.input-field--dark {
    background-color: inherit;
    --input-hover-border-color: #ddd;
    --input-border-color: #767676;
    --input-focus-border-color: #5687f8;
    --input-focus-color: #fff;
    --label-color: #b9b9b9;
    --label-bg-color: #202020;
}

.input-field--dark.input-field--filled {
    --input-border-color: #ddd;
    --input-color: #fff;
}

.input-field--dark .input-field__left-icon {
    color: #b9b9b9;
}

.input-field__input,
.input-field__label {
    font-family: var(--font-family);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
}

.input-field__input {
    background-color: transparent;
    border-color: var(--input-border-color);
    border-radius: 100px;
    border-style: solid;
    border-width: 2px;
    color: var(--input-color);
    height: 48px;
    outline: none;
    padding: 0 var(--input-padding-right) 0 var(--input-padding-left);
    transition-duration: .3s;
    transition-property: border-width, border-color, color;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}

.input-field__input:active,
.input-field__input:focus {
    border-color: var(--input-focus-border-color);
    color: var(--input-focus-color);
}

/* Search bar specifics */
.search-bar .input-field__input {
    background-color: #fff;
    border-color: #5c5c5c;
    color: #202020;
}

.search-bar .input-field__input:hover {
    border-color: #202020;
    border-width: 2px;
}

.search-bar .input-field__input:active,
.search-bar .input-field__input:focus {
    border-color: #2c69f6;
}

.search-bar__input::-webkit-search-cancel-button {
    display: none;
}

.search-bar__reset-button {
    display: none;
    position: absolute;
    right: 6px;
    top: 6px;
}

.search-bar__reset-button--visible {
    display: flex;
}

.search-bar--dark .search-bar__reset-button {
    background-color: #202020;
}

.search-bar--dark .search-bar__reset-button .search-bar__reset-icon {
    color: #f8f8f8;
}

/* ============================================================
   fi-button (boutons style franceinfo)
   ============================================================ */
.fi-button {
    --min-height: 36px;
    --min-width: 78px;
    --icon-width-height: 20px;
    --icon-margin: 4px;
    --padding-x: 16px;
    --padding-y: 6px;
    --text-color: #f8f8f8;
    --background-color: #323232;
    --background-color-hover: #414141;
    --background-color-active: #202020;
    display: inline-flex;
    height: min-content;
    min-height: var(--min-height);
    min-width: var(--min-width);
    width: auto;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
    border: none;
    border-radius: 24px;
    color: var(--text-color);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 125%;
    padding: var(--padding-y) var(--padding-x);
    text-decoration: none;
    text-wrap: balance;
    transition-duration: .3s;
    transition-property: opacity, background-color;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
}

.fi-button:focus-visible,
.fi-button:hover {
    background-color: var(--background-color-hover);
    opacity: 1;
}

.fi-button:active {
    background-color: var(--background-color-active);
    opacity: 1;
}

.fi-button--dark {
    --text-color: #202020;
    --background-color: #eef0f8;
    --background-color-hover: #b7b8c4;
    --background-color-active: #fff;
}

.fi-button--dark:focus-visible,
.fi-button--dark:hover {
    background-color: var(--background-color-hover);
}

.fi-button--dark:active {
    background-color: var(--background-color-active);
}

.fi-button--full-width {
    width: 100%;
}

.fi-button--left-aligned .fi-button__text {
    flex: 1;
    text-align: left;
}

.fi-button--small {
    --min-height: 32px;
    --min-width: 70px;
    font-size: 1.2rem;
}

.fi-button--large {
    --min-height: 44px;
    --min-width: 94px;
    --padding-x: 20px;
    --padding-y: 8px;
    font-size: 1.6rem;
    --icon-width-height: 28px;
    --icon-margin: 8px;
}

.fi-button__icon {
    height: var(--icon-width-height);
    min-height: var(--icon-width-height);
    min-width: var(--icon-width-height);
    width: var(--icon-width-height);
    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
}

.fi-button__start-icon {
    margin-right: var(--icon-margin);
}

.fi-button__end-icon {
    margin-left: var(--icon-margin);
}

.fi-button--icon-only {
    --min-width: var(--min-height);
    --padding-x: var(--padding-y);
}

/* ============================================================
   DROPDOWN LOGIN FORM
   ============================================================ */
.dropdown__item--login-form {
    border-top: 1px solid #414141;
}

.login-dropdown {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-dropdown__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-dropdown__label {
    font-family: var(--font-family);
    font-size: 1.15rem;
    color: #999;
    letter-spacing: .02em;
}

.login-dropdown__input {
    font-family: var(--font-family);
    font-size: 1.35rem;
    padding: 8px 10px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #1a1a1a;
    color: #f8f8f8;
    outline: none;
    transition: border-color .2s;
}

.login-dropdown__input:focus {
    border-color: #ba1d41;
}

.login-dropdown__remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-size: 1.2rem;
    color: #b9b9b9;
    cursor: pointer;
    user-select: none;
}

.login-dropdown__remember input[type="checkbox"] {
    accent-color: #ba1d41;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.login-dropdown__submit {
    font-family: var(--font-family);
    font-size: 1.35rem;
    font-weight: 700;
    padding: 9px 0;
    border: none;
    border-radius: 6px;
    background: #ba1d41;
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .15s;
    letter-spacing: .02em;
}

.login-dropdown__submit:hover {
    background: #a01838;
}

.login-dropdown__submit:active {
    transform: scale(.98);
}

.login-dropdown__submit:disabled {
    opacity: .6;
    cursor: wait;
}

.login-dropdown__error {
    font-family: var(--font-family);
    font-size: 1.2rem;
    color: #ff6b6b;
    margin: 0;
    min-height: 0;
    line-height: 1.3;
}

.login-dropdown__error:empty{display:none}.login-dropdown__forgot{margin:8px 0 0;text-align:center;font-family:var(--font-family);font-size:1rem}.login-dropdown__forgot a{color:#999;text-decoration:none}.login-dropdown__forgot a:hover{color:#999;text-decoration:underline}

/* ============================================================
   Services icon — soleil animé
   ============================================================ */
.nav-services-icon {
    transition: transform .35s ease;
    transform-origin: 50% 50%;
    overflow: visible;
}
.nav-services-icon__sq {
    transform-origin: 12px 12px;
    transform-box: view-box;
    transition: transform .4s cubic-bezier(.5,1.6,.4,1), border-radius .3s ease;
}
.navigation-item__link:hover .nav-services-icon__sq--tl,
.navigation-item__link[aria-expanded="true"] .nav-services-icon__sq--tl { transform: translate(-1.5px, -1.5px); }
.navigation-item__link:hover .nav-services-icon__sq--tr,
.navigation-item__link[aria-expanded="true"] .nav-services-icon__sq--tr { transform: translate( 1.5px, -1.5px); }
.navigation-item__link:hover .nav-services-icon__sq--bl,
.navigation-item__link[aria-expanded="true"] .nav-services-icon__sq--bl { transform: translate(-1.5px,  1.5px); }
.navigation-item__link:hover .nav-services-icon__sq--br,
.navigation-item__link[aria-expanded="true"] .nav-services-icon__sq--br { transform: translate( 1.5px,  1.5px); }

.navigation-item__link[aria-expanded="true"] .nav-services-icon {
    transform: rotate(45deg);
}