/*
* PUB Accueil — page stylesheet
* Scoped to .pub-home — drop into any classic WP theme without conflicts.
* Palette is exposed via CSS custom properties so a child theme can
* override any color globally (e.g. `.pub-home { --pub-blue: #2c8;}`).
*/
.pub-home {
/* Brand */
--pub-navy: #252749;
--pub-navy-deep: #1a1c3a;
--pub-magenta: #a8195c;
--pub-gold: #e8b042;
--pub-blue: #4a73e3;
--pub-blue-deep: #3b5cc2;
--pub-mint: #cfe6c6;
/* Neutrals */
--pub-ink: #0f1020;
--pub-ink-soft: #2a2c3f;
--pub-body: #4a4c5e;
--pub-muted: #7a7c8e;
--pub-rule: #e6e4dd;
--pub-rule-strong:#cfcdc4;
--pub-paper: #f8f6f0;
--pub-paper-deep: #f1eee5;
--pub-surface: #ffffff;
/* Type */
--pub-display: "Fraunces", "IBM Plex Serif", Georgia, serif;
--pub-sans: "Inter", "IBM Plex Sans", system-ui, sans-serif;
--pub-mono: ui-monospace, "SF Mono", Menlo, monospace;
/* Layout */
--pub-maxw: 1240px;
--pub-gutter: 56px;
background: var(--pub-paper);
color: var(--pub-ink);
font-family: var(--pub-sans);
-webkit-font-smoothing: antialiased;
}
/* Reset / inheritance */
.pub-home, .pub-home *, .pub-home *::before, .pub-home *::after { box-sizing: border-box; }
.pub-home img { max-width: 100%; display: block; }
.pub-home button { font: inherit; cursor: pointer; }
.pub-home a { color: inherit; text-decoration: none; }
.pub-home ::selection { background: var(--pub-magenta); color: #fff; }
/* Section wrapper */
.pub-home > section { max-width: var(--pub-maxw); margin: 0 auto; padding-left: var(--pub-gutter); padding-right: var(--pub-gutter); }
.pub-home > .pub-home-editorial,
.pub-home > .pub-home-cta-band { max-width: none; padding-left: 0; padding-right: 0; }
/* Eyebrow */
.pub-home .pub-eyebrow {
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--pub-muted); margin-bottom: 10px;
}
.pub-home .pub-eyebrow--dark { color: rgba(255,255,255,.65); }
/* ─── Buttons ──────────────────────────────────────────────── */
.pub-home .pub-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px;
font-family: var(--pub-sans); font-size: 15px; font-weight: 600;
border-radius: 999px; border: 1.5px solid transparent;
line-height: 1; letter-spacing: 0.2px;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.pub-home .pub-btn--blue { background: var(--pub-blue); color: #fff; border-color: var(--pub-blue); box-shadow: 0 6px 16px -8px rgba(74,115,227,.55); }
.pub-home .pub-btn--blue:hover { background: var(--pub-blue-deep); border-color: var(--pub-blue-deep); }
.pub-home .pub-btn--ghost { background: transparent; color: var(--pub-ink); border-color: var(--pub-ink); }
.pub-home .pub-btn--ghost:hover { background: var(--pub-ink); color: #fff; }
.pub-home .pub-btn--sm { padding: 10px 16px; font-size: 13.5px; border-color: var(--pub-rule-strong); }
/* ─── Hero ─────────────────────────────────────────────────── */
.pub-home-hero {
padding-top: 24px; padding-bottom: 32px;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
align-items: center;
}
.pub-home-hero__dateline {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--pub-muted);
padding-bottom: 10px; margin-bottom: 18px;
border-bottom: 1px solid var(--pub-rule);
}
.pub-home-hero__issue { color: var(--pub-magenta); font-weight: 700; }
.pub-home-hero__kicker {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--pub-magenta);
margin-bottom: 14px; font-weight: 700;
}
.pub-home-hero__kicker-bar { width: 28px; height: 1px; background: var(--pub-magenta); }
.pub-home-hero__title {
font-family: var(--pub-display);
font-size: clamp(44px, 5.4vw, 76px);
line-height: 0.96; letter-spacing: -2px;
margin: 0 0 18px; font-weight: 500;
color: var(--pub-ink); text-wrap: balance;
}
.pub-home-hero__title em { font-style: italic; color: var(--pub-magenta); font-weight: 500; }
.pub-home-hero__lead {
font-family: var(--pub-sans); font-size: 17px; line-height: 1.5;
color: var(--pub-body); max-width: 540px; margin: 0 0 22px;
}
.pub-home-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pub-home-hero__stats {
margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
padding-top: 18px; border-top: 1px solid var(--pub-rule);
}
.pub-home-hero__stat { padding: 0; margin: 0; }
.pub-home-hero__stat + .pub-home-hero__stat { border-left: 1px solid var(--pub-rule); padding-left: 20px; }
.pub-home-hero__stat-k {
font-family: var(--pub-display); font-size: 32px; font-weight: 500;
letter-spacing: -1.4px; line-height: 1; color: var(--pub-ink); margin: 0;
}
.pub-home-hero__stat-l {
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--pub-muted); margin: 8px 0 0;
}
/* Hero composition */
.pub-home-hero__compo { position: relative; height: 420px; }
.pub-home-hero__compo > * { position: absolute; }
.pub-compo-back-magenta { right: 36px; top: 18px; width: 260px; height: 340px; background: var(--pub-magenta); transform: rotate(-6deg); box-shadow: 0 18px 40px -22px rgba(0,0,0,.25); }
.pub-compo-back-gold { right: -8px; bottom: 90px; width: 140px; height: 140px; background: var(--pub-gold); }
.pub-compo-back-mint { left: 28px; top: 24px; width: 96px; height: 48px; background: var(--pub-mint); border-radius: 96px 96px 0 0; transform: rotate(8deg); }
.pub-compo-sheet {
left: 60px; top: 40px; width: 300px; height: 340px;
background: var(--pub-surface);
border: 1px solid var(--pub-rule-strong);
box-shadow: 0 24px 60px -24px rgba(0,0,0,.28);
padding: 22px 26px;
display: flex; flex-direction: column;
}
.pub-compo-sheet__header { position: absolute; left: 0; top: 0; width: 100%; height: 14px; background: var(--pub-navy); }
.pub-compo-sheet__masthead {
display: flex; justify-content: space-between;
font-family: var(--pub-mono); font-size: 10px; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--pub-muted);
margin-top: 8px; margin-bottom: 4px;
}
.pub-compo-sheet__rule { height: 1px; background: var(--pub-rule); margin-bottom: 18px; }
.pub-compo-sheet__title {
font-family: var(--pub-display); font-style: italic;
font-size: 36px; font-weight: 500; line-height: 0.96; letter-spacing: -1.2px;
color: var(--pub-ink); margin-bottom: 12px;
}
.pub-compo-sheet__lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.pub-compo-sheet__lines i { display: block; height: 5px; background: var(--pub-rule); border-radius: 1px; }
.pub-compo-sheet__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.pub-compo-sheet__info {
font-family: var(--pub-mono); font-size: 9.5px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--pub-muted); line-height: 1.5;
}
.pub-compo-sheet__brand { font-family: var(--pub-display); font-size: 28px; font-weight: 600; letter-spacing: -1px; color: var(--pub-ink); }
.pub-compo-sheet__curl {
position: absolute; right: -1px; bottom: -1px; width: 38px; height: 38px;
background: var(--pub-paper-deep);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
box-shadow: inset 4px -4px 8px rgba(0,0,0,.08);
}
.pub-compo-tab {
left: 30px; bottom: 50px;
padding: 8px 14px; background: var(--pub-blue); color: #fff;
font-family: var(--pub-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
box-shadow: 0 6px 18px -8px rgba(74,115,227,.6);
}
.pub-compo-stamp {
right: 24px; bottom: 24px;
width: 128px; height: 128px; border-radius: 50%;
border: 2px solid var(--pub-navy);
background: rgba(37,39,73,.04);
transform: rotate(-10deg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-family: var(--pub-mono); font-size: 9.5px; letter-spacing: 2px;
color: var(--pub-navy); text-transform: uppercase;
}
.pub-compo-stamp em {
font-family: var(--pub-display); font-size: 22px; font-style: italic;
letter-spacing: -0.6px; margin: 4px 0; color: var(--pub-ink); line-height: 1;
}
/* ─── Bento ────────────────────────────────────────────────── */
.pub-home-bento { padding-top: 40px; padding-bottom: 80px; }
.pub-home-bento__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--pub-rule);
flex-wrap: wrap; margin-bottom: 28px;
}
.pub-home-bento__title {
font-family: var(--pub-display); font-size: clamp(34px, 4vw, 52px);
margin: 0; font-weight: 500; letter-spacing: -1.2px; line-height: 1;
color: var(--pub-ink); text-wrap: balance;
}
.pub-home-bento__title em { font-style: italic; color: var(--pub-magenta); font-weight: 500; }
.pub-home-bento__intro {
font-family: var(--pub-sans); font-size: 14px; color: var(--pub-body);
max-width: 360px; line-height: 1.55; margin: 0;
}
/* Every tile is pinned to a named area — no auto-placement anywhere, so
the mosaic below is literally the layout you see on screen.
Rows use minmax() rather than a fixed height: French copy runs long
and a row must be allowed to grow rather than spill out of its tile. */
.pub-bento-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(5, minmax(180px, auto));
gap: 16px;
grid-template-areas:
"feat feat feat feat feat feat feat shum shum shum shum shum"
"feat feat feat feat feat feat feat sci sci sci sci sci"
"mem mem mem mem the the the med med med med med"
"pris pris pris pris pris pris pris hour hour hour hour hour"
"pris pris pris pris pris pris pris cont cont cont cont cont";
}
/* ── Bento · Featured "Le + demandé" ─────────────────────── */
.pub-bento-featured {
grid-area: feat;
position: relative; overflow: hidden;
background: var(--pub-ink); color: #fff;
border-radius: 6px;
padding: 28px 32px;
display: flex; flex-direction: column; gap: 18px;
transition: transform .2s ease, box-shadow .2s ease;
}
.pub-bento-featured:hover { transform: translateY(-2px); box-shadow: 0 24px 56px -24px rgba(0,0,0,.35); }
.pub-bento-featured__head { display: flex; flex-direction: column; gap: 10px; }
.pub-bento-featured__eyebrow { font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pub-gold); font-weight: 700; }
.pub-bento-featured__title { font-family: var(--pub-display); font-size: 40px; font-weight: 500; letter-spacing: -1.2px; line-height: 1; margin: 0; max-width: 540px; text-wrap: balance; }
.pub-bento-featured__title em { font-style: italic; color: var(--pub-gold); font-weight: 500; }
/* List of 3 quick-link services — one even row, equal columns */
.pub-bento-featured__list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
flex: 1;
}
.pub-bento-featured__list > li { display: flex; }
.pub-bento-featured__item {
position: relative;
display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
align-content: start;
width: 100%; padding: 12px 14px 13px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 6px;
color: #fff; text-decoration: none;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.pub-bento-featured__item:hover {
background: rgba(232,176,66,.12);
border-color: var(--pub-gold);
transform: translateY(-1px);
}
.pub-bento-featured__item-eyebrow {
grid-column: 1 / 2;
font-family: var(--pub-mono); font-size: 9.5px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--pub-gold); font-weight: 700;
}
.pub-bento-featured__item-title {
grid-column: 1 / 2;
font-family: var(--pub-display); font-size: 19px; font-weight: 500;
letter-spacing: -0.3px; line-height: 1.05; color: #fff;
}
.pub-bento-featured__item-desc {
grid-column: 1 / -1;
font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.7);
margin-top: 3px;
}
.pub-bento-featured__item-arrow {
grid-column: 2 / 3; grid-row: 1 / 3;
align-self: start;
font-family: var(--pub-sans); font-size: 16px; color: var(--pub-gold);
transition: transform .15s ease;
}
.pub-bento-featured__item:hover .pub-bento-featured__item-arrow { transform: translateX(3px); }
/* ── Bento · Boutique en ligne (3 stacked external links) ── */
.pub-bento-boutique--sciences-humaines { grid-area: shum; }
.pub-bento-boutique--sciences { grid-area: sci; }
.pub-bento-boutique--medicale { grid-area: med; }
.pub-bento-boutique {
position: relative; overflow: hidden;
border-radius: 6px;
padding: 18px 22px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr auto;
gap: 6px 16px;
color: #fff; text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.pub-bento-boutique--magenta { background: var(--pub-magenta); }
.pub-bento-boutique--navy { background: var(--pub-navy); }
.pub-bento-boutique--gold { background: var(--pub-gold); color: var(--pub-ink); }
.pub-bento-boutique--blue { background: var(--pub-blue); }
.pub-bento-boutique:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px currentColor; }
.pub-bento-boutique__eyebrow {
grid-column: 1 / -1;
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px;
text-transform: uppercase; font-weight: 700; opacity: .88;
}
.pub-bento-boutique__body { grid-column: 1 / -1; align-self: center; }
.pub-bento-boutique__title {
font-family: var(--pub-display); font-size: 26px; font-weight: 500;
letter-spacing: -0.6px; line-height: 1; margin: 0 0 4px;
}
.pub-bento-boutique__desc {
font-size: 13px; line-height: 1.4; margin: 0; opacity: .85; max-width: 340px;
}
.pub-bento-boutique__cta {
grid-column: 1 / -1; align-self: end; justify-self: start;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.2px;
text-transform: uppercase; font-weight: 700;
padding: 6px 14px; border: 1.5px solid currentColor; border-radius: 999px;
transition: background-color .15s ease;
}
.pub-bento-boutique:hover .pub-bento-boutique__cta { background: rgba(255,255,255,.16); }
.pub-bento-boutique--gold:hover .pub-bento-boutique__cta { background: rgba(0,0,0,.08); }
.pub-bento-boutique__cta-arrow {
display: inline-block; transition: transform .15s ease;
}
.pub-bento-boutique:hover .pub-bento-boutique__cta-arrow { transform: translate(2px, -2px); }
/* Decorative discs — same translucent motif as .pub-bento-lib__disc */
.pub-bento-boutique::before,
.pub-bento-boutique::after {
content: ""; position: absolute; border-radius: 50%;
background: rgba(255,255,255,.10); pointer-events: none; z-index: 0;
transition: transform .25s ease;
}
.pub-bento-boutique::before { right: -46px; top: -46px; width: 130px; height: 130px; }
.pub-bento-boutique::after { right: 36px; bottom: -64px; width: 84px; height: 84px; background: rgba(255,255,255,.07); }
.pub-bento-boutique:hover::before { transform: scale(1.12); }
.pub-bento-boutique:hover::after { transform: scale(1.18); }
/* Gold tile has dark ink text → use a dark translucent disc for contrast */
.pub-bento-boutique--gold::before,
.pub-bento-boutique--gold::after { background: rgba(0,0,0,.06); }
/* Keep text/CTA above the discs */
.pub-bento-boutique__eyebrow,
.pub-bento-boutique__body,
.pub-bento-boutique__cta { position: relative; z-index: 1; }
/* ── Bento · Category tiles ──────────────────────────────── */
.pub-bento-cat {
grid-column: span 5; grid-row: span 1;
position: relative; overflow: hidden;
color: #fff;
border-radius: 6px;
padding: 20px 22px;
display: flex; flex-direction: column; justify-content: space-between;
transition: transform .2s ease, box-shadow .2s ease;
}
.pub-bento-cat--design { grid-column: span 4; }
.pub-bento-cat--navy { background: var(--pub-navy); }
.pub-bento-cat--magenta { background: var(--pub-magenta); }
.pub-bento-cat--gold { background: var(--pub-gold); color: #fff; }
.pub-bento-cat--blue { background: var(--pub-blue); }
.pub-bento-cat:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px currentColor; }
.pub-bento-cat__eyebrow {
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px;
text-transform: uppercase; opacity: .82; font-weight: 600;
position: relative;
}
.pub-bento-cat__glyph {
position: absolute; right: -10px; bottom: -16px;
width: 110px; height: 110px; opacity: .85;
fill: #fff; color: #fff;
}
.pub-bento-cat__foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pub-bento-cat__title { font-family: var(--pub-display); font-size: 32px; font-weight: 500; letter-spacing: -0.8px; line-height: 1; margin: 0 0 6px; }
.pub-bento-cat__tagline { font-size: 13px; opacity: .82; line-height: 1.4; }
.pub-bento-cat__count {
position: absolute; top: 20px; right: 22px; z-index: 2;
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.2px;
text-transform: uppercase; opacity: .82; white-space: nowrap;
}
/* ── Bento · Librairie (grande) ──────────────────────────── */
.pub-bento-lib {
grid-column: span 8; grid-row: span 2;
position: relative; overflow: hidden;
background: var(--pub-blue); color: #fff;
border-radius: 6px;
padding: 32px 36px;
display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px;
box-shadow: 0 18px 40px -20px rgba(74,115,227,.5);
transition: transform .2s ease, box-shadow .2s ease;
}
.pub-bento-lib:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -20px rgba(74,115,227,.65); }
.pub-bento-lib__disc { position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
/* Top-right secondary CTA */
.pub-bento-lib__catalogue {
position: absolute; right: 28px; top: 28px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; background: #fff; color: var(--pub-blue);
border-radius: 999px; font-weight: 700; font-size: 13px;
box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
transition: transform .15s ease;
}
.pub-bento-lib__catalogue:hover { transform: translateY(-1px); }
.pub-bento-lib__copy { display: flex; flex-direction: column; justify-content: space-between; position: relative; color: #fff; }
.pub-bento-lib__eyebrow {
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase; font-weight: 700; color: var(--pub-gold);
margin-bottom: 16px;
}
.pub-bento-lib__title {
font-family: var(--pub-display); font-size: clamp(40px, 4.4vw, 60px);
font-weight: 500; letter-spacing: -1.6px; line-height: 0.96;
margin: 0 0 14px; text-wrap: balance;
}
.pub-bento-lib__title em { font-style: italic; color: var(--pub-gold); font-weight: 500; }
.pub-bento-lib__lead {
font-family: var(--pub-sans); font-size: 15px; line-height: 1.55;
color: rgba(255,255,255,.85); margin: 0 0 22px; max-width: 320px;
}
.pub-bento-lib__stats {
margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, auto);
gap: 22px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.22);
}
.pub-bento-lib__stats div { padding: 0; }
.pub-bento-lib__stats dt {
font-family: var(--pub-display); font-size: 26px; font-weight: 500;
letter-spacing: -0.6px; line-height: 1; margin: 0;
}
.pub-bento-lib__stats dd {
font-family: var(--pub-mono); font-size: 10px; letter-spacing: 1.2px;
text-transform: uppercase; opacity: .75; margin: 6px 0 0;
}
.pub-bento-lib__cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px; background: #fff; color: var(--pub-blue);
border-radius: 999px; font-weight: 700; font-size: 14px;
box-shadow: 0 8px 22px -10px rgba(0,0,0,.35);
align-self: flex-start;
}
/* Librairie shop window */
.pub-bento-lib__shelf {
position: relative;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
align-content: center;
}
.pub-product {
aspect-ratio: 0.72 / 1;
border-radius: 4px; overflow: hidden;
position: relative;
box-shadow: 0 6px 14px -8px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.12);
display: flex; flex-direction: column;
color: #fff;
}
.pub-product--navy { background: var(--pub-navy); color: #fff; }
.pub-product--magenta { background: var(--pub-magenta); color: #fff; }
.pub-product--gold { background: var(--pub-gold); color: var(--pub-ink); }
.pub-product--blue { background: var(--pub-blue); color: #fff; }
.pub-product--mint { background: var(--pub-mint); color: var(--pub-ink); }
.pub-product--paper { background: var(--pub-surface); color: var(--pub-ink); }
.pub-product--ink { background: var(--pub-ink); color: var(--pub-gold); }
/* Book variant */
.pub-product--book .pub-product__band { height: 4px; opacity: .85; background: var(--pub-gold); }
.pub-product--book.pub-product--paper .pub-product__band,
.pub-product--book.pub-product--ink .pub-product__band { background: var(--pub-magenta); }
.pub-product--book .pub-product__tag { font-family: var(--pub-mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .7; padding: 6px 8px 0; }
.pub-product--book .pub-product__title {
flex: 1; display: flex; align-items: flex-end; padding: 0 8px 10px;
font-family: var(--pub-display); font-size: 16px; font-weight: 500;
letter-spacing: -0.3px; line-height: 1;
}
.pub-product--book .pub-product__title.is-italic { font-style: italic; }
.pub-product--book .pub-product__brand { font-family: var(--pub-mono); font-size: 7.5px; letter-spacing: 1.4px; opacity: .6; padding: 0 8px 6px; }
/* Goodie variant */
.pub-product--goodie .pub-product__icon {
flex: 1; display: flex; align-items: center; justify-content: center;
color: var(--pub-ink);
}
.pub-product--goodie.pub-product--navy .pub-product__icon,
.pub-product--goodie.pub-product--magenta .pub-product__icon,
.pub-product--goodie.pub-product--blue .pub-product__icon,
.pub-product--goodie.pub-product--ink .pub-product__icon { color: #fff; }
.pub-product__label {
background: rgba(255,255,255,.55); color: var(--pub-ink);
padding: 5px 8px;
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--pub-mono); font-size: 9px; letter-spacing: 0.6px;
}
.pub-product__label > span:first-child { text-transform: uppercase; font-weight: 700; }
.pub-product__price { font-family: var(--pub-display); font-size: 13px; font-weight: 600; letter-spacing: 0; }
/* ── Bento · Académique link tiles (Mémoire / Thèse) ─────── */
/* Paper tiles sitting between the dark featured tile and the coloured
boutiques — they carry the accent on a top rule instead of a fill so
the middle row reads as a quiet pair rather than two more shop tiles. */
.pub-bento-link {
position: relative; overflow: hidden;
/* Base fallback for browsers without color-mix() support; the memoire/
these variants below override this with a faint accent tint so the
pair doesn't read as two blank cards next to the coloured boutiques. */
background: #fff; color: var(--pub-ink);
border: 1px solid var(--pub-rule); border-top-width: 3px;
border-radius: 6px;
padding: 18px 22px;
display: flex; flex-direction: column; gap: 8px;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pub-bento-link--memoire {
grid-area: mem; border-top-color: var(--pub-navy);
background: color-mix(in srgb, var(--pub-navy) 10%, var(--pub-paper));
}
.pub-bento-link--these {
grid-area: the; border-top-color: var(--pub-gold);
background: color-mix(in srgb, var(--pub-gold) 16%, var(--pub-paper));
}
.pub-bento-link:hover {
transform: translateY(-2px);
border-color: var(--pub-ink);
box-shadow: 0 18px 36px -22px rgba(0,0,0,.45);
}
.pub-bento-link--memoire:hover { border-top-color: var(--pub-navy); }
.pub-bento-link--these:hover { border-top-color: var(--pub-gold); }
.pub-bento-link__head {
display: flex; align-items: baseline; gap: 8px;
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px;
text-transform: uppercase; font-weight: 700; color: var(--pub-muted);
}
.pub-bento-link__index { color: var(--pub-rule); }
.pub-bento-link__eyebrow { color: var(--pub-muted); }
.pub-bento-link__delay {
margin-left: auto; padding: 2px 8px; border-radius: 999px;
background: var(--pub-paper-deep); border: 1px solid var(--pub-rule);
letter-spacing: .8px; color: var(--pub-ink);
}
.pub-bento-link__title {
font-family: var(--pub-display); font-size: 30px; font-weight: 500;
letter-spacing: -0.8px; line-height: 1; margin: 0;
}
.pub-bento-link__desc {
font-size: 13px; line-height: 1.45; color: var(--pub-body);
margin: 0; flex: 1;
}
.pub-bento-link__cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.2px;
text-transform: uppercase; font-weight: 700; color: var(--pub-ink);
padding: 6px 14px; border: 1.5px solid var(--pub-rule-strong); border-radius: 999px;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pub-bento-link:hover .pub-bento-link__cta {
border-color: var(--pub-ink); background: var(--pub-ink); color: #fff;
}
.pub-bento-link__cta-arrow { display: inline-block; transition: transform .15s ease; }
.pub-bento-link:hover .pub-bento-link__cta-arrow { transform: translateX(3px); }
/* ── Bento · Infos pratiques / contact ───────────────────── */
.pub-bento-contact {
grid-area: cont;
position: relative; overflow: hidden;
background: var(--pub-paper-deep); color: var(--pub-ink);
border: 1px solid var(--pub-rule); border-radius: 6px;
padding: 18px 22px;
display: flex; flex-direction: column; gap: 10px;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pub-bento-contact:hover {
transform: translateY(-2px);
border-color: var(--pub-magenta);
box-shadow: 0 18px 36px -22px rgba(168,25,92,.45);
}
.pub-bento-contact__eyebrow {
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px;
text-transform: uppercase; font-weight: 700; color: var(--pub-magenta);
}
.pub-bento-contact__text {
font-size: 13px; line-height: 1.45; color: var(--pub-body);
margin: 0; flex: 1;
}
.pub-bento-contact__cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.2px;
text-transform: uppercase; font-weight: 700; color: var(--pub-ink);
padding: 6px 14px; border: 1.5px solid var(--pub-rule-strong); border-radius: 999px;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pub-bento-contact:hover .pub-bento-contact__cta {
border-color: var(--pub-magenta); background: var(--pub-magenta); color: #fff;
}
.pub-bento-contact__cta-arrow { display: inline-block; transition: transform .15s ease; }
.pub-bento-contact:hover .pub-bento-contact__cta-arrow { transform: translateX(3px); }
/* ── Bento · Hours ───────────────────────────────────────── */
.pub-bento-hours {
grid-area: hour;
background: var(--pub-paper-deep); color: var(--pub-ink);
border-radius: 6px; padding: 18px 22px;
display: flex; flex-direction: column; justify-content: space-between;
border: 1px solid var(--pub-rule); position: relative;
}
.pub-bento-hours__head {
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--pub-muted); font-weight: 600;
display: flex; align-items: center; justify-content: space-between;
}
.pub-bento-hours__live { display: inline-flex; align-items: center; gap: 6px; color: var(--pub-ink); }
.pub-bento-hours__live i { width: 8px; height: 8px; border-radius: 50%; background: #2ea84a; display: inline-block; }
.pub-bento-hours__rows { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pub-bento-hours__row {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 6px; border-top: 1px dashed var(--pub-rule);
font-size: 13.5px;
}
.pub-bento-hours__row dt { color: var(--pub-body); margin: 0; }
.pub-bento-hours__row dd { font-family: var(--pub-mono); color: var(--pub-ink); font-weight: 600; margin: 0; }
/* ── Bento · Editorial wide ──────────────────────────────── */
.pub-bento-editorial {
grid-column: span 7; grid-row: span 1;
position: relative; overflow: hidden;
background: var(--pub-paper); color: var(--pub-ink);
border: 1px solid var(--pub-rule);
border-radius: 6px;
padding: 22px 26px;
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
transition: border-color .2s ease;
}
.pub-bento-editorial:hover { border-color: var(--pub-ink); }
.pub-bento-editorial__title {
font-family: var(--pub-display); font-size: 26px; font-weight: 400;
letter-spacing: -0.6px; line-height: 1.1; margin: 0;
}
.pub-bento-editorial__title em { font-style: italic; color: var(--pub-magenta); font-weight: 500; }
.pub-bento-editorial__cta {
display: flex; align-items: center; gap: 10px;
font-family: var(--pub-sans); font-size: 13px; font-weight: 600;
white-space: nowrap; color: var(--pub-ink);
padding-left: 16px; border-left: 1px solid var(--pub-rule);
}
/* ── Bento · Prismadirect / Webshop (big tile, mirrors Featured) ─ */
.pub-bento-prisma {
grid-area: pris;
position: relative; overflow: hidden;
background: var(--pub-blue); color: #fff;
border-radius: 6px;
padding: 28px 32px;
display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
box-shadow: 0 12px 28px -14px rgba(74,115,227,.55);
transition: transform .2s ease, box-shadow .2s ease;
}
.pub-bento-prisma:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(74,115,227,.7); }
.pub-bento-prisma__disc { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.pub-bento-prisma__head {
position: relative;
font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px;
text-transform: uppercase; opacity: .85; font-weight: 700;
}
.pub-bento-prisma__body { position: relative; align-self: flex-start; max-width: 560px; }
.pub-bento-prisma__title { font-family: var(--pub-display); font-size: 40px; font-weight: 500; letter-spacing: -1.2px; line-height: 1; margin: 0 0 12px; text-wrap: balance; }
.pub-bento-prisma__title em { font-style: italic; color: var(--pub-gold); font-weight: 500; }
.pub-bento-prisma__tagline { font-size: 14.5px; opacity: .88; line-height: 1.5; margin: 0; max-width: 480px; }
.pub-bento-prisma__foot { position: relative; display: flex; justify-content: flex-start; }
.pub-bento-prisma__cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px; background: #fff; color: var(--pub-blue);
border-radius: 999px; font-weight: 700; font-size: 14px;
box-shadow: 0 8px 20px -10px rgba(0,0,0,.3);
transition: transform .15s ease;
}
.pub-bento-prisma__cta:hover { transform: translateY(-1px); }
/* ─── Editorial section ──────────────────────────────────── */
.pub-home-editorial {
background: var(--pub-navy); color: #fff;
padding: 88px 0; position: relative; overflow: hidden;
}
.pub-home-editorial__disc { position: absolute; border-radius: 50%; pointer-events: none; }
.pub-home-editorial__disc--magenta { right: -120px; top: -120px; width: 360px; height: 360px; background: var(--pub-magenta); opacity: .18; }
.pub-home-editorial__disc--gold { left: -60px; bottom: -80px; width: 240px; height: 240px; background: var(--pub-gold); opacity: .12; }
.pub-home-editorial__inner {
max-width: var(--pub-maxw); margin: 0 auto; padding: 0 var(--pub-gutter);
display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
position: relative; align-items: start;
}
.pub-home-editorial__title {
font-family: var(--pub-display); font-size: clamp(38px, 4.6vw, 64px);
margin: 0 0 28px; font-weight: 500; letter-spacing: -1.6px; line-height: 1.02;
text-wrap: balance;
}
.pub-home-editorial__title em { font-style: italic; color: var(--pub-gold); font-weight: 500; }
.pub-home-editorial__byline {
display: flex; align-items: center; gap: 14px;
font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.4px;
text-transform: uppercase; color: rgba(255,255,255,.7);
}
.pub-home-editorial__byline-bar { width: 28px; height: 1px; background: rgba(255,255,255,.4); }
.pub-home-editorial__body p {
font-family: var(--pub-sans); font-size: 16.5px; line-height: 1.7;
margin: 0 0 22px; color: rgba(255,255,255,.92);
}
.pub-home-editorial__body p strong { font-weight: 600; color: #fff; }
.pub-home-editorial__facts {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
margin: 28px 0 0; padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.18);
}
.pub-home-editorial__fact {
padding: 14px 0; margin: 0;
border-bottom: 1px dashed rgba(255,255,255,.14);
}
.pub-home-editorial__fact.is-right { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.14); }
.pub-home-editorial__fact dt { font-family: var(--pub-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .65; margin-bottom: 4px; }
.pub-home-editorial__fact dd { font-family: var(--pub-sans); font-size: 14px; font-weight: 500; margin: 0; }
/* ─── CTA band ───────────────────────────────────────────── */
.pub-home-cta-band {
background: var(--pub-navy); color: #fff;
padding: 88px var(--pub-gutter);
position: relative; overflow: hidden;
}
.pub-home-cta-band::before, .pub-home-cta-band::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.pub-home-cta-band::before { left: -80px; top: -60px; width: 280px; height: 280px; background: var(--pub-magenta); opacity: .4; }
.pub-home-cta-band::after { right: -40px; bottom: -100px; width: 320px; height: 320px; background: var(--pub-gold); opacity: .25; }
.pub-home-cta-band__inner { max-width: 960px; margin: 0 auto; position: relative; text-align: center; }
.pub-home-cta-band__title { font-family: var(--pub-display); font-size: clamp(36px, 4vw, 56px); margin: 0 0 16px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.pub-home-cta-band__lead { font-size: 16px; line-height: 1.55; max-width: 620px; margin: 0 auto 48px; opacity: .85; }
.pub-home-cta-band__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; text-align: left; }
.pub-cta-card { display: block; padding: 32px 30px; border-radius: 8px; position: relative; overflow: hidden; color: #fff; }
.pub-cta-card--primary { background: var(--pub-blue); border: 1.5px solid rgba(255,255,255,.25); box-shadow: 0 14px 40px -12px rgba(74,115,227,.5); }
.pub-cta-card--primary::before { content: ""; position: absolute; right: -20px; top: -20px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); }
.pub-cta-card--ghost { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.25); }
.pub-cta-card__eyebrow { font-family: var(--pub-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .8; margin-bottom: 12px; position: relative; }
.pub-cta-card__title { font-family: var(--pub-display); font-size: 28px; font-weight: 500; letter-spacing: -0.6px; line-height: 1.1; margin: 0 0 10px; position: relative; }
.pub-cta-card__lead { font-size: 14px; line-height: 1.5; opacity: .9; margin: 0 0 22px; position: relative; }
.pub-cta-card__arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; position: relative; }
/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
.pub-home { --pub-gutter: 32px; }
/* Same tiles, re-laid on 6 columns — the two full-width tiles keep the
rhythm and every other tile pairs off half-and-half. */
.pub-bento-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: repeat(7, minmax(160px, auto));
grid-template-areas:
"feat feat feat feat feat feat"
"mem mem mem the the the"
"shum shum shum sci sci sci"
"med med med hour hour hour"
"pris pris pris pris pris pris"
"pris pris pris pris pris pris"
"cont cont cont cont cont cont";
}
.pub-bento-featured { padding: 24px 26px; }
.pub-bento-prisma { padding: 24px 26px; }
}
@media (max-width: 820px) {
.pub-home-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 16px; padding-bottom: 28px; }
.pub-home-hero__compo { height: 320px; }
.pub-home-editorial__inner { grid-template-columns: 1fr; gap: 40px; }
.pub-home-cta-band__cards { grid-template-columns: 1fr; }
/* Three quick links side by side get too narrow for the French titles. */
.pub-bento-featured__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
/* Single column — drop the named areas entirely and let the tiles
stack in DOM order, which already matches the desktop reading order. */
.pub-bento-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: none;
}
.pub-bento-featured, .pub-bento-boutique, .pub-bento-link,
.pub-bento-contact, .pub-bento-hours, .pub-bento-prisma {
grid-area: auto; grid-column: 1 / -1; grid-row: auto; min-height: 180px;
}
.pub-bento-featured { gap: 18px; padding: 26px 24px; }
.pub-bento-featured__list { grid-template-columns: 1fr; }
.pub-home-editorial__facts { grid-template-columns: 1fr; }
.pub-home-editorial__fact.is-right { padding-left: 0; border-left: none; }
}
/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.pub-home *, .pub-home *::before, .pub-home *::after {
transition: none !important; animation: none !important;
}
}
/* ─────────────────────────────────────────────────────────────
* understrap-child integration overrides
*
* NOT part of the original standalone drop. The understrap-child
* global stylesheet (css/child-theme.css) ships aggressive
* typography that breaks the homepage when these styles coexist:
*
* 1. `.pub-home a { color: inherit }` (0,1,1) outranks the
* single-class tile color rules (0,1,0), so every tile that
* is an inherits the dark --pub-ink instead of #fff →
* black text on the dark Featured / category / Prismadirect /
* CTA tiles.
* 2. Global `h1/h2/h3/p { font-size: …!important }` and
* `h1,h2 { color:#040303 }` override the design's heading
* sizes and force black headings onto dark sections.
*
* Everything below is scoped to .pub-home and uses class
* specificity (0,2,0) — which beats `.pub-home a` (0,1,1) — plus
* !important on font-size only where it must defeat the global
* !important. No other page is affected.
* ───────────────────────────────────────────────────────────── */
/* — Restore white text on the dark/colored interactive tiles — */
.pub-home .pub-bento-featured,
.pub-home .pub-bento-featured__item,
.pub-home .pub-bento-boutique,
.pub-home .pub-bento-boutique--magenta,
.pub-home .pub-bento-boutique--navy,
.pub-home .pub-bento-boutique--blue,
.pub-home .pub-bento-prisma,
.pub-home .pub-cta-card { color: #fff; }
/* Gold boutique tile uses dark ink text */
.pub-home .pub-bento-boutique--gold { color: var(--pub-ink); }
/* The paper tiles are too — `.pub-home a { color: inherit }` would
otherwise decide their colour for them. Pin it. */
.pub-home .pub-bento-link,
.pub-home .pub-bento-contact { color: var(--pub-ink); }
.pub-home .pub-bento-link__desc,
.pub-home .pub-bento-contact__text { color: var(--pub-body); }
/* Prismadirect CTA pill: white pill, blue label */
.pub-home .pub-bento-prisma__cta { color: var(--pub-blue); }
/* Dark-section headings the global stylesheet turns black */
.pub-home .pub-home-editorial__title,
.pub-home .pub-home-cta-band__title { color: #fff; }
/* Keep the gold/magenta italic accents inside white titles */
.pub-home .pub-bento-featured__title em,
.pub-home .pub-bento-prisma__title em { color: var(--pub-gold); }
.pub-home .pub-home-editorial__title em { color: var(--pub-gold); }
.pub-home .pub-home-bento__title em { color: var(--pub-magenta); }
/* — Re-assert the design's type scale (defeats global !important) — */
.pub-home .pub-home-hero__title { font-size: clamp(44px, 5.4vw, 76px) !important; }
.pub-home .pub-home-hero__lead { font-size: 17px !important; line-height: 1.5 !important; }
.pub-home .pub-home-bento__title { font-size: clamp(34px, 4vw, 52px) !important; }
.pub-home .pub-home-bento__intro { font-size: 14px !important; line-height: 1.55 !important; }
.pub-home .pub-bento-featured__title { font-size: 40px !important; line-height: 1 !important; }
.pub-home .pub-bento-featured__item-title { font-size: 19px !important; line-height: 1.05 !important; }
.pub-home .pub-bento-featured__item-desc { font-size: 12px !important; line-height: 1.4 !important; }
.pub-home .pub-bento-boutique__title { font-size: 26px !important; line-height: 1 !important; }
.pub-home .pub-bento-boutique__desc { font-size: 13px !important; line-height: 1.4 !important; }
.pub-home .pub-bento-link__title { font-size: 30px !important; line-height: 1 !important; }
.pub-home .pub-bento-link__desc { font-size: 13px !important; line-height: 1.45 !important; }
.pub-home .pub-bento-contact__text { font-size: 13px !important; line-height: 1.45 !important; }
.pub-home .pub-bento-prisma__title { font-size: 40px !important; line-height: 1 !important; }
.pub-home .pub-bento-prisma__tagline { font-size: 14.5px !important; line-height: 1.5 !important; }
.pub-home .pub-home-editorial__title { font-size: clamp(38px, 4.6vw, 64px) !important; }
.pub-home .pub-home-editorial__body p { font-size: 16.5px !important; line-height: 1.7 !important; }
.pub-home .pub-home-cta-band__title { font-size: clamp(36px, 4vw, 56px) !important; }
.pub-home .pub-home-cta-band__lead { font-size: 16px !important; line-height: 1.55 !important; }
.pub-home .pub-cta-card__title { font-size: 28px !important; }
.pub-home .pub-cta-card__lead { font-size: 14px !important; line-height: 1.5 !important; }
.pub-home .pub-home-nouveautes__title { font-size: clamp(30px, 3.6vw, 44px) !important; }
.pub-home .pub-nouv-card__title { font-size: 16.5px !important; line-height: 1.25 !important; }
/* ── Nouveautés — webshop preview carousel ───────────────────────────────────
* Five larger cards visible at a time out of ~10. The track is a native
* scroll-snap strip (swipe / scroll degrade gracefully); assets/home.js adds
* the prev/next arrows, page dots and autoplay on top.
* .pub-home > section already applies max-width + gutter padding.
* ─────────────────────────────────────────────────────────────────────────── */
.pub-home-nouveautes { padding-top: 80px; padding-bottom: 64px; }
/* Widen this section past the 1240px page max so five cards stay roomy and
full book titles remain readable. Caps to the viewport on smaller screens. */
.pub-home > .pub-home-nouveautes { max-width: 1440px; }
.pub-home-nouveautes__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--pub-rule);
flex-wrap: wrap; margin-bottom: 28px;
}
.pub-home-nouveautes__title {
font-family: var(--pub-display); font-size: clamp(30px, 3.6vw, 44px);
margin: 0; font-weight: 500; letter-spacing: -1px; line-height: 1;
color: var(--pub-ink); text-wrap: balance;
}
/* Viewport — positioning context for the overlaid prev/next arrows. */
.pub-home-nouveautes__viewport { position: relative; }
.pub-home-nouveautes__track {
list-style: none; margin: 0; padding: 8px 2px 26px;
display: flex; gap: 20px; align-items: stretch;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* arrows + dots provide navigation */
}
.pub-home-nouveautes__track::-webkit-scrollbar { display: none; }
/* Card width sets how many show per page. flex:0 0 — the cards never shrink, so
the strip always overflows past five and the arrows/dots have work to do. */
.pub-nouv-card { flex: 0 0 72%; } /* ~1.4 on phones */
@media (min-width: 600px) {
.pub-nouv-card { flex-basis: calc((100% - 40px) / 3); } /* 3 across */
}
@media (min-width: 992px) {
.pub-nouv-card { flex-basis: calc((100% - 80px) / 5); } /* 5 across, rest one page over */
}
.pub-nouv-card {
scroll-snap-align: start;
background: var(--pub-surface);
border: 1px solid var(--pub-rule);
border-radius: 12px; overflow: hidden;
box-shadow: 0 1px 2px rgba(15,16,32,.05);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pub-nouv-card:hover { transform: translateY(-6px); border-color: var(--pub-rule-strong); box-shadow: 0 26px 50px -24px rgba(15,16,32,.45); }
.pub-nouv-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--pub-ink); }
.pub-nouv-card__link:focus-visible { outline: 2px solid var(--pub-blue); outline-offset: -2px; border-radius: 12px; }
/* Cover — the book "floats" on a soft paper gradient with a real drop shadow,
and lifts slightly on hover. */
.pub-nouv-card__media {
position: relative;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 3 / 4; padding: 24px 24px 28px;
background: linear-gradient(165deg, var(--pub-paper) 0%, var(--pub-paper-deep) 100%);
border-bottom: 1px solid var(--pub-rule);
}
.pub-nouv-card__media.is-empty::after {
content: 'couverture';
font-family: var(--pub-mono); font-size: 10px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--pub-muted);
}
.pub-nouv-card__img {
max-width: 100%; max-height: 100%; object-fit: contain;
filter: drop-shadow(0 12px 20px rgba(15,16,32,.24));
transition: transform .35s ease;
}
.pub-nouv-card:hover .pub-nouv-card__img { transform: translateY(-3px) scale(1.035); }
/* Body — title in the display serif for an editorial feel; price + availability
sit in a divider-topped meta row pinned to the bottom so they align across cards. */
.pub-nouv-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1 1 auto; }
.pub-nouv-card__title {
margin: 0; font-family: var(--pub-display); font-size: 16.5px; line-height: 1.25;
font-weight: 500; letter-spacing: -0.2px; color: var(--pub-ink);
/* Full title shown — no line clamp. Cards share the tallest card's height. */
}
.pub-nouv-card__meta {
margin-top: auto; padding-top: 12px; border-top: 1px solid var(--pub-rule);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pub-nouv-card__price { font-family: var(--pub-mono); font-size: 14px; font-weight: 600; color: var(--pub-ink); }
.pub-nouv-card__avail {
font-family: var(--pub-mono); font-size: 9px; font-weight: 600; letter-spacing: .8px;
text-transform: uppercase; white-space: nowrap; color: var(--pub-magenta);
background: color-mix(in srgb, var(--pub-magenta) 10%, transparent);
padding: 3px 8px; border-radius: 999px;
}
/* Prev / next arrows — overlaid on the viewport, centred over the covers.
* Rendered hidden by PHP and revealed by home.js only when scrolling is needed. */
.pub-nouv-nav {
position: absolute; top: calc(50% - 28px); transform: translateY(-50%);
z-index: 2; width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--pub-surface); color: var(--pub-ink);
border: 1px solid var(--pub-rule-strong);
box-shadow: 0 8px 22px -10px rgba(15,16,32,.45);
font-size: 26px; line-height: 1;
transition: background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}
.pub-nouv-nav[hidden] { display: none; }
.pub-nouv-nav--prev { left: -10px; }
.pub-nouv-nav--next { right: -10px; }
.pub-nouv-nav:hover { background: var(--pub-magenta); color: #fff; border-color: var(--pub-magenta); }
.pub-nouv-nav:focus-visible { outline: 2px solid var(--pub-blue); outline-offset: 2px; }
.pub-nouv-nav:disabled { opacity: 0; pointer-events: none; }
.pub-nouv-nav span { transform: translateY(-1px); }
/* Page dots — one per "page" of five, injected by home.js. */
.pub-home-nouveautes__dots {
display: flex; justify-content: center; align-items: center;
gap: 9px; margin-top: 22px;
}
.pub-home-nouveautes__dots[hidden] { display: none; }
.pub-nouv-dot {
width: 9px; height: 9px; padding: 0; border-radius: 50%;
background: var(--pub-rule-strong); border: none;
transition: width .2s ease, background .2s ease;
}
.pub-nouv-dot:hover { background: var(--pub-muted); }
.pub-nouv-dot.is-active { width: 26px; border-radius: 5px; background: var(--pub-magenta); }
.pub-nouv-dot:focus-visible { outline: 2px solid var(--pub-blue); outline-offset: 2px; }
@media (max-width: 600px) {
.pub-nouv-nav { width: 40px; height: 40px; font-size: 22px; }
.pub-nouv-nav--prev { left: 2px; }
.pub-nouv-nav--next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.pub-home-nouveautes__track { scroll-snap-type: none; scroll-behavior: auto; }
.pub-nouv-card, .pub-nouv-nav, .pub-nouv-dot { transition: none; }
.pub-nouv-card:hover { transform: none; }
}