/* ---------- Polices, hébergées avec le site ----------
   Fichiers variables (latin) récupérés chez Google Fonts : aucune requête
   vers un serveur tiers, et donc rien à déclarer côté CNIL. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/fraunces-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: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-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;
}

/* ==========================================================================
   Les Petits Fruits de la Baie : structure et composants.
   Tout ce qui relève du goût (couleurs, arrondis, ombres, typo) passe par des
   variables, définies dans un fichier de thème chargé après celui-ci.
   ========================================================================== */

:root {
  /* Fond crème, arrondis généreux, ombres douces : l'ambiance d'un étal. */
  --fond: #fdfaf4;
  --fond-alt: #f5ead7;
  --fond-carte: #ffffff;
  --fond-sombre: #10321f;

  --encre: #2a2118;
  --encre-doux: #6d6154;
  --trait: #e6d9c2;

  --accent: #15773f;
  --accent-vif: #14ae55;
  --chaud: #cf3a24;

  --rayon: 20px;
  --rayon-s: 12px;
  --rayon-btn: 999px;
  --carte-bordure: 1px solid var(--trait);
  --ombre: 0 2px 4px rgb(80 55 25 / .05), 0 10px 26px rgb(80 55 25 / .07);
  --ombre-forte: 0 12px 34px rgb(80 55 25 / .16);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1140px;
  --pad: clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 9vw, 6.5rem);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img, picture { max-width: 100%; display: block; }
/* Sans height:auto, l'attribut height du HTML l'emporte sur aspect-ratio. */
img { height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.45rem); }
h3 { font-size: clamp(1.12rem, 1rem + .55vw, 1.35rem); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--accent); }

.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.centre { text-align: center; }
.centre.chapo { margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--encre); color: #fff; padding: .8rem 1.2rem; }
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.oeil { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; }
.chapo { font-size: 1.12em; color: var(--encre-doux); max-width: 62ch; }
.note { color: var(--encre-doux); font-size: .94rem; margin-top: 2.2rem; }

/* ---------- Icônes ---------- */

.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ic-grand { width: 30px; height: 30px; stroke-width: 1.4; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap;
  padding: .8rem 1.5rem;
  border: 1.5px solid var(--accent);
  background: var(--accent); color: #fff;
  border-radius: var(--rayon-btn);
  font: 600 .97rem/1.15 var(--sans);
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-fantome { background: transparent; color: #fff; border-color: rgb(255 255 255 / .7); }
.btn-fantome:hover { background: #fff; color: var(--encre); border-color: #fff; }

/* Bouton du header : aligné sur les liens voisins, jamais coupé en deux lignes */
.menu .btn-nav { margin-left: clamp(.4rem, 1vw, 1rem); padding: .58rem 1.15rem; font-size: .93rem; }
.btn-mini { padding: .55rem 1.15rem; font-size: .92rem; }

/* ---------- Bandeau d'information ---------- */

.bandeau { background: var(--chaud); color: #fff; }
.bandeau-in { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.bandeau p { margin: 0; font-size: .94rem; }
.bandeau strong { font-weight: 600; }
.bandeau button { margin-left: auto; flex: none; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.entete.colle { border-bottom-color: var(--trait); }
.entete-in { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; }
.marque img { width: clamp(148px, 32vw, 200px); height: auto; }

.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 1.5vw, 1.6rem); }
.menu a { white-space: nowrap; text-decoration: none; }
/* :not(.btn) est indispensable : sinon .menu a (0,1,1) écrase .btn-nav (0,1,0)
   et le bouton hérite de la couleur et du filet des liens du menu. */
.menu a:not(.btn) {
  color: var(--encre);
  font-weight: 500; font-size: .95rem;
  padding: .25rem 0; border-bottom: 1.5px solid transparent;
}
.menu a:not(.btn):hover { color: var(--accent); border-bottom-color: var(--accent); }

.burger { margin-left: auto; display: none; width: 46px; height: 40px; padding: 9px 8px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2.5px; border-radius: 3px; background: var(--encre); transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  .menu {
    position: absolute; inset: 100% 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fond); border-bottom: 1px solid var(--trait);
    display: none;
  }
  .menu.ouvert { display: flex; }
  .menu a { padding: .95rem var(--pad); border-bottom: 1px solid var(--trait); }
  .menu a:not(.btn):hover { border-bottom-color: var(--trait); }
  .menu .btn-nav { margin: 1rem var(--pad) 1.3rem; }
}

/* ---------- Hero ---------- */

.hero { position: relative; isolation: isolate; color: #fff; }
.hero-img { position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Voile sombre derrière le texte, en deux couches qui se cumulent :
   - verticale, qui s'assombrit vers le bas ;
   - horizontale à gauche, là où le texte est aligné.
   Le coin haut-droit de la photo reste clair, donc l'image respire encore.
   Mesuré sur fond blanc (le pire cas) : 6,5:1 sous le titre. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgb(14 30 19 / 0)   0%,
      rgb(14 30 19 / .45) 22%,
      rgb(14 30 19 / .62) 55%,
      rgb(14 30 19 / .82) 100%),
    linear-gradient(90deg,
      rgb(14 30 19 / .55) 0%,
      rgb(14 30 19 / .30) 45%,
      rgb(14 30 19 / 0)   78%);
}
.hero h1, .hero .chapo { text-shadow: 0 1px 4px rgb(6 14 9 / .5); }
.hero-in { padding: clamp(4.5rem, 14vh, 8rem) 0 clamp(3rem, 9vh, 5.5rem); min-height: min(76vh, 640px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero .chapo { color: rgb(255 255 255 / .92); max-width: 46ch; }
.sur-titre { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .82); margin-bottom: .9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.hero .btn:not(.btn-fantome) { background: #fff; color: var(--encre); border-color: #fff; }
.hero .btn:not(.btn-fantome):hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Statut ouvert / fermé ---------- */

.statut {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28);
  border-radius: var(--rayon-btn); padding: .45rem 1rem;
  font-size: .93rem; font-weight: 500; width: fit-content; margin: .4rem 0 0;
  backdrop-filter: blur(6px);
}
.pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #9aa39a; box-shadow: 0 0 0 3px rgb(154 163 154 / .28); }
.pastille.ouvert { background: #3ad57c; box-shadow: 0 0 0 3px rgb(58 213 124 / .3); }
.pastille.ferme  { background: #ff7063; box-shadow: 0 0 0 3px rgb(255 112 99 / .3); }
.statut-bloc { background: var(--fond); border: var(--carte-bordure); color: var(--encre); margin: 0 0 1.5rem; backdrop-filter: none; }

/* ---------- Sections ---------- */

.section { padding: var(--section-y) 0; }
.section-creme { background: var(--fond-alt); }
.section-verte { background: var(--fond-sombre); color: rgb(255 255 255 / .88); }
.section-verte h2, .section-verte h3 { color: #fff; }
.section-verte .oeil { color: #86e3ab; }
.section-verte .note { color: rgb(255 255 255 / .68); }

/* ---------- Bloc texte + image ---------- */

.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-media img { width: 100%; border-radius: var(--rayon); box-shadow: var(--ombre-forte); aspect-ratio: 4 / 3; object-fit: cover; }

.atouts { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; gap: .8rem; }
.atouts li { display: flex; align-items: center; gap: .8rem; font-weight: 500; }
.atouts .ic { color: var(--accent); }

/* ---------- Cartes produits ---------- */

.cartes { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 2.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.carte {
  background: var(--fond-carte); border: var(--carte-bordure);
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
  display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.carte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-txt { padding: 1.4rem 1.5rem 1.7rem; }
.carte-txt h3 { margin-bottom: .35em; }
.carte-txt p { margin: 0; color: var(--encre-doux); font-size: .96rem; }

/* ---------- Horaires ---------- */

.horaires { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 2.6rem; }
@media (min-width: 900px) { .horaires { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.horaires-carte { background: var(--fond-carte); border: var(--carte-bordure); border-radius: var(--rayon); padding: clamp(1.3rem, 3vw, 2rem); }
.charge { color: var(--encre-doux); margin: 0; }

.semaine { display: grid; }
.jour { display: flex; align-items: baseline; gap: 1rem; padding: .62rem .2rem; border-bottom: 1px solid var(--trait); }
.jour:last-child { border-bottom: 0; }
.jour-nom { flex: 1; font-weight: 500; text-transform: capitalize; }
.jour-h { text-align: right; color: var(--encre-doux); font-variant-numeric: tabular-nums; font-size: .95rem; }
.jour.aujourdhui { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: var(--rayon-s); padding-inline: .7rem; border-bottom-color: transparent; }
.jour.aujourdhui .jour-nom { color: var(--accent); font-weight: 600; }
.jour.aujourdhui .jour-nom::after { content: " · aujourd'hui"; font-weight: 400; font-size: .85em; color: var(--encre-doux); text-transform: none; }
/* L'estompage par transparence tombait sous 4,5:1 : l'italique marque le
   jour fermé, la couleur reste lisible. */
.jour.ferme .jour-h { color: var(--encre-doux); font-style: italic; }

.exceptions { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--trait); }
.exceptions h3 { font-size: .98rem; font-family: var(--sans); font-weight: 600; margin-bottom: .7rem; }
.exceptions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.exceptions li { display: flex; gap: .7rem; font-size: .93rem; color: var(--encre-doux); }
.exceptions .date { font-weight: 600; color: var(--chaud); flex: none; }

.saisons { display: grid; gap: .9rem; margin-bottom: 1.8rem; }
.saison { background: var(--fond-carte); border: var(--carte-bordure); border-left: 3px solid var(--accent); border-radius: var(--rayon-s); padding: .95rem 1.1rem; }
.saison.active { border-left-color: var(--chaud); }
.saison h3 { font-family: var(--sans); font-size: .97rem; font-weight: 600; margin: 0 0 .2rem; }
.saison p { margin: 0; font-size: .89rem; color: var(--encre-doux); }
.saison .courante { color: var(--chaud); font-weight: 600; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; }

.note-horaires { margin-top: .9rem; }

/* ---------- Où trouver nos fruits ---------- */

.ventes { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
@media (min-width: 900px) {
  .ventes { grid-template-columns: 1fr 1fr; }
  /* Ordre de lecture mobile : magasin, marchés, Fermiers de la Baie.
     Sur grand écran, les deux adresses côte à côte, les marchés dessous. */
  .vente-marches { grid-column: 1 / -1; grid-row: 2; }
}
.vente { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .15); border-radius: var(--rayon); padding: 1.6rem; }
.vente h3 { margin-bottom: .6em; }
.vente p { margin: 0 0 .45rem; font-size: .95rem; color: rgb(255 255 255 / .82); }
.vente-nom { font-weight: 600; color: #fff !important; }
.vente a { color: #fff; }
.vente .tel a { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.18rem; font-weight: 600; text-decoration: none; }
.vente .tel .ic-tel-lien { width: 18px; height: 18px; color: #9ce9bd; }
.vente-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.vente .btn-mini { background: #fff; color: var(--fond-sombre); border-color: #fff; }
.vente .btn-mini:hover { background: var(--accent-vif); border-color: var(--accent-vif); color: #fff; }
.vente .btn-mini.btn-fantome { background: transparent; color: #fff; border-color: rgb(255 255 255 / .6); }
.vente .btn-mini.btn-fantome:hover { background: #fff; color: var(--fond-sombre); border-color: #fff; }
.vente-intro { max-width: 62ch; }

.marches { display: grid; gap: 1.2rem; margin-top: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.marche { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .15); border-radius: var(--rayon); padding: 1.5rem; }
.marche h3 { margin-bottom: .35em; }
.marche p { margin: 0; font-size: .95rem; }
.marche-quand { color: #9ce9bd; font-weight: 600; }
.marche-ou { color: rgb(255 255 255 / .68); margin-top: .25rem !important; }

/* ---------- Avis ---------- */

.etoiles { color: #dd9a2b; letter-spacing: .12em; }
.etoile-vide { color: var(--trait); }

/* Carrousel : une rangée de cartes qui défile, accrochée carte par carte.
   Toutes les cartes font la hauteur de la plus grande, le pied « Publié sur
   Google » est calé en bas. */
.avis-carrousel { position: relative; margin-top: 2.2rem; }
.avis-defile {
  display: flex; gap: 16px; /* site.js suppose ce gap pour le pas des flèches */
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem .25rem 1rem; scrollbar-width: none;
}
.avis-defile::-webkit-scrollbar { display: none; }
.avis {
  flex: 0 0 min(290px, 82vw); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column;
  background: var(--fond-carte); border: var(--carte-bordure); border-radius: var(--rayon);
  padding: 1.3rem 1.4rem; box-shadow: var(--ombre);
}
.avis-tete { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.avis-tete img { width: 42px; height: 42px; border-radius: 50%; }
.avis-nom { display: block; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.avis-date { display: block; font-size: .8rem; color: var(--encre-doux); }
.avis .etoiles { margin: 0 0 .55rem; font-size: .95rem; }
.avis blockquote { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--encre-doux); white-space: pre-line; }
.avis-texte.replie { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.avis-plus { border: 0; background: none; padding: 0; margin-top: .4rem; font: inherit; font-size: .85rem; color: var(--encre-doux); cursor: pointer; }
.avis-plus:hover { color: var(--encre); }
.avis-source { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: 1rem; text-decoration: none; }
.avis-source svg { flex: none; }
.avis-source-txt { font-size: .74rem; line-height: 1.3; color: var(--encre-doux); }
.avis-source-g { font-size: .85rem; color: #1a73e8; }
.avis-source:hover .avis-source-g { text-decoration: underline; }
.avis-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: var(--carte-bordure); background: var(--fond-carte); box-shadow: var(--ombre-forte);
  font-size: 1.5rem; line-height: 1; color: var(--encre); cursor: pointer;
}
.avis-nav:hover { background: var(--fond-alt); }
.avis-nav-prec { left: -10px; }
.avis-nav-suiv { right: -10px; }
.avis-lien { margin-top: 1.6rem; }

/* ---------- Formulaire de contact ---------- */

.formulaire { max-width: 640px; margin: 3rem auto 0; display: grid; gap: 1.1rem; }
.formulaire-intro { margin: 0; color: var(--encre-doux); }
.formulaire label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.formulaire input, .formulaire textarea {
  font: inherit; font-weight: 400;
  padding: .7rem .95rem;
  border: 1.5px solid var(--trait); border-radius: var(--rayon-s);
  background: var(--fond-carte); color: var(--encre);
}
.formulaire input:focus-visible, .formulaire textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); border-radius: var(--rayon-s);
}
.formulaire textarea { resize: vertical; min-height: 7.5rem; }
.form-grille { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form-grille { grid-template-columns: 1fr 1fr; } }
.formulaire .btn { justify-self: center; margin-top: .3rem; }
.hors-ecran { position: absolute; left: -9999px; }

/* ---------- Galerie ---------- */

.galerie {
  margin-top: 2.6rem; display: grid; gap: .6rem;
  /* Deux colonnes sur téléphone, sinon quinze photos empilées font une page à rallonge. */
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.galerie button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--rayon-s); overflow: hidden; line-height: 0; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .35s; }
.galerie button:hover img { transform: scale(1.05); }

/* ---------- Annonce (période exceptionnelle) ---------- */

.annonce {
  border: 0; border-radius: var(--rayon);
  width: min(92vw, 33rem);
  padding: clamp(1.6rem, 5vw, 2.4rem);
  background: var(--fond); color: var(--encre);
  box-shadow: var(--ombre-forte);
  text-align: center;
}
.annonce::backdrop { background: rgb(14 30 19 / .55); backdrop-filter: blur(2px); }
.annonce h2 { font-size: clamp(1.3rem, 4vw, 1.55rem); margin-bottom: .5em; }
.annonce > p { color: var(--encre-doux); font-size: .97rem; }
.annonce-horaires { margin: 1.2rem 0; padding: 1rem 1.2rem; background: var(--fond-alt); border-radius: var(--rayon-s); }
.annonce-sur { margin: 0 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--chaud); }
.annonce-horaires div p { margin: 0; font-weight: 600; color: var(--encre); font-size: .97rem; }
.annonce .btn { margin-top: .4rem; }
.annonce-x {
  position: absolute; top: .6rem; right: .6rem;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--encre-doux);
}
.annonce-x:hover { color: var(--encre); }

/* ---------- Visionneuse ---------- */

.visio { border: 0; padding: 0; background: none; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.visio::backdrop { background: rgb(8 16 11 / .93); }
.visio[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }
.visio figure { margin: 0; display: grid; gap: .8rem; justify-items: center; padding: 1rem 0; }
.visio img { max-height: 82vh; max-width: 100%; width: auto; border-radius: var(--rayon-s); }
.visio figcaption { color: rgb(255 255 255 / .78); font-size: .93rem; text-align: center; }
.visio-fermer, .visio-nav { background: rgb(255 255 255 / .12); color: #fff; border: 0; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; line-height: 1; display: grid; place-items: center; transition: background .18s; }
.visio-fermer:hover, .visio-nav:hover { background: rgb(255 255 255 / .25); }
.visio-fermer { position: fixed; top: 1rem; right: 1rem; z-index: 2; font-size: 2rem; }
@media (max-width: 700px) {
  .visio-nav { position: fixed; bottom: 1.2rem; z-index: 2; }
  .visio-prec { left: 1.2rem; }
  .visio-suiv { right: 1.2rem; }
  .visio[open] { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contacts { display: grid; gap: 1.2rem; margin-top: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.contact-carte {
  background: var(--fond-carte); border: var(--carte-bordure); border-radius: var(--rayon);
  padding: 1.8rem 1.4rem; text-align: center; text-decoration: none; color: var(--encre);
  display: grid; justify-items: center; gap: .3rem; box-shadow: var(--ombre);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.contact-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--accent); }
.contact-carte .ic-grand { color: var(--accent); margin-bottom: .6rem; }
.contact-carte strong { font-family: var(--serif); font-size: 1.12rem; }
.contact-carte span:last-child { color: var(--encre-doux); font-size: .92rem; overflow-wrap: anywhere; }

/* ---------- Pied ---------- */

.pied { background: var(--fond-sombre); color: rgb(255 255 255 / .72); padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; }
.pied-in { display: grid; gap: 1.6rem; }
@media (min-width: 700px) { .pied-in { grid-template-columns: 1fr auto; } }
.pied p { margin: 0 0 .4rem; font-size: .94rem; }
.pied a { color: #fff; }
.pied-nom { font-family: var(--serif); font-size: 1.22rem; color: #fff; margin-bottom: .5rem; }
.pied p.pied-bas { margin: 2.5rem auto 0; padding-top: 1.4rem; width: min(100% - 2 * var(--pad), var(--wrap)); border-top: 1px solid rgb(255 255 255 / .13); font-size: .83rem; color: rgb(255 255 255 / .48); text-align: center; }

/* ---------- Apparition au défilement ---------- */

@media (prefers-reduced-motion: no-preference) {
  .anim { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .anim.vu { opacity: 1; transform: none; }
}


/* ==========================================================================
   Traitements propres au parti pris chaleureux
   ========================================================================== */
/* Le surtitre passe en pastille, comme une étiquette de cagette */
.oeil {
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  padding: .35rem .9rem; border-radius: 999px;
  letter-spacing: .1em; font-size: .74rem;
}
.section-verte .oeil { background: rgb(255 255 255 / .12); color: #9ce9bd; }

/* Boutons pleins et ronds */
.menu .btn-nav { background: var(--accent); color: #fff; border-color: var(--accent); }
.menu .btn-nav:hover { background: var(--encre); border-color: var(--encre); }

/* Les cartes respirent et se soulèvent légèrement */
.carte-txt { padding: 1.6rem 1.7rem 1.9rem; }
.carte:hover, .contact-carte:hover { transform: translateY(-5px); }

/* Un filet chaud sous les titres de section centrés */
.section > .wrap > h2.centre { position: relative; padding-bottom: .5em; }
.section > .wrap > h2.centre::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 54px; height: 3px; border-radius: 3px; background: var(--chaud);
}

/* Bloc horaires : fond crème et coin arrondi généreux */
.horaires-carte { background: var(--fond-alt); border-color: color-mix(in srgb, var(--trait) 70%, transparent); }

/* Galerie plus douce */
.galerie { gap: .8rem; }
.galerie button { border-radius: var(--rayon-s); }


/* Icône intégrée à un bouton : calée sur la taille du texte */
.ic-btn { width: 17px; height: 17px; margin-right: -.1rem; }

/* ---------- Période exceptionnelle ---------- */

.saison-exception { border-left-color: var(--chaud); background: color-mix(in srgb, var(--chaud) 6%, var(--fond-carte)); }
/* Sur le fond teinté, le brun doux passe sous 4,5:1 : on garde l'encre pleine. */
.saison-exception p { color: var(--encre); }
.saison-en-retrait { opacity: .55; }
.saisons-note { margin: .5rem 0 -.2rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux); }

/* Le sélecteur porte « .vente » pour l'emporter sur le margin de « .vente p ». */
.vente .marches-suspendus {
  margin: 0 0 1.6rem;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22);
  border-left: 4px solid var(--accent-vif);
  border-radius: var(--rayon-s); padding: .9rem 1.2rem;
  color: #fff; font-weight: 500;
}
.marches.suspendus .marche { opacity: .62; }
/* Comme ailleurs, le sélecteur porte « .vente » : « .vente p » l'emporterait. */
.vente .marches-normal { margin: 0 0 .6rem; }


/* ==========================================================================
   Ajustements mobile (mêmes couleurs, mêmes formes) : on ne reprend que les
   placements. Tout est confiné à des media queries, le desktop est intact.
   ========================================================================== */

/* ---------- Hero : une grille au lieu d'un wrap approximatif ---------- */
/* Les trois boutons se répartissaient sur deux lignes de largeurs inégales.
   Le principal prend toute la largeur, les deux autres se partagent la ligne. */
@media (max-width: 520px) {
  .hero-in { padding-bottom: clamp(2.4rem, 7vh, 3.5rem); }
  .hero h1 { margin-bottom: .38em; }
  .hero .chapo { margin-bottom: 1.1rem; }
  .hero .statut { margin: 0; }
  .hero-actions {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .6rem; margin-top: 1.3rem;
  }
  .hero-actions .btn { padding: .85rem .9rem; min-height: 48px; }
  .hero-actions .btn:first-child { grid-column: 1 / -1; }
}

/* ---------- Cartes produits : image à gauche, texte à droite ---------- */
/* Empilées pleine largeur, les trois cartes occupaient près de deux mille
   pixels. En ligne, la section tient en un écran et demi. */
@media (max-width: 699px) {
  .cartes { gap: 1rem; margin-top: 2.2rem; }
  .carte { flex-direction: row; align-items: stretch; }
  /* La photo est sortie du flux : sans cela, une image portrait (les fraises
     font 900 × 1349) impose sa hauteur et la carte redevient un pavé. C'est le
     texte qui donne la hauteur, la photo la remplit. */
  .carte > picture { flex: 0 0 34%; align-self: stretch; position: relative; }
  .carte > picture img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto;
  }
  .carte-txt {
    flex: 1; min-width: 0;
    padding: 1.05rem 1.15rem; display: flex;
    flex-direction: column; justify-content: center;
  }
  .carte-txt h3 { margin-bottom: .3em; }
  .carte-txt p { font-size: .92rem; line-height: 1.5; }
  /* Le survol n'existe pas au doigt, et la carte sautait au tap. */
  .carte:hover { transform: none; box-shadow: var(--ombre); }
}

/* ---------- Horaires : le jour et ses créneaux tiennent la largeur ---------- */
/* Le séparateur porte l'espace, ce qui donne à la ligne un point de coupure :
   sur un écran étroit le second créneau passe dessous, aligné à droite. */
.jour-h .sep { padding: 0 .5em; color: color-mix(in srgb, var(--encre-doux) 55%, transparent); }

@media (max-width: 480px) {
  .horaires-carte { padding: 1.1rem .9rem; }
  .jour { gap: .6rem; padding-inline: .35rem; }
  .jour.aujourdhui { padding-inline: .55rem; }
  .jour-nom { font-size: .97rem; }
  .jour-h { font-size: .92rem; }
  /* « mercredi · aujourd'hui » ne tient pas en largeur avec deux créneaux :
     le repère passe sous le nom du jour plutôt que de s'abréger. */
  .jour.aujourdhui .jour-nom::after { display: block; content: "aujourd'hui"; font-size: .8em; line-height: 1.3; }
  .exceptions li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; }
}

/* ---------- Contact : des lignes, pas des pavés ---------- */
/* Trois cartes centrées de 170 px de haut pour une icône et deux lignes de
   texte : au doigt, une ligne icône + libellé + valeur se lit mieux. */
@media (max-width: 699px) {
  .contacts { gap: .7rem; margin-top: 2.2rem; }
  .contact-carte {
    grid-template-columns: auto 1fr;
    align-items: center; justify-items: start; text-align: left;
    padding: .95rem 1.1rem; gap: 0 1.05rem;
  }
  .contact-carte .ic-grand { grid-row: 1 / span 2; margin-bottom: 0; }
  .contact-carte strong { align-self: end; font-size: 1.05rem; }
  .contact-carte span:last-child { align-self: start; }
  .contact-carte:hover { transform: none; }
}

/* ---------- Galerie : douze vignettes, le reste à un tap ---------- */
.galerie-plus { display: none; }
@media (max-width: 699px) {
  .galerie-repliee .en-plus { display: none; }
  .galerie-plus {
    display: inline-flex; margin: 1.3rem auto 0;
    color: var(--accent); border-color: var(--accent);
    background: transparent; cursor: pointer;
  }
  .galerie-plus:hover { background: var(--accent); color: #fff; }
  /* Le bouton est un enfant direct du .wrap : on le centre. */
  .galerie + .galerie-plus { display: flex; width: fit-content; }
}

/* ---------- Zones tactiles ---------- */
/* Sous le doigt, tout ce qui se tape doit faire 44 px. Les liens du pied et
   des encarts points de vente en faisaient 19. On ajoute de la hauteur, rien d'autre. */
@media (max-width: 900px) {
  .marque { display: flex; align-items: center; min-height: 44px; }
  .pied a, .vente .tel a, .vente a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .pied-in p { margin-bottom: 0; }
  .btn-mini, .menu .btn-nav { min-height: 44px; }
  .avis-plus { min-height: 44px; display: inline-flex; align-items: center; }
  .bandeau button { width: 44px; height: 44px; margin-right: -.6rem; }
  .visio-fermer, .visio-nav { width: 52px; height: 52px; }
}