/* jepasseprendre — la feuille des pages publiques : le site de chaque
   commerce, l'annuaire, la page des commerçants.

   Les polices sont servies par le serveur lui-même : passer par Google Fonts
   enverrait l'adresse IP de chaque client à un tiers. Ici, rien ne sort.

   L'idée du dessin : une devanture. Chaque commerce a sa BANNE — le store
   rayé au-dessus de la vitrine — à sa couleur ; tout le reste est calme,
   blanc, lisible sur un téléphone tenu d'une main dans la rue. */
@font-face{font-family:"Bricolage Grotesque";src:url("/polices/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/polices/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/polices/bodoni-moda.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --encre:#14213D;        /* bleu nuit : le texte, les boutons de la plateforme */
  --ticket:#FFC72C;       /* le jaune du ticket de retrait */
  --papier:#FFFFFF;
  --sol:#EEF1F5;
  --trait:#D5DBE3;
  --doux:#566275;
  --alerte:#B3261E;
  --ok:#17693B;
  --banne:#8C1D2B;        /* remplacée par la couleur de chaque commerce */
  --sur-banne:#FFFFFF;
  --enseigne:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --texte:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --large:1120px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font:400 17px/1.5 var(--texte);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--enseigne);font-stretch:85%;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0 0 .8em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ticket);outline-offset:2px}
.cadre{max-width:var(--large);margin:0 auto;padding:0 20px}
.chiffres{font-variant-numeric:tabular-nums}
.discret{color:var(--doux)}
.petit{font-size:14.5px}

/* ---------------------------------------------------------------- boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:10px;background:var(--encre);color:#fff;font-weight:600;text-decoration:none;cursor:pointer}
.bouton:hover{filter:brightness(1.12)}
.bouton[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.bouton.jaune{background:var(--ticket);color:var(--encre)}
.bouton.banne{background:var(--banne);color:var(--sur-banne)}
.bouton.clair{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.bouton.large{width:100%;min-height:54px;font-size:18px}

/* ---------------------------------------------------------------- la banne */
.banne{height:58px;background:repeating-linear-gradient(90deg,var(--banne) 0 30px,#fff 30px 60px);
  -webkit-mask:radial-gradient(15px at 50% 0,#000 97%,#0000) 0 100%/30px 15px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat;
          mask:radial-gradient(15px at 50% 0,#000 97%,#0000) 0 100%/30px 15px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat;
  filter:drop-shadow(0 3px 0 rgba(20,33,61,.12))}
.banne-ombre{filter:drop-shadow(0 4px 3px rgba(20,33,61,.18))}
/* Un salon n'a pas de store rayé : un bandeau plein, plus sobre. */
.theme-salon{--enseigne:"Bodoni Moda","Times New Roman",serif}
.theme-salon h1,.theme-salon h2,.theme-salon h3{font-stretch:100%;letter-spacing:0}
.theme-salon .banne{height:14px;background:var(--banne);-webkit-mask:none;mask:none;filter:none}
.theme-fournil{--papier:#FFFDF8}

/* ---------------------------------------------------------------- l'en-tête d'un commerce */
.devanture{padding:26px 0 22px}
.devanture .cadre{display:grid;gap:22px;grid-template-columns:1fr}
.enseigne{display:flex;align-items:center;gap:16px}
.enseigne img.logo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--banne)}
.enseigne h1{font-size:clamp(38px,9vw,76px);font-weight:800;text-wrap:balance}
.theme-salon .enseigne h1{font-weight:500;font-size:clamp(36px,8vw,68px)}
.metier{margin:10px 0 0;font-size:18px;color:var(--doux)}
.etat{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;font-weight:600}
.etat::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--alerte)}
.etat.ouvert::before{background:var(--ok)}
.coordonnees{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;font-size:16px}
.coordonnees a{text-underline-offset:3px}
.presentation{max-width:62ch;margin:16px 0 0;font-size:18px}
.couverture{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:4px}
@media(min-width:900px){
  .devanture{padding:38px 0 30px}
  .devanture .cadre.avec-photo{grid-template-columns:1.15fr .85fr;align-items:end}
}
.bandeau{margin:0;padding:12px 20px;background:var(--ticket);color:var(--encre);font-weight:600;text-align:center}

/* ---------------------------------------------------------------- la vitrine + le panier */
.boutique{display:grid;gap:0;grid-template-columns:minmax(0,1fr);align-items:start;padding-bottom:110px}
.boutique>div{min-width:0}
@media(min-width:980px){.boutique{grid-template-columns:minmax(0,1fr) 392px;gap:44px;padding-bottom:60px}}
.rayons-nav{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;margin:0 -20px;padding:10px 20px;background:var(--papier);border-bottom:1px solid var(--trait);scrollbar-width:none}
.rayons-nav::-webkit-scrollbar{display:none}
.rayons-nav a{flex:none;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15.5px;color:var(--doux)}
.rayons-nav a:hover,.rayons-nav a.ici{background:var(--sol);color:var(--encre)}
.rayon{padding:26px 0 6px;scroll-margin-top:60px}
.rayon h2{font-size:30px;font-weight:700;padding-bottom:10px;border-bottom:3px solid var(--banne)}
.theme-salon .rayon h2{font-weight:500;border-bottom-width:1px}
.article{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--trait);align-items:start}
.article.avec-photo{grid-template-columns:84px 1fr auto}
.article img.photo{width:84px;height:84px;object-fit:cover;border-radius:6px;grid-row:span 2}
.article h3{font-family:var(--texte);font-stretch:100%;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:0}
.article .desc{margin:3px 0 0;color:var(--doux);font-size:15.5px}
.article .prix{font-family:var(--enseigne);font-stretch:85%;font-weight:700;font-size:22px;white-space:nowrap;text-align:right;line-height:1.1}
.theme-salon .article .prix{font-stretch:100%;font-weight:600}
.article .prix small{display:block;font-family:var(--texte);font-weight:400;font-size:13.5px;color:var(--doux)}
.article .choix{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.article.avec-photo .choix{grid-column:2/-1}
.puce{display:inline-flex;flex-direction:column;align-items:flex-start;min-height:48px;justify-content:center;padding:6px 14px;border:1.5px solid var(--trait);border-radius:10px;background:var(--papier);cursor:pointer;line-height:1.2;text-align:left}
.puce b{font-weight:600}
.puce span{font-size:13.5px;color:var(--doux)}
.puce:hover{border-color:var(--encre)}
.puce.prise{border-color:var(--banne);background:var(--banne);color:var(--sur-banne)}
.puce.prise span{color:inherit;opacity:.85}
.ajouter{min-height:44px;padding:0 16px;border-radius:10px;border:1.5px solid var(--encre);background:transparent;font-weight:600;cursor:pointer}
.ajouter:hover{background:var(--encre);color:#fff}
.compteur{display:inline-flex;align-items:center;border:1.5px solid var(--banne);border-radius:10px;overflow:hidden}
.compteur button{width:44px;height:44px;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer}
.compteur button:hover{background:var(--sol)}
.compteur output{min-width:30px;text-align:center;font-weight:700}

/* ---------------------------------------------------------------- le panier */
.panier{background:var(--papier)}
.panier h2{font-size:28px;font-weight:700}
.panier .bloc{padding:18px 0;border-bottom:1px solid var(--trait)}
.panier .bloc:last-child{border-bottom:0}
.panier h3{font-family:var(--texte);font-stretch:100%;font-size:16px;font-weight:700;letter-spacing:0;margin:0 0 10px}
.ligne{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:7px 0}
.ligne .retirer{width:32px;height:32px;border:0;border-radius:50%;background:var(--sol);cursor:pointer;font-size:18px;line-height:1}
.vide{color:var(--doux)}
.jours,.heures{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}
.heures{flex-wrap:wrap;overflow:visible;max-height:230px;overflow-y:auto}
.jours button,.heures button{flex:none;min-height:44px;padding:0 14px;border:1.5px solid var(--trait);border-radius:10px;background:var(--papier);cursor:pointer;font-weight:600}
.jours button[aria-pressed="true"],.heures button[aria-pressed="true"]{background:var(--ticket);border-color:var(--encre)}
.heures button[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.champ{display:block;margin:0 0 12px}
.champ span{display:block;font-size:15px;font-weight:600;margin:0 0 5px}
.champ input,.champ textarea,.champ select{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--trait);border-radius:10px;background:#fff}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--encre);outline:0;box-shadow:0 0 0 3px var(--ticket)}
.total{display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.total .gros{font-family:var(--enseigne);font-stretch:85%;font-size:26px;font-weight:700}
.erreur{margin:0 0 12px;padding:11px 13px;border-radius:10px;background:#FCE9E7;color:#7A1710;font-weight:600}
.rassure{margin:10px 0 0;font-size:14px;color:var(--doux);text-align:center}

/* Sur un téléphone, le panier est un écran à part qu'ouvre la barre du bas. */
.barre-panier{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--encre);color:#fff}
.barre-panier .resume{flex:1;line-height:1.25}
.barre-panier .resume b{display:block;font-size:19px}
.barre-panier .bouton{min-height:46px}
@media(max-width:979px){
  .panier{position:fixed;inset:0;z-index:30;overflow-y:auto;padding:16px 20px 30px;transform:translateY(100%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
  .panier.ouvert{transform:none;visibility:visible;transition:transform .22s ease}
  .panier .fermer{display:inline-flex}
}
@media(min-width:980px){
  .panier{position:sticky;top:18px;margin-top:26px;padding:20px 22px;border:1.5px solid var(--encre);border-radius:14px;max-height:calc(100vh - 36px);overflow-y:auto}
  .barre-panier{display:none}
  .panier .fermer{display:none}
}
.panier .tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panier .fermer{align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--sol);font-size:22px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.panier{transition:none !important}}

/* ---------------------------------------------------------------- infos pratiques, pied */
.pratique{background:var(--sol);padding:34px 0;margin-top:20px}
.pratique .cadre{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.pratique .cadre{grid-template-columns:1fr 1fr}}
.pratique h2{font-size:26px;font-weight:700;margin-bottom:12px}
.horaires{width:100%;border-collapse:collapse;font-size:16px}
.horaires td{padding:5px 0;border-bottom:1px solid var(--trait)}
.horaires td:last-child{text-align:right}
.horaires tr.auj td{font-weight:700}
.pied{padding:22px 0 34px;font-size:14.5px;color:var(--doux)}
.pied .cadre{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.marque{font-family:var(--enseigne);font-stretch:80%;font-weight:800;font-size:20px;color:var(--encre);text-decoration:none;letter-spacing:-.01em}
.marque i{font-style:normal;background:var(--ticket);padding:0 5px;border-radius:4px;margin:0 1px}

/* ---------------------------------------------------------------- le suivi d'une commande */
.ticket{max-width:560px;margin:34px auto;padding:0 20px}
.ticket .carton{border:2px solid var(--encre);border-radius:14px;overflow:hidden}
.ticket .haut{background:var(--ticket);padding:22px 24px}
.ticket .haut h1{font-size:clamp(30px,7vw,44px);font-weight:800}
.ticket .haut p{margin:8px 0 0;font-size:19px;font-weight:600}
.ticket .corps{padding:20px 24px}
.ticket .numero{font-family:var(--enseigne);font-stretch:80%;font-weight:800;font-size:54px;line-height:1;margin:6px 0 0}
.ticket .decoupe{border:0;border-top:2px dashed var(--encre);margin:0}

/* ---------------------------------------------------------------- l'annuaire et la page d'accueil */
.entete{border-bottom:1px solid var(--trait)}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px}
.entete nav{display:flex;gap:6px;align-items:center}
.entete nav a{padding:9px 13px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15.5px}
.entete nav a:hover{background:var(--sol)}
.accroche{padding:44px 0 36px}
.accroche h1{font-size:clamp(42px,9.5vw,96px);font-weight:800;max-width:13ch;text-wrap:balance}
.accroche p.chapo{max-width:52ch;margin:20px 0 0;font-size:20px;color:var(--doux)}
.recherche{display:grid;gap:10px;grid-template-columns:1fr;margin:26px 0 0;max-width:720px}
@media(min-width:680px){.recherche{grid-template-columns:1fr 1.2fr auto}}
.recherche select,.recherche input{min-height:54px;padding:0 14px;border:1.5px solid var(--encre);border-radius:10px;background:#fff;font-size:18px}
.section{padding:36px 0}
.section h2{font-size:clamp(28px,5vw,40px);font-weight:700;margin-bottom:16px}
.liste-villes{display:flex;flex-wrap:wrap;gap:8px}
.liste-villes a{padding:9px 15px;border:1.5px solid var(--trait);border-radius:999px;text-decoration:none;font-weight:600}
.liste-villes a:hover{border-color:var(--encre)}
.commerces{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:760px){.commerces{grid-template-columns:1fr 1fr;gap:0 40px}}
.commerce{display:grid;grid-template-columns:8px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--trait);text-decoration:none}
.commerce .lisere{border-radius:4px;background:repeating-linear-gradient(180deg,var(--banne) 0 8px,#fff 8px 16px);box-shadow:inset 0 0 0 1px rgba(20,33,61,.08)}
.commerce h3{font-size:25px;font-weight:700}
.commerce:hover h3{text-decoration:underline;text-underline-offset:4px}
.commerce p{margin:4px 0 0;color:var(--doux);font-size:16px}
.commerce .etat{margin-top:8px;font-size:15.5px}

/* ---------------------------------------------------------------- la page des commerçants */
.pro-hero{display:grid;gap:36px;grid-template-columns:1fr;padding:40px 0 30px;align-items:center}
@media(min-width:940px){.pro-hero{grid-template-columns:1.1fr .9fr;padding:56px 0 44px}}
.pro-hero h1{font-size:clamp(40px,7.4vw,78px);font-weight:800;text-wrap:balance}
.pro-hero .chapo{margin:20px 0 26px;font-size:20px;color:var(--doux);max-width:46ch}
.telephone{width:min(100%,340px);margin:0 auto;aspect-ratio:9/18.5;border:10px solid var(--encre);border-radius:38px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(20,33,61,.55)}
.telephone iframe{width:100%;height:100%;border:0}
.prix-affiche{display:grid;gap:22px;grid-template-columns:1fr;padding:30px;border:2px solid var(--encre);border-radius:16px}
@media(min-width:760px){.prix-affiche{grid-template-columns:auto 1fr;gap:40px;align-items:center}}
.prix-affiche .somme{font-family:var(--enseigne);font-stretch:80%;font-weight:800;font-size:clamp(72px,14vw,128px);line-height:.9;white-space:nowrap}
.prix-affiche .somme small{font-size:.24em;font-stretch:100%;font-weight:600;letter-spacing:0}
.prix-affiche ul{margin:0;padding:0;list-style:none;font-size:18px}
.prix-affiche li{padding:9px 0;border-bottom:1px solid var(--trait)}
.prix-affiche li:last-child{border-bottom:0}
.etapes{counter-reset:etape;display:grid;gap:26px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:760px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etapes li{counter-increment:etape;padding-top:14px;border-top:3px solid var(--encre)}
.etapes li::before{content:counter(etape);display:block;font-family:var(--enseigne);font-stretch:80%;font-weight:800;font-size:44px;line-height:1}
.etapes h3{font-size:23px;font-weight:700;margin:8px 0 6px}
.faq details{border-bottom:1px solid var(--trait);padding:14px 0}
.faq summary{font-weight:700;font-size:18.5px;cursor:pointer}
.faq details p{margin:10px 0 0;max-width:70ch}
.fond-encre{background:var(--encre);color:#fff}
.fond-encre .discret{color:#B9C3D4}
.fond-jaune{background:var(--ticket)}
.metiers-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.metiers-liste li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:600}
.capture{display:grid;gap:10px;grid-template-columns:1fr;max-width:560px}
@media(min-width:560px){.capture{grid-template-columns:1fr auto}}
.capture input{min-height:54px;padding:0 14px;border:1.5px solid var(--encre);border-radius:10px;font-size:18px}
.texte-long{max-width:70ch;padding:30px 0 50px}
.texte-long h1{font-size:44px;font-weight:800;margin-bottom:18px}
.texte-long h2{font-size:25px;font-weight:700;margin:26px 0 8px}