that isn't one of those tags (eyebrow pills, badges, tags -- .hero-badge, .ctacard-num, .whoweare-eyebrow, etc.) was silently falling back through inheritance to the browser default (Times New Roman), invisible in a quick glance but very visible once you compare it against the approved reference side by side. Setting it once on body.homepage lets normal CSS inheritance cover every descendant, tag allowlist or not. Page-scoped: does not touch common.css or any other page. ---------- */ body.homepage { font-family: 'Catamaran', sans-serif; } /* ---------- LAYOUT FIX : de-float the legacy 2-column content+sidebar template on the homepage specifically. Root cause of two separate visual bugs reported after 2384c0c: - "Dernieres publications" intruding into the hero: .featured is a float:left, width:250px sidebar (common.css) that sits alongside .maincontent starting from the TOP of .body, for the sidebar's own full height -- not wherever it happens to appear in the HTML source. Since the hero is now the first thing inside .maincontent, the floated sidebar runs alongside it from the very top. - Dark/illegible text over light sections ("QUI SOMMES NOUS", "NOS MISSIONS"): that same floated sidebar's

assumes it's always over a dark backdrop. It isn't -- it runs alongside whichever section happens to be at that scroll depth, including the plain white/light ones. - Membership cards wrapping 2+1 instead of 3-across, hero not reading as truly full-width: .maincontent itself is only calc(100% - 265px) wide (common.css), permanently narrowed to leave room for the sidebar. Every new full-width component built on top of it inherited that narrower effective width. - section{float:left} (common.css) is also a global legacy rule; combined with the above it's what made #hero, an intended flex/ grid container, behave as a floated box instead of a normal full-width block. Scoped to body.homepage only (this repo's other pages -- DA/DV/ Admin/content pages -- keep the original 2-column template untouched; custom-overrides.css itself is also only ever loaded by this one template, confirmed via grep before relying on it). ---------- / .homepage .maincontent { float: none; width: 100%; } / .body (common.css) is capped at `max-width: 1800px`, while header.css's `header` is `max-width: none` (full-width, fluid clamp() padding) -- two different container rules for what should be the same page width. Below 1800px this cap is invisible (.body never reaches it), but past it the homepage content stops growing while the header keeps going, producing a visible width mismatch between them; the same cap also interacts badly with .body's `float: left` (auto margins never apply to a floated box), which is what caused the content to pin to one side instead of even staying centered. Root fix: drop the cap entirely so .body is full-width at every viewport/zoom, matching the header's own container, and de-float it so it behaves as a normal in-flow block. Padding stays the existing 40px (already within a reasonable 24-40px range) via common.css, just no longer capped. Scoped to .homepage so other pages using the same .body/common.css template are unaffected. / .homepage .body { float: none; max-width: none; } / footer.css's .footer-container is also capped at max-width:1800px (shared by every page). On the homepage specifically it must match .body's now-uncapped width, so it's overridden here rather than in the sitewide footer.css -- other pages keep the original capped footer. / .homepage .footer-container { max-width: none; } / .body itself is float:left (common.css) with no clearfix anywhere in this codebase (confirmed via search). A floated element doesn't push down normal-flow siblings after it -- footer (a normal, non-floated sibling of .body, included right after it closes) was rendering at the same y:0 as .body instead of below its ~5000px of real content, making it permanently invisible without ever scrolling past it. The fix belongs on the element AFTER the float (clear it), not inside .body itself. Scoped to .homepage so other pages using the same .body/common.css template are unaffected. / .homepage footer { clear: both; } .homepage section { float: none; } .homepage .featured { float: none; width: 100%; max-width: none; margin-left: 0; margin-bottom: 0; } / ---------- Hero background : approved image, sized to height (not cover) and pinned to the side opposite the hero text -- right in LTR, left in RTL, matching #hero's own text/illustration column order -- scaled up (148% of hero height) so it reads as large/dominant rather than just filling its natural size. A second background layer (a navy -> navy-at-0-alpha linear-gradient, same direction as the image) sits on top of the image and fades it into the navy fill ONLY in the seam between the text zone and the artwork. Sized as a % of the hero itself (not a fixed px box) so the stops read directly as "% of hero width", matching how the transition zone is specified: solid through ~35%, fully faded out (image at full opacity, untouched) by ~58%, leaving the artwork -- copyright mark, mic, headphones, palette, clapperboard -- completely sharp across the right/outer ~40% of the hero. The end stop is navy-at-0-alpha rather than the `transparent` keyword (which is black-at-0-alpha) so the color channel doesn't drift toward black mid-fade. background-color is the existing dark navy, filling whatever space neither layer reaches. ---------- / .body .mainbg { background-image: linear-gradient( to right, #17285f 0%, #17285f 35%, rgba(23,40,95,0.6) 45%, rgba(23,40,95,0.25) 52%, rgba(23,40,95,0) 58% ), url('../img/bg/backgrd.png'); background-repeat: no-repeat, no-repeat; background-size: 100% 100%, cover; background-position: left center, center center; background-color: #17285f; height: 720px; } .rightToLeft .body .mainbg { background-image: linear-gradient( to left, #17285f 0%, #17285f 35%, rgba(23,40,95,0.6) 45%, rgba(23,40,95,0.25) 52%, rgba(23,40,95,0) 58% ), url('../img/bg/backgrd.png'); background-position: right center, center center; } / ---------- #hero : two-column (text + placeholder illustration) ---------- / #hero { position: relative; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); align-items: center; justify-content: space-between; gap: 40px; padding-top: 60px; padding-bottom: 60px; min-height: 460px; color: white; } .hero-text { max-width: 620px; } #hero .hero-badge { display: inline-block; border: 1px solid rgba(255,255,255,.3); padding: 10px 20px; border-radius: 40px; color: var(--yellow); font-size: 13px; font-weight: 800; letter-spacing: 1px; margin-bottom: 26px; } #hero h1 { color: white; font-size: 46px; line-height: 1.15; margin-bottom: 22px; } #hero p { color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.7; max-width: 560px; margin-bottom: 36px; } .hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .hero-actions .bigbutton { position: static; float: none; width: auto; height: auto; display: inline-block; padding: 16px 32px; border-radius: 30px; box-shadow: 0 14px 28px -16px rgba(10,48,110,0.45); transition: .2s ease; } .hero-actions .bigbutton:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -14px rgba(10,48,110,0.55); } .btn-ghost { display: inline-block; color: white; font-weight: 700; font-size: 15px; text-decoration: none; padding: 15px 30px; border: 1px solid rgba(255,255,255,.4); border-radius: 30px; transition: .2s ease; } .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: white; } / ---------- Hero placeholder illustration ---------- / .hero-illustration { position: relative; width: min(320px, 100%); aspect-ratio: 1 / 1; min-width: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .hero-illustration-mark { width: 68%; height: 68%; } .hero-illustration-glow { position: absolute; inset: 20px; background: radial-gradient(circle, rgba(255,122,28,.25) 0%, rgba(255,122,28,0) 70%); border-radius: 50%; } .hero-illustration-mark { position: relative; z-index: 1; } .hero-illustration-icon { position: absolute; z-index: 2; padding: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; backdrop-filter: blur(6px); } .hero-illustration-icon.icon-1 { top: 10px; left: 0; } .hero-illustration-icon.icon-2 { bottom: 30px; left: -10px; } .hero-illustration-icon.icon-3 { top: 20px; right: -10px; } .hero-illustration-icon.icon-4 { bottom: 10px; right: 10px; } .hero-illustration-star { position: absolute; width: 5px; height: 5px; background: white; border-radius: 50%; box-shadow: 0 0 6px 1px rgba(255,255,255,.8); } .hero-illustration-star.star-1 { top: 5%; right: 20%; } .hero-illustration-star.star-2 { bottom: 15%; left: 10%; } .hero-illustration-star.star-3 { top: 40%; left: -5%; } @media all and (max-width: 992px){ #hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 50px; } .hero-text { max-width: 100%; } #hero p { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-illustration { width: 220px; height: 220px; } } @media all and (max-width: 768px){ #hero h1 { font-size: 32px; } #hero p { font-size: 16px; } .body .mainbg { height: auto; background-size: 100% 100%, cover; } } @media all and (max-width: 480px){ .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .bigbutton, .btn-ghost { text-align: center; } } / ---------- #cta : cartes d'adhésion ---------- / #cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } .ctacard { position: relative; background: white; border-radius: 12px; border: 1px solid var(--xlightgray); border-top: 3px solid var(--yellow); padding: 18px 20px; box-shadow: 0 10px 24px -18px rgba(10,48,110,0.3); transition: .25s ease; display: flex; flex-direction: column; } .ctacard.accent-blue { border-top-color: var(--blue); } .ctacard:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(10,48,110,0.35); } .ctacard-icon { display: flex; flex-shrink: 0; width: 64px; height: 64px; margin-bottom: 12px; } .ctacard-icon img { width: 100%; height: 100%; object-fit: contain; } .ctacard h3 { font-size: 15.5px; margin: 0 0 6px; } .ctacard h3 a { color: var(--darkestblue); text-decoration: none; } .ctacard h3 a:hover, .ctacard h3 a:focus-visible { color: var(--yellow); } .ctacard.accent-blue h3 a:hover, .ctacard.accent-blue h3 a:focus-visible { color: var(--blue); } .ctacard p { color: var(--darkgray); font-size: 13px; line-height: 1.55; margin-bottom: 10px; } .ctacard-link { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); font-weight: 800; font-size: 13px; text-decoration: none; transition: .2s ease; margin-top: auto; } .ctacard.accent-blue .ctacard-link { color: var(--blue); } .ctacard-link:hover { gap: 10px; } @media all and (max-width: 900px){ #cta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media all and (max-width: 640px){ #cta { grid-template-columns: 1fr; } } / ---------- #whoweare (merged with video/media card) ---------- / .whoweare-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; } .whoweare-eyebrow { display: inline-block; color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; } #whoweare h2 { position: relative; padding-left: 18px; border-left: 5px solid var(--yellow); margin-bottom: 18px; } #whoweare p { font-size: 15.5px; line-height: 26px; color: var(--darkgray); } / ---------- #mission : grandes cartes horizontales ---------- / #mission h2 { position: relative; padding-left: 18px; border-left: 5px solid var(--yellow); margin-bottom: 30px; } .mission-cards { display: flex; flex-direction: column; gap: 20px; } .mission-card { display: flex; align-items: center; gap: 30px; background: white; border-radius: 18px; padding: 34px 40px; box-shadow: 0 15px 35px -22px rgba(10,48,110,0.3); transition: .25s ease; } .mission-card:hover { transform: translateY(-4px); box-shadow: 0 20px 45px -18px rgba(10,48,110,0.35); } .mission-card-num { flex-shrink: 0; font-size: 48px; font-weight: 900; color: var(--xlightgray); -webkit-text-stroke: 1.5px var(--darkblue); line-height: 1; } .mission-card-body { flex: 1 1 auto; min-width: 0; } .mission-card-body h3 { color: var(--darkestblue); font-size: 19px; margin-bottom: 10px; } .mission-card-body p { color: var(--darkgray); font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; } .mission-card-link { display: inline-flex; color: var(--yellow); font-weight: 800; font-size: 14px; text-decoration: none; } .mission-card-link:hover { text-decoration: underline; } .mission-card-arrow { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; } .rightToLeft .mission-card-arrow { transform: scaleX(-1); } @media all and (max-width: 768px) { .mission-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 26px; gap: 16px; } .rightToLeft .mission-card { text-align: right; } .mission-card-arrow { align-self: flex-end; } .rightToLeft .mission-card-arrow { align-self: flex-start; } } / ---------- #documentsearch ---------- / #documentsearch { background: linear-gradient(90deg, var(--darkestblue), var(--darkblue)); border-radius: 14px; padding: 50px 40px; text-align: center; } #documentsearch h2, #documentsearch p { color: white; } #documentsearch form { max-width: 560px; margin: 20px auto 0; display: flex; border-radius: 30px; overflow: hidden; } #documentsearch input { flex: 1; padding: 0 20px; height: 52px; border: none; font-size: 14px; } #documentsearch button { padding: 0 30px; font-weight: 800; } / ---------- #gallery : auto-advancing photo carousel ---------- 4 items/view desktop, 2 tablet, 1 mobile (media queries below). The track holds the real items plus one full clone prepended and one full clone appended (main.js), so stepping prev/next never runs out of photos -- once the visible index drifts into either cloned copy, JS silently (no transition) snaps back by one set-length into the real middle copy. object-fit:contain + a fixed item height keeps every photo fully visible (no crop, no distortion) inside a uniform box, regardless of that photo's own aspect ratio. / #gallery h2 { position: relative; padding-left: 18px; border-left: 5px solid var(--yellow); } .photo-carousel { display: flex; align-items: center; gap: 14px; } .photo-carousel-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 12px; } .photo-carousel-track { display: flex; transition: transform .6s ease; } .photo-carousel-item { flex: 0 0 25%; max-width: 25%; box-sizing: border-box; padding: 0 8px; } .photo-carousel-item img { width: 100%; height: 220px; object-fit: contain; background: var(--xlightgray); border-radius: 10px; display: block; } .photo-carousel-nav { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: white; color: var(--darkestblue); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -10px rgba(10,48,110,0.4); cursor: pointer; transition: .2s ease; } .photo-carousel-nav:hover { background: var(--yellow); color: white; } .photo-carousel-nav:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } @media all and (max-width: 992px) { .photo-carousel-item { flex-basis: 50%; max-width: 50%; } } @media all and (max-width: 640px) { .photo-carousel-item { flex-basis: 100%; max-width: 100%; } .photo-carousel-item img { height: 200px; } .photo-carousel { gap: 8px; } .photo-carousel-nav { width: 38px; height: 38px; } } / ---------- Sidebar "Dernières publications" ---------- / .featured h4 { background: linear-gradient(90deg, var(--darkblue), var(--darkestblue)); padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; } .featured .fentry { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 22px -16px rgba(10,48,110,0.3); margin-bottom: 16px; transition: .2s ease; } .featured .fentry:hover { transform: translateY(-3px); } / main.css sets `xheight` (an invalid, disabled property) instead of `height` on the thumb, so it never gets a fixed size for object-fit:cover to crop against — thumb height ends up driven by each photo's own aspect ratio, which is what reads as the image/text "overlap" between cards. / .featured .fentry .fentrythumb { height: 160px; } .featured .fentry .fentrythumb img { height: 160px; } / ---------- #whoweare : "Afficher tout" link ---------- / / .newlinebutton floats the