/* ==========================================================================
   K2T — pages publiques d'acquisition : tarifs, inscription, démo.
   Complète site.css (en-tête, tiroir, pied, sections, FAQ, comparaison). Toujours en clair.
   ========================================================================== */

/* ---------- En-tête de page ---------- */
.p-tete { padding-block: clamp(48px, 7vw, 96px) 0; }
.p-tete h1 { margin-top: 20px; font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.01em; max-width: 15ch; }
.p-tete h1 em { font-style: italic; }
.p-tete .chapo { margin-top: 24px; }
.p-tete__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }

/* ---------- Compteur d'établissements ---------- */
.compteur { display: grid; gap: 10px; padding: 20px 22px; border: 1px solid var(--bordure-forte); border-radius: var(--r-3); background: var(--fond-2); }
.compteur__ligne { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.compteur label, .compteur .champ__label { font-weight: 600; }
.pas { display: inline-flex; align-items: center; border: 1px solid var(--bordure-champ); border-radius: var(--r-2); background: var(--surface); }
.pas button { display: grid; place-items: center; width: var(--cible); height: var(--cible); color: var(--texte); }
.pas button:hover { background: var(--fond-3); }
.pas output { min-width: 44px; text-align: center; font: 500 1.375rem/1 var(--font-titre); font-variation-settings: var(--titre-axes); font-variant-numeric: tabular-nums; }
.compteur p { font-size: var(--t-note); color: var(--texte-2); }

/* ---------- Offres ---------- */
.t-offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border: 1px solid var(--encre-900); border-radius: var(--r-1); box-shadow: inset 0 0 0 4px var(--blanc), inset 0 0 0 5px var(--filet-300); background: var(--blanc); }
.t-offre { display: flex; flex-direction: column; gap: 18px; padding: 36px 32px 32px; min-width: 0; }
.t-offre + .t-offre { border-left: 1px solid var(--bordure); }
.t-offre--mise { background: var(--or-50); box-shadow: inset 0 3px 0 var(--or-600); }
.t-offre__num { font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte); }
.t-offre h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 2rem; line-height: 1.1; }
.t-offre__prix { display: flex; align-items: baseline; gap: 10px; }
.t-offre__prix b { font: 400 clamp(3rem, 5vw, 4rem)/1 var(--font-titre); font-variation-settings: var(--titre-axes); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.t-offre__prix span { font-size: var(--t-note); color: var(--texte-2); line-height: 1.35; }
.t-offre__total { min-height: 22px; font-size: var(--t-note); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.t-offre__total b { color: var(--texte); }
.t-offre > p.desc { color: var(--texte-2); line-height: 1.55; }
.t-offre__actions { display: grid; gap: 4px; justify-items: start; }
.t-offre__actions .btn { width: 100%; }
.t-offre ul { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--bordure); font-size: .9375rem; }
.t-offre li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.t-offre li .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--or-600); }
.t-offre li.tout { font-weight: 600; }
.t-mentions { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 18px; font-size: var(--t-note); color: var(--texte-2); }
.t-mentions b { color: var(--texte); }

/* ---------- Tableau des fonctions ---------- */
.fonctions { margin-top: 32px; }
.fonctions .tableau { table-layout: fixed; }
.fonctions .tableau col.f { width: auto; }
.fonctions .tableau col.o { width: 16%; }
.fonctions .tableau th.o, .fonctions .tableau td.o { text-align: center; }
.fonctions .tableau thead th { font-size: var(--t-mini); }
.fonctions .tableau thead th b { display: block; margin-top: 2px; font: 400 1.25rem/1.1 var(--font-titre); font-variation-settings: var(--titre-axes); letter-spacing: 0; text-transform: none; color: var(--texte); }
.fonctions .tableau tr.groupe th { padding-top: 28px; font-size: var(--t-mini); color: var(--accent-texte); border-bottom: 1px solid var(--bordure-forte); }
.fonctions .tableau td { font-size: .9375rem; }
.fonctions .ico { margin-inline: auto; color: var(--succes-700); }
.fonctions .non { display: inline-block; width: 14px; height: 1.5px; background: var(--non-textuel); vertical-align: middle; }
.fonctions .tableau td small { display: block; font-size: var(--t-mini); color: var(--texte-3); }

/* ---------- Bande finale ---------- */
.bande-fin { padding-block: var(--section-dense); background: var(--noir-marque); color: #F3EEE6; }
.bande-fin .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.bande-fin h2 { font-size: var(--t-h2); line-height: 1.08; max-width: 18ch; color: #FFFFFF; }
.bande-fin p { margin-top: 12px; color: #C9C0B2; }
.bande-fin .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bande-fin .btn--contour { border-color: #F3EEE6; color: #F3EEE6; }
.bande-fin .btn--contour:hover { background: #F3EEE6; color: #1B1712; }

/* ---------- Inscription ---------- */
.insc { padding-block: clamp(40px, 6vw, 80px) var(--section-dense); }
.insc__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.insc h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.05; }
.insc .chapo { margin-top: 14px; }
.pas-a-pas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; counter-reset: e; }
.pas-a-pas li { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--bordure-forte); font-weight: 600; color: var(--texte-3); }
.pas-a-pas li::before { counter-increment: e; content: counter(e); display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bordure-champ); font-size: var(--t-note); }
.pas-a-pas li[aria-current="step"] { border-top-color: var(--encre-900); color: var(--texte); }
.pas-a-pas li[aria-current="step"]::before { background: var(--encre-900); color: #FFFFFF; box-shadow: none; }
.pas-a-pas li.fait { border-top-color: var(--succes-700); color: var(--texte); }
.pas-a-pas li.fait::before { content: "✓"; background: var(--succes-700); color: #FFFFFF; box-shadow: none; }
.formulaire { display: grid; gap: 20px; margin-top: 28px; }
.formulaire__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.formulaire legend { padding: 0; margin-bottom: 10px; font-size: var(--a-petit); font-weight: 600; }
.formulaire .champ__label { font-size: .875rem; }
.formulaire .champ__saisie { min-height: 48px; font-size: 1rem; }
.formulaire .recherche { height: 52px; background: var(--surface); border-color: var(--bordure-champ); }
.formulaire .recherche input { font-size: 1rem; }
.case-ligne { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-top: 2px; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.case-ligne input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--encre-900); }
.case-ligne a { text-decoration: underline; text-underline-offset: 2px; }
.anti-robot { display: flex; align-items: center; gap: 12px; width: min(300px, 100%); min-height: 64px; padding: 10px 14px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--fond-2); font-size: var(--t-note); }
.anti-robot .ico { color: var(--succes-700); }
.anti-robot small { display: block; color: var(--texte-3); font-size: var(--t-mini); }
.resultats { display: grid; gap: 8px; margin-top: 10px; }
.resultat { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--surface); cursor: pointer; }
.resultat input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--encre-900); }
.resultat:has(input:checked) { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); }
.resultat b { display: block; font: 500 1.125rem/1.25 var(--font-titre); font-variation-settings: var(--titre-axes); }
.resultat small { display: block; margin-top: 2px; font-size: var(--t-note); color: var(--texte-2); line-height: 1.45; }
.resultat .num { font-variant-numeric: tabular-nums; }
.activites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.activite { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--surface); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.activite input { width: 18px; height: 18px; flex: none; accent-color: var(--encre-900); }
.activite:has(input:checked) { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); background: var(--or-50); }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-ligne label { position: relative; }
.choix-ligne input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix-ligne span { display: grid; place-items: center; min-width: 76px; min-height: var(--cible); padding: 0 16px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums; }
.choix-ligne input:checked + span { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); background: var(--or-50); }
.choix-ligne input:focus-visible + span { outline: 2px solid var(--anneau); outline-offset: 2px; }
.insc__aside { display: grid; gap: 20px; position: sticky; top: 104px; }
.insc__aside .photo img { border-radius: var(--r-1); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.insc__aside ul { display: grid; gap: 14px; }
.insc__aside li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .9375rem; line-height: 1.5; color: var(--texte-2); }
.insc__aside li .ico { color: var(--or-600); margin-top: 2px; }
.insc__aside li b { display: block; color: var(--texte); }
.insc__aside .note { font-size: var(--t-note); color: var(--texte-2); }
.insc__aside .note a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: var(--texte); }
.etape-2 .retour { justify-self: start; }

/* ---------- Démo ---------- */
body.demo { display: flex; flex-direction: column; min-height: 100vh; }
.demo-bandeau { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; min-height: 56px; padding: 8px 16px 8px 20px; background: var(--encre-900); color: #F3EEE6; font-size: var(--t-note); }
.demo-bandeau__marque { display: flex; align-items: center; gap: 12px; }
.demo-bandeau__marque img { width: 63px; height: 30px; }
.demo-bandeau strong { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; border-radius: var(--r-plein); background: var(--or-300); color: var(--encre-900); font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.demo-bandeau p { color: #C9C0B2; }
.demo-bandeau__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.demo-bandeau .btn--nu { color: #F3EEE6; }
.demo-bandeau .btn--nu:hover { background: rgba(255, 255, 255, .08); }
.demo-corps { flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; }
.demo-guide { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px; border-right: 1px solid var(--bordure-forte); background: var(--fond-2); overflow-y: auto; }
.demo-guide h1 { font-size: 1.875rem; line-height: 1.12; }
.demo-guide > p { color: var(--texte-2); font-size: .9375rem; line-height: 1.55; }
.parcours { display: grid; gap: 8px; counter-reset: p; }
.parcours a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--surface); transition: border-color var(--duree-1) var(--courbe); }
.parcours a::before { counter-increment: p; content: counter(p); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--or-600); color: var(--accent-texte); font: 500 .9375rem/1 var(--font-titre); }
.parcours a:hover { border-color: var(--bordure-champ); }
.parcours a[aria-current="true"] { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); }
.parcours a[aria-current="true"]::before { background: var(--encre-900); box-shadow: none; color: #FFFFFF; }
.parcours b { display: block; font-weight: 600; }
.parcours small { display: block; margin-top: 2px; font-size: var(--t-note); color: var(--texte-2); line-height: 1.45; }
.demo-guide .garanties { display: grid; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bordure-forte); font-size: var(--t-note); color: var(--texte-2); }
.demo-guide .garanties li { display: flex; gap: 8px; }
.demo-guide .garanties .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--succes-700); }
.demo-ecran { position: relative; min-height: 0; background: var(--fond); }
.demo-ecran iframe { display: block; width: 100%; height: calc(100vh - 56px); border: 0; }

/* ---------- Réactif ---------- */
@media (max-width: 1023px) {
  .p-tete__grille, .insc__grille { grid-template-columns: minmax(0, 1fr); }
  .t-offres { grid-template-columns: minmax(0, 1fr); }
  .t-offre + .t-offre { border-left: 0; border-top: 1px solid var(--bordure); }
  .insc__aside { position: static; }
  .demo-corps { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .demo-guide { border-right: 0; border-bottom: 1px solid var(--bordure-forte); }
  .demo-ecran iframe { height: 844px; }
}
@media (max-width: 767px) {
  .t-offre { padding: 28px 20px 24px; }
  .formulaire__2, .activites { grid-template-columns: minmax(0, 1fr); }
  .fonctions .tableau col.o { width: 19%; }
  .fonctions .tableau th, .fonctions .tableau td { padding-inline: 6px; }
  .fonctions .tableau td { font-size: var(--t-note); }
  .fonctions .tableau thead th b { font-size: 1rem; }
  .fonctions .tableau thead th { letter-spacing: .04em; }
  .demo-bandeau p { display: none; }
  .demo-bandeau { padding-left: 16px; }
  .demo-bandeau__actions .btn--nu { display: none; }
  .demo-guide { padding: 22px 16px; }
  .demo-guide .parcours, .demo-guide .garanties { display: none; }
}