/* ============================================
   Mimita Bakehouse — Design system
   Palette officielle de la marque (kit Instagram) :
     Crème #F6EDE3 · Rose poudré #D99A91 · Cannelle #A96745 · Brun cacao #4A3027
   Deux nuances sont ajoutées aux quatre couleurs de marque :
   --cinnamon (#8A5334) et --cacao-3 (#7E5C4B) sont les versions « texte » —
   la cannelle de marque ne passe pas le contraste AA en petit corps sur la crème
   (3,85:1). Le #A96745 de la marque reste --cinnamon-light : aplats, survols,
   grands titres. Ne jamais l'utiliser pour du texte courant.
   ============================================ */

:root {
  /* Crème, rose poudré, cannelle et brun cacao sont les quatre couleurs de la
     charte, reprises telles quelles. Les surfaces neutres autour d'elles
     (--ivory, --paper, --dough, les bordures) sont en revanche TEINTÉES DE ROSE :
     en beige chaud, le site gardait l'air de mimitamie alors que la palette
     était pourtant la bonne. Ce n'est pas la couleur de marque qui donnait
     cette impression, c'est tout ce qu'il y avait autour. */
  --cream: #F6EDE3;
  --ivory: #FDF4F1;
  --paper: #FFFAF8;
  --cacao: #4A3027;
  --cacao-2: #6B4636;
  --cacao-3: #7E5C4B;
  --cinnamon: #8A5334;
  --cinnamon-dark: #6E3F26;
  --cinnamon-light: #A96745;
  --rose: #D99A91;
  --rose-light: #EFC9C2;
  --dough: #F3DAD5;
  --border: #EDD8D3;
  --border-2: #E0BDB6;
  --ok: #2E7D5E;
  --warn: #C97A0E;
  --shadow-sm: 0 2px 10px rgba(74, 48, 39, 0.06);
  --shadow: 0 8px 28px rgba(74, 48, 39, 0.10);
  --shadow-lg: 0 20px 60px rgba(74, 48, 39, 0.16);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --transition: all 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --display: 'Playfair Display', 'Georgia', serif;
  --script: 'Allura', cursive;
  --nav-h: 74px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--cacao);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  /* Chiffres alignés partout : les prix et les compteurs (« Jour 68 ») doivent garder
     la même hauteur que les majuscules, quelle que soit la police active. */
  font-variant-numeric: lining-nums;
}

/* Grain de papier : une seule texture CSS, zéro image à télécharger. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(191, 133, 125, 0.11) 1px, transparent 1px),
    radial-gradient(rgba(191, 133, 125, 0.08) 1px, transparent 1px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 7px 9px;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; font-family: var(--font); background: none; color: inherit; }
input, textarea, select { font-family: var(--font); font-size: 1rem; color: var(--cacao); }

/* ============ TYPOGRAPHIE ============ */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  color: var(--cacao);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-family: var(--font); font-size: 1rem; font-weight: 700; }
p { color: var(--cacao-3); }

.overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cinnamon);
}
.lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--cacao-2); }
.serif-quote { font-family: var(--display); font-size: 1.4rem; font-style: italic; color: var(--cacao-2); }

/* ============ LAYOUT ============ */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; position: relative; z-index: 2; }
.container-sm { max-width: 780px; }
.section { padding: clamp(56px, 9vw, 110px) 0; position: relative; }
.section-cream { background: var(--cream); }
.section-ivory { background: var(--ivory); }
.section-paper { background: var(--paper); }
.section-cacao { background: var(--cacao); color: var(--ivory); }
.section-cacao h1, .section-cacao h2, .section-cacao h3 { color: var(--ivory); }
.section-cacao p { color: rgba(252, 248, 242, 0.72); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(34px, 5vw, 58px); }
.section-head .overline { display: block; margin-bottom: 12px; }
.section-head h2 { margin-bottom: 14px; }

/* Séparateur décoratif : épi de blé stylisé en pur CSS */
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0; }
.divider::before, .divider::after { content: ''; height: 1px; width: 74px; background: var(--border-2); }
.divider span { color: var(--rose); font-size: 1.1rem; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============ BOUTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: var(--transition);
  border: 1.5px solid transparent;
  text-align: center;
}
.btn-primary { background: var(--cinnamon); color: #fff; box-shadow: 0 6px 18px rgba(138, 83, 52, 0.24); }
.btn-primary:hover { background: var(--cinnamon-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(138, 83, 52, 0.32); }
.btn-dark { background: var(--cacao); color: var(--ivory); }
.btn-dark:hover { background: #2b1c13; transform: translateY(-2px); }
.btn-outline { border-color: var(--cacao-2); color: var(--cacao); }
.btn-outline:hover { background: var(--cacao); color: var(--ivory); transform: translateY(-2px); }
/* Le bouton rose du kit (« Suivre »). Texte en BRUN CACAO et non en blanc :
   blanc sur #D99A91 donne 2,3:1, très en dessous du lisible. Le brun donne 5,2:1
   et reste exactement dans la palette. Le survol fonce le rose au lieu de virer
   au doré — ce #b08e1c était un reste de l'ancienne charte de mimitamie. */
.btn-rose { background: var(--rose); color: var(--cacao); font-weight: 700; }
.btn-rose:hover { background: #CE8A80; transform: translateY(-2px); }
.btn-ghost { color: var(--cacao-2); border-color: var(--border-2); background: rgba(255, 255, 255, 0.6); }
.btn-ghost:hover { background: #fff; border-color: var(--cacao-3); }
.btn-lg { padding: 17px 38px; font-size: 1.02rem; }
.btn-sm { padding: 9px 18px; font-size: 0.83rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ============ BANDEAU ANNONCE ============ */
.announce {
  background: var(--cacao);
  color: var(--ivory);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 9px 18px;
  position: relative;
  z-index: 1002;
}
.announce b { color: var(--rose-light); }

/* ============ NAVIGATION ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1001;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(247, 237, 224, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
/* La barre tient dans les MEMES 1180 px que le reste de la page. Rien
   n empechait son contenu de deborder : avec justify-content: space-between,
   un contenu trop large sort par la DROITE. Le logo gardait donc sa marge a
   gauche pendant que le bouton du compte passait sous le bord de la fenetre.

   Mesure du 24/09/26 : il fallait 1184 px pour 1136 disponibles, soit 48 px de
   trop, et le bouton du compte depassait de 26 px. Comme .nav-inner est
   plafonne a 1180 px, ce debordement se produisait a TOUTE largeur d ecran —
   ce n est pas un probleme de petit ecran, et un media query n y pouvait rien.

   C est le francais qui coince : Commander contre Order, Notre levain contre
   Our starter, et une baseline de 38 caracteres contre 32. La barre tenait en
   anglais et debordait en francais. On reprend les 48 px sur les espacements,
   la ou personne ne les verra. */
.nav-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.nav-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; min-width: 0; }
.nav-brand img, .nav-brand svg { width: 44px; height: 44px; border-radius: 50%; }
.nav-brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand-txt b { font-family: var(--display); font-size: 1.22rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-brand-txt small { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cacao-3); }

.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-links a {
  padding: 9px 10px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cacao-2);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.75); color: var(--cacao); }
.nav-links a.active { color: var(--cinnamon); font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-cart { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-2); background: rgba(255, 255, 255, 0.7); color: var(--cacao); transition: var(--transition); }
.nav-cart:hover { border-color: var(--cinnamon); color: var(--cinnamon); }
.nav-cart-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--cinnamon); color: #fff; font-size: 0.66rem; font-weight: 800; display: none; place-items: center; padding: 0 5px; }
.nav-cart-badge.show { display: grid; }

.nav-burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border-2); background: rgba(255, 255, 255, 0.7); place-items: center; font-size: 1rem; }

.nav-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rose-light); flex-shrink: 0; }
.nav-avatar-txt { display: grid; place-items: center; background: var(--dough); font-weight: 800; font-size: .95rem; color: var(--cacao); }

/* ---- Menu du compte ----
   Les liens (Mes commandes, Fidélité, Espace Mimita, Déconnexion) sont dans un panneau
   déroulant : la barre garde la même hauteur et reste alignée avec les autres liens. */
.nav-account { position: relative; }
.nav-account-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}
.nav-account-btn:hover { border-color: var(--rose); background: #fff; }
.nav-account-name { font-size: 0.86rem; font-weight: 600; color: var(--cacao-2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-chev { font-size: 0.65rem; color: var(--cacao-3); transition: var(--transition); }
.nav-account-btn[aria-expanded='true'] .nav-account-chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  /* max-width : sans lui, une adresse email longue élargit le panneau
     jusqu'à le faire sortir de l'écran sur téléphone. */
  width: 236px; max-width: calc(100vw - 28px);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  z-index: 1200;
  animation: navMenuIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-menu.open { display: block; }
@keyframes navMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nav-menu-head {
  padding: 8px 12px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 0.9rem; color: var(--cacao);
  overflow: hidden; text-overflow: ellipsis;
}
.nav-menu-head small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--cacao-3); overflow: hidden; text-overflow: ellipsis; }
.nav-menu a, .nav-menu-out {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--cacao-2);
  transition: var(--transition); text-align: left;
}
.nav-menu a i, .nav-menu-out i { width: 16px; text-align: center; color: var(--cacao-3); font-size: 0.85rem; }
.nav-menu a:hover, .nav-menu-out:hover { background: var(--cream); color: var(--cacao); }
.nav-menu a.is-admin { color: var(--cinnamon); font-weight: 700; }
.nav-menu a.is-admin i { color: var(--cinnamon); }
.nav-menu-out { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* Les mêmes liens, repris à la fin du menu burger : masqués tant qu'on est sur ordinateur
   (sinon ils se superposent aux liens de la barre — c'était le bug d'affichage). */
#navAccountMobile { display: none; }
.nav-sep {
  display: block; margin: 12px 4px 4px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cacao-3); font-weight: 700;
}

/* ============ CARTES ============ */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--border-2); }

.icon-badge {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.35rem;
  background: var(--dough);
  color: var(--cacao-2);
  margin-bottom: 16px;
}
.icon-badge.cinnamon { background: rgba(138, 83, 52, 0.1); color: var(--cinnamon); }
.icon-badge.rose { background: rgba(217, 154, 145, 0.16); color: #8A5334; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-2);
  color: var(--cacao-2);
}
.chip-cinnamon { background: rgba(138, 83, 52, 0.1); border-color: rgba(138, 83, 52, 0.28); color: var(--cinnamon); }
.chip-rose { background: rgba(217, 154, 145, 0.14); border-color: rgba(217, 154, 145, 0.35); color: #8A5334; }
.chip-ok { background: rgba(46, 125, 94, 0.12); border-color: rgba(46, 125, 94, 0.3); color: var(--ok); }
.chip-off { background: rgba(126, 92, 75, 0.12); color: var(--cacao-3); }

/* ============ FORMULAIRES ============ */
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 7px; color: var(--cacao-2); }
.field .hint { font-size: 0.74rem; color: var(--cacao-3); margin-top: 5px; }
.input, .field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.95rem;
  transition: var(--transition);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cinnamon); box-shadow: 0 0 0 4px rgba(138, 83, 52, 0.09);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }

/* ============ TOAST ============ */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column; gap: 10px; align-items: center; width: calc(100% - 32px); max-width: 420px; }
.toast {
  background: var(--cacao); color: var(--ivory);
  padding: 13px 20px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  max-width: 100%;
}
.toast.success { background: var(--ok); }
.toast.error { background: var(--cinnamon-dark); }
.toast.warn { background: var(--warn); }
@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ============ MODALE ============ */
.modal-back { position: fixed; inset: 0; background: rgba(74, 48, 39, 0.55); backdrop-filter: blur(4px); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 18px; }
.modal-back.open { display: flex; }
.modal {
  background: var(--paper); border-radius: var(--radius-lg);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--cacao-3); flex-shrink: 0; }
.modal-close:hover { background: var(--cream); color: var(--cacao); }

/* ============ PIED DE PAGE ============ */
.footer { background: var(--cacao); color: rgba(252, 248, 242, 0.78); padding: 62px 0 28px; position: relative; z-index: 2; }
.footer h4 { color: var(--ivory); margin-bottom: 15px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.footer a { color: rgba(252, 248, 242, 0.72); font-size: 0.9rem; transition: var(--transition); }
.footer a:hover { color: var(--rose-light); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; }
.footer-grid ul li { margin-bottom: 9px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand b { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(252, 248, 242, 0.09); font-size: 1rem; }
.footer-social a:hover { background: var(--rose); color: var(--cacao); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(252, 248, 242, 0.13); padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; }

/* ============ ÉTATS ============ */
.empty { text-align: center; padding: 58px 22px; }
.empty .ico { font-size: 3rem; margin-bottom: 14px; opacity: 0.55; }
.empty h3 { margin-bottom: 8px; }
.skeleton { background: linear-gradient(90deg, var(--dough) 25%, #f2e6d4 50%, var(--dough) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 34px; height: 34px; border: 3px solid var(--dough); border-top-color: var(--cinnamon); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ UTILITAIRES ============ */
.tc { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 34px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 34px; }
.flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; } .wrap { flex-wrap: wrap; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.hide { display: none !important; }
.cinnamon { color: var(--cinnamon); } .rose { color: var(--rose); } .muted { color: var(--cacao-3); }

/* Un lien au milieu d'une phrase. La regle globale `a { color: inherit }`
   convient aux menus et aux cartes entierement cliquables, mais dans un
   paragraphe elle donne au lien la couleur exacte du texte : plus rien ne dit
   qu'on peut cliquer. Couleur + soulignement, parce que la couleur seule se
   perd dans une palette ou tout est deja brun. */
.lien {
  color: var(--cinnamon);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: var(--transition);
}
.lien:hover { color: var(--cinnamon-dark); text-decoration-thickness: 2px; }
/* Le meme lien, mais pose sur un fond brun (bandeau d'inscription, page du
   test). Le cannelle y serait aussi invisible que ne l'etait le texte nu. */
.lien-clair { color: var(--rose-light); }
.lien-clair:hover { color: var(--ivory); }
.small { font-size: 0.84rem; } .xsmall { font-size: 0.74rem; }
.bold { font-weight: 700; } .price { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--cacao); }

/* ============ RESPONSIVE ============ */
/* Sous 1100 px, `.nav-inner` n'est plus plafonné : c'est la fenêtre qui décide,
   et la place manque à nouveau (mesuré : 14 px de trop en français). On retire
   la baseline de la marque, puis on resserre encore. Jusqu'à 780 px, où les
   liens passent dans le menu burger et la question ne se pose plus. */
@media (max-width: 1100px) {
  .nav-brand-txt small { display: none; }
  .nav-inner { gap: 8px; }
  .nav-links { gap: 1px; }
  .nav-links a { padding: 9px 8px; }
}

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
/* Le menu burger commence a 1080 px, pas a 780. Mesure du 24/09/26 : entre les
   deux, la barre francaise complete depasse de 101 px a 1000 px de large, et de
   259 px a 820 px. Elle ne tenait tout simplement pas, et le bouton du compte
   sortait de l ecran. Mieux vaut un menu deroulant propre qu une barre coupee. */
@media (max-width: 1080px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 12px 18px 20px;
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 13px 14px; font-size: 0.98rem; border-radius: var(--radius-sm); }
  .nav-burger { display: grid; }
  /* display:contents = les liens du compte deviennent des enfants directs du menu
     déroulant, donc empilés proprement comme Accueil / Boutique / Journal. */
  #navAccountMobile { display: contents; }
  .nav-account-name, .nav-account-chev { display: none; }
  .nav-account-btn { padding: 3px; }
  .nav-menu { width: 220px; }
  .nav-brand-txt small { display: none; }
}
@media (max-width: 780px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 15px 28px; font-size: 0.96rem; }
  .section { padding: 48px 0; }
}
/* Visiteur non connecté : « Se connecter » devient une pastille ronde comme le panier.
   En toutes lettres le bouton fait ~120 px et poussait le burger hors de l'écran —
   d'où une barre qui débordait déconnecté mais tenait une fois connecté (avatar = 36 px). */
@media (max-width: 560px) {
  .nav-login { width: 38px; height: 38px; padding: 0; border-radius: 50%; gap: 0; flex-shrink: 0; }
  .nav-login span { display: none; }
}

/* Sur les petits téléphones (≤ 430 px), l'emblème + le nom + panier + compte + burger
   dépassaient la largeur de l'écran : on resserre tout d'un cran. */
@media (max-width: 430px) {
  .nav-login { width: 36px; height: 36px; }
  .nav-inner { padding: 0 14px; gap: 10px; }
  .nav-brand { gap: 9px; }
  .nav-brand img, .nav-brand svg { width: 38px; height: 38px; }
  .nav-brand-txt b { font-size: 1.02rem; letter-spacing: 0.08em; }
  .nav-actions { gap: 7px; }
  .nav-cart, .nav-burger { width: 38px; height: 38px; }
  .nav-avatar { width: 32px; height: 32px; }
}

/* Respecte les préférences système : pas d'animation pour qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .nav, .footer, .announce, .toast-wrap, body::before { display: none !important; }
  body { background: #fff; }
}

/* ============================================
   BARRE D'ONGLETS — application uniquement
   Posée par js/native.js. Invisible sur le web : sur un site, la navigation
   reste en haut ; dans une app, elle se tient sous le pouce.
   ============================================ */
.tabbar { display: none; }
html.is-appmode .tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  background: rgba(252, 248, 242, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  /* La barre de gestes d'Android/iOS mange le bas de l'écran : sans ce padding,
     les libellés passent dessous et deviennent illisibles. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.is-appmode .tabbar .tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 2px 7px;
  color: var(--cacao-3); text-decoration: none;
  transition: color 0.2s;
}
html.is-appmode .tabbar .tab-ico { position: relative; font-size: 1.12rem; line-height: 1; }
html.is-appmode .tabbar .tab-lbl {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html.is-appmode .tabbar .tab.active { color: var(--cinnamon); }
html.is-appmode .tabbar .tab.active .tab-lbl { font-weight: 800; }
html.is-appmode .tabbar .tab:active { background: rgba(74, 48, 39, 0.05); }
html.is-appmode .tabbar .tab-badge {
  position: absolute; top: -6px; right: -9px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--cinnamon); color: #fff;
  font-size: 0.6rem; font-weight: 800;
  display: none; place-items: center;
}
/* Le contenu ne doit pas finir caché sous la barre. */
html.is-appmode body.has-tabbar { padding-bottom: 62px; }
html.is-appmode body.has-tabbar .pastille-ig { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
html.is-appmode body.has-tabbar .pastille-contact { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
html.is-appmode body.has-tabbar .toast-wrap { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

/* ============ SÉLECTEUR DE LANGUE ============
   Deux pastilles FR / EN. Sur ordinateur elles vivent dans la barre d'actions,
   à gauche du panier ; sous 900 px elles descendent dans le menu burger, sinon
   la barre déborde (logo + langue + panier + avatar + burger, ça ne tient pas
   sur 375 px). D'où les deux exemplaires dans le DOM, un seul visible à la fois. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(217, 154, 145, 0.16);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang-btn {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cacao-3);
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1;
  transition: var(--transition);
}
.lang-btn:hover { color: var(--cinnamon); }
.lang-btn.active {
  background: var(--cinnamon);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.lang-switch-sm .lang-btn { padding: 5px 9px; font-size: 0.7rem; }

.lang-switch-mobile { display: none; }
.lang-switch-desk { display: inline-flex; }

/* Le selecteur de langue reste DANS la barre, meme sur telephone. Il etait
   range dans le menu burger : sur un site bilingue, une visiteuse anglophone
   qui arrive sur la version francaise ne doit pas avoir a deviner qu'il faut
   ouvrir un menu pour en sortir. La place est prise sur le nom de la marque,
   qui est deja porte par le logo juste a cote. */
@media (max-width: 900px) {
  .lang-switch-desk .lang-btn { padding: 5px 9px; font-size: 0.7rem; }
}
@media (max-width: 760px) {
  /* Sur telephone la barre ne garde que trois choses : la marque, le panier et
     le menu. Le reste — compte et choix de la langue — descend DANS le menu
     deroulant. C'est ce qui permet de garder le nom ecrit a l'ecran, que le
     logo seul ne remplace pas vraiment pour une marque qu'on ne connait pas
     encore. Le nom est simplement compose plus petit. */
  .nav-brand img, .nav-brand svg { width: 34px; height: 34px; }
  .nav-brand-txt b { font-size: 0.92rem; letter-spacing: 0.06em; }
  .lang-switch-desk { display: none; }
  #navAccount { display: none; }
  .lang-switch-mobile {
    display: flex;
    justify-content: center;
    padding: 14px 0 4px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
  }
}

/* Dans le pied de page, la ligne « Slow fermented. Always. » reprend la cursive
   du kit de marque. Purement décorative : jamais porteuse d'information. */
.footer-signature {
  font-family: var(--script);
  font-size: 1.45rem;
  color: var(--rose);
  margin-top: 10px;
  line-height: 1.2;
}

/* ============ ICÔNES 3D ============
   PNG détourés fabriqués par tools/make-icons.py. Ils remplacent les emojis :
   un emoji change de dessin selon le système (Windows, iPhone, Android), donc
   la page n'avait pas le même visage pour deux visiteurs. */
.ic3d {
  width: 34px; height: 34px;
  display: block;
  object-fit: contain;
  /* Une ombre portée douce pour poser l'objet, sinon il flotte sur l'aplat. */
  filter: drop-shadow(0 2px 3px rgba(74, 48, 39, 0.22));
}
.ic3d-lg { width: 58px; height: 58px; margin: 0 auto; }

/* Respiration sous l'icône ============
   `.figure b` a `line-height: 1` — indispensable pour les grands chiffres
   (« 4 », « 12 h »), mais du coup le libellé venait toucher l'icône juste
   au-dessus. On rend la marge ici plutôt que de toucher au line-height,
   qui casserait l'alignement des chiffres. */
.figure b { margin-bottom: 12px; }
.icon-badge { margin-bottom: 20px; }

/* ============================================================
   PASSE CHARTE — se rapprocher du kit Instagram
   ============================================================
   Le kit fait du rose poudré une SURFACE (pastilles de stories, vignettes du
   feed, fond des modèles), pas un simple filet d'accent. Le site était resté
   très crème/cannelle ; ces règles rééquilibrent vers le rose, sans jamais
   poser du texte courant dessus — #D99A91 ne passe pas le contraste en petit
   corps, c'est la raison d'être de --cinnamon (voir CLAUDE.md).
*/

/* Les pastilles rondes du kit (Rolls · Sourdough · Process · Orders · FAQ)
   sont roses. Nos badges d'icône suivent. */
.icon-badge { background: rgba(217, 154, 145, 0.20); }
.icon-badge.cinnamon { background: rgba(169, 103, 69, 0.16); color: var(--cinnamon); }
.icon-badge.rose { background: rgba(217, 154, 145, 0.34); color: var(--cinnamon-dark); }

/* Une section entièrement rose, comme les modèles de stories du kit.
   Le texte y reste en brun cacao : c'est ce que fait le kit lui-même. */
.section-rose { background: var(--rose-light); }
.section-rose h1, .section-rose h2, .section-rose h3 { color: var(--cacao); }
.section-rose p { color: var(--cacao-2); }
.section-rose .overline { color: var(--cinnamon-dark); }

/* La cursive Allura du kit, pour les touches manuscrites
   (« Something warm is coming… », « Made slowly. Loved dearly. »).
   Décorative uniquement : jamais une information qu'on ne trouve pas ailleurs,
   une cursive à 1,6 rem reste difficile à lire pour beaucoup de gens. */
.script-note {
  font-family: var(--script);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--rose);
  line-height: 1.15;
  text-align: center;
}
.section-cacao .script-note { color: var(--rose-light); }
.section-rose .script-note { color: var(--cinnamon); }

/* Le rose gagne aussi les petits éléments, comme dans le kit :
   pastilles, badge du levain, puces de liste. */
.chip-rose { background: rgba(217, 154, 145, 0.26); border-color: rgba(217, 154, 145, 0.5); color: var(--cinnamon-dark); }
.levain-badge { background: rgba(217, 154, 145, 0.18); border-color: rgba(217, 154, 145, 0.45); }
.section-rose .pickup-list .ic { background: rgba(255, 255, 255, 0.72); color: var(--cinnamon-dark); }
.section-rose .chip { background: rgba(255, 255, 255, 0.78); border-color: rgba(138, 83, 52, 0.22); }
.section-rose .pickup-map { border-color: rgba(138, 83, 52, 0.2); }


/* Bandeau des pages légales : quelle version fait foi.
   Il ne s'affiche QU'EN ANGLAIS — en français, la question ne se pose pas,
   et un encadré permanent alourdirait une page déjà dense. */
.legal-lang {
  display: none;
  margin: 18px 0 26px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(217, 154, 145, 0.16);
  border: 1px solid var(--border-2);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cacao-2);
}
html[lang="en"] .legal-lang { display: block; }

/* ---------- PASTILLE APPLICATION (accueil) ----------
   Un badge de magasin d'applications, redessine aux couleurs de la maison
   plutot que repris tel quel : les badges officiels imposent leur noir et
   leur typographie, qui jurent avec la creme et la cannelle. Tant que
   l'application n'est pas publiee, on ne peut de toute facon pas afficher le
   badge officiel « Disponible sur Google Play ». */
.app-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.app-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 12px;
  border-radius: 16px;
  background: var(--cacao);
  color: var(--ivory);
  border: 1px solid var(--cacao);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.app-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.app-badge img {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--cream);
  flex-shrink: 0;
}
.app-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.app-badge small { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-light); }
.app-badge b { font-family: var(--display); font-size: 1.12rem; letter-spacing: 0.01em; }

/* La pastille de l'application, reprise dans le pied de page. Le fond y est
   deja brun : la version sombre s'eclaircit au lieu de s'assombrir, sinon
   elle disparait dans le fond. */
.footer-app {
  margin: 26px 0 22px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
/* La pastille iPhone montre la MEME icone que la pastille Android, et non la
   pomme : les directives de marque d'Apple interdisent a un tiers d'afficher
   son logo. C'est aussi plus juste — cette icone est precisement celle qui se
   posera sur l'ecran d'accueil. */
.app-badge-sombre {
  background: rgba(252, 248, 242, 0.08);
  border-color: rgba(252, 248, 242, 0.2);
  color: var(--ivory);
}
.app-badge-sombre:hover { background: rgba(252, 248, 242, 0.14); }

@media (max-width: 560px) {
  .app-cta { width: 100%; }
  .app-cta .btn { flex: 1; }
}

/* Un element marque `hidden` reste cache, meme si une classe lui donne un display. */
[hidden] { display: none !important; }