/* =====================================================================
   Effets, profondeur et composants introduits en v1.4.0
   ---------------------------------------------------------------------
   Cette feuille se charge APRÈS components.css et AVANT le thème
   administrable. Elle n'écrit aucune couleur en dur : tout dérive des
   jetons, si bien qu'un changement de palette dans l'administration
   entraîne les dégradés, les voiles et les ombres avec lui.

   RÈGLE TENUE PARTOUT ICI — toute animation est encadrée par
   `prefers-reduced-motion`. Un mouvement non désiré n'est pas qu'une
   coquetterie désagréable : il déclenche nausées et migraines chez les
   personnes sujettes au mal des transports, et ce produit s'adresse
   précisément à des patients.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Profondeur des surfaces                                          */
/* ------------------------------------------------------------------ */

.card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Le relief au survol ne s'applique qu'aux cartes réellement cliquables :
   soulever une carte inerte promet une interaction qui n'existe pas. */
.card--interactive:hover,
.card--interactive:focus-within,
a.card:hover,
a.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

.card--gradient {
  background: var(--gradient-surface);
}

/* Filet de couleur en tête de carte, pour distinguer les familles
   d'information sans recourir à un aplat qui écraserait le texte. */
.card--accented { position: relative; overflow: hidden; }
.card--accented::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-accent);
}
.card--accented.card--primary::before { background: var(--gradient-brand); }

/* ------------------------------------------------------------------ */
/* 2. Bandeau de tête translucide                                      */
/* ------------------------------------------------------------------ */

.site-header--glass {
  background: var(--glass-bg);
  border-bottom: 1px solid var(--color-border);
}

/* `backdrop-filter` n'est appliqué que là où il est réellement pris en
   charge : ailleurs, le fond opaque ci-dessus reste parfaitement lisible. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header--glass {
    -webkit-backdrop-filter: saturate(1.6) blur(var(--glass-blur));
    backdrop-filter: saturate(1.6) blur(var(--glass-blur));
  }
}

.site-header--scrolled { box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------------ */
/* 3. Héros                                                            */
/* ------------------------------------------------------------------ */

.hero--visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-brand);
  color: #fff;
}

.hero--visual .hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero--visual .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le contraste du texte ne doit rien devoir au hasard d'une photo
     claire ou sombre : le voile ci-dessous s'en charge, l'image est
     volontairement désaturée pour ne pas concurrencer les couleurs de
     marque. */
  filter: saturate(0.92) contrast(1.02);
}

.hero--visual .hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(8, 27, 46, 0.94) 0%, rgba(8, 27, 46, 0.72) 46%, rgba(8, 27, 46, 0.34) 100%),
    var(--gradient-veil);
}

.hero--visual h1,
.hero--visual .hero__intro { color: #fff; }
.hero--visual .hero__intro { color: rgba(255, 255, 255, 0.92); }

/* Halo diffus, purement décoratif, qui donne de la profondeur au dégradé. */
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(238, 123, 43, 0.34) 0%, rgba(238, 123, 43, 0) 68%);
  top: -18rem;
  right: -14rem;
}

/* ------------------------------------------------------------------ */
/* 4. Apparition à la lecture                                          */
/* ------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Filet de sécurité : si le script d'observation ne tourne pas — erreur,
   navigateur ancien, JavaScript partiellement chargé — le contenu doit
   rester visible. Une animation ratée ne doit jamais effacer une page. */
.no-js .reveal,
.reveal--immediate { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* 5. Boutons                                                          */
/* ------------------------------------------------------------------ */

.btn {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn--primary { box-shadow: var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--gradient {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
}
.btn--gradient:hover { filter: brightness(1.06); }

/* ------------------------------------------------------------------ */
/* 6. Champ d'adresse (liste de choix nationale)                       */
/* ------------------------------------------------------------------ */

.address-field__control { position: relative; }

.address-field__list {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  max-height: 19rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}

.address-field__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-radius: var(--radius-button);
  cursor: pointer;
}

/* L'option courante est marquée par un aplat ET par un liseré : la couleur
   seule ne suffit pas pour qui la distingue mal. */
.address-field__option.is-active,
.address-field__option:hover {
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.address-field__option-main { font-weight: 600; }
.address-field__option-meta { font-size: var(--size-sm); color: var(--color-muted); }

.address-field__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  color: var(--color-muted);
}
.address-field__source svg { width: 14px; height: 14px; }

.address-field__notice {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-soft);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
}

.address-field__spinner {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--space-3);
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: mt-spin 720ms linear infinite;
}

@keyframes mt-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* 7. Dossier de justificatifs                                         */
/* ------------------------------------------------------------------ */

.dossier { display: grid; gap: var(--space-3); }

.dossier__piece {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.dossier__piece--missing { border-color: var(--color-warning); background: var(--color-warning-soft); }
.dossier__piece--pending { border-color: var(--color-info); background: var(--color-info-soft); }
.dossier__piece--approved { border-color: var(--color-success); background: var(--color-success-soft); }

.dossier__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid currentcolor;
}
.dossier__piece--missing .dossier__mark { color: var(--color-warning); }
.dossier__piece--pending .dossier__mark { color: var(--color-info); }
.dossier__piece--approved .dossier__mark { color: var(--color-success); }
.dossier__mark svg { width: 14px; height: 14px; }

.dossier__body { min-width: 0; }
.dossier__name { font-weight: 640; }
.dossier__hint { font-size: var(--size-sm); color: var(--color-muted); }

/* « Où est-ce que je trouve ça ? » — la question qui suit immédiatement
   « qu'est-ce qu'on me demande ? ». Le lien est traité comme une action
   discrète : visible, mais il ne dispute pas la vedette au dépôt de la
   pièce, qui reste le geste attendu sur cet écran. */
.dossier__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: var(--size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.dossier__source:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
  color: var(--color-primary-dark);
}
.dossier__source svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* La flèche avance au survol : elle annonce qu'on quitte le site. */
.dossier__source svg:last-child { transition: transform var(--transition-fast); }
.dossier__source:hover svg:last-child { transform: translateX(2px); }

/* Sans adresse, la même information reste écrite, mais sans promettre un
   clic : « demandez-la à votre assureur » n'est pas un lien. */
.dossier__source--plain {
  background: transparent;
  padding-inline: 0;
  color: var(--color-muted);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .dossier__source,
  .dossier__source svg:last-child { transition: none; }
  .dossier__source:hover svg:last-child { transform: none; }
}

.dossier__progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}
.dossier__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  transition: width var(--transition);
}

/* ------------------------------------------------------------------ */
/* 8. Tarifs et moyens de paiement                                     */
/* ------------------------------------------------------------------ */

.plan-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.plan-card { display: flex; flex-direction: column; gap: var(--space-3); }
.plan-card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.plan-card__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plan-card__amount { font-size: var(--size-3xl); font-weight: 720; line-height: 1; color: var(--color-primary); }
.plan-card__period { color: var(--color-muted); font-size: var(--size-sm); }
.plan-card__struck { color: var(--color-muted); text-decoration: line-through; }

.plan-card__saving {
  align-self: flex-start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--size-sm);
  font-weight: 640;
}

/* Sélecteur « sans engagement / engagement 12 mois ». */
.cycle-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.cycle-switch__option {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.cycle-switch__option[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
}

.payment-methods { display: grid; gap: var(--space-3); }

.payment-method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  text-align: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.payment-method:hover:not(:disabled) {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.payment-method:disabled { opacity: 0.55; cursor: not-allowed; }
.payment-method__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-button);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.payment-method__mark svg { width: 22px; height: 22px; }
.payment-method__body { min-width: 0; }
.payment-method__name { font-weight: 640; }
.payment-method__hint { font-size: var(--size-sm); color: var(--color-muted); }

/* ------------------------------------------------------------------ */
/* 9. Illustrations des pages d'accueil                                */
/* ------------------------------------------------------------------ */

.figure-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--color-primary-soft);
}
.figure-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 640ms cubic-bezier(0.2, 0, 0.2, 1);
}
.figure-card:hover img { transform: scale(1.035); }

.figure-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  color: #fff;
  background: var(--gradient-veil);
}
.figure-card__caption strong { display: block; font-size: var(--size-lg); }
.figure-card__caption span { font-size: var(--size-sm); color: rgba(255, 255, 255, 0.9); }

/* ------------------------------------------------------------------ */
/* 10. Mouvement réduit                                                */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .card,
  .btn,
  .payment-method,
  .figure-card img,
  .reveal {
    transition: none !important;
    animation: none !important;
  }
  .card--interactive:hover,
  a.card:hover,
  .btn--primary:hover,
  .payment-method:hover:not(:disabled),
  .figure-card:hover img {
    transform: none;
  }
  .reveal { opacity: 1; }
  .address-field__spinner { animation: none; border-top-color: var(--color-border-strong); }
}

/* ------------------------------------------------------------------ */
/* 11. Contraste renforcé                                              */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
  .hero--visual .hero__veil { background: rgba(8, 27, 46, 0.95); }
  .card, .payment-method, .dossier__piece { border-width: 2px; }
  .site-header--glass {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ------------------------------------------------------------------ */
/* 12. Héros enrichi (v1.4.0)                                          */
/* ------------------------------------------------------------------ */

/* L'accueil manquait de profondeur : un aplat clair, un titre, une image.
   On ajoute trois couches de dégradé très diffuses et un liseré de bas de
   section. Tout reste clair — le texte garde son contraste d'origine — mais
   la page cesse d'être plate. */
.hero {
  overflow: hidden;
  background:
    radial-gradient(64% 58% at 84% -6%, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 64%),
    radial-gradient(52% 48% at 4% 6%, color-mix(in srgb, var(--color-accent) 11%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-primary-tint, var(--color-bg)) 100%);
}

[data-site="taxi"] .hero {
  background:
    radial-gradient(64% 58% at 84% -6%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 64%),
    radial-gradient(52% 48% at 4% 6%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-primary-tint, var(--color-bg)) 100%);
}

/* Repli pour les navigateurs sans `color-mix` : les teintes douces du thème
   font le même travail, en moins nuancé. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hero {
    background:
      radial-gradient(64% 58% at 84% -6%, var(--color-primary-soft) 0%, transparent 64%),
      linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  }
}

/* Trait de séparation dégradé, qui remplace la bordure nette. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
}

.hero__media {
  position: relative;
  box-shadow:
    0 2px 6px rgba(8, 27, 46, 0.06),
    0 28px 60px -28px rgba(8, 27, 46, 0.42);
}

/* Reflet oblique très léger sur le visuel : donne l'impression d'une
   surface, pas d'un aplat collé. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%);
}

.hero__eyebrow {
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}
[data-site="taxi"] .hero__eyebrow {
  background: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* Le surlignage du mot mis en avant devient un dégradé : plus vivant que
   l'aplat, et toujours derrière le texte. */
.hero__title em::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-cta) 26%, transparent),
    color-mix(in srgb, var(--color-cta) 8%, transparent));
  height: 0.26em;
}

/* ------------------------------------------------------------------ */
/* 13. Sections alternées                                              */
/* ------------------------------------------------------------------ */

/* Une page d'accueil entièrement sur le même fond se lit comme un seul bloc.
   Une section sombre au milieu découpe le récit et met en valeur ce qui
   suit. */
.section--deep {
  background: var(--gradient-brand);
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep strong { color: #fff; }
.section--deep p,
.section--deep .muted,
.section--deep .hero__intro { color: rgba(255, 255, 255, 0.86); }
.section--deep .card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.section--deep .card .muted { color: rgba(255, 255, 255, 0.8); }

.section--tinted { background: var(--color-primary-tint, var(--color-bg)); }

/* Les cartes d'une même grille tarifaire s'alignent : sans cette réserve,
   la seule carte portant le bandeau « le plus choisi » décale son titre et
   son prix, et l'œil ne peut plus comparer les montants d'une ligne. */
.plan-card > .badge { align-self: flex-start; }
.plan-grid .plan-card::after { content: ''; flex: 1 0 auto; }
.plan-card .btn { margin-top: var(--space-4); }

/* ------------------------------------------------------------------ */
/* 14. Téléphone : barre utilitaire compacte                           */
/* ------------------------------------------------------------------ */

/* Connecté, la barre du haut porte quatre actions — langue, notifications,
   « Mon espace », « Se déconnecter ». Sur un écran de 390 points, la
   dernière sortait du cadre et devenait inatteignable. Sous 620 points, les
   libellés s'effacent au profit des seules icônes : les boutons gardent
   leur nom accessible (`aria-label` posé par `button()`), le lecteur
   d'écran continue donc de les annoncer correctement, et la cible tactile
   reste au-dessus du minimum de 44 points. */
@media (max-width: 620px) {
  .header-actions .btn--sm .btn__label,
  .header-actions .btn--quiet .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .header-actions .btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding-inline: var(--space-2);
  }

  /* Les boutons d'en-tête qui ne sont ni compacts ni discrets gardent leur
     libellé. Les autres sont réduits à leur icône — ce qui suppose qu'ils en
     aient une : un bouton sans icône dont on efface le texte devient un
     rectangle vide. C'est pourquoi « Se connecter » et « Créer un compte »
     en portent une (voir layout.js). */
  .header-actions .btn:not(.btn--sm):not(.btn--quiet) .btn__label,
  .header-actions .btn--primary .btn__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }

  /*
   * DÉFAUT CORRIGÉ (v1.9.1) — « TAXI · VTC » était coupé en « TAXI · V ».
   *
   * Deux feuilles se contredisaient. `layout.css` fait passer le sélecteur de
   * service sur sa PROPRE LIGNE sous 900 px (`flex: 1 1 100%`), ce qui
   * suppose que la barre puisse revenir à la ligne. Celle-ci lui imposait
   * `nowrap` et `overflow: hidden` : la ligne ne se formait jamais, et le
   * libellé du second service était rogné en plein mot.
   *
   * Un nom de service tronqué n'est pas un détail d'esthétique : c'est le
   * bouton qui fait passer d'un site à l'autre, et il devient illisible.
   * On laisse donc la barre se répartir sur deux lignes, ce qu'elle était
   * déjà censée faire.
   */
  .utility-bar__inner { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

  .service-switch { min-width: 0; }
  .service-switch__item {
    padding-inline: 10px;
    min-width: 0;
    /* Dernier rempart : si le libellé dépassait malgré tout, il se termine
       par des points de suspension — une marque visible de coupure — au lieu
       d'être sectionné net au bord de la pastille. */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Garde-fou général : aucune page ne défile horizontalement sur téléphone.
   Les débordements légitimes (tableaux larges, agenda) restent possibles,
   mais confinés à leur propre conteneur défilant. */
@media (max-width: 720px) {
  html { overflow-x: hidden; }
  .table-wrap,
  .workspace-nav,
  .steps { max-width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 15. Téléphone : formulaires et listes                               */
/* ------------------------------------------------------------------ */

@media (max-width: 620px) {
  /* Les champs passent à 16px : en dessous, iOS zoome automatiquement à la
     prise de focus et casse la mise en page. */
  .input, .select, .textarea { font-size: 16px; }

  .field-row { grid-template-columns: 1fr; }

  /* La liste d'adresses occupe toute la largeur utile et se limite en
     hauteur pour ne pas recouvrir le clavier virtuel. */
  .address-field__list { max-height: 15rem; }

  .plan-grid { grid-template-columns: 1fr; }
  .dossier__piece { padding: var(--space-3); }

  /* Un bouton d'action principale se prend au pouce : pleine largeur. */
  .card .btn--block,
  form .btn[type="submit"] { min-height: 48px; }
}

/* ------------------------------------------------------------------ */
/* 16. Cadres d'image au rapport de la photographie                    */
/* ------------------------------------------------------------------ */

/* DÉFAUT CORRIGÉ — « les images ne sont pas entières et centrées ».
   Les cadres du site imposaient une HAUTEUR FIXE (200 points pour une carte).
   Une photographie 4/3 y entrait par la force, donc coupée : têtes tranchées,
   pieds hors champ. Le cadre prend désormais le rapport déclaré par
   l'emplacement, la hauteur se déduit de la largeur disponible, et l'image
   tient tout entière quelle que soit la taille de l'écran. */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--color-primary-soft);
  /* Le rapport est posé en style en ligne par mediaFrame(). */
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Image montrée en entier : centrée, jamais rognée. Avec une photographie au
   même rapport que son cadre — c'est le cas ici — aucune marge n'apparaît. */
.media-frame[data-media-fit="contain"] img {
  object-fit: contain;
  object-position: center;
}

.media-frame[data-media-fit="cover"] img { object-fit: cover; }

/* Dans une carte, le cadre remonte sous les coins arrondis du haut et perd
   sa hauteur fixe d'origine. */
.card__media--framed {
  height: auto;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}

/* Le héros conserve son ombre et ses coins, mais le rapport lui vient de
   l'emplacement — posé en style en ligne, qui l'emporte sur layout.css. */
.media-frame.hero__media { height: auto; }

/* ------------------------------------------------------------------ */
/* 17. Champs : réaction à l'approche du pointeur                      */
/* ------------------------------------------------------------------ */

/* Le script `field-proximity.js` pose `data-proximite` et la variable
   `--proximite` (0 au loin, 1 au contact) sur chaque champ dont le pointeur
   s'approche. Tout ce qui suit n'est qu'une lecture de cette variable.

   RÈGLE TENUE — rien ne bouge. Les transitions portent sur la couleur et
   l'ombre, jamais sur la position ni la taille. Un champ qui se déplacerait
   à l'approche du pointeur serait plus DIFFICILE à viser, pas plus facile :
   c'est l'erreur classique des effets décoratifs, et elle pénalise d'abord
   les personnes dont le geste est peu assuré. */

.field,
.address-field,
.checkbox,
.radio-group {
  --proximite: 0;
}

.field .input,
.field .select,
.field .textarea,
.address-field .input {
  transition:
    border-color 220ms cubic-bezier(0.2, 0, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0, 0.2, 1),
    background-color 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* La bordure se teinte progressivement, et un halo apparaît. Les deux sont
   proportionnels à la proximité : l'effet PRÉCÈDE le survol au lieu de
   surgir d'un coup quand le pointeur entre dans le champ. */
[data-proximite] .input,
[data-proximite] .select,
[data-proximite] .textarea {
  border-color: color-mix(
    in srgb,
    var(--color-primary) calc(var(--proximite) * 55%),
    var(--color-border));
  box-shadow:
    0 0 0 calc(var(--proximite) * 3px)
      color-mix(in srgb, var(--color-primary) calc(var(--proximite) * 12%), transparent),
    0 calc(var(--proximite) * 6px) calc(var(--proximite) * 16px)
      calc(var(--proximite) * -6px)
      color-mix(in srgb, var(--color-deep) calc(var(--proximite) * 28%), transparent);
}

/* Le libellé se colore lui aussi : sur un formulaire dense, c'est lui qu'on
   lit, pas la bordure. */
[data-proximite] .field__label {
  color: color-mix(
    in srgb,
    var(--color-primary) calc(var(--proximite) * 85%),
    var(--color-text));
  transition: color 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Le repère de focus clavier reste prioritaire et inchangé : cet effet
   s'adresse à la souris, il ne doit pas brouiller la navigation au clavier. */
.field .input:focus-visible,
.field .select:focus-visible,
.field .textarea:focus-visible,
.address-field .input:focus-visible {
  box-shadow: none;
}

/* Cases à cocher et groupes de boutons radio : même logique, appliquée au
   fond plutôt qu'à une bordure, qu'ils n'ont pas. */
[data-proximite].checkbox,
[data-proximite] .checkbox__box {
  transition: background-color 220ms cubic-bezier(0.2, 0, 0.2, 1),
              border-color 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
[data-proximite] .checkbox__box {
  border-color: color-mix(
    in srgb,
    var(--color-primary) calc(var(--proximite) * 50%),
    var(--color-border));
}

/* Repli pour les navigateurs sans `color-mix` : un survol franc, sans
   dégradé de proximité. Le formulaire reste parfaitement utilisable. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  [data-proximite] .input,
  [data-proximite] .select,
  [data-proximite] .textarea {
    border-color: var(--color-border-strong);
    box-shadow: none;
  }
  [data-proximite] .field__label { color: var(--color-text); }
}

/* Mouvement réduit : le script ne s'installe même pas, mais la feuille le
   dit aussi — une future modification du script ne doit pas pouvoir
   réintroduire l'effet en douce. */
@media (prefers-reduced-motion: reduce) {
  [data-proximite] .input,
  [data-proximite] .select,
  [data-proximite] .textarea,
  [data-proximite] .field__label,
  [data-proximite] .checkbox__box {
    transition: none !important;
    box-shadow: none;
  }
}

/* Écrans tactiles : aucun curseur, donc aucune approche. */
@media (pointer: coarse) {
  [data-proximite] .input,
  [data-proximite] .select,
  [data-proximite] .textarea { box-shadow: none; }
}

/* ------------------------------------------------------------------ */
/* 18. Inscription guidée : une question à la fois                     */
/* ------------------------------------------------------------------ */

/* Le parcours d'inscription n'est pas un formulaire habillé : sa mise en
   page obéit à une règle unique — à tout instant, UNE SEULE chose est
   demandée, et elle occupe le haut de l'écran. Tout le reste (avancement,
   aide, boutons) se range autour d'elle sans lui disputer l'attention.

   Conséquence assumée : ces écrans sont volontairement peu denses. Sur un
   téléphone, la question et son champ tiennent au-dessus du clavier, ce qui
   est le seul critère qui compte pour un formulaire d'inscription mobile. */

.wizard {
  display: grid;
  gap: var(--space-5);
}

/* Avancement — « Étape 3 sur 7 » et une barre.
   Le NOMBRE est écrit, pas seulement dessiné : une barre seule ne dit pas
   combien il reste, et elle est invisible pour un lecteur d'écran. */
.wizard__progress {
  display: grid;
  gap: var(--space-2);
}

.wizard__count {
  margin: 0;
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.wizard__bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  overflow: hidden;
}

.wizard__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transition: width 420ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* La question. C'est un vrai titre de niveau 1 : l'écran ne parle que
   d'elle, et elle reçoit le focus par programme à chaque changement d'étape
   pour que les lecteurs d'écran repartent du bon endroit.

   AUCUN REPÈRE DE FOCUS ICI, volontairement. Le titre n'est pas un contrôle :
   on ne l'active pas, on ne le quitte pas au clavier. Un cadre bleu autour de
   la question à chaque étape ressemblerait à un champ en erreur — et le
   repère de focus perdrait sa signification là où il compte vraiment, sur les
   boutons et les champs. */
.wizard__question {
  margin: 0;
  font-size: var(--size-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-deep);
}

.wizard__question:focus,
.wizard__question:focus-visible {
  /* L'anneau de focus du socle est un `box-shadow`, pas un `outline` : le
     neutraliser demande donc d'annuler l'ombre, et pas seulement le contour.
     Sans cela, chaque changement d'étape entourait la question d'un cadre
     bleu qui ressemblait à un champ en erreur. */
  outline: none;
  box-shadow: none;
}

.wizard__hint {
  margin: calc(var(--space-3) * -1) 0 0;
  font-size: var(--size-sm);
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 58ch;
}

/* Boutons de navigation : « Précédent » à gauche, « Continuer » à droite.
   `space-between` avec un `<span>` vide quand il n'y a pas de retour, afin
   que « Continuer » reste à la même place d'une étape à l'autre — un bouton
   qui saute d'un bord à l'autre oblige à le rechercher à chaque écran. */
.wizard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

/* Choix du rôle : trois grandes cibles, pas un menu déroulant. */
.choice-grid {
  display: grid;
  gap: var(--space-3);
}

.choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.choice-card:hover,
.choice-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  background: var(--color-primary-tint);
}

.choice-card[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.choice-card[aria-pressed='true'] .choice-card__mark {
  background: var(--color-primary);
  color: #fff;
}

.choice-card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.choice-card__title {
  font-weight: 650;
  font-size: var(--size-md);
  color: var(--color-deep);
}

.choice-card__hint {
  font-size: var(--size-sm);
  line-height: 1.45;
  color: var(--color-muted);
}

.choice-card > svg:last-child {
  color: var(--color-muted);
  transition: transform 180ms ease, color 180ms ease;
}

.choice-card:hover > svg:last-child {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* Indicatif + numéro : deux champs, une seule information.
   L'indicatif ne prend que la place qu'il lui faut ; le numéro prend le
   reste. Sous 460 px, ils passent l'un au-dessus de l'autre plutôt que de
   réduire le numéro à une largeur où il n'est plus lisible. */
.phone-row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 460px) {
  .phone-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Commune + code postal, remplis automatiquement par la liste d'adresses. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 460px) {
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Confirmation de création de compte. */
.confirmation {
  text-align: left;
  padding: var(--space-7) var(--space-6);
}

.confirmation__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.confirmation__mark svg {
  width: 28px;
  height: 28px;
}

.confirmation h1 {
  margin: 0;
  font-size: var(--size-2xl);
  line-height: 1.2;
  color: var(--color-deep);
}

.confirmation h1:focus,
.confirmation h1:focus-visible {
  outline: none;
  box-shadow: none;
}

/* La suite des étapes est numérotée à la main : le compteur natif d'une
   liste ordonnée ne peut pas être mis en évidence, et c'est le numéro qui
   porte ici l'idée de déroulement. */
.confirmation__steps {
  list-style: none;
  counter-reset: suite;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.confirmation__steps li {
  counter-increment: suite;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--size-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.confirmation__steps li::before {
  content: counter(suite);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Téléphone : la question reste lisible sans dominer l'écran, et les deux
   boutons de navigation occupent chacun la moitié de la largeur — des
   cibles larges valent mieux que des boutons centrés difficiles à viser. */
@media (max-width: 560px) {
  .wizard__question {
    font-size: var(--size-xl);
  }

  .wizard__actions > .btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .choice-card {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .confirmation {
    padding: var(--space-6) var(--space-5);
  }
}

/* Mouvement réduit : la barre saute à sa valeur, la flèche ne glisse plus.
   L'information reste identique ; seule l'animation disparaît. */
@media (prefers-reduced-motion: reduce) {
  .wizard__bar > span,
  .choice-card,
  .choice-card > svg:last-child {
    transition: none;
  }

  .choice-card:hover > svg:last-child {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* 19. Registres officiels : carte de résultat et encart de fiche      */
/* ------------------------------------------------------------------ */

/* La carte « entreprise trouvée » / « professionnel trouvé » du parcours
   d'inscription. Elle se lit comme une fiche d'identité : un repère de
   succès, la source en petit, puis les faits sur deux colonnes. */
.registry-card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
}
.registry-card--matched {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  background: linear-gradient(180deg, var(--color-success-soft) 0%, var(--color-surface) 70%);
}
.registry-card__head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.registry-card__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  color: #fff;
}
.registry-card__mark svg { width: 20px; height: 20px; }
.registry-card__title { display: block; font-size: var(--size-md); }
.registry-card__source { display: block; font-size: var(--size-xs); color: var(--color-muted); }
.registry-card__facts {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--size-sm);
}
.registry-card__facts dt { color: var(--color-muted); margin: 0; }
.registry-card__facts dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.registry-card__hint { margin: 0; font-size: var(--size-sm); color: var(--color-muted); }

/* Encart de fiche, dans l'administration : fond teinté, filet à gauche. */
.registry-panel {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-primary-tint, var(--color-bg));
  border-inline-start: 3px solid var(--color-primary);
}

/* ------------------------------------------------------------------ */
/* 20. Finitions typographiques et de surface (v1.5.0)                 */
/* ------------------------------------------------------------------ */

/* Le fond de page reçoit un très léger dégradé : une page entièrement
   plate paraît vide, un motif la charge. Entre les deux, un voile. */
body {
  background:
    radial-gradient(80% 50% at 50% -10%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 70%),
    var(--color-bg);
}

/* Les titres de page d'accueil profitent de l'axe optique de Fraunces :
   grands, fins, très serrés. Le mot mis en avant passe en italique optique
   (axe « WONK » absent : on s'en tient au sérif droit, plus sobre). */
.hero__title {
  font-variation-settings: "opsz" 144, "SOFT" 40;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.hero__title em { font-weight: 700; }

/* Sous-titres de section : la police du texte, en capitales espacées,
   pour distinguer un repère de rubrique d'un vrai titre. */
.section-kicker,
.hero__eyebrow {
  font-family: var(--font-sans);
  font-variation-settings: normal;
}

/* Le nom de marque reste en sans-sérif : dans l'en-tête, la finesse d'un
   sérif à petite taille se lirait mal. Sa graisse et son approche sont
   réglées avec le logo, dans layout.css. */

/* Titres de cartes et de dialogues : un cran de graisse en plus, parce
   qu'ils sont petits. */
.card__title, .dialog__title { font-weight: 640; font-variation-settings: "opsz" 40, "SOFT" 30; }

/* Boutons : légère lueur au survol de l'action principale, coins plus
   ronds, texte en Manrope. */
.btn { font-family: var(--font-sans); letter-spacing: 0.005em; }
.btn:not(.btn--secondary):not(.btn--quiet):not(.btn--ghost):not(.btn--danger):not(.btn--icon) {
  box-shadow: 0 1px 2px rgba(8, 27, 46, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn:not(.btn--secondary):not(.btn--quiet):not(.btn--ghost):not(.btn--danger):not(.btn--icon):hover:not(:disabled) {
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--color-cta) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Liens de navigation : un trait fin qui s'étire au survol, au lieu du
   simple aplat. */
.site-nav__link { position: relative; }
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { background: transparent; }

/* Champs : un fond très légèrement teinté au repos, blanc au focus. Le
   contraste de la bordure reste celui du socle. */
.input, .select, .textarea { background: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary)); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { background: var(--color-surface); }

/* Pied de page : un fin dégradé en tête, pour ne pas trancher net. */
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.site-footer h4 { font-family: var(--font-sans); }

/* Le récapitulatif d'inscription et les listes de définitions gagnent en
   respiration. */
.wizard dl { row-gap: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .site-nav__link::after { transition: none; }
}