/* Roubla · charte du site. Matière : papier crème, encre sépia, gravures de vieux catalogue, enseigne peinte,
   étiquettes de prix, tampon VENDU. Palette sourde validée le 06/11/2026 (« trop gamin, couleurs flash » refusé). */
:root {
  --papier: #f2ead9; --papier-f: #e9dec7; --carte: #fbf7ee; --encre: #2b231c; --doux: #5f5346; --ligne: #d8c9ab;
  --brique: #8e4a34; --brique-f: #6e3725; --moutarde: #c99a4e; --moutarde-c: #efe2c4;
  --canard: #3d5a5c; --canard-f: #2c4446; --canard-c: #dde4e0; --bois: #6f4d33; --bois-c: #94704f; --laiton: #b08d4c;
  --titre: 'Alfa Slab One', 'Rockwell', 'Roboto Slab', Georgia, serif;
  --texte: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --etiquette: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  --arabe-titre: 'Lalezar', 'Noto Kufi Arabic', Tahoma, sans-serif;
  --arabe: 'Amiri', 'Noto Naskh Arabic', 'Times New Roman', serif;
  --gouttiere: max(18px, env(safe-area-inset-left, 0px));
  --large: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
.insec { white-space: nowrap; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 18px; line-height: 1.55;
  font-variant-numeric: lining-nums; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .35;   /* grain du papier */
  background-image: radial-gradient(rgba(43, 35, 28, .07) 1px, transparent 1.2px), radial-gradient(rgba(43, 35, 28, .05) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--canard); text-underline-offset: 3px; }
a:hover { color: var(--brique); }
:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(34px, 5.4vw, 64px); }
h2 { font-size: clamp(28px, 3.8vw, 46px); }
h3 { font-size: clamp(20px, 2vw, 25px); }
p { margin: 0 0 .8em; max-width: 64ch; }
.ar { font-family: var(--arabe-titre); direction: rtl; unicode-bidi: isolate; }
.ar-texte { font-family: var(--arabe); direction: rtl; unicode-bidi: isolate; }
.cadre { width: 100%; max-width: var(--large); margin: 0 auto; padding-inline: var(--gouttiere); position: relative; z-index: 2; }
.section { padding-block: clamp(56px, 8vw, 104px); position: relative; overflow-x: clip; }   /* les coups de tampon grossis ne débordent jamais */
.section + .section { border-top: 1px solid var(--ligne); }
.chapeau { font-size: clamp(18px, 1.6vw, 21px); color: var(--doux); max-width: 60ch; margin-top: 14px; }
.chapeau .ar-texte { color: var(--brique); font-size: 1.15em; }
.titre-section { display: grid; gap: 4px; margin-bottom: clamp(26px, 4vw, 44px); }
.titre-section .ar { color: var(--brique); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; text-align: left; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-saut { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--encre); color: var(--carte); padding: 10px 14px; }
.lien-saut:focus { top: 12px; }

/* Boutons en étiquettes de prix : encoche, œillet, ficelle */
.btn { --fond: var(--brique); --encre-btn: var(--carte); position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 12px 24px 12px 34px; background: var(--fond); color: var(--encre-btn); font-family: var(--etiquette); font-weight: 600; font-size: 18px;
  letter-spacing: .04em; text-decoration: none; border: 0; cursor: pointer; clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  transition: transform .25s ease, background .25s ease; }
.btn::before { content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--papier);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.btn:hover { color: var(--encre-btn); transform: rotate(-2deg) translateY(-1px); background: var(--brique-f); }
.btn.clair { --fond: var(--carte); --encre-btn: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.btn.clair:hover { background: var(--moutarde-c); }
.btn.canard { --fond: var(--canard); }
.btn.canard:hover { background: var(--canard-f); }
.boutons { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.note { font-size: 15px; color: var(--doux); font-style: italic; }

/* Le tampon VENDU / DIMANCHE, coup de tampon encreur */
.tampon { display: inline-grid; justify-items: center; padding: 4px 16px 6px; border: 3px solid var(--brique); outline: 1.5px solid var(--brique);
  outline-offset: 3px; border-radius: 6px; color: var(--brique); font-family: var(--titre); letter-spacing: .14em; line-height: 1;
  transform: rotate(-12deg); background: rgba(251, 247, 238, .55); }
.tampon small { font-family: var(--etiquette); font-size: .38em; letter-spacing: .18em; margin-top: 3px; }

/* Apparition au défilement : la page reste complète sans script (classe .js posée en haut du body) */
.js [data-revele]:not(.vu) .revele-a { opacity: 0; transform: translateY(18px); }
.revele-a { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }

/* Fil d'Ariane */
.ariane { font-family: var(--etiquette); font-size: 15px; letter-spacing: .03em; color: var(--doux); padding-top: 22px; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ariane li + li::before { content: "›"; margin-right: 6px; }
.ariane a { color: var(--doux); }

@media (max-width: 720px) {
  body { font-size: 17px; }
  .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-revele]:not(.vu) .revele-a { opacity: 1; transform: none; }
}