/* Responsive presentation repairs — 2026-11-03. */

/* Proposed overrides only: About-page native wrappers and the small home band.
   Append after the existing component styles. No clipping or forced word breaks. */

/* About: allow the existing grid/flex children to shrink naturally. */
.hc-page :is(.hc-ap-who, .hc-ap-duo, .hc-ap-dev) > *,
.hc-page :is(.hc-ap-facts, .hc-ap-zones, .hc-ap-svc, .hc-ap-sectors, .hc-ap-steps) > li,
.hc-page .hc-ap-svc-txt {
    min-width: 0;
}

/* The imported person card keeps its native paragraph; restore its line layout. */
.hc-page .hc-ap-person > p,
.hc-page .hc-ap-duo > p {
    margin: 0;
}
.hc-page .hc-ap-person > p > .hc-ap-avatar {
    margin-inline: auto;
}
.hc-page .hc-ap-person > p > strong,
.hc-page .hc-ap-person > p > span:last-child {
    display: block;
}

/* Each step is p > span (number), h3, p (description), rather than a direct span.
   Mirror the existing 42px badge for that wrapper without flattening edit blocks. */
.hc-page .hc-ap-steps > li > p:first-child {
    margin: 0;
}
.hc-page .hc-ap-steps > li > p:first-child > span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 3px solid var(--hc-signal-600);
    border-radius: 50%;
    background: var(--hc-card, #fff);
    color: var(--hc-signal-600);
    font-family: var(--pg-font-display);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 0 0 6px var(--hc-card, #fff);
}

/* Match the source component's actual breakpoint: 960px, including tablets. */
@media (max-width: 960px) {
    .hc-page .hc-ap-who,
    .hc-page .hc-ap-svc,
    .hc-page .hc-ap-steps {
        grid-template-columns: minmax(0, 1fr);
    }
    .hc-page .hc-ap-steps > li {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .hc-page .hc-ap-steps > li > p:first-child,
    .hc-page .hc-ap-steps > li > span {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .hc-page .hc-ap-steps > li > h3,
    .hc-page .hc-ap-steps > li > p:not(:first-child) {
        grid-column: 2;
        min-width: 0;
    }
    .hc-page .hc-ap-steps > li > p:not(:first-child) {
        margin: 0;
    }
}
@media (max-width: 640px) {
    .hc-page .hc-ap-sectors > li,
    .hc-page .hc-ap-zones {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Home: this is the small three-column facts band, not the hero carousel.
   The native figure must be sized as well as its badge image. */
.hc-page.hc-home-commercial .hc-home-commercial-band__inner {
    padding-block: 28px;
}
.hc-page.hc-home-commercial .hc-home-commercial-band__item,
.hc-page.hc-home-commercial .hc-home-commercial-band__since {
    min-width: 0;
}
.hc-page.hc-home-commercial .hc-home-commercial-band__item--anniversary {
    flex-wrap: nowrap;
}
.hc-page.hc-home-commercial .hc-home-commercial-band__item--anniversary > .wp-block-image {
    flex: 0 1 130px;
    width: 130px;
    min-width: 0;
    max-width: 130px;
    height: auto;
    margin: 0;
}
.hc-page.hc-home-commercial .hc-home-commercial-band__item--anniversary > .wp-block-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 130px;
    object-fit: contain;
}
@media (max-width: 768px) {
    .hc-page.hc-home-commercial .hc-home-commercial-band__inner {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 18px;
        row-gap: 14px;
    }
    .hc-page.hc-home-commercial .hc-home-commercial-band__item {
        padding-bottom: 14px;
    }
    .hc-page.hc-home-commercial .hc-home-commercial-band__item:last-child {
        padding-bottom: 0;
    }
    .hc-page.hc-home-commercial .hc-home-commercial-band__item--anniversary > .wp-block-image {
        flex-basis: 110px;
        width: 110px;
        max-width: 110px;
    }
    .hc-page.hc-home-commercial .hc-home-commercial-band__item--anniversary > .wp-block-image img {
        max-height: 110px;
    }
}


/* Targeted proposals from risk-review.json; not deployed by this file.
   Keep after the component styles. No global clipping or forced word breaks. */

/* Cyber: the imported two-column timeline leaves 97–109px for its text at 390px.
   Restore a vertical sequence on small screens, including its placement flow. */
@media (max-width: 900px) {
    .hc-page .hc-corp-timeline.pg-import-style-279cc5ddd558 {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }
}

/* Home: let the long native About link wrap inside its own section. */
@media (max-width: 520px) {
    .hc-page.hc-home-commercial .hc-home-commercial-why .wp-block-buttons,
    .hc-page.hc-home-commercial .hc-home-commercial-why .wp-block-buttons > .wp-block-button {
        min-width: 0;
        max-width: 100%;
    }
    .hc-page.hc-home-commercial .hc-home-commercial-why__cta {
        box-sizing: border-box;
        max-width: 100%;
        white-space: normal;
    }
}

/* Native paragraphs contain the existing tiles/labels. Flatten only their boxes
   so those spans participate in the component's original grid at every width. */
.hc-page .hc-kiosk-grid > p,
.hc-page .hc-sa-mock-head > p {
    display: contents;
}

/* The native paragraph, rather than its arrow span, is the actual grid item. */
.hc-page .hc-ba-row > p:has(> .hc-ba-arrow) {
    margin: 0;
    justify-self: center;
}

/* Contact below 390px: the normal CAPTCHA is 302px wide. The published DOM is
   .hc-sc (20px side padding) > .hc-ct > .hc-form-card > #contact-form > form.
   Let the one grid track shrink, then provide 304px inside the card at 360px.
   Fieldset has an inline min-inline-size:100%; override only that minimum. */
@media (max-width: 389px) {
    .hc-page .hc-ct {
        grid-template-columns: minmax(0, 1fr);
    }
    .hc-page .hc-ct > *,
    .hc-page .hc-ct #contact-form,
    .hc-page .hc-ct .frm-fluent-form {
        min-width: 0;
    }
    .hc-page .hc-ct .frm-fluent-form fieldset {
        min-width: 0;
        min-inline-size: 0 !important;
    }
    .hc-page .hc-ct .hc-form-card {
        padding: 8px;
    }
}
@media (max-width: 339px) {
    .hc-page .hc-ct .hc-form-card {
        margin-inline: -20px;
        width: calc(100% + 40px);
    }
}


/* Restore the final, static state of the existing contextual SVG cards.
   Keep the translated/scaled OUTER g and every original drawing unchanged. */
.hc-page .hc-context-illustration :is(.hc-ctx-icon-group, .hc-ctx-badge-dot, .hc-ctx-label) {
    opacity: 1;
    transform: none;
    animation: none;
}
.hc-page .hc-context-illustration .hc-ctx-icon-line {
    stroke-dashoffset: 0;
    animation: none;
}
.hc-page .hc-context-illustration .hc-ctx-label {
    fill: var(--hc-brand-cyan-soft, #5ec4dc);
    text-anchor: middle;
    font-family: var(--pg-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}
/* All 89 existing cards use viewBox 0 0 200 240. The source text was at
   x=100 / y=212; only compensate labels whose positioning was stripped. */
.hc-page .hc-context-illustration .hc-ctx-label:not([x]):not([y]) {
    transform: translate(100px, 212px);
}

/* Compact only quick-link rows; preserve longer numbered div sections. */
.hc-page .hc-editorial-list a.hc-editorial-row {
    min-height: 76px;
    padding-block: 20px;
}
.hc-page .hc-editorial-list a.hc-editorial-row > p {
    margin: 0;
    line-height: 1.2;
}
.hc-page .hc-editorial-list a.hc-editorial-row .hc-editorial-num {
    font-size: 1.4rem;
    line-height: 1.2;
}
.hc-page .hc-editorial-list a.hc-editorial-row > h3 {
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}
@media (max-width: 980px) {
    .hc-page .hc-editorial-list a.hc-editorial-row {
        min-height: 64px;
        padding-block: 16px;
    }
}


/*
 * Public mobile navigation only. Load after the theme and core Navigation CSS.
 * WordPress retains the modal, close button, Escape, focus trap and body lock.
 * Without mobile-menu.js the complete tree remains visible and scrollable.
 * With it, only explicitly managed branches become independent accordions.
 */
@media (max-width: 1199px) {
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation {
        --pg-mobile-menu-offset: 0px;
        --navigation-layout-justification-setting: flex-start;
        --navigation-layout-justify: flex-start;
        --navigation-layout-align: stretch;
        --navigation-layout-direction: column;
        --navigation-layout-text-align: left;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation > .wp-block-navigation__responsive-container-open {
        align-items: center;
        justify-content: center;
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 10px;
        border: 1px solid #dce6ec;
        border-radius: 10px;
        background: #fff;
        color: #0b2540;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation > .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed;
        inset: var(--pg-mobile-menu-offset) 0 0;
        z-index: 100000;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: calc(100vh - var(--pg-mobile-menu-offset));
        max-height: calc(100vh - var(--pg-mobile-menu-offset));
        height: calc(100dvh - var(--pg-mobile-menu-offset));
        max-height: calc(100dvh - var(--pg-mobile-menu-offset));
        margin: 0;
        padding: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        color: #0b2540;
        text-align: left;
        animation: none;
    }

    body.admin-bar:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation {
        --pg-mobile-menu-offset: var(--wp-admin--admin-bar--height, 46px);
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__responsive-close,
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__responsive-dialog {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
        padding: 0;
    }

    /* The pseudo-title also labels the visual fallback before our JS enhances it. */
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__responsive-dialog::before,
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-menu-title {
        position: sticky;
        top: 0;
        z-index: 3;
        display: block;
        box-sizing: border-box;
        margin: 0;
        padding: calc(20px + env(safe-area-inset-top, 0px)) 80px 18px max(22px, env(safe-area-inset-left, 0px));
        border-bottom: 1px solid #dce6ec;
        background: #fff;
        color: #0b2540;
        font-family: inherit;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
        content: "Menu";
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation.pg-mobile-menu-enhanced .is-menu-open .wp-block-navigation__responsive-dialog::before {
        display: none;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
        position: fixed;
        top: calc(var(--pg-mobile-menu-offset) + 10px + env(safe-area-inset-top, 0px));
        right: max(14px, env(safe-area-inset-right, 0px));
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 12px;
        border: 1px solid #dce6ec;
        border-radius: 10px;
        background: #fff;
        color: #0b2540;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 8px max(22px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px));
        text-align: left;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__container {
        display: block !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 0 !important;
        color: #0b2540;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open li.wp-block-navigation-item {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px;
        align-items: start !important;
        justify-content: stretch !important;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        gap: 0 !important;
        list-style: none;
        text-align: left;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__container > li {
        border-bottom: 1px solid #e1eaf0;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open li > a.wp-block-navigation-item__content {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 1;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 50px;
        margin: 0;
        padding: 12px 0;
        color: inherit;
        font: inherit;
        line-height: 1.4;
        text-align: left;
        text-decoration: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-submenu-managed > a.wp-block-navigation-item__content {
        grid-column: 1;
        padding-right: 12px;
    }

    /* Core's hidden mobile toggle stays untouched in the DOM, for desktop. */
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-submenu-managed > .wp-block-navigation-submenu__toggle {
        display: none !important;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-submenu-toggle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: center;
        justify-content: center;
        align-self: start;
        box-sizing: border-box;
        width: 48px;
        min-width: 48px;
        min-height: 50px;
        margin: 0;
        padding: 14px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #056a98;
        cursor: pointer;
        touch-action: manipulation;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-submenu-toggle svg {
        display: block;
        width: 16px;
        height: 16px;
        margin: 0;
        fill: none;
        stroke: currentColor;
        transition: transform 120ms ease;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-submenu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* Compact, fully visible tree is the fallback if enhancement is unavailable. */
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        grid-column: 1 / -1;
        box-sizing: border-box;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        height: auto !important;
        margin: 0 0 8px;
        padding: 0 0 0 16px !important;
        border: 0;
        border-left: 2px solid #dce8ef;
        border-radius: 0;
        box-shadow: none !important;
        background: #fff;
        color: #173d59;
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        transform: none;
        gap: 0 !important;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .pg-mobile-submenu-managed:not(.pg-mobile-submenu-open) > .wp-block-navigation__submenu-container {
        display: none !important;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content {
        min-height: 48px;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__container > .pg-menu-contact {
        margin-top: 14px;
        border-bottom: 0;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open .wp-block-navigation__container > .pg-menu-contact > a.wp-block-navigation-item__content {
        justify-content: center;
        min-height: 50px;
        padding: 13px 18px;
        border-radius: 10px;
        background: #056a98;
        color: #fff;
        font-weight: 700;
        text-align: center;
    }

    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .is-menu-open :is(a, button):focus-visible {
        outline: 3px solid #00a8c9;
        outline-offset: -3px;
    }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
    body:not(.wp-admin):not(.editor-styles-wrapper) .pg-header nav.pg-main-navigation .pg-mobile-submenu-toggle svg {
        transition: none;
    }
}


/* Restore only stripped SVG text presentation in the three known niche diagrams.
   Coordinates, colors and type styles come directly from their source SVGs. */
.hc-page.hc-niche .hc-niche-visual :is(svg[viewBox="0 0 400 220"], svg[viewBox="0 0 400 200"], svg[viewBox="0 0 400 240"]) text:not([x]):not([y]) {
    text-anchor: middle;
    font-family: system-ui, sans-serif;
}

/* Bureau d'etudes: _diagram_low_current.html.twig (five labels). */
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 220"] > g.hc-niche-node > text:not([x]):not([y]) {
    fill: #fff;
    font-size: 9px;
    font-weight: 400;
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 220"] > g.hc-niche-node:nth-of-type(1) > text:not([x]):not([y]) {
    transform: translate(80px, 95px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 220"] > g.hc-niche-node:nth-of-type(2) > text:not([x]):not([y]) {
    transform: translate(200px, 95px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 220"] > g.hc-niche-node:nth-of-type(3) > text:not([x]):not([y]) {
    transform: translate(320px, 95px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 220"] > g.hc-niche-node:nth-of-type(4) > text:not([x]):not([y]) {
    transform: translate(148px, 162px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 220"] > g.hc-niche-node:nth-of-type(5) > text:not([x]):not([y]) {
    transform: translate(268px, 162px);
}

/* Bureau d'etudes: inline study / design / deployment diagram (three labels). */
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 200"] > g.hc-niche-node > text:not([x]):not([y]) {
    fill: #071a3a;
    font-size: 11px;
    font-weight: 600;
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 200"] > g.hc-niche-node:nth-of-type(1) > text:not([x]):not([y]) {
    transform: translate(74px, 104px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 200"] > g.hc-niche-node:nth-of-type(2) > text:not([x]):not([y]) {
    transform: translate(200px, 104px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 200"] > g.hc-niche-node:nth-of-type(3) > text:not([x]):not([y]) {
    transform: translate(326px, 104px);
}

/* Progebat: _diagram_building_network.html.twig, used twice (six labels). */
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 240"] > text:not([x]):not([y]) {
    fill: #c9d3e8;
    font-size: 10px;
    font-weight: 400;
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 240"] > text:nth-of-type(1):not([x]):not([y]) {
    transform: translate(80px, 200px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 240"] > text:nth-of-type(2):not([x]):not([y]) {
    transform: translate(210px, 210px);
}
.hc-page.hc-niche .hc-niche-visual svg[viewBox="0 0 400 240"] > text:nth-of-type(3):not([x]):not([y]) {
    transform: translate(330px, 215px);
}