/* kodpéi — l'appli du commerçant : « Changer » (même identité que le site kodpéi) */
.simple-page h1 { font-family: var(--titre); font-size: 30px; letter-spacing: -.02em; margin: 0 0 4px; }
.simple-page > .discret { margin: 0 0 18px; }
.sp-carte { padding: 16px; margin-bottom: 16px; border: 1.5px solid var(--ligne); border-radius: 20px; background: #fff; }
.sp-carte h2 { font: 700 19px/1.2 var(--titre); margin: 0 0 4px; }
.sp-carte .discret { margin: 0 0 12px; font-size: 14px; }
.sp-une { border: 2px solid var(--encre); box-shadow: 6px 6px 0 var(--jaune); background: linear-gradient(170deg, #FFFBE0, #fff 55%); }
.sp-une textarea, .sp-carte textarea { width: 100%; min-height: 92px; padding: 12px 14px; border: 2px solid var(--ligne); border-radius: 14px; font: inherit; font-size: 17px; line-height: 1.4; resize: vertical; background: #fff; color: var(--texte); }
.sp-une textarea:focus, .sp-carte textarea:focus { outline: none; border-color: var(--encre); box-shadow: 3px 3px 0 var(--jaune); }
.sp-exemples { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none; }
.sp-exemples .puce { flex: none; min-height: 38px; font-size: 13px; border-width: 1.5px; }
.sp-ligne { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.sp-ligne .sp-go { flex: 1; min-height: 56px; font-size: 17px; box-shadow: 4px 4px 0 var(--encre); }
.sp-micro { flex: none; min-height: 56px; }
.sp-micro[aria-pressed="true"] { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.sp-ok { margin-top: 14px; padding: 14px; border-radius: 14px; background: #E3F5EA; color: #145C37; }
.sp-ok b { display: block; font-size: 16px; }
.sp-ok ul { margin: 8px 0 0; padding-left: 20px; }
.sp-ok li::marker { content: "✓  "; font-weight: 800; }
.sp-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sp-kodpei { margin-top: 14px; padding: 14px; border-radius: 14px; background: #F6F2EA; }
.sp-kodpei p { margin: 0 0 10px; }
.sp-kodpei p:last-child { margin: 0; }
.sp-ardoise { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-ardoise > div { flex: 1 1 200px; }
.sp-ardoise p { margin: 4px 0 0 !important; }
.sp-compteur { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: #F6F2EA; font-size: 14px; font-weight: 700; }
.sp-pts { display: flex; gap: 5px; }
.sp-pts i { width: 22px; height: 10px; border-radius: 99px; background: #fff; border: 1.5px solid var(--ligne); }
.sp-pts i.pris { background: var(--encre); border-color: var(--encre); }
.sp-pts i.plus { background: var(--rouge); border-color: var(--rouge); }
.sp-dem { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--ligne); font-size: 14px; }
.sp-dem p { margin: 0; }
.sp-st { padding: 3px 8px; border-radius: 99px; background: var(--jaune-fonce); font-size: 12px; font-weight: 800; white-space: nowrap; }
.sp-st.vert { background: #E3F5EA; color: #145C37; }
.sp-carte .btn.plein { margin-top: 10px; }
.sp-bas { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.sp-bas .btn { padding: 0 8px; font-size: 14px; }
/* téléphone : « Voir mon site » sur toute la largeur, les deux autres dessous (rien ne se coupe en deux lignes) */
@media (max-width: 480px) { .sp-bas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-bas > :first-child { grid-column: 1 / -1; } }
.sp-carte .sp-dem + textarea, .sp-carte div + textarea { margin-top: 4px; }