/* Brimgymzor — fromagerie de coopérative. Palette brun/ocre, colonne centrale. */
:root {
  --brun: #5b3417;
  --brun-clair: #7c4a22;
  --ocre: #c98a10;
  --creme: #faf6ee;
  --papier: #ffffff;
  --trait: #e2d6c2;
  --texte: #2c2318;
  --gris: #6c6153;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font: 16px/1.65 "Segoe UI", Tahoma, sans-serif;
}

.avis-flag { position: absolute; opacity: 0; pointer-events: none; }

.avis {
  background: var(--brun);
  color: #f4e6cf;
  font-size: 14px;
  border-bottom: 3px solid var(--ocre);
}
.avis .zone { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 10px 24px; }
.avis p { margin: 0; }
.avis a { color: #f6d99a; }
.avis label {
  border: 1px solid #f4e6cf;
  padding: 5px 16px;
  cursor: pointer;
  white-space: nowrap;
  color: #f4e6cf;
  font-weight: 600;
  margin: 0;
}
.avis label:hover { background: var(--brun-clair); }
.avis-flag:checked ~ .avis { display: none; }

.rappel {
  background: #f1e7d3;
  border-bottom: 1px solid var(--trait);
  font-size: 13.5px;
  color: var(--brun);
}
.rappel .zone { display: flex; flex-wrap: wrap; gap: 22px; padding: 8px 24px; }

.zone { max-width: 1040px; margin: 0 auto; }

.entete { background: var(--papier); border-bottom: 1px solid var(--trait); }
.entete .zone { padding: 22px 24px 0; }
.marque {
  font: 700 27px/1.1 Georgia, "Times New Roman", serif;
  color: var(--brun);
  text-decoration: none;
  letter-spacing: .4px;
}
.baseline { margin: 6px 0 16px; color: var(--gris); font-size: 14.5px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a {
  padding: 11px 15px 13px;
  color: var(--brun);
  text-decoration: none;
  font-size: 14.5px;
  border-bottom: 3px solid transparent;
}
.menu a:hover { border-bottom-color: var(--trait); }
.menu a.ici { border-bottom-color: var(--ocre); font-weight: 600; }
.menu a.action { margin-left: auto; color: var(--brun); font-weight: 600; }

main { padding: 0 24px 56px; }

.affiche { margin: 0 -24px 34px; position: relative; background: #241505; }
.affiche img { width: 100%; height: 420px; object-fit: cover; display: block; opacity: .82; }
.affiche .texte {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 24px;
  background: linear-gradient(transparent, rgba(20, 12, 3, .88));
  color: #fdf6e7;
}
.affiche h1 {
  max-width: 780px;
  margin: 0 auto;
  font: 700 clamp(25px, 3.4vw, 39px)/1.2 Georgia, serif;
}
.affiche .sous { max-width: 780px; margin: 12px auto 0; font-size: 17px; color: #ecdcbf; }

.colonne { max-width: 780px; margin: 0 auto; }

.colonne h2 {
  font: 700 24px/1.25 Georgia, serif;
  color: var(--brun);
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--trait);
}
.colonne h3 { font: 600 18px/1.3 Georgia, serif; color: var(--brun-clair); margin: 26px 0 8px; }
.colonne p { margin: 0 0 14px; }
.oeil { text-transform: uppercase; letter-spacing: 1.6px; font-size: 12px; color: var(--ocre); font-weight: 700; margin: 0 0 6px; }
.chapo { font-size: 18px; color: #4a3f2f; }
.fin { font-size: 14px; color: var(--gris); }

.grille { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 15px; background: var(--papier); }
.grille caption { text-align: left; font-size: 13.5px; color: var(--gris); padding-bottom: 8px; }
.grille th, .grille td { border: 1px solid var(--trait); padding: 10px 12px; text-align: left; vertical-align: top; }
.grille thead th { background: #f3e9d7; color: var(--brun); font-size: 13.5px; }
.grille th[scope="row"] { font-weight: 600; }
.grille .euro { text-align: right; white-space: nowrap; font-weight: 700; color: var(--brun); }

.bande {
  background: var(--brun);
  color: #f6ead3;
  margin: 34px -24px;
  padding: 28px 24px;
}
.bande .dedans { max-width: 780px; margin: 0 auto; }
.bande h2 { border: 0; color: #fdf0d8; margin-top: 0; font: 700 22px/1.25 Georgia, serif; }
.bande .tarif { font: 700 30px/1 Georgia, serif; color: var(--ocre); margin: 0 0 10px; }
.bande p { margin: 0 0 10px; }
.bande a { color: #f6d99a; }
.bande .liste { display: grid; gap: 8px 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 14px 0 0; }
.bande .liste span { display: block; font-size: 14.5px; padding-left: 14px; position: relative; }
.bande .liste span::before { content: "—"; position: absolute; left: 0; color: var(--ocre); }

figure { margin: 26px 0; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--trait); }
figcaption { font-size: 13.5px; color: var(--gris); padding-top: 7px; }

form { background: var(--papier); border: 1px solid var(--trait); padding: 22px; margin: 20px 0 0; }
label { display: block; font-size: 14px; font-weight: 600; color: var(--brun); margin: 14px 0 5px; }
input, select, textarea {
  width: 100%;
  font: 15px/1.4 inherit;
  padding: 10px 11px;
  border: 1px solid #cdbfa8;
  background: #fffdf8;
  color: var(--texte);
}
textarea { resize: vertical; }
.accord { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: #4a4234; margin-top: 18px; }
.accord input { width: auto; margin-top: 3px; }
.bouton {
  display: inline-block;
  margin-top: 18px;
  background: var(--ocre);
  color: #2b1c02;
  border: 0;
  padding: 13px 26px;
  font: 700 15px/1 inherit;
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover { background: #b07a0b; }
.bouton2 {
  display: inline-block;
  margin-top: 18px;
  border: 1px solid var(--brun);
  color: var(--brun);
  padding: 12px 24px;
  font: 600 15px/1 inherit;
  text-decoration: none;
}

.recap { background: #f3e9d7; border: 1px solid var(--trait); padding: 6px 18px; margin: 20px auto; max-width: 780px; }
.recap .ligne { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dotted #cdbfa8; font-size: 14.5px; }
.recap .ligne:last-child { border-bottom: 0; }
.recap .ligne span { color: var(--gris); }

.pied { background: #241505; color: #d8c8ad; margin-top: 46px; font-size: 14px; }
.pied .zone { padding: 30px 24px 34px; }
.pied .haut { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #43301a; }
.pied a { color: #f0dcb8; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 14px 0 0; }
.pied .mention { color: #a6957c; font-size: 12.5px; margin: 16px 0 0; line-height: 1.6; }

@media (max-width: 720px) {
  .affiche img { height: 300px; }
  .menu a.action { margin-left: 0; }
  .grille { font-size: 14px; }
}