/* Page « formulaire pas à pas + photo » (Koh. Pro). Même logique que proposer.html de l'OS. */
.pas-a-pas{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.pas-a-pas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 68px)}}
.cote-form-p{padding:28px 16px 56px;order:2}
@media(min-width:1000px){.cote-form-p{order:1;padding:56px 56px 80px;display:flex;flex-direction:column;justify-content:center}}
.cote-form-p>*{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
.intro-p h1{font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.02em;margin:0 0 26px}
.cote-photo{position:relative;order:1;min-height:250px;overflow:hidden;display:flex;align-items:flex-end}
@media(min-width:1000px){.cote-photo{order:2;position:sticky;top:68px;height:calc(100vh - 68px);border-radius:var(--r) 0 0 var(--r)}}
.cote-photo img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.cote-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,.85))}
.texte-photo{position:relative;z-index:1;padding:24px 20px;color:#fff;max-width:560px}
@media(min-width:1000px){.texte-photo{padding:48px}}
.texte-photo .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin:0 0 10px}
.texte-photo p{margin:0 0 12px;font-size:16px;color:rgba(255,255,255,.9)}
.texte-photo ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.texte-photo li{font-size:15px;color:rgba(255,255,255,.85);padding-left:18px;position:relative}
.texte-photo li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:#fff}
.texte-photo .delai{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;color:rgba(255,255,255,.75)}
/* sur téléphone : le titre sur la photo, le reste du texte caché (la page reste courte) */
@media(max-width:999px){.cote-photo{min-height:190px}.texte-photo p:not(.kicker),.texte-photo ul{display:none}.texte-photo .kicker{margin:0}.intro-p h1{margin-bottom:18px}}

/* le formulaire */
.prog{display:flex;justify-content:space-between;font-size:12px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.08em}
.barre{height:4px;background:var(--ligne);border-radius:99px;margin:8px 0 22px;overflow:hidden}
.barre u{display:block;height:100%;background:#fff;border-radius:99px;transition:width .25s}
.carte-pas{background:var(--bg-2);border-radius:var(--r);padding:24px 20px}
.carte-pas h2{font-size:24px;line-height:1.15;margin:0}
.carte-pas .sous{color:var(--txt-2);font-size:15px;margin:6px 0 18px}
.carte-pas label{display:block;font-size:13px;color:var(--txt-2);margin:14px 0 6px}
.carte-pas label small{color:var(--txt-3)}
.carte-pas .champ{background:var(--bg)}
.carte-pas.va{animation:va .28s ease-out}.carte-pas.vient{animation:vient .28s ease-out}
@keyframes va{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes vient{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.carte-pas.va,.carte-pas.vient{animation:none}}
.gros-choix{display:grid;gap:10px}
.gros-choix button{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--ligne);border-radius:18px;padding:16px 18px;color:#fff;font:inherit;cursor:pointer;min-height:56px}
.gros-choix button b{display:block;font-size:16px}
.gros-choix button span{display:block;font-size:13px;color:var(--txt-3);margin-top:2px}
.gros-choix button:hover{border-color:var(--txt-3)}
.gros-choix button.on{background:#fff;color:#1d1d1d;border-color:#fff}
.gros-choix button.on span{color:#555}
.nav-pas{display:flex;gap:10px;margin-top:20px}
.nav-pas .pill{flex:1;justify-content:center;padding:15px;font-size:15px;border:0;cursor:pointer;font-family:inherit}
.nav-pas .pill.contour{border:1px solid var(--ligne);background:none}
.er{color:#f0a08a;font-size:14px;margin:12px 0 0;min-height:18px}
.recap div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--ligne);font-size:15px}
.recap span:first-child{color:var(--txt-3);white-space:nowrap}
.recap span:last-child{text-align:right}
.accord{display:flex;gap:12px;align-items:flex-start;background:none;border:0;color:var(--txt-2);font:inherit;font-size:13.5px;text-align:left;margin-top:16px;padding:6px 0;cursor:pointer}
.accord i{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--txt-3);display:grid;place-items:center;margin-top:1px}
.accord.on i{background:#fff;border-color:#fff}
.accord.on i::after{content:"";width:6px;height:11px;border:solid #1d1d1d;border-width:0 2.4px 2.4px 0;transform:rotate(45deg) translate(-1px,-1px)}
.fini{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px}
.fini .rond-ok{width:60px;height:60px;border-radius:50%;background:#58d68d;color:#1d1d1d;display:grid;place-items:center}
.fini .rond-ok svg{width:28px;height:28px}
.fini .pill{margin-top:10px}
#pro-app{scroll-margin-top:84px}
/* récapitulatif : un texte long (ou un mot sans espace) revient à la ligne au lieu de dépasser */
.recap div{min-width:0}
.recap span:last-child{min-width:0;overflow-wrap:anywhere}
.recap div.long{flex-direction:column;gap:4px}
.recap div.long span:last-child{text-align:left;white-space:pre-line}
/* ordinateur : le texte de l'offre au milieu de la photo, centré, sur un voile sombre uniforme (lisible partout) */
@media(min-width:1000px){
  .cote-photo{align-items:center;justify-content:center}
  .cote-photo::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.3) 100%)}
  .texte-photo{text-align:center;max-width:620px;margin:0 auto}
  .texte-photo p{font-size:18px}
  .texte-photo ul{display:inline-flex;text-align:left;margin:18px auto 0}
  .texte-photo .delai{max-width:460px;margin-left:auto;margin-right:auto}
}