/* ==========================================================================
   DeaX — parcours « Prendre rendez-vous » et « Démarrer un projet »
   Conçu mobile d'abord : grandes zones tactiles, une question par écran.
   ========================================================================== */
.flow-page { padding: clamp(104px, 13vw, 150px) 0 clamp(56px, 8vw, 110px); min-height: 100vh; min-height: 100svh; }
.flow-shell { max-width: 860px; }
.flow-intro { display: grid; gap: var(--space-s); margin-bottom: var(--space-l); }
.flow-intro .page-hero__crumb { margin-bottom: 0; }
.flow-intro__title { font-family: var(--f-display); font-weight: 750; font-size: clamp(2.2rem, 7vw, 4rem); line-height: .95; letter-spacing: -.04em; font-variation-settings: "wdth" 86; }
.flow-intro__lead { color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 34rem; }

/* Barre de progression (collante) */
.flow__bar { position: sticky; top: 82px; z-index: 20; display: flex; align-items: center; gap: var(--space-s); min-height: 52px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); margin-bottom: var(--space-l); transition: top var(--dur) var(--ease); }
html:has(.site-header.is-hidden) .flow__bar { top: 12px; }
.flow__back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; background: rgba(18, 23, 34, .06); }
.flow__back svg { width: 16px; height: 16px; }
.flow__back[hidden] { display: none; }
.flow__back[hidden] + .flow__label { padding-left: 10px; }
.flow__label { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.flow__track { flex: 1; height: 4px; border-radius: 4px; background: rgba(18, 23, 34, .1); overflow: hidden; min-width: 40px; }
.flow__track i { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease); }

/* Étapes */
.flow__form { display: block; }
.flow__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-m); }
.flow__step[hidden] { display: none; }
.flow__step.is-active { animation: flow-in var(--dur) var(--ease); }
@keyframes flow-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.flow__title { font-family: var(--f-display); font-weight: 720; font-size: clamp(1.6rem, 4.6vw, 2.5rem); line-height: 1.02; letter-spacing: -.03em; font-variation-settings: "wdth" 90; outline: none; }
.flow__recap { font-weight: 600; font-size: .92rem; color: var(--orange-deep); }
.flow__recap:empty { display: none; }
.flow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); padding-top: var(--space-xs); }
.flow__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.flow__fields .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .flow__fields { grid-template-columns: 1fr; gap: var(--space-s); } }

/* Cartes de choix (radio accessibles) */
.choice-card { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.choice-card input, .chips input, .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-card > span { display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--r-m); background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur-fast), transform var(--dur) var(--ease), background var(--dur-fast); }
.choice-card b { font-weight: 650; font-size: 1.08rem; }
.choice-card small { color: var(--ink-2); font-size: .9rem; }
.choice-card:hover > span { box-shadow: 0 0 0 1px var(--line-strong), 0 16px 30px -24px rgba(18, 23, 34, .5); transform: translateY(-2px); }
.choice-card input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.choice-card input:checked + span { box-shadow: 0 0 0 2px var(--orange); background: #fff; }
.choice-card:active > span { transform: scale(.985); }
.choices { display: grid; gap: var(--space-s); }
.choices--list .choice-card > span { grid-template-columns: 1fr auto; grid-template-areas: "t a" "s a"; align-items: center; column-gap: var(--space-s); padding-right: 16px; }
.choices--list .choice-card > span::after { content: ""; grid-area: a; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow var(--dur-fast); }
.choices--list .choice-card input:checked + span::after { box-shadow: inset 0 0 0 7px var(--orange); }
.choices--list .choice-card b { grid-area: t; }
.choices--list .choice-card small { grid-area: s; }
.choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card--visual > span { padding: 8px 8px 16px; gap: 4px; }
.choice-card--visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-s); margin-bottom: 8px; background: var(--screen-2); }
.choice-card--visual b, .choice-card--visual small { padding-inline: 8px; }
@media (max-width: 520px) {
  .choices--grid { gap: 10px; }
  .choice-card--visual > span { padding: 6px 6px 12px; }
  .choice-card--visual b { font-size: 1rem; }
  .choice-card--visual small { font-size: .82rem; }
}

/* Questions : pastilles */
.q { display: grid; gap: 10px; }
.q__label { font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.q-group { display: grid; gap: var(--space-m); }
.q-group[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 560; font-size: .95rem; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.chips label:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.chips input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Contrôle segmenté (appel / visio) */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: rgba(18, 23, 34, .06); justify-self: start; }
.seg label { cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem; color: var(--ink-2); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.seg svg { width: 18px; height: 18px; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -2px rgba(18, 23, 34, .25); }
.seg input:focus-visible + span { outline: 2px solid var(--orange); }

/* Calendrier */
.cal { padding: clamp(14px, 3vw, 24px); border-radius: var(--r-l); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-s); }
.cal__month { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; text-transform: capitalize; }
.cal__nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background var(--dur-fast), color var(--dur-fast); }
.cal__nav svg { width: 18px; height: 18px; }
.cal__nav:hover:not(:disabled) { background: var(--ink); color: #fff; box-shadow: none; }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { text-align: center; font-size: .75rem; font-weight: 600; color: var(--ink-3); padding: 4px 0 6px; }
.cal__day { aspect-ratio: 1; max-height: 52px; width: 100%; border-radius: var(--r-s); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--screen); transition: background var(--dur-fast), color var(--dur-fast); }
.cal__day:hover:not(:disabled) { background: var(--ink); color: #fff; }
.cal__day:disabled { background: none; color: var(--ink-3); opacity: .45; cursor: default; }
.cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--orange); }
.cal__day.is-selected { background: var(--orange); color: var(--ink); box-shadow: none; }
.cal__slots { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); display: grid; gap: var(--space-s); animation: flow-in var(--dur) var(--ease); }
.cal__slots[hidden] { display: none; }
/* Date choisie : le sélecteur se replie en un résumé compact (« Modifier » le rouvre) */
.cal__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; animation: flow-in var(--dur) var(--ease); }
.cal__summary[hidden] { display: none; }
.cal__summary p { display: grid; gap: 2px; min-width: 0; }
.cal__summary small { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.cal__summary b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.cal__summary b::first-letter { text-transform: uppercase; }
.cal__edit { flex: none; height: 38px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.cal__edit:hover { background: var(--ink); color: #fff; box-shadow: none; }
.cal:not(.is-folded) .cal__summary:not([hidden]) { margin-bottom: var(--space-s); padding-bottom: var(--space-s); border-bottom: 1px solid var(--line); }
.cal__picker { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--ease), opacity 200ms var(--ease), visibility 0s; }
.cal__picker > div { min-height: 0; overflow: hidden; padding: 3px; margin: -3px; }
.cal.is-folded .cal__picker { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 280ms var(--ease), opacity 200ms var(--ease), visibility 0s 280ms; }
@media (prefers-reduced-motion: reduce) { .cal__picker, .cal.is-folded .cal__picker { transition: none; } }
.cal__periods { display: grid; gap: var(--space-s); }
.cal__empty { color: var(--ink-2); font-size: .95rem; }

.flow__note { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(31, 157, 99, .1); color: #11754a; font-weight: 600; font-size: .9rem; }
.flow__note svg { width: 16px; height: 16px; }
.cal.is-invalid { box-shadow: 0 0 0 2px #d6452e; }

/* Offre de pré-démo après envoi */
.demo-skipped { display: grid; gap: 14px; }
/* Confirmation */
.flow__done { justify-items: start; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-l); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.flow__badge { width: 56px; height: 56px; border-radius: var(--r-m); background: var(--ok); color: #fff; display: grid; place-items: center; }
.flow__badge svg { width: 28px; height: 28px; }

/* TimeSlotPicker : une période à la fois, créneaux compacts */
.cal__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-s); background: rgba(18, 23, 34, .06); }
.cal__tab { display: grid; gap: 1px; justify-items: center; padding: 8px 6px; border-radius: 10px; color: var(--ink-2); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.cal__tab b { font-weight: 650; font-size: .92rem; }
.cal__tab small { font-size: .74rem; font-variant-numeric: tabular-nums; opacity: .8; }
.cal__tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -3px rgba(18, 23, 34, .3); }
.cal__slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; margin-top: 10px; animation: slot-in var(--dur) var(--ease); }
@keyframes slot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cal__slot { height: 40px; border-radius: 10px; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease); }
.cal__slot:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal__slot:active { transform: scale(.95); }
.cal__slot.is-selected { background: var(--orange); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(194, 79, 0, .9); animation: slot-pick var(--dur) var(--ease); }
@keyframes slot-pick { 40% { transform: scale(1.06); } }
@media (max-width: 400px) { .cal__grid { gap: 3px; } .cal__day { border-radius: var(--r-xs); font-size: .9rem; } .cal__slot-grid { grid-template-columns: repeat(4, 1fr); } .cal__tab small { font-size: .68rem; } }

/* Format à trois choix (page Rendez-vous) */
.seg--3 { max-width: 100%; }
.seg i { font-style: normal; }
.seg__short { display: none; }
@media (max-width: 600px) { .seg__full { display: none; } .seg__short { display: inline; } }
@media (max-width: 380px) { .seg--3 svg { display: none; } }
@media (max-width: 420px) { .seg--3 { display: grid; grid-template-columns: repeat(3, auto); width: 100%; } .seg--3 span { justify-content: center; padding: 0 8px; gap: 6px; font-size: .88rem; white-space: nowrap; } }
.flow-alt { margin-top: var(--space-l); color: var(--ink-2); text-align: center; }

/* Confirmation centrée */
.flow__done--center { justify-items: center; text-align: center; gap: var(--space-m); padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 56px); }
.flow__done--center .flow__title { margin-top: 4px; }
.flow__done-text { color: var(--ink-2); max-width: 32rem; }
.flow__done--center .btn-row { justify-content: center; }

/* Pré-démo gratuite : surface en verre, bordure accent discrète */
.demo-offer { width: min(100%, 460px); display: grid; justify-items: center; gap: 12px; margin-top: var(--space-s); padding: clamp(22px, 4vw, 32px); border-radius: var(--r-l); text-align: center;
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 247, 240, .8)); box-shadow: var(--glass-shadow), 0 0 0 1.5px rgba(255, 122, 26, .45); }
.demo-offer__mark { display: grid; gap: 4px; width: 46px; padding: 8px; border-radius: 12px; background: var(--ink); }
.demo-offer__mark i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.demo-offer__mark i:first-child { width: 60%; background: var(--orange); }
.demo-offer__mark i:last-child { width: 80%; }
.demo-offer__title { font-family: var(--f-display); font-weight: 780; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1; letter-spacing: -.035em; font-variation-settings: "wdth" 84; }
.demo-offer p { color: var(--ink-2); font-weight: 550; }
.demo-offer .btn-row { justify-content: center; margin-top: 4px; }
.demo-skipped { justify-items: center; }
.flow__recap { text-wrap: balance; }