/* Simulateur de facturation : style de l'écran (design de la maquette validée).
 * Couleurs, police et marque viennent du thème (themes/<nom>/theme.css), chargé avant ce fichier. */

:root {
  --r: 18px;
  --courbe: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--police);
  background: var(--fond); color: var(--encre); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--primaire); outline-offset: 2px; border-radius: 10px; }
.noscript { max-width: 600px; margin: 40px auto; padding: 0 16px; color: var(--gris); }

/* ---------- en-tête ---------- */
.entete { display: flex; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 20px 28px 8px; }
.entete .logo { height: 46px; width: auto; display: block; }
.marque { display: flex; align-items: center; min-height: 46px; }
.entete .sep { width: 1px; height: 26px; background: var(--trait); }
.entete .t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- mise en page ---------- */
main {
  max-width: 1440px; margin: 0 auto; padding: 16px 28px 80px;
  display: grid; gap: 28px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 316px 364px;
  grid-template-areas: "gauche regles droite";
}
main.sans-regles { grid-template-columns: minmax(0, 1fr) 392px; grid-template-areas: "gauche droite"; max-width: 1256px; gap: 36px; }
.gauche { grid-area: gauche; min-width: 0; }
.regles { grid-area: regles; }
.droite { grid-area: droite; position: sticky; top: 20px; display: grid; gap: 16px; }

@media (min-width: 900px) and (max-width: 1179.98px) {
  main, main.sans-regles {
    grid-template-columns: minmax(0, 1fr) 360px; gap: 24px 28px;
    grid-template-areas: "gauche regles" "gauche droite";
    grid-template-rows: auto 1fr;
  }
  main.sans-regles { grid-template-areas: "gauche droite" "gauche droite"; }
  .droite { position: static; }
  .regles { position: static !important; max-height: none !important; }
}

/* ---------- recherche ---------- */
.cmdwrap { position: relative; z-index: 6; }
.cmd {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--trait);
  border-radius: var(--r); padding: 0 18px; height: 62px; box-shadow: var(--ombre);
  transition: border-color .15s, box-shadow .15s;
}
.cmd:focus-within { border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-halo), var(--ombre); }
.cmd svg { flex: none; color: var(--gris-clair); }
.cmd input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 19px; background: transparent; color: var(--encre); }
.cmd input::placeholder { color: var(--gris-clair); }
.cmd input:focus-visible { outline: none; }
.cmd kbd { font: inherit; font-size: 12px; color: var(--gris-clair); border: 1px solid var(--trait); border-radius: 6px; padding: 1px 7px; }
.sug {
  position: absolute; left: 0; right: 0; top: 70px; background: var(--surface); border-radius: var(--r);
  box-shadow: 0 2px 4px rgba(20,33,30,.06), 0 24px 48px -12px rgba(20,33,30,.28);
  border: 1px solid var(--trait); padding: 6px; max-height: 470px; overflow: auto;
}
.sg { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; }
.sg.on { background: var(--selection); }
.sg > span:first-child { min-width: 0; }
.sg .nm { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.sg .gp { font-size: 13px; color: var(--gris); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg .im { margin-left: auto; text-align: right; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sg .im small { display: block; font-weight: 400; font-size: 12px; color: var(--gris); }
.sg .im.ok { color: var(--ok); } .sg .im.pay { color: var(--charge); } .sg .im.in, .sg .im.nt { color: var(--gris-clair); }
.sg .im.nt { font-weight: 500; }
.sg .im.attend { min-width: 1px; }
.sug .vide { padding: 14px 12px; color: var(--gris); font-size: 15px; }

/* ---------- raccourcis ---------- */
.racc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.racc button {
  font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--trait); color: var(--encre); transition: background .15s, border-color .15s, color .15s;
}
.racc button:hover { border-color: var(--primaire); }
.racc button[aria-pressed="true"] { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }

h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
  display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px;
}
h2 b { color: var(--encre); font-weight: 600; letter-spacing: 0; }
h2 button { margin-left: auto; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--gris); font-weight: 500; padding: 2px 4px; }
h2 button:hover { color: var(--charge); }

/* ---------- prescription : pastilles ---------- */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500;
  padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid var(--ok-trait);
  background: var(--ok-pale); color: var(--ok-fonce); max-width: 100%;
  transition: box-shadow .18s, background .25s, border-color .25s, color .25s;
}
.puce .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce .amt { font-weight: 600; white-space: nowrap; }
.puce .x {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; line-height: 1; color: inherit; opacity: .55; transition: opacity .15s, background .15s;
}
.puce .x:hover, .puce .x:focus-visible { opacity: 1; background: rgba(20,33,30,.07); }
.puce.pay { background: var(--charge-pale); border-color: var(--charge-trait); color: var(--charge-fonce); }
.puce.gris, .puce.attend { background: var(--surface); border-color: var(--trait); color: var(--gris); }
.puce.survol { box-shadow: 0 0 0 3px var(--ok-halo); }
.puce.pay.survol { box-shadow: 0 0 0 3px var(--charge-halo); }
.puce.gris.survol { box-shadow: 0 0 0 3px rgba(20,33,30,.12); }
.neuf { animation: entre .28s var(--courbe); }
@keyframes entre { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- analyses courantes ---------- */
.pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 24px; }
.pal h3 { font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 8px; }
.pal .g { display: flex; flex-wrap: wrap; gap: 6px; }
.tu { font-size: 14px; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--trait); transition: all .15s; }
.tu:hover { border-color: var(--primaire); }
.tu[aria-pressed="true"] { background: var(--ok-pale); border-color: var(--ok); color: var(--ok-fonce); font-weight: 600; }
.tu[aria-pressed="true"].pay { background: var(--charge-pale); border-color: var(--charge); color: var(--charge-fonce); }
.tu[aria-pressed="true"].gris { background: var(--surface); border-color: var(--trait-fort); color: var(--gris); }

/* ---------- colonne des règles ---------- */
.regles {
  position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 22px; box-shadow: var(--ombre); padding: 6px 6px 8px;
}
.regles .rg-h { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding: 12px 12px 6px; }
.regles .rg-tel { display: none; }
.rg { padding: 10px 12px 11px; border-radius: 14px; transition: background .18s; position: relative; }
.rg + .rg::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; border-top: 1px solid var(--trait); }
.rg.survol, .rg.survol + .rg::before { border-color: transparent; }
.rg.survol { background: var(--ok-pale); }
.rg.pay.survol { background: var(--charge-pale); }
.rg-t { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.rg-t .nm { min-width: 0; }
.rg-t .amt { margin-left: auto; font-weight: 600; white-space: nowrap; color: var(--charge); font-size: 14px; }
.rg-t .amt.ok { color: var(--ok); font-weight: 500; font-size: 13px; }
.rg-t .amt.gr { color: var(--gris-clair); font-weight: 500; font-size: 13px; }
.rg-r { font-size: 13.5px; color: var(--charge-fonce); margin-top: 2px; }
.rg-c { display: grid; gap: 5px; margin-top: 7px; }

.ck {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; font-size: 14px; line-height: 1.3;
  padding: 7px 10px 7px 8px; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--surface);
  transition: background .18s, border-color .18s, color .18s;
}
.ck:hover { border-color: var(--trait-fort); }
.ck i {
  flex: none; width: 18px; height: 18px; margin-top: 0; border-radius: 5px; border: 1.5px solid var(--trait-fort);
  display: grid; place-items: center; transition: all .18s; font-style: normal;
}
.ck.rad i { border-radius: 50%; }
.ck i::after {
  content: ""; width: 8px; height: 4.5px; border-left: 2px solid var(--sur-primaire); border-bottom: 2px solid var(--sur-primaire);
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.ck.rad i::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--sur-primaire); transform: none; }
.ck[aria-pressed="true"], .ck[aria-checked="true"] { border-color: var(--primaire); background: var(--primaire-pale); color: var(--primaire-fonce); }
.ck[aria-pressed="true"] i, .ck[aria-checked="true"] i { background: var(--primaire); border-color: var(--primaire); }
.ck[aria-pressed="true"] i::after, .ck[aria-checked="true"] i::after { opacity: 1; }
.ck .lb { min-width: 0; }
.ck em { font-style: normal; font-size: 13px; font-weight: 600; margin-left: auto; padding-left: 6px; white-space: nowrap; }
.ck em.moins { color: var(--ok); } .ck em.plus { color: var(--charge); }
.ck.sw { align-items: center; }
.ck.sw i { width: 30px; height: 18px; border-radius: 999px; background: var(--interrupteur); border: 0; position: relative; display: block; }
.ck.sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--surface); transform: none; opacity: 1; transition: left .18s; }
.ck.sw[aria-pressed="true"] i::after { left: 14px; }

.cpt { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 4px 4px 10px; border-radius: 10px; border: 1.5px solid var(--trait); }
.cpt.on { border-color: var(--compteur); background: var(--compteur-pale); color: var(--compteur-encre); }
.cpt .lb { min-width: 0; }
.cpt .pas { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.cpt .pas button {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; line-height: 1;
  color: var(--encre); background: var(--fond);
}
.cpt .pas button:hover:not(:disabled) { background: var(--trait); }
.cpt .pas button:disabled { opacity: .35; }
.cpt .pas b { min-width: 20px; text-align: center; font-weight: 600; }
.cpt em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--charge); white-space: nowrap; margin-left: auto; }
.cpt em + .pas { margin-left: 4px; }

/* ---------- facture ---------- */
.fact { background: var(--surface); border-radius: 26px; box-shadow: var(--ombre); border: 1px solid var(--trait); overflow: hidden; }
.seg { display: flex; margin: 16px 16px 0; background: var(--fond); border-radius: 12px; padding: 3px; }
.seg button { flex: 1; font-size: 14px; font-weight: 500; padding: 7px 4px; border-radius: 9px; color: var(--gris); transition: all .18s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgba(20,33,30,.14); font-weight: 600; }
.pat { padding: 22px 24px 6px; }
.lab { font-size: 14px; font-weight: 500; color: var(--gris); }
.gros { font-size: 60px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin-top: 2px; }
.gros small { font-size: 30px; font-weight: 500; letter-spacing: -.02em; margin-left: 4px; color: var(--gris); }
.dec { margin-top: 12px; display: grid; gap: 6px; }
.dec div { display: flex; align-items: center; gap: 9px; font-size: 15px; transition: color .2s; }
.dec div b { margin-left: auto; font-weight: 600; }
.dec .zero { color: var(--gris-clair); } .dec .zero b { font-weight: 500; }
.pt { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pt.tm { background: var(--tm); } .pt.hr { background: var(--hr); } .pt.am { background: var(--am); }
.barre { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 18px 24px 0; background: var(--fond); gap: 2px; }
.barre span { height: 100%; transition: flex-grow .5s var(--courbe); min-width: 0; flex-basis: 0; }
.barre .am { background: var(--am); } .barre .tm { background: var(--tm); } .barre .hr { background: var(--hr); }
.ass { padding: 14px 24px 0; display: grid; gap: 6px; }
.ass div { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.ass div b { margin-left: auto; font-weight: 600; }
.ass .tot { color: var(--gris); padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--trait); }
.ass .sans-tarif { font-size: 13px; color: var(--gris-clair); }
.delta {
  margin: 16px 16px 0; background: var(--fond); border-radius: 14px; padding: 10px 14px; font-size: 14px;
  min-height: 58px; display: flex; flex-direction: column; justify-content: center;
}
.delta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delta .up { color: var(--charge); font-weight: 600; } .delta .dn { color: var(--ok); font-weight: 600; }
.delta.flash { animation: flash .7s ease-out; }
@keyframes flash { 0% { background: var(--flash); } 100% { background: var(--fond); } }
.detail { margin: 12px 16px 0; border-top: 1px solid var(--trait); padding: 0 8px; }
.detail summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--gris); padding: 12px 0; display: flex; align-items: center; border-radius: 8px; }
.detail summary::-webkit-details-marker { display: none; }
.detail summary::after {
  content: ""; margin-left: auto; margin-right: 4px; width: 7px; height: 7px; border-right: 1.5px solid var(--gris-clair);
  border-bottom: 1.5px solid var(--gris-clair); transform: rotate(45deg); transition: transform .2s;
}
.detail[open] summary::after { transform: rotate(-135deg); }
.det { display: grid; gap: 5px; padding: 0 0 12px; font-size: 14px; color: var(--gris); }
.det div { display: flex; gap: 6px; } .det b { margin-left: auto; color: var(--encre); font-weight: 500; white-space: nowrap; }
.pied { font-size: 12px; color: var(--gris-clair); padding: 10px 24px 16px; }
.poignee { display: none; }

/* ---------- graphique des marches ---------- */
.carte-marches { background: var(--surface); border-radius: 26px; box-shadow: var(--ombre); border: 1px solid var(--trait); padding: 18px 20px 14px; }
.m-t { display: flex; align-items: baseline; font-size: 14px; color: var(--gris); }
.m-t b { color: var(--encre); font-weight: 600; margin-right: 6px; } .m-t span { margin-left: auto; }
.esc { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.esc text { font-family: inherit; }
.g-grid { stroke: var(--graphe-grille); stroke-width: 1; }
.g-axl { font-size: 10px; fill: var(--gris-clair); text-anchor: end; }
.g-th { stroke: var(--graphe-seuil); stroke-width: 1; stroke-dasharray: 3 4; }
.g-thl { font-size: 10px; fill: var(--gris-clair); text-anchor: middle; }
.g-act { fill: var(--graphe-actif); transition: x .45s var(--courbe), width .45s var(--courbe); }
.g-af { fill: var(--graphe-forfait-aire); }
.g-al { fill: none; stroke: var(--graphe-forfait); stroke-width: 2.5; stroke-linejoin: round; }
.g-tf { fill: var(--graphe-part-aire); }
.g-tl { fill: none; stroke: var(--graphe-part); stroke-width: 2.5; stroke-linejoin: round; }
.g-pl, .g-pt {
  font-size: 10.5px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px;
  stroke-linejoin: round; opacity: .55; transition: opacity .3s, font-size .3s;
}
.g-pl { fill: var(--graphe-forfait); } .g-pt { fill: var(--graphe-part-texte); }
.g-pl.on, .g-pt.on { opacity: 1; font-size: 12.5px; }
.g-mk { transition: transform .45s var(--courbe); }
.g-mk line { stroke: var(--encre); stroke-width: 1.5; }
.g-mkb { fill: var(--encre); }
.g-mkt { fill: var(--sur-encre); font-size: 11px; font-weight: 600; text-anchor: middle; }
.g-d1, .g-d2 { transition: transform .45s var(--courbe), opacity .3s; stroke: var(--surface); stroke-width: 2.5; }
.g-d1 { fill: var(--graphe-forfait); } .g-d2 { fill: var(--graphe-part); }
.esc.vide .g-d1, .esc.vide .g-d2, .esc.vide .g-mk { opacity: 0; }
.m-leg { display: flex; gap: 16px; font-size: 12.5px; color: var(--gris); margin-top: 4px; }
.m-leg span { display: inline-flex; align-items: center; gap: 6px; }
.m-leg i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.m-leg .lf { background: var(--graphe-forfait); } .m-leg .lp { background: var(--graphe-part); }
.m-n { font-size: 13.5px; color: var(--gris); margin-top: 8px; }
.m-n:empty { display: none; }
.m-n b { color: var(--charge); font-weight: 600; }

/* ---------- bandeau « Annuler » ---------- */
.annuler {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 14px; background: var(--encre); color: var(--sur-encre);
  border-radius: 999px; padding: 9px 10px 9px 18px; font-size: 14.5px; box-shadow: 0 12px 32px -8px rgba(20,33,30,.4);
  animation: monte .25s var(--courbe); max-width: calc(100vw - 32px);
}
.annuler span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annuler button { font-weight: 600; color: var(--annuler-accent); padding: 4px 10px; border-radius: 999px; }
.annuler button:hover { background: rgba(255,255,255,.1); }
.annuler button:focus-visible { outline-color: var(--annuler-accent); }
@keyframes monte { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- calcul en attente, serveur injoignable ---------- */
.fact .num, .carte-marches .num { transition: opacity .2s; }
.fact.attente .num { opacity: .45; }
.hors-ligne {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 31;
  background: var(--surface); color: var(--encre); border: 1px solid var(--trait-fort); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; box-shadow: var(--ombre); max-width: calc(100vw - 32px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- téléphone ---------- */
@media (max-width: 899.98px) {
  .entete { padding: 14px 16px 4px; }
  .entete .logo { height: 36px; }
  .marque { min-height: 36px; }
  .entete .sep, .entete .t { display: none; }
  main, main.sans-regles { display: block; padding: 10px 16px 150px; }
  .droite { position: static; display: block; }
  .cmd { height: 56px; } .cmd kbd { display: none; } .sug { top: 62px; }
  .pal { grid-template-columns: 1fr; }
  h2 { margin-top: 26px; }

  .regles { position: static; max-height: none; overflow: visible; margin-top: 14px; border-radius: 18px; box-shadow: none; padding: 0; }
  .regles .rg-h { display: none; }
  .regles .rg-tel {
    display: flex; align-items: center; width: 100%; gap: 10px; padding: 13px 16px; font-size: 15px; font-weight: 600; text-align: left;
  }
  .regles .rg-tel .amt { margin-left: auto; color: var(--charge); font-weight: 600; }
  .regles .rg-tel::after {
    content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--gris-clair); border-bottom: 1.5px solid var(--gris-clair);
    transform: rotate(45deg); transition: transform .2s; margin: 0 4px 3px 4px;
  }
  .regles.ouvert .rg-tel::after { transform: rotate(-135deg); margin-bottom: -3px; }
  .regles:not(.ouvert) .rg { display: none; }
  .regles.ouvert { padding-bottom: 6px; }

  .fact {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 30px rgba(20,33,30,.18); max-height: 88vh; overflow: auto; z-index: 20; border: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .poignee { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 20px 10px; text-align: left; position: relative; }
  .poignee::before {
    content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; border-radius: 2px;
    background: var(--trait); transform: translateX(-50%);
  }
  .poignee .l { display: block; font-size: 13px; color: var(--gris); }
  .poignee .v { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
  .poignee .a { margin-left: auto; text-align: right; }
  .poignee .a .v { font-size: 17px; color: var(--am-texte); }
  .fact:not(.ouvert) > :not(.poignee):not(.barre) { display: none; }
  .fact:not(.ouvert) .barre { margin: 0 20px 16px; height: 8px; }
  .fact.ouvert .poignee > span { display: none; }
  .fact.ouvert .poignee { padding: 12px; }
  .gros { font-size: 52px; }
  .fact .carte-marches { box-shadow: none; border: 0; border-top: 1px solid var(--trait); border-radius: 0; margin: 12px 16px 0; padding: 14px 8px 4px; }
  .annuler { bottom: 118px; }
  .hors-ligne { bottom: 172px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}