/* Ridermarkt — habillage propre par-dessus la feuille commune : vert forêt, sable, citron vert ; formes rondes, accueil en écran partagé. */

/* polices hébergées sur le site (RGPD : rien chargé depuis Google), sous-ensembles latin et latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(polices/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(polices/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(polices/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(polices/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ink: #10332C;
	--ink-2: #4E625C;
	--ligne: #DDD5C6;
	--doux: #EDE6D8;
	--lac: #10332C;
	--lac-clair: #E3EBD3;
	--acc: #C8F03C;
	--acc-fonce: #B5DE24;
	--acc-texte: #4F6B00; /* citron vert lisible sur fond clair */
	--mer: #2B6B5E;
	--ok: #2F6B1F;
	--alerte: #B0342A;
	--rayon: 18px;
	--ombre: 0 12px 32px rgba(16, 51, 44, .12);
	--cadre: 1240px;
	--police: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--titres: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
	--mono: var(--police);
	--sable: #F4EFE6;
	--brume: #C9D6C9;
}
body.mo { background: var(--sable); font-family: var(--police); }
.mo h1, .mo h2, .mo h3 { font-family: var(--titres); font-weight: 800; letter-spacing: -.02em; }
.mo a { color: var(--ink); text-decoration-color: var(--acc-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mo a:hover { color: var(--mer); }

/* boutons : pilules ; citron vert sur fond sombre, vert forêt sur fond clair */
.mo-btn { background: var(--ink); color: var(--sable) !important; border: 0; border-radius: 999px; font-weight: 700; padding-left: 22px; padding-right: 22px; }
.mo-btn:hover { background: var(--mer); }
.mo-btn-2 { background: var(--acc); color: var(--ink) !important; }
.mo-btn-2:hover { background: var(--acc-fonce); }
.mo-btn-3, .mo-btn-clair { background: transparent; color: var(--ink) !important; border: 2px solid var(--ink); border-radius: 999px; }
.mo-btn-danger { background: var(--alerte); color: #fff !important; border-color: var(--alerte); }

/* en-tête sombre, pied clair (l’inverse de la plupart des sites) */
.mo-entete { background: var(--ink); border-bottom: 0; }
.mo-entete, .mo-entete a { color: var(--sable) !important; }
.mo-entete a:hover { color: var(--acc) !important; }
.mo-entete .mo-btn { background: var(--acc); color: var(--ink) !important; }
.mo-entete .mo-btn:hover { background: var(--acc-fonce); }
.mo-logo-svg { height: 32px; }
.mo-entete .mo-logo-svg text, .mo-entete .mo-logo-svg path:first-child { fill: var(--sable); stroke: var(--sable); } /* logo clair sur l’en-tête sombre */
.mo-entete .mo-logo-svg path:first-child { fill: none; }
.mo-entete .mo-logo-svg g path:last-child { stroke: var(--acc); }
.mo-entete .mo-logo-svg text { stroke: none; }
.mo-pied { background: var(--doux); color: var(--ink-2); margin-top: 0; border-top: 6px solid var(--acc); }
.mo-pied a, .mo-pied .mo-langues a { color: var(--ink) !important; }
.mo-pied a:hover { color: var(--mer) !important; }
.mo-pied .mo-langues a.actif { background: var(--ink); color: var(--sable) !important; border-color: var(--ink); border-radius: 999px; }
.mo-pied-bas { border-top: 1px solid var(--ligne); font-size: 14px; }
.mo-pied-titre { color: var(--ink); font-family: var(--titres); }
.mo-pied .mo-langues a { border-color: var(--ligne); border-radius: 999px; }
.mo-pied .mo-logo-svg text, .mo-pied .mo-logo-svg g path:first-child { fill: var(--ink); stroke: var(--ink); } /* logo foncé sur le pied clair */
.mo-pied .mo-logo-svg g path:first-child { fill: none; }
.mo-pied .mo-logo-svg g path:last-child { stroke: #8DB516; }
.mo-pied .mo-logo-svg text { stroke: none; }

/* champs, cartes, encarts : grands arrondis, pas de bordure dure */
.mo-champ input, .mo-champ select, .mo-champ textarea, .mo-recherche input, .mo-recherche select { border: 2px solid var(--ligne); background: #fff; border-radius: 12px; }
.mo-champ input:focus, .mo-champ select:focus, .mo-champ textarea:focus { border-color: var(--ink); outline: 0; }
.mo-carte { border: 0; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 1px 0 var(--ligne); }
.mo-carte:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.mo-encart { background: #fff; border: 0; border-radius: var(--rayon); }
.mo-pastille-eco { background: var(--acc); color: var(--ink); border-radius: 999px; }
.mo-hero { background: var(--ink); }

/* ------------------------------------------------ accueil Ridermarkt */
.rm-cadre { max-width: var(--cadre); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .rm-cadre { padding: 0 32px; } }
.rm-sur { display: inline-block; align-self: flex-start; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--acc); color: var(--ink); font-weight: 700; font-size: 14px; }

/* hero : texte sur sable à gauche, photo arrondie à droite */
.rm-hero { background: var(--sable); padding: 40px 0 24px; }
.rm-hero-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.rm-hero-texte { display: flex; flex-direction: column; gap: 20px; }
.mo .rm-hero h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.02; margin: 0; color: var(--ink); }
.rm-chapo { margin: 0; max-width: 540px; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.rm-hero-photo { display: block; border-radius: 32px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 600px; background: var(--ink); }
.rm-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.rm-recherche { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 620px; padding: 6px; background: #fff; border-radius: 999px; box-shadow: var(--ombre); }
.rm-recherche input { flex: 1 1 200px; min-width: 0; border: 0; padding: 14px 18px; font: 17px var(--police); color: var(--ink); background: transparent; }
.rm-recherche select { flex: 0 1 170px; min-width: 0; border: 0; padding: 14px 10px; font: 16px var(--police); background: var(--sable); color: var(--ink); border-radius: 999px; }
.rm-recherche button { border: 0; padding: 14px 26px; font: 700 17px var(--police); background: var(--ink); color: var(--sable); border-radius: 999px; cursor: pointer; }
.rm-recherche button:hover { background: var(--mer); }
.rm-spots-rapides { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 860px) {
	.rm-hero { padding-top: 20px; }
	.rm-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.rm-hero-photo { order: -1; aspect-ratio: 16 / 10; border-radius: 24px; }
	.rm-recherche { border-radius: 24px; flex-wrap: wrap; }
	.rm-recherche input { flex-basis: 100%; }
	.rm-recherche select, .rm-recherche button { flex: 1 1 40%; }
}

.rm-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.mo .rm-tete h2, .mo .rm-section h2 { margin: 0 0 8px; font-size: clamp(28px, 3.2vw, 40px); }
.rm-tete a { font-weight: 700; }
.rm-section { padding: 56px 0; }
.rm-section-claire { background: #fff; }
.rm-intro { margin: 0 0 20px; max-width: 640px; color: var(--ink-2); font-size: 17px; }

/* comment ça marche : bande citron, étapes en ligne avec gros numéros ronds */
.rm-etapes-bande { background: var(--lac-clair); }
.rm-etapes { list-style: none; margin: 24px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .rm-etapes { grid-template-columns: 1fr; gap: 18px; } }
.rm-etapes li { display: flex; gap: 16px; align-items: flex-start; }
.rm-num { flex: 0 0 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--acc); display: flex; align-items: center; justify-content: center; font: 800 24px var(--titres); }
.mo .rm-etapes h3 { margin: 4px 0 6px; font-size: 20px; }
.rm-etapes p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.rm-etapes-pied { margin: 0; color: var(--ink-2); }

/* catégories : vignettes rondes avec le nom dessous */
.rm-cats-photo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .rm-cats-photo { display: flex; overflow-x: auto; gap: 16px; padding-bottom: 8px; scroll-snap-type: x mandatory; } .rm-cats-photo a { flex: 0 0 120px; scroll-snap-align: start; } }
.rm-cats-photo a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.rm-cats-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 1px 0 var(--ligne); transition: border-color .2s; }
.rm-cats-photo a:hover img { border-color: var(--acc); }
.rm-cats-photo span { font: 700 17px var(--titres); color: var(--ink); text-align: center; hyphens: auto; }
.rm-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.rm-cats a, .rm-spots a { text-decoration: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; background: #fff; color: var(--ink) !important; box-shadow: 0 1px 0 var(--ligne); }
.rm-cats a:hover, .rm-spots a:hover { background: var(--acc); }

.rm-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
@media (max-width: 560px) { .rm-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.rm-spots { display: flex; flex-wrap: wrap; gap: 10px; }

/* appel à vendre : pleine largeur vert forêt, photo à gauche */
.rm-vendre { background: var(--ink); color: var(--sable); padding: 56px 0; }
.rm-vendre-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.rm-vendre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.rm-vendre-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mo .rm-vendre h2 { margin: 0; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; color: var(--sable); }
.rm-vendre p { margin: 0; font-size: 19px; color: var(--brume); }
.rm-vendre .mo-btn { background: var(--acc); color: var(--ink) !important; min-height: 54px; padding: 0 28px; font-size: 18px; display: inline-flex; align-items: center; }
.rm-vendre .mo-btn:hover { background: var(--acc-fonce); }
@media (max-width: 760px) { .rm-vendre-grille { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ------------------------------------------------ liste des annonces */
.rm-bandeau { position: relative; height: clamp(140px, 20vw, 220px); margin: 12px 0 0; border-radius: 28px; overflow: hidden; background: var(--ink); }
.rm-bandeau img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .55; }
.mo .rm-bandeau + h1 { position: relative; z-index: 1; margin: calc(-1 * clamp(140px, 20vw, 220px)) 0 24px; min-height: clamp(140px, 20vw, 220px); display: flex; align-items: center; padding: 0 32px; color: var(--sable); font-size: clamp(30px, 4.2vw, 52px); line-height: 1; max-width: 900px; }
.mo-filtres { background: #fff; border: 0; border-radius: var(--rayon); box-shadow: 0 1px 0 var(--ligne); }
.mo-filtres-ligne input, .mo-filtres-ligne select { border-color: var(--ligne); border-radius: 12px; }

/* ------------------------------------------------ Tipps : cartes avec photo */
.mo .mo-conseils-liste:has(.rm-tip-photo) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 0; list-style: none; }
.mo .mo-conseils-liste li:has(.rm-tip-photo) > a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 0 0 18px; border-radius: var(--rayon); overflow: hidden; background: #fff; text-decoration: none; box-shadow: 0 1px 0 var(--ligne); }
.mo .mo-conseils-liste li:has(.rm-tip-photo) > a:hover { box-shadow: var(--ombre); }
.rm-tip-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mo .mo-conseils-liste li:has(.rm-tip-photo) strong, .mo .mo-conseils-liste li:has(.rm-tip-photo) span { padding: 0 18px; }