/* ── CHARTE VISUELLE ANNETTE v1 — tokens, ne rien inventer ─────────── */
:root{
  --bleu:#0054a6;--bleu6:#1066c2;--bleu5:#4d94e5;--bleu3:#93bff0;--bleu2:#d2e5f9;--bleu1:#e8f1fc;
  --orange:#e8802b;--orange2:#d8862a;
  --cream0:#fff;--cream50:#fdfbf6;--cream100:#fbf6ee;--cream200:#f1e9da;--cream300:#e4d8c2;
  --ink900:#2b2b2b;--ink700:#4a4a48;--ink500:#6f6e6a;--ink300:#a9a8a2;--ink100:#d8d6cf;
  --success:#2f8f5b;--warning:#d8862a;--danger:#c0392b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--cream100);
     color:var(--ink900);font-size:14px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:20px 26px 60px}

.logo{font-family:'Dancing Script',cursive;font-weight:700;font-size:30px;color:var(--bleu);line-height:.9}
.logo small{display:block;font-family:'Jost',sans-serif;font-weight:500;font-size:10px;letter-spacing:3px;
            color:var(--ink500);text-transform:uppercase;margin-top:2px}
h1{font-family:'Jost',sans-serif;font-weight:600;font-size:24px;color:var(--ink900)}
.surtitre{font-family:'Jost',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:2.5px;
          text-transform:uppercase;color:var(--ink500)}
.lbl{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
     color:var(--ink500);font-weight:600}

header.top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:4px 0 18px}
header.top .spacer{flex:1}

.card{background:var(--cream0);border:1px solid var(--cream200);border-radius:18px;padding:18px 20px;
      box-shadow:0 1px 2px rgba(43,43,43,.03)}
.card h3{font-family:'Jost',sans-serif;font-weight:600;font-size:16px}
.card .sub{font-size:12px;color:var(--ink500);margin:1px 0 8px}

.hero{background:var(--bleu);color:#fff;border:none;min-height:150px;display:flex;flex-direction:column;
      justify-content:space-between;border-radius:18px;padding:18px 20px}
.hero .k{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
         opacity:.85;font-weight:600}
.hero .v{font-family:'Jost',sans-serif;font-weight:700;font-size:38px;line-height:1;margin-top:6px}
.hero .ref{font-size:12px;opacity:.9;margin-top:8px;line-height:1.55}
.hero .badge{background:rgba(255,255,255,.18);color:#fff}

.btn{border:1.5px solid var(--bleu);background:#fff;color:var(--bleu);font-family:'Jost',sans-serif;
     font-weight:600;font-size:13px;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.12s}
.btn:hover{background:var(--bleu1)}
.btn.fill{background:var(--bleu);color:#fff}
.btn.fill:hover{background:var(--bleu6)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{border-color:var(--cream300);color:var(--ink700)}
.btn.ghost:hover{background:var(--cream50)}

.chip{border:1px solid var(--cream300);background:#fff;color:var(--ink700);border-radius:999px;
      padding:6px 15px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:.12s}
.chip:hover{background:var(--cream50)}
.chip.on{background:var(--bleu1);border-color:var(--bleu3);color:var(--bleu);font-weight:600}
.chip:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;
       border-radius:999px;width:fit-content;font-family:'Jost',sans-serif}
.badge.up{background:#e6f3ec;color:var(--success)}
.badge.down{background:#fbe9e7;color:var(--danger)}
.badge.food{background:#fcebd9;color:#9c5410}
.badge.boisson{background:var(--bleu1);color:var(--bleu)}
.badge.todo{background:#fbeed6;color:#7a5a16}

.note{background:#fbeed6;border:1px solid #ebd3a0;color:#7a5a16;border-radius:14px;padding:10px 15px;
      font-size:12.5px;line-height:1.55}
.note strong{font-family:'Jost',sans-serif}
.note.info{background:var(--bleu1);border-color:var(--bleu3);color:var(--bleu)}

/* `inherit` ne suffit pas : selon le navigateur et le contexte d'embed,
   un champ de formulaire retombe sur la police système. On la nomme. */
input,select,textarea,button{font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif}
input:not([type]),input[type=text],input[type=date],input[type=number],input[type=email],input[type=tel],input[type=time],select{
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;font-size:14px;color:var(--ink900);background:#fff;border:1px solid var(--cream300);
  border-radius:999px;padding:11px 16px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--bleu3);box-shadow:0 0 0 3px var(--bleu1)}
textarea{font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;font-size:13.5px;color:var(--ink900);background:#fff;
         border:1px solid var(--cream300);border-radius:14px;padding:10px 14px;outline:none;width:100%;
         resize:vertical;min-height:64px;line-height:1.6}
.field{display:flex;flex-direction:column;gap:7px}
.field > .lbl{margin-left:3px}

/* ── Étapes ────────────────────────────────────────────────────────── */
.step{background:var(--cream0);border:1px solid var(--cream200);border-radius:18px;margin-bottom:14px;
      box-shadow:0 1px 2px rgba(43,43,43,.03);overflow:hidden;transition:.15s}
.step.locked{opacity:.5}
.step.active{border-color:var(--bleu3);box-shadow:0 1px 2px rgba(43,43,43,.03),0 0 0 3px var(--bleu1)}
.step-head{display:flex;align-items:center;gap:13px;padding:15px 20px;cursor:pointer;user-select:none}
.step.locked .step-head{cursor:not-allowed}
.step-num{width:26px;height:26px;border-radius:999px;background:var(--cream200);color:var(--ink500);
          display:grid;place-items:center;font-family:'Jost',sans-serif;font-weight:700;font-size:12px;flex:none}
.step.active .step-num{background:var(--bleu);color:#fff}
.step.done .step-num{background:var(--success);color:#fff}
.step-title{font-family:'Jost',sans-serif;font-weight:600;font-size:15px;flex:none}
.step-summary{font-size:12.5px;color:var(--ink500);flex:1;text-align:right;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.step-body{padding:0 20px 20px;display:none}
.step.active .step-body{display:block}
.step-body > .lbl{display:block;margin:16px 0 8px}
.step-body > .lbl:first-child{margin-top:2px}

/* ── Options cliquables (grandes cartes) ───────────────────────────── */
.opts{display:grid;gap:10px}
.opts.c2{grid-template-columns:repeat(2,1fr)}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opt{border:1px solid var(--cream300);background:#fff;border-radius:16px;padding:13px 15px;cursor:pointer;
     text-align:left;font-family:inherit;transition:.12s;position:relative;display:flex;flex-direction:column;gap:3px}
.opt:hover:not(:disabled){background:var(--cream50);border-color:var(--bleu3)}
.opt.on{background:var(--bleu1);border-color:var(--bleu);box-shadow:inset 0 0 0 1px var(--bleu)}
.opt:disabled{opacity:.4;cursor:not-allowed;background:var(--cream50)}
.opt .t{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--ink900);
        display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.opt .t em{font-style:normal;font-family:'Jost',sans-serif;font-weight:700;font-size:14px;color:var(--bleu);flex:none}
.opt .d{font-size:12px;color:var(--ink500);line-height:1.5}
.opt .why{font-size:11.5px;color:var(--ink300);line-height:1.5}
.opt .flag{position:absolute;top:-8px;right:12px;background:var(--orange);color:#fff;
           font-family:'Jost',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:1px;
           text-transform:uppercase;padding:3px 9px;border-radius:999px}

/* ── Plan de salle ─────────────────────────────────────────────────── */
.plan-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.plan svg{width:100%;height:auto;display:block}
.plan-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:10px}
.chip.big{font-family:'Jost',sans-serif;font-weight:600;font-size:13px;padding:9px 18px}
.chip.big.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.zn{cursor:pointer;transition:.12s}
.zn:hover .zn-fill{fill:var(--bleu2)}
.zn-fill{fill:var(--cream100);stroke:var(--cream300);stroke-width:1.5}
.zn.on .zn-fill{fill:var(--bleu1);stroke:var(--bleu);stroke-width:2.5}
.zn.ko{cursor:not-allowed}
.zn.ko .zn-fill{fill:var(--cream50);stroke:var(--cream200);stroke-dasharray:4 4}
.zn.ko:hover .zn-fill{fill:var(--cream50)}
.zn-t{font-family:'Jost',sans-serif;font-weight:600;font-size:12px;fill:var(--ink900);
      text-anchor:middle;pointer-events:none}
.zn-c{font-family:'Jost',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.8px;
      fill:var(--ink500);text-anchor:middle;pointer-events:none;text-transform:uppercase}
.zn.on .zn-t,.zn.on .zn-c{fill:var(--bleu)}
.zn.ko .zn-t,.zn.ko .zn-c{fill:var(--ink300)}
.zn:focus{outline:none}
.zn:focus-visible .zn-fill{stroke:var(--bleu);stroke-width:3}
.zn-deco{color:var(--ink500);pointer-events:none}
.zn.on .zn-deco{color:var(--bleu)}
.zn.ko .zn-deco{color:var(--ink300);opacity:.5}
/* Espace fermé : hachuré, sans mobilier, sans curseur de clic. */
.zn-ferme{cursor:default}
.zn-ferme .zn-fill{fill:var(--cream50);stroke:var(--cream300);stroke-dasharray:4 4}
.zn-ferme:hover .zn-fill{fill:var(--cream50)}
.zn-hach{pointer-events:none;opacity:.45}
.zn-ferme .zn-t{fill:var(--ink300);text-decoration:line-through;text-decoration-thickness:1px}

.zn-ext .zn-fill{stroke-dasharray:7 5}
.zn-face .zn-fill{stroke:var(--orange);stroke-width:2;stroke-dasharray:6 4}
.zn-face-t{fill:var(--orange)!important}
.zn-ext.on .zn-fill{stroke-dasharray:none}
.zn-tick{fill:var(--bleu)}
.zn-tickm{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Bandeau photos ────────────────────────────────────────────────── */
.photobar{background:var(--cream0);border:1px solid var(--cream200);border-radius:18px;
          padding:14px 16px 16px;margin-bottom:14px;transition:border-color .12s}
.photobar.apercu{border-color:var(--bleu3);background:var(--bleu1)}
.photobar-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.photobar-title{font-family:'Jost',sans-serif;font-weight:600;font-size:15px;color:var(--ink900)}
.photobar.apercu .photobar-title{color:var(--bleu)}
.photostrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.photocell{position:relative;border-radius:14px;overflow:hidden;background:var(--cream50);
           border:1px solid var(--cream200);aspect-ratio:4/3;display:flex;flex-direction:column}
.photocell img{width:100%;height:100%;object-fit:cover;display:block}
.photocell.vide{border-style:dashed;border-color:var(--cream300);align-items:center;
                justify-content:center;gap:6px}
.photocell .ph-txt{font-size:12px;color:var(--ink300)}
.photocell figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 7px;
  font-size:11px;line-height:1.4;color:#fff;
  background:linear-gradient(to top,rgba(43,43,43,.72),rgba(43,43,43,0))}
.photocell.vide figcaption{position:static;background:none;color:var(--ink300);
  padding:0 8px;text-align:center}

/* ── Groupe à quantité (verres, bouchées) ──────────────────────────── */
/* En grille plutôt qu'empilés : 3 par ligne sur grand écran, 2 sur portable,
   1 sur mobile. Six groupes de boissons empilés faisaient une page à rallonge. */
.grps{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grp{background:#fff;border:1px solid var(--cream200);border-radius:16px;padding:13px 16px}
.grp-head{display:flex;flex-direction:column;gap:2px;margin-bottom:9px}
.grp-t{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--ink900)}
.grp-t em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--ink500)}
.grp-d{font-size:12px;color:var(--ink500);line-height:1.5}
.stepper{display:flex;align-items:center;gap:9px}
.st-b{width:30px;height:30px;border-radius:999px;border:1.5px solid var(--bleu);background:#fff;
      color:var(--bleu);font-family:'Jost',sans-serif;font-weight:700;font-size:17px;line-height:1;
      cursor:pointer;flex:none;transition:.12s}
.st-b:hover{background:var(--bleu1)}
.st-v{font-family:'Jost',sans-serif;font-weight:700;font-size:19px;min-width:24px;text-align:center}
.st-u{font-size:12px;color:var(--ink500)}
.grp-items{margin-top:11px}
.grp-items .chip{font-size:12px;padding:5px 12px}
.grp-off{opacity:.35}

/* ── Curseur de pénibilité ─────────────────────────────────────────── */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;
  background:transparent;cursor:pointer;margin:6px 0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(to right,var(--bleu3),var(--bleu),var(--orange))}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;
  background:linear-gradient(to right,var(--bleu3),var(--bleu),var(--orange))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:999px;background:#fff;border:3px solid var(--bleu);margin-top:-7px;
  box-shadow:0 1px 3px rgba(43,43,43,.18)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:999px;background:#fff;
  border:3px solid var(--bleu);box-shadow:0 1px 3px rgba(43,43,43,.18)}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--bleu1)}
.pen-v{font-family:'Jost',sans-serif;font-weight:700;font-size:30px;line-height:1;color:var(--bleu)}
.pen-t{font-family:'Jost',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink900)}
.pen-d{font-size:12px;color:var(--ink500);line-height:1.5;margin-top:2px}
.pen-ech{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink300);
  font-family:'Jost',sans-serif;letter-spacing:.5px;margin-top:-2px}
.pen-calc{font-size:12.5px;color:var(--ink700);line-height:1.7;background:var(--cream50);
  border:1px solid var(--cream200);border-radius:12px;padding:10px 13px;margin-top:11px}
.pen-calc b{font-family:'Jost',sans-serif;font-weight:700}

/* ── Compteur de capacité ──────────────────────────────────────────── */
.capbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;
        border:1px solid var(--cream200);background:var(--cream50);border-radius:16px;
        padding:11px 15px}
.capbar .v{font-family:'Jost',sans-serif;font-weight:700;font-size:17px}
.capbar .v.ok{color:var(--success)} .capbar .v.ko{color:var(--danger)}
.capbar .t{font-size:12.5px;color:var(--ink500);line-height:1.5;flex:1;min-width:180px}
.capjauge{flex:none;width:120px;height:14px;border-radius:999px;background:var(--cream200);
          overflow:hidden}
.capjauge i{display:block;height:100%;border-radius:999px;background:var(--success);transition:width .18s}
.capjauge i.ko{background:var(--danger)}

/* ── Tableaux ──────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--cream200);color:var(--ink500);
   font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
td{padding:9px 12px;border-bottom:1px solid var(--cream100);vertical-align:top}
th.num,td.num{text-align:right;font-family:'Jost',sans-serif;font-weight:600}
tbody tr:hover{background:var(--cream50)}
tfoot td{border-top:2px solid var(--cream200);border-bottom:none;font-family:'Jost',sans-serif;font-weight:700}

.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.sticky{position:sticky;top:16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.sep{height:1px;background:var(--cream200);margin:14px 0}
.muted{color:var(--ink500)}
.tiny{font-size:11.5px;line-height:1.6}
.rec-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;
          border-bottom:1px solid var(--cream100)}
.rec-line span:first-child{color:var(--ink500)}
.rec-line span:last-child{font-family:'Jost',sans-serif;font-weight:600;text-align:right}

@media(max-width:900px){
  .grps{grid-template-columns:1fr}
  .grid2,.plan-wrap{grid-template-columns:1fr}
  .opts.c3,.opts.c2{grid-template-columns:1fr}
  .sticky{position:static}
  .step-summary{display:none}
}

/* Aide courte sous un intitulé de sous-choix (composition du repas,
   mode de service). Volontairement discrète : c'est une précision,
   pas une question de plus. */
.hint{font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;line-height:1.5;
      color:var(--ink500);margin:2px 0 8px}

/* Équipe mobilisée : des blocs chiffre + intitulé, pas un tableau.
   Le chiffre doit se lire de loin, c'est ce qu'on cherche en coup d'œil. */
.eq-grid{display:grid;gap:10px;margin-top:10px;
         grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.eq-c{display:flex;gap:12px;align-items:center;background:var(--cream50);
      border:1px solid var(--cream200);border-radius:18px;padding:12px 14px}
.eq-n{font-family:'Jost',sans-serif;font-weight:700;font-size:28px;color:var(--bleu);
      line-height:1;min-width:34px;text-align:center}
.eq-q{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--ink900)}
.eq-d{font-size:11.5px;line-height:1.45;color:var(--ink500);margin-top:2px}
@media(max-width:900px){.eq-grid{grid-template-columns:1fr}}

/* Sépare les parts d'espace (le « quoi ») de la chaîne de calcul
   (le « combien »). Sans ça les deux blocs se lisaient comme une seule
   liste de pourcentages et on ne voyait plus ce qui multipliait quoi. */
.rec-line.rec-sep{border-top:1px solid var(--cream200);margin-top:6px;padding-top:10px}

/* ── Champ date maison ─────────────────────────────────────────────
   Le sélecteur natif ne se style pas et se referme dès qu'on change de
   mois, parce que sa navigation déclenchait un rendu. Celui-ci tient
   dans la charte et reste ouvert tant qu'aucun jour n'est choisi. */
/* Même colonne label/champ que .field : sans ça la date remontait de 7 px
   au-dessus du champ voisin. */
.datefield{position:relative;display:flex;flex-direction:column;gap:7px}
.datebtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:'Be Vietnam Pro',sans-serif;font-size:14px;color:var(--ink900);text-align:left;
  background:#fff;border:1px solid var(--cream300);border-radius:999px;
  padding:11px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
/* La flèche était plaquée au bord droit d'un champ très large : elle
   flottait toute seule à 300 px du texte. Elle suit maintenant la date. */
.datebtn{justify-content:flex-start;gap:9px}
.datebtn:hover{border-color:var(--bleu3)}
.datebtn:focus-visible{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu1)}
.datebtn.vide{color:var(--ink300)}
.dateic{color:var(--ink300);font-size:10px;line-height:1}

.calpop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;min-width:286px;
  background:var(--cream0);border:1px solid var(--cream200);border-radius:18px;
  box-shadow:0 14px 40px rgba(43,43,43,.14);padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-m{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--ink900);
  text-transform:capitalize}
.cal-nav{width:30px;height:30px;border-radius:999px;border:1px solid var(--cream300);
  background:var(--cream0);color:var(--bleu);font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.cal-nav:hover{background:var(--bleu1);border-color:var(--bleu3)}
.cal-j,.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-j span{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1px;color:var(--ink300);
  text-align:center;padding-bottom:5px}
.cal-v{height:34px}
.cal-d{height:34px;border:none;background:none;border-radius:999px;cursor:pointer;
  font-family:'Be Vietnam Pro',sans-serif;font-size:13px;color:var(--ink700);
  transition:background .12s,color .12s}
.cal-d:hover{background:var(--cream100);color:var(--ink900)}
.cal-d.ajd{color:var(--orange);font-weight:600}
.cal-d.on{background:var(--bleu);color:var(--cream0);font-weight:600}
.cal-d.on:hover{background:var(--bleu6);color:var(--cream0)}
.cal-foot{display:flex;justify-content:space-between;margin-top:10px;
  border-top:1px solid var(--cream200);padding-top:10px}
.cal-lien{background:none;border:none;cursor:pointer;font-family:'Jost',sans-serif;
  font-size:11.5px;letter-spacing:.6px;color:var(--bleu);padding:3px 6px;border-radius:999px}
.cal-lien:hover{background:var(--bleu1)}
@media(max-width:560px){.calpop{left:auto;right:0}}

/* Curseur de pénibilité intégré à la carte du minimum : le réglage et son
   résultat doivent être lus d'un seul coup d'œil, pas dans deux blocs. */
.pen-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--cream200)}
.pen-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.pen-res{text-align:right}
.pen-num{font-family:'Jost',sans-serif;font-weight:700;font-size:26px;color:var(--bleu);line-height:1.1}
.pen-row .spacer{flex:1 1 auto}

/* Le raisonnement derrière le coefficient suggéré : un chiffre qu'on ne
   peut pas expliquer ne se défend pas au téléphone. */
.pen-why{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.pw{font-size:11.5px;line-height:1.4;color:var(--ink500);background:var(--cream100);
    border-radius:999px;padding:4px 10px}
.pw.up{color:var(--orange2);background:#fbf1e6}
.pw.down{color:var(--success);background:#eaf4ee}

/* Deux cartes qui font le même travail — démarrer une fiche — méritent
   d'être côte à côte sur grand écran plutôt que empilées. */
.duo{display:grid;gap:14px;grid-template-columns:1fr 1fr;align-items:start}
.duo > .card{margin:0}
@media(max-width:900px){.duo{grid-template-columns:1fr}}

/* Effectifs ajustables : le chiffre reste lisible de loin, les boutons
   restent discrets tant qu'on ne les cherche pas. */
.eq-c{position:relative}
.eq-txt{flex:1}
.eq-c.eq-mod{border-color:var(--bleu3);background:var(--bleu1)}
.eq-pm{display:flex;flex-direction:column;gap:3px}
.eq-pm button{width:24px;height:22px;border-radius:7px;border:1px solid var(--cream300);
  background:var(--cream0);color:var(--bleu);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.eq-pm button:hover{background:var(--bleu1);border-color:var(--bleu3)}
.rec-line .ko{color:var(--danger)}

/* Le plan seul dans sa carte : il prend toute la largeur disponible,
   plafonnée pour qu'il ne devienne pas une affiche sur un grand écran. */
.plan-seul{width:100%}
.plan-seul .plan svg{max-width:860px;margin:0 auto}

/* Le module interne tourne en plein écran sur l'ordi du bureau, pas dans
   un embed Webflow : il a le droit de prendre la largeur disponible.
   Le module client garde la largeur contrainte de la page qui l'accueille. */
.wrap.wrap-large{max-width:1660px}
@media(min-width:1500px){
  .wrap-large .grid2{grid-template-columns:1.8fr 1fr}
  .wrap-large .plan-seul .plan svg{max-width:1040px}
}

/* Pièces prévues au forfait mais pas encore choisies : visibles, non
   cliquables, pour qu'on n'oublie pas de les caler avec la cuisine. */
.chip.autre,.chip.autre:disabled{background:var(--cream200);border-color:var(--cream300);
  color:var(--ink700);font-style:italic;opacity:1;cursor:default;text-decoration:none}

/* Le « − » collé à sa pastille : descendre d'une demi-dose sans refaire
   tout le tour du compteur. */
.chip-pair{display:inline-flex;align-items:stretch;gap:0}
.chip-pair .chip:first-child{border-top-right-radius:6px;border-bottom-right-radius:6px}
.chip.moins{min-width:36px;padding:8px 10px;font-weight:700;font-size:16px;color:var(--bleu);
  border-color:var(--bleu3);background:var(--bleu1);margin-left:-1px;
  border-top-left-radius:6px;border-bottom-left-radius:6px}
.chip.moins:hover{background:var(--bleu2)}

/* Droit de bouchon : deux tarifs côte à côte, chacun son compteur. */
.bouch-row{background:var(--cream50);border:1px solid var(--cream200);border-radius:18px;
  padding:12px 14px}
.bouch-t{display:flex;align-items:baseline;gap:8px;justify-content:space-between;
  font-family:'Jost',sans-serif;font-size:14px;margin-bottom:8px}
.bouch-d{font-size:11.5px;line-height:1.45;color:var(--ink500);margin-top:8px}

/* Pastille de dose sur une référence : le « ×2 » doit se lire avant le
   nom, pas se confondre avec le prix qui le suit. */
.chip .q{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:20px;padding:0 6px;margin-right:8px;
  border-radius:999px;background:var(--bleu);color:var(--cream0);
  font-family:'Jost',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.3px}
.chip.on .q{background:var(--bleu);color:var(--cream0)}
.chip .n{vertical-align:middle}
.chip .px{display:inline-block;margin-left:10px;padding-left:10px;
  border-left:1px solid var(--cream300);font-style:normal;font-size:12px;
  color:var(--ink500);font-weight:500}
.chip.on .px{border-left-color:var(--bleu3);color:var(--bleu6)}

/* Options en liste : une ligne par option, emoji à gauche, prix à droite.
   Les pavés à description prenaient un écran entier pour dix mots. */
.optlist{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.optrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--cream0);border:1px solid var(--cream300);border-radius:999px;
  padding:8px 14px;font-family:'Be Vietnam Pro',sans-serif;font-size:13.5px;
  color:var(--ink700);transition:border-color .12s,background .12s}
.optrow:hover{border-color:var(--bleu3);background:var(--bleu1)}
.optrow.on{border-color:var(--bleu);background:var(--bleu1);color:var(--bleu);font-weight:600}
.optrow .oe{font-size:15px;line-height:1;width:20px;text-align:center;flex:none}
.optrow .on-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optrow .op{flex:none;font-family:'Jost',sans-serif;font-weight:600;font-size:12px;
  color:var(--ink500)}
.optrow.on .op{color:var(--bleu)}
.optrow.on::before{content:'✓';color:var(--bleu);font-weight:700;margin-right:-4px}

/* Panneau qui se déplie sous les cartes de formule : la grille de prix du
   niveau retenu. Il glisse pour qu'on voie qu'il appartient au choix
   qu'on vient de faire. */
.fpan{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,
      margin-top .25s ease;margin-top:0}
.fpan.on{max-height:420px;opacity:1;margin-top:12px;background:var(--cream50);
  border:1px solid var(--cream200);border-radius:18px;padding:14px 16px}
.fpan textarea{width:100%;margin-top:6px}
.fpan .rec-line:last-of-type{border-bottom:none}

/* Décomposition du total : un poste par ligne, le détail au clic. */
.recap{background:var(--cream0);border:1px solid var(--cream200);border-radius:18px;
  padding:6px 8px;margin-top:12px}
/* Un poste repliable doit RESSEMBLER à un bouton avant qu'on le
   survole : sur iPad il n'y a pas de survol, et une ligne sans fond ni
   bordure se lit comme du texte mort. */
.rc-t{display:flex;align-items:center;gap:10px;width:100%;
  background:#fff;border:1px solid var(--cream200);
  cursor:pointer;padding:10px 12px;text-align:left;border-radius:12px;
  margin:4px 0;transition:border-color .12s ease,background .12s ease;
  font-family:'Be Vietnam Pro',sans-serif;font-size:13.5px;color:var(--ink900)}
.rc-t:hover{background:var(--cream50);border-color:var(--bleu2)}
.rc-t.on{background:var(--bleu1);border-color:var(--bleu2)}
/* Le mot qui dit ce que fait le clic, sous le nom du poste. */
.rc-h{display:block;font-size:10.5px;letter-spacing:.03em;color:var(--bleu);
  font-weight:600;margin-top:1px}
.rc-t.rc-min .rc-h,.rc-t.rc-tot .rc-h{display:none}
.rc-e{width:20px;text-align:center;flex:none;font-size:14px}
.rc-l{flex:1;min-width:0}
.rc-v{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;flex:none}
.rc-c{width:18px;height:18px;line-height:18px;text-align:center;flex:none;
  color:var(--bleu);font-size:10px;border-radius:50%;background:var(--bleu1)}
.rc-t.rc-min .rc-c,.rc-t.rc-tot .rc-c{background:none}
.rc-d{padding:2px 8px 10px 38px}
.rc-i{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.7;
  color:var(--ink500)}
.rc-i span:last-child{font-family:'Jost',sans-serif;font-weight:500;color:var(--ink700);flex:none}
/* Ces deux-là ne se cliquent pas : ils ne prennent donc ni cadre ni
   chevron, pour qu'on ne les essaie pas. */
.rc-t.rc-min{cursor:default;color:var(--danger);background:none;border-color:transparent}
.rc-t.rc-min:hover{background:none;border-color:transparent}
.rc-t.rc-tot{cursor:default;background:none;border:none;
  border-top:1px solid var(--cream200);margin-top:6px;
  border-radius:0;font-size:15px}
.rc-t.rc-tot:hover{background:none}
.rc-t.rc-tot .rc-v{font-size:18px;color:var(--bleu)}

/* Pastille d'état : lit un résultat, ne propose pas un choix. Pas de
   barré — rien n'est indisponible ici, on montre juste où on tombe. */
.chip.stat,.chip.stat:disabled{text-decoration:none;cursor:default}

/* ══ ÉCRAN DES PRIX ════════════════════════════════════════════════ */
.btn.cadenas{font-size:15px;padding:8px 12px;line-height:1}
.btn.cadenas.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.rg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:10px 22px;margin-top:12px}
.rg-row{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:12px;
  border:1px solid transparent}
.rg-row.modifie{background:var(--cream50);border-color:var(--bleu2)}
.rg-l{flex:1;font-size:13.5px;color:var(--ink900);line-height:1.35}
.rg-row.modifie .rg-l{font-weight:600}
.rg-box{display:flex;align-items:center;gap:6px;flex:none}
.rg-b{width:28px;height:28px;border-radius:999px;border:1px solid var(--cream300);
  background:#fff;color:var(--bleu);font-size:16px;font-weight:600;line-height:1;
  cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.rg-b:hover{border-color:var(--bleu3);background:var(--cream50)}
.rg-i{width:78px !important;text-align:right;padding:7px 10px !important;font-weight:600}
.rg-u{font-size:11.5px;color:var(--ink500);width:34px;flex:none}
.rg-lock{display:grid;gap:7px;margin-top:10px}
.rg-lk{display:flex;gap:10px;font-size:12.5px;color:var(--ink500);line-height:1.5}
@media (max-width:640px){ .rg-grid{grid-template-columns:1fr} }

/* ══ FENÊTRE DE DÉVERROUILLAGE & MESSAGES ══════════════════════════ */
.mdl-ov{position:fixed;inset:0;z-index:200;background:rgba(20,22,28,.42);
  display:flex;align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mdl{background:#fff;border-radius:18px;padding:24px 26px;width:100%;max-width:380px;
  box-shadow:0 18px 50px rgba(20,22,28,.22)}
.mdl-t{font-family:'Jost',sans-serif;font-weight:700;font-size:17px;color:var(--ink900)}
.mdl-d{font-size:12.5px;color:var(--ink500);line-height:1.55;margin-top:5px}
.mdl-err{font-size:12.5px;color:#c0392b;font-weight:600;margin-top:8px;min-height:17px}
.tst{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;
  background:var(--ink900);color:#fff;font-size:13px;font-weight:500;
  padding:11px 20px;border-radius:999px;box-shadow:0 8px 26px rgba(20,22,28,.28);
  transition:opacity .3s,transform .3s;max-width:90vw;text-align:center}
.tst.ko{background:#c0392b}
.tst.out{opacity:0;transform:translateX(-50%) translateY(8px)}
.eq-c2{font-size:11.5px;color:var(--bleu);margin-top:3px;line-height:1.4}
.eq-c2 strong{font-weight:700}
.eq-c2 em{font-style:normal;color:var(--ink300)}

/* Réglages : ce qui ne sert pas au devis ouvert reste là, en retrait. */
.rg-row.rg-off{opacity:.42}
.rg-row.rg-off:hover,.rg-row.rg-off:focus-within{opacity:1}
.rg-grid.rg-large{grid-template-columns:1fr}
.rg-fc{display:flex;align-items:center;gap:8px;flex:none;margin-right:4px}
.rg-fcv{font-size:11.5px;color:var(--ink500);font-variant-numeric:tabular-nums}
.rg-fcv.est{color:var(--ink300);font-style:italic}
.rg-rat{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;color:var(--bleu);
  background:var(--cream100);padding:2px 8px;border-radius:999px;min-width:40px;text-align:center}

/* Fiches enregistrées */
.fch{display:grid;gap:6px}
.fch-r{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;
  background:var(--cream50);border:1px solid var(--cream200)}
.fch-n{flex:1;font-size:13.5px;font-weight:600;color:var(--ink900)}
.fch-d{font-size:11.5px;color:var(--ink500);flex:none}
.fch-a{display:flex;gap:6px;flex:none}
.note.ko{background:#fdf1ef;border-color:#e8b4aa;color:#8c2f1d}
.note.ko strong{color:#8c2f1d}

/* Dépôt du MASTER */
.mst{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;
  border:2px dashed var(--cream300);background:var(--cream50);cursor:pointer;
  transition:border-color .15s,background .15s}
.mst:hover,.mst.on{border-color:var(--bleu3);background:var(--cream100)}
.mst-i{font-size:26px;flex:none}
.mst-t{font-size:13.5px;color:var(--ink900);line-height:1.5}
.mst-t em{font-style:normal;font-size:11.5px;color:var(--ink500)}
.mst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:4px 20px;margin-top:10px}
.mst-r{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 8px;
  border-radius:9px}
.mst-r:hover{background:var(--cream50)}
.mst-r>span:first-child{flex:1;color:var(--ink900)}
.mst-a{color:var(--ink300);text-decoration:line-through;font-variant-numeric:tabular-nums}
.mst-fl{color:var(--ink300)}
.mst-n{font-weight:700;color:var(--ink900);font-variant-numeric:tabular-nums}
.mst-e{width:52px;text-align:right;font-size:11.5px;font-weight:600;color:var(--ink300)}
.mst-e.up{color:#1e8449}.mst-e.dn{color:#c0392b}

/* ── Références relevées dans les anciennes privatisations ───────────
   Le bouton qui déplie, et les pièces qu'il révèle. Elles sont marquées
   d'un liseré : d'un coup d'œil on sait ce qui vient de la carte et ce
   qui vient d'une soirée passée — leur coût matière est une estimation,
   pas un chiffre validé par la cuisine. */
.chip.plier{background:transparent;border-style:dashed;border-color:var(--bleu);
  color:var(--bleu);font-weight:600;cursor:pointer}
.chip.plier:hover{background:var(--cream200)}
.chip.vu:not(.on){border-left:3px solid var(--cream300)}
.chip.vu.on{border-left:3px solid rgba(255,255,255,.55)}

/* ══ FICHE DE FONCTION ═══════════════════════════════════════════════
   Une page A4, celle qu'on scotche au passe. Elle reprend la trame de la
   feuille papier — identité, déroulé, allergènes — mais sans les traits
   noirs de tableur : la hiérarchie se fait par la taille et la couleur,
   pas par des bordures partout. Objectif : se lire debout, en coup d'œil,
   à un mètre de distance. Aucun prix n'apparaît dessus, c'est voulu. */
.ff{background:#fff;border:1px solid var(--cream200);border-radius:18px;
  padding:26px 30px;max-width:840px;margin:0 auto}
.ff-top{display:flex;align-items:center;gap:18px;padding-bottom:12px;
  border-bottom:3px solid var(--bleu)}
.ff-ti{flex:1;font-family:'Jost',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:3px;text-transform:uppercase;color:var(--bleu)}
.ff-dt{font-family:'Jost',sans-serif;font-weight:700;font-size:19px;color:var(--ink900);
  text-align:right}

/* Identité : des cases, pas un tableau. Le libellé minuscule au-dessus,
   la valeur en gras dessous — on lit les valeurs, pas les étiquettes. */
.ff-id{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;
  background:var(--cream200);border:1px solid var(--cream200);border-radius:12px;
  overflow:hidden}
.ff-idc{background:#fff;padding:9px 12px;min-width:0}
.ff-idc span{display:block;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink500);font-weight:600}
.ff-idc b{display:block;font-size:13.5px;font-weight:600;color:var(--ink900);
  line-height:1.35;margin-top:2px;overflow-wrap:anywhere}

/* Déroulé. La colonne de gauche est l'ancre visuelle : on cherche
   « Desserts » du regard, pas la deuxième ligne du tableau. */
.ff-t{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.ff-t thead th{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink500);font-weight:600;text-align:left;
  padding:0 10px 6px;border-bottom:1.5px solid var(--cream300)}
.ff-t tbody th{width:108px;text-align:left;vertical-align:top;padding:10px;
  font-family:'Jost',sans-serif;font-weight:600;font-size:13px;color:var(--bleu);
  border-bottom:1px solid var(--cream100)}
.ff-t tbody td{vertical-align:top;padding:10px;border-bottom:1px solid var(--cream100);
  line-height:1.55}
.ff-t .ff-c{color:var(--ink900)}
.ff-t tr.ff-fort th{color:var(--orange2)}
.ff-t tr.ff-fort .ff-c{background:var(--cream50)}
.ff-t th.ff-x,.ff-t td.ff-x{width:78px}
.ff-x[contenteditable]{border-radius:8px;outline:none;min-height:20px;color:var(--ink700)}
.ff-x[contenteditable]:hover{background:var(--cream50)}
.ff-x[contenteditable]:focus{background:var(--bleu1);box-shadow:0 0 0 2px var(--bleu3)}
.ff-x[contenteditable]:empty::before{content:attr(data-ph);color:var(--ink100);font-size:11.5px}
.ff-vide{color:var(--ink300);font-style:italic;font-size:12px}

/* Allergènes : le seul bloc qui peut envoyer quelqu'un à l'hôpital.
   Il a donc le droit d'être le plus visible de la page. */
.ff-al{display:flex;gap:14px;margin-top:16px;padding:11px 14px;border-radius:14px;
  background:#fdf1ef;border:1.5px solid #e8b4aa}
.ff-al>span{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:#8c2f1d;font-weight:700;width:96px;flex:none;padding-top:2px}
.ff-al>div{font-size:13px;line-height:1.55;color:#8c2f1d;font-weight:500}

.ff-bl{display:flex;gap:14px;margin-top:9px;padding:9px 14px;border-radius:12px;
  background:var(--cream50);border:1px solid var(--cream200)}
.ff-bl>span{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink500);font-weight:600;width:96px;flex:none;padding-top:2px}
.ff-bl>div{font-size:12.5px;line-height:1.55;color:var(--ink900)}

.ff-pied{display:flex;justify-content:space-between;gap:14px;margin-top:16px;padding-top:9px;
  border-top:1px solid var(--cream200);font-size:11px;color:var(--ink500)}

@media print{
  /* Tout doit tenir sur une page : on resserre, on retire les fonds et
     on empêche une ligne du déroulé de se couper en deux. */
  body.pr-fonction{font-size:10.5px}
  .ff{border:none;border-radius:0;padding:0;max-width:none}
  .ff-t{font-size:11px}
  .ff-t tbody th,.ff-t tbody td{padding:7px 8px}
  .ff-idc{padding:7px 10px}
  .ff-idc b{font-size:12px}
  .ff-t tr,.ff-al,.ff-bl{page-break-inside:avoid}
  .ff-x[contenteditable]:empty::before{content:''}
  .ff-x[contenteditable]{background:none!important;box-shadow:none!important;
    border-bottom:1px dotted var(--ink300)}
}
@media(max-width:700px){ .ff-id{grid-template-columns:repeat(2,1fr)} }

/* ── Choix de la portée d'un prix ────────────────────────────────────
   Deux gros boutons plutôt que deux pastilles : c'est LE choix qui
   décide si on fait un geste à un client ou si on change la carte du
   restaurant. Il mérite de la place. */
.rg-cible{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:14px}
.rg-cb{text-align:left;background:#fff;border:1px solid var(--cream300);border-radius:16px;
  padding:12px 15px;cursor:pointer;font-family:inherit;transition:.12s}
.rg-cb:hover{border-color:var(--bleu3);background:var(--cream50)}
.rg-cb b{display:block;font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--ink900)}
.rg-cb span{display:block;font-size:11.5px;line-height:1.45;color:var(--ink500);margin-top:3px}
.rg-cb.on{background:var(--bleu1);border-color:var(--bleu);box-shadow:inset 0 0 0 1px var(--bleu)}
.rg-cb.on b{color:var(--bleu)}
@media(max-width:640px){.rg-cible{grid-template-columns:1fr}}

/* Un liseré par portée : bleu, ce devis ; orange, la grille de maison. */
.rg-row.rg-fiche{box-shadow:inset 3px 0 0 var(--bleu)}
.rg-row.rg-grille{box-shadow:inset 3px 0 0 var(--orange)}

/* ── Un prix qu'on retouche sur place ────────────────────────────────
   Souligné en pointillés : la convention « ce texte se modifie ». Assez
   discret pour ne pas parasiter la lecture d'un devis, assez visible
   pour qu'on le trouve quand un client négocie au téléphone. */
.px-ed{cursor:pointer;border-bottom:1px dashed var(--ink300);padding-bottom:1px}
.px-ed:hover{color:var(--bleu);border-bottom-color:var(--bleu3)}
.optrow.on .px-ed:hover{color:var(--bleu6)}
.px-in{width:74px !important;padding:3px 8px !important;font-size:12.5px !important;
  border-radius:8px !important;text-align:right;font-weight:600}

/* ── Commandes à passer ──────────────────────────────────────────────
   Le seul bloc de la fiche où l'on écrit vraiment. Il se distingue des
   rubriques en lecture : fond blanc, cadre net, et un curseur de texte.
   La proposition calculée n'est qu'un point de départ — on commande
   rarement le compte exact. */
.ff-cmd{margin-top:16px;border:1.5px solid var(--cream300);border-radius:14px;
  background:#fff;overflow:hidden}
.ff-cmd-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 14px;background:var(--cream50);border-bottom:1px solid var(--cream200)}
.ff-cmd-h>span{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink900);font-weight:700}
.ff-cmd-h>em{flex:1;font-style:normal;font-size:11px;color:var(--ink500);line-height:1.4}
.ff-regen{flex:none;border:1px solid var(--cream300);background:#fff;color:var(--bleu);
  font-family:'Jost',sans-serif;font-weight:600;font-size:11px;padding:4px 11px;
  border-radius:999px;cursor:pointer}
.ff-regen:hover{background:var(--bleu1);border-color:var(--bleu3)}
.ff-cmd-t{padding:11px 14px;font-size:13px;line-height:1.75;color:var(--ink900);
  outline:none;min-height:56px;white-space:pre-wrap}
.ff-cmd-t:focus{background:var(--bleu1)}
.ff-cmd-t:empty::before{content:attr(data-vide);color:var(--ink300);font-style:italic}

@media print{
  .ff-cmd{page-break-inside:avoid;border-color:var(--ink300)}
  .ff-cmd-h{background:none}
  .ff-regen{display:none!important}
  .ff-cmd-h>em{display:none}
  .ff-cmd-t{background:none!important;font-size:11px;line-height:1.6}
}

/* ── Tenir sur une page, même chargé ─────────────────────────────────
   Avec le bloc des commandes en plus, une soirée bien remplie débordait
   sur une deuxième feuille dont il ne restait que quatre lignes. Les
   consignes passent donc sur deux colonnes à l'impression, et les listes
   longues aussi : la page respire autant, elle est juste mieux remplie. */
@media print{
  .ff-notes{column-count:2;column-gap:12px}
  .ff-notes .ff-bl{break-inside:avoid;margin-top:0;margin-bottom:7px;padding:6px 11px}
  .ff-notes .ff-bl>span{width:76px;font-size:8px}
  .ff-notes .ff-bl>div{font-size:10.5px;line-height:1.45}
  .ff-cmd-t{column-count:2;column-gap:14px}
  /* Une consigne en toutes lettres ne se coupe pas en deux colonnes :
     la fin de phrase partait en haut à droite, avant son début. */
  .ff-cmd-t.ff-cmd-mot{column-count:1}
  .ff-cmd-t>br{break-inside:avoid}
  .ff-al{padding:8px 12px;margin-top:11px}
  .ff-bl{padding:7px 12px}
  .ff-pied{margin-top:10px;padding-top:6px;font-size:9.5px}
}

/* ── « Plus d'options » : discret, pas un bouton de plus ─────────────
   « + 20 déjà servies » se lisait comme une étiquette de statut. En gris
   italique, sans bordure pleine, ça redevient ce que c'est : un lien qui
   déplie le reste de la liste. */
.chip.plier{background:transparent;border:none;color:var(--ink500);
  font-style:italic;font-weight:400;padding:6px 10px;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px}
.chip.plier:hover{background:transparent;color:var(--bleu)}

/* Un prix cliqué depuis la saisie mène au cadenas : la ligne visée
   clignote pour qu'on la retrouve au milieu de soixante champs. */
.rg-row.rg-vise{animation:rgVise 2.4s ease}
@keyframes rgVise{
  0%,100%{background:transparent}
  8%,55%{background:var(--bleu1);box-shadow:inset 3px 0 0 var(--bleu)}
}

/* La barre de fin de saisie : on l'a sous la main quand on a fini. */
.card.bas-enr{margin-top:14px;border-color:var(--bleu2);background:var(--cream50)}

/* ══ TTC, TOUJOURS ══════════════════════════════════════════════════
   Le module vend TTC. Un montant sans mention, c'est la discussion
   « et la TVA ? » au moment de signer. Deux marqueurs : le badge, posé
   une fois par écran à côté du titre, et la mention collée au chiffre. */
.ttc-badge{
  display:inline-block; vertical-align:middle;
  margin-left:8px; padding:2px 8px;
  border:1px solid var(--bleu, #1b3a6b); border-radius:999px;
  font-family:'Jost',system-ui,sans-serif; font-weight:600;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bleu, #1b3a6b); background:transparent;
  white-space:nowrap;
}
h2 .ttc-badge, h3 .ttc-badge{ font-size:9px; }
/* Sur le fond bleu du hero : mention en clair, pas de pastille bordée. */
.ttc-k{
  font-style:normal; font-weight:600;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  opacity:.75; margin-left:5px;
}
.hero .ttc-badge{ border-color:rgba(255,255,255,.55); color:#fff; }
@media print{
  .ttc-badge{ border-color:#555; color:#333; }
  .ttc-k{ opacity:1; color:#333; }
}

/* ══ PLAN D'IMPLANTATION ════════════════════════════════════════════
   Le même dessin sert à l'écran et au papier. Les pastilles sont
   dimensionnées pour le doigt sur iPad (cible de 38 px au viewBox,
   soit ~44 px réels sur la largeur habituelle) et restent lisibles
   une fois réduites à la moitié d'un A4. */
.impl-wrap{position:relative;background:var(--cream50);border:1px solid var(--cream200);
           border-radius:16px;padding:10px}
.impl-svg{width:100%;height:auto;display:block;touch-action:manipulation;user-select:none}
.impl-svg.impl-actif{cursor:crosshair}
.impl-zn rect{fill:#fff;stroke:var(--cream300);stroke-width:2}
.impl-zn.on rect{fill:var(--bleu1);stroke:var(--bleu);stroke-width:2.5}
.impl-zn.off rect{fill:var(--cream100);stroke:var(--cream200);opacity:.6}
.impl-zn .impl-deco{color:var(--ink500)}
.impl-zn.on .impl-deco{color:var(--bleu)}
.impl-zn.off .impl-deco{opacity:.35}
.impl-zt{font-family:'Jost',sans-serif;font-weight:600;font-size:12px;letter-spacing:1.2px;
         text-transform:uppercase;text-anchor:middle;fill:var(--ink700)}
.impl-zn.on .impl-zt{fill:var(--bleu)}
.impl-zn.off .impl-zt{fill:var(--ink500);opacity:.7}
.impl-zc{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1px;text-anchor:middle}

.impl-p{cursor:grab}
.impl-p .impl-ph{fill:#fff;opacity:0}            /* cible tactile élargie */
.impl-p .impl-pc{fill:#fff;stroke:var(--orange,#e8802b);stroke-width:2.5}
.impl-p .impl-pe{font-size:16px;text-anchor:middle;pointer-events:none}
.impl-p .impl-pb{fill:var(--orange,#e8802b);stroke:#fff;stroke-width:1.5}
.impl-p .impl-pn{font-family:'Jost',sans-serif;font-weight:700;font-size:9px;
                 text-anchor:middle;fill:#fff;pointer-events:none}
.impl-p.sel .impl-pc{fill:var(--bleu1);stroke:var(--bleu);stroke-width:3}
.impl-p.sel .impl-pb{fill:var(--bleu)}
.impl-p.sel .impl-ph{fill:var(--bleu);opacity:.16}
.impl-actif .impl-p:hover .impl-ph{fill:var(--bleu);opacity:.12}
.impl-p:focus{outline:none}
.impl-p:focus .impl-ph{fill:var(--bleu);opacity:.2}

/* Palette des postes à poser */
.impl-pal{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.impl-pal .chip{font-size:12px}
.impl-pal .chip.arme{background:var(--bleu);color:#fff;border-color:var(--bleu)}

/* Liste éditable sous le plan */
.impl-l{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.impl-r{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;
        background:#fff;border:1px solid var(--cream200);border-radius:12px;padding:10px 12px}
.impl-r.sel{border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu1)}
.impl-num{width:26px;height:26px;border-radius:50%;background:var(--orange,#e8802b);color:#fff;
          font-family:'Jost',sans-serif;font-weight:700;font-size:13px;
          display:flex;align-items:center;justify-content:center;margin-top:2px}
.impl-r.sel .impl-num{background:var(--bleu)}
.impl-r input,.impl-r textarea{width:100%;border:none;background:transparent;font:inherit;
                               padding:2px 0;resize:none}
.impl-r input{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:var(--ink900)}
.impl-r textarea{font-size:12.5px;line-height:1.5;color:var(--ink700);min-height:20px}
.impl-r input:focus,.impl-r textarea:focus{outline:none;background:var(--cream50);
                                           border-radius:6px;padding:2px 6px;margin:0 -6px}
.impl-r textarea::placeholder,.impl-r input::placeholder{color:var(--ink500);opacity:.55;font-weight:400}
.impl-x{border:none;background:transparent;color:var(--ink500);font-size:17px;line-height:1;
        cursor:pointer;padding:3px 5px;border-radius:7px}
.impl-x:hover{background:#fdecec;color:#b42318}
.impl-vide{text-align:center;color:var(--ink500);font-size:13px;padding:16px 10px;line-height:1.6}

/* Légende imprimée, sous le plan de la fiche de fonction */
.ff-plan{margin-top:12px;border:1px solid var(--cream300);border-radius:12px;padding:12px 14px;
         page-break-inside:avoid}
.ff-plan-h{font-family:'Jost',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:1.4px;
           text-transform:uppercase;color:var(--bleu);margin-bottom:8px}
.ff-plan-g{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.ff-lg{list-style:none;margin:0;padding:0;font-size:11.5px;line-height:1.45}
.ff-lg li{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:5px 0;
          border-bottom:1px solid var(--cream100);page-break-inside:avoid}
.ff-lg li:last-child{border-bottom:none}
.ff-lg .n{width:18px;height:18px;border-radius:50%;background:var(--orange,#e8802b);color:#fff;
          font-family:'Jost',sans-serif;font-weight:700;font-size:10.5px;
          display:flex;align-items:center;justify-content:center}
.ff-lg .nom{font-weight:600;color:var(--ink900)}
.ff-lg .txt{color:var(--ink700);white-space:pre-wrap}
@media (max-width:720px){ .ff-plan-g{grid-template-columns:1fr} }

/* ══ VERSION CONDENSÉE ══════════════════════════════════════════════
   Même écran, moins de mots. On masque ce qui explique, jamais ce qui
   saisit ou ce qui alerte : une alerte cachée est une alerte perdue,
   et quelqu'un qui connaît l'outil a encore plus besoin de voir qu'un
   CA de référence est périmé. */
body.condense .card > .sub,
body.condense .step-head .sub,
body.condense .opt .d,
body.condense .tiny.muted,
body.condense .rg-d,
body.condense .impl-vide,
body.condense .fdl + .tiny.muted{ display:none !important; }
/* Les notes gardent leur place : ce sont des avertissements, pas du
   commentaire. Idem pour les aides directement sous un champ actif. */
body.condense .note,
body.condense .note.ko,
body.condense .capbar .t{ display:block !important; }
body.condense .card{ padding-top:14px; padding-bottom:14px; }
body.condense .card h3{ margin-bottom:6px; }
.mode-bt{ font-size:12px; letter-spacing:.02em; }

/* ══ ÉTAPES DU DOSSIER ══════════════════════════════════════════════ */
.etapes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.etape{ display:inline-flex; align-items:center; gap:6px;
        border:1px solid var(--cream300); background:#fff; border-radius:999px;
        padding:6px 12px; font-family:'Jost',sans-serif; font-weight:600;
        font-size:12.5px; color:var(--ink700); cursor:pointer; white-space:nowrap }
.etape:hover{ border-color:var(--bleu); color:var(--bleu) }
.etape.on{ background:var(--bleu); border-color:var(--bleu); color:#fff }
.etape.passe{ background:var(--cream100); color:var(--ink500); border-color:var(--cream200) }
.etape.annul.on{ background:#b42318; border-color:#b42318 }
.etape .em{ font-size:13px; line-height:1 }
.etape-aide{ font-size:12px; color:var(--ink500); margin-top:7px; line-height:1.5 }
body.condense .etape-aide{ display:none }

/* Étiquette sous la pastille : le commentaire, lisible sur le plan sans
   descendre dans la légende. Le halo blanc (paint-order) la détache du
   mobilier dessiné en dessous — sans lui, « sortie 23h » posé sur une
   rangée de tables devient illisible. */
.impl-l1,.impl-l2{ text-anchor:middle; pointer-events:none;
  font-family:'Jost',system-ui,sans-serif;
  paint-order:stroke fill; stroke:#fff; stroke-width:3.5px; stroke-linejoin:round }
.impl-l1{ font-weight:700; font-size:11px; fill:var(--ink900,#1a1a1a) }
.impl-l2{ font-weight:500; font-size:10px; fill:var(--ink700,#4a4a4a) }
.impl-p.sel .impl-l1{ fill:var(--bleu) }
@media print{ .impl-l1,.impl-l2{ stroke-width:3px } }

/* ══ POURQUOI C'EST BLOQUÉ ══════════════════════════════════════════
   La raison s'écrit sur le bouton. Un `title` ne s'affiche qu'au survol
   d'une souris : sur l'iPad du bar, il n'existe pas. */
.opt.bloque{ opacity:1 }                       /* on garde le texte lisible */
.opt.bloque .t{ color:var(--ink500) }
.opt:disabled{ cursor:not-allowed }
.pourquoi{ color:#9c5410; font-weight:600; font-size:11.5px; line-height:1.45;
           display:inline-block }
.chip.bloque{ opacity:1; color:#9c5410; border-color:#f0d9bd; background:#fdf6ee;
              font-weight:500; white-space:normal; text-align:left; line-height:1.4 }
.chip.bloque:disabled{ cursor:not-allowed }
body.condense .pourquoi{ display:inline-block }   /* jamais masqué : c'est un blocage */
/* En version condensée la description d'un format disparaît — sauf quand
   elle porte la raison d'un blocage : masquer ça, c'est rendre le bouton
   muet exactement au moment où il refuse. */
body.condense .opt .d-pq{ display:block !important }

/* ── POURQUOI C'EST FERMÉ, SANS ALLONGER LE BOUTON ──────────────────────
   « Toute la terrasse — Terrasse fermée à cette date, hors saison » dans
   un libellé de bouton donne un bouton de dix centimètres qui casse la
   ligne. Le bouton garde son nom court ; la raison sort au survol
   (souris) et s'écrit sous la barre au clic (iPad, sans survol). */
.chip.bloque{ position:relative; cursor:help }
.chip.bloque .bulle{
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  width:max-content; max-width:260px; z-index:40;
  padding:8px 11px; border-radius:9px;
  background:#2b2b2b; color:#fff; border:0;
  font-size:11.5px; font-weight:500; line-height:1.45; letter-spacing:0;
  text-align:left; white-space:normal;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transition:opacity .12s ease;
  pointer-events:none;
}
.chip.bloque .bulle::after{
  content:''; position:absolute; top:100%; left:50%; margin-left:-5px;
  border:5px solid transparent; border-top-color:#2b2b2b;
}
.chip.bloque:hover .bulle,
.chip.bloque:focus-visible .bulle{ opacity:1; visibility:visible }

.plan-dit{
  display:none; margin:8px 0 2px; padding:9px 12px;
  border:1px solid #f0d9bd; border-left:3px solid #e8802b; border-radius:8px;
  background:#fdf6ee; color:#9c5410;
  font-size:12.5px; font-weight:600; line-height:1.5;
}
.plan-dit.on{ display:block }
body.condense .plan-dit.on{ display:block !important }

/* Le prix passe devant le libellé : c'est le chiffre qu'on cherche quand
   on parcourt la ligne au téléphone, pas le nom du vin. */
.bouch-px{ font-family:'Jost',sans-serif; font-weight:700; font-size:15px;
           color:var(--bleu); margin-right:2px }
.bouch-t{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.bouch-t strong{ font-size:13.5px }

/* Le bouton qui emmène à l'étape manquante, dans le bandeau du total.
   « En attente » sans porte de sortie, c'est un cul-de-sac : on relit
   ses choix en cherchant l'erreur au lieu de finir la dernière étape. */
.hero-go{
  display:inline-block; margin-top:12px; cursor:pointer;
  background:#fff; color:var(--bleu); border:0; border-radius:9px;
  padding:9px 15px; font:inherit; font-size:14px; font-weight:700;
  letter-spacing:.01em;
}
.hero-go:hover{ background:#f1f5fb }

/* ── FORFAITS BOISSON ──────────────────────────────────────────────────
   Une ligne par forfait, avec ce qu'il contient écrit à côté du prix.
   Trois lignes qu'on lit d'un coup valent mieux qu'un menu déroulant. */
.opts.c1{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px }
.forf-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px;
  width:100%; text-align:left; cursor:pointer; font:inherit;
  background:var(--creme,#fdfbf7); border:1.5px solid var(--ligne,#e4d8c2);
  border-radius:12px; padding:14px 16px; transition:border-color .12s ease, background .12s ease;
}
.forf-row:hover{ border-color:var(--bleu,#0054a6) }
.forf-row.on{ border-color:var(--bleu,#0054a6); border-width:2px; background:#f3f7fc }
.forf-p{ font-size:21px; line-height:1 }
.forf-c{ display:block; min-width:0 }
.forf-t{ display:block; font-weight:700; font-size:15.5px; line-height:1.3 }
.forf-d{ display:block; font-size:12.5px; color:var(--ink500,#6b6257); line-height:1.4; margin-top:3px }
.forf-x{ font-weight:700; font-size:15px; color:var(--bleu,#0054a6); white-space:nowrap }
body.condense .forf-d{ display:none }

/* ── COMBIEN DE BOUTEILLES ? ───────────────────────────────────────────
   La question qu'on se pose devant le compteur du droit de bouchon.
   Deux boutons qui le remplissent, plutôt qu'un calcul mental. */
.bouch-reco{
  margin-top:11px; padding:12px 14px; border-radius:11px;
  background:#f3f7fc; border:1px solid #d5e3f3;
}
.br-t{ font-weight:700; font-size:13.5px; color:var(--bleu,#0054a6) }
.br-l{ font-size:12.5px; color:var(--ink500,#6b6257); margin-top:2px }
.br-b{ display:flex; gap:9px; flex-wrap:wrap; margin-top:10px }
.br-x{
  flex:1 1 150px; text-align:left; cursor:pointer; font:inherit;
  background:#fff; border:1.5px solid #c9ddf2; border-radius:9px; padding:9px 12px;
}
.br-x:hover{ border-color:var(--bleu,#0054a6) }
.br-x strong{ display:block; font-size:14.5px; color:var(--bleu,#0054a6) }
.br-x span{ display:block; font-size:11.5px; color:var(--ink500,#6b6257); margin-top:1px }

/* Une étape qu'on peut sauter le dit, sinon on la croit obligatoire et
   on compose toute sa carte avant d'oser regarder le prix. */
.step-opt{
  display:inline-block; margin-left:9px; vertical-align:middle;
  font-family:'Be Vietnam Pro',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.02em; color:var(--ink500);
  background:var(--cream50); border:1px solid var(--cream200);
  border-radius:999px; padding:2px 8px;
}
body.condense .step-opt{ display:none }

/* ══ PARCOURS EXPRESS ═══════════════════════════════════════════════════
   Six questions, un clic par réponse, le prix qui bouge à côté. Tout ce
   qui demande de réfléchir deux fois est passé au parcours détaillé. */
.xp-wrap{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-top:16px}
.xp-col{min-width:0;display:flex;flex-direction:column;gap:14px}

.xp{background:var(--cream0);border:1px solid var(--cream200);border-radius:18px;
  padding:18px 20px;animation:xpIn .22s ease both}
@keyframes xpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.xp-h{display:flex;align-items:baseline;gap:11px;margin-bottom:13px}
.xp-n{flex:none;width:23px;height:23px;line-height:23px;text-align:center;border-radius:50%;
  background:var(--bleu);color:#fff;font-family:'Jost',sans-serif;font-weight:700;font-size:12px}
.xp-t{font-family:'Jost',sans-serif;font-weight:700;font-size:18px;color:var(--ink900);line-height:1.25}
.xp-s{display:block;font-family:'Be Vietnam Pro',sans-serif;font-weight:400;
  font-size:12.5px;color:var(--ink500);margin-top:3px;line-height:1.45}

.xp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.xp-g.xp-mini{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
.xp-g.xp-mom{margin-top:10px}
.xp-x{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:#fff;border:1.5px solid var(--cream200);border-radius:14px;
  padding:14px 15px;cursor:pointer;font:inherit;text-align:left;
  transition:border-color .12s ease,background .12s ease,transform .12s ease}
.xp-x:hover{border-color:var(--bleu);transform:translateY(-1px)}
.xp-x.on{border-color:var(--bleu);border-width:2px;background:var(--bleu1);padding:13px 14px}
.xp-x.ko{opacity:.5;cursor:not-allowed;border-style:dashed}
.xp-x.ko:hover{border-color:var(--cream200);transform:none}
.xp-e{font-size:21px;line-height:1.1}
.xp-l{font-family:'Jost',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink900);line-height:1.25}
.xp-d{font-size:11.5px;color:var(--ink500);line-height:1.4}
.xp-p{font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;color:var(--bleu);margin-top:3px}
.xp-mini .xp-x{align-items:center;padding:12px 8px}
.xp-mini .xp-l{font-size:16px}

.xp-date input,.xp-libre input{width:100%;max-width:260px;font:inherit;font-size:15px;
  padding:11px 13px;border:1.5px solid var(--cream200);border-radius:12px;background:#fff}
.xp-date input:focus,.xp-libre input:focus{outline:none;border-color:var(--bleu)}
.xp-libre{margin-top:10px}
.xp .note{margin-top:12px}

/* La colonne de droite : le chiffre, et rien qui en détourne. */
.xp-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:11px}
.xp-prix{background:var(--bleu);color:#fff;border-radius:18px;padding:20px}
.xp-prix .k{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;opacity:.85;font-weight:600}
.xp-prix .v{font-family:'Jost',sans-serif;font-weight:700;font-size:34px;line-height:1.05;margin-top:7px}
.xp-prix .v span{font-size:20px;opacity:.75}
.xp-prix .v.attente{font-size:22px;opacity:.8}
.xp-prix .ref{font-size:12px;opacity:.9;margin-top:9px;line-height:1.55}
.xp-go{width:100%;margin-top:14px;background:#fff;color:var(--bleu);border:0;border-radius:12px;
  padding:13px;font:inherit;font-family:'Jost',sans-serif;font-weight:700;font-size:14px;cursor:pointer}
.xp-go:hover{background:#eef4fb}

.xp-det{width:100%;text-align:left;background:var(--cream0);border:1px solid var(--cream200);
  border-radius:14px;padding:13px 15px;cursor:pointer;font:inherit;
  font-family:'Jost',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink900)}
.xp-det:hover{border-color:var(--bleu)}
.xp-det span{display:block;font-family:'Be Vietnam Pro',sans-serif;font-weight:400;
  font-size:11.5px;color:var(--ink500);margin-top:3px;line-height:1.4}
.xp-tel{font-size:12px;color:var(--ink500);text-align:center;padding:2px 0}
.xp-tel strong{color:var(--bleu);font-family:'Jost',sans-serif;font-size:14px}

@media (max-width:900px){
  .xp-wrap{grid-template-columns:1fr}
  .xp-side{position:static;order:-1}
  .xp-prix{padding:16px}
  .xp-prix .v{font-size:28px}
}

/* Un brouillon restauré doit se présenter, pas s'imposer : sans ça on
   rouvre la page et on tombe sur sa saisie d'avant-hier sans comprendre. */
.xp-reprise{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:11px 15px;border-radius:12px;
  background:var(--bleu1);border:1px solid var(--bleu2);
  font-size:13px;color:var(--ink900)}
.xp-reprise button{margin-left:auto;background:#fff;color:var(--bleu);
  border:1.5px solid var(--bleu);border-radius:999px;padding:6px 14px;
  font:inherit;font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer}
.xp-reprise button:hover{background:var(--bleu);color:#fff}

/* Le volet « Détail » de chaque bloc express : fermé par défaut, il ne
   coûte qu'un lien ; ouvert, il donne ce qu'un pointilleux cherche. */
.xp-plus{margin-left:auto;flex:none;background:none;border:0;cursor:pointer;font:inherit;
  font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;color:var(--bleu);
  display:inline-flex;align-items:center;gap:5px;padding:4px 2px}
.xp-plus:hover{text-decoration:underline}
.xp-plus i{font-style:normal;font-size:9px;transition:transform .15s ease}
.xp-plus.on i{transform:rotate(180deg)}
.xp-dd{margin-top:14px;padding-top:14px;border-top:1px dashed var(--cream200)}
.xp-dd-t{font-family:'Jost',sans-serif;font-weight:700;font-size:13px;color:var(--ink900);
  margin-bottom:9px;letter-spacing:.01em}
.xp-dd .tiny{font-size:12.5px;line-height:1.55;color:var(--ink700)}
.xp-dd .xp-x{padding:11px 13px}
.xp-dd .xp-l{font-size:13.5px}
.xp-lien{background:none;border:0;padding:0;font:inherit;color:var(--bleu);
  font-weight:600;cursor:pointer;text-decoration:underline}

/* L'espace retenu, écrit comme un constat plutôt qu'un choix à faire. */
.xp-auto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bleu1);border:1.5px solid var(--bleu2);border-radius:14px;padding:14px 16px}
.xp-auto-l{flex:1;min-width:180px}
.xp-auto-l strong{display:block;font-family:'Jost',sans-serif;font-size:16px;color:var(--ink900)}
.xp-auto-l span{display:block;font-size:12px;color:var(--ink500);line-height:1.45;margin-top:3px}
.xp-auto-p{font-family:'Jost',sans-serif;font-weight:700;font-size:15px;color:var(--bleu);flex:none}

/* Au forfait, les lignes du détail disent « compris » au lieu d'un
   montant : un prix à la ligne invite à comparer et à réclamer. */
.inclus{font-family:'Jost',sans-serif;font-weight:600;font-size:12px;
  color:var(--bleu);background:var(--bleu1);border-radius:999px;padding:3px 10px}
.rc-t.rc-min{font-size:12.5px}

/* ══ CALENDRIER MAISON ═════════════════════════════════════════════════
   Celui du navigateur arrive avec ses angles droits et son bleu système.
   Celui-ci reprend les rayons, les crèmes et le bleu d'Annette, avec des
   cellules assez grandes pour un doigt sur iPad. */
.dp{background:#fff;border:1.5px solid var(--cream200);border-radius:18px;
  padding:14px 14px 16px;max-width:360px}
.dp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dp-m{font-family:'Jost',sans-serif;font-weight:700;font-size:16px;color:var(--ink900);
  text-transform:capitalize;letter-spacing:.01em}
.dp-n{width:34px;height:34px;flex:none;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--cream200);background:#fff;color:var(--bleu);
  font-size:17px;line-height:1;font-family:'Jost',sans-serif;
  transition:background .12s ease,border-color .12s ease}
.dp-n:hover:not(:disabled){background:var(--bleu1);border-color:var(--bleu)}
.dp-n:disabled{opacity:.3;cursor:not-allowed}
.dp-s{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.dp-s span{text-align:center;font-family:'Jost',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.06em;color:var(--ink300);text-transform:uppercase}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dp-v{display:block;height:40px}
.dp-j{height:40px;border:0;border-radius:12px;background:none;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:500;font-size:15px;color:var(--ink900);
  transition:background .1s ease,color .1s ease}
.dp-j:hover:not(:disabled){background:var(--cream50)}
.dp-j.off{color:var(--ink300);cursor:not-allowed}
.dp-j.off:hover{background:none}
.dp-j.auj{box-shadow:inset 0 0 0 1.5px var(--cream300)}
.dp-j.on{background:var(--bleu);color:#fff;font-weight:700;box-shadow:none}
.dp-j.on:hover{background:var(--bleu)}

/* Une fois la date prise, la question est répondue : elle se replie. */
.dp-pris{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bleu1);border:1.5px solid var(--bleu2);border-radius:14px;
  padding:13px 16px}
.dp-pris-d{font-family:'Jost',sans-serif;font-weight:700;font-size:16px;
  color:var(--ink900);text-transform:capitalize}
.dp-chg{margin-left:auto;background:#fff;color:var(--bleu);border:1.5px solid var(--bleu);
  border-radius:999px;padding:6px 15px;cursor:pointer;font:inherit;
  font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px}
.dp-chg:hover{background:var(--bleu);color:#fff}

/* La porte vers le parcours détaillé, dans le volet de l'étape même :
   on y va pour CE réglage, pas pour tout recommencer ailleurs. */
.xp-vers{display:block;width:100%;text-align:left;margin-top:13px;cursor:pointer;font:inherit;
  background:var(--bleu1);border:1.5px solid var(--bleu2);border-radius:12px;padding:11px 14px;
  font-family:'Jost',sans-serif;font-weight:700;font-size:13.5px;color:var(--bleu);
  transition:border-color .12s ease,background .12s ease}
.xp-vers:hover{border-color:var(--bleu);background:#e7f0fa}
.xp-vers span{display:block;font-family:'Be Vietnam Pro',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink500);margin-top:3px}

/* Le réglage fin déplié dans le volet : il doit se lire comme une
   continuité du bloc, pas comme un autre écran incrusté. */
.xp-vers.on{background:#e7f0fa;border-color:var(--bleu)}
.xp-inline{margin-top:12px;padding:14px;background:#fff;
  border:1.5px solid var(--cream200);border-radius:14px}
.xp-inline .step-body{padding:0}
.xp-inline > .lbl:first-child{margin-top:0}
.xp-inline .plan-wrap{grid-template-columns:1fr}
.xp-inline .capbar{margin-top:12px}

/* Les intitulés de section (ENTRÉES, PLATS, DESSERTS) arrivaient collés
   à la dernière pastille du groupe précédent : on ne voyait plus où
   finissait une catégorie et où commençait la suivante. Un titre a
   besoin d'air au-dessus, pas en dessous — c'est ce qui le rattache à
   ce qui le suit. */
.lbl + .chips{ margin-top:9px }
.chips + .lbl,
.grps + .lbl,
.opts + .lbl,
.duo + .lbl,
.capbar + .lbl,
.optlist + .lbl,
.plan-wrap + .lbl{ margin-top:22px; padding-top:16px; border-top:1px solid var(--cream200) }
.xp-inline .chips + .lbl,
.xp-inline .opts + .lbl,
.xp-inline .grps + .lbl{ margin-top:20px; padding-top:14px }

/* Le contenu d'un forfait boisson, famille par famille : ce que le
   client veut savoir quand il clique, et que la description en une
   phrase ne disait pas. */
.bq{padding:10px 0;border-bottom:1px dashed var(--cream200)}
.bq:last-of-type{border-bottom:0}
.bq-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bq-h strong{font-family:'Jost',sans-serif;font-size:14px;color:var(--ink900)}
.bq-h span{font-size:12px;color:var(--bleu);font-weight:600}
.bq-i{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.bq-i span{font-size:11.5px;color:var(--ink500);background:var(--cream50);
  border:1px solid var(--cream200);border-radius:999px;padding:3px 10px}

/* Le bloc qui ferme le parcours express : même carte que les autres,
   mais le numéro devient une coche — il n'y a plus de question. */
.xp-fin .xp-n{background:var(--vert,#1f8a4c)}
.xp-fin .final{margin-top:0}
.xp-fin .card{border:0;padding:0;background:none}
.xp-fin .card + .card{margin-top:18px;padding-top:18px;border-top:1px solid var(--cream200)}

.tabs{display:flex;gap:8px}
.blk{margin-bottom:14px}
.blk > .lbl{display:block;margin:0 0 9px}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mini .opt{padding:10px 12px}
.mini .opt .t{font-size:13px}
.mini .opt .d{font-size:11px}
.fiche{background:#fff;border:1px solid var(--cream200);border-radius:18px;padding:26px 30px;
       max-width:820px;margin:0 auto}
.fiche h2{font-family:'Jost',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;
          text-transform:uppercase;color:var(--bleu);border-bottom:2px solid var(--cream200);
          padding-bottom:6px;margin:26px 0 12px}
.fiche h2:first-of-type{margin-top:18px}
.fiche .fh{display:flex;align-items:flex-start;gap:18px;border-bottom:2px solid var(--bleu);
           padding-bottom:14px}
.fiche .fh .spacer{flex:1}
.fdl{display:grid;grid-template-columns:150px 1fr;gap:3px 14px;font-size:13px}
.fdl dt{font-family:'Jost',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:1px;
        text-transform:uppercase;color:var(--ink500);padding-top:3px}
.fdl dd{padding-bottom:5px;border-bottom:1px solid var(--cream100)}
.cons{list-style:none;font-size:12.5px;line-height:1.6}
.cons li{padding:7px 0 7px 0;border-bottom:1px solid var(--cream100);display:flex;gap:10px}
.cons li .tag{font-family:'Jost',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:1px;
              padding:2px 8px;border-radius:999px;height:fit-content;flex:none;margin-top:1px}
.tag.CUISINE{background:#fcebd9;color:#9c5410}
.tag.SALLE{background:var(--bleu1);color:var(--bleu)}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px;font-size:12px;color:var(--ink500)}
.sign div{border-top:1px solid var(--cream300);padding-top:6px;min-height:62px}
.notebox{white-space:pre-wrap;font-size:13px;line-height:1.65;background:var(--cream50);
         border:1px solid var(--cream200);border-radius:12px;padding:11px 14px}
.pane{display:none}.pane.on{display:block}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:11.5px}
  .noprint,header.top,#warn{display:none!important}
  .wrap{padding:0;max-width:none}
  .pane{display:none!important}
  .pane#pane-fiche{display:block!important}
  /* Depuis l'onglet « fiche de fonction », c'est elle qu'on imprime —
     et elle seule, sur une page. */
  body.pr-fonction .pane#pane-fiche{display:none!important}
  body.pr-fonction .pane#pane-fonction{display:block!important}
  .fiche{border:none;border-radius:0;padding:0;max-width:none;box-shadow:none}
  .fiche h2{page-break-after:avoid;margin:16px 0 8px}
  .cons li,.fdl{page-break-inside:avoid}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
  .pgbreak{page-break-before:always}
  /* Page 2 : le plan EST la page. À côté d'une légende, il tombait à un
     tiers de feuille — un schéma de salle qu'on doit approcher de l'œil
     ne se scotche pas au passe. Plan sur toute la largeur, légende
     dessous sur deux colonnes. */
  /* Le plan est maintenant DANS la fiche : il partage la page avec le
     reste, donc il prend la largeur mais pas toute la hauteur. Le saut
     de page tombe avant lui plutôt qu'au milieu du dessin. */
  .ff-plan{break-inside:avoid; page-break-inside:avoid; margin-top:10px}
  .ff-plan-g{display:grid; grid-template-columns:1.5fr 1fr; gap:8mm; align-items:start}
  .ff-plan .ff-lg{font-size:10.5px}
  .ff-plan .ff-lg li{break-inside:avoid}
  .impl-svg{max-height:110mm}
}

/* ══ PLAN DE SALLE — tient dans l'écran, palette toujours sous la main ══
   11/11/2026. Le plan fait 560×400 (ratio 1,4) : on le borne par la
   HAUTEUR disponible, pas par la largeur. Sinon, sur un portable, il
   dépasse l'écran et la palette de postes part hors champ — on ne voit
   plus ce qu'on est en train de poser. */
.impl-wrap{ max-width:min(100%, calc(48vh * 1.4)); margin-left:auto; margin-right:auto }
.plan-seul .plan svg{ max-width:min(860px, calc(48vh * 1.4)) }
.wrap-large .plan-seul .plan svg{ max-width:min(1040px, calc(48vh * 1.4)) }

/* La palette colle en haut pendant qu'on vise le plan. */
.impl-pal{ position:sticky; top:0; z-index:5; background:#fff;
  padding:10px 0 8px; margin-bottom:8px; border-bottom:1px solid var(--cream200) }

@media print{
  .impl-wrap{ max-width:none }
  .plan-seul .plan svg,.wrap-large .plan-seul .plan svg{ max-width:none }
  .impl-pal{ position:static }
}