/* =====================================================================
   STYLES PAR PAGE ET CLASSES D'ILLUSTRATION
   ===================================================================== */

/* ---------- Classes d'illustration (reliées aux accents de saison) ---------- */
.illu-a { fill: var(--accent); }
.illu-a2 { fill: var(--accent-2); }
.illu-m { fill: var(--accent-motif); }
.illu-m2 { fill: var(--accent-motif-2); }
.illu-trait { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.illu-trait-a { stroke: var(--accent); }
.illu-sol { fill: var(--structure); opacity: .5; }
.illu-vide { stroke: var(--structure); stroke-width: 3; stroke-linecap: round; }
.pied__motif .illu-trait { stroke: var(--accent-2-sombre); }
.pied__motif .illu-m, .pied__motif .illu-m2 { fill: var(--accent-2-sombre); opacity: .7; }
.pied__motif .illu-a, .pied__motif .illu-a2 { fill: var(--accent-sombre); }
.bande-motif { margin-block: var(--espace-3); overflow: hidden; }
.bande-motif svg { width: 100%; height: 70px; }
.icone-texte { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.2em; color: var(--accent); }

/* ---------- En-têtes de page ---------- */
.page-tete { margin-bottom: var(--espace-4); }
.page-tete .chapo { margin-bottom: var(--espace-3); }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--espace-2); }
.puce {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: var(--cible); padding: .35rem 1rem;
  border: 1.5px solid var(--structure); border-radius: var(--rayon-pilule);
  background: var(--fond); color: var(--encre); text-decoration: none; cursor: pointer;
  font-size: var(--t-petit);
}
.puce svg { width: 18px; height: 18px; }
.puce:hover { border-color: var(--accent); color: var(--encre); background: var(--accent-surface-2); }
.puce[aria-pressed="true"] { background: var(--feuillage); border-color: var(--feuillage); color: var(--fond); }
.puce[aria-pressed="true"]::before { content: "✓"; font-weight: 600; }
.lien-bouton {
  display: inline-flex; align-items: center; gap: .35rem; min-height: var(--cible);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--feuillage); text-decoration: underline; text-underline-offset: .2em;
}
.lien-bouton svg { width: 18px; height: 18px; }
.lien-bouton:hover { color: var(--accent); }

/* =====================================================================
   AUJOURD'HUI
   ===================================================================== */
.jour { display: grid; gap: var(--espace-4); align-items: center; margin-top: var(--espace-2); }
.jour__titre { font-size: clamp(3rem, 2rem + 6vw, 6rem); font-weight: 400; letter-spacing: -.02em; margin-bottom: var(--espace-2); }
.jour__prenoms { font-size: 1.35rem; }
.jour__fete { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.jour__fleur { display: grid; gap: var(--espace-3); align-items: center; padding: var(--espace-4) var(--espace-3); }
.jour__glyphe { justify-self: center; width: 150px; }
.jour__fleur-nom { font-size: var(--t-h2); margin-bottom: .25rem; }
@media (min-width: 700px) {
  .jour__fleur { grid-template-columns: 150px 1fr; }
}
@media (min-width: 1100px) {
  .jour { grid-template-columns: 1fr 1.15fr; }
}

.saison { display: grid; gap: var(--espace-3); }
.fleurs-saison { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.fleurs-saison li:nth-child(3n + 2) { margin-top: 1.25rem; } /* rythme irrégulier, comme posé à la main */
.fleurs-saison a {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem 1.25rem .35rem .4rem; min-height: 72px;
  border-radius: var(--rayon-pilule); background: var(--fond-2);
  color: var(--encre); text-decoration: none; font-weight: 600;
  transition: background-color var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.fleurs-saison a:hover { background: var(--accent-surface-2); transform: translateY(-2px); }
.fleurs-saison__glyphe { width: 64px; height: 64px; background: var(--fond); border-radius: 50%; display: grid; place-items: center; }
.saison__lien { margin: 0; }

.suggestion { display: grid; gap: var(--espace-3); align-items: center; }
.suggestion__photo { max-width: 26rem; width: 100%; }
@media (min-width: 800px) {
  .suggestion { grid-template-columns: minmax(0, .9fr) 1.1fr; gap: var(--espace-5); }
}

.a-venir { display: grid; gap: var(--espace-3); }
.a-venir__liste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--structure); }
.a-venir__liste li { border-bottom: 1px solid var(--structure); }
.a-venir__liste a {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: center;
  min-height: 60px; padding: .5rem .5rem; color: var(--encre); text-decoration: none; border-radius: var(--rayon-s);
}
.a-venir__liste a:hover { background: var(--accent-surface); }
.a-venir__date { display: flex; flex-direction: column; line-height: 1.1; }
.a-venir__num { font-family: var(--police-titre); font-size: 1.6rem; }
.a-venir__js { font-size: var(--t-petit); color: var(--encre-douce); }
.a-venir__jours { font-size: var(--t-petit); text-align: right; }
.a-venir__fete a { background: var(--accent-surface-2); }
.a-venir__fete strong { color: var(--accent); }
@media (max-width: 520px) { .a-venir__jours { display: none; } .a-venir__liste a { grid-template-columns: 4rem 1fr; } }
@media (min-width: 960px) {
  .a-venir { grid-template-columns: 1fr 1.6fr; align-items: start; }
  .a-venir__tete { position: sticky; top: 6rem; }
}

.composer-appel { display: grid; gap: var(--espace-3); padding: var(--espace-4) var(--espace-3); }
.composer-appel h2 { color: var(--fond); }
.composer-appel .surtitre { color: var(--accent-sombre); }
.intentions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.intentions a {
  display: inline-flex; align-items: center; min-height: 48px; padding: .4rem 1.1rem;
  border: 1.5px solid color-mix(in srgb, var(--fond) 55%, var(--feuillage)); border-radius: var(--rayon-pilule);
  color: var(--fond); text-decoration: none;
}
.intentions a:hover { background: var(--fond); color: var(--feuillage); border-color: var(--fond); }
.intentions a:focus-visible { outline-color: var(--accent-sombre); }
.intentions__blanc { border-style: dashed !important; }
@media (min-width: 900px) { .composer-appel { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--espace-5) var(--espace-4); } }

.maison-apercu { display: grid; gap: var(--espace-3); align-items: center; }
.maison-apercu__photo { max-width: 22rem; }
@media (min-width: 800px) { .maison-apercu { grid-template-columns: 20rem 1fr; gap: var(--espace-5); } }

/* =====================================================================
   CALENDRIER
   ===================================================================== */
.calendrier-outils { display: grid; gap: var(--espace-3); align-items: end; margin-bottom: var(--espace-3); }
@media (min-width: 800px) { .calendrier-outils { grid-template-columns: auto minmax(16rem, 24rem); justify-content: space-between; } }
.bascule { display: inline-flex; padding: .3rem; border-radius: var(--rayon-pilule); background: var(--fond-2); gap: .25rem; width: max-content; }
.bascule__btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: var(--cible); padding: .3rem 1.2rem;
  border: 0; border-radius: var(--rayon-pilule); background: transparent; cursor: pointer; font-weight: 600; color: var(--encre-douce);
}
.bascule__btn svg { width: 20px; height: 20px; }
.bascule__btn[aria-pressed="true"] { background: var(--fond); color: var(--encre); box-shadow: 0 1px 0 var(--structure), 0 0 0 1px var(--structure); }
.recherche-prenom .libelle { display: block; margin-bottom: .35rem; }
.recherche-prenom .aide { font-size: var(--t-petit); color: var(--encre-douce); margin: .35rem 0 0; }
.liste-resultats-prenom { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.resultat-prenom {
  display: inline-flex; gap: .5rem; align-items: baseline; min-height: var(--cible); padding: .4rem 1rem;
  border: 1.5px solid var(--structure); border-radius: var(--rayon-pilule); background: var(--fond); cursor: pointer;
}
.resultat-prenom:hover { border-color: var(--accent); background: var(--accent-surface-2); }
.resultat-prenom span { color: var(--encre-douce); }
.resultats-titre { font-family: var(--police-texte); font-size: 1.125rem; font-weight: 600; }

.calendrier-corps { display: grid; gap: var(--espace-4); }
@media (min-width: 1100px) {
  .calendrier-corps { grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr); align-items: start; }
  .calendrier-corps.est-avenir { grid-template-columns: 1fr; }
  .detail-jour { position: sticky; top: 6rem; }
}
.mois-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--espace-2); }
.mois-tete h2 { margin: 0; text-align: center; }
.mois-tete .bouton-icone { font-size: 1.8rem; border: 1.5px solid var(--structure); width: 48px; height: 48px; }
.grille-mois { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.grille-mois th { font-weight: 600; font-size: var(--t-petit); color: var(--encre-douce); padding-bottom: .25rem; }
.grille-mois abbr { text-decoration: none; }
.grille-mois td { padding: 0; height: 100%; }
.jour-cellule {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  width: 100%; min-height: 52px; height: 100%; padding: .3rem .35rem;
  border: 1.5px solid transparent; border-radius: var(--rayon-s);
  background: var(--fond-2); color: var(--encre); cursor: pointer; text-align: left;
}
.jour-cellule:hover { border-color: var(--accent); }
.jour-cellule__num { font-weight: 600; line-height: 1.2; }
.jour-cellule__prenom { display: none; font-size: .95rem; line-height: 1.25; color: var(--encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.jour-cellule__marque { position: absolute; right: .3rem; top: .3rem; color: var(--accent); }
.jour-cellule__marque svg { width: 16px; height: 16px; }
.jour-cellule.a-fete { background: var(--accent-surface-2); }
.jour-cellule.est-aujourdhui { border-color: var(--feuillage); box-shadow: inset 0 0 0 1px var(--feuillage); }
.jour-cellule.est-aujourdhui .jour-cellule__num { text-decoration: underline; text-underline-offset: .2em; }
.jour-cellule[aria-pressed="true"] { background: var(--accent); color: var(--fond); border-color: var(--accent); }
.jour-cellule[aria-pressed="true"] .jour-cellule__prenom, .jour-cellule[aria-pressed="true"] .jour-cellule__marque { color: var(--fond); }
@media (min-width: 700px) {
  .jour-cellule { min-height: 76px; padding: .45rem .55rem; }
  .jour-cellule__prenom { display: block; font-size: var(--t-petit); }
}
.legende-calendrier { display: flex; gap: .4rem; align-items: flex-start; font-size: var(--t-petit); margin-top: var(--espace-2); }
.legende-marque { color: var(--accent); flex: none; }
.legende-marque svg { width: 18px; height: 18px; margin-top: .2rem; }
.detail-jour__titre { font-size: var(--t-h3); }
.detail-jour__fete { border-left: 3px solid var(--accent); padding-left: .9rem; margin-bottom: var(--espace-2); }
.detail-jour__fete p { margin-bottom: .35rem; }
.detail-jour__fleur { display: flex; gap: 1rem; align-items: center; margin-block: var(--espace-2); }
.detail-jour__glyphe { background: var(--fond); border-radius: 50%; padding: .5rem; flex: none; }
.detail-jour__nom { font-family: var(--police-titre); font-size: 1.6rem; margin: 0; }
.detail-jour .surtitre:empty { display: none; }
.note-source { margin-top: var(--espace-4); font-size: var(--t-petit); }

.avenir-liste { list-style: none; padding: 0; margin: 0; }
.avenir-jour { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--espace-2); padding-block: var(--espace-2); border-bottom: 1px solid var(--structure); }
.avenir-jour.a-fete { background: linear-gradient(90deg, var(--accent-surface-2), transparent 70%); border-radius: var(--rayon-m); padding-inline: .75rem; }
.avenir-jour__date { display: flex; flex-direction: column; line-height: 1.15; font-size: var(--t-petit); color: var(--encre-douce); }
.gros-num { font-family: var(--police-titre); font-size: 2.1rem; color: var(--encre); }
.avenir-jour__texte p { margin-bottom: .35rem; }
.avenir-jour__fete strong { color: var(--accent); font-size: 1.15rem; }
.avenir-jour__fleur { display: flex; align-items: center; gap: .5rem; }
.avenir-jour__glyphe { flex: none; }

/* =====================================================================
   COMPOSEUR
   ===================================================================== */
.composeur { display: grid; gap: var(--espace-4); }
.composeur__apercu { display: grid; gap: var(--espace-3); align-content: start; }
.apercu { padding: var(--espace-3); }
.apercu__svg { aspect-ratio: 400 / 470; max-height: 52vh; margin-inline: auto; }
.apercu__svg svg { width: 100%; height: 100%; }
.apercu__legende { text-align: center; margin: var(--espace-1) auto 0; font-size: var(--t-petit); color: var(--encre-douce); }
@media (min-width: 1000px) {
  .composeur { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .9fr); align-items: start; }
  .composeur__apercu { order: 2; position: sticky; top: 5.5rem; }
  .apercu__svg { max-height: 46vh; }
}
.recap { background: var(--fond-2); border-radius: var(--rayon-l); padding: var(--espace-3); }
.recap__titre { font-size: var(--t-h3); }
.recap__lignes { margin: 0 0 var(--espace-1); }
.recap__lignes div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .35rem; border-bottom: 1px dashed var(--structure); }
.recap__lignes dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap__total { font-weight: 600; font-size: 1.3rem; border-bottom: 0 !important; padding-top: .6rem !important; }
.recap__alerte { display: flex; gap: .5rem; align-items: flex-start; color: var(--accent); font-weight: 600; }
.recap__alerte svg { width: 22px; height: 22px; flex: none; margin-top: .15rem; }
.etape { padding: var(--espace-3) 0; border-top: 1px solid var(--structure); margin: 0; }
.etape:first-child { border-top: 0; padding-top: 0; }
.etape legend { display: flex; align-items: center; gap: .75rem; font-family: var(--police-titre); font-size: var(--t-h3); font-weight: 500; margin-bottom: .75rem; }
.etape__num {
  display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none;
  border-radius: 50%; background: var(--accent-surface-2); color: var(--accent);
  font-family: var(--police-texte); font-size: 1.1rem; font-weight: 600;
}
.etape .aide { color: var(--encre-douce); font-size: var(--t-petit); }
.etape select { max-width: 26rem; }
.choix-fleurs, .choix-feuillages { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.choix-fleur {
  border: 1.5px solid var(--structure); border-radius: var(--rayon-m);
  padding: .9rem 1rem; background: var(--fond);
  transition: border-color var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}
.choix-fleur.est-choisie { border-color: var(--feuillage); background: var(--feuillage-voile); }
.choix-fleur__tete { display: flex; gap: .9rem; align-items: flex-start; }
.choix-fleur__glyphe { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--fond-2); display: grid; place-items: center; }
.choix-fleur__nom { font-size: 1.3rem; margin: 0 0 .1rem; }
.choix-fleur__meta { margin: 0 0 .4rem; color: var(--encre-douce); font-size: var(--t-petit); }
.choix-fleur .liste-etiquettes { margin: 0; }
.choix-fleur__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--structure); }
.choix-fleur__ligne .quantite { margin-left: auto; background: var(--fond); }
.couleurs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
.couleur-unique { margin: 0; }
.pastille-couleur { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: var(--cible); padding: .2rem .8rem .2rem .3rem; border-radius: var(--rayon-pilule); border: 1.5px solid var(--structure); cursor: pointer; background: var(--fond); font-size: var(--t-petit); }
.pastille-couleur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille-couleur__rond { width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--encre) 30%, transparent); flex: none; }
.pastille-couleur:has(input:checked) { border-color: var(--feuillage); box-shadow: inset 0 0 0 1px var(--feuillage); font-weight: 600; }
.pastille-couleur:has(input:checked)::after { content: "✓"; color: var(--feuillage); }
.pastille-couleur:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ajouter-couleur { margin-top: .5rem; }
.hors-saison { margin-top: var(--espace-3); padding: var(--espace-2) var(--espace-3); background: var(--fond-2); border-radius: var(--rayon-m); }
.hors-saison summary { cursor: pointer; font-weight: 600; min-height: var(--cible); display: flex; align-items: center; }
.hors-saison ul { columns: 14rem; }
.choix-cartes--2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.choix-carte svg { width: 22px; height: 22px; display: inline-block; vertical-align: -.3em; margin-right: .35rem; color: var(--feuillage); }

/* =====================================================================
   FLEURS : dictionnaire & fiche
   ===================================================================== */
.dico { display: grid; gap: var(--espace-4); align-items: start; }
@media (min-width: 1000px) { .dico { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .dico__panneau--sens { position: sticky; top: 6rem; } }
.dico__panneau--sens { background: var(--accent-surface); padding: var(--espace-3); }
.liste-fleurs { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.entree-fleur { position: relative; }
.entree-fleur__lien {
  display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center;
  padding: .6rem 1rem .6rem .6rem; border-radius: var(--rayon-m);
  color: var(--encre); text-decoration: none; background: var(--fond);
  border: 1px solid transparent;
}
.entree-fleur__lien:hover { background: var(--fond-2); border-color: var(--structure); }
.entree-fleur__glyphe { width: 64px; height: 64px; border-radius: 50%; background: var(--fond-2); display: grid; place-items: center; }
.entree-fleur__texte { display: grid; gap: .1rem; padding-right: 7.5rem; }
.entree-fleur__nom { font-family: var(--police-titre); font-size: 1.35rem; }
.entree-fleur__sens { color: var(--encre); }
.entree-fleur__meta { font-size: var(--t-petit); color: var(--encre-douce); }
.entree-fleur > .etiquette { position: absolute; right: 1rem; top: .9rem; pointer-events: none; }
.entree-fleur--ample .entree-fleur__lien { background: var(--fond-2); }
@media (max-width: 560px) { .entree-fleur__texte { padding-right: 0; } .entree-fleur > .etiquette { position: static; margin: 0 0 .5rem 5.5rem; } }
.liste-sens { list-style: none; padding: 0; margin: 0 0 var(--espace-2); display: grid; gap: var(--espace-2); }
.liste-sens li { border-bottom: 1px solid var(--structure); padding-bottom: var(--espace-2); }
.liste-sens a { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; min-height: var(--cible); }
.liste-sens__glyphe { width: 44px; height: 44px; flex: none; }
.liste-sens p { margin-bottom: .35rem; }
.liste-sens__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.fiche-fleur__tete { display: grid; gap: var(--espace-3); align-items: center; margin-bottom: var(--espace-4); }
.fiche-fleur__illu { padding: var(--espace-4) var(--espace-3); display: grid; place-items: center; min-height: 14rem; }
.fiche-fleur__glyphes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.fiche-fleur__latin { font-size: 1.2rem; color: var(--encre-douce); margin-top: -.5rem; }
@media (min-width: 800px) { .fiche-fleur__tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--espace-5); } }
.fiche-fleur__section { margin-bottom: var(--espace-5); max-width: 56rem; }
.fiche-fleur__sens { font-family: var(--police-titre); font-size: 1.5rem; line-height: 1.45; max-width: 40rem; font-variation-settings: "SOFT" 100; }
.conseils { display: grid; gap: 1rem; margin: 0 0 var(--espace-2); }
@media (min-width: 700px) { .conseils { grid-template-columns: 1fr 1fr; } .conseils__item--large, .conseils__item--toxicite { grid-column: 1 / -1; } }
.conseils__item { background: var(--fond-2); border-radius: var(--rayon-m); padding: var(--espace-2) var(--espace-3); }
.conseils__item dt { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .35rem; }
.conseils__item dt svg { width: 22px; height: 22px; color: var(--feuillage); }
.conseils__item dd { margin: 0; }
.conseils__item--toxicite { background: var(--accent-surface); }
.toxicite { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 1.15rem; }

/* =====================================================================
   BOUTIQUE
   ===================================================================== */
.categorie__tete { display: grid; gap: 0 var(--espace-3); align-items: baseline; margin-bottom: var(--espace-2); }
@media (min-width: 800px) { .categorie__tete { grid-template-columns: auto 1fr; } .categorie__tete p { margin: 0; } }
.mosaique { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espace-3) var(--espace-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Rythme varié : le 1er élément de chaque rayon est plus large, un sur trois descend légèrement. */
.mosaique > .produit:first-child { grid-column: span 2; }
@media (min-width: 800px) { .mosaique > .produit:nth-child(3n + 2) { margin-top: var(--espace-3); } }
.produit { position: relative; }
.produit__lien { display: grid; gap: .6rem; color: var(--encre); text-decoration: none; border-radius: var(--rayon-l); }
.produit__lien .photo { transition: transform var(--duree) var(--courbe); }
.produit__lien:hover .photo { transform: scale(.985); }
.produit__lien:hover .produit__nom { text-decoration: underline; text-underline-offset: .2em; }
.produit__texte { display: grid; gap: .15rem; }
.produit__nom { font-family: var(--police-titre); font-size: 1.3rem; line-height: 1.25; }
.produit__desc { color: var(--encre); }
.produit__prix { font-weight: 600; }
.produit__etiquette { position: absolute; left: .75rem; top: .75rem; }
.produit__etiquette .etiquette { background: var(--fond); }
.produit--absent .photo { opacity: .55; }
.produit--absent .produit__prix { font-weight: 400; color: var(--encre-douce); }
.produit--grand .produit__nom { font-size: var(--t-h3); }
.mosaique--vedettes > .produit:first-child .produit__lien { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .mosaique--vedettes > .produit:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaique--vedettes > .produit:first-child .produit__lien { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--espace-3); }
}
.mosaique .photo { --ratio: 1 / 1 !important; }
.mosaique > .produit:first-child .photo { --ratio: 3 / 2 !important; }
.mosaique--vedettes .photo, .mosaique--vedettes > .produit:first-child .photo { --ratio: 4 / 5 !important; }
.mosaique .photo__brief { font-size: .95rem; } /* brief d'atelier (provisoire), texte non destiné au public */
.mosaique .produit:not(.produit--grand) .photo__brief { display: none; }

.fiche-produit { display: grid; gap: var(--espace-4); align-items: start; }
@media (min-width: 900px) { .fiche-produit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fiche-produit__visuel { position: sticky; top: 6rem; } }
.form-achat .choix-cartes { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.choix-carte__texte { display: flex; flex-direction: column; }
.form-achat__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); margin-bottom: var(--espace-1); }
.infos-reception { margin-top: var(--espace-3); }
.infos-reception p { display: flex; gap: .75rem; align-items: flex-start; }
.infos-reception p:last-child { margin: 0; }
.infos-reception svg { width: 26px; height: 26px; flex: none; color: var(--feuillage); }
.entretien-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espace-3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.entretien { background: var(--fond-2); border-radius: var(--rayon-l); padding: var(--espace-3); }
.entretien:nth-child(even) { border-radius: var(--rayon-m) var(--rayon-l) var(--rayon-m) var(--rayon-l); background: var(--accent-surface); }
.entretien__tete { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.entretien__tete h3 { margin: 0; }
.entretien dl { margin: 0 0 var(--espace-1); }
.entretien dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; padding-block: .35rem; }
.entretien dt { display: flex; gap: .35rem; align-items: flex-start; font-weight: 600; }
.entretien dt svg { width: 20px; height: 20px; flex: none; margin-top: .2rem; color: var(--feuillage); }
.entretien dd { margin: 0; }

/* =====================================================================
   PANIER
   ===================================================================== */
.panier { display: grid; gap: var(--espace-4); align-items: start; }
@media (min-width: 1000px) { .panier { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 1fr); } }
.liste-panier { list-style: none; padding: 0; margin: 0 0 var(--espace-2); }
.article-panier { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; padding-block: var(--espace-2); border-bottom: 1px solid var(--structure); }
.article-panier:first-child { border-top: 1px solid var(--structure); }
.article-panier__visuel { width: 88px; aspect-ratio: 400 / 470; border-radius: var(--rayon-m); background: var(--accent-surface); padding: .35rem; color: var(--accent-motif); }
.article-panier__visuel svg { width: 100%; height: 100%; }
.article-panier h3 { font-size: 1.3rem; margin-bottom: .25rem; }
.article-panier p { margin-bottom: .35rem; }
.article-panier__mot { font-style: italic; }
.article-panier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.article-panier__actions .prix { min-width: 5.5rem; }
.article-panier__actions .bouton svg { width: 18px; height: 18px; }
.panier__commande .choix-carte svg { width: 22px; height: 22px; }
.panier__commande fieldset { margin-bottom: var(--espace-2); }
.etape__titre { font-family: var(--police-titre); font-size: var(--t-h3); font-weight: 500; }
.bouton--large { width: 100%; }
.panier-vide { display: grid; gap: var(--espace-3); align-items: center; padding: var(--espace-4); }
.panier-vide__illu { width: 140px; color: var(--accent-motif); }
@media (min-width: 700px) { .panier-vide { grid-template-columns: 160px 1fr; } }
.confirmation { padding: var(--espace-4); }
[aria-invalid="true"] { border-color: var(--accent) !important; border-width: 2px !important; }

/* =====================================================================
   LA MAISON
   ===================================================================== */
.a-completer { background: var(--fond-2); border-bottom: 2px dashed var(--structure); padding-inline: .2em; font-style: italic; }
.a-completer-bloc { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border: 1.5px dashed var(--structure); border-radius: var(--rayon-m); color: var(--encre-douce); max-width: 44rem; }
.a-completer-bloc svg { width: 22px; height: 22px; flex: none; margin-top: .15rem; }
.maison-intro { display: grid; gap: var(--espace-4); align-items: center; }
@media (min-width: 900px) { .maison-intro { grid-template-columns: 1.1fr 1fr; } }
.artisane { display: grid; gap: var(--espace-3); align-items: start; }
@media (min-width: 900px) {
  .artisane { grid-template-columns: 1.2fr .8fr .8fr; }
  .artisane__atelier { margin-top: var(--espace-5); }
}
.artisane__texte { padding: var(--espace-4) var(--espace-3); }
.evenement { display: grid; gap: var(--espace-3); align-items: center; margin-block: var(--espace-4); }
.evenement .photo { max-width: 26rem; }
@media (min-width: 850px) {
  .evenement { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--espace-5); }
  .evenement--deuil { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .evenement--deuil .photo { justify-self: end; }
}
.contact__grille { display: grid; gap: var(--espace-4); margin-bottom: var(--espace-4); }
@media (min-width: 1000px) { .contact__grille { grid-template-columns: 1.1fr 1fr 1fr; } }
.contact h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; margin-top: var(--espace-2); }
.contact h3:first-child { margin-top: 0; }
.contact h3 svg { width: 24px; height: 24px; color: var(--feuillage); flex: none; }
.contact__coordonnees { background: var(--accent-surface); padding: var(--espace-3); }
.horaires { width: 100%; border-collapse: collapse; }
.horaires th, .horaires td { text-align: left; padding: .55rem .25rem; border-bottom: 1px solid var(--structure); vertical-align: top; }
.horaires th { font-weight: 600; }
.horaires .est-aujourdhui th, .horaires .est-aujourdhui td { background: var(--accent-surface-2); }
.communes { columns: 2 10rem; padding-left: 1.2em; }
.contact__formulaire { max-width: 40rem; }

/* =====================================================================
   RECHERCHE & PAGES LÉGALES
   ===================================================================== */
.recherche-page { max-width: 36rem; margin-bottom: var(--espace-2); }
.recherche-page .libelle { display: block; margin-bottom: .35rem; }
.resultats-bloc { margin-block: var(--espace-4); }
.resultats-bloc h2 { font-size: var(--t-h3); }
.page-legale section { margin-block: var(--espace-4); max-width: 48rem; }
.page-legale h2 { font-size: var(--t-h3); }
.fiche-legale { margin: 0; }
.fiche-legale div { display: grid; gap: .1rem 1rem; padding-block: .45rem; border-bottom: 1px solid var(--structure); }
@media (min-width: 640px) { .fiche-legale div { grid-template-columns: 13rem 1fr; } }
.fiche-legale dt { font-weight: 600; }
.fiche-legale dd { margin: 0; }

/* Illustration provisoire des produits (remplacée par la photo dès qu'elle existe) */
.photo__illu--fleurs { inset: 14% 10% 22%; display: flex; align-items: center; justify-content: center; }
.illu-produit__fleur { width: 46%; max-width: 9rem; flex: none; }
.illu-produit__fleur + .illu-produit__fleur { margin-left: -12%; }
.illu-produit__fleur:nth-child(2) { transform: translateY(-14%); }
.illu-produit__fleur svg { width: 100%; height: auto; }

/* Barre du composeur : prix et nombre de tiges toujours visibles sur mobile */
.barre-composeur {
  position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: var(--espace-3); padding: .6rem .6rem .6rem 1.1rem;
  background: var(--fond); border: 1.5px solid var(--feuillage); border-radius: var(--rayon-pilule);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--encre) 60%, transparent);
}
.barre-composeur p { margin: 0; }
.barre-composeur .bouton { min-height: var(--cible); padding-block: .3rem; }
@media (min-width: 1000px) { .barre-composeur { display: none; } }