/* =========================================================
   Les pages de la plateforme au style des rôtisseurs (lot 7) :
   l'annuaire, accueil de l'hôte public depuis le 06/10/2026 (« / »,
   /departement/<code>, ses communes, le plan du site) et la page
   introuvable des adresses publiques, rendues par pageAccueil,
   pageAnnuaire, pageCommune, pagePlanDuSite et pageIntrouvable
   (app/lib/site-rendu.js, FEUILLES_ANNUAIRE).
   Feuille AUTONOME : une page qui la charge ne charge qu'elle. Elle ne
   dépend ni de rotisseurs.css ni des gabarits des sites, qui peuvent
   changer sans toucher à l'annuaire. Les valeurs reprennent celles de
   rotisseurs.css (jetons du socle) et de l'ancienne page d'offre
   (vitrine/accueil/accueil.css : la nuit, la braise vive, les palettes),
   contrastes notés ici et contrôlés par outils-dev/contrastes.mjs pour les
   jetons partagés. Chaque classe que ces pages emploient est définie ici :
   tests/lot7-pages.test.mjs le vérifie. Aucune couleur ni aucun style écrit
   dans la page (CSP), aucune image hors des photos des rôtisseurs et du
   signe de la plateforme (/app/icones.svg#marque) : les décors (braise,
   palettes, broche, pictogrammes) sont dessinés ici.
   ========================================================= */

/* Polices : l'affiche (Anton) pour les titres, Rubik pour le texte, les mêmes fichiers que les styles des sites
   (/fonts/marche-1, /fonts/camion-1), donc un seul téléchargement. Anton n'a qu'une graisse : l'intervalle
   100 à 900 évite que le navigateur fabrique un gras. */
@font-face{font-family:"Anton";font-weight:100 900;font-display:swap;src:url(/fonts/marche-1.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-weight:300 900;font-display:swap;src:url(/fonts/camion-1.woff2) format("woff2")}

/* ---- Le socle de la page ----
   Direction « Affiche de marché » (03/11/2026) : le comptoir crème, des
   tuiles de couleur franche (tomate, moutarde, forêt, ciel, rose, encre), les
   titres en capitales d'affiche (Anton), le texte en Rubik, un seul
   surligneur de moutarde. Le pied reste sur la nuit. */
.r{
  --papier:#FCFAF5; --papier-2:#F6F1E7; --blanc:#FFFFFF;
  --encre:#2B2118; --encre-douce:#5A4A3A; --encre-sourde:#6F5E49;
  --filet:#E8E0D2; --filet-fort:#D6CAB6; --filet-champ:#948470;
  --focus:#2B2118;
  --nuit:#1A140F;          /* l'en-tête et le pied */
  --case:#3A2E24; --case-2:#30261D; --case-lit:rgba(255,236,214,.17); /* une palette : lettre 10,8:1 */
  /* Ses deux moitiés et la fente entre elles, dans le fond : la lettre passe dessus. */
  --fente:linear-gradient(var(--case) 0 calc(50% - .5px), #0B0806 calc(50% - .5px) calc(50% + .5px), var(--case-2) calc(50% + .5px) 100%);
  --sur-sombre:#F4EDE2;    /* texte sur la nuit : 15,7:1 */
  --sur-sombre-2:#CBBBA6;  /* texte second sur la nuit : 9,7:1 */
  --braise-vive:#F28A4B;   /* la braise lisible sur la nuit : 7,4:1 (et la nuit sur elle) */
  --filet-sombre:rgba(244,237,226,.14);
  --police-titre:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --police:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r2:12px; --rp:999px; --rc:14px;
  --courbe:cubic-bezier(.2,0,0,1); --sortie:cubic-bezier(.16,1,.3,1); --duree:180ms;
  --gout:clamp(16px,4.2vw,56px);
  --ombre-douce:0 22px 44px -30px rgba(43,33,24,.55);
  --ombre-carte:0 1px 0 rgba(43,33,24,.05), 0 26px 50px -30px rgba(26,20,15,.6);
  --ombre-carte-haute:0 1px 0 rgba(43,33,24,.05), 0 34px 60px -30px rgba(26,20,15,.7);
  --accent:#C2410C; --accent-fonce:#9A3412; --accent-doux:#FDF1EA;
  /* Les couleurs des tuiles : texte blanc sur la tomate (4,6:1) et la forêt, encre sur le reste. */
  --comptoir:#FFF6E3; --tomate:#D4401F; --moutarde:#F4B72B; --foret:#1F5B43; --ciel:#9ED3E6; --rose:#F4B4A3; --gris:#6B645A;
  --debord:0px;
  margin:0; font-family:var(--police); color:var(--encre); background:var(--papier);
  font-size:17px; line-height:1.6; font-synthesis:none; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:clip;
}
.r--rouge{ --accent:#B0201E; --accent-fonce:#8C1917; --accent-doux:#FBEDEC; }
.r *{ box-sizing:border-box; }
.r [hidden]{ display:none !important; }
.r img{ max-width:100%; height:auto; display:block; }
.r h1, .r h2, .r h3{ font-family:var(--police-titre); font-weight:400; line-height:1.08; letter-spacing:.005em; text-transform:uppercase; margin:0; text-wrap:balance; }
.r h2{ font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); margin-bottom:22px; }
/* Sans poids (:where) : les marges des classes (.r-accroche, .r-actions,
   .r-compte, .r-marque, .r-eyebrow) l'emportent sur cette remise à zéro. */
:where(.r) p{ margin:0; }
.r a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
.r :focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.r-wrap{ width:min(1120px, 100% - 2 * var(--gout)); margin-inline:auto; }
/* Lu par les lecteurs d'écran seulement. */
.r-cache{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Le repère : un trait, des capitales. */
.r-eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.r-eyebrow::before{ content:""; width:28px; height:2px; background:currentColor; flex:none; }

.r-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:1rem; line-height:1.2; text-decoration:none; cursor:pointer;
  padding:14px 26px; min-height:52px; border:2px solid transparent; border-radius:8px;
  background:var(--accent); color:var(--blanc);
  transition:background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe), transform .3s var(--sortie);
}
.r-btn::after{ content:""; flex:none; width:.5em; height:.5em; margin-left:2px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--sortie); }
.r-btn:hover{ background:var(--accent-fonce); }
.r-btn:hover::after{ transform:translateX(3px) rotate(45deg); }
.r-btn:active{ transform:translateY(1px); }
.r a.r-btn{ color:var(--blanc); }
.r-btn--ghost, .r a.r-btn--ghost{ background:transparent; color:var(--encre); border-color:var(--encre); }
.r-btn--ghost:hover{ background:var(--encre); color:var(--papier); }
.r a.r-btn--ghost:hover{ color:var(--papier); }
/* Un lien qui mène quelque part : gras, souligné à la braise, une flèche. */
.r-lien{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; color:var(--accent-fonce); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.r-lien::after{ content:""; flex:none; width:.42em; height:.42em; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--sortie); }
.r-lien:hover{ color:var(--encre); }
.r-lien:hover::after{ transform:translateX(3px) rotate(45deg); }

/* ---- L'en-tête : clair et compact (03/11/2026) ----
   Une seule rangée sur un téléphone : le signe de la plateforme, la recherche,
   « Vous êtes rôtisseur ? ». Dessous, le titre en capitales, le mot de la fin
   sur un surligneur de moutarde. Le premier écran montre une douzaine de tuiles.
   L'en-tête sombre n'est plus que celui de la page introuvable (plus bas). */
.r-tete{ display:block; }
.r-tete--claire{ padding-block:8px 2px; background:var(--comptoir); color:var(--encre); }
.r-tete__rang{ display:flex; align-items:center; gap:8px; }
.r-tete--accueil .r-eyebrow, .r-fil + .r-eyebrow{ display:none; }
/* La marque : le signe de la plateforme (/app/icones.svg#marque : le carré, le R en creux, la broche à la
   braise). Sur le comptoir, le carré est à l'encre : le R y prend la couleur du fond. */
.r-marque{ display:flex; align-items:center; min-width:0; }
.r-marque a{ display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:.8125rem; font-weight:700; line-height:1; letter-spacing:.2em; text-transform:uppercase; color:var(--sur-sombre); text-decoration:none; white-space:nowrap; }
.r-marque svg{ flex:none; width:34px; height:34px; fill:var(--papier); color:var(--accent); }
.r-marque__pro{ color:var(--braise-vive); }
.r-marque a:hover{ color:var(--blanc); }
.r-tete--claire .r-marque{ flex:none; }
.r-tete--claire .r-marque a{ gap:10px; font-family:var(--police-titre); font-size:1.3rem; letter-spacing:.05em; color:var(--encre); }
.r-tete--claire .r-marque svg{ width:36px; height:36px; border-radius:10px; fill:var(--encre); color:var(--tomate); }
.r-tete--claire .r-marque__pro{ color:var(--tomate); }
.r-tete--claire .r-marque a:hover{ color:var(--encre); }
.r-marque__nom{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.r-tete__actions{ flex:none; display:flex; align-items:center; gap:clamp(10px, 1.8vw, 20px); }
/* « Espace rôtisseur » : pour le rôtisseur déjà inscrit, un lien discret (au-dessus de 640 px). */
.r-connexion{ display:inline-flex; align-items:center; min-height:44px; color:var(--encre); font-size:.875rem; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; }
.r a.r-connexion{ text-decoration:none; }
.r a.r-connexion:hover{ color:var(--tomate); text-decoration:underline; }
/* « Vous êtes rôtisseur ? » : un lien souligné sur un téléphone, une pastille au-dessus, vers /pro. */
.r-pro{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; width:54px; color:var(--encre); font-size:.6875rem; font-weight:500; line-height:1.2; text-align:center; text-decoration:underline; text-underline-offset:3px; }
.r-pro::after{ display:none; }
.r a.r-pro:hover{ color:var(--tomate); }
/* Le titre : les capitales d'affiche, le dernier mot surligné. */
.r-nom{ font-family:var(--police-titre); font-weight:400; font-size:clamp(1.7rem, 1.1rem + 2.1vw, 3rem); line-height:1.15; letter-spacing:.005em; text-transform:uppercase; max-width:none; hyphens:manual; }
.r-tete--claire .r-nom{ margin-top:14px; }
.r-nom em{ font-style:normal; background:var(--moutarde); color:var(--encre); padding:0 .18em; border-radius:.16em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.r-accroche{ margin-top:6px; font-size:1rem; line-height:1.45; color:var(--gris); max-width:66ch; }
.r-accroche a{ color:var(--encre); font-weight:600; text-decoration-color:var(--tomate); text-decoration-thickness:2px; }
.r-accroche a:hover{ color:var(--tomate); }
.r-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* Le fil d'Ariane : l'annuaire, le département, la commune. */
.r-fil ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; margin:2px 0 0; padding:0; font-size:.875rem; color:var(--gris); }
.r-fil li{ display:inline-flex; align-items:center; min-height:40px; }
.r-fil li + li::before{ content:""; width:.38em; height:.38em; margin:0 12px 0 8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.7; }
.r-fil a{ color:var(--encre); font-weight:600; text-decoration-color:var(--filet-fort); }
.r-fil a:hover{ color:var(--tomate); }

/* ---- La recherche : dans la rangée de l'en-tête (le libellé pour les lecteurs
   d'écran, le texte d'exemple et la loupe pour l'œil). « Chercher » reste
   caché : Entrée (ou la touche de recherche du clavier) suffit. ---- */
.r-cherche{ max-width:620px; }
.r-tete--claire .r-cherche{ flex:1; min-width:0; margin:0; }
.r-libelle{ display:block; margin-bottom:10px; font-size:.9375rem; font-weight:600; color:var(--encre); }
.r-cherche__rang{ display:flex; gap:8px; }
.r-cherche__champ{ position:relative; flex:1; min-width:0; }
.r-cherche input{
  width:100%; font:inherit; font-size:1rem; font-weight:500; color:var(--encre); padding:0 2px 0 38px; height:44px;
  border:2.5px solid var(--encre); border-radius:14px; background:var(--blanc);
  -webkit-appearance:none; appearance:none;
}
.r-cherche input::placeholder{ color:var(--gris); font-weight:400; opacity:1; text-overflow:ellipsis; }
.r-cherche input:focus-visible{ outline:3px solid var(--tomate); outline-offset:2px; }
/* La loupe, dessinée : un cercle et son manche. */
.r-cherche__champ::before, .r-cherche__champ::after{ content:""; position:absolute; top:50%; pointer-events:none; }
.r-cherche__champ::before{ left:11px; width:13px; height:13px; margin-top:-9px; border:2.5px solid var(--encre); border-radius:50%; }
.r-cherche__champ::after{ left:23px; width:7px; height:2.5px; margin-top:5px; background:var(--encre); transform:rotate(45deg); }
.r-cherche__ok{ display:none; }
.r-cherche__mot{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---- La vitrine : le compte et le filtre des jours, puis les tuiles ---- */
.r-annuaire{ background:var(--comptoir); }
.r-annuaire main{ padding-bottom:8px; }
.r-vitrine__tete .r-wrap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 20px; padding-block:6px 4px; }
.r-vitrine__tete .r-wrap:empty{ padding:0; }
/* Le titre de la vitrine reste dans la page (les lecteurs d'écran s'y repèrent) : l'œil lit déjà celui de l'en-tête. */
.r-vitrine h2{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* Le compte : une ligne de petites capitales (le nombre, puis la suite que la recherche cache). */
.r-compte{ margin:0; font-size:.72rem; font-weight:700; letter-spacing:.1em; line-height:1.5; text-transform:uppercase; color:var(--gris); }
.r-vitrine__tete .r-filtre{ flex-basis:100%; }
.r-fiches, .r-tuiles{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:12px 8px; grid-template-columns:repeat(2, minmax(0, 1fr)); }

/* Le filtre par jour de marché : des pastilles cerclées d'encre (cachées tant que le script ne les a pas montrées). */
.r-filtre{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; }
.r-filtre button{ font:inherit; font-size:.8125rem; font-weight:600; min-height:44px; padding:0 14px; border-radius:var(--rp); border:2px solid var(--encre); background:transparent; color:var(--encre); cursor:pointer; transition:background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); }
.r-filtre button:hover{ background:var(--moutarde); }
.r-filtre button[aria-pressed="true"]{ background:var(--encre); color:var(--comptoir); }

/* ---- La tuile d'un rôtisseur : sa vignette (la photo, le logo en rond sur son
   coin), le nom, les communes, les sept jours en points. Le fond change de
   couleur d'une tuile à l'autre (six, dans l'ordre de la liste : deux voisines
   ne se ressemblent jamais). Le texte qui n'a pas de place ici (le marché du
   moment, l'accroche, les jours en lettres) reste pour les lecteurs d'écran. ---- */
.r-fiche{ display:flex; min-width:0; }
.r-fiche > a{
  --c:var(--tomate); --k:#FFFFFF;
  position:relative; display:grid; grid-template-columns:60px minmax(0, 1fr); column-gap:8px; align-content:center; align-items:center;
  width:100%; min-height:72px; padding:6px; border-radius:var(--rc); background:var(--c); color:var(--k); text-decoration:none;
  transition:transform .25s var(--sortie);
}
.r-fiche > a:hover{ transform:translateY(-2px); }
.r-fiche > a:focus-visible{ outline-offset:3px; }
.r-fiches > .r-fiche:nth-child(6n+2) > a{ --c:var(--moutarde); --k:var(--encre); }
.r-fiches > .r-fiche:nth-child(6n+3) > a{ --c:var(--foret); --k:#FFFFFF; }
.r-fiches > .r-fiche:nth-child(6n+4) > a{ --c:var(--ciel); --k:var(--encre); }
.r-fiches > .r-fiche:nth-child(6n+5) > a{ --c:var(--rose); --k:var(--encre); }
.r-fiches > .r-fiche:nth-child(6n+6) > a{ --c:var(--encre); --k:var(--comptoir); }
/* La vignette : carrée ; sans photo, l'initiale sur un fond plein (tiré de l'adresse). */
.r-fiche__photo{ position:relative; grid-row:1 / span 2; align-self:start; width:60px; height:60px; border-radius:10px; background:var(--comptoir); color:var(--encre); }
.r-fiche__photo > img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.r-fiche__photo--logo{ background:var(--blanc); }
.r-fiche__photo--logo > img{ object-fit:contain; padding:4px; }
.r-fiche__photo--braise{ background:var(--encre); color:var(--moutarde); }
.r-fiche__photo--nuit{ background:var(--case); color:var(--sur-sombre); }
.r-fiche__photo--papier{ background:var(--comptoir); color:var(--encre); }
.r-fiche__mono{ display:grid; place-items:center; width:100%; height:100%; font-family:var(--police-titre); font-size:2rem; font-weight:400; line-height:1; }
/* Le logo du rôtisseur (ses initiales à défaut), en rond sur le coin de la vignette. */
.r-fiche__logo{ position:absolute; right:-7px; bottom:-7px; z-index:1; display:grid; place-items:center; width:28px; height:28px; overflow:hidden; border-radius:50%; background:var(--blanc); border:2px solid var(--c); color:var(--encre); }
.r-fiche__logo img{ width:100%; height:100%; object-fit:cover; }
.r-fiche__logo--mono{ background:var(--comptoir); }
.r-fiche__logo b{ font-family:var(--police-titre); font-size:.6875rem; font-weight:400; line-height:1; letter-spacing:.02em; }
/* « Aujourd'hui au marché », sur le bord haut de la tuile : le marché du jour n'est pas fini. */
.r-fiche__jour{ position:absolute; z-index:2; left:4px; top:-14px; padding:3px 5px 2px; border-radius:4px; background:var(--encre); color:var(--moutarde); font-family:var(--police-titre); font-size:.5625rem; font-weight:400; line-height:1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.r-fiche__tete{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:2px; }
/* Le département n'a pas de place sur la tuile (la recherche le connaît : il est dans data-q). */
.r-fiche__tete .r-fiche__dep{ display:none; }
.r-fiche__dep{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.r-fiche__nom{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; font-family:var(--police); font-size:.8125rem; font-weight:700; line-height:1.12; text-transform:none; letter-spacing:0; overflow-wrap:anywhere; }
.r-fiche__lieu{ display:block; min-width:0; font-size:.72rem; line-height:1.25; }
.r-fiche__lieu > span{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.r-fiche__quand{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.r-fiche__corps{ grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:4px; min-width:0; margin-top:3px; }
.r-fiche__accroche{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.r-fiche__etiquettes{ display:flex; flex-wrap:wrap; gap:4px; }
.r-fiche__etiquette{ display:inline-flex; align-items:center; padding:3px 6px 2px; border:1.5px solid currentColor; border-radius:var(--rp); font-size:.5625rem; font-weight:700; letter-spacing:.05em; line-height:1.1; text-transform:uppercase; }
.r-fiche__etiquette--commande{ background:var(--k); border-color:var(--k); color:var(--c); }
/* Les jours de marché : en lettres pour les lecteurs d'écran, en points pour l'œil. */
.r-fiche__marche{ display:flex; align-items:center; }
.r-jours{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Dits aux lecteurs d'écran : le jour allumé (le marché d'aujourd'hui n'est pas fini) et le titre de la liste des jours. */
.r-jours__titre{ margin-right:4px; }
.r-jours b.r-jours__auj, .r-fiche__quand--auj{ font-weight:700; }
.r-pts{ display:flex; gap:3px; align-items:center; }
.r-pts i{ width:8px; height:8px; border-radius:50%; border:1.6px solid currentColor; opacity:.42; }
.r-pts i.on{ background:currentColor; opacity:1; }
.r-pts i.a{ outline:1.8px solid currentColor; outline-offset:1.2px; opacity:1; }

/* ---- La page introuvable : le seul en-tête sombre, sur la nuit éclairée d'une braise ---- */
.r-tete--sombre{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(8px, 1.4vw, 14px) clamp(22px, 3vw, 34px);
  color:var(--sur-sombre);
  background:
    radial-gradient(52% 120% at 96% -18%, rgba(242,138,75,.36), rgba(194,65,12,.16) 42%, rgba(26,20,15,0) 72%),
    var(--nuit);
}
.r-tete--sombre :focus-visible{ outline-color:var(--braise-vive); }
.r-tete--sombre .r-nom{ color:var(--sur-sombre); }
.r-tete--sombre .r-accroche{ color:var(--sur-sombre-2); }
.r-tete--sombre .r-accroche a{ color:var(--sur-sombre); text-decoration-color:var(--braise-vive); }
.r-tete--sombre .r-btn--ghost, .r-tete--sombre a.r-btn--ghost{ color:var(--sur-sombre); border-color:rgba(244,237,226,.5); }
.r-tete--sombre .r-btn--ghost:hover, .r-tete--sombre a.r-btn--ghost:hover{ background:var(--sur-sombre); border-color:var(--sur-sombre); color:var(--nuit); }
.r-tete--sombre .r-marque__nom{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; }


/* ---- Des palettes de tableau de gare : « VOTRE NOM », « OUVERT », un code ---- */
.r-palettes{ display:grid; gap:6px; justify-items:center; }
.r-palettes > span{ display:flex; gap:4px; }
.r-palettes b{ display:grid; place-items:center; width:clamp(26px, 2.6vw, 34px); aspect-ratio:4 / 5; border-radius:4px; background:var(--fente); box-shadow:inset 0 1px 0 var(--case-lit), 0 12px 20px -12px rgba(0,0,0,.8); color:var(--sur-sombre); font-size:clamp(.95rem, .8rem + .5vw, 1.25rem); font-weight:700; line-height:1; }
.r-palettes--allumees b{ color:var(--braise-vive); width:clamp(34px, 3.4vw, 44px); font-size:clamp(1.1rem, .95rem + .6vw, 1.45rem); }

/* ---- La case libre : pour le rôtisseur qui passe. Toujours en dernière case,
   en bandeau sur toute la largeur : la nuit, « VOTRE NOM » en plaques de
   tableau de gare, trois lignes et un lien. Jamais confondue avec une tuile de
   rôtisseur (couleur) : celle-ci est la seule à être sombre et à porter un
   lien souligné. ---- */
.r-fiche--place{ grid-column:1 / -1; }
.r-fiche--place > a{ display:flex; align-items:center; gap:16px; min-height:96px; padding:14px 16px; background:var(--encre); color:var(--comptoir); }
.r-fiche--place > a:hover{ transform:none; }
.r-fiche__photo--place{ position:static; flex:none; width:auto; height:auto; background:none; border-radius:0; }
.r-fiche--place .r-palettes{ gap:4px; }
.r-fiche--place .r-palettes > span{ gap:3px; }
.r-fiche--place .r-palettes b{ width:23px; aspect-ratio:auto; height:30px; font-family:var(--police-titre); font-size:1.0625rem; font-weight:400; }
.r-fiche--place .r-fiche__corps{ margin:0; gap:4px; flex:1; }
.r-fiche--place .r-fiche__dep{ color:var(--moutarde); font-size:.66rem; letter-spacing:.12em; line-height:1; }
.r-fiche--place .r-fiche__nom{ display:block; overflow:visible; font-family:var(--police-titre); font-size:1.375rem; font-weight:400; line-height:1; letter-spacing:.01em; text-transform:uppercase; }
.r-fiche__texte{ font-size:.78rem; line-height:1.3; opacity:.92; }
.r-fiche__suite{ align-self:flex-start; margin-top:3px; font-size:.8125rem; font-weight:600; line-height:1.2; text-decoration:underline; text-decoration-color:var(--moutarde); text-decoration-thickness:2px; text-underline-offset:4px; }


/* ---- Pas de carte : l'annuaire qui ouvre, un département vide, la panne ----
   La même allure que la place libre : la scène sur la nuit, puis le texte. */
.r-ouverture{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--rc); background:var(--blanc); box-shadow:var(--ombre-carte); }
.r-ouverture__scene{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px, 2vw, 22px); min-height:clamp(150px, 18vw, 220px); padding:clamp(22px, 3vw, 36px) 20px; background:radial-gradient(70% 120% at 100% 0%, rgba(242,138,75,.42), rgba(194,65,12,.16) 45%, rgba(26,20,15,0) 75%), radial-gradient(60% 90% at 0% 100%, rgba(242,138,75,.18), rgba(26,20,15,0) 70%), var(--nuit); }
/* Le texte, centré dans la hauteur de la case (étirée à celle de la place libre). */
.r-ouverture__corps{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; padding:clamp(22px, 3vw, 40px); }
/* Un titre de 27 à 40 px : la taille optique des cartes (opsz 72), pas celle
   d'affiche, qui y tasserait les lettres et avalerait les espaces. */
.r-ouverture h3{ font-variation-settings:"opsz" 72; letter-spacing:-.012em; font-size:clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem); line-height:1.02; margin-bottom:12px; max-width:20ch; }
.r-ouverture p{ color:var(--encre-douce); max-width:52ch; }
.r-ouverture p.r-ouverture__voisins{ margin-top:16px; color:var(--encre); font-weight:700; }
.r-ouverture__liste{ list-style:none; margin:4px 0 6px; padding:0; color:var(--encre-sourde); }
.r-ouverture__liste li, .r-relais__voisins li{ display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; }
/* Le nombre de rôtisseries d'un département voisin, après la flèche du lien
   (ou dessous, quand le nom est long) : sans séparateur qui commencerait une ligne. */
.r-voisin__nombre{ color:var(--encre-sourde); font-size:.95rem; }
/* La broche, dessinée : l'anneau, la tige et sa pointe, à la braise. */
.r-broche{ position:relative; display:block; width:min(78%, 300px); height:12px; }
.r-broche::before{ content:""; position:absolute; left:15px; right:0; top:0; bottom:0; background:var(--braise-vive); clip-path:polygon(0 38%, 93% 38%, 93% 0, 100% 50%, 93% 100%, 93% 62%, 0 62%); }
.r-broche::after{ content:""; position:absolute; left:0; top:50%; width:13px; height:13px; margin-top:-6.5px; border:2px solid var(--braise-vive); border-radius:50%; box-sizing:border-box; }
.r-ouverture--panne{ grid-column:1 / -1; }

/* ---- Les départements, au-delà des seuils : des tuiles (sous la vitrine du jour) ---- */
.r-tuiles{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.r .r-tuiles__titre{ margin:clamp(34px, 4.6vw, 56px) 0 clamp(14px, 1.8vw, 20px); font-size:clamp(1.4rem, 1.2rem + .9vw, 1.9rem); }
.r-tuiles__titre + .r-tuiles{ margin-top:0; }
.r-tuiles a{ display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; column-gap:16px; align-items:center; height:100%; padding:16px 18px; border-radius:var(--rc); background:var(--blanc); box-shadow:var(--ombre-carte); text-decoration:none; transition:transform .4s var(--sortie), box-shadow .4s var(--sortie); }
.r-tuiles a:hover{ transform:translateY(-2px); box-shadow:var(--ombre-carte-haute); }
.r-tuiles__code{ grid-row:1 / 3; display:grid; place-items:center; width:58px; height:64px; border-radius:6px; background:var(--fente); box-shadow:inset 0 1px 0 var(--case-lit); color:var(--sur-sombre); font-size:1.25rem; font-weight:700; letter-spacing:.06em; }
.r-tuiles__nom{ font-family:var(--police-titre); font-size:1.3rem; font-weight:600; line-height:1.1; align-self:end; }
.r-tuiles a:hover .r-tuiles__nom{ color:var(--accent); }
.r-tuiles__nombre{ color:var(--encre-douce); font-size:.9rem; align-self:start; }

/* ---- Les réponses de la recherche, AU-DESSUS des cartes, quand rien ne
   correspond : elles remontent sur la tête, les cartes gardées suivent ---- */
.r-relais{ position:relative; display:grid; gap:8px; justify-items:start; margin:calc(-1 * var(--debord)) 0 clamp(18px, 2.4vw, 26px); padding:clamp(20px, 2.8vw, 32px); border-radius:var(--rc); background:var(--blanc); box-shadow:var(--ombre-carte); }
.r-relais:not([hidden]) ~ .r-fiches, .r-relais:not([hidden]) ~ .r-tuiles{ margin-top:0; }
.r-relais p{ color:var(--encre-douce); max-width:62ch; }
.r-relais p.r-relais__titre{ font-family:var(--police-titre); font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem); font-weight:600; line-height:1.2; color:var(--encre); margin-bottom:2px; }
.r-relais__voisins{ display:grid; gap:2px; }
.r-relais__voisins p{ font-weight:700; color:var(--encre); }
.r-relais__voisins ul{ list-style:none; margin:0; padding:0; color:var(--encre-sourde); }
.r-relais p.r-relais__suite{ margin-top:8px; padding-top:12px; border-top:1px solid var(--filet); align-self:stretch; max-width:none; font-weight:700; color:var(--encre); }
/* « Voir tous les jours » : le texte trouve des cartes, mais pas le jour choisi. */
.r-relais__bouton{ font:inherit; font-size:.95rem; font-weight:700; min-height:44px; padding:0 18px; border:1.5px solid var(--encre); border-radius:var(--rp); background:transparent; color:var(--encre); cursor:pointer; transition:background-color var(--duree) var(--courbe), color var(--duree) var(--courbe); }
.r-relais__bouton:hover{ background:var(--encre); color:var(--papier); }

/* La ligne de confiance, près de la liste (article L111-7). */
.r-confiance{ position:relative; margin-top:clamp(20px, 2.6vw, 30px); padding-left:32px; color:var(--encre-douce); font-size:.95rem; line-height:1.55; }
.r-confiance::before{ content:""; position:absolute; left:0; top:.1em; width:20px; height:20px; border-radius:50%; background:linear-gradient(45deg, transparent 0 44%, var(--blanc) 44% 56%, transparent 56%) 9px 3px / 4px 11px no-repeat, linear-gradient(-45deg, transparent 0 40%, var(--blanc) 40% 60%, transparent 60%) 4px 9px / 7px 6px no-repeat, var(--accent); }
.r-confiance a{ display:inline-block; padding-block:11px; margin-block:-11px; margin-left:6px; color:var(--encre); font-weight:600; text-decoration-color:var(--accent); text-decoration-thickness:2px; white-space:nowrap; }
.r-confiance a:hover{ color:var(--accent); }
.r-note{ margin-top:18px; color:var(--encre-sourde); font-size:.95rem; }

/* ---- Sur la page de chaque rôtisseur : trois repères, dessinés ---- */
.r-reperes{ padding-block:clamp(48px, 6.5vw, 88px) 0; }
.r-reperes h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom:clamp(20px, 2.6vw, 30px); }
.r-reperes ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:minmax(0, 1fr); }
.r-reperes li{ display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; column-gap:16px; row-gap:4px; align-items:center; padding:16px 0; border-top:1px solid var(--filet-fort); }
.r-reperes li .r-reperes__picto{ grid-row:1 / 3; }
.r-reperes__titre{ align-self:end; font-family:var(--police-titre); font-size:clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight:600; line-height:1.2; }
.r-reperes__texte{ align-self:start; color:var(--encre-douce); font-size:.95rem; line-height:1.45; }
.r-reperes__picto{ position:relative; flex:none; width:54px; height:54px; border-radius:50%; background:var(--accent-doux); color:var(--accent-fonce); }
.r-reperes__picto::before, .r-reperes__picto::after{ content:""; position:absolute; }
/* Le calendrier : une page, sa reliure. */
.r-reperes__picto--marches::before{ left:15px; right:15px; top:17px; bottom:14px; border:2px solid currentColor; border-top-width:6px; border-radius:4px; }
.r-reperes__picto--marches::after{ left:20px; right:20px; top:12px; height:8px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
/* Le téléphone : l'appareil, son bouton. */
.r-reperes__picto--telephone::before{ left:19px; right:19px; top:12px; bottom:12px; border:2px solid currentColor; border-radius:6px; }
.r-reperes__picto--telephone::after{ left:50%; bottom:16px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:currentColor; }
/* La commande : un sac, son anse. */
.r-reperes__picto--commande::before{ left:15px; right:15px; bottom:13px; height:21px; border:2px solid currentColor; border-radius:3px 3px 7px 7px; }
.r-reperes__picto--commande::after{ left:50%; top:12px; width:14px; height:12px; margin-left:-7px; border:2px solid currentColor; border-bottom:0; border-radius:9px 9px 0 0; }

/* ---- Les départements : ceux qui ont des rôtisseurs en tuiles (sous les
   seuils), puis les autres, repliés, en colonnes serrées ---- */
.r-depts{ padding-block:clamp(44px, 6vw, 76px) 0; }
.r-depts h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom:clamp(16px, 2vw, 22px); }
.r-depts .r-depts__tuiles{ margin:0 0 clamp(18px, 2.4vw, 28px); }
.r-depts details{ border-top:1px solid var(--filet-fort); border-bottom:1px solid var(--filet-fort); }
.r-depts summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:12px 0; cursor:pointer; list-style:none; }
.r-depts summary::-webkit-details-marker{ display:none; }
.r .r-depts__resume{ font-size:clamp(1.25rem, 1.12rem + .6vw, 1.6rem); margin:0; }
/* Le chevron, qui se retourne à l'ouverture. */
.r-depts summary::after{ content:""; flex:none; width:12px; height:12px; margin-right:8px; border-right:2.5px solid var(--encre); border-bottom:2.5px solid var(--encre); transform:translateY(-3px) rotate(45deg); transition:transform .3s var(--sortie); }
.r-depts details[open] summary::after{ transform:translateY(3px) rotate(-135deg); }
.r-depts summary:hover .r-depts__resume{ color:var(--accent); }
.r .r-depts__titre{ margin:14px 0 8px; font-family:var(--police); font-size:.75rem; font-weight:700; letter-spacing:.16em; line-height:1.3; text-transform:uppercase; color:var(--encre-sourde); }
.r-depts__liste{ list-style:none; margin:0; padding:0 0 18px; columns:2; column-gap:24px; }
.r-depts__liste li{ break-inside:avoid; padding:3px 0; color:var(--encre-sourde); font-size:.875rem; line-height:1.35; }
.r-depts__vide{ opacity:.88; }

/* ---- L'appel aux rôtisseurs : sur le papier, sobre ; la page reste aux clients ---- */
.r-appel{ position:relative; display:grid; grid-template-areas:"texte" "points" "offre" "actions"; align-items:center; margin:clamp(44px, 6vw, 80px) 0 clamp(40px, 5.5vw, 68px); padding:clamp(22px, 3vw, 40px); border-radius:16px; background:var(--papier-2); border:1px solid var(--filet); color:var(--encre); overflow:hidden; isolation:isolate; }
/* Deux cercles fins, pour le relief. */
.r-appel::before, .r-appel::after{ content:""; position:absolute; z-index:-1; border-radius:50%; border:1.5px solid var(--filet-fort); pointer-events:none; }
.r-appel::before{ width:300px; height:300px; right:-110px; top:-150px; }
.r-appel::after{ width:190px; height:190px; right:-40px; top:-90px; }
.r-appel h2{ font-variation-settings:"opsz" 72; font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height:1; letter-spacing:-.012em; margin-bottom:0; }
.r-appel p{ color:var(--encre-douce); max-width:52ch; }
.r-appel__texte{ grid-area:texte; }
/* L'offre telle qu'offre.js l'écrit (principe 8), après ce qu'on y gagne sur un téléphone. */
.r-appel p.r-appel__offre{ grid-area:offre; margin-top:14px; }
.r-appel__actions{ grid-area:actions; margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; }
.r-appel p.r-appel__connexion{ font-size:.95rem; }
.r-appel__connexion a{ display:inline-flex; align-items:center; min-height:44px; color:var(--encre); font-weight:700; text-decoration-color:var(--accent); text-decoration-thickness:2px; }
.r-appel__connexion a:hover{ color:var(--accent); }
/* Trois mots-clés, cochés à la braise : une liste à filets, jamais des boutons. */
.r-appel__points{ grid-area:points; list-style:none; margin:18px 0 0; padding:0; display:grid; border-top:1px solid var(--filet-fort); }
.r-appel__points li{ position:relative; display:flex; align-items:center; min-height:48px; padding:10px 0 10px 38px; border-bottom:1px solid var(--filet-fort); font-family:var(--police-titre); font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight:600; line-height:1.25; }
.r-appel__points li::before, .r-appel__points li::after{ content:""; position:absolute; top:50%; }
/* Le cercle sur la braise douce, la coche à la braise. */
.r-appel__points li::before{ left:0; width:24px; height:24px; margin-top:-12px; border-radius:50%; background:var(--accent-doux); box-shadow:inset 0 0 0 1.5px rgba(194,65,12,.35); }
.r-appel__points li::after{ left:9px; width:6px; height:11px; margin-top:-8px; border-right:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(45deg); }

/* ---- Le pied, sur la nuit : des liens, donc des cibles de 44 px ---- */
.r-pied{ padding:40px 0 48px; font-size:.9rem; line-height:1.55; color:var(--sur-sombre-2); background:var(--nuit); }
.r-pied p + p{ margin-top:10px; }
.r-pied a{ display:inline-flex; align-items:center; min-height:44px; color:var(--sur-sombre); font-weight:600; }
.r-pied__liens{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; column-gap:12px; }
.r-pied__liens li{ display:flex; align-items:center; gap:12px; }
.r-pied__liens li + li::before{ content:"\00B7"; color:var(--sur-sombre-2); }
.r-pied a:hover{ color:var(--blanc); }
.r-pied :focus-visible{ outline-color:var(--sur-sombre); }

/* ---- Le plan du site, les communes ---- */
.r-wrap--plan{ padding-block:clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.r-dep{ padding-block:clamp(22px, 3vw, 36px) 6px; }
.r-dep h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom:14px; }
.r-plan{ list-style:none; margin:0; padding:0; border-top:2px solid var(--encre); }
.r-plan li{ padding:10px 0; border-bottom:1px solid var(--filet-fort); color:var(--encre-sourde); }
.r-plan a{ display:inline-flex; align-items:center; min-height:44px; color:var(--encre); font-weight:600; text-decoration-color:var(--filet-champ); }
.r-plan a:hover{ color:var(--accent); text-decoration-color:currentColor; }
/* Les pages par commune (lot 17) : la liste des communes d'un département. */
.r-communes{ padding-block:clamp(48px, 7vw, 88px) 6px; }
.r-communes h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom:18px; }
@media (min-width:720px){ .r-plan--communes{ columns:2; column-gap:40px; } .r-plan--communes li{ break-inside:avoid; } }
@media (min-width:1040px){ .r-plan--communes{ columns:3; } }

/* ---- La page introuvable : l'en-tête seul, sur toute la hauteur ---- */
.r-seule{ background:var(--nuit); }
.r-tete--seule{ min-height:100vh; min-height:100svh; display:grid; align-content:center; }
.r-tete--seule .r-marque{ position:absolute; top:clamp(8px, 1.4vw, 14px); }
.r-tete--seule .r-accroche{ margin-top:18px; }
/* Pour le rôtisseur qui cherchait son espace : un lien discret, sous les boutons. */
.r-seule__connexion{ margin-top:18px; font-size:.95rem; }
.r-seule__connexion a{ display:inline-flex; align-items:center; min-height:44px; color:var(--sur-sombre); font-weight:600; text-decoration-color:var(--braise-vive); text-decoration-thickness:2px; }
.r-seule__connexion a:hover{ color:var(--blanc); }

/* ---- Près de chez vous : les cartes des départements voisins, sous la page
   d'un département vide ---- */
.r-pres{ padding-block:clamp(40px, 5.5vw, 72px) 0; }
.r-pres h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom:clamp(16px, 2vw, 22px); }
.r-pres .r-fiches, .r-fiches--pres{ margin-top:0; }

/* ---- Les grilles (sans style écrit dans la page) ----
   Téléphone : deux colonnes de tuiles (une sous 360 px). Dès 640 px, autant de
   colonnes de 280 px que la largeur en tient. La case libre, l'annuaire qui
   ouvre et la panne prennent toute la largeur. */
.r-ouverture, .r-ouverture--panne{ grid-column:1 / -1; }
@media (max-width:359.98px){
  .r-fiches{ grid-template-columns:minmax(0, 1fr); }
}
@media (min-width:640px){
  .r-fiches{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px 12px; }
  .r-fiche > a{ grid-template-columns:72px minmax(0, 1fr); column-gap:12px; min-height:88px; padding:8px; }
  .r-fiche__photo{ width:72px; height:72px; }
  .r-fiche__photo--place{ width:auto; height:auto; }
  .r-fiche__logo{ width:32px; height:32px; right:-8px; bottom:-8px; }
  .r-fiche__logo b{ font-size:.75rem; }
  .r-fiche__mono{ font-size:2.3rem; }
  .r-fiche__nom{ font-size:1rem; }
  .r-fiche__lieu{ font-size:.8125rem; }
  .r-fiche__jour{ left:6px; top:-15px; font-size:.625rem; }
  .r-fiche--place > a{ gap:24px; padding:16px 24px; }
  .r-fiche--place .r-palettes b{ width:28px; height:36px; font-size:1.25rem; }
  .r-fiche--place .r-fiche__nom{ font-size:1.7rem; }
  .r-fiche__texte{ font-size:.9rem; }
  .r-tete__rang{ gap:10px; }
  .r-tete--claire .r-marque svg{ width:40px; height:40px; border-radius:11px; }
  .r-tete--claire .r-marque__nom{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
  .r-tete--claire .r-pro{ width:auto; padding:0 16px; border:2.5px solid var(--encre); border-radius:var(--rp); font-size:.875rem; font-weight:600; text-decoration:none; white-space:nowrap; }
  .r-tete--claire .r-pro:hover{ background:var(--moutarde); }
  .r-accroche{ font-size:1.0625rem; }
  .r-reperes ul{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
  .r-reperes li{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; align-content:start; row-gap:6px; padding:20px 0 0; }
  .r-reperes__titre, .r-reperes__texte{ align-self:start; }
  .r-reperes li .r-reperes__picto{ grid-row:auto; margin-bottom:10px; }
  .r-depts__liste{ columns:3; }
  .r-appel{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas:"texte points" "offre points" "actions points"; column-gap:clamp(24px, 4vw, 56px); }
  .r-appel__points{ margin-top:0; align-self:center; }
}
@media (min-width:1024px){
  .r-depts__liste{ columns:4; }
  /* L'appel : le titre, l'offre et le bouton, puis les trois points sur une ligne. */
  .r-appel{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas:"texte actions" "offre actions" "points points"; align-items:end; }
  .r-appel__actions{ justify-content:flex-end; margin-top:0; }
  .r-appel__points{ grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:24px; margin-top:24px; border-top:0; }
  .r-appel__points li{ border-top:1px solid var(--filet-fort); }
}
@media (min-width:1180px){ .r-depts__liste{ columns:5; } }

@media (max-width:639.98px){
  .r-tete--claire .r-accroche{ display:none; }
  .r-pied__liens{ display:grid; column-gap:0; }
  .r-pied__liens li + li::before{ display:none; }
  /* « Espace rôtisseur » est au pied et dans l'appel (« Déjà inscrit ? Se
     connecter ») : la rangée de l'en-tête garde sa place pour la recherche. */
  .r-connexion{ display:none; }
  .r-compte__suite{ display:none; }
  /* Les jours du filtre sur une seule ligne, qui défile au doigt. */
  .r-filtre{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gout)); padding:2px var(--gout) 4px; scrollbar-width:none; }
  .r-filtre::-webkit-scrollbar{ display:none; }
  .r-filtre button{ flex:none; }
  /* La case libre, compacte. L'appel garde ses trois points, en une liste
     serrée : ce qu'on y gagne, avant l'offre et le bouton. */
  .r-appel__points{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:14px; border:0; }
  .r-appel__points li{ min-height:0; padding:4px 0 4px 30px; border:0; font-size:1rem; }
  .r-ouverture__scene{ min-height:120px; }
  .r-actions .r-btn{ width:100%; }
  .r-appel__actions .r-btn{ width:100%; }
}
/* Un écran de moins de 360 px : le champ garde son texte d'exemple entier, et « Vous êtes rôtisseur ? » se resserre. */
@media (max-width:379.98px){
  .r-cherche input{ font-size:.875rem; }
}
@media (max-width:359.98px){
  .r-pro{ width:60px; font-size:.6875rem; }
  .r-cherche input{ font-size:.8125rem; padding:0 6px 0 36px; }
  .r-cherche__champ::before{ left:11px; }
  .r-cherche__champ::after{ left:23px; }
}

/* ---- Le mouvement : les tuiles montent une fois ---- */
@media (prefers-reduced-motion:no-preference){
  .r-fiches > li, .r-tuiles > li{ animation:r-monte .6s var(--sortie) backwards; animation-delay:.08s; }
  .r-fiches > li:nth-child(2), .r-tuiles > li:nth-child(2){ animation-delay:.12s; } .r-fiches > li:nth-child(3), .r-tuiles > li:nth-child(3){ animation-delay:.16s; }
  .r-fiches > li:nth-child(n+4), .r-tuiles > li:nth-child(n+4){ animation-delay:.2s; }
  .r-tuiles a:hover .r-tuiles__code, .r-fiche > a:hover .r-fiche__mono, .r-fiche--place > a:hover .r-palettes b:nth-child(odd){ animation:r-bascule .5s var(--sortie); }
}
@keyframes r-monte{ from{ opacity:0; transform:translateY(10px); } }
@keyframes r-bascule{ 0%{ transform:perspective(200px) rotateX(0); } 45%{ transform:perspective(200px) rotateX(-80deg); } 100%{ transform:perspective(200px) rotateX(0); } }
@media (prefers-reduced-motion:reduce){ .r *, .r *::before, .r *::after{ transition-duration:1ms !important; animation-duration:1ms !important; } }