/* ─────────────────────────────────────────────────────────────────────────
   Achat groupé de panneaux — « Propriété et voirie privées »

   Conventions du thème (cf. cdt.css / fermage.css) : tokens uniquement, pas
   de bloc prefers-color-scheme (le site n'a pas de thème sombre), cartes et
   tableaux sur --surface-* + bordure 1px --surface-high, rayon 1rem.
   ───────────────────────────────────────────────────────────────────────── */

/* ─ Héro ─────────────────────────────────────────────────────────────────── */
.apg-hero__btn { margin-top: 1.5rem; }

/* ─ Présentation + fenêtre de commande ───────────────────────────────────── */
/* Deux colonnes : la prose respire, l'encadré de dates reste visible en haut
   de page (c'est l'information que le membre vient chercher). */
.apg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.apg-intro__prose { min-width: 0; }
.apg-intro__prose .qsn-section__title { margin-bottom: 1rem; }

/* ─ Crédit fournisseur (Contact Forestier) ───────────────────────────────── */
.apg-supplier {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--surface-high, #ece8e0);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.apg-supplier__logo {
  flex: 0 0 auto;
  width: 8.5rem;
  height: auto;
  /* Le JPEG a un fond blanc : la pastille le raccorde au fond crème de la
     section --alt sans avoir à détourer le fichier. */
  padding: 0.5rem 0.75rem;
  background: var(--surface-lowest, #fff);
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 0.5rem;
}
.apg-supplier__caption {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted, #6f6a61);
}

/* ─ Fenêtre de commande ──────────────────────────────────────────────────── */
/* Le statut n'est plus porté par un filet de couleur (parti pris « académique » :
   aucune barre latérale sur cette page) mais par la pastille et le libellé. */
.apg-window {
  --apg-status: var(--on-surface-muted, #6f6a61);
  position: sticky;
  top: 8rem;
  padding: 1.5rem;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-lowest, #fff);
}
.apg-window--open   { --apg-status: var(--primary, #00662c); }
.apg-window--coming { --apg-status: var(--secondary, #bd7419); }
.apg-window--closed { --apg-status: var(--on-surface-muted, #6f6a61); }

.apg-window__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apg-status);
}
.apg-window__dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.apg-window__dates {
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--surface-high, #ece8e0);
  display: grid;
  gap: 1rem;
}
.apg-window__date { margin: 0; }
.apg-window__date dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-window__date dd {
  margin: 0.3rem 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--on-surface, #1d1c17);
}

.apg-window__note {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-high, #ece8e0);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-window__cta { margin-top: 1.25rem; }

/* ─ Types de panneaux ────────────────────────────────────────────────────── */
/* Colonnes explicites plutôt qu'auto-fit : avec quatre panneaux, auto-fit
   tombait à trois colonnes dans la bande 1024-1300px (où theme.css élargit
   --container-gutter à 10rem et resserre le contenu à ~960px), laissant une
   carte orpheline sur une deuxième ligne. 4 ou 2 colonnes, jamais 3. */
.apg-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 1300px) {
  .apg-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .apg-panels { grid-template-columns: 1fr; }
}

.apg-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-lowest, #fff);
}

/* object-fit: contain — ce sont des photos produit de formats différents
   (30×40 paysage, 25×25 carré) : les recadrer amputerait le texte du panneau.

   HAUTEUR FIXE, et surtout PAS aspect-ratio : aspect-ratio ne borne pas la
   boîte, il ne fait que lui donner une taille préférée. Le contenu peut la
   dépasser, et « max-height: 100% » ne sait pas se résoudre contre une hauteur
   encore déduite du contenu — le panneau carré « Passage toléré » gonflait donc
   sa boîte et décalait son titre vers le bas. Une hauteur définie règle les
   deux : max-height a une référence, et les quatre médias sont identiques. */
.apg-panel__media {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(11rem, 16vw, 14rem);
  padding: 1rem;
  background: var(--surface-low, #f8f3eb);
  border-bottom: 1px solid var(--surface-high, #ece8e0);
}
/* Boîte définie explicitement, pour deux raisons cumulées :
   1. en élément de grille, « max-height: 100% » se résout contre la zone de
      grille — indéfinie pour Chrome ici — donc la contrainte tombait à « none »
      et le panneau carré débordait (210px dans 192px) ;
   2. en absolu, « width/height: auto » sur un élément REMPLACÉ prend la taille
      intrinsèque de l'image et ignore les décalages droite/bas (règle des
      remplacés), donc inset seul ne l'étire pas non plus.
   width/height chiffrés = boîte réellement définie : object-fit: contain entre
   enfin en jeu et l'image est toujours entière, jamais rognée. Les 100% portent
   sur la boîte de padding du média, d'où le retrait de 2 × l'inset.
   Le placeholder « Visuel à venir », lui, reste centré par la grille. */
.apg-panel__img {
  position: absolute;
  inset: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  object-fit: contain;
}
.apg-panel__img-placeholder {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-muted, #6f6a61);
}

.apg-panel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}
/* Deux lignes réservées au titre : sur une grille 4 colonnes tous les titres
   tiennent en 2 lignes, donc les descriptions démarrent à la même hauteur. */
.apg-panel__title {
  margin: 0;
  min-height: calc(1.05rem * 1.3 * 2);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--on-surface, #1d1c17);
}
.apg-panel__desc {
  flex: 1 1 auto;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-panel__desc p { margin: 0; }
/* Pied de carte, ancré en bas par la croissance de .apg-panel__desc.
   min-height = 2 lignes réservées, pour la même raison que le titre : la ligne
   « FR/NL ET FR/ALLEMAND — 30 × 40 CM » s'enroule alors que les autres tiennent
   sur une seule, ce qui remontait son filet de 20px par rapport aux voisines. */
.apg-panel__meta {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-high, #ece8e0);
  min-height: calc(0.72rem * 1.4 * 2 + 0.75rem);
  line-height: 1.4;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary, #00662c);
}

/* ─ Tableaux (caractéristiques + tarifs) ─────────────────────────────────── */
.apg-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-lowest, #fff);
}

.apg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.apg-table th,
.apg-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--surface-high, #ece8e0);
}
/* En-tête plein, pas teinté : --surface-low est exactement le fond de la
   section --alt qui porte ces tableaux, donc un thead sur --surface-low n'a
   rien contre quoi se détacher et paraît « transparent ». Aplat de vert de
   marque + texte blanc : la bande se lit comme un en-tête, sans filets
   verticaux (convention des tableaux scientifiques : règles horizontales
   seulement). */
.apg-table thead th {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary, #00662c);
  border-bottom: 0;
  vertical-align: bottom;
  /* nowrap — sans quoi le libellé long passe sur deux lignes et le court reste
     sur une, ce qui désaligne visuellement les deux groupes. */
  white-space: nowrap;
}
/* Ligne du haut (tarifs) : les deux familles de panneaux, centrées sur leur
   paire de colonnes. */
.apg-table thead th[colspan] {
  text-align: center;
}
/* Ligne du bas (prix / port) : même aplat éclairci d'un voile blanc — un
   dégradé plutôt qu'une couleur en dur, pour rester dérivé de --primary si la
   couleur de marque change. */
.apg-table--pricing thead tr:last-child th {
  background-image: linear-gradient( rgba( 255, 255, 255, 0.14 ), rgba( 255, 255, 255, 0.14 ) );
  font-weight: 600;
}
.apg-table tbody tr:last-child th,
.apg-table tbody tr:last-child td { border-bottom: 0; }
.apg-table tbody tr:hover th,
.apg-table tbody tr:hover td { background: var(--surface-low, #f8f3eb); }

.apg-table__rowhead {
  font-weight: 600;
  color: var(--on-surface, #1d1c17);
  white-space: nowrap;
}
.apg-table td { color: var(--on-surface-muted, #6f6a61); }
.apg-table__price {
  font-weight: 700;
  color: var(--on-surface, #1d1c17);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.apg-table--pricing td { white-space: nowrap; }

/* Largeurs fixées sur les caractéristiques : en répartition automatique la
   colonne « Propriété et voirie privées » absorbait la largeur de la valeur
   « Couleurs » (la plus longue) et étranglait la colonne voisine, où
   « Sérigraphie + vernis anti-UV » s'enroulait alors qu'il tenait sur une
   ligne à côté. */
.apg-table--specs { table-layout: fixed; }
.apg-table--specs th:nth-child(1) { width: 18%; }
.apg-table--specs th:nth-child(2) { width: 47%; }
.apg-table--specs th:nth-child(3) { width: 35%; }
.apg-table--specs td { overflow-wrap: anywhere; }

/* ─ Notes (conseil / conditions) ─────────────────────────────────────────── */
.apg-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.apg-note {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-low, #f8f3eb);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-note p { margin: 0 0 0.6rem; }
.apg-note p:last-child { margin-bottom: 0; }
.apg-note strong { color: var(--on-surface, #1d1c17); font-weight: 700; }

/* ─ Bon de commande ──────────────────────────────────────────────────────── */
.apg-form__intro { margin-bottom: 1.75rem; }

/* Écran affiché aux visiteurs non connectés à la place du formulaire. */
.apg-form__gate {
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-lowest, #fff);
  text-align: center;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-form__gate-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  color: var(--on-surface, #1d1c17);
}
.apg-form__gate p { max-width: var(--reading-col, 680px); margin-inline: auto; line-height: 1.65; }
.apg-form__gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Bandeau affiché quand la campagne n'est pas ouverte : le bon reste
   consultable (cf. CONTEXT.md) mais tous ses fieldsets sont désactivés. */
.apg-form__closed {
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 0.75rem;
  background: var(--surface-low, #f8f3eb);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--on-surface-muted, #6f6a61);
}
/* Un fieldset désactivé doit se lire comme tel, sans devenir illisible. */
.apg-fieldset:disabled { opacity: 0.6; }
.apg-fieldset:disabled input,
.apg-fieldset:disabled select { background: var(--surface-low, #f8f3eb); cursor: not-allowed; }

.apg-form__notice {
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 0.75rem;
  background: var(--surface-lowest, #fff);
  font-size: 0.95rem;
  line-height: 1.55;
}
.apg-form__notice--ok { color: var(--primary, #00662c); font-weight: 600; }
.apg-form__notice--error { color: var(--secondary, #bd7419); font-weight: 600; }
.apg-form__errors {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-weight: 400;
  color: var(--on-surface-muted, #6f6a61);
}

/* Le honeypot doit rester dans le flux pour les robots mais invisible et
   inatteignable au clavier — display:none est trop repérable. */
.apg-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apg-fieldset {
  margin: 0 0 1.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-lowest, #fff);
}
.apg-fieldset__legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  color: var(--on-surface, #1d1c17);
}

/* ─ Lignes de commande ───────────────────────────────────────────────────── */
.apg-order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--surface-high, #ece8e0);
}
.apg-order-line:last-of-type { border-bottom: 0; }
.apg-order-line__label {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-surface, #1d1c17);
}
/* Le sous-total occupe la 2e colonne sous le champ : il apparaît et disparaît
   sans jamais décaler le libellé. */
.apg-order-line__subtotal {
  grid-column: 2;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-order-line__subtotal:empty { display: none; }

.apg-total {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--surface-high, #ece8e0);
}
.apg-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.apg-total__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-total__value {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #00662c);
}
.apg-total__note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--on-surface-muted, #6f6a61);
}

/* ─ Champs ───────────────────────────────────────────────────────────────── */
.apg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.25rem;
}
.apg-field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.apg-field--wide { grid-column: 1 / -1; }
.apg-field--narrow { max-width: 10rem; }
.apg-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-surface, #1d1c17);
}
.apg-field abbr { color: var(--secondary, #bd7419); text-decoration: none; }

.apg-form input[type="text"],
.apg-form input[type="email"],
.apg-form input[type="tel"],
.apg-form input[type="number"],
.apg-form select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--surface-highest, #e7e2da);
  border-radius: 0.5rem;
  background: var(--surface-lowest, #fff);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--on-surface, #1d1c17);
}
.apg-form input:focus-visible,
.apg-form select:focus-visible {
  outline: 2px solid var(--primary, #00662c);
  outline-offset: 1px;
}
.apg-order-line__qty { text-align: right; font-variant-numeric: tabular-nums; }

.apg-field.is-invalid input,
.apg-field.is-invalid select { border-color: var(--secondary, #bd7419); }

.apg-delivery-address {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-high, #ece8e0);
}
.apg-delivery-address[hidden] { display: none; }
.apg-delivery-address__hint {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--on-surface-muted, #6f6a61);
}

.apg-form__legal {
  max-width: var(--reading-col, 680px);
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-surface-muted, #6f6a61);
}
.apg-form__submit { margin: 0; }

@media (max-width: 599px) {
  .apg-order-line { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .apg-field--narrow { max-width: none; }
}

/* ─ Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .apg-intro { grid-template-columns: 1fr; }
  /* Empilé, l'encadré n'a plus de colonne à lui : le sticky n'a plus de sens
     et bloquerait le scroll de la section. */
  .apg-window { position: static; }
  .apg-window__dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Passage en cartes : chaque ligne devient un bloc (tranche ou caractéristique
   en titre, valeurs étiquetées dessous), l'intitulé de colonne étant repris par
   ::before depuis data-label. Même traitement que .cdt-table.

   Seuil à 900px et non 760 comme cdt : les en-têtes du tableau des tarifs sont
   en nowrap (sinon les deux groupes se désalignent), ce qui lui impose une
   largeur plancher d'environ 680px. Entre 760 et 900px il déborderait donc
   encore. Le tableau des caractéristiques bascule au même seuil pour que les
   deux tableaux de la page se comportent pareil. */
@media (max-width: 900px) {
  .apg-tablewrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .apg-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  .apg-table,
  .apg-table tbody,
  .apg-table tbody tr,
  .apg-table tbody th,
  .apg-table tbody td { display: block; }

  .apg-table tbody tr {
    margin-bottom: 1rem;
    padding: 0.35rem 0.5rem 0.6rem;
    border: 1px solid var(--surface-high, #ece8e0);
    border-radius: 0.9rem;
    background: var(--surface-lowest, #fff);
  }
  .apg-table tbody tr:last-child { margin-bottom: 0; }
  .apg-table tbody tr:hover th,
  .apg-table tbody tr:hover td { background: none; }

  /* La 1re cellule (caractéristique ou tranche) sert de titre de carte. */
  .apg-table__rowhead {
    padding: 0.5rem 0.75rem 0.6rem;
    border-bottom: 1px solid var(--surface-high, #ece8e0);
    font-family: var(--font-display, Georgia, serif);
    font-size: 1rem;
    white-space: normal;
  }

  .apg-table tbody td {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 0;
    white-space: normal;
  }
  .apg-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 100%;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-muted, #6f6a61);
  }
  /* Sans data-label (colonne sans intitulé), pas de ligne vide parasite. */
  .apg-table tbody td:not([data-label])::before { display: none; }
}

@media (max-width: 599px) {
  .apg-window__dates { grid-template-columns: 1fr; }
}

/* Encadré de campagne masqué (« à venir » sans date ni texte) : sans cette
   règle, la colonne de 20rem resterait réservée et le texte garderait un vide
   à sa droite. `:only-child` ne vise que le cas où l'aside est absent. */
.apg-intro__prose:only-child {
  grid-column: 1 / -1;
}