/* Mode visio de la plateforme de découverte. Identité du site synaisis.fr :
   titres Cabinet Grotesk, texte Satoshi, violet Clodia. Le cadre de droite contient la vraie appli. */
@font-face { font-family: 'Cabinet Grotesk'; src: url('/site-fonts/cabinet-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('/site-fonts/cabinet-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/site-fonts/satoshi-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/site-fonts/satoshi-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/site-fonts/satoshi-700.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --fond: #FBFAFD; --surface: #FFFFFF; --encre: #1C1830; --doux: #4A4460; --pale: #8F88A8;
  --filet: #EEE8FA; --filet-fort: #DDD5F0; --violet: #6D28D9; --violet-pale: #F3EEFD; --nuit: #2A1B4D;
  --titre: 'Cabinet Grotesk', system-ui, sans-serif;
  --texte: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.barre { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--filet-fort); }
.marque { font-family: var(--titre); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.mode { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); background: var(--violet-pale); border-radius: 999px; padding: 3px 10px; }
.espace { margin-left: auto; color: var(--doux); font-size: 13px; }

.scene { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }

.parcours { overflow-y: auto; padding: 20px 16px 20px 22px; background: var(--surface); border-right: 1px solid var(--filet-fort); display: flex; flex-direction: column; gap: 12px; }
.surtitre { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.parcours ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.etape > button { width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; text-align: left; background: none; border: 0; border-radius: 12px; padding: 10px 10px; }
.etape > button:hover { background: var(--fond); }
.etape .num { font-family: var(--titre); font-weight: 700; font-size: 15px; color: var(--pale); font-variant-numeric: tabular-nums; }
.etape .nom { font-family: var(--titre); font-weight: 700; font-size: 17px; line-height: 1.25; }
.etape .resume { grid-column: 2; color: var(--doux); font-size: 13px; }
.etape.active > button { background: var(--violet-pale); }
.etape.active .num { color: var(--violet); }
.etape .detail { display: none; margin: 4px 0 8px 38px; padding: 0 8px 0 0; }
.etape.active .detail { display: block; }
.detail ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.detail li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; }
.detail li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.pied { margin: auto 0 0; padding-top: 12px; color: var(--pale); font-size: 12px; }

.appli { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px 18px; gap: 12px; }
.outils { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.qui { display: flex; align-items: baseline; gap: 8px; }
.qui span:first-child { font-family: var(--titre); font-weight: 700; font-size: 18px; }
.qui span:last-child { color: var(--doux); font-size: 13.5px; }
.vues { display: flex; flex-wrap: wrap; gap: 6px; }
.vues button, .appareils button { border: 1px solid var(--filet-fort); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 500; color: var(--doux); }
.vues button[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #FFFFFF; font-weight: 700; }
.appareils { margin-left: auto; display: flex; gap: 6px; }
.appareils button[aria-pressed="true"] { border-color: var(--encre); color: var(--encre); font-weight: 700; }
.discret { border: 0; background: none; color: var(--doux); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; }

.cadre { flex: 1; min-height: 0; position: relative; display: flex; justify-content: center; border: 1px solid var(--filet-fort); border-radius: 16px; background: var(--filet); overflow: hidden; }
.cadre iframe { display: none; width: 100%; height: 100%; border: 0; background: #FFFFFF; }
.cadre iframe.visible { display: block; }
.cadre.telephone { padding: 14px 0; }
.cadre.telephone iframe { width: 390px; max-width: 100%; border-radius: 28px; box-shadow: 0 0 0 8px var(--nuit), 0 18px 40px rgba(42, 27, 77, .25); }
.attente { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--doux); font-size: 14px; pointer-events: none; }
.attente[hidden] { display: none; }
.attente.erreur { color: #A6414E; padding: 0 24px; text-align: center; }

[hidden] { display: none !important; }
.p-connexion { max-width: 420px; }
.p-connexion label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--doux); }
.p-connexion input { font: inherit; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: 10px; color: var(--encre); background: var(--surface); }
.p-connexion input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.p-bouton { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 11px 20px; background: var(--violet); color: #FFFFFF; cursor: pointer; }
.p-bouton[disabled] { opacity: .55; }
.p-erreur { color: #A6414E; font-weight: 500; }
.lien-fiches { font-size: 13px; color: var(--violet); font-weight: 700; text-underline-offset: 3px; }
.espace { margin-left: auto; }

/* Choix de la fiche de découverte */
.fiche-choix { display: flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 13px; color: var(--doux); }
.fiche-choix select { font: inherit; font-weight: 700; color: var(--encre); background: var(--surface); border: 1px solid var(--filet-fort); border-radius: 999px; padding: 6px 12px; max-width: 280px; }
.parcours li.surtitre { margin: 12px 0 2px 10px; }
.prio { display: inline-block; margin-left: 8px; vertical-align: middle; font-family: var(--texte); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; white-space: nowrap; color: var(--doux); border: 1px solid var(--filet-fort); }
.prio.haute { background: var(--violet); border-color: var(--violet); color: #FFFFFF; }
.prio.moyenne { border-color: var(--violet); color: var(--violet); }

/* Panneaux : la conciergerie, avant et après, l'offre */
.panneau { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 18px; max-width: 1060px; width: 100%; margin: 0 auto; }
.p-tete h1 { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.p-tete p { margin: 8px 0 0; color: var(--doux); font-size: 16px; max-width: 62ch; }
.p-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.p-bloc { background: var(--surface); border: 1px solid var(--filet-fort); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-bloc h2 { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 20px; }
.p-bloc p { margin: 0; }
.p-sur { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.p-doux { color: var(--pale); font-size: 13px; margin: 0; }
.p-faits { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 15px; }
.p-faits dt { color: var(--doux); }
.p-faits dd { margin: 0; font-weight: 500; }
.p-besoin { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--filet); }
.p-besoin strong { display: block; font-weight: 700; }
.p-besoin div span { display: block; color: var(--doux); font-size: 13.5px; }
.schema.apres { border-color: var(--violet); background: var(--violet-pale); }
.schema.apres .p-sur { color: var(--violet); }
.schema svg { width: 100%; height: 190px; }
.schema .trait { stroke: #A6414E; stroke-width: 1.4; }
.schema .centre { fill: #A6414E; }
.schema.apres .trait { stroke: var(--violet); }
.schema.apres .centre { fill: var(--violet); }
.schema .centre-txt { fill: #FFFFFF; font-size: 11.5px; font-weight: 700; }
.schema .vous { fill: var(--surface); stroke: var(--violet); }
.schema .vous-txt { fill: var(--violet); font-size: 10.5px; font-weight: 700; }
.schema .noeud { fill: var(--encre); font-size: 10.5px; }
.p-legende { text-align: center; font-weight: 700; font-size: 14px; }
.p-dits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.p-dits li { position: relative; padding-left: 16px; }
.p-dits li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.p-paliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.p-paliers div { background: var(--surface); border: 1px solid var(--filet-fort); border-radius: 14px; padding: 14px 16px; }
.p-paliers div.ici { border-color: var(--violet); background: var(--violet-pale); }
.p-paliers b { display: block; font-family: var(--titre); font-size: 24px; }
.p-paliers span { color: var(--doux); font-size: 13px; }
.p-total { background: var(--nuit); color: #F0ECF6; border-radius: 16px; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.p-total p { margin: 0; }
.p-total-sur { color: #B79CF0; font-size: 13.5px; }
.p-total-gros { font-family: var(--titre); font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); font-variant-numeric: tabular-nums; }
.p-reglage { display: flex; align-items: center; gap: 12px; }
.p-reglage span { font-family: var(--titre); font-weight: 700; font-size: 26px; min-width: 2.4ch; text-align: center; font-variant-numeric: tabular-nums; }
.p-reglage button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(240, 236, 246, .4); background: transparent; color: #F0ECF6; font-size: 20px; line-height: 1; }
.p-reglage button:hover { background: rgba(240, 236, 246, .12); }

@media (max-width: 900px) {
  .scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .parcours { border-right: 0; border-bottom: 1px solid var(--filet-fort); max-height: 42vh; }
  .espace { display: none; }
}