/*
 * Un pas pour nous — base et composants partagés (proposition du 18 octobre 2026).
 * Dépend de tokens.css. Préfixe `ui-` : aucun conflit avec les classes existantes.
 * Règles : capsule pour toute action, Bodoni uniquement en titre d'affichage (≥ 28 px),
 * pas de surtitre au-dessus des titres, pas de carte dans une carte.
 */

/* ---------- Base ---------- */
.ui-base {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: var(--leading-text);
  caret-color: var(--color-action);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ui-base *, .ui-base *::before, .ui-base *::after { box-sizing: border-box; }
/* L'attribut hidden l'emporte toujours, quel que soit le display d'un composant. */
.ui-base [hidden] { display: none !important; }

/* Base sans spécificité (:where) : tout composant la remplace sans surenchère. */
:where(.ui-base) ::selection { background: var(--color-selection); color: var(--color-text); }
:where(.ui-base) :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
:where(.ui-base a) { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
:where(.ui-base a:hover) { text-decoration-thickness: 2px; }
:where(.ui-base p) { max-width: var(--measure); }
.ui-base { scrollbar-color: var(--color-line-strong) transparent; }

.ui-container { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }

/* ---------- Typographie ---------- */
.ui-display-lg, .ui-display-md, .ui-display-sm {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.ui-display-lg { font-size: var(--display-lg); }
.ui-display-md { font-size: var(--display-md); }
.ui-display-sm { font-size: var(--display-sm); line-height: 1.15; }
.ui-display-lg em, .ui-display-md em { font-style: normal; color: var(--color-action); }

.ui-title-xl, .ui-title-lg {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ui-title-xl { font-size: var(--text-xl); }
.ui-title-lg { font-size: var(--text-lg); }

.ui-lead { font-size: clamp(var(--text-md), 1rem + .4vw, var(--text-lg)); color: var(--color-text-muted); line-height: 1.55; }
.ui-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Boutons : toujours en capsule ---------- */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: var(--weight-strong) var(--text-sm) / 1.2 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.ui-button svg { width: 20px; height: 20px; flex: none; transition: transform var(--duration-base) var(--ease-out); }
.ui-button:hover svg[data-arrow] { transform: translateX(4px); }
.ui-button--lg { min-height: var(--control-height-lg); padding-inline: var(--space-6); font-size: var(--text-md); }

.ui-button--primary { background: var(--color-action); color: var(--color-on-action); }
.ui-button--primary:hover { background: var(--color-action-hover); }
.ui-button--secondary { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.ui-button--secondary:hover { border-color: var(--color-text); }
.ui-button--quiet { background: transparent; color: var(--color-link); padding-inline: var(--space-3); }
.ui-button--quiet:hover { background: var(--color-surface-tint); }
.ui-button--inverse { background: var(--color-surface); color: var(--color-text); }
.ui-button--inverse:hover { background: var(--color-surface-warm); }
.ui-on-inverse :focus-visible { outline-color: var(--color-focus-inverse); }

.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-button[aria-busy="true"] { cursor: progress; }
.ui-button[aria-busy="true"]::after {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(1turn); } }

/* ---------- Segmenté (Solo / Duo, filtres) ---------- */
.ui-segmented { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line); }
.ui-segmented button {
  min-height: 40px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text-muted); font: var(--weight-medium) var(--text-sm) var(--font-text); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ui-segmented button:is([aria-pressed="true"], [aria-checked="true"]) { background: var(--color-surface-inverse); color: var(--color-text-inverse); }

/* ---------- Champs : compacts et sobres (demande du 19 octobre) ----------
 * 42 px de haut, libellé 14 px, texte 15 px. Sur écran tactile : 44 px et 16 px,
 * pour garder une cible confortable et éviter le zoom automatique d'iOS.
 * Le bord reste à 3,3:1 sur la surface (WCAG 1.4.11) : la sobriété vient des proportions.
 */
.ui-form { display: grid; gap: var(--space-4); }
.ui-form-row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .ui-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-field { display: grid; gap: 6px; }
.ui-field label, .ui-label { font-weight: var(--weight-strong); font-size: .875rem; letter-spacing: .005em; color: var(--color-text); }
.ui-field .ui-hint { font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); margin: 0; }
.ui-input {
  width: 100%;
  min-height: var(--field-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
select.ui-input { padding-right: var(--space-6); }
textarea.ui-input { min-height: 7rem; padding-block: 10px; resize: vertical; line-height: 1.6; }
.ui-input::placeholder { color: var(--color-text-muted); opacity: .8; }
.ui-input:hover { border-color: var(--color-text-muted); }
.ui-input:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px rgb(143 67 47 / .14); }
.ui-field[data-invalid] .ui-input, .ui-input[aria-invalid="true"] { border-color: var(--color-error); }
.ui-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgb(141 46 40 / .16); }
.ui-field .ui-error { display: flex; gap: var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--color-error); }
.ui-field .ui-error:empty { display: none; }
.ui-label-note { font-weight: var(--weight-regular); color: var(--color-text-muted); }
@media (pointer: coarse) {
  .ui-input { min-height: var(--target-min); font-size: 1rem; }
}

/* ---------- Choix (questionnaire, préférences) ---------- */
.ui-choice {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: 10px var(--space-4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); cursor: pointer;
  font-size: var(--text-sm); line-height: 1.45;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.ui-choice:hover { border-color: var(--color-text-muted); }
.ui-choice input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--color-field-border); border-radius: 50%; background: var(--color-surface); transition: border-width var(--duration-fast) var(--ease-out); }
.ui-choice input[type="checkbox"] { border-radius: 5px; }
.ui-choice input:checked { border: 5.5px solid var(--color-action); }
.ui-choice input[type="checkbox"]:checked { border-width: 9px; }
.ui-choice:has(input:checked) { border-color: var(--color-action); background: var(--color-surface-tint); }
.ui-choice:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Cartes ---------- */
.ui-card { padding: clamp(var(--space-5), 1rem + 1.5vw, var(--space-6)); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.ui-card--tint { background: var(--color-surface-tint); border-color: transparent; }
.ui-card--raised { border-color: transparent; box-shadow: var(--shadow-2); }
.ui-card > :first-child { margin-top: 0; }
.ui-card > :last-child { margin-bottom: 0; }

/* ---------- Badges ---------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1;
  background: var(--color-line); color: var(--color-text);
}
.ui-badge--info { background: var(--color-info-bg); color: var(--color-info); }
.ui-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.ui-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ui-badge--error { background: var(--color-error-bg); color: var(--color-error); }

/* ---------- Encarts d'information : fond teinté, jamais de bordure latérale épaisse ---------- */
.ui-notice { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-tint); font-size: var(--text-sm); }
.ui-notice svg { flex: none; width: 20px; height: 20px; margin-top: .15em; }
.ui-notice p { margin: 0; }
.ui-notice--success { background: var(--color-success-bg); color: var(--color-success); }
.ui-notice--error { background: var(--color-error-bg); color: var(--color-error); }
.ui-notice--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* ---------- Messages : mêmes couleurs côté client et côté conseiller ---------- */
.ui-thread { display: grid; gap: var(--space-5); }
.ui-message { display: grid; gap: var(--space-1); max-width: min(86%, 60ch); }
.ui-message__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-message__body { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.65; }
.ui-message__body p { margin: 0 0 var(--space-3); }
.ui-message__body p:last-child { margin: 0; }
.ui-message--person-one { justify-self: end; }
.ui-message--person-one .ui-message__body { background: var(--color-person-one); color: var(--color-on-person-one); border-bottom-right-radius: 4px; }
.ui-message--person-two { justify-self: end; }
.ui-message--person-two .ui-message__body { background: var(--color-person-two); color: var(--color-on-person-two); border-bottom-right-radius: 4px; }
.ui-message--advisor { justify-self: start; }
.ui-message--advisor .ui-message__body { background: var(--color-surface); border: 1px solid var(--color-line); border-bottom-left-radius: 4px; }

/* ---------- En-tête public unique ----------
 * Au repos : capsule crème pleine. Au défilement : verre sobre (crème translucide,
 * flou, filet de 1 px), pour laisser deviner la page sans perdre la lecture.
 * Sous 1160 px (sept liens ne tiennent pas en dessous), la navigation devient un panneau qui se déplie sous la capsule.
 */
.ui-header {
  position: sticky; top: var(--space-3); z-index: 20;
  display: flex; align-items: center; gap: var(--space-5);
  width: min(100% - 2 * var(--space-3), var(--header-max)); margin: var(--space-3) auto 0;
  min-height: 64px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  view-transition-name: site-header;
  transition: background-color var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), backdrop-filter var(--duration-slow) var(--ease-out);
}
.ui-header[data-scrolled], .ui-header[data-open] {
  background: var(--glass-surface);
  border-color: var(--glass-edge);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-header[data-scrolled], .ui-header[data-open] { background: var(--glass-surface-solid); }
}

.ui-header__brand { flex: none; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; font-weight: var(--weight-strong); white-space: nowrap; }
.ui-header__brand img { width: 32px; height: 32px; }

.ui-header nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.ui-header nav a:not(.ui-button) {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--text-sm); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ui-header nav a:not(.ui-button):hover { background: rgb(248 233 221 / .8); }
.ui-header nav a[aria-current="page"] { color: var(--color-link); }
.ui-header__nav-cta { display: none; }

/* Bouton menu : deux traits qui se croisent à l'ouverture */
.ui-header__menu {
  display: none; position: relative; flex: none;
  width: var(--target-min); height: var(--target-min); margin-left: auto;
  border: 1px solid var(--color-line-strong); border-radius: 50%;
  background: transparent; color: var(--color-text); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.ui-header__menu:hover { background: var(--color-surface-tint); }
.ui-header__menu span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px; margin-left: -9px;
  border-radius: 2px; background: currentColor;
  transition: transform var(--duration-slow) var(--ease-out);
}
.ui-header__menu span:first-child { transform: translateY(-4px); }
.ui-header__menu span:last-child { transform: translateY(4px); }
.ui-header__menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.ui-header__menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

@media (max-width: 1160px) {
  .ui-header { padding-left: var(--space-4); gap: var(--space-3); }
  .ui-header__menu { display: inline-block; }
  .ui-header nav {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
    display: grid; gap: 2px; margin: 0; padding: var(--space-3);
    border: 1px solid var(--glass-edge); border-radius: 24px;
    background: var(--color-surface); /* opaque : un menu se lit, il ne se devine pas */
    box-shadow: var(--shadow-3);
    visibility: hidden; opacity: 0;
    clip-path: inset(0 0 100% 0 round 24px);
    transition: clip-path var(--duration-base) var(--ease-in), opacity var(--duration-fast) linear, visibility 0s linear var(--duration-base);
  }
  .ui-header[data-open] nav {
    visibility: visible; opacity: 1;
    clip-path: inset(0 0 0 0 round 24px);
    transition: clip-path var(--duration-slow) var(--ease-out), opacity var(--duration-fast) linear, visibility 0s;
  }
  .ui-header nav a:not(.ui-button) { min-height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-lg); font-weight: var(--weight-medium); }
  .ui-header__nav-cta { display: inline-flex; margin-top: var(--space-2); min-height: var(--control-height-lg); }
  .ui-header[data-open] nav > * { animation: ui-menu-item var(--duration-slow) var(--ease-out) both; }
  .ui-header[data-open] nav > :nth-child(2) { animation-delay: 30ms; }
  .ui-header[data-open] nav > :nth-child(3) { animation-delay: 60ms; }
  .ui-header[data-open] nav > :nth-child(4) { animation-delay: 90ms; }
  .ui-header[data-open] nav > :nth-child(n+5) { animation-delay: 120ms; }
}
/* Sous 560 px, la capsule ne tient pas marque + menu + CTA : le CTA passe dans le menu. */
@media (max-width: 560px) {
  .ui-header > .ui-button { display: none; }
}
@keyframes ui-menu-item { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Hero : photo pleine largeur, texte posé dessus ----------
 * La lisibilité ne dépend pas de la photo : un voile cacao garantit au moins 72 % d'opacité
 * sous le chapeau et les boutons (texte lin ≥ 6,4:1, chapeau sable ≥ 5:1, même sur du blanc),
 * et au moins 50 % sous le titre (≥ 3:1, suffisant pour un titre de plus de 44 px).
 * La photo passe sous la capsule d'en-tête et reste calée sur son bord haut : elle n'est
 * jamais rognée en haut, seulement en bas ou sur les côtés.
 */
.ui-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: clamp(560px, 88svh, 880px);
  margin-top: calc(-1 * var(--header-space));
  padding: calc(var(--header-space) + var(--space-7)) 0 clamp(var(--space-7), 4vw + 1rem, var(--space-9));
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
}
.ui-hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.ui-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 60% 0%); display: block; }
.ui-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(28 20 16 / .8) 0%, rgb(28 20 16 / .72) 38%, rgb(28 20 16 / .28) 62%, rgb(28 20 16 / 0) 80%),
    linear-gradient(90deg, rgb(28 20 16 / .55) 0%, rgb(28 20 16 / .3) 42%, rgb(28 20 16 / 0) 68%);
}
.ui-hero__content { display: grid; gap: var(--space-5); max-width: min(100%, 50rem); }
.ui-hero__content > * { margin: 0; }
.ui-hero .ui-display-lg { color: var(--color-text-inverse); }
.ui-hero .ui-display-lg em { color: var(--color-accent-soft); }
.ui-hero__lead { max-width: 36rem; color: var(--color-text-inverse-muted); font-size: clamp(var(--text-md), 1rem + .4vw, var(--text-lg)); line-height: 1.55; }
.ui-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.ui-hero .ui-button--secondary { color: var(--color-text-inverse); border-color: rgb(255 250 245 / .55); background: rgb(255 250 245 / .06); }
.ui-hero .ui-button--secondary:hover { border-color: var(--color-text-inverse); background: rgb(255 250 245 / .14); }
.ui-hero :focus-visible { outline-color: var(--color-focus-inverse); }
@media (max-width: 760px) {
  .ui-hero { min-height: clamp(600px, 92svh, 900px); }
  .ui-hero::after {
    background: linear-gradient(to top, rgb(28 20 16 / .84) 0%, rgb(28 20 16 / .74) 52%, rgb(28 20 16 / .3) 74%, rgb(28 20 16 / 0) 90%);
  }
  .ui-hero__actions .ui-button { flex: 1 1 100%; }
}

/* ---------- Dialogue ---------- */
.ui-dialog { width: min(100% - 2 * var(--space-5), 560px); padding: var(--space-6); border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-3); }
.ui-dialog::backdrop { background: var(--backdrop); }
.ui-dialog[open] { animation: ui-dialog-in var(--duration-slow) var(--ease-out); }
.ui-dialog[open]::backdrop { animation: ui-fade-in var(--duration-slow) var(--ease-out); }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ui-fade-in { from { opacity: 0; } }

/* ---------- Mouvement ----------
 * Thèse : « se comprendre », c'est voir plus net. Le seul moment signé est l'ouverture :
 * le titre s'écrit ligne par ligne et la photo passe du flou au net.
 * Au défilement, seules les photos s'ouvrent et les listes se posent ; les titres ne bougent pas.
 * Le contenu reste visible sans JavaScript : les états cachés n'existent que sous .ui-js.
 */
.ui-button { transition-property: background-color, color, border-color, transform; }
.ui-button:active { transform: scale(.98); transition-duration: 80ms; }

/* Ouverture : lignes du titre (span.ui-line > span) et photo [data-focal-photo] */
.ui-line { display: block; overflow: clip; overflow-clip-margin: .2em; padding-bottom: .06em; margin-bottom: -.06em; }
.ui-line > span { display: block; }
.ui-js [data-focal] .ui-line > span { transform: translateY(108%); transition: transform var(--duration-focal) var(--ease-out); }
.ui-js [data-focal] .ui-line:nth-child(2) > span { transition-delay: 90ms; }
.ui-js [data-focal] .ui-line:nth-child(3) > span { transition-delay: 180ms; }
.ui-js [data-focal] [data-focal-fade] { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-reveal) var(--ease-out) 320ms, transform var(--duration-reveal) var(--ease-out) 320ms; }
.ui-js [data-focal-photo] { overflow: hidden; }
.ui-js [data-focal-photo] img { filter: blur(14px); transform: scale(1.06); transition: filter 1400ms var(--ease-out) 120ms, transform 1800ms var(--ease-out) 120ms; }
.ui-js [data-focal].is-ready .ui-line > span,
.ui-js [data-focal].is-ready [data-focal-fade] { transform: none; opacity: 1; }
.ui-js [data-focal].is-ready [data-focal-photo] img { filter: none; transform: none; }

/* Défilement : groupes [data-reveal], listes [data-reveal-list], photos [data-reveal="photo"] */
.ui-js [data-reveal]:not([data-reveal="photo"]) {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * var(--stagger));
}
.ui-js [data-reveal="photo"] { overflow: hidden; clip-path: inset(6% 4% round var(--radius-xl)); transition: clip-path 1100ms var(--ease-out); }
.ui-js [data-reveal="photo"] img { transform: scale(1.1); transition: transform 1400ms var(--ease-out); }
.ui-js [data-reveal].is-visible { opacity: 1; transform: none; }
.ui-js [data-reveal="photo"].is-visible { clip-path: inset(0 round var(--radius-xl)); }
.ui-js [data-reveal="photo"].is-visible img { transform: none; }

/* Changement de page : l'en-tête reste en place, le contenu se relaie en fondu court */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ui-page-out var(--duration-fast) var(--ease-in) both; }
::view-transition-new(root) { animation: ui-page-in var(--duration-slow) var(--ease-out) both; }
::view-transition-group(site-header) { animation-duration: var(--duration-slow); }
@keyframes ui-page-out { to { opacity: 0; } }
@keyframes ui-page-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Mouvement réduit : plus de déplacement, flou ni découpe ; les fondus restent ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-button:active { transform: none; }
  .ui-js [data-focal] .ui-line > span, .ui-js [data-focal] [data-focal-fade],
  .ui-js [data-reveal]:not([data-reveal="photo"]) { transform: none; transition: opacity 200ms linear; transition-delay: 0s; }
  .ui-js [data-focal-photo] img, .ui-js [data-reveal="photo"] img { filter: none; transform: none; transition: none; }
  .ui-js [data-reveal="photo"] { clip-path: none; opacity: 0; transition: opacity 200ms linear; }
  .ui-js [data-reveal="photo"].is-visible { opacity: 1; }
  .ui-js [data-focal] .ui-line > span { opacity: 0; }
  .ui-js [data-focal].is-ready .ui-line > span { opacity: 1; }
  .ui-header nav, .ui-header[data-open] nav, .ui-header__menu span { transition-duration: 0s; }
  .ui-header[data-open] nav > * { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; }
  .ui-dialog[open], .ui-dialog[open]::backdrop { animation: ui-fade-in 160ms linear; }
}

/* ---------- Accessibilité ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}