/* ROUBLA BIKERS — feuille commune (maquette V2.6) + boutique. Généré par _sources/preparer_public.py */
/* Mise en page : un vieux garage de motards la nuit. Affiche gravée, plaques de moto carrées vissées sur du bois pour le stock,
   étiquettes kraft pour les articles, polaroïds scotchés pour le showroom, cartes postales pour les sorties,
   pellicule pour les vidéos, plaques émaillées pour le contact. Lettrage à ombre portée orange. */
:root {
  --nuit: #2b2723;          /* gris-noir chaud, usé (moins sombre) */
  --suie: #36312b;          /* sections sombres alternées, un ton plus clair */
  --papier: #efe0bd;        /* papier vieilli */
  --papier-fonce: #dcc79a;  /* bords brunis du papier */
  --creme: #faebc8;         /* le crème des gravures */
  --creme-doux: #c9b994;
  --orange: #d9683c;        /* orange brûlé, moins vif que le pinceau */
  --rouille: #9c4a24;
  --encre: #1d1712;
  --bois: #5b3a21;
  --kraft: #c9a36b;
  --f-affiche: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --f-machine: "Special Elite", "Courier New", monospace;
  --f-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-texte: "Barlow", "Segoe UI", Arial, sans-serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .98  0 0 0 0 .92  0 0 0 0 .78  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain-sombre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --taches: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .07  0 0 0 0 .055  0 0 0 0 .045  1.8 0 0 0 -.86'/></filter><rect width='100%25' height='100%25' filter='url(%23t)'/></svg>");
  --usure: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='u'><feTurbulence type='fractalNoise' baseFrequency='.018 .04' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .8  0 0 0 0 .68  1.3 0 0 0 -.78'/></filter><rect width='100%25' height='100%25' filter='url(%23u)'/></svg>");
  --rouille-plaque: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='5' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .52  0 0 0 0 .24  0 0 0 0 .08  3.4 0 0 0 -1.78'/></filter><rect width='100%25' height='100%25' filter='url(%23r)'/></svg>");
  --piqures: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .13  0 0 0 0 .05  6 0 0 0 -4.15'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit) var(--grain); color: var(--creme); font-family: var(--f-texte); font-size: 16px; line-height: 1.55; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.int { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-family: var(--f-affiche); font-weight: 400; font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; text-shadow: 3px 3px 0 var(--orange); }
.machine { font-family: var(--f-machine); }
.surtitre { font-family: var(--f-machine); color: var(--orange); font-size: 1rem; margin: 0 0 .8rem; letter-spacing: .04em; }
.chapo { color: var(--creme-doux); max-width: 60ch; margin: 1rem 0 0; font-size: 1.05rem; }
.papier { background: var(--papier) var(--grain-sombre); color: var(--encre); box-shadow: inset 0 0 120px rgba(120, 80, 30, .35); }
.papier h2 { color: var(--encre); }
.papier .chapo { color: #5c4d38; }
.papier .surtitre { color: var(--rouille); }
.section { padding-block: 4.5rem; }
.legende-illu { font-family: var(--f-machine); font-size: .82rem; color: var(--creme-doux); margin-top: .5rem; }

/* bandeau défilant */
.bandeau { background: var(--orange); color: var(--encre); overflow: hidden; border-bottom: 2px solid var(--encre); }
.bandeau .piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.bandeau span { font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; padding: .45rem 1.2rem; white-space: nowrap; }
.bandeau span::after { content: "✦"; margin-left: 2.4rem; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau .piste { animation: none; } }

/* en-tête */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11, 9, 8, .94); border-bottom: 1px solid #2e2620; }
.entete .int { display: flex; align-items: center; gap: 1.2rem; padding-block: .55rem; }
.entete .logo img { height: 46px; width: auto; }
.entete nav { display: flex; gap: 1.3rem; margin-left: auto; }
.entete nav a { text-decoration: none; font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .92rem; color: var(--creme-doux); }
.entete nav a:hover { color: var(--orange); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; cursor: pointer; text-decoration: none; border: 2px solid var(--encre); background: var(--orange); color: var(--encre); font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; padding: .7rem 1.15rem; border-radius: 2px; box-shadow: 4px 4px 0 var(--encre); }
.bouton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--encre); }
.bouton:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
.nuit-bouton { box-shadow: 4px 4px 0 var(--creme); border-color: var(--creme); }
.creux { background: transparent; color: var(--creme); }
.entete .bouton { padding: .45rem .8rem; font-size: .88rem; box-shadow: 3px 3px 0 var(--creme); border-color: var(--creme); }
.bouton svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) { .entete nav { display: none; } .entete .bouton { margin-left: auto; } .entete .logo img { height: 38px; } }

/* héros */
.heros .int { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; padding-block: 3rem 2.5rem; }
.heros h1 { font-family: var(--f-affiche); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: .98; text-transform: uppercase; text-shadow: 4px 4px 0 var(--orange); }
.heros h1 .petit { display: block; font-family: var(--f-titre); font-weight: 800; font-size: .42em; letter-spacing: .12em; text-shadow: none; color: var(--orange); margin-top: .7rem; }
.heros .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.tampons { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 2.2rem; }
.tampon { font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; color: var(--orange); border: 3px double var(--orange); padding: .35rem .7rem; transform: rotate(-4deg); opacity: .92; }
.tampon:nth-child(2) { transform: rotate(3deg); }
.tampon:nth-child(3) { transform: rotate(-2deg); }
.affiche img { width: 100%; max-height: 720px; object-fit: contain; }
@media (max-width: 860px) {
  .heros .int { grid-template-columns: 1fr; padding-block: 2rem 1.4rem; gap: 1.6rem; }
  .affiche img { max-height: none; }
}

/* le stock : plaques de moto carrées, vissées sur un mur en bois, chacune avec son slogan en darija */
.stock .int { display: block; }
.mur { list-style: none; margin: 2.2rem 0 0; padding: 2rem 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem 1.4rem;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 2px, transparent 2px 118px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 9px), repeating-linear-gradient(0deg, rgba(255, 220, 160, .04) 0 2px, transparent 2px 6px), linear-gradient(180deg, #5d3b20, #3d2513);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .65); border: 1px solid #2e2620; }
.plaque-moto { width: 232px; display: grid; gap: .6rem; justify-items: center; }
.plaque-moto .plaque { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; aspect-ratio: 1 / 1.02; display: grid; grid-template-rows: auto 1fr auto; position: relative; text-align: center;
  background: #f1ede1 var(--grain-sombre); color: #121212; border-radius: 13px; padding: 1.35rem .8rem .75rem;
  box-shadow: inset 0 0 0 2.5px #121212, inset 0 0 0 6px #f1ede1, inset 0 0 0 7.5px #121212, 0 6px 12px rgba(0, 0, 0, .7); transform: rotate(-1.5deg); }
.plaque-moto:nth-child(2) button { transform: rotate(1.8deg); } .plaque-moto:nth-child(3) button { transform: rotate(-.6deg); }
.plaque-moto:nth-child(4) button { transform: rotate(1deg); } .plaque-moto:nth-child(5) button { transform: rotate(-2deg); }
.plaque-moto:nth-child(6) button { transform: rotate(.8deg); } .plaque-moto:nth-child(7) button { transform: rotate(-1deg); }
.plaque-moto .plaque::before, .plaque-moto .plaque::after { content: ""; position: absolute; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9e2d0, #77705f 60%, #2b2720); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.plaque-moto .plaque::before { left: 14px; } .plaque-moto .plaque::after { right: 14px; }
.plaque-moto .plaque:hover, .plaque-moto .plaque:focus-visible { box-shadow: inset 0 0 0 2.5px #121212, inset 0 0 0 6px #f1ede1, inset 0 0 0 7.5px var(--orange), 0 8px 16px rgba(0, 0, 0, .75); }
.plaque-moto .cat { font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1.45rem; line-height: 1.05; padding: 0 .9rem .35rem; border-bottom: 2.5px solid #121212;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), -1px -1px 0 rgba(0, 0, 0, .25); }
.plaque-moto .slogan { font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.45; display: grid; place-items: center; padding: .35rem .1rem;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), -1px -1px 0 rgba(0, 0, 0, .22); }
.plaque-moto .bas { display: flex; justify-content: center; align-items: center; gap: .6rem; border-top: 2.5px solid #121212; padding-top: .35rem; font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; }
.plaque-moto .bas .r { font-family: "Noto Kufi Arabic", "Segoe UI", sans-serif; font-weight: 800; }
.plaque-moto .bas i { width: 2.5px; height: 1.2em; background: #121212; }
.plaque-moto .dit { margin: 0; font-family: var(--f-machine); color: var(--creme); font-size: .9rem; text-align: center; line-height: 1.3; }
.plaque-moto .dit small { display: block; color: var(--creme-doux); font-size: .78rem; }
@media (max-width: 560px) {
  .mur { padding: 1.4rem .7rem; gap: 1.4rem .8rem; }
  .plaque-moto { width: calc(50% - .4rem); }
  .plaque-moto .plaque { padding: 1.15rem .45rem .6rem; border-radius: 11px; }
  .plaque-moto .cat { font-size: 1.12rem; padding-inline: .5rem; }
  .plaque-moto .slogan { font-size: 1.02rem; }
  .plaque-moto .bas { font-size: .9rem; }
  .plaque-moto .plaque::before { left: 10px; } .plaque-moto .plaque::after { right: 10px; }
}

/* pour toutes les motos : écussons cousus */
.marques { background: var(--suie) var(--grain); border-block: 1px solid #2e2620; }
.ecussons { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem 1rem; justify-content: center; }
.ecussons li { font-family: var(--f-affiche); text-transform: uppercase; font-size: clamp(1rem, 2.3vw, 1.3rem); letter-spacing: .04em; padding: .75rem 1.5rem; border-radius: 999px;
  background: #1d1712; color: var(--creme); box-shadow: 0 0 0 3px var(--orange), 0 0 0 6px #1d1712, 0 6px 12px rgba(0, 0, 0, .55); outline: 2px dashed rgba(250, 235, 200, .55); outline-offset: -7px; }
.ecussons li:nth-child(3n+2) { background: var(--creme); color: var(--encre); box-shadow: 0 0 0 3px var(--encre), 0 0 0 6px var(--creme), 0 6px 12px rgba(0, 0, 0, .55); outline-color: rgba(29, 23, 18, .5); }
.ecussons li:nth-child(3n) { background: var(--orange); color: var(--encre); box-shadow: 0 0 0 3px var(--encre), 0 0 0 6px var(--orange), 0 6px 12px rgba(0, 0, 0, .55); outline-color: rgba(29, 23, 18, .55); }
.ecussons li:nth-child(odd) { transform: rotate(-2deg); } .ecussons li:nth-child(4n) { transform: rotate(2.5deg); }
.sous-bloc { margin-top: 3.4rem; }
.titre-equip { font-family: var(--f-affiche); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 3.4vw, 2.2rem); text-shadow: 2px 2px 0 var(--orange); }
.ecussons.equipement li { font-size: clamp(.95rem, 2vw, 1.15rem); padding: .6rem 1.2rem; }
.mention { font-family: var(--f-machine); font-size: .8rem; color: var(--creme-doux); text-align: center; margin: 2rem auto 0; max-width: 60ch; }
.marques .centre { text-align: center; } .marques .chapo { margin-inline: auto; }

/* catalogue : étiquettes kraft */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 1.4rem; }
.filtre { cursor: pointer; border: 1.5px solid var(--encre); background: transparent; color: var(--encre); font-family: var(--f-titre); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; padding: .4rem .8rem; }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.avis { font-family: var(--f-machine); border: 1.5px dashed #8a7656; padding: .9rem 1.1rem; margin-bottom: 2rem; color: #4d4030; max-width: 70ch; }
.etiquettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 2.4rem 1.6rem; padding-top: 1.6rem; }
.vide { font-family: var(--f-machine); color: #5c4d38; }
.etiquette { position: relative; background: var(--kraft) var(--grain-sombre); color: var(--encre); padding: 44px 16px 18px; clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); filter: drop-shadow(0 6px 8px rgba(60, 35, 10, .35)); display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.etiquette::before { content: ""; position: absolute; top: 14px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 3px #a8834e; }
.etiquette:nth-child(3n+2) { transform: rotate(1.2deg); } .etiquette:nth-child(3n) { transform: rotate(-1deg); }
.etiquette .exemple { position: absolute; z-index: 2; top: 92px; right: 26px; color: var(--orange); border: 3px double var(--orange); background: rgba(246, 236, 214, .85); font-family: var(--f-titre); font-weight: 800; font-size: .8rem; letter-spacing: .16em; padding: .1rem .5rem; transform: rotate(9deg); }
.etiquette .cadre .media { background: #eadcb9; }
.prix strong { white-space: nowrap; }
.etiquette .ref { font-family: var(--f-machine); display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: #4a3920; }
.etiquette h3 { font-family: var(--f-affiche); font-weight: 400; font-size: 1.55rem; text-transform: uppercase; line-height: 1.05; }
.etiquette .marque { margin: 0; font-family: var(--f-machine); color: #5a4628; font-size: .9rem; }
.etat { align-self: flex-start; font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; padding: .15rem .5rem; border: 2px solid var(--encre); transform: rotate(-2deg); }
.etat.neuf { background: var(--encre); color: var(--kraft); }
.tailles { display: flex; flex-wrap: wrap; gap: .35rem; }
.taille { cursor: pointer; min-width: 40px; padding: .3rem .45rem; border: 1.5px solid #6e5532; background: rgba(255, 240, 210, .25); color: var(--encre); font-family: var(--f-titre); font-weight: 800; font-size: .95rem; }
.taille[aria-pressed="true"] { background: var(--encre); color: var(--kraft); border-color: var(--encre); }
.prix { display: flex; align-items: baseline; gap: .5rem; border-top: 1.5px dashed #6e5532; padding-top: .5rem; margin-top: auto; }
.prix strong { font-family: var(--f-affiche); font-weight: 400; font-size: 1.9rem; }
.prix span { font-family: var(--f-machine); font-size: .8rem; color: #4a3920; }
.etiquette .bouton { width: 100%; box-shadow: 3px 3px 0 var(--encre); }
.message { display: none; font-family: var(--f-machine); font-size: .88rem; background: rgba(255, 240, 210, .55); border-left: 4px solid var(--orange); padding: .6rem .7rem; }
.message.ouvert { display: block; }
.message p { margin: 0 0 .35rem; }

/* cadres photo / vidéo (emplacements) */
.cadre { position: relative; margin: 0; }
.cadre .media { position: relative; overflow: hidden; background: #2a231c; display: grid; place-items: center; }
.cadre .media img, .cadre .media video { width: 100%; height: 100%; object-fit: cover; }
.vide-cadre { display: grid; justify-items: center; gap: .4rem; text-align: center; padding: 1rem; font-family: var(--f-machine); color: var(--creme-doux); font-size: .9rem; }
.vide-cadre svg { width: 34px; height: 34px; opacity: .7; }
.outils { display: none; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.gerant .outils { display: flex; }
.outil { cursor: pointer; border: 1.5px solid currentColor; background: transparent; color: inherit; font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; padding: .3rem .55rem; }
.outil.principal { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.etat-envoi { font-family: var(--f-machine); font-size: .8rem; margin-top: .35rem; min-height: 1.1em; }
.champ-legende { display: none; width: 100%; margin-top: .4rem; font-family: var(--f-machine); font-size: .9rem; padding: .35rem .45rem; border: 1.5px dashed #8a7656; background: rgba(255, 250, 235, .6); color: var(--encre); }
.gerant .champ-legende { display: block; }
/* la photo dans l'étiquette */
.etiquette .cadre .media { aspect-ratio: 4 / 5; border: 6px solid #f6ecd6; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.etiquette .vide-cadre { color: #7a6a4f; }

/* showroom : illustration + polaroïds */
.showroom .haut { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.5rem; align-items: center; }
.illu img { width: 100%; border: 1px solid #3a3027; }
.polaroids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; margin-top: 3.2rem; }
.polaroid { background: #f4ead2; color: var(--encre); padding: 12px 12px 14px; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); transform: rotate(-2deg); min-width: 0; }
.polaroid:nth-child(2) { transform: rotate(1.6deg) translateY(10px); } .polaroid:nth-child(3) { transform: rotate(-.8deg); }
.polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(230, 214, 170, .78); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.polaroid .media { aspect-ratio: 1; }
.polaroid figcaption { font-family: var(--f-machine); text-align: center; margin-top: .6rem; font-size: .95rem; }
@media (max-width: 860px) { .showroom .haut { grid-template-columns: 1fr; } .polaroids { grid-template-columns: 1fr 1fr; } .polaroid:nth-child(3) { grid-column: 1 / -1; max-width: 70%; justify-self: center; } }

/* sorties : cartes postales */
.sorties .haut { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
.carte { background: #f1e3c2 var(--grain-sombre); color: var(--encre); padding: 12px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); min-width: 0; }
.carte .media { aspect-ratio: 3 / 2; }
.carte .dos { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: start; padding: .8rem .3rem .2rem; }
.carte .titre-carte { font-family: var(--f-affiche); font-size: 1.15rem; text-transform: uppercase; line-height: 1.1; }
.carte .ligne { font-family: var(--f-machine); font-size: .88rem; color: #5a4628; margin-top: .25rem; }
.timbre { width: 60px; height: 72px; padding: 4px; background: var(--orange); border: 4px dotted #f1e3c2; display: grid; place-items: center; transform: rotate(4deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.illu { margin: 0; }
.trait-haut { border-top: 1px solid #2e2620; }
.videos { background: var(--suie) var(--grain); }
.timbre span { display: grid; place-items: center; width: 100%; height: 100%; border: 1.5px solid var(--encre); font-family: var(--f-titre); font-weight: 800; font-size: .62rem; letter-spacing: .08em; text-align: center; line-height: 1.1; color: var(--encre); }
@media (max-width: 860px) { .sorties .haut { grid-template-columns: 1fr; } .cartes { grid-template-columns: 1fr; } }

/* vidéos : pellicule */
.pellicules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
.pellicule { background: #050403; padding: 10px 22px; position: relative; min-width: 0; }
.pellicule::before, .pellicule::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(180deg, transparent 0 7px, #cbb991 7px 17px, transparent 17px 24px); opacity: .85; -webkit-mask: linear-gradient(90deg, transparent 2px, #000 2px, #000 12px, transparent 12px); mask: linear-gradient(90deg, transparent 2px, #000 2px, #000 12px, transparent 12px); }
.pellicule::before { left: 4px; } .pellicule::after { right: 4px; }
.pellicule .media { aspect-ratio: 9 / 16; }
.pellicule figcaption { font-family: var(--f-machine); color: var(--creme-doux); text-align: center; font-size: .9rem; margin-top: .55rem; }
@media (max-width: 760px) { .pellicules { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; } .pellicule { scroll-snap-align: center; } }

/* commander : tickets */
.tickets { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: e; }
.ticket { counter-increment: e; background: var(--papier) var(--grain-sombre); color: var(--encre); padding: 1.4rem 1.2rem 1.3rem; position: relative; min-width: 0;
  --dent: radial-gradient(circle at 50% 0, transparent 7px, #000 7.5px) 0 0 / 22px 100%; -webkit-mask: var(--dent); mask: var(--dent); }
.ticket::before { content: "N° " counter(e); font-family: var(--f-affiche); font-size: 2.2rem; color: var(--orange); text-shadow: 2px 2px 0 var(--encre); display: block; margin-bottom: .3rem; }
.ticket h3 { font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; }
.ticket p { margin: .5rem 0 0; color: #4d4030; }
.route { position: relative; height: 92px; margin-top: 2.6rem; overflow: hidden; }
.route::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 3px dashed #5a4d40; }
.route img { position: absolute; bottom: 14px; left: 0; height: 78px; width: auto; animation: rouler 10s linear infinite; }
@keyframes rouler { from { transform: translateX(-180px); } to { transform: translateX(1200px); } }
@media (prefers-reduced-motion: reduce) { .route img { animation: none; transform: translateX(40px); } }
@media (max-width: 760px) { .tickets { grid-template-columns: 1fr; } }

/* neuf & occasion */
.etats .int { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.liste-etats { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.liste-etats li { display: flex; gap: 1rem; align-items: center; border-bottom: 1.5px dashed #8a7656; padding-bottom: .8rem; }
.liste-etats .etat { flex: none; }
.liste-etats span:last-child { font-family: var(--f-machine); color: #4d4030; }
@media (max-width: 860px) { .etats .int { grid-template-columns: 1fr; } }

/* contact : plaques émaillées */
.plaques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.plaque { background: radial-gradient(circle at 30% 20%, #23303a, #141c22); color: var(--creme); border-radius: 10px; padding: 1.4rem 1.1rem 1.2rem; position: relative; box-shadow: inset 0 0 0 3px #10161b, inset 0 0 0 5px var(--creme), 0 6px 14px rgba(0, 0, 0, .55); min-width: 0; }
.plaque::before, .plaque::after { content: ""; position: absolute; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e8dcc0, #6b6252 65%); }
.plaque::before { left: 10px; } .plaque::after { right: 10px; }
.plaque h3 { font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: 1.1rem; color: var(--orange); text-align: center; }
.plaque p { margin: .5rem 0 0; text-align: center; font-family: var(--f-machine); }
.a-venir { color: var(--creme-doux); }
@media (max-width: 860px) { .plaques { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .plaques { grid-template-columns: 1fr; } }

/* les deux rayons : deux rideaux de garage */
.aiguillage .int { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding-block: .5rem 3.5rem; }
.rideau { display: grid; gap: .45rem; align-content: end; min-height: 240px; position: relative; text-decoration: none; color: var(--creme); padding: 2rem 1.6rem 1.7rem;
  border: 3px solid #120f0c; border-top-width: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 12px, rgba(0, 0, 0, .4) 12px 14px), linear-gradient(180deg, #51473d, #2b2520); }
.rideau .surtitre { margin: 0; }
.rideau .titre-rideau { font-family: var(--f-affiche); font-size: clamp(1.9rem, 4vw, 2.9rem); text-transform: uppercase; line-height: 1; text-shadow: 3px 3px 0 var(--orange); }
.rideau .detail { font-family: var(--f-machine); color: var(--creme-doux); max-width: 40ch; }
.rideau .fleche { justify-self: start; margin-top: .7rem; font-family: var(--f-titre); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--orange); color: var(--encre); padding: .4rem .85rem; box-shadow: 3px 3px 0 var(--creme); }
.rideau:hover .fleche, .rideau:focus-visible .fleche { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--creme); }
.rideau::after { content: ""; position: absolute; right: 1.4rem; bottom: 1.5rem; width: 64px; height: 10px; background: #15120f; border-radius: 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .08); }
@media (max-width: 640px) { .aiguillage .int { grid-template-columns: 1fr; } .rideau { min-height: 200px; } }

/* motos à vendre : pancartes en carton */
.motos { border-top: 1px solid #2e2620; }
.ventes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem; margin-top: 2.6rem; }
.a-vendre { background: #d8c095 var(--grain-sombre); color: var(--encre); padding: 14px 14px 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, .55); transform: rotate(-1deg); min-width: 0; }
.a-vendre:nth-child(2) { transform: rotate(1.2deg); } .a-vendre:nth-child(3) { transform: rotate(-.4deg); }
.a-vendre .pancarte { font-family: var(--f-affiche); color: var(--orange); font-size: 1.75rem; text-transform: uppercase; text-align: center; letter-spacing: .04em; text-shadow: 2px 2px 0 var(--encre); transform: rotate(-3deg); margin: .1rem 0 .6rem; }
.a-vendre .media { aspect-ratio: 4 / 3; }
.cadre .media .vide-cadre img { width: 52%; height: auto; object-fit: contain; opacity: .85; }
.a-vendre .vide-cadre { gap: .2rem; padding: .6rem; }
.a-vendre .fiche-moto { padding: .75rem .2rem 0; }
.a-vendre .titre-carte { font-family: var(--f-affiche); font-size: 1.2rem; text-transform: uppercase; }
.a-vendre .ligne { font-family: var(--f-machine); font-size: .92rem; color: #4a3920; margin-top: .25rem; }
.note-motos { font-family: var(--f-machine); color: var(--creme-doux); text-align: center; margin: 2.4rem auto 0; max-width: 60ch; }
@media (max-width: 860px) { .ventes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ventes { grid-template-columns: 1fr; } }

/* les marques : deux rails de logos qui défilent en sens contraire, sur des plaques émaillées crème */
.defile-titre { font-family: var(--f-titre); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin: 2.2rem 0 .2rem; }
.defile { overflow: hidden; padding-block: .9rem 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.defile .rail { display: flex; width: max-content; animation: defile 48s linear infinite; }
.defile.inverse .rail { animation-direction: reverse; animation-duration: 42s; }
.defile:hover .rail, .defile:focus-within .rail { animation-play-state: paused; }
.defile .lot { display: flex; gap: 1.2rem; padding-right: 1.2rem; }
.logo-tuile { flex: none; width: 176px; height: 96px; display: grid; place-items: center; padding: .9rem 1.1rem; background: #f1ede1 var(--grain-sombre); border-radius: 9px;
  box-shadow: inset 0 0 0 2px #121212, inset 0 0 0 5px #f1ede1, inset 0 0 0 6.5px #121212, 0 6px 12px rgba(0, 0, 0, .6); }
.logo-tuile:nth-child(odd) { transform: rotate(-1deg); } .logo-tuile:nth-child(3n) { transform: rotate(1.2deg); }
.logo-tuile img { width: 100%; height: 58px; object-fit: contain; }
@media (max-width: 560px) { .logo-tuile { width: 138px; height: 78px; padding: .7rem .8rem; } .logo-tuile img { height: 46px; } }
@media (prefers-reduced-motion: reduce) {
  .defile { -webkit-mask-image: none; mask-image: none; }
  .defile .rail { animation: none; width: auto; justify-content: center; }
  .defile .lot { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .defile .copie { display: none; }
}

.pied { border-top: 1px solid #2e2620; color: var(--creme-doux); font-size: .9rem; }
.pied .int { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; padding-block: 1.4rem 5rem; }
.pied a { color: var(--creme); }

/* barre du gérant (visible seulement pour lui, quand il peut modifier la page) */
.barre-gerant { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--orange); color: var(--encre); font-family: var(--f-titre); font-weight: 700; letter-spacing: .06em; font-size: .95rem;
  padding: .55rem max(16px, env(safe-area-inset-right, 0px)) calc(.55rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); text-align: center; border-top: 2px solid var(--encre); }
/* ---- V2.6 : grunge clair, orange brûlé, plaques rouillées ---- */
body { background: var(--usure), var(--taches), var(--grain), var(--nuit); }
.entete { background: rgba(43, 39, 35, .95); border-bottom-color: #47403a; }
.videos, .marques { background: var(--usure), var(--taches), var(--grain), var(--suie); }
.cadre .media { background: #1f1b17; }
.pellicule { background: #181512; }
.affiche img { box-shadow: 0 16px 34px rgba(0, 0, 0, .55); outline: 1px solid #46403a; }
.illu img { box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.pied, .trait-haut, .motos { border-color: #47403a; }

/* plaques de moto : tôle émaillée vieillie, rouille, coulures sous les vis, bord en relief */
.plaque-moto .plaque {
  color: #2b2017;
  background:
    radial-gradient(ellipse 10px 34px at 19px 30px, rgba(116, 48, 16, .55), transparent 72%),
    radial-gradient(ellipse 10px 34px at calc(100% - 19px) 30px, rgba(116, 48, 16, .5), transparent 72%),
    radial-gradient(ellipse 60% 56% at 50% 52%, rgba(239, 229, 203, .8) 0%, rgba(239, 229, 203, .42) 55%, transparent 84%),
    var(--piqures),
    var(--rouille-plaque),
    var(--grain-sombre),
    linear-gradient(165deg, #efe5cb 0%, #e2d4b0 55%, #cdb88c 100%);
  box-shadow: inset 0 0 0 2.5px #3b2a1c, inset 0 0 36px rgba(122, 52, 18, .74), inset 0 0 9px rgba(84, 36, 12, .62), 0 7px 14px rgba(0, 0, 0, .55);
  outline: 2px solid rgba(48, 34, 24, .75); outline-offset: -9px;
}
.plaque-moto:nth-child(2) button { background-position: 0 0, 0 0, 0 0, -60px -90px, -210px -40px, 0 0, 0 0; }
.plaque-moto:nth-child(3) button { background-position: 0 0, 0 0, 0 0, -300px -20px, -30px -260px, 0 0, 0 0; }
.plaque-moto:nth-child(4) button { background-position: 0 0, 0 0, 0 0, -140px -330px, -380px -120px, 0 0, 0 0; }
.plaque-moto:nth-child(5) button { background-position: 0 0, 0 0, 0 0, -420px -200px, -120px -400px, 0 0, 0 0; }
.plaque-moto:nth-child(6) button { background-position: 0 0, 0 0, 0 0, -20px -420px, -440px -300px, 0 0, 0 0; }
.plaque-moto:nth-child(7) button { background-position: 0 0, 0 0, 0 0, -240px -180px, -300px -440px, 0 0, 0 0; }
.plaque-moto .plaque:hover, .plaque-moto .plaque:focus-visible { box-shadow: inset 0 0 0 2.5px #3b2a1c, inset 0 0 36px rgba(122, 52, 18, .74), 0 9px 18px rgba(0, 0, 0, .6); outline-color: var(--orange); }
.plaque-moto .cat, .plaque-moto .slogan { text-shadow: 1px 1px 0 rgba(255, 246, 225, .55), -1px -1px 0 rgba(40, 20, 8, .35); }
.plaque-moto .cat { border-bottom-color: rgba(43, 32, 23, .85); }
.plaque-moto .bas { border-top-color: rgba(43, 32, 23, .85); }
.plaque-moto .bas i { background: rgba(43, 32, 23, .85); }
.plaque-moto .plaque::before, .plaque-moto .plaque::after { background: radial-gradient(circle at 35% 35%, #c9b79a, #6f5a43 55%, #2a1d12); box-shadow: 0 0 0 2px rgba(110, 46, 14, .45), 0 1px 1px rgba(0, 0, 0, .4); }

/* ---------- boutique : pied de page, fil d'Ariane, pages catégorie, fiche produit, panier, commande ---------- */
.panier-bouton { position: relative; }
.panier-bouton svg { width: 20px; height: 20px; }
.compteur { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--creme); color: var(--encre); font-size: .8rem; display: grid; place-items: center; border: 2px solid var(--encre); }
@media (max-width: 860px) { .panier-bouton span { display: none; } }

.ariane { padding-block: 1.2rem 0; font-family: var(--f-machine); font-size: .88rem; color: var(--creme-doux); }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.ariane li + li::before { content: "›"; margin-right: .5rem; color: var(--orange); }
.ariane a { color: var(--creme); text-decoration: none; } .ariane a:hover { color: var(--orange); }

.page-tete { padding-block: 1.6rem 2.2rem; display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: end; }
.page-tete h1 { font-family: var(--f-affiche); font-weight: 400; font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1; text-transform: uppercase; text-shadow: 3px 3px 0 var(--orange); }
.page-tete .chapo { margin-top: 1rem; }
.page-tete .plaque-moto { width: 200px; }
@media (max-width: 760px) { .page-tete { grid-template-columns: 1fr; } .page-tete .plaque-moto { width: 170px; } }

.sous-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.sous-cats a { text-decoration: none; border: 1.5px solid var(--creme-doux); color: var(--creme); font-family: var(--f-titre); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .88rem; padding: .4rem .8rem; }
.sous-cats a[aria-current="page"], .sous-cats a:hover { background: var(--orange); border-color: var(--orange); color: var(--encre); }

.rayon { padding-block: 0 4rem; }
.barre-tri { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; font-family: var(--f-machine); color: var(--creme-doux); }
.barre-tri select { font: inherit; background: var(--suie); color: var(--creme); border: 1.5px solid #5a5148; padding: .35rem .6rem; }
.vide-rayon { font-family: var(--f-machine); color: var(--creme-doux); border: 1.5px dashed #6a5f53; padding: 1.4rem; max-width: 70ch; }
a.etiquette { text-decoration: none; color: var(--encre); transition: transform .15s; }
a.etiquette:hover { transform: rotate(0deg) translateY(-3px) !important; }
a.etiquette:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.etiquette .dispo { font-family: var(--f-machine); font-size: .82rem; color: #4a3920; }
.etiquette .prix s { font-family: var(--f-machine); font-size: .9rem; color: #6d5a3d; margin-left: .4rem; }
.etiquette .cadre .media img { width: 100%; height: 100%; object-fit: cover; }

/* guide d'achat et FAQ des catégories */
.guide { border-top: 1px solid #47403a; padding-block: 3.5rem; }
.guide .int { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; }
.prose { max-width: 68ch; color: var(--creme); }
.prose h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: 1rem; }
.prose h3 { font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1.3rem; margin: 1.6rem 0 .5rem; color: var(--orange); }
.prose p, .prose li { color: var(--creme-doux); }
.prose strong { color: var(--creme); }
.faq details { border-bottom: 1.5px dashed #5a5148; padding: .9rem 0; }
.faq summary { cursor: pointer; font-family: var(--f-titre); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color: var(--creme); }
.faq summary::marker { color: var(--orange); }
.faq p { margin: .6rem 0 0; color: var(--creme-doux); }
@media (max-width: 860px) { .guide .int { grid-template-columns: 1fr; } }

/* fiche produit */
.fiche-produit { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.6rem; padding-block: 1.4rem 3.5rem; align-items: start; }
.galerie .principale { background: var(--papier) var(--grain-sombre); padding: 14px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
.galerie .principale img, .galerie .principale .vide-cadre { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #e9dcbb; }
.galerie .principale .vide-cadre { display: grid; place-items: center; color: #7a6a4f; }
.vignettes { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.vignettes button { padding: 0; border: 3px solid transparent; background: none; cursor: pointer; width: 74px; }
.vignettes button[aria-current="true"] { border-color: var(--orange); }
.vignettes img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.infos .ref { font-family: var(--f-machine); color: var(--creme-doux); display: flex; gap: 1rem; flex-wrap: wrap; }
.infos h1 { font-family: var(--f-affiche); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.02; margin: .5rem 0 .8rem; text-shadow: 2px 2px 0 var(--orange); }
.infos .etat { border-color: var(--creme); color: var(--creme); }
.infos .etat.neuf { background: var(--creme); color: var(--encre); }
.prix-grand { display: flex; align-items: baseline; gap: .8rem; margin: 1.2rem 0; }
.prix-grand strong { font-family: var(--f-affiche); font-weight: 400; font-size: 2.6rem; color: var(--creme); }
.prix-grand s { font-family: var(--f-machine); color: var(--creme-doux); }
.prix-grand .remise { font-family: var(--f-titre); font-weight: 800; background: var(--orange); color: var(--encre); padding: .1rem .5rem; }
.choix { border: 0; padding: 0; margin: 1.2rem 0; }
.choix legend { font-family: var(--f-titre); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
.choix .tailles .taille { background: var(--suie); color: var(--creme); border-color: #6a5f53; min-width: 52px; padding: .5rem .6rem; font-size: 1.05rem; }
.choix .tailles .taille[aria-pressed="true"] { background: var(--orange); color: var(--encre); border-color: var(--orange); }
.choix .tailles .taille:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.quantite { display: inline-flex; align-items: center; border: 1.5px solid #6a5f53; }
.quantite button { width: 42px; height: 42px; background: var(--suie); color: var(--creme); border: 0; font-size: 1.3rem; cursor: pointer; }
.quantite input { width: 54px; height: 42px; text-align: center; border: 0; background: var(--nuit); color: var(--creme); font: 700 1.05rem var(--f-titre); }
.actions-produit { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.2rem; }
.actions-produit .bouton { box-shadow: 4px 4px 0 var(--creme); border-color: var(--creme); }
.message-produit { font-family: var(--f-machine); color: var(--orange); min-height: 1.3em; margin-top: .6rem; }
.rassurance { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .5rem; font-family: var(--f-machine); color: var(--creme-doux); }
.rassurance li::before { content: "✦"; color: var(--orange); margin-right: .6rem; }
.points { margin: 1.2rem 0 0; padding-left: 1.2rem; color: var(--creme); }
.caracs { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-family: var(--f-machine); font-size: .92rem; }
.caracs th, .caracs td { text-align: left; padding: .5rem .6rem; border-bottom: 1px dashed #5a5148; }
.caracs th { color: var(--creme-doux); font-weight: 400; width: 40%; }
.description-produit { border-top: 1px solid #47403a; padding-block: 3rem; }
@media (max-width: 860px) { .fiche-produit { grid-template-columns: 1fr; gap: 1.6rem; } }

/* panier et commande */
.panier-page { padding-block: 1.4rem 4rem; display: grid; grid-template-columns: 1.3fr .7fr; gap: 2.4rem; align-items: start; }
.panier-page h1 { font-family: var(--f-affiche); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); text-shadow: 3px 3px 0 var(--orange); margin-bottom: 1.4rem; }
.ligne-panier { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px dashed #5a5148; }
.ligne-panier img { width: 84px; aspect-ratio: 4 / 5; object-fit: cover; background: #e9dcbb; }
.ligne-panier .nom { font-family: var(--f-titre); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.ligne-panier .details { font-family: var(--f-machine); color: var(--creme-doux); font-size: .88rem; }
.ligne-panier .droite { text-align: right; display: grid; gap: .4rem; justify-items: end; }
.ligne-panier .retirer { background: none; border: 0; color: var(--creme-doux); text-decoration: underline; cursor: pointer; font-family: var(--f-machine); }
.recap { background: var(--papier) var(--grain-sombre); color: var(--encre); padding: 1.4rem 1.3rem; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); position: sticky; top: 90px; }
.recap h2 { font-size: 1.6rem; color: var(--encre); text-shadow: 2px 2px 0 var(--orange); margin-bottom: 1rem; }
.recap .total { display: flex; justify-content: space-between; font-family: var(--f-machine); padding: .35rem 0; }
.recap .total.grand { font-family: var(--f-affiche); font-size: 1.4rem; border-top: 2px solid var(--encre); margin-top: .5rem; padding-top: .6rem; }
.formulaire { display: grid; gap: .9rem; margin-top: 1.2rem; }
.formulaire label { display: grid; gap: .3rem; font-family: var(--f-titre); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
.formulaire input, .formulaire textarea, .formulaire select { font: 1rem var(--f-texte); padding: .65rem .7rem; border: 1.5px solid #8a7656; background: #fbf5e6; color: var(--encre); }
.formulaire .note { font-family: var(--f-machine); font-size: .78rem; color: #5c4d38; text-transform: none; letter-spacing: 0; font-weight: 400; }
.formulaire .bouton { width: 100%; }
.erreur { color: #9c2a12; font-family: var(--f-machine); min-height: 1.2em; }
.confirmation { max-width: 62ch; }
.confirmation .numero { font-family: var(--f-affiche); font-size: 2rem; color: var(--orange); }
@media (max-width: 860px) { .panier-page { grid-template-columns: 1fr; } .recap { position: static; } }

/* pages simples */
.page-texte { padding-block: 1.6rem 4rem; }
.page-texte h1 { font-family: var(--f-affiche); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); text-shadow: 3px 3px 0 var(--orange); margin-bottom: 1.4rem; }

/* pied de page */
.pied-site { border-top: 1px solid #47403a; background: var(--taches), var(--grain), #24201d; color: var(--creme-doux); }
.pied-site .colonnes { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3rem 2rem; }
.pied-site h2 { font-family: var(--f-titre); font-weight: 800; letter-spacing: .14em; font-size: 1rem; text-transform: uppercase; color: var(--orange); text-shadow: none; margin-bottom: .8rem; }
.pied-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.pied-site a { color: var(--creme); text-decoration: none; } .pied-site a:hover { color: var(--orange); }
.pied-site .logo-pied { width: 180px; margin-bottom: .8rem; }
.bas-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.6rem; border-top: 1px solid #47403a; padding-block: 1.2rem; margin: 0; font-size: .88rem; }
@media (max-width: 860px) { .pied-site .colonnes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-site .colonnes { grid-template-columns: 1fr; } }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--creme); color: var(--encre); font-family: var(--f-titre); font-weight: 800; letter-spacing: .06em; padding: .7rem 1.1rem; box-shadow: 4px 4px 0 var(--orange); }