/* La maquette du parcours d'arrivée. Tout le reste vient de l'app (porte.css). Ici : les écarts voulus, et la barre hors produit. */
@font-face { font-family: InterVariable; src: url(/fonts/InterVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/InterVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #fff; color: #101010; font-family: InterVariable, Inter, system-ui, sans-serif; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "calt", "cv02", "cv03", "cv04", "cv09", "ss03"; }
button { font-family: inherit; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
.porte-marque, .ar-mail-marque { -webkit-mask: url("/brand/klintt-lockup-black.svg") center / contain no-repeat; mask: url("/brand/klintt-lockup-black.svg") center / contain no-repeat; }
.porte-panneau { background: #05070d url("/porte/verre.jpg") center / cover no-repeat; }

/* ⛔ Aucun bouton noir : le bleu de l'app pour la seule action principale, le blanc du style pour le reste. */
.porte-bouton:not(.is-clair) {
  background: #4190F9; color: #fff;
  background-image: radial-gradient(50% 50% at 50% 0%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 66.46%);
  box-shadow: 0 1px .5px -.5px rgba(0,0,0,.13), 0 1px 2px -.5px rgba(0,0,0,.13), 0 4px 6px -2px rgba(0,0,0,.13), 0 2px 3px -1.5px rgba(0,0,0,.13), inset 0 0 4px 1px #4190F9, inset 0 0 4px 2px rgba(255,255,255,.1), inset 0 0 12px -6px rgba(255,255,255,.75);
}
.porte-offre .porte-bouton.is-clair { background: #fff; color: #101010; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04); }
.porte-offre-prix { display: flex; align-items: baseline; gap: 6px; }
.porte-actions .porte-bouton + .porte-bouton { margin-top: 0; }
.porte-suite { margin-top: 24px; }

/* L'attente : la durée, puis la phrase. Deux textes, rien d'autre. */
.ar-attente { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: var(--porte-champ, #F4F4F6); font-size: 15px; line-height: 20px; }
.ar-attente strong { font-weight: 600; color: #101010; }
.ar-attente span { color: #616161; text-align: right; }

/* La fenêtre, posée sur la page */
.ar-voile { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px; }
.pop-feuille { max-height: calc(100dvh - 48px); overflow-y: auto; max-width: 100%; }
html.v5-mobile .ar-voile { align-items: flex-end; padding: 0; }
html.v5-mobile .pop-feuille { width: 100% !important; max-height: 92dvh; }
.ar-gris { color: #8A8A8A; font-weight: 400; }
.ar-voir { border: 0; background: none; padding: 0; font: inherit; color: #1F7AE8; cursor: pointer; }
.ar-colonnes { display: grid; gap: 8px; margin-top: 4px; }
.ar-colonnes[hidden] { display: none; }
.ar-colonne { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; font-size: 13px; color: #101010; }
.ar-choix { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 2px 3px -1px rgba(0,0,0,.04), 0 3px 4px -1.5px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.13); font-size: 13px; color: #101010; cursor: pointer; }
.ar-choix svg { width: 14px; height: 14px; color: #8A8A8A; }
.ar-ligne { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid #EBEBEB; }
.ar-ligne:first-child { border-top: 0; }
.ar-ligne-tete { display: flex; align-items: center; gap: 12px; }
.ar-ligne-tete .pop-rangee-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-ligne .pop-rangee-titre { font-size: 14px; line-height: 18px; font-weight: 500; }
.ar-ligne .pop-rangee-sous { font-size: 12px; line-height: 16px; color: #616161; }
.ar-etat { width: 132px; flex: none; }
.ar-ligne-champs label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; color: #616161; }

/* Les variables de la porte, dans la fenêtre */
.ar-lot { --porte-fond:#FFFFFF;--porte-encre:#18181B;--porte-encre-2:#52525B;--porte-doux:#71717A;--porte-pale:#A1A1AA;--porte-champ:#F4F5F8;--porte-anneau:#4190F9;--porte-lien:#2D6FF4;--porte-trait:#E4E4E7;--porte-carte:#F4F5F8;--porte-filet:#E6E7EB;--porte-fait-fond:#E7F6EE;--porte-fait:#12A150;--porte-non:#C4C4CC;--brc-tuile:#FFFFFF;--brc-ombre:0 1px 2px rgba(24,24,27,.06); }

/* Le lot : les lignes du lot des presque sûrs, dans la fenêtre. La taille à la place du pourcentage. */
.ar-lot .pop-panneau { gap: 12px; padding: 12px; }
.ar-lot .brc-groupes { margin: 0; padding: 4px 4px 0; }
.ar-lot .brc-lot { padding: 0; gap: 0; background: none; border-radius: 0; max-height: calc(100dvh - 300px); overflow-y: auto; }
.ar-lot .brc-lot-ligne { box-shadow: none; border-radius: 0; background: none; border-top: 1px solid #EBEBEB; }
.ar-lot .brc-lot-ligne:first-child { border-top: 0; }
.ar-lot .brc-lot-ligne:hover { box-shadow: none; }
.brc-pct.ar-taille { background: #F1F1F1; color: #616161; font-weight: 500; }
.brc-lot-ligne[data-coche="false"] .brc-photos { opacity: .45; }
.brc-lot-ligne[data-coche="false"] .brc-ligne-nom { color: #8A8A8A; }
.brc-photos img { object-fit: cover; }
.brc-cote { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; font-size: 13px; color: #101010; }
.brc-cote img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; display: block; }
.brc-cote strong { font-weight: 600; }
.brc-etiquette { font-size: 12px; color: #616161; }
.brc-detail-photos { display: flex; gap: 12px; }
.ar-revoir { border: 0; padding: 4px; }
.ar-pied-tel { position: sticky; bottom: 0; margin: 0 -24px; padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(255,255,255,0), #fff 14px); }
.porte.is-concentre .brc-lot { margin-bottom: 0; }

/* L'app */
#scene { min-height: 100%; }
.ar-app { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #0a0a0a; }
#bulles { position: fixed; z-index: 400; left: 50%; bottom: 92px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#bulles > * { pointer-events: auto; }
.klintt-toast { display: inline-flex; align-items: center; gap: 12px; max-width: 520px; padding: 10px 14px; border-radius: 12px; background: #1a1a1a; color: #fff; font: 500 13px/18px InterVariable, Inter, system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.klintt-toast-annuler { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: rgba(255,255,255,.14); color: #fff; font: 600 12.5px/1 InterVariable, Inter, system-ui, sans-serif; cursor: pointer; }
.brc-pastille { cursor: pointer; top: auto !important; left: auto !important; transform: none !important; animation: none !important; }
html.v5-mobile .brc-pastille { bottom: 96px; }
html.v5-mobile #bulles { bottom: 104px; }

/* L'avis de fin */
.ar-mail { max-width: 560px; margin: 0 auto; padding: 72px 24px; }
.ar-mail-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: 20px; border-bottom: 1px solid #EBEBEB; }
.ar-mail-tete strong { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.ar-mail-marque { display: block; width: 71px; height: 17px; background: #101010; }
.ar-mail-corps { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 20px; font-size: 15px; line-height: 22px; color: #303030; }

/* Le bilan : hors produit, lisible */
.ar-doc { max-width: 880px; margin: 0 auto; padding: 72px 24px 96px; }
.ar-doc header { margin-bottom: 36px; }
.ar-doc h1 { font-size: 44px; line-height: 52px; font-weight: 400; letter-spacing: -.035em; margin-bottom: 28px; }
.ar-doc h2 { font-size: 15px; line-height: 20px; font-weight: 600; margin: 36px 0 12px; }
.ar-note { margin-top: 12px; font-size: 13px; line-height: 19px; color: #616161; }
.ar-table { border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); overflow: hidden; font-size: 14px; line-height: 20px; }
.ar-rang { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 16px; padding: 12px 16px; border-top: 1px solid #EBEBEB; }
.ar-rang:first-child { border-top: 0; }
.ar-rang-tete { background: #F7F7F7; font-size: 12px; line-height: 16px; color: #616161; }
.ar-rang b { font-weight: 600; color: #1F7AE8; }
.ar-chiffres .ar-rang { grid-template-columns: 2fr 1fr 1fr; }
.ar-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ar-deux ol { list-style: decimal inside; font-size: 14px; line-height: 24px; }
.ar-sort { color: #8A8A8A; text-decoration: line-through; }

/* La barre de la maquette : hors produit */
.ar-barre { position: fixed; z-index: 1000; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px; border-radius: 12px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.08); font-size: 12px; line-height: 1; white-space: nowrap; }
.ar-barre button { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: #303030; font-size: 12px; cursor: pointer; }
.ar-barre button svg { width: 14px; height: 14px; }
.ar-barre button:hover { background: #F1F1F1; }
.ar-barre button[data-actif] { background: #F1F1F1; font-weight: 500; color: #101010; }
.ar-barre .ar-compte { font-variant-numeric: tabular-nums; }
.ar-sep { width: 1px; height: 16px; margin: 0 4px; background: #EBEBEB; }
.ar-barre.is-petite { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 10px; transform: none; }
.ar-sommaire { position: fixed; z-index: 1001; top: 48px; left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - 64px); overflow-y: auto; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.14); }
.ar-sommaire[hidden] { display: none; }
.ar-som-groupe { display: flex; flex-direction: column; padding: 6px 0; }
.ar-som-groupe > span { padding: 4px 10px; font-size: 11px; line-height: 16px; color: #8A8A8A; }
.ar-som-groupe button, .ar-recommencer { width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; line-height: 18px; color: #101010; text-align: left; cursor: pointer; }
.ar-som-groupe button:hover, .ar-recommencer:hover { background: #F1F1F1; }
.ar-som-groupe button[data-actif] { background: #F1F1F1; font-weight: 500; }
.ar-recommencer { color: #616161; }
.ar-vue-tel { background: #F5F5F5; background-image: radial-gradient(#DADADA 1px, transparent 1px); background-size: 16px 16px; }
.ar-telephone { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.ar-telephone iframe { width: 402px; height: min(874px, calc(100dvh - 72px)); margin-top: 28px; border: 0; border-radius: 44px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 24px 64px rgba(0,0,0,.16); }

@media (max-width: 720px) {
  .ar-doc { padding: 48px 16px 88px; }
  .ar-doc h1 { font-size: 34px; line-height: 40px; }
  .ar-deux { grid-template-columns: 1fr; }
  .ar-rang { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ar-chiffres .ar-rang { grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
  .ar-rang-tete { display: none; }
  .ar-chiffres .ar-rang-tete { display: grid; }
  .ar-rang > span:first-child { font-weight: 500; }
}