/* Chocoléo · styles partagés (landing, espace chocolatier, app cliente, kit) */

:root {
  --lin: #F5EEE4;
  --creme: #FCF8F2;
  --blanc: #FFFDF9;
  --sable: #E8DDCD;
  --sable-2: #D8C7B0;
  --cacao: #2E1C14;
  --brun: #5B4131;
  --lait: #8B5E3C;
  --cuivre: #9A461A;
  --cuivre-2: #843A13;
  --cuivre-pale: #F3E1D2;
  --or: #C39855;
  --vert: #36622F;
  --vert-pale: #E3EDDA;
  --rouge: #9E2F1D;
  --rouge-pale: #F6DED7;
  --ombre: 0 1px 2px rgba(46, 28, 20, .06), 0 10px 28px -14px rgba(46, 28, 20, .28);
  --ombre-2: 0 18px 50px -20px rgba(46, 28, 20, .45);
  --r: 16px;
  --r-s: 10px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lin);
  color: var(--cacao);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cuivre); text-underline-offset: 3px; }
a:hover { color: var(--cuivre-2); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 560;
  font-variation-settings: 'SOFT' 60, 'opsz' 72;
  letter-spacing: -0.012em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 420; color: var(--lait); }
p { margin: 0; text-wrap: pretty; }

.muted { color: var(--brun); }
.petit { font-size: 14px; }
.tres-petit { font-size: 12.5px; letter-spacing: .01em; }
.surtitre {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lait);
}
.num { font-variant-numeric: tabular-nums; }
.cache { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--cuivre);
  color: #FFF8F1;
  font-weight: 650;
  font-size: 15.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--cuivre-2); color: #FFF8F1; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.clair { background: transparent; color: var(--cacao); box-shadow: inset 0 0 0 1.5px var(--sable-2); }
.btn.clair:hover { background: var(--creme); color: var(--cacao); box-shadow: inset 0 0 0 1.5px var(--lait); }
.btn.creme { background: var(--blanc); color: var(--cacao); }
.btn.creme:hover { background: #fff; }
.btn.petit { min-height: 38px; padding: 7px 15px; font-size: 14.5px; }
.btn.large { width: 100%; }
.btn.danger { background: transparent; color: var(--rouge); box-shadow: inset 0 0 0 1.5px #E3B8AE; }
.btn.danger:hover { background: var(--rouge-pale); color: var(--rouge); }
.lien { background: none; border: 0; padding: 0; color: var(--cuivre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* Cartes */
.carte {
  background: var(--creme);
  border: 1px solid var(--sable);
  border-radius: var(--r);
  box-shadow: var(--ombre);
}

/* Pastilles */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--sable);
  color: var(--cacao);
  white-space: nowrap;
}
.pastille.cuivre { background: var(--cuivre-pale); color: var(--cuivre-2); }
.pastille.vert { background: var(--vert-pale); color: var(--vert); }
.pastille.rouge { background: var(--rouge-pale); color: var(--rouge); }

/* Formulaires */
.champ { display: grid; gap: 6px; }
.champ > span, .champ > label { font-size: 14px; font-weight: 600; color: var(--brun); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1.5px solid var(--sable-2);
  border-radius: var(--r-s);
  background: var(--blanc);
  color: var(--cacao);
  font: inherit;
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(154, 70, 26, .16); }
input::placeholder, textarea::placeholder { color: #9A8474; }
.case { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cuivre); flex: none; }

.erreur { color: var(--rouge); font-size: 14.5px; font-weight: 600; }
.ok { color: var(--vert); font-size: 14.5px; font-weight: 600; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-b));
  transform: translate(-50%, 20px);
  max-width: min(92vw, 440px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--cacao);
  color: #FBF3EA;
  font-size: 15px;
  font-weight: 550;
  box-shadow: var(--ombre-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  text-align: center;
}
.toast.vu { opacity: 1; transform: translate(-50%, 0); }

/* Feuille (bas d'écran sur mobile, centrée sur grand écran) */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(46, 28, 20, .42);
  opacity: 0;
  transition: opacity .2s;
  z-index: 60;
}
.voile.vu { opacity: 1; }
.feuille {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--lin);
  border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(24px + var(--safe-b));
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  z-index: 61;
  box-shadow: var(--ombre-2);
}
.feuille.vu { transform: translateY(0); }
.feuille .poignee { width: 42px; height: 5px; border-radius: 3px; background: var(--sable-2); margin: 0 auto 12px; }
.feuille .fermer-zone { position: sticky; top: 0; height: 0; z-index: 3; display: flex; justify-content: flex-end; }
.feuille .fermer {
  width: 40px; height: 40px;
  margin: -2px -8px 0 0;
  border: 0;
  box-shadow: 0 1px 4px rgba(46, 28, 20, .15);
  border-radius: 50%;
  background: var(--sable);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.feuille h2 { padding-right: 44px; }
@media (min-width: 720px) {
  .feuille {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, 92vw);
    max-height: 88vh;
    border-radius: 22px;
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform .22s, opacity .2s;
  }
  .feuille.vu { transform: translate(-50%, -50%); opacity: 1; }
  .feuille .poignee { display: none; }
}

/* Allergènes */
.allergenes { display: flex; flex-wrap: wrap; gap: 5px; }
.allergene {
  font-size: 12px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F1E4D3;
  color: #6E4424;
  white-space: nowrap;
}
.allergene.alcool { background: #E9E0EE; color: #5A3D6B; }

/* Vignette d'un chocolat (photo, ou bonbon dessiné) */
.vignette {
  --t: #3A2117;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #EFE3D2, #E4D4BE);
  display: grid;
  place-items: center;
  position: relative;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette span {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 38%), var(--t);
  box-shadow: inset -3px -4px 8px rgba(0, 0, 0, .28), 0 3px 6px rgba(46, 28, 20, .25);
}
.vignette.tab span {
  width: 70%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 25%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 33.3%),
    linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%),
    var(--t);
}

/* Compteur − 1 + */
.cpt { display: inline-flex; align-items: center; gap: 2px; background: var(--blanc); border: 1.5px solid var(--sable-2); border-radius: 999px; padding: 2px; flex: none; }
.cpt.actif { border-color: var(--cuivre); }
.cpt-b { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; color: var(--cuivre); font-weight: 600; }
.cpt-b:hover:not([disabled]) { background: var(--cuivre-pale); }
.cpt-b[disabled] { color: #C9B8A5; cursor: default; }
.cpt-v { min-width: 22px; text-align: center; font-weight: 700; }

/* Pied de page */
.pied {
  padding: 28px 20px calc(28px + var(--safe-b));
  text-align: center;
  font-size: 13.5px;
  color: var(--brun);
}
.pied a { color: var(--brun); margin: 0 7px; }

@media print {
  body { background: #fff; }
  .toast, .voile, .feuille { display: none !important; }
}