/* =============================================================
   Mon Panier Potager Bio — feuille de style
   Idée directrice : le mot manuscrit de Sylvie, l'encre bleue,
   les photos scotchées, l'ardoise du marché.
   ============================================================= */

/* ---------- Polices (hébergées sur le site, pas de Google Fonts) */
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Couleurs et mesures */
:root {
  --papier: #fffdf9;
  --texte: #26261f;
  --gris: #5b5b52;
  --encre: #283583;          /* encre de stylo bleue */
  --feuille: #3b6a2a;        /* vert feuille */
  --feuille-pale: #edf3e6;
  --betterave: #8c2241;      /* boutons d'action */
  --betterave-fonce: #6e1832;
  --bois: #8a6740;
  --scotch: rgba(222, 205, 168, 0.78);
  --trait: #dcd8cc;

  --titre: "Alegreya", Georgia, "Times New Roman", serif;
  --corps: "Alegreya Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --main: "Kalam", "Segoe Print", "Bradley Hand", cursive;

  --largeur: 68rem;
  --texte-max: 38rem;
  --rayon: 4px;
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1.1875rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--betterave); outline-offset: 2px; border-radius: 2px; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1rem; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 700;
  color: var(--feuille);
  line-height: 1.15;
  margin: 0 0 1rem;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem); }
h3 { font-size: 1.3rem; }

/* soulignement tracé à la main sous les titres de section */
h2 {
  display: inline-block;
  padding-bottom: 0.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 11, 120 6 S 200 3, 240 7 S 290 5, 298 6' fill='none' stroke='%233b6a2a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.6rem;
}

.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.texte-court { max-width: var(--texte-max); }
.manuscrit { font-family: var(--main); color: var(--encre); }
.discret { color: var(--gris); font-size: 1rem; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* lien d'évitement pour le clavier */
.saut {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--encre); color: #fff; padding: 0.5rem 1rem; border-radius: var(--rayon);
}
.saut:focus { top: 1rem; }

/* ---------- En-tête */
.entete { border-bottom: 1px solid var(--trait); }
.entete-haut {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.9rem 0.6rem;
}
.marque { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: inherit; }
.marque img { width: 74px; height: auto; }
.marque-nom {
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: 1.55rem; line-height: 1.1; color: var(--feuille);
}
.marque-sous { display: block; font-family: var(--main); color: var(--encre); font-size: 1.05rem; line-height: 1.3; }
.entete-tel {
  font-family: var(--titre); font-weight: 700; font-size: 1.3rem;
  color: var(--betterave); text-decoration: none; white-space: nowrap;
}
.entete-tel span { display: block; font-family: var(--corps); font-weight: 400; font-size: 0.9rem; color: var(--gris); text-align: right; }

.menu ul {
  list-style: none; margin: 0; padding: 0 0 0.2rem;
  display: flex; gap: 0.25rem 1.6rem; flex-wrap: wrap;
}
.menu a {
  display: inline-block; padding: 0.45rem 0; text-decoration: none;
  color: var(--texte); border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--trait); }
.menu a[aria-current="page"] { color: var(--feuille); font-weight: 700; border-bottom-color: var(--feuille); }

/* ---------- Boutons */
.boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn {
  display: inline-block; padding: 0.75rem 1.3rem; border-radius: var(--rayon);
  font-weight: 700; text-decoration: none; text-align: center; line-height: 1.25;
  border: 2px solid transparent; cursor: pointer; font-family: var(--corps); font-size: 1.05rem;
}
.btn-principal { background: var(--betterave); color: #fff; }
.btn-principal:hover { background: var(--betterave-fonce); }
.btn-secondaire { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-secondaire:hover { background: #eef0fa; }

/* ---------- Sections */
main { display: block; }
.bloc { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.bloc + .bloc { border-top: 1px dashed var(--trait); }
.bloc-vert { background: var(--feuille-pale); }
.bloc-vert + .bloc, .bloc + .bloc-vert { border-top: 0; }
.titre-page { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.titre-page p { max-width: var(--texte-max); font-size: 1.2rem; }

/* accroche de l'accueil */
.accroche { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 1.5rem; }
.accroche h1 { max-width: 20em; }
.accroche-texte { max-width: var(--texte-max); font-size: 1.25rem; }
.note-google { margin-top: 1rem; font-size: 1.05rem; }
.note-google a { color: var(--texte); text-decoration: none; }
.note-google strong { color: var(--texte); }
.etoile { color: #c98a00; }
.note-google a:hover span { text-decoration: underline; }

/* ---------- Photos scotchées */
.photo { position: relative; margin: 0; }
.photo img { border: 6px solid #fff; box-shadow: 0 1px 3px rgba(40, 35, 20, 0.25); }
.photo::before, .photo::after {
  content: ""; position: absolute; width: 92px; height: 26px; background: var(--scotch);
  z-index: 2; pointer-events: none;
}
.photo::before { top: -10px; left: 18px; transform: rotate(-5deg); }
.photo::after { top: -9px; right: 22px; transform: rotate(4deg); }
.photo figcaption { font-family: var(--main); color: var(--encre); font-size: 1.1rem; margin-top: 0.5rem; }

.photo-bandeau { margin-block: 1rem 0; }
.photo-bandeau img { width: 100%; aspect-ratio: 986 / 306; object-fit: cover; object-position: 62% 60%; }

/* ---------- La lettre de Sylvie (photo du mot manuscrit) */
.lettre { max-width: 34rem; transform: rotate(-1.2deg); margin-top: 0.5rem; }
.lettre img { width: 100%; border-width: 0; box-shadow: 2px 4px 10px rgba(40, 35, 20, 0.18), 0 1px 2px rgba(40, 35, 20, 0.2); }

.deux-colonnes { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 52rem) {
  .deux-colonnes { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; }
  .deux-colonnes.inverse { grid-template-columns: 0.9fr 1.1fr; }
}

/* liste à cocher tracée à la main */
.coches { list-style: none; padding: 0; margin: 0 0 1rem; }
.coches li { position: relative; padding-left: 2.2rem; margin-bottom: 0.85rem; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.5rem; height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 11 C 5 13, 7 15, 9 18 C 12 11, 16 6, 22 2' fill='none' stroke='%233b6a2a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Tableau des paniers */
.tableau-paniers { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: 1.1rem; }
.tableau-paniers caption { text-align: left; color: var(--gris); font-size: 1rem; caption-side: bottom; padding-top: 0.75rem; }
.tableau-paniers th, .tableau-paniers td { padding: 0.85rem 0.75rem 0.85rem 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: baseline; }
.tableau-paniers thead th { font-weight: 400; color: var(--gris); font-size: 0.95rem; border-bottom: 2px solid var(--texte); }
.tableau-paniers tbody th { font-family: var(--titre); font-size: 1.4rem; color: var(--feuille); white-space: nowrap; }
.tableau-paniers .prix { font-family: var(--titre); font-weight: 700; font-size: 1.4rem; white-space: nowrap; text-align: right; padding-right: 0; }
.tableau-paniers .kilo { display: block; font-family: var(--corps); font-weight: 400; font-size: 0.9rem; color: var(--gris); }
.tableau-paniers thead th:last-child { text-align: right; padding-right: 0; }

/* ---------- Avis clients (petits mots épinglés) */
.avis-liste { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .avis-liste { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.avis {
  position: relative; margin: 0; padding: 1.4rem 1.3rem 1.1rem; background: #fff;
  border: 1px solid var(--trait); box-shadow: 2px 3px 0 rgba(38, 38, 31, 0.07);
}
.avis::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 80px; height: 22px;
  background: var(--scotch); transform: translateX(-50%) rotate(-3deg);
}
.avis:nth-child(2n) { transform: rotate(0.6deg); }
.avis:nth-child(3n) { transform: rotate(-0.7deg); }
.avis blockquote { margin: 0 0 0.8rem; font-family: var(--titre); font-style: italic; font-size: 1.15rem; line-height: 1.5; }
.avis blockquote p { margin: 0 0 0.6rem; }
.avis figcaption { font-family: var(--main); color: var(--encre); font-size: 1.1rem; }
.avis figcaption .discret { font-family: var(--corps); font-size: 0.9rem; }
.avis-source { margin-top: 1.5rem; font-size: 1rem; color: var(--gris); }
.avis-seul { max-width: 26rem; }

/* ---------- Photo de l'ardoise, dans un cadre en bois */
.ardoise-photo { margin: 0; max-width: 26rem; transform: rotate(0.8deg); }
.ardoise-photo img {
  width: 100%; border: 12px solid var(--bois); border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 2px 4px 0 rgba(0, 0, 0, 0.12);
}

/* ---------- Points relais */
.relais-liste { display: grid; gap: 2.5rem 2rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .relais-liste { grid-template-columns: repeat(2, 1fr); } }
.relais { display: grid; gap: 1rem; align-content: start; }
.relais .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.relais h3 { margin-bottom: 0.3rem; }
.relais p { margin-bottom: 0.4rem; }
.relais .horaires { font-weight: 700; }

/* ---------- Logos bio */
.labels { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.labels img { height: 84px; width: auto; }

/* ---------- Questions fréquentes */
.faq-groupe { max-width: 46rem; margin-bottom: 2.5rem; }
.faq-groupe h2 { margin-bottom: 0.75rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; position: relative;
  font-weight: 700; font-size: 1.15rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.4rem; top: 0.7rem;
  font-family: var(--main); font-size: 1.7rem; color: var(--encre); line-height: 1;
}
.faq details[open] summary::after { content: "-"; }
.faq details > div { padding: 0 0 1.1rem; max-width: var(--texte-max); }

/* ---------- Formulaire */
.formulaire { background: #fff; border: 1px solid var(--trait); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); box-shadow: 3px 4px 0 rgba(40, 53, 131, 0.06); }
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.formulaire legend { font-family: var(--titre); font-weight: 700; color: var(--feuille); font-size: 1.3rem; padding: 0; margin-bottom: 0.75rem; }
.champ { margin-bottom: 1rem; }
.champ label, .champ .etiquette { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.champ .aide { display: block; font-weight: 400; color: var(--gris); font-size: 0.95rem; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ input[type="date"],
.champ input[type="number"], .champ select, .champ textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1.5px solid #9d9a8c; border-radius: var(--rayon); padding: 0.6rem 0.7rem;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); outline: 2px solid var(--encre); outline-offset: 0; }
.champs-2 { display: grid; gap: 0 1rem; }
@media (min-width: 36rem) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.choix { display: grid; gap: 0.5rem; }
.choix label { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 400; margin: 0; cursor: pointer; }
.choix input { accent-color: var(--feuille); width: 1.1rem; height: 1.1rem; flex: none; transform: translateY(2px); }
.case { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.9rem; }
.case input { accent-color: var(--feuille); width: 1.1rem; height: 1.1rem; flex: none; transform: translateY(2px); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .btn { width: 100%; font-size: 1.15rem; padding-block: 0.9rem; }
@media (min-width: 36rem) { .formulaire .btn { width: auto; } }
.cache { display: none; }

.coordonnees p { margin-bottom: 1.2rem; }
.coordonnees .gros { font-family: var(--titre); font-weight: 700; font-size: 1.6rem; color: var(--betterave); text-decoration: none; }

/* ---------- Encadré d'erreur / confirmation */
.message { border-left: 5px solid var(--feuille); background: var(--feuille-pale); padding: 1rem 1.25rem; max-width: 42rem; margin-bottom: 1.5rem; }
.message-erreur { border-left-color: var(--betterave); background: #f9ecef; }
.message ul { margin: 0.5rem 0 0; }

/* ---------- Pages juridiques */
.juridique { max-width: 46rem; }
.juridique h2 { font-size: 1.35rem; background: none; padding: 0; display: block; margin-top: 2rem; }
.juridique p, .juridique li { font-size: 1.05rem; }

/* À compléter avant mise en ligne : impossible à rater */
.a-completer { background: #fff1a8; outline: 2px dashed #b38b00; padding: 0 0.25rem; }

/* ---------- Pied de page */
.pied { margin-top: 3rem; background: var(--feuille); color: #f2f6ee; padding-block: 2.5rem 1.5rem; font-size: 1rem; }
.pied a { color: #fff; }
.pied-grille { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .pied-grille { grid-template-columns: 1.1fr 1.2fr 1fr; } }
.pied-nom { font-family: var(--titre); font-weight: 700; font-size: 1.3rem; color: #fff; margin-bottom: 0.4rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.4rem; }
.pied-fait { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.25); font-family: var(--main); font-size: 1.05rem; color: #e3ecda; }

/* ---------- Barre d'action en bas d'écran (téléphone) */
.barre-mobile { display: none; }
@media (max-width: 46rem) {
  body { padding-bottom: 4.6rem; }
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: var(--papier); border-top: 1px solid var(--trait);
  }
  .barre-mobile .btn { padding: 0.7rem 0.5rem; }
  .barre-mobile .btn-secondaire { background: #fff; }

  .entete-tel { display: none; }
  .marque img { width: 58px; }
  .marque-nom { font-size: 1.3rem; }
  .menu ul { gap: 0 1.1rem; }
  .menu a { padding-block: 0.3rem; font-size: 1.05rem; }
  .photo-bandeau img { aspect-ratio: 16 / 10; }
  .lettre, .ardoise-photo { transform: none; }
  .avis:nth-child(n) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .menu, .barre-mobile, .boutons, .photo::before, .photo::after { display: none !important; }
  body { padding: 0; }
  .pied { background: none; color: #000; }
  .pied a { color: #000; }
}