/* ControlFrigo — tranche de preuve L2. Cible : Safari iOS 10.3.3.
   Pas de `gap` Flexbox (marges à la place), pas de variables CSS,
   pas de service worker. Valeurs issues de docs/CHARTE-VISUELLE.md. */

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }

html, body {
  margin: 0;
  padding: 0;
  background: #FFF6EC;
  color: #3B2F2A;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Trebuchet MS", sans-serif;
  -webkit-text-size-adjust: 100%;
}

button { font-family: inherit; cursor: pointer; }

.cf-app { max-width: 1024px; margin: 0 auto; padding-bottom: 90px; }

/* ---- Bandeau TEST ---- */
.cf-testband {
  background: #3B2F2A;
  color: #FFF6EC;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: 0.5px;
}
.cf-testband .dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: #F5C544;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: middle;
}

/* ---- En-tête ---- */
.cf-header {
  background: #FFFFFF;
  border-bottom: 4px solid #3B2F2A;
  padding: 12px 18px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.cf-header .mascotte { width: 54px; height: 58px; margin-right: 12px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.cf-title { font-size: 26px; font-weight: 900; line-height: 1.1; }
.cf-sub { font-size: 14px; color: #6A5A50; }
.cf-header .spacer { -webkit-flex-grow: 1; flex-grow: 1; }

.cf-sync {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  background: #EDF9F4;
  border: 3px solid #3B2F2A;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 700;
  margin-right: 10px;
}
.cf-sync .pt { width: 12px; height: 12px; border-radius: 999px; background: #3BAE8E; border: 2px solid #3B2F2A; margin-right: 7px; }
.cf-sync.pending .pt { background: #F5C544; }

.cf-lang {
  display: -webkit-inline-flex; display: inline-flex;
  border: 3px solid #3B2F2A;
  border-radius: 999px;
  overflow: hidden;
}
.cf-lang button {
  border: 0;
  background: #FFF6EC;
  color: #6A5A50;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
  min-height: 40px;
}
.cf-lang button.on { background: #FFC94D; color: #3B2F2A; }

/* ---- Catégorie ---- */
.cf-cat { padding: 16px 18px 6px 18px; }
.cf-cat h2 { margin: 0; font-size: 23px; font-weight: 900; display: inline-block; }
.cf-cat .hint { font-size: 14px; color: #6A5A50; margin-left: 10px; }

/* ---- Grille produits ---- */
.cf-grid {
  padding: 6px 12px 18px 12px;
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.cf-card {
  background: #FFFFFF;
  border: 3px solid #3B2F2A;
  border-radius: 22px;
  box-shadow: 0 5px 0 #3B2F2A;
  padding: 12px;
  margin: 6px;
  width: calc(33.333% - 12px);
  min-width: 250px;
  -webkit-flex-grow: 1; flex-grow: 1;
}
.cf-card.fini {
  background: #F6F1EB;
  border-color: #8E7E74;
  box-shadow: none;
}
.cf-card-head { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 8px; }
.cf-card-head .icon { width: 42px; height: 42px; margin-right: 10px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.cf-card-head .name { font-size: 20px; font-weight: 900; }
.cf-card.fini .cf-card-head .name { color: #6E5E55; }

.cf-gauge-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 6px; }
.cf-gauge {
  -webkit-flex-grow: 1; flex-grow: 1;
  height: 16px;
  border-radius: 999px;
  background: #EFE6DD;
  border: 2px solid #3B2F2A;
  overflow: hidden;
  margin-right: 9px;
}
.cf-card.fini .cf-gauge { border-color: #8E7E74; background: #E6DCD3; }
.cf-gauge .fill { height: 100%; }
.cf-fill-plein { background: #6FCBAE; }
.cf-fill-moitie { background: #F5C544; }
.cf-fill-presque_vide { background: repeating-linear-gradient(45deg, #F0714E, #F0714E 6px, #FFD1C2 6px, #FFD1C2 12px); }
.cf-state { font-size: 16px; font-weight: 900; -webkit-flex-shrink: 0; flex-shrink: 0; }
.cf-state-plein { color: #2F7D63; }
.cf-state-moitie { color: #8A6A10; }
.cf-state-presque_vide { color: #C4441F; }
.cf-state-fini { color: #6E5E55; }

.cf-detail { font-size: 14px; color: #5C4C44; margin-bottom: 10px; }
.cf-card.fini .cf-detail { color: #6E5E55; }

.cf-take {
  display: block;
  width: 100%;
  border: 3px solid #3B2F2A;
  border-radius: 15px;
  background: #FFC94D;
  color: #3B2F2A;
  font-size: 18px;
  font-weight: 900;
  padding: 14px 0;
  min-height: 50px;
}
.cf-take[disabled] { background: #FFFFFF; color: #8E7E74; border-color: #8E7E74; }

/* ---- Grand visage ---- */
.cf-veil {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: rgba(255, 246, 236, 0.72);
  pointer-events: none;
  z-index: 50;
}
.cf-veil .face { width: 300px; max-width: 76%; height: auto; }
.cf-veil .phrase { font-size: 30px; font-weight: 900; color: #3B2F2A; margin-top: 4px; text-align: center; padding: 0 18px; }
.cf-veil .sub { font-size: 15px; font-weight: 700; color: #5C4C44; margin-top: 4px; }
@-webkit-keyframes cfPop { from { -webkit-transform: scale(0.82); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } }
@keyframes cfPop { from { transform: scale(0.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cf-pop { -webkit-animation: cfPop 180ms ease-out; animation: cfPop 180ms ease-out; }

/* ---- Barre Annuler ---- */
.cf-undobar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #3B2F2A;
  color: #FFF6EC;
  padding: 10px 16px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  z-index: 40;
}
.cf-undobar .label { -webkit-flex-grow: 1; flex-grow: 1; font-size: 16px; font-weight: 700; }
.cf-undobar button {
  border: 0;
  background: #FFC94D;
  color: #3B2F2A;
  font-size: 16px;
  font-weight: 900;
  border-radius: 13px;
  padding: 13px 22px;
  min-height: 48px;
}

.cf-loading { padding: 40px 20px; text-align: center; font-size: 16px; color: #6A5A50; }

/* Texte agrandi (réglage de confort — non exposé dans cette tranche mais prêt). */
.cf-big .cf-title { font-size: 30px; }
.cf-big .cf-card-head .name { font-size: 23px; }
.cf-big .cf-state, .cf-big .cf-take { font-size: 20px; }