/* ═══════════════════════════════════════════════════════════════════════
   EDV-SOIREE-DEGUSTATION-V1 — /soiree-degustation/ (2026-08-26)

   Fiche d'un atelier vue par un particulier. Bandes dans le même ordre que
   /particuliers/ (kraft, crème, teal, crème, bordeaux) : arriver ici depuis
   la page Particuliers ne doit pas donner l'impression d'avoir changé de
   site, contrairement à la fiche produit d'Entreprises.

   Aucune valeur brute : uniquement les jetons de la charte. Le cadre photo
   reste carré (1/1), comme les cartes d'A-8 et d'A-10 — les images de la
   colonne « photo AUTRES » sont en 1024×1024.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.soiree-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  align-items:center;
}

@media (min-width:960px){
  .soiree-hero__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

.soiree-hero__lede{
  max-width:60ch;
  font-size:var(--text-lg);
  color:var(--color-ink-2);
}

.soiree-hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-5) var(--space-8);
  margin:var(--space-6) 0 0;
  padding:var(--space-5) 0 0;
  border-top:var(--border-hair);
}
.soiree-hero__facts div{ margin:0; }
.soiree-hero__facts dt{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-ink-3);
}
.soiree-hero__facts dd{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-xl);
  line-height:1.2;
}

.soiree-hero__actions{ margin-top:var(--space-6); }

.soiree-hero__photo{
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:var(--color-line-soft);
}
.soiree-hero__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ── Ce qu'on déguste ─────────────────────────────────────────────────── */

.soiree-contenu__lede{
  max-width:64ch;
  font-size:var(--text-lg);
  color:var(--color-ink-2);
}

/* auto-fit et non deux colonnes fixes : mesure du 2026-08-26, la colonne
   « sélection du soir » n'est alimentee que sur 1 fiche sur 10 (NocoDB
   `lineup` vide ailleurs). Avec auto-fit, le bloc restant occupe la largeur
   au lieu de laisser une colonne vide a cote de lui. */
.soiree-contenu__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap:var(--space-8);
  margin-top:var(--space-10);
}
.soiree-bloc{ max-width:70ch; }

.soiree-bloc h3{
  margin:0 0 var(--space-4);
  font-size:var(--text-xl);
}
.soiree-bloc__chapo{
  margin:calc(-1 * var(--space-3)) 0 var(--space-5);
  font-size:var(--text-sm);
  font-style:italic;
  color:var(--color-ink-3);
}
.soiree-bloc__note{
  margin-top:var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-ink-3);
}

.soiree-liste{
  margin:0;
  padding:0;
  list-style:none;
}
.soiree-liste li{
  position:relative;
  padding:0 0 0 var(--space-5);
  margin:0 0 var(--space-3);
  font-size:var(--text-base);
}
.soiree-liste li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.5em;
  height:var(--border-hair);
  background:currentColor;
  opacity:.45;
}

.soiree-liste--vins li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-3);
  font-size:var(--text-lg);
  line-height:1.35;
}
.soiree-liste--vins .quoi{ font-family:var(--font-display); }
.soiree-liste--vins .couleur{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.04em;
  text-transform:lowercase;
  color:var(--color-bordeaux);
}

.soiree-liste--etapes{
  counter-reset:soiree-etape;
}
.soiree-liste--etapes li{
  counter-increment:soiree-etape;
  padding-left:var(--space-8);
  margin-bottom:var(--space-4);
}
.soiree-liste--etapes li::before{
  content:counter(soiree-etape,decimal-leading-zero);
  top:0;
  width:auto;
  height:auto;
  background:none;
  opacity:1;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--color-bordeaux);
}

.soiree-encart{
  margin-top:var(--space-10);
  padding:var(--space-6);
  border-left:3px solid var(--color-bordeaux);
  background:var(--color-kraft);
  border-radius:var(--radius-sm);
}
.soiree-encart .k{
  margin:0 0 var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-ink-3);
}
.soiree-encart p:last-child{
  margin:0;
  max-width:72ch;
}

/* ── Les rôles (bande teal) ───────────────────────────────────────────── */

.soiree-roles__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-8);
}
@media (min-width:760px){
  .soiree-roles__grid{ grid-template-columns:repeat(3,1fr); }
}

.soiree-role{
  padding:var(--space-6);
  border:1px solid currentColor;
  border-radius:var(--radius-sm);
}
.soiree-role .k{
  margin:0 0 var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
}
.soiree-role p:last-child{ margin:0; }

.soiree-roles__aside{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-8);
  padding-top:var(--space-8);
  border-top:1px solid currentColor;
}
@media (min-width:760px){
  .soiree-roles__aside{ grid-template-columns:repeat(3,1fr); }
}
.soiree-apport .k{
  margin:0 0 var(--space-4);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
}

/* ── Participation aux frais ──────────────────────────────────────────── */

.soiree-paf__lede{
  max-width:64ch;
  font-size:var(--text-lg);
  color:var(--color-ink-2);
}

.soiree-paf__paliers{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  margin:var(--space-8) 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:640px){
  .soiree-paf__paliers{ grid-template-columns:repeat(3,1fr); }
}

.soiree-palier{
  display:flex;
  flex-direction:column;
  gap:var(--space-2, .25rem);
  padding:var(--space-6);
  background:var(--color-kraft);
  border:var(--border-hair);
  border-radius:var(--radius-sm);
  text-align:center;
}
.soiree-palier__prix{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:1;
  color:var(--color-bordeaux);
}
.soiree-palier__unite{
  font-size:var(--text-sm);
  color:var(--color-ink-3);
}
.soiree-palier__seuil{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:var(--border-hair);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.04em;
}

.soiree-paf__note{
  max-width:72ch;
  margin-top:var(--space-8);
  font-size:var(--text-base);
  color:var(--color-ink-2);
}

/* ── Appel final ──────────────────────────────────────────────────────── */

.soiree-cta__lede{
  max-width:60ch;
  font-size:var(--text-lg);
}
.soiree-cta__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-6);
  margin-top:var(--space-6);
}
.soiree-cta__lien{
  color:inherit;
  text-underline-offset:.25em;
}

/* ── Mode « choisir un thème » (sans paramètre atelier) ───────────────── */

.soiree-index__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}
@media (min-width:600px){
  .soiree-index__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:960px){
  .soiree-index__grid{ grid-template-columns:repeat(3,1fr); }
}

.soiree-tuile{
  display:flex;
  flex-direction:column;
  background:var(--color-cream);
  border:var(--border-hair);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.soiree-tuile__lien{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:0 0 var(--space-5);
  color:inherit;
  text-decoration:none;
}
.soiree-tuile__lien:hover h2{ text-decoration:underline; }
.soiree-tuile__photo{
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--color-line-soft);
}
.soiree-tuile__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.soiree-tuile__photo--vide{
  display:grid;
  place-items:center;
  background:var(--color-kraft);
}
.soiree-tuile__photo--vide svg{
  width:22%;
  height:auto;
  fill:none;
  stroke:var(--color-bordeaux);
  stroke-width:2.4;
  opacity:.28;
}
.soiree-tuile h2{
  margin:var(--space-5) var(--space-5) 0;
  font-size:var(--text-xl);
  line-height:1.2;
}
.soiree-tuile__angle{
  margin:var(--space-3) var(--space-5) 0;
  font-size:var(--text-base);
  color:var(--color-ink-2);
}
.soiree-tuile__more{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  margin:var(--space-5) var(--space-5) 0;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.04em;
  color:var(--color-bordeaux);
}
.soiree-tuile__more .icon{
  width:1.1em;
  height:1.1em;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}