/* ====================== MENU : « rail » technique ======================
   Liens numerotes en monospace dans un rail a filet fin, repere qui glisse vers le lien survole / actif,
   progression de lecture sous le menu, panneau mobile en lignes numerotees avec coordonnees de l'atelier.
   Charge apres style.css : les regles historiques du menu sont surchargees ici (selecteurs renforces + !important). */

html body .site-header {
    --hd-line: #e6edf6;
    --hd-rail: transparent;
    --hd-text: #1f2937;
    --hd-text-hover: #0b1220;
    --hd-idx: #b3bdca;
    --hd-accent: #245cff;
    --hd-ind-bg: rgba(36, 92, 255, 0.06);
    --hd-ind-line: transparent;
    --hd-ind-shadow: none;
    --hd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html body .site-header.is-on-dark {
    --hd-line: rgba(255, 255, 255, 0.08);
    --hd-rail: transparent;
    --hd-text: rgba(255, 255, 255, 0.78);
    --hd-text-hover: #ffffff;
    --hd-idx: rgba(255, 255, 255, 0.62);
    --hd-accent: #3ab8ff;
    --hd-ind-bg: rgba(255, 255, 255, 0.07);
    --hd-ind-line: transparent;
    --hd-ind-shadow: none;
}

/* ---------- progression de lecture : filet sous le menu ---------- */
html body .site-header::before {
    content: none !important;
}

html body .site-header::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 1px !important;
    border-radius: 0 !important;
    opacity: 0.8;
    background: linear-gradient(90deg, #245cff, #3ab8ff) !important;
    transform-origin: left;
    transform: scaleX(var(--nav-progress, 0));
    pointer-events: none;
}

html body .site-header.nav-open::after {
    display: none !important;
}

/* ---------- liens : numero + libelle ---------- */
html body .site-header .main-nav ul :is(a, .nav-disabled) {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hd-text) !important;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    transition: color 0.2s ease;
}

html body .site-header .main-nav ul :is(a:hover, a:focus-visible, a.active) {
    background: transparent !important;
    color: var(--hd-text-hover) !important;
}

html body .site-header .main-nav ul a.active::before,
html body .site-header .main-nav ul a::before {
    content: none !important;
}

html body .site-header .main-nav .nav-idx {
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--hd-idx);
    transition: color 0.2s ease;
}

html body .site-header .main-nav ul :is(a:hover, a:focus-visible, a.active) .nav-idx {
    color: var(--hd-accent);
}

html body .site-header .main-nav ul .nav-disabled {
    color: var(--hd-idx) !important;
    cursor: not-allowed;
    user-select: none;
}

html body .site-header .main-nav .nav-soon {
    display: none;
    font-style: normal;
}

html body .site-header .main-nav .nav-aside {
    display: none;
}

/* ---------- bureau : rail + repere glissant ---------- */
@media (min-width: 1101px) {
    html body .site-header .main-nav ul {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 3px !important;
        border: 1px solid var(--hd-line);
        border-radius: 6px;
        background: var(--hd-rail);
        list-style: none;
    }

    html body .site-header .main-nav ul::before {
        content: "";
        position: absolute;
        left: 0;
        top: 3px;
        width: var(--ind-w, 0px);
        height: calc(100% - 6px);
        border: 1px solid var(--hd-ind-line);
        border-radius: 4px;
        background: var(--hd-ind-bg);
        box-shadow: var(--hd-ind-shadow), inset 0 -1px 0 var(--hd-accent);
        opacity: var(--ind-o, 0);
        transform: translateX(var(--ind-x, 0px));
        pointer-events: none;
    }

    html body .site-header .main-nav ul.is-ready::before {
        transition:
            transform 0.42s var(--hd-ease),
            width 0.42s var(--hd-ease),
            opacity 0.25s ease;
    }
}

/* ---------- mobile : lignes numerotees ---------- */
@media (max-width: 1100px) {
    /* le panneau ouvert colle au bas du menu, quelle que soit la hauteur du menu (pas de bande entre les deux) */
    html body .site-header .main-nav {
        top: 100% !important;
        margin-top: 0 !important;
    }

    html body .site-header .main-nav ul {
        margin: 0;
        padding: 6px 0 0 !important;
        list-style: none;
    }

    html body .site-header .main-nav ul :is(a, .nav-disabled) {
        display: grid !important;
        grid-template-columns: 38px 1fr auto;
        align-items: center;
        gap: 0;
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border-bottom: 1px solid var(--hd-line) !important;
        border-radius: 0 !important;
        font-size: 1.02rem;
    }

    html body .site-header .main-nav ul li:last-child :is(a, .nav-disabled) {
        border-bottom: 0 !important;
    }

    html body .site-header .main-nav ul a::after {
        content: "\2192" !important;
        display: block !important;
        justify-self: end;
        color: var(--hd-idx);
        font-weight: 500;
        transition: transform 0.3s var(--hd-ease), color 0.2s ease;
    }

    html body .site-header .main-nav ul :is(a:hover, a:focus-visible, a.active)::after {
        color: var(--hd-accent);
        transform: translateX(4px);
    }

    html body .site-header .main-nav .nav-external-icon {
        display: none;
    }

    html body .site-header .main-nav .nav-soon {
        display: inline-block;
        padding: 3px 8px;
        border: 1px solid var(--hd-line);
        border-radius: 4px;
        font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    html body .site-header .main-nav ul li {
        opacity: 0;
    }

    html body .site-header.nav-open .main-nav ul li {
        animation: hdRowIn 0.5s calc(80ms + var(--i, 0) * 45ms) var(--hd-ease) both;
    }

    html body .site-header .main-nav .nav-aside {
        display: grid;
        gap: 2px;
        margin: 12px 0 4px;
        padding: 14px 4px 0;
        border-top: 1px solid var(--hd-line);
    }

    html body .site-header.nav-open .main-nav .nav-aside {
        animation: hdRowIn 0.5s 420ms var(--hd-ease) both;
    }

    html body .site-header .main-nav .nav-aside-label {
        margin: 0 0 6px;
        font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
        font-size: 0.64rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hd-idx);
    }

    html body .site-header .main-nav .nav-aside a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: auto !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--hd-text-hover) !important;
        font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
        font-size: 0.92rem;
        font-weight: 500;
    }

    html body .site-header .main-nav .nav-aside a::after {
        content: none !important;
    }

    html body .site-header .main-nav .nav-aside a i {
        min-width: 40px;
        padding: 3px 0;
        border: 1px solid var(--hd-line);
        border-radius: 4px;
        font-style: normal;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        text-align: center;
        color: var(--hd-accent);
    }
}

/* bouton devis du panneau mobile : Bleu Atelier (action principale), plus de bloc noir lourd sur fond clair */
@media (max-width: 1100px) {
    html body .site-header .main-nav a.nav-cta-mobile {
        min-height: 46px !important;
        border: 1px solid #245cff !important;
        border-radius: 4px !important;
        background: #245cff !important;
        box-shadow: none !important;
        color: #ffffff !important;
    }

    html body .site-header .main-nav a.nav-cta-mobile:is(:hover, :focus-visible, :active) {
        border-color: #0b3edc !important;
        background: #0b3edc !important;
        color: #ffffff !important;
    }
}

@keyframes hdRowIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html body .site-header .main-nav ul.is-ready::before,
    html body .site-header .main-nav ul a::after,
    html body .site-header .main-nav .nav-idx {
        transition: none !important;
    }

    html body .site-header.nav-open .main-nav ul li,
    html body .site-header.nav-open .main-nav .nav-aside {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ---------- bouton du menu mobile : une impression qui se fait ----------
   buse au-dessus de trois couches (la derniere, en cours, est incomplete) ; ouvert : les couches forment une croix. */
html body .site-header .nav-toggle {
    display: none;
    place-items: center;
    border-radius: 4px !important;
    color: var(--hd-text-hover);
}

@media (max-width: 1100px) {
    html body .site-header .nav-toggle {
        display: grid;
    }
}

html body .site-header .nav-toggle span {
    display: none !important;
}

html body .site-header .nav-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
    fill: currentColor;
}

html body .site-header .nav-icon :is(.ni-l1, .ni-l2, .ni-l3, .ni-nozzle) {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.45s var(--hd-ease), opacity 0.3s ease;
}

html body .site-header .nav-icon .ni-nozzle {
    fill: var(--hd-accent);
}

html body .site-header .nav-icon .ni-l3 {
    transform-origin: left center;
    transform: scaleX(0.55);
}

/* survol / focus : la couche en cours se termine, la buse suit */
html body .site-header .nav-toggle:is(:hover, :focus-visible) .ni-l3 {
    transform: scaleX(1);
}

html body .site-header .nav-toggle:is(:hover, :focus-visible) .ni-nozzle {
    transform: translateX(5px);
}

/* ouvert : buse retiree, couches en croix */
html body .site-header.nav-open .nav-icon .ni-nozzle {
    opacity: 0;
    transform: translateY(-6px);
}

html body .site-header.nav-open .nav-icon .ni-l1 {
    transform: translateY(1.8px) rotate(45deg);
}

html body .site-header.nav-open .nav-icon .ni-l2 {
    transform: translateY(-3px) rotate(-45deg);
}

html body .site-header.nav-open .nav-icon .ni-l3 {
    opacity: 0;
    transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
    html body .site-header .nav-icon :is(.ni-l1, .ni-l2, .ni-l3, .ni-nozzle) {
        transition: none;
    }
}

/* ====================== SOUS-MENU « Services » ======================
   Bureau : panneau sous le lien, ouvert au survol et au focus clavier (transform / opacity uniquement).
   Mobile : le chevron deplie la liste dans le panneau du menu. */

html body .site-header {
    --hd-panel-bg: #ffffff;
    --hd-panel-line: #dde6f1;
    --hd-panel-shadow: 0 18px 40px -18px rgba(11, 18, 32, 0.28);
    --hd-panel-hover: rgba(36, 92, 255, 0.06);
    --hd-panel-muted: #5b6b7f;
}

html body .site-header.is-on-dark {
    --hd-panel-bg: #0b1220;
    --hd-panel-line: rgba(255, 255, 255, 0.14);
    --hd-panel-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    --hd-panel-hover: rgba(255, 255, 255, 0.07);
    --hd-panel-muted: rgba(255, 255, 255, 0.55);
}

html body .site-header .main-nav .nav-sub-toggle { display: none; }

@media (min-width: 1101px) {
    html body .site-header .main-nav li.has-sub { position: relative; }

    /* chevron decoratif apres le libelle */
    html body .site-header .main-nav li.has-sub > a .nav-label::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 0 0 3px 8px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.55;
        transition: transform 0.3s var(--hd-ease), opacity 0.2s ease;
    }

    html body .site-header .main-nav li.has-sub:is(:hover, :focus-within) > a .nav-label::after {
        transform: translateY(2px) rotate(225deg);
        opacity: 1;
    }

    /* le panneau : zone de survol continue (padding haut transparent) */
    html body .site-header .main-nav .nav-sub-wrap {
        position: absolute;
        left: -3px;
        top: 100%;
        z-index: 5;
        padding-top: 12px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.22s ease 0.1s, transform 0.3s var(--hd-ease) 0.1s, visibility 0s linear 0.4s;
        pointer-events: none;
    }

    html body .site-header .main-nav li.has-sub:is(:hover, :focus-within) > .nav-sub-wrap {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
        pointer-events: auto;
    }

    html body .site-header .main-nav ul.nav-sub {
        display: grid !important;
        gap: 2px;
        width: 340px;
        margin: 0;
        padding: 8px !important;
        border: 1px solid var(--hd-panel-line);
        border-radius: 6px;
        background: var(--hd-panel-bg);
        box-shadow: var(--hd-panel-shadow);
        list-style: none;
    }

    html body .site-header .main-nav ul.nav-sub::before { content: none; }
}

html body .site-header .main-nav ul.nav-sub li { opacity: 1; animation: none; }

html body .site-header .main-nav ul.nav-sub a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    white-space: normal !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--hd-text-hover) !important;
    text-align: left;
}

html body .site-header .main-nav ul.nav-sub a::after { content: none !important; }

html body .site-header .main-nav ul.nav-sub a:is(:hover, :focus-visible) { background: var(--hd-panel-hover) !important; }
html body .site-header .main-nav ul.nav-sub a:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: -2px; }

html body .site-header .main-nav .nav-sub-title { font-size: 0.9rem; font-weight: 600; line-height: 1.25; }

html body .site-header .main-nav .nav-sub-hint {
    color: var(--hd-panel-muted);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
}

html body .site-header .main-nav ul.nav-sub a.is-here .nav-sub-title { color: var(--hd-accent); }

html body .site-header .main-nav ul.nav-sub .nav-sub-all {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--hd-panel-line);
}

html body .site-header .main-nav ul.nav-sub .nav-sub-all .nav-sub-title { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--hd-accent); }

@media (max-width: 1100px) {
    html body .site-header .main-nav li.has-sub { position: relative; }

    /* le chevron remplace la fleche de la ligne : il deplie la liste sans quitter le menu */
    html body .site-header .main-nav li.has-sub > a::after { content: none !important; }

    html body .site-header .main-nav .nav-sub-toggle {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--hd-idx);
        cursor: pointer;
    }

    html body .site-header .main-nav .nav-sub-toggle svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.35s var(--hd-ease);
    }

    html body .site-header .main-nav li.is-open > .nav-sub-toggle { color: var(--hd-accent); }
    html body .site-header .main-nav li.is-open > .nav-sub-toggle svg { transform: rotate(180deg); }

    /* repliee : 0fr -> 1fr, sans toucher a la hauteur en JS */
    html body .site-header .main-nav .nav-sub-wrap {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows 0.4s var(--hd-ease), visibility 0s linear 0.4s;
    }

    html body .site-header .main-nav li.is-open > .nav-sub-wrap {
        grid-template-rows: 1fr;
        visibility: visible;
        transition-delay: 0s;
    }

    html body .site-header .main-nav ul.nav-sub {
        min-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0 0 0 38px !important;
        list-style: none;
    }

    html body .site-header .main-nav ul.nav-sub a {
        min-height: 52px !important;
        padding: 8px 4px !important;
        border-bottom: 1px solid var(--hd-line) !important;
        border-radius: 0 !important;
        font-size: 0.95rem;
    }

    html body .site-header .main-nav ul.nav-sub .nav-sub-all { margin: 0; padding: 0; border: 0; }
    html body .site-header .main-nav ul.nav-sub li:last-child a { border-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    html body .site-header .main-nav .nav-sub-wrap,
    html body .site-header .main-nav li.has-sub > a .nav-label::after,
    html body .site-header .main-nav .nav-sub-toggle svg { transition: none !important; }
}

/* Lien d'evitement (WCAG 2.4.1) : invisible tant qu'il n'a pas le focus clavier, premier element tabulable de chaque page. */
.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 10000;
    padding: 12px 18px;
    border-radius: 4px;
    background: #245cff;
    color: #fff;
    font: 600 .9rem "Bricolage Grotesque", system-ui, sans-serif;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus {
    top: 12px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* La cible du lien recoit le focus par programme : pas de contour parasite sur toute la zone. */
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}