/* ========================================================================== STONKASE — Taverny Feuille de style unique. Aucune dépendance externe. ========================================================================== */ /* --- Fontes auto-hébergées ------------------------------------------------ */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F; } /* --- Jetons --------------------------------------------------------------- */ :root { --ink: #1C1C1E; --ink-soft: #292929; --ink-70: rgba(28, 28, 30, .7); --ivory: #FFFFFF; --paper: #F4F2ED; --sand: #CDCBC4; --brass: #8A8580; --brass-2: #B9B4AC; --bordeaux: #6E6A65; --text: #1C1C1E; --muted: #7C7F84; --line: #E2E0DA; --line-soft: rgba(28, 28, 30, .10); --white: #fff; --serif: 'Inter', 'Helvetica Neue', Arial, sans-serif; --sans: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --gut: clamp(18px, 4.2vw, 64px); --maxw: 1680px; --head-h: 76px; --topbar-h: 38px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* --- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ivory); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; /* `clip` évite de transformer en conteneur de défilement (ce que fait `hidden`, qui casse window.scroll et position: sticky). */ overflow-x: hidden; overflow-x: clip; } body.is-locked { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } p { margin: 0 0 1em; } ::selection { background: var(--ink); color: var(--ivory); } :focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .wrap-narrow { width: 100%; max-width: 980px; margin-inline: auto; padding-inline: var(--gut); } /* --- Typographie ---------------------------------------------------------- */ .display { font-family: var(--serif); font-weight: 600; line-height: 1.0; letter-spacing: -.03em; } .d1 { font-size: clamp(40px, 7.4vw, 112px); font-weight: 700; } .d2 { font-size: clamp(31px, 4.6vw, 68px); } .d3 { font-size: clamp(24px, 3vw, 42px); } .d4 { font-size: clamp(20px, 2vw, 28px); } .serif { font-family: var(--serif); } .eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--brass); flex: none; } .eyebrow.no-rule::before { display: none; } .lede { font-size: clamp(16px, 1.25vw, 19px); color: #3A4450; max-width: 62ch; } .small { font-size: 13px; color: var(--muted); } .num { font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: .1em; color: var(--brass); } /* --- Boutons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border: 1px solid var(--ink); background: var(--ink); color: var(--ivory); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; transition: color .45s var(--ease), border-color .45s var(--ease); } .btn::after { content: ''; position: absolute; inset: 0; background: var(--ivory); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out); } .btn:hover { color: var(--ink); } .btn:hover::after { transform: scaleY(1); } .btn > * { position: relative; z-index: 1; } .btn span { position: relative; z-index: 1; } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost::after { background: var(--ink); } .btn-ghost:hover { color: var(--ivory); } .btn-light { background: transparent; color: var(--ivory); border-color: rgba(248, 245, 239, .6); } .btn-light::after { background: var(--ivory); } .btn-light:hover { color: var(--ink); border-color: var(--ivory); } .btn-solid-light { background: var(--ivory); color: var(--ink); border-color: var(--ivory); } .btn-solid-light::after { background: var(--ink); } .btn-solid-light:hover { color: var(--ivory); } .btn[disabled] { opacity: .4; pointer-events: none; } .btn-sm { padding: 11px 20px; font-size: 10px; } .btn-full { width: 100%; } .link-u { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; padding-bottom: 5px; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--ease-out), color .3s; } .link-u:hover { background-size: 0% 1px; color: var(--brass); } /* --- Barre d'annonce ------------------------------------------------------ */ .topbar { background: var(--ink); color: var(--ivory); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; height: 38px; display: flex; align-items: center; overflow: hidden; position: relative; z-index: 60; } .topbar-track { display: flex; gap: 60px; white-space: nowrap; animation: slide 42s linear infinite; padding-left: 60px; } .topbar-track span { opacity: .82; } .topbar-track em { font-style: normal; color: var(--brass-2); } @keyframes slide { to { transform: translateX(-50%); } } /* --- En-tête -------------------------------------------------------------- */ .head { position: sticky; top: 0; z-index: 50; background: var(--ivory); border-bottom: 1px solid var(--line); transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); } .head-inner { height: var(--head-h); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); /* la rangée ne dépasse jamais l'en-tête */ align-items: center; gap: clamp(12px, 2vw, 34px); } .brandmark { display: inline-block; } .brandmark img { height: 20px; width: auto; display: block; } .brandmark .lg-clair { display: none; } .head.transparent .brandmark .lg-sombre { display: none; } .head.transparent .brandmark .lg-clair { display: block; } .brandmark small { display: none; } .brandmark-old { display: inline-block; font-family: var(--sans); font-weight: 500; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.06; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; white-space: nowrap; } .brandmark small { display: block; font-size: 8px; line-height: 1.3; letter-spacing: .34em; text-indent: .34em; color: var(--brass); margin-top: 3px; font-weight: 400; } .nav { display: flex; gap: clamp(13px, 1.7vw, 30px); align-items: center; justify-content: center; } .nav > li { list-style: none; } .nav-link { font-size: clamp(10px, .86vw, 11.5px); letter-spacing: .15em; white-space: nowrap; text-transform: uppercase; font-weight: 500; padding: 28px 0; display: block; position: relative; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); } .nav-link:hover::after, .nav-item.open .nav-link::after, .nav-link.active::after { transform: scaleX(1); } .head-tools { display: flex; justify-content: flex-end; align-items: center; gap: clamp(12px, 1.3vw, 20px); } .tool { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; transition: color .3s; } .tool:hover { color: var(--brass); } .tool i { font-style: normal; } .cart-count { min-width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: var(--ivory); font-size: 9.5px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; padding: 0 4px; } .head.on-dark .cart-count { background: var(--ivory); color: var(--ink); } .burger { display: none; width: 26px; height: 12px; position: relative; } .burger span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .35s var(--ease), opacity .3s; } .burger span:first-child { top: 0; } .burger span:last-child { bottom: 0; } body.menu-open .burger span:first-child { transform: translateY(5.5px) rotate(45deg); } body.menu-open .burger span:last-child { transform: translateY(-5.5px) rotate(-45deg); } /* Entête transparent au-dessus du hero. L'en-tête reste `sticky` (il occupe sa place dans le flux) ; c'est le hero qui remonte sous lui grâce à une marge négative — pas de saut au défilement, et la barre d'annonce s'en va normalement. */ .head.transparent { background: transparent; border-color: transparent; color: var(--ivory); } .head.transparent .brandmark small { color: var(--brass-2); } body.has-hero .hero { margin-top: calc(-1 * var(--head-h)); height: calc(100svh - var(--topbar-h)); } /* --- Méga-menu ------------------------------------------------------------ */ .mega { position: absolute; left: 0; right: 0; top: var(--head-h); /* aligné sur le bas de l'en-tête, quel que soit le bloc conteneur */ background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); padding: 44px 0 52px; display: block; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .35s var(--ease), transform .45s var(--ease-out), visibility .35s; box-shadow: 0 30px 60px -40px rgba(11, 26, 42, .35); } .nav-item { position: static; } .nav-item.open .mega { opacity: 1; visibility: visible; transform: none; } .mega-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 70px); } .mega h4 { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; font-weight: 500; } .mega ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .mega a.m-link { font-size: 14px; color: #37414D; transition: color .25s, padding-left .35s var(--ease-out); display: inline-block; } .mega a.m-link:hover { color: var(--ink); padding-left: 8px; } .mega-visual { display: block; position: relative; overflow: hidden; } .mega-visual img { width: 100%; height: 230px; object-fit: cover; transition: transform 1.2s var(--ease-out); } .mega-visual:hover img { transform: scale(1.05); } .mega-visual figcaption { position: absolute; left: 18px; bottom: 16px; color: var(--white); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); } /* --- Menu mobile ---------------------------------------------------------- */ .mmenu { position: fixed; inset: 0; background: var(--ink); color: var(--ivory); z-index: 70; transform: translateY(-100%); transition: transform .7s var(--ease-out); overflow-y: auto; padding: 26px var(--gut) 60px; display: flex; flex-direction: column; } body.menu-open .mmenu { transform: none; } .mmenu-top { display: flex; justify-content: space-between; align-items: center; height: var(--head-h); } .mmenu-close { font-size: 26px; line-height: 1; } .mmenu nav { margin-top: 30px; display: grid; gap: 4px; } .mmenu nav a { font-family: var(--serif); font-size: clamp(30px, 8vw, 48px); padding: 10px 0; border-bottom: 1px solid rgba(248, 245, 239, .14); display: flex; justify-content: space-between; align-items: baseline; opacity: 0; transform: translateY(18px); } body.menu-open .mmenu nav a { animation: mIn .7s var(--ease-out) forwards; } .mmenu nav a i { font-style: normal; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; color: var(--brass-2); } @keyframes mIn { to { opacity: 1; transform: none; } } .mmenu-foot { margin-top: auto; padding-top: 40px; display: grid; gap: 8px; font-size: 12px; opacity: .7; } /* --- Hero WebGL ----------------------------------------------------------- */ .hero { position: relative; height: 100svh; min-height: 620px; background: var(--ink); overflow: hidden; color: var(--ivory); } .hero canvas, .hero .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); } .hero-fallback img.on { opacity: 1; } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6, 15, 26, .72) 0%, rgba(6, 15, 26, .38) 45%, rgba(6, 15, 26, .12) 75%), linear-gradient(to top, rgba(6, 15, 26, .6), transparent 42%); pointer-events: none; } .hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 8vh, 96px); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .hero-kicker { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(248, 245, 239, .8); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; } .hero-kicker::before { content: ''; width: 46px; height: 1px; background: var(--brass-2); } .hero h1 { max-width: 15ch; margin-bottom: 26px; } .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; } .js .hero h1 .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.05s var(--ease-out); } .hero.ready h1 .w > span { transform: none; } .hero-sub { max-width: 46ch; color: rgba(248, 245, 239, .84); font-size: clamp(15px, 1.15vw, 17.5px); margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero-ui { position: absolute; right: var(--gut); bottom: clamp(48px, 8vh, 96px); z-index: 3; display: flex; align-items: center; gap: 22px; } .hero-dots { display: flex; gap: 10px; } .hero-dot { width: 42px; height: 2px; background: rgba(248, 245, 239, .3); position: relative; overflow: hidden; } .hero-dot i { position: absolute; inset: 0; background: var(--ivory); transform: scaleX(0); transform-origin: left; } .hero-dot.on i { animation: dotFill 6.4s linear forwards; } @keyframes dotFill { to { transform: scaleX(1); } } .hero-index { font-family: var(--serif); font-size: 14px; letter-spacing: .08em; } .hero-index b { font-weight: 500; } .hero-index span { opacity: .5; } .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(248, 245, 239, .65); display: grid; justify-items: center; gap: 10px; } .scroll-cue i { width: 1px; height: 46px; background: linear-gradient(rgba(248,245,239,.7), transparent); display: block; } .hero-caption { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 3; writing-mode: vertical-rl; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(248, 245, 239, .5); max-height: 46svh; overflow: hidden; } /* --- Sections ------------------------------------------------------------- */ .sec { padding-block: clamp(72px, 9vw, 140px); } .sec-tight { padding-block: clamp(50px, 6vw, 92px); } .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(32px, 4vw, 58px); flex-wrap: wrap; } .sec-head p { margin: 0; } .bg-paper { background: var(--paper); } .bg-ink { background: var(--ink); color: var(--ivory); } .bg-ink .eyebrow { color: rgba(248, 245, 239, .62); } .bg-ink .lede { color: rgba(248, 245, 239, .78); } .bg-ink .small { color: rgba(248, 245, 239, .55); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* --- Marquee de maisons --------------------------------------------------- */ .maisons-band { border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; background: var(--ivory); } .maisons-track { display: flex; gap: clamp(40px, 6vw, 88px); white-space: nowrap; animation: slide 46s linear infinite; } .maisons-track:hover { animation-play-state: paused; } .maisons-track span { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 25px); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .62; transition: opacity .3s; } .maisons-track span:hover { opacity: 1; } /* --- Split éditorial ------------------------------------------------------ */ .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: center; } .split.reverse > *:first-child { order: 2; } .split.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } .figure { position: relative; overflow: hidden; } .figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); } .js .figure img { transform: scale(1.06); } .figure.is-in img { transform: scale(1); } .figure-tall { aspect-ratio: 4 / 5; } .figure-wide { aspect-ratio: 16 / 10; } .figure-cap { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 14px; } .stat-row { display: flex; gap: clamp(24px, 4vw, 60px); margin-top: 42px; flex-wrap: wrap; } .stat b { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); font-weight: 400; display: block; line-height: 1; } .stat span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } /* --- Catégories ----------------------------------------------------------- */ .cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } .cat-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4; display: block; background: var(--sand); } .cat-card:nth-child(1), .cat-card:nth-child(6) { aspect-ratio: 3 / 4; } .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease-out), filter 1s; } .cat-card:hover img { transform: scale(1.06); } .cat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,15,26,.62), rgba(6,15,26,0) 55%); } .cat-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px; color: var(--ivory); } .cat-card-body h3 { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); } .cat-card-body em { font-style: normal; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; display: inline-block; margin-top: 8px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 4px; transition: background-size .5s var(--ease-out); } .cat-card:hover .cat-card-body em { background-size: 100% 1px; } /* --- Carte produit -------------------------------------------------------- */ .grid-prod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px) clamp(12px, 1.4vw, 22px); } .grid-prod.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prod { position: relative; display: flex; flex-direction: column; } .prod-media { display: block; position: relative; overflow: hidden; background: var(--paper); aspect-ratio: 3 / 4; } .prod-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform 1.4s var(--ease-out); } .prod-media img.alt { position: absolute; inset: 0; opacity: 0; } .prod:hover .prod-media img.alt { opacity: 1; } .prod:hover .prod-media img { transform: scale(1.04); } .prod-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--ivory); color: var(--ink); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; } .prod-badge.sale { background: var(--bordeaux); color: var(--ivory); } .prod-fav { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink); background: rgba(248,245,239,.86); opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s, color .3s; } .prod:hover .prod-fav, .prod-fav.on { opacity: 1; transform: none; } .prod-fav.on { color: var(--bordeaux); } .prod-quick { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: var(--ivory); color: var(--ink); text-align: center; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 12px; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); } .prod:hover .prod-quick { opacity: 1; transform: none; } .prod-quick:hover { background: var(--ink); color: var(--ivory); } .prod-body { padding: 16px 2px 0; } .prod-body > a { display: block; } .prod-maison { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); } .prod-name { font-size: 15px; margin: 5px 0 4px; font-weight: 400; } .prod-price { font-size: 14px; letter-spacing: .02em; display: flex; gap: 10px; align-items: baseline; } .prod-price s { color: var(--muted); font-size: 12.5px; } .prod-price .now { color: var(--bordeaux); } .prod-sizes { font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prod-sizes .out { text-decoration: line-through; opacity: .45; } /* Rail horizontal */ .rail { display: flex; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > * { flex: 0 0 clamp(240px, 22vw, 340px); scroll-snap-align: start; } .rail-nav { display: flex; gap: 8px; } .rail-btn { width: 42px; height: 42px; border: 1px solid var(--line-soft); display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; } .rail-btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); } /* --- Lookbook épinglé ----------------------------------------------------- */ .pin { position: relative; } .pin-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; } .pin-track { display: flex; gap: clamp(16px, 2vw, 34px); padding-inline: var(--gut); will-change: transform; } .pin-item { flex: 0 0 clamp(260px, 30vw, 460px); } .pin-item .figure { aspect-ratio: 3 / 4; } .pin-item h3 { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); margin-top: 18px; } .pin-item p { font-size: 13px; color: rgba(248, 245, 239, .62); margin: 4px 0 0; } .pin-intro { flex: 0 0 clamp(260px, 26vw, 400px); align-self: center; } /* --- Maisons -------------------------------------------------------------- */ .maison-list { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); } .maison-row { background: var(--ivory); display: grid; grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: clamp(16px, 3vw, 44px); align-items: center; padding: clamp(20px, 2.4vw, 34px) 0; position: relative; transition: background .5s var(--ease), color .5s var(--ease); } .maison-row:hover { background: var(--ink); color: var(--ivory); } .maison-row:hover .maison-desc { color: rgba(248, 245, 239, .7); } .maison-row:hover .num { color: var(--brass-2); } .maison-name { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 36px); overflow-wrap: anywhere; } .maison-desc { font-size: 14px; color: var(--muted); max-width: 60ch; transition: color .5s; } .maison-go { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; } .maison-hover-img { position: fixed; width: 240px; height: 300px; object-fit: cover; z-index: 40; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .4s var(--ease), transform .6s var(--ease-out); } .maison-hover-img.on { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* --- Services / process --------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); } .steps > div { background: var(--ivory); padding: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 38px); } .bg-ink .steps { background: rgba(248, 245, 239, .16); } .bg-ink .steps > div { background: var(--ink); } .steps h3 { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 25px); margin: 14px 0 10px; } .steps p { font-size: 14px; color: var(--muted); margin: 0; } .bg-ink .steps p { color: rgba(248, 245, 239, .66); } /* --- Bloc boutique -------------------------------------------------------- */ .shop-block { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--ivory); } .shop-block > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shop-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,15,26,.85), rgba(6,15,26,.15) 65%); } .shop-card { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 6vw, 80px); } .shop-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; } .info-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .info-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; font-size: 14px; padding-bottom: 13px; border-bottom: 1px solid rgba(248, 245, 239, .18); } .info-list b { font-weight: 400; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .62; padding-top: 3px; } .info-list.on-light li { border-bottom-color: var(--line); } /* --- Newsletter ----------------------------------------------------------- */ .nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; } .field-line { display: flex; border-bottom: 1px solid var(--line); } .field-line input { flex: 1; border: 0; background: none; padding: 14px 0; font-size: 15px; } .field-line input::placeholder { color: var(--muted); } .field-line button { padding: 0 4px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .bg-ink .field-line { border-color: rgba(248, 245, 239, .3); } .bg-ink .field-line input::placeholder { color: rgba(248, 245, 239, .5); } /* --- Pied de page --------------------------------------------------------- */ .foot { background: var(--ink); color: var(--ivory); padding-top: clamp(56px, 6vw, 96px); } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vw, 60px); padding-bottom: 56px; } .foot h4 { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 18px; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .foot a { font-size: 14px; color: rgba(248, 245, 239, .74); transition: color .3s; } .foot a:hover { color: var(--ivory); } .foot-bottom { border-top: 1px solid rgba(248, 245, 239, .16); padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 11.5px; color: rgba(248, 245, 239, .55); } .foot-note { font-size: 11.5px; color: rgba(248, 245, 239, .45); max-width: 76ch; padding-bottom: 26px; line-height: 1.7; } /* --- Panneaux (panier, recherche, favoris) -------------------------------- */ .scrim { position: fixed; inset: 0; background: rgba(8, 17, 28, .45); opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; z-index: 80; backdrop-filter: blur(2px); } .scrim.on { opacity: 1; visibility: visible; } .panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--ivory); z-index: 90; transform: translateX(100%); transition: transform .6s var(--ease-out); display: flex; flex-direction: column; } .panel.on { transform: none; } .panel-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 26px; border-bottom: 1px solid var(--line); } .panel-head h3 { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; } .panel-body { flex: 1; overflow-y: auto; padding: 22px 26px; } .panel-foot { border-top: 1px solid var(--line); padding: 22px 26px; display: grid; gap: 14px; } .panel-close { font-size: 22px; line-height: 1; } .cart-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); } .cart-line img { width: 84px; height: 108px; object-fit: cover; background: var(--paper); } .cart-line-lg { grid-template-columns: 110px minmax(0, 1fr) auto; } .cart-line-lg img { width: 110px; height: 140px; } .cart-line-prix { text-align: right; } .cart-line h4 { font-size: 14px; } .cart-line .meta { font-size: 12px; color: var(--muted); margin: 3px 0 8px; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); } .qty button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 14px; } .qty span { min-width: 26px; text-align: center; font-size: 13px; } .cart-total { display: flex; justify-content: space-between; font-size: 14px; } .cart-total b { font-weight: 500; } .empty { text-align: center; padding: 60px 0; color: var(--muted); } /* Recherche */ .search-panel { position: fixed; left: 0; right: 0; top: 0; background: var(--ivory); z-index: 90; transform: translateY(-100%); transition: transform .6s var(--ease-out); padding: 30px 0 40px; max-height: 100svh; overflow-y: auto; } .search-panel.on { transform: none; } .search-field { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; } .search-field input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; font-family: var(--serif); font-size: clamp(20px, 4vw, 46px); padding: 0; } .search-field .panel-close { flex: none; } .search-field svg { flex: none; } .search-field input::placeholder { color: var(--sand); } .search-results { margin-top: 30px; } /* --- Fil d'ariane & entêtes de page -------------------------------------- */ .crumbs { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 22px 0; } .crumbs a:hover { color: var(--ink); } .page-head { padding-block: clamp(28px, 4vw, 60px) clamp(28px, 3vw, 44px); } .page-head h1 { margin-bottom: 16px; } /* titre géant dans une colonne étroite : on réduit pour qu'il tienne */ .page-head .split .d1 { font-size: clamp(38px, 5.6vw, 84px); } /* --- Boutique : filtres --------------------------------------------------- */ .shop-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; } .filters { position: sticky; top: calc(var(--head-h) + 20px); } .f-group { border-bottom: 1px solid var(--line); padding: 18px 0; } .f-group > button { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; } .f-body { display: grid; gap: 10px; padding-top: 16px; } .f-group.closed .f-body { display: none; } .check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #39434F; cursor: pointer; } .check input { appearance: none; width: 13px; height: 13px; border: 1px solid var(--muted); flex: none; transition: background .2s, border-color .2s; } .check input:checked { background: var(--ink); border-color: var(--ink); } .check:hover { color: var(--ink); } .sizes-pick { display: flex; flex-wrap: wrap; gap: 7px; } .size-chip { border: 1px solid var(--line); padding: 7px 12px; font-size: 12px; cursor: pointer; transition: all .25s; background: none; } .size-chip.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); } .size-chip[disabled] { opacity: .32; cursor: not-allowed; text-decoration: line-through; } .shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; } .select-line { border: 1px solid var(--line); padding: 9px 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: none; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1px solid var(--line); padding: 6px 12px; font-size: 11px; letter-spacing: .1em; display: inline-flex; gap: 8px; align-items: center; } .chip button { font-size: 13px; line-height: 1; opacity: .55; } .filters-toggle { display: none; } /* --- Fiche produit -------------------------------------------------------- */ .pdp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 76px); align-items: start; } .pdp-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .pdp-gallery .g-item { background: var(--paper); overflow: hidden; aspect-ratio: 3 / 4; } .pdp-gallery .g-item:first-child:nth-last-child(1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; } .pdp-gallery img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s var(--ease-out); } .pdp-gallery img:hover { transform: scale(1.03); } .pdp-info { position: sticky; top: calc(var(--head-h) + 28px); } .pdp-price { font-size: 21px; margin: 18px 0 6px; display: flex; gap: 12px; align-items: baseline; } .pdp-price s { font-size: 16px; color: var(--muted); } .size-row { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 12px; } .size-row span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .size-row button { font-size: 11px; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); } .stock-line { font-size: 12.5px; margin-top: 12px; display: flex; align-items: center; gap: 8px; color: var(--muted); } .dot { width: 6px; height: 6px; border-radius: 50%; background: #3F7D5A; flex: none; } .dot.low { background: var(--brass); } .dot.out { background: #A33; } .acc { border-top: 1px solid var(--line); } .acc-item { border-bottom: 1px solid var(--line); } .acc-item > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; } .acc-body { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); } .acc-item.open .acc-body { max-height: 460px; } .acc-body div { padding-bottom: 20px; font-size: 14px; color: #3D4753; } .pdp-service { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; font-size: 12px; color: var(--muted); } .pdp-service span { display: inline-flex; gap: 8px; align-items: center; } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(8, 17, 28, .94); z-index: 95; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .lightbox.on { opacity: 1; visibility: visible; } .lightbox img { max-width: 92vw; max-height: 88svh; object-fit: contain; } .lightbox button { position: absolute; top: 24px; right: 28px; color: var(--ivory); font-size: 26px; z-index: 2; } .guide-card { background: var(--ivory); color: var(--text); padding: clamp(24px, 4vw, 44px); width: min(680px, 92vw); max-height: 84svh; overflow-y: auto; } .guide-card h3 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 8px; } .guide-card table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 18px; } .guide-card th, .guide-card td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); } .guide-card th { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* --- Tables & formulaires (espace pro) ------------------------------------ */ .form-grid { display: grid; gap: 18px; } .f-row { display: grid; gap: 7px; } .f-row label { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .f-row input, .f-row select, .f-row textarea { border: 1px solid var(--line); background: var(--white); padding: 12px 14px; font-size: 14.5px; width: 100%; border-radius: 0; transition: border-color .3s; } .f-row textarea { min-height: 120px; resize: vertical; } .f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: none; border-color: var(--ink); } .f-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .f-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .f-hint { font-size: 12px; color: var(--muted); } .switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; } .switch input { appearance: none; width: 38px; height: 20px; background: var(--sand); position: relative; transition: background .3s; flex: none; } .switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--white); transition: transform .3s var(--ease); } .switch input:checked { background: var(--ink); } .switch input:checked::after { transform: translateX(18px); } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: left; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:hover td { background: rgba(224, 216, 202, .28); } .tbl img { width: 46px; height: 58px; object-fit: cover; background: var(--paper); } .tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line); display: inline-block; } .tag.ok { border-color: #3F7D5A; color: #2F6146; } .tag.warn { border-color: var(--brass); color: var(--brass); } .tag.off { border-color: var(--muted); color: var(--muted); } .tag.bad { border-color: #A33; color: #A33; } .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .kpi { background: var(--ivory); padding: 24px 22px; } .kpi b { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 400; display: block; line-height: 1; } .kpi span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 10px; } .kpi i { font-style: normal; font-size: 12px; color: var(--brass); } .tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 32px; overflow-x: auto; } .tabs button { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 0 0 16px; white-space: nowrap; color: var(--muted); position: relative; transition: color .3s; } .tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .4s var(--ease-out); } .tabs button.on { color: var(--ink); } .tabs button.on::after { transform: scaleX(1); } .tab-pane { display: none; } .tab-pane.on { display: block; animation: fade .5s var(--ease); } @keyframes fade { from { opacity: 0; transform: translateY(8px); } } .size-matrix { border: 1px solid var(--line); } .size-matrix-row { display: grid; grid-template-columns: minmax(70px, 1.1fr) minmax(0, 1fr) 110px 40px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); } .size-matrix-row:last-child { border-bottom: 0; } .size-matrix-row b { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; line-height: 1.25; } .size-matrix-head { background: var(--paper); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .size-matrix-head b { font-size: 10px; font-weight: 500; } .thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .thumb { position: relative; width: 84px; height: 106px; background: var(--paper); overflow: hidden; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb button { position: absolute; top: 3px; right: 3px; background: rgba(248,245,239,.9); width: 20px; height: 20px; font-size: 13px; line-height: 1; } .thumb.main::after { content: 'PRINCIPALE'; position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--ivory); font-size: 7.5px; letter-spacing: .12em; text-align: center; padding: 3px; } .drop { border: 1px dashed var(--line); padding: 26px; text-align: center; font-size: 13px; color: var(--muted); transition: border-color .3s, background .3s; cursor: pointer; } .drop.over, .drop:hover { border-color: var(--ink); background: var(--paper); } /* Connexion */ .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--head-h) - 38px); } .auth-visual { position: relative; overflow: hidden; background: var(--ink); } .auth-visual img { width: 100%; height: 100%; object-fit: cover; opacity: .85; } .auth-visual figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4vw, 56px); color: var(--ivory); background: linear-gradient(to top, rgba(6,15,26,.8), transparent); } .auth-form { display: flex; align-items: center; padding: clamp(36px, 6vw, 90px); } .auth-form > div { width: 100%; max-width: 420px; margin-inline: auto; } .demo-box { border: 1px solid var(--line); background: var(--paper); padding: 16px 18px; font-size: 12.5px; margin-top: 24px; } .demo-box b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; font-weight: 500; } .demo-box code { font-family: var(--sans); background: var(--white); padding: 1px 6px; border: 1px solid var(--line); } /* --- Toast ---------------------------------------------------------------- */ .toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); } .toast { background: var(--ink); color: var(--ivory); padding: 15px 20px; font-size: 13px; display: flex; gap: 14px; align-items: center; justify-content: space-between; animation: toastIn .5s var(--ease-out); } .toast.err { background: var(--bordeaux); } @keyframes toastIn { from { opacity: 0; transform: translateY(14px); } } /* --- Révélations au défilement -------------------------------------------- */ .js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease-out); } .js .rv.is-in { opacity: 1; transform: none; } .rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; } .rv-mask { display: block; overflow: hidden; } .js .rv-mask > * { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease-out); } .js .rv-mask.is-in > * { transform: none; } .js .rv-line { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); } .js .rv-line.is-in { transform: none; }@media (prefers-reduced-motion: reduce) { .rv, .rv-mask > *, .rv-line { opacity: 1 !important; transform: none !important; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* --- Divers --------------------------------------------------------------- */ .two-col-text { columns: 2; column-gap: clamp(24px, 4vw, 64px); } .mono-note { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); } .hidden { display: none !important; } .center { text-align: center; } .mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 46px; } .mb-m { margin-bottom: 26px; } .mb-l { margin-bottom: 46px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item > button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 16px; } .faq-item .acc-body div { padding-bottom: 22px; max-width: 74ch; } .map-embed { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); filter: grayscale(1) contrast(1.05); } .gal-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gal-3 .figure { aspect-ratio: 4 / 5; } /* --- Adaptatif ------------------------------------------------------------ */ @media (max-width: 1340px) { .head-tools .tool span:not(.cart-count):not(.fav-count) { display: none; } }@media (max-width: 1180px) { .grid-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 1024px) { .nav, .head-tools .tool-desktop { display: none; } .burger { display: block; } .head-inner { grid-template-columns: auto minmax(0, 1fr) auto; } .head-inner .brandmark { justify-self: center; } .shop-layout { grid-template-columns: minmax(0, 1fr); } .filters { position: fixed; inset: 0; z-index: 88; background: var(--ivory); padding: 20px var(--gut) 90px; overflow-y: auto; transform: translateX(-100%); transition: transform .5s var(--ease-out); } .filters.on { transform: none; } .filters-toggle { display: inline-flex; } .pdp { grid-template-columns: minmax(0, 1fr); } .pdp-info { position: static; } .auth { grid-template-columns: minmax(0, 1fr); } .auth-visual { min-height: 34svh; } .split, .split.wide-left { grid-template-columns: minmax(0, 1fr); } .split.reverse > *:first-child { order: 0; } .nl { grid-template-columns: minmax(0, 1fr); } .shop-grid { grid-template-columns: minmax(0, 1fr); } .maison-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .maison-desc { display: none; } }@media (max-width: 760px) { :root { --head-h: 64px; --topbar-h: 34px; } .pin { height: auto !important; } .pin-sticky { position: static; height: auto; padding: 56px 0; display: block; } .pin-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; scrollbar-width: none; padding-bottom: 8px; } .pin-track::-webkit-scrollbar { display: none; } .pin-item { flex: 0 0 76vw; scroll-snap-align: start; } .pin-intro { flex: 0 0 82vw; } .grid-prod, .grid-prod.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: minmax(0, 1fr); } .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .f-2, .f-3 { grid-template-columns: minmax(0, 1fr); } .two-col-text { columns: 1; } .gal-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pdp-gallery { grid-template-columns: minmax(0, 1fr); } .hero-ui { left: var(--gut); right: auto; bottom: 22px; } .hero-caption { display: none; } .scroll-cue { display: none; } .info-list li { grid-template-columns: minmax(0, 1fr); gap: 3px; } .info-list b { padding-top: 0; } .cat-card-body { padding: 18px 16px; } .cat-card-body h3 { font-size: clamp(18px, 5.2vw, 24px); } .shop-bar { gap: 12px; } .shop-bar > div { flex: 1 1 100%; justify-content: space-between; } .shop-bar select.select-line { max-width: 62%; } .size-matrix-row { grid-template-columns: minmax(52px, 1.2fr) minmax(0, 1fr) 84px 32px; gap: 8px; padding: 10px; } .tbl .hide-sm { display: none; } .topbar { height: 34px; font-size: 10px; } }@media (max-width: 440px) { .cart-line-lg { grid-template-columns: 78px minmax(0, 1fr); } .cart-line-lg img { width: 78px; height: 100px; } .cart-line-prix { grid-column: 2; text-align: left; margin-top: 6px; } }@media (max-width: 359px) { .grid-prod, .grid-prod.cols-3, .cats { grid-template-columns: minmax(0, 1fr); } } @keyframes viaPop { 0% { transform: scale(0); } 70% { transform: scale(1.6); } 100% { transform: scale(1); } } /* --- « Mon appareil » ----------------------------------------------------- */ #appareilBtn.on span { color: var(--brass); } .compat-badge { display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; margin-bottom: 8px; border: 1px solid var(--line); } .compat-oui, .compat-universel { border-color: #3F7D5A; color: #2F6146; } .compat-epuise { border-color: var(--brass); color: var(--bordeaux); } .compat-non { border-color: var(--line); color: var(--muted); text-decoration: line-through; } /* =========================================================================== RETENUE — feuille commune à toutes les maquettes. Le luxe se joue en enlevant : une photographie, deux lignes, du vide. Quatre compositions de hero seulement, toutes sobres, toutes traitées par le même shader. Ce qui distingue un site d'un autre, c'est la photographie, le cadrage, le noir choisi et la phrase — pas un ornement dessiné. =========================================================================== */ /* --- Échelle typographique : le gras est bruyant -------------------------- */ .display { font-weight: 500; letter-spacing: -.02em; overflow-wrap: break-word; } .d1 { font-size: clamp(32px, 6.2vw, 92px); font-weight: 500; line-height: .96; } .d2 { font-size: clamp(27px, 3.9vw, 56px); font-weight: 500; } .d3 { font-size: clamp(21px, 2.5vw, 34px); font-weight: 500; } .d4 { font-weight: 500; }@media (max-width: 460px) { .display { hyphens: auto; -webkit-hyphens: auto; } } /* --- Le grain, sur toute la page ------------------------------------------ */ .film-grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; opacity: .5; mix-blend-mode: overlay; }@media (prefers-reduced-motion: reduce) { .film-grain { display: none; } } /* --- Vignettes de rayon : ramenées vers la palette ------------------------ */ .cats .cat-card, .cats .cat-card:nth-child(1), .cats .cat-card:nth-child(6) { aspect-ratio: auto; } .cat-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(260px, 42vw, 460px); } .cat-card > img { position: absolute; inset: 0; } .cat-card-body { position: relative; } .cat-card-body h3 { line-height: 1.06; } .cat-card img { filter: grayscale(.82) contrast(1.06) brightness(.88); } .cat-card:hover img { filter: grayscale(0) contrast(1) brightness(1); } .cat-card::after { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.46) 38%, rgba(0,0,0,0) 74%); } .figure img, .figure-tall img { filter: grayscale(.28) contrast(1.03); } /* --- En-tête sur téléphone ------------------------------------------------ Le bouton du menu ne doit jamais frôler le nom du commerce : on impose une marge minimale mesurée, plutôt qu'un gap de grille qui s'effondre à 360 px. */ @media (max-width: 760px) { .head-inner { grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 0; } .head-inner .brandmark { justify-self: start; margin-left: clamp(24px, 8vw, 42px); min-width: 0; max-width: 100%; overflow: hidden; } .head-inner .brandmark small { display: none; } } /* =========================================================================== L'OUTIL — squelette commun aux signatures fonctionnelles. Les réglages à gauche, le verdict à droite, et toujours deux blocs : ce qui convient, et ce qui ne conviendra pas avec la raison chiffrée. C'est le second bloc qui fait la valeur de l'outil : il déconseille. =========================================================================== */ .outil-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(28px, 4.2vw, 60px); align-items: start; } .outil-choix { display: grid; gap: clamp(24px, 3vw, 38px); } .outil-res { border: 1px solid var(--line); background: var(--white); padding: clamp(20px, 2.6vw, 34px); } .etape h3 { display: flex; align-items: baseline; gap: 12px; font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.02em; margin-bottom: 8px; } .etape h3 span { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--brass); flex: none; } .etape-aide { margin-top: 10px; min-height: 18px; } .res-tete { padding-bottom: 20px; border-bottom: 1px solid var(--line); } .res-tete h3 { margin: 8px 0 10px; color: var(--brass); } .res-bloc { margin-top: 26px; } .res-bloc .eyebrow { display: block; margin-bottom: 10px; } .res-bloc.oui { padding: 16px; background: var(--ivory); border-left: 3px solid var(--brass); } .res-refus { margin: 0; padding: 0; display: grid; gap: 8px; } .res-refus li { list-style: none; font-size: 13.5px; line-height: 1.5; padding-left: 18px; position: relative; color: var(--muted); } .res-refus li::before { content: '×'; position: absolute; left: 0; color: var(--brass); font-weight: 700; } .res-loi { margin-top: 26px; padding: 18px 20px; background: var(--ink); color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.6; } .res-loi b { color: var(--brass-2); }@media (max-width: 900px) { .outil-grid { grid-template-columns: minmax(0, 1fr); } } /* =========================================================================== STONKASE — écarts assumés au socle commun. Les deux références (La Coque Française, The Kase) sont sur BLANC PUR, sans grain et sans couleur d'accent : la couleur vient uniquement des photographies. On retire donc le grain argentique et la désaturation des vignettes, qui appartiennent aux maquettes sombres. =========================================================================== */ .film-grain { display: none; } .cat-card img { filter: none; } .cat-card:hover img { filter: none; } .figure img, .figure-tall img { filter: none; } body, .bg-ivory { background: #fff; } .sec { background: #fff; } .bg-paper { background: var(--paper); } /* Inter en 500 sur les titres : c'est la graisse de La Coque Française. */ .display { font-weight: 500; letter-spacing: -.03em; } .d1 { font-weight: 500; letter-spacing: -.035em; } .d2, .d3, .d4 { font-weight: 500; } /* Les surtitres : petites capitales grises très espacées, sans filet coloré. */ .eyebrow { color: var(--muted); letter-spacing: .22em; font-size: 10.5px; } .eyebrow::before { background: var(--sand); } /* Le lien souligné, noir, sans fioriture — leur seul ornement. */ .link-u { border-bottom-color: var(--ink); } /* L'en-tête reste blanc en permanence, y compris sur l'accueil. */ .has-hero .head, .head.transparent { background: #fff !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); } .head.transparent .nav-link, .head.transparent .brandmark, .head.transparent .head-actions a, .head.transparent .burger span { color: var(--ink); } .head.transparent .burger span { background: var(--ink); } /* Le bandeau d'annonce : fixe et centré, comme chez eux — pas un défilement. */ .topbar { background: var(--ink); } .topbar-track { animation: none !important; transform: none !important; display: flex; justify-content: center; width: 100%; } .topbar-track > *:not(:first-child) { display: none; } /* L'en-tête ne devient plus transparent : le logo sombre est le seul valable. */ .head.transparent .brandmark .lg-sombre { display: block; } .head.transparent .brandmark .lg-clair { display: none; } /* =========================================================================== Les vignettes de rayon, à la manière de La Coque Française : un bloc d'image en portrait, plein cadre, et UN SEUL intitulé blanc centré en capitales espacées. Pas de dégradé noir en pied, pas de surtitre, pas de « voir le rayon » — l'image porte tout, le mot la nomme. =========================================================================== */ .cats { gap: 2px; } /* la spécificité doit dépasser celle du socle commun (.cats .cat-card) */ .cats .cat-card, .cats .cat-card:nth-child(1), .cats .cat-card:nth-child(6) { aspect-ratio: 3 / 4; min-height: 0; display: block; position: relative; overflow: hidden; } .cat-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cat-card::after { /* Leurs images sont en valeur moyenne ; les nôtres vont du presque blanc au sombre. Un voile uniforme un peu plus dense, plus une ombre portée sur le texte, tiennent le blanc dans les deux cas sans noircir la photographie. */ background: rgba(28, 28, 30, .26); transition: background .5s var(--ease); } .cat-card:hover::after { background: rgba(28, 28, 30, .36); } .cat-card-body { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; padding: 24px; } .cat-card-body em { display: none; } /* plus de « voir le rayon » */ .cat-card-body p, .cat-card-body .sur { display: none; } /* ni de surtitre */ .cat-card-body h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(13px, 1.35vw, 17px); letter-spacing: .2em; text-transform: uppercase; line-height: 1.35; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 22px rgba(0, 0, 0, .55); margin: 0; } /* Les intitulés de section : centrés, capitales espacées, surtitre minuscule. Les contrôles éventuels (lien « tout voir », flèches) passent dessous, eux aussi centrés — jamais en colonne à côté du titre. */ .sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .sec-head > div, .sec-head > p { max-width: 62ch; margin-inline: auto; } .sec-head > div[style*="flex"] { justify-content: center; } .sec-head .eyebrow { justify-content: center; } .sec-head .eyebrow::before { display: none; } .sec-head .display { font-size: clamp(21px, 2.4vw, 32px); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; } .sec-head .lede { margin-top: 14px; color: var(--muted); } /* =========================================================================== Ce qui fait la cohérence d'un catalogue chez ces deux marques, ce n'est pas le cadrage : c'est la lumière. Toutes leurs prises de vue ont la même exposition claire et la même saturation basse. On l'impose ici au rayon entier, pour que des photographies d'origines différentes se lisent comme une seule séance. =========================================================================== */ .prod-media { background: var(--paper); } .prod-media img { filter: saturate(.7) brightness(1.07) contrast(.95); transition: filter .6s var(--ease), opacity .7s var(--ease), transform 1.4s var(--ease-out); } .prod:hover .prod-media img { filter: saturate(.82) brightness(1.04) contrast(.97); } .pdp-gallery img, .rail .prod-media img { filter: saturate(.7) brightness(1.07) contrast(.95); } /* =========================================================================== HERO À DEUX VISUELS — structure relevée sur La Coque Française : hauteur 0,60 × la fenêtre (517 px mesurés sur 858), deux diapositives en fondu, pastilles à défilement automatique, zones tactiles latérales. Chaque diapositive : surtitre bas-de-casse, intitulé en capitales, lien souligné. L'image n'est pas assombrie — un voile plat très léger suffit. =========================================================================== */ .hero-slides { position: relative; overflow: hidden; height: clamp(400px, 60svh, 620px); background: var(--paper); } .hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s; } .hs-slide.on { opacity: 1; visibility: visible; transition-delay: 0s; } .hs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); } .hs-slide.on img { animation: hsZoom 9s ease-out forwards; } @keyframes hsZoom { from { transform: scale(1.04); } to { transform: scale(1.10); } } @media (prefers-reduced-motion: reduce) { .hs-slide.on img { animation: none; } .hs-slide { transition: none; } } .hs-voile { position: absolute; inset: 0; background: rgba(28, 28, 30, .22); } .hs-txt { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; pointer-events: none; } .hs-txt .wrap { pointer-events: auto; } .hs-sur { margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .5); } .hs-titre { margin: 0; font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 24px rgba(0,0,0,.5); max-width: 22ch; } .hs-lien { display: inline-block; margin-top: 22px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .85); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); } /* Les deux zones tactiles, invisibles, comme chez eux. */ .hs-zone { position: absolute; top: 0; bottom: 46px; width: 22%; z-index: 3; background: none; border: 0; cursor: pointer; } .hs-zone[data-sens="prev"] { left: 0; } .hs-zone[data-sens="next"] { right: 0; } .hs-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4; display: flex; justify-content: center; gap: 10px; } .hs-dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); border: 0; cursor: pointer; transition: background .35s var(--ease), transform .35s var(--ease); } .hs-dot.on { background: #fff; transform: scale(1.25); } /* ========================================================================== SUIVI DE COMMANDE — pages « merci » et « suivi » ========================================================================== */ /* --- En-tête de commande -------------------------------------------------- */ .suivi-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .suivi-tete .small { color: var(--muted); } /* --- Les quatre jalons du parcours ---------------------------------------- */ .suivi-jalons { list-style: none; margin: 40px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .jalon { position: relative; padding: 0 16px 0 0; } /* la ligne qui relie les pastilles */ .jalon::before { content: ''; position: absolute; top: 6px; left: 7px; right: 0; height: 1px; background: var(--line); } .suivi-jalons .jalon:last-child::before { display: none; } .jalon.fait::before { background: var(--ink); } .jalon-pastille { position: relative; z-index: 1; display: block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--sand); background: var(--white); margin-bottom: 16px; } .jalon.fait .jalon-pastille { background: var(--ink); border-color: var(--ink); } .jalon.encours .jalon-pastille { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 9px var(--ink); } /* léger battement sur l’étape en cours : le colis bouge, l’interface aussi */ .jalon.encours .jalon-pastille::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--ink); opacity: 0; animation: jalon-onde 2.6s ease-out infinite; } @keyframes jalon-onde { 0% { transform: scale(.6); opacity: .5; } 70%, 100% { transform: scale(1.25); opacity: 0; } } .jalon b { display: block; font-weight: 500; font-size: 14.5px; } .jalon .small { display: block; color: var(--muted); margin-top: 3px; padding-right: 10px; } .jalon.attente b, .jalon.attente .small { color: var(--brass-2); } /* --- Bloc colis ----------------------------------------------------------- */ .suivi-colis { border: 1px solid var(--line); padding: 26px; background: var(--paper); } .suivi-numero { font-size: clamp(20px, 2.4vw, 27px); font-weight: 500; letter-spacing: .09em; margin: 10px 0 4px; } /* --- Fil des passages La Poste -------------------------------------------- */ .suivi-fil { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--sand); } .suivi-fil li { position: relative; padding: 0 0 22px; } .suivi-fil li:last-child { padding-bottom: 0; } .suivi-fil li::before { content: ''; position: absolute; left: -27px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--sand); } .suivi-fil li.actuel::before { background: var(--ink); box-shadow: 0 0 0 4px var(--paper); } .suivi-fil time { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); } .suivi-fil b { display: block; font-weight: 500; font-size: 15px; margin-top: 4px; } .suivi-fil li.actuel b { font-size: 16.5px; } .suivi-fil .small { color: var(--muted); } /* --- Encadré du lien de suivi, page « merci » ------------------------------ */ .merci-cle { border: 1px solid var(--ink); padding: 24px 26px; } .merci-cle .small { color: var(--muted); margin-top: 4px; } @media (max-width: 720px) { .suivi-jalons { grid-template-columns: 1fr; gap: 20px; } .jalon { padding: 0 0 0 30px; min-height: 34px; } /* en colonne, la ligne qui relie les jalons devient verticale */ .jalon::before { top: 20px; bottom: -22px; left: 6px; right: auto; width: 1px; height: auto; } .jalon-pastille { position: absolute; left: 0; top: 3px; margin: 0; } .jalon .small { padding-right: 0; } .suivi-tete { align-items: flex-start; } .suivi-tete > div:last-child { text-align: left !important; } } /* ========================================================================== ESPACE PRO — commandes, expédition, canaux de diffusion ========================================================================== */ /* --- Bandeau d’état d’une intégration ------------------------------------- */ .bandeau-info { border: 1px solid var(--line); border-left: 2px solid var(--brass); background: var(--paper); padding: 16px 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink-70); } .bandeau-info.ok { border-left-color: #3F7D5A; } .bandeau-info b { color: var(--ink); font-weight: 500; } /* --- Sous-onglets (filtres de commandes) ---------------------------------- */ .tabs.sous { gap: 18px; border-bottom: none; margin-bottom: 0; } .tabs.sous button { font-size: 11px; padding-bottom: 8px; } /* --- Carte commande ------------------------------------------------------- */ .cmd { border: 1px solid var(--line); margin-bottom: 16px; background: var(--ivory); } .cmd-tete { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 20px 22px; } .cmd-num { font-weight: 500; font-size: 16px; letter-spacing: .04em; margin-right: 8px; } .cmd-tete .small { color: var(--muted); margin-top: 5px; } .cmd-note { color: var(--brass) !important; } .cmd-montant { text-align: right; } .cmd-montant b { font-size: 21px; display: block; } .cmd-lignes { border-top: 1px solid var(--line); padding: 6px 22px; } .cmd-ligne { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; } .cmd-ligne + .cmd-ligne { border-top: 1px solid var(--line-soft); } .cmd-ligne img { width: 40px; height: 52px; object-fit: cover; } .cmd-ligne b { font-weight: 500; color: var(--muted); } .cmd-ligne .small { color: var(--muted); } /* --- Bloc expédition ------------------------------------------------------ */ .cmd-exp { border-top: 1px solid var(--line); padding: 20px 22px; background: var(--paper); } .cmd-exp.retrait { background: var(--ivory); } .cmd-exp .small { color: var(--muted); margin-top: 6px; } .cmd-exp-tete { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cmd-colis { font-size: 19px; font-weight: 500; letter-spacing: .08em; margin: 8px 0 2px; } .cmd-suivi-etat { text-align: right; } .cmd-suivi-etat b { font-weight: 500; font-size: 14.5px; } .cmd-suivi-etat .small { color: var(--muted); } /* --- Actions -------------------------------------------------------------- */ .cmd-actions { border-top: 1px solid var(--line); padding: 14px 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cmd-hist { border-top: 1px solid var(--line); padding: 14px 22px; background: var(--paper); } .cmd-hist .small { padding: 3px 0; color: var(--ink-70); } .cmd-hist time { color: var(--brass); margin-right: 8px; } /* --- Diagnostic des intégrations ------------------------------------------ */ .diag { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; } .diag + .diag { border-top: 1px solid var(--line-soft); } .diag b { font-weight: 500; font-size: 13.5px; } .diag .small { color: var(--muted); } .pastille { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; margin-top: 5px; } .pastille.ok { background: #3F7D5A; } .pastille.attente { background: var(--brass-2); } /* --- Canaux de diffusion --------------------------------------------------- */ .canaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; } .canal { border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 12px; } .canal.on { border-color: var(--ink); } .canal-tete { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .canal-tete b { font-weight: 500; font-size: 15.5px; } .canal-tete .small { color: var(--muted); text-transform: lowercase; } .canal .small { font-size: 12.5px; line-height: 1.65; color: var(--ink-70); } .canal-alerte { color: var(--brass) !important; } .canal-besoin { border-top: 1px solid var(--line); padding-top: 12px; } .canal-besoin ul { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .canal-besoin code { font-size: 10.5px; background: var(--paper); border: 1px solid var(--line); padding: 3px 7px; letter-spacing: .02em; } .canal-fichiers { display: grid; gap: 7px; border-top: 1px solid var(--line); padding-top: 12px; } .canal-repli { color: var(--muted) !important; } .canal > *:last-child { margin-top: auto; } @media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmd-montant { text-align: left; } .cmd-suivi-etat { text-align: left; } .cmd-ligne { grid-template-columns: 34px 1fr auto; } .cmd-ligne img { width: 34px; height: 44px; } .cmd-ligne > span { grid-column: 2 / -1; } } /* En-têtes d’onglet de l’espace pro : alignés à gauche comme le reste du tableau de bord, et non centrés comme les sections éditoriales du site. */ .pro-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; } .pro-titre { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.015em; margin: 6px 0 0; }