@font-face { font-family: "Libre Caslon Condensed"; src: url("fonts/LibreCaslonCondensed.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Caslon Condensed"; src: url("fonts/LibreCaslonCondensed-Italic.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #0c100e;
  --cream: #f1eee3;
  --accent: #00a1a4;
  --accent-text: #00696b;

  --bg: var(--cream);
  --surface: #f8f6ef;
  --surface-raised: #fdfcf8;
  --fg: var(--ink);
  --fg-muted: #3f443f;
  --fg-subtle: #62665f;
  --border: #d8d3c4;
  --border-strong: color-mix(in oklab, var(--ink) 52%, var(--cream));
  --hairline: rgb(12 16 14 / .08);
  --error: #9a2a1c;
  --shade: 12 16 14;

  --serif: "Libre Caslon Condensed", "Times New Roman", serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;

  --display: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem);
  --title: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);
  --text-sm: .875rem;
  --text-xs: .8125rem;

  --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --container: 1240px;
  --radius: 8px;
  --radius-lg: 12px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .2s var(--ease-out); }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg { display: block; max-width: 100%; }
html { scrollbar-color: var(--border-strong) var(--bg); }

.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 20; padding: .6rem 1rem; background: var(--ink); color: var(--cream); border-radius: var(--radius); }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- en-tête */

.top { position: sticky; top: 0; z-index: 10; padding: .75rem var(--gutter) 0; }
.top__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--container); min-height: 60px; margin-inline: auto; padding: .5rem .5rem .5rem 1rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--cream) 82%, transparent);
  box-shadow: inset 0 0 0 1px rgb(var(--shade) / .1), 0 14px 30px -22px rgb(var(--shade) / .45);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* Mêmes mesures que la barre du site (.nav__bar) : 16 px du haut et 68 px de haut, 12 px et 60 px sous 1100 px. */
.top { padding-top: 1rem; }
.top__bar { min-height: 68px; }
@media (max-width: 1099px) {
  .top { padding-top: .75rem; }
  .top__bar { min-height: 60px; padding-left: 1.25rem; }
}
.top__brand { display: flex; align-items: center; min-height: 44px; color: var(--fg); }
.top__brand svg { height: 38px; width: auto; aspect-ratio: 522.65 / 136.93; }
@media (max-width: 720px) { .top__brand svg { height: 32px; } }
.top__brand:hover { color: var(--fg); opacity: .8; }
.top__back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--radius); font-size: var(--text-sm); color: var(--fg-muted); text-decoration: none; }
.top__back:hover { color: var(--fg); background: rgb(var(--shade) / .05); }

.demo {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center;
  max-width: var(--container); margin: .75rem auto 0; width: calc(100% - 2 * var(--gutter));
  padding: .55rem 1rem; border-radius: var(--radius);
  background: color-mix(in oklab, var(--accent) 10%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, var(--bg));
  font-size: var(--text-xs); color: var(--fg-muted); text-align: center;
}
.demo a { color: var(--accent-text); }

/* ---------------------------------------------------------------- page */

.page { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--gutter) 5rem; display: flex; flex-direction: column; gap: 2.5rem; }
/* Marges comprises : le contenu s'aligne sur les bords de la barre (.top__bar, 1240 px hors marges). */
.is-wide .page { max-width: calc(var(--container) + 2 * var(--gutter)); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.75rem var(--gutter); border-top: 1px solid var(--hairline); font-size: var(--text-xs); color: var(--fg-subtle); }
.foot p:first-child { max-width: 60ch; }

h1, h2, .block__title, .tier__name, .summary__title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; color: var(--fg);
}
h1 { font-size: var(--display); text-wrap: balance; }
h2 { font-size: var(--title); text-wrap: balance; }
h1 em, h2 em, .tier__name em { font-style: italic; }

.intro { display: flex; flex-direction: column; gap: 1.25rem; }
.intro--row { flex-direction: row; flex-wrap: wrap; align-items: end; justify-content: space-between; }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--fg-muted); max-width: 58ch; text-wrap: pretty; }
.lead strong, .note strong, .small strong { color: var(--fg); font-weight: 500; }
.meta, .hint, .small { font-size: var(--text-sm); color: var(--fg-subtle); max-width: 62ch; text-wrap: pretty; }
.meta { font-variant-numeric: tabular-nums; }

.alert, .note { padding: 1rem 1.15rem; border-radius: var(--radius); font-size: .95rem; }
.alert { background: color-mix(in oklab, var(--error) 9%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--error) 45%, var(--bg)); color: var(--error); }
.note { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--fg-muted); }
.quote { padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.qa { display: grid; gap: .75rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.qa dt { font-size: var(--text-xs); color: var(--fg-subtle); }
.qa dd { margin: 0; color: var(--fg); }

/* ---------------------------------------------------------------- tunnel */

.tunnel { display: grid; gap: 3rem; }
.tunnel__main { display: flex; flex-direction: column; gap: 3rem; min-width: 0; }
.tunnel__aside { display: flex; flex-direction: column; gap: 1.75rem; }
@media (min-width: 1000px) {
  .tunnel { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .tunnel__aside { position: sticky; top: 6.5rem; }
}

.form { display: flex; flex-direction: column; gap: 3.5rem; }
.form--tight { gap: 1.5rem; }
fieldset { border: 0; padding: 0; min-width: 0; }
.block { display: flex; flex-direction: column; gap: 1.25rem; }
.block__title { float: left; width: 100%; display: flex; align-items: baseline; gap: .85rem; padding: 2rem 0 0; margin-bottom: .25rem; border-top: 1px solid var(--border); font-size: var(--title); }
.block__title + * { clear: both; }
form.block { padding-top: 2rem; border-top: 1px solid var(--border); }
.num { flex: none; font: 500 var(--text-xs)/1 var(--sans); color: var(--accent-text); font-variant-numeric: tabular-nums; transform: translateY(-.35em); }

/* barème : reprend les colonnes à filets du site */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier { display: flex; flex-direction: column; padding: 0 1.5rem; border-left: 1px solid var(--border); min-width: 0; }
.tier:first-child { padding-left: 0; border-left: 0; }
.tier:last-child { padding-right: 0; }
.tier__name { font-size: 1.75rem; }
.tier__note { margin: .35rem 0 1rem; font-size: var(--text-xs); color: var(--fg-subtle); min-height: 2.6em; }
.rate {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .9rem .75rem; margin-inline: -.75rem;
  border-top: 1px solid var(--border); border-radius: 0; cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.rate input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rate__time { font-size: var(--text-sm); color: var(--fg-muted); display: inline-flex; align-items: center; gap: .6rem; }
.rate__time::before { content: ""; flex: none; width: .9rem; height: .9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); transition: box-shadow .25s var(--ease-out); }
.rate__price { font: 400 1.6rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.rate:hover { background: rgb(var(--shade) / .035); }
.rate:has(input:checked) { background: color-mix(in oklab, var(--accent) 9%, transparent); }
.rate:has(input:checked) .rate__time { color: var(--fg); }
.rate:has(input:checked) .rate__time::before { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 4px var(--bg), inset 0 0 0 9px var(--accent); }
.rate:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.field > span { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.field em { font-style: normal; font-weight: 400; color: var(--fg-subtle); margin-left: .35rem; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem 1rem;
  font: inherit; font-size: 1rem; color: var(--fg); caret-color: var(--accent);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--fg-subtle); }
select { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f443f' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; }
select:invalid { color: var(--fg-subtle); }
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
/* Téléphone : indicatif (court, « +33 ») + numéro. Le select natif, transparent, est posé sur l'indicatif affiché. */
.tel { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .5rem; }
.tel__code, .tel select { grid-area: 1 / 1; }
.tel__code { display: flex; align-items: center; min-height: 3.25rem; padding: 0 2.25rem 0 1rem; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--fg); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f443f' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / 1.1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.tel select { opacity: 0; cursor: pointer; min-width: 0; }
.tel input { grid-column: 2; }
.tel:has(select:focus-visible) .tel__code { border-color: var(--accent); outline: 1px solid var(--accent); background-color: var(--surface-raised); }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--fg-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; background: var(--surface-raised); }
input[type="datetime-local"], input[type="date"] { font-variant-numeric: tabular-nums; }
::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }

.check { display: flex; gap: .85rem; align-items: flex-start; color: var(--fg-muted); font-size: .95rem; cursor: pointer; max-width: 62ch; }
.check input { margin-top: .2rem; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; flex: none; }

.submit { display: flex; flex-direction: column; gap: .75rem; padding-top: .5rem; }

.btn {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.4rem; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--cream); font: 500 .975rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .15s var(--ease-out), opacity .2s;
}
.btn:hover { background: #26302b; border-color: #26302b; color: var(--cream); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--lg { min-height: 3.5rem; padding: 0 1.75rem; font-size: 1.05rem; }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--ghost:hover { background: rgb(var(--shade) / .05); border-color: var(--fg); color: var(--fg); }
.btn--danger { background: transparent; color: var(--error); border-color: color-mix(in oklab, var(--error) 55%, var(--bg)); }
.btn--danger:hover { background: color-mix(in oklab, var(--error) 10%, var(--bg)); border-color: var(--error); color: var(--error); }
.link { padding: 0; background: none; border: 0; color: var(--accent-text); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

/* récapitulatif et réassurance */
.summary { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.summary__title { font-size: 1.6rem; }
.summary__lines { display: grid; gap: .85rem; }
.summary__lines > div { display: grid; gap: .15rem; }
.summary__lines dt { font-size: var(--text-xs); color: var(--fg-subtle); }
.summary__lines dd { margin: 0; font-size: .95rem; }
.summary__total { padding-top: .9rem; border-top: 1px solid var(--border); grid-template-columns: 1fr auto; align-items: baseline; }
.summary__total dd { font: 400 2rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.summary__lines [data-empty] { color: var(--fg-subtle); }

.trust { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.trust li { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: .85rem; align-items: start; font-size: var(--text-sm); color: var(--fg-subtle); }
.trust strong { display: block; color: var(--fg); font-weight: 500; margin-bottom: .1rem; }
.trust svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--accent-text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-top: .05rem; }
.trust__cnb { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.trust__cnb img { height: 104px; width: auto; padding: .35rem .6rem; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.trust--row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------- étapes */

.status { display: flex; flex-direction: column; gap: 2rem; }
.timeline { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: step; }
.timeline li { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; color: var(--fg-subtle); font-size: .95rem; }
.timeline li::before { content: ""; width: .75rem; height: .75rem; margin: .4rem 0 0 .375rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--bg); position: relative; z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: .72rem; top: 1.3rem; bottom: 0; width: 1px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before { background: var(--accent); box-shadow: none; }
.timeline li.is-current { color: var(--fg); }
.timeline li.is-current::before { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 5px color-mix(in oklab, var(--accent) 18%, transparent); }
.timeline strong { display: block; font-weight: 500; color: inherit; }
.timeline li.is-done { color: var(--fg-muted); }

/* ---------------------------------------------------------------- avocat */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.facts dt { font-size: var(--text-xs); color: var(--fg-subtle); margin-bottom: .15rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts a { text-decoration: underline; }

.choices { display: grid; gap: .6rem; }
.choice { display: flex; align-items: center; gap: .85rem; min-height: 3.25rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out); }
.choice:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.choice span { font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-direction: column; gap: .75rem; }
.action { border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.action > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font: 400 1.45rem/1.1 var(--serif); }
.action > summary::-webkit-details-marker { display: none; }
.action > summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease-out); }
.action[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.action > summary:hover { color: var(--fg); }
.action > .form { padding: 0 1.25rem 1.5rem; gap: 1.1rem; }
.action--primary { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, var(--bg)); }

/* ---------------------------------------------------------------- tableau de bord */

.board { display: flex; flex-direction: column; gap: .75rem; }
.board h2 { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .25rem; }
.count { font: 500 var(--text-sm) var(--sans); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.row__who { font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.row__meta { font-size: var(--text-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: .15rem .6rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-strong); font-size: .72rem; font-weight: 400; color: var(--fg-muted); }
.tag--live { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, var(--bg)); color: var(--accent-text); }
.inline { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline input { width: auto; }
.closed { list-style: none; padding: 0; display: grid; gap: .35rem; color: var(--fg-muted); }
.closed li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.inline label { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--fg-muted); }
.inline input[type="time"], .hours input[type="time"] { width: auto; min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.hours { display: grid; gap: .5rem; }
.hours__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; color: var(--fg-muted); font-size: var(--text-sm); }
.hours__day { display: inline-flex; align-items: center; gap: .6rem; min-width: 8.5rem; color: var(--fg); font-weight: 500; cursor: pointer; }
.cancel > summary { font-size: var(--text-sm); color: var(--fg-muted); cursor: pointer; }
.cancel[open] { flex-basis: 100%; }
.cancel .form { gap: .75rem; padding-top: .75rem; }

/* ---------------------------------------------------------------- démo */

.inbox { display: grid; gap: 2rem; }
@media (min-width: 900px) { .inbox { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } }
.inbox__list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.inbox__item a { display: grid; gap: .15rem; padding: .85rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); text-decoration: none; }
.inbox__item a:hover { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--fg); }
.inbox__item a[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.inbox__to { font-size: var(--text-xs); color: var(--fg-subtle); }
.inbox__subject { font-size: .95rem; }
.inbox__when { font-size: var(--text-xs); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.inbox__view { border-radius: var(--radius-lg); overflow: hidden; background: #fbfaf5; box-shadow: inset 0 0 0 1px var(--border); }
.inbox__view iframe { display: block; width: 100%; height: 78vh; border: 0; background: #fbfaf5; }
.inbox__sms { padding: 1.5rem; background: var(--surface); color: var(--fg); white-space: pre-wrap; font-size: 1rem; }
.sms-bubble { max-width: 32ch; overflow-wrap: anywhere; padding: .9rem 1.1rem; border-radius: 18px 18px 18px 4px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }

/* ---------------------------------------------------------------- texte long */

.prose { display: flex; flex-direction: column; gap: 1rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1rem; }
.prose p { color: var(--fg-muted); max-width: 65ch; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; gap: 1.75rem; }
  .tier { padding: 0; border-left: 0; }
  .tier__note { min-height: 0; margin-bottom: .6rem; }
  .rate { margin-inline: 0; padding-inline: .25rem; }
  .grid { grid-template-columns: 1fr; }
  .btn, .btn--lg { align-self: stretch; }
  .top__back { padding: 0 .6rem; }
  .row > form, .row > .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .btn:active { transform: none; }
}
.inbox__pane { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.inbox__pane .facts { padding-top: 0; border-top: 0; }
.inline input[type="date"] { width: auto; min-width: 12rem; }
.board { padding-top: 2rem; border-top: 1px solid var(--border); }
.intro--row + .board { border-top: 0; padding-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.slot { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.slot__label { padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.slot__label em { font-style: normal; font-weight: 400; color: var(--fg-subtle); margin-left: .35rem; }
.slot__inputs { display: grid; grid-template-columns: minmax(0, 1fr) 6.25rem; gap: .5rem; }
.slot__inputs label { display: block; min-width: 0; }
.slot select { padding-right: 2.25rem; background-position: right .6rem center; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sélecteur de créneaux */

.picker { display: none; }
.picker.is-ready { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .picker.is-ready { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .picker__chosen { grid-column: 1 / -1; }
}
.picker__chosen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; min-height: 2.5rem; }
.picker__count { font-size: var(--text-sm); color: var(--fg-muted); }
.picker__tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.picker__tag { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .3rem .25rem .85rem; border-radius: 999px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-strong); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.picker__tag span::first-letter { text-transform: uppercase; }
.picker__remove { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: transparent; color: var(--fg-muted); cursor: pointer; }
.picker__remove svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.picker__remove:hover { background: rgb(var(--shade) / .08); color: var(--fg); }
.picker__note { flex-basis: 100%; font-size: var(--text-xs); color: var(--fg-subtle); }

.picker__cal, .picker__times { padding: 1.1rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.picker__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.picker__dow { padding-bottom: .35rem; font-size: var(--text-xs); color: var(--fg-subtle); text-align: center; text-transform: capitalize; }
.picker__day {
  position: relative; display: grid; place-items: center; align-content: center; gap: 0;
  aspect-ratio: 1 / .9; min-height: 44px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--fg); font: 400 1.35rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer; transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s;
  box-shadow: inset 0 0 0 1px var(--border);
}
.picker__day:hover:not(:disabled) { background: rgb(var(--shade) / .05); box-shadow: inset 0 0 0 1px var(--border-strong); }
.picker__day:disabled { color: color-mix(in oklab, var(--fg-subtle) 55%, var(--bg)); box-shadow: none; cursor: default; }
.picker__day[aria-pressed="true"] { background: var(--ink); color: var(--cream); box-shadow: none; }
.picker__month { font: 500 .62rem/1 var(--sans); letter-spacing: .02em; color: var(--fg-subtle); margin-top: .2rem; }
.picker__day[aria-pressed="true"] .picker__month { color: color-mix(in oklab, var(--cream) 70%, var(--ink)); }
.picker__dot { position: absolute; top: .4rem; right: .4rem; width: .38rem; height: .38rem; border-radius: 50%; background: var(--accent); }

.picker__times { display: flex; flex-direction: column; gap: 1rem; }
.picker__empty { font-size: var(--text-sm); color: var(--fg-subtle); padding: .5rem 0; }
.picker__day-title { font: 400 1.5rem/1.1 var(--serif); }
.picker__day-title::first-letter { text-transform: uppercase; }
.picker__slotgroup { display: grid; gap: .5rem; }
.picker__grouplabel { font-size: var(--text-xs); color: var(--fg-subtle); }
.picker__hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: .35rem; }
.picker__hour {
  min-height: 44px; border: 0; border-radius: var(--radius); background: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border); font: 400 .95rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s;
}
.picker__hour:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--border-strong); background: rgb(var(--shade) / .05); }
.picker__hour[aria-pressed="true"] { background: var(--ink); color: var(--cream); box-shadow: none; font-weight: 500; }
.picker__hour:disabled { color: color-mix(in oklab, var(--fg-subtle) 55%, var(--bg)); box-shadow: none; cursor: default; }
.slots[hidden] { display: none; }
.picker__hours { grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); }
abbr.req { text-decoration: none; color: var(--accent-text); font-family: var(--sans); font-weight: 500; font-size: .85em; }
.block__title abbr.req { font-size: .6em; transform: translateY(-.55em); display: inline-block; }
optgroup { color: var(--fg-subtle); font-style: normal; font-weight: 500; }
option { color: var(--fg); background: var(--surface); }
.facts > div:has(a[href^="mailto:"]) { grid-column: span 2; }

.picker__monthtitle { font: 400 1.35rem/1.1 var(--serif); margin: 0 0 .75rem; }
.picker__grid + .picker__monthtitle { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.picker__pad { display: block; }

.steps { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.is-steps { scroll-margin-top: 6.5rem; }
.steps__btn { width: 100%; display: flex; flex-direction: row; align-items: baseline; gap: .45rem; padding: .6rem 0 0; border: 0; border-top: 2px solid var(--border); background: none; color: var(--fg-subtle); font: inherit; text-align: left; cursor: pointer; }
.steps__btn:disabled { cursor: default; color: color-mix(in oklab, var(--fg-subtle) 60%, var(--bg)); }
.steps__btn.is-done { color: var(--fg-muted); border-top-color: var(--border-strong); }
.steps__btn.is-done:hover .steps__label { text-decoration: underline; text-underline-offset: .2em; }
.steps__btn[aria-current="step"] { color: var(--fg); border-top-color: var(--ink); }
.steps__num { font: 500 var(--text-xs)/1 var(--sans); font-variant-numeric: tabular-nums; }
.steps__label { font-size: var(--text-sm); line-height: 1.25; }
.is-steps .block__title { border-top: 0; padding-top: 1rem; }
.is-steps .block__title:focus { outline: none; }
.step-actions { display: flex; justify-content: space-between; gap: .75rem; padding-top: .5rem; }
.step-actions .btn:only-child { margin-left: auto; }
@media (max-width: 560px) {
  .steps__label { font-size: var(--text-xs); }
  .step-actions .btn { flex: 1; }
}
.is-steps .block[hidden] { display: none; }
.steps__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .steps__label { display: none; } .steps__btn[aria-current="step"] .steps__label { display: inline; } }

/* calendrier compact, mois entier */
.block { container-type: inline-size; }
.picker.is-ready { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .picker.is-ready { grid-template-columns: minmax(0, 1fr); } }
.picker__cal, .picker__times { padding: 1rem; }
.picker__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.picker__head .picker__monthtitle { margin: 0; padding: 0; border: 0; font: 400 1.3rem/1.1 var(--serif); }
.picker__arrows { display: flex; gap: .25rem; }
.picker__arrow { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--fg); font: 400 1.35rem/1 var(--sans); cursor: pointer; }
.picker__arrow:hover:not(:disabled) { background: rgb(var(--shade) / .07); }
.picker__arrow:disabled { color: color-mix(in oklab, var(--fg-subtle) 45%, var(--bg)); cursor: default; }
.picker__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; }
.picker__dow { padding-bottom: .25rem; font-size: .72rem; }
.picker__day { aspect-ratio: auto; min-height: 2.5rem; height: 2.5rem; box-shadow: none; font: 400 .92rem/1 var(--sans); color: color-mix(in oklab, var(--fg-subtle) 50%, var(--bg)); }
.picker__day.is-open { background: rgb(var(--shade) / .065); color: var(--fg); font-weight: 500; }
.picker__day.is-open:hover { background: rgb(var(--shade) / .12); box-shadow: none; }
.picker__day[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.picker__dot { top: auto; bottom: .3rem; right: 50%; transform: translateX(50%); width: .3rem; height: .3rem; }
.picker__day[aria-pressed="true"] .picker__dot { background: var(--cream); }

.picker__times { gap: .75rem; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.picker__day-title { font: 400 1.3rem/1.1 var(--serif); }
.picker__slotgroup { gap: .4rem; }
.picker__hours { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .3rem; }
.picker__hour { min-height: 2.5rem; font-size: .9rem; }
@container (min-width: 500px) {
  .picker.is-ready { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .picker__chosen { grid-column: 1 / -1; }
  .picker__times { max-height: none; height: 0; min-height: 100%; }
}

/* tunnel en étapes : tout sur un écran */
body:has(.is-steps) .page { padding-top: 1.75rem; padding-bottom: 2rem; gap: 1.5rem; }
.tunnel__main:has(.is-steps) { gap: 1.75rem; }
.tunnel__main:has(.is-steps) .intro { gap: .6rem; }
.tunnel__main:has(.is-steps) h1 { font-size: clamp(2.1rem, 1.5rem + 1.8vw, 3rem); }
.tunnel__main:has(.is-steps) .lead { font-size: 1rem; line-height: 1.5; }
.form.is-steps { gap: 1.25rem; }
.is-steps .block { gap: .9rem; }
.is-steps .block__title { padding-top: 0; margin-bottom: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.is-steps .picker.is-ready { gap: .9rem; }
.is-steps .picker__chosen { min-height: 2.25rem; }
.is-steps .picker__cal, .is-steps .picker__times { padding: .85rem; }
.is-steps .picker__day { height: 2.2rem; min-height: 2.2rem; }
.is-steps .step-actions { padding-top: .25rem; }
.steps { margin-top: .25rem; }
@media (min-width: 1000px) {
  body:has(.is-steps) .tunnel__aside { top: 5.5rem; gap: 1.25rem; }
  body:has(.is-steps) .summary { padding: 1.25rem; gap: .75rem; }
  body:has(.is-steps) .trust { gap: .8rem; }
  body:has(.is-steps) .trust__cnb { padding-top: .9rem; }
  body:has(.is-steps) .trust__cnb img { height: 88px; }
}
body:has(.is-steps) .page { padding-top: 1.25rem; }
.tunnel__main:has(.is-steps) { gap: 1.5rem; }
.form.is-steps { gap: 1rem; }
.is-steps .picker__day { height: 2.1rem; min-height: 2.1rem; }
.is-steps .picker__head { margin-bottom: .4rem; }
@container (min-width: 640px) { .is-steps .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1rem; } }
.is-steps textarea[name="objet"] { min-height: 4.75rem; }
/* L'exemple du champ tient en entier sur téléphone. */
@media (max-width: 560px) { .is-steps textarea[name="objet"] { min-height: 8.5rem; } }
.is-steps .grid + .hint { max-width: none; }
@media (min-width: 1000px) { body:has(.is-steps) .trust { gap: .6rem; } body:has(.is-steps) .trust__cnb img { height: 88px; } }
body:has(.is-steps) .page { padding-top: 3rem; }
.steps { margin: 0 0 .5rem; }
.is-steps .block__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.is-steps .block__title + * { clear: none; }
body:has(.is-steps) .page { padding-top: 2.75rem; }
.steps { margin: 0 0 .75rem; }
.picker__hour[aria-pressed="true"], .picker__hour[aria-pressed="true"]:hover:not(:disabled),
.picker__day[aria-pressed="true"], .picker__day.is-open[aria-pressed="true"]:hover { background: var(--ink); color: var(--cream); box-shadow: none; }
.picker__hour[aria-pressed="true"]:hover:not(:disabled), .picker__day.is-open[aria-pressed="true"]:hover { background: #26302b; }
.is-steps .picker__head { margin-bottom: .85rem; }

/* Choix des créneaux, façon Cal.com (21/10). Téléphone : horaires en grille sous le calendrier, sans défilement. */
.picker__times { max-height: none; overflow: visible; }
.picker__hours { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
@container (min-width: 500px) {
  /* Un seul bloc : calendrier à jours carrés à gauche, liste d'horaires à droite, à la hauteur du calendrier
     (elle défile à l'intérieur si la journée est longue). */
  .picker.is-ready { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 0; }
  .is-steps .picker__cal { border-radius: var(--radius-lg) 0 0 var(--radius-lg); padding: 1rem 1.1rem; }
  .is-steps .picker__times { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin-left: -1px; padding: 1rem .9rem;
    height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .is-steps .picker__day { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .picker__hours { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .is-steps .picker__hour { min-height: 2.6rem; }
  .picker__day-title { position: sticky; top: -1rem; z-index: 1; margin: -1rem -.9rem 0; padding: 1rem .9rem .6rem; background: var(--surface); }
}
/* Créneaux choisis : trois emplacements de même taille, remplis ou en attente (aucun saut de mise en page). */
.picker__chosen { display: grid; gap: .6rem; }
.picker__chosen .picker__tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.picker__chosen .picker__tag { height: 2.4rem; min-width: 0; justify-content: space-between; }
.picker__chosen .picker__tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__note.is-waiting { visibility: hidden; }
.picker__tag--empty { padding: 0 .85rem; background: none; box-shadow: none; border: 1px dashed var(--border-strong); color: var(--fg-subtle); }
@media (max-width: 560px) { .picker__chosen .picker__tags { grid-template-columns: minmax(0, 1fr); } }

/* Étapes sur mobile : segments + « Étape 2 sur 4 · Vos créneaux » (plus de libellés tronqués). */
.steps__now { display: none; }
@media (max-width: 560px) {
  .steps__num, .steps__label, .steps__btn[aria-current="step"] .steps__label { display: none; }
  .steps__btn { padding-top: 0; border-top-width: 3px; }
  .steps { margin-bottom: .5rem; }
  .steps__now { display: block; margin: 0 0 .75rem; font-size: var(--text-sm); color: var(--fg-muted); }
  .steps__now strong { color: var(--fg); font-weight: 500; }
}

/* Mobile : barre « Continuer » collée en bas de l'écran, qui se pose à sa place en fin d'étape. */
.step-actions__sum { display: none; }
.step-actions .btn.is-waiting { background: color-mix(in oklab, var(--ink) 55%, var(--bg)); border-color: transparent; }
@media (max-width: 760px) {
  .is-steps fieldset.block > .step-actions {
    position: sticky; bottom: 0; z-index: 5; flex-wrap: wrap; align-items: center;
    margin-inline: calc(-1 * var(--gutter)); padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .step-actions__sum { display: block; flex-basis: 100%; margin: 0 0 .1rem; font-size: var(--text-sm); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .step-actions__sum:empty { display: none; }
}

.board__more { align-self: flex-start; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem 1rem; align-items: end; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.filters .field { margin: 0; }
.filters__actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }

/* ---------------------------------------------------------------- sécurité (14/10) */
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.btns form { margin: 0; }
.setup { list-style: none; counter-reset: setup; padding: 0; margin: 2rem 0 1.5rem; display: grid; gap: 1.25rem; max-width: 40rem; }
.setup > li { counter-increment: setup; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.setup > li::before { content: counter(setup); grid-row: span 3; font-variant-numeric: tabular-nums; color: var(--fg-subtle); }
.setup > li > * { grid-column: 2; margin: 0 0 .6rem; }
.secret code { display: inline-block; padding: .6rem .8rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: 1.05rem; letter-spacing: .06em; word-spacing: .3em; overflow-wrap: anywhere; }