/* 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; /* Zéro sans annonce : la bande la porte, et tout ce qui est fixe s'en décale. */ --hauteur-annonce: 0rem; /* 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 ---------- */ /* Ce qu'elle annonce, au-dessus de tout : dans le registre du site — capitales espacées, comme les titres et le menu. */ .annonce { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: center; /* Min et non height : le texte peut prendre deux lignes sur un portable, et c'est `annonce_controller` qui reporte la hauteur réelle sur la page. */ min-height: var(--hauteur-annonce); padding: 0.7rem var(--marge); background: var(--encre); color: var(--papier); font-family: var(--grotesque); font-size: var(--t-s); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; text-wrap: balance; } .annonce__lien:hover, .annonce__lien:focus-visible { /* Sur fond d'encre, le terracotta du survol général vire au sale : seul le trait bouge. */ color: inherit; } .page--annoncee { --hauteur-annonce: 3.25rem; } /* Transparent au-dessus du bandeau, blanc dès qu'on descend. */ .entete { position: fixed; inset: var(--hauteur-annonce) 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) + var(--hauteur-annonce) + 1rem); } main { padding-top: calc(var(--hauteur-entete) + var(--hauteur-annonce)); } main:has(.bandeau) { padding-top: var(--hauteur-annonce); } 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, .annonce__lien, .fiche__retour a { position: relative; text-decoration: none; color: inherit; padding-bottom: 0.2rem; } .lien-trait::after, .annonce__lien::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, .annonce__lien:hover::after, .annonce__lien: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: calc(100svh - var(--hauteur-annonce)); 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); /* La couleur du bord de l'image, le temps qu'elle arrive : le noir sautait aux yeux sur ses fonds clairs. */ background-color: var(--teinte-haut, var(--encre)); background-size: cover; background-position: center; opacity: 0; transition: opacity 1.8s var(--courbe); } .bandeau__fond--visible { opacity: 1; } /* 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; } /* Sur l'accueil, la phrase de Marie se lit au corps du texte. En très grandes capitales elle écrasait le monogramme et son nom — et c'est ce qui l'avait fait renoncer à l'écrire. Ailleurs, `.bandeau__mot` reste le titre de la page. */ .bandeau--accueil .bandeau__mot { max-width: var(--largeur-texte); margin-inline: auto; font-size: var(--t-m); line-height: 1.5; letter-spacing: normal; text-transform: none; } /* 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. Elle est recadrée s'il le faut : ce sont des fonds, pas des œuvres. */ .bandeau--page { 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); } /* La loupe de « Work ». Le pictogramme est dans le champ : sans lui, on ne la reconnaît pas en descendant la page. */ .bande-loupe { padding: calc(var(--hauteur-entete) / 2 + 1rem) var(--marge); /* L'en-tête est fixe : sans cette marge, un lien partagé amène le champ dessous. */ scroll-margin-top: calc(var(--hauteur-entete) + var(--hauteur-annonce)); margin-bottom: var(--respiration); background: var(--papier-grave); border-block: 1px solid var(--filet); } .loupe { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: stretch; max-width: var(--largeur-page); margin-inline: auto; } .loupe__champ { position: relative; flex: 0 1 26rem; display: flex; } .loupe__picto { position: absolute; inset: 0 auto 0 1rem; width: 1.1rem; align-self: center; color: var(--encre-tenue); pointer-events: none; } .loupe__saisie { flex: 1; font-family: var(--serif); font-size: var(--t-s); padding: 0.85rem 2.6rem 0.85rem 2.75rem; color: var(--encre); background: var(--papier); border: 1px solid var(--filet); border-radius: 0; } .loupe__saisie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Celui de Chrome ne se met pas dans la charte, et Firefox n'en pose aucun. */ .loupe__saisie::-webkit-search-cancel-button { display: none; } .loupe__effacer { position: absolute; inset: 0 0.35rem 0 auto; width: 2rem; display: flex; align-items: center; justify-content: center; font-size: var(--t-m); line-height: 1; color: var(--encre-tenue); background: none; border: 0; cursor: pointer; transition: color var(--geste) var(--courbe); } .loupe__effacer:hover { color: var(--encre); } /* `.bouton` porte un display : sans cette règle, [hidden] ne masque rien ici. */ .loupe [hidden] { display: none; } /* ---------- Sa lettre ---------- */ .inscription { margin-top: var(--respiration); } .inscription__titre { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--interlettrage-titre); text-transform: uppercase; margin: 0 0 0.75rem; } .inscription__propos { max-width: var(--largeur-texte); margin: 0 0 1.5rem; color: var(--encre-douce); } /* Sous le pied et au Shop fermé : le champ et le bouton sur une ligne. */ .inscription--compacte { margin-top: 0; } .inscription--compacte .inscription__formulaire { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; } .inscription--compacte .champ { flex: 1 1 16rem; margin-bottom: 0; max-width: 24rem; } .news__reseaux { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; margin-top: 2.5rem; } .news__reseaux .inscription__propos { margin: 0; } /* ---------- 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__lettre { margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--filet); font-family: var(--serif); font-size: var(--t-s); letter-spacing: normal; text-transform: none; } .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__titre a { color: inherit; } .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); } /* L'appel vers la suite, lui, se pose au milieu de la page. */ .fil--appel { text-align: center; } .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; }