/* =========================================================
   Les pages de la plateforme au style des rôtisseurs (lot 7) :
   l'annuaire (<hôte public>/annuaire) et la page introuvable des
   adresses publiques, rendues par pageAnnuaire 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 (accent « rouge », jetons du socle), contrôlées par
   outils-dev/contrastes.mjs. Chaque classe que pageAnnuaire et
   pageIntrouvable emploient est définie ici : tests/lot7-pages.test.mjs
   le vérifie. Aucune couleur ni aucun style écrit dans la page (CSP).
   ========================================================= */

/* Polices servies par le site : mêmes fichiers que /socle.css, donc un seul téléchargement */
@font-face{font-family:"DM Sans";font-weight:400 700;font-display:swap;src:url(/fonts/f1.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-weight:400 700;font-display:swap;src:url(/fonts/f2.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:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/f3.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/f4.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/f5.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:"Fraunces";font-weight:400 700;font-display:swap;src:url(/fonts/f6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-weight:400 700;font-display:swap;src:url(/fonts/f7.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-weight:400 700;font-display:swap;src:url(/fonts/f8.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}

/* ---- Le socle de la page ----
   Direction « Au marché », celle de l'accueil (vitrine/accueil/accueil.css) :
   grands titres Fraunces, l'italique à la braise, les jours de marché en
   palettes de tableau de gare, l'appel sur la braise, le pied sur l'encre. */
.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;          /* le pied, comme le tableau de l'accueil */
  --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 l'encre : 13:1 */
  --sur-sombre-2:#CBBBA6;  /* texte second sur l'encre : 8,4:1 */
  --police-titre:"Fraunces",Georgia,serif;
  --police:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r2:12px; --rp:999px;
  --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);
  --accent:#C2410C; --accent-fonce:#9A3412; --accent-doux:#FDF1EA;
  margin:0; font-family:var(--police); color:var(--encre); background:var(--papier);
  font-size:17px; line-height:1.6; -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{ font-family:var(--police-titre); font-weight:600; line-height:1; letter-spacing:-.022em; 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; }

/* 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); }

/* ---- L'en-tête (l'annuaire, la page introuvable) ----
   La marque en haut, sur un filet ; puis le grand titre. */
.r-tete{ background:var(--papier); }
.r-tete--annuaire{ padding-block:clamp(12px, 2vw, 18px) clamp(40px, 6vw, 72px); border-bottom:1px solid var(--filet-fort); }
/* La page introuvable n'a que son en-tête : pas de filet dessous. */
.r-tete--annuaire:last-child{ border-bottom:0; }
.r-marque{ display:flex; align-items:center; padding-bottom:clamp(12px, 2vw, 18px); margin-bottom:clamp(40px, 7vw, 88px); border-bottom:1px solid var(--filet); }
.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(--encre); text-decoration:none; }
/* Le signe de la marque, dessiné : le R sur l'encre, la broche à la braise. */
.r-marque a::before{
  content:"R"; content:"R" / "";
  flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:8px;
  background:linear-gradient(var(--accent), var(--accent)) center 54% / 78% 3px no-repeat, var(--encre);
  color:var(--papier); font-family:var(--police-titre); font-size:1.3rem; font-weight:600; letter-spacing:0; text-transform:none;
}
.r-marque a:hover{ color:var(--accent); }
/* La taille optique d'affiche (opsz 144) aux seuls grands titres : plus bas, ses déliés disparaissent. */
.r-nom{ font-variation-settings:"opsz" 144; font-size:clamp(2.4rem, 1.2rem + 5vw, 5.6rem); line-height:.93; letter-spacing:-.034em; max-width:14ch; hyphens:manual; }
.r-nom em{ font-style:italic; font-weight:500; color:var(--accent); }
.r-accroche{ margin-top:clamp(18px, 2.4vw, 28px); font-size:clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height:1.55; color:var(--encre-douce); max-width:56ch; }
.r-accroche a{ color:var(--encre); font-weight:600; text-decoration-color:var(--accent); text-decoration-thickness:2px; }
.r-accroche a:hover{ color:var(--accent); }
.r-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---- La recherche et la liste ---- */
.r-annuaire main{ padding-bottom:8px; }
.r-cherche{ position:relative; margin-top:clamp(26px, 3.4vw, 40px); max-width:580px; }
.r-cherche input{
  width:100%; font:inherit; font-size:1.0625rem; color:var(--encre); padding:0 20px 0 54px; height:60px;
  border:2px solid var(--encre); border-radius:var(--r2); background:var(--blanc); box-shadow:var(--ombre-douce);
  -webkit-appearance:none; appearance:none;
}
.r-cherche input::placeholder{ color:var(--encre-sourde); opacity:1; }
.r-cherche input:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
/* La loupe, dessinée : un cercle et son manche. */
.r-cherche::before, .r-cherche::after{ content:""; position:absolute; top:50%; pointer-events:none; }
.r-cherche::before{ left:20px; width:15px; height:15px; margin-top:-10px; border:2px solid var(--encre); border-radius:50%; }
.r-cherche::after{ left:31px; width:8px; height:2px; margin-top:6px; background:var(--encre); transform:rotate(45deg); }
/* Le compte : un voyant, des capitales (le tableau de l'accueil). */
.r-compte{ display:flex; align-items:center; gap:10px; margin:clamp(30px, 4vw, 48px) 0 14px; font-size:.75rem; font-weight:700; line-height:1.35; letter-spacing:.22em; text-transform:uppercase; color:var(--encre-douce); }
.r-compte::before{ content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.r-dep{ padding-block:clamp(28px, 4vw, 44px) 6px; }
.r-dep h2{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom:14px; }
.r-liste{ list-style:none; margin:0; padding:0; border-top:2px solid var(--encre); }
.r-liste li{ border-bottom:1px solid var(--filet-fort); }
.r-liste a{ display:grid; grid-template-columns:84px minmax(0, 1fr) auto; gap:6px 22px; align-items:center; padding:18px 6px 18px 0; text-decoration:none; transition:background-color .3s var(--courbe); }
.r-liste a:hover{ background:linear-gradient(90deg, var(--papier) 0, var(--papier-2) 40%); }
.r-liste img, .r-mono{ width:84px; height:84px; border-radius:10px; object-fit:cover; background:var(--papier-2); }
/* Le monogramme et le code d'un département : une palette de tableau de gare. */
.r-mono{
  position:relative; display:grid; place-items:center; overflow:hidden;
  font-family:var(--police-titre); font-size:2.3rem; font-weight:600; line-height:1; color:var(--sur-sombre);
  background:var(--fente); box-shadow:inset 0 1px 0 var(--case-lit);
}
.r-liste__corps{ min-width:0; transition:transform .45s var(--sortie); }
.r-liste a:hover .r-liste__corps{ transform:translateX(6px); }
.r-liste__nom{ display:block; font-family:var(--police-titre); font-size:clamp(1.4rem, 1.25rem + .6vw, 1.8rem); font-weight:600; line-height:1.08; letter-spacing:-.015em; transition:color var(--duree) var(--courbe); }
.r-liste a:hover .r-liste__nom{ color:var(--accent); }
.r-liste__ville{ display:block; margin-top:6px; color:var(--encre-douce); font-size:.95rem; }
.r-liste__commande{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:4px 11px; border:1.5px solid var(--accent); border-radius:var(--rp); color:var(--accent-fonce); font-size:.78rem; font-weight:700; letter-spacing:.03em; }
.r-liste__commande::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.r-liste__accroche{ display:block; margin-top:5px; font-family:var(--police-titre); font-style:italic; color:var(--encre-sourde); font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Les jours de marché : des palettes, comme le tableau de l'accueil. */
.r-jours{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; max-width:196px; }
.r-jours b{
  display:grid; place-items:center; width:46px; height:34px; border-radius:3px;
  background:var(--fente); box-shadow:inset 0 1px 0 var(--case-lit);
  color:var(--sur-sombre); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.r-vide{ padding:36px 0; font-family:var(--police-titre); font-style:italic; font-size:1.2rem; color:var(--encre-sourde); }

/* ---- L'appel aux rôtisseurs : sur la braise, comme la fin de l'accueil ---- */
.r-appel{ position:relative; margin:clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); padding:clamp(30px, 5vw, 64px); border-radius:16px; background:var(--accent); color:var(--papier); overflow:hidden; isolation:isolate; }
/* Deux cercles de braise plus sombre, pour le relief. */
.r-appel::before, .r-appel::after{ content:""; position:absolute; z-index:-1; border-radius:50%; border:2px solid var(--accent-fonce); pointer-events:none; }
.r-appel::before{ width:340px; height:340px; right:-110px; top:-150px; }
.r-appel::after{ width:220px; height:220px; right:-40px; top:-80px; }
.r-appel .r-eyebrow{ color:var(--papier); }
.r-appel h2{ font-variation-settings:"opsz" 144; font-size:clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem); line-height:.95; letter-spacing:-.03em; max-width:12ch; margin-bottom:18px; color:var(--papier); }
.r-appel p{ color:var(--papier); max-width:58ch; }
.r-appel p + p{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
.r-appel .r-btn--ghost, .r-appel a.r-btn--ghost{ background:var(--encre); color:var(--papier); border-color:var(--encre); }
.r-appel .r-btn--ghost:hover, .r-appel a.r-btn--ghost:hover{ background:var(--nuit); border-color:var(--nuit); color:var(--papier); }
.r-appel :focus-visible{ outline-color:var(--encre); }

/* ---- Le pied, sur l'encre : 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 a:hover{ color:var(--blanc); }
.r-pied :focus-visible{ outline-color:var(--sur-sombre); }

@media (max-width: 760px){
  .r-liste a{ grid-template-columns:64px minmax(0, 1fr); gap:6px 16px; }
  .r-liste img, .r-mono{ width:64px; height:64px; }
  .r-mono{ font-size:1.8rem; }
  .r-jours{ grid-column:2; justify-content:flex-start; max-width:none; }
  .r-jours b{ width:44px; height:30px; }
  /* 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; }
  .r-actions .r-btn{ width:100%; }
  .r-appel p + p .r-btn{ width:100%; }
}

/* ---- Le mouvement : les lignes montent une fois, le voyant bat quatre fois ---- */
@media (prefers-reduced-motion:no-preference){
  .r-nom, .r-accroche, .r-cherche{ animation:r-monte .8s var(--sortie) backwards; }
  .r-accroche{ animation-delay:.08s; }
  .r-cherche{ animation-delay:.16s; }
  .r-liste li{ animation:r-monte .6s var(--sortie) backwards; }
  .r-liste li:nth-child(2){ animation-delay:.05s; } .r-liste li:nth-child(3){ animation-delay:.1s; }
  .r-liste li:nth-child(4){ animation-delay:.15s; } .r-liste li:nth-child(5){ animation-delay:.2s; }
  .r-liste li:nth-child(6){ animation-delay:.25s; } .r-liste li:nth-child(n+7){ animation-delay:.3s; }
  .r-compte::before{ animation:r-voyant 2.4s ease-in-out 4; }
  .r-liste a:hover .r-mono--code{ animation:r-bascule .5s var(--sortie); }
}
@keyframes r-monte{ from{ opacity:0; transform:translateY(14px); } }
@keyframes r-voyant{ 50%{ opacity:.25; } }
@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; } }

/* Lot 10 : la page nationale (un département par ligne, son code en palette)
   et le plan du site. */
.r-mono--code{ font-family:var(--police); font-size:1.55rem; font-weight:700; letter-spacing:.08em; }
/* Les départements sur deux colonnes, quand la page n'en liste que des codes. */
@media (min-width:900px){
  .r-liste:has(.r-mono--code){ display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
}
.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, et la note sous les rôtisseries. */
.r-communes{ padding-block:clamp(48px, 7vw, 88px) 6px; }
.r-communes h2{ font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); margin-bottom:22px; }
@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; } }
.r-note{ margin-top:16px; color:var(--encre-sourde); font-size:.95rem; }
/* Le filtre par jour de marché (caché tant que le script ne l'a pas montré). */
.r-filtre{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.r-filtre button{ font:inherit; font-size:.92rem; font-weight:600; min-height:44px; padding:0 16px; border-radius:var(--rp); border:2px solid var(--filet-fort); background:var(--blanc); color:var(--encre); cursor:pointer; transition:border-color var(--duree) var(--courbe), background-color var(--duree) var(--courbe); }
.r-filtre button:hover{ border-color:var(--encre); }
.r-filtre button[aria-pressed="true"]{ background:var(--encre); border-color:var(--encre); color:var(--papier); }