/*!
 * conversion.css — pages contact (demande de devis en 5 étapes) et merci (refonte v2).
 * Chargé APRÈS styles.css (+ forms.css sur contact). Préfixe : .cv-
 * Le fil d'Ariane est repris de content.css, non chargé ici (budget CSS < 80 Ko par page).
 */
@layer components {
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; padding: 0; color: var(--c-text-2); }
  .breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
  .breadcrumb li + li::before { content: "/"; color: var(--c-text-3); }
  .breadcrumb a { display: inline-flex; min-block-size: 2rem; align-items: center; text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb [aria-current="page"] { color: var(--c-text); }
}

@layer pages {
  /* Les deux premières sections sont mises en page avec le premier affichage (voir le guide, §9). */
  .cv-hero, .cv-hero + .section { content-visibility: visible; }
  .cv-hero h1 { max-inline-size: 11.6em; }
  .cv-meta { font-size: var(--step--1); color: var(--c-text-3); }

  /* ---------- Formulaire + colonne latérale ---------- */
  .cv-layout { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 64em) {
    .cv-layout { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: var(--space-2xl); }
    .cv-sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-m)); }
  }
  .cv-card { padding: var(--space-m); box-shadow: none; }
  @media (min-width: 40em) { .cv-card { padding: var(--space-l) var(--space-xl) var(--space-xl); } }
  .cv-card__head { display: grid; gap: 0.6rem; padding-block-end: var(--space-m); margin-block-end: var(--space-l); border-block-end: 1px solid var(--c-line); }
  .cv-card .progress__label { gap: 1rem; }
  .cv-card .progress__label > :last-child { color: var(--c-text); font-weight: 550; }
  /* Bureau : les noms d'étapes sont visibles dans .stepper ; le libellé reste lisible par les lecteurs d'écran. */
  @media (min-width: 48em) { .cv-card .progress__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

  /* Étapes : une seule visible dès que JS est actif (classe .js posée avant la première image) */
  .js [data-devis] .cv-step:not(.is-current) { display: none; }
  .cv-step { display: grid; gap: var(--space-m); min-inline-size: 0; }
  .cv-step + .cv-step { padding-block-start: var(--space-l); border-block-start: 1px solid var(--c-line); }
  .js .cv-step + .cv-step { padding: 0; border: 0; }
  .cv-step__title { font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.025em; max-inline-size: 16.4em; }
  .cv-step__title:focus { outline: none; }
  .cv-step__hint { color: var(--c-text-2); max-inline-size: 41em; }
  .cv-step, .cv-group { margin: 0; padding: 0; border: 0; }
  .cv-group { display: grid; gap: 0.6rem; min-inline-size: 0; }
  .cv-step > legend, .cv-group > legend { float: left; padding: 0; }
  .cv-group > legend { font-weight: 550; font-size: var(--text-ui); }
  .cv-group + .cv-group { margin-block-start: var(--space-xs); }

  .cv-families { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
  .cv-families .choice { align-content: start; }
  .choices--sm { grid-template-columns: repeat(auto-fill, minmax(min(8.75rem, 100%), 1fr)); gap: 0.5rem; }
  @media (min-width: 48em) { .choices--sm { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); } }
  .choices--sm .choice { align-content: center; min-block-size: 3.25rem; padding: 0.65rem 0.75rem 0.65rem 2.45rem; font-size: 0.9375rem; }
  .choices--sm .choice input { inset-inline-start: 0.8rem; inset-block-start: 50%; translate: 0 -50%; }
  .choices--sm .choice__title { font-weight: 550; }
  .cv-seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .cv-seg .choice { padding-block: 0.6rem; }
  .cv-currency { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
  .cv-currency__label { font-size: var(--step--1); color: var(--c-text-2); }
  .cv-currency .choice { min-block-size: 2.75rem; padding: 0.45rem 0.85rem 0.45rem 2.3rem; font-size: 0.9375rem; }
  .cv-currency .choice input { inset-inline-start: 0.75rem; inset-block-start: 50%; translate: 0 -50%; }
  .cv-sub { display: grid; gap: 0.5rem; }
  .cv-sub__label { font-size: var(--step--1); color: var(--c-text-3); }
  .js .cv-sub[data-active="false"] { display: none; }

  .cv-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-start: var(--space-l); padding-block-start: var(--space-m); border-block-start: 1px solid var(--c-line); }
  .cv-nav__next { margin-inline-start: auto; }
  .cv-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0.9rem; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-m); font-size: var(--step--1); color: var(--c-text-2); }
  .cv-notice .btn { min-block-size: 2.25rem; }

  /* Récapitulatif modifiable */
  .cv-summary { display: grid; margin: 0; border-block-start: 1px solid var(--c-line); }
  .cv-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; padding-block: 0.8rem; border-block-end: 1px solid var(--c-line); }
  .cv-summary dt { font-weight: 600; font-size: var(--text-ui); }
  .cv-summary dd { grid-column: 1; margin: 0; font-size: var(--step--1); color: var(--c-text-2); overflow-wrap: anywhere; white-space: pre-line; }
  .cv-summary .cv-summary__edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cv-fallback { display: grid; gap: 0.75rem; }
  .cv-fallback .cluster { margin: 0; }

  /* Colonne latérale */
  .cv-aside { display: grid; gap: var(--space-m); padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-l); }
  .cv-aside > * + * { padding-block-start: var(--space-m); border-block-start: 1px solid var(--c-line); }
  .cv-aside .person { margin: 0; }
  .cv-aside .person__photo img { inline-size: 4rem; block-size: 4rem; }
  .cv-aside .person__name { font-size: var(--step-0); }
  .cv-aside .status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.15rem 0.6rem; }
  .cv-aside .status > :nth-child(n+3) { grid-column: 2; }
  .cv-aside__title { font-size: var(--step-0); }
  .cv-then { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; counter-reset: then; font-size: var(--step--1); color: var(--c-text-2); }
  .cv-then li { position: relative; padding-inline-start: 1.9rem; counter-increment: then; }
  .cv-then li::before { content: counter(then); position: absolute; inset-inline-start: 0; inset-block-start: 0.1rem; display: grid; place-items: center; inline-size: 1.3rem; block-size: 1.3rem; border: 1px solid var(--c-line-strong); border-radius: 50%; font-size: 0.75rem; line-height: 1; color: var(--c-text); }
  .cv-then strong { color: var(--c-text); font-weight: 600; }

  /* Sans JavaScript */
  :root.js .cv-nojs { display: none; }
  .cv-nojs { display: grid; gap: var(--space-s); padding: var(--space-m); border: 1px solid var(--c-line-strong); border-inline-start: 3px solid var(--c-accent); border-radius: var(--radius-m); background: var(--c-raised); }

  /* ---------- Autres canaux (#appel) ---------- */
  .cv-alt { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 56em) { .cv-alt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .cv-alt__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.5rem; padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-raised); }
  .cv-alt__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; margin-block-end: 0.25rem; border: 1px solid var(--c-line); border-radius: var(--radius-s); color: var(--c-accent-text); }
  .cv-alt__title { font-size: var(--step-1); }
  .cv-alt__item > p:not(.cv-alt__actions) { color: var(--c-text-2); font-size: var(--step--1); }
  .cv-alt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: 0.5rem; font-weight: 500; overflow-wrap: anywhere; }
  .cv-alt__actions > a:not(.btn) { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
  .cv-alt__actions [data-config-wrap]:not([hidden]) { display: contents; }

  /* ---------- Merci ---------- */
  .cv-thanks { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 64em) { .cv-thanks { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: var(--space-2xl); } }
  .cv-thanks h1 { max-inline-size: 11em; }

  /* Contact et merci : tous les canaux sont déjà dans la page, la barre d'actions mobile ne recouvre pas le formulaire */
  @media (max-width: 47.99em) { .action-bar { display: none; } .site-footer { padding-block-end: calc(var(--space-m) + env(safe-area-inset-bottom)); } }
}