/* Maison de l'Europe — Qui sommes-nous ? FR/NL — contenu central uniquement, sans header/footer fictifs. Prévu pour le futur module PrestaShop « MDE Pages ». */ .mde-pages-scope{ --mde-blue:#0B4F8A; --mde-blue-text:#1B537E; --mde-blue-dark:#073967; --mde-yellow:#FFD25F; --mde-cream:#FFFEF1; --mde-pale-blue:#E5EFEF; --mde-champagne:#FFEBB9; --mde-ink:#2F3D49; --mde-muted:#667684; --mde-radius:12px; --mde-gap:22px; --mde-line:2px; } .mde-pages-scope *{box-sizing:border-box} .mde-pages-scope{scroll-behavior:smooth} .mde-pages-scope{margin:0;background:#fff;font-family:Arial,Helvetica,sans-serif;color:var(--mde-ink)} .mde-pages-scope .mde-about{ max-width:1280px; margin:0 auto; padding:0 28px 30px; background:var(--mde-yellow); line-height:1.58; } .mde-pages-scope .mde-about *, .mde-pages-scope .mde-about *::before, .mde-pages-scope .mde-about *::after{box-sizing:border-box} .mde-pages-scope .mde-about h1, .mde-pages-scope .mde-about h2, .mde-pages-scope .mde-about h3{ font-family:Georgia,"Times New Roman",serif; color:var(--mde-blue-dark); } .mde-pages-scope .mde-about a{color:var(--mde-blue);text-underline-offset:3px} .mde-pages-scope .mde-about img{max-width:100%} .mde-pages-scope .about-shell{width:min(1180px,100%);margin-inline:auto} .mde-pages-scope .about-back-home{padding-block:12px} .mde-pages-scope .about-back-home a{font-weight:700;text-decoration:none;color:var(--mde-blue)} .mde-pages-scope .about-back-home a:hover, .mde-pages-scope .about-back-home a:focus-visible{text-decoration:underline} .mde-pages-scope .about-back-home--bottom{padding-block:20px 8px} .mde-pages-scope .about-hero{ position:relative; min-height:420px; overflow:hidden; border:var(--mde-line) solid var(--mde-blue); border-radius:var(--mde-radius); background:var(--mde-blue-dark); box-shadow:0 10px 24px rgb(31 62 84 / .08); } .mde-pages-scope .about-hero__image{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 49%;display:block; } .mde-pages-scope .about-hero__veil{ position:absolute;inset:0; background:linear-gradient(90deg,rgb(7 57 103 / .90) 0%,rgb(7 57 103 / .75) 34%,rgb(7 57 103 / .28) 62%,rgb(7 57 103 / .10) 100%); } .mde-pages-scope .about-hero__inner{position:relative;z-index:1;min-height:420px;display:flex;flex-direction:column;justify-content:center;padding:54px 42px;max-width:760px} .mde-pages-scope .about-eyebrow{margin:0 0 8px;color:var(--mde-yellow);font-weight:700;letter-spacing:.02em} .mde-pages-scope .about-hero h1{margin:0;color:var(--mde-yellow);font-size:clamp(42px,6vw,70px);line-height:1;font-weight:400;text-shadow:0 3px 16px rgb(0 0 0 / .35)} .mde-pages-scope .about-hero__lead{margin:18px 0 0;max-width:650px;color:#fff;font:italic clamp(18px,2vw,24px)/1.42 Georgia,"Times New Roman",serif} .mde-pages-scope .about-gold-rule{width:88px;height:4px;margin-top:24px;background:var(--mde-yellow)} .mde-pages-scope .about-section{margin-top:var(--mde-gap)} .mde-pages-scope .about-frame{ border:var(--mde-line) solid var(--mde-blue); border-radius:var(--mde-radius); overflow:hidden; } .mde-pages-scope .about-panel{padding:27px 30px} .mde-pages-scope .about-panel--cream{background:var(--mde-cream)} .mde-pages-scope .about-panel--blue{background:var(--mde-pale-blue)} .mde-pages-scope .about-panel--champagne{background:var(--mde-champagne)} .mde-pages-scope .about-panel--white{background:#fff} .mde-pages-scope .about-section-title{margin:0 0 12px;font-size:clamp(28px,3vw,39px);font-weight:400;line-height:1.08} .mde-pages-scope .about-section-intro{margin:0;max-width:880px;font-size:1.05rem} .mde-pages-scope .about-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--mde-gap);align-items:stretch} .mde-pages-scope .about-intro-grid .about-panel{height:100%} .mde-pages-scope .about-intro-grid p{margin:0 0 14px} .mde-pages-scope .about-intro-grid p:last-child{margin-bottom:0} .mde-pages-scope .about-now-stats{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px} .mde-pages-scope .about-stat{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:84px;padding:14px 16px;border:1px solid rgb(11 79 138 / .22);border-radius:10px;background:#fff;text-align:left} .mde-pages-scope .about-stat strong{display:block;flex:0 0 108px;min-width:108px;color:var(--mde-blue-dark);font:700 1.55rem/1.02 Georgia,"Times New Roman",serif;text-align:center} .mde-pages-scope .about-stat span{display:block;max-width:none;margin-top:0;color:var(--mde-muted);font-size:.96rem;line-height:1.28} .mde-pages-scope .about-timeline-head{padding:26px 30px;background:var(--mde-blue);color:#fff} .mde-pages-scope .about-timeline-head h2{color:#fff;margin:0;font-size:clamp(28px,3vw,39px);font-weight:400} .mde-pages-scope .about-timeline-head p{margin:8px 0 0;max-width:900px} .mde-pages-scope .timeline-list{display:grid;gap:var(--mde-gap);margin-top:var(--mde-gap)} .mde-pages-scope .timeline-card{display:grid;grid-template-columns:minmax(290px,.86fr) minmax(0,1.14fr);align-items:stretch} .mde-pages-scope .timeline-card--reverse{grid-template-columns:minmax(0,1.14fr) minmax(290px,.86fr)} .mde-pages-scope .timeline-card--reverse .timeline-media{order:2} .mde-pages-scope .timeline-card--reverse .timeline-copy{order:1} .mde-pages-scope .timeline-media{position:relative;min-height:335px;background:#eee;overflow:hidden} .mde-pages-scope .timeline-image-link{position:absolute;inset:0;display:block;cursor:zoom-in} .mde-pages-scope .timeline-image-link:focus-visible{outline:4px solid var(--mde-yellow);outline-offset:-6px} .mde-pages-scope .timeline-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .mde-pages-scope .timeline-media--contain{background:#f5f2e8} .mde-pages-scope .timeline-media--contain img{object-fit:contain;padding:12px} .mde-pages-scope .timeline-media--1972 img{object-position:center center} .mde-pages-scope .timeline-media--1990 img{object-position:center center} .mde-pages-scope .timeline-copy{padding:28px 31px;display:flex;flex-direction:column;justify-content:center} .mde-pages-scope .timeline-copy--cream{background:var(--mde-cream)} .mde-pages-scope .timeline-copy--blue{background:var(--mde-pale-blue)} .mde-pages-scope .timeline-copy--champagne{background:var(--mde-champagne)} .mde-pages-scope .timeline-year{display:inline-flex;align-self:flex-start;margin-bottom:11px;padding:5px 11px;border-radius:999px;background:var(--mde-blue);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.02em} .mde-pages-scope .timeline-copy h3{margin:0 0 12px;font-size:clamp(24px,2.5vw,32px);font-weight:400;line-height:1.1} .mde-pages-scope .timeline-copy p{margin:0 0 13px} .mde-pages-scope .timeline-copy p:last-child{margin-bottom:0} .mde-pages-scope .timeline-copy ul{margin:2px 0 0;padding-left:20px} .mde-pages-scope .timeline-copy li{margin:5px 0} .mde-pages-scope .photo-caption{position:absolute;z-index:2;left:12px;bottom:12px;right:12px;margin:0;padding:7px 10px;border-radius:7px;background:rgb(7 57 103 / .82);color:#fff;font-size:.78rem;line-height:1.3} .mde-pages-scope .about-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--mde-gap)} .mde-pages-scope .about-context-grid article{height:100%} .mde-pages-scope .about-context-grid p{margin:0 0 13px} .mde-pages-scope .about-context-grid p:last-child{margin-bottom:0} .mde-pages-scope .about-kicker{margin:0 0 5px;color:var(--mde-blue);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem} .mde-pages-scope .about-context-grid h2{margin:0 0 12px;font-size:clamp(25px,2.5vw,33px);font-weight:400;line-height:1.12} .mde-pages-scope .about-link{font-weight:700} .mde-pages-scope .about-quality{display:grid;grid-template-columns:1fr 1fr;gap:var(--mde-gap)} .mde-pages-scope .about-quality .about-panel{height:100%} .mde-pages-scope .about-quality h2{margin:0 0 12px;font-size:clamp(28px,3vw,38px);font-weight:400;line-height:1.08} .mde-pages-scope .about-quality p{margin:0 0 14px} .mde-pages-scope .about-quality p:last-child{margin-bottom:0} .mde-pages-scope .about-anecdotes{display:grid;gap:10px;margin-top:18px} .mde-pages-scope .about-anecdote{padding:12px 14px;border-left:4px solid var(--mde-blue);border-radius:8px;background:#fff;line-height:1.42} .mde-pages-scope .about-today-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--mde-gap);align-items:stretch} .mde-pages-scope .about-today-copy{padding:30px;background:var(--mde-pale-blue)} .mde-pages-scope .about-today-copy h2{margin:0 0 12px;font-size:clamp(30px,3.2vw,42px);font-weight:400} .mde-pages-scope .about-today-copy p{margin:0 0 14px} .mde-pages-scope .about-today-copy p:last-child{margin-bottom:0} .mde-pages-scope .about-store-carousel{position:relative;min-width:0;padding:10px;background:#fff;overflow:hidden} .mde-pages-scope .about-store-carousel__stage{position:relative;width:100%;height:100%;min-height:430px;overflow:hidden;border-radius:8px;background:#eee} .mde-pages-scope .about-store-carousel__image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;opacity:0;visibility:hidden;transition:opacity 180ms ease;cursor:zoom-in} .mde-pages-scope .about-store-carousel__image.is-active{opacity:1;visibility:visible} .mde-pages-scope .about-store-carousel__arrow{position:absolute;z-index:3;top:50%;width:38px;height:38px;padding:0 0 3px;transform:translateY(-50%);border:0;border-radius:50%;background:rgb(11 79 138 / .88);color:#fff;box-shadow:0 2px 7px rgb(0 0 0 / .24);font-family:Georgia,"Times New Roman",serif;font-size:31px;line-height:1;cursor:pointer} .mde-pages-scope .about-store-carousel__arrow--prev{left:20px} .mde-pages-scope .about-store-carousel__arrow--next{right:20px} .mde-pages-scope .about-store-carousel__arrow:hover, .mde-pages-scope .about-store-carousel__arrow:focus-visible{background:var(--mde-blue-dark)} .mde-pages-scope .about-store-carousel__arrow:focus-visible{outline:3px solid #fff;outline-offset:2px} .mde-pages-scope .about-lightbox{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:clamp(18px,3vw,42px);background:rgb(0 0 0 / .82);opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 180ms ease} .mde-pages-scope .about-lightbox.is-open{opacity:1;visibility:visible} .mde-pages-scope .about-lightbox__dialog{position:relative;display:grid;place-items:center;width:min(96vw,1600px);height:min(92vh,1040px);outline:none} .mde-pages-scope .about-lightbox__figure{margin:0;display:grid;place-items:center;width:100%;height:100%;max-width:100%;max-height:100%} .mde-pages-scope .about-lightbox__image{display:block;width:100%;height:100%;max-width:100%;max-height:86vh;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 12px 42px rgb(0 0 0 / .42)} .mde-pages-scope .about-lightbox__close, .mde-pages-scope .about-lightbox__arrow{position:absolute;z-index:2;display:grid;place-items:center;border:2px solid rgb(255 255 255 / .92);background:rgb(11 79 138 / .90);color:#fff;box-shadow:0 3px 12px rgb(0 0 0 / .34);cursor:pointer} .mde-pages-scope .about-lightbox__close{top:0;right:0;width:46px;height:46px;border-radius:50%;font-family:Arial,sans-serif;font-size:28px;line-height:1} .mde-pages-scope .about-lightbox__arrow{top:50%;width:50px;height:50px;transform:translateY(-50%);border-radius:50%;padding-bottom:4px;font-family:Georgia,"Times New Roman",serif;font-size:36px;line-height:1} .mde-pages-scope .about-lightbox__arrow--prev{left:0} .mde-pages-scope .about-lightbox__arrow--next{right:0} .mde-pages-scope .about-lightbox__arrow[hidden]{display:none!important} .mde-pages-scope .about-lightbox__close:hover, .mde-pages-scope .about-lightbox__close:focus-visible, .mde-pages-scope .about-lightbox__arrow:hover, .mde-pages-scope .about-lightbox__arrow:focus-visible{background:var(--mde-blue-dark)} .mde-pages-scope .about-lightbox__close:focus-visible, .mde-pages-scope .about-lightbox__arrow:focus-visible{outline:3px solid #fff;outline-offset:3px} body.about-lightbox-open{overflow:hidden} .mde-pages-scope .about-closing{text-align:center;padding:26px 30px;background:var(--mde-champagne)} .mde-pages-scope .about-closing h2{margin:0 0 9px;font-size:clamp(27px,3vw,38px);font-weight:400} .mde-pages-scope .about-closing p{margin:0 auto;max-width:850px} @media (min-width:1051px){ .mde-pages-scope .mde-about{box-shadow:0 0 0 100vmax var(--mde-yellow);clip-path:inset(0 -100vmax)} } @media (max-width:900px){ .mde-pages-scope .mde-about{padding-inline:20px} .mde-pages-scope .about-intro-grid, .mde-pages-scope .about-context-grid, .mde-pages-scope .about-quality, .mde-pages-scope .about-today-grid{grid-template-columns:1fr} .mde-pages-scope .timeline-card, .mde-pages-scope .timeline-card--reverse{grid-template-columns:1fr} .mde-pages-scope .timeline-card--reverse .timeline-media, .mde-pages-scope .timeline-card--reverse .timeline-copy{order:initial} .mde-pages-scope .timeline-media{min-height:360px} .mde-pages-scope .about-store-carousel__stage{min-height:420px} } @media (max-width:620px){ .mde-pages-scope .mde-about{padding:0 12px 24px} .mde-pages-scope .about-back-home{padding-block:10px} .mde-pages-scope .about-hero{min-height:350px} .mde-pages-scope .about-hero__inner{min-height:350px;padding:38px 22px} .mde-pages-scope .about-hero__veil{background:rgb(7 57 103 / .68)} .mde-pages-scope .about-panel, .mde-pages-scope .timeline-copy, .mde-pages-scope .about-today-copy, .mde-pages-scope .about-closing{padding:21px 19px} .mde-pages-scope .about-now-stats{grid-template-columns:1fr;gap:10px} .mde-pages-scope .about-stat{gap:12px;min-height:0;padding:12px 12px} .mde-pages-scope .about-stat strong{flex-basis:84px;min-width:84px;font-size:1.2rem} .mde-pages-scope .about-stat span{max-width:none;font-size:.84rem;line-height:1.22} .mde-pages-scope .timeline-media{min-height:270px} .mde-pages-scope .timeline-media--contain{min-height:320px} .mde-pages-scope .photo-caption{font-size:.72rem} .mde-pages-scope .about-store-carousel__stage{min-height:340px} .mde-pages-scope .about-store-carousel__arrow{width:34px;height:34px;font-size:28px} .mde-pages-scope .about-store-carousel__arrow--prev{left:18px} .mde-pages-scope .about-store-carousel__arrow--next{right:18px} .mde-pages-scope .about-lightbox{padding:14px} .mde-pages-scope .about-lightbox__dialog{width:100%;height:92vh} .mde-pages-scope .about-lightbox__image{max-height:78vh;border-radius:9px} .mde-pages-scope .about-lightbox__close{width:42px;height:42px;font-size:25px} .mde-pages-scope .about-lightbox__arrow{top:auto;bottom:8px;width:44px;height:44px;transform:none;font-size:32px} .mde-pages-scope .about-lightbox__arrow--prev{left:calc(50% - 54px)} .mde-pages-scope .about-lightbox__arrow--next{right:calc(50% - 54px)} } @media (prefers-reduced-motion: reduce){.mde-pages-scope .about-store-carousel__image, .mde-pages-scope .about-lightbox{transition:none}} /* ===== FINAL VALIDATED PAGE CSS ===== */ /* Maison de l'Europe — Qui sommes-nous ? FR/NL — contenu central uniquement, sans header/footer fictifs. Prévu pour le futur module PrestaShop « MDE Pages ». */ .mde-pages-scope{ --mde-blue:#1B537E; --mde-blue-text:#1B537E; --mde-blue-dark:#073967; --mde-yellow:#FFD25F; --mde-cream:#FFFDF6; --mde-pale-blue:#E5EFEF; --mde-champagne:#FFEBB9; --mde-ink:#2F3D49; --mde-muted:#667684; --mde-radius:12px; --mde-gap:22px; --mde-line:2px; } .mde-pages-scope *{box-sizing:border-box} .mde-pages-scope{scroll-behavior:smooth} .mde-pages-scope .about-standalone{margin:0;background:#fff} .mde-pages-scope .mde-about{ max-width:1280px; font-family:Arial,Helvetica,sans-serif; color:var(--mde-ink); margin:0 auto; padding:0 28px 30px; background:var(--mde-yellow); line-height:1.58; } .mde-pages-scope .mde-about *,.mde-pages-scope .mde-about *::before,.mde-pages-scope .mde-about *::after{box-sizing:border-box} .mde-pages-scope .mde-about h1,.mde-pages-scope .mde-about h2,.mde-pages-scope .mde-about h3{ font-family:Georgia,"Times New Roman",serif; color:var(--mde-blue-dark); } .mde-pages-scope .mde-about a{color:var(--mde-blue);text-underline-offset:3px} .mde-pages-scope .mde-about img{max-width:100%} .mde-pages-scope .about-shell{width:min(1180px,100%);margin-inline:auto} .mde-pages-scope .about-back-home{padding-block:12px} .mde-pages-scope .about-back-home a{font-weight:700;text-decoration:none;color:var(--mde-blue)} .mde-pages-scope .about-back-home a:hover,.mde-pages-scope .about-back-home a:focus-visible{text-decoration:underline} .mde-pages-scope .about-back-home--bottom{padding-block:20px 8px} .mde-pages-scope .about-hero{ position:relative; min-height:420px; overflow:hidden; border:var(--mde-line) solid var(--mde-blue); border-radius:var(--mde-radius); background:var(--mde-blue-dark); box-shadow:0 10px 24px rgb(31 62 84 / .08); } .mde-pages-scope .about-hero__image{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 49%;display:block; } .mde-pages-scope .about-hero__veil{ position:absolute;inset:0; background:linear-gradient(90deg,rgb(7 57 103 / .90) 0%,rgb(7 57 103 / .75) 34%,rgb(7 57 103 / .28) 62%,rgb(7 57 103 / .10) 100%); } .mde-pages-scope .about-hero__inner{position:relative;z-index:1;min-height:420px;display:flex;flex-direction:column;justify-content:center;padding:54px 42px;max-width:760px} .mde-pages-scope .about-eyebrow{margin:0 0 8px;color:var(--mde-yellow);font-weight:700;letter-spacing:.02em} .mde-pages-scope .about-hero h1{margin:0;color:var(--mde-yellow);font-size:clamp(42px,6vw,70px);line-height:1;font-weight:400;text-shadow:0 3px 16px rgb(0 0 0 / .35)} .mde-pages-scope .about-hero__lead{margin:18px 0 0;max-width:650px;color:#fff;font:italic clamp(18px,2vw,24px)/1.42 Georgia,"Times New Roman",serif} .mde-pages-scope .about-gold-rule{width:88px;height:4px;margin-top:24px;background:var(--mde-yellow)} .mde-pages-scope .about-section{margin-top:var(--mde-gap)} .mde-pages-scope .about-frame{ border:var(--mde-line) solid var(--mde-blue); border-radius:var(--mde-radius); overflow:hidden; } .mde-pages-scope .about-panel{padding:27px 30px} .mde-pages-scope .about-panel--cream{background:var(--mde-cream)} .mde-pages-scope .about-panel--blue{background:var(--mde-pale-blue)} .mde-pages-scope .about-panel--champagne{background:var(--mde-champagne)} .mde-pages-scope .about-panel--white{background:#fff} .mde-pages-scope .about-section-title{margin:0 0 12px;font-size:clamp(28px,3vw,39px);font-weight:400;line-height:1.08} .mde-pages-scope .about-section-intro{margin:0;max-width:880px;font-size:1.05rem} .mde-pages-scope .about-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--mde-gap);align-items:stretch} .mde-pages-scope .about-intro-grid .about-panel{height:100%} .mde-pages-scope .about-intro-grid p{margin:0 0 14px} .mde-pages-scope .about-intro-grid p:last-child{margin-bottom:0} .mde-pages-scope .about-now-stats{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px} .mde-pages-scope .about-stat{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:84px;padding:14px 16px;border:1px solid rgb(27 83 126 / .22);border-radius:10px;background:#fff;text-align:left} .mde-pages-scope .about-stat strong{display:block;flex:0 0 108px;min-width:108px;color:var(--mde-blue-dark);font:700 1.55rem/1.02 Georgia,"Times New Roman",serif;text-align:center} .mde-pages-scope .about-stat span{display:block;max-width:none;margin-top:0;color:var(--mde-muted);font-size:.96rem;line-height:1.28} .mde-pages-scope .about-timeline-head{padding:26px 30px;background:var(--mde-blue);color:#fff} .mde-pages-scope .about-timeline-head h2{color:#fff;margin:0;font-size:clamp(28px,3vw,39px);font-weight:400} .mde-pages-scope .about-timeline-head p{margin:8px 0 0;max-width:900px} .mde-pages-scope .timeline-list{display:grid;gap:var(--mde-gap);margin-top:var(--mde-gap)} .mde-pages-scope .timeline-card{display:grid;grid-template-columns:minmax(290px,.86fr) minmax(0,1.14fr);align-items:stretch} .mde-pages-scope .timeline-card--reverse{grid-template-columns:minmax(0,1.14fr) minmax(290px,.86fr)} .mde-pages-scope .timeline-card--reverse .timeline-media{order:2} .mde-pages-scope .timeline-card--reverse .timeline-copy{order:1} .mde-pages-scope .timeline-media{position:relative;min-height:335px;background:#eee;overflow:hidden} .mde-pages-scope .timeline-image-link{position:absolute;inset:0;display:block;cursor:zoom-in} .mde-pages-scope .timeline-image-link:focus-visible{outline:4px solid var(--mde-yellow);outline-offset:-6px} .mde-pages-scope .timeline-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .mde-pages-scope .timeline-media--contain{background:#f5f2e8} .mde-pages-scope .timeline-media--contain img{object-fit:contain;padding:12px} .mde-pages-scope .timeline-media--1972 img{object-position:center center} .mde-pages-scope .timeline-media--1990 img{object-position:center center} .mde-pages-scope .timeline-copy{padding:28px 31px;display:flex;flex-direction:column;justify-content:center} .mde-pages-scope .timeline-copy--cream{background:var(--mde-cream)} .mde-pages-scope .timeline-copy--blue{background:var(--mde-pale-blue)} .mde-pages-scope .timeline-copy--champagne{background:var(--mde-champagne)} .mde-pages-scope .timeline-year{display:inline-flex;align-self:flex-start;margin-bottom:11px;padding:5px 11px;border-radius:999px;background:var(--mde-blue);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.02em} .mde-pages-scope .timeline-copy h3{margin:0 0 12px;font-size:clamp(24px,2.5vw,32px);font-weight:400;line-height:1.1} .mde-pages-scope .timeline-copy p{margin:0 0 13px} .mde-pages-scope .timeline-copy p:last-child{margin-bottom:0} .mde-pages-scope .timeline-copy ul{margin:2px 0 0;padding-left:20px} .mde-pages-scope .timeline-copy li{margin:5px 0} .mde-pages-scope .photo-caption{position:absolute;z-index:2;left:12px;bottom:12px;right:12px;margin:0;padding:7px 10px;border-radius:7px;background:rgb(7 57 103 / .82);color:#fff;font-size:.78rem;line-height:1.3} .mde-pages-scope .about-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--mde-gap)} .mde-pages-scope .about-context-grid article{height:100%} .mde-pages-scope .about-context-grid p{margin:0 0 13px} .mde-pages-scope .about-context-grid p:last-child{margin-bottom:0} .mde-pages-scope .about-kicker{margin:0 0 5px;color:var(--mde-blue);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem} .mde-pages-scope .about-context-grid h2{margin:0 0 12px;font-size:clamp(25px,2.5vw,33px);font-weight:400;line-height:1.12} .mde-pages-scope .about-link{font-weight:700} .mde-pages-scope .about-quality{display:grid;grid-template-columns:1fr 1fr;gap:var(--mde-gap)} .mde-pages-scope .about-quality .about-panel{height:100%} .mde-pages-scope .about-quality h2{margin:0 0 12px;font-size:clamp(28px,3vw,38px);font-weight:400;line-height:1.08} .mde-pages-scope .about-quality p{margin:0 0 14px} .mde-pages-scope .about-quality p:last-child{margin-bottom:0} .mde-pages-scope .about-anecdotes{display:grid;gap:10px;margin-top:18px} .mde-pages-scope .about-anecdote{padding:12px 14px;border-left:4px solid var(--mde-blue);border-radius:8px;background:#fff;line-height:1.42} .mde-pages-scope .about-today-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--mde-gap);align-items:stretch} .mde-pages-scope .about-today-copy{padding:30px;background:var(--mde-pale-blue)} .mde-pages-scope .about-today-copy h2{margin:0 0 12px;font-size:clamp(30px,3.2vw,42px);font-weight:400} .mde-pages-scope .about-today-copy p{margin:0 0 14px} .mde-pages-scope .about-today-copy p:last-child{margin-bottom:0} .mde-pages-scope .about-store-carousel{position:relative;min-width:0;padding:10px;background:#fff;overflow:hidden} .mde-pages-scope .about-store-carousel__stage{position:relative;width:100%;height:100%;min-height:430px;overflow:hidden;border-radius:8px;background:#eee} .mde-pages-scope .about-store-carousel__image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;opacity:0;visibility:hidden;transition:opacity 180ms ease;cursor:zoom-in} .mde-pages-scope .about-store-carousel__image.is-active{opacity:1;visibility:visible} .mde-pages-scope .about-store-carousel__arrow{position:absolute;z-index:3;top:50%;width:38px;height:38px;padding:0 0 3px;transform:translateY(-50%);border:0;border-radius:50%;background:rgb(27 83 126 / .88);color:#fff;box-shadow:0 2px 7px rgb(0 0 0 / .24);font-family:Georgia,"Times New Roman",serif;font-size:31px;line-height:1;cursor:pointer} .mde-pages-scope .about-store-carousel__arrow--prev{left:20px} .mde-pages-scope .about-store-carousel__arrow--next{right:20px} .mde-pages-scope .about-store-carousel__arrow:hover,.mde-pages-scope .about-store-carousel__arrow:focus-visible{background:var(--mde-blue-dark)} .mde-pages-scope .about-store-carousel__arrow:focus-visible{outline:3px solid #fff;outline-offset:2px} .mde-pages-scope .about-lightbox{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:clamp(18px,3vw,42px);background:rgb(0 0 0 / .82);opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 180ms ease} .mde-pages-scope .about-lightbox.is-open{opacity:1;visibility:visible} .mde-pages-scope .about-lightbox__dialog{position:relative;display:grid;place-items:center;width:min(96vw,1600px);height:min(92vh,1040px);outline:none} .mde-pages-scope .about-lightbox__figure{margin:0;display:grid;place-items:center;width:100%;height:100%;max-width:100%;max-height:100%} .mde-pages-scope .about-lightbox__image{display:block;width:100%;height:100%;max-width:100%;max-height:86vh;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 12px 42px rgb(0 0 0 / .42)} .mde-pages-scope .about-lightbox__close,.mde-pages-scope .about-lightbox__arrow{position:absolute;z-index:2;display:grid;place-items:center;border:2px solid rgb(255 255 255 / .92);background:rgb(27 83 126 / .90);color:#fff;box-shadow:0 3px 12px rgb(0 0 0 / .34);cursor:pointer} .mde-pages-scope .about-lightbox__close{top:0;right:0;width:46px;height:46px;border-radius:50%;font-family:Arial,sans-serif;font-size:28px;line-height:1} .mde-pages-scope .about-lightbox__arrow{top:50%;width:50px;height:50px;transform:translateY(-50%);border-radius:50%;padding-bottom:4px;font-family:Georgia,"Times New Roman",serif;font-size:36px;line-height:1} .mde-pages-scope .about-lightbox__arrow--prev{left:0} .mde-pages-scope .about-lightbox__arrow--next{right:0} .mde-pages-scope .about-lightbox__arrow[hidden]{display:none!important} .mde-pages-scope .about-lightbox__close:hover,.mde-pages-scope .about-lightbox__close:focus-visible,.mde-pages-scope .about-lightbox__arrow:hover,.mde-pages-scope .about-lightbox__arrow:focus-visible{background:var(--mde-blue-dark)} .mde-pages-scope .about-lightbox__close:focus-visible,.mde-pages-scope .about-lightbox__arrow:focus-visible{outline:3px solid #fff;outline-offset:3px} body.about-lightbox-open{overflow:hidden} .mde-pages-scope .about-closing{text-align:center;padding:26px 30px;background:var(--mde-champagne)} .mde-pages-scope .about-closing h2{margin:0 0 9px;font-size:clamp(27px,3vw,38px);font-weight:400} .mde-pages-scope .about-closing p{margin:0 auto;max-width:850px} @media (min-width:1051px){ .mde-pages-scope .mde-about{box-shadow:0 0 0 100vmax var(--mde-yellow);clip-path:inset(0 -100vmax)} } @media (max-width:900px){ .mde-pages-scope .mde-about{padding-inline:20px} .mde-pages-scope .about-intro-grid,.mde-pages-scope .about-context-grid,.mde-pages-scope .about-quality,.mde-pages-scope .about-today-grid{grid-template-columns:1fr} .mde-pages-scope .timeline-card,.mde-pages-scope .timeline-card--reverse{grid-template-columns:1fr} .mde-pages-scope .timeline-card--reverse .timeline-media,.mde-pages-scope .timeline-card--reverse .timeline-copy{order:initial} .mde-pages-scope .timeline-media{min-height:360px} .mde-pages-scope .about-store-carousel__stage{min-height:420px} } @media (max-width:620px){ .mde-pages-scope .mde-about{padding:0 12px 24px} .mde-pages-scope .about-back-home{padding-block:10px} .mde-pages-scope .about-hero{min-height:350px} .mde-pages-scope .about-hero__inner{min-height:350px;padding:38px 22px} .mde-pages-scope .about-hero__veil{background:rgb(7 57 103 / .68)} .mde-pages-scope .about-panel,.mde-pages-scope .timeline-copy,.mde-pages-scope .about-today-copy,.mde-pages-scope .about-closing{padding:21px 19px} .mde-pages-scope .about-now-stats{grid-template-columns:1fr;gap:10px} .mde-pages-scope .about-stat{gap:12px;min-height:0;padding:12px 12px} .mde-pages-scope .about-stat strong{flex-basis:84px;min-width:84px;font-size:1.2rem} .mde-pages-scope .about-stat span{max-width:none;font-size:.84rem;line-height:1.22} .mde-pages-scope .timeline-media{min-height:270px} .mde-pages-scope .timeline-media--contain{min-height:320px} .mde-pages-scope .photo-caption{font-size:.72rem} .mde-pages-scope .about-store-carousel__stage{min-height:340px} .mde-pages-scope .about-store-carousel__arrow{width:34px;height:34px;font-size:28px} .mde-pages-scope .about-store-carousel__arrow--prev{left:18px} .mde-pages-scope .about-store-carousel__arrow--next{right:18px} .mde-pages-scope .about-lightbox{padding:14px} .mde-pages-scope .about-lightbox__dialog{width:100%;height:92vh} .mde-pages-scope .about-lightbox__image{max-height:78vh;border-radius:9px} .mde-pages-scope .about-lightbox__close{width:42px;height:42px;font-size:25px} .mde-pages-scope .about-lightbox__arrow{top:auto;bottom:8px;width:44px;height:44px;transform:none;font-size:32px} .mde-pages-scope .about-lightbox__arrow--prev{left:calc(50% - 54px)} .mde-pages-scope .about-lightbox__arrow--next{right:calc(50% - 54px)} } @media (prefers-reduced-motion: reduce){.mde-pages-scope .about-store-carousel__image,.mde-pages-scope .about-lightbox{transition:none}} /* ========================================================== v0.11 — harmonisation MDE finale de la page "Qui sommes-nous ?" Base visuelle v0.9 conservée : fond jaune pleine largeur. ========================================================== */ .mde-pages-scope .about-back-home{ padding-block:18px; font-size:15px; line-height:1.5; } .mde-pages-scope .about-back-home a{ display:inline; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#1B537E; font-weight:700; text-decoration:none; } .mde-pages-scope .about-back-home a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; } .mde-pages-scope .about-back-home a:focus-visible{ outline:none; background:transparent; box-shadow:none; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; } .mde-pages-scope .mde-about{overflow-wrap:anywhere;} .mde-pages-scope .mde-about :is(h1,h2,h3){text-wrap:balance;} .mde-pages-scope .mde-about :is(a,button):focus-visible{outline-offset:4px;} @media (min-width:1051px){ .mde-pages-scope .mde-about{ box-shadow:0 0 0 100vmax #FFD25F; clip-path:inset(0 -100vmax); } } /* ========================================================== v0.12 — finitions visuelles des blocs historiques ========================================================== */ /* Supprime les marges natives de
pour reprendre totalement le contrôle des photos dans la grille. */ .mde-pages-scope .timeline-media{ margin:0; } /* Teintes MDE appliquées aux zones photo. */ .mde-pages-scope .timeline-media--cream{background:#FFFDF6;} .mde-pages-scope .timeline-media--champagne{background:#FFEBB9;} /* 1972, 1984-1985 et 1998 : on conserve volontairement un "passe-partout" autour de la photo, mais il est désormais dans une vraie teinte de la charte. */ .mde-pages-scope .timeline-media--matte .timeline-image-link{ inset:16px 40px; } .mde-pages-scope .timeline-media--matte .photo-caption{ left:52px; right:52px; bottom:28px; } /* La carte postale doit être visible en entier dans son passe-partout, sans ajouter une seconde bordure artificielle. */ .mde-pages-scope .timeline-media--contain img{ object-fit:contain; padding:0; } /* 1990 et 1995 : la photo vient jusqu'aux bords de sa moitié de carte. */ .mde-pages-scope .timeline-media--flush .timeline-image-link{ inset:0; } /* "La Maison de l'Europe aujourd'hui" : aucune bande parasite autour du carrousel ; la photo rejoint directement sa zone, tandis que le fond technique reste crème face au panneau bleu. */ .mde-pages-scope .about-store-carousel--flush{ padding:0; background:#FFFDF6; } .mde-pages-scope .about-store-carousel--flush .about-store-carousel__stage{ border-radius:0; background:#FFFDF6; } /* Sur smartphone, le passe-partout reste présent mais plus discret. */ @media (max-width:620px){ .mde-pages-scope .timeline-media--matte .timeline-image-link{ inset:14px; } .mde-pages-scope .timeline-media--matte .photo-caption{ left:26px; right:26px; bottom:26px; } } /* ========================================================== v0.13 — corrections finales des zones photo ========================================================== */ /* Le bloc « aujourd'hui » ne laisse plus apparaître le fond jaune entre le texte et le carrousel : les deux moitiés se touchent. */ .mde-pages-scope .about-today-grid{ gap:0; } .mde-pages-scope .about-store-carousel--flush,.mde-pages-scope .about-store-carousel--flush .about-store-carousel__stage{ border-radius:0; } /* Les photos 1990 et 1995 remplissent réellement leur moitié de carte. Les dérivés d'affichage ont été recadrés pour retirer les bordures pâles présentes dans les scans d'origine. */ .mde-pages-scope .timeline-media--flush img{ object-fit:cover; } /* 1984-1985 : le passe-partout reste champagne, mais la carte postale affichée n'a plus son fin bord blanc de scan. */ .mde-pages-scope .timeline-media--contain img{ object-fit:contain; } /* Sur mobile, pas de bande parasite dans le bloc « aujourd'hui » non plus. */ @media (max-width:900px){ .mde-pages-scope .about-today-grid{gap:0;} } /* v0.14 — CTA webshop dans le bloc 2006 */ .mde-pages-scope .about-webshop-action{ margin:18px 0 0; } .mde-pages-scope .about-webshop-btn{ display:inline-block; padding:11px 17px; border:1px solid #1B537E; border-radius:6px; background:#1B537E; color:#fff !important; font-weight:700; text-decoration:none; } .mde-pages-scope .about-webshop-btn:hover,.mde-pages-scope .about-webshop-btn:focus-visible{ background:#E5EFEF; color:#1B537E !important; text-decoration:none; } /* v0.15 — dernier réglage du bloc 1984–1985 */ .mde-pages-scope .timeline-media--blue{background:#E5EFEF;} /* Le bloc 1984–1985 doit reprendre le fond bleu clair du panneau gauche et ne plus laisser apparaître le petit bord clair du scan. */ .mde-pages-scope .timeline-media--1985 .timeline-image-link{ inset:16px 28px; } .mde-pages-scope .timeline-media--1985 img{ object-fit:contain; padding:0; transform:scale(1.03); transform-origin:center center; } .mde-pages-scope .timeline-media--1985 .photo-caption{ left:40px; right:40px; bottom:28px; } @media (max-width:620px){ .mde-pages-scope .timeline-media--1985 .timeline-image-link{ inset:14px; } .mde-pages-scope .timeline-media--1985 .photo-caption{ left:26px; right:26px; bottom:26px; } } /* ========================================================== v0.16 — harmonisation transversale des héros MDE ========================================================== */ .mde-pages-scope .about-hero{min-height:390px;} .mde-pages-scope .about-hero__inner{ min-height:390px; max-width:780px; padding:54px 42px; } .mde-pages-scope .about-hero__veil{ background:linear-gradient(90deg, rgb(7 57 103 / .88) 0%, rgb(7 57 103 / .68) 34%, rgb(7 57 103 / .25) 62%, rgb(7 57 103 / .08) 100%); } .mde-pages-scope .about-hero h1{ font-size:clamp(46px,4.6vw,54px); line-height:1.04; text-wrap:balance; } .mde-pages-scope .about-hero__lead{ max-width:720px; font-size:20px; line-height:1.45; } @media (max-width:620px){ .mde-pages-scope .about-hero{min-height:320px;} .mde-pages-scope .about-hero__inner{min-height:320px;padding:42px 24px;} .mde-pages-scope .about-hero h1{font-size:40px;line-height:1.08;} .mde-pages-scope .about-hero__lead{font-size:18px;line-height:1.45;} .mde-pages-scope .about-hero__veil{background:linear-gradient(90deg,rgb(7 57 103 / .82),rgb(7 57 103 / .38));} }