@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..800;1,400..600&family=Source+Sans+3:ital,wght@0,300..700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
/* ==========================================================================
Histoire de bijoux — « Velours nuit & argent froid »
1 Tokens 8 En-tete
2 Reset 9 Hero
3 Enveloppes 10 Cartes d'article
4 Titres 11 Filtre par categorie
5 Le chaton 12 Sommaire de page pilier
6 Corps editorial 13 FAQ
7 Images 14 Entretien (articles Q/R)
15 Formulaire 16 Fil d'Ariane
17 Maillage 18 Pied de page 19 Utilitaires
========================================================================== */
/* 1 ——————————————————————————————————————————————— Tokens */
:root {
--nuit: #14141E;
--nuit-creux: #1D1D2B;
--nuit-haut: #26263A;
--argent: #C9CDD4;
--argent-vif: #EDEFF2;
--argent-mat: #7E848D;
--ambre: #C8873A;
--ivoire: #F2EFEA;
--ivoire-pale: #A8A5A0;
--ombre: #0B0B12;
--sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
--serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
--t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.25rem;
--t-lg: 1.6rem; --t-xl: 2.1rem; --t-2xl: 2.9rem; --t-3xl: 4rem;
--pas: .5rem; --pas-2: 1rem; --pas-3: 1.5rem;
--pas-4: 2.5rem; --pas-5: 4rem; --pas-6: 6rem;
/* Regle reseau : la colonne d'article ne descend jamais sous 820px. */
--mesure: 860px;
--largeur-max: 1180px;
--gouttiere: clamp(1rem, 4vw, 2rem);
--ease: cubic-bezier(.22, 1, .36, 1);
--dur: 420ms;
}
/* 2 ——————————————————————————————————————————————— Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--nuit);
color: var(--ivoire);
font-family: var(--sans);
font-size: var(--t-base);
font-weight: 350;
line-height: 1.72;
-webkit-font-smoothing: antialiased;
}
/* Sans `height: auto`, Astro laisse les attributs width/height natifs
et l'image s'etire verticalement. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--argent-vif); text-decoration-color: rgba(201, 205, 212, .38); text-underline-offset: .18em; }
a:hover { color: #fff; text-decoration-color: var(--ambre); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ambre); color: var(--ombre); }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* 3 ——————————————————————————————————————————————— Enveloppes */
.enveloppe { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); }
.enveloppe--article { max-width: var(--mesure); }
.section { padding-block: var(--pas-6); }
.section--creux { background: var(--nuit-creux); }
/* 4 ——————————————————————————————————————————————— Titres */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.16; color: var(--argent-vif); margin: 0 0 var(--pas-2); letter-spacing: -.012em; }
h1 { font-size: clamp(2rem, 5vw, var(--t-3xl)); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 3.4vw, var(--t-xl)); margin-top: var(--pas-5); }
h3 { font-size: clamp(1.2rem, 2.4vw, var(--t-md)); margin-top: var(--pas-4); color: var(--argent); }
/* Filet d'argent sous les H2 du corps : la seule ornementation recurrente. */
.corps h2::after {
content: ''; display: block; width: 3.5rem; height: 1px; margin-top: var(--pas);
background: linear-gradient(90deg, var(--ambre), transparent);
}
.kicker {
font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
text-transform: uppercase; letter-spacing: .18em; color: var(--ambre);
margin: 0 0 var(--pas);
}
/* 5 ——————————————————————————————————————————————— Le chaton (signature visuelle)
Cartouche a angles biseautes. Porte une information REELLE (epoque, metal,
region) — jamais un ornement decoratif vide. */
.chaton {
display: inline-flex; align-items: baseline; gap: .55em;
padding: .34em .85em;
font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
color: var(--argent);
background: var(--nuit-haut);
border: 1px solid rgba(201, 205, 212, .22);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.chaton__cle { color: var(--ivoire-pale); text-transform: uppercase; font-size: .84em; }
.chaton__valeur { color: var(--argent-vif); }
.chaton--ambre { border-color: rgba(200, 135, 58, .5); }
.chaton--ambre .chaton__valeur { color: var(--ambre); }
.chatons { display: flex; flex-wrap: wrap; gap: var(--pas); margin: var(--pas-3) 0; padding: 0; list-style: none; }
/* 6 ——————————————————————————————————————————————— Corps editorial */
.corps { font-size: 1.06rem; }
.corps > * + * { margin-top: var(--pas-3); }
.corps p { margin: 0; }
.corps strong { color: var(--argent-vif); font-weight: 600; }
.corps ul, .corps ol { margin: var(--pas-3) 0; padding-left: 1.35em; }
.corps li { margin-bottom: .55em; }
.corps li::marker { color: var(--ambre); }
.corps blockquote {
margin: var(--pas-4) 0; padding: var(--pas-2) 0 var(--pas-2) var(--pas-3);
border-left: 2px solid var(--ambre);
font-family: var(--serif); font-size: var(--t-md); font-style: italic;
color: var(--argent);
}
.corps code { font-family: var(--mono); font-size: .88em; background: var(--nuit-haut); padding: .12em .4em; border-radius: 3px; }
.corps hr { border: 0; height: 1px; background: rgba(201, 205, 212, .16); margin: var(--pas-5) 0; }
/* Tableaux : plusieurs sites du reseau n'en avaient aucun style. */
.corps table { width: 100%; border-collapse: collapse; margin: var(--pas-4) 0; font-size: var(--t-sm); }
.corps thead th {
text-align: left; padding: .7em .9em; background: var(--nuit-haut);
font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
letter-spacing: .08em; color: var(--ambre); font-weight: 500;
border-bottom: 1px solid rgba(201, 205, 212, .22);
}
.corps tbody td { padding: .7em .9em; border-bottom: 1px solid rgba(201, 205, 212, .1); vertical-align: top; }
.corps tbody tr:hover { background: rgba(201, 205, 212, .04); }
.tableau-enveloppe { overflow-x: auto; margin: var(--pas-4) 0; }
.chapeau {
font-family: var(--serif); font-size: var(--t-md); font-style: italic;
line-height: 1.6; color: var(--argent); margin: 0 0 var(--pas-4);
}
.encadre {
margin: var(--pas-4) 0; padding: var(--pas-3);
background: var(--nuit-creux); border-left: 2px solid var(--ambre);
}
.encadre__titre { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ambre); margin: 0 0 var(--pas); }
/* 7 ——————————————————————————————————————————————— Images
Le ratio vit sur l'![]()
, PAS sur la : sinon `overflow:hidden`
masque les . (fix reseau twity.fr) */
.img-hero > img, img.img-hero { aspect-ratio: 16 / 9; }
.img-card > img, img.img-card { aspect-ratio: 3 / 2; }
.img-body > img, img.img-body { aspect-ratio: 3 / 2; }
.img-portrait > img, img.img-portrait { aspect-ratio: 1 / 1; border-radius: 50%; }
.img-hero > img, .img-card > img, .img-body > img, .img-portrait > img,
img.img-hero, img.img-card, img.img-body, img.img-portrait {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.corps figure { margin: var(--pas-5) 0; }
.corps figure img { border-radius: 2px; }
/* figcaption NU, pas seulement .img-caption : les legendes markdown ne portent
aucune classe et resteraient invisibles. */
figcaption, .img-caption {
margin-top: .7em; font-size: var(--t-sm); font-style: italic;
color: var(--ivoire-pale); line-height: 1.5;
border-left: 1px solid rgba(200, 135, 58, .5); padding-left: .8em;
}
/* 8 ——————————————————————————————————————————————— En-tete */
.entete {
position: sticky; top: 0; z-index: 50;
background: rgba(20, 20, 30, .84); backdrop-filter: blur(11px);
border-bottom: 1px solid rgba(201, 205, 212, .12);
transition: background var(--dur) var(--ease);
}
.entete.defile { background: rgba(11, 11, 18, .96); }
.entete__interieur { display: flex; align-items: center; justify-content: space-between; gap: var(--pas-3); min-height: 68px; }
.marque { display: inline-flex; align-items: baseline; gap: .5em; font-family: var(--serif); font-size: var(--t-md); color: var(--argent-vif); text-decoration: none; }
.marque:hover { color: #fff; }
.marque__pierre { width: .5em; height: .5em; background: var(--ambre); transform: rotate(45deg); flex: none; }
.nav { display: flex; align-items: center; gap: var(--pas-3); }
.nav a {
font-size: var(--t-sm); letter-spacing: .02em; color: var(--ivoire);
text-decoration: none; padding: .35em 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--argent-vif); border-bottom-color: var(--ambre); }
.burger { display: none; background: none; border: 0; padding: .5em; cursor: pointer; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--argent); margin: 4px 0; transition: transform var(--dur) var(--ease), opacity var(--dur); }
body.nav-ouverte .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-ouverte .burger span:nth-child(2) { opacity: 0; }
body.nav-ouverte .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 860px) {
.burger { display: block; }
.nav {
position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch;
gap: 0; padding: var(--pas-2) var(--gouttiere) var(--pas-4);
background: var(--nuit-creux); border-bottom: 1px solid rgba(201, 205, 212, .12);
transform: translateY(-120%); transition: transform var(--dur) var(--ease);
}
body.nav-ouverte .nav { transform: translateY(0); }
.nav a { padding: .8em 0; border-bottom: 1px solid rgba(201, 205, 212, .1); }
}
/* 9 ——————————————————————————————————————————————— Hero */
.hero { position: relative; isolation: isolate; }
.hero__media { position: relative; }
.hero__media img { width: 100%; }
.hero__voile {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(11,11,18,.42) 0%, rgba(11,11,18,.62) 55%, rgba(20,20,30,.97) 100%);
}
.hero__texte { position: absolute; inset-inline: 0; bottom: 0; padding-block: var(--pas-5); }
/* Sur l'accueil, le sujet de l'image (le collier) occupe le bas du cadre : le voile
n'assombrit que la moitié basse et le titre se pose dessous, sans le recouvrir. */
.hero--accueil .hero__voile {
background: linear-gradient(180deg, rgba(11,11,18,.10) 0%, rgba(11,11,18,.22) 45%, rgba(20,20,30,.92) 100%);
}
.hero__titre { margin: 0; text-shadow: 0 2px 22px rgba(11, 11, 18, .75); }
.hero__accroche { max-width: 46ch; margin: var(--pas-2) 0 0; font-size: var(--t-md); color: var(--argent); font-family: var(--serif); font-style: italic; }
/* Pas de min-height ici : il forçait un cadre bien plus panoramique que le 16/9 du
fichier, et `cover` rognait ~36 % du bas — le collier de la hero y perdait son
pendentif central. L'image s'affiche donc entière, dans son ratio natif. */
.hero--accueil .hero__media > img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; object-position: center top; }
.hero--page .hero__media > img { aspect-ratio: 16 / 9; max-height: 46vh; object-fit: cover; object-position: center top; }
@media (max-width: 720px) {
.hero__texte { position: static; background: var(--nuit); padding-block: var(--pas-4); }
.hero__voile { background: linear-gradient(180deg, rgba(11,11,18,.3), rgba(20,20,30,.9)); }
/* Mobile : un 16/9 pleine largeur ne ferait plus que ~220 px de haut, le sujet
deviendrait illisible. On redresse le cadre (4/5) et on l'ancre sur le haut du
buste : visage et collier restent tous deux dans le champ. Pas de min-height :
c'est lui qui amputait le collier sur desktop. */
.hero--accueil .hero__media > img { aspect-ratio: 4 / 5; object-position: center 22%; }
}
/* 10 —————————————————————————————————————————————— Cartes d'article */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pas-4); }
.notice { display: flex; flex-direction: column; background: var(--nuit-creux); border: 1px solid rgba(201, 205, 212, .1); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.notice:hover { border-color: rgba(200, 135, 58, .45); transform: translateY(-3px); }
.notice__media { display: block; overflow: hidden; }
.notice__corps { display: flex; flex-direction: column; gap: var(--pas); padding: var(--pas-3); flex: 1; }
.notice__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ivoire-pale); }
.notice__categorie { color: var(--ambre); }
.notice__meta time::before { content: '·'; margin-right: .55em; color: var(--argent-mat); }
.notice__titre { font-size: var(--t-md); margin: 0; line-height: 1.28; }
.notice__titre a { color: var(--argent-vif); text-decoration: none; }
.notice:hover .notice__titre a { color: #fff; }
.notice__extrait { margin: 0; font-size: var(--t-sm); color: var(--ivoire-pale); line-height: 1.6; }
/* 11 —————————————————————————————————————————————— Filtre par categorie */
.filtre { display: flex; flex-wrap: wrap; gap: var(--pas); margin-bottom: var(--pas-4); }
.filtre button {
padding: .45em 1em; cursor: pointer;
font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
color: var(--ivoire-pale); background: transparent;
border: 1px solid rgba(201, 205, 212, .2);
transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.filtre button:hover { color: var(--argent-vif); border-color: rgba(201, 205, 212, .45); }
.filtre button[aria-pressed='true'] { color: var(--ombre); background: var(--argent); border-color: var(--argent); }
.filtre__vide { color: var(--ivoire-pale); font-style: italic; }
/* 12 —————————————————————————————————————————————— Sommaire de page pilier */
.sommaire { background: var(--nuit-creux); border-left: 2px solid var(--argent-mat); padding: var(--pas-3); margin: var(--pas-4) 0; }
/* .article-sommaire : alias structurel exige par le hook TOC reseau (nav.article-sommaire) */
.article-sommaire { scroll-margin-top: var(--pas-4); }
.sommaire__titre { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ambre); margin: 0 0 var(--pas); }
.sommaire ol { margin: 0; padding-left: 1.2em; }
.sommaire li { margin-bottom: .4em; font-size: var(--t-sm); }
.sommaire a { color: var(--argent); text-decoration: none; }
.sommaire a:hover { color: var(--argent-vif); text-decoration: underline; text-decoration-color: var(--ambre); }
@media (min-width: 1100px) {
.sommaire--fixe { position: sticky; top: 92px; }
}
/* 13 —————————————————————————————————————————————— FAQ */
.faq { margin: var(--pas-5) 0; }
.faq__item { border-bottom: 1px solid rgba(201, 205, 212, .14); }
.faq__question {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pas-2);
width: 100%; padding: var(--pas-2) 0; cursor: pointer; text-align: left;
background: none; border: 0;
font-family: var(--serif); font-size: var(--t-base); color: var(--argent-vif);
}
.faq__question::after {
content: '+'; flex: none; font-family: var(--mono); font-size: var(--t-md); line-height: 1;
color: var(--ambre); transition: transform var(--dur) var(--ease);
}
.faq__item.ouvert .faq__question::after { transform: rotate(45deg); }
.faq__reponse { display: none; padding-bottom: var(--pas-3); color: var(--ivoire-pale); }
.faq__item.ouvert .faq__reponse { display: block; }
/* 14 —————————————————————————————————————————————— Entretien (articles Q/R) */
.entretien__avis {
margin-bottom: var(--pas-4); padding: var(--pas-2) var(--pas-3);
background: var(--nuit-creux); border-left: 2px solid var(--ambre);
font-style: italic; font-size: var(--t-sm); color: var(--ivoire-pale);
}
.entretien__q { font-family: var(--serif); font-size: var(--t-md); color: var(--ambre); margin-top: var(--pas-4); }
.entretien__r { margin-top: var(--pas-2); }
/* 15 —————————————————————————————————————————————— Formulaire */
.formulaire { display: grid; gap: var(--pas-3); max-width: 38rem; }
.champ { display: flex; flex-direction: column; gap: .4em; }
.champ label { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ivoire-pale); }
.champ input, .champ select, .champ textarea {
padding: .7em .85em; color: var(--ivoire);
background: var(--nuit-creux); border: 1px solid rgba(201, 205, 212, .22);
transition: border-color var(--dur);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--ambre); outline: none; }
.champ textarea { resize: vertical; min-height: 9rem; }
.bouton {
display: inline-block; padding: .72em 1.7em; cursor: pointer;
font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
color: var(--ombre); background: var(--argent); border: 1px solid var(--argent);
text-decoration: none; transition: background var(--dur), border-color var(--dur);
}
.bouton:hover { background: var(--argent-vif); border-color: var(--argent-vif); color: var(--ombre); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }
.bouton--fantome { color: var(--argent); background: transparent; }
.bouton--fantome:hover { color: var(--ombre); background: var(--argent); }
.etat-envoi { font-size: var(--t-sm); }
.etat-envoi[data-etat='ok'] { color: var(--ambre); }
.etat-envoi[data-etat='erreur'] { color: #E2705F; }
/* 16 —————————————————————————————————————————————— Fil d'Ariane */
.ariane { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--ivoire-pale); padding-block: var(--pas-2); }
.ariane ol { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.ariane li + li::before { content: '/'; margin-right: .5em; color: var(--argent-mat); }
.ariane a { color: var(--argent); text-decoration: none; }
.ariane a:hover { color: var(--argent-vif); }
/* 17 —————————————————————————————————————————————— Maillage de bas de page */
.maillage { margin-top: var(--pas-6); padding-top: var(--pas-4); border-top: 1px solid rgba(201, 205, 212, .14); }
.maillage__titre { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ambre); margin-bottom: var(--pas-3); }
/* 18 —————————————————————————————————————————————— Pied de page */
.pied { background: var(--ombre); border-top: 1px solid rgba(201, 205, 212, .12); padding-block: var(--pas-5) var(--pas-3); margin-top: var(--pas-6); }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--pas-4); }
.pied__titre { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ambre); margin: 0 0 var(--pas-2); }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: .55em; }
.pied a { font-size: var(--t-sm); color: var(--ivoire-pale); text-decoration: none; }
.pied a:hover { color: var(--argent-vif); }
.pied__bas { margin-top: var(--pas-4); padding-top: var(--pas-3); border-top: 1px solid rgba(201, 205, 212, .1); font-size: var(--t-xs); color: var(--argent-mat); display: flex; flex-wrap: wrap; gap: var(--pas-2); justify-content: space-between; }
/* 19 —————————————————————————————————————————————— Utilitaires */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saut-contenu { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .7em 1.2em; background: var(--argent); color: var(--ombre); }
.saut-contenu:focus { left: var(--gouttiere); top: var(--pas); }
.centre { text-align: center; }
.mesure { max-width: var(--mesure); margin-inline: auto; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }