/* =========================================================
   Le click & collect posé sur la page d'un rôtisseur (11/10/2026 : le dosage 2 de Pierre, « Le parcours numéroté »). Chargée par pageSite()
   après la feuille du gabarit, avec /commande-site.js, quand la commande en ligne est ouverte sur un marché (site-rendu.js, tunnelDePage).

   Les trente gabarits ont les mêmes pièces, posées par le script dans des emplacements que chaque gabarit réserve (.cc-haut, .cc-marche,
   .cc-produit) : leurs couleurs ne s'écrivent donc pas ici gabarit par gabarit. Elles prennent les jetons de la page de commande
   (commande.css : une ligne par gabarit, recopiée ci-dessous à l'identique, tests/commande-parcours.test.mjs les compare) :
     --commande-fort        l'accent sur un cadre clair (AA sur le papier) ;
     --commande-bouton, --commande-sur-bouton   le bouton plein et son texte (AA entre eux) ;
     --commande-titre, --commande-graisse, --commande-casse   la lettre des titres du site.
   Ce qui est posé sur le fond du gabarit (le tampon du haut, les lignes d'un marché) hérite de sa couleur de texte ; ce qui est plein (les
   boutons) ou en cadre (le billet, le panier, le menu du marché) porte ses propres couleurs, lisibles sur tous les fonds.
   Aucune couleur n'est écrite ailleurs que dans ce bloc : le papier et l'encre du cadre sont ceux du socle (/socle.css), recopiés. */

.r{--cc-papier:#FCFAF5;--cc-encre:#2B2118;--cc-douce:#5A4A3A;--cc-filet:#D6CAB6;
  --commande-fort:var(--cc-encre);--commande-bouton:var(--commande-fort);--commande-sur-bouton:#FFFFFF;
  --cc-fort:var(--commande-fort);--cc-bouton:var(--commande-bouton);--cc-sur-bouton:var(--commande-sur-bouton)}

/* ---------- Les jetons de chaque gabarit (ceux de commande.css) ---------- */
.r--g-signature{--commande-titre:var(--serif);--commande-graisse:340;--commande-fort:var(--accent)}
.r--g-gazette{--commande-titre:var(--titre);--commande-graisse:900;--commande-casse:uppercase;--commande-fort:var(--accent)}
.r--g-epicerie{--commande-titre:var(--romain);--commande-fort:var(--accent)}
.r--g-auberge{--commande-titre:var(--titre);--commande-graisse:600;--commande-fort:var(--accent)}
.r--g-deco{--commande-titre:var(--haute);--commande-casse:uppercase;--commande-fort:var(--nuit);--commande-sur-bouton:var(--or);--commande-accent:var(--dore)}
.r--g-terroir{--commande-titre:var(--serif);--commande-casse:uppercase;--commande-fort:var(--accent)}
.r--g-comptoir{--commande-titre:var(--titre);--commande-graisse:800;--commande-fort:var(--tampon);--commande-sur-bouton:var(--sur-tampon)}
.r--g-marche{--commande-titre:"DM Sans",system-ui,sans-serif;--commande-graisse:900;--commande-fort:var(--a)}
.r--g-chevalet{--commande-titre:var(--main);--commande-fort:var(--peint);--commande-sur-bouton:var(--sur-accent)}
.r--g-ferme{--commande-titre:var(--affiche);--commande-fort:var(--accent)}
.r--g-carnet{--commande-titre:var(--livre);--commande-graisse:800;--commande-fort:var(--accent);--commande-sur-bouton:var(--sur-accent)}
.r--g-faience{--commande-titre:var(--livre);--commande-graisse:700;--commande-fort:var(--accent);--commande-sur-bouton:var(--sur)}
.r--g-vivant{--commande-titre:"DM Sans",system-ui,sans-serif;--commande-graisse:800;--commande-fort:var(--fonce);--commande-sur-bouton:var(--clair);--commande-accent:var(--vif)}
.r--g-halle{--commande-titre:"DM Sans",system-ui,sans-serif;--commande-graisse:900;--commande-casse:uppercase;--commande-fort:var(--accent);--commande-sur-bouton:var(--sur-accent)}
.r--g-atelier{--commande-titre:"Inter Tight","Inter Tight secours",system-ui,sans-serif;--commande-graisse:500;--commande-fort:var(--accent);--commande-sur-bouton:var(--sur-accent)}
.r--g-epure{--commande-titre:var(--texte);--commande-graisse:300;--commande-fort:var(--accent);--commande-sur-bouton:var(--sur-accent)}
.r--g-magazine{--commande-titre:var(--didone);--commande-fort:var(--accent)}
.r--g-affiche{--commande-titre:var(--gros);--commande-casse:uppercase;--commande-fort:var(--ct);--commande-bouton:var(--c);--commande-sur-bouton:var(--sur);--commande-accent:var(--c)}
.r--g-bistrot{--commande-titre:var(--script);--commande-fort:var(--ardoise);--commande-sur-bouton:var(--couleur);--commande-accent:var(--couleur)}
.r--g-enseigne{--commande-titre:var(--lettre);--commande-casse:uppercase;--commande-fort:var(--noir);--commande-sur-bouton:var(--accent);--commande-accent:var(--accent)}
.r--g-brasserie{--commande-titre:var(--deco);--commande-casse:uppercase;--commande-fort:var(--accent);--commande-accent:var(--or)}
.r--g-braise{--commande-titre:var(--caps);--commande-graisse:900;--commande-casse:uppercase;--commande-fort:var(--accent);--commande-sur-bouton:var(--os);--commande-accent:var(--braise)}
.r--g-neon{--commande-titre:"Fraunces",Georgia,serif;--commande-graisse:900;--commande-fort:var(--nuit);--commande-sur-bouton:var(--p);--commande-accent:var(--p)}
.r--g-cuivre{--commande-titre:var(--serif);--commande-graisse:300;--commande-fort:var(--email);--commande-sur-bouton:var(--c4);--commande-accent:var(--c2)}
.r--g-camion{--commande-titre:var(--f);--commande-graisse:900;--commande-fort:var(--encre);--commande-sur-bouton:var(--vif);--commande-accent:var(--vif)}
.r--g-soleil{--commande-titre:var(--titre);--commande-fort:var(--accent)}
.r--g-guinguette{--commande-titre:var(--didone);--commande-graisse:800;--commande-fort:var(--accent)}
.r--g-provence{--commande-titre:var(--romain);--commande-fort:var(--accent)}
.r--g-mariniere{--commande-titre:var(--cap);--commande-graisse:800;--commande-casse:uppercase;--commande-fort:var(--pt);--commande-bouton:var(--p);--commande-sur-bouton:var(--sp);--commande-accent:var(--p)}
.r--g-azulejo{--commande-titre:var(--romain);--commande-graisse:600;--commande-fort:var(--a);--commande-sur-bouton:var(--email)}

/* ---------- Les emplacements, sans le script ---------- */
/* Vides tant que /commande-site.js ne les a pas remplis : ils ne prennent aucune place. Le lien « Commander en ligne » du haut de page reste, lui,
   un bouton ordinaire. */
.cc-marche:empty,.cc-produit:empty{display:none}
.cc-haut{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1rem 0 0;font-size:1rem;line-height:1.35}
.cc-haut__lien{display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem 1.1rem;border-radius:.4rem;background:var(--cc-bouton);color:var(--cc-sur-bouton);font-weight:800;text-decoration:none}

/* ---------- 1. Sous les boutons du haut ---------- */
.cc-tampon{display:inline-flex;align-items:center;min-height:1.9rem;padding:0 .6rem;border:2px solid currentColor;border-radius:.3rem;color:inherit;font-family:inherit;font-size:.75rem;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;rotate:-2deg}
.cc-mot{font-size:1.1875rem;font-style:italic}
.cc-lien{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.2em}

/* ---------- 2 et 3. Les étapes en tête de la tournée et de la carte ---------- */
.cc-etape{margin:.5rem 0 0;font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cc-sous{margin:.3rem 0 .9rem;font-size:1.0625rem;font-style:italic}
.cc-sous__aide{display:block;margin-top:.2rem;font-size:.9375rem;font-style:normal}

/* ---------- 2. Chaque marché : l'heure limite, le retrait, « Choisir » ---------- */
.cc-marche{display:grid;gap:.2rem;margin-top:.8rem}
.cc-ligne{display:flex;gap:.5rem;margin:0;font-size:.9375rem;line-height:1.4}
.cc-point{flex:none;width:.5rem;height:.5rem;margin-top:.5em;border-radius:50%;background:currentColor}
.cc-ligne--retrait{padding-left:1rem}
.cc-ligne--ferme{font-style:italic}
.cc-choisir{justify-self:start;min-height:2.75rem;margin-top:.4rem;padding:.4rem 1.2rem;border:0;border-radius:.4rem;background:var(--cc-bouton);color:var(--cc-sur-bouton);font-family:inherit;font-size:.875rem;font-weight:800;line-height:1;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cc-marche--choisi .cc-choisir{box-shadow:0 0 0 2px var(--cc-papier),0 0 0 4px var(--cc-bouton)}
.cc-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. La carte : le marché du retrait, le « + », le panier ---------- */
.cc-choix{display:grid;gap:.25rem;max-width:30rem;margin:.4rem 0 1rem}
.cc-choix[hidden]{display:none}
.cc-choix__nom{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cc-choix__menu{box-sizing:border-box;width:100%;min-width:0;min-height:2.75rem;padding:.4rem 1.6rem .4rem .6rem;border:2px solid var(--cc-encre);border-radius:.3rem;background-color:var(--cc-papier);color:var(--cc-encre);font-family:inherit;font-size:.875rem;font-weight:700;line-height:1.2;text-overflow:ellipsis;cursor:pointer}
.cc-produit{display:block;margin-top:.6rem}
.cc-produit[hidden]{display:none}
.cc-pas{display:inline-flex;align-items:center;gap:.5rem}
.cc-pas__plus,.cc-pas__moins{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;font-family:inherit;font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer}
.cc-pas__plus{border:0;background:var(--cc-bouton);color:var(--cc-sur-bouton)}
.cc-pas__moins{border:2px solid currentColor;background:transparent;color:inherit}
.cc-pas__plus:disabled{opacity:.4;cursor:default}
.cc-pas__qte{min-width:1.5rem;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.cc-produit:not(.cc-produit--choisi) .cc-pas__moins,.cc-produit:not(.cc-produit--choisi) .cc-pas__qte{display:none}
.cc-suite{margin:1.2rem 0 0}

.cc-panier{position:fixed;inset:auto 0 0;z-index:60;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:var(--cc-papier);color:var(--cc-encre);border-top:2px dashed var(--cc-filet);box-shadow:0 -.5rem 1.2rem -.6rem rgba(43,33,24,.35)}
.cc-panier[hidden]{display:none}
.cc-panier__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:60rem;margin:0 auto}
.cc-panier .cc-panier__texte{flex:1 1 0;min-width:0;display:grid;gap:.05rem;margin:0;color:var(--cc-encre);font-size:.875rem;line-height:1.3;text-align:left}
.cc-panier .cc-panier__texte b{color:var(--cc-encre);font-family:var(--commande-titre,inherit);font-size:1.0625rem;font-weight:800;white-space:nowrap}
.cc-panier .cc-panier__texte span{color:var(--cc-douce)}
.cc-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.55rem 1.2rem;border-radius:.4rem;background:var(--cc-bouton);color:var(--cc-sur-bouton);font-family:inherit;font-size:1rem;font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap}
body.cc-avec-panier{padding-bottom:9rem}
@media (prefers-reduced-motion:no-preference){.cc-panier:not([hidden]){animation:cc-monte .45s cubic-bezier(.16,1,.3,1)}}
@keyframes cc-monte{from{transform:translateY(100%)}to{transform:none}}

/* ---------- 4. Le billet, juste après la carte ---------- */
.cc-billet{box-sizing:border-box;width:min(100% - 2rem,44rem);margin:2.2rem auto}
.cc-billet .cc-billet__carte{position:relative;padding:1.5rem 1.4rem 1.6rem;border:2px solid var(--cc-encre);border-radius:.6rem;background:var(--cc-papier);color:var(--cc-encre);text-align:left}
.cc-billet .cc-billet__carte :where(p,h2,li,b,span){color:inherit}
.cc-billet .cc-billet__etiquette{display:inline-block;margin:0;padding:.3rem .6rem;border:2px solid var(--cc-fort);border-radius:.3rem;color:var(--cc-fort);font-size:.75rem;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;rotate:-2deg}
.cc-billet .cc-billet__titre{margin:.8rem 0 .5rem;font-family:var(--commande-titre,inherit);font-size:clamp(1.4rem,4.2vw,1.9rem);font-weight:var(--commande-graisse,700);line-height:1.15;letter-spacing:normal;text-transform:var(--commande-casse,none)}
.cc-billet .cc-billet__live{margin:0;font-size:1rem;line-height:1.5}
.cc-billet .cc-billet__garanties{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.9rem 0 0;padding:0;list-style:none;font-size:.9375rem}
.cc-billet .cc-billet__garanties li{margin:0}
.cc-billet .cc-billet__garanties li::before{content:"✓ ";font-weight:800}
.cc-billet .cc-billet__actions{margin:1.1rem 0 0}
.cc-billet .cc-btn{color:var(--cc-sur-bouton)}
body.cc-avec-panier .cc-billet .cc-billet__actions{display:none}

/* ---------- La barre d'appel du téléphone ---------- */
.cc-masque{display:none!important}

/* ---------- Plus rien ne s'ouvre (page gardée en cache, ou rôtisseur en pause) ---------- */
/* Le haut de page garde sa ligne (« Les commandes en ligne sont fermées pour le moment : retrouvez-nous au stand. ») ; le reste disparaît. */
.cc-clos .cc-etape,.cc-clos .cc-sous,.cc-clos .cc-marche,.cc-clos .cc-produit,.cc-clos .cc-choix,.cc-clos .cc-suite,.cc-clos .cc-billet,.cc-clos .cc-panier,.cc-clos [data-cc="bar"]{display:none!important}

/* ---------- Le focus, lisible sur tous les fonds ---------- */
.cc-tampon:focus-visible,.cc-lien:focus-visible,.cc-choisir:focus-visible,.cc-pas button:focus-visible,.cc-btn:focus-visible,.cc-choix__menu:focus-visible,.cc-haut__lien:focus-visible{outline:2px solid var(--cc-encre);outline-offset:2px;box-shadow:0 0 0 2px var(--cc-papier)}
@media (max-width:30rem){.cc-panier .cc-btn{padding:.55rem 1rem}}
.cc-ligne{text-wrap:pretty}

/* ---------- À l'impression : un parcours de commande ne s'imprime pas (le rôtisseur garde sa page) ---------- */
@media print{.cc-haut,.cc-etape,.cc-sous,.cc-marche,.cc-produit,.cc-choix,.cc-suite,.cc-billet,.cc-panier{display:none!important}}