/* ═══════════════════════════════════════════════════════════════════════════
   EDV — /reserver-une-soiree/ (A-10, 2026-08-25)

   Feuille dédiée du gabarit page-reserver-une-soiree.php, chargée
   automatiquement par le nom du gabarit (functions.php §8).

   Volontairement autonome plutôt qu'un héritage de page-devis-atelier.css :
   les deux formulaires partagent une mécanique, pas un destin. Retoucher le
   parcours devis d'entreprise ne doit pas déplacer la page particuliers sans
   qu'on l'ait demandé. Le prix à payer est une centaine de lignes en double,
   assumé.

   Tous les jetons viennent d'edv-production.css — aucune couleur, aucune
   graisse et aucune échelle typographique n'est réinventée ici.
   ═══════════════════════════════════════════════════════════════════════ */

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

.reserv-hero h1{
  margin:var(--space-4) 0 0;
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:1.05;
}

.reserv-hero__lede{
  max-width:60ch;
  margin-top:var(--space-5);
  font-size:var(--text-lg);
  color:var(--color-ink-2);
}

.reserv-hero__stamps{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-6);
}

/* ── Colonnes ─────────────────────────────────────────────────────────── */

.reserv__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-10);
  align-items:start;
}

@media (min-width:960px){
  .reserv__grid{ grid-template-columns:5fr 7fr; }
  .reserv__aside{ position:sticky; top:var(--header-h); }
}

.reserv-card{
  padding:var(--space-6);
  background:var(--color-cream);
  border:var(--border-hair);
  border-radius:var(--radius-sm);
}
.reserv-card + .reserv-card{ margin-top:var(--space-5); }
.reserv-card--sobre{ background:transparent; }

.reserv-card .k{
  margin:0 0 var(--space-4);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--color-ink-3);
}
.reserv-card p{ margin:0 0 var(--space-3); color:var(--color-ink-2); font-size:var(--text-sm); }
.reserv-card p:last-child{ margin-bottom:0; }

.reserv-card__steps{
  margin:0;
  padding-left:1.2em;
  display:grid;
  gap:var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-ink-2);
}
.reserv-card__steps strong{ color:var(--color-ink); }

/* ── Bandeaux de retour ───────────────────────────────────────────────── */

.reserv-notice{
  margin:0 0 var(--space-6);
  padding:var(--space-5);
  border-radius:var(--radius-sm);
  border-left:4px solid var(--color-teal-deep);
  background:var(--color-cream);
}
.reserv-notice--ko{ border-left-color:var(--color-bordeaux); }
.reserv-notice .k{
  margin:0 0 var(--space-2);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}
.reserv-notice p{ margin:0; font-size:var(--text-sm); }
.reserv-notice ul{ margin:var(--space-3) 0 0; padding-left:1.2em; font-size:var(--text-sm); }

/* ── Formulaire ───────────────────────────────────────────────────────── */

/* Pot de miel : hors écran, jamais display:none — un robot lit le CSS. */
.reserv-form__hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.reserv-form fieldset{
  margin:0 0 var(--space-10);
  padding:0;
  border:0;
}

.reserv-form legend{
  display:flex;
  align-items:baseline;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-3);
  width:100%;
  border-bottom:var(--border-firm) solid var(--color-line);
}
.reserv-form legend .step{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--color-ink-3);
}
.reserv-form legend .ttl{
  font-family:var(--font-display);
  font-size:var(--text-xl);
}

.reserv-form .field-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
}
@media (min-width:600px){
  .reserv-form .field-grid{ grid-template-columns:repeat(2,1fr); }
  .reserv-form .field.full{ grid-column:1 / -1; }
}

.reserv-form .field{ display:block; min-width:0; }

.reserv-form .label{
  display:block;
  margin-bottom:var(--space-2);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--color-ink-3);
}
.reserv-form .label .opt{
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  color:var(--color-ink-3);
}

.reserv-form input[type="text"],
.reserv-form input[type="tel"],
.reserv-form input[type="email"],
.reserv-form input[type="number"],
.reserv-form textarea{
  width:100%;
  padding:10px 12px;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-ink);
  background:var(--color-cream);
  border:var(--border-hair);
  border-radius:var(--radius-sm);
}
.reserv-form textarea{ resize:vertical; }
.reserv-form input:focus-visible,
.reserv-form textarea:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

/* Pills radio — même vocabulaire que /devis-atelier/. */
.reserv-form .pills{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.reserv-form .pills label{ display:inline-flex; }
.reserv-form .pills input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.reserv-form .pills span{
  display:inline-block;
  padding:7px 12px;
  font-size:var(--text-sm);
  border:var(--border-hair);
  border-radius:var(--radius-pill);
  cursor:pointer;
}
.reserv-form .pills input:checked + span{
  background:var(--color-teal-deep);
  border-color:var(--color-teal-deep);
  color:var(--color-cream);
}
.reserv-form .pills input:focus-visible + span{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

.reserv-form .consent{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-6);
  padding-top:var(--space-5);
  border-top:var(--border-hair);
  font-size:var(--text-sm);
  color:var(--color-ink-2);
}
.reserv-form .consent input{ margin-top:3px; flex:0 0 auto; }

.reserv-form__submit{ margin-top:var(--space-6); }
.reserv-form__submit .icon{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.reserv-form__fine{
  margin-top:var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-ink-3);
}


/* ═══════════════════════════════════════════════════════════════════════
   EDV-RESERV-PAF-V1 — /reserver-une-soiree/ (2026-08-26)

   Barème de participation aux frais, posé sous le champ « Nombre de
   convives » : c'est le moment exact où la question se pose à celui qui
   remplit le formulaire. Chiffres donnés par Romain le 2026-08-26, définis
   une seule fois dans functions.php (edv_soiree_paf()).
   ═══════════════════════════════════════════════════════════════════════ */

.reserv-paf{
  margin-top:var(--space-4);
  padding:var(--space-5);
  background:var(--color-kraft);
  border:var(--border-hair);
  border-radius:var(--radius-sm);
}

.reserv-paf__k{
  margin:0 0 var(--space-4);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-ink-3);
}

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

.reserv-paf__paliers li{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-cream);
  border:var(--border-hair);
  border-radius:var(--radius-sm);
}
@media (min-width:520px){
  .reserv-paf__paliers li{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
}

.reserv-paf__paliers .p{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  line-height:1.1;
  color:var(--color-bordeaux);
}
.reserv-paf__paliers .s{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--color-ink-3);
}

.reserv-paf__note{
  margin:var(--space-4) 0 0;
  font-size:var(--text-sm);
  color:var(--color-ink-2);
}


/* ═══════════════════════════════════════════════════════════════════════
   EDV-RESERV-CONSEIL-V1 — /reserver-une-soiree/ (2026-08-26)

   Complement de EDV-RESERV-PAF-V1, depose en second lot : le conseil
   d'organisation demande par Romain apres coup.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le conseil d'organisation, sous le bareme : la question « qui prepare a
   manger ? » se pose au meme moment que « combien ca coute ». Traite comme
   une information, pas comme une consigne — bord teal, pas de cadre plein. */
.reserv-info{
  margin-top:var(--space-5);
  padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left:3px solid var(--color-teal-deep);
  background:var(--color-cream);
}
.reserv-info__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);
}
.reserv-info p:last-child{
  margin:0;
  max-width:70ch;
  font-size:var(--text-sm);
  color:var(--color-ink-2);
}

/* ── A-11 (2026-08-26) — case a cocher "Soiree en anglais" — EDV-A11-LANGUE-V1 */
.reserv-form .lang-choice{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-2);
}
.reserv-form .lang-choice label{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  font-size:var(--text-sm);
  color:var(--color-ink-2);
  cursor:pointer;
}
.reserv-form .lang-choice input{ margin-top:3px; flex:0 0 auto; }