/* ═══════════════════════════════════════════════════════════════════
   style.css — Formulaire traiteur haut de gamme
   ───────────────────────────────────────────────────────────────────
   PALETTE DE COULEURS
   --rose-bg        : #E0BAB5  → fond global de la page
   --blanc          : #FFFFFF  → fond des sections et inputs
   --marron-titre   : #3E2723  → textes, titres principaux
   --marron-sombre  : #5C2A00  → accents forts, totaux
   --marron-moyen   : #8B5E3C  → textes secondaires, labels
   --marron-clair   : #D4A98A  → bordures, séparateurs
   --rose-input     : #FFF5F5  → fond des inputs (rose très pâle)
   --rose-section   : #FAF0EE  → fond léger pour alternance
   --vert-succes    : #2D6A4F  → remises, messages OK
   --rouge-alerte   : #B71C1C  → erreurs, plafond dépassé
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   0. VARIABLES CSS & RESET
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* Couleurs principales */
  --rose-bg:        #E0BAB5;
  --blanc:          #FFFFFF;
  --marron-titre:   #3E2723;
  --marron-sombre:  #5C2A00;
  --marron-moyen:   #8B5E3C;
  --marron-clair:   #D4A98A;
  --marron-pale:    #F0E0D6;
  --rose-input:     #FFF5F5;
  --rose-section:   #FAF0EE;
  --rose-hover:     #F5E0DA;
  --vert-succes:    #2D6A4F;
  --rouge-alerte:   #B71C1C;
  --orange-warn:    #7A4A00;

  /* Typographie */
  --font-serif:     'Georgia', 'Times New Roman', serif;
  --font-sans:      system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espacements */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --radius-xl:      20px;

  /* Ombres */
  --shadow-card:    0 2px 12px rgba(62, 39, 35, .08);
  --shadow-hover:   0 6px 24px rgba(62, 39, 35, .14);
  --shadow-input:   0 0 0 3px rgba(212, 169, 138, .30);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Header layout */
.site-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}

/* Logo */
.site-header img,
img[src*="Logo-Traiteur"] {
  width: clamp(80px, 18%, 140px);
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
}

/* Texte du header — 3 niveaux distincts */
.header-brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brand-name {
  margin: 0 0 0.25rem 0;
}

.brand-tagline {
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--marron-titre);
  /* Fond global : rose doux #E0BAB5 avec léger grain */
  background-color: var(--rose-bg);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139,94,60,.08) 0%, transparent 50%);
  min-height: 100vh;
  padding: 2.5rem 1rem 4rem;
}

/* ───────────────────────────────────────────────────────────────────
   1. CONTENEUR DE PAGE
   Largeur max 860px, centré, avec légère ombre portée
   ─────────────────────────────────────────────────────────────────── */
.page-wrapper {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* gap géré par les sections elles-mêmes */
}

/* ───────────────────────────────────────────────────────────────────
   2. EN-TÊTE : LOGO + NOM DE L'ENTREPRISE
   ─────────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--blanc);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-card);
  /* Ligne décorative en bas */
  border-bottom: 3px solid var(--marron-clair);
  margin-bottom: 0;
}

.logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  /* Placeholder grisé si l'image ne charge pas */
  background: var(--rose-section);
  border: 1px dashed var(--marron-clair);
  /* Taille minimum pour être visible même sans image */
  min-width: 72px;
}

.header-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* NIVEAU 1 — Nom entreprise : grand, fin, sérif */
.brand-company-name {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-weight: 300 !important;
  font-size: 38px !important;
  letter-spacing: 0.04em;
  color: var(--marron-titre);
  line-height: 1.15;
  display: block;
  margin-bottom: 8px;
}

/* NIVEAU 2 — Sous-titre : taille intermédiaire, lisible */
.brand-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--marron-moyen);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 0 10px 0;
  text-align: justify;
}

/* NIVEAU 3 — Mentions légales : tout petit */
.header-legal {
  font-size: 10px;
  color: var(--marron-clair);
  line-height: 1.5;
  text-align: justify;
}
.header-legal a {
  color: var(--marron-clair);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.brand-tagline {
  font-size: 13px;
  color: var(--marron-moyen);
  font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────
   3. SECTIONS DU FORMULAIRE
   Fond blanc épuré, coins arrondis, ombre douce
   ─────────────────────────────────────────────────────────────────── */
.form-section {
  background: var(--blanc);
  border-radius: 0;          /* les sections s'empilent sans espacement */
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border-top: 1px solid var(--marron-pale);
  transition: box-shadow .2s;
}

/* Première section après l'en-tête : pas de bordure en haut */
.form-section:first-of-type {
  border-top: none;
}

/* Dernière section : coins arrondis en bas si pas de legal-block après */
.form-section:last-of-type {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* En-tête de chaque section */
.section-header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--marron-clair);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  /* Léger halo coloré */
  box-shadow: 0 0 0 4px rgba(212, 169, 138, .25);
}

.section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--marron-sombre);
  line-height: 1.3;
  margin-top: 3px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--marron-moyen);
  margin-top: .4rem;
  line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────
   4. GRILLES DE CHAMPS
   .two-cols → 2 colonnes sur desktop, 1 sur mobile
   .one-col  → toujours pleine largeur
   ─────────────────────────────────────────────────────────────────── */
.field-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.field-row.two-cols {
  grid-template-columns: 1fr 1fr;
}

.field-row.one-col {
  grid-template-columns: 1fr;
}

.field-row:last-child {
  margin-bottom: 0;
}

/* ───────────────────────────────────────────────────────────────────
   5. CHAMPS DE SAISIE
   Fond blanc, bordure fine marron-clair, focus coloré
   ─────────────────────────────────────────────────────────────────── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

label.field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--marron-moyen);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--marron-clair);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.required {
  color: #C62828;
  margin-left: 2px;
}

/* Inputs, selects, textareas — fond blanc, bordure marron-clair */
.field-input,
input[type="text"].field-input,
input[type="email"].field-input,
input[type="tel"].field-input,
input[type="date"].field-input,
input[type="time"].field-input,
input[type="number"].field-input,
select.field-input,
textarea.field-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--blanc);
  border: 1.5px solid var(--marron-clair);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--marron-titre);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
}

.field-input:hover {
  border-color: var(--marron-moyen);
  background: var(--rose-input);
}

.field-input:focus {
  border-color: var(--marron-sombre);
  background: var(--blanc);
  box-shadow: var(--shadow-input);
}

.field-input::placeholder {
  color: #C4A08A;
  font-style: italic;
}

/* Select — flèche personnalisée */
select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B5E3C' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Date & time — couleur de l'icône calendrier */
input[type="date"].field-input,
input[type="time"].field-input {
  cursor: pointer;
}
input[type="date"].field-input::-webkit-calendar-picker-indicator,
input[type="time"].field-input::-webkit-calendar-picker-indicator {
  opacity: .6;
  cursor: pointer;
  filter: sepia(1) saturate(0.5) hue-rotate(330deg);
}

/* Textarea */
textarea.field-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────
   6. SECTION 3 — SIMULATEUR (curseur, badges, grille récap)
   ─────────────────────────────────────────────────────────────────── */

/* Contrôle participants */
.participants-control {
  margin-bottom: 1.5rem;
}

/* Ligne curseur + input numérique */
.range-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}

/* Curseur de plage */
.range-slider {
  flex: 1;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--marron-clair) 0%, var(--marron-clair) var(--val, 5%), var(--marron-pale) var(--val, 5%), var(--marron-pale) 100%);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  transition: background .2s;
}

.range-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--marron-sombre);
  border: 3px solid var(--blanc);
  box-shadow: 0 2px 6px rgba(92,42,0,.35);
  cursor: grab;
  transition: transform .15s, box-shadow .15s;
}
.range-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(92,42,0,.45);
}
.range-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--marron-sombre);
  border: 3px solid var(--blanc);
  box-shadow: 0 2px 6px rgba(92,42,0,.35);
  cursor: grab;
}

/* Champ numérique à côté du curseur */
.range-number-input {
  width: 80px;
  padding: 8px 10px;
  background: var(--blanc);
  border: 1.5px solid var(--marron-clair);
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 700;
  color: var(--marron-sombre);
  text-align: center;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -moz-appearance: textfield;
}
.range-number-input::-webkit-inner-spin-button,
.range-number-input::-webkit-outer-spin-button { display: none; }
.range-number-input:focus {
  border-color: var(--marron-sombre);
  box-shadow: var(--shadow-input);
}

.range-unit {
  font-size: 13px;
  color: var(--marron-moyen);
  white-space: nowrap;
}

/* Badges de réduction */
.discount-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: var(--marron-pale);
  color: var(--marron-moyen);
  border: 1px solid var(--marron-clair);
  transition: all .2s;
}
.discount-badge.active {
  background: var(--marron-sombre);
  color: var(--blanc);
  border-color: var(--marron-sombre);
  box-shadow: 0 2px 8px rgba(92,42,0,.25);
}

/* Grille récapitulative 4 blocs */
.recap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1.25rem;
}

.recap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1rem .75rem;
  background: var(--rose-section);
  border: 1.5px solid var(--marron-pale);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.recap-card:hover {
  border-color: var(--marron-clair);
  box-shadow: var(--shadow-card);
}

.recap-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--marron-moyen);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.recap-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--marron-sombre);
  line-height: 1.1;
}

/* Bloc total — mise en valeur */
.recap-card--total {
  background: var(--marron-sombre);
  border-color: var(--marron-sombre);
}
.recap-card--total .recap-card-label {
  color: rgba(255,255,255,.75);
}
.recap-card--total .recap-card-value {
  color: var(--blanc);
}

/* ───────────────────────────────────────────────────────────────────
   7. ALERTES (erreur / succès / avertissement)
   ─────────────────────────────────────────────────────────────────── */
.alert {
  display: none;  /* masquées par défaut, affichées par JS */
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 1rem;
}

.alert--error {
  background: #FFEBEE;
  color: var(--rouge-alerte);
  border: 1.5px solid #EF9A9A;
}
.alert--warning {
  background: #FFF8E1;
  color: var(--orange-warn);
  border: 1.5px solid #FFE082;
}
.alert--success {
  background: #E8F5E9;
  color: var(--vert-succes);
  border: 1.5px solid #A5D6A7;
}

/* ───────────────────────────────────────────────────────────────────
   8. SECTION 4 — PRODUITS & ALLERGÈNES
   ─────────────────────────────────────────────────────────────────── */

/* Catégorie (salé / sucré) */
.products-category {
  margin-bottom: 2rem;
}
.products-category:last-of-type {
  margin-bottom: 1rem;
}

.category-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--marron-sombre);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--marron-pale);
}

.category-icon {
  font-size: 18px;
}

/* Tableau produits */
.products-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--marron-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* En-tête du tableau */
.product-row--header {
  background: var(--marron-sombre) !important;
  color: var(--blanc);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px;
  cursor: default;
}
.product-row--header:hover {
  background: var(--marron-sombre) !important;
}

/* Ligne de produit */
.product-row {
  display: grid;
  /*  check | nom | allergènes | prix | qty | sous-total  */
  grid-template-columns: 48px 1fr 130px 72px 130px 80px;
  align-items: center;
  gap: .5rem;
  padding: 10px 12px;
  background: var(--blanc);
  border-bottom: 1px solid var(--marron-pale);
  transition: background .15s;
  cursor: pointer;
}
.product-row:last-child {
  border-bottom: none;
}
.product-row:hover:not(.product-row--header) {
  background: var(--rose-hover);
}

/* Ligne sélectionnée */
.product-row.is-selected {
  background: #FFF0EC;
  border-left: 3px solid var(--marron-clair);
}

/* Colonnes */
.col-check {
  display: flex;
  align-items: center;
  gap: 4px;
}

.col-name {
  font-size: 13px;
  color: var(--marron-titre);
  line-height: 1.4;
  cursor: pointer;
}

.col-allerg {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.col-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--marron-sombre);
  text-align: right;
  white-space: nowrap;
}

.col-qty {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.col-subtotal {
  font-size: 13px;
  font-weight: 600;
  color: var(--vert-succes);
  text-align: right;
  white-space: nowrap;
}

/* Case à cocher produit */
.product-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--marron-sombre);
  cursor: pointer;
  flex-shrink: 0;
}

/* Étoile produit phare */
.phare-star {
  font-size: 11px;
  color: #BF8A00;
  line-height: 1;
  title: "Produit phare";
}

/* Boutons +/− quantité */
.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--marron-clair);
  background: var(--blanc);
  color: var(--marron-sombre);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.qty-btn:hover {
  background: var(--marron-clair);
  color: var(--blanc);
  border-color: var(--marron-clair);
}
.qty-btn:active {
  transform: scale(.92);
}

/* Champ quantité */
.qty-input {
  width: 44px;
  height: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--marron-titre);
  border: 1.5px solid var(--marron-clair);
  border-radius: var(--radius-sm);
  background: var(--blanc);
  outline: none;
  padding: 0 2px;
  -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { display: none; }
.qty-input:focus {
  border-color: var(--marron-sombre);
  box-shadow: 0 0 0 2px rgba(212,169,138,.3);
}

/* ───────────────────────────────────────────────────────────────────
   9. BADGES ALLERGÈNES
   Chaque type d'allergène a sa propre couleur de fond / texte
   ─────────────────────────────────────────────────────────────────── */
.allerg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: help;
  flex-shrink: 0;
  transition: transform .1s;
  border: 1px solid transparent;
}
.allerg-badge:hover {
  transform: scale(1.2);
  z-index: 1;
}

/* Gluten  */
.allerg-gluten   { background: #FFF3CD; color: #856404; border-color: #FFEAA7; }
/* Lait / Lactose */
.allerg-lait     { background: #E3F2FD; color: #0D47A1; border-color: #BBDEFB; }
/* Œufs  */
.allerg-oeufs    { background: #FFF8E1; color: #F57F17; border-color: #FFE082; }
/* Fruits à coque / Arachides */
.allerg-noix     { background: #EFEBE9; color: #4E342E; border-color: #D7CCC8; }
/* Poisson */
.allerg-poisson  { background: #E0F7FA; color: #006064; border-color: #B2EBF2; }
/* Moutarde */
.allerg-moutarde { background: #F9FBE7; color: #558B2F; border-color: #DCEDC8; }
/* Céleri */
.allerg-celeri   { background: #F1F8E9; color: #33691E; border-color: #C5E1A5; }
/* Mollusques */
.allerg-mollusques { background: #E8EAF6; color: #283593; border-color: #C5CAE9; }
/* Soja */
.allerg-soja     { background: #FCE4EC; color: #880E4F; border-color: #F8BBD0; }
/* Traces supposées / manipulations croisées */
.allerg-traces   { background: #EEEEEE; color: #424242; border-color: #BDBDBD; }

/* Légende des badges (bas de section 4) */
.allerg-legend {
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: var(--rose-section);
  border-radius: var(--radius-md);
  border: 1px solid var(--marron-pale);
}
.allerg-legend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--marron-moyen);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.allerg-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  font-size: 12px;
  color: var(--marron-moyen);
}
.allerg-legend-items span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Sous-total par catégorie */
.category-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  margin-top: .5rem;
  font-size: 14px;
  color: var(--marron-moyen);
  border-top: 1.5px solid var(--marron-pale);
}
.category-total strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--marron-sombre);
}

/* ───────────────────────────────────────────────────────────────────
   10. SECTION 5 — RÉCAPITULATIF FINANCIER
   ─────────────────────────────────────────────────────────────────── */
.financial-recap {
  background: var(--rose-section);
  border: 1.5px solid var(--marron-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Ligne de récap financier (injectée par JS) */
.fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--marron-pale);
  color: var(--marron-titre);
}
.fin-row:last-child { border-bottom: none; }

.fin-row .fin-label  { color: var(--marron-moyen); }
.fin-row .fin-amount { font-weight: 600; color: var(--marron-sombre); }

/* Ligne totale TTC */
.fin-row--total {
  background: var(--marron-sombre);
  border-color: var(--marron-sombre);
}
.fin-row--total .fin-label  { color: rgba(255,255,255,.80); font-weight: 600; font-size: 15px; }
.fin-row--total .fin-amount { color: var(--blanc); font-size: 18px; font-weight: 700; }

/* Remise (en vert) */
.fin-row--remise .fin-label,
.fin-row--remise .fin-amount { color: var(--vert-succes); }

/* ───────────────────────────────────────────────────────────────────
   11. BLOC JURIDIQUE & CGV
   ─────────────────────────────────────────────────────────────────── */
.legal-block {
  background: var(--blanc);
  border-top: 1px solid var(--marron-pale);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-card);
}

/* Encadré avertissement allergènes / traces */
.legal-allergen-notice {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #FFF8E1;
  border: 1.5px solid #FFD54F;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 13px;
  color: var(--orange-warn);
  line-height: 1.6;
}
.notice-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Case à cocher CGV */
.cgv-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 0;
  font-size: 13.5px;
  color: var(--marron-titre);
  border-bottom: 1px solid var(--marron-pale);
  margin-bottom: .75rem;
}
.cgv-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--marron-sombre);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.cgv-link {
  color: var(--marron-sombre);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cgv-link:hover { color: var(--marron-moyen); }

/* Liste des points CGV */
.cgv-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: 12.5px;
  color: var(--marron-moyen);
  padding-left: .25rem;
}
.cgv-list li {
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.55;
}
.cgv-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--marron-clair);
  font-weight: 700;
}
.cgv-list strong { color: var(--marron-titre); }

/* ───────────────────────────────────────────────────────────────────
   12. BOUTONS D'ACTION
   ─────────────────────────────────────────────────────────────────── */
.form-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 2rem 1.5rem;
  border-radius: 0;
  
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex: 1;
  min-width: 220px;
  padding: 14px 24px;
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  outline: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  letter-spacing: .01em;
}
.btn:active { transform: scale(.97); }

.btn-icon {
  font-size: 17px;
  line-height: 1;
}

/* Bouton principal — marron soutenu */
.btn--primary {
  background: var(--marron-sombre);
  color: var(--blanc);
  box-shadow: 0 4px 14px rgba(92,42,0,.30);
}
.btn--primary:hover {
  background: var(--marron-titre);
  box-shadow: 0 6px 20px rgba(62,39,35,.40);
}
.btn--primary:disabled {
  background: var(--marron-clair);
  cursor: not-allowed;
  box-shadow: none;
}

/* Bouton secondaire — rose poudré élégant */
.btn--secondary {
  background: var(--blanc);
  color: var(--marron-sombre);
  border: 2px solid var(--marron-clair);
  box-shadow: var(--shadow-card);
}
.btn--secondary:hover {
  background: var(--rose-hover);
  border-color: var(--marron-moyen);
  box-shadow: var(--shadow-hover);
}

/* ───────────────────────────────────────────────────────────────────
   13. SCROLLBAR PERSONNALISÉE (navigateurs WebKit)
   ─────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--rose-section); }
::-webkit-scrollbar-thumb { background: var(--marron-clair); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--marron-moyen); }

/* ───────────────────────────────────────────────────────────────────
   14. UTILITAIRES
   ─────────────────────────────────────────────────────────────────── */

/* Masqué visuellement mais accessible aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Séparateur horizontal */
.divider {
  height: 1px;
  background: var(--marron-pale);
  margin: 1.5rem 0;
  border: none;
}

/* ═══════════════════════════════════════════════════════════════════
   15. RESPONSIVE — MOBILE & TABLETTE
   Breakpoint principal : 640px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  body { padding: 1.5rem .75rem 3rem; }

  .recap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  /* En-tête : logo au-dessus du texte */
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.25rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .brand-name    { font-size: 16px; }
  .logo-img      { height: 56px; }

  /* Sections : padding réduit */
  .form-section  { padding: 1.25rem; }
  .legal-block   { padding: 1.25rem; }
  .form-actions  { padding: 1.25rem; }

  /* Colonnes → 1 colonne sur mobile */
  .field-row.two-cols {
    grid-template-columns: 1fr;
  }

  /* Curseur */
  .range-row {
    flex-wrap: wrap;
  }
  .range-number-input { width: 70px; }

  /* Grille récap → 2 colonnes puis 2×2 */
  .recap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .recap-card-value { font-size: 20px; }

  /* Tableau produits : colonnes simplifiées sur mobile */
  .product-row {
    grid-template-columns: 36px 1fr 80px;
    grid-template-areas: