/* RdvFlow, le simulateur (site/simulateur.html) : les réglages en haut, l'investissement à
   gauche, la campagne à droite, le retour en bas ; puis le comparatif et la réponse.
   Mêmes couleurs que base.css, aucune nouvelle. */
.bande { background: var(--bleu-fond); overflow: hidden }

/* ── le simulateur : tout dans le premier écran. Un titre sobre, puis une fenêtre d'appli à la
   façon macOS ; dedans, un composant par étape, celui dont c'est le tour agrandi ── */
.si { padding-top: 84px; padding-bottom: 64px }
.si-grille { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 44px; align-items: center; max-width: 1120px; margin: 0 auto }
.si-titre { margin-bottom: 26px }
.si-titre h1 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -.03em }
.si-titre p { font-size: .98rem; color: var(--doux) }
/* l'exemple : un panneau de l'appli, comme un réglage enregistré. Aéré : ses paramètres en lignes,
   puis le retour en grand et "Appliquer" qui les envoie dans le simulateur */
.si-exemple { border-radius: 16px; background: var(--carte); overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 21, 36, .1), 0 2px 6px rgba(15, 21, 36, .05), 0 30px 60px -30px rgba(15, 21, 36, .25) }
.si-ex-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 22px; background: #eef1f6; border-bottom: 1px solid var(--trait) }
.si-ex-tete b { font: 700 .95rem var(--titre) }
.si-ex-tete span { font-size: .78rem; color: var(--pale) }
.si-exemple dl { padding: 8px 22px }
.si-exemple dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--fond-2); font-size: .9rem }
.si-exemple dl div:first-child { border-top: 0 }
.si-exemple dt { color: var(--doux) }
.si-exemple dd { font: 700 .95rem var(--titre); white-space: nowrap }
.si-ex-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 22px; border-top: 1px solid var(--trait) }
.si-ex-pied p { display: grid; gap: 4px }
.si-ex-pied b { font: 800 2.4rem/1 var(--titre); letter-spacing: -.045em; color: var(--vert) }
.si-ex-pied small { font-size: .76rem; color: var(--pale) }
.si-ex-app { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 22px; border-radius: 99px; background: var(--bleu); color: #fff; font: 700 .9rem var(--titre); transition: background .2s, transform .15s var(--ressort) }
.si-ex-app:hover { background: var(--bleu-fonce) }
.si-ex-app:active { transform: scale(.95) }
.si-ex-app:disabled { background: var(--fond-2); color: var(--doux); cursor: default; transform: none }
/* le petit cercle qui tourne (bouton, et en-tête de l'étape qui se remplit) */
.si-tourne { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--trait-2); border-top-color: var(--bleu); animation: si-tourne .7s linear infinite }
@keyframes si-tourne { to { transform: rotate(360deg) } }
/* pendant "Appliquer" : rien n'est cliquable, l'étape en cours charge (reflet qui passe, cercle à droite) */
.si-fenetre.remplit .si-fil { cursor: progress }
.si-et { position: relative }
.si-fenetre.remplit .si-et.ici { overflow: hidden }
.si-fenetre.remplit .si-et.ici::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(79, 127, 238, .07) 50%, transparent 70%); background-size: 250% 100%; animation: si-reflet 1.1s ease-in-out infinite }
@keyframes si-reflet { from { background-position: 120% 0 } to { background-position: -20% 0 } }
.si-fenetre.remplit .si-et.ici .si-et-tete::after { content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--trait-2); border-top-color: var(--bleu); animation: si-tourne .7s linear infinite }
.si-fenetre.remplit .si-choix button:not(.pris) { opacity: .55 }
.si-pc { min-width: 0; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .8s var(--ressort) }
.si-pc.ouvert { opacity: 1; transform: none }

/* la fenêtre */
.si-fenetre { display: flex; flex-direction: column; height: clamp(460px, calc(100svh - 150px), 620px); border-radius: 14px; background: var(--carte); overflow: hidden; color: var(--texte);
  box-shadow: 0 0 0 1px rgba(15, 21, 36, .1), 0 2px 6px rgba(15, 21, 36, .05), 0 40px 80px -30px rgba(15, 21, 36, .3) }
.si-barre { position: relative; display: flex; align-items: center; justify-content: center; flex: none; height: 38px; background: #eef1f6; border-bottom: 1px solid var(--trait) }
.si-barre b { font: 600 .8rem var(--titre); color: var(--doux) }
.si-feux { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 7px }
.si-feux i { width: 12px; height: 12px; border-radius: 50% }
.si-feux i:nth-child(1) { background: #ff5f57 } .si-feux i:nth-child(2) { background: #febc2e } .si-feux i:nth-child(3) { background: #28c840 }

/* le contenu : un composant par étape, puis le retour. Celui dont c'est le tour s'agrandit (bordure
   bleue, sa question et ses choix) ; les faits sont des lignes grises avec leur valeur, ceux à venir
   des lignes pâles au contour fin */
.si-fil { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: safe center; gap: 4px; padding: 16px 28px; background: var(--fond-2); scrollbar-width: thin }
.si-et { width: 100%; max-width: 620px; margin: 0 auto; flex: none; border-radius: 16px; transition: background .3s, box-shadow .3s, margin .3s }
.si-et.ici { margin-top: 6px; margin-bottom: 6px; background: var(--carte); box-shadow: 0 1px 2px rgba(15, 21, 36, .04), 0 12px 32px -14px rgba(15, 21, 36, .16) }
.si-et-tete { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 16px; text-align: left; font-size: .9rem; color: var(--doux); border-radius: 16px }
.si-et-tete > span { flex: 1; min-width: 0 }
.si-et-tete > b { display: grid; justify-items: end; font: 700 .92rem var(--titre); color: var(--texte); white-space: nowrap }
.si-et-tete > b small { font: 500 .74rem var(--corps); color: var(--bleu-fonce) }
.si-et-tete:disabled { cursor: default }
.si-et.avenir .si-et-tete { color: var(--pale) }
.si-et.fait .si-et-tete:hover { background: rgba(15, 21, 36, .04) }
.si-et.ici .si-et-tete { cursor: default }
.si-et.ici .si-et-tete > b { display: none }
.si-et.ici .si-et-tete > span { font: 600 .8rem var(--titre); color: var(--pale) }
.si-crayon { display: none }
.si-crayon svg { display: block; width: 15px; height: 15px; fill: none; stroke: var(--pale); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.si-et.fait .si-crayon { display: block; opacity: 0; transition: opacity .2s }
.si-et.fait .si-et-tete:hover .si-crayon { opacity: 1 }
.si-et.fait .si-et-tete:hover .si-crayon svg { stroke: var(--texte) }
/* la pastille : une petite coche verte quand c'est fait ; rien sinon */
.si-pt { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; transition: background .3s }
.si-pt svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--ressort) }
.si-et.fait .si-pt { background: var(--vert) }
.si-et.fait .si-pt svg { opacity: 1; transform: none }
.si-et.avenir .si-pt, .si-et.ici .si-pt { display: none }

/* l'agrandissement : le corps passe de 0 à sa hauteur */
.si-et-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ressort) }
.si-et.ici .si-et-corps { grid-template-rows: 1fr }
.si-et-dedans { min-height: 0; overflow: hidden; padding: 0 20px; text-align: center; opacity: 0; transition: opacity .25s }
.si-et.ici .si-et-dedans { opacity: 1; transition: opacity .4s .15s }
.si-et-dedans h3 { margin: 2px auto 18px; font: 700 1.45rem/1.2 var(--titre); letter-spacing: -.025em; max-width: 30ch }
.si-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px }
.si-choix button { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 12px 18px; border-radius: 99px; background: var(--carte); box-shadow: inset 0 0 0 1.5px var(--trait-2); color: var(--texte); transition: background .2s, box-shadow .2s, color .2s, transform .15s var(--ressort) }
.si-choix button b { font: 700 1rem var(--titre) }
.si-choix button small { font-size: .74rem; color: var(--doux) }
.si-choix.riches button { border-radius: 16px; padding: 13px 20px }
.si-choix button:hover { box-shadow: inset 0 0 0 1.5px var(--bleu); color: var(--bleu-fonce) }
.si-choix button:active { transform: scale(.96) }
.si-choix button.pris { background: var(--bleu); box-shadow: none; color: #fff }
.si-choix button.pris small { color: rgba(255, 255, 255, .85) }

/* le retour : le multiplicateur à gauche, le détail à droite, puis les deux boutons */
.si-res { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding: 0 0 12px; text-align: left }
.si-res-x small { display: block; font-size: .8rem; color: var(--doux) }
.si-x { display: block; font: 800 3.4rem/1 var(--titre); letter-spacing: -.05em; color: var(--vert); font-variant-numeric: tabular-nums; white-space: nowrap }
.si-x.perte { color: var(--doux) }
.si-res dl div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--trait); font-size: .88rem }
.si-res dl div:first-child { border-top: 0 }
.si-res dt { color: var(--doux) }
.si-res dd { font: 700 .92rem var(--titre); font-variant-numeric: tabular-nums }
.si-res-btn { display: flex; gap: 8px; margin-bottom: 16px }
.si-cta, .si-encore { flex: 1; min-width: 0; white-space: nowrap; display: flex; justify-content: center; padding: 11px 12px; border-radius: 99px; font: 700 .9rem var(--titre); transition: background .2s, transform .15s var(--ressort) }
.si-cta { background: var(--bleu); color: #fff }
.si-cta:hover { background: var(--bleu-fonce) }
.si-encore { background: var(--fond-2); color: var(--texte) }
.si-encore:hover { background: var(--trait) }
.si-cta:active, .si-encore:active { transform: scale(.97) }

/* ── le comparatif : une grille, notre colonne en carte blanche ── */
.cp { text-align: center; padding-top: 100px; padding-bottom: 110px }
.cp h2 { margin: 0 auto 44px; max-width: 18ch }
.cp-table { position: relative; max-width: 980px; margin: 0 auto; text-align: left }
.cp-tete, .cp-ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); align-items: center }
.cp-tete span { padding: 22px 20px 16px; font: 700 .9rem var(--titre); color: var(--doux) }
.cp-tete img { display: block; height: 19px; width: auto }
.cp-ligne { align-items: stretch }
.cp-ligne > * { display: flex; align-items: center; padding: 18px 20px; border-top: 1px solid rgba(15, 21, 36, .07) }
.cp-ligne b { font: 600 .92rem var(--titre); color: var(--texte) }
.cp-ligne span { font-size: .92rem; color: var(--doux) }
.cp-ligne .cp-nous { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texte) }
.cp-ligne .cp-nous::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--vert-fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%230e9f6e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat }
/* notre colonne : une carte blanche derrière, de haut en bas */
.cp-table::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% * 1.1 / 4.1); width: calc(100% / 4.1); border-radius: 18px; background: var(--carte); box-shadow: 0 0 0 1px rgba(15, 21, 36, .06), 0 30px 60px -30px rgba(31, 59, 140, .3) }
.cp-tete, .cp-ligne { position: relative }
.cp-ligne .cp-nous { border-top-color: var(--trait) }

/* ── la réponse (comme l'accueil) ── */
.repondre { text-align: center; padding-top: 110px; padding-bottom: 120px }
.repondre h2 { margin: 0 auto 12px; max-width: none }
.rp-sous { color: var(--doux); font-size: 1.1rem; margin-bottom: 30px }
.rp-form { position: relative; display: flex; gap: 6px; max-width: 460px; margin: 0 auto; padding: 6px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre-forte); transition: box-shadow .2s }
.rp-form:focus-within { box-shadow: 0 0 0 4px rgba(79, 127, 238, .18), var(--ombre-forte) }
.rp-form input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--texte); background: none; border: 0; padding: 0 12px; outline: none }
.rp-form .bouton { flex: none; background: var(--bleu); border-radius: 11px }
.rp-form .bouton:hover { background: var(--bleu-fonce) }
.rp-form .pot { position: absolute; left: -9999px; width: 1px; height: 1px }
.rp-form .erreur { position: absolute; left: 0; right: 0; top: calc(100% + 10px); color: var(--rouge); font-size: .85rem }
.rp-fin { display: inline-flex; align-items: center; gap: 12px; font: 700 1.2rem var(--titre); color: var(--vert); animation: apparait .5s var(--ease) }
.rp-fin svg { width: 40px; height: 40px; fill: none; stroke: var(--vert); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round }
.rp-fin circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: trait .7s .1s var(--ease) forwards }
.rp-fin path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: trait .4s .65s var(--ease) forwards }
@keyframes trait { to { stroke-dashoffset: 0 } }

@media (max-width: 900px) {
  /* sur tablette et mobile : titre, exemple, puis le simulateur */
  .si-grille { grid-template-columns: minmax(0, 1fr); gap: 18px }
  .si-titre { text-align: center; margin-bottom: 14px }
  .si-exemple dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 4px 16px }
  .si-exemple dl div:nth-child(2) { border-top: 0 }
  .si-exemple dl div { flex-direction: column; gap: 0 }
  /* le comparatif : une carte par critère, notre réponse d'abord */
  .cp-table::before, .cp-tete { display: none }
  .cp-table { display: grid; gap: 12px }
  .cp-ligne { grid-template-columns: minmax(0, 1fr); padding: 18px; border-radius: 16px; background: var(--carte); box-shadow: 0 0 0 1px rgba(15, 21, 36, .06) }
  .cp-ligne > * { padding: 0; border: 0 }
  .cp-ligne b { margin-bottom: 10px }
  .cp-ligne .cp-nous { padding: 10px 12px; border-radius: 10px; background: var(--vert-fond); margin-bottom: 8px }
  .cp-ligne .cp-nous::before { background-color: var(--carte) }
  .cp-ligne span[data-nom] { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; font-size: .86rem }
  .cp-ligne span[data-nom]::before { content: attr(data-nom); color: var(--pale) }
}
@media (max-width: 560px) {
  .si { padding-top: 84px; padding-bottom: 56px }
  .si-fenetre { height: auto }
  .si-fil { justify-content: flex-start; overflow: visible }
  .si-fil { padding: 14px 12px; gap: 6px }
  .si-et-tete { padding: 8px 12px; gap: 10px; font-size: .86rem }
  .si-et-dedans { padding: 0 12px }
  .si-et-dedans h3 { font-size: 1.2rem; margin-bottom: 14px }
  .si-choix { gap: 8px; margin-bottom: 16px }
  .si-choix button { min-width: 0; padding: 11px 16px }
  .si-choix.riches { width: 100% }
  .si-choix.riches button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 11px 16px }
  .si-res { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .si-x { font-size: 3rem }
  .si-cta, .si-encore { padding: 11px 12px; font-size: .86rem }
  .si-titre p { font-size: .88rem }
  .cp, .repondre { padding-top: 72px; padding-bottom: 80px }
  .rp-form .bouton { padding: 12px 16px }
}
@media (prefers-reduced-motion: reduce) {
  .si-pc, .si-et, .si-et-corps, .si-et-dedans { transition: none !important }
}