.heure-tools-nav {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);

    z-index: 9000;

    display: flex;
    align-items: center;
    gap: 4px;

    max-width: calc(100vw - 24px);
    padding: 6px;

    overflow-x: auto;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;

    background: rgba(5, 15, 27, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.30);
}

.heure-tools-nav a {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    padding: 0 14px;

    border-radius: 999px;

    color: rgba(255,255,255,.68);
    text-decoration: none;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 13px;
    font-weight: 550;

    white-space: nowrap;

    transition:
        background .15s ease,
        color .15s ease;
}

.heure-tools-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.heure-tools-nav a[aria-current="page"] {
    color: #fff;
    background: rgba(255,255,255,.12);
}

.heure-tools-nav .tool-home {
    padding-left: 11px;
}

.heure-tools-nav .swiss-mini {
    width: 23px;
    height: 23px;

    display: inline-grid;
    place-items: center;

    margin-right: 7px;

    border-radius: 6px;

    background: #e62b35;
    color: #fff;

    font-size: 17px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 650px) {
    .heure-tools-nav {
        bottom: 10px;

        width: calc(100vw - 20px);

        justify-content: flex-start;

        border-radius: 16px;
    }

    .heure-tools-nav a {
        padding-left: 11px;
        padding-right: 11px;

        font-size: 12px;
    }
}

/* =========================================================
   Navigation commune — finition
   ========================================================= */

header,
.tools-header,
.tool-header,
.site-header {
    min-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header nav,
.tools-header nav,
.tool-header nav,
.site-header nav {
    min-height: 64px !important;
    display: flex;
    align-items: center;
}

header .brand,
.tools-header .brand,
.tool-header .brand,
.site-header .brand {
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

header nav a,
.tools-header nav a,
.tool-header nav a,
.site-header nav a {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 10px !important;
    border-radius: 8px;
}

header nav a:hover,
.tools-header nav a:hover,
.tool-header nav a:hover,
.site-header nav a:hover {
    background: rgba(255,255,255,.06) !important;
}

/* élément actif */
header nav a[aria-current="page"],
.tools-header nav a[aria-current="page"],
.tool-header nav a[aria-current="page"],
.site-header nav a[aria-current="page"] {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
}

/* Marque Heure Suisse dans les pages outils */
header .brand,
.tools-header .brand,
.tool-header .brand,
.site-header .brand {
    color: #ffffff !important;
}

/* La croix suisse reste l'accent rouge */
header .brand-mark,
.tools-header .brand-mark,
.tool-header .brand-mark,
.site-header .brand-mark {
    background: #FF0000 !important;
    color: #ffffff !important;

    width: 22px !important;
    height: 22px !important;

    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Évite l'effet bouton */
header .brand-mark:hover,
.tools-header .brand-mark:hover,
.tool-header .brand-mark:hover,
.site-header .brand-mark:hover {
    transform: none !important;
}

/* Marque Heure Suisse — apparence fixe */
header .brand,
header .brand:link,
header .brand:visited,
header .brand:hover,
header .brand:focus,
header .brand:active,
.tools-header .brand,
.tools-header .brand:hover,
.tool-header .brand,
.tool-header .brand:hover,
.site-header .brand,
.site-header .brand:hover {
    color: #FFFFFF !important;
    background: transparent !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Symbole suisse : rouge officiel + croix blanche, toujours fixes */
header .brand-mark,
header .brand:hover .brand-mark,
header .brand:focus .brand-mark,
header .brand:active .brand-mark,
.tools-header .brand-mark,
.tools-header .brand:hover .brand-mark,
.tool-header .brand-mark,
.tool-header .brand:hover .brand-mark,
.site-header .brand-mark,
.site-header .brand:hover .brand-mark {
    background: #FF0000 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Si la croix est dessinée avec pseudo-éléments */
header .brand-mark::before,
header .brand-mark::after,
header .brand:hover .brand-mark::before,
header .brand:hover .brand-mark::after {
    background: #FFFFFF !important;
}

/* =========================================================
   Identité Heure Suisse — même horloge que la page d'accueil
   ========================================================= */

.heure-tools-nav .tool-home {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.heure-tools-nav .tool-home:hover,
.heure-tools-nav .tool-home:focus,
.heure-tools-nav .tool-home:active,
.heure-tools-nav .tool-home:visited {
    color: #FFFFFF !important;
}

/* Neutralise l'ancien carré rouge */
.heure-tools-nav .tool-home .swiss-mini.brand-mark {
    --brand-hour-angle: 0deg;
    --brand-minute-angle: 0deg;

    position: relative;

    width: 34px !important;
    height: 34px !important;

    flex: 0 0 34px;

    padding: 0 !important;

    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 50% !important;

    background: transparent !important;
    color: #FFFFFF !important;

    box-shadow: none !important;
    transform: none !important;
}

/* Aiguille des heures */
.heure-tools-nav .tool-home .swiss-mini.brand-mark::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 2px;
    height: 9px;

    background: #FFFFFF !important;

    transform-origin: 50% 100%;

    transform:
        translate(-50%, -100%)
        rotate(var(--brand-hour-angle)) !important;
}

/* Aiguille des minutes */
.heure-tools-nav .tool-home .swiss-mini.brand-mark::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 2px;
    height: 12px;

    background: #FFFFFF !important;

    transform-origin: 50% 100%;

    transform:
        translate(-50%, -100%)
        rotate(var(--brand-minute-angle)) !important;
}

/* Point central rouge */
.heure-tools-nav .tool-home .swiss-mini.brand-mark > span {
    position: absolute;

    width: 5px;
    height: 5px;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    background: #FF0000 !important;

    transform: translate(-50%, -50%) !important;
}

/* Aucun effet graphique au survol */
.heure-tools-nav .tool-home:hover .swiss-mini.brand-mark,
.heure-tools-nav .tool-home:focus .swiss-mini.brand-mark {
    border-color: rgba(255,255,255,.88) !important;
    background: transparent !important;
    transform: none !important;
}

/* =========================================================
   En-tête commun Heure Suisse
   ========================================================= */

.shared-topbar {
    position: sticky;
    top: 0;
    z-index: 8500;

    min-height: 72px;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;

    gap: 36px;

    padding: 0 28px;

    background: rgba(5, 15, 27, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.shared-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #FFFFFF !important;
    text-decoration: none !important;
}

.shared-brand:hover,
.shared-brand:focus,
.shared-brand:active,
.shared-brand:visited {
    color: #FFFFFF !important;
}

.shared-brand-mark {
    width: 34px !important;
    height: 34px !important;

    flex: 0 0 34px;

    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 50% !important;

    background: transparent !important;
}

.shared-brand-copy {
    display: flex;
    flex-direction: column;
}

.shared-brand-copy strong {
    color: #FFFFFF;
    font-size: .94rem;
    line-height: 1.05;
    letter-spacing: -.015em;
}

.shared-brand-copy small {
    margin-top: 3px;

    color: rgba(255,255,255,.52);

    font-size: .66rem;
    line-height: 1;
}

.shared-main-nav {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.shared-main-nav a {
    padding: 8px 10px;

    border-radius: 8px;

    color: rgba(255,255,255,.68);
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
}

.shared-main-nav a:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,.06);
}

.shared-main-nav a[aria-current="page"] {
    color: #FFFFFF;
    background: rgba(255,255,255,.09);
}

@media (max-width: 900px) {
    .shared-topbar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 18px;
    }

    .shared-main-nav {
        justify-self: stretch;
        overflow-x: auto;
    }
}

/* =========================================================
   Header partagé — identité identique à l'accueil
   ========================================================= */

.shared-topbar .shared-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;

    color: #FFFFFF !important;
    text-decoration: none !important;
}

.shared-topbar .shared-brand-mark {
    --brand-hour-angle: 0deg;
    --brand-minute-angle: 0deg;

    position: relative !important;

    display: inline-block !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    padding: 0 !important;

    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 50% !important;

    background: transparent !important;

    box-shadow: none !important;
}

.shared-topbar .shared-brand-mark::before,
.shared-topbar .shared-brand-mark::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 2px !important;

    background: #FFFFFF !important;

    transform-origin: 50% 100% !important;
}

.shared-topbar .shared-brand-mark::before {
    height: 9px !important;

    transform:
        translate(-50%, -100%)
        rotate(var(--brand-hour-angle)) !important;
}

.shared-topbar .shared-brand-mark::after {
    height: 12px !important;

    transform:
        translate(-50%, -100%)
        rotate(var(--brand-minute-angle)) !important;
}

.shared-topbar .shared-brand-mark > span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 5px !important;
    height: 5px !important;

    border-radius: 50% !important;

    background: #FF0000 !important;

    transform: translate(-50%, -50%) !important;
}

.shared-topbar .shared-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: max-content;
}

.shared-topbar .shared-brand-copy strong {
    color: #FFFFFF !important;

    font-size: .94rem !important;
    font-weight: 700 !important;

    line-height: 1.05 !important;

    white-space: nowrap !important;
}

.shared-topbar .shared-brand-copy small {
    margin-top: 3px !important;

    color: rgba(255,255,255,.50) !important;

    font-size: .66rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}

/* Aucune variation de marque au survol */
.shared-topbar .shared-brand:hover,
.shared-topbar .shared-brand:focus,
.shared-topbar .shared-brand:active {
    color: #FFFFFF !important;
    background: transparent !important;
}

.shared-topbar .shared-brand:hover .shared-brand-mark {
    border-color: rgba(255,255,255,.88) !important;
    background: transparent !important;
}

/* =========================================================
   Navigation évolutive des outils
   ========================================================= */

.primary-tools-nav {
    position: relative;
    overflow: visible !important;
}

.all-tools-menu,
.mobile-tools-menu,
.site-information-menu {
    position: relative;
}

.all-tools-menu summary,
.mobile-tools-menu summary,
.site-information-menu summary {
    list-style: none;
    cursor: pointer;
}

.all-tools-menu summary::-webkit-details-marker,
.mobile-tools-menu summary::-webkit-details-marker,
.site-information-menu summary::-webkit-details-marker {
    display: none;
}

.all-tools-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 10px;
    border-radius: 8px;

    color: rgba(255,255,255,.68);

    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.all-tools-menu > summary::after,
.site-information-menu > summary::after {
    content: "⌄";
    font-size: 12px;
    opacity: .65;
    transform: translateY(-1px);
}

.all-tools-menu[open] > summary,
.all-tools-menu.has-current-tool > summary {
    color: #FFFFFF;
    background: rgba(255,255,255,.08);
}

.all-tools-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 9600;

    width: min(610px, calc(100vw - 32px));

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    padding: 12px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;

    background: rgba(5,15,27,.98);
    box-shadow: 0 22px 60px rgba(0,0,0,.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.all-tools-panel section,
.mobile-tools-panel section {
    min-width: 0;
    padding: 12px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;

    background: rgba(255,255,255,.025);
}

.all-tools-panel section > strong,
.mobile-tools-panel section > strong {
    display: block;
    margin-bottom: 8px;

    color: rgba(255,255,255,.50);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tools-menu-links {
    display: grid;
    gap: 3px;
}

.all-tools-panel .tools-menu-links a,
.mobile-tools-panel .tools-menu-links a {
    min-height: 34px !important;
    padding: 7px 8px !important;

    color: rgba(255,255,255,.78);
    text-decoration: none;

    font-size: 12px !important;
    line-height: 1.3;
    white-space: normal;
}

.all-tools-panel .tools-menu-links a:hover,
.mobile-tools-panel .tools-menu-links a:hover,
.all-tools-panel .tools-menu-links a[aria-current="page"],
.mobile-tools-panel .tools-menu-links a[aria-current="page"] {
    color: #FFFFFF;
    background: rgba(255,255,255,.08);
}

/* La navigation flottante devient exclusivement mobile. */
.heure-tools-nav {
    display: none;
}

.shared-information-footer {
    min-height: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    padding:
        28px
        clamp(20px,4vw,60px)
        34px !important;

    border-top: 1px solid rgba(255,255,255,.07);

    background:
        linear-gradient(
            180deg,
            #051628,
            #030e1a
        );
}

.footer-identity {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #FFFFFF;
    text-decoration: none;
}

.footer-identity .footer-brand-mark {
    --brand-hour-angle: 0deg;
    --brand-minute-angle: 0deg;

    position: relative !important;

    display: inline-block !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;

    padding: 0 !important;

    border: 2px solid rgba(255,255,255,.82) !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;
}

.footer-identity .footer-brand-mark::before,
.footer-identity .footer-brand-mark::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 2px !important;

    background: #FFFFFF !important;

    transform-origin: 50% 100% !important;
}

.footer-identity .footer-brand-mark::before {
    height: 8px !important;

    transform:
        translate(-50%, -100%)
        rotate(var(--brand-hour-angle)) !important;
}

.footer-identity .footer-brand-mark::after {
    height: 11px !important;

    transform:
        translate(-50%, -100%)
        rotate(var(--brand-minute-angle)) !important;
}

.footer-identity .footer-brand-mark > span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 5px !important;
    height: 5px !important;

    border-radius: 50% !important;

    background: #FF0000 !important;

    transform: translate(-50%, -50%) !important;
}

.footer-identity-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-identity-copy strong {
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1.1;
}

.footer-identity-copy time {
    margin-top: 4px;

    color: rgba(255,255,255,.48);
    font-size: 11px;
    line-height: 1.1;
}

.footer-identity:hover .footer-identity-copy time,
.footer-identity:focus .footer-identity-copy time {
    color: rgba(255,255,255,.70);
}

.site-information-menu {
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.site-information-menu > summary {
    display: none;
}

.site-information-menu[open] > summary,
.site-information-menu.has-current-information > summary {
    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.055);
}

.site-information-menu nav {
    min-height: 0 !important;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 14px;

    margin-top: 0;
}

.site-information-menu nav a {
    padding: 6px 4px !important;

    color: rgba(255,255,255,.58);
    text-decoration: none;

    font-size: 12px !important;
}

.site-information-menu nav a:hover,
.site-information-menu nav a[aria-current="page"] {
    color: #FFFFFF;
}

@media (max-width: 760px) {
    .shared-main-nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: stretch;

        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 3px !important;

        width: 100%;
        overflow: visible;
    }

    .heure-tools-nav {
        display: none !important;
    }

    .shared-main-nav > a,
    .all-tools-menu > summary {
        min-width: 0;
        min-height: 40px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 6px 4px !important;
        border-radius: 9px;

        text-align: center;
        font-size: 10px !important;
        font-weight: 600;
        line-height: 1.15;
        white-space: normal;
    }

    .all-tools-menu {
        min-width: 0;
    }

    .all-tools-menu > summary {
        font-size: 0 !important;
    }

    .all-tools-menu > summary::before {
        content: attr(data-mobile-label);
        font-size: 10px;
    }

    .all-tools-panel {
        position: fixed;
        top: 116px;
        left: 10px;
        right: 10px;

        width: auto;
        max-height: calc(100vh - 132px);
        overflow-y: auto;

        grid-template-columns: 1fr;
    }

    .heure-tools-nav > a,
    .mobile-tools-menu > summary {
        min-width: 0;
        min-height: 46px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 6px 5px !important;
        border-radius: 11px;

        color: rgba(255,255,255,.68);
        text-align: center;
        text-decoration: none;

        font-size: 10px !important;
        font-weight: 600;
        line-height: 1.15;
        white-space: normal;
    }

    .heure-tools-nav > a:hover,
    .heure-tools-nav > a[aria-current="page"],
    .mobile-tools-menu[open] > summary,
    .mobile-tools-menu.has-current-tool > summary {
        color: #FFFFFF;
        background: rgba(255,255,255,.11);
    }

    .mobile-tools-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 78px;
        z-index: 9600;

        max-height: calc(100vh - 110px);
        overflow-y: auto;

        display: grid;
        gap: 8px;

        padding: 10px;

        border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px;

        background: rgba(5,15,27,.98);
        box-shadow: 0 18px 54px rgba(0,0,0,.45);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .shared-information-footer {
        flex-direction: column !important;
        justify-content: center;
        gap: 18px;

        padding:
            24px
            18px
            28px !important;
    }

    .footer-identity-copy {
        align-items: center;
    }

    .site-information-menu {
        width: 100%;
        text-align: center;
    }

    .site-information-menu nav {
        justify-content: center;
    }
}

/* SHARED_GLOBAL_HEADER_V1_START */

/*
 * Bandeau de référence Heure exacte :
 *
 * identité | outils | langue
 */




/*
 * Sélecteur de langue partagé.
 * Même apparence que le menu validé sur l'accueil.
 */

.shared-generated-language-menu {
    position: relative;

    display: inline-flex;
    align-items: center;
}

.shared-generated-language-menu
.custom-language-menu-button {
    position: relative;

    min-height: 34px;

    padding: 0 30px 0 12px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 999px;

    background: #04101f;
    color: #ffffff;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.shared-generated-language-menu
.custom-language-menu-button::after {
    content: "▾";

    position: absolute;

    right: 11px;
    top: 50%;

    transform:
        translateY(-52%);

    opacity: .72;
}

.shared-generated-language-menu
.custom-language-menu-button:hover,
.shared-generated-language-menu
.custom-language-menu-button:focus-visible {
    background: #0b1a2b;

    outline: none;

    border-color:
        rgba(255,255,255,.22);
}

.shared-generated-language-menu
.custom-language-menu-list {
    position: absolute;

    top: calc(100% + 7px);
    right: 0;

    z-index: 10000;

    min-width: 150px;

    padding: 6px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 12px;

    background: #04101f;

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.38);
}

.shared-generated-language-menu
.custom-language-menu-list[hidden] {
    display: none;
}

.shared-generated-language-menu
.custom-language-menu-item {
    display: block;

    width: 100%;

    padding: 8px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #ffffff;

    font: inherit;
    font-size: 12px;

    text-align: left;

    cursor: pointer;
}

.shared-generated-language-menu
.custom-language-menu-item:hover,
.shared-generated-language-menu
.custom-language-menu-item:focus-visible {
    background:
        rgba(255,255,255,.09);

    outline: none;
}

.shared-generated-language-menu
.custom-language-menu-item.is-active {
    background:
        rgba(255,255,255,.13);
}





@media (max-width: 700px) {
    .shared-generated-language-menu
    .custom-language-menu-button {
        min-height: 32px;
        max-width: 130px;

        padding-left: 10px;

        font-size: 10px;
    }

    .shared-generated-language-menu
    .custom-language-menu-list {
        min-width: 135px;
    }
}

/* SHARED_GLOBAL_HEADER_V1_END */

/* SHARED_HEADER_TWO_COLUMNS_V1_START */

/*
 * Navigation haute simplifiée :
 * marque à gauche, langue à droite.
 * Aucun emplacement central.
 */

@media (min-width: 901px) {
    .shared-topbar.shared-topbar-has-actions {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap: 24px;
    }

    .shared-topbar.shared-topbar-has-actions
    .shared-brand {
        grid-column: 1;
        justify-self: start;
    }

    .shared-topbar.shared-topbar-has-actions
    .top-actions {
        grid-column: 2;
        justify-self: end;

        display: flex;
        align-items: center;

        margin-left: auto;
    }

    .shared-topbar.shared-topbar-has-actions
    .shared-main-nav {
        display: none !important;
    }
}

/* SHARED_HEADER_TWO_COLUMNS_V1_END */


/* SHARED_HEADER_MOBILE_ONE_LINE_V1_START */

@media (max-width: 760px) {

  .shared-topbar {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: .75rem !important;
  }

  .shared-topbar > :first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .shared-topbar .top-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    margin-left: auto !important;
  }

  .shared-main-nav {
    display: none !important;
  }

}

/* SHARED_HEADER_MOBILE_ONE_LINE_V1_END */

/* SHARED_MOBILE_TAGLINE_VISIBLE_V1 */
@media (max-width: 760px) {
    .topbar.shared-topbar
    .shared-brand-copy small {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 3px !important;
        font-size: .66rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}
/* SHARED_MOBILE_TAGLINE_VISIBLE_V1_END */

/* MOBILE_HEADER_HOME_OVERRIDES_V1_START */
/*
 * Overrides spécifiques à l'accueil.
 * Migrés depuis clock.css sans changement fonctionnel.
 */

/* MOBILE_HEADER_V1
   Accueil mobile :
   marque + langue.
   La navigation est masquée par tools-nav.css.
*/
@media (max-width: 760px) {

    .topbar.shared-topbar {
        column-gap: 10px !important;

        min-height: 0 !important;

        padding:
            8px
            12px
            9px !important;
    }

    .topbar.shared-topbar .shared-brand {
        justify-self: start !important;

        max-width: 100% !important;
    }

    .topbar.shared-topbar .shared-brand-copy {
        min-width: 0 !important;
    }

    .topbar.shared-topbar
    .shared-brand-copy strong {
        display: block !important;

        max-width: 100% !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 1rem !important;
        line-height: 1.1 !important;
    }



    .topbar.shared-topbar .top-actions {
        min-width: 0 !important;
        max-width: 138px !important;

        gap: 5px !important;
    }

    .topbar.shared-topbar .language-label {
        display: none !important;
    }

    .topbar.shared-topbar .language-select,
    .topbar.shared-topbar
    .unified-language-select {
        width: auto !important;
        max-width: 138px !important;
        min-width: 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 10px !important;
    }






}

@media (max-width: 430px) {

    .topbar.shared-topbar {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .topbar.shared-topbar .brand-mark {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
    }

    .topbar.shared-topbar
    .shared-brand-copy strong {
        font-size: .94rem !important;
    }

    .topbar.shared-topbar .top-actions {
        max-width: 124px !important;
    }

    .topbar.shared-topbar .language-select,
    .topbar.shared-topbar
    .unified-language-select {
        max-width: 124px !important;
    }
}

/* MOBILE_HEADER_HOME_OVERRIDES_V1_END */

/* SHARED_INLINE_LANGUAGE_NAV_V1_START */

.shared-generated-language-menu.shared-language-inline {
    position: static;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.shared-generated-language-menu.shared-language-inline::before {
    content: "";
    width: 1px;
    height: 20px;
    margin-right: 13px;
    background: rgba(255,255,255,.14);
}

.shared-generated-language-menu.shared-language-inline
.custom-language-menu-list {
    position: static;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shared-generated-language-menu.shared-language-inline
.custom-language-menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: rgba(255,255,255,.48);
    font: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .18s ease,
        background-color .18s ease;
}

.shared-generated-language-menu.shared-language-inline
.custom-language-menu-item:hover,
.shared-generated-language-menu.shared-language-inline
.custom-language-menu-item:focus-visible {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    outline: none;
}

.shared-generated-language-menu.shared-language-inline
.custom-language-menu-item.is-active {
    background: transparent;
    color: #e94149;
}

/* L'URL et la balise lang sont l'autorité finale. Ces règles empêchent
   une ancienne classe active conservée en cache de colorer la mauvaise langue. */
html[lang="fr"] .shared-generated-language-menu .custom-language-menu-item[data-language="fr"],
html[lang="de"] .shared-generated-language-menu .custom-language-menu-item[data-language="de"],
html[lang="it"] .shared-generated-language-menu .custom-language-menu-item[data-language="it"],
html[lang="rm"] .shared-generated-language-menu .custom-language-menu-item[data-language="rm"],
html[lang="en"] .shared-generated-language-menu .custom-language-menu-item[data-language="en"],
html[lang="es"] .shared-generated-language-menu .custom-language-menu-item[data-language="es"] {
    color: #e94149 !important;
}

html[lang="fr"] .shared-generated-language-menu .custom-language-menu-item:not([data-language="fr"]),
html[lang="de"] .shared-generated-language-menu .custom-language-menu-item:not([data-language="de"]),
html[lang="it"] .shared-generated-language-menu .custom-language-menu-item:not([data-language="it"]),
html[lang="rm"] .shared-generated-language-menu .custom-language-menu-item:not([data-language="rm"]),
html[lang="en"] .shared-generated-language-menu .custom-language-menu-item:not([data-language="en"]),
html[lang="es"] .shared-generated-language-menu .custom-language-menu-item:not([data-language="es"]) {
    color: rgba(255,255,255,.48) !important;
}

@media (max-width: 760px) {
    .shared-generated-language-menu.shared-language-inline::before {
        display: none;
    }

    .shared-generated-language-menu.shared-language-inline
    .custom-language-menu-item {
        padding: 7px 5px;
        font-size: 9px;
        letter-spacing: .06em;
    }
}

/* SHARED_INLINE_LANGUAGE_NAV_V1_END */
/* Le chronomètre reste accessible par son URL, mais n'est pas promu
   dans les pieds de page, y compris lorsqu'un ancien script est en cache. */
footer a[href$="/stopwatch"],
#site-information-footer a[href$="/stopwatch"] {
    display: none !important;
}