with no class and none of the four
scripts adds it. So nothing this file builds - hamburger, sliding panel,
language switcher, cookie button, lightbox - ever showed where the focus
was. WCAG 2.4.7.
Two-tone ring so it reads on both grounds without a second rule per
element: the white inner line carries the dark surfaces (lightbox at
rgba(0,0,0,.92), the two floating buttons, the hamburger over the hero
photo), the brand pink outer line carries the white ones (sliding panel,
language dropdown). #DC1384 measures 4.70:1 on #fff, well over the 3:1
asked of a focus indicator.
Selector names taken from js/mobile-menu.js, js/lang-switcher.js and
js/gallery-lightbox.js, not from the audit note: the hamburger is
.ce-hamburger, there is no .ce-mobile-nav__toggle in this codebase.
:focus-visible only, so a mouse click never paints a ring.
------------------------------------------------------------------------ */
.ce-hamburger:focus-visible,
.ce-mobile-nav__close:focus-visible,
.ce-mobile-nav__langs a:focus-visible,
.ce-lang-switcher__button:focus-visible,
.ce-lang-switcher__list a:focus-visible,
.contact-fab:focus-visible,
.ce-cookie-fab:focus-visible,
.ce-cookie-panel__close:focus-visible,
.ce-lightbox__close:focus-visible,
.ce-lightbox__nav:focus-visible,
.ce-lightbox__share-btn:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #DC1384;
}
/* The panel rows run edge to edge inside .ce-mobile-nav, which is
overflow-y:auto: a ring drawn outside the row would be clipped on both
sides. Drawn inside instead, in pink alone - the row ground is always the
white panel. */
.ce-mobile-nav__list a:focus-visible {
outline: 3px solid #DC1384;
outline-offset: -3px;
}
/* ------------------------------------------------------------------------
Short phones (390x667 and the like): the sliding panel had run out of room
in Japanese, and only in Japanese.
Measured on /ja/index.html at 390x667, menu open: .ce-mobile-nav
scrollHeight 716 against clientHeight 667. The overflow brings up a classic
15px scrollbar, the usable width drops from 304 to 289, "Portugues" (111px)
no longer fits beside "Nederlands" (122px) plus the 8px gap in the 241px
left between the 24px side paddings, it wraps to a fifth row at y=647, and
its bottom lands at 686 - past the viewport. elementFromPoint on its centre
returned null: the eighth language was unreachable without scrolling a panel
that gives no sign it scrolls. The seven other languages sat at 621 with
45px to spare.
Both axes were at zero margin at once, which is why it tipped over. This
gives back 36px of height (12 off the top padding, 14 off the bottom, 8 off
the language block's top margin, 2 under its title) and 6px per pill on the
width, so the row fits again, the scrollbar goes away, and the width it was
eating comes back. After: scrollHeight 667 = clientHeight, no scrollbar,
four rows, last pill bottom 617, all 8 hit-tested on their own centre.
Bounded by height as well as width so nothing above 700px moves, and the
pills keep their 39px height - the point is to reach the eighth language,
not to shrink what you have to tap.
------------------------------------------------------------------------ */
@media (max-width: 750px) and (max-height: 700px) {
.ce-mobile-nav {
padding-top: 58px;
padding-bottom: 16px;
}
.ce-mobile-nav__langs { margin-top: 14px; }
.ce-mobile-nav__langs-title { margin-bottom: 8px; }
.ce-mobile-nav__langs a {
padding-left: 13px;
padding-right: 13px;
}
}
/* ------------------------------------------------------------------
Screen-reader-only text.
The eight "concept" pages had no
at all: their outline started at
, so assistive technology and search engines were given two
section titles and no page title. The Wix layout has no room for a
visible one and moving anything would mean reordering its cascade, so
the heading is exposed to the accessibility tree only.
------------------------------------------------------------------ */
.ce-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ------------------------------------------------------------------
Desktop navigation: labels colliding with their neighbour.
The Wix export froze a width on every
of the main menu (85px,
92px, 223px), computed for the labels the site had on the day it was
captured. The labels have changed and are now translated into eight
languages, but the widths stayed: the text of each item overflows its
own box and runs into the next one. Measured at 1440px, five
languages out of eight collide - french "Notre offre de
restauration" ran straight into "Plus", german "Startseite" into
"Konzept", and the same in italian, japanese and spanish.
Letting each item size to its own label costs nothing: the container
is already white-space: nowrap with inline-block children, so the row
simply becomes as wide as it needs to be. Bounded to the desktop
menu, since below 751px the whole bar is replaced by the hamburger.
------------------------------------------------------------------ */
@media (min-width: 1440px) {
#comp-iexyv84titemsContainer > li[id^="comp-iexyv84t"] {
width: auto !important;
}
}
/* ------------------------------------------------------------------
"L'inclusion, Les Liens" photo strip (/about): the wider the screen,
the less of the photo was visible.
The strip is full-bleed - its width is the viewport minus the 80px
gutters - but its height was frozen at 362px by the Wix export, and
the photo behind it is a 1280x1920 portrait laid in with
object-fit: cover. Measured on the live page: 19% of the photo showed
at 1440, 14% at 1920, 10% at 2560 and 7% at 3840, where the image was
also being blown up 2.9x past its own resolution. At 1440 the band
still caught the three faces; from 2560 up it caught only the middle
one, and the two men on either side were cut off above it.
The fix keeps the proportions the strip has at 1440 - 1280 wide by
362 tall, so height = width / 3.536 - and lets it grow. The text card
is pushed down by exactly the same amount, which keeps the 190px of
photo it overlaps identical to what it is today, and the grid row
that holds both grows by that amount too.
Bounded to widths above 1440, so nothing at or below the desktop size
the site was drawn for moves at all. 100vw is used rather than the
element's own width: it can overstate by the width of a classic
scrollbar, which adds about 4px of height here and nothing else -
no width is set from it, so it cannot cause a horizontal overflow.
------------------------------------------------------------------ */
/* And the white text card was cutting the chef's face in half.
The card sits in the same grid cell as the strip and overlaps its
bottom by a fixed 190px. That is a constant number of SCREEN pixels,
but the photo behind it is scaled by the strip width, so it eats a
different amount of PHOTOGRAPH at every size: 301 source pixels at
1440, 105 at 3840. Measured on the source (1280x1920), the chef on
the right has his hair at y528 and the bottom of his beard at y830,
and the card's top edge fell on y744 at 1440 and y826 at 1920 -
through his mouth, then exactly on his chin. Above about 2440 the
card had already dropped clear of him, which is why the 4K screen
this strip was checked on looked right.
So the overlap is capped by what the photograph can afford rather
than by a screen constant: 404 source pixels of photo are kept above
the card, which puts its edge on his collar at every width. The two
curves meet at 2437, so nothing at or above 2560 moves by a pixel.
The bound moves from 1441 to 1440, where the formula evaluates to
the 362px the export froze - the strip itself does not move. */
@media (min-width: 1440px) {
:root {
--ce-inclusion-height: calc((100vw - 160px) * 0.2828);
--ce-inclusion-overlap: min(190px, (100vw - 160px) * 0.0834);
}
#comp-mt96onik,
#comp-mt96onik > .Ak0vpt,
#comp-mt96onim,
#comp-mt96onio4 {
height: var(--ce-inclusion-height) !important;
}
/* 70px is the strip's own top margin; the card starts that much lower,
plus the band, minus whatever overlap the photo can pay. */
#comp-mt96onip6 {
margin-top: calc(70px + var(--ce-inclusion-height)
- var(--ce-inclusion-overlap)) !important;
}
/* Both sit in one grid cell, so the row has to make room for the taller one. */
div:has(> #comp-mt96onik) {
grid-template-rows: calc(488px + var(--ce-inclusion-height)
- var(--ce-inclusion-overlap)) !important;
}
}
/* ------------------------------------------------------------------
The same strip on mobile: the photo was not shown at all.
Below 751px the generic rule above turns these frozen sections over
to their content for their height. This strip has no content - the
photo lives in an absolutely positioned background layer - so it
collapsed to zero and the photo simply disappeared. Measured at
390x667: height 0.
It gets an explicit shape instead. 4:3 rather than the desktop 3.54:1
because the source photo is a portrait: at 390 the strip is about
268px tall and half the photo shows, against a fifth of it on a
desktop. Bounded to this one strip by its unique ids - a general rule
on background layers has already distorted every photo of the site
once, and had to be reverted.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
/* The strip and its text card were also sitting at 55% of the available
width, an echo of the 808-of-1440 column proportion of the desktop
layout, so half the screen went unused. Measured at 390: 199px used
out of 359 available. */
#comp-mt96onik,
#comp-mt96onik > .Ak0vpt,
#comp-mt96onim,
#comp-mt96onip6 {
width: 100% !important;
max-width: 100% !important;
}
#comp-mt96onik,
#comp-mt96onik > .Ak0vpt,
#comp-mt96onim {
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3;
}
/* The magenta block is a decorative field that balances the photo on a wide
screen. Stacked under it on a phone it reads as a stray bar, so it goes. */
#comp-mt96onio4 {
display: none !important;
}
}
/* ------------------------------------------------------------------
"Travaillons ensemble" (/about) broke in the middle of the word.
The Wix export froze a 193px width on the heading's box, computed for
whatever label the page carried on the day it was captured. The word
needs about 200px at its 38px size, and the box allows a break inside
a word, so it rendered "Travaillo / ns / ensemble". Its parent is
276px wide at 1440 and 512px at 2560: the room was there, the box
simply refused to use it.
Letting the box size to its own text costs nothing here - it is the
only thing in that mesh cell, and it is aligned left, so it grows
into space that was already empty. Bounded to this one id, and left
free in every language: German and Dutch set the longest words.
------------------------------------------------------------------ */
#comp-mt95501l4 {
width: auto !important;
max-width: 100% !important;
}
/* ------------------------------------------------------------------
Contact form on mobile (/about).
Measured at 390px before this block: the whole contact column sat at
239px of the 359px available - the two-thirds proportion it has in
the desktop layout - and inside it every field kept its own frozen
pixel width: 160, 159, 142 for the three text inputs and 169 for the
textarea. Because those widths differ, each label started from a
different left edge (115, 116, 124 and 76px), which read as a
staircase. The send button was worse: its box had collapsed to zero
height and the button inside it, absolutely positioned against that
box, measured 66x2px - a hairline of underlined text rather than a
button.
Everything here is width and stacking; no colour, no type size, and
nothing above 750px is touched.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
#comp-mt95501k3,
#comp-mt95501s1,
#comp-mt95501t2,
#comp-mt95501v1 {
width: 100% !important;
max-width: 100% !important;
}
/* The row of fields is a flex row on desktop; on a phone they stack. */
#comp-mt95501v1 > div > div {
display: block !important;
}
#comp-mt95501w2,
#comp-mt9550242,
#comp-mt955025,
#comp-mt9550253,
#comp-mt95501v1 label,
#comp-mt95501v1 input,
#comp-mt95501v1 textarea,
#comp-mt95501v1 .nuFEsg {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
}
/* Air between two fields, so a label belongs to the box under it. */
#comp-mt95501w2,
#comp-mt9550242,
#comp-mt955025 {
margin-bottom: 18px !important;
}
/* The button gets its box back, and a target worth tapping. */
#comp-mt9550283 {
width: 100% !important;
height: auto !important;
min-height: 48px !important;
}
#comp-mt9550283 button {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
min-height: 48px !important;
}
}
/* ------------------------------------------------------------------
The same strip: which part of the photo the band shows.
Locking the proportions was not enough. The band shows a horizontal
slice 362px tall out of the 1920px of the source photo, and
object-position defaults to the vertical centre - so the slice ran
from y779 to y1141, while the three heads sit between roughly y540
and y900. Every head was cut off at the top, at every screen size,
and it was Olivier who spotted it on a 4K screen.
Measured on the photo itself, laid out against a grid: the man in
red starts around y540, the cap of the one on the left around y640,
the hair of the woman in the middle around y700, and the lowest chin
ends around y900. The three faces therefore span about 360px - the
exact height of the slice, which is why nothing but the right offset
will do. 35% puts the slice at y545-y907.
The percentage is a fraction of the photo, not of the screen, so one
value holds at every width - which is the whole point: a value tuned
for one screen would fail on the next.
------------------------------------------------------------------ */
#bgMedia_comp-mt96onik img,
#bgMedia_comp-mt96onim img {
object-position: 50% 35% !important;
}
/* Phone numbers made callable by js/tel-links.js. They sit in contact blocks,
not in prose, so they keep the colour and weight of the text around them
rather than looking like a link dropped into a sentence; the underline
appears on hover and on keyboard focus, where a link has to announce
itself. The focus ring itself comes from the :focus-visible block above. */
a.ce-tel {
color: inherit;
text-decoration: none;
}
a.ce-tel:hover,
a.ce-tel:focus-visible {
text-decoration: underline;
}
/* The number renders 18px tall, under the 24px a touch target has to offer
(WCAG 2.5.8). The hit area is grown with padding cancelled by an equal
negative margin - the same trick the social icons above use - so the text
keeps its exact place on the line and only the tappable box grows. */
a.ce-tel {
display: inline-block;
padding: 5px 4px;
margin: -5px -4px;
}
/* ------------------------------------------------------------------
"Tous Chefs !" photo strip (/concept): the two faces were out of frame.
The strip is full-bleed, its height was frozen at 780px by the Wix
export, and behind it sits a 712x890 portrait laid in with
object-fit: cover and object-position at the very top. Two things
went wrong at once.
Widening: the wider the screen, the taller the photo is scaled, and
with the height frozen the visible slice shrinks. Measured live:
43.3% of the photo at 1440, 32.5% at 1920, 24.4% at 2560 and 16.3%
at 3840 - where the band showed the ceiling neon and nothing else.
Framing: the slice was taken from the top. The man in the red polo
sits between y164 and y292 of the source, the young cook receiving
the toque between y342 and y430; the slice stopped at y386, so his
head was cut in half at 1440 and gone entirely above it.
The strip keeps the proportions it has at 1440 - 1440 wide by 780
tall, so height = width / 1.846 - and the slice is moved down to
30%, which frames y150 to y535: both heads, the whole toque, and air
above. It is a percentage of the photo, not of the screen, so one
value holds at every width.
Bounded to widths above 1440 for the height, so nothing at or below
the desktop size the site was drawn for moves. The framing applies
at every width: it is right on a phone too, where the band shows
63.7% of the photo.
------------------------------------------------------------------ */
#comp-mt91okxe2 img,
#comp-mt91okxe2 wow-image img {
object-position: 50% 30% !important;
}
@media (min-width: 1440px) {
:root {
--ce-tous-chefs-height: calc(100vw * 0.5417);
}
#comp-mt91okxe1,
#comp-mt91okxe1 > .Ak0vpt,
#comp-mt91okxe2 {
height: var(--ce-tous-chefs-height) !important;
}
/* The section sits in a one-row grid; the row has to grow with it. */
div:has(> #comp-mt91okxe1) {
grid-template-rows: var(--ce-tous-chefs-height) !important;
}
/* The background layers are sized from the block, not from themselves. */
#comp-mt91okxe2 [class^="bgLayers"],
#comp-mt91okxe2 [class^="bgMedia"],
#comp-mt91okxe2 wow-image,
#comp-mt91okxe2 img {
height: 100% !important;
}
}
/* ------------------------------------------------------------------
"Certains de nos clients" logo row (/ce-qui-nous-motive): the logos
were cropped, and the row sat off the axis its heading is centred on.
Every logo was laid in with object-fit: cover inside a square box,
so any logo that is not square lost its edges. Measured live:
Dassault Systemes is 125x38 in a 124x100 box and lost 62% of its
width - it read "DASSI SYSTE" on screen. ADSN lost 15%, the
Aix-en-Provence Centre de Congres 7%. A client's brand is the one
thing on a page that must never be cut, so they are contained now,
whole, inside the same boxes.
The four boxes also share a 230px left margin that put the row 99px
to the right of the page axis, while the heading above it is exactly
centred. The offset is a constant in pixels at every width, so one
value corrects it everywhere: 230 - 99 = 131.
------------------------------------------------------------------ */
#comp-msvi9nks2 img,
#comp-msvi9nkt img,
#comp-msvi9nkt2 img,
#comp-msvi9nkt4 img {
object-fit: contain !important;
object-position: 50% 50% !important;
}
#comp-msvi9nks2,
#comp-msvi9nkt,
#comp-msvi9nkt2,
#comp-msvi9nkt4 {
margin-left: 131px !important;
}
/* ------------------------------------------------------------------
The three long legal pages: 10px body text, pushed 167px off axis.
/mentions-legales, /politique-de-confidentialite and
/termes-et-conditions render their whole body at font-size: 10px
with a 16px line-height, while their own H1 is 39px - and the text
block sits at x540 when its heading is centred on 720, so the copy
visibly drifts right of the title it belongs to.
/politique-de-cookies is the same page shape done right: 15px on a
21px line, a 647px column centred to the pixel. The three others are
aligned on it rather than on a value of my own choosing.
Ten-pixel type is below what anyone should have to read, and these
are the pages that carry the cancellation terms and the privacy
notice - the two a customer actually needs to read.
------------------------------------------------------------------ */
#comp-l6opbefn2,
#comp-l6opfgiv,
#comp-l6opgky2 {
left: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 647px !important;
max-width: 100% !important;
}
#comp-l6opbefn2, #comp-l6opbefn2 *,
#comp-l6opfgiv, #comp-l6opfgiv *,
#comp-l6opgky2, #comp-l6opgky2 * {
font-size: 15px !important;
line-height: 21px !important;
}
/* ------------------------------------------------------------------
The logo baseline was broken in the middle of a word, on all 72
pages: "Traiteur a / suppleme / nt d'ame".
The block is 75px wide with 71px of room inside; "supplement" needs
83px at the 14px it is set in, and the block carries
overflow-wrap: break-word, so the browser did what it was told and
split the word. Widening it to 92px and letting words stay whole
keeps the same three lines and the same height - it just breaks
between words. The mobile header already gives the block 229px, so
this only concerns the desktop layout.
------------------------------------------------------------------ */
@media (min-width: 1440px) {
/* Widened by 17px and moved 8px left, so the gap with the wordmark
stays what it was: there is empty space on its left, none on its right. */
#comp-ifpbhihr {
width: 92px !important;
transform: translateX(-9px);
}
}
#comp-ifpbhihr,
#comp-ifpbhihr * {
overflow-wrap: normal !important;
word-break: normal !important;
}
/* ------------------------------------------------------------------
The four call-to-action buttons were 0px tall in the fluid layout.
This one is mine. The rule that hands frozen Wix blocks back to
their content for their height also hit the button blocks, and the
.wixui-button inside is height:100% - so 100% of nothing. Measured:
"Nos Engagements" 142x0, "Nos formules" 103x0, "Voir le menu >"
116x0, "Aller aux menus" 131x4, whose 2px border ran straight
through its own label, so the words read as struck out.
They get a real height and a real touch target, and they are
centred: the labels are text-align: start inside a 142px block, so
each sat a few pixels left of the axis its card is centred on.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
a.wixui-button,
button.wixui-button {
height: auto !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 20px !important;
margin: 0 auto !important;
}
[id^="comp-"]:has(> a.wixui-button),
[id^="comp-"]:has(> button.wixui-button) {
height: auto !important;
min-height: 44px !important;
text-align: center !important;
}
}
/* ------------------------------------------------------------------
Two fixed buttons were sitting on top of the last line of the page.
The cookie button and the contact bubble are anchored to the bottom
of the window; the copyright line ends up underneath them, and on a
phone 23 of its 24 pixels were covered - the page ended on
"(c) 2026 C". The footer is given room to clear them.
"Retour en haut" was also breaking onto two lines inside a 76px
anchor; it is one short phrase and belongs on one line.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
#SITE_FOOTER,
footer#SITE_FOOTER {
padding-bottom: 72px !important;
}
}
#comp-ih261x9y,
#comp-ih261x9y a {
width: auto !important;
white-space: nowrap !important;
}
/* ------------------------------------------------------------------
Two blocks stayed anchored to the 1440 canvas on a wider screen.
The "Labels, agreements" cards and the four photos above the footer
are full-width containers holding absolutely positioned children
whose left offsets were computed for a 1440px page. The container
grows with the window, the children do not move: measured at 3840,
the cards sat at x247-1193 under a heading centred on 1920, leaving
2647px of white to their right - two thirds of the screen.
Giving the container the width its children were laid out for, and
centring the container itself, puts them back on the page axis at
every width: 1440 leaves them where they are, 1920 shifts them by
240, 3840 by 1200. The children keep their own offsets, so nothing
inside either block moves relative to anything else.
------------------------------------------------------------------ */
@media (min-width: 1440px) {
#comp-j9zlrn3j,
#comp-msvi9nk74 {
width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* The client logo row lives in a full-width grid cell with a fixed left
margin, so centring it on the 1440 canvas still left it anchored to the
left of a wider screen: measured at 3840, its centre was 720 against a
page axis of 1920. The margin carries the same recentring the two blocks
above get from their container. */
@media (min-width: 1440px) {
#comp-msvi9nks2,
#comp-msvi9nkt,
#comp-msvi9nkt2,
#comp-msvi9nkt4 {
margin-left: calc(131px + (100vw - 1440px) / 2) !important;
}
}
/* ------------------------------------------------------------------
/about on a phone: the social icons sat on top of the form.
Measured at 390: the Facebook, LinkedIn and Instagram links were at
y2328-2372 while the "Prenom" label ran y2356-2370, so a third of
the label was covered by a link - tapping the field name opened
Facebook. The three links also overlapped each other by 13px, and
the first one started at x6, ten pixels outside the page gutter.
They are laid out as a plain row instead, each with its own space.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
#comp-mt95501p1 {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
height: auto !important;
min-height: 44px !important;
}
#comp-mt95501p1 > *,
#comp-mt95501p1 a {
position: static !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
}
}
/* The opening picture of /ce-qui-nous-motive sits 16px right of the axis its
four headings are centred on - a 904px block whose left offset was never
adjusted. Measured identical at 1440 and 3840, so one value corrects both. */
@media (min-width: 1440px) {
#comp-mszonof8 {
left: 38px !important;
}
}
/* ------------------------------------------------------------------
"Trois coupelles" header band (/menus): the Wix parallax, rebuilt.
What Wix was doing: the band is a fixed-height window, and inside it
the media layer is one viewport tall and pulled up by exactly one
viewport (margin-top: -900px on a 900px window). As the page scrolls,
that offset makes the picture look pinned to the screen while the
band travels over it - a parallax. The runtime that kept the offset
in step with the scroll position is gone, so the offset just froze:
the band was left showing whatever happened to be one viewport above,
which on a 4K screen was the black backdrop over the dishes. It read
as a plain black rectangle, and on a phone the band collapsed to zero
and the picture never appeared at all.
The effect is not worth a scroll listener on a static site, and it is
the picture that matters, so the layers are anchored to the band
instead - each one absolutely positioned over it, no negative margin,
no transform - and the picture is framed at 60% of its height, where
the three dishes are (source y479 to y1166). Measured: 1440 shows
y442-y1076, 3840 shows y680-y918. The dishes, at both.
Under 1440 the band is given the picture's own proportions, because
the fluid layout hands frozen blocks back to their content and this
one has none - which is why it was zero pixels tall on a phone.
------------------------------------------------------------------ */
#comp-lty2jdkd {
position: relative !important;
overflow: hidden !important;
}
#comp-lty2jdkd [id^="bgLayers"],
#comp-lty2jdkd [id^="bgMedia"],
#comp-lty2jdkd wow-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
transform: none !important;
}
#comp-lty2jdkd img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 60% !important;
}
@media (max-width: 1439px) {
#comp-lty2jdhs,
#comp-lty2jdkd {
height: auto !important;
aspect-ratio: 1920 / 1371;
}
}
/* ------------------------------------------------------------------
The three home-page cards were a staircase.
Each card is a Wix mesh: every child sits in its own grid row at a
hand-measured left offset, and the title row is min-content. A title
that wraps to two lines ("Nos valeurs", "Notre offre") therefore
pushes its rule, its copy and its button below the one-line
"Concept" - measured at 1440, the three calls to action sat at
y2605, y2550 and y2586, a 55px spread, with the three rules 32px
apart. The three thumbnails were three different sizes as well
(181x180, 180x180, 174x176), each losing 29 to 33 per cent of its
source to a square crop of a portrait photo.
Those left offsets only ever centred their child, so the mesh is
replaced by a plain flex column with one shared vertical rhythm:
two lines are reserved for the title whatever the wording does, and
the button is pinned to the bottom of the card. That is what keeps
the three cards aligned in all eight languages instead of retuning
six margins per language - Dutch runs its copy to four lines.
One 3:4 box for the three thumbnails matches the three portrait
sources, and the crop falls from about 30 per cent to 5-11.
------------------------------------------------------------------ */
@media (min-width: 1440px) {
[data-mesh-id="comp-ih26ixw7inlineContent"],
[data-mesh-id="comp-ih26ixwfinlineContent"],
[data-mesh-id="comp-ih26ixwlinlineContent"],
[data-mesh-id="comp-ih26ixw7inlineContent-gridContainer"],
[data-mesh-id="comp-ih26ixwfinlineContent-gridContainer"],
[data-mesh-id="comp-ih26ixwlinlineContent-gridContainer"] {
height: 100% !important;
width: 100% !important;
}
[data-mesh-id="comp-ih26ixw7inlineContent-gridContainer"],
[data-mesh-id="comp-ih26ixwfinlineContent-gridContainer"],
[data-mesh-id="comp-ih26ixwlinlineContent-gridContainer"] {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
box-sizing: border-box !important;
padding: 46px 24px 34px !important;
}
[data-mesh-id="comp-ih26ixw7inlineContent-gridContainer"] > *,
[data-mesh-id="comp-ih26ixwfinlineContent-gridContainer"] > *,
[data-mesh-id="comp-ih26ixwlinlineContent-gridContainer"] > * {
position: relative !important;
grid-area: auto !important;
left: auto !important;
right: auto !important;
margin: 0 !important;
flex: 0 0 auto !important;
align-self: center !important;
}
#comp-ihyf378m, #comp-ihyf3791, #comp-ihyf37911 {
width: 180px !important;
height: 240px !important;
margin: 0 0 26px !important;
}
#comp-ihyf378m img, #comp-ihyf3791 img, #comp-ihyf37911 img {
width: 100% !important;
height: 100% !important;
}
#comp-ih6894ts, #comp-ih688evd, #comp-ih26ixwl2 {
width: 100% !important;
min-height: 72px !important;
margin: 0 0 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
#comp-ih26ixwc, #comp-ih26ixwj, #comp-ih26ixwm1 {
margin: 0 0 20px !important;
}
#comp-ih26ixwa, #comp-ih26ixwh1, #comp-ih26ixwn1 {
width: 100% !important;
margin: 0 !important;
}
#comp-ih289td1, #comp-ih26ixwq, #comp-ih289n8y {
margin: auto 0 0 !important;
}
}
/* Stacked layout: the generic height:auto above frees these images back to
their three native sizes (181x253, 180x270, 174x261), so the cards look
different from one another on a phone. Same 3:4 box as the desktop row. */
@media (max-width: 1439px) {
#comp-ihyf378m, #comp-ihyf3791, #comp-ihyf37911 {
width: 180px !important;
height: 240px !important;
}
#comp-ihyf378m img, #comp-ihyf3791 img, #comp-ihyf37911 img {
width: 100% !important;
height: 100% !important;
}
}
/* ------------------------------------------------------------------
The four legal pages ended on a band of white, up to 663px of it.
The height is not on the section but on the Wix grid container
inside it: min-height 931px on /mentions-legales, 737px on two
others, 1407px on /politique-de-cookies - the canvas heights of the
Wix editor, kept by the export. The copy sits in a 1fr row with
align-self: start, so the row stretches to that height and the text
does not follow. Measured at 1440: 931px of section for 607px of
content.
Handing the height back to the content cannot shorten a page whose
text is longer than the frozen value: /termes-et-conditions already
overflowed its 737px and measures the same before and after. Below
1440 the fluid layout already computes min-height: 0, so this is a
no-op there.
------------------------------------------------------------------ */
[data-mesh-id="comp-lvfcrftpinlineContent-gridContainer"],
[data-mesh-id="comp-lvfcrfs0inlineContent-gridContainer"],
[data-mesh-id="comp-lvfcrftrinlineContent-gridContainer"],
[data-mesh-id="comp-lvfcrfrtinlineContent-gridContainer"] {
min-height: 0 !important;
}
/* ------------------------------------------------------------------
And the same three pages had lost their headings - my own doing.
Their copy is real markup, Annulation
...
, and the
rule that pinned the body to 15px is written "#comp-xxx *", so it
caught the as well. A heading became 15px bold, and since the
Wix reset zeroes its margins, it ended up glued to the last line of
the paragraph above: measured, 0px between "Devis et commande" and
the sentence before it. On the page that carries the cancellation
terms, nothing showed the reader where one clause ended.
/politique-de-cookies gives the measurements, as it did for the
body: Georgia 25px weight 400 in #2F2E2E, 30px above a heading and
10px below, 21px between paragraphs, copy in #4A4A4A and in the
site's own font rather than the Mulish hard-coded by the export.
------------------------------------------------------------------ */
#comp-l6opbefn2 h2,
#comp-l6opfgiv h2,
#comp-l6opgky2 h2 {
font-family: Georgia, Palatino, "Book Antiqua", "Palatino Linotype", serif !important;
font-size: 25px !important;
line-height: 29px !important;
font-weight: 400 !important;
color: #2F2E2E !important;
margin: 30px 0 10px !important;
}
/* The first heading sits right under the h1, which carries its own
bottom margin; 30px more would open a hole there. */
#comp-l6opbefn2 > h2:first-child,
#comp-l6opfgiv > h2:first-child,
#comp-l6opgky2 > h2:first-child {
margin-top: 0 !important;
}
#comp-l6opbefn2 p,
#comp-l6opfgiv p,
#comp-l6opgky2 p {
font-family: din-next-w01-light, sans-serif !important;
color: #4A4A4A !important;
margin: 0 0 21px !important;
}
#comp-l6opbefn2 > p:last-child,
#comp-l6opfgiv > p:last-child,
#comp-l6opgky2 > p:last-child {
margin-bottom: 0 !important;
}
/* Once the frozen height is gone, the three long pages end 64px above
the footer - a 4rem padding the export put inline on their text block
- while /politique-de-cookies ends 10px above it and reads as
cramped. The padding moves to the section, where all four share it. */
#comp-l6opbefn2, #comp-l6opfgiv, #comp-l6opgky2 {
padding-bottom: 0 !important;
}
#comp-lvfcrftp, #comp-lvfcrfs0, #comp-lvfcrftr, #comp-lvfcrfrt {
padding-bottom: 54px !important;
}
/* The 15px pin also overrode the fluid scaling the cookie page keeps
below 1440: measured, 16px at 768-1024 there against a flat 15px
here. The desktop column stays at 15/21. */
@media (max-width: 1439px) {
#comp-l6opbefn2, #comp-l6opbefn2 p, #comp-l6opbefn2 li,
#comp-l6opfgiv, #comp-l6opfgiv p, #comp-l6opfgiv li,
#comp-l6opgky2, #comp-l6opgky2 p, #comp-l6opgky2 li {
font-size: 16px !important;
line-height: 24px !important;
}
}
/* An empty 275x86 div is pinned to the bottom right of all nine pages
(#comp-jgg9jm4v, inside Wix's pinnedBottomRight layer). Wix filled it
with a widget at runtime; what is left is a transparent rectangle that
still takes clicks - its parent layer is pointer-events: none, the
child is not. Nothing shows, but it swallows whatever ends up under
it, and it sits exactly where footer links land. */
#comp-jgg9jm4v {
pointer-events: none !important;
}
/* The food truck picture (/concept) was stored on its side: the file
decoded to 1920x1440 with the truck lying down, bonnet to the left,
the skewers running up the right edge - and the RIFF held a single
VP8 chunk, no EXIF, no XMP, so there was no orientation tag a browser
was failing to honour. The pixels themselves were turned. The file
has been rewritten upright, 1440x1920, which is the shape its own
data-image-info always claimed (3024x4032). The original is kept in
_i18n/backup-fr-20260904-1315/.
Framing, measured on the upright photo: windshield y100-y350, the
badge y480-y650, grille and indicator y850-y1250, the tray of
skewers y1400-y1920. 80% keeps the front of the truck and the
skewers together at every width. */
#comp-msvib2vh4 img {
object-position: 50% 80% !important;
}
/* ------------------------------------------------------------------
"Chic et Chouette" (/concept): the plated bite was out of frame.
The band that is actually seen is the left column, comp-msvib2vm -
not the full-width comp-msvib2vj4 behind it, whose own copy of the
same photo is covered by that column on the left and by the opaque
text column on the right, and shows through as a 2px seam.
The column is a landscape window that flattens as the screen widens
(719x665 at 1440, 1920x665 at 3840) over a 1200x1680 upright, so
cover keeps 66% of the photo at 1440 and 24.7% at 3840 - and the
default centre spent that budget on the chef's jacket. Measured on
the source against a grid: fingertips y480-y560, the pinch releasing
the petals y590-y650, the cakes y1240-y1500, the front edge of the
wooden board y1590. The slice ended at y1395 at 1440: the dish was
cut off at every width above 700px.
94% puts the bottom of the slice at y1646 at 1440 and y1604 at 3840:
the whole board, at every width. Above roughly 1600px the window is
too short to hold both the hand and the dish - no value can - and
the dish is what the section is about.
------------------------------------------------------------------ */
#comp-msvib2vm img,
#comp-msvib2vm wow-image img {
object-position: 50% 94% !important;
}
/* ------------------------------------------------------------------
Contact form (/about): the fields had three different widths.
The export froze one width per field, each computed for its own
label: 160px for the first name, 159px for the surname, 142px for
the e-mail, 340px for the message - so the e-mail line was a stub
under a full-width message box, and the right edges landed on 376 or
377 depending on the row. One column instead, 36 to 376, which is
the width the message box already had.
Bounded to 1440 and up: below that the mobile block stacks every
field full width, and these offsets would push them out of the box.
------------------------------------------------------------------ */
@media (min-width: 1440px) {
#comp-mt9550242 { width: 160px !important; }
#comp-mt955025 { width: 340px !important; }
[data-mesh-id="comp-mt95501v1inlineContent-gridContainer"] > #comp-mt9550242 {
left: 216px !important;
}
[data-mesh-id="comp-mt95501v1inlineContent-gridContainer"] > #comp-mt9550253 {
left: 36px !important;
}
[data-mesh-id="comp-mt95501v1inlineContent-gridContainer"] > #comp-mt9550283 {
left: 264px !important;
}
}
/* ------------------------------------------------------------------
Two things my own fixes broke on a phone, and one they exposed.
The social icons on /about: laying them out as a flex row let the
images shrink to their flex minimum. Measured at 390: 4px wide for
a 100x100 source, 83 per cent of the width thrown away - three
vertical hairlines where three logos should be. They get their size
back, and contain rather than cover, so a square logo stays square.
The four calls to action: giving them a real height also gave them
inline-flex and padding, so the button is now wider than the 142px
block the export froze around it - 182px for "Nos Engagements" - and
a box wider than its container cannot be centred by auto margins. It
overflowed to the right by 40px, which showed plainly on "Aller aux
menus", the one with a visible border. Centring on its own axis
instead works whatever the label's length, in eight languages.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
#comp-mt95501p1 img {
width: 24px !important;
height: 24px !important;
object-fit: contain !important;
flex: 0 0 24px !important;
}
a.wixui-button,
button.wixui-button {
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
}
}
/* ------------------------------------------------------------------
Three more things the wider fluid layout exposed.
The social icons on /about came out 4px wide for a 100x100 source:
the fluid block sets min-width: 0 on everything so that frozen Wix
boxes can shrink, and inside a flex row that lets an image collapse
below its own basis. They are pinned instead.
The client logo row and the labels grid are centred above 1440 by
the rules further up; below it they stayed anchored to the left of
their band - measured at 768, the row sat 170px off the axis its
own heading is centred on.
And the header band of /menus, which the desktop rules give the
photo's own proportions, was left at the 50px the export froze it
at: 95 per cent of the picture gone, with the caption floating on a
coloured thread. It gets the same proportions as everywhere else.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
#comp-mt95501p1 img {
width: 24px !important;
min-width: 24px !important;
max-width: none !important;
height: 24px !important;
object-fit: contain !important;
}
#comp-msvi9nks2,
#comp-msvi9nkt,
#comp-msvi9nkt2,
#comp-msvi9nkt4 {
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
align-self: center !important;
}
#comp-msvi9nkt4 { margin-inline: auto !important; }
#comp-msz5vii1,
#comp-msz5vrs4,
#comp-msz5vrst {
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1371 / 1920;
max-height: 70vh !important;
}
}
/* The call-to-action buttons are wider than the 142px block the export
froze around them - "Nos Engagements" needs 164 - and a box wider than
its container cannot be centred by auto margins, so it overflowed to
the right and sat 11px off its own card's axis. The fluid layout got
this fix already; the desktop one needs it too. */
@media (min-width: 1440px) {
a.wixui-button,
button.wixui-button {
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
}
}
/* ------------------------------------------------------------------
Three defects that only one language each could produce.
German: "Geschäftsbedingungen" needs 162px in the 137px footer
column, on all nine German pages at every width from 1440 up, and
the Wix bootstrap sets overflow-wrap: break-word - so the browser
split it as "Geschäftsbedingun / gen". Hyphenation gives the same
two lines with a hyphen, which is how German breaks a word. The
pages already declare lang, so the browser has the right patterns.
Dutch: "Verwerkingsverantwoordelijke" is a 389px heading in a 359px
phone screen. Widening cannot fix that one - no box on a 390px
screen is wide enough - so it too is hyphenated.
Japanese: nineteen lines across the nine pages began with a small
kana or a chouonpu, which is the Japanese equivalent of breaking a
word in half: line-break was computing to auto, which permits it.
Strict forbids it. The hard rules were already respected - no line
started with a full stop or a comma.
------------------------------------------------------------------ */
/* Hyphenation was the first idea and it does nothing here - the browser
has no German patterns to work with - so the column is given the room
the word needs instead: 168px, and moved 31px left, which is space the
footer row has to its left and does not have to its right. Measured at
1440, 1920 and 3840: two lines, whole words, 31px clear of the next
column. */
html[lang="de"] #comp-l6opsv6x {
width: 168px !important;
left: -31px !important;
}
html[lang="de"] #comp-l6opsv6x,
html[lang="de"] #comp-l6opsv6x * {
overflow-wrap: normal !important;
word-break: normal !important;
}
html[lang="nl"] #comp-l6opfgiv h2,
html[lang="nl"] #comp-l6opbefn2 h2,
html[lang="nl"] #comp-l6opgky2 h2 {
hyphens: auto;
-webkit-hyphens: auto;
}
html[lang="ja"] body,
html[lang="ja"] p,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] span,
html[lang="ja"] li {
line-break: strict;
}