/* Parcours client, charte Voltys (validée par Yann le 12/11/2026) : pensé pour le téléphone d'abord.
   En-tête bleu nuit, logo Voltys et badge « by CAMYnergie », étapes en barres, mascotte et illustrations Voltys. */
body.client { background: var(--fond) url('/img/voltys/fonds/mobile-clair.png') bottom center / 100% auto no-repeat fixed; }
.client-haut { background: var(--nuit); padding: .8rem 0; }
.client-logo { height: 38px; }
.client-hero { background: var(--nuit); color: #fff; padding: .6rem 0 3.2rem; }
.client-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; margin: .25rem 0 .35rem; }
.client-hero p { color: #C9D6E2; }
.client-marque { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--turquoise); }
.client-mascotte { width: 120px; flex: none; margin-bottom: -2.6rem; }
@media (max-width: 575px) { .client-mascotte { width: 84px; } }
.client-corps { max-width: 860px; margin-top: -1.8rem; position: relative; padding-bottom: 3rem; }
.client-message { border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem; font-weight: 600; box-shadow: 0 6px 20px rgba(20,42,70,.08); }
.client-message.ok { background: var(--menthe); color: var(--nuit); border: 1px solid #b6e3dd; }
.client-message.erreur { background: var(--alerte-clair); color: #7a1a12; border: 1px solid #F6C7C0; }
.client-etape-n { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); background: #fff; display: inline-block; padding: .3rem .8rem; border-radius: 999px; margin-bottom: .5rem; box-shadow: 0 2px 8px rgba(20,42,70,.08); }
.client-etapes { list-style: none; padding: .8rem .9rem; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(20,42,70,.08); }
.client-etapes li { font-size: .74rem; color: var(--gris); border-top: 6px solid rgba(134,222,212,.45); border-radius: 4px; padding-top: .4rem; text-align: center; }
.client-etapes .num { display: none; }
.client-etapes li.fait { border-top-color: var(--turquoise); color: var(--nuit); }
.client-etapes li.courant { border-top-color: var(--nuit); color: var(--nuit); font-weight: 700; }
@media (max-width: 575px) { .client-etapes .lib { display: none; } .client-etapes { padding: .6rem .7rem .2rem; } }
.client-carte { display: grid; grid-template-columns: 180px 1fr; background: #fff; border-radius: 18px; overflow: hidden; margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(20,42,70,.07); border: 1px solid var(--trait); scroll-margin-top: 1rem; opacity: .92; }
.client-carte.active { opacity: 1; border: 2px solid var(--turquoise); box-shadow: 0 12px 32px rgba(20,42,70,.14); }
.client-photo { background: var(--menthe) center / 72% auto no-repeat; min-height: 160px; }
.client-texte { padding: 1.3rem 1.4rem; }
.client-texte h2 { font-size: 1.35rem; font-weight: 700; color: var(--nuit); }
.client-num { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); }
@media (max-width: 680px) { .client-carte { grid-template-columns: 1fr; } .client-photo { min-height: 110px; background-size: auto 85%; } }
.client-fiche { background: var(--fond); border-left: 4px solid var(--turquoise); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .8rem; font-size: .92rem; }
.client-zone { display: block; border: 2px dashed var(--turquoise); border-radius: 16px; padding: 1.4rem 1rem; text-align: center; cursor: pointer; background: #F5FCFB; position: relative; }
.client-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.client-zone:hover, .client-zone:focus-within { background: var(--menthe); }
.client-liste { padding-left: 1.1rem; }
.client-compteur { border: 1px solid var(--trait); border-radius: 14px; padding: .7rem .9rem; margin-bottom: .6rem; background: #fff; }
.client-choix, .client-creneaux { display: flex; flex-wrap: wrap; gap: .5rem; }
.client-choix label, .client-creneaux label { position: relative; }
.client-choix input, .client-creneaux input { position: absolute; opacity: 0; }
.client-choix span, .client-creneaux span { display: inline-block; padding: .6rem 1.1rem; border: 2px solid #D3DEE5; border-radius: 999px; font-weight: 600; cursor: pointer; background: #fff; color: var(--nuit); }
.client-choix input:checked + span, .client-creneaux input:checked + span { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.client-choix input:focus-visible + span, .client-creneaux input:focus-visible + span { outline: 3px solid var(--turquoise); }
.client-jour { font-weight: 700; margin: .8rem 0 .35rem; text-transform: capitalize; color: var(--nuit); }
.client-pied { color: var(--gris); font-size: .8rem; padding: 1.5rem 0 2rem; text-align: center; }
.btn-success { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--ardoise); border-color: var(--ardoise); }
.btn-success::after { content: " →"; color: var(--turquoise); }
/* « Être rappelé » (demande de Yann, 12/11/2026) */
.client-rappel { background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: .8rem 1rem; margin-bottom: 1rem; box-shadow: 0 6px 20px rgba(20,42,70,.06); }
.client-rappel.active { border: 2px solid var(--turquoise); }
.client-rappel summary { cursor: pointer; list-style: none; }
.client-rappel .ico-rappel { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--turquoise); margin-right: .3rem; }