/* Style sheet of the Commanders Act consent tool, served by the site (US #30, task #57, decision of 2026-10-21).
 *
 * WHY. The tool builds its banner and its preference center with <style> elements inserted at run time, without a nonce. A blocking
 * Content Security Policy (CSP_ENFORCE=1, docs/front/csp.md) refuses them, and without them the banner loses its layout, leaves the screen,
 * keeps its overlay and cannot be refused. This file carries the same rules from the site (`style-src 'self'`), so the banner works whether or
 * not the tool style is applied. Both together change nothing: same selectors, same values, and the tool style is inserted after this link.
 * The CSSOM guard of consent_controller.js stays useful in observation mode, where the inline style of the tool still applies.
 *
 * PROVENANCE. Recorded on 2026-10-21 on the INCa `uat` build with a real browser (container https://cdn.tagcommander.com/5845/uat/tc_INCa_43.js,
 * byte for byte the production container https://cdn.tagcommander.com/5845/tc_INCa_43.js that day). Both style elements come from
 * https://cdn.trustcommander.net/privacy/5845/privacy_v2_33.js (sha256 cfab29a605f4415dba45cd8e89207832d3a2790b7c0af1483ff7817575aef941):
 *   1. banner style, 8 087 characters, inserted in <head> with the first-visit banner (still there after "Continuer sans accepter");
 *   2. center style, 529 characters, inserted in <head> the first time the preference center is opened.
 * `tc_INCa_43.js` inserts no style element: it only sets inline styles through the CSSOM (floating tab, `#privacy-overlay-banner`), which a
 * CSP allows. Verbatim recordings: tests/Fixtures/commanders-act/recorded/. Rules are kept in the order of the tool (1 then 2), formatted one
 * rule per block, declarations unchanged.
 *
 * SCOPE. Every selector of the tool names its own ids and classes (`#footer_tc_privacy`, `.tc-privacy-wrapper …`, `.tc-privacy-overlay`,
 * `#privacy-container`): they cannot match a template of the site (tests/Browser/ConsentToolStylesheetTest checks it), so they stay as the
 * tool wrote them. The overlay, the center container and `body.tc-modal-open` are not inside `.tc-privacy-wrapper`, so they cannot be
 * prefixed with it. The rules the tool writes on BARE elements (`p`, `ul`, `li`, `h1`, `.strong`), which reach the whole site when the tool
 * style is applied, are limited here to the banner (`.tc-privacy-wrapper …`), the same rewrite consent_controller.js does in the CSSOM.
 * Those five are the only changes made to the selectors. The only change made to a declaration: `font-style: bold !important` of `#tc_privacy_title` is left out. `bold` is not a
 * `font-style` value, so every browser drops it (the CSSOM of the tool style does not keep it either: tests/Browser/ConsentToolStylesheetTest compares rules as parsed, so it
 * still matches) and the title renders with its `font-weight: 600`, as on the tool; the Nu validator flags it in the tool style itself, which the INCa has to fix.
 *
 * UPDATE RULE. The INCa edits its banner in the Commanders Act back-office and the style follows (or a new `privacy_v2_NN.js`). Replay the
 * recording when the INCa changes the banner, the center or the version of `privacy_v2_*.js` (the hash above is the quick check): load a page
 * with the real tool in observation mode, copy the text of each <style> that contains `tc-privacy-wrapper` or `privacy-container`, replace
 * the recordings and this file, keep the five scoped rules, and run tests/Browser/ConsentToolStylesheetTest. A rule that the INCa removes from its
 * style and that stays here would keep applying: that is the cost of serving the style from the site. See docs/front/consent.md.
 *
 * Loaded after app.css (a tie is won by the later rule, as it is for the tool style, which comes last in <head>), by templates/base.html.twig. The link does not block
 * the first paint (`media="print"`, switched to `all` by assets/head.js once loaded, `<noscript>` twin) and keeps its place in <head>, so the order above holds.
 */

/* 1. Banner style (privacy_v2_33.js, first visit). */
.tc-reset-css { border: none; background: none; }
.tc-privacy-wrapper .tc-privacy-banner {
    width: 100%;
    left: 0px;
    text-align: left;
    font-size: 16px;
    z-index: 999998;
    position: fixed;
}
.tc-privacy-wrapper .tc-privacy-accessible-banner { font-size: 1rem; }
.tc_div_preview .tc-privacy-wrapper .tc-privacy-banner { position: absolute; }
.tc-privacy-wrapper .tc-privacy-footer { bottom: 0px; }
.tc-privacy-wrapper .tc-privacy-header { top: 0px; }
.tc-privacy-wrapper .tc-privacy-block-text { display: inline-block; }
.tc-privacy-wrapper .tc-privacy-text, .tc-privacy-wrapper .tc-iab-purposes-automatic-text {
    padding: 10px;
    font-size: 0.75em;
    text-align: left;
}
.tc-privacy-wrapper .tc-privacy-block-button, .tc-privacy-wrapper .tc-privacy-block-text { vertical-align: middle; }
.tc-privacy-wrapper .tc-privacy-block-button { right: 10px; }
.tc-privacy-wrapper .tc-privacy-accessible-banner .tc-privacy-button { float: left; }
.tc-privacy-wrapper .tc-privacy-accessible-popin .tc-privacy-button { float: none; }
.tc-privacy-wrapper .tc-privacy-button-close {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    z-index: 1;
}
.tc-privacy-wrapper .tc-privacy-block-button > button:focus {
    outline: black 1px dotted;
    box-shadow: 0 0 0 1px white;
    -webkit-box-shadow: 0 0 0 1px white;
    -moz-box-shadow: 0 0 0 1px white;
}
.tc-privacy-wrapper .tc-privacy-accessible-banner .tc-privacy-block-button > button:focus { outline: black 2px dotted; }
.tc-privacy-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 999997;
}
body.tc-modal-open {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
}
.tc-privacy-wrapper .tc-privacy-banner { background: #FFF; }
.tc-privacy-wrapper .tc-privacy-text, .tc-privacy-wrapper .tc-iab-purposes-automatic-text { color: #000; }
.tc-privacy-wrapper .tc-privacy-block-text a { color: #6464ED; }
#tc_privacy_button, #footer_tc_privacy_button, #header_tc_privacy_button, #popin_tc_privacy_button { background: #000; color: #ffffff; }
#tc_privacy_button_2, #footer_tc_privacy_button_2, #header_tc_privacy_button_2, #popin_tc_privacy_button_2 { background: #000; color: #FFFFFF; }
#tc_privacy_button_3, #footer_tc_privacy_button_3, #header_tc_privacy_button_3, #popin_tc_privacy_button_3 { background: #212D53; color: #FFFFFF; }
.tc-privacy-wrapper .tc-privacy-banner { opacity: 0.9; }
.tc-privacy-wrapper .tc-privacy-block-text { width: 79%; }
.tc-privacy-wrapper .tc-privacy-block-button { width: 19%; display: inline-block; }
.tc-privacy-wrapper .tc-privacy-button {
    float: right;
    margin: 10px 0px 10px 10px;
    display: block;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 5px 10px;
}
@media (min-width: 768px) and (max-width: 979px) {
    .tc-privacy-wrapper .tc-privacy-block-text { width: 69%; }
    .tc-privacy-wrapper .tc-privacy-block-button { width: 29%; }
}
@media (max-width: 767px) {
    .tc-privacy-wrapper .tc-privacy-block-text { width: 100%; }
    .tc-privacy-wrapper .tc-privacy-block-button { width: 100%; }
    .tc-privacy-wrapper .tc-privacy-button {
        margin: 5px 0;
        float: none;
        width: 100%;
    }
    .tc-privacy-wrapper .tc-privacy-button.tc-privacy-button-top {
        top: 0;
        right: 0;
        width: auto;
        position: absolute;
        margin: 10px;
    }
    .tc-privacy-padding-top { padding-top: 1rem; }
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#privacy-overlay-banner { z-index: 999999996 !important; }
#footer_tc_privacy { z-index: 999999997 !important; }
#privacy-overlay { z-index: 999999998 !important; }
#privacy-container { z-index: 999999999 !important; }
.tc-privacy-wrapper .tc-privacy-block-button > button:focus { outline: none !important; }
.tc-privacy-wrapper .tc-privacy-text { padding: 0 !important; }
.tc-privacy-wrapper .tc-privacy-block-text { width: 100% !important; }
.tc-privacy-wrapper .tc-privacy-banner { opacity: 1 !important; }
#footer_tc_privacy {
    display: inline-table;
    padding: 27px 30px 20px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
    top: 50% !important;
    width: 700px !important;
    border-radius: 15px !important;
}
#tc_privacy_logo img {
    margin-top: 0px !important;
    width: 22%;
    height: auto;
}
#tc_privacy_title > img { width: 200px !important; }
#tc_privacy_title {
    font-weight: 600 !important;
    font-family: 'Inter' !important;
    letter-spacing: 1.8px !important;
    font-size: 13px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
.tc-privacy-wrapper ul { margin: 0 7px !important; padding: 0 7px !important; }
.tc-privacy-wrapper li { list-style-type: disc; }
.tc-privacy-wrapper .strong { font-weight: 600 !important; }
.tc-privacy-wrapper p { margin: 15px 0 !important; }
#footer_tc_privacy_container_button { width: 84% !important; margin-bottom: 10px; }
.tc-privacy-wrapper .tc-privacy-button { float: left !important; }
.tc-privacy-button {
    padding: 16px 17px !important;
    margin-bottom: 20px !important;
    min-width: 186px !important;
    border: #212D53 solid 1px !important;
    font-family: 'Inter' !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
}
#footer_tc_privacy_button_3 {
    float: right !important;
    margin: 15px 5px 0 0 !important;
    text-transform: uppercase !important;
    border: 1px solid #212D53 !important;
    font-size: 12px !important;
    font-family: 'Inter' !important;
    letter-spacing: 1px !important;
    border-radius: 10px !important;
}
#footer_tc_privacy_button_2 {
    float: right !important;
    margin: 15px 25px 0 0 !important;
    background: #fff !important;
    color: #212D53 !important;
    text-transform: uppercase !important;
    border: 1px solid #212D53 !important;
    font-size: 12px !important;
    font-family: 'Inter' !important;
    letter-spacing: 1px !important;
    border-radius: 10px !important;
}
#footer_tc_privacy_button {
    top: 0px !important;
    position: absolute !important;
    right: 0 !important;
    color: #212D53 !important;
    background: #fff !important;
    border: 1px solid transparent !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    margin-right: 20px !important;
}
#footer_tc_privacy_container_text {
    position: relative;
    max-height: 225px !important;
    overflow: hidden !important;
    font-family: 'Inter' !important;
    letter-spacing: 1px !important;
    font-size: 15px !important;
}
#footer_tc_privacy_container_text .strong { font-family: 'Inter' !important; letter-spacing: 1px !important; }
#footer_tc_privacy_container_text.fullText { max-height: 600px !important; }
#footer_tc_privacy_text > ul:nth-child(5) > li:nth-child(1) > p > span { margin-top: 10px; }
#footer_tc_privacy_text > p:nth-child(3) { margin-top: 10px; }
@media (max-width: 767px) {
    .tc-privacy-button { padding: 16px 0 !important; }
    #footer_tc_privacy_button_3 { width: 100% !important; min-width: unset !important; }
    #footer_tc_privacy_button_2 { margin-top: 10px !important; margin: 15px 5px 0 0 !important; }
    #footer_tc_privacy_button {
        margin-top: 10px !important;
        font-size: 10px !important;
        top: -15px !important;
        background: transparent !important;
    }
    #tc_privacy_title {
        font-size: 20px;
        margin-bottom: 10px;
        margin-top: 0px !important;
    }
    #tc_privacy_logo img {
        margin-top: 30px !important;
        width: 50%;
        height: auto;
    }
    #footer_tc_privacy { padding: 10px 30px 10px !important; width: 92% !important; }
    .tc-privacy-wrapper .tc-privacy-text { font-size: 11px !important; }
    #footer_tc_privacy_container_button { margin-top: 0px !important; width: 100% !important; }
    #footer_tc_privacy_container_text { max-height: 320px !important; }
}
@media screen and (max-height: 450px) {
    #footer_tc_privacy_container_text { max-height: 40vh !important; }
    .tc-privacy-wrapper h1 { font-size: 20px !important; }
    #tc_privacy_title { font-size: 20px !important; margin-top: 0px !important; }
    #tc_privacy_logo img {
        margin-top: 5px !important;
        width: 50%;
        height: auto;
    }
    #footer_tc_privacy { padding: 10px 30px 10px !important; }
    #footer_tc_privacy_container_text.fullText { max-height: 50vh !important; overflow-y: auto !important; }
}

/* 2. Center style (privacy_v2_33.js, first opening of the preference center). The center itself is a cross-origin iframe, out of reach. */
.tc-privacy-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: none;
}
.tc-privacy-center-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: none;
}
.tc-privacy-center-iframe { width: 100%; height: 100%; }
.tc-privacy-overlay { z-index: 999998; }
.tc-privacy-center-container { z-index: 999999; }