/* The public site's pages in the light / dark theme chosen in the app (2026-11-05): the home pages (index.html,
   home-fr.html), sign-in, sign-up, registration and the legal pages. The choice is the irwintheme cookie of all IR-Win
   sites (the button at the top right of the app's page, app/scripts/irwin.js); each page sets html data-theme="dark"
   from it before it is drawn. The colours are the app page's dark ones, named in css/irwin-colors.css (2026-11-06): page, panels
   (card), raised boxes, lines, text; IR-Win's orange stays the accent. The ID server's pages
   inside the frames (sign-in, registration, contact) take theirs from htmliddev/Styles/IrwinDark.css: they ask the
   page they are shown in ({irwin: "themeAsk"}, htmliddev/js/IrwinFrame.js), and each page's head script answers. */

/* the menu of the home page: a tab lights up in IR-Win's orange when pointed at (both themes) */
.nav-link { transition: color .2s, text-shadow .2s; }
.nav-link:hover, .nav-link:focus-visible { color: var(--ih-orange); text-shadow: 0 0 10px rgba(var(--ih-orange-rgb), .55); }
.nav-link:focus-visible { outline: 2px solid var(--ih-orange); outline-offset: 2px; }
.francais:hover, .link-9:hover, .english:hover { text-shadow: 0 0 10px rgba(var(--ih-orange-rgb), .55); }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body, html[data-theme="dark"] .body { background-color: var(--ih-page); color: var(--ih-text); }

/* header */
/* (the header is IR-Win's dark grey in both themes, a deeper shadow on the dark page) */
html[data-theme="dark"] .menu { box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .navbar { background-color: transparent; }

/* text: everything the light page draws in its dark grey */
html[data-theme="dark"] .text1, html[data-theme="dark"] .text1-copy, html[data-theme="dark"] .products,
html[data-theme="dark"] .heading-gris, html[data-theme="dark"] .heading-gris-cccopy, html[data-theme="dark"] .linkdroit,
html[data-theme="dark"] .bold-text-copy, html[data-theme="dark"] .bold-text-copy-copy, html[data-theme="dark"] .bold-text-copy-copy-copy,
html[data-theme="dark"] .bold-text-copy-copppy, html[data-theme="dark"] .bold-text-2, html[data-theme="dark"] .paragraph-2, html[data-theme="dark"] .paragraph-2-copy,
html[data-theme="dark"] .paragraph-3, html[data-theme="dark"] .paragraph-4, html[data-theme="dark"] .paragraph-9-copy,
html[data-theme="dark"] .line, html[data-theme="dark"] .pop-title, html[data-theme="dark"] .pop-txt,
html[data-theme="dark"] .legal-title, html[data-theme="dark"] .legal-txt, html[data-theme="dark"] .irwin-signin-title { color: var(--ih-text); }
html[data-theme="dark"] .paragraph-5 { color: rgba(227, 227, 227, .6); }

/* boxes: welcome, products, contact, the products' popups */
html[data-theme="dark"] .div-block-10, html[data-theme="dark"] .div-block-11, html[data-theme="dark"] .contact-form {
    background-image: none; background-color: var(--ih-card); border-color: var(--ih-line); }
/* the legal pages' text area */
html[data-theme="dark"] .section-4 { background-image: none; background-color: var(--ih-band); }
html[data-theme="dark"] .div-block-19, html[data-theme="dark"] .block-pop { background-image: none; background-color: var(--ih-card); box-shadow: 0 4px 32px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .pop-close { color: var(--ih-text); }
html[data-theme="dark"] .pop-close:hover { color: #fff; }

/* dark buttons (Learn more, Download) stay visible on the dark page */
html[data-theme="dark"] .open-pro, html[data-theme="dark"] .open-business, html[data-theme="dark"] .open-enterprise,
html[data-theme="dark"] .link.w-button { background-image: none; background-color: var(--ih-button-grey); color: #fff; }
html[data-theme="dark"] .open-pro:hover, html[data-theme="dark"] .open-business:hover, html[data-theme="dark"] .open-enterprise:hover,
html[data-theme="dark"] .link.w-button:hover { background-color: var(--ih-orange); }

/* sections: Quick Start Guide and the footer (light blue), Server status (sand), Useful Links (grey) */
html[data-theme="dark"] .div-block-15, html[data-theme="dark"] .footer { background-image: none; background-color: var(--ih-blue); }
html[data-theme="dark"] .footer { border-top-color: var(--ih-line); }
/* the social icons are dark circles: light ones on the dark footer */
html[data-theme="dark"] .footer img { filter: invert(1) brightness(.88); }
html[data-theme="dark"] .server-status { background: var(--ih-sand); }
html[data-theme="dark"] .div-block-16 { background-image: none; background-color: var(--ih-band); border-top-color: var(--ih-line); }
html[data-theme="dark"] .links { border-top-color: var(--ih-line); }
html[data-theme="dark"] .div-block-7 { background-image: none; background-color: var(--ih-line); }
html[data-theme="dark"] .div-block-9 { background-image: none; background-color: var(--ih-faint); border-top-color: var(--ih-faint); }
html[data-theme="dark"] .link-3, html[data-theme="dark"] .link-4, html[data-theme="dark"] .link-5, html[data-theme="dark"] .link-6,
html[data-theme="dark"] .link-7, html[data-theme="dark"] .link-8 { color: var(--ih-orange-link); }

/* the server status card */
html[data-theme="dark"] .irwin-status-card { background: var(--ih-raised); color: var(--ih-text); box-shadow: 0 0 18px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .irwin-status-up .irwin-status-state { color: #66bb6a; }
html[data-theme="dark"] .irwin-status-warning .irwin-status-state { color: #e0a030; }
html[data-theme="dark"] .irwin-status-down .irwin-status-state { color: #ef6c6c; }
html[data-theme="dark"] .irwin-status-rows dt { color: var(--ih-muted); }
html[data-theme="dark"] .irwin-status-checked { color: var(--ih-faint); }

/* the alert popup beside the logo */
html[data-theme="dark"] .irwin-alert-pop, html[data-theme="dark"] .irwin-alert-box { background: var(--ih-raised); color: var(--ih-text); border-color: var(--ih-line); }

/* sign-up (signup-en / -fr.html) */
html[data-theme="dark"] .irwin-signup h1 { color: var(--ih-text); }
html[data-theme="dark"] .irwin-signup .irwin-lead, html[data-theme="dark"] .irwin-plan p, html[data-theme="dark"] .irwin-signup .irwin-login { color: #b9bcc1; }
html[data-theme="dark"] .irwin-plan { background: var(--ih-card); border-color: var(--ih-line); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .irwin-back { background: var(--ih-card); }
html[data-theme="dark"] .irwin-back:hover, html[data-theme="dark"] .irwin-back:focus { background: var(--ih-orange); color: #fff; }

/* plain links of the registration and legal pages */
html[data-theme="dark"] a:not([class]) { color: var(--ih-orange-link); }

/* the popups (fancybox) around the ID server's pages */
html[data-theme="dark"] .fancybox-content, html[data-theme="dark"] .fancybox-slide--iframe .fancybox-content { background: var(--ih-card); }
html[data-theme="dark"] .fancybox-bg { background: #000; }

/* Every button reacts when pointed at (2026-11-05): the orange ones darken, the dark ones light up (in the dark theme
   they turn orange, above), and they sink a little when pressed */
.w-button, .link-2, .irwin-alert-ok, .irwin-video { transition: filter .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out, transform .08s ease-out; }
.link-2:hover, .link-2:focus-visible, .irwin-alert-ok:hover, .irwin-alert-ok:focus-visible { filter: brightness(.88); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.open-pro:hover, .open-business:hover, .open-enterprise:hover, .link.w-button:hover,
.open-pro:focus-visible, .open-business:focus-visible, .open-enterprise:focus-visible, .link.w-button:focus-visible { filter: brightness(1.6); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .open-pro:hover, html[data-theme="dark"] .open-business:hover, html[data-theme="dark"] .open-enterprise:hover,
html[data-theme="dark"] .link.w-button:hover { filter: none; }
.w-button:active, .link-2:active, .irwin-alert-ok:active { transform: translateY(1px); }
.irwin-video:hover, .irwin-video:focus-visible { filter: brightness(1.08); }

/* Dark theme: a button pointed at changes its colours so that it stands out at once (2026-11-05): the orange ones turn
   light orange with dark words and a soft glow (white words on orange, darkened, were hard to read on the dark page) */
html[data-theme="dark"] .link-2:hover, html[data-theme="dark"] .link-2:focus-visible,
html[data-theme="dark"] .irwin-alert-ok:hover, html[data-theme="dark"] .irwin-alert-ok:focus-visible,
html[data-theme="dark"] .irwin-back:hover, html[data-theme="dark"] .irwin-back:focus,
html[data-theme="dark"] .open-pro:hover, html[data-theme="dark"] .open-business:hover, html[data-theme="dark"] .open-enterprise:hover,
html[data-theme="dark"] .open-pro:focus-visible, html[data-theme="dark"] .open-business:focus-visible, html[data-theme="dark"] .open-enterprise:focus-visible,
html[data-theme="dark"] .link.w-button:hover, html[data-theme="dark"] .link.w-button:focus-visible {
    background-image: none; background-color: var(--ih-orange-light); border-color: var(--ih-orange-light); color: var(--ih-page); filter: none; box-shadow: var(--ih-glow); }