/* Marie K. — la charte relevée sur son site : Barlow seule, papier crème, terracotta en accent, capitales largement espacées. Les variables marquées « réglable » se surchargent dans le ; tout le reste s'en déduit par calc() et color-mix(). */ :root { --encre: #1c1c1c; /* réglable */ --papier: #f8f4e9; /* réglable */ --accent: #cc9067; /* réglable — son terracotta */ --serif: "Barlow", system-ui, -apple-system, sans-serif; /* réglable */ --grotesque: "Barlow", system-ui, -apple-system, sans-serif; /* réglable */ --echelle-texte: 1; /* réglable */ --densite: 1; /* réglable */ --hauteur-ouverture: 68; /* réglable, en vh */ --encre-douce: color-mix(in oklab, var(--encre) 68%, var(--papier)); --encre-tenue: color-mix(in oklab, var(--encre) 45%, var(--papier)); --papier-grave: color-mix(in oklab, var(--encre) 6%, var(--papier)); --filet: color-mix(in oklab, var(--encre) 16%, var(--papier)); --accent-clair: color-mix(in oklab, var(--accent) 75%, white); --corail: #e46f6f; /* Ses deux teintes tombent sous le seuil de lisibilité sur le papier : le texte prend ces variantes assombries, les aplats gardent la teinte d'origine. */ --accent-texte: color-mix(in oklab, var(--accent) 55%, var(--encre)); --corail-texte: color-mix(in oklab, var(--corail) 58%, var(--encre)); --interlettrage-titre: 0.18em; --t-xs: calc(0.6875rem * var(--echelle-texte)); --t-s: calc(0.8125rem * var(--echelle-texte)); --t-m: calc(1.0625rem * var(--echelle-texte)); /* Entre les deux : les phrases d'aide de son espace, qui se lisent sans effort sans peser autant que le corps de texte. */ --t-aide: calc(0.9375rem * var(--echelle-texte)); --t-l: calc(1.3125rem * var(--echelle-texte)); --t-xl: calc(clamp(1.5rem, 3.5vw, 2.25rem) * var(--echelle-texte)); --t-xxl: calc(clamp(2.25rem, 7vw, 4.5rem) * var(--echelle-texte)); --marge: clamp(1.25rem, 5vw, 4.5rem); --gouttiere: calc(clamp(2rem, 4vw, 3.5rem) * var(--densite)); --respiration: calc(clamp(3.5rem, 9vw, 8rem) * var(--densite)); --largeur-texte: 34rem; --largeur-page: 82rem; /* Réserve la place du contenu sous l'en-tête fixe. */ --hauteur-entete: 5rem; /* Les durées et la courbe dont tout le mouvement du site se déduit. */ --geste: 180ms; --passage: 320ms; --fondu: 620ms; --entree: 900ms; --courbe: cubic-bezier(0.2, 0.7, 0.3, 1); } /* Sans color-mix(), les sept teintes dérivées ne valent rien et le texte perd sa couleur : ces valeurs sont les mêmes, figées, relevées au rendu. Elles ne suivent pas une surcharge de --encre ou de --papier, mais sur ces navigateurs il n'y en a pas. */ @supports not (color: color-mix(in oklab, black 50%, white)) { :root { --encre-douce: #5a5956; --encre-tenue: #8c8a85; --papier-grave: #e9e5db; --filet: #d0cdc4; --accent-clair: #daab8d; --accent-texte: #775944; --corail-texte: #8a4c4a; } } html { scrollbar-gutter: stable; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* La page ne défile plus derrière le zoom. */ body:has(.zoom[open]) { overflow: hidden; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--serif); font-size: var(--t-m); font-weight: 380; line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration-color: var(--filet); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color var(--geste) var(--courbe), color var(--geste) var(--courbe); } a:hover { color: var(--accent-texte); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Structure ---------- */ /* clip et non hidden : hidden neutralise tous les position: sticky de la page. */ .page { overflow-x: clip; } .pied, .familles, .fil, .section, .fiche { max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--marge); } .colonne-texte { max-width: calc(var(--largeur-texte) + 2 * var(--marge)); } .colonne-large { max-width: calc(46rem + 2 * var(--marge)); } .section { margin-block: var(--respiration); } /* ---------- Cartel ---------- */ .cartel { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce); line-height: 1.7; } .cartel__titre { display: block; font-family: var(--serif); font-size: var(--t-s); font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--encre); margin-bottom: 0.35rem; } .cartel__ligne { display: block; } .cartel__prix { display: block; margin-top: 0.5rem; color: var(--encre); } .cartel__vendu { display: block; margin-top: 0.5rem; color: var(--encre-tenue); font-style: italic; font-family: var(--serif); letter-spacing: 0; text-transform: none; font-size: var(--t-s); } /* ---------- En-tête ---------- */ /* Transparent au-dessus du bandeau, blanc dès qu'on descend. */ .entete { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--hauteur-entete); background: transparent; border-bottom: 1px solid transparent; transition: background var(--passage) var(--courbe), border-color var(--passage) var(--courbe), color var(--passage) var(--courbe); } .entete--pose { background: #fff; border-bottom-color: var(--filet); } .entete__barre { height: 100%; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--marge); display: flex; /* Jamais deux lignes : l'en-tête a une hauteur fixe, et la seconde en déborderait. Quand la place manque, les entrées passent dans le panneau. */ flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; } .page { scroll-padding-top: calc(var(--hauteur-entete) + 1rem); } main { padding-top: var(--hauteur-entete); } main:has(.bandeau) { padding-top: 0; } main > .section:first-of-type, main > .fiche:first-of-type { margin-top: var(--gouttiere); } /* Sur le bandeau, dont les feuillages sont sombres, l'en-tête passe en clair. */ .page:has(.bandeau) .entete:not(.entete--pose), .page:has(.bandeau) .entete:not(.entete--pose) .entete__nav a { color: #fff; } /* Le bandeau porte déjà la marque. */ .page:has(.bandeau--accueil) .entete:not(.entete--pose) .entete__nom { opacity: 0; translate: 0 -0.35rem; pointer-events: none; } .entete__nom { transition: opacity var(--passage) var(--courbe), translate var(--passage) var(--courbe); } .entete__marque { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; color: inherit; } .entete__logo { width: 2.75rem; height: 2.75rem; border-radius: 50%; } .entete__nom { font-size: var(--t-l); font-weight: 400; letter-spacing: 0.02em; margin: 0; } /* Son nom garde sa couleur au survol — le terracotta jurait sur ses fonds. Il reçoit le trait des liens, sous le nom seul : le monogramme est dans le même lien, d'où le trait porté par le mot et non par lui. */ .entete__marque:hover, .entete__marque:focus-visible { color: inherit; } .entete__marque span { position: relative; } .entete__marque span::after { content: ""; position: absolute; inset: auto 0 -0.2rem; height: 1px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale var(--passage) var(--courbe); } .entete__marque:hover span::after, .entete__marque:focus-visible span::after { scale: 1 1; } .entete__nom a { text-decoration: none; } .entete__nav { display: flex; flex-wrap: nowrap; /* Centré et non sur la ligne de base : le cadre de « Gérer » a un rembourrage, donc une baseline plus basse, qui entraînait toute la barre vers le bas. */ align-items: center; /* L'écart se resserre avant que la barre ne cède : huit entrées en capitales espacées tiennent mal sur un portable. */ gap: clamp(0.9rem, 1.3vw, 1.75rem); font-family: var(--grotesque); font-size: var(--t-s); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } /* ---------- Le menu des petits écrans ---------- Sept entrées en capitales espacées ne tiennent pas sous 60rem : elles passaient sous l'en-tête, qui est fixe. En dessous, la barre ne garde que le nom et un bouton ; les entrées vivent dans un . */ .entete__replie { display: none; } .entete__ouvrir-menu { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border: 0; background: none; color: inherit; font-family: var(--grotesque); font-size: var(--t-s); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } /* Trois barres, dessinées par la bordure : rien à charger. */ .entete__barres, .entete__barres::before, .entete__barres::after { display: block; width: 1.25rem; border-top: 1.5px solid currentColor; } .entete__barres { position: relative; height: 1.5px; } .entete__barres::before, .entete__barres::after { content: ""; position: absolute; inset-inline: 0; } .entete__barres::before { top: -0.4rem; } .entete__barres::after { top: 0.4rem; } .panneau { width: min(22rem, 88vw); max-width: none; height: 100%; max-height: none; margin: 0 0 0 auto; padding: calc(var(--hauteur-entete) + 1rem) var(--marge) var(--respiration); border: 0; background: var(--papier); color: var(--encre); } .panneau::backdrop { background: rgb(0 0 0 / 0.45); } @media (prefers-reduced-motion: no-preference) { .panneau[open] { animation: venir-de-droite var(--passage) var(--courbe); } } .panneau__fermer { position: absolute; top: 1.1rem; right: var(--marge); border: 0; background: none; color: inherit; font-size: 1.75rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer; } .panneau__nav { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--grotesque); font-size: var(--t-m); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; } .panneau__nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; } .panneau__nav a[aria-current="page"] { color: var(--accent-texte); } .panneau__nav .entete__gerer { margin-top: 1.25rem; border: 1px solid currentColor; padding: 0.7rem 1rem; text-align: center; } /* Le seuil est celui de ce que la barre porte vraiment : sept entrées au plus (les deux rayons, les motifs, à propos, le shop, le contact et « Gérer »). Les parutions et les rencontres l'ont quittée, elle tient plus bas. */ @media (max-width: 60rem) { .entete__nav { display: none; } .entete__replie { display: block; } /* Le nom et le bouton doivent tenir sur une ligne : à eux deux ils débordaient, et le bouton descendait hors de l'en-tête, qui a une hauteur fixe. */ .entete__barre { flex-wrap: nowrap; } .entete__nom { font-size: var(--t-m); } .entete__logo { width: 2.25rem; height: 2.25rem; } .entete__ouvrir-menu { white-space: nowrap; } } /* Le trait qui se déploie sous un lien. La page courante le porte d'emblée. */ .lien-trait, .entete__nav a, .pied a, .familles__lien, .fil a, .fiche__retour a { position: relative; text-decoration: none; color: inherit; padding-bottom: 0.2rem; } .lien-trait::after, .entete__nav a::after, .pied a::after, .familles__lien::after, .fil a::after, .fiche__retour a::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale var(--passage) var(--courbe); } .lien-trait:hover::after, .lien-trait:focus-visible::after, .entete__nav a:hover::after, .entete__nav a:focus-visible::after, .entete__nav a[aria-current="page"]::after, .pied a:hover::after, .pied a:focus-visible::after, .familles__lien:hover::after, .familles__lien:focus-visible::after, .familles__lien[aria-current]::after, .fil a:hover::after, .fil a:focus-visible::after, .fiche__retour a:hover::after, .fiche__retour a:focus-visible::after { scale: 1 1; } @media (prefers-reduced-motion: reduce) { .lien-trait::after, .entete__marque span::after, .entete__nav a::after, .pied a::after, .familles__lien::after, .fil a::after, .fiche__retour a::after { transition: none; } } /* Réservé à Marie, distinct de sa navigation publique. */ /* Assez spécifique pour reprendre le `padding-bottom` que `.entete__nav a` pose pour loger son trait : sans cela le mot s'asseyait trop bas dans son cadre. */ .entete__nav .entete__gerer { border: 1px solid currentColor; padding: 0.45rem 0.9rem; transition: background var(--geste) var(--courbe), color var(--geste) var(--courbe); } .entete__gerer::after { content: none; } .entete__gerer:hover { background: var(--encre); color: var(--papier); } .page:has(.bandeau) .entete:not(.entete--pose) .entete__gerer:hover { background: #fff; color: var(--encre); } /* ---------- Bandeau d'accueil ---------- */ .bandeau { position: relative; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--hauteur-entete) + var(--gouttiere)) var(--marge) var(--gouttiere); margin-bottom: var(--respiration); background: var(--encre); text-align: center; } /* Deux calques pour que l'un se découvre pendant que l'autre s'efface. Le voile assombrit juste assez pour que le texte clair tienne sur les quatre fonds. */ .bandeau__fond { position: absolute; inset: 0; background-image: linear-gradient(rgb(0 0 0 / 0.34), rgb(0 0 0 / 0.34)), var(--fond); background-color: var(--encre); background-size: cover; background-position: center; opacity: 0; transition: opacity 1.8s var(--courbe); } .bandeau__fond--visible { opacity: 1; } /* Une bannière plus large que son cadre y perdait la moitié de sa composition. Sur un écran couché, elle s'y montre entière, prolongée par la couleur de ses propres bords. Debout, l'image entière ne laisserait que deux bandes vides : le recadrage y reste le moindre mal. */ @media (min-aspect-ratio: 1/1) { .bandeau--panoramique .bandeau__fond { /* Trois couches : le voile sombre, l'image entière, et les deux teintes qui la prolongent — celle de son bord haut au-dessus, celle du bas dessous. */ background-image: linear-gradient(rgb(0 0 0 / 0.34), rgb(0 0 0 / 0.34)), var(--fond), linear-gradient(var(--teinte-haut, var(--encre)) 0 50%, var(--teinte-bas, var(--encre)) 50% 100%); background-size: 100% 100%, contain, 100% 100%; background-repeat: no-repeat; } } /* Assombrit le haut du bandeau, là où passe la navigation. */ .bandeau::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--hauteur-entete) * 2); background: linear-gradient(rgb(0 0 0 / 0.45), transparent); pointer-events: none; } .bandeau__contenu { position: relative; max-width: 46rem; } @keyframes monter { from { opacity: 0; translate: 0 1.5rem; } } @media (prefers-reduced-motion: no-preference) { .bandeau__logo, .bandeau__nom, .bandeau__mot, .bandeau__mot-suite, .bandeau__appels { animation: monter var(--entree) var(--courbe) backwards; } .bandeau__logo { animation-delay: 100ms; } .bandeau__nom { animation-delay: 260ms; } .bandeau__mot { animation-delay: 380ms; } .bandeau__mot-suite { animation-delay: 470ms; } .bandeau__appels { animation-delay: 560ms; } } .bandeau__logo { width: 5.5rem; height: 5.5rem; border-radius: 50%; margin: 0 auto 1.5rem; } /* Son nom, à la taille qu'il a dans l'en-tête : en retrait sous le monogramme, mais lisible. */ /* Le texte d'un bandeau se pose sur ce que Marie a déposé : une ombre courte le détache d'un fond clair sans se voir sur un fond sombre. */ .bandeau__nom, .bandeau__mot, .bandeau__mot-suite, .bandeau__appel { text-shadow: 0 1px 3px rgb(28 28 28 / 0.35); } .bandeau__nom { margin: 0 0 1.25rem; font-family: var(--grotesque); font-size: var(--t-m); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; color: rgb(255 255 255 / 0.92); } .bandeau__mot { margin: 0; font-size: var(--t-xl); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; color: #fff; text-wrap: balance; } /* Le mot qui accompagne le titre : en bas de casse et en retrait, pour que le titre garde le poids. */ .bandeau__mot-suite { max-width: var(--largeur-texte); margin: 0.9rem auto 0; font-size: var(--t-m); font-weight: 500; line-height: 1.5; /* La couleur plutôt que l'opacité : celle-ci effacerait aussi l'ombre. */ color: rgb(255 255 255 / 0.94); text-wrap: balance; } .bandeau__mot-suite p { margin: 0 0 0.6em; } .bandeau__mot-suite p:last-child { margin-bottom: 0; } /* Un titre resté dans l'accroche ne rivalise pas avec le nom de la série. */ .bandeau__mot-suite h2, .bandeau__mot-suite h3 { font-size: inherit; font-weight: 600; color: #fff; letter-spacing: 0.02em; text-transform: none; margin: 0 0 0.4em; } .bandeau__appels { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; margin-top: 2rem; } .bandeau__appel { font-family: var(--grotesque); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #fff; border: 1px solid rgb(255 255 255 / 0.75); padding: 0.8rem 1.5rem; transition: background var(--geste) var(--courbe), color var(--geste) var(--courbe), border-color var(--geste) var(--courbe); } .bandeau__appel:hover { color: var(--encre); background: #fff; } .bandeau :focus-visible { outline-color: #fff; } /* L'ouverture d'une page intérieure : le dispositif de l'accueil, à la même hauteur — une image qui ne prend pas l'écran n'immerge personne. Sauf quand Marie y pose une bannière nettement plus large que haute : `--ratio-fond` ramène alors le cadre à la hauteur qu'elle appelle, sinon elle serait agrandie jusqu'à n'en montrer qu'une bande. L'accueil, lui, reste plein écran quoi qu'il arrive : c'est son parti pris. */ .bandeau--page { min-height: clamp(60svh, calc(100vw / var(--ratio-fond, 0.5)), 100svh); margin-bottom: var(--respiration); } /* ---------- Accrochage ---------- Chaque pièce porte son rapport largeur/hauteur en --ratio ; flex-grow et flex-basis lui étant tous deux proportionnels, les hauteurs d'une même rangée s'égalisent. */ /* ---------- Familles et séries ---------- */ .familles { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-block: var(--respiration) 0; font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; } .familles__lien { color: var(--encre-tenue); text-decoration: none; transition: color var(--geste) var(--courbe); } .familles__lien:hover { color: var(--encre); } .familles__lien[aria-current] { color: var(--encre); } .motifs__appel { margin-top: var(--respiration); color: var(--encre-douce); } .serie__titre { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--grotesque); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; color: var(--encre-douce); margin: 0 0 1.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--filet); } .serie__compte { letter-spacing: 0.04em; color: var(--encre-tenue); font-variant-numeric: tabular-nums; } .serie__titre--page { font-size: var(--t-s); color: var(--encre); } /* ---------- Tête d'un rayon ---------- */ .rayon-tete { text-align: center; margin-bottom: var(--gouttiere); } .rayon-tete__surtitre { font-family: var(--grotesque); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; color: var(--encre-tenue); margin: 0 0 0.5rem; } .rayon-tete__titre { font-size: var(--t-xl); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; margin: 0; } .rayon-tete__texte { max-width: var(--largeur-texte); margin: 1.25rem auto 0; text-align: center; } /* ---------- Vignettes de série ---------- */ .series { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gouttiere) var(--gouttiere); list-style: none; margin: 0; padding: 0; } .serie-vignette__lien { display: block; text-decoration: none; color: inherit; } .serie-vignette__cadre { display: block; overflow: hidden; margin-bottom: 0.9rem; } .serie-vignette__image { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale var(--entree) var(--courbe), opacity var(--fondu) var(--courbe); } .serie-vignette__lien:hover .serie-vignette__image, .serie-vignette__lien:focus-visible .serie-vignette__image { scale: 1.04; opacity: 0.92; } .serie-vignette__nom { display: block; font-weight: 500; letter-spacing: 0.06em; text-align: center; } .serie-vignette__compte { display: block; text-align: center; margin-top: 0.2rem; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-tenue); } .accrochage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--respiration) var(--gouttiere); list-style: none; margin: 0; padding: 0; } .accrochage__piece { flex-grow: var(--ratio); flex-basis: calc(var(--ratio) * 15rem); min-width: 13rem; } /* Absorbe la largeur restante de la dernière rangée. */ .accrochage__reste { flex-grow: 100; flex-basis: 22rem; height: 0; } .accrochage__lien { display: block; text-decoration: none; } .accrochage__image { width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: contain; transition: opacity var(--fondu) var(--courbe); } .accrochage__vue { display: block; position: relative; } .accrochage__image--seconde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--fondu) var(--courbe); } .accrochage__lien:hover .accrochage__image--seconde, .accrochage__lien:focus-visible .accrochage__image--seconde { opacity: 1; } .accrochage__lien:hover .accrochage__image:only-child { opacity: 0.82; } .accrochage__cartel { margin-top: 1rem; text-align: center; } @media (max-width: 44rem) { .accrochage { display: grid; gap: var(--respiration); } .accrochage__reste { display: none; } } /* ---------- Fiche d'une œuvre ---------- */ .fiche { display: grid; gap: var(--gouttiere); grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); align-items: start; margin-block: clamp(2rem, 5vw, 4rem) var(--respiration); } .fiche__visuels { display: grid; gap: 1.5rem; } /* ---------- Les vues d'une œuvre ---------- */ .galerie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; } .galerie__vignettes { position: sticky; top: calc(var(--hauteur-entete) + 1rem); display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .galerie__scene { display: grid; gap: 1.5rem; } .galerie__vignette { display: block; width: 4.5rem; padding: 0; background: none; border: 1px solid transparent; cursor: pointer; transition: border-color var(--passage) var(--courbe), opacity var(--geste) var(--courbe); opacity: 0.7; } .galerie__vignette:hover, .galerie__vignette[aria-current="true"] { opacity: 1; } .galerie__vignette[aria-current="true"] { border-color: var(--encre); } .galerie__vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; } .galerie__loupe { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: right; } /* Le curseur appartient au visuel, pas au bouton qui l'entoure : autour de l'image, il n'y a rien à agrandir. */ .galerie__loupe img { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='17' fill='black' fill-opacity='0.25' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M20 12v16M12 20h16' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 20 20, zoom-in; } .galerie__mention { display: block; margin-top: 0.5rem; font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-tenue); } /* display réservé à [open] : déclaré sur .zoom, il écraserait le display: none que s'applique un dialogue fermé. */ .zoom { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; padding: 0; border: 0; background: transparent; overscroll-behavior: contain; opacity: 0; scale: 0.98; /* allow-discrete : sans lui, la fermeture ne s'anime pas. */ transition: opacity var(--passage) var(--courbe), scale var(--passage) var(--courbe), display var(--passage) allow-discrete, overlay var(--passage) allow-discrete; } .zoom[open] { display: grid; place-items: center; opacity: 1; scale: 1; } @starting-style { .zoom[open] { opacity: 0; scale: 0.98; } } .zoom__pas { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; font-size: 2rem; line-height: 1; color: var(--encre); background: rgb(255 255 255 / 0.9); border: 0; padding: 0.6rem 1rem 0.9rem; cursor: pointer; transition: background var(--geste) var(--courbe), scale var(--geste) var(--courbe); } .zoom__pas--avant { left: 0.75rem; } .zoom__pas--apres { right: 0.75rem; } .zoom__pas:hover { background: #fff; scale: 1.06; } .zoom::backdrop { background: rgb(0 0 0 / 0); transition: background var(--passage) var(--courbe), display var(--passage) allow-discrete, overlay var(--passage) allow-discrete; } .zoom[open]::backdrop { background: rgb(0 0 0 / 0.72); } @starting-style { .zoom[open]::backdrop { background: rgb(0 0 0 / 0); } } /* L'image ne déborde pas : le clic à côté tombe sur le dialogue, qui ferme. */ .zoom__image { max-width: min(94vw, 1400px); max-height: 92svh; width: auto; height: auto; object-fit: contain; background: var(--papier); } @keyframes venir-de-droite { from { opacity: 0; translate: 3.5rem 0; } } @keyframes venir-de-gauche { from { opacity: 0; translate: -3.5rem 0; } } .zoom__image--depuis-droite { animation: venir-de-droite var(--passage) var(--courbe); } .zoom__image--depuis-gauche { animation: venir-de-gauche var(--passage) var(--courbe); } .zoom__fermer { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; font-size: 1.5rem; line-height: 1; color: var(--encre); background: var(--papier); border: 1px solid var(--filet); padding: 0.15rem 0.6rem 0.35rem; cursor: pointer; } @media (max-width: 44rem) { .galerie { grid-template-columns: minmax(0, 1fr); } .galerie__vignettes { order: 2; grid-auto-flow: column; justify-content: start; overflow-x: auto; } } .fiche__image { width: 100%; height: auto; } /* Pas de sticky : plus haute que la fenêtre, la colonne rendrait son bas — le prix, le bouton — inatteignable. */ .fiche__colonne { align-self: start; container-type: inline-size; } .fiche__titre { font-family: var(--serif); font-weight: 500; font-size: var(--t-xl); line-height: 1.2; letter-spacing: 0.02em; margin: 0 0 1.25rem; text-wrap: balance; } .fiche__donnees { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce); display: grid; gap: 0.5rem; margin: 0 0 1.75rem; padding: 1.25rem 0; border-block: 1px solid var(--filet); } .fiche__description { margin-bottom: 2rem; } .fiche__prix { font-size: var(--t-l); margin-bottom: 1rem; } .fiche__note { color: var(--encre-douce); margin-bottom: 1.25rem; } /* ---------- Versions proposées ---------- */ .versions { margin: 0 0 2rem; display: grid; gap: 1.75rem; } /* Un legend ne participe pas à la grille de son fieldset. */ .versions__nom { display: block; width: 100%; padding: 0; margin-bottom: 0.85rem; font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-tenue); } .versions__valeurs { margin: 0.15rem 0 0; } .versions__axe { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .versions__choix { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Le radio disparaît sous son étiquette ; :has() reporte son focus. */ .versions__valeur input { position: absolute; opacity: 0; pointer-events: none; } .versions__mot { display: block; font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 1rem; border: 1px solid var(--filet); cursor: pointer; transition: border-color var(--geste) var(--courbe), background var(--geste) var(--courbe), color var(--geste) var(--courbe); } .versions__valeur:hover .versions__mot { border-color: var(--accent); } .versions__valeur:has(input:checked) .versions__mot { border-color: var(--encre); background: var(--encre); color: var(--papier); } .versions__valeur:has(input:focus-visible) .versions__mot { outline: 2px solid var(--accent); outline-offset: 3px; } .versions__retenu { margin-left: 0.5rem; color: var(--encre); } .versions__choix--pastilles { gap: 0.9rem; } .versions__pastille { display: block; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); cursor: pointer; transition: outline-color var(--geste) var(--courbe), scale var(--geste) var(--courbe); outline: 1px solid transparent; outline-offset: 3px; } .versions__valeur:hover .versions__pastille { scale: 1.08; } .versions__valeur:has(input:checked) .versions__pastille { outline-color: var(--encre); } .versions__valeur:has(input:focus-visible) .versions__pastille { outline: 2px solid var(--accent); outline-offset: 3px; } .fiche__prix--absent { font-size: var(--t-m); color: var(--encre-tenue); font-style: italic; } /* ---------- Dépliants de la fiche ---------- */ .depliants { display: grid; border-top: 1px solid var(--filet); margin-bottom: 1.75rem; } .depliant { border-bottom: 1px solid var(--filet); } .depliant__tete { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; cursor: pointer; font-family: var(--grotesque); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; list-style: none; transition: color var(--geste) var(--courbe); } .depliant__tete::-webkit-details-marker { display: none; } .depliant__tete:hover { color: var(--accent-texte); } .depliant__picto { width: 1rem; height: 1rem; flex: none; } .depliant__tete::after { content: "+"; margin-left: auto; font-size: var(--t-m); line-height: 1; transition: rotate var(--passage) var(--courbe); } .depliant[open] .depliant__tete::after { rotate: 135deg; } .depliant__contenu { padding-bottom: 1.25rem; color: var(--encre-douce); } .depliant__contenu p { margin: 0; } .depliant__contenu a { color: var(--accent-texte); } .tarifs { border-collapse: collapse; margin-bottom: 1.75rem; } .tarifs__titre { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-tenue); text-align: left; padding-bottom: 0.5rem; } .tarifs th, .tarifs td { font-weight: 400; text-align: left; padding: 0.35rem 2rem 0.35rem 0; } .tarifs td { padding-right: 0; white-space: nowrap; } .fiche__retour { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce); } @media (max-width: 52rem) { .fiche { grid-template-columns: minmax(0, 1fr); } .fiche__colonne { position: static; } } /* ---------- Boutons ---------- */ .bouton { display: inline-block; font-family: var(--grotesque); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; /* Encre : le terracotta est trop clair pour porter du blanc. */ color: var(--encre); background: var(--accent); border: 1px solid var(--accent); border-radius: 0; padding: 0.9rem 1.75rem; cursor: pointer; text-decoration: none; transition: background var(--geste) var(--courbe), color var(--geste) var(--courbe), border-color var(--geste) var(--courbe); } .bouton:hover { background: var(--accent-clair); color: var(--papier); } .bouton--discret { color: var(--encre); background: transparent; border-color: var(--filet); } .bouton--discret:hover { background: transparent; color: var(--accent-texte); border-color: var(--accent); } /* ---------- Rencontres ---------- */ .rencontres { list-style: none; margin: 0; padding: 0; } .rencontre { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem 2rem; padding-block: 1.75rem; border-bottom: 1px solid var(--filet); } .rencontre--passee { color: var(--encre-tenue); } /* Sur l'accueil le bloc prend la largeur de la page ; ce qu'on y lit reste à la largeur de lecture. */ .rencontre__propos { max-width: var(--largeur-texte); } .rencontre__dates { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.35rem; } .rencontre__titre { font-size: var(--t-l); font-weight: 400; margin: 0 0 0.25rem; } .rencontre__lieu { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); } .rencontre__enCours { color: var(--accent-texte); } @media (max-width: 40rem) { .rencontre { grid-template-columns: minmax(0, 1fr); } } /* ---------- Titres de section ---------- */ .titre-section { font-family: var(--grotesque); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 2.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--filet); } .titre-page { font-size: var(--t-xl); font-weight: 500; line-height: 1.2; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; margin: 0 0 2rem; } /* Le même mot, quand la page n'a pas d'ouverture pour le porter. */ .titre-page__suite { max-width: var(--largeur-texte); margin: -1.5rem 0 2rem; color: var(--encre-douce); text-wrap: balance; } .rayon-tete .titre-page__suite { margin-inline: auto; } /* ---------- Parutions ---------- */ .presse__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--gouttiere); list-style: none; margin: 0; padding: 0; } .parution__visuel { width: 100%; height: auto; margin-bottom: 1.25rem; } .parution__titre { font-size: var(--t-l); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; margin: 0 0 0.35rem; } .parution__edition { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-tenue); margin: 0 0 0.85rem; } .parution__propos { margin: 0; color: var(--encre-douce); max-width: 34rem; } /* ---------- Témoignages ---------- */ .temoignages__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--gouttiere); list-style: none; margin: 0; padding: 0; } .temoignage__propos { margin: 0 0 0.85rem; font-style: italic; color: var(--encre-douce); } .temoignage__signature { margin: 0; font-weight: 600; letter-spacing: 0.04em; color: var(--corail-texte); } /* ---------- Portrait ---------- */ .portrait-texte { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, var(--largeur-texte)); gap: var(--gouttiere); align-items: start; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--marge); } .portrait { width: 100%; height: auto; } @media (max-width: 48rem) { .portrait-texte { grid-template-columns: minmax(0, 1fr); } } /* ---------- Texte long ---------- */ .prose p { margin-block: 0 1.25em; } .prose h2 { font-size: var(--t-s); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; margin-block: 2.5em 1em; } .prose a { color: var(--accent-texte); } /* ---------- Formulaire ---------- */ .champ { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; max-width: 32rem; } .champ__etiquette { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce); } .champ__saisie { font-family: var(--serif); font-size: var(--t-m); color: var(--encre); background: var(--papier); border: 1px solid var(--filet); border-radius: 0; padding: 0.75rem 0.85rem; width: 100%; transition: border-color var(--passage) var(--courbe), background var(--passage) var(--courbe); } .champ__saisie:focus { border-color: var(--accent); outline: none; } /* ---------- Messages ---------- */ .message { font-family: var(--grotesque); font-size: var(--t-s); padding: 1rem 1.25rem; margin-block: 1.5rem; border-left: 2px solid var(--accent); background: var(--papier-grave); max-width: 40rem; } .message--erreur { border-left-color: #9b2c2c; } /* ---------- Pied de page ---------- */ .pied { margin-top: var(--respiration); padding-block: 3rem 3.5rem; border-top: 1px solid var(--filet); font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-tenue); } .pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2.5rem var(--gouttiere); margin-bottom: 3rem; } .pied__titre { font-size: inherit; font-weight: 500; letter-spacing: var(--interlettrage-titre); color: var(--encre); margin: 0 0 1rem; } .pied__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .pied__bas { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--filet); } .reseaux { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .reseaux__lien { display: block; color: var(--encre-douce); text-decoration: none; } .reseaux__lien:hover { color: var(--encre); } /* Au survol, l'encre pleine : le pied est en retrait, le lien visé ne l'est pas. */ .pied a:hover, .pied a:focus-visible { color: var(--encre); } .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pied a { text-decoration: none; } /* ---------- Divers ---------- */ .vide { color: var(--encre-tenue); font-style: italic; } .visuel-absent { background: var(--papier-grave); border: 1px solid var(--filet); aspect-ratio: 4 / 3; min-height: 12rem; } .accrochage__image.visuel-absent { width: 100%; aspect-ratio: var(--ratio); } .saut-contenu { position: absolute; left: -9999px; } .saut-contenu:focus { position: static; display: inline-block; padding: 0.75rem 1rem; } /* ---------- Apparition au défilement ---------- */ /* L'état de départ n'est posé que là où un script viendra le lever, et :where() le garde sans spécificité pour que .est-apparu l'emporte toujours. */ /* .scripts-actifs, et non « scripting: enabled » : le navigateur peut exécuter du JavaScript sans savoir lire les cartes d'import, auquel cas rien ne vient jamais poser .est-apparu et la page reste blanche. */ @media (prefers-reduced-motion: no-preference) { :where(.scripts-actifs) :where(.titre-section, .serie__titre, .rayon-tete, .serie-tete, .portrait-texte, .rencontre, .series > li, .accrochage__piece, .presse__liste > li, .temoignages__liste > li) { opacity: 0; translate: 0 1.75rem; transition: opacity var(--entree) var(--courbe), translate var(--entree) var(--courbe); } .est-apparu { opacity: 1; translate: none; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--passage); animation-timing-function: var(--courbe); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after, ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Tête d'une série ---------- */ .fil { font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-tenue); margin-top: calc(var(--hauteur-entete) * 0.4); } .fil a { text-decoration: none; } /* Assez large pour que ses phrases d'accroche, écrites ligne à ligne, tiennent sans qu'un mot retombe seul. */ .serie-tete { text-align: center; max-width: 60rem; margin: 0 auto var(--gouttiere); } /* Le retour aux séries se prend après avoir vu la série. */ .fil--sortie { margin-block: var(--respiration) var(--gouttiere); } .serie-tete__accroche { margin-top: 1.75rem; color: var(--encre-douce); } .serie-tete__accroche h2 { font-size: var(--t-m); font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--encre); margin-block: 0 0.5rem; } .serie-tete__accroche p { margin: 0; } .serie-tete__accroche strong { font-weight: inherit; }