/* soft.css — la matière douce des formulaires (14/10/2026), chargée en dernier, après charte.css et les modules.
   Référence : un kit « soft UI ». Seul ce qui se touche est en matière douce : les champs se creusent, les
   boutons et les cases se détachent, en pilule ; la lumière vient d'en haut à gauche, l'ombre tombe en bas à
   droite. Les cartes et les panneaux restent plats et clairs (charte.css) : pas de relief sur du relief.
   L'orange reste l'action principale, le focus reste un anneau marine. */

:root {
  --soft:#eceff4;
  --soft-hi:rgba(255,255,255,.96);
  --soft-lo:rgba(15,27,41,.13);
  --soft-raise:-6px -6px 14px var(--soft-hi), 7px 7px 16px var(--soft-lo);
  --soft-raise-up:-8px -8px 18px var(--soft-hi), 10px 10px 24px rgba(15,27,41,.17);
  --soft-raise-sm:-3px -3px 7px var(--soft-hi), 4px 4px 9px rgba(15,27,41,.14);
  --soft-sink:inset 5px 5px 11px rgba(15,27,41,.11), inset -5px -5px 11px var(--soft-hi);
  --soft-sink-sm:inset 3px 3px 6px rgba(15,27,41,.13), inset -3px -3px 6px var(--soft-hi);
  --soft-ring:0 0 0 3px rgba(30,90,148,.22);
  --soft-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342526c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ——— Panneaux : les cartes restent plates et claires (la matière douce ne s'applique qu'à ce qui se touche) ——— */
.page-glyph { background:var(--soft); box-shadow:var(--soft-raise-sm); }

/* ——— Champs : creusés dans la matière, en pilule ; le focus éclaire d'un anneau marine ——— */
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]), body select, body textarea,
.brief-form textarea, .form-field select, .form-field input[type=email], .form-field input[type=text], .form-field input[type=password], .form-field textarea,
.search-field input, .select-field select, .chart-select, .member-link input, .picker-create-row input, .onb-campaign-picker select, .space-campaign select, .mapping-table select {
  border:0; border-radius:999px; padding-left:18px; padding-right:18px; background-color:var(--soft); color:var(--ink);
  box-shadow:var(--soft-sink);
  transition:box-shadow .22s var(--clay-ease), background-color .22s var(--clay-ease);
}
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]):hover, body select:hover, body textarea:hover,
.search-field input:hover, .select-field select:hover, .chart-select:hover {
  box-shadow:inset 6px 6px 12px rgba(15,27,41,.13), inset -6px -6px 12px var(--soft-hi);
}
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]):focus, body select:focus, body textarea:focus,
.search-field input:focus, .select-field select:focus, .chart-select:focus {
  outline:2px solid transparent; outline-offset:2px; background-color:var(--soft);
  box-shadow:var(--soft-sink), var(--soft-ring);
}
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button])[aria-invalid=true], body select[aria-invalid=true], body textarea[aria-invalid=true] {
  box-shadow:var(--soft-sink), 0 0 0 2px rgba(180,69,47,.55);
}
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button])[readonly] { color:var(--slate); box-shadow:var(--soft-sink-sm); }
body textarea, .brief-form textarea, .form-field textarea, .crm-form textarea, .crm-note-form textarea, .activity-form textarea { border-radius:22px; padding:14px 18px; }
/* :is() reprend la spécificité de la chaîne :not() de la règle générale, pour que ces retraits passent devant elle. */
.search-field input:is(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button])) { padding-left:48px; }
.search-field .ui-icon { left:17px; color:var(--slate); }
.password-field input:is(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button])), .input-icon input:is(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button])) { padding-right:48px; }
.password-toggle, .input-toggle { border-radius:999px; }

/* Les listes déroulantes : la même pilule, le chevron du kit à droite. */
body select, .form-field select, .select-field select, .chart-select, .onb-campaign-picker select, .space-campaign select, .mapping-table select {
  appearance:none; -webkit-appearance:none; padding-right:46px; cursor:pointer;
  background-image:var(--soft-chevron); background-repeat:no-repeat; background-position:right 17px center; background-size:16px;
}
.chart-select { padding-right:36px; background-position:right 12px center; background-size:14px; }
body select[multiple] { appearance:auto; -webkit-appearance:auto; border-radius:22px; padding-right:18px; background-image:none; }

/* Le fichier à importer : une dalle creusée, son bouton en pilule détachée. */
body input[type=file] { border:0; border-radius:22px; padding:12px 14px; background:var(--soft); color:var(--slate); box-shadow:var(--soft-sink); }
body input[type=file]:hover { border:0; box-shadow:var(--soft-sink), var(--soft-ring); }
body input[type=file]::file-selector-button { background:var(--soft); color:var(--ink); box-shadow:var(--soft-raise-sm); }

/* ——— Zone de dépôt (components/dropzone) : la dalle pointillée, l'icône clay détachée, la zone entière ouvre le sélecteur ——— */
.dropzone { position:relative; display:flex; align-items:center; gap:22px; padding:22px 26px; border:1.5px dashed var(--line-strong); border-radius:22px; background:var(--paper); color:var(--ink);
  transition:border-color .2s var(--clay-ease), background-color .2s var(--clay-ease), box-shadow .2s var(--clay-ease); }
.dropzone:hover, .dropzone.is-over { border-color:var(--orange); background:var(--orange-tint); }
.dropzone:focus-within { box-shadow:var(--soft-ring); }
.dropzone.has-file { border-style:solid; border-color:var(--green); background:var(--green-tint); }
.dropzone input[type=file] { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:22px; background:none; box-shadow:none; opacity:0; cursor:pointer; }
.dropzone input[type=file]:hover { box-shadow:none; }
.dropzone img.dropzone-clay { flex:none; box-sizing:content-box; width:52px; height:52px; padding:12px; border-radius:18px; background:#fff; box-shadow:var(--soft-raise-sm); object-fit:contain; }
.dropzone-text { display:grid; gap:3px; min-width:0; }
.dropzone-text strong { font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.dropzone-text>span { color:var(--slate); font-size:14px; }
.dropzone-text small { margin-top:6px; color:var(--ash); font-size:13px; line-height:1.5; }
.dropzone-text small:empty { display:none; }
.dropzone-chosen { margin-top:6px; color:var(--green-ink); font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.dropzone-chosen:empty { display:none; }
.dropzone-field .field-error { margin-top:8px; }
@media (max-width:640px) { .dropzone { flex-direction:column; align-items:flex-start; gap:14px; padding:18px; } }

/* ——— Boutons : la pilule qui se détache, qui s'enfonce quand on appuie ; l'orange reste l'action principale ——— */
.btn-secondary, .button.secondary, .auth-page .secondary, .kpi-nav, .rdv-outcomes .btn, .offer-card-go {
  border:0; background:var(--soft); color:var(--ink); box-shadow:var(--soft-raise);
}
.btn-secondary:hover, .button.secondary:hover, .auth-page .secondary:hover, .kpi-nav:hover, .rdv-outcomes .btn:hover {
  background:var(--soft); color:var(--ink); transform:translateY(-1px); box-shadow:var(--soft-raise-up);
}
.btn-secondary:active:not(:disabled), .button.secondary:active:not(:disabled), .rdv-outcomes .btn:active:not(:disabled) { transform:none; box-shadow:var(--soft-sink-sm); }
.rdv-outcomes .btn.is-current, .rdv-move[open] > summary { background:var(--soft); box-shadow:var(--soft-sink-sm); }
.btn-ghost { color:var(--slate); }
/* Le bouton principal : la même pilule douce que les secondaires, en orange léger (Alexis, 27/10/2026). */
.btn-primary, .button.primary, .button-primary { border:0; background:var(--orange-soft-btn); color:var(--ink); box-shadow:var(--soft-raise); }
.btn-primary:hover, .button.primary:hover, .button-primary:hover { background:var(--orange-soft-btn-hover); color:var(--ink); transform:translateY(-1px); box-shadow:var(--soft-raise-up); }
.btn-primary:active:not(:disabled), .button.primary:active:not(:disabled), .button-primary:active:not(:disabled) { transform:none; box-shadow:var(--soft-sink-sm); }
.button.primary { border:0; border-radius:999px; }
.offer-card-go { display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:999px; text-decoration:none; }

/* ——— La barre du haut : la loupe, l'espace et le compte dans la même matière que la touche ⌘K ——— */
.header-search { background:var(--soft); color:var(--slate); box-shadow:var(--soft-raise-sm); }
.header-search:hover, .header-search[aria-expanded=true] { color:var(--ink); box-shadow:var(--soft-raise); }
.header-search-key, .palette-keys kbd { background:#fff; }

/* ——— Cases et boutons radio : le disque qui se détache ; coché, il s'enfonce et montre le point ——— */
body input[type=radio], body input[type=checkbox], body .checkbox input[type=checkbox], body .stage-choice input {
  appearance:none; -webkit-appearance:none; position:relative; width:22px; height:22px; margin:0; padding:0; flex:none; cursor:pointer;
  border:0; border-radius:50%; background:var(--soft); box-shadow:var(--soft-raise-sm); accent-color:auto;
  transition:box-shadow .2s var(--clay-ease);
}
body input[type=checkbox], body .checkbox input[type=checkbox] { border-radius:8px; }
body input[type=radio]::before { content:""; position:absolute; inset:6px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(66,82,108,.55); transition:background-color .2s var(--clay-ease), box-shadow .2s var(--clay-ease); }
body input[type=radio]:checked { box-shadow:var(--soft-sink-sm); }
body input[type=radio]:checked::before { background:var(--navy-deep); box-shadow:none; }
body input[type=checkbox]::before { content:""; position:absolute; left:8px; top:4px; width:5px; height:10px; border:solid var(--navy-deep); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); opacity:0; transition:opacity .15s var(--clay-ease); }
body input[type=checkbox]:checked { box-shadow:var(--soft-sink-sm); }
body input[type=checkbox]:checked::before { opacity:1; }
body input[type=radio]:disabled, body input[type=checkbox]:disabled { cursor:default; opacity:.55; }
.checkbox { align-items:center; gap:10px; }

/* Les cases dessinées à la main (invitation, tâches) prennent la même matière. */
.radio-dot, .check-box { width:22px; height:22px; border:0; background:var(--soft); box-shadow:var(--soft-raise-sm); color:var(--navy-deep); }
.check-box { border-radius:8px; }
.radio-line input:checked+.radio-dot { border:0; background:radial-gradient(circle, var(--navy-deep) 0 5px, var(--soft) 5.5px); box-shadow:var(--soft-sink-sm); }
.check-line input:checked+.check-box { background:var(--soft); border:0; color:var(--navy-deep); box-shadow:var(--soft-sink-sm); }
.task-check { background:var(--soft); box-shadow:var(--soft-raise-sm), inset 0 0 0 1.5px rgba(66,82,108,.35); }
button.task-check:hover { box-shadow:var(--soft-raise-sm), inset 0 0 0 1.5px var(--marble), var(--soft-ring); }
.task-check.is-done { background:var(--green); box-shadow:var(--soft-sink-sm); }
.checklist-checkbox { border:0; background:var(--soft); box-shadow:var(--soft-raise-sm); }
.checklist-toggle input:disabled:not(:checked)+.checklist-checkbox { border:0; background:var(--soft); box-shadow:var(--soft-sink-sm); opacity:.7; }

/* Les choix en pilule (ce qui s'est passé, les formules) : détachés, enfoncés quand ils sont pris. */
.stage-choice { padding:0 18px; border-radius:999px; background:var(--soft); box-shadow:var(--soft-raise); }
.stage-choice:hover { box-shadow:var(--soft-raise-up); }
.stage-choice:has(input:checked) { background:var(--soft); box-shadow:var(--soft-sink); }
.choice-card { border:0; background:var(--soft); box-shadow:var(--soft-raise-sm); }
.choice-card:has(input:checked) { border:0; background:var(--soft); box-shadow:var(--soft-sink-sm), inset 0 0 0 1.5px var(--marble); }

/* ——— Les étapes : des pastilles qui se détachent, l'étape en cours reste navy ——— */
.stepper li::before { background:var(--soft); box-shadow:var(--soft-raise-sm); }
.stepper li.is-current::before { box-shadow:var(--soft-raise-sm), inset 0 1.5px 0 -.5px rgba(255,255,255,.25), inset 0 0 0 1.5px rgba(255,138,0,.55); }
.stepper li.is-done::before { background:var(--green-soft); box-shadow:var(--soft-sink-sm); }

/* ——— Jauges : la rainure creusée, le remplissage en dégradé ——— */
.progress, meter.progress { height:10px; border-radius:999px; background:var(--soft); box-shadow:var(--soft-sink-sm); overflow:hidden; }
.progress::-webkit-meter-bar { background:transparent; border:0; border-radius:999px; height:10px; }
.progress::-webkit-meter-optimum-value, .progress::-webkit-meter-suboptimum-value, .progress::-webkit-meter-even-less-good-value { background:linear-gradient(90deg, #1f5c3f, #2f8f6b 55%, #6fc7a3); border-radius:999px; }
.progress::-moz-meter-bar { background:linear-gradient(90deg, #1f5c3f, #2f8f6b 55%, #6fc7a3); border-radius:999px; }
.progress.is-blue::-webkit-meter-optimum-value, .progress.is-blue::-webkit-meter-suboptimum-value, .progress.is-blue::-webkit-meter-even-less-good-value { background:linear-gradient(90deg, #143b63, #1e5a94 50%, #4fb3d9); }
.progress.is-blue::-moz-meter-bar { background:linear-gradient(90deg, #143b63, #1e5a94 50%, #4fb3d9); }
.progress.is-orange::-webkit-meter-optimum-value, .progress.is-orange::-webkit-meter-suboptimum-value, .progress.is-orange::-webkit-meter-even-less-good-value { background:linear-gradient(90deg, #d96e00, #ff8a00 55%, #ffb04a); }
.progress.is-orange::-moz-meter-bar { background:linear-gradient(90deg, #d96e00, #ff8a00 55%, #ffb04a); }
.onboarding-progress { height:10px; border-radius:999px; background:var(--soft); box-shadow:var(--soft-sink-sm); }
.onboarding-progress::-webkit-progress-bar { background:transparent; }
.onboarding-progress::-webkit-progress-value { background:linear-gradient(90deg, #1f5c3f, #2f8f6b 55%, #6fc7a3); border-radius:999px; }
.onboarding-progress::-moz-progress-bar { background:linear-gradient(90deg, #1f5c3f, #2f8f6b 55%, #6fc7a3); border-radius:999px; }

/* ——— Les moments d'une campagne : la carte de dates de l'en-tête devient le filtre (journées, mois), cases à cocher ——— */
.moment-filter { position:relative; }
.moment-filter > summary { list-style:none; cursor:pointer; }
.moment-filter > summary::-webkit-details-marker { display:none; }
.moment-filter > summary > p { display:flex; align-items:center; gap:10px; margin:0; }
.moment-filter > summary > p .ui-icon:last-child { margin-left:auto; width:16px; height:16px; }
.moment-menu { position:absolute; z-index:20; top:calc(100% + 8px); right:0; width:100%; max-height:360px; overflow:auto; display:grid; gap:4px; padding:12px 14px;
  border-radius:var(--radius); background:var(--soft); box-shadow:var(--soft-raise); }
.moment-menu .check-line small { display:block; color:var(--text-2); font-size:12.5px; }
.moment-menu .btn { justify-self:end; margin-top:6px; }
.kpi .kpi-target { margin-left:6px; font-size:16px; font-weight:500; color:var(--text-2); }
.kpi .kpi-gauge { margin-top:10px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; font-size:13px; color:var(--text-2); }

/* Sur téléphone, l'encadré d'aide pose son bouton sous le texte plutôt qu'à côté. */
@media (max-width:640px) { .callout > div { flex:1 1 100%; } }

@media (prefers-reduced-motion:reduce) {
  .btn-secondary, .button.secondary, .stage-choice, .offer-card, body input[type=radio], body input[type=checkbox] { transition:none; }
}