/* Espace client Bonjour Voisin — mêmes couleurs que le site (crème, brique, vert sapin), Rubik embarquée, mobile d'abord. */
@font-face{font-family:"Rubik";src:url("polices/rubik-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("polices/rubik-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --fond:#fff8ee;--surface:#ffffff;--surface-2:#fbeedd;--texte:#1e2a2f;--doux:#4f5b60;--ligne:#ead9c2;--ligne-forte:#8a7a66;
  --brique:#b93f26;--brique-texte:#ffffff;--brique-claire:#f9e1d7;--sapin:#1f4d3f;--sapin-texte:#fff8ee;--sapin-clair:#dcebe3;
  --soleil:#f2b33d;--soleil-clair:#fdeccb;--focus:#1f4d3f;--ombre:rgba(70,40,20,.18);--rayon:18px;
  --ok-fond:#dcefe4;--ok-texte:#14503a;--attente-fond:#fdeccb;--attente-texte:#6b4a00;--alerte-fond:#fbe0d8;--alerte-texte:#8c2a14;--neutre-fond:#ece6dc;--neutre-texte:#3f4a4e;
  --police:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#14191b;--surface:#1c2326;--surface-2:#232d30;--texte:#f4ede3;--doux:#b9c1c3;--ligne:#334044;--ligne-forte:#7d8c90;
    --brique:#f0876d;--brique-texte:#1a0f0b;--brique-claire:#43251e;--sapin:#2b6b58;--sapin-texte:#f4ede3;--sapin-clair:#1d3a32;
    --soleil-clair:#3d3216;--focus:#f2b33d;--ombre:rgba(0,0,0,.5);
    --ok-fond:#173b2e;--ok-texte:#c9f0dc;--attente-fond:#3d3216;--attente-texte:#ffe2a6;--alerte-fond:#4a1c1c;--alerte-texte:#ffd4d0;--neutre-fond:#2a3336;--neutre-texte:#dfe5e6;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body{margin:0;background:var(--fond);color:var(--texte);font:400 1.0625rem/1.55 var(--police);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-wrap:break-word;min-height:100vh}
img,svg{max-width:100%;display:block}
a{color:var(--brique);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(1.75rem,6vw,2.4rem);font-weight:700}
h2{font-size:1.3rem;font-weight:700}
h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 .8em}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:16px;top:-120px;z-index:80;background:var(--texte);color:var(--fond);padding:12px 16px;border-radius:10px}
.evitement:focus{top:12px}
.page{width:min(1100px,100% - 32px);margin-inline:auto}
.etroit{width:min(560px,100% - 32px);margin-inline:auto}
[hidden]{display:none!important}

/* Bandeau de maquette */
.bandeau-maquette{background:var(--texte);color:var(--fond);font-size:.82rem;line-height:1.35;text-align:center;padding:7px 16px}
.bandeau-maquette strong{font-weight:700}

/* En-tête */
.barre{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--fond) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.barre .page{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--texte);text-decoration:none;min-height:44px}
.logo svg{width:36px;height:36px;flex:none}
.l-maison{fill:var(--brique)} .l-trou{fill:var(--fond)}
.logo-mot{font-weight:700;font-size:1.12rem;letter-spacing:-.03em;line-height:1.05}
.logo-mot span{color:var(--brique)}
.logo-mot small{display:block;font-size:.74rem;font-weight:400;color:var(--doux);letter-spacing:0}
.barre-droite{display:flex;align-items:center;gap:6px}
.pastille-compte{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 4px;border-radius:999px;color:var(--texte);text-decoration:none;font-weight:700;font-size:.92rem;border:1px solid var(--ligne);background:var(--surface)}
.pastille-compte .initiale{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sapin);color:var(--sapin-texte);font-size:.9rem}
.pastille-compte .nom{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.pastille-compte .nom{display:none}.pastille-compte{padding:4px}}
.icone-bouton{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne);background:var(--surface);color:var(--texte);cursor:pointer;position:relative;text-decoration:none}
.icone-bouton svg{width:22px;height:22px}
.icone-bouton .compteur{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--brique);color:var(--brique-texte);font-size:.72rem;font-weight:700;display:grid;place-items:center}

main{padding:20px 0 120px}
main:focus{outline:none}

/* Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;border:2px solid transparent;font:700 1rem/1.2 var(--police);text-decoration:none;cursor:pointer;transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease;text-align:center}
.bouton:active{transform:scale(.97)}
.bouton svg{width:20px;height:20px;flex:none}
.bouton-plein{background:var(--brique);color:var(--brique-texte);box-shadow:0 10px 22px -14px var(--brique)}
.bouton-sapin{background:var(--sapin);color:var(--sapin-texte)}
.bouton-contour{border-color:currentColor;color:var(--texte);background:transparent}
.bouton-discret{background:transparent;color:var(--texte);border-color:var(--ligne)}
.bouton-large{width:100%}
.bouton[disabled],.bouton[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.bouton.charge{position:relative;color:transparent!important}
.bouton.charge::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid var(--brique-texte);border-right-color:transparent;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.boutons{display:flex;flex-wrap:wrap;gap:10px}
.lien-bouton{background:none;border:0;padding:0 4px;min-height:44px;font:inherit;color:var(--brique);text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:inline-flex;align-items:center}

/* Retour + titres de page */
.retour{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--texte);text-decoration:none;font-weight:700;margin:0 0 6px -6px;padding:0 8px;border-radius:999px}
.retour:hover{background:var(--surface-2)}
.retour svg{width:20px;height:20px}
.tete-page{margin:0 0 18px}
.tete-page p{color:var(--doux);margin:6px 0 0}

/* Cartes */
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px;box-shadow:0 10px 24px -22px var(--ombre)}
.carte + .carte{margin-top:14px}
.carte h2{margin-bottom:10px}
.pile{display:grid;gap:14px}
.deux-colonnes{display:grid;gap:14px}
@media (min-width:900px){.deux-colonnes{grid-template-columns:1fr 1fr;align-items:start}.deux-colonnes.large-etroit{grid-template-columns:1.4fr 1fr}}

/* Pastilles de statut */
.statut{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.84rem;font-weight:700;line-height:1.4;white-space:nowrap}
.statut::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ton-ok{background:var(--ok-fond);color:var(--ok-texte)}
.ton-attente{background:var(--attente-fond);color:var(--attente-texte)}
.ton-alerte{background:var(--alerte-fond);color:var(--alerte-texte)}
.ton-neutre{background:var(--neutre-fond);color:var(--neutre-texte)}

/* Tuiles (4 max en tête) */
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
@media (min-width:1000px){.tuiles{grid-template-columns:repeat(4,1fr)}}
.tuile{display:flex;flex-direction:column;gap:6px;min-height:132px;padding:16px;border-radius:var(--rayon);background:var(--surface);border:1px solid var(--ligne);color:var(--texte);text-decoration:none;position:relative;transition:transform .12s ease,box-shadow .15s ease}
.tuile:hover{box-shadow:0 14px 26px -20px var(--ombre);transform:translateY(-1px)}
.tuile:active{transform:scale(.98)}
.tuile .t-titre{font-size:.88rem;font-weight:700;color:var(--doux);display:flex;align-items:center;gap:8px}
.tuile .t-titre svg{width:20px;height:20px;color:var(--brique)}
.tuile .t-valeur{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tuile .t-detail{font-size:.9rem;color:var(--doux);margin-top:auto}
.tuile.t-alerte{border-color:var(--brique);background:var(--brique-claire)}
.tuile.t-sapin{background:var(--sapin);border-color:var(--sapin);color:var(--sapin-texte)}
.tuile.t-sapin .t-titre,.tuile.t-sapin .t-detail{color:var(--sapin-texte);opacity:.92}
.tuile.t-sapin .t-titre svg{color:var(--soleil)}

/* Liste de liens (le reste du tableau de bord) */
.liste-liens{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden}
.liste-liens li + li{border-top:1px solid var(--ligne)}
.liste-liens a,.liste-liens button{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px;color:var(--texte);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.liste-liens a:hover,.liste-liens button:hover{background:var(--surface-2)}
.liste-liens .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--brique)}
.liste-liens .ic svg{width:22px;height:22px}
.liste-liens .txt{flex:1;min-width:0}
.liste-liens .txt strong{display:block;font-size:1rem}
.liste-liens .txt span{display:block;font-size:.88rem;color:var(--doux)}
.liste-liens .chevron{flex:none;width:20px;height:20px;color:var(--doux)}
.section-titre{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--doux);font-weight:700;margin:22px 0 10px}

/* Alerte d'impayé */
.alerte{border:2px solid var(--brique);background:var(--brique-claire);border-radius:var(--rayon);padding:16px 16px 18px;margin:0 0 18px}
.alerte h2{font-size:1.15rem;margin-bottom:6px;display:flex;gap:10px;align-items:flex-start}
.alerte h2 svg{flex:none;width:24px;height:24px;color:var(--brique);margin-top:1px}
.frise{list-style:none;margin:12px 0 14px;padding:0;display:grid;gap:8px}
.frise li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.95rem}
.frise .quand{display:inline-block;min-width:92px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--ligne);text-align:center;font-size:.85rem}
.frise li.passe .quand{background:var(--brique);color:var(--brique-texte);border-color:var(--brique)}
.alerte-info{border-color:var(--sapin);background:var(--sapin-clair)}
.alerte-info h2 svg{color:var(--sapin)}

/* Formulaires */
.champ{display:grid;gap:6px;margin:0 0 14px}
.champ label,.champ .etiquette{font-weight:700;font-size:.95rem}
.champ .aide{font-size:.86rem;color:var(--doux);margin:0}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=time],input[type=search],textarea{width:100%;min-height:48px;padding:11px 14px;border-radius:12px;border:2px solid var(--ligne-forte);background:var(--surface);color:var(--texte);font:inherit;font-size:1rem}
textarea{min-height:110px;resize:vertical;line-height:1.45}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--brique)}
.erreur{color:var(--alerte-texte);background:var(--alerte-fond);border-radius:10px;padding:8px 12px;font-size:.92rem;font-weight:700;margin:0 0 12px}
.reussite{color:var(--ok-texte);background:var(--ok-fond);border-radius:10px;padding:8px 12px;font-size:.92rem;font-weight:700;margin:0 0 12px}
.case{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 12px;border-radius:12px;border:2px solid var(--ligne);background:var(--surface);cursor:pointer;font-size:.95rem}
.case input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--brique)}
.case:has(input:checked){border-color:var(--sapin)}
fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
legend{font-weight:700;padding:0;margin:0 0 8px}

/* Onglets segmentés (pas de menus déroulants) */
.segments{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);margin:0 0 18px}
.segments button{flex:1;min-height:44px;border-radius:999px;border:0;background:transparent;color:var(--texte);font:700 .95rem var(--police);cursor:pointer}
.segments button[aria-selected=true]{background:var(--surface);box-shadow:0 4px 12px -8px var(--ombre);color:var(--brique)}

/* Choix en cartes (formules, options) */
.choix{display:grid;gap:10px}
.choix label{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:16px;border:2px solid var(--ligne);background:var(--surface);cursor:pointer;min-height:64px}
.choix label:has(input:checked){border-color:var(--brique);box-shadow:0 0 0 1px var(--brique)}
.choix label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.choix input{width:22px;height:22px;margin:0;accent-color:var(--brique)}
.choix .c-nom{font-weight:700}
.choix .c-prix{font-weight:700;text-align:right;white-space:nowrap}
.choix .c-detail{grid-column:2 / 4;font-size:.88rem;color:var(--doux)}
.choix .badge-offre{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--soleil);color:#1e2a2f;font-size:.76rem;font-weight:700;vertical-align:2px}

/* Interrupteurs */
.interrupteur{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;padding:8px 0;background:none;border:0;color:var(--texte);font:inherit;text-align:left;cursor:pointer}
.interrupteur .piste{flex:none;width:52px;height:32px;border-radius:999px;background:var(--ligne-forte);position:relative;transition:background-color .15s}
.interrupteur .piste::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.interrupteur[aria-checked=true] .piste{background:var(--sapin)}
.interrupteur[aria-checked=true] .piste::after{transform:translateX(20px)}
.interrupteur .lib{flex:1}
.interrupteur .lib small{display:block;color:var(--doux);font-size:.86rem}

/* Récapitulatif */
.recap{list-style:none;margin:0;padding:0}
.recap li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--ligne)}
.recap li span:last-child{font-weight:700;white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 4px}
.total strong{font-size:1.9rem;letter-spacing:-.02em}
.petit{font-size:.88rem;color:var(--doux)}
.mot-ethan{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border-radius:16px;padding:14px;margin:0 0 14px}
.avatar-e{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sapin);color:var(--sapin-texte);font-weight:700}

/* Progression */
.progression{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--ligne)}
.progression span{display:block;height:100%;background:var(--sapin);border-radius:999px;transition:width .3s ease}
.etapes-demarrage{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.etapes-demarrage a,.etapes-demarrage .verrouille{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 16px;border-radius:16px;border:2px solid var(--ligne);background:var(--surface);color:var(--texte);text-decoration:none}
.etapes-demarrage a:hover{border-color:var(--ligne-forte)}
.etapes-demarrage .prochaine a{border-color:var(--brique)}

.puce-etape{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--ligne-forte);font-weight:700}
.fait .puce-etape{background:var(--sapin);border-color:var(--sapin);color:var(--sapin-texte)}
.puce-etape svg{width:18px;height:18px}

/* Photos */
.depot{display:grid;place-items:center;gap:6px;min-height:140px;padding:18px;border:2px dashed var(--ligne-forte);border-radius:16px;background:var(--surface);text-align:center;cursor:pointer}
.depot:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.depot input{position:absolute;opacity:0;width:1px;height:1px}
.depot svg{width:32px;height:32px;color:var(--brique)}
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;list-style:none;margin:12px 0 0;padding:0}
.vignettes li{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;font-size:.72rem;color:var(--doux);text-align:center;padding:4px}
.vignettes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vignettes .retirer{position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center}
.vignettes .retirer svg{width:18px;height:18px}

/* Horaires */
.semaine{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jour-ligne{display:grid;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--ligne);background:var(--surface)}
.jour-ligne .entete-jour{display:flex;align-items:center;justify-content:space-between;gap:10px}
.jour-ligne .entete-jour strong{min-width:90px}
.plages{display:grid;gap:8px}
.plage{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plage input[type=time]{width:auto;min-width:118px;flex:1}
.plage .a{color:var(--doux)}
.mini-bouton{min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;border:1px solid var(--ligne-forte);background:var(--surface);color:var(--texte);font:700 .9rem var(--police);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mini-bouton svg{width:18px;height:18px}
.mini-bouton.danger{color:var(--alerte-texte);border-color:var(--alerte-texte)}
.apercu-horaires{list-style:none;margin:0;padding:0;font-size:.95rem}
.apercu-horaires li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--ligne)}
.apercu-horaires li.auj{font-weight:700}

/* Fils de messages */
.fil{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.bulle{max-width:85%;padding:10px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--ligne);font-size:.97rem}
.bulle .quand{display:block;font-size:.76rem;color:var(--doux);margin-top:4px}
.bulle.moi{justify-self:end;background:var(--sapin);border-color:var(--sapin);color:var(--sapin-texte);border-bottom-right-radius:6px}
.bulle.moi .quand{color:var(--sapin-texte);opacity:.85}
.bulle.lui{border-bottom-left-radius:6px}
.bulle.systeme{justify-self:center;background:var(--surface-2);border:0;font-size:.85rem;color:var(--doux);text-align:center}
.saisie{display:flex;gap:8px;align-items:flex-end}
.saisie textarea{min-height:52px;height:52px}

/* Demandes */
.demandes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.demandes a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--ligne);background:var(--surface);color:var(--texte);text-decoration:none;min-height:64px}
.demandes a:hover{border-color:var(--ligne-forte)}
.demandes .petit{grid-column:1 / -1}
.suivi{list-style:none;display:flex;margin:6px 0 16px;padding:0;gap:0}
.suivi li{flex:1;text-align:center;font-size:.82rem;font-weight:700;color:var(--doux);position:relative;padding-top:26px}
.suivi li::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;border:3px solid var(--ligne-forte);background:var(--surface);z-index:1}
.suivi li::after{content:"";position:absolute;top:11px;left:-50%;width:100%;height:3px;background:var(--ligne)}
.suivi li:first-child::after{display:none}
.suivi li.atteint{color:var(--texte)}
.suivi li.atteint::before{background:var(--sapin);border-color:var(--sapin)}
.suivi li.atteint::after{background:var(--sapin)}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--ligne-forte);background:var(--surface);cursor:pointer;font-weight:700;font-size:.95rem}
.puce input{position:absolute;opacity:0;width:1px;height:1px}
.puce:has(input:checked){background:var(--sapin);border-color:var(--sapin);color:var(--sapin-texte)}
.puce:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}

/* Aperçu du site */
.apercu-site{display:grid;gap:18px;align-items:start}
@media (min-width:760px){.apercu-site{grid-template-columns:260px 1fr}}
.cadre-tel{width:min(240px,70vw);margin-inline:auto;border-radius:30px;border:8px solid var(--texte);overflow:hidden;background:#000;box-shadow:0 20px 40px -24px var(--ombre);position:relative}
.cadre-tel img{width:100%}
.cadre-tel.suspendu img{filter:grayscale(1) opacity(.35)}
.cadre-tel .voile{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:#fff;font-weight:700;background:rgba(20,25,27,.55)}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.chiffres div{background:var(--surface-2);border-radius:14px;padding:12px}
.chiffres strong{display:block;font-size:1.5rem;letter-spacing:-.02em}
.chiffres span{font-size:.84rem;color:var(--doux)}
.barres{display:flex;align-items:flex-end;gap:3px;height:110px;padding:0 0 4px;border-bottom:1px solid var(--ligne)}
.barres span{flex:1;background:var(--sapin);border-radius:4px 4px 0 0;min-height:2px;opacity:.85}
.barres span.auj{background:var(--brique);opacity:1}
.axe-barres{display:flex;justify-content:space-between;font-size:.78rem;color:var(--doux);margin-top:4px}

/* Listes simples */
.lignes{list-style:none;margin:0;padding:0}
.lignes li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--ligne);min-height:56px}
.lignes li:last-child{border-bottom:0}
.lignes .gauche{min-width:0}
.lignes .gauche strong{display:block}
.lignes .gauche span{font-size:.88rem;color:var(--doux)}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.coches li{display:flex;gap:10px;align-items:flex-start}
.coches svg{flex:none;width:22px;height:22px;margin-top:1px}
.coches .oui svg{color:var(--sapin)} .coches .non svg{color:var(--brique)}
@media (prefers-color-scheme:dark){.coches .oui svg{color:#8fd6b3}}

/* Rendez-vous et appels (repris de l'espace de la coiffeuse) */
.ruban{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin:0 0 12px;scrollbar-width:thin}
.ruban button{flex:none;display:grid;justify-items:center;min-width:56px;min-height:64px;padding:6px 8px;border-radius:14px;border:2px solid var(--ligne);background:var(--surface);color:var(--texte);font:inherit;cursor:pointer}
.ruban button small{font-size:.75rem;color:var(--doux)}
.ruban button strong{font-size:1.15rem}
.ruban button[aria-pressed=true]{border-color:var(--brique);background:var(--brique-claire)}
.ruban button .nb{font-size:.7rem;color:var(--doux)}
.rdv{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rdv li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--ligne);background:var(--surface)}
.rdv .heure{font-weight:700;font-size:1.05rem}
.rdv .heure small{display:block;font-weight:400;color:var(--doux);font-size:.78rem}
.rdv .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.rdv li.annule{opacity:.6}
.rdv li.annule .quoi{text-decoration:line-through}
.transcription{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:.92rem}
.transcription li{padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.transcription li.ia{background:var(--sapin-clair)}
details.depliant{border-top:1px solid var(--ligne);margin-top:8px}
details.depliant summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--brique)}

/* Factures */
.facture-feuille{background:#fff;color:#1e2a2f;border:1px solid var(--ligne);border-radius:12px;padding:28px;max-width:720px}
.facture-feuille table{width:100%;border-collapse:collapse;margin:16px 0}
.facture-feuille th,.facture-feuille td{text-align:left;padding:8px;border-bottom:1px solid #ead9c2}
.facture-feuille td:last-child,.facture-feuille th:last-child{text-align:right}
@media print{.bandeau-maquette,.barre,.ne-pas-imprimer,.bouton-demo{display:none!important}body{background:#fff}main{padding:0}.facture-feuille{border:0}}

/* Écran « Stripe » simulé */
.stripe-simule{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden}
.stripe-simule .s-tete{background:#635bff;color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;gap:8px;font-size:.92rem}
.stripe-simule .s-corps{padding:18px}
.moyens{display:grid;gap:8px;margin:0 0 14px}

/* E-mails simulés */
.boite{margin-top:18px;border:2px dashed var(--ligne-forte);border-radius:var(--rayon);padding:14px;background:var(--surface-2)}
.boite h2{font-size:1rem;display:flex;align-items:center;gap:8px}
.boite h2 svg{width:20px;height:20px;color:var(--brique)}
.courriel{background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:14px;margin-top:10px}
.courriel .de{font-size:.82rem;color:var(--doux)}
.courriel h3{margin:4px 0 8px}

/* Notification (toast) */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;max-width:min(520px,calc(100% - 32px));background:var(--texte);color:var(--fond);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 18px 40px -18px #000;transition:opacity .2s,transform .2s}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* Fenêtres (dialog natif, jamais alert/confirm) */
dialog{border:0;border-radius:var(--rayon);padding:0;max-width:min(480px,calc(100% - 32px));width:100%;background:var(--surface);color:var(--texte);box-shadow:0 30px 60px -20px #000}
dialog::backdrop{background:rgba(20,25,27,.55)}
dialog .d-corps{padding:20px}
dialog h2{margin-bottom:8px}

/* Bouton et panneau de démonstration */
.bouton-demo{position:fixed;left:12px;bottom:12px;z-index:70;min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid var(--soleil);background:var(--texte);color:var(--fond);font:700 .85rem var(--police);cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 10px 24px -10px #000}
.bouton-demo svg{width:18px;height:18px;color:var(--soleil)}
.scenarios{display:grid;gap:8px}
.scenarios button{display:block;width:100%;text-align:left;min-height:52px;padding:10px 14px;border-radius:14px;border:1px solid var(--ligne);background:var(--surface);color:var(--texte);font:inherit;cursor:pointer}
.scenarios button:hover{border-color:var(--brique)}
.scenarios button small{display:block;color:var(--doux);font-size:.84rem}

/* Admin */
.admin-grille{display:grid;gap:16px}
@media (min-width:1000px){.admin-grille{grid-template-columns:400px 1fr;align-items:start}.admin-grille .liste-clients{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}}
.liste-clients{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.liste-clients a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:14px;border:2px solid var(--ligne);background:var(--surface);color:var(--texte);text-decoration:none;min-height:64px}
.liste-clients a[aria-current=true]{border-color:var(--brique)}
.liste-clients .petit{grid-column:1 / -1}
.code{font-family:ui-monospace,Consolas,monospace;font-size:.84rem;background:var(--surface-2);border-radius:10px;padding:12px;overflow:auto;max-height:320px;white-space:pre}
.calcul{list-style:none;margin:0;padding:0}
.calcul li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--ligne);font-size:.95rem}
.marge-haut{margin-top:16px}
.marge-bas{margin-bottom:16px}
.interrupteur-court{width:auto;min-width:44px;flex:none}
.interrupteur-court .lib{font-weight:700;font-size:.92rem;text-align:right}
button.tuile{font:inherit;text-align:left;cursor:pointer;width:100%}
.chevron{width:20px;height:20px;flex:none;color:var(--doux)}
.etapes-demarrage .txt{flex:1;min-width:0}
.etapes-demarrage .txt strong{display:block}
.etapes-demarrage .txt span{display:block}
.etapes-demarrage .verrouille svg:last-child{width:20px;height:20px;flex:none;color:var(--doux)}
h1:focus,[tabindex="-1"]:focus{outline:none}
.pastille-compte.texte{padding:4px 16px}
.logo-mot > span{margin-left:.12em}
.etapes-demarrage .verrouille{opacity:1;border-style:dashed;color:var(--doux)}
.bulle.moi .quand{opacity:1}
.facture-feuille .petit{color:#4f5b60}
.admin-grille > *,.pile > *,.deux-colonnes > *{min-width:0}

/* ===== Vrai service (reel.js, admin-reel.js) ===== */
.progression .indetermine{width:35%;animation:bv-va-vient 1.4s ease-in-out infinite alternate}
@keyframes bv-va-vient{from{transform:translateX(-10%)}to{transform:translateX(200%)}}
@media (prefers-reduced-motion:reduce){.progression .indetermine{animation:none;width:100%;opacity:.5}}
.lignes-simples{list-style:none;margin:0;padding:0}
.lignes-simples>li{padding:12px 0;border-bottom:1px solid var(--ligne)}
.lignes-simples>li:last-child{border-bottom:0}
code{overflow-wrap:anywhere}