* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FBF4E7; color: #2A1B12; font-family: Archivo, "Noto Sans SC", "Helvetica Neue", sans-serif; }
a { color: #A0521B; text-decoration: none; }
a:hover { color: #2A1B12; }
::selection { background: #E8B23A; color: #2A1B12; }
/* scroll reveals, CSS scroll-driven where supported, JS fallback below */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-reveal] { animation: rise .01s linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
[data-stat] { animation: riseSmall .01s linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
[data-stats] > div:nth-child(2) { animation-delay: 0s; animation-range: entry 4% cover 38%; }
[data-stats] > div:nth-child(3) { animation-range: entry 8% cover 42%; }
[data-photo-track] img, [data-adr] video { animation: zoomSlow .01s linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
[data-adr-list] article { animation: riseCard .01s linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
[data-hero-grid] > div { animation: curtain .01s linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
}
}
@supports not (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-reveal], [data-stat], [data-adr-list] article { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-seen] { opacity: 1 !important; transform: none !important; }
}
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }
/* entrance choreography */
[data-enter] { animation: enterUp 1.1s cubic-bezier(.16,.84,.24,1) both; }
[data-enter="1"] { animation-delay: .06s; }
[data-enter="2"] { animation-delay: .18s; }
[data-enter="3"] { animation-delay: .3s; }
[data-enter="4"] { animation-delay: .42s; }
[data-lift] { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease, border-color .5s ease; }
[data-hero-grid] { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 860px) { [data-hero-grid] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 1000px) { [data-band] { grid-template-columns: 1fr !important; justify-items: center; text-align: center; } [data-band] > div:last-child { justify-self: center !important; } [data-band] img { height: min(58vh, 440px) !important; } }
@media (max-width: 900px) { [data-adr] { grid-template-columns: 1fr !important; } [data-adr] > div:first-child { min-height: 300px !important; aspect-ratio: 4/3; } [data-adr-list] { grid-template-rows: none !important; } }
@media (max-width: 900px) { [data-adr] { grid-template-columns: 1fr !important; } [data-adr-media] > div:first-child { aspect-ratio: 4/5 !important; flex: none !important; box-shadow: 12px 12px 0 #E8B23A !important; } [data-adr-list] { height: auto !important; grid-template-rows: none !important; } }
@media (max-width: 860px) { #avis > div:first-child { grid-template-columns: 1fr !important; justify-items: center; text-align: center; } #avis > div:first-child > a { justify-self: center !important; } }
@media (max-width: 900px) { [data-tourist] { grid-template-columns: 1fr 1fr !important; } [data-tourist] > div:nth-child(2) { grid-column: 1 / -1; order: -1; } }
@media (max-width: 560px) { [data-tourist] { grid-template-columns: 1fr !important; } }
/* ---- MOBILE: compact, one-screen sections ---- */
@media (max-width: 760px) {
#histoire, #carte, #frites, #adresses, #avis, #visitez { padding-top: clamp(28px,6vw,40px) !important; padding-bottom: clamp(28px,6vw,40px) !important; }
/* 1. header + hero */
[data-hdr-brand] { display: none !important; }
[data-hdr-right] { width: 100%; justify-content: space-between; flex-wrap: nowrap !important; gap: 12px !important; }
[data-nav] { display: none !important; }
[data-burger] { display: flex !important; }
[data-lang] { order: -1; }
[data-hero-logo] { display: block !important; }
[data-cta-row] { flex-wrap: nowrap !important; gap: 10px !important; }
[data-cta-row] a { padding: 14px 16px !important; font-size: 10.5px !important; letter-spacing: .1em !important; white-space: nowrap; text-align: center; }
[data-hero-grid] { grid-template-columns: repeat(2, 1fr) !important; }
/* 2. yellow band, centered + compact */
[data-band] { grid-template-columns: 46% 1fr !important; align-items: center !important; gap: 12px !important; padding: 12px 16px 16px !important; justify-items: stretch; text-align: left; }
[data-band] > div:nth-child(2) { order: 1; grid-row: 1 / span 2; align-self: center; }
[data-band] > div:first-child { order: 2; grid-column: 2; }
[data-band] > div:last-child { order: 3; grid-column: 2; max-width: none; justify-self: stretch !important; }
[data-band] h1 { font-size: clamp(26px, 8vw, 40px) !important; max-width: none !important; }
[data-band] > div:first-child > p { display: none !important; }
[data-band] > div:nth-child(2) > p { display: none !important; }
[data-band] > div:last-child > p:last-of-type { display: none !important; }
[data-band] img { height: auto !important; width: 100% !important; max-width: 100% !important; }
[data-band] > div:last-child > p:first-of-type { font-size: 13.5px !important; line-height: 1.5 !important; }
[data-band] > div:last-child > span { margin-bottom: 10px !important; font-size: 8.5px !important; padding: 6px 10px !important; }
[data-band] > div:last-child > a { margin-top: 14px !important; padding: 12px 18px !important; font-size: 10px !important; letter-spacing: .14em !important; }
/* 3. histoire */
#histoire > div { gap: 20px !important; }
[data-story-media] { aspect-ratio: 16/11 !important; box-shadow: none !important; }
#histoire button { display: none !important; }
#histoire h2 { font-size: clamp(26px, 8vw, 36px) !important; margin-bottom: 14px !important; }
[data-story-p] { font-size: 15px !important; line-height: 1.65 !important; margin: 0 0 10px !important; }
[data-story-p2] { display: none !important; }
[data-stats] { grid-template-columns: repeat(3, 1fr) !important; margin-top: 20px !important; }
[data-stats] > div { padding: 14px 6px !important; }
[data-stats] > div > div:first-of-type { font-size: 28px !important; }
[data-stats] > div > div:nth-of-type(2) { font-size: 8px !important; letter-spacing: .12em !important; margin-top: 7px !important; max-width: none !important; }
[data-stats] > div > span:last-child { display: none !important; }
/* 4. carte des 25 gaufres */
[data-swipe-hint] { display: flex !important; }
#carte > div > div:first-child { gap: 10px !important; margin-bottom: 18px !important; }
#carte h2 { font-size: clamp(28px, 9vw, 40px) !important; }
#carte > div > div:first-child p:last-child { font-size: 12.5px !important; }
/* 5. Frite à Maman */
#frites > div { gap: 18px !important; }
#frites img { width: min(56vw, 210px) !important; }
#frites h2 { font-size: clamp(26px, 8.5vw, 38px) !important; margin-bottom: 12px !important; }
#frites p[style*="1.75"] { font-size: 14.5px !important; line-height: 1.6 !important; margin-bottom: 16px !important; }
#frites div[style*="flex-wrap:wrap"] { gap: 7px !important; margin-bottom: 16px !important; }
[data-fri-tag] { padding: 7px 12px !important; font-size: 9px !important; }
/* 6. nos maisons */
[data-adr] { grid-template-columns: 1fr !important; gap: 14px !important; }
[data-adr] > div:first-child { min-height: 0 !important; aspect-ratio: auto !important; }
[data-adr] > div:first-child video { position: static !important; width: 100% !important; height: auto !important; max-height: 52vh; object-fit: contain !important; }
[data-adr-list] { grid-template-rows: none !important; gap: 10px !important; }
[data-adr-list] article { grid-template-columns: 1fr auto !important; align-items: stretch !important; }
[data-stamp] { min-height: 104px; }
[data-adr-list] article > div:first-child { padding: 12px 14px !important; gap: 4px !important; }
[data-adr-list] article h3 { font-size: 19px !important; }
[data-stamp] { width: 96px !important; }
/* avis */
#avis > div:first-child { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 12px !important; margin-bottom: 18px !important; }
#avis > div:first-child > a { justify-self: center !important; padding: 12px 20px !important; }
#avis h2 { font-size: 17px !important; line-height: 1.35 !important; }
[data-rev-track] { gap: 12px !important; }
[data-rev-track] figure { width: min(80vw, 300px) !important; padding: 18px 16px !important; gap: 10px !important; }
[data-rev-track] blockquote { font-size: 13.5px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
[data-photo-track] { padding-top: 12px !important; }
[data-photo-track] > div { width: 40vw !important; }
/* visitez */
[data-tourist] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
[data-tourist] > div:nth-child(2) { grid-column: 1 / -1; order: -1; padding: 0 !important; }
[data-tourist] > div:nth-child(1), [data-tourist] > div:nth-child(3) { aspect-ratio: 1 !important; }
[data-tourist] h2 { font-size: clamp(24px, 7.5vw, 34px) !important; margin-bottom: 10px !important; }
[data-tourist] p { font-size: 14.5px !important; line-height: 1.6 !important; }
[data-tourist] a { margin-top: 14px !important; padding: 13px 22px !important; }
/* footer */
footer { padding: 34px 20px 24px !important; }
[data-foot] { grid-template-columns: 1fr 1fr !important; gap: 20px 18px !important; }
[data-foot] > div:first-child { grid-column: 1 / -1; text-align: center; justify-items: center; }
[data-foot] > div:first-child img { margin: 0 auto !important; width: 122px !important; }
[data-foot] > div:first-child p { display: none !important; }
[data-foot] span[style*=".26em"] { font-size: 9px !important; margin-bottom: 4px !important; }
[data-foot] a, [data-foot] span { font-size: 13px !important; }
footer > div:last-child { margin-top: 22px !important; padding-top: 14px !important; gap: 8px !important; }
}
@media (max-width: 420px) {
[data-band] h1 { font-size: 32px !important; }
[data-stamp] { width: 78px !important; }
[data-photo-track] > div { width: 52vw !important; }
[data-tourist] > div:nth-child(1), [data-tourist] > div:nth-child(3) { aspect-ratio: 4/5 !important; }
}
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes riseSmall { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes riseCard { from { opacity: 0; transform: translateY(30px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes curtain { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes enterUp { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes enterFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomSlow { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes swipeArrow { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(9px); opacity: 1; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reviews { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-rev-track]:hover, [data-photo-track]:hover { animation-play-state: paused; }
@keyframes photos { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* hover states lifted from style-hover attributes */
.hv-1:hover{color:#E8B23A}
.hv-2:hover{border-color:#E8B23A;color:#E8B23A}
.hv-3:hover{background:#FBF4E7}
.hv-4:hover{background:#FBF4E7;color:#2A1B12}
.hv-5:hover{background:#2A1B12;color:#E8B23A;border-color:#2A1B12}
.hv-6:hover{background:rgba(232,178,58,.14)}
.hv-7:hover{transform:scaleX(1)}
.hv-8:hover{opacity:1;background:#E8B23A;color:#2A1B12}
.hv-9:hover{box-shadow:0 22px 44px -30px rgba(42,27,18,.45);transform:translateY(-3px)}
.hv-10:hover{color:#A0521B;border-color:#A0521B}
.hv-11:hover{transform:scale(1.06)}
.hv-12:hover{background:#E8B23A;color:#2A1B12}
.hv-13:hover{border-color:#E8B23A;background:rgba(232,178,58,.07);transform:translateY(-4px)}
.hv-14:hover{transform:scale(1.05)}
.hv-15:hover{transform:scale(1.04)}
/* image-slot placeholder (drag-and-drop fill is a design-tool affordance) */
.image-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
padding:18px;text-align:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
font-weight:700;color:currentColor;opacity:.5}
.image-slot::after{content:attr(data-placeholder)}
/* --- header videos: 4 across on desktop, 2 x 2 on mobile ------------------ */
[data-hero-grid]{grid-template-rows:1fr !important}
[data-hero-grid] > div > video{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:block}
@media (max-width:860px){
[data-hero-grid]{grid-template-columns:repeat(2,1fr) !important;
grid-template-rows:repeat(2,1fr) !important}
}
/* --- "Trois adresses": show the whole 9:16 clip --------------------------- */
/* The box was 0.699 wide/tall against a 0.5625 clip, so object-fit:cover cropped
20% of the width; on mobile a 4/3 box with object-fit:contain shrank it into
letterbox bars. Matching the box to the clip's ratio fills it with no crop. */
[data-adr] > div:first-child{aspect-ratio:9/16 !important;min-height:0 !important;
align-self:center;width:100%}
[data-adr] > div:first-child > video{position:absolute !important;inset:0 !important;
width:100% !important;height:100% !important;max-height:none !important;
object-fit:cover !important}
@media (max-width:900px){
[data-adr] > div:first-child{max-width:min(100%,380px);margin-inline:auto}
}
/* --- hide the canvas' video-picker buttons -------------------------------- */
/* "Choisir / Retirer la vidéo" open a file picker: an authoring affordance that
would let a visitor delete the video. Delete these two rules to bring back. */
#histoire button, [data-adr] > div:first-child > button{display:none !important}
/* ========================================================================== */
/* Extra motion */
/* ========================================================================== */
@media (prefers-reduced-motion: no-preference){
/* The rotating quote crossfades instead of snapping. The element persists
across renders, so a plain animation would never replay: alternating
data-pull between 0 and 1 swaps the rule and restarts it. */
@keyframes quoteIn{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}}
@keyframes quoteIn2{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}}
#avis h2[data-pull="0"]{animation:quoteIn .55s cubic-bezier(.2,.7,.2,1) both}
#avis h2[data-pull="1"]{animation:quoteIn2 .55s cubic-bezier(.2,.7,.2,1) both}
/* A slow sheen across the primary buttons, so they read as clickable. */
@keyframes sheen{0%{background-position:-150% 0}
55%,100%{background-position:250% 0}}
#frites a, #visitez a, [data-cta-row] a:first-child{position:relative;
background-image:linear-gradient(100deg,
rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 48%,
rgba(255,255,255,0) 66%);
background-size:220% 100%;background-repeat:no-repeat;
animation:sheen 5.5s ease-in-out infinite}
/* Nav links grow an underline on hover. */
[data-nav] a{position:relative}
[data-nav] a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;
height:1px;background:#E8B23A;transform:scaleX(0);transform-origin:right;
transition:transform .38s cubic-bezier(.2,.7,.2,1)}
[data-nav] a:hover::after{transform:scaleX(1);transform-origin:left}
/* Stamps drift gently, address cards ease up on hover. */
[data-stamp] img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
[data-adr-list] article:hover [data-stamp] img{transform:scale(1.08)}
}
/* Scroll-driven stagger on the Frite à Maman chips. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
/* entry-relative on both ends: a "cover N%" end never completed for chips
sitting low in a tall section, leaving them stuck around 40% opacity. */
[data-fri-tag]{animation:riseSmall .01s linear both;animation-timeline:view();
animation-range:entry 5% entry 40%}
[data-fri-tag]:nth-child(2){animation-range:entry 12% entry 47%}
[data-fri-tag]:nth-child(3){animation-range:entry 19% entry 54%}
[data-fri-tag]:nth-child(4){animation-range:entry 26% entry 61%}
}
}
/* --- footer credit, clearly visible ---------------------------------------- */
footer a[href*="topoint"]{color:#E8B23A !important}
footer a[href*="topoint"]:hover{color:#FBF4E7 !important}
/* --- yellow band: close the gap under the headline on mobile -------------- */
/* The two text cells share a column beside the mascot, whose height stretches
both rows; align-items:center then centred each one inside its stretched row,
leaving ~76px of dead space between the h1 and the paragraph block. Pull them
toward each other so only the 12px grid gap remains. */
@media (max-width:760px){
[data-band] > div:first-child{align-self:end !important}
[data-band] > div:last-child{align-self:start !important}
/* bring back the handwritten "Bruxelles dans chaque bouchée", which the
design hid along with every other of that column on mobile */
[data-band] > div:first-child > p:last-of-type{display:block !important;
margin:10px 0 0 !important;font-size:21px !important;line-height:1.1 !important}
}
/* ========================================================================== */
/* Mobile refinements */
/* `display:contents` promotes a column's children into the section's flex */
/* container, which is what lets items from two different columns be reordered */
/* against each other. */
/* ========================================================================== */
@media (max-width:760px){
/* -- "Notre histoire": one screenful, in the requested reading order ------ */
/* kicker, title, whole video, paragraph, figures. The video takes whatever */
/* height is left over, so the section never needs scrolling. */
#histoire{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
padding-top:18px !important;padding-bottom:18px !important}
#histoire > div{display:flex !important;flex-direction:column;flex:1;min-height:0;
gap:8px !important;align-items:stretch !important}
/* !important: the media column carries display:flex as an inline style */
#histoire > div > div{display:contents !important}
#histoire > div > div > p:first-child{order:1;margin:0 !important}
#histoire h2{order:2;margin:0 !important;font-size:clamp(23px,6.6vw,30px) !important}
/* The box takes the leftover height and derives its width from the clip's
9:16, so object-fit:cover shows the whole frame with no letterboxing and
the yellow offset frame hugs the video (the design's tablet treatment). */
[data-story-media]{order:3;flex:1 1 auto;min-height:0;align-self:center;
width:auto !important;aspect-ratio:9/16 !important;margin:0 auto 12px !important;
box-shadow:12px 12px 0 #E8B23A !important}
[data-story-media] video{position:absolute !important;inset:0 !important;
width:100% !important;height:100% !important;max-height:none !important;
object-fit:cover !important}
[data-story-p]{order:4;font-size:14px !important;line-height:1.55 !important;
margin:0 !important}
[data-stats]{order:5;margin-top:4px !important}
/* figures: dark brown, larger, and never faded so the count-up is visible */
[data-stat]{opacity:1 !important;animation:none !important;transform:none !important;
padding:10px 6px !important}
[data-stats] > div > div:first-of-type{font-size:34px !important;color:#2A1B12 !important}
[data-stats] > div > div:nth-of-type(2){color:#6B5340 !important}
/* -- "Frite à Maman": give the block some appetite ----------------------- */
/* It was dark-on-dark with hairline outlined chips. A warm glow behind the
cone, filled gold chips and a solid yellow CTA make it read as an offer. */
#frites{background:
radial-gradient(115% 55% at 50% 20%, rgba(232,178,58,.30) 0%,
rgba(232,178,58,.06) 55%, rgba(232,178,58,0) 75%),
#1E120C !important;
border-top:2px solid rgba(232,178,58,.4);
border-bottom:2px solid rgba(232,178,58,.4);
text-align:center}
#frites > div{gap:12px !important;justify-items:center}
#frites img{width:min(74vw,300px) !important;
filter:drop-shadow(0 20px 34px rgba(0,0,0,.6))}
#frites > div > div:last-child > p:first-child{font-size:11px !important;
letter-spacing:.28em !important;color:#FCC900 !important}
#frites h2{font-size:clamp(30px,9vw,42px) !important;margin-bottom:10px !important;
line-height:1 !important}
#frites p[style*="1.75"]{font-size:15px !important;line-height:1.6 !important;
margin:0 auto 16px !important;max-width:34ch;color:rgba(251,244,231,.85) !important}
#frites div[style*="flex-wrap:wrap"]{justify-content:center;gap:7px !important;
margin-bottom:18px !important}
/* cream, not gold: filled gold chips fought with the yellow CTA. Keeping
yellow for the single call to action reads more deliberate. */
[data-fri-tag]{background:#FBF4E7 !important;color:#2A1B12 !important;
border-color:#FBF4E7 !important;font-weight:700 !important;
padding:8px 13px !important;font-size:9.5px !important}
#frites a{display:block !important;width:100%;text-align:center;
background:#FCC900 !important;color:#2A1B12 !important;
padding:16px 20px !important;font-size:12px !important;letter-spacing:.18em !important;
box-shadow:0 10px 26px -12px rgba(252,201,0,.7)}
#frites > div > div:last-child > p:last-child{margin-top:14px !important;
font-size:12.5px !important;color:rgba(251,244,231,.6) !important}
/* -- Menu: fit the section in one screen --------------------------------- */
/* The poster is 592px of a 812px screen, so the surrounding chrome has to
give back ~110px: tighter padding, a smaller heading and a compact hint. */
#carte{padding-top:14px !important;padding-bottom:14px !important}
#carte h2{font-size:clamp(26px,7.6vw,34px) !important;line-height:1.02 !important}
#carte > div > div:nth-of-type(1){margin-bottom:12px !important;gap:6px !important}
#carte > div > div:nth-of-type(1) > p{font-size:11.5px !important;
line-height:1.4 !important}
#carte > div > div:nth-of-type(2){padding:10px 14px !important;gap:8px !important;
margin-bottom:10px !important}
#carte > div > div:nth-of-type(2) > span:first-child{font-size:15px !important;
line-height:1.25 !important}
#carte > div > div:nth-of-type(2) > span:last-child{font-size:8.5px !important;
padding:6px 10px !important}
/* -- Menu: the portrait 5x5 poster replaces the wide one ----------------- */
/* Hotspot coordinates follow: HOT_NOW() in app.js switches on the same
breakpoint, and the page re-renders on resize. */
img[data-carte="wide"]{display:none !important}
img[data-carte="tall"]{display:block !important}
/* The poster takes whatever height is left, so the section fits any screen
without hand-tuning pixels. The positioned box keeps the image's exact
ratio, which is what the percentage-based hotspots are measured against. */
/* height, not min-height: a minimum lets the section grow to the poster
instead of constraining it, so nothing would shrink. */
#carte{display:flex;flex-direction:column;height:100svh;justify-content:center}
#carte > div{display:flex;flex-direction:column;flex:1;min-height:0}
#carte > div > div:nth-of-type(3){flex:1;min-height:0;display:flex}
#carte > div > div:nth-of-type(3) > div{min-width:0 !important;
padding-top:0 !important;flex:1;min-height:0;display:flex;justify-content:center}
#carte > div > div:nth-of-type(3) > div > div{height:100%;width:auto;
max-width:100%;aspect-ratio:941/1672;margin:0 auto}
img[data-carte="tall"]{width:100% !important;height:100% !important}
[data-swipe-hint]{display:none !important}
/* -- "Nos maisons": kicker, heading, video, then a swipeable carousel ---- */
/* display:contents on [data-adr] promotes the media box and the card list
into the section's flex column, so they can be ordered against the
heading that sits above them in the DOM. */
#adresses{display:flex;flex-direction:column;height:100svh;
padding-top:16px !important;padding-bottom:16px !important}
#adresses > p:first-of-type{order:1;margin:0 0 4px !important}
#adresses h2{order:2;font-size:clamp(23px,6.6vw,30px) !important;
line-height:1.05 !important;margin:0 0 12px !important}
[data-adr]{display:contents !important}
/* flex-basis 0, not auto: with auto the aspect-ratio fed the height back
into the basis and the box refused to shrink, overflowing the section. */
[data-adr] > div:first-child{order:3;flex:1 1 0;min-height:0;align-self:center;
width:auto !important;height:auto !important;aspect-ratio:9/16 !important;
max-width:100% !important;margin:0 auto 14px !important;
box-shadow:12px 12px 0 #E8B23A}
/* One address at a time, rotating on its own every 3.5s: the current card
slides up and out, the next rises into its place. The cards are stacked
absolutely and picked by [data-adr-i], so a CSS transition — which replays
on every attribute change, unlike an animation — drives the swap. */
/* height !important: the design pins [data-adr-list] to height:auto, which
collapses to 0 once the cards are absolute. animation:none !important:
its scroll-driven riseCard would otherwise override our transform. */
[data-adr-list]{order:4;display:block !important;position:relative;
height:150px !important;overflow:hidden;min-height:0}
[data-adr-list] > article{position:absolute !important;left:0;right:0;top:0;
height:150px;animation:none !important;
transform:translateY(105%) !important;opacity:0 !important;
transition:transform .65s cubic-bezier(.2,.7,.2,1), opacity .45s ease}
[data-adr-list][data-adr-i="0"] > article:nth-of-type(1),
[data-adr-list][data-adr-i="1"] > article:nth-of-type(2),
[data-adr-list][data-adr-i="2"] > article:nth-of-type(3){
transform:translateY(0) !important;opacity:1 !important}
[data-adr-list][data-adr-i="1"] > article:nth-of-type(1),
[data-adr-list][data-adr-i="2"] > article:nth-of-type(2),
[data-adr-list][data-adr-i="0"] > article:nth-of-type(3){
transform:translateY(-105%) !important;opacity:0 !important}
/* progress bar under the cards, synced to the 3.5s rotation */
@keyframes adrProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#adresses::after{content:"";order:5;align-self:center;width:56px;height:2px;
margin-top:12px;background:#A0521B;transform-origin:left;
animation:adrProgress 3.5s linear infinite}
/* full width again, so the cramped side-by-side type can go back to normal */
[data-adr-list] article > div:first-child{padding:14px 16px !important;
gap:4px !important}
/* 18px + a narrower stamp keeps "Rue de la Colline" on one line; at 21px it
wrapped and stretched all three cards to match. */
[data-adr-list] article h3{font-size:18px !important;line-height:1.05 !important}
[data-adr-list] article p{font-size:9px !important;letter-spacing:.26em !important}
[data-adr-list] article a{font-size:13px !important;line-height:1.3 !important}
[data-adr-list] article span{font-size:12px !important}
[data-stamp]{width:76px !important;min-height:0 !important}
[data-stamp] span{font-size:11px !important;padding:6px 7px !important;
line-height:1.1 !important}
/* -- "Avis": move the CTA below the customer photos, centred ------------- */
#avis{display:flex;flex-direction:column}
#avis > div:first-child{display:contents !important} /* inline display:grid */
#avis > div:first-child > div{order:1;margin:0 auto !important;padding-inline:20px}
#avis > div:first-child > h2{order:2;margin:10px 0 0 !important;padding-inline:20px}
[data-rev-track]{order:3;margin-top:18px}
[data-photo-track]{order:4}
#avis > div:first-child > a{order:5;align-self:center !important;
justify-self:center !important;margin:22px auto 0 !important}
/* -- Footer: logo and contact full width, then two even columns ---------- */
[data-foot]{grid-template-columns:1fr 1fr !important;gap:24px 18px !important;
align-items:start}
[data-foot] > div:first-child{grid-column:1/-1;order:1;text-align:center}
[data-foot] > div:nth-child(4){grid-column:1/-1;order:2;align-items:center;
text-align:center}
[data-foot] > nav{order:3}
[data-foot] > div:nth-child(5){order:4}
[data-foot] > div:nth-child(2){grid-column:1/-1;order:5;flex-direction:row !important;
flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px !important}
[data-foot] > div:nth-child(2) > span{width:100%;text-align:center}
[data-foot] span[style*=".26em"]{display:block;margin-bottom:6px !important}
}
/* --- language menu was clipped on mobile ---------------------------------- */
/* #top has overflow-x:hidden, and on mobile [data-lang] sits at the far left,
so a right-anchored panel ran off-screen. Anchor it left and cap its height. */
@media (max-width:760px){
[data-lang] > div{left:0 !important;right:auto !important;
max-height:min(58vh,340px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}