/* ---- Polices de marque auto-hébergées (EB Garamond serif + Aileron sans) ---- */ @font-face{font-family:Aileron;src:url(../fonts/Aileron/aileron-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:Aileron;src:url(../fonts/Aileron/aileron-regular-webfont.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Aileron;src:url(../fonts/Aileron/aileron-italic-webfont.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:Aileron;src:url(../fonts/Aileron/aileron-semibold-webfont.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:Aileron;src:url(../fonts/Aileron/aileron-bold-webfont.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"EB Garamond";src:url(../fonts/EBGaramond/EBGaramond-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"EB Garamond";src:url(../fonts/EBGaramond/EBGaramond-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"EB Garamond";src:url(../fonts/EBGaramond/EBGaramond-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"EB Garamond";src:url(../fonts/EBGaramond/EBGaramond-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"EB Garamond";src:url(../fonts/EBGaramond/EBGaramond-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"EB Garamond";src:url(../fonts/EBGaramond/EBGaramond-SemiBoldItalic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap} /* ========================================================================= Éditions Beya — charte alignée sur les emails de lancement. Crème #F5F0EB + bordeaux #8B1A2C + gris chauds. Couvertures généreuses, ombres douces, labels Arial en capitales espacées, titres serif sobres. ========================================================================= */ :root { /* Palette de marque (emails de lancement) */ --brand-red: #8b1a2c; /* bordeaux — accent principal (lien, CTA, labels) */ --brand-red-dark: #6f1422; --brand-red-light: #a83648; /* Or — accent de SOUTIEN (le bordeaux reste maître). Filets, liserés, mentions d'économie. */ --gold: #b0862a; /* or mat — texte / filets */ --gold-soft: #caa64e; /* or clair — dégradés de filet */ --gold-pale: #fbf7ee; /* or très pâle — fonds d'encart subtils */ /* Fonds & surfaces — fond BLANC partout (remarque Rémy), encarts très légers */ --cream: #ffffff; /* fond de page : blanc */ --cream-2: #f7f4f0; /* encarts / blocs mis en avant : blanc cassé très léger */ --cream-3: #ece6de; /* bordures douces / séparateurs */ --surface: #ffffff; /* cartes / contenu */ --line: #ece6de; /* Encres */ --ink: #1a1a1a; --ink-soft: #666666; --muted: #6a655e; /* gris chaud — contraste AA (≥ 4,5:1) sur crème */ --link: var(--brand-red); --paper: var(--cream); /* Typographies */ --font-serif: "EB Garamond", Georgia, "Times New Roman", serif; --font-sans: "Aileron", Arial, Helvetica, sans-serif; --gutter: clamp(1rem, 4vw, 3rem); --radius: 2px; /* coins quasi droits = plus éditorial */ --radius-card: 10px; /* encarts mis en avant (event-card, notices, widgets) */ --radius-pill: 999px; /* pastilles / boutons ronds */ --shadow-cover: 0 12px 40px rgba(0, 0, 0, .22); --shadow-soft: 0 6px 24px rgba(26, 24, 26, .10); --maxw: 1300px; --label: .72rem; } * { box-sizing: border-box; } html { font-size: 18.5px; -webkit-text-size-adjust: 100%; } /* EB Garamond a une petite hauteur d'x */ body { margin: 0; font-family: var(--font-serif); color: var(--ink); background: var(--cream); line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "clig" 1; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* === Garde anti-débordement horizontal (définitif, surtout mobile) === Empêche toute largeur accidentelle (carrousel, éventail de couvertures, tableau, mot long…) de rendre la page scrollable ou coupée à droite. overflow-x: clip n'altère PAS position:sticky (à la différence de hidden). */ html, body { max-width: 100%; overflow-x: clip; } /* ===== Fond décoratif de médaillons (toutes pages) ===== Couche en filigrane DERRIÈRE le contenu (z-index:-1), sur toute la hauteur du document -> défile avec la page. Positions en % -> médaillons très espacés quelle que soit la longueur de la page. Remplace l'ancienne constellation fixe. */ body { position: relative; } .bg-medallions { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-medallions img { position: absolute; height: auto; border-radius: 50%; -webkit-user-select: none; user-select: none; } .bg-medallions img:nth-child(1) { top: 4%; left: 3%; width: 80px; opacity: .20; transform: rotate(-6deg); } .bg-medallions img:nth-child(2) { top: 12%; right: 4%; width: 60px; opacity: .15; transform: rotate(5deg); } .bg-medallions img:nth-child(3) { top: 20%; left: 6%; width: 54px; opacity: .18; transform: rotate(8deg); } .bg-medallions img:nth-child(4) { top: 28%; right: 7%; width: 82px; opacity: .14; transform: rotate(-4deg); } .bg-medallions img:nth-child(5) { top: 35%; left: 2%; width: 68px; opacity: .19; transform: rotate(6deg); } .bg-medallions img:nth-child(6) { top: 43%; right: 3%; width: 58px; opacity: .16; transform: rotate(-7deg); } .bg-medallions img:nth-child(7) { top: 51%; left: 8%; width: 74px; opacity: .15; transform: rotate(4deg); } .bg-medallions img:nth-child(8) { top: 58%; right: 6%; width: 50px; opacity: .19; transform: rotate(9deg); } .bg-medallions img:nth-child(9) { top: 66%; left: 4%; width: 80px; opacity: .14; transform: rotate(-5deg); } .bg-medallions img:nth-child(10) { top: 73%; right: 2%; width: 64px; opacity: .18; transform: rotate(7deg); } .bg-medallions img:nth-child(11) { top: 81%; left: 7%; width: 56px; opacity: .16; transform: rotate(-8deg); } .bg-medallions img:nth-child(12) { top: 88%; right: 5%; width: 72px; opacity: .15; transform: rotate(5deg); } .bg-medallions img:nth-child(13) { top: 93%; left: 3%; width: 60px; opacity: .19; transform: rotate(-6deg); } .bg-medallions img:nth-child(14) { top: 97%; right: 8%; width: 52px; opacity: .14; transform: rotate(8deg); } @media (max-width: 600px) { .bg-medallions { display: none; } } /* Ancienne constellation fixe (pages collection) -> remplacée par le fond global. */ .coll-hero__constellation { display: none; } h1, h2, h3 { font-family: var(--font-serif); line-height: 1.25; color: var(--ink); font-weight: 400; letter-spacing: -.3px; } h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .5em; } h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Label éditorial : Arial, capitales, lettrage espacé, bordeaux */ .label, .badge-collection, .eyebrow { font-family: var(--font-sans); font-size: var(--label); letter-spacing: 3px; text-transform: uppercase; color: var(--brand-red); font-weight: 700; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; } /* ===== Étage 1 : bandeau blanc — recherche · logo noir + « Éditions Beya » bordeaux · panier ===== */ .site-header__top { background: #fff; border-bottom: 1px solid var(--line); } .site-header__top-inner { display: flex; justify-content: center; align-items: center; padding-block: 1rem; } .site-header__util { display: flex; align-items: center; } .site-header__util--left { justify-content: flex-start; } .site-header__util--right { justify-content: flex-end; } .site-brand { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-decoration: none; line-height: 1.05; text-align: center; } .site-brand:hover { text-decoration: none; } .site-brand__logo { height: clamp(48px, 6vw, 66px); width: auto; display: block; margin-bottom: .3rem; } .site-brand__name { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .22em; color: var(--brand-red); font-size: clamp(1rem, 2.4vw, 1.3rem); } .site-brand__tagline { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: clamp(.78rem, 1.6vw, .92rem); } /* ===== Étage 2 : bandeau bordeaux — navigation principale (crème + or) ===== */ .site-header__bar { background: var(--brand-red); border-bottom: 3px solid var(--gold); position: relative; } .site-header__bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: .55rem; } .site-header__bar-inner > .nav-toggle { grid-column: 1; justify-self: start; } .site-header__bar-inner > .nav { grid-column: 2; } .site-header__bar-inner > .site-header__bar-utils { grid-column: 3; justify-self: end; } .nav { display: flex; justify-content: center; gap: .4rem 2rem; min-width: 0; flex-wrap: wrap; font-family: var(--font-sans); font-size: .86rem; letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; } .nav a, .nav-dd__btn { color: rgba(247, 240, 231, .9); } .nav a:hover, .nav-dd__btn:hover, .nav-dd:hover .nav-dd__btn, .nav-dd:focus-within .nav-dd__btn, .nav-dd.is-open .nav-dd__btn { color: var(--gold); text-decoration: none; } .nav a[aria-current] { color: #fff; } /* Séparateurs ronds entre les onglets */ /* Séparateur HORS de la boîte du lien (position absolue dans le gap) : sinon le soulignement actif (left:0;right:0) recouvre aussi le point. */ .nav > *:not(:last-child)::after { content: "\2022"; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: .85rem; color: rgba(247, 240, 231, .4); pointer-events: none; } /* Soulignement animé doré sous l'onglet survolé / actif */ .nav a, .nav-dd__btn { position: relative; } .nav a::before, .nav-dd__btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } .nav a:hover::before, .nav a[aria-current]::before, .nav-dd:hover .nav-dd__btn::before, .nav-dd.is-open .nav-dd__btn::before { transform: scaleX(1); } /* Menu déroulant "Collections" (crème, sous la barre bordeaux) */ .nav-dd { position: relative; display: inline-flex; align-items: center; } .nav-dd__btn { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; } .nav-dd__caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; transition: transform .2s ease; } .nav-dd:hover .nav-dd__caret, .nav-dd:focus-within .nav-dd__caret, .nav-dd.is-open .nav-dd__caret { transform: rotate(180deg); } .nav-dd__menu { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 5px); min-width: 215px; background: var(--cream); border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 28px rgba(0, 0, 0, .18); padding: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 60; } .nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu, .nav-dd.is-open .nav-dd__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav-dd__menu a { padding: .55rem 1.3rem; white-space: nowrap; text-align: left; color: var(--ink-soft); } .nav-dd__menu a::before { display: none; } /* Le dropdown suit la couleur de la collection de la page (--acc posé sur le body : teal Améthyste / navy Langues), bordeaux par défaut (Beya, pas de --acc). */ .nav-dd__menu a:hover { color: var(--acc, var(--brand-red)); background: var(--cream-2); } .nav-dd__menu a[aria-current] { color: var(--acc, var(--brand-red)); font-weight: 700; background: var(--cream-2); cursor: default; box-shadow: inset 3px 0 0 var(--gold); } /* Hamburger (mobile) — sur la barre bordeaux, barres crème */ .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 8px; background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; outline: none; } .nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: #fbf5ee; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .site-header.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-header.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 920px) { .nav-toggle { display: flex; } .site-header__bar-inner { justify-content: space-between; gap: .5rem; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--brand-red); border-bottom: 3px solid var(--gold); box-shadow: 0 14px 28px rgba(0, 0, 0, .2); padding: .3rem 0; display: none; white-space: normal; max-height: calc(100vh - 120px); overflow-y: auto; z-index: 90; } .site-header.is-nav-open .nav { display: flex; } .nav a { padding: .9rem 1.4rem; border-top: 1px solid rgba(247, 240, 231, .15); } .nav a:first-child { border-top: 0; } .nav > *:not(:last-child)::after { display: none; } .nav a::before, .nav-dd__btn::before { display: none; } /* "Collections" en accordéon dans le menu mobile (clic, pas survol) */ .nav-dd { display: block; width: 100%; } .nav-dd__btn { width: 100%; justify-content: space-between; padding: .9rem 1.4rem; } .nav-dd__menu { position: static; transform: none; min-width: 0; opacity: 1; visibility: visible; display: none; background: rgba(0, 0, 0, .12); border: 0; box-shadow: none; padding: .2rem 0; } /* Neutralise le décalage horizontal hérité du menu desktop (translate -50%), sinon le sous-menu part à gauche et déborde de l'écran sur mobile. */ .nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu, .nav-dd.is-open .nav-dd__menu { transform: none; } .nav-dd.is-open .nav-dd__menu { display: flex; } .nav-dd__menu a { padding: .7rem 1.4rem .7rem 2.8rem; border-top: 0; color: rgba(247, 240, 231, .9); } .nav-dd__menu a:hover { color: var(--gold); background: transparent; } .nav-dd__menu a[aria-current] { color: var(--gold); background: transparent; box-shadow: none; } } /* Mobile : étage blanc compacté — tagline masquée, logo/nom/panier réduits (sinon le panier déborde à droite et la tagline passe sur 2 lignes). */ @media (max-width: 600px) { .site-header__top-inner { gap: .5rem; padding-block: .75rem; } .site-brand__tagline { display: none; } .site-brand__logo { height: 42px; margin-bottom: .2rem; } .site-brand__name { font-size: .95rem; letter-spacing: .14em; } /* Panier en ICÔNE seule (le libellé « Panier » déborderait la colonne resserrée). */ .cart-link { padding: .46rem; gap: .3rem; } .cart-link__icon { display: inline-block; } .cart-link__label { display: none; } .search-link { width: 38px; height: 38px; } } /* Recherche = action utilitaire en icône loupe (pas un onglet de contenu). */ .search-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-soft); transition: color .15s ease, background .15s ease; } .search-link:hover { color: var(--brand-red); background: var(--cream-2); } /* Panier = action, présentée en pastille distincte (pas un onglet de menu). */ .cart-link { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; white-space: nowrap; color: var(--brand-red); border: 1px solid var(--brand-red-light); border-radius: var(--radius-pill); padding: .5rem 1rem; background: var(--cream-2); transition: background .15s ease, color .15s ease, border-color .15s ease; } .cart-link:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; text-decoration: none; } .cart-link:hover .cart-badge { background: #fff; color: var(--brand-red); } .cart-badge { background: var(--brand-red); color: #fff; border-radius: var(--radius-pill); font-size: .68rem; padding: .1rem .45rem; letter-spacing: 0; } @media (min-width: 601px) { .cart-link__icon { display: none; } } /* desktop : libellé « Panier » seul ; mobile : icône (cf. @media 600px) */ /* Mini-panier : popover résumé au clic sur le panier. */ .cart-wrap { position: relative; } .mini-cart { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 210; width: min(352px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 22px 54px rgba(20, 16, 16, .16); padding: 1.15rem 1.25rem 1.25rem; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; line-height: normal; } .mini-cart::before { content: "Votre panier"; display: block; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); } .mini-cart[hidden] { display: none; } /* Mobile : le bouton Panier n'est plus à droite (hamburger à sa droite) → on ancre le mini-panier au bord droit de l'écran pour qu'il ne déborde plus à gauche. */ @media (max-width: 920px) { .mini-cart { position: fixed; top: 62px; right: 8px; left: auto; width: min(352px, calc(100vw - 16px)); } } .mini-cart__empty { text-align: center; color: var(--ink-soft); margin: .4rem 0 .9rem; font-size: .9rem; } .mini-cart__items { list-style: none; margin: 0; padding: 0; max-height: 48vh; overflow-y: auto; } .mini-cart__item { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } .mini-cart__item:last-child { border-bottom: 0; } .mini-cart__thumb { flex-shrink: 0; width: 40px; display: flex; } .mini-cart__thumb img { width: 40px; height: auto; border-radius: 3px; box-shadow: 0 3px 8px rgba(20, 16, 16, .16); } .mini-cart__txt { display: flex; flex-direction: column; gap: .12rem; flex: 1 1 auto; min-width: 0; } .mini-cart__title { font-size: .82rem; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mini-cart__meta { font-size: .72rem; color: var(--ink-soft); } .mini-cart__sub { font-size: .82rem; font-weight: 600; color: var(--acc, var(--brand-red)); flex-shrink: 0; } .mini-cart__foot { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); } .mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .5px; font-size: .74rem; color: var(--ink-soft); } .mini-cart__total strong { font-size: 1.12rem; color: var(--acc, var(--brand-red)); } .mini-cart__cta { width: 100%; } /* Le mini-panier suit la couleur de la collection de la page (--acc sur le body) : prix/total ci-dessus + bouton « Voir le panier » + CTA vide. Bordeaux par défaut. */ .mini-cart .btn-primary { background: var(--acc, var(--brand-red)); } .mini-cart .btn-primary:hover { background: var(--acc-dark, var(--brand-red-dark)); } .mini-cart .btn-outline { color: var(--acc, var(--brand-red)); } .mini-cart .btn-outline:hover { background: var(--acc, var(--brand-red)); border-color: var(--acc, var(--brand-red)); color: #fff; } /* Bouton fermer (×) — toujours présent : sur mobile le popup occupe presque tout l'écran, sans ce bouton il n'y a quasi pas de « dehors » où taper pour fermer. */ .mini-cart__close { position: absolute; top: .45rem; right: .5rem; width: 34px; height: 34px; border: 0; background: none; color: var(--ink-soft); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; } .mini-cart__close:hover { background: var(--cream-2); color: var(--brand-red); } /* Voile mobile : tap n'importe où (hors popup) pour fermer. Inactif sur desktop. z-index 99 = SOUS le header (sticky, z-100) : le mini-panier est rendu dans le contexte d'empilement du header, donc un voile au-dessus du header (z>100) recouvrirait le popup et tuerait le bouton « Voir le panier ». À 99 le voile assombrit le contenu de page mais laisse header + popup cliquables. */ .mini-cart-backdrop { display: none; } @media (max-width: 920px) { .mini-cart-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(20, 16, 16, .3); -webkit-tap-highlight-color: transparent; } } /* ---------- Boutons ---------- */ .btn { display: inline-block; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 1rem 2.4rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background .15s ease, transform .05s ease, border-color .15s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-red); color: #fff; } .btn-primary:hover { background: var(--brand-red-dark); } .btn-outline { background: transparent; border-color: var(--gold); color: var(--brand-red); } .btn-outline:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } /* ---------- Hero ---------- */ .hero { background: var(--cream-2); border-bottom: 1px solid var(--line); } .hero__inner { padding-block: clamp(1.3rem, 3vw, 2.2rem) clamp(1rem, 2.2vw, 1.5rem); max-width: 720px; text-align: center; margin-inline: auto; } .hero h1 { font-size: clamp(1.05rem, 2.3vw, 1.45rem); } .hero p { font-size: 1.1rem; color: var(--ink-soft); } /* ---------- Mise en avant « dernier paru » ---------- */ .feature { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: clamp(1.5rem, 4vw, 2.6rem); margin: 1.5rem 0 1.5rem; } .feature:hover { box-shadow: 0 14px 40px rgba(26, 24, 26, .15); text-decoration: none; } .feature__cover img { width: 100%; box-shadow: var(--shadow-cover); border-radius: var(--radius); } .feature__body h2 { margin: .35rem 0 .3rem; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); } .feature__body .subtitle { color: var(--brand-red); font-family: var(--font-sans); font-size: .88rem; font-weight: 600; margin: 0; } .feature__chapeau { font-style: italic; color: var(--ink-soft); margin: .9rem 0 1.1rem; line-height: 1.65; } .feature__cta { font-family: var(--font-sans); font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-red); font-weight: 700; } @media (max-width: 680px) { .feature { grid-template-columns: 1fr; text-align: center; } .feature__cover { max-width: 190px; margin-inline: auto; } } /* ---------- Recherche / filtres catalogue (client) ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Barre de filtres discrète : pastilles compactes, centrées sous le titre, qui s'enroulent proprement (pas de carte, pas de pleine largeur). */ .book-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem; max-width: 840px; margin: .2rem 0 1.6rem; padding: 0; background: none; border: 0; font-family: var(--font-sans); } .book-filters__search { flex: 0 1 280px; min-width: 180px; } .book-filters__selects { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem; } .book-filters input[type="search"], .book-filters select { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-soft); padding: .44rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background-color: var(--surface); -webkit-appearance: none; appearance: none; } .book-filters input[type="search"] { width: 100%; } .book-filters input[type="search"]:hover, .book-filters select:hover { border-color: var(--cream-3); } .book-filters select { width: auto; cursor: pointer; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; } .book-filters input[type="search"]:focus, .book-filters select:focus { border-color: var(--brand-red); } .book-filters input[type="search"]:focus:not(:focus-visible), .book-filters select:focus:not(:focus-visible) { outline: none; } .book-filters__count { margin: 1rem 0 0; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .4px; color: var(--ink-soft); } .book-filters__empty { margin: 2rem 0; text-align: center; font-style: italic; color: var(--ink-soft); } /* ---------- Page Recherche (résultats groupés par collection puis articles) ---------- */ .search-form { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 640px; margin: 1.4rem auto 2rem; } .search-form input[type="search"] { flex: 1 1 280px; min-width: 0; padding: .7rem 1rem; font-size: .95rem; font-family: var(--font-sans); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .search-form input[type="search"]:focus { border-color: var(--brand-red); } .search-form input[type="search"]:focus:not(:focus-visible) { outline: none; } .search-count { text-align: center; color: var(--ink-soft); font-family: var(--font-sans); font-size: .86rem; margin-bottom: 2.2rem; } .search-empty { text-align: center; color: var(--ink-soft); font-style: italic; margin: 2.5rem 0; } .search-group { margin-bottom: 2.8rem; } .search-group__title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--brand-red); border-bottom: 1px solid var(--line); padding-bottom: .55rem; margin-bottom: 1.6rem; display: flex; align-items: baseline; gap: .6rem; } .search-group__n { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: var(--cream-2); border-radius: var(--radius-pill); padding: .1rem .55rem; } .search-group .grid-books { padding-block: 0; } .search-articles { list-style: none; margin: 0; padding: 0; } .search-article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .4rem; border-bottom: 1px solid var(--line); } .search-article:hover { background: var(--cream-2); } .search-article__link { display: flex; flex-direction: column; gap: .12rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; } .search-article__link:hover { text-decoration: none; } .search-article__title { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); line-height: 1.3; } .search-article__link:hover .search-article__title { color: var(--brand-red); } .search-article__meta { font-family: var(--font-sans); font-size: .76rem; color: var(--ink-soft); } .search-article__pdf { flex-shrink: 0; font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .5px; color: var(--brand-red); border: 1px solid var(--brand-red-light); border-radius: var(--radius-pill); padding: .3rem .7rem; text-decoration: none; white-space: nowrap; } .search-article__pdf:hover { background: var(--brand-red); color: #fff; text-decoration: none; } /* ---------- Page Conférences (cycle « Croire l'incroyable ») ---------- */ .conf-page { max-width: 880px; } .conf-hero { text-align: center; margin: 1rem auto 2.8rem; } .conf-hero__eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; color: var(--brand-red); margin: 0 0 1rem; } .conf-hero__title { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--ink); margin: 0; line-height: 1.05; } .conf-hero__sub { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: 1.2rem; max-width: 40ch; margin: 1.1rem auto 0; line-height: 1.5; } .conf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .conf-item { display: flex; gap: 1.6rem; align-items: baseline; padding: 1.7rem .3rem; border-bottom: 1px solid var(--line); } .conf-item__date { flex-shrink: 0; display: flex; align-items: baseline; gap: .55rem; width: 7.2rem; } .conf-item__day { font-family: var(--font-serif); font-size: 2.3rem; color: var(--brand-red); line-height: 1; } .conf-item__my { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--ink-soft); line-height: 1.3; } .conf-item__body { flex: 1 1 auto; } .conf-item__title { font-size: 1.3rem; color: var(--ink); margin: 0 0 .3rem; line-height: 1.25; } .conf-item__speaker { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--ink-soft); margin: 0; } .conf-practical { margin: 2.8rem 0 1rem; padding: 1.6rem 1.8rem; background: var(--cream-2); border: 1px solid var(--brand-red-light); border-top: 3px solid var(--gold); border-radius: var(--radius); text-align: center; } .conf-practical__free { display: inline-block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .82rem; color: var(--brand-red); margin-bottom: 1rem; } .conf-practical__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.4rem; margin: 0; } .conf-practical__grid div { text-align: center; } .conf-practical__grid dt { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--ink-soft); margin-bottom: .2rem; } .conf-practical__grid dd { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); margin: 0; } .conf-practical__lieu { flex-basis: 100%; margin-top: .4rem; } @media (max-width: 560px) { .conf-item { flex-direction: column; gap: .5rem; } .conf-item__date { width: auto; } } /* Teaser « Conférences » sur l'accueil : encart « affiche » centré. */ .home-events { padding: .7rem 0 .2rem; } /* Accueil : resserre l'espace au-dessus des intertitres et sous la grille « Dernières parutions ». */ .home-flow .section-title { padding-top: .4rem; } .home-latest .grid-books { padding-block: .4rem; } /* === Page « Explorer l'ensemble » (comparateur de volumes) ============== */ .ensemble-page { padding-bottom: 3rem; } /* Lien vers la fiche auteur d'un ensemble consacré à un auteur (Charles, Paracelse…). */ .ensemble-author { text-align: center; font-family: var(--font-sans); font-size: .92rem; color: var(--muted); margin: -.2rem 0 1.4rem; letter-spacing: .02em; } .ensemble-author a { color: var(--brand-red); border-bottom: 1px solid transparent; transition: border-color .15s ease; } .ensemble-author a:hover { border-bottom-color: var(--brand-red); text-decoration: none; } .ensemble-author__arrow { color: var(--brand-red); } .ensemble-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .2rem; padding: 1rem 1.4rem; background: var(--cream-2); border: 1px solid var(--brand-red-light); border-radius: var(--radius-card); } .ensemble-buy__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; } .ensemble-buy__count { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--brand-red); } .ensemble-buy__price { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); } .ensemble-buy__save { font-size: .85rem; color: var(--ink-soft); } .ensemble-buy__save strong { color: #2a7a2a; } .ensemble-hint { text-align: center; font-style: italic; color: var(--ink-soft); font-size: .85rem; margin: 1.4rem 0 1rem; } .ensemble-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); align-items: stretch; } .ensemble-book { display: flex; flex-direction: column; gap: .6rem; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.2rem; transition: box-shadow .2s ease, transform .2s ease; } .ensemble-book:hover { box-shadow: 0 10px 30px rgba(20, 16, 16, .10); transform: translateY(-3px); } .ensemble-book__cover { display: block; text-align: center; flex-shrink: 0; } .ensemble-book__cover img { max-width: 170px; width: 100%; height: auto; box-shadow: var(--shadow-cover); border-radius: var(--radius); } .ensemble-book__body { display: flex; flex-direction: column; gap: .3rem; flex: 1; } .ensemble-book__badge { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 700; color: var(--brand-red); } .ensemble-book__title { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.2; margin: .1rem 0 0; } .ensemble-book__title a { color: var(--ink); } .ensemble-book__title a:hover { color: var(--brand-red); text-decoration: none; } .ensemble-book__auth { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft); margin: 0; } .ensemble-book__sub { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: .92rem; margin: 0; } .ensemble-book__filet { display: block; width: 48px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin: .4rem 0; } .ensemble-book__desc { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .ensemble-book__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .5rem; } .ensemble-book__price { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); } .ensemble-book__more { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-red); white-space: nowrap; } @media (max-width: 600px) { .ensemble-grid { grid-template-columns: 1fr; } .ensemble-book { flex-direction: row; } .ensemble-book__cover img { max-width: 110px; } } .pack-card__explore { display: inline-block; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-red); margin-top: .5rem; } .pack-card__explore:hover { text-decoration: underline; } /* « Explorer l'ensemble » uniformisé en bouton (même style qu'« Ajouter l'ensemble »). */ .pack-mention__explore { margin: 0; } .featured-slide__cta-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; } /* Un seul CTA par slide dans le carrousel : largeur FIXE pour qu'il ne varie pas selon la largeur de l'éventail (nombre de couvertures / écartement au survol). Bouton du form remplit son parent ; texte recentre. */ .featured-slide__cta-row > a.btn, .featured-slide__cta-row > form { flex: 0 0 auto; width: 320px; max-width: 100%; } .featured-slide__cta-row > form { display: flex; } .featured-slide__cta-row > form > .btn { width: 100%; } .featured-slide__cta-row .btn { text-align: center; } /* Le CTA du slide simple (« Découvrir ce titre ») n'est pas dans un cta-row : même largeur fixe pour rester identique d'un slide à l'autre dans le carrousel. */ .featured-slide__cta { width: 320px; max-width: 100%; } @media (max-width: 760px) { .featured-slide__cta-row { justify-content: center; } } .event-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; max-width: none; margin: 0 auto; padding: 2rem 2.6rem; background: var(--cream-2); border: 1px solid var(--line); border-top: 3px solid var(--brand-red); border-radius: var(--radius-card); box-shadow: 0 12px 34px rgba(20, 16, 16, .08); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; } .event-card:hover { box-shadow: 0 18px 44px rgba(139, 26, 44, .15); transform: translateY(-2px); text-decoration: none; } /* Lettrine « C » intégrée comme initiale du mot « Croire » (lockup façon affiche). */ .event-card__title.has-lettrine, .conf-hero__title.has-lettrine { display: inline-flex; align-items: center; justify-content: center; gap: .03em; flex-wrap: nowrap; line-height: 1; } .event-card__lettrine { height: 1.45em; width: auto; margin: 0; flex-shrink: 0; } .conf-hero__lettrine { height: 1.4em; width: auto; margin: 0; flex-shrink: 0; } .event-card__label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--brand-red); } .event-card__title { font-family: var(--font-serif); font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--ink); line-height: 1.05; margin: .1rem 0 .15rem; } .event-card__next { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); } .event-card__next strong { color: var(--ink); font-style: normal; } .event-card__cta { margin-top: .8rem; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-red); border: 1px solid var(--brand-red-light); border-radius: var(--radius-pill); padding: .55rem 1.3rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .event-card:hover .event-card__cta { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } /* Mini-carte rappel du cycle : petit encart en haut À DROITE, HORS FLUX (n'écarte pas le contenu). */ main { position: relative; } .conf-mini { position: absolute; top: .8rem; right: clamp(.6rem, 2.5vw, 1.6rem); z-index: 6; width: 206px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .04rem; margin: 0; padding: .65rem .8rem; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 6px 18px rgba(20, 16, 16, .08); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; } .conf-mini:hover { box-shadow: 0 10px 24px rgba(46, 90, 56, .16); transform: translateY(-1px); text-decoration: none; } .conf-mini__label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--brand-red); font-size: .54rem; } .conf-mini__title { font-family: var(--font-serif); font-size: 1.02rem; color: var(--ink); line-height: 1.1; margin: .08rem 0 0; } .conf-mini__title.has-lettrine { display: inline-flex; align-items: center; justify-content: center; gap: .02em; flex-wrap: nowrap; } .conf-mini__lettrine { height: 1.3em; width: auto; } .conf-mini__meta { font-family: var(--font-serif); font-style: italic; font-size: .7rem; color: var(--ink-soft); } .conf-mini__cta { margin-top: .35rem; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .58rem; color: var(--brand-red); border: 1px solid var(--brand-red); border-radius: var(--radius-pill); padding: .3rem .75rem; } .conf-mini:hover .conf-mini__cta { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } @media (max-width: 980px) { .conf-mini { display: none; } } /* ---------- Page Checkout (finaliser la commande) ---------- */ .checkout__grid { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-block: 1rem 3rem; } .checkout__section { margin-bottom: 2rem; } .checkout__h2 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--brand-red); margin: 0 0 1rem; } .checkout .field { margin-bottom: .7rem; } .checkout .field--row { display: flex; gap: .7rem; } .checkout .field__cp { flex: 0 0 130px; } .checkout input[type="text"], .checkout input[type="email"], .checkout input:not([type]), .checkout select { width: 100%; font-family: var(--font-sans); font-size: .92rem; color: var(--ink); padding: .7rem .9rem; border: 1px solid var(--cream-3); border-radius: var(--radius); background: var(--surface); } .checkout input:focus, .checkout select:focus { border-color: var(--brand-red); } .checkout input:focus:not(:focus-visible), .checkout select:focus:not(:focus-visible) { outline: none; } .checkout .opt { display: flex; align-items: center; gap: .7rem; padding: .75rem .95rem; margin-bottom: .5rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-family: var(--font-sans); font-size: .9rem; transition: border-color .15s ease, background .15s ease; } .checkout .opt:hover { border-color: var(--cream-3); } .checkout .opt:has(input:checked) { border-color: var(--brand-red); background: var(--cream-2); } .checkout .opt__label { flex: 1 1 auto; } .checkout .opt__price { font-weight: 600; color: var(--brand-red); } .checkout__pay { width: 100%; padding: .9rem; font-size: .78rem; margin-top: .6rem; } .checkout__secure { text-align: center; font-family: var(--font-sans); font-size: .76rem; color: var(--ink-soft); margin-top: .8rem; } .checkout__summary { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; position: sticky; top: 5rem; } .checkout__summary .checkout__h2 { margin-top: 0; } .checkout__items { list-style: none; margin: 0 0 1rem; padding: 0; } .checkout__item { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-sans); font-size: .85rem; } .checkout__item:last-child { border-bottom: 0; } .checkout__item-sub { font-weight: 600; flex-shrink: 0; color: var(--brand-red); } .checkout__ens { text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; color: var(--brand-red); font-weight: 700; } .checkout__row { display: flex; justify-content: space-between; padding: .4rem 0; font-family: var(--font-sans); font-size: .9rem; } .checkout__row--total { border-top: 2px solid var(--brand-red-light); margin-top: .3rem; padding-top: .65rem; font-weight: 700; font-size: 1.15rem; color: var(--brand-red); } @media (max-width: 760px) { .checkout__grid { grid-template-columns: 1fr; } .checkout__summary { position: static; } } @media (max-width: 600px) { .book-filters__search { flex-basis: 100%; } .book-filters__selects { flex-basis: 100%; flex-direction: column; align-items: stretch; } .book-filters select { width: 100%; } } /* ---------- Grille catalogue ---------- */ .grid-books { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding-block: 3rem; } .book-card { background: transparent; border: 0; display: flex; flex-direction: column; gap: .55rem; text-align: center; transition: transform .2s ease; } .book-card:hover { transform: translateY(-4px); text-decoration: none; } /* Lien fiche (couverture + infos) en colonne ; le bouton d'ajout reste sous le prix. */ .book-card__link { display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto; color: inherit; text-decoration: none; } .book-card__link:hover { text-decoration: none; } .book-card__add { margin-top: .1rem; } .book-card__add-btn { width: 100%; padding: .5rem 1rem; font-size: .66rem; letter-spacing: 1.2px; } /* Toutes les couvertures à la même hauteur (largeur variable, alignées en bas) */ /* Vignette de couverture : boîte au RATIO FIXE (≈ format livre). Quelle que soit la taille réelle de l'image, elle est contenue (object-fit) et alignée en bas au centre — grille parfaitement régulière sur TOUS les appareils. Le drop-shadow épouse la couverture réelle (pas la boîte). */ .book-card__cover { aspect-ratio: 5 / 7; display: block; background: #fff; border-radius: var(--radius); box-shadow: 3px 4px 13px rgba(20, 16, 16, .13); overflow: hidden; } .book-card__cover img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* Corps en colonne qui remplit la hauteur de carte (la grille étire les cartes à la même hauteur) : titre sur 2 lignes réservées, auteur aligné, prix épinglé en bas → alignement constant des prix sur toute une rangée. */ .book-card__body { display: flex; flex-direction: column; gap: .25rem; padding-top: .4rem; flex: 1 1 auto; } .book-card__title { font-size: 1.05rem; line-height: 1.3; color: var(--ink); min-height: 2.6em; display: flex; align-items: center; justify-content: center; } .book-card__author { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-soft); font-style: italic; } .book-card__price { font-family: var(--font-sans); font-weight: 600; color: var(--brand-red); font-size: .9rem; margin-top: auto; padding-top: .35rem; } /* ---------- Accueil : carte « Ensemble à la une » sur 2 colonnes (couvertures chevauchées) ---------- */ .pack-card { grid-column: span 2; } /* Dernier paru (3 colonnes) : un ENCART à liseré rouge autour de [couverture | chapeau] UNIQUEMENT ; le bloc d'achat (badge/titre/prix/bouton) vient DESSOUS, sous la couverture. */ .book-card--latest { grid-column: span 2; display: flex; flex-direction: column; gap: .9rem; } .latest__encart { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); border: 1px solid var(--brand-red-light); border-radius: var(--radius-card); background: var(--cream-2); box-shadow: 0 6px 18px rgba(139, 26, 44, .09); padding: clamp(1rem, 2vw, 1.5rem); } .latest__coverlink { flex: 0 0 auto; text-decoration: none; } .latest__encart .book-card__cover { height: clamp(186px, 21vw, 244px); } .latest__lead { flex: 1 1 auto; text-align: left; min-width: 0; } .latest__buy { display: flex; flex-direction: column; gap: .55rem; align-self: flex-start; width: clamp(200px, 22vw, 250px); text-align: center; } .latest__flag { display: inline-block; align-self: flex-start; margin-bottom: .6rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--brand-red); border-bottom: 2px solid var(--brand-red-light); padding-bottom: .28rem; } .latest__sub { display: block; color: var(--brand-red); font-family: var(--font-sans); font-size: .82rem; font-weight: 600; margin-bottom: .45rem; } .latest__chapeau { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); line-height: 1.6; } .latest__more { display: inline-block; margin-top: .7rem; font-family: var(--font-sans); font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-red); font-weight: 700; } @media (max-width: 760px) { .book-card--latest { grid-column: 1 / -1; } .latest__encart { flex-direction: column; text-align: center; } .latest__lead { text-align: center; } .latest__flag { align-self: center; } .latest__buy { width: 100%; align-self: stretch; } } /* Couvertures qui se chevauchent horizontalement (pile étalée), ombre à gauche pour la profondeur. */ /* Couvertures DROITES, taille identique aux couvertures seules (height = zone livre). Superposées avec la gauche AU-DESSUS (z-index décroissant) pour laisser dépasser le médaillon (côté droit) de chaque volume. */ .pack-card__fan { display: flex; align-items: flex-end; justify-content: center; height: clamp(240px, 26vw, 300px); isolation: isolate; } .pack-card__cov { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom center; border-radius: 2px; box-shadow: 6px 5px 16px rgba(20, 16, 16, .22); margin-left: -125px; position: relative; z-index: calc(90 - var(--i, 0)); transition: margin-left .3s ease; } .pack-card__cov:first-child { margin-left: 0; } .book-card:hover .pack-card__cov:not(:first-child) { margin-left: -105px; } /* Même éventail au survol pour le slide « ensemble » du carrousel à la une (réutilise la transition .3s de .pack-card__cov). */ .featured-slide--pack:hover .pack-card__cov { transform: translateX(0); } .pack-card__body { display: flex; flex-direction: column; align-items: center; gap: .12rem; padding-top: .5rem; } /* Tailles de police calées sur les cartes livres (titre 1.05rem, auteur .78rem, prix .9rem). */ .pack-card__name { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.3; color: var(--ink); max-width: 28ch; } .pack-card__count { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .4px; color: var(--ink-soft); } .pack-card__prices { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem; } .pack-card__price { font-family: var(--font-sans); font-weight: 600; font-size: .9rem; color: var(--brand-red); } .pack-card__strike { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-soft); text-decoration: line-through; } .pack-card__save { margin-top: .4rem; font-family: var(--font-sans); font-weight: 700; font-size: .7rem; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); background: var(--gold-pale); border: 1px solid #ecd9a8; border-radius: var(--radius-pill); padding: .22rem .8rem; } .pack-card__add { margin-top: .7rem; } .pack-card__add .btn { padding: .5rem 1.4rem; font-size: .66rem; letter-spacing: 1.2px; } @media (max-width: 760px) { .pack-card { grid-column: 1 / -1; } } /* ---------- Fiche livre (colonne gauche cover+méta · colonne droite contenu) ---------- */ .book-detail { display: grid; grid-template-columns: minmax(260px, 330px) 1fr; gap: clamp(2rem, 5vw, 4rem); padding-block: 2.2rem; align-items: start; } .book-detail__side { position: static; } .book-detail__cover { position: relative; text-align: center; } .book-detail__cover > img { box-shadow: var(--shadow-cover); border-radius: var(--radius); width: 100%; } /* Médaillon en haut à droite de la colonne contenu (rond) */ .book-detail__main .medaillon { float: right; width: clamp(80px, 18%, 116px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: none; margin: 0 0 1rem 1.5rem; filter: drop-shadow(0 3px 12px rgba(139, 26, 44, .2)); } /* Mobile : le flottement à droite faisait s'enrouler le titre autour du médaillon (entête désorganisée). On le sort du flux du texte : sceau CENTRÉ au-dessus de l'entête (médaillon → collection → titre → sous-titre → auteur). */ @media (max-width: 760px) { .book-detail__main .medaillon { float: none; display: block; width: 88px; margin: .2rem auto 1rem; } .book-detail__main .eyebrow, .book-detail__main h1, .book-detail__main .subtitle, .book-detail__main .subtitle2, .book-detail__main .book-detail__byline { text-align: center; } } /* Blocs métadonnées (façon ancienne fiche) — contributeurs empilés tight */ .meta-block { margin: 1.1rem 0 0; font-family: var(--font-sans); } .meta-block dt { font-size: .64rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); } .meta-block dd { margin: .05rem 0 .7rem; font-size: .92rem; color: var(--ink); } /* Édition : grille label | valeur, compacte (spec-sheet) */ .meta-block--edition { display: grid; grid-template-columns: auto 1fr; gap: .42rem 1rem; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.1rem; } .meta-block--edition dt { color: var(--ink-soft); align-self: baseline; } .meta-block--edition dd { margin: 0; font-size: .88rem; } /* Accordéon « Détails de l'édition » */ .meta-accordion { border-top: 1px solid var(--line); margin-top: 1.1rem; } .meta-accordion > summary { cursor: pointer; list-style: none; font-family: var(--font-sans); font-size: .68rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); padding: .9rem 0; } .meta-accordion > summary::-webkit-details-marker { display: none; } .meta-accordion > summary::after { content: " +"; color: var(--ink-soft); } .meta-accordion[open] > summary::after { content: " –"; } .meta-accordion .meta-block--edition { border-top: 0; margin-top: 0; padding-top: .3rem; } /* Contributeurs : rôle affiché une seule fois, noms listés dessous */ .contrib-block dt { margin-top: 1.1rem; } .contrib-block dt:first-child { margin-top: 0; } .contrib-block dd { margin: .05rem 0 .12rem; } .meta-accordion .contrib-block { margin-top: .3rem; } .book-detail__main h1 { letter-spacing: .4px; line-height: 1.1; margin: .1em 0 .25em; } .book-detail__main .eyebrow { margin: 0 0 .6rem; } .book-detail__main .subtitle { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; font-size: 1.2rem; margin: 0 0 .2rem; } .book-detail__main .subtitle2 { font-family: var(--font-sans); color: var(--brand-red); font-weight: 600; font-size: .92rem; margin: 0 0 .2rem; } @media (max-width: 760px) { .book-detail { grid-template-columns: 1fr; } .book-detail__side { position: static; max-width: 340px; margin-inline: auto; } } /* Ligne d'ajout au panier : quantité + bouton alignés, même hauteur */ .add-to-cart { display: flex; align-items: stretch; gap: .6rem; margin: 1rem 0 .4rem; } .add-to-cart .qty { width: 3.4rem; text-align: center; border: 1px solid var(--cream-3); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; } .add-to-cart .btn { padding-block: 0; line-height: 1; display: inline-flex; align-items: center; } .book-detail__desc { font-size: 1.12rem; line-height: 1.62; color: #2c2a28; text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-justify: inter-word; } .book-detail__desc p { margin: 0 0 .85em; } .book-detail__desc :first-child { margin-top: 0; } /* Chapeau (intro) en encadré crème — façon email de lancement */ .book-detail__desc .chapeau { background: var(--cream-2); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.3rem, 4vw, 2rem); margin: 0 0 1.6rem; font-size: 1.04em; } .book-detail__desc .chapeau p:first-child { margin-top: 0; } .book-detail__desc .chapeau p:last-child { margin-bottom: 0; } /* Bloc métadonnées affiné (ISBN, langue, dispo) */ .book-meta { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--line); } .book-meta li { display: flex; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-sans); font-size: .82rem; color: var(--ink); } .book-meta li span { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.5px; font-size: .7rem; min-width: 9rem; } .subtitle { font-family: var(--font-sans); color: var(--brand-red); font-weight: 600; letter-spacing: .3px; } .byline { font-family: var(--font-sans); font-style: italic; color: var(--ink-soft); margin-top: -.3rem; } .byline a { color: var(--brand-red); text-decoration: none; } .byline a:hover { text-decoration: underline; } @media (max-width: 720px) { .book-detail { grid-template-columns: 1fr; text-align: center; } } /* Encart « accroche » façon email (fond crème) */ .pull { background: var(--cream-2); padding: clamp(1.6rem, 4vw, 2.4rem); margin: 2rem 0; font-style: italic; text-align: center; font-size: 1.1rem; } /* ---------- Articles (documentation) ---------- */ .prose { max-width: 74ch; margin-inline: auto; padding-block: 2rem; font-size: 1.1rem; line-height: 1.7; color: #2c2a28; } /* Page article : mesure un peu plus large (moins de vide a droite). */ .prose--article { max-width: 86ch; } /* Illustration d'en-tête de l'article (champ « image » de l'ERP). Plafonnée à 480px (~1/3 plus petite que la mesure 760px), alignée à gauche. width:auto évite d'agrandir une image source plus petite. Le sélecteur est préfixé .prose pour battre en spécificité « .prose img { margin:…auto } » (ci-dessous), sinon l'image se recentrerait. */ .prose .article__hero { display: block; width: auto; max-width: min(480px, 100%); height: auto; margin: 1.6rem 0; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0 0 1.1rem; } .prose h1 { letter-spacing: -.2px; } .prose h2 { margin-top: 1.8rem; margin-bottom: .5rem; letter-spacing: -.2px; } .prose img { border-radius: var(--radius); margin: 1.5rem auto; box-shadow: var(--shadow-soft); } .cat-block { padding-block: 1.6rem; border-bottom: 1px solid var(--line); } .cat-block h2 { font-size: 1.3rem; } .cat-block h2 a { color: var(--ink); } .cat-block h2 a:hover { color: var(--brand-red); } .cat-list { columns: 2; column-gap: 2.4rem; font-family: var(--font-sans); font-size: .92rem; line-height: 1.9; } .cat-list__by { color: var(--muted); font-style: italic; } .cat-list a { color: var(--ink-soft); } .cat-list a:hover { color: var(--brand-red); } .cat-list li { break-inside: avoid; } @media (max-width: 600px) { .cat-list { columns: 1; } } /* ---------- Panier / checkout ---------- */ .cart-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: .92rem; } .cart-table th, .cart-table td { text-align: left; padding: .85rem; border-bottom: 1px solid var(--line); } .cart-table th { font-size: var(--label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); } /* En-tête « Titre » aligné sur la colonne des titres : ceux-ci démarrent après la colonne médaillon (116px) + le gap (.8rem) de .cart-cell, en plus du padding .85rem. */ .cart-table thead th:first-child { padding-left: calc(116px + 1.65rem); } .cart-total { font-size: 1.3rem; font-weight: 600; color: var(--brand-red); } /* Le flex est sur le wrapper interne .cart-cell, PAS sur le : un en display:flex sort du modèle de tableau et désaligne les colonnes Prix/Qté/Sous-total. */ /* Colonne médaillons à LARGEUR FIXE : le titre démarre toujours au même endroit, quel que soit le nombre de livres (ensemble 4/2 volumes OU livre seul). */ .cart-cell { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: .8rem; } .cart-cell > .pack-fan--sm, .cart-cell > .cart-medaillon { justify-self: start; grid-column: 1; } /* Titre TOUJOURS en colonne 2, même sans médaillon (collections « autres » sans médaillon) : sinon il tombait dans la colonne 116px et se collait à gauche. */ .cart-cell > a, .cart-cell > .cart-pack__info { grid-column: 2; } .cart-medaillon { width: 30px; height: 30px; border-radius: 50%; } /* Pied de panier : code promo à gauche, actions à droite, séparateur net. */ .cart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-family: var(--font-sans); } .cart-foot__promo { display: flex; align-items: center; gap: .55rem; } .cart-foot__promo input[type="text"] { padding: .6rem .85rem; border: 1px solid var(--cream-3); border-radius: var(--radius); font-family: var(--font-sans); font-size: .88rem; min-width: 150px; } .cart-foot__applied { font-size: .88rem; color: var(--ink-soft); } .cart-foot__actions { display: flex; flex-wrap: wrap; gap: .7rem; } .checkout-stub { background: var(--cream-2); border-radius: var(--radius); padding: 1.6rem; font-family: var(--font-sans); } /* Mobile : pied de panier en pleine largeur, l'input promo rétrécit pour que « Appliquer » tienne toujours (avant : input ~200px + bouton ~136px > écran → « Appliquer » coupé). Actions empilées et étirées proprement. */ @media (max-width: 560px) { .cart-foot { gap: .9rem; } .cart-foot__promo { width: 100%; } .cart-foot__promo input[type="text"] { flex: 1 1 0; min-width: 0; } .cart-foot__actions { width: 100%; } .cart-foot__actions > form { flex: 1 1 auto; display: flex; } .cart-foot__actions > form > .btn, .cart-foot__actions > .btn { flex: 1 1 auto; width: 100%; text-align: center; } } /* ---------- Footer ---------- */ .site-footer { position: relative; overflow: hidden; margin-top: 5rem; background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-serif); font-size: 1rem; line-height: 1.85; font-style: normal; } /* Médaillons en filigrane derrière le contenu du pied de page (habillage discret). */ .footer-medallions { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .footer-medallions img { position: absolute; height: auto; border-radius: 50%; opacity: .17; -webkit-user-select: none; user-select: none; } /* Répartis dans les zones SANS texte : marges gauche/droite, gap col1-col2 (30-49%), gap col2-col3 (60-79%), milieu de la newsletter, bande sous la newsletter. */ .footer-medallions img:nth-child(1) { top: 11%; left: 2%; width: 52px; opacity: .18; transform: rotate(-6deg); } .footer-medallions img:nth-child(2) { top: 60%; left: 3%; width: 46px; opacity: .16; transform: rotate(5deg); } .footer-medallions img:nth-child(3) { top: 15%; left: 34%; width: 58px; opacity: .17; transform: rotate(8deg); } .footer-medallions img:nth-child(4) { top: 44%; left: 38%; width: 50px; opacity: .15; transform: rotate(-4deg); } .footer-medallions img:nth-child(5) { top: 13%; left: 65%; width: 58px; opacity: .17; transform: rotate(6deg); } .footer-medallions img:nth-child(6) { top: 42%; left: 68%; width: 50px; opacity: .15; transform: rotate(-7deg); } .footer-medallions img:nth-child(7) { top: 18%; right: 2%; width: 52px; opacity: .18; transform: rotate(4deg); } .footer-medallions img:nth-child(8) { top: 64%; right: 3%; width: 46px; opacity: .16; transform: rotate(9deg); } .footer-medallions img:nth-child(9) { top: 68%; left: 48%; width: 54px; opacity: .16; transform: rotate(-5deg); } .footer-medallions img:nth-child(10) { top: 86%; left: 24%; width: 48px; opacity: .15; transform: rotate(7deg); } .site-footer__inner, .footer-newsletter, .site-footer__legal { position: relative; z-index: 1; } @media (max-width: 600px) { .footer-medallions { display: none; } } .site-footer a { color: var(--ink-soft); } .site-footer a:hover { color: var(--brand-red); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 1.8rem; justify-content: space-between; padding-block: 2.2rem; } .site-footer h3 { color: var(--ink); font-size: var(--label); letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-sans); font-weight: 700; margin-bottom: .8rem; } /* Barre copyright pleine largeur (comme l'ancien site) */ .site-footer__legal { border-top: 1px solid var(--line); padding: 1.1rem 1rem; text-align: center; font-family: var(--font-sans); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Newsletter (pied de page) : bande pleine largeur ---------- */ .footer-newsletter { flex-basis: 100%; max-width: none; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.2rem 3rem; border-top: 1px solid var(--line); margin-top: .4rem; padding-top: 1.3rem; } .nl-intro { flex: 1 1 300px; max-width: 460px; } .nl-intro p { margin-top: .3rem; } .nl-action { flex: 1 1 360px; max-width: 480px; } .nl-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; } .nl-input { flex: 1 1 200px; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--cream-3); border-radius: var(--radius); font-family: var(--font-serif); font-size: .95rem; background: #fff; color: var(--ink); } .nl-input:focus { border-color: var(--brand-red); } .nl-input:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; } .nl-btn { white-space: nowrap; } .nl-msg { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; } .nl-msg--ok { color: var(--brand-red); } .nl-msg--err { color: #b3261e; } .nl-legal { font-family: var(--font-sans); font-size: .72rem; color: var(--ink-soft); margin-top: .6rem; line-height: 1.5; } /* ---------- Fiche livre : blocs enrichis ---------- */ .book-detail__author { font-family: var(--font-sans); font-size: .92rem; letter-spacing: .5px; color: var(--ink-soft); text-transform: uppercase; margin: 0 0 .2rem; } .book-detail__byline { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin: .5rem 0 0; } .book-detail__byline a { color: var(--brand-red); text-decoration: none; border-bottom: 1px solid transparent; } .book-detail__byline a:hover { border-bottom-color: var(--brand-red); } .book-detail__lead { font-family: var(--font-sans); color: var(--ink-soft); margin: .4rem 0 0; } /* Chapeau (intro) en encadré crème — champ distinct */ /* Chapeau (intro) aligné à GAUCHE avec le reste : plus d'encadré crème (dont le padding indentait le texte). Simple paragraphe d'intro, un peu plus présent. */ .book-chapeau { margin: .5rem 0 1.2rem; font-size: 1.12rem; line-height: 1.68; color: var(--ink); } .book-chapeau p:first-child { margin-top: 0; } .book-chapeau p:last-child { margin-bottom: 0; } .buy-box { margin: 1rem 0; border-block: 1px solid var(--line); } .buy-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem 1.3rem; padding: .8rem 0; } .buy-row__cart { display: inline-flex; align-items: center; color: var(--brand-red); opacity: .8; } .ico { flex: 0 0 auto; } .buy-row__info { font-family: var(--font-sans); display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .buy-row__line { display: flex; align-items: baseline; gap: 1rem; } .buy-row__type { text-transform: uppercase; letter-spacing: 1.2px; font-size: .72rem; color: var(--ink-soft); } .buy-row__price { font-size: 1.45rem; font-weight: 600; color: var(--brand-red); font-variant-numeric: lining-nums; } .buy-row__delay { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; } .buy-row__action { justify-self: end; display: inline-flex; align-items: center; } .buy-row__action .add-to-cart { margin: 0; } /* Liens « Table des matières » / « Recensions » -> ouvrent une modale */ .book-actions { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .book-link { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-red); } .book-link:hover { color: var(--brand-red-dark); } .book-link:hover .book-link__txt { text-decoration: underline; } /* Modale (popup) */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } /* Voile sombre net (pas de blur : sur une page dense le flou rendait le fond brouillon). */ .modal__backdrop { position: absolute; inset: 0; background: rgba(24, 19, 17, .82); } .modal__panel { position: relative; background: var(--surface); max-width: 700px; width: 100%; max-height: 86vh; overflow: auto; border-radius: var(--radius); padding: 2.4rem clamp(1.4rem, 4vw, 2.8rem); box-shadow: 0 24px 70px rgba(0, 0, 0, .32); } .modal__close { position: absolute; top: .7rem; right: 1rem; background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--ink-soft); } .modal__close:hover { color: var(--brand-red); } .modal__title { margin-top: 0; font-size: 1.35rem; letter-spacing: -.2px; } body.modal-open { overflow: hidden; } .book-section { border-top: 1px solid var(--line); margin-top: 1.4rem; } .book-section > summary { cursor: pointer; font-family: var(--font-sans); font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-red); padding: .9rem 0; list-style: none; } .book-section > summary::-webkit-details-marker { display: none; } .book-section > summary::after { content: " +"; color: var(--ink-soft); } .book-section[open] > summary::after { content: " –"; } /* Table des matières — liste sémantique imbriquée (beautifyToc) : points de conduite en CSS, pagination arabe/romaine, hiérarchie PALAIS>PORTE>CHAPITRE. */ .toc { /* Uniformisation : TITRES (headings) en rouge, TOUT LE RESTE en noir (entrées, numéros de page, auteurs, dates). Rouge figé (#8b1a2c) pour rester rouge même sur une page livre qui hériterait d'une couleur de collection. */ --toc-rule: var(--line); --toc-muted: var(--ink); --toc-accent: #8b1a2c; --toc-paper: var(--cream); --toc-page-w: 2.8em; --toc-indent: 1.5em; font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.62; color: var(--ink); max-width: 44rem; margin: .25rem auto 0; } .toc__list { list-style: none; margin: 0; padding: 0; } .toc__item { margin: 0; } .toc__item--lv1 > .toc__entry, .toc__item--lv1 > .toc__heading, .toc__item--lv1 > .toc__heading-line { padding-left: var(--toc-indent); } .toc__item--lv2 > .toc__entry, .toc__item--lv2 > .toc__heading, .toc__item--lv2 > .toc__heading-line { padding-left: calc(2 * var(--toc-indent)); } .toc__item--lv3 > .toc__entry, .toc__item--lv3 > .toc__heading, .toc__item--lv3 > .toc__heading-line { padding-left: calc(3 * var(--toc-indent)); } .toc__entry, .toc__heading-line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: .7em; padding: .34em 0; } .toc__label, .toc__heading { min-width: 0; overflow-wrap: anywhere; position: relative; justify-self: start; max-width: 100%; } .toc__leader { display: none; } .toc__entry .toc__label::after, .toc__heading-line .toc__heading::after { content: ""; position: absolute; bottom: .3em; left: 100%; width: 100vw; border-bottom: 1px dotted var(--toc-rule); } .toc__page { justify-self: end; min-width: var(--toc-page-w); text-align: right; font-variant-numeric: oldstyle-nums proportional-nums; color: var(--toc-muted); white-space: nowrap; background: var(--toc-paper); padding-left: .45em; position: relative; z-index: 1; } .toc__page[data-page-kind="roman"] { font-variant: small-caps; letter-spacing: .02em; } .toc__page--range { font-variant-numeric: normal; } .toc__item--section { margin-top: 1.7em; } .toc__item--section:first-child { margin-top: 0; } .toc__heading { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--toc-accent); padding: .2em 0; } .toc__item--lv0 > .toc__heading { font-size: .82rem; border-bottom: 1px solid var(--toc-rule); padding-bottom: .3em; margin-bottom: .4em; } .toc__heading-line .toc__heading { padding: 0; border: none; } .toc__heading--author { font-style: italic; font-weight: 600; color: var(--ink); border-bottom: none; text-transform: none; } .toc__author { display: block; font-style: italic; font-size: .9em; color: var(--toc-muted); margin: -.02em 0 .25em 0; padding-left: var(--toc-indent); } .toc__date { color: var(--toc-muted); font-size: .85em; } .toc__label em, .toc__label i, .toc__heading em, .toc__heading i { font-style: italic; } .toc__label strong, .toc__label b { font-weight: 600; } .toc--passthrough ol, .toc--passthrough ul { padding-left: 1.4em; } .toc--passthrough li { padding: .15em 0; } .toc-modal__body { overflow-x: clip; } /* Modale TOC : fond crème de marque + en-tête label bordeaux / titre serif */ .toc-modal { background: var(--cream); } .toc-modal__head { text-align: center; margin: .2rem 0 1.7rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--toc-rule); } .toc-modal__eyebrow { display: block; font-family: var(--font-sans); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: #8b1a2c; margin-bottom: .55rem; } .toc-modal__title { font-family: var(--font-serif); font-weight: 500; line-height: 1.18; font-size: clamp(1.3rem, 3.4vw, 1.7rem); color: var(--ink); margin: 0; letter-spacing: .2px; } @media print { .toc { color: #000; max-width: none; } .toc__page { color: #000; } } /* Mention / suggestion de pack */ .pack-mention { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--cream-2); border: 1px solid var(--brand-red-light); border-radius: var(--radius); padding: .8rem 1.05rem; margin: 1.3rem 0; font-family: var(--font-sans); font-size: .86rem; } /* Corps : éléments empilés sur des lignes distinctes (eyebrow / titre / prix / action), compact. */ .pack-mention__body { flex: 1 1 56%; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .pack-mention__body .eyebrow { margin: 0; } .pack-mention__name { font-size: .95rem; line-height: 1.25; color: var(--ink); } .pack-mention__price { color: var(--ink-soft); font-size: .84rem; } .pack-mention__price strong { color: var(--ink); } /* Ligne d'action : bouton compact + montant d'économie sur la même ligne. */ .pack-mention__list { list-style: none; margin: .45rem 0 .1rem; padding: 0; font-family: var(--font-serif); font-size: .85rem; color: var(--ink); } .pack-mention__list li { position: relative; padding-left: .95rem; line-height: 1.45; } .pack-mention__list li::before { content: "–"; position: absolute; left: 0; color: var(--gold); } /* Tableau des articles d'une catégorie de documentation (Article · Auteur · Source). */ .doc-table { width: 100%; border-collapse: collapse; margin: 1.6rem 0 3rem; } .doc-table th { text-align: left; font-family: var(--font-sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--muted); padding: .7rem 1rem; border-bottom: 2px solid var(--line); background: var(--cream-2); } .doc-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .doc-table tr:hover td { background: var(--cream); } .doc-table__art a { font-family: var(--font-serif); font-size: 1.04rem; color: var(--brand-red); } .doc-table__art a:hover { text-decoration: underline; } .doc-table__auth { font-family: var(--font-sans); font-size: .88rem; color: var(--ink-soft); white-space: nowrap; } .doc-table__src { font-family: var(--font-sans); font-size: .85rem; color: var(--ink-soft); } @media (max-width: 680px) { .doc-table, .doc-table thead, .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; } .doc-table thead { display: none; } .doc-table td { border: 0; padding: .1rem 0; } .doc-table tr { border-bottom: 1px solid var(--line); padding: .85rem 0; } .doc-table__auth, .doc-table__src { white-space: normal; } .doc-table__src::before { content: "Source : "; color: var(--muted); } } .pack-mention__action { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .85rem; margin-top: .5rem; } .pack-mention__action .btn { display: inline-flex; align-items: center; line-height: 1.15; padding: .42rem 1rem; font-size: .7rem; } .pack-mention__save { color: var(--gold); font-weight: 700; font-size: .84rem; } /* Éventail des médaillons des livres du pack */ .pack-fan { display: flex; align-items: flex-end; flex-shrink: 0; padding: .3rem .6rem .1rem 1.1rem; } .pack-fan__med { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface); margin-left: -14px; box-shadow: 0 2px 8px rgba(20, 16, 16, .22); transform-origin: bottom center; transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 9deg)); } .pack-fan__med:first-child { margin-left: 0; } /* Mobile : l'éventail ne disparaît plus — il passe sous le texte, centré (sinon la mention d'ensemble semblait absente sur téléphone). */ @media (max-width: 560px) { .pack-mention { justify-content: center; } .pack-mention__body { flex-basis: 100%; } .pack-fan:not(.pack-fan--sm) { width: 100%; justify-content: center; padding-left: 0; } } /* Ligne pack dans le panier : éventail compact + contenu */ .cart-pack__info { display: flex; flex-direction: column; } .cart-pack__books { font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; } .pack-fan--sm { padding: .15rem .2rem; flex-shrink: 0; } .pack-fan--sm .pack-fan__med { width: 38px; height: 38px; margin-left: -13px; } .recensions { font-size: 1rem; line-height: 1.7; } /* Accordéon de page (Présentation de la collection / À propos d'une tradition) */ .page-accordion { border: 1px solid var(--line); border-radius: var(--radius); margin: 1.5rem auto 2rem; max-width: none; } .page-accordion > summary { cursor: pointer; list-style: none; font-family: var(--font-sans); font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-red); padding: 1.05rem 1.4rem; display: flex; align-items: center; } .page-accordion > summary::-webkit-details-marker { display: none; } .page-accordion > summary::after { content: "›"; margin-left: auto; font-size: 1.2rem; transition: transform .2s ease; } .page-accordion[open] > summary::after { transform: rotate(90deg); } .page-accordion__content { padding: 0 1.4rem; } .page-accordion__content.prose { max-width: none; margin: 0; } /* ---------- Documentation : cartes illustrées ---------- */ .doc-intro { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; color: var(--ink-soft); font-size: 1.05rem; } .doc-grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding-bottom: 3rem; } .doc-card { background: var(--surface); box-shadow: var(--shadow-soft); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .doc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(26,24,26,.16); text-decoration: none; } .doc-card__media { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; display: flex; align-items: flex-end; } .doc-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,16,.72), rgba(20,16,16,.05) 55%); } .doc-card__title { position: relative; z-index: 1; color: #fff; font-family: var(--font-serif); font-size: 1.15rem; padding: 1rem 1.1rem; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.4); } .doc-card__desc { padding: 1rem 1.1rem 1.2rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; } /* Survol : le titre de la carte grandit progressivement (rappel ancien site) */ .doc-card__title { transition: transform .25s ease; transform-origin: left bottom; } .doc-card:hover .doc-card__title { transform: scale(1.07); } /* ---------- Auteurs : index + fiche ---------- */ .author-grid { display: grid; gap: clamp(1rem, 3vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding-block: 2.5rem; } /* Carte sans photo (contributeurs dérivés dynamiquement) : tuile bordeaux + monogramme en filigrane. */ .author-card--placeholder { background: linear-gradient(150deg, #8b1a2c, #5e0f1d); } .author-card__monogram { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 4.4rem; font-weight: 600; color: rgba(255, 255, 255, .14); line-height: 1; user-select: none; } .author-card { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; align-items: flex-end; transition: transform .2s ease; } .author-card:hover { transform: translateY(-3px); text-decoration: none; } .author-card__img { position: absolute; inset: 0; background-size: cover; background-position: center top; filter: grayscale(100%) contrast(1.02); transition: filter .3s ease; } .author-card:hover .author-card__img { filter: grayscale(100%) brightness(.72); } .author-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,16,.78), rgba(20,16,16,0) 55%); transition: background .3s ease; } .author-card:hover::after { background: linear-gradient(to top, rgba(20,16,16,.92), rgba(20,16,16,.22) 70%); } .author-card__name { position: relative; z-index: 1; color: #fff; font-family: var(--font-sans); font-weight: 700; transition: transform .25s ease; letter-spacing: 1.5px; text-transform: uppercase; font-size: .85rem; padding: 1rem 1.1rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .author-card:hover .author-card__name { transform: translateY(-4px); } .author-hero { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: clamp(1.5rem, 5vw, 3rem); padding-block: 3rem; align-items: start; } .author-hero__photo { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .author-hero__bio { font-size: 1.08rem; line-height: 1.6; } .author-hero__bio p { margin: 0 0 .7em; } .author-hero__bio h1 { margin-top: 0; } @media (max-width: 680px) { .author-hero { grid-template-columns: 1fr; } .author-hero__photo { max-width: 220px; } } .section-title { padding-top: 2rem; text-align: center; font-family: var(--font-serif); color: var(--acc, var(--brand-red)); font-weight: 600; letter-spacing: .01em; } /* Filet doré en soutien sous les intertitres (l'or rehausse, ne remplace pas). */ .section-title::after { content: ""; display: block; width: 64px; height: 2px; margin: .6rem auto 0; background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold) 50%, var(--gold-soft) 82%, transparent); } .section-title + .muted { text-align: center; } /* Fiche livre : resserrer l'espace titre de section → grille de couvertures */ .section-title + .grid-books { padding-top: 1.2rem; } .muted { color: var(--ink-soft); } /* Mobile : intertitres et fiche livre moins aérés. Sur téléphone, 3rem de padding-top sur chaque intertitre + 3rem de padding sous la fiche créaient ~146px de vide mort entre sections (ex. avant « Autres tomes de cette série »). */ @media (max-width: 760px) { .section-title { padding-top: 1.2rem; } .book-detail { padding-block: 1.3rem; } .book-detail__desc > :last-child { margin-bottom: 0; } } /* ---------- Fil d'Ariane (breadcrumb) ---------- */ .breadcrumb { padding-top: 1.5rem; font-family: var(--font-sans); font-size: .78rem; color: var(--ink-soft); } .breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } .breadcrumb__item { display: inline-flex; align-items: center; } .breadcrumb__item + .breadcrumb__item::before { content: "›"; margin: 0 .5em; color: var(--muted); } .breadcrumb a { color: var(--ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--brand-red); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink); } /* ========================================================================= Ajustements MOBILE consolidés (≤760 px puis ≤480 px). Complètent les media queries locales ci-dessus ; aucune règle desktop n'est modifiée. Objectif : empilement propre, aucun débordement horizontal. ========================================================================= */ /* Filet de sécurité global : rien ne doit dépasser horizontalement. */ @media (max-width: 760px) { img, svg, video, iframe { max-width: 100%; } /* La table garde sa largeur fluide (elle tient dans le viewport) ; on resserre seulement le rembourrage des cellules pour gagner de la place. */ .cart-table { table-layout: fixed; width: 100%; } .cart-table th, .cart-table td { padding: .7rem .55rem; word-break: break-word; overflow-wrap: anywhere; } /* Cellule pack : éventail aligné en haut, infos qui passent à la ligne sans chevaucher l'éventail (le bug d'origine venait du align-items:center + largeur de colonne insuffisante). */ .cart-pack .cart-cell { align-items: flex-start; gap: .55rem; } .cart-pack__info { min-width: 0; } .cart-pack__books { overflow-wrap: anywhere; } /* Pied de panier empilé sur mobile : promo puis actions, pleine largeur. */ .cart-foot { flex-direction: column; align-items: stretch; gap: .9rem; } .cart-foot__promo input[type="text"] { flex: 1 1 auto; } .cart-foot__actions .btn { flex: 1 1 auto; text-align: center; } /* Modale : le panneau ne doit jamais dépasser la largeur de l'écran. Le contenu de la TOC (déjà pre-wrap) casse aussi les très longs mots/URL pour éviter qu'un jeton insécable n'élargisse le panneau au-delà du viewport. */ .modal__panel { max-width: calc(100vw - 1.5rem); min-width: 0; } .toc { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .recensions { overflow-wrap: anywhere; } /* Fiche livre : couverture empilée centrée et de largeur raisonnable (la colonne .book-detail__side passe en static <760px via la règle locale). */ .book-detail__cover > img { max-width: 300px; margin-inline: auto; } /* Anti-débordement des gros titres (titres d'œuvres très longs, sans espace). */ .book-detail__main h1, .author-hero__bio h1, .prose h1, .feature__body h2 { overflow-wrap: anywhere; } /* Footer : colonnes empilées et centrées. */ .site-footer__inner { flex-direction: column; gap: 2rem; text-align: center; } } @media (max-width: 480px) { html { font-size: 17.5px; } /* Header : nav et actions empilés proprement sous le logo. */ .site-header__inner { gap: .6rem 1rem; } .nav { gap: .35rem .9rem; font-size: .72rem; } /* Hero (.feature) : déjà 1 colonne <680px ; on resserre les marges. */ .feature { padding: 1.3rem; margin: 1rem 0; } /* Fiche livre : médaillon-sceau centré (cf. règle 760px) un peu plus petit. */ .book-detail__main .medaillon { width: 72px; margin: .1rem auto .8rem; } /* Ligne d'achat : prix sous le type si la ligne devient trop étroite, et le formulaire d'ajout occupe toute la largeur (qty + bouton alignés). */ .buy-row { gap: .8rem 1rem; } .add-to-cart { width: 100%; } .add-to-cart .btn { flex: 1 1 auto; padding-inline: 1rem; text-align: center; justify-content: center; } /* Pack : sur la fiche, l'éventail passe au-dessus du texte (flex column) ; dans le panier, l'éventail compact reste visible mais ne chevauche plus. */ .pack-mention { gap: .7rem; } .pack-mention__txt { flex-basis: 100%; } .cart-pack .cart-cell { flex-wrap: wrap; } .cart-pack .pack-fan--sm { flex-shrink: 0; } /* Modale : panneau plein écran moins une petite marge, scroll vertical. */ .modal { padding: .75rem; } .modal__panel { max-height: 92vh; padding: 2rem 1.2rem; } /* Grilles : 2 colonnes garanties même quand auto-fill voudrait n'en mettre qu'une (minmax 190/220/250 trop large sous 480px). */ .grid-books { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; padding-block: 2rem; } .doc-grid, .author-grid { grid-template-columns: repeat(2, 1fr); } /* Breadcrumb : on évite qu'un titre très long pousse la largeur. */ .breadcrumb__list { font-size: .74rem; } /* Accordéons : padding latéral réduit. */ .page-accordion > summary { padding: .9rem 1.1rem; } .page-accordion__content { padding-inline: 1.1rem; } } /* ---- Compléments mobile ≤600px : justification & empilements fins ---- */ @media (max-width: 600px) { /* Justifié aussi sur mobile : hyphens:auto + lang="fr" coupe les mots aux bonnes syllabes, ce qui évite les gros trous d'une colonne étroite. */ .prose p, .book-detail__desc, .book-chapeau { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .pull { text-align: left; } /* Auteur : photo centrée au-dessus de la bio (la grille est déjà 1 col <680px). */ .author-hero { justify-items: center; text-align: center; } .author-hero__photo { margin-inline: auto; } .author-hero__bio { text-align: left; width: 100%; } /* Ligne d'achat : info + formulaire empilés pleine largeur, sans débordement. */ .buy-row { grid-template-columns: 1fr; gap: .5rem; } .buy-row__cart { display: none; } .buy-row__action { justify-self: stretch; } /* Panier : champs quantité plus étroits + table compacte (l'input a un style inline width:4rem ; on le resserre pour éviter le débordement). */ .cart-table { font-size: .84rem; } .cart-table input[type="number"] { width: 3.2rem !important; } } /* ---------- Éditoriaux : « Présentation » en lettres datées ---------- */ .home-editorial { padding-block: 1rem 3.5rem; } .home-editorial--top { padding-top: 1.2rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--line); } .home-editorial--top .section-title { padding-top: 1rem; } /* Mobile : « À la une » + collections remontent au-dessus de la longue Présentation (sinon le catalogue est enfoui sous le pli sur téléphone). */ @media (max-width: 760px) { .home-flow { display: flex; flex-direction: column; } /* CRITIQUE : en flex-column, la largeur d'un item tombe sur la largeur INTRINSÈQUE de son contenu (le carrousel « À la une » poussait .home-featured à ~950px sur un écran de 360 → slide coupée à droite). min-width:0 ne suffit pas (le minimum auto vise l'axe principal = hauteur). max-width:100% borne la largeur à celle du conteneur (l'écran). Vérifié : 950px → 360px. */ .home-flow > * { min-width: 0; max-width: 100%; } .home-flow .home-catalogue { order: 1; } .home-flow .home-editorial--top { order: 2; } } .editorials { max-width: 720px; margin: 1.2rem auto 0; } .editorial { padding-top: 2.4rem; } .editorial:first-child { padding-top: .4rem; } .editorial + .editorial { border-top: 1px solid var(--line); } .editorial__date { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--brand-red); margin: 0 0 1.05rem; } .editorial__body p { text-align: justify; hyphens: auto; line-height: 1.75; margin: 0 0 1.05rem; } .editorial__body > p:first-of-type::first-letter { float: left; font-family: var(--font-serif); font-size: 3.1rem; line-height: .82; padding: .35rem .5rem 0 0; color: var(--brand-red); } .editorial__body ul { margin: 1.1rem 0 1.3rem; padding-left: 1.4rem; list-style: none; } .editorial__body li { position: relative; text-align: justify; line-height: 1.65; margin-bottom: .6rem; } .editorial__body li::before { content: "—"; position: absolute; left: -1.4rem; color: var(--brand-red); } .editorial__body a { color: var(--brand-red); text-decoration: none; border-bottom: 1px solid rgba(139, 26, 44, .3); } .editorial__body a:hover { border-bottom-color: var(--brand-red); } @media (max-width: 600px) { .editorial__body p, .editorial__body li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .editorial__body > p:first-of-type::first-letter { font-size: 2.6rem; } } /* ---------- Page Contact (cartes) ---------- */ .contact-hero { text-align: center; max-width: 660px; margin: .5rem auto 2.6rem; } .contact-hero h1 { margin-bottom: .6rem; } .contact-hero .lead { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.4rem; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 1.3rem; margin-bottom: 3.5rem; align-items: stretch; } .contact-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; } .contact-card--main { background: var(--cream-2); border-color: var(--brand-red-light); } .contact-card h2 { margin: 0 0 .8rem; color: var(--brand-red); font-size: 1.25rem; } .contact-card h3 { margin: 0 0 .7rem; color: var(--brand-red); font-size: 1.02rem; } .contact-card p { line-height: 1.65; margin: 0 0 .9rem; } .contact-card .btn { margin-top: auto; align-self: flex-start; } .contact-addr { font-style: normal; } .contact-lines a { color: var(--brand-red); text-decoration: none; } .contact-lines a:hover { text-decoration: underline; } .contact-social { color: var(--brand-red); text-decoration: none; font-weight: 600; } /* ---------- Accueil : tuiles « Nos collections » (centrées + visuel) ---------- */ .collection-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin: 1.6rem auto 1rem; max-width: 720px; } .collection-tile { width: 200px; text-align: center; text-decoration: none; color: inherit; transition: transform .2s ease; } .collection-tile:hover { transform: translateY(-5px); text-decoration: none; } .collection-tile__cover { display: block; margin-bottom: 1rem; } .collection-tile__cover img { width: 100%; height: 240px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .14)); } .collection-tile__name { /* Hauteur FIXE (2 lignes max) : sinon, au déploiement, les noms des tuiles rétrécies wrappent sur plus de lignes -> la tuile grandit -> le conteneur et le pied de page descendent. Bloqué à 2 lignes = hauteur constante. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; line-height: 1.2; font-family: var(--font-serif); font-size: 1.18rem; color: var(--brand-red); margin-bottom: .15rem; } .collection-tile__count { display: block; font-size: .82rem; color: var(--ink-soft); } @media (max-width: 520px) { .collection-tiles { gap: 1.4rem; } .collection-tile { width: 132px; } .collection-tile__cover img { height: 168px; } } /* ---------- Accueil : hero + intertitres de section ---------- */ .hero__eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 700; color: var(--brand-red); margin: 0 0 .55rem; white-space: nowrap; } @media (max-width: 480px) { .hero__eyebrow { white-space: normal; letter-spacing: .1em; } } .hero__lead { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); margin: .5rem auto 1.7rem; max-width: 38ch; line-height: 1.5; } .hero__cta { display: flex; flex-wrap: nowrap; gap: .9rem; justify-content: center; } .hero__cta .btn { white-space: nowrap; flex: 0 0 auto; padding: .7rem 1.8rem; } @media (max-width: 560px) { .hero__cta { flex-wrap: wrap; } .hero__cta .btn { flex: 1 1 auto; white-space: normal; } } .section-sub { text-align: center; color: var(--ink-soft); font-style: italic; margin: -.6rem 0 1.8rem; } /* ---------- Éditoriaux en accordéon (lettres datées repliables) ---------- */ .editorials--accordion { margin-top: 1rem; } .editorial-acc { border-top: 1px solid var(--line); } .editorial-acc:first-child { border-top: 0; } .editorial-acc__date { cursor: pointer; list-style: none; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--brand-red); padding: 1.15rem .2rem; display: flex; align-items: center; gap: .7rem; transition: opacity .15s; } .editorial-acc__date:hover { opacity: .72; } .editorial-acc__date::-webkit-details-marker { display: none; } .editorial-acc__date::before { content: "+"; font-size: 1.15rem; line-height: 1; font-weight: 400; } .editorial-acc[open] > .editorial-acc__date::before { content: "\2013"; } /* – */ .editorial-acc[open] > .editorial-acc__date { padding-bottom: .4rem; } .editorial-acc > .editorial__body { padding: 0 .2rem 1.7rem; } /* ---------- Éditoriaux en onglets (3 dates sur une ligne, une lettre à la fois) ---------- */ .editorial-tabs { margin-top: 1.2rem; } .editorial-tabs__nav { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .editorial-tab { flex: 1 1 0; min-width: 0; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--ink-soft); padding: 1rem .6rem; transition: color .15s ease, border-color .15s ease; } .editorial-tab:hover { color: var(--brand-red); } .editorial-tab.is-active { color: var(--brand-red); border-bottom-color: var(--brand-red); } .editorial-panel { max-width: 960px; margin: 0 auto; padding-top: 1.9rem; } .editorial-tab:focus { outline: none; } .editorial-tab:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -3px; } @media (max-width: 560px) { /* Onglets empilés : moins d'espace vertical (padding + marges resserrés). */ .editorial-tabs { margin-top: .6rem; } .editorial-tab { flex-basis: 100%; border-bottom: 1px solid var(--line); margin-bottom: 0; padding: .58rem .6rem; } .editorial-tab.is-active { border-bottom-color: var(--brand-red); } .editorial-tabs__nav { border-bottom: 0; } .editorial-panel { padding-top: 1.1rem; } } /* ========================================================================= Accessibilité & confiance — skip-link, focus visible global, réassurance, flash panier, badge stock, CGV checkout, panier responsive en cartes. Palette existante uniquement (--brand-red, --cream, --line, --ink…). ========================================================================= */ /* ---------- Skip-link (lien d'évitement vers #main) ---------- */ /* Hors écran par défaut, net et visible au focus, en haut à gauche. */ .skip-link { position: absolute; top: -100px; left: .75rem; z-index: 1000; background: var(--brand-red); color: #fff; font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .5px; text-decoration: none; padding: .65rem 1.1rem; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: top .15s ease; } .skip-link:focus { top: .75rem; outline: 2px solid #fff; outline-offset: 2px; text-decoration: none; } /* La cible #main ne doit pas afficher d'anneau (elle reçoit le focus par programme). */ #main:focus { outline: none; } /* ---------- Focus visible global (clavier) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; } /* ---------- Réassurance (rangée de 3 items sobres : icône + texte) ---------- */ .reassurance { list-style: none; margin: 1.1rem 0; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 1.1rem 1.6rem; font-family: var(--font-sans); } .reassurance__item { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.35; } .reassurance__item svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--brand-red); stroke: currentColor; fill: none; } /* En dessous de 2 colonnes confortables : empilement propre, aligné à gauche. */ @media (max-width: 720px) { .reassurance { grid-template-columns: 1fr; justify-items: start; gap: .9rem; max-width: 360px; margin-inline: auto; } .reassurance__item { width: 100%; } } /* ---------- Flash panier (bandeau discret de confirmation, role=status) ---------- */ .cart-flash { margin: 0 auto; max-width: var(--maxw); background: var(--cream-2); color: var(--brand-red-dark); border: 1px solid var(--brand-red-light); border-left: 3px solid var(--brand-red); border-radius: var(--radius); font-family: var(--font-sans); font-size: .88rem; padding: .7rem 1.1rem; } .cart-flash a { color: var(--brand-red); font-weight: 700; text-decoration: underline; } .cart-flash a:hover { color: var(--brand-red-dark); } /* ---------- Stock : pastille « Épuisé » + bouton désactivé ---------- */ .stock-badge { display: inline-block; font-family: var(--font-sans); font-size: .66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: .18rem .6rem; border-radius: var(--radius-pill); line-height: 1.4; } .stock-badge--out { background: var(--brand-red); color: #fff; } /* Bouton à l'état désactivé (Épuisé) : grisé, non cliquable. */ .btn.is-disabled { opacity: .5; pointer-events: none; cursor: default; filter: grayscale(60%); } /* ---------- Checkout : case à cocher CGV ---------- */ .checkout__cgv { display: flex; align-items: flex-start; gap: .65rem; margin: 1.1rem 0 .4rem; padding: .85rem 1rem; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-card); font-family: var(--font-sans); font-size: .82rem; line-height: 1.6; color: var(--ink-soft); cursor: pointer; } .checkout__cgv-text { flex: 1 1 auto; } .checkout__cgv-note { display: inline-block; margin-top: .15rem; font-size: .76rem; opacity: .85; } .checkout__cgv input[type="checkbox"] { flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin-top: .2rem; accent-color: var(--brand-red); cursor: pointer; } .checkout__cgv a { color: var(--brand-red); text-decoration: underline; } .checkout__cgv a:hover { color: var(--brand-red-dark); } /* Widget point relais Mondial Relay (checkout). */ .mr-relay__hint { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; margin: .2rem 0 .7rem; } #MR_Widget { width: 100%; min-height: 470px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); } /* Le widget MR pose un style inline width:40px sur le champ CP (.Arg2) : trop étroit pour 4 à 6 caractères (BE 4, FR 5, NL « 1234 AB »). !important pour battre l'inline. */ #MR_Widget input.Arg2 { width: 80px !important; } .mr-relay__selected { font-family: var(--font-serif); color: var(--brand-red); margin-top: .7rem; font-size: .96rem; line-height: 1.4; } /* Domicile : liste déroulante des transporteurs (le moins cher en tête). */ .home-carriers { margin: .6rem 0 .2rem; padding: .7rem 1rem .8rem; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-card); } .home-carriers__title { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-soft); margin: 0 0 .4rem; } .home-carrier { display: flex; align-items: center; gap: .7rem; padding: .5rem .15rem; border-top: 1px solid var(--line); cursor: pointer; font-family: var(--font-sans); } .home-carrier:first-child { border-top: 0; } .home-carrier__name { flex: 1 1 auto; font-size: .95rem; color: var(--ink); } .home-carrier__best { display: inline-block; margin-left: .35rem; font-size: .6rem; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-red); border: 1px solid var(--brand-red-light); border-radius: 4px; padding: .04rem .35rem; vertical-align: middle; } .home-carrier__price { flex-shrink: 0; font-weight: 600; color: var(--brand-red); } /* ---------- Panier responsive : table en cartes empilées (≤560px) ---------- */ @media (max-width: 560px) { .cart-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Corps : chaque ligne devient une carte empilée (scopé au tbody pour ne pas casser le tfoot). */ .cart-table, .cart-table tbody, .cart-table tbody tr, .cart-table tbody td { display: block; width: 100%; } .cart-table tbody tr { margin-bottom: 1rem; padding: .4rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .cart-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; padding: .55rem 0; border-bottom: 1px solid var(--line); } .cart-table tbody tr td:last-child { border-bottom: 0; } .cart-table tbody td::before { content: attr(data-label); font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 1px; font-size: .68rem; color: var(--ink-soft); flex-shrink: 0; } /* La cellule titre (avec médaillon) reste lisible : contenu poussé à droite du libellé. */ .cart-table tbody td.cart-title, .cart-table tbody td.cart-pack { justify-content: flex-end; } /* Cartes empilées : colonne médaillons compacte (pas de largeur fixe sur petit écran). */ .cart-cell { grid-template-columns: auto 1fr; gap: .55rem; } /* Pied de tableau (totaux) : lignes label/montant alignées, colspan ignoré proprement. */ .cart-table tfoot { display: block; } .cart-table tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .9rem; } .cart-table tfoot td { padding: .2rem 0; text-align: right; } .cart-table tfoot td[colspan] { text-align: left; color: var(--ink-soft); } } /* === Cartes video YouTube (transformerLiensYoutube) ============================ Utilisees dans description_html des livres qui referencent une serie de videos YouTube. Grille auto-responsive, miniature 16:9 + bouton play en surimpression + titre dessous. */ /* Encart « Vidéos » : un seul cadre regroupant les liens (pas de miniature), chaque lien préfixé d'une icône play + suffixé d'un tag « vidéo ». */ .video-encart { margin: 1.8rem 0; border: 1px solid var(--brand-red-light); border-radius: var(--radius-card); background: var(--cream-2); padding: 1rem 1.3rem 1.1rem; box-shadow: 0 6px 18px rgba(139, 26, 44, .07); } .video-encart__head { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; font-family: var(--font-sans); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--brand-red); } .video-encart__list { display: flex; flex-direction: column; } .video-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .1rem; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.4; } .video-link:first-child { border-top: 0; } .video-link:hover { color: var(--brand-red); text-decoration: none; } .video-link__icon { flex-shrink: 0; color: var(--brand-red); display: inline-flex; opacity: .92; transition: transform .15s ease; } .video-link:hover .video-link__icon { transform: scale(1.08); } .video-link__num { color: var(--brand-red); font-weight: 600; margin-right: .35rem; } .video-link__title { flex: 1 1 auto; } .video-link__tag { flex-shrink: 0; font-family: var(--font-sans); font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--brand-red-light); border-radius: 4px; padding: .12rem .45rem; } @media (max-width: 600px) { .video-link__tag { display: none; } .video-link { gap: .6rem; } } /* === Page Merci — récapitulatif de commande + coordonnées de virement ======== */ .merci__head { text-align: center; } .merci__back { text-align: center; margin-top: 2rem; } .order-recap { max-width: 560px; margin: 2rem auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.6rem 1.8rem; font-family: var(--font-sans); } .order-recap__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .8rem; } .order-recap__label { text-transform: uppercase; letter-spacing: 1px; font-size: .68rem; color: var(--ink-soft); } .order-recap__ref { font-family: var(--font-serif); font-size: 1.1rem; color: var(--brand-red); letter-spacing: .5px; } .order-recap__items { list-style: none; margin: 0 0 .6rem; padding: 0; } .order-recap__item { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .9rem; } .order-recap__it-qty { color: var(--ink-soft); } .order-recap__it-sub { flex-shrink: 0; font-weight: 600; } .order-recap__totals { margin: 0; border-top: 1px solid var(--line); padding-top: .7rem; } .order-recap__totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .88rem; } .order-recap__totals dt, .order-recap__totals dd { margin: 0; } .order-recap__totals .order-recap__discount { color: var(--brand-red); } .order-recap__totals .order-recap__total { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--brand-red); } .order-recap__relay { font-size: .86rem; color: var(--ink-soft); margin: .8rem 0 0; } .order-recap__bank { margin-top: 1.2rem; background: var(--cream-2); border: 1px solid var(--brand-red-light); border-radius: var(--radius); padding: 1.1rem 1.3rem; } .order-recap--bankonly { max-width: 460px; } .order-recap--bankonly .order-recap__bank { margin-top: 0; } .order-recap__bank-title { display: block; text-transform: uppercase; letter-spacing: 1px; font-size: .68rem; font-weight: 700; color: var(--brand-red); margin-bottom: .6rem; } .order-recap__bank dl { margin: 0; } .order-recap__bank dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; font-size: .9rem; } .order-recap__bank dt { color: var(--ink-soft); margin: 0; } .order-recap__bank dd { margin: 0; font-weight: 600; text-align: right; } .order-recap__bank-amount { color: var(--brand-red); } .order-recap__bank-note { font-size: .78rem; color: var(--ink-soft); margin: .6rem 0 0; } /* === Liens de secours (404 / recherche vide) ================================ */ .error-links { font-family: var(--font-sans); font-size: .92rem; margin: 1.4rem 0; color: var(--ink-soft); } .error-links a { color: var(--brand-red); } .search-launchpad { max-width: 620px; margin: 2.5rem auto 0; text-align: center; } .search-launchpad__title { font-family: var(--font-sans); font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1rem; } .search-launchpad__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .search-launchpad__links a { font-family: var(--font-sans); font-size: .86rem; color: var(--brand-red); border: 1px solid var(--brand-red-light); border-radius: var(--radius-pill); padding: .45rem 1.1rem; text-decoration: none; } .search-launchpad__links a:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } /* === Accroche éditoriale (hero) ============================================ */ .hero__tagline { max-width: 52ch; margin: 1rem auto 0; font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft); } /* === Page À propos (récit institutionnel) ================================== */ .about-prose { max-width: 720px; margin: 0 auto; } .about-prose .about-lead { font-size: 1.18rem; line-height: 1.65; color: var(--ink); font-style: italic; } .about-prose h2 { font-family: var(--font-serif); color: var(--brand-red); font-size: 1.35rem; margin: 2.2rem 0 .6rem; } .about-prose a { color: var(--brand-red); text-decoration: none; border-bottom: 1px solid transparent; } .about-prose a:hover { border-bottom-color: var(--brand-red); } /* === Conférences : présentation du cycle + résumés de séance =============== */ .conf-intro { max-width: 680px; margin: 1.8rem auto 0; text-align: center; color: var(--ink-soft); line-height: 1.7; } .conf-item__desc { font-family: var(--font-serif); color: var(--ink); line-height: 1.6; margin: .5rem 0 0; } .conf-item__bio { font-size: .86rem; color: var(--ink-soft); font-style: italic; margin: .35rem 0 0; } /* === Galerie d'images d'article (ex-diaporamas Cycle2 reconstruits) ========= */ .article-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.3rem; margin: 1.8rem 0; } .article-gallery__item { margin: 0; } .article-gallery__item img { width: 100%; height: auto; margin: 0; display: block; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .article-gallery__item figcaption { margin-top: .45rem; font-family: var(--font-sans); font-size: .78rem; color: var(--ink-soft); font-style: italic; line-height: 1.4; } /* === Commentaires des fiches livres (modérés) ============================== */ .comments { max-width: 760px; margin: 3rem auto 1rem; padding-top: 2rem; border-top: 1px solid var(--rule, #e7e1d8); } .comments__title { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 1.3rem; } .comments__empty { color: var(--ink-soft); font-style: italic; } .comment-flash { font-family: var(--font-sans); font-size: .92rem; padding: .7rem 1rem; border-radius: var(--radius); margin: 0 0 1.3rem; } .comment-flash--ok { background: #eef6ee; color: #2f6b3a; border: 1px solid #cfe6d2; } .comment-flash--err { background: #fbeeee; color: #9a3b3b; border: 1px solid #f0d2d2; } .comment-list { list-style: none; margin: 0 0 1.5rem; padding: 0; } /* Arborescence : réponses indentées sous le message parent, reliées par un filet bordeaux + flèche « ↳ » devant l'auteur. */ .comment-list--replies { margin: .7rem 0 0 .9rem; padding-left: 1.2rem; border-left: 2px solid var(--brand-red-light, #d8b8b8); } .comment-list--replies > .comment > .comment__head::before { content: "↳"; color: var(--brand-red); font-size: .9em; margin-right: .1rem; } .comment { margin: 0 0 1.1rem; } .comment__head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; } .comment__author { font-family: var(--font-sans); font-weight: 600; color: var(--ink); text-decoration: none; } a.comment__author:hover { color: var(--brand-red); text-decoration: underline; } .comment__date { font-family: var(--font-sans); font-size: .74rem; color: var(--ink-soft); } /* Interligne maîtrisé : paragraphes serrés (.45em), pas de

aérés. */ .comment__body { margin: .25rem 0; font-size: .98rem; line-height: 1.55; } .comment__body p { margin: 0 0 .45em; } .comment__body p:last-child { margin-bottom: 0; } .comment__reply-btn { background: none; border: 0; padding: 0; font-family: var(--font-sans); font-size: .8rem; color: var(--brand-red); cursor: pointer; } .comment__reply-btn:hover { text-decoration: underline; } .comment-form-wrap { margin-top: 2rem; } .comment-form__title { font-family: var(--font-serif); font-size: 1.2rem; margin: 0 0 .3rem; } .comment-form__note { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft); margin: 0 0 1rem; } .comment-form__row { display: flex; gap: 1rem; flex-wrap: wrap; } .comment-form__row .comment-field { flex: 1 1 220px; } .comment-field { display: block; margin: 0 0 .9rem; font-family: var(--font-sans); } .comment-field > span { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: .25rem; } .comment-field input, .comment-field textarea { width: 100%; padding: .6rem .7rem; font: inherit; font-family: var(--font-sans); border: 1px solid var(--rule, #d8d2c8); border-radius: var(--radius); background: #fff; color: var(--ink); box-sizing: border-box; } .comment-field textarea { resize: vertical; min-height: 7rem; } .comment-field input:focus, .comment-field textarea:focus { outline: none; border-color: var(--brand-red); } .comment-form__replying { font-family: var(--font-sans); font-size: .85rem; color: var(--ink-soft); margin: 0 0 .7rem; } .comment-form__replying button { background: none; border: 0; padding: 0; color: var(--brand-red); cursor: pointer; font: inherit; } .comment-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .comment-form altcha-widget { display: block; margin: .3rem 0 1rem; max-width: 320px; } .comment-form__actions { margin-top: .3rem; } @media (max-width: 600px) { .comments { margin-top: 2rem; } .comment-form__row { gap: 0; } } /* === Partage social (fiches livres + articles) ============================= */ .share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0 .2rem; } .article .share { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule, #e7e1d8); } .share__label { font-family: var(--font-sans); font-size: .82rem; letter-spacing: .02em; color: var(--ink-soft); margin-right: .15rem; } .share__label.is-native { cursor: pointer; } .share__label.is-native:hover { color: var(--brand-red); } .share__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill, 999px); color: var(--brand-red); border: 1px solid var(--brand-red-light, #d8b8b8); background: transparent; cursor: pointer; position: relative; transition: background .15s ease, color .15s ease, border-color .15s ease; } .share__btn:hover { background: var(--brand-red); color: #fff; border-color: var(--brand-red); } .share__btn svg { display: block; } .share__copied { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-sans); font-size: .72rem; background: var(--ink, #2b2b2b); color: #fff; padding: .2rem .45rem; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .share__btn.is-copied .share__copied { opacity: 1; } /* === Réseaux sociaux (icônes en rouge Beya) ================================ */ .social-row { display: flex; gap: .7rem; margin-top: .4rem; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); color: var(--brand-red); border: 1px solid var(--brand-red-light); transition: background .15s ease, color .15s ease; } .social-link:hover { background: var(--brand-red); color: #fff; text-decoration: none; } /* === Logo hero (accueil) : figure + mot-symbole « ÉDITIONS BEYA » en rouge == */ .hero__mark { margin: 0 0 .3rem; line-height: 0; } .hero__mark img { width: clamp(60px, 7.5vw, 86px); height: auto; display: inline-block; } .hero__wordmark { color: var(--brand-red); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 600; margin: 0 0 .6rem; } .hero__tagline { margin: 0 auto 1.3rem; max-width: 32em; font-size: 1rem; } /* === Carrousel « À la une » (accueil) ===================================== */ .home-flow { overflow-x: clip; } /* mobile : empêche tout élément (carrousel…) de déborder sur le bord */ .home-featured { padding-top: clamp(.5rem, 1.5vw, 1.2rem); } .featured-carousel { margin: 0; overflow: hidden; max-width: 100%; } .featured-carousel__viewport { overflow: hidden; overflow: clip; width: 100%; max-width: 100%; transition: height .35s ease; } /* align-items:flex-start -> chaque slide prend sa hauteur NATURELLE (les slides courts ne sont plus étirés à la hauteur du plus haut). La hauteur réelle du carrousel est pilotée en JS sur le slide affiché (adjustHeight). */ .featured-carousel__track { display: flex; flex-wrap: nowrap; align-items: flex-start; transition: transform .45s ease; } .featured-slide { flex: 0 0 100%; max-width: 100%; box-sizing: border-box; min-width: 0; overflow: clip; display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 7vw, 7rem); padding: clamp(.3rem, 1vw, .8rem) 1rem clamp(1rem, 3vw, 2rem); } .featured-slide__cover { flex: 0 0 auto; width: clamp(190px, 27vw, 290px); display: block; } .featured-slide__cover img { width: 100%; height: auto; box-shadow: 5px 8px 14px rgba(0, 0, 0, .30); border-radius: var(--radius); transition: transform .35s ease, box-shadow .35s ease; } /* Couverture unique : léger soulèvement au survol (même lift que .book-card / .collection-tile). */ .featured-slide:hover .featured-slide__cover img { transform: translateY(-6px); box-shadow: 8px 16px 28px rgba(0, 0, 0, .36); } .featured-slide__body { flex: 1 1 auto; max-width: 680px; } /* Ensembles : éventail de TOUTES les couvertures, à la même échelle que les autres couvertures. */ .featured-slide__fan { flex: 0 0 auto; } .featured-slide--pack .pack-card__fan { height: clamp(240px, 34vw, 340px); } /* Largeur de l'éventail FIGÉE sur l'état déployé (margin -95) : le texte à droite ne reflue plus au survol. L'animation des couvertures est conservée via transform (purement visuel, n'affecte PAS la mise en page) : resserré au repos, écarté au survol. var(--i) = index de la couverture (0,1,2,3). */ .featured-slide--pack .pack-card__cov { margin-left: -95px; transform: translateX(calc(var(--i, 0) * -35px)); transition: transform .35s ease; } .featured-slide--pack .pack-card__cov:first-child { margin-left: 0; } @media (max-width: 760px) { .featured-slide { flex-direction: column; text-align: center; gap: 1.2rem; } .featured-slide__cover { width: 160px; } .featured-slide__body { max-width: 100%; } /* Couvertures de l'ensemble à la MÊME taille que le livre seul (160px de large, comme .featured-slide__cover) — réduit sur mobile pour ne pas trop manger l'écran. Sizées en LARGEUR (avant en hauteur -> trop petites et incohérentes). */ .featured-slide--pack .pack-card__fan { height: auto; align-items: flex-end; } .featured-slide--pack .pack-card__cov { width: 160px; height: auto; max-width: none; margin-left: -110px; } .featured-slide--pack .pack-card__cov:first-child { margin-left: 0; } } .featured-slide__eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 .5rem; } .featured-slide__title { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin: 0 0 .8rem; } .featured-slide__title a { color: var(--brand-red); } .featured-slide__desc { color: var(--ink-soft); line-height: 1.65; margin: 0 0 1.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* CTA du carrousel : cadres plus compacts (texte/cadre rééquilibré) */ .featured-slide__cta-row .btn { padding: .6rem 1.4rem; font-size: .68rem; letter-spacing: 1.8px; } .featured-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-bottom: .4rem; } .featured-carousel__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .featured-carousel__arrow:hover { border-color: var(--brand-red); color: var(--brand-red); } .featured-carousel__dots { display: flex; gap: .5rem; } .featured-carousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .15s ease, transform .15s ease; } .featured-slide__dot.is-active, .featured-carousel__dot.is-active { background: var(--brand-red); transform: scale(1.3); } /* === Formulaire de contact ================================================ */ .contact-form-wrap { margin: 0; background: var(--cream-2); border: 1px solid var(--brand-red-light); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.2rem); } /* Disposition harmonieuse : intro centrée, puis form + coordonnées côte à côte, puis les 3 cartes services en rangée. */ .contact-intro { text-align: center; color: var(--ink-soft); max-width: 560px; margin: .5rem auto 0; line-height: 1.6; } .contact-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 2.4rem); align-items: stretch; margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); } .contact-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } @media (max-width: 760px) { .contact-top { grid-template-columns: 1fr; } .contact-services { grid-template-columns: 1fr; } } .contact-form-wrap h2 { margin: 0 0 1.1rem; color: var(--brand-red); font-size: 1.25rem; } .contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .contact-form__field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem; } .contact-form__field label { font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--ink-soft); } .contact-form input, .contact-form textarea { width: 100%; font: inherit; color: inherit; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand-red-light); outline-offset: 1px; border-color: var(--brand-red); } .contact-form textarea { resize: vertical; min-height: 130px; } .contact-form .btn { margin-top: .4rem; } .contact-form__flash { padding: .8rem 1rem; border-radius: var(--radius); margin: 0 0 1.1rem; font-size: .92rem; } .contact-form__flash--ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; } .contact-form__flash--err { background: #fdecea; color: #8b1a10; border: 1px solid #f5b7b1; } .contact-card .contact-sub { margin: 1.2rem 0 .25rem; font-family: var(--font-sans); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-red); } /* Titres de groupe « par langue » (page Langues étrangères) */ .lang-group { display: flex; align-items: center; gap: 1rem; text-align: center; font-family: var(--font-serif); color: var(--brand-red); font-weight: 700; letter-spacing: .04em; font-size: clamp(1.35rem, 3.2vw, 1.75rem); margin: 2.6rem 0 1.3rem; } .lang-group::before, .lang-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-red-light), transparent); } .lang-group:first-of-type { margin-top: 1rem; } /* Accueil : Dernières parutions + bandeau « Découvrez aussi… » */ .home-latest { margin-top: clamp(1.6rem, 4vw, 2.6rem); } /* Dernières parutions : épurer (moins « catalogue de vente ») — pas de prix ni n° de collection */ .home-latest .badge-collection, .home-latest .book-card__price { display: none; } .discover { margin: clamp(2rem, 5vw, 3.5rem) 0 0; } .discover__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem; } .discover__card { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease; } .discover__card:hover { border-color: var(--brand-red-light); transform: translateY(-2px); text-decoration: none; } .discover__title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--brand-red); } .discover__desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; } @media (max-width: 700px) { .discover__grid { grid-template-columns: 1fr; } } /* ---------- Page d'une conférence (présentation riche) ---------- */ .conference { padding-bottom: 3rem; } .conference__head { text-align: center; max-width: none; margin: .5rem auto 1.6rem; } /* Titre + meta centrés sur la COLONNE des paragraphes (largeur de .conference__main), pas sur toute la page. Sous 760px (grille 1 colonne) : pleine largeur. */ @media (min-width: 761px) { .conference__head { width: calc(100% - 320px - clamp(1.5rem, 4vw, 3rem)); margin-left: 0; margin-right: auto; } } .conference__eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; color: var(--brand-red); margin: 0 0 .8rem; } .conference__title { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 .7rem; } .conference__meta { font-family: var(--font-sans); color: var(--ink-soft); font-size: .95rem; } .conference__visual { max-width: 900px; margin: 0 auto 2rem; } .conference__visual img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .conference__grid { display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .conference__desc { font-size: 1.05rem; line-height: 1.8; max-width: none; margin-inline: 0; } .conference__speaker { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .conference__speaker h2 { font-size: 1.2rem; margin: 0 0 1rem; } .conference__speaker-body { display: flex; gap: 1.4rem; align-items: flex-start; } /* Colonne photo à largeur définie (le 32% précédent, dans un item flex auto, gonflait le span à 500px et créait un grand vide avant le texte). Le texte remplit le reste. */ .conference__speaker-photo { flex: 0 0 clamp(150px, 18vw, 210px); } /* Sources en 16:9 (sujet centré, marges latérales vides) -> cadrage portrait 4:5 qui rogne les côtés vides sans zoomer sur le visage (cadrage moins serré). */ .conference__speaker-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: var(--radius); display: block; filter: grayscale(100%); } .conference__speaker-body > div { flex: 1 1 auto; min-width: 0; } .conference__speaker-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); margin: 0 0 .3rem; } .conference__speaker-bio { color: var(--ink-soft); line-height: 1.65; margin: 0; } .conference__card { background: var(--cream-2); border: 1px solid var(--brand-red-light); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; } .conference__card h3 { font-size: 1rem; color: var(--brand-red); margin: 0 0 .9rem; } .conference__info { margin: 0; } .conference__info > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); } .conference__info > div:last-child { border-bottom: 0; } .conference__info dt { font-family: var(--font-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .conference__info dd { margin: 0; text-align: right; } .conference__register { display: block; width: 100%; margin-top: 1.1rem; text-align: center; } .conference__program { list-style: none; margin: 0; padding: 0; } .conference__program li { display: flex; gap: .8rem; padding: .42rem 0; border-bottom: 1px solid var(--line); } .conference__program li:last-child { border-bottom: 0; } .conference__program-time { font-family: var(--font-sans); font-weight: 700; color: var(--brand-red); min-width: 3.4em; } .conference__back { margin-top: 2.5rem; } .conference__back a { font-family: var(--font-sans); font-size: .9rem; } @media (max-width: 760px) { .conference__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .contact-form__grid { grid-template-columns: 1fr; } } /* ====================================================================== Collections — vue LISTE (par défaut) + sélecteur Liste / Grille ====================================================================== */ /* Barre de contrôles compacte, alignée à GAUCHE : bouton « Filtrer » (déplie le panneau de filtres) + bascule Grille/Liste. Tout à gauche -> dégage la carte conf. */ .collection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; } .filters-toggle { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .45rem 1.05rem; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .filters-toggle:hover { color: var(--acc, var(--brand-red)); border-color: var(--cream-3); } .filters-toggle[aria-expanded="true"] { color: var(--acc, var(--brand-red)); border-color: var(--acc, var(--brand-red)); } .filters-toggle__ico { flex-shrink: 0; } .book-filters[hidden] { display: none; } .view-switch { display: inline-flex; gap: .2rem; padding: .22rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); } .view-switch button { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); background: transparent; border: 0; border-radius: var(--radius-pill); padding: .45rem 1.05rem; cursor: pointer; transition: background .15s ease, color .15s ease; } .view-switch button:hover { color: var(--brand-red); } .view-switch button.is-active { background: var(--brand-red); color: #fff; } .view[hidden] { display: none; } /* Affichage : sur ordinateur, vue LISTE (1 titre/ligne) avec un toggle vers la vue « Toto » (2 titres/ligne). Sur mobile, vue GRILLE imposée + toggle masqué. */ .view--grille { display: none; } .view--liste { display: block; } /* Vue secondaire « Toto » : 2 titres par ligne (bascule via le toggle, classe sur .views) */ .views--toto .view--liste .bl-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem 4rem; } @media (max-width: 760px) { .view--liste { display: none; } .view--grille { display: block; } /* Vue grille imposée : on masque la bascule, mais on garde les filtres. */ .view-switch { display: none; } } /* Carte liste : couverture posée dans un panneau crème, déborde sur la gauche. */ .bl-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; } .bl-grid + .lang-group { margin-top: 2.4rem; } .bl { position: relative; } .bl__cover { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 156px; height: 212px; z-index: 2; background: #fff; border-radius: 2px; box-shadow: 6px 7px 20px rgba(20, 16, 16, .17); overflow: hidden; display: block; } .bl__cover img { width: 100%; height: 100%; object-fit: contain; display: block; } .bl__panel { position: relative; min-height: 285px; height: 100%; margin-left: 62px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 9px; padding: 1.45rem 1.7rem 3.5rem 122px; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } .bl__panel:hover { text-decoration: none; border-color: var(--cream-3); box-shadow: 0 6px 18px rgba(20, 16, 16, .08); } .bl__txt { width: 100%; } .bl__num { position: absolute; top: 1.15rem; right: 1.5rem; font-family: var(--font-sans); color: var(--muted); font-size: .95rem; letter-spacing: .02em; } .bl__tag { display: inline-block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; font-weight: 800; color: #fff; background: var(--brand-red); border-radius: var(--radius-pill); padding: .22rem .72rem; margin: 0 0 .5rem; } .bl__eyebrow { display: block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .74rem; color: var(--muted); margin: 0 0 .4rem; padding-right: 2.6rem; } .bl__title { display: block; overflow: visible; font-family: var(--font-serif); text-transform: uppercase; color: var(--brand-red); font-size: 1.16rem; line-height: 1.16; margin: 0; font-weight: 600; letter-spacing: .012em; } .bl__panel:hover .bl__title { color: var(--brand-red-dark); } /* Survol du titre : le filet doré s'étend sur toute la largeur du bloc (souligne le titre). */ .bl__panel:hover .bl__filet { width: 100%; } .bl__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-family: var(--font-serif); text-transform: uppercase; color: var(--brand-red); font-size: .86rem; letter-spacing: .02em; margin: .32rem 0 0; font-weight: 600; opacity: .92; } .bl__filet { display: block; width: 60px; height: 2px; margin: .72rem 0; background: linear-gradient(90deg, var(--gold), var(--gold-soft) 70%, transparent); transition: width .3s ease; } .bl__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-family: var(--font-serif); color: var(--ink); font-size: .94rem; line-height: 1.62; margin: 0; text-align: left; } /* Dernière parution : même taille, dominante OR. */ .bl--new .bl__panel { background: linear-gradient(155deg, #f7eecb, #f1e3b6); border: 1.5px solid var(--gold); box-shadow: 0 7px 22px rgba(176, 134, 42, .20); } .bl--new .bl__desc { -webkit-line-clamp: 3; } .bl--new .bl__filet { background: linear-gradient(90deg, var(--gold), #9c7320); } /* Vue liste : prix discret + ajout panier (coin bas-droit, au-dessus du lien panneau). */ .bl__buy { position: absolute; right: 1.2rem; bottom: 1.05rem; z-index: 3; display: flex; align-items: center; gap: .65rem; } .bl__price { font-family: var(--font-sans); font-size: .9rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; } .bl__addf { margin: 0; line-height: 0; } .bl__add { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--brand-red); color: #fff; cursor: pointer; box-shadow: 0 2px 7px rgba(20, 16, 16, .16); transition: background .15s ease, transform .15s ease; } .bl__add:hover { background: var(--brand-red-dark); transform: translateY(-1px); } .bl__epuise { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .22rem .6rem; } .bl__buy--amazon { position: absolute; right: 1.2rem; bottom: 1.05rem; z-index: 3; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-red); border: 1px solid var(--brand-red); border-radius: var(--radius-pill); padding: .28rem .72rem; text-decoration: none; transition: background .15s ease, color .15s ease; } .bl__buy--amazon:hover { background: var(--brand-red); color: #fff; text-decoration: none; } /* Dernière parution (fond rouge, texte clair) : prix + bouton adaptés. */ .bl--new .bl__price { color: rgba(247, 240, 231, .9); } .bl--new .bl__add { background: #fbf5ee; color: var(--brand-red); } .bl--new .bl__add:hover { background: #fff; } .bl--new .bl__epuise { color: rgba(247, 240, 231, .85); border-color: rgba(247, 240, 231, .4); } .bl--new .bl__buy--amazon { color: #fbf5ee; border-color: rgba(247, 240, 231, .6); } .bl--new .bl__buy--amazon:hover { background: #fbf5ee; color: var(--brand-red); } @media (max-width: 760px) { .bl__buy, .bl__buy--amazon { position: static; justify-content: center; margin: .9rem auto 0; } } @media (max-width: 880px) { .bl-grid, .views--toto .view--liste .bl-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .bl { height: auto; } .bl__cover { position: static; transform: none; margin: 0 auto -42px; } .bl__panel { position: static; margin-left: 0; padding: 60px 1.4rem 1.5rem; text-align: center; display: block; overflow: visible; } .bl__num { position: static; display: block; text-align: right; margin: 0 0 .3rem; } .bl__eyebrow { white-space: normal; padding-right: 0; } .bl__filet, .bl__tag { margin-left: auto; margin-right: auto; } .bl__desc { text-align: left; -webkit-line-clamp: 7; padding-right: 0; } } /* Pages légales (CGV, mentions) héritées de l'ancien CMS : les « .accordion__title » ne sont pas des accordéons mais des TITRES de section. On les rend propres : titre bordeaux serif, contenu toujours visible (pas de boîte-bouton morte). */ .accordion { margin: 1.8rem 0 0; } .accordion__title { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; margin: 0 0 .3rem; cursor: default; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.25; color: var(--brand-red); } .accordion__title .icon-chevron { display: none; } .accordion__content { display: block; padding: 0; } .accordion__content.collapse { display: block; } /* Panier : croix « supprimer cet article » à côté de la quantité. */ .cart-qty { display: inline-flex; align-items: center; gap: .55rem; } .cart-remove { width: 1.55rem; height: 1.55rem; padding: 0; line-height: 1; vertical-align: middle; flex: none; border: 1px solid var(--cream-3); border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 1.15rem; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .cart-remove:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } /* Collections à couvertures EN COULEUR (Améthyste, Langues) : pas de boîte blanche, couverture affichée au ratio naturel (le cadre blanc jurait sur les couvertures colorées). */ .bl-grid--natural .bl__cover { height: auto; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } .bl-grid--natural .bl__cover img { height: auto; border-radius: 2px; box-shadow: 6px 7px 20px rgba(20, 16, 16, .17); } /* Toast « Ajouté au panier » (ajout AJAX sans rechargement). */ .cart-toast { position: fixed; z-index: 300; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); opacity: 0; background: var(--brand-red); color: #fff; font-family: var(--font-sans); font-size: .9rem; font-weight: 600; padding: .7rem 1.25rem; border-radius: var(--radius-pill); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .cart-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ====================================================================== Pages collection — bandeau d'en-tête « relief » (crème) sur fond blanc ====================================================================== */ .coll-page { background: #fff; } .coll-hero { background: var(--cream-2); border-bottom: 1px solid var(--cream-3); } .coll-hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 1.2rem var(--gutter) 1.9rem; } .coll-hero__text { max-width: 42rem; } .coll-hero__title { font-family: var(--font-serif); font-size: clamp(1.9rem, 4.2vw, 2.7rem); color: var(--ink); margin: .2rem 0 .5rem; line-height: 1.05; } .coll-hero__filet { display: block; width: 80px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft) 70%, transparent); margin: 0 0 1rem; } .coll-hero__intro { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 .9rem; } .coll-hero__count { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; color: var(--brand-red); margin: 0; } .coll-page__body { padding-top: .75rem; max-width: 1500px; } /* Carte conférence (conservée) en haut à droite du bandeau : fond blanc pour la détacher du crème ; espace réservé à droite (>980px) pour que l'intro ne passe pas dessous. */ .conf-mini--on-band { background: var(--cream-2); } @media (min-width: 981px) { .coll-hero__inner { padding-right: var(--gutter); } } /* === Bandeau collection : breadcrumb + titre + filet alignés à GAUCHE, sur le même bord que le compteur et la grille (conteneur 1500px). Médaillons + carte conf déplacés SOUS le bandeau (sur le crème). === */ .coll-hero__inner { text-align: center; max-width: 1500px; padding-block: 1.2rem .6rem; } .coll-hero__text { max-width: 46rem; margin-inline: auto; } .coll-hero__title { margin: .1rem 0 .35rem; } .coll-hero__filet { margin: 0 auto .5rem; } .coll-hero__count { margin: 0; } /* Fil d'Ariane discret en HAUT À GAUCHE (comme les pages livre), pas centré sous le titre. */ .coll-hero .breadcrumb { padding-top: 0; margin-bottom: 1.69rem; text-align: left; } .coll-hero .breadcrumb__list { justify-content: flex-start; } .coll-hero__lettrine, .coll-hero__medallions, .coll-hero__emblem { display: none; } .coll-lead { max-width: 1500px; margin: 1.4rem auto .2rem; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; } /* Intro + éventail de médaillons sur UNE ligne : texte à GAUCHE (bord de page), médaillons repoussés à droite. */ .coll-lead__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap; } .coll-lead__intro { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 34rem; text-align: left; } .coll-lead__medallions { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .coll-lead__medallions img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(34, 20, 20, .16); outline: 1px solid rgba(176, 134, 42, .5); } .coll-lead__medallions img + img { margin-left: -16px; } /* Carte conférence : couleur claire de la page (comme les cartes livres) au lieu du vert. */ .conf-mini--inline { position: static; margin-inline: auto; background: var(--cream-2); border-color: var(--line); } .conf-mini--inline .conf-mini__label, .conf-mini--inline .conf-mini__cta { color: var(--brand-red); } .conf-mini--inline .conf-mini__cta { border-color: var(--brand-red); } .conf-mini--inline:hover .conf-mini__cta { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } @media (max-width: 700px) { .coll-lead__row { flex-direction: column; align-items: flex-start; } .coll-lead__intro { text-align: left; } } /* Éventail décoratif de médaillons dans le bandeau (vide entre le texte et la carte conf). Ancré sur .coll-hero (pleine largeur) = même référentiel droit que la carte conf. */ .coll-hero { position: relative; overflow: hidden; } .coll-hero__inner { position: relative; z-index: 2; } .coll-hero__medallions { position: absolute; right: 6.5rem; bottom: 1.6rem; z-index: 1; display: flex; align-items: flex-end; pointer-events: none; } .coll-hero__medallions img { display: block; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #fff; box-shadow: 0 5px 16px rgba(34, 20, 20, .18); outline: 1px solid rgba(176, 134, 42, .55); } .coll-hero__medallions img + img { margin-left: -34px; } .coll-hero__medallions img:nth-child(1) { width: 72px; height: 72px; transform: rotate(-7deg); opacity: .9; } .coll-hero__medallions img:nth-child(2) { width: 88px; height: 88px; transform: translateY(3px); opacity: .96; } .coll-hero__medallions img:nth-child(3) { width: 102px; height: 102px; position: relative; z-index: 3; } .coll-hero__medallions img:nth-child(4) { width: 78px; height: 78px; transform: rotate(7deg) translateY(2px); opacity: .9; } @media (max-width: 1149px) { .coll-hero__medallions { display: none; } } /* Quand la fenêtre se resserre, les médaillons (rapprochés du texte) finissent par atteindre la carte conférence : à ce moment la carte disparaît (pages collection). */ @media (max-width: 1440px) { .conf-mini--on-band { display: none; } } /* ════════════════════════════════════════════════════════════════════ BANDEAU TON BORDEAUX — option D (fond bordeaux + liseré or), 2026-06-05. Habillage du bandeau de collection (.coll-hero) sur TOUTES les pages collection. ⚠ RÉVOCABLE : pour revenir au crème d'origine, SUPPRIMER tout ce bloc (jusqu'au marqueur FIN). L'original (lignes .coll-hero ci-dessus) n'est pas modifié. ════════════════════════════════════════════════════════════════════ */ .coll-hero { background: #8b1a2c; border-bottom: none; } /* Couleur de fond par collection (Rémy/Caroline) : Beya bordeaux (défaut), Améthyste vert d'eau profond, Langues étrangères mauve-ardoise. Texte crème + or conservés. */ .coll-hero--collection-amethyste { background: #2f6a6c; } .coll-hero--hors-collection { background: #243e66; } /* ===== Charte Améthyste : le vert d'eau remplace le bordeaux sur TOUTE la page (titres, sous-titres, badges, carte « dernière parution », bascule, filtres). ===== */ .coll-page--collection-amethyste { --acc: #2f6a6c; --acc-dark: #1f4d4f; } .coll-page--collection-amethyste .bl__title, .coll-page--collection-amethyste .bl__title a, .coll-page--collection-amethyste .bl__sub, .coll-page--collection-amethyste .book-card__title, .coll-page--collection-amethyste .book-card__title a, .coll-page--collection-amethyste .book-card__price { color: var(--acc); } .coll-page--collection-amethyste .bl__panel:hover .bl__title, .coll-page--collection-amethyste .book-card:hover .book-card__title { color: var(--acc-dark); } .coll-page--collection-amethyste .bl__tag { background: var(--acc); } .coll-page--collection-amethyste .view-switch button:hover { color: var(--acc); } .coll-page--collection-amethyste .view-switch button.is-active { background: var(--acc); border-color: var(--acc); color: #fff; } .coll-page--collection-amethyste .book-filters input:focus, .coll-page--collection-amethyste .book-filters select:focus { border-color: var(--acc); } /* Cartes pleines (dernière parution) : fond vert, or + crème conservés */ .coll-page--collection-amethyste .bl--new .bl__panel, .coll-page--collection-amethyste .latest__encart { background: var(--acc); border-color: #cda24c; } .coll-page--collection-amethyste .bl--new .bl__title, .coll-page--collection-amethyste .bl--new .bl__sub, .coll-page--collection-amethyste .latest__flag, .coll-page--collection-amethyste .latest__sub, .coll-page--collection-amethyste .latest__more { color: #fbf5ee; } .coll-hero__title { color: #fbf5ee; } .coll-hero__intro { color: rgba(247, 240, 231, .82); } .coll-hero__count { color: #e6bd6c; } .coll-hero__filet { background: linear-gradient(90deg, #e6bd6c, rgba(230, 189, 108, .5) 70%, transparent); } /* Fil d'Ariane lisible sur fond sombre */ .coll-hero .breadcrumb, .coll-hero .breadcrumb a, .coll-hero .breadcrumb [aria-current="page"] { color: rgba(247, 240, 231, .82); } .coll-hero .breadcrumb a:hover { color: #fff; } .coll-hero .breadcrumb__item + .breadcrumb__item::before { color: rgba(247, 240, 231, .45); } /* Liseré or pleine largeur (toute la bande, responsive) */ .coll-hero::after { content: none; } /* Médaillons : anneau or + ombre renforcée sur fond sombre */ .coll-hero__medallions img { border-color: #fff; outline-color: rgba(230, 189, 108, .7); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); } /* Médaillon géant en filigrane : ancré sur .coll-hero, déborde à GAUCHE (moitié hors-écran) ET vers le BAS sur le crème, sous le bandeau. - .coll-page : clippe l'horizontal (pas de scroll) ; overflow-y:auto induit clippe aussi le haut (pas d'empiètement sur le header) mais laisse passer le bas (interne à .coll-page) ; - .coll-hero ne coupe plus en bas ; - le contenu sous le bandeau repasse au-dessus du filigrane (z-index 1). Source médaillon ~150 px d'origine : rendu volontairement DOUX (filigrane), faible opacité. */ .coll-page { position: relative; overflow-x: hidden; } .coll-page__body { position: relative; z-index: 1; } .coll-hero { overflow: visible; } .coll-hero__emblem { position: absolute; left: 0; top: 50%; z-index: 0; width: clamp(380px, 40vw, 560px); height: auto; aspect-ratio: 1 / 1; transform: translate(-46%, -50%); opacity: .20; pointer-events: none; -webkit-user-select: none; user-select: none; object-fit: contain; } @media (max-width: 700px) { .coll-hero__emblem { width: 340px; opacity: .15; } } /* Constellation de petits médaillons flottants (remplace le grand emblème). position:fixed + `top` piloté en JS : au chargement, calée sur le 1er livre ; au scroll, elle suit le défilement puis se fige au centre de l'écran (cf. main.js). Les `top` des médaillons sont des offsets RELATIFS au conteneur (hauteur du cluster). Masquée sur mobile. */ .coll-hero__constellation { position: fixed; left: 0; top: 600px; width: 100%; height: 560px; z-index: 0; pointer-events: none; } .coll-hero__constellation img { position: absolute; height: auto; border-radius: 50%; filter: drop-shadow(0 6px 14px rgba(20, 16, 16, .18)); -webkit-user-select: none; user-select: none; } .coll-hero__constellation img:nth-child(1) { left: 2%; top: 0px; width: 84px; transform: rotate(3deg); opacity: .36; } .coll-hero__constellation img:nth-child(2) { left: 14%; top: 72px; width: 50px; transform: rotate(-8deg); opacity: .28; } .coll-hero__constellation img:nth-child(3) { left: 5%; top: 124px; width: 64px; transform: rotate(7deg); opacity: .32; } .coll-hero__constellation img:nth-child(4) { left: 19%; top: 168px; width: 44px; transform: rotate(-10deg);opacity: .26; } .coll-hero__constellation img:nth-child(5) { left: 9%; top: 200px; width: 76px; transform: rotate(5deg); opacity: .34; } .coll-hero__constellation img:nth-child(6) { left: 2%; top: 270px; width: 54px; transform: rotate(-6deg); opacity: .28; } .coll-hero__constellation img:nth-child(7) { left: 16%; top: 240px; width: 60px; transform: rotate(9deg); opacity: .30; } .coll-hero__constellation img:nth-child(8) { left: 23%; top: 108px; width: 40px; transform: rotate(-7deg); opacity: .24; } .coll-hero__constellation img:nth-child(9) { left: 9%; top: 348px; width: 58px; transform: rotate(6deg); opacity: .30; } .coll-hero__constellation img:nth-child(10) { left: 1%; top: 410px; width: 72px; transform: rotate(-7deg); opacity: .32; } .coll-hero__constellation img:nth-child(11) { left: 18%; top: 372px; width: 46px; transform: rotate(9deg); opacity: .26; } .coll-hero__constellation img:nth-child(12) { left: 6%; top: 486px; width: 52px; transform: rotate(-5deg); opacity: .28; } @media (max-width: 900px) { .coll-hero__constellation { display: none; } } /* Lettrine ornée (serpents en « C ») meublant la gauche du bandeau Collection Beya. Posée DERRIÈRE le contenu (z-index:-1) et décalée à gauche (left négatif) : elle habille la gauche / déborde sans jamais déplacer le texte (qui reste à sa position). */ .coll-hero__lettrine { position: absolute; left: calc(clamp(150px, 13vw, 260px) * -1); top: 50%; transform: translateY(-50%); height: clamp(150px, 19vw, 224px); width: auto; z-index: -1; pointer-events: none; -webkit-user-select: none; user-select: none; } /* Lettrine « L » (Langues étrangères) : colonne à gauche + dragon en pied. Forme différente du « C » : décalée à gauche et un peu réduite (sinon le dragon en pied touche le bord bas du bandeau et se fait rogner). */ .coll-hero--hors-collection .coll-hero__lettrine { left: calc(clamp(34px, 4.5vw, 100px) * -1); height: clamp(128px, 15.5vw, 192px); } @media (max-width: 820px) { .coll-hero__lettrine { display: none; } } /* Hors collection : filigrane = couverture « Collected Letters of Louis Cattiaux » (portrait, titre + watermark retirés). Ancré en HAUT -> le portrait reste dans la bande, le manuscrit (lettre, cage, oiseau) déborde sur le crème. Léger débordement gauche seulement. */ .coll-hero--hors-collection .coll-hero__emblem { top: 0; aspect-ratio: 1288 / 1528; width: clamp(290px, 28vw, 410px); transform: translate(-18%, 0); opacity: .24; } @media (max-width: 700px) { .coll-hero--hors-collection .coll-hero__emblem { width: 240px; opacity: .18; } } /* Carte « dernière parution » en bordeaux clair (au lieu du crème) */ /* Carte « dernière parution » : même bordeaux que le bandeau (#a83648) + texte clair */ .latest__encart { background: #8b1a2c; border-color: #cda24c; color: #fbf5ee; } .latest__encart .latest__flag { color: #f0dca6; border-bottom-color: rgba(205, 162, 76, .6); } .latest__encart .latest__sub { color: #f0dca6; } .latest__encart .latest__chapeau { color: rgba(247, 240, 231, .9); } .latest__encart .latest__more { color: #f0dca6; } .bl--new .bl__panel { background: #8b1a2c; border: 1.5px solid #cda24c; box-shadow: 0 7px 22px rgba(139, 26, 44, .22); color: #fbf5ee; } .bl--new .bl__tag { color: #f0dca6; } .bl--new .bl__num { color: rgba(247, 240, 231, .8); } .bl--new .bl__eyebrow { color: rgba(247, 240, 231, .85); } .bl--new .bl__title { color: #fbf5ee; } .bl--new .bl__panel:hover .bl__title { color: #fff; } .bl--new .bl__sub { color: rgba(247, 240, 231, .85); } .bl--new .bl__desc { color: rgba(247, 240, 231, .9); } .bl--new .bl__filet { background: linear-gradient(90deg, #cda24c, rgba(205, 162, 76, .3)); } /* ════════════════════════════════════════════════════════════════════ EN-TÊTE COLLECTION SANS BANDEAU COLORÉ (clair, uniforme sur les 3 collections) Le fond bordeaux/teal/bleu est supprimé : l'en-tête est sur le fond clair de la page, l'identité de collection passe par la COULEUR DU TITRE (--acc). ════════════════════════════════════════════════════════════════════ */ /* Charte par collection pilotée par UNE variable --acc posée sur : tout ce qui est coloré (nav, panier, titre, compteur, cartes) suit ensemble. Beya / hors page collection = bordeaux via le repli var(--acc, var(--brand-red)). */ body.page-coll--amethyste { --acc: #2f6a6c; --acc-dark: #1f4d4f; } body.page-coll--langues { --acc: #2c4a73; --acc-dark: #1c3354; } .coll-hero, .coll-hero--collection-amethyste, .coll-hero--hors-collection { background: transparent; border-bottom: none; overflow: visible; } .coll-hero__title { color: var(--acc, var(--brand-red)); } .coll-hero__count { color: var(--acc, var(--brand-red)); } .coll-hero__filet { background: linear-gradient(90deg, var(--gold), var(--gold-soft) 70%, transparent); } .coll-hero .breadcrumb, .coll-hero .breadcrumb a, .coll-hero .breadcrumb [aria-current="page"] { color: var(--ink-soft); } .coll-hero .breadcrumb a:hover { color: var(--acc, var(--brand-red)); } .coll-hero .breadcrumb__item + .breadcrumb__item::before { color: var(--muted); } /* Tout ce qui était bordeaux fixe et doit suivre la collection : barre de nav, panier, cartes conférence. Repli bordeaux quand --acc n'est pas défini (hors page collection). */ .site-header__bar { background: var(--acc, var(--brand-red)); } .site-header__bar-utils .cart-link { color: var(--acc, var(--brand-red)); } .site-header__bar-utils .cart-link .cart-badge, .site-header__bar-utils .cart-link:hover .cart-badge { background: var(--acc, var(--brand-red)); color: #fff; } .site-header__bar-utils .cart-link:hover { color: var(--acc, var(--brand-red)); } /* Cartes conférence (petite + grande accueil) : fond = teinte CLAIRE de --acc ; accents = --acc. */ .conf-mini, .conf-mini--on-band, .event-card { background: color-mix(in srgb, var(--acc, var(--brand-red)) 8%, #fff); border-color: color-mix(in srgb, var(--acc, var(--brand-red)) 24%, #fff); } .event-card { border-top-color: var(--acc, var(--brand-red)); } .conf-mini__label, .conf-mini__cta, .event-card__label { color: var(--acc, var(--brand-red)); } .conf-mini__cta, .event-card__cta { border-color: var(--acc, var(--brand-red)); color: var(--acc, var(--brand-red)); } .conf-mini:hover .conf-mini__cta, .event-card:hover .event-card__cta { background: var(--acc, var(--brand-red)); border-color: var(--acc, var(--brand-red)); color: #fff; } /* Hero d'accueil en bordeaux + vierge noire à fin contour blanc (texte « ÉDITIONS BEYA » crème) */ .hero { background: #8b1a2c; border-bottom: none; } .hero__eyebrow { color: #cda24c; } .hero__wordmark { color: #fbf5ee; } .hero__tagline, .hero p { color: rgba(247, 240, 231, .85); } .hero__mark { background-image: none; background-color: #fbf5ee; -webkit-mask: url(../img/logo.svg) center / contain no-repeat; mask: url(../img/logo.svg) center / contain no-repeat; } .hero__mark img { visibility: hidden; } .hero .btn-primary, .hero .btn-outline { background: transparent; color: #f0dca6; border: 1px solid #cda24c; } .hero .btn-primary:hover, .hero .btn-outline:hover { background: #cda24c; border-color: #cda24c; color: #5d1019; } /* Bande bordeaux des pages de section (auteurs, documentation, à propos, contact) — partial _page_band */ .page-band { position: relative; overflow: hidden; background: #8b1a2c; } .page-band__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 1.2rem var(--gutter) .9rem; } @media (min-width: 981px) { .page-band__inner { padding-right: calc(var(--gutter) + 238px); } } .page-band::after { content: none; } .page-band__title { font-family: var(--font-serif); font-size: clamp(1.9rem, 4.2vw, 2.7rem); color: #fbf5ee; margin: .2rem 0 .5rem; line-height: 1.05; } .page-band__filet { display: block; width: 80px; height: 2px; background: linear-gradient(90deg, #e6bd6c, rgba(230, 189, 108, .5) 70%, transparent); margin: 0 0 .6rem; } .page-band__intro { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.6; color: rgba(247, 240, 231, .82); margin: 0; max-width: 42rem; } .page-band .breadcrumb, .page-band .breadcrumb a, .page-band .breadcrumb [aria-current="page"] { color: rgba(247, 240, 231, .82); } .page-band .breadcrumb a:hover { color: #fff; } .page-band .breadcrumb__item + .breadcrumb__item::before { color: rgba(247, 240, 231, .45); } .page-band + .container { padding-top: .75rem; } /* Carte conférence : équidistante du liseré (gap haut = gap droite) */ .conf-mini { top: clamp(.6rem, 2.5vw, 1.6rem); } /* Hauteur min des bandeaux (desktop, là où la carte conf apparaît) : la carte garde une marge basse au moins égale à celle du haut/droite, dans le liseré. */ @media (min-width: 981px) { .page-band__inner { min-height: 220px; box-sizing: border-box; } } /* Bandeau-titre des pages de SECTION (auteurs, doc, à propos, contact) : décoloré comme les pages collection. Placé APRÈS la charte bordeaux pour la neutraliser. */ .page-band { background: transparent; overflow: visible; } /* Titres de SECTION centrés (comme les pages collection). */ .page-band__inner { min-height: 0; text-align: center; } @media (min-width: 981px) { .page-band__inner { padding-right: var(--gutter); } } .page-band__title { color: var(--brand-red); } .page-band__filet { background: linear-gradient(90deg, var(--gold), var(--gold-soft) 70%, transparent); margin-inline: auto; } .page-band__intro { margin-inline: auto; } .page-band .breadcrumb__list { justify-content: flex-start; } .page-band .breadcrumb { text-align: left; } .page-band__intro { color: var(--ink-soft); } .page-band .breadcrumb, .page-band .breadcrumb a, .page-band .breadcrumb [aria-current="page"] { color: var(--ink-soft); } .page-band .breadcrumb a:hover { color: var(--brand-red); } .page-band .breadcrumb__item + .breadcrumb__item::before { color: var(--muted); } /* Hero d'accueil : touches d'or — liseré pleine largeur + filet doré sous le wordmark */ .hero { position: relative; } .hero::after { content: none; } .hero__wordmark::after { content: ""; display: block; width: 90px; height: 2px; margin: .7rem auto 0; background: linear-gradient(90deg, transparent, #cda24c, transparent); } /* Hero d'accueil DÉCOLORÉ (comme les bandeaux) : fond clair, vierge sombre, wordmark + boutons bordeaux. */ .hero { background: transparent; border-bottom: none; } .hero__eyebrow { color: var(--brand-red); } .hero__wordmark { color: var(--brand-red); } .hero__tagline, .hero p { color: var(--ink-soft); } .hero__mark { background-color: var(--ink); } .hero .btn-primary, .hero .btn-outline { background: transparent; color: var(--brand-red); border: 1px solid var(--brand-red); } .hero .btn-primary:hover, .hero .btn-outline:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } /* Hero d'accueil SLIM : logo + « Éditions Beya » + tagline vivent dans l'en-tête ; le hero ne garde que les appels à l'action, sur un bandeau bordeaux resserré. */ .hero--slim .hero__inner { padding-block: clamp(1.1rem, 2.6vw, 1.7rem); } /* ════════════════ FIN BANDEAU TON BORDEAUX (option D) ════════════════ */ /* Fiche « ensemble de volumes » (plusieurs tomes vendus groupés sur une seule fiche). */ .book-detail__setnote { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin: .45rem 0 0; } .toc-modal__vol { font-family: var(--font-serif); font-size: 1.12rem; color: #8b1a2c; margin: 1.5rem 0 .6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .toc-modal__vol:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* === Charte Améthyste — renfort (placé en fin de fichier pour passer APRÈS les règles bordeaux .bl--new / .view-switch, en couleurs littérales). === */ .coll-page--collection-amethyste .bl--new .bl__panel, .coll-page--collection-amethyste .latest__encart { background: #2f6a6c; border-color: #cda24c; } .coll-page--collection-amethyste .bl--new .bl__title, .coll-page--collection-amethyste .bl--new .bl__sub { color: #fbf5ee; } .coll-page--collection-amethyste .bl__title, .coll-page--collection-amethyste .bl__title a, .coll-page--collection-amethyste .bl__sub, .coll-page--collection-amethyste .book-card__title, .coll-page--collection-amethyste .book-card__title a, .coll-page--collection-amethyste .book-card__price, .coll-page--collection-amethyste .latest__flag, .coll-page--collection-amethyste .latest__sub, .coll-page--collection-amethyste .latest__more { color: #2f6a6c; } .coll-page--collection-amethyste .bl--new .bl__title, .coll-page--collection-amethyste .latest__encart .latest__flag, .coll-page--collection-amethyste .latest__encart .latest__sub, .coll-page--collection-amethyste .latest__encart .latest__more { color: #fbf5ee; } .coll-page--collection-amethyste .bl__tag { background: #2f6a6c; } .coll-page--collection-amethyste .view-switch button.is-active { background: #2f6a6c; border-color: #2f6a6c; color: #fff; } .coll-page--collection-amethyste .view-switch button:hover { color: #2f6a6c; } .coll-page--collection-amethyste .book-filters input:focus, .coll-page--collection-amethyste .book-filters select:focus { border-color: #2f6a6c; } /* === Charte par collection — FICHE LIVRE (/collection/{slug}) ============== La fiche d'un titre adopte l'accent de SA collection, comme les pages d'atterrissage. Beya = bordeaux (défaut, aucune surcharge). On redéfinit les variables de marque sur le wrapper de la fiche : byline, sous-titre, prix, icône panier, bouton « Ajouter au panier », liens auteurs, titres des blocs « autres tomes / à découvrir » suivent automatiquement var(--brand-red). */ .coll-theme--collection-amethyste { --brand-red: #2f6a6c; --brand-red-dark: #1f4d4f; --brand-red-light: #3f8385; --link: var(--brand-red); } .coll-theme--hors-collection { --brand-red: #243e66; --brand-red-dark: #172a40; --brand-red-light: #3a5687; --link: var(--brand-red); } /* === Charte Langues etrangeres (hors-collection) : bleu royal #243e66 sur TOUTE la page (en-tetes de langue, titres, sous-titres, badges, prix, carte derniere parution, bascule liste/grille, filtres). Calque sur la charte Amethyste. Place en fin de fichier pour passer apres les litteraux bordeaux. === */ .coll-page--hors-collection { --acc: #243e66; --acc-dark: #172a40; } .coll-page--hors-collection .lang-group { color: #243e66; } .coll-page--hors-collection .lang-group::before, .coll-page--hors-collection .lang-group::after { background: linear-gradient(90deg, transparent, #6c7ba3, transparent); } .coll-page--hors-collection .bl__title, .coll-page--hors-collection .bl__title a, .coll-page--hors-collection .bl__sub, .coll-page--hors-collection .book-card__title, .coll-page--hors-collection .book-card__title a, .coll-page--hors-collection .book-card__price, .coll-page--hors-collection .latest__flag, .coll-page--hors-collection .latest__sub, .coll-page--hors-collection .latest__more { color: #243e66; } .coll-page--hors-collection .bl__panel:hover .bl__title, .coll-page--hors-collection .book-card:hover .book-card__title { color: #172a40; } .coll-page--hors-collection .bl__tag { background: #243e66; } .coll-page--hors-collection .bl--new .bl__panel, .coll-page--hors-collection .latest__encart { background: #243e66; border-color: #cda24c; } .coll-page--hors-collection .bl--new .bl__title, .coll-page--hors-collection .bl--new .bl__sub, .coll-page--hors-collection .latest__encart .latest__flag, .coll-page--hors-collection .latest__encart .latest__sub, .coll-page--hors-collection .latest__encart .latest__more { color: #fbf5ee; } .coll-page--hors-collection .view-switch button.is-active { background: #243e66; border-color: #243e66; color: #fff; } .coll-page--hors-collection .view-switch button:hover { color: #243e66; } .coll-page--hors-collection .book-filters input:focus, .coll-page--hors-collection .book-filters select:focus { border-color: #243e66; } /* === Page auteur : Ses articles en 2 colonnes, chaque ligne = titre | rubrique alignes. Liste coupee en 2 moities (ordre vertical conserve) ; chaque moitie est une grille 2 colonnes (titre minmax(0,1fr) . rubrique max-content). Les
  • sont en display:contents pour que titres et rubriques salignent. === */ .author-articles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1000px; margin: 1.5rem auto 3rem; } .author-articles__col { list-style: none; margin: 0; padding: 0 clamp(1.4rem, 3vw, 2.6rem); display: grid; grid-template-columns: minmax(0, max-content) max-content; column-gap: 1.1rem; row-gap: .55rem; align-content: start; align-items: baseline; font-family: var(--font-sans); font-size: .92rem; line-height: 1.45; } .author-articles__col:first-child { padding-left: 0; } .author-articles__col:last-child { padding-right: 0; } .author-articles__col + .author-articles__col { border-left: 1px solid var(--line); } .author-articles__col li { display: contents; } .author-articles__col .art-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; color: var(--ink-soft); cursor: pointer; } .author-articles__col .art-title { color: inherit; } .author-articles__col .art-title::before { content: "• "; color: var(--muted); } .author-articles__col .art-row:hover, .author-articles__col .art-row:hover .art-where { color: var(--brand-red); } .author-articles__col .art-row:hover .art-title::before { color: var(--brand-red); } .author-articles__col .art-where { color: var(--muted); font-style: italic; } /* survol gere au niveau .art-row (ligne entiere) */ @media (max-width: 680px) { /* Empilé sur mobile : une seule liste continue, sans indentation ni filet vertical (sinon la 2e moitié apparaît décalée à droite avec une barre, façon imbriquée). */ .author-articles { grid-template-columns: 1fr; gap: .55rem; } .author-articles__col { padding: 0; } .author-articles__col + .author-articles__col { border-left: 0; } } /* === Fond des cartes de titre teinte par la collection (voile tres clair de l accent). Cartes normales seulement ; la carte derniere parution (.bl--new) garde son fond accentue. --acc = accent collection (Amethyste/Langues), repli sur --brand-red (bordeaux) pour la collection Beya. === */ .coll-page .bl:not(.bl--new) .bl__panel { background: color-mix(in srgb, var(--acc, var(--brand-red)) 8%, #fff); } /* Langues etrangeres : couvertures naturelles plus hautes (222-234px) que la carte de base (212px) -> elles depassaient. On rend la carte plus haute que les couvertures (comme Beya, ou la couverture se loge dans la carte). */ .bl-grid--natural .bl__panel { min-height: 306px; } /* === Nos collections (accueil) : pleine largeur (grille 3 col) + eventail de couvertures superposees, comme les ensembles. Surcharge le bloc plus haut. === */ /* Tuiles alignées par le HAUT : les fans (donc les couvertures) démarrent tous au même niveau, peu importe le nombre de lignes du nom dessous (qui varie selon la largeur de la tuile au survol). Sinon l'alignement en bas décalait les fans. */ .collection-tiles { display: flex; gap: clamp(1rem, 2.5vw, 2.4rem); max-width: none; align-items: flex-start; } .collection-tile { flex: 1 1 0; min-width: 0; width: auto; overflow: hidden; transition: flex-grow .45s ease, opacity .35s ease; } .collection-tiles:hover .collection-tile { flex-grow: .5; opacity: .45; } .collection-tiles .collection-tile:hover { flex-grow: 4.5; opacity: 1; transform: none; } .collection-fan { display: flex; align-items: flex-end; justify-content: center; height: 210px; isolation: isolate; margin-bottom: 1rem; } /* Boîte FIXE + object-fit:cover : chaque couverture fait exactement la hauteur du fan, quelle que soit son image (plus de hauteur variable au déploiement). */ .collection-fan__cov { flex: 0 0 144px; width: 144px; min-width: 144px; height: 100%; object-fit: cover; object-position: top center; border-radius: 2px; box-shadow: 6px 5px 16px rgba(20, 16, 16, .20); margin-left: -95px; position: relative; z-index: calc(90 - var(--i, 0)); transition: margin-left .45s ease; } .collection-fan__cov:first-child { margin-left: 0; } .collection-tiles .collection-tile:hover .collection-fan__cov:not(:first-child) { margin-left: 16px; } @media (max-width: 760px) { .collection-tiles { flex-direction: column; gap: 2rem; } .collection-tile, .collection-tiles:hover .collection-tile, .collection-tiles .collection-tile:hover { flex: none; opacity: 1; } .collection-fan { height: 180px; } .collection-tiles .collection-tile:hover .collection-fan__cov:not(:first-child) { margin-left: -95px; } } /* En-tete : repli de la marque (logo + nom + tagline + recherche + panier) au scroll (classe .is-condensed posee en JS). La barre de nav reste collee en haut. overflow:hidden UNIQUEMENT en condense (sinon couperait le mini-panier). */ .site-header__top { max-height: 160px; overflow: hidden; transition: max-height .4s ease; } /* Pas d'opacité pendant le repli : le bandeau blanc reste OPAQUE en se repliant, sinon (fondu) on voit le contenu de la page passer derrière l'en-tête sticky. */ .site-header.is-condensed .site-header__top { max-height: 0; overflow: hidden; border-bottom-width: 0; } /* === Loupe + panier dans la barre bordeaux (a droite, apres Contact) === */ .site-header__bar-utils { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } .site-header__bar-utils .search-link { width: 38px; height: 38px; color: rgba(247, 240, 231, .9); } .site-header__bar-utils .search-link:hover { color: var(--gold); background: rgba(255, 255, 255, .12); } /* Panier = CTA distinct : pastille creme, lisere or (pas un onglet de menu). */ .site-header__bar-utils .cart-link { background: #fbf5ee; color: var(--acc, var(--brand-red)); border-color: var(--gold); padding: .42rem 1.35rem; } .site-header__bar-utils .cart-link:hover { background: var(--gold); border-color: var(--gold); color: var(--acc, var(--brand-red)); } .site-header__bar-utils .cart-link .cart-badge { background: var(--acc, var(--brand-red)); color: #fff; } .site-header__bar-utils .cart-link:hover .cart-badge { background: var(--acc, var(--brand-red)); color: #fff; } /* Fleche flottante « retour en haut » (apparait apres ~600px de scroll). */ .back-to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gold); border-radius: 50%; background: var(--brand-red); color: #fbf5ee; cursor: pointer; box-shadow: 0 8px 22px rgba(20, 16, 16, .22); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .15s ease, color .15s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--gold); color: var(--brand-red); } @media print { .back-to-top { display: none; } } /* Carte conferences (accueil) enrichie : sous-titre + liste des seances. */ .event-card__subtitle { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: 1.05rem; margin: -.1rem 0 .2rem; } .event-card__sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem 2.4rem; width: 100%; margin: 1.3rem 0 .3rem; text-align: left; } .event-session { display: grid; grid-template-columns: 52px 1fr; gap: .85rem; align-items: start; } .event-session__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 9px rgba(20, 16, 16, .18); } .event-session__photo--ph { display: inline-flex; align-items: center; justify-content: center; object-fit: initial; background: color-mix(in srgb, var(--acc, var(--brand-red)) 16%, #fff); color: var(--acc, var(--brand-red)); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; box-shadow: none; } .event-session__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .event-session__date { font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acc, var(--brand-red)); } .event-session__title { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.25; color: var(--ink); } .event-session__speaker { font-family: var(--font-serif); font-style: italic; font-size: .9rem; color: var(--ink-soft); } .event-session.is-past { opacity: .5; } .event-card__practical { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft); margin-top: .6rem; } @media (max-width: 560px) { .event-card__sessions { gap: 1rem; } }