/* ==========================================================================
   Espace salon : l'application privée de Janie (maquette fonctionnelle)

   Même monde que le site public (style C de ui-skills) : papier rosé, noir du logo, rose poudré,
   cadres doubles arrondis, boutons pilule plats. Ici, Lato porte l'interface et Literata les noms.
   Structure « Le fauteuil » : une cliente à la fois remplit l'écran.

   Pensée pour la tablette au poste : cibles d'au moins 48 px, échelle de texte fixe (rem),
   aucune action qui dépend du survol.

   Échelle des z-index : 20 barre du haut, 30 onglets du bas, 40 menu du compte, 60 message (toast),
   80 connexion. Les <dialog> vivent dans la couche supérieure du navigateur.
   ========================================================================== */

:root {
  color-scheme: light;   /* toujours clair, comme le site public (décision de Mathieu, 29 octobre 2026) */

  --paper: #F7EEEE;
  --paper-2: #F0E2E3;
  --sheet: #FCF8F8;
  --pink: #EBD2D4;
  --pink-2: #E2C2C5;
  --ink: #171314;
  --ink-2: #4F4547;
  --ink-3: #66595B;
  --shell: rgba(23, 19, 20, .045);
  --ring: rgba(23, 19, 20, .08);
  --line: rgba(23, 19, 20, .12);
  --tint: rgba(23, 19, 20, .06);
  --tint-2: rgba(23, 19, 20, .1);
  --field-border: rgba(23, 19, 20, .5);
  --bowl: #171314;
  --btn-bg: #171314;
  --btn-bg-hover: #2F2729;
  --btn-fg: #FCF8F8;
  --focus: #171314;
  --danger: #A3352A;
  --ok: #2F6B4F;
  --shadow-rgb: 23, 19, 20;
  --shadow-soft: 0 30px 60px -36px rgba(var(--shadow-rgb), .4), 0 12px 24px -20px rgba(var(--shadow-rgb), .2);

  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 160ms;
  --t-base: 240ms;

  --ui: "Lato", "Segoe UI", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;

  /* Échelle fixe (rapport 1,2) */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.1875rem;  /* 19 */
  --fs-xl: 1.4375rem;  /* 23 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.75rem;   /* 44 : nom de la cliente */

  --barre-h: 68px;
  --pad: clamp(1rem, 2.4vw, 1.75rem);
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-3) var(--paper-2); }
body {
  margin: 0; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  font-family: var(--ui); font-size: var(--fs-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, ul, ol, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; text-underline-offset: .2em; }
::selection { background: var(--pink); color: #171314; }
input, textarea, select { caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: .75rem; }
[hidden] { display: none !important; }

/* ---------- Cadre double ---------- */
.bezel {
  padding: 6px; border-radius: var(--r-xl);
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--ring), var(--shadow-soft);
}
.bezel__core {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: .4rem .4rem .4rem 1.35rem;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-md); line-height: 1.15; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn__label { text-align: start; }
.btn__icone { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 1.1rem; transition: transform var(--t-base) var(--ease-soft); }
@media (hover: hover) { .btn:hover .btn__icone { transform: translate(2px, -2px); } }
.btn--primaire { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primaire .btn__icone { background: rgba(255, 255, 255, .15); }
@media (hover: hover) { .btn--primaire:hover { background: var(--btn-bg-hover); } }
.btn--doux { background: var(--tint); color: var(--ink); }
.btn--doux .btn__icone { background: var(--sheet); }
@media (hover: hover) { .btn--doux:hover { background: var(--tint-2); } }
.btn--rose { background: var(--pink); color: #171314; }
.btn--rose .btn__icone { background: rgba(255, 255, 255, .5); }
.btn--plein { width: 100%; justify-content: space-between; }
.btn--petit { min-height: 44px; padding: .3rem .3rem .3rem 1rem; font-size: var(--fs-sm); }
.btn--petit .btn__icone { width: 34px; height: 34px; font-size: 1rem; }
.btn--texte { min-height: 44px; padding: .5rem 1rem; background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
@media (hover: hover) { .btn--texte:hover { background: var(--tint); } }
.btn-rond {
  width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--tint); color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.btn-rond:active { transform: scale(.94); }
@media (hover: hover) { .btn-rond:hover { background: var(--tint-2); } }

/* ---------- Champs ---------- */
.champ { display: grid; gap: .4rem; }
.champ label, .champ__label { font-weight: 700; font-size: var(--fs-sm); }
.champ__aide { font-size: var(--fs-sm); color: var(--ink-2); }
.champ input, .champ textarea, .champ select, .saisie {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.champ textarea { min-height: 5.5rem; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus, .saisie:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
::placeholder { color: var(--ink-3); opacity: 1; }
/* La croix qui vide un champ de recherche : aux couleurs du salon plutôt que le bleu du navigateur */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem; height: 1.15rem; margin-left: .5rem; cursor: pointer;
  background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Connexion ---------- */
body:has(.connexion:not([hidden])) { overflow: hidden; }
.connexion {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 1.25rem;
  background: var(--paper);
  overflow-y: auto;
}
.connexion__bezel { width: min(100%, 27rem); }
.connexion__carte { padding: clamp(1.75rem, 5vw, 2.5rem); display: grid; gap: 1.25rem; text-align: center; }
.connexion__logo { width: 168px; height: auto; aspect-ratio: 243.27 / 112.99; margin-inline: auto; color: var(--ink); }
.connexion h1 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); }
.connexion__form { display: grid; gap: 1rem; text-align: start; }
.connexion__note { font-size: var(--fs-sm); color: var(--ink-2); text-wrap: pretty; }

/* ---------- Barre du haut ---------- */
.barre {
  position: sticky; top: 0; z-index: 20;
  height: var(--barre-h); padding: 0 var(--pad);
  display: flex; align-items: center; gap: 1rem;
  background: var(--paper);
  box-shadow: 0 16px 26px -26px rgba(var(--shadow-rgb), .55);
}
.barre__logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); white-space: nowrap; }
.barre__logo svg { width: 40px; height: 40px; color: var(--ink); }
.barre__nav { display: flex; gap: 4px; padding: 4px; margin-left: clamp(.5rem, 2vw, 1.5rem); border-radius: 999px; background: var(--tint); }
.barre__nav button {
  min-height: 44px; padding: .5rem 1.05rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.barre__nav button[aria-current="page"] { background: var(--sheet); color: var(--ink); }
@media (hover: hover) { .barre__nav button:not([aria-current="page"]):hover { color: var(--ink); } }
.barre__droite { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.barre__demo { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.barre__bouton {
  min-height: 48px; padding: 0 1.1rem; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--tint); color: var(--ink); font-weight: 700; font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--ease);
}
.barre__bouton i { font-size: 1.15rem; }
@media (hover: hover) { .barre__bouton:hover { background: var(--tint-2); } }
.barre__bouton--rond { width: 48px; padding: 0; justify-content: center; background: var(--ink); color: var(--paper); letter-spacing: .02em; }
@media (hover: hover) { .barre__bouton--rond:hover { background: var(--ink-2); } }

.menu-compte { position: relative; }
.menu-compte__liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 260px; padding: 6px; border-radius: var(--r-md);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--ring), 0 24px 48px -20px rgba(var(--shadow-rgb), .45);
  display: grid;
}
.menu-compte__liste button, .menu-compte__liste a {
  min-height: 48px; padding: .6rem .85rem; border: 0; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: .65rem;
  background: transparent; text-align: start; text-decoration: none; font-size: var(--fs-md);
}
.menu-compte__liste i { font-size: 1.15rem; color: var(--ink-2); }
@media (hover: hover) { .menu-compte__liste button:hover, .menu-compte__liste a:hover { background: var(--tint); } }

/* ---------- Vue ---------- */
.vue { padding: 1rem var(--pad) 3rem; outline: none; }
.vue__sans-js { padding: 3rem 0; font-size: var(--fs-lg); }
.vue__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.vue__tete h1 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); }
.vue__tete p { color: var(--ink-2); margin-top: .25rem; }

/* ---------- Aujourd'hui : la journée ---------- */
.jour__tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.jour__titre { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); text-wrap: balance; }
.jour__titre::first-letter { text-transform: uppercase; }
.synchro { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--ink-2); }
.synchro i { font-size: 1.1rem; }
.synchro .btn--texte { min-height: 40px; padding: .3rem .7rem; font-size: var(--fs-sm); }

.bande {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 8px;
  padding: 6px 2px 10px; margin: 0 -2px .5rem;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.bande li { display: flex; }
.rdv {
  position: relative; scroll-snap-align: start; width: 100%;
  min-height: 72px; padding: .6rem .85rem; border: 0; border-radius: var(--r-md);
  display: grid; gap: 0; align-content: start; text-align: start;
  background: var(--tint); color: var(--ink);
  transition: transform var(--t-base) var(--ease-soft), background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.rdv__heure { font-weight: 900; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rdv__nom { font-weight: 700; line-height: 1.3; }
.rdv__service { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.3; }
.rdv__nouvelle { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.rdv.is-passe { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.rdv[aria-pressed="true"] {
  background: var(--pink); color: #171314; transform: translateY(-4px);
  box-shadow: 0 16px 26px -18px rgba(var(--shadow-rgb), .55); /* taste-skill-ignore : sélection qui s'avance */
}
.rdv[aria-pressed="true"] .rdv__service { color: #3D3335; }
@media (hover: hover) { .rdv:not([aria-pressed="true"]):hover { background: var(--tint-2); } }

/* ---------- Le fauteuil ---------- */
.fauteuil { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.fauteuil.is-edition { grid-template-columns: minmax(0, 1fr); }
.fauteuil__large { grid-column: 1 / -1; }
.fauteuil__large .paiements { display: flex; align-items: baseline; gap: .5rem 1.5rem; flex-wrap: wrap; }
.fauteuil__large .paiements h3 { margin-bottom: 0; }
.fiche { padding: 1.1rem clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.75rem); }
.fiche__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fiche__nom { font-family: var(--serif); font-weight: 500; font-size: var(--fs-3xl); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.fiche__nom:focus { outline: none; }
.fiche__nom:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.fiche__meta { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; color: var(--ink-2); font-size: var(--fs-md); }
.fiche__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.fiche__lien { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .25rem; display: inline-flex; gap: .35rem; align-items: center; }
.note-cliente {
  margin-top: .75rem; padding: .6rem .9rem; border-radius: var(--r-sm);
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--paper-2); color: var(--ink);
}
.note-cliente i { font-size: 1.2rem; flex: none; margin-top: .1rem; }

/* La formule : le bol tient la colonne de gauche, le titre, les onglets, les grammes et la note à droite */
.formule { margin-top: 1.1rem; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(1.25rem, 2.6vw, 2rem); align-items: center; }
.formule__bol .bol { width: 280px; }
.formule__infos { min-width: 0; }
.formule__tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; margin-bottom: .35rem; }
.formule__titre { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); text-wrap: balance; }
.formule__titre time { color: var(--ink-2); }
.segments { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tint); }
.segments button {
  min-height: 44px; padding: .45rem 1rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segments button[aria-selected="true"] { background: var(--sheet); color: var(--ink); }
.bol { width: 100%; height: auto; overflow: visible; }
.bol__bord { fill: var(--bowl); }
.bol__melange { transition: fill .5s var(--ease); }
.bol__parts circle { fill: none; stroke-width: 20; transition: stroke-dasharray .7s var(--ease), stroke-dashoffset .7s var(--ease), stroke .5s var(--ease); }
.bol--sans-transition .bol__parts circle { transition: none; }
.bol__total { font-family: var(--serif); font-size: 64px; font-weight: 600; letter-spacing: -0.03em; fill: #171314; }
.bol__pose { font-family: var(--ui); font-size: 26px; font-weight: 700; fill: #171314; }
.bol--fonce .bol__total, .bol--fonce .bol__pose { fill: #FCF8F8; }

.lignes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-lg); }
.lignes th, .lignes td { padding: .45rem 0; border-bottom: 1px solid var(--line); text-align: start; font-weight: 400; }
.lignes td { text-align: end; font-weight: 700; }
.lignes tfoot th, .lignes tfoot td { border-bottom: 0; font-weight: 700; font-size: var(--fs-md); }
.pastille { display: inline-block; width: 14px; height: 14px; margin-right: .6rem; vertical-align: -1px; border-radius: 50%; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(23, 19, 20, .2); flex: none; }
.visite-note { margin-top: .5rem; color: var(--ink-2); font-style: italic; font-size: var(--fs-sm); line-height: 1.45; }

.vide { padding: 1.5rem 0 .5rem; display: grid; gap: 1rem; justify-items: start; }
.vide p { color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.vide strong { color: var(--ink); }
.vide__boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.vide .vide__aide { font-size: var(--fs-sm); }

/* Rendez-vous dont le numéro n'est dans aucune fiche : on le relie à la fiche de la cliente plutôt que d'en créer
   une deuxième (un doublon, comme ceux de Master Factory) */
.liaison { padding: 1.25rem 0 .25rem; display: grid; gap: .85rem; }
.liaison > p { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.liaison > p strong { color: var(--ink); }
.liaison__titre { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); }
.liaison .recherche-liste { margin-bottom: 0; }
.liaison__resultats { display: grid; gap: 6px; max-width: 36rem; }
.liaison__ligne {
  width: 100%; min-height: 64px; padding: .6rem .6rem .6rem 1rem; border: 0; border-radius: var(--r-md);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: center; text-align: start;
  background: var(--tint); color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.liaison__ligne:active { transform: scale(.98); }
@media (hover: hover) { .liaison__ligne:hover { background: var(--tint-2); } }
.liaison__nom { font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; }
.liaison__detail { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.liaison__action {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem 1rem;
  border-radius: 999px; background: var(--pink); color: #171314; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
}
.liaison__action i { font-size: 1.05rem; }
.liaison__vide { padding: .4rem 0; color: var(--ink-2); }
.liaison__autres { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: -1rem; }
.fiche__lien .btn--texte { min-height: 40px; padding: .3rem .6rem; font-size: var(--fs-sm); }

/* ---------- Colonne des actions et historique ---------- */
.cote { display: grid; gap: 1rem; }
.actions { display: grid; gap: .65rem; }
.action {
  position: relative; min-height: 76px; padding: 1rem 1.15rem 1rem 1.3rem; border: 0; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: start;
  font-size: var(--fs-lg); font-weight: 700;
  transition: transform var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease);
}
.action:active { transform: scale(.98); }
.action small { display: block; margin-top: .15rem; font-size: var(--fs-sm); font-weight: 400; opacity: .85; }
.action i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 1.3rem; }
.action--principale { background: var(--btn-bg); color: var(--btn-fg); min-height: 96px; }
.action--principale i { background: rgba(255, 255, 255, .15); }
.action--rose { background: var(--pink); color: #171314; }
.action--rose i { background: rgba(255, 255, 255, .5); }
.action--douce { background: var(--tint); color: var(--ink); cursor: pointer; }
.action--douce i { background: var(--sheet); }
.action--douce:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) {
  .action--principale:hover { background: var(--btn-bg-hover); }
  .action--rose:hover { background: var(--pink-2); }
  .action--douce:hover { background: var(--tint-2); }
}
.action input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.bloc { padding: 1.15rem 1.25rem; }
.bloc h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); margin-bottom: .6rem; }
.historique li { padding: .8rem 0; border-top: 1px solid var(--line); }
.historique li:first-child { border-top: 0; }
.historique__ligne { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.historique__date { font-weight: 700; font-variant-numeric: tabular-nums; }
.historique__service { color: var(--ink-2); text-align: end; }
.historique__melanges { margin-top: .2rem; font-size: var(--fs-sm); color: var(--ink-2); }
.historique li.is-remplacee .historique__date, .historique li.is-remplacee .historique__melanges { text-decoration: line-through; text-decoration-thickness: 1px; }
.historique__remplacee { margin-top: .15rem; font-size: var(--fs-xs); color: var(--ink-3); }
.photos { margin-top: .55rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.photos figure { display: grid; gap: .2rem; font-size: var(--fs-xs); color: var(--ink-2); }
.photos img { width: 72px; height: 90px; object-fit: cover; border-radius: 10px; }
.paiements p { color: var(--ink-2); font-size: var(--fs-sm); text-wrap: pretty; }
.paiements p + p { margin-top: .4rem; }

/* ---------- Édition de la formule (dans la fiche, sans fenêtre) ---------- */
.edition { margin-top: 1.4rem; display: grid; gap: 1.25rem; }
.edition__bandeau { padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--pink); color: #171314; font-weight: 700; display: flex; gap: .6rem; align-items: flex-start; }
.edition__bandeau:focus { outline: none; }
/* La barre collante du bas : le curseur de quantité totale, puis Enregistrer et Annuler.
   Le geste signature et la sauvegarde restent visibles pendant toute l'édition. */
.fauteuil.is-edition .edition__actions {
  position: sticky; bottom: 1rem; z-index: 5;
  align-items: center; gap: .75rem 1rem;
  padding: .75rem 1rem .75rem 1.25rem; margin: 0 -.6rem; border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--ring), 0 -12px 30px -18px rgba(var(--shadow-rgb), .5); /* taste-skill-ignore : barre collante, elle flotte */
}
.edition__actions .curseur { flex: 1 1 20rem; min-width: 0; gap: .1rem; }
.edition__actions .curseur__aide { margin-top: -.15rem; }
.edition__bandeau i { font-size: 1.2rem; flex: none; margin-top: .05rem; }
.edition__grille { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.edition__bol { display: grid; gap: 1rem; position: sticky; top: calc(var(--barre-h) + 1rem); }
.curseur { display: grid; gap: .35rem; }
.curseur__tete { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: var(--fs-sm); }
.curseur output { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
/* Le curseur signature, dessiné aux couleurs du salon : rail de 12 px, partie remplie à l'encre, poignée de 34 px
   (zone de toucher de 44 px). La partie remplie est un vrai élément, pas un dégradé. */
.curseur__rail { position: relative; height: 44px; display: flex; align-items: center; --f: .5; }
.curseur__rail::before { content: ""; position: absolute; left: 0; right: 0; height: 12px; border-radius: 999px; background: var(--tint-2); }
.curseur__plein { position: absolute; left: 0; height: 12px; width: calc(17px + (100% - 34px) * var(--f)); border-radius: 999px; background: var(--ink); }
.curseur input[type="range"] {
  position: relative; width: 100%; height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.curseur input[type="range"]::-webkit-slider-runnable-track { height: 12px; background: transparent; border-radius: 999px; }
.curseur input[type="range"]::-moz-range-track { height: 12px; background: transparent; }
.curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: -11px; border-radius: 50%;
  background: var(--sheet); border: 4px solid var(--ink);
  box-shadow: 0 6px 14px -6px rgba(var(--shadow-rgb), .55); /* taste-skill-ignore : poignée que l'on tient : elle flotte */
}
.curseur input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--sheet); border: 4px solid var(--ink); }
.curseur input[type="range"]:focus { outline: none; }
.curseur input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 3px; }
.curseur input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 3px; }
.curseur__aide { font-size: var(--fs-sm); color: var(--ink-2); }

/* Listes déroulantes aux couleurs du salon (plus de chevron du navigateur) */
.select { position: relative; display: block; min-width: 0; }
.select select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 48px; padding: .7rem 2.75rem .7rem .9rem;
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.select select:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.select i { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-2); font-size: 1.1rem; }

.melange-edit { display: grid; gap: .65rem; }
.melange-edit__nom { max-width: 18rem; }
.ligne-edit { display: grid; grid-template-columns: minmax(9rem, 1fr) auto 48px; gap: .5rem; align-items: center; }
.pas { display: inline-flex; align-items: center; border-radius: 999px; background: var(--tint); padding: 2px; }
.pas button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 1.1rem; display: grid; place-items: center; }
@media (hover: hover) { .pas button:hover { background: var(--sheet); } }
.pas input { width: 4.2rem; min-height: 44px; border: 0; background: transparent; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pas input::-webkit-outer-spin-button, .pas input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pas input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-radius: 10px; }
.pas__unite { padding-right: .6rem; font-size: var(--fs-sm); color: var(--ink-2); }
.edition__ajouts { display: flex; flex-wrap: wrap; gap: .5rem; }
.edition__pose { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.edition__pose > span { font-weight: 700; font-size: var(--fs-sm); }
.edition__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Clientes ---------- */
.doublons { margin-bottom: 1.25rem; }
.doublons__corps { padding: 1.15rem 1.25rem; display: grid; gap: .8rem; }
.doublons h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); }
.doublons p { color: var(--ink-2); text-wrap: pretty; }
.paire { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 0; border-top: 1px solid var(--line); }
.paire__noms { font-weight: 700; }
.paire__noms span { font-weight: 400; color: var(--ink-2); }
.comparaison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.comparaison__fiche { padding-top: .75rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; align-content: start; }
.comparaison__fiche label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 700; cursor: pointer; }
.comparaison__fiche input[type="radio"] { width: 22px; height: 22px; accent-color: var(--ink); }
.comparaison__fiche ul { font-size: var(--fs-sm); color: var(--ink-2); display: grid; gap: .2rem; }
.recherche-liste { margin-bottom: 1rem; max-width: 26rem; position: relative; }
.recherche-liste i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--ink-2); pointer-events: none; }
.recherche-liste input { padding-left: 2.6rem; }
.table-clientes { width: 100%; border-collapse: collapse; }
.table-clientes th, .table-clientes td { padding: .25rem .75rem; text-align: start; border-bottom: 1px solid var(--line); }
.table-clientes thead th { padding: .7rem .75rem; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 700; }
.table-clientes td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.table-clientes td:first-child { padding-left: 0; }
.table-clientes button { min-height: 52px; padding: .5rem .75rem; border: 0; border-radius: var(--r-sm); background: transparent; font-weight: 700; font-size: var(--fs-lg); text-align: start; color: var(--ink); display: inline-flex; align-items: center; gap: .6rem; }
@media (hover: hover) { .table-clientes button:hover { background: var(--tint); } }
.etiquette-doublon { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; background: var(--pink); color: #171314; font-size: var(--fs-xs); font-weight: 700; }

/* ---------- Produits ---------- */
.marques { display: grid; gap: 1rem; }
.marque { padding: 1.15rem 1.25rem; display: grid; gap: .9rem; }
.marque__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.marque h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); }
.marque__note { color: var(--ink-2); font-size: var(--fs-sm); }
.nuances { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.nuance { min-height: 56px; padding: .55rem .8rem; border-radius: var(--r-sm); background: var(--paper-2); display: flex; align-items: center; gap: .1rem; }
.nuance strong { font-variant-numeric: tabular-nums; }
.nuance span { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-2); }
.form-ligne { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.form-ligne .champ { flex: 1 1 10rem; }
.form-ligne .champ--couleur { flex: 0 0 auto; }
.champ--couleur input { width: 64px; padding: .25rem; cursor: pointer; }
.vide-marque { color: var(--ink-2); }

/* ---------- Importer et exporter ---------- */
.etapes { display: grid; gap: 1rem; counter-reset: etape; }
.etape { padding: 1.15rem 1.25rem; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 900;
}
.etape h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); margin-bottom: .35rem; }
.etape p { color: var(--ink-2); text-wrap: pretty; max-width: 62ch; }
.etape__contenu { display: grid; gap: .8rem; justify-items: start; }
.depot {
  width: 100%; min-height: 120px; padding: 1.25rem; border-radius: var(--r-md);
  display: grid; place-items: center; gap: .4rem; text-align: center;
  background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--line);
  cursor: pointer; position: relative;
}
.depot i { font-size: 1.8rem; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.depot.is-survol { background: var(--pink); }
.apercu { width: 100%; overflow-x: auto; }
.apercu table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.apercu th, .apercu td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.apercu thead th { color: var(--ink-2); }
.apercu .is-doublon td { background: rgba(235, 210, 212, .45); }
.apercu caption { caption-side: bottom; text-align: start; padding-top: .6rem; color: var(--ink-2); font-style: italic; }
.export { margin-top: 1rem; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.export h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); }
.export p { color: var(--ink-2); max-width: 52ch; }

/* ---------- Recherche ---------- */
.recherche {
  width: min(100% - 2rem, 34rem); max-height: min(80svh, 34rem); margin: 10svh auto auto;
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--sheet); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ring), 0 40px 80px -30px rgba(var(--shadow-rgb), .55);
}
.recherche::backdrop { background: rgba(23, 19, 20, .35); }
.recherche__form { position: relative; padding: .75rem; display: grid; gap: .5rem; }
.recherche__champ { position: relative; display: block; margin-right: 56px; }
.recherche__champ i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--ink-2); }
.recherche__champ input { width: 100%; min-height: 52px; padding: .7rem 1rem .7rem 2.7rem; border: 0; border-radius: var(--r-md); background: var(--tint); font-size: var(--fs-lg); }
.recherche__champ input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.recherche__fermer { position: absolute; top: .75rem; right: .75rem; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 1.15rem; }
.recherche__resultats { display: grid; gap: 2px; overflow-y: auto; max-height: calc(min(80svh, 34rem) - 90px); }
.recherche__resultats button { width: 100%; min-height: 56px; padding: .6rem .9rem; border: 0; border-radius: var(--r-sm); background: transparent; display: flex; justify-content: space-between; gap: 1rem; text-align: start; }
.recherche__resultats button span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.recherche__resultats button[aria-selected="true"], .recherche__resultats button:focus-visible { background: var(--pink); color: #171314; outline: none; }
.recherche__resultats button[aria-selected="true"] span:last-child { color: #3D3335; }
@media (hover: hover) { .recherche__resultats button:hover { background: var(--tint); } }
.recherche__vide { padding: 1rem .9rem; color: var(--ink-2); }

/* ---------- Message (toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: min(100% - 2rem, 30rem); padding: .85rem 1.15rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700;
  box-shadow: 0 20px 40px -20px rgba(var(--shadow-rgb), .6);
  transform: translate(-50%, 160%); opacity: 0; pointer-events: none;
  transition: transform var(--t-base) var(--ease-soft), opacity var(--t-base) var(--ease);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Onglets du bas (téléphone) ---------- */
.onglets-bas { display: none; }

/* ---------- Tablette en portrait ---------- */
@media (max-width: 1099px) {
  .fauteuil { grid-template-columns: minmax(0, 1fr); }
  .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action, .action--principale { min-height: 96px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
  .barre__demo { display: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 759px) {
  :root { --fs-3xl: 2.1rem; --barre-h: 60px; }
  .barre { gap: .5rem; }
  .barre__nav { display: none; }
  .barre__logo span { display: none; }
  .barre__bouton-texte { display: none; }
  .barre__bouton { width: 48px; padding: 0; justify-content: center; }
  .vue { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .onglets-bas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    box-shadow: 0 -16px 26px -24px rgba(var(--shadow-rgb), .55);
  }
  .onglets-bas button { min-height: 58px; border: 0; border-radius: var(--r-md); background: transparent; display: grid; place-items: center; gap: .1rem; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
  .onglets-bas i { font-size: 1.35rem; }
  .onglets-bas button[aria-current="page"] { background: var(--pink); color: #171314; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .formule, .edition__grille { grid-template-columns: minmax(0, 1fr); }
  .formule__bol .bol, .edition__bol .bol { width: 100%; max-width: 250px; margin-inline: auto; }
  /* Barre d'édition compacte sur téléphone : le curseur, puis Enregistrer et une croix pour annuler, sur une ligne */
  .fauteuil.is-edition .edition__actions { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; padding: .6rem .75rem .75rem; gap: .35rem .5rem; }
  .edition__actions .curseur { flex: 1 1 100%; }
  .edition__actions .curseur__aide { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .edition__actions .btn--primaire { flex: 1; justify-content: space-between; }
  .edition__actions .btn--doux { padding: .4rem; }
  .edition__actions .btn--doux .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .edition__bol { position: static; }
  .actions { grid-template-columns: minmax(0, 1fr); }
  .action, .action--principale { min-height: 72px; flex-direction: row; align-items: center; }
  .cote { grid-template-columns: minmax(0, 1fr); }
  .comparaison { grid-template-columns: minmax(0, 1fr); }
  .table-clientes thead { display: none; }
  .table-clientes tr { display: grid; grid-template-columns: 1fr auto; padding: .4rem 0; border-bottom: 1px solid var(--line); }
  .table-clientes td { border: 0; padding: .1rem .5rem; }
  .table-clientes td:nth-child(3), .table-clientes td:nth-child(4) { display: none; }
  .ligne-edit { grid-template-columns: minmax(0, 1fr) 48px; }
  .ligne-edit .pas { grid-column: 1 / 2; justify-self: start; }
  .ligne-edit .btn-rond { grid-row: 1; grid-column: 2; }
  .liaison__ligne { grid-template-columns: minmax(0, 1fr); }
  .liaison__action { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .rdv, .btn, .btn__icone, .action, .toast, .bol__melange, .bol__parts circle, .segments button, .barre__nav button, .liaison__ligne { transition: none; }
  .rdv[aria-pressed="true"] { transform: none; }
}