/* kodpéi Atelier — appli du commerçant. « Plein jour » : lisible au soleil, comme le site kodpéi.
   Polices hébergées ici : Adventor (titres), DM Sans (texte), Cookie (le mot kodpéi). */
@font-face { font-family: "Adventor"; src: url("/fonts/kp-adventor-bold.woff2") format("woff2"), url("/fonts/kp-adventor-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dmsans.woff2") format("woff2"), url("/fonts/dmsans.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cookie"; src: url("/fonts/cookie.woff2") format("woff2"), url("/fonts/cookie.woff") format("woff"); font-weight: 400; font-display: swap; }
:root {
  --fond: #FFFFFF; --fond2: #F2F2EF; --carte: #FFFFFF; --carte2: #F4F3F0; --ligne: #DEDCD7; --ligne2: #8F8A83; --encre: #0B0E0C;
  --texte: #0B0E0C; --discret: #57524C; --jaune: #FED905; --jaune-fonce: #FFF6B8; --jaune-texte: #8A5A00; --rouge: #E0312B; --rouge-clair: #B3211B; --vert: #1F8A55;
  --titre: 'Adventor', 'Century Gothic', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-synthesis: none; }
a { color: var(--texte); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; }
h1 { font-family: var(--titre); font-size: clamp(22px, 4vw, 30px); }
h2 { font-family: var(--titre); font-size: 18px; }
.attente { padding: 40vh 20px 0; text-align: center; color: var(--discret); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.logo b { font-family: 'Cookie', cursive; font-weight: 400; font-size: 32px; line-height: 1; }
.logo small { font-family: var(--titre); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); background: var(--jaune); padding: 3px 7px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons et champs */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 48px; padding: 7px 20px; border-radius: 12px; border: 2px solid var(--encre); background: var(--fond); color: var(--texte); font-weight: 700; font-size: 15px; line-height: 1.3; cursor: pointer; text-decoration: none; }
.btn.jaune { background: var(--jaune); color: var(--encre); border-color: var(--encre); font-weight: 700; }
.btn.rouge { border-color: var(--rouge-clair); color: var(--rouge-clair); }
.btn.petit { min-height: 44px; padding: 6px 14px; font-size: 13.5px; border-radius: 10px; }
.btn.plein { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.icone { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--encre); background: var(--fond); color: var(--texte); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ label, .label { font-size: 14px; font-weight: 700; }
.champ .aide { font-size: 12px; color: var(--discret); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=date], input[type=time], textarea, select {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--ligne2); background: var(--carte); color: var(--texte); font-size: 16px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--jaune); }
::placeholder { color: #8F8A83; opacity: 1; }
textarea { line-height: 1.45; resize: vertical; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--encre); background: var(--fond); color: var(--texte); font-weight: 600; font-size: 14px; cursor: pointer; }
.puce[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.erreur { background: #FDE5E3; color: #8E1712; border: 1.5px solid #F0B4AE; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.info { background: var(--jaune-fonce); border: 1.5px solid #E2C93A; border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--texte); }
.carte { background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 18px; padding: 16px; }
.sous-titre { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--discret); font-weight: 700; margin: 0 0 10px; }
.discret { color: var(--discret); }
.ligne-flex { display: flex; align-items: center; gap: 10px; }
.espace { flex: 1; }
.interrupteur { width: 56px; height: 32px; border-radius: 999px; border: 2px solid var(--encre); background: var(--carte2); padding: 1px; display: flex; cursor: pointer; flex: none; position: relative; }
/* la zone à toucher fait 44 px, même si l'interrupteur en paraît 32 */
.interrupteur::after { content: ""; position: absolute; inset: -8px -4px; }
.interrupteur span { width: 26px; height: 26px; border-radius: 50%; background: var(--encre); transition: transform .15s; }
.interrupteur[aria-checked="true"] { background: var(--jaune); }
.interrupteur[aria-checked="true"] span { transform: translateX(24px); }
.commande .actions b { white-space: nowrap; }
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%); background: var(--texte); color: var(--fond); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; max-width: 90vw; text-align: center; }
#toast.visible { opacity: 1; }

/* Pages simples */
.page { max-width: 560px; margin: 0 auto; padding: 24px 20px calc(120px + env(safe-area-inset-bottom)); }
.page.large { max-width: 1000px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.etapes { display: flex; gap: 6px; }
.etapes span { width: 28px; height: 6px; border-radius: 3px; background: var(--ligne); }
.etapes span.fait { background: var(--jaune); }

/* Connexion */
.connexion { max-width: 420px; margin: 0 auto; padding: 48px 22px 40px; }
.connexion .soleil { display: grid; place-items: center; margin-bottom: 10px; }
.connexion .soleil img { width: 150px; height: 150px; display: block; }
.bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--fond2); border-radius: 14px; margin: 18px 0; }
.bascule button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--discret); font-weight: 700; cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--jaune); color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }

/* Barre du projet */
.barre { position: sticky; top: 0; z-index: 10; background: var(--fond); border-bottom: 3px solid var(--rouge); }
/* iPhone (Safari 26) : une fine bande fixe tout en haut. Safari peint alors la barre d'état d'une couleur unie
   au lieu de flouter le haut de la page (sans elle, l'en-tête paraît flou). */
.barre-etat { display: none; }
@supports (-webkit-touch-callout: none) {
  .barre-etat { display: block; position: fixed; z-index: 45; top: 0; left: 0; right: 0; height: max(6px, env(safe-area-inset-top)); background: var(--fond); pointer-events: none; }
}

.barre .interieur { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.barre .nom { font-weight: 700; }
.etat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); }
.etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--discret); display: inline-block; }
.etat.vert i { background: var(--vert); }
.etat.jaune i { background: var(--jaune); }
.compteur { font-size: 13px; color: var(--texte); border: 1.5px solid var(--encre); background: var(--jaune-fonce); padding: 6px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
nav.onglets-app { display: none; }
nav.menu-haut { display: flex; gap: 4px; }
nav.menu-haut a { padding: 10px 12px; border-radius: 10px; color: var(--discret); text-decoration: none; font-weight: 600; font-size: 14px; }
nav.menu-haut a[aria-current="page"] { color: var(--texte); background: var(--jaune); }
nav.menu-haut a .pastille, nav.onglets-app a .pastille { background: var(--rouge); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 6px; margin-left: 4px; }
@media (max-width: 860px) {
  nav.menu-haut { display: none; }
  .barre { position: static; }
  .barre .interieur { flex-wrap: nowrap; padding: 10px 12px; }
  .barre .interieur > div { flex: 1; min-width: 0; }
  .barre .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barre .compteur, .barre .espace { display: none; }
  nav.onglets-app { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--fond); border-top: 2px solid var(--encre); padding: 4px 2px max(4px, calc(env(safe-area-inset-bottom) - 16px)); }
  /* le fond de la barre descend sous l'écran : rien de la page ne se voit dessous (rebond, barre d'adresse qui bouge) */
  nav.onglets-app::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: var(--fond); pointer-events: none; }
  nav.onglets-app a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; min-width: 0; padding: 0 1px; color: var(--discret); text-decoration: none; font-size: 11px; line-height: 1.15; font-weight: 600; position: relative; text-align: center; white-space: nowrap; letter-spacing: -.1px; }
  nav.onglets-app a[aria-current="page"] { color: var(--texte); font-weight: 800; box-shadow: inset 0 3px 0 var(--jaune); }
  nav.onglets-app a .pastille { position: absolute; top: 4px; left: calc(50% + 4px); right: auto; }   /* collée à l'icône, quelle que soit la largeur de l'onglet */
}
/* petit téléphone (iPhone SE) : « Commandes » tient dans son onglet, les libellés ne se touchent pas */
@media (max-width: 359px) { nav.onglets-app a { font-size: 10px; letter-spacing: -.2px; } }

/* Atelier */
.atelier { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(280px, 320px); height: calc(100vh - var(--haut-barre, 61px)); height: calc(100dvh - var(--haut-barre, 61px)); }
.atelier.outils-fermes { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) 64px; }
/* tablette et petit portable (861 à 1100 px) : tout tient sur une ligne, rien n'est coupé à droite */
@media (min-width: 861px) and (max-width: 1100px) {
  .atelier { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(240px, 280px); }
  .atelier.outils-fermes { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) 64px; }
  .barre .interieur { flex-wrap: nowrap; gap: 8px; }
  .barre .interieur > div { min-width: 0; }
  .barre .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
  nav.menu-haut a { padding: 10px 8px; font-size: 13px; }
  .barre .compteur { display: none; }
}
.fil { display: flex; flex-direction: column; border-right: 1px solid var(--ligne); min-height: 0; }
.fil-liste { flex: 1; overflow-y: auto; padding: 18px; }
.fil-liste .trame { margin-left: 8px; padding-left: 20px; border-left: 2px dashed var(--ligne2); display: flex; flex-direction: column; gap: 14px; }
.msg { position: relative; }
.msg::before { content: ""; position: absolute; left: -29px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--fond); border: 2px solid var(--discret); }
.msg.ia::before { background: var(--jaune); border-color: var(--encre); }
.msg .qui { font-size: 12px; color: var(--discret); margin-bottom: 4px; }
.msg.ia .qui { color: var(--rouge-clair); font-weight: 700; }
.msg .bulle { background: var(--carte2); border-radius: 4px 16px 16px 16px; padding: 10px 13px; font-size: 15px; white-space: pre-line; }
.msg.ia .bulle { background: transparent; padding: 0; }
.msg.ia .bulle.erreur { padding: 10px 13px; background: #FDE5E3; }
.pose { display: flex; align-items: center; gap: 8px; background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 8px; padding: 7px 9px; font-size: 14px; margin-top: 6px; }
.pose b { font-family: var(--titre); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre); background: var(--jaune); padding: 3px 6px; border-radius: 3px; font-weight: 700; }
.reflexion { color: var(--discret); font-size: 14px; display: flex; gap: 6px; align-items: center; }
.reflexion i { width: 8px; height: 8px; border-radius: 50%; background: var(--jaune); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: .3; } to { opacity: 1; } }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.suggestions button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed var(--ligne2); background: var(--fond); color: var(--texte); font-size: 13px; cursor: pointer; }
.saisie { border-top: 1px solid var(--ligne); padding: 12px 18px 16px; }
.saisie form { display: flex; gap: 8px; align-items: flex-end; }
.saisie textarea { min-height: 48px; max-height: 140px; resize: none; }
.micro[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); }
.etabli { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; min-height: 0; background-color: var(--fond2); background-image: radial-gradient(var(--ligne) 1px, transparent 1px); background-size: 22px 22px; }
.etabli .boutons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.segment { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--fond); border: 1px solid var(--ligne); }
.segment button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--texte); font-weight: 600; font-size: 13px; cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--jaune); color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.cadre { position: relative; flex: 1; width: 390px; max-width: 100%; border: 10px solid #0B0A08; border-radius: 36px; overflow: hidden; background: #fff; min-height: 300px; }
.cadre.ordi { width: 100%; border-radius: 14px; }
.cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.outils { border-left: 1.5px solid var(--ligne); background: #FAFAF8; display: flex; flex-direction: column; min-height: 0; }
.outils-haut { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ligne); }
.outils-corps { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 22px; }
.ambiances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ambiances button { min-height: 62px; border-radius: 12px; border: 2px solid var(--ligne); background: var(--carte); color: var(--texte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-weight: 600; font-size: 12px; cursor: pointer; }
.ambiances i { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ambiances button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 2px var(--jaune); }
.ambiances i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.bloc-ligne { display: flex; align-items: center; gap: 6px; background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 10px; padding: 5px 5px 5px 12px; margin-bottom: 6px; font-size: 14px; }
.bloc-ligne .icone { width: 44px; height: 44px; border-radius: 10px; }
.version { display: flex; align-items: center; gap: 8px; background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 10px; padding: 8px 8px 8px 12px; margin-bottom: 6px; font-size: 13px; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photos .ph { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--carte2); }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; }
.photos .ph button { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 18px; cursor: pointer; }
.ajout-photo { aspect-ratio: 1; border-radius: 10px; border: 2px dashed var(--ligne2); background: transparent; color: var(--texte); font-size: 12px; cursor: pointer; display: grid; place-items: center; text-align: center; padding: 4px; }
.couv { width: 100%; aspect-ratio: 16/7; border-radius: 12px; overflow: hidden; background: var(--carte2) center/cover; border: 2px dashed var(--ligne2); display: grid; place-items: center; cursor: pointer; color: var(--texte); font-size: 13px; }
.mobile-onglets { display: none; }
@media (max-width: 860px) {
  .atelier, .atelier.outils-fermes { display: block; height: auto; }
  .mobile-onglets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; margin: 10px 12px 0; background: var(--fond2); border-radius: 14px; position: sticky; top: 8px; z-index: 5; box-shadow: 0 0 0 8px var(--fond); }
  .mobile-onglets button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--discret); font-weight: 700; cursor: pointer; }
  .mobile-onglets button[aria-pressed="true"] { background: var(--jaune); color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
  .atelier > * { display: none !important; }
  .atelier[data-vue="fil"] .fil, .atelier[data-vue="apercu"] .etabli, .atelier[data-vue="outils"] .outils { display: flex !important; }
  .fil { border: 0; height: calc(100dvh - 200px - env(safe-area-inset-bottom)); }
  .etabli { height: calc(100dvh - 200px - env(safe-area-inset-bottom)); }
  .cadre { width: 100%; border-width: 6px; border-radius: 24px; min-height: 0; }
  .outils { border: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .outils-haut .replier { display: none; }
}

/* Listes : projets, commandes, produits */
.grille-projets { display: grid; gap: 14px; }
.projet .haut { display: flex; gap: 12px; align-items: center; }
.projet .pastille-nom { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-family: var(--titre); color: #fff; flex: none; }
.projet .haut .etat { display: flex; margin-top: 3px; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ligne); margin: 14px -16px 0; }
.chiffres div { padding: 12px 6px 0; text-align: center; }
.chiffres div + div { border-left: 1px solid var(--ligne); }
.chiffres b { display: block; font-family: var(--titre); font-size: 20px; font-weight: 700; }
.chiffres span { font-size: 12px; color: var(--discret); }
.raccourcis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.raccourcis a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--carte2); color: var(--texte); text-decoration: none; font-size: 12px; font-weight: 600; }
.nouveau-projet { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 2px dashed var(--ligne2); color: var(--texte); text-decoration: none; }
.nouveau-projet .plus { width: 44px; height: 44px; border-radius: 12px; background: var(--jaune); color: var(--encre); display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--encre); }
.onglets-cmd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--fond2); border-radius: 14px; margin-bottom: 14px; }
.onglets-cmd button { min-height: 44px; min-width: 0; border: 0; border-radius: 10px; background: transparent; color: var(--discret); font-weight: 700; font-size: 13px; cursor: pointer; }
.onglets-cmd button .n::before { content: " · "; }
.onglets-cmd.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* quatre onglets sur un téléphone : le nombre passe sous le nom, tout tient sur une ligne */
@media (max-width: 520px) {
  .onglets-cmd.quatre button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px; line-height: 1.15; font-size: 12.5px; }
  .onglets-cmd.quatre button .n::before { content: none; }
  .onglets-cmd.quatre button .n { font-family: var(--titre); font-size: 15px; }
}
.onglets-cmd button[aria-pressed="true"] { background: var(--jaune); color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.commande { margin-bottom: 10px; }
.commande.nouvelle { border-color: var(--encre); box-shadow: inset 0 0 0 2px var(--jaune); animation: arrive .6s ease-out; }
@keyframes arrive { from { transform: translateY(-6px); opacity: 0; } }
.commande .tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.commande .num { font-family: var(--titre); color: var(--rouge-clair); }
.commande ul { margin: 8px 0; padding-left: 18px; }
.commande .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vide { text-align: center; color: var(--discret); padding: 40px 10px; }
.produit-ligne { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; }
.produit-ligne .vignette { width: 52px; height: 52px; border-radius: 10px; background: var(--carte2) center/cover; flex: none; border: 1px dashed var(--ligne2); }
.produit-ligne .vignette.photo { border: 0; }
.produit-ligne .infos { flex: 1; min-width: 0; }
/* le nom entier sur deux lignes au besoin (sur téléphone, « Rougail saucisses » ne doit pas devenir « Rougail sau… ») */
.produit-ligne .infos b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; word-break: normal; hyphens: auto; line-height: 1.25; }
.dispo { flex: none; min-height: 44px; min-width: 76px; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; border: 2px solid var(--encre); background: var(--jaune); color: var(--encre); }
.dispo[aria-pressed="false"] { background: var(--fond); color: var(--rouge-clair); border-color: var(--rouge-clair); }
.voile { position: fixed; inset: 0; background: rgba(11,14,12,.55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.feuille { background: var(--fond); border: 2px solid var(--encre); border-radius: 24px 24px 0 0; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .voile { align-items: center; } .feuille { border-radius: 24px; } }
/* « Voir le site » en plein écran, dans l'appli */
.plein-site { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--fond); }
.plein-site-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 2px solid var(--encre); background: var(--jaune); }
.plein-site-haut b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--titre); }
.plein-site iframe { flex: 1; width: 100%; border: 0; background: #FFFFFF; padding-bottom: env(safe-area-inset-bottom); }
.sans-defilement, .sans-defilement body { overflow: hidden; }

/* QR */
.plaquette { width: 240px; margin: 0 auto; background: #FFFFFF; color: #1B1712; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 2px solid var(--encre); box-shadow: 6px 8px 0 var(--jaune); text-align: center; }
.plaquette .qr svg { width: 168px; height: 168px; display: block; }
.plaquette .n { font-family: var(--titre); font-size: 22px; }
.plaquette .titre-p { font-family: var(--titre); font-size: 15px; color: #C8321F; }
.tables { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tables button { min-width: 44px; min-height: 44px; border-radius: 10px; border: 2px solid var(--encre); background: var(--fond); color: var(--texte); font-weight: 700; cursor: pointer; flex: none; }
.tables button[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--encre); background: var(--fond); color: var(--texte); font-weight: 700; font-size: 18px; cursor: pointer; }
.stepper button.plus { background: var(--jaune); color: var(--encre); }
.stepper span { min-width: 24px; text-align: center; font-weight: 700; font-size: 17px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats3 div { background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 12px; padding: 12px 6px; text-align: center; }
.stats3 b { display: block; font-family: var(--titre); font-weight: 700; font-size: 20px; }
.stats3 span { font-size: 12px; color: var(--discret); }
#impression { display: none; }
@media print {
  body > *:not(#impression) { display: none !important; }
  #impression { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10mm; padding: 6mm; background: #fff; }
  #impression .plaquette { box-shadow: none; border: 1px solid #ccc; width: auto; break-inside: avoid; }
  body { background: #fff; }
}

/* Construction */
.chantier { max-width: 520px; margin: 0 auto; padding: 60px 22px; }
.chantier .trame { margin: 26px 0 0 8px; padding-left: 22px; border-left: 2px dashed var(--ligne2); display: flex; flex-direction: column; gap: 10px; }
.chantier .pose { opacity: .45; }
.chantier .pose.fait { opacity: 1; }
.chantier .pose.encours b { background: #D9CFBF; }
.barre-prog { height: 8px; border-radius: 4px; background: var(--carte2); overflow: hidden; margin-top: 26px; }
.barre-prog div { height: 100%; background: var(--jaune); box-shadow: inset 0 0 0 1.5px var(--encre); border-radius: 4px; transition: width .5s; }
.formules { display: grid; gap: 12px; }
.formule { position: relative; }
.formule.mise { border: 2px solid var(--encre); box-shadow: inset 0 0 0 3px var(--jaune); }
.formule .prix { font-family: var(--titre); font-size: 22px; }
.adresse-site { display: flex; align-items: center; border: 1.5px solid var(--ligne2); border-radius: 12px; background: var(--carte); overflow: hidden; }
.adresse-site input { border: 0; background: transparent; min-width: 0; }
.adresse-site span { padding: 0 12px; color: var(--discret); font-size: 14px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.feuille.large { max-width: 980px; }
.propositions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.proposition { scroll-snap-align: start; display: grid; gap: 6px; grid-template-rows: auto auto 1fr auto; }
.proposition > .btn { align-self: end; }
.proposition .mini { width: 100%; aspect-ratio: 390 / 640; border-radius: 16px; overflow: hidden; border: 2px solid var(--encre); background: var(--carte); position: relative; }
.proposition .mini iframe { position: absolute; left: 0; top: 0; width: 390px; height: 640px; border: 0; transform-origin: 0 0; transform: scale(var(--k, .56)); pointer-events: none; }
.proposition p { margin: 0; font-size: 13px; min-height: 34px; }

/* Pendant que l'atelier travaille : les outils attendent sa réponse */
.outils-corps.occupe { opacity: .5; pointer-events: none; }
/* Produits d'exemple posés par l'atelier */
.etiquette { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1.5px dashed var(--jaune-texte); border-radius: 6px; color: var(--jaune-texte); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.produit-ligne.exemple { border-style: dashed; border-color: var(--jaune-texte); }
/* Outils : la mise en page tient en 2 × 2, jamais coupée à droite */
.outils .segment { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 16px; }
.outils .segment button { border-radius: 12px; min-height: 42px; padding: 0 8px; }
/* Ordinateur et tablette : la zone de demande montre sa phrase en entier */
@media (min-width: 861px) { .saisie textarea { min-height: 70px; } }

/* Le site écrit par l'atelier : retouches et designs d'avant */
.retouches-couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.retouche-couleur { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; border: 2px solid var(--encre); border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.retouche-couleur input { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.retouche-police { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.retouche-police select { min-height: 44px; border: 2px solid var(--encre); border-radius: 12px; padding: 0 10px; font: inherit; font-size: 15px; background: var(--fond); color: var(--texte); }
.mes-designs { display: grid; gap: 8px; }
.design-avant { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 2px solid var(--encre); border-radius: 14px; background: var(--fond); color: var(--texte); text-align: left; cursor: pointer; font: inherit; }
.design-avant b { display: block; font-size: 14px; }
.design-avant small { color: var(--pierre, #57524C); font-size: 12px; }
.nuancier { display: flex; flex: none; }
.nuancier i { width: 18px; height: 34px; border: 1.5px solid var(--encre); }
.nuancier i + i { margin-left: -1.5px; }
/* Publication Instagram ou Facebook */
.pub-champ { display: block; }
.pub-champ > span { display: block; font-size: 13px; font-weight: 700; margin-top: 4px; }
.pub-apercu:empty { display: none; }
.pub-apercu { margin-top: 12px; display: grid; gap: 10px; }
.pub-image { width: 100%; max-width: 360px; height: auto; border-radius: 14px; border: 2px solid var(--encre); display: block; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-actions .btn { min-height: 44px; }
.pub-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-texte { width: 100%; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.4; resize: vertical; }
/* Tableau de bord : le parcours des visiteurs */
.parcours { margin: 0 0 18px; }
.parcours-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 48px 52px; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 14px; }
.parcours-barre { height: 10px; background: rgba(0,0,0,.06); border-radius: 99px; overflow: hidden; }
.parcours-barre i { display: block; height: 100%; background: var(--encre); border-radius: 99px; }
.parcours-ligne b { text-align: right; font-variant-numeric: tabular-nums; }
.parcours-taux { text-align: right; color: var(--gris, #555); font-variant-numeric: tabular-nums; }
.parcours-7j { grid-column: 1 / -1; font-size: 12px; color: var(--gris, #555); margin-top: -2px; }
.parcours-7j:empty { display: none; }
/* L'ardoise du jour */
.raccourcis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 420px) { .raccourcis { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 419px) { .raccourcis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* un nombre impair : le dernier prend la ligne, pas de trou */
.raccourcis .raccourci-ardoise { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--jaune); color: var(--encre); border: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.raccourcis .raccourci-ardoise:disabled { opacity: .6; }
.ardoise-jour { padding-bottom: 6px; }
.ardoise-liste { display: grid; gap: 6px; margin-top: 10px; }
.ardoise-ligne { display: flex; gap: 6px; align-items: center; }
.ardoise-ligne .icone { flex: none; }
/* le micro écoute */
#demande.ecoute { border-color: var(--rouge-clair, #E5484D); box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
.micro[aria-pressed="true"] { background: var(--rouge-clair, #E5484D); color: #fff; animation: micro-bat 1.2s ease-in-out infinite; }
@keyframes micro-bat { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .2); } }
@media (prefers-reduced-motion: reduce) { .micro[aria-pressed="true"] { animation: none; } }
/* Le résumé de la semaine */
.semaine { margin: 0 0 22px; }
.semaine h2 { font-size: 20px; margin: 0 0 4px; }
.semaine-carte { border: 2px solid var(--encre); border-radius: 16px; padding: 14px; margin-top: 10px; background: var(--carte, #fff); }
.semaine-nom { margin: 0 0 8px; font-weight: 700; }
.semaine-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.semaine-chiffres > div { display: grid; gap: 2px; align-content: start; }
.semaine-chiffres b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.semaine-chiffres span { font-size: 12.5px; font-weight: 600; }
.semaine-chiffres small { font-size: 11.5px; color: var(--gris, #555); }
.semaine-top { margin: 10px 0 0; font-size: 14px; }
.semaine-conseil { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--jaune-pale, #FFF5C2); font-size: 14px; line-height: 1.4; }
/* Le mode cuisine : lisible de loin, un geste par étape */
.cuisine { min-height: 100dvh; background: #121212; color: #F5F2EA; padding: 12px 14px 40px; box-sizing: border-box; }
.cuisine .icone { background: #F5F2EA; color: #121212; border-color: #F5F2EA; }
.cuisine-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.cuisine-haut h1 { margin: 0; font-size: 22px; line-height: 1.1; flex: 1; min-width: 160px; }
.cuisine-haut h1 small { display: block; font-size: 12.5px; font-weight: 600; opacity: .7; }
.cuisine-compte { font-weight: 800; font-size: 18px; background: var(--jaune, #FED905); color: #121212; padding: 6px 14px; border-radius: 999px; }
.cuisine-wa { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }
.cuisine-wa input { width: 22px; height: 22px; }
.cuisine-colonne h2 { font-size: 15px; font-weight: 700; opacity: .75; margin: 18px 0 10px; }
.tickets { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.ticket { background: #F5F2EA; color: #121212; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 6px; border: 4px solid #F5F2EA; }
.ticket.en-prepa { border-color: var(--jaune, #FED905); }
.ticket.orange .ticket-temps { background: #FFB547; }
.ticket.rouge { border-color: #E5484D; }
.ticket.rouge .ticket-temps { background: #E5484D; color: #fff; }
.ticket.pret { opacity: .8; }
.ticket-tete { display: flex; align-items: baseline; gap: 10px; }
.ticket-num { font-size: 26px; font-weight: 900; }
.ticket-ou { flex: 1; font-weight: 700; font-size: 15px; }
.ticket-temps { font-weight: 800; font-size: 14px; padding: 3px 10px; border-radius: 999px; background: #E6E1D6; font-variant-numeric: tabular-nums; }
.ticket-qui { margin: 0; font-size: 14px; opacity: .75; }
.ticket-lignes { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: 20px; line-height: 1.25; }
.ticket-note { margin: 0; padding: 8px 10px; background: #FFF3B0; border-radius: 10px; font-size: 15px; }
.ticket-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.ticket-actions .btn { flex: 1; min-height: 56px; font-size: 17px; }
.cuisine-vide { font-size: 18px; opacity: .8; }
/* Les Outils repliables */
.outil-pli { border-bottom: 1px solid var(--ligne, rgba(0,0,0,.1)); }
.outil-pli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 800; font-size: 15px; }
.outil-pli > summary::-webkit-details-marker { display: none; }
.outil-pli > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.outil-pli[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.outil-pli > summary > b + .discret { flex: 1; margin-left: .3em; font-weight: 500; }
.pli-titre { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 8px 0; }
.pli-titre small { font-weight: 500; font-size: 13.5px; color: var(--discret); line-height: 1.35; }
.outil-pli > summary:focus-visible { outline: 3px solid var(--jaune, #FED905); outline-offset: 2px; }
.outil-pli > :not(summary) { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .outil-pli > summary::after { transition: none; } }
/* Agenda : les rendez-vous pris en ligne */
.rdv-jours-agenda { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.rdv-jours-agenda button { flex: 0 0 auto; min-width: 86px; min-height: 56px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--ligne); background: var(--fond); color: var(--texte); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: grid; gap: 2px; }
.rdv-jours-agenda button small { font-weight: 500; font-size: 12px; color: var(--discret); }
.rdv-jours-agenda button[aria-pressed="true"] { background: var(--jaune); border-color: var(--encre); }
.rdv-carte .tete b { font-variant-numeric: tabular-nums; }
.rdv-carte.annulee { opacity: .55; }
.rdv-carte .actions { margin-top: 8px; }
.rdv-lien { display: grid; gap: 8px; }
.rdv-lien-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv-rappel { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ligne); }
.rdv-reglages summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.rdv-reglage { display: grid; grid-template-columns: 1fr minmax(150px, 46%); gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.rdv-reglage select { min-height: 44px; border: 2px solid var(--encre); border-radius: 12px; padding: 0 10px; font: inherit; font-size: 16px; background: var(--fond); color: var(--texte); }
.commande .num.rdv-statut-confirme, .commande .num.rdv-statut-fait { color: var(--vert); font-family: inherit; font-weight: 700; }
.commande .num.rdv-statut-demande { color: var(--rouge-clair); font-family: inherit; font-weight: 700; }
.commande .num.rdv-statut-annule, .commande .num.rdv-statut-absent { color: var(--discret); font-family: inherit; font-weight: 700; }
.ticket-options { display: block; font-size: .82em; font-weight: 700; color: var(--rouge-clair); margin-left: 1.6em; }
/* Produits : les choix pour le client (sauce, piment, taille, suppléments) */
.options-produit { margin: 6px 0 14px; padding-top: 10px; border-top: 1px solid var(--ligne); }
.opt-edit { border: 2px solid var(--ligne); border-radius: 14px; padding: 10px; margin-bottom: 10px; display: grid; gap: 8px; }
.opt-edit input[type=text], .opt-edit select { min-height: 44px; border: 2px solid var(--encre); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 16px; background: var(--fond); color: var(--texte); width: 100%; }
.opt-edit-tete { display: grid; grid-template-columns: 1fr 44px; gap: 6px; }
.opt-edit-tete input { font-weight: 700; }
.opt-edit-regles { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.opt-edit-case { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; }
.opt-edit-case input { width: 20px; height: 20px; }
.opt-edit-choix { display: grid; grid-template-columns: 1fr 86px 44px; gap: 6px; }
.opt-modeles { display: flex; flex-wrap: wrap; gap: 6px; }
.question-client { border-top: 1px solid var(--ligne); padding: 8px 0; }
.question-client summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; min-height: 36px; align-items: center; font-weight: 600; }
.question-client summary small { color: var(--discret); font-weight: 500; white-space: nowrap; }
.question-client p { margin: 6px 0 0; font-size: 14px; color: var(--discret); }

/* Livraison et paiement par carte */
.ticket-paye, .badge-paye { display: inline-block; margin: 4px 0; padding: 3px 9px; border-radius: 999px; background: #DDF3E4; color: #14532D; font-weight: 700; font-size: 13px; }
.badge-paye { margin-left: 8px; }
.reglage-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: center; margin: 8px 0; }
.reglage-ligne input { width: 100%; }
.fiche-ligne { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--ligne, #E5E1DA); }
.fiche-valeur { white-space: pre-line; font-size: 14px; overflow-wrap: anywhere; }
.fiche-etapes { padding-left: 20px; margin: 10px 0 14px; display: grid; gap: 6px; font-size: 14px; }
.cadeau-code { width: 9.5em; text-transform: uppercase; font: 700 18px ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.cadeau-resultat p { margin: 10px 0 6px; }
.cadeau-resultat input { width: 8em; }
/* fermeture d'urgence */
.btn.fermer-urgence { width: 100%; justify-content: center; margin: 0 0 12px; border-color: var(--rouge); color: var(--rouge); }
.carte.fermeture-active { margin: 0 0 12px; border: 2px solid var(--rouge); background: color-mix(in srgb, var(--rouge) 8%, var(--carte)); }
.carte.fermeture-active b { color: var(--rouge); font-size: 17px; }
.carte.fermeture-active p { margin: 6px 0 12px; }
.liste-prevenir { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.liste-prevenir li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; }
/* quantités du jour */
.liste-quantites { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.liste-quantites li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--fond); }
.liste-quantites li.peu b { color: var(--jaune-texte); }
.liste-quantites li.a-zero b { color: var(--rouge); }
.grille-quantites { display: grid; gap: 4px; margin: 8px 0 14px; }
.grille-quantites input { width: 96px; text-align: right; }
/* commandes à l'avance */
.jour-avenir { font-size: 15px; margin: 18px 0 8px; text-transform: none; }
.jour-avenir::first-letter { text-transform: uppercase; }
.badge-avance { display: inline-block; margin: 2px 0 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--jaune) 35%, transparent); font-size: 13px; font-weight: 700; }

/* connexion par lien : l'e-mail est parti */
.lien-envoye { margin: 28px 0 18px; display: grid; gap: 10px; }
.lien-envoye h1 { font-size: 24px; }

/* formule Pro : adresses et équipe */
.adresse-ligne { display: grid; gap: 6px; padding: 12px 0; border-top: 1.5px solid var(--ligne, #E4E1DA); }
.adresse-ligne input, .equipe-ajout input { width: 100%; min-height: 44px; padding: 0 12px; border: 2px solid var(--encre, #0B0E0C); border-radius: 12px; font: inherit; font-size: 16px; background: #fff; }
.adresse-ligne .btn { justify-self: start; }
.equipe-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.equipe-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1.5px solid var(--ligne, #E4E1DA); }
.equipe-ajout { display: grid; gap: 8px; }
.equipe-ajout .btn { justify-self: start; }

/* feuilles : le titre reçoit le focus sur téléphone (pas de clavier ouvert d'office) */
.feuille h2:focus { outline: none; }
.feuille h2:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
/* une fiche produit changée : on propose d'enregistrer avant de fermer */
.garde-modif { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--jaune-pale, #FFF6C2); border: 1.5px solid var(--jaune, #FED905); }
/* carte commande : grille fixe (le pouce trouve toujours « C'est prêt » au même endroit) */
.commande .cmd-pied { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.commande .cmd-total { flex: 1; min-width: 0; }
.commande .cmd-gestes { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.commande .cmd-gestes.deux { grid-template-columns: 1fr 1fr; }
.commande .cmd-gestes .btn { min-height: 52px; width: 100%; justify-content: center; }
.commande .badge-prepa { display: inline-flex; align-items: center; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--jaune-fonce); color: var(--jaune-texte); font-weight: 700; font-size: 13px; }
.commande .lien-annuler { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--rouge-clair); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.etat-ferme { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--rouge); color: var(--rouge-clair); font-weight: 700; font-size: 14px; }
.etat-ferme i { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); display: inline-block; }
/* commandes et agenda dans le même commerce : un sélecteur en haut */
.commutateur-jour { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 0 0 14px; border-radius: 14px; background: var(--fond2); }
.commutateur-jour a { min-height: 44px; display: grid; place-items: center; border-radius: 10px; font-weight: 700; color: var(--texte); text-decoration: none; }
.commutateur-jour a[aria-current="page"] { background: var(--jaune); }
@media (max-width: 860px) { nav.onglets-app.peu { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
/* agenda : noter un rendez-vous ou bloquer un créneau */
.rdv-ajouter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 14px; }
.rdv-ajouter .btn { width: 100%; }
.carte.rdv-bloque { border-style: dashed; background: var(--fond2); }
.carte.rdv-bloque .lien-annuler { display: inline-block; margin: 6px 0 0; padding: 0; min-height: 44px; border: 0; background: none; color: var(--texte); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.badge-ferme { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 12.5px; font-weight: 700; }
.tourne { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tourne { animation: none; } }
.relue { display: grid; gap: 8px; }
.relue-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 84px 44px; gap: 8px; align-items: center; }
.relue-ligne input { min-height: 44px; }
/* page Publier : les formules se choisissent */
button.carte.formule { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 2px solid var(--ligne); }
button.carte.formule[aria-checked="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 3px var(--jaune); }
button.carte.formule:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.code-otp { margin: 14px 0 12px; padding: 14px; border: 1.5px solid var(--ligne); border-radius: 14px; }
.code-otp label { display: block; font-weight: 700; margin-bottom: 8px; }
.code-otp input { min-height: 48px; }
/* le message flottant : en bas, au-dessus de la barre d'onglets (il ne cache plus les titres) */
@media (max-width: 860px) { body:has(nav.onglets-app) #toast { bottom: calc(env(safe-area-inset-bottom) + 86px); } }
.feuille .pub-puces + .sous-titre { margin-top: 16px; }

/* agenda : un jour fermé d'après les horaires se voit tout de suite */
.rdv-jours-agenda button.jour-ferme { opacity: .55; }
.rdv-jours-agenda button.jour-ferme small { font-style: italic; }

/* la carte commande : quand le client passe, en gros, dans la tête de carte */
.pastille-retrait { display: inline-block; margin: 2px 0 6px; padding: 4px 12px; border-radius: 999px; background: var(--encre); color: var(--fond); font-weight: 800; font-size: 15px; }

/* Réglages : les horaires jour par jour */
.horaires-jours .jour-h { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.horaires-jours .jour-h:last-of-type { border-bottom: 0; }
.horaires-jours .jour-h-nom { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.horaires-jours .jour-h-nom input { width: 22px; height: 22px; }
.horaires-jours .jour-h.ferme .jour-h-nom span { opacity: .6; }
.horaires-jours .jour-h-plages { display: grid; gap: 6px; }
.horaires-jours .jour-h-plage { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.horaires-jours .jour-h-plage input { min-height: 44px; flex: 1 1 0; min-width: 0; max-width: 8em; padding: 0 6px; }
.horaires-jours .jour-h > .discret { min-height: 44px; display: flex; align-items: center; }
.horaires-jours .lien-discret { min-height: 44px; background: none; border: 0; padding: 0 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; font: inherit; font-size: 14px; }
.horaires-apercu { white-space: pre-wrap; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--carte2); font: inherit; font-size: 14px; }
@media (max-width: 420px) { .horaires-jours .jour-h { grid-template-columns: 1fr; gap: 2px; } }
/* cibles tactiles : 44 px au moins, même pour les cases et les liens dans le texte */
.opt-edit-case, .cuisine-wa { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.opt-edit-case input, .cuisine-wa input { width: 24px; height: 24px; flex: none; }
main.page p a:not(.btn), main.page li a:not(.btn), main.page .discret a:not(.btn), main.page .info a:not(.btn) { display: inline-block; padding: 12px 0; margin: -12px 0; }
.horaires-jours .retirer-plage { width: 44px; text-decoration: none; font-size: 22px; text-align: center; }

/* Revue « commerçant pressé » */
/* les champs date et heure ont l'allure des autres champs (sinon : petits, natifs, différents d'un téléphone à l'autre) */
input[type=date], input[type=time] { appearance: none; -webkit-appearance: none; display: flex; align-items: center; line-height: 1.2; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; }
/* dans une feuille : un champ ne colle plus aux puces juste au-dessus */
.pub-puces + .champ, .pub-puces + .ligne-flex, .pub-puces + div > .champ:first-child { margin-top: 16px; }
/* la croix de fermeture des feuilles : visible d'un coup d'œil */
.feuille > .entete .icone { font-size: 26px; line-height: 1; }
/* un message flottant ne se cache plus sous une feuille ouverte : il passe en haut */
body:has(.voile) #toast { top: calc(env(safe-area-inset-top) + 14px); bottom: auto !important; z-index: 60; }
/* les feuilles montent du bas, le voile s'assombrit doucement ; un bouton touché s'enfonce un peu */
.voile { animation: voile-entre .18s ease-out; }
.feuille { animation: feuille-monte .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes voile-entre { from { background: rgba(11,14,12,0); } }
@keyframes feuille-monte { from { transform: translateY(28px); opacity: .4; } }
@media (min-width: 700px) { @keyframes feuille-monte { from { transform: translateY(12px) scale(.98); opacity: 0; } } }
.btn, .puce, .icone, .dispo, .stepper button, .tables button { transition: transform .08s ease-out; }
.btn:active:not([disabled]), .puce:active, .icone:active, .dispo:active, .stepper button:active, .tables button:active { transform: scale(.97); }
#toast { transition: opacity .2s, transform .2s; }
/* le code du cadeau de retour : l'exemple s'écrit normalement, le résultat se voit */
.verif-retour input::placeholder { text-transform: none; letter-spacing: normal; }
.verif-retour [role=status]:not(:empty) { font-weight: 700; }
.comptoir-sep { border: 0; border-top: 1px solid var(--ligne); margin: 16px 0 0; }
.comptoir .verif-retour:first-child { margin-top: 0 !important; }

/* « Retoucher une partie » (v28) */
.panneau-partie { display: grid; gap: 8px; margin-top: 12px; padding: 12px 0 0; border-top: 2px dashed #8F8A83; }
.panneau-partie .pp-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panneau-partie .aide { margin: 0; font-weight: 700; font-size: 14.5px; }
.panneau-partie .pp-fermer { width: 40px; height: 40px; border: 2px solid #0B0E0C; border-radius: 50%; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.panneau-partie .puces { display: flex; flex-wrap: wrap; gap: 6px; }
.panneau-partie .puce { min-height: 38px; padding: 0 12px; border: 2px solid #0B0E0C; border-radius: 19px; background: #fff; color: #0B0E0C; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.panneau-partie .puce[aria-checked="true"], .panneau-partie .puce[aria-pressed="true"] { background: #0B0E0C; color: #fff; }
.panneau-partie .demande-partie { height: 46px; border: 2px solid #0B0E0C; border-radius: 12px; padding: 0 12px; font: inherit; font-size: 16px; }
.panneau-partie .pp-envoyer { height: 50px; border: 2.5px solid #0B0E0C; border-radius: 14px; background: #FED905; color: #0B0E0C; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.panneau-partie .pp-envoyer:disabled { opacity: .5; cursor: default; }
.panneau-partie .puce:focus-visible, .panneau-partie .pp-envoyer:focus-visible, .panneau-partie .pp-fermer:focus-visible { outline: 3px solid #E0312B; outline-offset: 2px; }
.panneau-partie .petit { margin: 0; font-size: 12.5px; color: #57524C; }

/* bouton « ? » : l'assistant kodpéi, 24 h/24 */
.aide-btn { font: 700 19px/1 var(--titre); margin-left: auto; }
.aide-btn + .icone { margin-left: 8px; }

/* v43 : « Gestion ↗ » (propriétaire seulement), à côté de la roue, même gabarit que les icônes de l'en-tête */
.kp-gestion { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 10px 0 12px; margin-left: 8px; border-radius: 12px; border: 2px solid var(--encre); background: var(--fond); color: var(--texte); font: 700 13.5px/1 var(--titre); text-decoration: none; white-space: nowrap; transition: transform .08s ease-out; }
.kp-gestion i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--jaune); color: var(--encre); font-size: 13px; }
.kp-gestion:active { transform: scale(.97); }
.kp-gestion:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.kp-gestion + .icone { margin-left: 8px; }
.entete > .espace + .kp-gestion { align-self: flex-start; }
.entete > .espace { min-width: 0; }
/* dans le Studio (en-tête st-tete) : l'heure laisse sa place au bouton sur téléphone, le reste ne bouge pas */
.st-tete > .kp-gestion { margin-left: 0; }
.st-tete > .kp-gestion + .icone { margin-left: 0; }
@media (max-width: 440px) {
  .st-tete:has(> .kp-gestion) { gap: 8px; }
  .st-tete:has(> .kp-gestion) > .st-heure { display: none; }
  .kp-gestion { padding: 0 8px 0 10px; gap: 4px; }
}
@media (max-width: 360px) {
  .kp-gestion { padding: 0 7px 0 9px; font-size: 13px; }
  .kp-gestion i { width: 18px; height: 18px; font-size: 12px; }
  .st-tete:has(> .kp-gestion) > .st-marque .st-pill { display: none; }
  .st-tete:has(> .kp-gestion) .st-logo { font-size: 30px; }
}

/* ---------- Mon espace kodpéi (propriétaire) : espace.js ---------- */
.ep .carte { margin-bottom: 14px; }
.ep h2 { font-size: 18px; margin: 0 0 6px; }
.ep-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ep-onglets { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: var(--fond2); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.ep-onglets a { flex: 1 1 auto; min-height: 44px; display: grid; place-items: center; padding: 0 8px; border-radius: 10px; color: var(--discret); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.ep-onglets a[aria-current="page"] { background: var(--encre); color: var(--fond); }
@media (max-width: 520px) { .ep-onglets { flex-wrap: wrap; overflow-x: visible; } .ep-onglets a { flex: 1 1 30%; } }
.ep-modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.ep-modele { height: auto; min-height: 64px; padding: 10px 14px; border-radius: 14px; display: grid; gap: 2px; text-align: left; }
.ep-modele b { font-size: 15px; }
.ep-modele span { font-weight: 500; font-size: 12.5px; line-height: 1.35; opacity: .85; }
.ep-liste { display: grid; margin-top: 6px; }
.ep-ligne { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--ligne); color: var(--texte); text-decoration: none; text-align: left; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; }
.ep-ligne:first-child { border-top: 0; }
.ep-ligne.bouton { cursor: pointer; }
.ep-ligne .espace { display: grid; gap: 2px; min-width: 0; }
.ep-ligne .espace b { font-size: 15px; overflow-wrap: anywhere; }
.ep-ligne .espace .discret { font-size: 13px; overflow-wrap: anywhere; }
.ep-ligne.lu b { font-weight: 500; }
.ep-pt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ligne2); }
.ep-pt.rouge { background: var(--rouge); box-shadow: 0 0 0 4px rgba(224, 49, 43, .15); }
.ep-pt.jaune { background: var(--jaune); box-shadow: 0 0 0 4px rgba(254, 217, 5, .25); }
.ep-pt.vert { background: var(--vert); }
.etat.rouge i { background: var(--rouge); }
.ep-chiffres { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; margin-bottom: 14px; }
@media (max-width: 560px) { .ep-chiffres > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ep-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 400px) { .ep-grille { grid-template-columns: 1fr; } }
.ep-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-badge { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--fond2); color: var(--discret); }
.ep-badge.oui { background: #DDF3E6; color: #14633C; }
.ep-conseils { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; }
.ep-barre { margin: 10px 0; }
.ep-barre .discret { font-size: 12.5px; margin: 4px 0 0; }
.ep-jauge { height: 8px; border-radius: 4px; background: var(--fond2); overflow: hidden; margin-top: 6px; }
.ep-jauge i { display: block; height: 100%; background: var(--encre); }
.ep-jauge.haut i { background: var(--rouge); }
.ep-jeton { padding: 12px 0; border-top: 1px solid var(--ligne); }
.ep-jeton input { flex: 1; min-width: 0; }

/* petit téléphone : l'aperçu garde sa place (une seule ligne de boutons, « Ouvrir en grand » devient une icône), le nom du commerce reste lisible */
@media (max-width: 380px) {
  .etabli { padding: 12px; gap: 10px; }
  .etabli .boutons { flex-wrap: nowrap; }
  .etabli .boutons .segment button { padding: 0 10px; font-size: 12.5px; }
  .etabli .en-grand { width: 44px; padding: 0; flex: none; }
  .etabli .en-grand .long { display: none; }
  .mobile-onglets button { font-size: 14px; }
  .barre .interieur > .btn.petit { max-width: 108px; padding: 4px 10px; font-size: 13px; line-height: 1.15; }
}
/* petit téléphone : le titre garde sa ligne, le bouton « Ouvert / En pause » passe dessous en entier ; les gestes tiennent sur une ligne */
@media (max-width: 480px) { .page > .entete:has(> h1 + .btn.petit) { flex-wrap: wrap; gap: 10px; } .page > .entete > h1 + .btn.petit { width: 100%; } }
@media (min-width: 481px) { .page > .entete > h1:has(+ .btn.petit) { white-space: nowrap; } }
@media (max-width: 380px) {
  .cmd-gestes .btn { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .onglets-cmd.quatre button { font-size: 11.5px; letter-spacing: -.2px; white-space: nowrap; }
}
@media (max-width: 380px) { .rdv-ajouter .btn { padding-left: 8px; padding-right: 8px; gap: 6px; font-size: 14px; } .rdv-ajouter .btn.jaune { white-space: nowrap; } }
/* petit téléphone : les heures d'ouverture tiennent dans la carte (l'icône d'horloge se retire, toucher le champ ouvre le choix) */
@media (max-width: 380px) { .horaires-jours .jour-h-plage input { padding: 0 4px; } .horaires-jours .jour-h-plage input::-webkit-calendar-picker-indicator { display: none; } }
/* dans une feuille : deux champs côte à côte (jour et heure, du… au…) passent l'un sous l'autre quand la place manque */
.feuille .ligne-flex:has(> .champ) { flex-wrap: wrap; align-items: flex-start; }
.feuille .ligne-flex > .champ { flex: 1 1 140px !important; min-width: 0; }
.feuille .ligne-flex > .champ input { min-width: 0; }
/* un bouton qui passe sur deux lignes les équilibre (jamais un mot seul en dessous) */
.btn, .puce { text-wrap: balance; }
@media (max-width: 360px) { .onglets-cmd.quatre button { font-size: 11px; padding: 4px 1px; } }
/* v42 : connexion par code à 6 chiffres */
.code-otp.grand { padding: 16px; border-color: var(--jaune); }
.code-otp .grand-code { width: 100%; box-sizing: border-box; min-height: 64px; font-size: 30px; font-weight: 700; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; padding: 8px 0 8px .35em; }