/* ============================================================================================ auregartmutin.com - restore-extras.css 2026-08-19 Everything this restoration adds on top of the site's own 2012 IONOS template ("Layout 1720: Master Template by Dieter Moess / Lukas Gorniak"). Loaded LAST, so it can override layout.css and web.css without editing either - both are archived originals and staying byte-faithful to them is what makes the rest of the restoration checkable. ============================================================================================ */ /* ============================================================================================ SECTION A - A PHONE GETS A PHONE LAYOUT ============================================================================================ WHAT WAS WRONG. All 48 pages declared no viewport at all. Measured, not inferred: headless Chrome with isMobile:true at 390px reported innerWidth=980 on every page, i.e. the phone laid out the desktop page at ~980 CSS px and scaled the result to 40%. That is the client's "hold a magnifying glass to the screen" in its purest form. WHY THE META ALONE WOULD HAVE MADE IT WORSE, and why the two ship together. This template is four hard-coded widths in a float layout: #content 960px #mainNav1 960px #mainWrapper 640px (float:right) and its .center 580px #sidebarWrapper 320px (float:right) #footer .center 960px Declare width=device-width without touching them and a 390px phone gets a 960px page that scrolls sideways - traded a shrunken page for a broken one. So the meta was added and these widths released in the same commit. WHY FLEX AND NOT JUST float:none. In source order the SIDEBAR comes first and the main article second; on the desktop two float:right rules put the article on the left and the sidebar on the right. Unfloated in document order a phone would get the section menu, the shop address, a photograph and "Merci de votre visite" BEFORE the first word of the page. One flex column with an explicit order puts the article first, where a reader expects it. THE BREAKPOINT IS 1023px, not 767: the fixed mesh is 960px + the 940px header, so anything under about 1000px is already too narrow for it. Below 1023 the page reflows; at 1024 and up it is byte-for-byte the layout the shop published. ============================================================================================ */ @media (max-width: 1023px) { /* A1. Release the four fixed widths. */ .diyw #content, .diyw #mainNav1, .diyw #footer .center, .diyw #mainWrapper, .diyw #mainWrapper .center, .diyw #sidebarWrapper { width: auto !important; max-width: 100% !important; float: none !important; box-sizing: border-box; } /* A2. One column, article first, section menu and shop details after it. */ .diyw #content { display: flex; flex-direction: column; } .diyw #mainWrapper { order: 1; } .diyw #sidebarWrapper { order: 2; min-height: 0 !important; } .diyw #mainWrapper .center { min-height: 0 !important; } .diyw #contentWrapper { padding: 0 14px; box-sizing: border-box; } /* A3. THE HEADER BANNER IS A FIXED 940x210 BOX WITH AN ABSOLUTELY POSITIONED TITLE. Left alone it keeps its 940px width and is the one element that still scrolls sideways; max-height:210px on a picture that is now 360px wide would also crop it to a letterbox. */ .diyw #header { max-width: 100% !important; margin: 0 14px; box-sizing: border-box; } .diyw div#emotion-header { max-width: 100% !important; max-height: none !important; } .diyw #emotion-header img, .diyw #ehSlideShow img { width: 100% !important; height: auto !important; } .diyw div#emotion-header strong#emotion-header-title { font-size: 17px !important; } /* The white bar behind the site name is sized as 18% of a 210px banner; on a 362px-wide phone the banner is 81px tall, so 18% is 14.6px and the descenders of "Optique" fell out of it onto the photograph. !important because the template's own script writes top back as an inline style after the header image loads. */ .diyw div#emotion-header-title-bg { top: 16% !important; height: 30% !important; } /* A4. THE TOP NAVIGATION IS SEVEN FLOATED ITEMS ON ONE 960px ROW. Floated, they simply run off the right edge; as a wrapping flex row they become two or three legible rows, and the 30px vertical padding that made a 96px-tall desktop bar comes down to something a thumb can still hit at 44px. */ .diyw #mainNav1 { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; white-space: normal !important; } .diyw #mainNav1 li { float: none !important; margin: 0 !important; } .diyw #mainNav1 a span { padding: 13px 12px !important; } .diyw #mainNav1 a.parent, .diyw #mainNav1 a.current { background-image: none !important; } /* A5. The section menu in the sidebar: 20px labels with a 58px left indent were built for a 320px column with a background sprite that no longer paints. */ .diyw #sidebarWrapper #mainNav2 span { padding: 10px 14px !important; font-size: 18px !important; } .diyw #sidebarWrapper #mainNav3 span { padding: 10px 14px 10px 28px !important; } .diyw #mainNav2 a, .diyw #mainNav3 a { max-width: none !important; } /* A6. Content that carries its own pixel width: the image modules are inline-styled max-width:210px/420px, and a floated picture beside 300px of text is a two-word column. */ .diyw .align-container { max-width: 100% !important; width: auto !important; float: none !important; } .diyw .align-container.imgright, .diyw .align-container.imgleft { margin: 0 0 12px !important; } .diyw #mainWrapper img, .diyw #sidebarWrapper img { max-width: 100% !important; height: auto !important; } .diyw table { max-width: 100% !important; } /* A7. The two decorative separators are 960px sprites; the third is a repeat-x rule, keep it. */ .diyw .separator.first, .diyw .separator.second { width: 100% !important; } /* A8. THE SIDEBAR'S 50px LEFT INDENT WAS THE GUTTER OF A 320px COLUMN. Kept at 390 it eats a fifth of the line and leaves the shop's address wrapping after four words, while the section menu above it sits flush left - two different left edges in the same column. */ .diyw #sidebarWrapper .content { padding-left: 14px !important; padding-right: 14px !important; } .diyw #sidebarWrapper .navigation { margin-top: 18px !important; } /* A9. The footer's two links are separated by a literal "|". With 24px tap padding they no longer fit one line on a phone and the pipe was left dangling at the end of the first row. */ .diyw #footer #contentfooter .footer-separator { display: none; } .diyw #footer #contentfooter .leftrow a { margin-right: 18px; } } /* A8. Below 420px the seven top-level labels still want three rows; give them room rather than letting "Magasin-Services" hyphenate. */ @media (max-width: 420px) { .diyw #mainNav1 a { font-size: 13px !important; } .diyw #mainNav1 a span { padding: 12px 9px !important; } .diyw div#emotion-header strong#emotion-header-title { font-size: 14px !important; } } /* ============================================================================================ SECTION B - LEGIBILITY, AT EVERY WIDTH ============================================================================================ Each rule below answers one measurement from _scripts/qa_legibility.js run against this site, not a general preference. The site's own palette - white and red on near-black - is kept; only the values that fail are moved, and each is moved the smallest distance that clears the bar. ============================================================================================ */ /* B1. THE TOP NAVIGATION MEASURED 4.36:1 AND NEEDS 4.5. White (#fff) on the template's brand red #f2090d is 4.36:1 - it fails for all seven labels on all 48 pages, and 14px bold does not qualify for the large-text exemption (which starts at 18.66px bold). Darkening the BAND by about 6% to #d80609 takes the pair to 5.3:1 and is indistinguishable to the eye; the alternative - enlarging the labels - would have re-flowed the one part of the page that was never broken. The brand red itself is untouched everywhere it is used as a text colour on black, where it measures 4.8:1 and passes. Aimed at where the colour is actually PAINTED, not where it is declared: layout.css puts the red on #footer and on #footer .content, and the second one wins, so a first attempt that set only #footer left the gate still reporting 4.36:1 on all 48 pages. Read it off the live DOM. */ .diyw #navigation { background-color: #d80609; } .diyw #footer, .diyw #footer .content { background-color: #d80609; } /* B2. THE SIDEBAR SET ITS BODY COPY AT 11px. Below the 12px floor, and it is where the shop's address, telephone and opening hours live - the text a visitor most often has to read off a phone. 13px, which is still smaller than the article column, so the hierarchy survives. */ .diyw #sidebarWrapper .content, .diyw #sidebarWrapper .content p, .diyw #sidebarWrapper .content td { font-size: 13px !important; line-height: 1.55; } /* B3. THE PAGE TITLE WAS PAINTED ON A 50%-TRANSPARENT BAR OVER THE DARK HALF OF A PHOTOGRAPH. Black glyphs, and the ground behind them is the banner picture, so the pair measured 1:1 where the photograph is dark. The duplicate SVG copy that IONOS swapped in has been removed from the markup (see o5_arm_finish.drop_the_duplicate_svg_page_title); this makes the bar behind the surviving opaque enough to be a background rather than a tint. */ .diyw div#emotion-header-title-bg { opacity: .92 !important; background-color: #fff !important; } .diyw div#emotion-header strong#emotion-header-title { color: #000 !important; visibility: visible !important; } /* B4. THE WHOLE FOOTER WAS SET AT 11px, INCLUDING ITS TWO LINKS AND THE COPYRIGHT LINE. "Version imprimable" and "Plan du site" are the only two links in the footer, and Plan du site is now the site's own index of itself, so it matters. 13px, and a 24px minimum on the shorter side - the gate's floor and the smallest thing a finger reliably hits. */ .diyw #footer #contentfooter { padding: 14px 14px 16px; box-sizing: border-box; font-size: 13px; } .diyw #footer #contentfooter, .diyw #footer #contentfooter a, .diyw #footer #contentfooter div { font-size: 13px; } .diyw #footer #contentfooter a { display: inline-block; padding: 6px 2px; min-height: 24px; line-height: 24px; } .diyw #footer #contentfooter img.inline { display: inline; vertical-align: middle; } /* B4b. AN INLINE LINK THAT IS ALMOST ALL OF ITS PARAGRAPH IS A CONTROL, AND MEASURED 14-15px TALL. "Ou nous trouver", "le formulaire de contact", the e-mail address, the telephone number and the pharmacy anchor in the woven paragraph are each the whole of a short line, so the legibility gate counts them as standalone controls rather than as links inside prose - correctly, because on a phone that is exactly what a thumb is aiming at. Vertical padding on an inline box enlarges the hit area without moving a single character, which a bigger line-height would not do. */ .diyw #mainWrapper .content a, .diyw #sidebarWrapper .content a, .o5-legal p a, .o5-legal li a { padding-top: 5px; padding-bottom: 5px; } /* B5. Links inside the article read as prose: the template removes the underline and the red is close to the headings' red. Underline them - only inside running text, never in the two menus or the footer, where an underline under every item would be noise. */ .diyw #mainWrapper .content p a, .diyw #mainWrapper .content li a, .diyw #sidebarWrapper .content p a { text-decoration: underline; } /* B6. 23px line-height on 12px Arial is the template's own choice and is fine; this only stops the long French paragraphs from running edge to edge on a wide screen. */ .diyw #mainWrapper .content p { max-width: 62em; } /* ============================================================================================ SECTION C - THE THINGS THIS RESTORATION ADDED ============================================================================================ */ /* C1. THE MAP WE HOST OURSELVES, on /magasin-services/ou-nous-trouver/. It replaces a signed maps.googleapis.com image whose key died with the IONOS account. ODbL requires the credit and requires it to be readable, so it is page text under the picture at the body size, not a watermark burned into a corner. */ .arm-map { margin: 0 0 18px; max-width: 520px; } .arm-map img { width: 100%; height: auto; display: block; border: 1px solid #444; } .arm-map figcaption { font-size: 12px; line-height: 1.5; color: #ddd; padding: 6px 2px 0; } .arm-map figcaption a { color: #f2090d; text-decoration: underline; } /* C2. THE CONTACT FORM. The original was an IONOS remote module with every input `disabled` and an endpoint on a host that is gone. This one is three fields and a mailto: - it cannot silently swallow a message, which is the failure mode of leaving a pretty dead form in place. */ form.arm-contact { max-width: 34em; } form.arm-contact .form-item { margin: 0 0 12px; } /* A