/* Paniers bio d'hiver 2027, Ferme aux Pleines Saveurs.
   Design : Claude Design (démo de Roch), converti en HTML statique le 2026-10-17.
   Téléphone d'abord ; points de rupture : 480 px (nom dans l'en-tête), 1024 px (ordinateur). */

/* ---------- Polices (SIL OFL, hébergées avec la page) ---------- */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-italique-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-italique-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Public Sans est une police variable : un seul fichier sert les graisses 400, 600 et 700. */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/public-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/public-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Jetons ---------- */
:root {
  --vert-foret: #183818;
  --vert-nuit: #0C2814;
  --creme: #F8F4E8;
  --blanc: #FFFFFF;
  --orange: #EC751E;        /* toujours avec un texte vert nuit (blanc sur orange : contraste insuffisant) */
  --orange-survol: #F28A3C;
  --jaune: #DBBE2E;
  --gris: #4A5A48;
  --ligne: #E6DFCB;
  --titre: 'Instrument Serif', Georgia, serif;
  --texte: 'Public Sans', system-ui, sans-serif;
  --gouttiere: clamp(16px, 4vw, 32px);
  --entete: 0px;            /* téléphone et tablette : l'en-tête ne colle pas (la barre du bas porte l'action) */
  --barre: 72px;            /* hauteur de la barre flottante, téléphone et tablette */
}
@media (min-width: 1024px) { :root { --entete: 101px; } }   /* ordinateur : en-tête collant */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--vert-nuit); font-family: var(--texte); font-size: 17px; line-height: 1.55; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vert-foret); text-underline-offset: 3px; }
a:hover { color: var(--vert-nuit); }
button { font: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; margin: 0; }
:focus-visible { outline: 3px solid var(--vert-nuit); outline-offset: 3px; border-radius: 6px; }
.sur-fonce :focus-visible, .entete :focus-visible, .pied :focus-visible, .barre :focus-visible { outline-color: var(--jaune); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.conteneur { max-width: 1200px; margin: 0 auto; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.conteneur--etroit { max-width: 820px; }
.evitement { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--jaune); color: var(--vert-nuit); font-weight: 700; }
.evitement:focus { top: 8px; }

/* ---------- Typographie ---------- */
.titre-1 { margin: 0 0 20px; font-family: var(--titre); font-weight: 400; font-size: clamp(44px, 8vw, 76px); line-height: 1.02; letter-spacing: -.01em; }
.titre-2 { margin: 0 0 24px; font-family: var(--titre); font-weight: 400; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; }
.titre-3 { margin: 0 0 16px; font-family: var(--titre); font-weight: 400; font-size: clamp(28px, 4vw, 36px); line-height: 1.1; }
.titre-1 em, .titre-2 em { color: var(--jaune); }
.surtitre { margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jaune); }
.etape { margin-bottom: 4px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.chapeau { font-size: clamp(17px, 2vw, 20px); max-width: 34em; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--orange); color: var(--vert-nuit); font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; }
.bouton:hover { background: var(--orange-survol); color: var(--vert-nuit); }
.bouton--grand { min-height: 56px; padding: 0 32px; font-size: 18px; }
.bouton--petit { min-height: 44px; padding: 0 16px; font-size: 16px; }

/* ---------- En-tête ---------- */
.entete { position: relative; z-index: 20; background: var(--vert-foret); border-bottom: 1px solid var(--vert-nuit); }
.entete__barre { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.entete__marque { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; color: var(--creme); text-decoration: none; }
.entete__logo { flex: 0 0 auto; height: 80px; width: auto; }   /* logo recadré sur son dessin : réglé par la hauteur */
.entete__nom { min-width: 0; max-width: 9em; font-family: var(--titre); font-size: clamp(28px, 8vw, 34px); line-height: 1.02; text-wrap: balance; }
.entete__cta { display: none; }   /* sur téléphone et tablette, la barre du bas le remplace */
@media (min-width: 1024px) {
  .entete { position: sticky; top: 0; }
  .entete__barre { padding-top: 10px; padding-bottom: 10px; }
  .entete__logo { height: 80px; }
  .entete__nom { max-width: none; font-size: 28px; white-space: nowrap; }
  .entete__cta { display: inline-flex; }
}

/* ---------- Sections ---------- */
.section { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(40px, 7vw, 80px); }
.section--creme { background: var(--creme); }
.section--blanc { background: var(--blanc); }
.sur-fonce { background: var(--vert-foret); color: var(--creme); }
.bandeau { padding-top: clamp(32px, 7vw, 80px); padding-bottom: clamp(32px, 7vw, 80px); }
.deux-colonnes { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 56px); }
.deux-colonnes--inverse { flex-wrap: wrap-reverse; }
.deux-colonnes__texte, .deux-colonnes__media { flex: 1 1 340px; min-width: 0; }
.bandeau .chapeau { margin-bottom: 28px; }
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }

/* ---------- Bande de confiance ---------- */
.confiance { background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.confiance__liste { list-style: none; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 32px; }
.confiance__liste li { display: flex; gap: 12px; align-items: baseline; }
.puce { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--jaune); transform: translateY(-1px); }

/* ---------- Le choix : formule, puis point ---------- */
#choisir { scroll-margin-top: var(--entete); }
#points { scroll-margin-top: calc(var(--entete) + 12px); }
.choix__formules { margin-bottom: 40px; }
.formules { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.formule { position: relative; display: block; cursor: pointer; }
.formule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.formule__corps { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 12px; align-items: center; min-height: 44px; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--ligne); background: var(--blanc); }
.formule__corps::before { content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; box-shadow: inset 0 0 0 4px var(--blanc); }
.formule__nom { font-weight: 700; font-size: 18px; }
.formule__detail { grid-column: 2; font-size: 16px; }
.formule__prix { grid-column: 3; grid-row: 1 / span 2; font-family: var(--titre); font-size: 30px; line-height: 1; color: var(--vert-foret); }
.formule__note { grid-column: 2 / span 2; font-size: 15px; }
.formule input:checked + .formule__corps { background: var(--vert-nuit); border-color: var(--vert-nuit); color: var(--creme); }
.formule input:checked + .formule__corps::before { background: var(--jaune); border-color: var(--creme); box-shadow: inset 0 0 0 4px var(--vert-nuit); }
.formule input:checked + .formule__corps .formule__prix { color: var(--jaune); }
.formule input:focus-visible + .formule__corps { outline: 3px solid var(--vert-nuit); outline-offset: 3px; }
@media (min-width: 600px) {
  /* tablette : trois cartes côte à côte, prix sous le nom */
  .formule__corps { grid-template-columns: 22px 1fr; row-gap: 4px; padding: 20px; border-radius: 18px; }
  .formule__corps::before { grid-row: 1; }
  .formule__prix { grid-column: 2; grid-row: auto; font-size: 34px; margin-top: 4px; }
  .formule__note { grid-column: 2; }
}

.choix__intro { margin-bottom: 16px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }   /* à la ligne : toutes visibles, aucune coupée */
.filtre { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--vert-foret); background: var(--blanc); color: var(--vert-foret); font-size: 16px; font-weight: 600; cursor: pointer; }
.filtre[aria-pressed="true"] { background: var(--vert-foret); color: var(--creme); }
.sans-js .filtres { display: none; }   /* sans JavaScript, la liste complète reste visible */
.resume { margin-bottom: 16px; font-size: 16px; color: var(--gris); }
.resume strong { color: var(--vert-nuit); }

.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.point { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 16px; background: var(--blanc); box-shadow: 0 1px 0 var(--ligne), 0 8px 24px -16px rgba(12, 40, 20, .25); }
.point__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.point__nom { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 23px; line-height: 1.15; }
.point__adresse { font-size: 16px; }
.point__horaire { margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.point__cta { margin-top: auto; min-height: 44px; }
.pastille-nouveau { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--jaune); color: var(--vert-nuit); font-size: 14px; font-weight: 700; }
.choix__note { margin-top: 20px; font-size: 16px; color: var(--gris); }
@media (min-width: 600px) {
  .points { gap: 16px; }
  .point { padding: 20px; border-radius: 18px; gap: 6px; }
  .point__nom { font-size: 26px; }
  .point__cta { min-height: 48px; }
}

/* Ordinateur : la formule reste en place à gauche pendant que les points défilent à droite. */
@media (min-width: 1024px) {
  .choix { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
  .choix__formules { position: sticky; top: calc(var(--entete) + 24px); margin-bottom: 0; }
  .formules { grid-template-columns: 1fr; }
}

/* ---------- Panier, étapes, FAQ ---------- */
.panier__nombre { margin-bottom: 20px; font-size: 20px; font-weight: 600; }
.panier__liste { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.panier__liste li { padding-bottom: 10px; border-bottom: 1px solid var(--ligne); }
.panier__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.encadre { padding: 20px; border-radius: 18px; background: var(--creme); }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.carte { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: var(--blanc); }
.numero { width: 44px; height: 44px; border-radius: 50%; background: var(--jaune); color: var(--vert-nuit); display: grid; place-items: center; font-family: var(--titre); font-size: 26px; }
.carte__titre { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 28px; line-height: 1.1; }

.faq { border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; font-size: 22px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 18px 0; }

.appel-final { display: flex; justify-content: center; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }

/* ---------- Pied de page ---------- */
.pied { background: var(--vert-nuit); color: var(--creme); font-size: 16px; }
.pied__grille { padding-top: 40px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 40px; }
.pied__coordonnees { display: flex; flex-direction: column; gap: 6px; }
.pied__nom { font-family: var(--titre); font-size: 26px; line-height: 1.1; }
.pied a { color: var(--creme); }
.pied a:hover { color: var(--jaune); }
.pied__liens { display: flex; flex-direction: column; }
.pied__liens a, .pied__a-confirmer { min-height: 44px; display: flex; align-items: center; }

/* ---------- Barre flottante (sous 1024 px) ---------- */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--vert-nuit); color: var(--creme); box-shadow: 0 -8px 24px -12px rgba(12, 40, 20, .5);
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); transform: translateY(0); transition: transform .25s ease; }
.barre[data-visible="false"] { transform: translateY(110%); }
.barre__ligne { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; }
.barre__resume { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barre__resume strong { font-size: 16px; }
.barre__resume span { font-size: 15px; color: var(--jaune); }
.barre__changer { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--creme); background: transparent; color: var(--creme); font-weight: 700; font-size: 16px; cursor: pointer; }
.barre__cta { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-size: 16px; }
.barre[data-mode="points"] .barre__cta { display: none; }      /* les points sont à l'écran : on offre plutôt de changer de formule */
.barre[data-mode="ailleurs"] .barre__changer { display: none; } /* ailleurs dans la page : on ramène au choix du point */
.barre__options { display: grid; gap: 8px; max-width: 1200px; margin: 0 auto 10px; }
.barre__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--vert-foret); background: var(--vert-foret); color: var(--creme); font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; }
.barre__option strong { font-family: var(--titre); font-weight: 400; font-size: 24px; color: var(--jaune); }
.barre__option[aria-checked="true"] { border-color: var(--jaune); }
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(var(--barre) + env(safe-area-inset-bottom)); }   /* la barre ne cache jamais le bas de la page */
}
@media (min-width: 1024px) { .barre { display: none !important; } }