/* Au gre des petales — feuille de style unique.
   Les couleurs sont declarees une fois ici : changer la palette du site revient
   a changer ces quelques lignes. */

:root {
  --fond: #faf7f4;
  --fond-carte: #ffffff;
  --fond-appui: #f2ece7;
  --texte: #2e2723;
  --texte-doux: #655a53;
  --accent: #a8456b;          /* rose profond : le petale */
  --accent-fonce: #82304f;
  --accent-clair: #fbeef3;
  --encre: #2f3a2c;           /* vert feuillage : banniere et pied */
  --bord: #e7ded7;
  --rayon: 12px;
  --largeur: 62rem;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Dit au navigateur que le site sait s'afficher dans les deux themes. Sans
     cette ligne, il peint les champs de formulaire, les listes deroulantes et
     les ascenseurs en clair meme sur fond sombre : un champ de quantite blanc
     au milieu d'une page noire. */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #19161a;
    --fond-carte: #221d21;
    --fond-appui: #272128;
    --texte: #ece7e4;
    --texte-doux: #ab9f99;
    --accent: #e094b1;
    --accent-fonce: #c97b99;
    --accent-clair: #2c1d24;
    --encre: #141813;
    --bord: #362e33;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--accent); }
a:hover { text-decoration: none; }

h1, h2, h3 { line-height: 1.2; font-weight: 650; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 .6rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--accent-clair);
  padding: .1em .35em;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
}
.evitement:focus { left: .5rem; top: .5rem; z-index: 10; }

/* En-tete ------------------------------------------------------------- */
.entete { background: var(--fond-carte); border-bottom: 1px solid var(--bord); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.marque {
  font-weight: 750;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--texte);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.marque__texte { display: flex; flex-direction: column; }

/* Le logo est un JPEG a fond blanc. Sur l'en-tete blanc, ce fond disparait ;
   en mode sombre, les coins arrondis en font une petite tuile assumee plutot
   qu'un carre plaque. Pas de recadrage rond : le colibri touche presque le
   coin superieur droit et y perdrait la queue. */
.marque__logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

@media (max-width: 34rem) {
  .marque__logo { width: 46px; height: 46px; }
}

.marque__sous {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu__liste { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.menu__liste a { text-decoration: none; color: var(--texte-doux); padding: .2rem 0; }
.menu__liste a:hover,
.menu__liste a[aria-current="page"] {
  color: var(--texte);
  border-bottom: 2px solid var(--accent);
}

.menu__bouton { display: none; }

@media (max-width: 40rem) {
  .menu__bouton[hidden] { display: none; }
  .menu__bouton {
    display: block;
    font: inherit;
    color: var(--texte);
    background: var(--fond-appui);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .35rem .9rem;
    cursor: pointer;
  }
  .menu[hidden] { display: none; }
  .menu { width: 100%; }
  .menu__liste { flex-direction: column; gap: .5rem; }
}

/* Banniere ------------------------------------------------------------ */
.banniere {
  background: var(--encre);
  color: #f1f4f7;
  padding: clamp(2.5rem, 8vw, 5rem) 0;
}

.banniere__texte { max-width: 42rem; }
.banniere h1 { color: #fff; }

.surtitre {
  margin: 0 0 .5rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
}

.banniere .accroche { color: #c3ccd5; font-size: 1.15rem; }
.banniere__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Bande de chiffres --------------------------------------------------- */
.bande {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.bande__chiffre { flex: 0 0 auto; }
.bande__chiffre p { margin: 0; color: var(--texte-doux); max-width: 14rem; }
.chiffre { font-size: 2.4rem; font-weight: 750; color: var(--accent); line-height: 1; }
.bande__texte { flex: 1 1 22rem; margin: 0; font-size: 1.1rem; }

/* Cartes -------------------------------------------------------------- */
.cartes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.carte p { margin: 0; color: var(--texte-doux); }
.carte--accent { border-color: var(--accent); background: var(--accent-clair); }
.carte--accent p { color: var(--texte); }
.lien-fort { font-weight: 650; }

/* Interventions ------------------------------------------------------- */
.titre-page { padding-top: 2.5rem; }
.accroche { font-size: 1.15rem; color: var(--texte-doux); max-width: 40rem; }

.publics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 1.5rem;
}

.public {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.public h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.public p { margin: 0 0 .7rem; color: var(--texte-doux); }

.avertissement {
  font-weight: 650;
  color: var(--accent-fonce) !important;
  background: var(--accent-clair);
  border-radius: 6px;
  padding: .4rem .7rem;
  display: inline-block;
}

/* Temoignages et galerie ---------------------------------------------- */
.temoignages, .galerie__grille {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.temoignage, .galerie figure {
  margin: 0;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
}

.temoignage img, .galerie img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
  background: var(--fond-appui);
}

/* Un temoignage sans photo : on remplace l'image par un filet d'accent, pour
   qu'il ait l'air voulu a cote de ceux qui en ont une. */
.temoignage--sans-photo {
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* sans image, le texte se centre plutot que de
                                laisser un vide sous lui */
}

.temoignage blockquote { margin: 0; padding: 1rem 1.2rem .3rem; font-size: .98rem; }
.temoignage figcaption, .galerie figcaption {
  padding: 0 1.2rem 1.1rem;
  color: var(--texte-doux);
  font-size: .88rem;
}
.galerie figcaption { padding-top: .8rem; }

.note { color: var(--texte-doux); font-size: .92rem; }

/* En attendant les photographies : une zone qui annonce ce qui viendra,
   plutot qu'un blanc qui ressemble a une panne. */
.galerie .note, .galerie__grille .note {
  display: block;
  border: 1px dashed var(--bord);
  border-radius: var(--rayon);
  padding: 1.75rem;
  text-align: center;
  background: var(--fond-carte);
}

.appel {
  background: var(--fond-appui);
  border-radius: var(--rayon);
  padding: 1.75rem;
  margin: 3rem auto;
  text-align: center;
}
.appel h2 { margin-top: 0; }

/* Contact ------------------------------------------------------------- */
/* Coordonnees et encart d'adresse a gauche, l'un sous l'autre ; le plan a
   droite, un peu plus large : c'est lui qui a besoin de place. */
.contact {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  padding-bottom: 3rem;
}

@media (max-width: 46rem) {
  .contact { grid-template-columns: 1fr; }
}

.contact__coordonnees {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem;
}
.contact__principal .contact__coordonnees { margin-top: 2rem; }
.contact__coordonnees h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.contact__coordonnees p { margin: 0 0 .7rem; }

/* Coordonnees et reseaux ---------------------------------------------- */
.coordonnees { margin: 0; }
.coordonnees dt {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 650;
  margin-top: 1.75rem;
}
.coordonnees dt:first-child { margin-top: 0; }
.coordonnees dd { margin: .2rem 0 0; }

.gros-lien a, a.gros-lien {
  font-size: 1.3rem;
  font-weight: 650;
  text-decoration: none;
}
.gros-lien a:hover, a.gros-lien:hover { text-decoration: underline; }

.reseaux {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
}

.reseaux a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-weight: 600;
}
.reseaux a:hover { text-decoration: underline; }

.reseaux__icone { width: 1.25em; height: 1.25em; flex: none; }

/* Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-block;
  padding: .65rem 1.3rem;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  border: 2px solid var(--accent);
  cursor: pointer;
  font-family: inherit;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

.bouton--creux { background: transparent; color: #fff; border-color: #56646f; }
.bouton--creux:hover { background: #ffffff1a; border-color: #ffffff80; }

/* Pied ---------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: #b9c4ce;
  margin-top: 3rem;
  padding: 2.25rem 0 1.25rem;
  font-size: .95rem;
}

.pied a { color: #e5ebf0; }
.pied p { margin: 0 0 .3rem; }
.pied__nom { font-weight: 700; color: #fff; font-size: 1.05rem; }

.pied__grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 1.5rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #2a343e;
  padding-top: 1rem;
}

/* Version et date de compilation : presentes mais discretes. Pour les retirer,
   supprimer ce bloc et le paragraphe correspondant dans partials/pied.html. */
.pied__version { font-size: .8rem; opacity: .7; }

/* Formulaires ---------------------------------------------------------- */
.champs {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.champ { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ--case { flex-direction: row; align-items: flex-start; gap: .5rem; }
.champ--case label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.requis { color: var(--accent); }

.champ input, .champ textarea, .champ select {
  font: inherit;
  color: var(--texte);
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: .6rem .7rem;
  width: 100%;
}

.champ input[type="checkbox"] { width: auto; }
/* Un champ de fichier ne se met pas en boite comme les autres : le bouton du
   navigateur a deja son propre cadre. */
.champ input[type="file"] { border: none; background: none; padding: .3rem 0; }

.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.piege { position: absolute; left: -9999px; }

/* Lu par les lecteurs d'ecran, invisible a l'oeil. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.message { border-radius: var(--rayon); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.message p { margin: 0 0 .4rem; }
.message p:last-child { margin-bottom: 0; }
.message ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.message--ok { background: #e9f3ec; border: 1px solid #bcd9c6; color: #1e5334; }
.message--erreur { background: var(--accent-clair); border: 1px solid var(--accent); color: var(--accent-fonce); }

@media (prefers-color-scheme: dark) {
  .message--ok { background: #16281d; border-color: #2c5540; color: #bfe3cd; }
}

/* Catalogue et commandes ----------------------------------------------- */
.catalogue { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.catalogue th, .catalogue td {
  text-align: left;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.catalogue thead th {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.catalogue .col-prix { text-align: right; white-space: nowrap; }
/* Nettement plus etroite qu'avant (7rem), mais pas au point de tronquer : a
   3,5rem, un nombre a deux chiffres passait sous les fleches du navigateur.
   4,5rem laisse la place a deux chiffres bien lisibles. L'en-tete reste « Qté »,
   et la place gagnee revient au nom du produit. */
.catalogue .col-qte { width: 4.5rem; }
.catalogue .col-qte input { width: 100%; padding-left: .5rem; padding-right: .3rem; }
.catalogue tfoot td { border-bottom: none; padding-top: .9rem; }
.unite { color: var(--texte-doux); font-weight: 400; }
.indispo { opacity: .55; }

/* Administration ------------------------------------------------------- */
.admin-barre {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  padding: .7rem 0;
  margin-top: 1rem;
}
.admin-barre nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.admin-barre a { text-decoration: none; color: var(--texte-doux); font-weight: 600; }
.admin-barre a:hover, .admin-barre a[aria-current="page"] { color: var(--accent); }

.admin-form {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.25rem 1.25rem .5rem;
}

.admin-connexion { max-width: 22rem; padding-bottom: 4rem; }

.lien-bouton {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.lien-bouton--danger { color: #a33; }
.col-actions { white-space: nowrap; }
.col-actions form { display: inline; margin-left: .6rem; }
.col-actions a { margin-right: 0; }

.commande {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.commande--traitee { opacity: .6; }
.commande__tete {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .6rem;
}
.etiquette {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--fond-appui);
  border-radius: 999px;
  padding: .1rem .6rem;
  margin-left: .4rem;
}
.commande__client { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; margin: 0 0 .6rem; }
.commande__client dt { color: var(--texte-doux); font-size: .85rem; }
.commande__client dd { margin: 0; }
.commande__message {
  border-left: 3px solid var(--bord);
  padding-left: .8rem;
  margin: .6rem 0 0;
  white-space: pre-wrap;
}

/* Variante du bouton creux sur fond clair : le creux d'origine est prevu pour
   la banniere sombre. */
.bouton--sombre { color: var(--accent); border-color: var(--bord); }
.bouton--sombre:hover { background: var(--fond-appui); color: var(--accent-fonce); }

/* Recapitulatif de commande : un encart qui apparait des la premiere quantite. */
.recap {
  background: var(--fond-carte);
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.2rem 1.4rem .4rem;
  margin: 2rem 0 1.5rem;
}
.recap[hidden] { display: none; }
.recap h2 { margin-top: 0; font-size: 1.15rem; }
.recap .catalogue { margin: .5rem 0 .5rem; }
.recap .catalogue td { padding: .45rem .3rem; }
.recap .note { margin-bottom: 1rem; }

/* En-tete collant : sur les pages longues — galeries, catalogue — on garde la
   navigation sous la main sans devoir remonter.
   z-index 20 : au-dessus du contenu, mais sous la visionneuse de galerie (50),
   qui doit pouvoir le recouvrir.
   max-height : sur telephone, le menu deplie pourrait depasser l'ecran ; il
   devient defilant plutot que de tout recouvrir. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  max-height: 100vh;
  overflow-y: auto;
}

/* Une cible d'ancre ne doit pas se retrouver cachee derriere l'en-tete. */
:target { scroll-margin-top: 6rem; }


/* ---------- rubriques du catalogue ---------- */

/* Le formulaire de commande est decoupe en rubriques repliables.
   Quarante-et-un produits deroules faisaient plusieurs metres de page ; replies,
   ils tiennent en dix lignes que l'on ouvre a la demande. */
.rubrique { margin: 0 0 .75rem; }

.rubrique__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: 0;
  padding: .7rem .9rem;
  background: var(--fond-appui);
  border: 1px solid var(--bord);
  border-radius: 8px;
  font-size: 1.05rem;
  letter-spacing: .04em;
  cursor: pointer;
  /* Le triangle par defaut est remplace par le notre, ci-dessous : celui du
     navigateur ne se place pas de la meme facon d'un navigateur a l'autre. */
  list-style: none;
}

/* Safari a besoin du pseudo-element WebKit pour masquer son propre triangle. */
.rubrique__titre::-webkit-details-marker { display: none; }

.rubrique__titre:hover { background: var(--accent-clair); }

/* Le repere de mise au point suit le titre entier : on doit voir ou l'on est
   en parcourant la page au clavier. */
.rubrique__titre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Notre triangle, qui pivote a l'ouverture. Il est purement decoratif : l'etat
   ouvert ou ferme est deja annonce par le navigateur. */
.rubrique__titre::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: .4rem solid var(--accent);
  border-top: .35rem solid transparent;
  border-bottom: .35rem solid transparent;
  transition: transform .15s ease;
}

.rubrique[open] > .rubrique__titre::before { transform: rotate(90deg); }

.rubrique[open] > .rubrique__titre { border-radius: 8px 8px 0 0; }

/* La phrase qui distingue ce qui voyage de ce qui ne voyage pas. Elle est
   posee sur un fond leger : c'est la seule chose a lire avant de choisir. */
.accroche--retrait {
  padding: .8rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--fond-appui);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  color: var(--texte);
}

.rubrique__nom {
  margin: 0;
  font-size: inherit;
  font-weight: 650;
}

.rubrique__compte {
  color: var(--texte-doux);
  font-size: .85rem;
  letter-spacing: normal;
}

/* Ce qui a deja ete choisi dans une rubrique refermee : sans cette mention, on
   croit avoir perdu sa saisie en repliant. */
.rubrique__choisis {
  margin-left: auto;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: normal;
  white-space: nowrap;
}

/* Le tableau se colle au titre ouvert. */
.rubrique[open] > .catalogue {
  border: 1px solid var(--bord);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.rubrique .catalogue { margin-top: 0; margin-bottom: 0; }
.rubrique .catalogue thead th { padding-top: .5rem; }

/* ---------- photos des produits ---------- */

.catalogue .col-photo { width: 8rem; padding-right: 0; }

.vignette {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--fond-appui);
}

.catalogue--admin .vignette { width: 56px; height: 56px; }

.vignette--grande { width: 120px; height: 120px; }

.photo-actuelle { margin-top: -.6rem; }

.photo-produit { display: inline-block; border-radius: 8px; }
.photo-produit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 34rem) {
  /* Sur telephone, la colonne des photos mangerait la place du nom. */
  .catalogue .col-photo { width: 5rem; }
  .vignette { width: 70px; height: 70px; }
  .catalogue--admin .vignette { width: 48px; height: 48px; }
}

/* ---------- le catalogue de commande, sur telephone ---------- */

/* Quatre colonnes sur un ecran de telephone laissaient au nom et a la
   description moins de la moitie de la largeur : une description de cinq
   lignes en occupait quinze, et chaque produit devenait un pave. Une cliente
   l'a fait remarquer, a juste titre.
   
   On abandonne donc la grille du tableau en dessous de 34rem : chaque produit
   devient un bloc de deux lignes — le texte sur toute la largeur, puis la
   photo, le prix et la quantite cote a cote. Le HTML ne change pas, donc le
   tableau reste un tableau pour un lecteur d'ecran comme pour le formulaire. */
@media (max-width: 34rem) {
  .rubrique .catalogue,
  .rubrique .catalogue tbody,
  .rubrique .catalogue tr,
  .rubrique .catalogue td { display: block; width: auto; }

  /* Les en-tetes ne designent plus de colonnes : les garder tromperait.
     Chaque champ de quantite porte deja son propre libelle, lu par les
     lecteurs d'ecran. */
  .rubrique .catalogue thead { display: none; }

  .rubrique .catalogue tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--bord);
  }

  .rubrique .catalogue td { border: none; padding: 0; }

  /* Premiere ligne : le nom et la description, sur toute la largeur.
     « order » les remet dans l'ordre voulu sans toucher au HTML, ou la photo
     vient d'abord — elle doit y rester pour le tableau des grands ecrans. */
  .rubrique .catalogue .col-nom { order: 1; flex: 1 1 100%; }

  /* Seconde ligne : la photo, le prix, puis la quantite poussee a droite. */
  .rubrique .catalogue .col-photo { order: 2; width: auto; }
  .rubrique .catalogue .col-prix { order: 3; text-align: left; font-weight: 650; }
  .rubrique .catalogue .col-qte { order: 4; margin-left: auto; width: 5rem; }
}

/* Le champ de quantite du catalogue ne vit pas dans un .champ : sans cette
   regle, le navigateur lui donne un fond blanc, illisible en theme sombre. */
.catalogue .col-qte input {
  font: inherit;
  color: var(--texte);
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: .45rem .5rem;
}

/* ---------- visionneuse ---------- */

/* La photo s'affiche par-dessus la page. Meme principe que sur ateliersweyne :
   le lien fonctionne sans JavaScript, le script ne fait qu'intercepter. */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  background: #000000ee;
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--rayon); }
.visionneuse figcaption { color: #f1e9ec; font-size: .95rem; text-align: center; }

.visionneuse__fermer, .visionneuse__precedent, .visionneuse__suivant {
  position: absolute;
  background: #ffffff1f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.75rem; height: 2.75rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__precedent { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suivant { right: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse button:hover { background: #ffffff38; }
.visionneuse button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- photos des emplacements ---------- */

/* La banniere passe en position relative pour accueillir sa photo de fond. Sans
   photo, rien de tout cela ne s'applique : le fond vert est conserve. */
/* Avec une photo, la banniere n'a plus d'aplat de couleur : c'est lui qui
   restait sombre au raccord avec la page. Sans photo, .banniere garde son
   fond. */
.banniere--photo {
  position: relative;
  isolation: isolate;
  background: none;
}

/* L'empilement compte : photo en -2, voile en -1, texte au-dessus. Avec la
   photo et le voile tous deux en -1, c'est l'ordre du document qui tranche —
   or le voile (::before) est genere AVANT l'image, qui se peignait donc par-
   dessus et le masquait entierement. Le texte reposait sur la photo brute. */
.banniere__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;

  /* La photo se dissout dans le dernier quart de la banniere. Le meme masque
     est pose sur le voile, juste dessous : les deux s'effacent ensemble, et ce
     qui apparait alors n'est pas un fond de secours, c'est la page. Sans cela,
     l'aplat sombre de .banniere affleure au raccord, et aucun degrade pose
     par-dessus ne le rattrape — on ne fait qu'etaler la bande. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
  mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
}

/* Voile dense la ou se trouve le texte (15 a 62 % de la largeur), allege a
   droite ou il n'y en a pas : la photo respire sans sacrifier la lecture.
   Opacites mesurees sur une photo tres claire (ciel, soleil, fleurs saturees),
   au 95e centile de luminosite de la zone de texte : titre 6,6:1, accroche
   5,9:1, surtitre 5:1 — au-dessus du minimum de 4,5:1 pour du texte courant. */
.banniere--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  /* Le meme masque que la photo : ils s'effacent du meme pas. Voir
     .banniere__fond. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
  mask-image: linear-gradient(to bottom, #000 72%, #0000 100%);
  background: linear-gradient(90deg,
    #1b2419bd 0%,
    #1b2419ad 55%,
    #1b24198c 65%,
    #1b241940 82%,
    #1b241926 100%);
}

/* Sur fond de photo, les teintes grisee et rose de la banniere unie ne
   suffisent plus : on les eclaircit, et une ombre tres douce detache les
   lettres des zones les plus vives (le soleil, les fleurs claires). Les
   boutons ont leur propre fond et n'en ont pas besoin. */
.banniere--photo .accroche { color: #eef2f5; }
.banniere--photo .surtitre { color: #fad6e3; }
.banniere--photo h1,
.banniere--photo .surtitre,
.banniere--photo .accroche { text-shadow: 0 1px 3px #0000008c; }

/* Sur telephone, le texte occupe toute la largeur : le degrade n'a plus de
   sens, le voile devient uniforme. */
@media (max-width: 48rem) {
  .banniere--photo::before { background: #1b2419b3; }
}

.carte__photo, .public__photo {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 .9rem;
}

.photo-large {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: var(--rayon);
  margin: 1rem 0 0;
}

/* ---------- a propos ---------- */

.apropos {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 1.5rem;
}

.apropos__photo {
  flex: 0 0 18rem;
  width: 18rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}

.apropos__texte { flex: 1; min-width: 0; max-width: 40rem; }
.apropos__texte p:first-child { margin-top: 0; }

@media (max-width: 46rem) {
  .apropos { flex-direction: column; gap: 1.25rem; }
  .apropos__photo { flex: none; width: 100%; max-width: 22rem; }
}

/* ---------- emplacements, dans l'administration ---------- */

.emplacement { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.25rem; }
.emplacement__champs { flex: 1; min-width: 0; }
.emplacement .champ:last-child { margin-bottom: 0; }

/* Le cadre vide montre qu'un emplacement existe et qu'il attend une photo. */
.vignette--vide {
  border: 1px dashed var(--bord);
  background: var(--fond-appui);
}

.sous-titre { margin: 1.5rem 0 .8rem; font-size: 1.05rem; }

@media (max-width: 34rem) {
  .emplacement { flex-direction: column; }
}

/* ---------- bande de photos qui defile ---------- */

.bande-photos { position: relative; margin: 1rem 0 0; }

.bande-photos__piste {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  /* Chaque photo vient se caler au bord : le defilement s'arrete proprement
     plutot qu'a mi-image. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bande-photos__piste li {
  flex: 0 0 auto;
  width: min(20rem, 72vw);
  scroll-snap-align: start;
}

.bande-photos__piste img {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  border-radius: var(--rayon);
  background: var(--fond-appui);
}

.bande-photos__legende {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--texte-doux);
}

.bande-photos__fleche {
  position: absolute;
  top: 7rem; /* le milieu des images, legendes exclues */
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: var(--fond-carte);
  color: var(--texte);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px #0000001f;
}

.bande-photos__fleche[hidden] { display: none; }
.bande-photos__fleche--gauche { left: -.75rem; }
.bande-photos__fleche--droite { right: -.75rem; }
.bande-photos__fleche:hover { background: var(--fond-appui); }
.bande-photos__fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Au doigt, les fleches ne servent a rien et masqueraient une photo. */
@media (hover: none) {
  .bande-photos__fleche { display: none; }
}

@media (max-width: 34rem) {
  .bande-photos__piste img { height: 11rem; }
}

/* ---------- retrait ou livraison ---------- */

.remise {
  margin: 1.5rem 0 1.5rem;
  padding: 1rem 1.2rem 1.1rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}

.remise legend {
  padding: 0 .4rem;
  font-weight: 650;
}

.remise__choix + .remise__choix {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bord);
}

/* Toute la ligne est cliquable, pas seulement le petit rond. */
.remise__option {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  cursor: pointer;
}
.remise__option input { margin-top: .3rem; accent-color: var(--accent); }

/* La precision s'aligne sous le libelle, pas sous le bouton radio. */
.remise__detail { margin: .7rem 0 0 1.6rem; }
.remise__detail[hidden] { display: none; }
.remise__detail .note { margin: .4rem 0 0; }

/* « retrait uniquement » : visible sans crier, a cote du nom du produit. */
.etiquette--retrait {
  margin-left: .35rem;
  background: var(--fond-appui);
  color: var(--texte-doux);
  font-weight: 500;
  vertical-align: .1em;
}

.recap__livraison[hidden], .recap__alerte[hidden] { display: none; }
.recap__alerte { margin-top: .5rem; }

/* Une commande a expedier se repere au premier coup d'oeil dans la liste :
   il y a un colis a peser et un montant a envoyer. */
.etiquette--livraison { background: var(--accent-clair); color: var(--accent-fonce); }

/* ---------- apercu d'un texte long dans une liste ---------- */

/* Coupe la description a une ligne, terminee par « … ». line-clamp plutot que
   white-space: nowrap : le texte continue de se replier normalement, il est
   seulement tronque apres la premiere ligne. Avec nowrap, un tableau elargirait
   la colonne jusqu'a loger la phrase entiere sur une seule ligne. */
.apercu {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}


/* ---------- plan d'acces ---------- */

/* « plan » et non « carte » : cette classe-la habille deja les encarts de
   l'accueil, et le plan n'en veut pas le cadre. */
.plan { margin: 0; }
.plan img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-appui);
}
.plan figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--texte-doux);
}

/* ---------- le fond de page ---------- */

/* Trois halos de la couleur d'accent, poses derriere toute la page. Ils
   rompent la monotonie d'un aplat sans rien couter : ni image, ni requete.

   Une couche fixe plutot que « background-attachment: fixed » : Safari sur
   iPhone gere mal ce dernier — il repeint la page a chaque mouvement du doigt.
   Elle est posee derriere le contenu (z-index: -1) et n'intercepte aucun clic.

   Les trois pourcentages donnent l'intensite : les baisser pour un fond plus
   sage, les monter pour un fond plus present. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 40rem at 15% -10%,
      color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(50rem 35rem at 100% 15%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(55rem 38rem at 0% 100%,
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}

/* ---------- la photo de fond de page ---------- */

/* Un de ses bouquets, pose derriere tout, fixe : la page glisse par-dessus.

   L'opacite est bornee par la lisibilite, pas par le gout. Sur les zones les
   plus sombres de la photo, a 16 %, le texte courant garde 10,6:1 et le gris
   des mentions 4,8:1 — au-dessus du minimum de 4,5. C'est ce calcul qui a
   aussi fait foncer --texte-doux, qui ne tenait plus qu'a 4,2:1.

   « fixed » plutot que « background-attachment: fixed » : Safari sur iPhone
   repeint la page a chaque mouvement du doigt avec ce dernier. */
.fond-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
}