body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } h4 { font-size: 14px; } body, figure, img { padding: 0; border: none; margin: 0; } #switch:checked ~ p { background-color: green; } .img-wrap img { width: calc(100% - 16px); height: auto; margin: 8px; top: 50%; transform: translateY(-25%); } picture { position: relative; display: block; max-height: 40vh; overflow: hidden; } #main-menu { text-align: center; } #main-menu ul { list-style: none; } #main-menu li { text-align: left; } #main-menu li a, #main-menu li span, #main-menu li label { color: black; text-decoration: none; font-size: 1.1rem; } #main-menu li span { color: #666; } #main-menu .menu-label { font-size: 1.5rem; color: black; text-decoration: none; font-weight: bold; display: inline-block; line-height: 2rem; } .burger { float: left; margin: 3px 8px; } .burger b, .burger i { display: block; width: 20px; } .burger b { height: 2px; margin-bottom: 5px; position: relative; background: #000; border-radius: 2px; z-index: 1; } .burger b:first-of-type { margin-top: 5px; } .burger i { color: blue; } #main-menu ul { display: none; } main, h1 { margin: 1rem; padding: 1rem; } #main-menu #switch:checked ~ ul { display: block; } .contact-form-wrap { display: none; } #show-contact:checked ~ .contact-form-wrap { display: block; } .contact-form-wrap { position: fixed; background-color: rgba(0, 0, 0, 0.25); top: 0; bottom: 0; left: 0; right: 0; } .contact-form-wrap .h3 { color: white; text-align: center; margin-top: 120px; } .cf-form { background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 20px; } .cf-input, .cf-label { min-height: 20px; line-height: 20px; box-sizing: border-box; width: 100%; min-width: 30vh; } .cf-input { border: solid 1px #666; border-radius: 4px; padding: 4px; } .cf-label { line-height: 30px; box-sizing: border-box; } .cf-btn { background-color: black; color: white; padding-left: 10px; padding-right: 10px; margin-top: 4px; } .cf-btn:hover { background-color: white; color: black; transition: color 0.5s; } .cf-input-group:after { content: ""; display: table; clear: both; overflow: auto; } .cf-close-wrap { margin: -10px -10px 0 -20px; } .cf-close { display: block; position: relative; box-sizing: border-box; float: right; clear: both; font-size: 20px; } .icon-radio-checked { display: none; color: green; } .icon-radio-unchecked { color: red; } #abonnement-oui:checked ~ .ct-radio .icon-radio-checked { display: inline; } #abonnement-oui:checked ~ .ct-radio .icon-radio-unchecked { display: none; } #abonnement-non:checked ~ .ct-radio .icon-radio-checked { display: inline; } #abonnement-non:checked ~ .ct-radio .icon-radio-unchecked { display: none; } .hidden, *[aria-hidden] { display: none !important; } .grand-L { height: 16px; } main, aside { box-sizing: border-box; } main { width: calc(100% - 27vw); } .main-stat { max-width: 73vw; float: left; margin: 10px 0 10px -2rem; } aside { width: 25vw; right: 0; top: 75px; position: fixed; } aside img { max-width: 100%; } footer { color: #a9a9a9; border-top: solid 1px #000; padding: 10px; } a[lang=fr]:after, a[target=_blank]:after { color: blueviolet; } a[lang=fr]::after { content: " [fr]"; } a[target=_blank]::after { content: " [^]"; } #loaded { background-color: #ccF; border-left: solid 3px blue; color: darkblue; padding: 3px; } #warning { background-color: #Fed; border-left: solid 3px red; color: darkred; padding: 3px; } li[lang] { color: #ccc; } li[lang=fr] { color: darkblue; } li[lang^=fr] { color: darkblue; } li[lang$=CA] { color: blue; } li[lang*="-"] { font-weight: bold; } span[class~=red] { color: red; } span[class|=red] { color: darkred; } /*# sourceMappingURL=style-main.css.map */ /*# sourceMappingURL=D:/home/MDS/cours/b2-cwd/integration/live/session4/uglifyjs/style-main.css.map */