/* Marie K. — encre et papier. Parti pris : l'interface est achromatique, toute la couleur vient des œuvres. Un seul accent (l'outremer par défaut, pigment de l'aquarelliste), réservé aux liens et aux boutons. Les huit variables marquées « réglable » sont surchargées à chaud par les jetons d'Apparence, injectés dans le — c'est par là que Marie et Claude changent le design. Tout le reste s'en déduit par calc() et color-mix(), d'où les facteurs nus plutôt que des longueurs en dur : la mise en page ne dépend d'aucune valeur. */ :root { --encre: #17150f; /* réglable */ --papier: #fcfbf8; /* réglable */ --accent: #26348c; /* réglable */ --serif: "Newsreader", Georgia, "Times New Roman", serif; /* réglable */ --grotesque: "Archivo", 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); --t-xs: calc(0.6875rem * var(--echelle-texte)); --t-s: calc(0.8125rem * var(--echelle-texte)); --t-m: calc(1.0625rem * 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; } *, *::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 160ms ease, color 160ms ease; } a:hover { color: var(--accent); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Structure ---------- */ .page { max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--marge); } .colonne-texte { max-width: var(--largeur-texte); } .colonne-large { max-width: 46rem; } .section { margin-block: var(--respiration); } /* ---------- Cartel ---------- Le vocabulaire de l'exposition : titre en italique, données en capitales espacées. Sert partout où une œuvre est nommée. */ .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-style: italic; font-size: var(--t-m); font-weight: 400; letter-spacing: 0; 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 ---------- */ .entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.75rem 1.25rem; border-bottom: 1px solid var(--filet); } .entete__nom { font-size: var(--t-l); font-weight: 400; letter-spacing: 0.02em; margin: 0; } .entete__nom a { text-decoration: none; } .entete__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; font-family: var(--grotesque); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; } .entete__nav a { text-decoration: none; color: var(--encre-douce); } .entete__nav a:hover, .entete__nav a[aria-current="page"] { color: var(--encre); } .entete__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.4em; } /* ---------- Ouverture ---------- On entre par une œuvre, pas par une phrase d'accroche. */ .ouverture { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gouttiere); margin-block: clamp(2rem, 5vw, 4rem) var(--respiration); } .ouverture__lien { flex: 0 1 auto; min-width: 0; } /* Contrainte par la hauteur, pas par la largeur : l'œuvre garde sa taille propre au lieu d'être étirée au format de l'écran. */ .ouverture__image { max-height: calc(var(--hauteur-ouverture) * 1vh); width: auto; max-width: 100%; } .ouverture__cartel { flex: 0 1 15rem; padding-bottom: 0.35rem; } @media (max-width: 52rem) { .ouverture__lien, .ouverture__cartel { flex-basis: 100%; } .ouverture__image { width: 100%; max-height: none; } } /* ---------- Accrochage ---------- Une cimaise, pas une grille de cartes : chaque rangée occupe toute la largeur du mur et ses œuvres retombent sur une même hauteur, quelles que soient leurs proportions. Chaque pièce porte son rapport largeur/hauteur en --ratio ; le flex-grow et le flex-basis lui étant tous deux proportionnels, les largeurs finales le sont aussi — donc les hauteurs s'égalisent. */ .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, qui sans cela étirerait démesurément ses dernières œuvres. */ .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 200ms ease; } .accrochage__lien:hover .accrochage__image { opacity: 0.82; } .accrochage__cartel { margin-top: 1rem; } @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; } .fiche__image { width: 100%; height: auto; } .fiche__colonne { position: sticky; top: 2rem; } .fiche__titre { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--t-xl); line-height: 1.2; margin: 0 0 1.25rem; } .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__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; color: var(--papier); background: var(--accent); border: 1px solid var(--accent); border-radius: 0; padding: 0.9rem 1.75rem; cursor: pointer; text-decoration: none; transition: background 160ms ease; } .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); 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); } .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); } @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-xxl); font-weight: 300; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 2rem; } /* ---------- Texte long ---------- */ .prose p { margin-block: 0 1.25em; } .prose h2 { font-size: var(--t-l); font-weight: 400; font-style: italic; margin-block: 2em 0.75em; } .prose a { color: var(--accent); } /* ---------- 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%; } .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: 2.5rem 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); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; } .pied a { text-decoration: none; } /* ---------- Divers ---------- */ .vide { color: var(--encre-tenue); font-style: italic; } /* Réserve tenant la place d'un visuel non encore déposé. */ .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; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }