each, so the anchor is
nearly the whole paragraph and counts as a control rather than prose - at 18px tall. */
p > a[href^="tel:"],
p > a[href^="mailto:"],
.media-body p a,
.urgencesText p a,
.urgencesText > div > a,
.list1 a,
.o5-legal ul li a,
.section-index li a,
footer .lien-liste { display: inline-block; min-height: 28px; line-height: 28px; }
/* The section sub-menu that sits on the banner: 3.4:1 links on a near-white panel. Heavier
selectors than the first attempt, which style.css out-specified and the gate caught unchanged. */
body .sub-menu li a,
body .menuBottom li a,
body ul.sub-menu li.menu-item a { color: #2f6ea5; }
body h4 strong,
body .attorney-short-bio h4 strong,
body .panel-heading a,
body .panel-title a { color: #2f6ea5; }
/* Bootstrap accordion headers on the practitioner pages: an 20px tall inside . */
body .panel-heading a,
body .panel-title a { display: inline-block; min-height: 28px; line-height: 28px; }
.breadcrumb-list a,
.breadcrumb-list .breadcrumb-current,
.sub-menu.menuBottom a,
.menu-item a,
.list-social-icons a,
footer .lien-liste,
.option-liens-noir,
.flex-direction-nav a { display: inline-block; min-height: 28px; line-height: 28px; }
.sur-header a,
.sur-header .telephone a { min-height: 28px; line-height: 28px; display: inline-block; }
/* ---------------------------------------------------------------------------
E. THE MAP WE HOST INSTEAD OF THE GOOGLE IFRAME, AND ITS ATTRIBUTION.
ODbL wants the credit visible, and the legibility gate wants it >= 12px, so it is
ordinary page text under the picture rather than four pixels burned into a 200px
raster.
--------------------------------------------------------------------------- */
.carte-cmi { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.carte-cmi-large { width: 100%; max-height: 400px; object-fit: cover; object-position: center; }
.osm-credit { margin: 4px 0 8px; text-align: center; color: #444; }
.osm-credit a { color: #2f6ea5; text-decoration: underline; }
/* ---------------------------------------------------------------------------
F. VIDEO THAT LOADS ONLY WHEN THE VISITOR ASKS FOR IT.
--------------------------------------------------------------------------- */
.video-embed { position: relative; max-width: 854px; margin: 1em auto; padding: 24px;
background: #eef2f6 url('/img/logo-4fb1e561.png') center 12px / 120px auto no-repeat;
border: 1px solid #cfd8e0; text-align: center; }
.video-embed-play { display: inline-block; margin-top: 84px; padding: 10px 22px; border: 0;
border-radius: 3px; background: #337ab7; color: #fff; font-size: 16px; cursor: pointer;
min-height: 44px; }
.video-embed-play:hover { background: #286090; }
.video-embed-note { display: block; margin-top: 8px; font-size: 12px; color: #444; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.video-indisponible { padding: 12px; background: #f1f3f5; border-left: 3px solid #9fb3c8;
color: #333; font-size: 14px; }
/* ---------------------------------------------------------------------------
G. THE TWO FORMS THE ORIGINAL SITE SHIPPED WITH EVERY FIELD DISABLED.
--------------------------------------------------------------------------- */
.contact-route { margin: 8px 0 12px; }
.contact-route p { margin: 0 0 6px; }
.contact-route a { font-size: 17px; color: #2f6ea5; display: inline-block; min-height: 28px;
line-height: 28px; }
/* ---------------------------------------------------------------------------
H. THE ONE-SLIDE "SLIDER".
Each section page carries a single banner image inside a FlexSlider that the capture
froze mid-initialisation: inline min-width:1600px, position:absolute, and a prev/next
pair already carrying .flex-disabled. Two dead arrows over one picture is the frozen
widget on the client's list, so the markup is unwrapped to a plain banner (see
o5_cmi_banner.py) and this makes it behave like a picture.
--------------------------------------------------------------------------- */
.page-banner { width: 100%; height: 317px; overflow: hidden;
background-repeat: no-repeat; background-position: left top; }
/* The section-menu panel is #element{position:absolute; width:100%; left:120px} with no
positioned ancestor, so it sizes itself against the VIEWPORT: 1440 wide starting at x=120,
right edge 1560, i.e. 120px of sideways scroll on every one of the 26 section pages at 1440.
The same arithmetic overflows at any width where the container is narrower than the viewport,
which is why it was there on the original too. Giving .menupagetype position:relative makes
width:100% mean "the container", which is what it was written to mean; top:0 then lands the
panel exactly on the banner, the way it already does at the site's own widest breakpoint
(measured: banner top 315 = panel top 315 at 1700px; 275 vs 235 at 1440 before this rule). */
@media screen and (min-width: 1300px) {
body .menupagetype { position: relative; }
body #element { left: 0 !important; width: 100% !important; top: 0 !important; }
}
/* Below 1300 the site hides the banner and the panel with visibility:hidden, which leaves a
317px blank band above the content on every tablet - an empty placeholder block by any
reading. display:none removes the band instead of merely blanking it. */
@media screen and (max-width: 1299px) {
body .menupagetype { display: none !important; }
}
/* ---------------------------------------------------------------------------
I. AUTHORED SECTION PAGES (see o5_cmi_content.py).
--------------------------------------------------------------------------- */
.page-intro { font-size: 16px; line-height: 1.6; }
.page-intro p { margin-bottom: 12px; }
.section-index { list-style: none; padding-left: 0; margin: 14px 0 20px; }
.section-index li { margin: 0 0 6px; }
.section-index a { display: inline-block; min-height: 28px; line-height: 28px; font-size: 15px;
color: #2f6ea5; }
.page-actions { margin: 18px 0 26px; padding: 14px; background: #eef2f6;
border: 1px solid #d6dee6; }
.page-actions p { margin: 0 0 6px; }
.page-actions a { color: #2f6ea5; display: inline-block; min-height: 28px; line-height: 28px; }
/* The section banner is a 1600px-wide decorative band cropped by overflow:hidden; on a phone it
is 4x the viewport. Scaling it instead of cropping keeps the band readable and keeps the
document 390px wide. */
@media screen and (max-width: 767px) {
body .page-banner { height: 0; padding-bottom: 19.8%; background-size: contain; }
}
/* ---------------------------------------------------------------------------
J. SMOOTH SCROLLING WITHOUT THE BROKEN PLUGIN.
The archived jquery.smooth-scroll.js never assigns $.fn.smoothScroll, so the site's own
$('.nav ul a').smoothScroll() threw on every page load. The in-page anchors (/#lecentre) work
without it; this restores the easing the site was reaching for, in CSS.
--------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ---------------------------------------------------------------------------
K. THE ROUND "RDV" BADGE, FOUND BY LOOKING AND NOT BY A GATE.
RDV renders as a 100px
blue disc. The anchor's own colour is white, but a `strong` rule in the theme repaints the
label #428bca - blue on blue, contrast 1:1 - so the disc is a blank circle in the middle of
the homepage. Measured: strong computed colour rgb(66,139,202) on background rgb(66,139,202).
qa_legibility did not report it; the screenshot did.
--------------------------------------------------------------------------- */
.button-primary,
.button-primary-flat { background-color: #337ab7; border-color: #2e6da4; }
a.button strong,
.button-circle strong,
.button-primary strong { color: #fff; }
.button-circle { line-height: 100px; text-align: center; font-weight: 700; }
/* ---------------------------------------------------------------------------
L. THE TWO SIDEBAR BOXES WERE SIZED FOR THINGS THAT ARE NO LONGER IN THEM.
.monwrappercontact is height:470px and .monwrapper height:450px, fixed, because one held a
four-field form and the other a Google Maps iframe plus its chrome. The form was disabled by
the original site and is now a two-line contact route, and the map is a picture with a credit
line, so both boxes rendered with 250px of empty white under their content.
--------------------------------------------------------------------------- */
.monwrappercontact,
.monwrapper { height: auto !important; min-height: 0; padding-bottom: 24px; }
/* ---------------------------------------------------------------------------
M. ON A PHONE THE SIDEBAR WAS INVISIBLE BUT STILL TOOK UP THE ROOM.
style.css hides .monwrappercontact and .wrapperinfo with visibility:hidden below 750px. That
left ~500px of blank white between the last paragraph and the footer on every treatment page -
and it hid the two things a phone visitor most needs, the telephone/e-mail block and the map.
The original had reason to hide them: the box held a form whose every field it had disabled.
It now holds a working contact route, so it is shown.
--------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
body .monwrappercontact,
body .monwrapper,
body .wrapperinfo,
body .wrapperinfo .marge-droite { visibility: visible !important; height: auto !important; }
body .monwrappercontact,
body .monwrapper { padding-left: 12px; padding-right: 12px; margin: 16px 0 !important; }
}
/* ---------------------------------------------------------------------------
N. THE FOUR HOMEPAGE SERVICE CARDS OVERLAPPED EACH OTHER ON A PHONE.
Measured at 390: .row-2 is width:15% = 56px, but the .item-hover circle inside it is a fixed
150px, so each card spilled 94px over the .marow-3 text block beside it and the second row of
photographs sat on top of "Spécialité Médicales" and "Ophtalmologie". The grid was written for
a 1200-1600px row of six inline-blocks; below 992 it has to stack.
--------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
/* Second measurement, after stacking made it WORSE: .marow is height:370px, .cadre 740px and
#icones 850px, all fixed. Once the children stack they run to ~1040px inside a 370px box, so
the second row started 230px above the end of the first and the photographs landed on top of
the headings. Every one of those heights has to become auto, not just the outermost. */
body #icones,
body #icones .cadre,
body #icones .marow { height: auto !important; }
body #icones .marow { text-align: center; }
body #icones .row-2,
body #icones .row-3,
body #icones .marow-3 {
display: block; width: 100% !important; max-width: 320px;
height: auto !important; margin: 0 auto 18px !important; text-align: center;
}
body #icones .item-hover { margin: 0 auto; }
body #icones .masque_services { visibility: visible !important; }
body #icones .mini_texte { visibility: hidden; height: 0; overflow: hidden; }
}
/* ---------------------------------------------------------------------------
O. TWO CONTROLS A SIBLING WAS SITTING ON.
qa_legibility now hit-tests each control down its centre line instead of trusting its box, and
it found two places where the box was big enough but the finger would land on something else:
1. The section sub-menu's last row.