/* ============================================================
   LE MATOS TOULOUSAIN · design tokens
   Source unique des valeurs. Aucune valeur en dur ailleurs.
   Papier dominant, violet pastel en aplat, encre pour le texte. JOHN 21, 2026-09-27, violet pastel le même soir sur décision d'Enzo.
   Polices : Google Fonts uniquement
   <link href="https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@100..150,500..900&family=Instrument+Sans:wdth,wght@100,400..700&family=JetBrains+Mono:wght@400..600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* --- Couleurs. Base neutre, le violet pastel pour les surfaces, le vert en surligneur. Jamais les deux en dégradé. --- */
  --c-papier:       #FFFFFF;  /* fond de page */
  --c-support:      #F1F1EE;  /* fond des photos produit détourées, fond de section secondaire */
  --c-trait:        #D8D8D3;  /* filets, bordures de carte, séparateurs */
  --c-encre:        #0B0B0B;  /* texte, titres, boutons pleins, fond inversé. Jamais #000 */
  --c-encre-2:      #5B5B58;  /* texte secondaire, 6,8x sur papier */
  --c-accent:       #B8A0FF;  /* VIOLET PASTEL. Surface seulement sur papier (2,2x) : aplat sous un mot, section entière, pastille, bouton. Le texte dessus est l'encre, 8,9x */
  --c-accent-encre: #4E2FA6;  /* le violet en encre : texte, lien, icône, chiffre sur papier, 9,2x. Sur le pastel 4,17x : grand texte ou chiffre en display seulement, jamais du texte courant */
  --c-sur-accent:   #0B0B0B;  /* texte posé sur l'accent, 8,9x AAA */
  --c-vert:         #C8FF00;  /* LE SURLIGNEUR, second accent (Enzo, 2026-09-27) : aplat sous MATOS, prix, pastille d'état, bouton, mot mis en avant. Jamais du texte (1,18x sur papier), jamais en grand sur noir */
  --c-vert-encre:   #4A6B00;  /* le vert en texte sur papier, 6,19x */
  --c-sur-vert:     #0B0B0B;  /* texte posé sur le vert, 16,65x */
  --c-nom-sur-accent: color-mix(in srgb, var(--c-accent-encre) 20%, var(--c-accent)); /* LE MATOS TOULOUSAIN en fond, ton sur ton sur le violet, aplat plein */
  --c-nom-sur-papier: color-mix(in srgb, var(--c-encre) 6%, transparent);             /* même fond de marque sur papier ou support, encre à faible présence */
  --c-scene:          color-mix(in srgb, var(--c-accent-encre) 9%, var(--c-accent));  /* plateau de la vitrine du hero, un cran sous l'aplat */
  --c-nom-sur-scene:  color-mix(in srgb, var(--c-accent-encre) 24%, var(--c-accent)); /* le nom en fond sur ce plateau */
  --c-trait-scene:    color-mix(in srgb, var(--c-encre) 22%, transparent);           /* étagère et barres de la vitrine */
  --c-sol:            color-mix(in srgb, var(--c-accent-encre) 12%, var(--c-accent)); /* sol de la nature morte du hero, aplat ton sur ton */
  --c-accent-nuit:  #B8A0FF;  /* sur fond nuit le pastel se lit en texte (8,9x). Une pastille ou un mot, jamais une section : noir et violet pastel, c'est BACKYARDRUN */
  --c-nuit:         #0B0B0B;  /* fond des blocs inversés (bandeau, pied), rares. Sans teinte violette */
  --c-nuit-2:       #171717;  /* surface sur fond nuit */
  --c-trait-nuit:   #2A2A2A;  /* filets sur fond nuit */
  --c-sur-encre:    #FFFFFF;  /* texte posé sur l'encre */
  --c-erreur:       #B3261E;  /* état d'erreur de formulaire, 6,54x sur papier. Seule autre couleur autorisée */

  /* --- Typographie --- */
  --f-display: "Anybody", system-ui, sans-serif;        /* titres, chiffres, logo. Large */
  --f-texte:   "Instrument Sans", system-ui, sans-serif;           /* corps, interface */
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* fiches techniques, prix, étiquettes */

  --display-wdth: 130;   /* axe wdth d'Anybody pour les titres et le logo */
  --display-wdth-max: 150; /* chiffres clés, monogramme */
  --display-wght: 800;
  --display-wdth-texte: 112; /* valeurs en display dans une liste étroite (fiche technique) */
  /* Titres en capitales. Les chiffres avec unité restent en casse normale : 118dB, 1 024Wh, 25km/h */
  --texte-wght: 400;
  --texte-wght-fort: 600;

  /* Échelle modulaire, ratio 1,25, fluide mobile d'abord */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.84rem, 0.82rem + 0.15vw, 0.92rem);
  --t-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem);
  --t-lg:   clamp(1.25rem, 1.12rem + 0.60vw, 1.55rem);
  --t-xl:   clamp(1.60rem, 1.30rem + 1.50vw, 2.20rem);
  --t-2xl:  clamp(2.20rem, 1.60rem + 3.00vw, 3.60rem);
  --t-3xl:  clamp(3.00rem, 2.00rem + 5.50vw, 6.00rem);
  --t-hero: clamp(2.00rem, 7.2cqi, 3.40rem);  /* h1 du hero, relatif à la colonne de texte (container-type) : trois lignes sur bureau */
  --t-nom-fond: 19cqw;                                   /* LE MATOS TOULOUSAIN derrière chaque photo produit : très grand, peut déborder du cadre */

  --track-display: -0.02em;   /* titres au-dessus de 40px */
  --track-etiquette: 0.08em;  /* étiquettes mono en capitales */
  --leading-display: 0.95;
  --leading-texte: 1.55;
  --mesure: 62ch;             /* largeur max d'un paragraphe */

  /* --- Espacement, base 8 --- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;
  --gouttiere: clamp(16px, 4vw, 40px);      /* marge latérale de page */
  --section: clamp(64px, 10vw, 128px);      /* respiration entre sections */
  --colonne-max: 1200px;
  --grille-gap: 20px;

  /* --- Formes --- */
  --rayon: 0px;               /* aplat franc, angles vifs. Seule exception : --rayon-photo */
  --rayon-photo: 2px;         /* cadre des photos produit, évite l'effet marche d'escalier */
  --bordure: 1px solid var(--c-trait);
  --bordure-forte: 2px solid var(--c-encre);
  --ombre-contact: 0 12px 12px rgba(11, 11, 11, 0.28); /* sous un produit détouré, jamais ailleurs. Sans étalement : drop-shadow() l'interdit */
  --ombre-sol: rgba(11, 11, 11, 0.34);  /* ellipse de contact posée sous un objet détouré */
  --ombre-sol-flou: 10px;
  --ombre-contact-nuit: 0 16px 16px rgba(0, 0, 0, 0.6); /* même ombre sur fond nuit ou violet */
  --cible: 44px;              /* taille mini d'une cible tactile */
  --cible-large: 52px;        /* bouton principal, champ de formulaire */

  /* --- Mouvement : net, rapide, ease-out --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-vite: 160ms;
  --dur: 420ms;
  --dur-lent: 800ms;          /* révélation de titre, changement d'objet sur la scène produit */
  --dur-page: 480ms;          /* transition entre deux pages */
  --reveal-y: 20px;

  /* --- Focus --- */
  --focus: 0 0 0 3px var(--c-accent), 0 0 0 5px var(--c-encre);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-vite: 0ms; --dur: 0ms; --dur-lent: 0ms; --dur-page: 0ms; --reveal-y: 0px; }
}

/* LE MATOS TOULOUSAIN · site rules. construire.mjs prepends da/tokens.css and writes public/site.css:
   edit this file, never public/site.css. Every colour, size, duration and easing comes from the DA tokens.
   Two accents: the violet pastel (--c-accent) carries surfaces, the green (--c-vert) highlights. */

@font-face { font-family: "Anybody"; src: url(/polices/anybody.woff2) format("woff2"); font-weight: 500 900; font-stretch: 100% 150%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/polices/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-stretch: 100%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/polices/jetbrains-mono.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --nuit: var(--c-nuit, var(--c-encre));
  --trait-nuit: var(--c-trait-nuit, var(--c-encre-2));
  --sur-nuit: var(--c-sur-encre);
  --sur-nuit-2: color-mix(in srgb, var(--c-sur-encre) 70%, transparent);
  --barre-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  font-family: var(--f-texte); font-weight: var(--texte-wght);
  font-size: var(--t-base); line-height: var(--leading-texte);
  color: var(--c-encre); background: var(--c-papier);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { max-width: var(--mesure); }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--c-vert); color: var(--c-sur-vert); }

h1, h2, h3, legend {
  font-family: var(--f-display); font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght);
  text-transform: uppercase; line-height: var(--leading-display); text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: var(--track-display); }
h2 { font-size: var(--t-2xl); letter-spacing: var(--track-display); }
h3 { font-size: var(--t-lg); line-height: 1.05; }
.h-petit { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); color: var(--c-encre-2); font-weight: 400; font-variation-settings: normal; margin: var(--s-4) 0 var(--s-1); }
.h-petit:first-child { margin-top: 0; }
/* SEO subtitle carried inside the h1, set as text, not display */
.h1-sous { display: block; margin-top: var(--s-2); font-family: var(--f-texte); font-variation-settings: normal; font-weight: var(--texte-wght-fort); font-size: var(--t-lg); line-height: 1.3; text-transform: none; letter-spacing: 0; }

.etiquette {
  font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-etiquette); color: var(--c-encre-2); margin-bottom: var(--s-2);
}
.chapo { font-size: var(--t-lg); line-height: 1.4; margin-top: var(--s-3); max-width: 44ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: var(--s-2); top: -100px; z-index: 30; background: var(--c-encre); color: var(--c-sur-encre); padding: var(--s-1) var(--s-2); }
.evitement:focus { top: var(--s-1); }

/* status pills of DA §6: green flat, mono ink text */
.pastille { display: inline-block; padding: 2px 8px; background: var(--c-vert); color: var(--c-sur-vert); font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); }

/* n.c. marks: visible on purpose */
.nc { display: inline-block; padding: 0 6px; font-family: var(--f-mono); font-size: .82em; line-height: 1.5; border: 1px dashed var(--c-encre-2); color: var(--c-encre); background: var(--c-support); }

/* Preview banner, injected by serveur.mjs while APERCU=1 */
.apercu { max-width: none; background: var(--c-encre); color: var(--c-sur-encre); text-align: center; font-family: var(--f-mono); font-size: var(--t-xs); padding: 6px var(--gouttiere); }

/* ---------- word mask reveal on section titles (app.js) ---------- */
/* The mask leaves room above cap height, otherwise it clips É, Ê and À. */
.titre-masque .m, .chapitre-chiffres .m { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em 0 .08em; margin: -.16em 0 -.08em; max-width: 100%; }
.titre-masque .m > span, .chapitre-chiffres .m > span { display: inline-block; }

/* ---------- buttons (brand-board): background swap in --dur-vite, no movement ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--cible-large); padding: 0 var(--s-4);
  font-family: var(--f-texte); font-weight: var(--texte-wght-fort); font-size: var(--t-base); line-height: 1.2;
  background: var(--c-encre); color: var(--c-sur-encre); border: 0; box-shadow: inset 0 0 0 2px var(--c-encre);
  border-radius: var(--rayon); text-decoration: none; cursor: pointer; text-align: center;
  /* text colour flips halfway, so it never sits dark on a still-dark background */
  transition: background-color var(--dur-vite) var(--ease), box-shadow var(--dur-vite) var(--ease), color 0s linear calc(var(--dur-vite) / 2);
}
.bouton:hover, .bouton:focus-visible { background: var(--c-vert); color: var(--c-sur-vert); box-shadow: inset 0 0 0 2px var(--c-encre); }
.bouton:focus-visible { box-shadow: var(--focus); }
.bouton.fleche::after { content: "\2192"; font-family: var(--f-mono); }
.bouton.second { background: transparent; color: var(--c-encre); }
.bouton.second:hover, .bouton.second:focus-visible { background: var(--c-encre); color: var(--c-sur-encre); }
.bouton.petit { min-height: var(--cible); padding: 0 var(--s-2); font-size: var(--t-sm); }
.bouton[disabled] { opacity: .6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--texte-wght-fort); padding: 6px 0; text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color var(--dur-vite) var(--ease); }
.lien-fleche::after { content: "\2192"; font-family: var(--f-mono); }
.lien-fleche:hover { text-decoration-color: var(--c-encre); }

/* ---------- header ---------- */
.barre {
  position: sticky; top: 0; z-index: 20; view-transition-name: barre;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: var(--barre-h); padding: 10px var(--gouttiere);
  background: color-mix(in srgb, var(--c-papier) 96%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: var(--bordure);
}
.barre-progres { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--c-encre); transform: scaleX(0); transform-origin: 0 50%; }
.barre-logo img { height: 15px; width: auto; }
.barre-nav { display: none; gap: var(--s-3); }
.barre-nav a { font-size: var(--t-sm); font-weight: var(--texte-wght-fort); padding: var(--s-1) 0; text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color var(--dur-vite) var(--ease); }
.barre-nav a:hover { text-decoration-color: var(--c-encre); }
@media (min-width: 420px) { .barre-logo img { height: 18px; } }
@media (min-width: 900px) {
  .barre-nav { display: flex; margin-left: auto; margin-right: var(--s-2); }
  .barre-logo img { height: 22px; }
}

/* ---------- sections ---------- */
.section { padding: var(--section) var(--gouttiere); border-bottom: var(--bordure); }
.section > * { max-width: var(--colonne-max); margin-inline: auto; }
.section-serree { padding-block: calc(var(--section) * .6); }
.entete { margin-bottom: var(--s-6); }
.accent { background: var(--c-accent); color: var(--c-sur-accent); border-bottom: 0; }
.accent .etiquette { color: var(--c-sur-accent); }

/* ---------- product object + contact shadow ---------- */
.objet { position: relative; display: block; width: var(--l, 70%); isolation: isolate; }
.objet img { position: relative; z-index: 1; width: 100%; height: auto; }
.objet::after {
  content: ""; position: absolute; z-index: 0; left: 12%; right: 12%; bottom: -1.5%; height: 5%;
  background: var(--ombre-sol); border-radius: 50%; filter: blur(var(--ombre-sol-flou));
}
.photo { position: relative; background: var(--c-support); border-radius: var(--rayon-photo); display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; }
.photo .pastille { position: absolute; left: var(--s-2); top: var(--s-2); z-index: 2; }

/* ---------- hero: accent section, headline left, product right (photo first on mobile) ---------- */
.hero { background: var(--c-accent); color: var(--c-sur-accent); overflow: clip; }
.hero-grille { display: grid; max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin-inline: auto; padding: 0 var(--gouttiere); }
/* showcase: one product at a time on a tone-on-tone stage, in front of the brand wallpaper */
.vitrine { order: -1; min-width: 0; padding-top: var(--s-3); }
.vitrine-scene {
  --nf-fond: var(--c-scene); position: relative; container-type: size; aspect-ratio: 1 / 1; width: 100%;
  background: var(--c-scene); border-radius: var(--rayon-photo);
}
.vitrine-scene .nom-fond { color: var(--c-nom-sur-scene); }
.vitrine-objet {
  position: absolute; z-index: 2; inset: 0; margin: 0; display: grid; place-items: end center; padding-bottom: 12cqh;
  opacity: 0; transform: translate3d(0, 5cqh, 0) scale(.94); transform-origin: 50% 100%;
  transition: opacity var(--dur-lent) var(--ease), transform var(--dur-lent) var(--ease);
}
.vitrine-objet .objet { max-height: 76cqh; }
.vitrine-objet .objet img { max-height: 76cqh; width: auto; margin-inline: auto; }
.vitrine-objet.actif { opacity: 1; transform: none; }
.vitrine-objet.sorti { opacity: 0; transform: translate3d(0, -3cqh, 0) scale(1.03); }
.vitrine-onglets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s-2); margin-top: var(--s-2); }
.vitrine-onglet {
  appearance: none; background: none; border: 0; padding: 0 0 var(--s-1); margin: 0; min-height: var(--cible);
  display: grid; align-content: start; gap: 2px; text-align: left; color: var(--c-encre); font: inherit; cursor: pointer;
  opacity: .62; transition: opacity var(--dur-vite) var(--ease);
}
.vitrine-onglet:hover, .vitrine-onglet[aria-pressed="true"] { opacity: 1; }
.vitrine-onglet:focus-visible { outline: none; box-shadow: var(--focus); }
.vo-barre { order: -1; position: relative; height: 2px; margin-bottom: var(--s-1); overflow: hidden; background: var(--c-trait-scene); }
.vo-barre i { position: absolute; inset: 0; background: var(--c-encre); transform: scaleX(0); transform-origin: left center; }
.vitrine-onglet[aria-pressed="true"] .vo-barre i { animation: vo-remplir 5.5s linear forwards; }
.vitrine.pause .vo-barre i { animation-play-state: paused; }
@keyframes vo-remplir { to { transform: scaleX(1); } }
.vo-num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-etiquette); }
.vo-nom { font-size: var(--t-xs); font-weight: var(--texte-wght-fort); line-height: 1.2; }
.vo-prix { display: none; font-family: var(--f-mono); font-size: var(--t-xs); }
@media (min-width: 640px) { .vo-nom { font-size: var(--t-sm); } .vo-prix { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .vitrine-onglet[aria-pressed="true"] .vo-barre i { animation: none; transform: scaleX(1); }
}
.hero-texte { padding: var(--s-4) 0 var(--s-6); container-type: inline-size; }
.hero .etiquette { color: var(--c-sur-accent); margin-bottom: var(--s-1); }
.hero h1 { font-size: var(--t-hero); }
.h1-accroche { display: block; text-wrap: balance; line-height: 1.02; }
.hero .chapo { margin-top: var(--s-2); }
.hero .actions { margin-top: var(--s-3); }
.hero-prix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-3); font-size: var(--t-sm); }
.pastille-encre { background: var(--c-vert); color: var(--c-sur-vert); font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); padding: 4px 10px; }
@media (min-width: 960px) {
  .hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); align-items: center; min-height: min(calc(100svh - var(--barre-h) - 32px), 860px); padding-block: var(--s-4); }
  .vitrine { order: 2; padding-top: 0; width: min(100%, calc(100svh - var(--barre-h) - 150px)); justify-self: end; }
  .hero-texte { padding: var(--s-4) 0; }
  .hero .chapo { max-width: 52ch; }
}

/* ---------- key figures marquee, moved by scroll (no colour on black) ---------- */
.defile { background: var(--nuit); color: var(--sur-nuit); overflow: clip; padding: var(--s-3) 0; }
.defile-piste { display: flex; width: max-content; animation: defile 55s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
/* the track holds the text twice: sliding by half its width loops without a seam */
@keyframes defile { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; } }
.defile-piste p { display: flex; max-width: none; flex: none; }
.defile-piste span { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 0 var(--s-5); font-family: var(--f-texte); font-size: var(--t-base); color: var(--sur-nuit-2); white-space: nowrap; position: relative; }
/* separator: a small green pill, the highlight stays small on black */
.defile-piste span::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--c-vert); }
.defile-piste strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-xl); line-height: 1; color: var(--sur-nuit); letter-spacing: var(--track-display); text-transform: uppercase; }

/* ---------- brand backdrop: LE MATOS TOULOUSAIN behind every product photo ---------- */
/* LE MATOS / TOULOUSAIN once per frame, each line sized to the full width of the frame (widths
   measured in Anybody wdth 150 wght 800: 7.64em and 10.08em), centred in the frame, flat, tone on tone.
   The product passes in front. Minimal: one block, no repeat, no mark (Enzo, 2026-09-28). */
.cadre-nom { position: relative; overflow: clip; isolation: isolate; --nf-pad: 5cqw; --nf-fond: var(--c-accent); }
.cadre-nom:not(.plateau):not(.parc-scene):not(.vitrine-scene) { container-type: inline-size; }
.nom-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; color: var(--c-nom-sur-accent); }
.nf-papier {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-inline: var(--nf-pad);
  font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght);
  letter-spacing: var(--track-display); line-height: .8; white-space: nowrap;
}
.nf-l { display: block; flex: none; }
.nf-1 { font-size: calc((100cqw - 2 * var(--nf-pad)) / 7.64); }
.nf-2 { font-size: calc((100cqw - 2 * var(--nf-pad)) / 10.08); padding-bottom: .12em; }
.photo { --nf-fond: var(--c-support); }
.photo .nom-fond { color: var(--c-nom-sur-papier); transition: color var(--dur) var(--ease); }
.carte:hover .photo { --nf-fond: var(--c-accent); }
.carte:hover .photo .nom-fond { color: var(--c-nom-sur-accent); }
.cadre-nom .objet { z-index: 1; }

/* ---------- product stage: the object on its slab ---------- */
.plateau { background: var(--c-accent); container-type: size; display: grid; place-items: center; aspect-ratio: 4 / 5; width: min(100%, 512px); max-height: 640px; border-radius: var(--rayon-photo); }
.plateau .objet { align-self: center; }

/* ---------- guarantees (product pages) ---------- */
.garanties li::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--c-vert); box-shadow: inset 0 0 0 1px var(--c-encre); }
.garanties { display: grid; gap: 6px; margin-top: var(--s-3); font-size: var(--t-sm); font-weight: var(--texte-wght-fort); }
.garanties li { display: flex; align-items: center; gap: var(--s-1); }

/* ---------- energy: what the station runs ---------- */
.energie-grille { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .energie-grille { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.energie-photo { justify-self: center; }
.branche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); margin-top: var(--s-2); }
.branche li { padding: var(--s-2) 0; border-top: var(--bordure-forte); font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-texte), "wght" var(--display-wght); text-transform: uppercase; font-size: var(--t-lg); line-height: 1.1; }
.energie-note { margin-top: var(--s-3); padding: var(--s-2); background: var(--c-vert); color: var(--c-sur-vert); font-weight: var(--texte-wght-fort); display: inline-block; }
.energie .lien-fleche { display: flex; margin-top: var(--s-3); width: fit-content; }

/* ---------- the parc: pinned stage + chapters ---------- */
.parc { padding: var(--section) var(--gouttiere) 0; border-bottom: var(--bordure); }
.parc-tete, .parc-grille { max-width: var(--colonne-max); margin-inline: auto; }
.parc-tete { margin-bottom: var(--s-6); }
.parc-scene { display: none; }
.chapitre { padding: var(--s-5) 0 var(--section); border-top: var(--bordure-forte); display: grid; gap: var(--s-1); }
.chapitre-photo { margin-bottom: var(--s-3); }
@media (max-width: 959px) { .chapitre-photo.plateau { aspect-ratio: 1 / 1; width: 100%; max-width: 560px; } }
.chapitre-nom { font-size: var(--t-2xl); letter-spacing: var(--track-display); }
.chapitre .usage { color: var(--c-encre-2); font-size: var(--t-lg); line-height: 1.35; margin-top: var(--s-1); }
.chapitre-chiffres { margin-top: var(--s-4); display: grid; }
.chapitre-chiffres div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s-2) 0; border-top: var(--bordure); }
.chapitre-chiffres dt { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); color: var(--c-encre-2); }
.chapitre-chiffres dd { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-texte), "wght" var(--display-wght); font-size: var(--t-xl); line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.chapitre-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bordure); }
.chapitre-bas .prix { margin: 0; flex-wrap: wrap; }
/* Without the motion script (reduced motion, no JS): each chapter carries its own stage. */
@media (min-width: 960px) {
  .chapitre { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); align-items: start; }
  .chapitre > * { grid-column: 2; }
  .chapitre > .chapitre-photo { grid-column: 1; grid-row: 1 / span 6; margin: 0; aspect-ratio: 4 / 5; max-height: 640px; }
  .chapitre-chiffres div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: var(--s-2); }
  .chapitre-chiffres dd { font-size: var(--t-lg); }
}
/* With it: the stage stays put (sticky) while the chapters scroll past. */
@media (min-width: 960px) {
  .mouvement .parc-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  /* the stage: the whole column, the height of the screen; the object stands on a hairline shelf,
     centred, in front of the name; number, category, price and progress sit on the four edges */
  .mouvement .parc-scene {
    display: block; position: sticky; top: calc(var(--barre-h) + var(--s-3));
    width: 100%; height: min(calc(100svh - var(--barre-h) - 2 * var(--s-3)), 780px);
    background: var(--c-accent); container-type: size; border-radius: var(--rayon-photo); overflow: clip;
  }
  .scene-objet { position: absolute; z-index: 2; inset: 0; display: grid; place-items: end center; padding-bottom: 22cqh; clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-lent) var(--ease); }
  .scene-objet .objet { max-height: 56cqh; transition: transform var(--dur-lent) var(--ease); transform: translate3d(0, 6%, 0) scale(.94); transform-origin: 50% 100%; }
  .scene-objet .objet img { max-height: 56cqh; width: auto; margin-inline: auto; }
  .scene-objet.actif { clip-path: inset(-10% 0 0 0); }
  .scene-objet.actif .objet { transform: none; }
  .scene-objet.sorti { clip-path: inset(0 0 100% 0); }
  /* stacked labels: each slides up through its mask when its object comes on stage */
  .scene-num, .scene-nom, .scene-prix { display: grid; overflow: hidden; }
  .scene-num > span, .scene-nom > span, .scene-prix > span { grid-area: 1 / 1; transform: translate3d(0, 105%, 0); transition: transform var(--dur) var(--ease); white-space: nowrap; }
  .scene-num > span.actif, .scene-nom > span.actif, .scene-prix > span.actif { transform: none; }
  .scene-index { position: absolute; z-index: 3; top: var(--s-3); left: var(--s-3); display: flex; align-items: flex-start; gap: 6px; margin: 0; }
  .scene-num { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: clamp(3rem, 11cqw, 6.5rem); line-height: .82; letter-spacing: var(--track-display); color: var(--c-accent-encre); padding-top: .04em; }
  .scene-total { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-etiquette); color: var(--c-encre); padding-top: 4px; }
  .scene-nom { position: absolute; z-index: 3; top: var(--s-3); right: var(--s-3); margin: 0; justify-items: end; font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); }
  .scene-nom > span { background: var(--c-vert); color: var(--c-sur-vert); padding: 3px 8px; }
  .scene-pied { position: absolute; z-index: 3; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
  .scene-prix { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); }
  .scene-prix strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-xl); letter-spacing: var(--track-display); font-weight: normal; }
  .scene-traits { display: flex; gap: 6px; padding-bottom: 6px; }
  .scene-traits i { display: block; width: 28px; height: 3px; background: var(--c-trait-scene); transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease); }
  .scene-traits i.fait { background: var(--c-accent-encre); }
  .scene-traits i.actif { width: 48px; background: var(--c-encre); }
  .mouvement .chapitre { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 88svh; align-content: center; border-top: 0; padding: var(--s-8) 0; }
  .mouvement .chapitre > * { grid-column: 1; }
  .mouvement .chapitre-photo { display: none; }
  .mouvement .parc-chapitres { padding-bottom: 20svh; }
}

/* ---------- product cards ---------- */
.cartes { display: grid; gap: var(--grille-gap); }
@media (min-width: 640px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
.carte { position: relative; display: flex; flex-direction: column; border: var(--bordure); background: var(--c-papier); transition: border-color var(--dur-vite) var(--ease); }
.carte:hover, .carte:focus-within { border-color: var(--c-encre); }
.carte .photo { border-radius: var(--rayon-photo) var(--rayon-photo) 0 0; transition: background-color var(--dur) var(--ease); }
.carte .objet { transition: transform var(--dur-lent) var(--ease); }
.carte:hover .photo { background: var(--c-accent); }
.carte:hover .objet { transform: scale(1.04); }
.carte .corps { padding: var(--s-3); display: grid; gap: var(--s-1); flex: 1; align-content: start; }
.carte .etiquette { margin-bottom: 0; }
.carte .usage { color: var(--c-encre-2); }
/* the real link text stretches over the whole card */
.carte-lien { margin-top: var(--s-2); justify-self: start; }
.carte-lien::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.specs { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-encre-2); margin-top: var(--s-1); }
.specs li { padding: 6px 0; border-top: var(--bordure); }
.prix { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s-2); }
/* prices are highlighted in green */
.prix strong, .pack-prix strong {
  font-family: var(--f-display); font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-xl); line-height: 1;
  background: var(--c-vert); color: var(--c-sur-vert); padding: .08em .14em 0;
}
.prix span, .pack-prix span, .prix-sous { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-encre-2); }

/* ---------- pack ---------- */
.pack { display: grid; border: var(--bordure-forte); overflow: clip; }
.pack-photos { background: var(--c-accent); display: grid; place-items: center; padding: var(--s-6) var(--s-3); min-height: 260px; overflow: clip; }
/* the two objects share one floor and sit, together, in the centre of the slab */
.pack-duo { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4%; width: min(92%, 560px); }
.pack-texte { padding: var(--s-4) var(--s-3); }
.pack-texte > p:not(.etiquette):not(.prix-sous):not(.pack-prix) { margin-top: var(--s-3); }
.pack-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1); margin-top: var(--s-4); }
.pack-prix strong { font-size: var(--t-2xl); }
.pack-prix s { text-decoration-thickness: 2px; }
.pack-texte .prix-sous { margin-top: 4px; }
.pack-texte .bouton { margin-top: var(--s-4); }
@media (min-width: 900px) {
  .pack { grid-template-columns: 1.05fr 1fr; }
  .pack-photos { padding: var(--s-8) var(--s-5); min-height: 480px; }
  .pack-texte { padding: var(--s-8) var(--s-6); align-self: center; }
}

/* ---------- prices ---------- */
.tarifs-grille { display: grid; gap: var(--s-6); }
@media (min-width: 1040px) { .tarifs-grille { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarifs th, .tarifs td { text-align: left; padding: var(--s-2) var(--s-1); border-bottom: var(--bordure); vertical-align: baseline; }
.tarifs thead th { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); color: var(--c-encre-2); font-weight: 400; border-bottom: var(--bordure-forte); }
.tarifs td { font-family: var(--f-mono); font-size: var(--t-sm); white-space: nowrap; }
.tarifs td strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-lg); }
.t-nom { display: block; font-weight: var(--texte-wght-fort); font-size: var(--t-base); }
.t-sous { display: block; font-size: var(--t-xs); color: var(--c-encre-2); font-weight: 400; }
.tarifs tr.ligne-pack { background: var(--c-accent); }
.tarifs tr.ligne-pack th, .tarifs tr.ligne-pack td { border-bottom: 0; }
.tarifs tr.ligne-pack .t-sous { color: var(--c-sur-accent); }
.tarifs tr.ligne-pack td strong { background: var(--c-vert); padding: 0 .14em; }
@media (max-width: 719px) {
  .tarifs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tarifs, .tarifs tbody, .tarifs tr, .tarifs th, .tarifs td { display: block; }
  .tarifs tr { border: var(--bordure); padding: var(--s-2); margin-bottom: var(--s-2); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-2); }
  .tarifs tr.ligne-pack { border: var(--bordure-forte); }
  .tarifs th { grid-column: 1 / -1; border-bottom: var(--bordure); padding: 0 0 var(--s-1); margin-bottom: var(--s-1); }
  .tarifs td { border: 0; padding: 6px 0; display: flex; flex-direction: column; }
  .tarifs td::before { content: attr(data-l); font-size: var(--t-xs); color: var(--c-encre-2); text-transform: uppercase; letter-spacing: var(--track-etiquette); }
  .tarifs tr.ligne-pack td::before { color: var(--c-sur-accent); }
}
.cautions { margin-top: var(--s-1); }
.services { display: grid; font-size: var(--t-sm); }
.services div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: 10px 0; border-top: var(--bordure); }
.services div:last-child { border-bottom: var(--bordure); }
.services dd { font-family: var(--f-mono); font-weight: 600; white-space: nowrap; text-align: right; }
.formules dd { white-space: normal; font-weight: 400; font-size: var(--t-xs); max-width: 24ch; }

/* ---------- steps on the accent, with an ink line drawn by scroll ---------- */
.etapes-ligne { height: 2px; background: color-mix(in srgb, var(--c-encre) 18%, transparent); margin-bottom: var(--s-4); position: relative; }
.etapes-ligne span { position: absolute; inset: 0; background: var(--c-encre); transform-origin: 0 50%; }
.etapes { display: grid; gap: 0; }
.etapes li { padding: var(--s-3) 0; border-top: 1px solid color-mix(in srgb, var(--c-encre) 22%, transparent); display: grid; gap: var(--s-1); align-content: start; }
.etapes h3 { font-size: var(--t-xl); }
@media (min-width: 720px) { .etapes { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-4); } }
@media (min-width: 1040px) { .etapes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .etapes li { border-top: 0; padding-top: 0; } }
@media (max-width: 1039px) { .etapes-ligne { display: none; } }

/* ---------- audiences ---------- */
.publics { display: grid; column-gap: var(--s-6); }
.publics div { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4) 0; border-top: var(--bordure-forte); }
.publics h3 { font-size: var(--t-xl); }
.publics p { color: var(--c-encre-2); }
@media (min-width: 720px) { .publics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.publics h3 { overflow-wrap: anywhere; hyphens: auto; }

/* ---------- form ---------- */
.demande { background: var(--c-support); }
.demande-grille { display: grid; gap: var(--s-4); }
@media (min-width: 1040px) {
  .demande-grille { grid-template-columns: 1fr 1.5fr; gap: var(--s-8); align-items: start; }
  .demande-entete { position: sticky; top: 100px; }
}
.formulaire { background: var(--c-papier); border: var(--bordure); padding: var(--s-3); display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .formulaire { padding: var(--s-5); } }
fieldset { border: 0; padding: 0; display: grid; gap: var(--s-2); min-width: 0; }
legend { font-size: var(--t-lg); margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-1); }
.options, .radios { display: grid; gap: var(--s-1); }
@media (min-width: 640px) { .radios { grid-template-columns: 1fr 1fr; } }
.option { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: var(--cible-large); padding: 8px var(--s-2); border: var(--bordure); cursor: pointer; transition: border-color var(--dur-vite) var(--ease), background-color var(--dur) var(--ease); }
.option:hover { border-color: var(--c-encre); }
/* custom check: a square that fills with the green highlight */
.option input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; border: 2px solid var(--c-encre); background: var(--c-papier); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-vite) var(--ease); }
.option input[type=radio] { border-radius: 50%; }
.option input::after { content: ""; width: 10px; height: 6px; border: solid var(--c-sur-vert); border-width: 0 0 2px 2px; transform: translate3d(0, -1px, 0) rotate(-45deg) scale(0); transition: transform var(--dur) var(--ease); }
.option input[type=radio]::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--c-sur-vert); transform: scale(0); }
.option input:checked { background: var(--c-vert); }
.option input:checked::after { transform: translate3d(0, -1px, 0) rotate(-45deg) scale(1); }
.option input[type=radio]:checked::after { transform: scale(1); }
.option:has(input:checked) { border-color: var(--c-encre); background: var(--c-support); }
.option:has(input:focus-visible) { box-shadow: var(--focus); }
.option input:focus-visible { box-shadow: none; }
.option-vignettes { display: flex; gap: 4px; flex: none; }
.vignette { width: 48px; height: 48px; object-fit: contain; background: var(--c-accent); padding: 4px; }
.option-nom { flex: 1; font-weight: var(--texte-wght-fort); font-size: var(--t-sm); line-height: 1.3; }
.option-prix { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-encre-2); white-space: nowrap; }
.champ { display: grid; gap: 6px; font-weight: var(--texte-wght-fort); font-size: var(--t-sm); min-width: 0; }
.champ input, .champ textarea, .champ select {
  font-weight: var(--texte-wght); font-size: var(--t-base); min-height: var(--cible-large); width: 100%; min-width: 0;
  padding: 12px var(--s-2); border: var(--bordure); border-radius: var(--rayon); background: var(--c-papier);
  transition: border-color var(--dur-vite) var(--ease), box-shadow var(--dur-vite) var(--ease);
}
.champ textarea { resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible { border-color: var(--c-encre); box-shadow: inset 0 -3px 0 var(--c-vert); }
.ligne { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .ligne { grid-template-columns: 1fr 1fr; } }
.aide { font-weight: var(--texte-wght); color: var(--c-encre-2); font-size: var(--t-xs); }
.erreur-texte { display: none; }
.champ.erreur input { border-color: var(--c-erreur); box-shadow: inset 0 0 0 1px var(--c-erreur); }
.champ.erreur .erreur-texte { display: block; color: var(--c-erreur); }
.champ.erreur .option { border-color: var(--c-erreur); }
.champ-erreur { color: var(--c-erreur); font-size: var(--t-sm); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* live estimate, read from the catalogue */
.estimation { border: var(--bordure-forte); padding: var(--s-3); display: grid; gap: var(--s-1); }
.estimation .etiquette { margin: 0; }
.estimation-total { display: flex; align-items: baseline; gap: var(--s-1); }
.estimation-total strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-2xl); line-height: 1; background: var(--c-vert); color: var(--c-sur-vert); padding: .08em .14em 0; }
.estimation-total span { font-family: var(--f-mono); font-size: var(--t-xs); }
.estimation-lignes { font-family: var(--f-mono); font-size: var(--t-xs); display: grid; }
.estimation-lignes li { display: flex; justify-content: space-between; gap: var(--s-2); padding: 6px 0; border-top: var(--bordure); }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.retour { font-size: var(--t-sm); font-weight: var(--texte-wght-fort); }
.retour.ok { background: var(--c-vert); color: var(--c-sur-vert); padding: 8px 12px; }
.retour.ko { color: var(--c-erreur); }
.rgpd { font-size: var(--t-xs); color: var(--c-encre-2); border-top: var(--bordure); padding-top: var(--s-2); max-width: none; }
.rgpd a { color: var(--c-accent-encre); font-weight: var(--texte-wght-fort); }

/* ---------- FAQ, with animated height where supported ---------- */
.faq details { max-width: 860px; border-top: var(--bordure); }
.faq details:last-child { border-bottom: var(--bordure); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; font-weight: var(--texte-wght-fort); font-size: var(--t-lg); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: var(--cible); height: var(--cible); display: grid; place-items: center; font-family: var(--f-mono); font-weight: 400; border: var(--bordure); transition: transform var(--dur) var(--ease), background-color var(--dur-vite) var(--ease); }
.faq summary:hover::after { background: var(--c-vert); border-color: var(--c-encre); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--s-3); color: var(--c-encre-2); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- product page ---------- */
.ariane { max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin: 0 auto; padding: var(--s-2) var(--gouttiere) 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-encre-2); display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-hero { max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin: 0 auto; padding: var(--s-3) var(--gouttiere) var(--section); display: grid; gap: var(--s-4); border-bottom: var(--bordure); }
/* the product name is sized on its column, so the longest word (SOUNDBOKS) never breaks */
.fiche-texte { container-type: inline-size; min-width: 0; }
.fiche-texte h1 { font-size: clamp(2rem, 10.5cqi, 4.4rem); }
/* Enzo, 2026-09-29: the intro reads short and small on the product pages. */
.fiche-texte .chapo { font-size: var(--t-base); line-height: 1.5; max-width: 40ch; color: var(--c-encre-2); }
.h1-nom { display: block; }
.fiche-prix { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--bordure-forte); }
.fiche-prix .services { margin-top: var(--s-2); }
@media (min-width: 960px) {
  .fiche-hero { grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: start; padding-top: var(--s-4); }
  .galerie { position: sticky; top: calc(var(--barre-h) + var(--s-3)); }
}
/* gallery: scroll-snap, swipe on touch, dots for the pointer */
.galerie { min-width: 0; }
.galerie-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--rayon-photo); }
.galerie-piste::-webkit-scrollbar { display: none; }
.galerie-vue { position: relative; flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: start; background: var(--c-accent); display: grid; place-items: center; }
.galerie-vue figcaption { position: absolute; left: var(--s-2); bottom: var(--s-2); font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); }
/* Thumbnails under the stage (2026-09-29): one real view each, the active one on the accent. */
.galerie-points { display: flex; gap: var(--s-1); margin-top: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.galerie-points button { flex: none; width: 64px; height: 64px; border: 0; background: var(--c-support); cursor: pointer; position: relative; padding: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--c-trait); transition: background-color var(--dur-vite) var(--ease), box-shadow var(--dur-vite) var(--ease); }
.galerie-points button img { width: 100%; height: 100%; object-fit: contain; }
.galerie-points button:hover { box-shadow: inset 0 0 0 1px var(--c-encre); }
.galerie-points button[aria-current="true"] { background: var(--c-accent); box-shadow: inset 0 0 0 2px var(--c-encre); }
@media (min-width: 960px) { .galerie-points button { width: 76px; height: 76px; } }
/* The view counter, in the corner of the stage. */
.gv-compte { position: absolute; z-index: 2; top: var(--s-2); right: var(--s-2); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-etiquette); background: var(--c-encre); color: var(--c-sur-encre); padding: 3px 8px; }
.galerie-vue { container-type: inline-size; }
.galerie-vue figcaption { z-index: 2; background: var(--c-vert); color: var(--c-sur-vert); padding: 3px 8px; }
.fiche-grille { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .fiche-grille { grid-template-columns: 1fr 1fr; align-items: start; } }
.chiffres { margin-top: var(--s-4); display: grid; }
.chiffres div { display: grid; gap: 2px; padding: var(--s-2) 0; border-top: var(--bordure); }
.chiffres div:last-child { border-bottom: var(--bordure); }
.chiffres dt { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); color: var(--c-encre-2); }
.chiffres dd { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); font-size: var(--t-lg); line-height: 1.15; }
/* Spec sheet: label left, figure right, the lead figure in large display. */
@media (min-width: 640px) {
  .chiffres div { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; gap: var(--s-2); }
  .chiffres dd { font-size: var(--t-lg); }
}
/* A sentence reads in the text face; the wide display face is kept for short figures (80km, 118dB). */
.chiffres .chiffre-phrase dd { font-family: var(--f-texte); font-variation-settings: normal; font-weight: var(--texte-wght-fort); font-size: var(--t-base); line-height: 1.35; }
.chiffres .chiffre-tete dd { font-size: var(--t-2xl); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); letter-spacing: var(--track-display); line-height: 1; }
.savoir li { padding: var(--s-2) 0 var(--s-2) var(--s-4); border-top: var(--bordure); position: relative; }
.savoir li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-2) + .45em); width: 14px; height: 14px; background: var(--c-vert); box-shadow: inset 0 0 0 1px var(--c-encre); }
.appel { background: var(--c-accent); color: var(--c-sur-accent); padding: var(--s-6) var(--s-3); display: grid; gap: var(--s-2); justify-items: start; }
.appel .bouton { margin-top: var(--s-2); }
@media (min-width: 900px) { .appel { padding: var(--s-8) var(--s-6); } }

/* Sticky booking bar, mobile only */
.collant { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 10px var(--gouttiere); background: var(--c-papier); border-top: var(--bordure-forte); transform: translate3d(0, 110%, 0); transition: transform var(--dur) var(--ease); }
.collant.visible { transform: none; }
.collant p { font-family: var(--f-mono); font-size: var(--t-xs); }
.collant strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-lg); }
@media (min-width: 960px) { .collant { display: none; } }

/* ---------- legal pages ---------- */
.doc-grille { display: grid; gap: var(--s-6); }
@media (min-width: 1040px) { .doc-grille { grid-template-columns: 260px 1fr; gap: var(--s-8); } .doc-sommaire { position: sticky; top: 100px; align-self: start; } }
.doc-sommaire ol { counter-reset: s; font-size: var(--t-sm); display: grid; }
.doc-sommaire li { counter-increment: s; border-top: var(--bordure); }
.doc-sommaire a { display: flex; gap: var(--s-1); padding: 6px 0; text-decoration: none; }
.doc-sommaire a::before { content: counter(s, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-encre-2); padding-top: 2px; }
.doc-sommaire a:hover { text-decoration: underline 2px var(--c-encre); text-underline-offset: 4px; }
.doc-corps { max-width: 72ch; }
.doc-seul { margin-inline: auto; }
.doc-corps h1 { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.doc-corps h2 { font-size: var(--t-lg); letter-spacing: 0; margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-2); border-top: var(--bordure-forte); scroll-margin-top: 90px; }
.doc-corps p, .doc-corps li { margin-top: var(--s-1); max-width: 72ch; overflow-wrap: anywhere; }
.doc-corps ul { list-style: disc; padding-left: 1.2em; }
.doc-corps .petit-texte { margin-top: var(--s-6); color: var(--c-encre-2); font-size: 12px; line-height: 1.4; }
.doc-corps .petit-texte h2 { font-size: 12px; font-weight: var(--texte-wght-fort); font-family: inherit; text-transform: none; border-top: var(--bordure); margin: 0; padding-top: var(--s-1); }
.doc-corps .petit-texte p { margin-top: 2px; }
.doc-corps a:not(.bouton) { color: var(--c-accent-encre); }
.doc-corps .bouton { margin-top: var(--s-3); }
.doc-statut { background: var(--c-support); border-left: 4px solid var(--c-accent); padding: var(--s-2); font-size: var(--t-sm); }

/* ---------- footer (no accent colour on night) ---------- */
.pied { background: var(--nuit); color: var(--sur-nuit); padding: var(--s-8) var(--gouttiere) var(--s-5); overflow: clip; }
.pied > * { max-width: var(--colonne-max); margin-inline: auto; }
.pied-grille { display: grid; gap: var(--s-5); }
.pied p { color: var(--sur-nuit-2); font-size: var(--t-sm); }
.pied nav { display: grid; gap: 4px; align-content: start; }
.pied nav a { text-decoration: none; font-size: var(--t-sm); padding: 4px 0; width: fit-content; }
.pied nav a:hover { text-decoration: underline 2px var(--sur-nuit); text-underline-offset: 4px; }
.pied .etiquette { color: var(--sur-nuit-2); margin-bottom: var(--s-1); }
.pied-marque { width: 100%; height: auto; margin-top: var(--s-8); }
.pied-note { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--trait-nuit); font-family: var(--f-mono); font-size: var(--t-xs) !important; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 2fr 1fr 1fr 1fr; } }
body:has(.collant) .pied { padding-bottom: calc(var(--s-5) + 64px); }
@media (min-width: 960px) { body:has(.collant) .pied { padding-bottom: var(--s-5); } }

/* ---------- scroll reveal: armed by app.js only, content stays visible without JS ---------- */
.reveal.arme { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.arme.vu { opacity: 1; transform: none; }

/* ---------- page transitions: native cross-document view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: var(--dur-vite) var(--ease) both sort; }
  ::view-transition-new(root) { animation: var(--dur) var(--ease) both entre; }
  ::view-transition-group(*) { animation-duration: var(--dur-page); animation-timing-function: var(--ease); }
}
@keyframes sort { to { opacity: 0; } }
@keyframes entre { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal.arme { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- the fatbike, one section to make it wanted ---------- */
/* Full-bleed violet. The bike crosses the stage with the scroll, in front of the name. */
.fb { background: var(--c-accent); color: var(--c-sur-accent); padding: var(--section) var(--gouttiere); overflow: clip; }
.fb > * { max-width: var(--colonne-max); margin-inline: auto; }
.fb .etiquette { color: var(--c-sur-accent); }
.fb-tete { display: grid; gap: var(--s-2); }
.fb-tete h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); line-height: var(--leading-display); text-wrap: balance; }
.fb-tete .chapo { max-width: 58ch; }
.fb-scene { --nf-fond: var(--c-scene); position: relative; margin-top: var(--s-6); aspect-ratio: 16 / 9; background: var(--c-scene); border-radius: var(--rayon-photo); display: grid; place-items: center; }
.fb-scene .nom-fond { color: var(--c-nom-sur-scene); }
.fb-velo { position: relative; z-index: 1; width: min(62%, 760px); }
.fb-velo .objet { width: 100%; }
.fb-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); margin-top: var(--s-6); }
.fb-chiffres li { display: grid; gap: 4px; padding: var(--s-3) 0; border-top: var(--bordure-forte); }
.fb-chiffres li { min-width: 0; }
.fb-chiffres strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-texte), "wght" var(--display-wght); font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem); white-space: nowrap; line-height: 1; letter-spacing: var(--track-display); font-weight: normal; }
.fb-chiffres span { font-size: var(--t-sm); }
.fb-usages { display: grid; gap: 0 var(--s-5); margin-top: var(--s-6); counter-reset: none; }
.fb-usages li { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-top: var(--bordure); border-color: var(--c-trait-scene); }
.fb-num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-etiquette); }
.fb-usages h3 { font-size: var(--t-xl); }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }
.fb-note { flex-basis: 100%; font-size: var(--t-sm); }
@media (min-width: 900px) {
  .fb-tete { grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: var(--s-8); }
  .fb-tete .etiquette { grid-column: 1 / -1; }
  .fb-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fb-usages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) { .fb-scene { aspect-ratio: 1 / 1; } .fb-velo { width: 90%; } }

/* Fatbike details (Enzo's photos, 2026-09-29): one photo per feature that serves a race.
   Detail shots bleed off their frame: .objet.plein fills it (object-fit: cover). */
.objet.plein { position: absolute; inset: 0; width: 100%; height: 100%; }
.objet.plein::after { display: none; }
.objet.plein img { width: 100%; height: 100%; object-fit: cover; }
.fb-details { --fd-fond: var(--c-scene); margin-top: var(--s-6); }
.fb-fiche .fb-details { --fd-fond: var(--c-accent); margin-top: var(--s-4); }
.fb-details-titre { margin-bottom: var(--s-3); }
.fb-details-grille { display: grid; gap: var(--s-5) var(--s-3); }
.fb-detail { display: grid; align-content: start; gap: var(--s-1); min-width: 0; }
.fb-detail-photo { position: relative; aspect-ratio: 1; background: var(--fd-fond); border-radius: var(--rayon-photo); overflow: clip; display: grid; place-items: center; margin-bottom: var(--s-1); }
.fb-detail h3 { font-size: var(--t-lg); }
.fb-detail p:last-child { font-size: var(--t-sm); max-width: 46ch; }
@media (min-width: 600px) { .fb-details-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .fb-details-grille { grid-template-columns: 1.4fr 1fr 1fr; }
  .fb-detail:first-child { grid-row: span 2; }
  .fb-detail:first-child h3 { font-size: var(--t-xl); }
}
.galerie-vue .objet.plein { z-index: 1; }

/* Home as a shop (Enzo, 2026-09-29): one card per object, each opens its product page. */
@media (min-width: 1100px) { .cartes-boutique { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) and (max-width: 1099px) { .cartes-boutique { grid-template-columns: repeat(2, 1fr); } }
.titre-page { font-size: var(--t-2xl); line-height: var(--leading-display); }

/* ---------- tarifs page, cards (2026-09-29) ---------- */
.tarifs-cartes { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
@media (min-width: 720px) { .tarifs-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tarifs-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tarif-pack { grid-column: span 2; } }
.tarif { display: grid; grid-template-rows: auto 1fr; border: var(--bordure); background: var(--c-papier); transition: border-color var(--dur-vite) var(--ease); min-width: 0; }
.tarif:hover { border-color: var(--c-encre); }
.tarif-photo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--c-support); overflow: clip; transition: background-color var(--dur) var(--ease); }
.tarif:hover .tarif-photo { background: var(--c-accent); }
.tarif-photo { container-type: size; }
.tarif-corps { padding: var(--s-3); display: grid; align-content: start; gap: var(--s-1); }
.tarif-nom { font-size: var(--t-lg); line-height: 1.05; }
.tarif-nom a { text-decoration: none; }
.tarif-nom a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tarif-jour { display: flex; align-items: baseline; gap: var(--s-1); margin-top: var(--s-1); }
.tarif-jour strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-2xl); line-height: .9; letter-spacing: var(--track-display); font-weight: normal; background: var(--c-vert); color: var(--c-sur-vert); padding: .06em .12em 0; }
.tarif-jour span { font-family: var(--f-mono); font-size: var(--t-xs); }
.tarif-formules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-2); border-top: var(--bordure-forte); }
.tarif-formules div { padding: var(--s-1) 0 0; display: grid; gap: 2px; min-width: 0; }
.tarif-formules dt { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); color: var(--c-encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarif-formules dd { font-family: var(--f-mono); font-weight: 600; font-size: var(--t-sm); }
.tarif-caution dd { color: var(--c-accent-encre); }
.tarif-pack { background: var(--c-accent); border-color: var(--c-encre); }
.tarif-pack .tarif-photo { background: var(--c-scene); }
.tarif-pack .etiquette, .tarif-pack .tarif-formules dt { color: var(--c-sur-accent); }
.tarif-pack .tarif-caution dd { color: var(--c-sur-accent); }
@media (min-width: 1100px) { .tarif-pack { grid-template-rows: none; grid-template-columns: 1fr 1fr; } .tarif-pack .tarif-photo { aspect-ratio: auto; height: 100%; } }
.tarif-pack .pack-duo { display: flex; align-items: flex-end; justify-content: center; width: 100%; gap: 4%; }
.tarifs-caution { margin-top: var(--s-3); max-width: none; padding: var(--s-2) var(--s-3); background: var(--c-support); font-size: var(--t-sm); border-left: 6px solid var(--c-vert); }
.tarifs-caution strong { font-weight: var(--texte-wght-fort); }
.tarifs-infos { display: grid; gap: var(--s-6); max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin: 0 auto; }
@media (min-width: 900px) { .tarifs-infos { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.tarifs-bloc h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.tarifs-bloc .services { font-size: var(--t-base); }
.tarifs-bloc .services div { padding: var(--s-2) 0; }
.tarifs-page .chapo { text-wrap: balance; }

/* ---------- usage pages (2026-09-29) ---------- */
.usage-hero { max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin: 0 auto; padding: var(--s-3) var(--gouttiere) var(--section); display: grid; gap: var(--s-5); border-bottom: var(--bordure); }
.usage-hero-texte { container-type: inline-size; min-width: 0; }
.usage-hero h1 { font-size: clamp(2rem, 9cqi, 4.2rem); }
.usage-hero .chapo { font-size: var(--t-base); line-height: 1.5; color: var(--c-encre-2); max-width: 44ch; }
.usage-hero .actions { margin-top: var(--s-3); }
.usage-hero-scene { position: relative; aspect-ratio: 4 / 3; background: var(--c-accent); border-radius: var(--rayon-photo); display: grid; place-items: center; container-type: size; }
.usage-duo { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3%; width: 92%; }
@media (min-width: 960px) { .usage-hero { grid-template-columns: 1fr 1.1fr; align-items: center; gap: var(--s-8); padding-top: var(--s-4); } }
.usage-blocs { display: grid; gap: var(--s-8); max-width: var(--colonne-max); margin: 0 auto; }
.usage-bloc { display: grid; gap: var(--s-4); align-items: center; }
.usage-photo { aspect-ratio: 4 / 3; }
.usage-photo:hover { --nf-fond: var(--c-accent); background: var(--c-accent); }
.usage-texte h2 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.usage-texte > p:not(.etiquette) { max-width: 52ch; }
.usage-prix { margin: var(--s-3) 0 var(--s-2); font-family: var(--f-mono); font-size: var(--t-xs); }
.usage-prix strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth-max), "wght" var(--display-wght); font-size: var(--t-xl); font-weight: normal; background: var(--c-vert); color: var(--c-sur-vert); padding: 0 .12em; margin-right: var(--s-1); }
@media (min-width: 900px) {
  .usage-bloc { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .usage-bloc:nth-child(even) .usage-photo { order: 2; }
}
.usages-liens { display: grid; gap: var(--s-1); margin-top: var(--s-6); }
.usages-liens .etiquette { margin-bottom: var(--s-1); }
.usage-lien { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: var(--s-3) 0; border-top: var(--bordure-forte); text-decoration: none; }
.usage-lien:last-child { border-bottom: var(--bordure-forte); }
.usage-lien span { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiquette); color: var(--c-encre-2); }
.usage-lien strong { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); text-transform: uppercase; font-size: var(--t-xl); font-weight: normal; line-height: 1.05; text-align: right; transition: color var(--dur-vite) var(--ease); }
.usage-lien strong::after { content: " \2192"; font-family: var(--f-mono); }
.usage-lien:hover strong { color: var(--c-accent-encre); }

/* ---------- blog (2026-09-29) ---------- */
.article-tete { max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin: 0 auto; padding: var(--s-3) var(--gouttiere) var(--s-6); display: grid; gap: var(--s-5); }
.article-titre { container-type: inline-size; min-width: 0; }
.article-titre h1 { font-size: clamp(1.9rem, 7.4cqi, 3.6rem); line-height: 1.02; text-wrap: balance; }
.article-titre .chapo { font-size: var(--t-lg); line-height: 1.4; max-width: 46ch; }
.article-date { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-encre-2); }
.article-scene { position: relative; aspect-ratio: 4 / 3; background: var(--c-accent); border-radius: var(--rayon-photo); display: grid; place-items: center; container-type: size; }
@media (min-width: 960px) { .article-tete { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--s-8); } }
.article-grille { max-width: calc(var(--colonne-max) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere) var(--section); display: grid; gap: var(--s-6); border-bottom: var(--bordure); }
@media (min-width: 1000px) { .article-grille { grid-template-columns: minmax(0, 68ch) 1fr; gap: var(--s-8); align-items: start; } .article-cote { position: sticky; top: calc(var(--barre-h) + var(--s-3)); } }
.article-corps { font-size: var(--t-base); line-height: 1.65; }
.article-corps h2 { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); text-transform: uppercase; font-size: var(--t-xl); line-height: 1.05; margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-3); border-top: var(--bordure-forte); }
.article-corps h2:first-child { margin-top: 0; }
.article-corps p { margin-top: var(--s-2); max-width: 68ch; }
.article-corps strong { font-weight: var(--texte-wght-fort); background: linear-gradient(transparent 62%, var(--c-vert) 62%); }
.article-corps ul { margin-top: var(--s-2); display: grid; }
.article-corps li { padding: var(--s-1) 0 var(--s-1) var(--s-4); border-top: var(--bordure); position: relative; }
.article-corps li:last-child { border-bottom: var(--bordure); }
.article-corps li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-1) + .5em); width: 12px; height: 12px; background: var(--c-vert); box-shadow: inset 0 0 0 1px var(--c-encre); }
.article-corps .article-sources-titre { font-family: var(--f-mono); font-variation-settings: normal; font-size: var(--t-xs); letter-spacing: var(--track-etiquette); }
.article-corps .article-sources li { font-size: var(--t-sm); }
.article-corps .article-sources li::before { background: var(--c-trait); box-shadow: none; }
.article-cote .appel { padding: var(--s-4) var(--s-3); }
.article-cote-titre { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); text-transform: uppercase; font-size: var(--t-xl); line-height: 1.05; }
.blog-groupe + .blog-groupe { margin-top: var(--s-6); }
.blog-cartes { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .blog-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .blog-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-carte { display: grid; align-content: start; gap: var(--s-1); text-decoration: none; min-width: 0; }
.blog-carte-photo { margin-bottom: var(--s-2); }
.blog-carte:hover .blog-carte-photo { background: var(--c-accent); --nf-fond: var(--c-accent); }
.blog-carte-titre { font-family: var(--f-display); font-variation-settings: "wdth" var(--display-wdth), "wght" var(--display-wght); text-transform: uppercase; font-size: var(--t-lg); line-height: 1.05; }
.blog-carte:hover .blog-carte-titre { color: var(--c-accent-encre); }
.blog-carte-chapo { font-size: var(--t-sm); color: var(--c-encre-2); }