:root {
  --bg: #f7f4ee;
  --ink: #2e2a24;
  --muted: #736b5f;
  --line: #ded6c7;
  --accent: #7a4d25;
  --accent-ink: #fff;
  --ok: #2f6f3e;
  --warn: #8a6d1b;
  --err: #a12b2b;
  --card: #fffefa;
  --panel: #ece4d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; font-weight: 600; }

.container { max-width: 1040px; margin: 0 auto; padding: 2rem 1.25rem 3.5rem; }

/* header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.65rem 1.25rem; background: rgba(255, 254, 250, 0.96);
  border-bottom: 1px solid var(--line);
}
.site-header nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-header nav a:not(.btn) { text-decoration: none; color: var(--ink); }
.brand { display: flex; align-items: center; }
.brand img { display: block; width: 128px; height: auto; }
.inline { display: inline; margin: 0; }
button.link {
  background: none; border: none; color: var(--accent);
  font: inherit; cursor: pointer; padding: 0; text-decoration: underline;
}

/* buttons */
.btn {
  display: inline-block; padding: 0.6rem 1.1rem; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  border: 1px solid var(--accent); cursor: pointer; font: inherit;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.55;
}
.btn-ghost { background: transparent; color: var(--accent); }
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.9rem; }
.btn-big { padding: 0.85rem 1.6rem; font-size: 1.15rem; font-weight: 700; border-radius: 10px; box-shadow: 0 4px 14px rgba(46, 42, 36, 0.22); }
.home-signup-line { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0; }
.home-explain { margin: 0 0 2rem; }
.home-steps {
  list-style: none; margin: 0.6rem 0 0.4rem; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem;
  color: var(--ink); font-size: 0.98rem;
}
.home-steps li { display: inline-flex; align-items: center; gap: 0.3rem; }
.home-steps li + li::before { content: "→"; color: var(--accent); font-weight: 700; margin-right: 0.35rem; }
.home-steps .step-ico { height: 1.5rem; width: auto; vertical-align: middle; }
.home-steps .step-ico--mr { height: 1.4rem; }
@media (max-width: 560px) {
  .home-steps { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .home-steps li { flex-wrap: wrap; }
  .home-steps li + li::before { content: "↓"; display: block; width: 100%; margin: 0 0 0.1rem 0.4rem; }
}
.btn-danger { background: var(--err); border-color: var(--err); }
.link-muted { color: var(--muted); font-size: 0.85rem; margin-left: 0.8rem; }

/* messages */
.messages { list-style: none; max-width: 900px; margin: 1rem auto 0; padding: 0 1.2rem; }
.msg { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 0.5rem; border: 1px solid var(--line); }
.msg.success, .state.ok { background: #eaf4ec; border-color: #cfe6d5; color: var(--ok); }
.msg.error, .state.ko { background: #f7e9e9; border-color: #e8cccc; color: var(--err); }
.msg.warning, .state.wait { background: #f7f1df; border-color: #e8ddb8; color: var(--warn); }
.state { padding: 0.6rem 1rem; border-radius: 6px; border: 1px solid var(--line); }

/* home */
.eyebrow {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.8rem;
  text-transform: uppercase;
}

/* home — bandeau panettones */
.home-banner {
  position: relative;
  margin: -2rem -1.25rem 2.25rem;   /* de l'air avant « Prochaine fournée » */
  min-height: 210px;
  max-height: 46vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.home-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 16, 12, 0.8) 0%,
    rgba(20, 16, 12, 0.28) 45%,
    rgba(20, 16, 12, 0.05) 100%
  );
}
.home-banner-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 1.4rem 1.5rem 1.2rem;
  color: #fff;
}
.home-banner-copy .eyebrow { color: #f0d9c4; margin-bottom: 0.5rem; }
.home-banner-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 2.15rem;
  line-height: 1.1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
/* home — bande info */
.home-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.6rem;
  margin: 0 0 2.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}
.home-info span { position: relative; }
.home-info span + span::before {
  content: "·";
  position: absolute;
  left: -0.95rem;
}

/* home — présentation */
.atelier-presentation {
  max-width: 680px;
  margin: 0 0 2.5rem;
}
.atelier-presentation h2 {
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}
.atelier-presentation p {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  text-align: justify;
}

/* home — réalisations (carousel) */
.realisations { margin: 2.5rem 0 1rem; }
.carousel { position: relative; margin-top: 1.25rem; }
.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 0.6rem;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.carousel-slide {
  flex: 0 0 min(72%, 340px);
  margin: 0;
  scroll-snap-align: start;
}
.carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.carousel-slide figcaption {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.carousel-nav {
  position: absolute;
  top: calc(50% - 1.25rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(46, 42, 36, 0.28);
}
.carousel-nav.prev { left: 0.25rem; }
.carousel-nav.next { right: 0.25rem; }
.carousel-nav:hover { filter: brightness(1.08); }
.carousel-nav:active { transform: translateY(-50%) scale(0.94); }

/* fournée + cards */
/* Annonce d'accueil (bakery.Announcement) — au-dessus des fournées.
   Mise en page en deux colonnes quand il y a une photo, une seule sinon :
   un `grid-template-columns` posé pour tous laisserait une colonne vide à
   la place de la photo absente. Sous 700 px, tout repasse en une colonne —
   et on pose `grid-template-columns: 1fr` AVANT la media query, sinon les
   deux blocs se mettraient côte à côte sans jamais revenir à la ligne. */
.annonce {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.3rem;
  align-items: center;
  margin: 0 0 2rem;
  padding: 1.1rem 1.2rem;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #7a4d25);
  border-radius: 10px;
}
.annonce:has(.annonce-photo) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .annonce:has(.annonce-photo) { grid-template-columns: 13rem minmax(0, 1fr); }
}
.annonce-photo {
  display: block; width: 100%; max-height: 11rem;
  object-fit: cover; border-radius: 8px;
}
.annonce-corps h2 { margin: 0.2rem 0 0; font-size: 1.35rem; line-height: 1.25; }
.annonce-texte { margin: 0.5rem 0 0; line-height: 1.6; }
.annonce-texte p { margin: 0 0 0.6rem; }
.annonce-texte p:last-child { margin-bottom: 0; }

/* Vente sur place : le LIEU, puisque c'est tout ce que le client a à retenir.
   Même grammaire visuelle que l'annonce (filet brun à gauche) — c'est la même
   nature d'information : « voilà où ça se passe ». */
.fournee-surplace {
  display: grid;
  gap: 0.2rem;
  margin: 0.9rem 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #7a4d25);
  border-radius: 8px;
  font-size: 1.05rem;
}
.surplace-adr, .surplace-h { color: var(--muted); font-size: 0.95rem; }
.surplace-produits { margin: 0.6rem 0 1rem; padding-left: 1.1rem; line-height: 1.7; }
.surplace-produits .allergens { display: block; font-size: 0.88rem; margin: 0; }
.order-panel.is-surplace { opacity: 1; }

.fournee { margin: 0 0 2.5rem; }
/* mot du boulanger sur la fournée (ProductionPlan.description), sous le titre */
.fournee-desc { max-width: 680px; margin: 0.9rem 0 0.4rem; font-size: 1.02rem; line-height: 1.6; }
.fournee-desc p { margin: 0 0 0.7rem; }
.fournee h2, .space h2 { margin: 0; }
.section-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
}
.section-heading > span,
.fournee-date { color: var(--muted); }
.insta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.insta-link svg { flex: 0 0 auto; }
.insta-link:hover { color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem; box-shadow: 0 1px 2px rgba(46, 42, 36, 0.04);
}
.card h3 { margin: 0 0 0.3rem; }
.card-photo {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: 6px; margin-bottom: 0.6rem; display: block;
  background: var(--line);
}
.card-meta { margin: 0.2rem 0; }
/* le mot du boulanger sur un produit de la fournée (ProductionPlanItem.description) */
.item-desc { font-size: 0.95rem; margin: 0.2rem 0 0.4rem; }
.item-desc p { margin: 0 0 0.3rem; }
.card.is-out { opacity: 0.6; }
.allergens, .avail, .help, .note { color: var(--muted); font-size: 0.9rem; }
.tag { background: var(--err); color: #fff; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.8rem; }
.cta { margin-top: 1rem; }
.empty { color: var(--muted); font-style: italic; }

/* about */
.about { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.about-photo {
  width: 220px;
  max-width: 50vw;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(46, 42, 36, 0.14);
}
.about-body { max-width: 640px; }
.about-body p { margin: 0 0 0.9rem; }
.about-body h2 { margin: 1.75rem 0 0.5rem; }
.about-todo { color: var(--muted); font-size: 0.9rem; }
.about-sign {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  margin-top: 1.25rem;
}

/* forms */
.form-page, .space { max-width: 640px; }
.client-space { max-width: 900px; }
.space-header {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.space-header h1 { margin: 0; }
form label { display: block; margin: 0.8rem 0; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=number], form select {
  display: block; width: 100%; padding: 0.5rem; margin-top: 0.25rem;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff;
}
form input[type=number] { width: 5rem; }
.help.error { color: var(--err); }

.order-panel,
.orders-panel {
  margin-top: 2rem;
}
.order-panel + .order-panel {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.order-products {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
}
.order-product {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 1rem 1.1rem;
  /* [vignette (0 si pas de photo)] [infos] [quantité] */
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, 190px);
  padding: 1rem;
}
.order-product.no-photo {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
}
.order-product.no-photo .order-product-main {
  grid-column: 1;
}
.order-product.no-photo .order-product-side {
  grid-column: 2;
}
.order-product-photo {
  grid-column: 1;
  width: 132px; height: 132px; object-fit: cover;
  border-radius: 6px; display: block;
  background: var(--line);
}
.order-product h3,
.order-product p {
  margin: 0;
}
.order-product-main {
  grid-column: 2;
  min-width: 0;
}
.order-product-main p {
  color: var(--muted);
}
.order-product-side {
  grid-column: 3;
  align-items: flex-end;
  display: grid;
  gap: 0.5rem;
}
.order-product-side label {
  margin: 0;
  width: 100%;
}
.order-product-side label span,
.availability {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
}
.order-product-side select {
  min-height: 42px;
  width: 100%;
}
.order-product.is-out {
  opacity: 0.62;
}
.delivery-choice {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 1rem 0;
  padding: 1rem;
}
.delivery-choice h3 {
  margin: 0 0 0.5rem;
}
.delivery-choice label {
  display: block;
}
.delivery-choice label span {
  display: block;
  margin-bottom: 0.3rem;
}
.delivery-choice select,
.delivery-choice input[type=text] {
  min-height: 44px;
  width: 100%;
}
.delivery-choice .help {
  margin: 0.4rem 0 0;
}

/* --- Sélecteur de point Mondial Relay --- */
.mr-picker {
  margin-top: 0.75rem;
  border-top: 1px dashed var(--line);
  padding-top: 0.75rem;
}
.mr-search {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.mr-search input {
  flex: 1;
  min-height: 44px;
}
.mr-map {
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.mr-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 240px;
  overflow-y: auto;
}
.mr-results button {
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mr-results button:hover {
  border-color: var(--accent);
}
.mr-results button span {
  font-size: 0.88rem;
  color: var(--muted);
}
.mr-gift { margin-top: 0.8rem; border-top: 1px dashed var(--line); padding-top: 0.6rem; }
.mr-gift-toggle { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.mr-gift-fields { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.mr-gift-fields label { display: grid; gap: 0.2rem; }
.mr-gift-fields input { width: 100%; box-sizing: border-box; }
.mr-recap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mr-recap span {
  font-size: 0.9rem;
  color: var(--muted);
}
.pickup-recap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  text-align: left;
}
.promo-badge {
  background: #fff7e6;
  border: 1px solid #f0c674;
  border-radius: 8px;
  color: #7a4d25;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
}
.order-estimate [data-order-discount-row] {
  align-items: baseline;
  color: var(--ok);
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
}
.order-estimate [data-order-discount-row][hidden] {
  display: none;
}
.order-estimate [data-order-discount-row] span {
  color: inherit;
}
.order-estimate [data-order-discount-row] strong {
  font-size: 1rem;
}
.order-summary {
  align-items: center;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1rem;
}
.order-summary p {
  margin: 0;
}
.order-summary strong {
  display: block;
}
.order-estimate {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, auto);
  min-width: 330px;
  padding: 0.55rem 0.75rem;
}
.order-estimate span {
  color: var(--muted);
  display: block;
  font-size: 0.86rem;
}
.order-estimate strong {
  font-size: 1.25rem;
  line-height: 1.1;
  margin-top: 0.1rem;
  white-space: nowrap;
}
.order-estimate .help {
  grid-column: 1 / -1;
  margin: 0;
}
.order-history {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.order-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.order-card header,
.order-actions {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.order-card h3 {
  margin: 0.15rem 0 0;
}
.order-ref {
  color: var(--muted);
  font-size: 0.9rem;
}
.status-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.86rem;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.status-pre_commande { background: #f7f1df; color: var(--warn); }
.status-commande { background: #eef2f6; color: #31506c; }
.status-payee { background: #eaf4ec; color: var(--ok); }
.status-annulee { background: #f7e9e9; color: var(--err); }
.order-lines {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 1rem 0;
  padding: 0.55rem 0;
}
.order-lines li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.25rem 0;
}
.order-facts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 1rem;
}
.order-facts div {
  min-width: 0;
}
.order-facts dt {
  color: var(--muted);
  font-size: 0.86rem;
}
.order-facts dd {
  font-weight: 600;
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
}
.order-actions {
  align-items: center;
  min-height: 42px;
}

/* tables */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--card); }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.9rem; color: var(--muted); }
.order-table input { margin: 0; }

/* footer */
.site-footer {
  border-top: 1px solid var(--line); background: var(--card);
  padding: 1.5rem 1.2rem; text-align: center; color: var(--muted); font-size: 0.9rem;
}
.site-footer img { opacity: 0.7; }
.site-footer-legal { margin: 0.4rem 0 0; font-size: 0.82rem; }
.terms-accept { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.9rem 0; font-size: 0.92rem; }
.terms-accept input { margin-top: 0.25rem; flex: 0 0 auto; }
/* Mon espace — « Être prévenu des fournées » */
.notify-card { margin: 0 0 2rem; }
.notify-row { margin: 0.7rem 0; }
.notify-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.notify-toggle input { width: 1.15rem; height: 1.15rem; margin: 0; }
.install-howto { font-size: 0.92rem; margin: 0.3rem 0 0; }
.install-howto summary { cursor: pointer; color: var(--accent); }
.install-howto p { margin: 0.5rem 0 0; }
.site-footer-legal a { color: var(--muted); }
/* champ piège du formulaire de contact : hors écran, pas display:none (certains robots le respectent) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* pages légales : un texte long et sobre, lisible ; les liens croisés en bas */
.legal .about-body { max-width: 720px; margin: 0 auto; }
.legal h1 { margin-bottom: 1.2rem; }
.legal p strong { display: inline-block; margin-top: 0.6rem; }
.legal .legal-nav { margin-top: 2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.9rem; }

@media (max-width: 560px) {
  .container { padding: 1.25rem 1rem 2.5rem; }
  .site-header { align-items: flex-start; padding: 0.55rem 1rem; }
  .site-header nav { gap: 0.75rem; width: 100%; }
  .brand img { width: 104px; }
  .home-banner {
    margin: -1.25rem -1rem 0;
    min-height: 160px;
    max-height: 38vh;
  }
  .home-banner-copy { padding: 1.15rem 1rem 1rem; }
  .home-banner-copy h1 { font-size: 1.6rem; }
  .atelier-presentation { margin: 0 0 2rem; }
  .atelier-presentation h2 { font-size: 1.35rem; }
  .atelier-presentation p { font-size: 1rem; }
  .carousel-slide { flex-basis: 82%; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .space-header { align-items: flex-start; flex-direction: column; }
  .space-header .btn { width: 100%; text-align: center; }
  .order-product {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .order-product-photo,
  .order-product-main,
  .order-product-side {
    grid-column: 1;
  }
  .order-product-photo {
    width: 100%;
    height: 150px;
  }
  .order-product-side {
    align-items: stretch;
  }
  .order-summary {
    align-items: stretch;
    flex-direction: column;
  }
  .order-estimate {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .order-summary .btn,
  .order-actions .btn {
    text-align: center;
    width: 100%;
  }
  .order-card header,
  .order-actions {
    flex-direction: column;
  }
  .order-facts {
    grid-template-columns: 1fr;
  }
  .about { flex-direction: column; }
  .about-photo { max-width: 70vw; }
}

/* --- Avis clients : formulaire (Mon espace) et vitrine (accueil) --------- */
.stars { color: #d99a2b; letter-spacing: 0.08em; font-size: 1.05rem; }
.review-block { margin-top: 0.8rem; border-top: 1px dashed var(--line); padding-top: 0.6rem; }
.review-block summary { cursor: pointer; font-weight: 600; }
.review-block summary .help { font-weight: 400; margin-left: 0.4rem; }
.review-form { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.review-form textarea { width: 100%; box-sizing: border-box; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
/* Étoiles : 5 radios rendus en sens inverse pour que ~ :checked colore les précédentes */
.star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.1rem; }
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label { font-size: 1.9rem; line-height: 1; color: var(--line); cursor: pointer; padding: 0 0.05rem; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #d99a2b; }
.star-rating input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 4px; }
.reviews { margin-top: 1.5rem; }
.reviews-scroll {
  max-height: 22rem; overflow-y: auto; display: grid; gap: 0.7rem;
  padding: 0.2rem 0.4rem 0.2rem 0; scrollbar-width: thin;
}
.review { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.review-meta { color: var(--muted); font-size: 0.9rem; }
.review p { margin: 0.4rem 0 0; }
.review-photo-field { display: grid; gap: 0.3rem; }
.review-photo-thumb { max-width: 160px; max-height: 120px; border-radius: 6px; object-fit: cover; }
/* Vignette d'avis : hauteur fixe, largeur libre — la photo accompagne le
   texte sans manger la carte (le clic ouvre l'original). */
.review-photo-link { display: inline-block; margin-top: 0.5rem; }
.review-photo {
  display: block; height: 110px; width: auto; max-width: 100%;
  border-radius: 8px; object-fit: cover;
}

/* Sélecteur de langue (pied de page) — discret : on ne change pas de langue
   tous les jours, mais il doit rester trouvable. */

/* ================================================================== */
/* LEFOURNIL.APP — la vitrine de la PLATEFORME (`/`).                 */
/*                                                                    */
/* Charte relevée sur la plaquette : terre cuite, sauge, crèmes. Elle  */
/* est propre à la plateforme et ne doit pas déteindre sur le site     */
/* d'un fournil, qui a son brun « levain » — d'où le préfixe `pf-` et  */
/* des variables redéclarées ici, jamais sur `:root`.                  */
/* ================================================================== */
.pf-hero, .pf-parcours, .pf-benefices, .pf-manifeste, .pf-demo,
.pf-gains, .pf-etapes-ouverture, .pf-tarifs, .pf-faq, .pf-demande {
  --terre: #b73f1d;          /* le rouge du titre et du « .APP »        */
  --terre-clair: #ce5e3c;    /* les pastilles                           */
  --sauge: #62705b;
  --sauge-clair: #8a9a83;
  --creme: #fbf7f1;
  --creme-chaud: #f3e7d3;
  --peche: #f7dcbb;
  --encre: #1f1c19;
  --encre-douce: #6b6257;
}

/* --- Bandeau : le logo de la plaquette ----------------------------- */
.brand--plateforme img { width: 220px; height: auto; }
@media (max-width: 520px) { .brand--plateforme img { width: 165px; } }

/* --- Sur-titres en capitales espacées (comme la plaquette) --------- */
.pf-eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--encre-douce);
  max-width: 26rem;
  line-height: 1.6;
}
.pf-eyebrow--sombre { color: var(--terre); max-width: none; }

/* --- Bandeau d'ouverture ------------------------------------------- */
/* Comme la brochure : texte sombre sur crème, la bande centrale au milieu,
   les boutons dessous. Pas de photo assombrie derrière du blanc — le titre
   « Plus de pain, moins d'administratif » est noir et terre cuite sur clair,
   c'est ce qui en fait la signature. */
.pf-hero {
  background: linear-gradient(180deg, #f7efe3 0%, var(--creme-chaud) 100%);
  border-radius: 14px;
  padding: 2.2rem 1.7rem 1.8rem;
  margin: 0 0 2.6rem;
}
.pf-titre {
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 7.2vw, 3.7rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.pf-titre span { display: block; }
.pf-titre-1 { color: var(--terre); }
.pf-titre-2 { color: var(--encre); }
.pf-hero-sub {
  color: var(--encre);
  font-size: clamp(1.02rem, 2.6vw, 1.26rem);
  line-height: 1.45;
  margin: 0 0 1.6rem;
}

/* La bande de la plaquette. `aspect-ratio` réserve sa place avant le
   chargement : sans lui, tout ce qui suit sursaute quand l'image arrive. */
.pf-hero-bande {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1055 / 416;
  border-radius: 10px;
  margin: 0 0 1.6rem;
  box-shadow: 0 6px 22px rgba(31, 28, 25, 0.13);
}

.pf-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 0.7rem; }
.pf-hero-cta .btn { background: var(--terre); border-color: var(--terre); }
.pf-hero-cta .btn-ghost {
  background: transparent;
  color: var(--terre);
  border-color: var(--terre);
}
.pf-hero-note { margin: 0; color: var(--encre-douce); font-size: 0.9rem; }

/* --- Titres de section --------------------------------------------- */
.pf-parcours h2, .pf-benefices h2, .pf-manifeste h2, .pf-demo h2,
.pf-gains h2, .pf-pro h2, .pf-etapes-ouverture h2, .pf-tarifs h2, .pf-faq h2,
.pf-demande h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--encre);
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

/* --- Le parcours en six étapes (le ruban de la plaquette) ---------- */
.pf-parcours { margin: 3rem 0; }
.pf-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
@media (min-width: 640px) { .pf-etapes { grid-template-columns: repeat(3, 1fr); } }
/* Neuf cartes depuis l'assistant (24/10/2026) : trois lignes de trois dès
   la tablette — quatre colonnes laissaient une carte seule. Sur téléphone,
   deux colonnes, et la neuvième prend la ligne entière plutôt que de rester
   orpheline à gauche. */
@media (max-width: 639px) {
  .pf-etapes > .pf-etape:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.pf-etape {
  background: var(--creme);
  border-radius: 12px;
  padding: 1.1rem 0.8rem;
  text-align: center;
  position: relative;
}
/* La flèche entre deux étapes, comme sur la plaquette — masquée dès que la
   grille se replie, où elle pointerait vers le vide. */
@media (min-width: 980px) {
  .pf-etape + .pf-etape::before {
    content: "→";
    position: absolute;
    left: -0.78rem;
    top: 2.3rem;
    color: var(--terre);
    font-weight: 700;
  }
  /* Le début d'une ligne n'a personne à sa gauche : pas de flèche. */
  .pf-etape:nth-child(4n+1)::before { content: none; }
}
/* La carte de la boutique en ligne : cliquable (elle mène au détail), un
   liseré à la couleur du site et « Nouveau ». */
.pf-etape--boutique { padding: 0; box-shadow: inset 0 0 0 2px var(--terre); }
.pf-etape-lien {
  display: block;
  height: 100%;
  padding: 1.1rem 0.8rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.pf-etape-lien:hover, .pf-etape-lien:focus-visible { background: var(--peche); }
.pf-etape-nouveau {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--terre);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pf-etape-detail {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--terre);
}
.pf-pastille {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  margin: 0 auto 0.7rem;
  border-radius: 50%;
}
.pf-pastille svg { width: 1.6rem; height: 1.6rem; }
.pf-pastille--peche { background: var(--peche); color: var(--terre); }
.pf-pastille--terre { background: var(--terre-clair); color: #fff; }
.pf-pastille--sauge { background: var(--sauge-clair); color: #fff; }
.pf-pastille--sauge-fonce { background: var(--sauge); color: #fff; }
.pf-etape h3 {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
}
.pf-etape p { margin: 0; font-size: 0.87rem; color: var(--encre-douce); line-height: 1.4; }

/* --- Les trois bénéfices ------------------------------------------- */
.pf-benefices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  background: var(--creme-chaud);
  border-radius: 14px;
  padding: 1.6rem 1.4rem;
  margin: 2.4rem 0 3rem;
}
@media (min-width: 820px) { .pf-benefices { grid-template-columns: repeat(3, 1fr); } }
.pf-benefice { display: flex; gap: 0.9rem; align-items: flex-start; }
.pf-benefice-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #fff;
  color: var(--terre);
}
.pf-benefice-ico svg { width: 1.5rem; height: 1.5rem; }
.pf-benefice h3 {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre);
}
.pf-benefice p { margin: 0; color: var(--encre-douce); font-size: 0.92rem; line-height: 1.45; }

/* --- Manifeste ----------------------------------------------------- */
.pf-manifeste { background: var(--creme); border-radius: 14px; padding: 1.7rem 1.5rem; margin: 3rem 0; }
.pf-manifeste p { margin: 0; font-size: 1.05rem; color: var(--encre); }

/* --- Démonstration : la feuille de pesée --------------------------- */
.pf-demo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
  margin: 3rem 0;
}
@media (min-width: 820px) { .pf-demo { grid-template-columns: 1fr 1fr; } }
.pf-demo-texte p { margin: 0 0 0.8rem; color: var(--encre); }
.pf-demo-fig { margin: 0; }
.pf-demo-fig svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(31, 28, 25, 0.16);
}
.pf-demo-fig figcaption {
  margin-top: 0.6rem;
  color: var(--encre-douce);
  font-size: 0.87rem;
  font-style: italic;
}

/* --- Vendre aux professionnels -------------------------------------- */
/* Elle réutilise `.pf-gains-grid` et `.pf-gain` : la même forme que la section
   voisine, et donc rien de plus à tenir d'accord. Seuls le titre et le chapeau
   lui sont propres. */
.pf-pro { margin: 3rem 0; }
.pf-pro-intro {
  max-width: 48rem;
  margin: 0 0 1.4rem;
  color: var(--encre-douce);
}

/* --- Ce qu'on arrête de faire -------------------------------------- */
.pf-gains { margin: 3rem 0; }
.pf-gains-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 620px) {
  .pf-gains-grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
}
.pf-gain {
  background: #fff;
  border: 1px solid #e8dfd1;
  border-left: 3px solid var(--terre);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}
.pf-gain h3 { margin: 0 0 0.4rem; font-size: 1.02rem; font-weight: 700; color: var(--terre); }
.pf-gain p { margin: 0; color: var(--encre-douce); }

/* --- Le déroulé d'ouverture ---------------------------------------- */
.pf-etapes-ouverture { margin: 3rem 0; }
.pf-etapes-liste {
  list-style: none;
  counter-reset: pfetape;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 760px) { .pf-etapes-liste { grid-template-columns: repeat(4, 1fr); } }
.pf-etapes-liste li { counter-increment: pfetape; position: relative; padding-top: 2.5rem; }
.pf-etapes-liste li::before {
  content: counter(pfetape);
  position: absolute;
  top: 0;
  left: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--terre);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.pf-etapes-liste h3 { margin: 0 0 0.3rem; font-size: 1.02rem; color: var(--encre); }
.pf-etapes-liste p { margin: 0; color: var(--encre-douce); }

/* --- Tarifs -------------------------------------------------------- */
.pf-tarifs { margin: 3rem 0; }
.pf-tarifs-intro { margin: 0 0 1.5rem; color: var(--encre); }
.pf-tarifs-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
@media (min-width: 760px) { .pf-tarifs-grid { grid-template-columns: repeat(3, 1fr); } }
.pf-tarif {
  background: #fff;
  border: 1px solid #e8dfd1;
  border-radius: 12px;
  padding: 1.5rem 1.2rem 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* L'offre mise en avant se distingue par la couleur et l'élévation, pas par
   la taille : trois cartes de hauteurs différentes se lisent mal au doigt. */
.pf-tarif--vedette {
  border-color: var(--terre);
  border-width: 2px;
  box-shadow: 0 6px 22px rgba(183, 63, 29, 0.16);
}
.pf-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.2rem;
  margin: 0;
  background: var(--terre);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}
.pf-tarif h3 {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
}
.pf-prix {
  margin: 0 0 0.9rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--terre);
}
.pf-prix span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
}
.pf-tarif-points {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  color: var(--encre-douce);
  flex: 1 1 auto;
}
.pf-tarif-points li { padding-left: 1.35rem; position: relative; margin-bottom: 0.35rem; }
.pf-tarif-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sauge);
  font-weight: 700;
}
.pf-tarif .cta { margin: 0; }
.pf-tarif .btn { background: var(--terre); border-color: var(--terre); }
.pf-tarif .btn-ghost { background: transparent; color: var(--terre); }

.pf-parrainage {
  margin: 1.6rem 0 0;
  background: var(--creme-chaud);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
}
.pf-parrainage h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--encre); }
.pf-parrainage p { margin: 0 0 0.6rem; color: var(--encre); }
.pf-parrainage p:last-child { margin-bottom: 0; }
/* La contrepartie s'écrit en plus petit, mais elle s'écrit : une remise dont
   on cache la condition se paie plus tard, en confiance perdue. */
.pf-parrainage-honnete { color: var(--encre-douce); font-size: 0.93rem; }

/* --- Questions ----------------------------------------------------- */
.pf-faq { margin: 3rem 0; }
.pf-q {
  background: #fff;
  border: 1px solid #e8dfd1;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
}
.pf-q summary { cursor: pointer; font-weight: 700; list-style: none; color: var(--encre); }
.pf-q summary::-webkit-details-marker { display: none; }
.pf-q summary::before { content: "＋"; color: var(--terre); font-weight: 700; margin-right: 0.5rem; }
.pf-q[open] summary::before { content: "－"; }
.pf-q p { margin: 0.7rem 0 0; color: var(--encre-douce); }

/* --- Demande d'ouverture ------------------------------------------- */
.pf-demande { background: var(--creme-chaud); border-radius: 14px; padding: 1.9rem 1.5rem; margin: 3rem 0; }
.pf-demande-intro { margin: 0 0 1.3rem; color: var(--encre); }
.pf-form { max-width: 34rem; }
.pf-champ { margin: 0 0 1rem; }
.pf-form label { display: block; font-weight: 700; margin-bottom: 0.25rem; color: var(--encre); }
.pf-form input, .pf-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.62rem 0.78rem;
  border: 1px solid #ded2be;
  border-radius: 7px;
  background: #fff;
  color: var(--encre);
  font: inherit;
}
.pf-form input:focus, .pf-form textarea:focus {
  outline: 2px solid var(--terre);
  outline-offset: 1px;
}
.pf-form .btn { background: var(--terre); border-color: var(--terre); }
.pf-aide { display: block; color: var(--encre-douce); font-size: 0.87rem; margin-top: 0.2rem; }
.pf-form ul.errorlist { margin: 0.3rem 0 0; padding-left: 1.1rem; color: var(--err); font-size: 0.9rem; }
.pf-rassure { color: var(--encre-douce); font-size: 0.9rem; margin: 0; }
/* Champ piège : hors écran plutôt que `display:none`, que certains robots
   savent détecter. `aria-hidden` le retire des lecteurs d'écran. */
.pf-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Page « Trouver une boulangerie » ------------------------------ */
.pf-fournils { margin: 2rem 0 3rem; }
.pf-fournils h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.5rem; }
.pf-fournils-intro { margin: 0 0 1.5rem; color: var(--muted); }

/* Aperçu du boulanger : sa boutique n'est pas encore en ligne et lui seul la
   voit. Bandeau voyant sur toutes les pages — se croire en ligne quand on ne
   l'est pas est la confusion à éviter. */
.apercu-bandeau {
  margin: 0;
  padding: 0.6rem 1.25rem;
  background: var(--warn);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

/* La chaîne « tout au même endroit » : ce que l'outil réunit, dans l'ordre
   où un fournil le vit. Une puce terre cuite plutôt qu'un tiret : elle relie
   les éléments sans faire liste de courses. */
.pf-chaine { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.pf-chaine li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  color: var(--encre-douce);
  line-height: 1.45;
}
.pf-chaine li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--terre);
}
.pf-chaine strong { color: var(--encre); }

/* Bouton d'impression des pages légales : un contrat doit pouvoir sortir sur
   papier. Retiré de l'impression elle-même — un bouton imprimé ne sert à
   rien et fait du bruit sur un document qui engage. */
.legal-print {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}
.legal-print:hover { color: var(--ink); }
@media print {
  .legal-print, .site-header nav, .legal-nav a { display: none !important; }
  .legal, .about-body { max-width: none; }
}


/* Mentions d'étiquette sur une carte produit : discrètes sous la photo.
   Le client lit d'abord la photo et le prix ; la liste d'ingrédients doit
   être là sans écrire, pas se disputer la place avec eux.

   `.allergens` partageait la règle de `.avail`/`.help`/`.note` (0,9 rem) et
   ressortait donc PLUS GROS que les ingrédients juste au-dessus — ce qui
   faisait lire deux blocs au lieu d'un. Même taille, même italique : c'est
   une seule mention, celle de l'étiquette. Seule la couleur distingue
   l'allergène, et c'est suffisant. */
.mentions,
.allergens {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  font-style: italic;
}
.mentions { color: var(--muted); }
.surplace-produits .mentions,
.surplace-produits .allergens { display: block; }


/* Donner son avis depuis l'accueil, sans compte.

   Première version : un `<details>` replié, sous la liste des avis. Le
   boulanger ne l'a pas trouvé — et il avait raison : la liste défile sur
   22 rem, donc le repli n'arrivait à l'écran qu'après l'avoir parcourue,
   et une ligne de texte ne se lit pas comme un bouton. Le formulaire est
   maintenant déplié, et un vrai bouton le vise depuis l'en-tête de
   section, qui lui est toujours visible. */
/* Au-dessus des fournées, mais REPLIÉ : il se voit sans pousser le pain vers
   le bas. Ce qui avait échoué deux fois, ce n'était pas le repli — c'était sa
   place (sous une liste qui défile sur 22 rem) et son allure (une ligne de
   texte). Ici la poignée est une barre pleine largeur, dessinée comme un
   bouton, avec la phrase qui lève l'objection. */
.avis-donner {
  /* Le bandeau remonte de 2 rem (`margin-top: -2rem`) et colle ce qui le
     suit. Il « mordait » sur la barre d'avis, qui est maintenant le premier
     bloc de la page. */
  margin: 1.6rem 0;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #7a4d25);
  border-radius: 10px;
}
.avis-donner > summary {
  cursor: pointer;
  padding: 0.75rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  list-style: none;          /* la flèche native, remplacée par la nôtre */
}
.avis-donner > summary::-webkit-details-marker { display: none; }
.avis-donner-titre { font-weight: 700; color: var(--accent); font-size: 1.05rem; }
.avis-donner-sous { color: var(--muted); font-size: 0.88rem; }
/* Le chevron : il dit que ça s'ouvre, et il pivote à l'ouverture. */
.avis-donner > summary::after {
  content: "›";
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  transition: transform .15s ease;
}
.avis-donner[open] > summary::after { transform: rotate(90deg); }
.avis-donner[open] > summary { border-bottom: 1px solid var(--line); }
.avis-donner > form { padding: 0 1.1rem 0.4rem; }
.avis-donner form { margin-top: 0.8rem; max-width: 34rem; }
.avis-donner p { margin: 0 0 0.9rem; }
.avis-donner label { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.avis-donner input[type="text"],
.avis-donner textarea { width: 100%; }
.avis-note { border: 0; padding: 0; margin: 0 0 0.6rem; }
.avis-note legend { font-weight: 600; padding: 0; margin-bottom: 0.2rem; }
/* Champ piège : hors de l'écran plutôt que `display:none` — certains robots
   ignorent ce qui est explicitement masqué, et le remplissent quand même. */
.pot-de-miel {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Commande déposée au dépôt : le client peut venir la chercher. L'information
   la plus utile de la page ce jour-là — elle se voit sans être criarde. */
.livree {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  color: #2f7a3d;
}

/* ---------------------------------------------------------------------------
   Commandes récurrentes (espace professionnel)

   Le reste de l'espace pro n'a pas de CSS propre : il se contente des classes
   publiques. Cet écran en demande, et pour une raison précise — chaque ligne
   porte un formulaire (« Arrêter »), et sans mise en page chaque formulaire
   occupe sa propre ligne : la liste devient illisible, surtout sur un
   téléphone, là où le boulanger et ses clients la consultent.
   --------------------------------------------------------------------------- */
.pro-recur-intro { color: var(--muted); max-width: 46rem; }

.pro-recur-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.pro-recur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  margin-bottom: 0.6rem;
}

/* Arrêtée : plus discrète, mais JAMAIS illisible — c'est encore une
   information, et la date d'effet est ce qu'on vient y lire. */
.pro-recur.est-arretee { background: var(--panel); }

.pro-recur-body { min-width: 0; }
.pro-recur-quoi { margin: 0; }
.pro-recur-quand { margin: 0.15rem 0 0; color: var(--muted); }
.pro-recur-arret { margin: 0.15rem 0 0; color: var(--warn); font-weight: 600; }

.pro-recur-actions form { margin: 0; }

.pro-recur-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

/* Un `grid-cols-1` explicite AVANT le premier `@media` : sans classe de
   colonnes à la largeur de départ, les champs se rangent côte à côte sans
   retour à la ligne — le piège Tailwind déjà payé côté admin, et il vaut
   aussi en CSS écrite à la main. */
@media (min-width: 40rem) {
  .pro-recur-form { grid-template-columns: 1fr 1fr; }
  .pro-recur-form button { grid-column: 1 / -1; justify-self: start; }
}

.pro-recur-semaine { margin-bottom: 1.25rem; }

.pro-recur-figee {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Espace professionnel : l'état d'une demande

   Ce qui a été refusé ou modifié doit se lire d'un coup d'œil, et rester
   LISIBLE : une ligne non retenue est encore une information — c'est ce que
   le client vient vérifier.
   --------------------------------------------------------------------------- */
.pro-ligne-refusee { color: var(--muted); text-decoration: line-through; }

.pro-ligne-modifiee,
.pro-order-origine {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--warn);
}

.pro-order-origine { color: var(--muted); }

/* « Déjà prévu par tes récurrences » : un rappel, pas une alerte — d'où le
   panneau neutre et non la couleur d'avertissement. */
.pro-deja-prevu {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.pro-deja-prevu p { margin: 0; }
.pro-deja-prevu ul { margin: 0.35rem 0; padding-left: 1.2rem; }
.pro-deja-prevu-note { color: var(--muted); font-size: 0.9em; }

/* ---------------------------------------------------------------------------
   Accueil : le bloc « Vous êtes un professionnel ? »

   Il n'est rendu que si le fournil a composé un catalogue professionnel (cf.
   `pro_ouvert` dans la vue) : une section qui promet un service que les
   données ne permettent pas est pire qu'une section absente.
   --------------------------------------------------------------------------- */
.home-pro {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.home-pro-intro { max-width: 46rem; color: var(--muted); }
.home-pro-cta { margin: 0.9rem 0 0; }

/* `.home-pro-points` et `.home-pro-cta .help` ont été SUPPRIMÉES le
   14/10/2026 avec les quatre puces qu'elles habillaient, et non juste laissées
   là « au cas où » : une règle que plus aucun gabarit n'emploie est du code
   mort, et elle fait croire au lecteur suivant que la section a encore une
   grille. Même raison que la méthode `clients_summary`, retirée du code et pas
   seulement de `list_display`. Le détail des capacités pro vit désormais sur la
   vitrine de la plateforme (`.pf-pro`). */

/* ---------------------------------------------------------------------------
   L'astuce du boulanger, sur une carte de fournée

   Son avatar à gauche, son conseil à droite : une astuce signée se lit comme
   un conseil, une astuce anonyme comme une notice. Sans avatar, le texte
   occupe toute la largeur — l'astuce ne dépend pas de l'image.
   --------------------------------------------------------------------------- */
.item-astuce {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--panel);
}

.item-astuce-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.item-astuce-mot { min-width: 0; }
.item-astuce-mot p { margin: 0 0 0.3rem; }
.item-astuce-mot p:last-child { margin-bottom: 0; }

.item-astuce-titre {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.92em;
}

/* --- Choix de langue de la vitrine de la plateforme (web.langue_vitrine) --
   Deux drapeaux et leur code, dans le bandeau. La langue active est
   soulignée et n'est pas un lien ; l'autre se clique. */
.pf-langues { display: inline-flex; align-items: center; gap: .35rem; }
.pf-langue {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .35rem; border-radius: 6px; font-size: .85rem;
  border: 1px solid transparent; line-height: 1;
}
.pf-langue svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.pf-langue.est-active { border-color: var(--accent, #7a4d25); font-weight: 600; }
a.pf-langue:not(.btn) { opacity: .75; }
a.pf-langue:not(.btn):hover { opacity: 1; }

/* --- Boutique (chantier boutique, 22/10/2026) ------------------------ */
.boutique-form h2 { margin-top: 1.5rem; }
.boutique-semaine { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.boutique-semaine {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem .8rem; border: 1px solid var(--line, #e5dccf); border-radius: 8px;
}
.boutique-semaine.is-out { opacity: .55; }
.boutique-semaine .help { margin-left: auto; }
.boutique-compte { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .boutique-compte { grid-template-columns: 1fr 1fr; } }
.boutique-compte label { display: flex; flex-direction: column; gap: .25rem; }

/* La page boutique : le texte sous le grand bandeau (22/10/2026) */
.boutique-texte { max-width: 720px; margin: 0 0 1.75rem; }

/* « Frais d'expédition offerts » sous un produit (22/10/2026) : en évidence */
.port-offert {
  display: inline-block; margin: 0.35rem 0; padding: 0.2rem 0.6rem;
  background: #fdf1df; color: #8a4b0f; border: 1px solid #f0c98f;
  border-radius: 999px; font-weight: 700; font-size: 0.9rem;
}

/* Bandeau sans texte (la photo porte son propre titre) et titre masqué à
   l'œil mais lu par les lecteurs d'écran (22/10/2026) */
/* L'image ENTIÈRE, sur TOUTE la largeur du bandeau : elle est composée par
   le boulanger, avec son titre dedans — la rogner comme le bandeau de
   l'accueil (object-fit: cover dans une hauteur bornée) coupait l'image et le
   titre (22/10/2026). Sa hauteur suit donc sa proportion : c'est le FORMAT de
   l'image qui la règle (2080 × 600 px ≈ 300 px de haut sur ordinateur).
   Un plafond de hauteur a été essayé, puis un fond flou pour combler les
   côtés : le premier laissait la bande à moitié vide, le second ne plaisait
   pas. */
.home-banner--image-seule {
  display: block;
  min-height: 0;
  max-height: none;
}
.home-banner--image-seule > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}
.home-banner--image-seule::after { display: none; }
.visuellement-masque {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* En-tête COMPACT de la boutique (22/10/2026) : petit logo, deux fois moins
   haut que l'en-tête des autres pages. La hauteur est celle du LOGO, donc on
   la fixe et la largeur suit — un logo allongé reste lisible. */
.site-header--compact { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.site-header--compact .brand img { width: auto; height: 64px; max-width: 220px; object-fit: contain; }
@media (max-width: 560px) {
  .site-header--compact .brand img { width: auto; height: 46px; }
}