/* Page de réservation /devis/ : utilise les jetons de css/systeme.css (chargé avant ce fichier). */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--police-texte);background:var(--fond-doux);color:var(--encre);font-size:var(--t-s);line-height:1.5;padding-bottom:96px}
@media(min-width:960px){body{padding-bottom:0}}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit}
.etoiles{color:var(--etoile);letter-spacing:1px}

/* En-tête court : pas de menu, une seule sortie (le téléphone) */
.bk-top{position:sticky;top:0;z-index:40;background:rgba(242,246,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
.bk-top-in{max-width:var(--largeur);margin:0 auto;padding:var(--e-1) var(--e-2);display:flex;align-items:center;gap:var(--e-2);min-height:64px}
.bk-logo{display:flex;align-items:center;gap:var(--e-1);text-decoration:none;font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-l);color:var(--vert-fonce)}
.bk-logo img{width:32px;height:32px;object-fit:contain;border-radius:6px}
.bk-top-g{margin-left:auto;display:flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);color:var(--gris)}
.bk-top-g b{color:var(--encre)}
.bk-tel{display:inline-flex;align-items:center;gap:var(--e-1);min-height:44px;text-decoration:none;font-weight:600;font-size:var(--t-xs);border:2px solid var(--ligne);background:var(--blanc);border-radius:var(--rayon-bouton);padding:0 var(--e-2)}
.bk-tel svg{width:16px;height:16px}
.bk-tel span{display:none}
@media(min-width:560px){.bk-tel span{display:inline}}
@media(max-width:400px){.bk-top-g .bk-gtxt{display:none}}

/* Introduction */
.bk{max-width:var(--largeur);margin:0 auto;padding:var(--e-3) var(--e-2) var(--e-4)}
.bk-intro{margin-bottom:var(--e-3)}
.bk-intro h1{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-2xl);line-height:1.08;letter-spacing:var(--titre-esp);color:var(--vert-fonce)}
@media(min-width:960px){.bk-intro h1{font-size:var(--t-3xl)}}
.bk-intro p{color:var(--gris);margin-top:var(--e-1);font-size:var(--t-m)}
.bk-trust{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-2);margin-top:var(--e-2);font-size:var(--t-xs);font-weight:600;color:var(--vert-fonce)}
.bk-trust span{display:inline-flex;align-items:center;gap:6px}
.bk-trust svg{width:16px;height:16px;color:var(--vert)}

.bk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-3)}
.bk-grid > *{min-width:0}
@media(min-width:960px){.bk-grid{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:var(--e-4)}}

/* Étapes */
.st{background:var(--blanc);border-radius:var(--rayon-l);padding:var(--e-3) var(--e-2);box-shadow:inset 0 0 0 1px var(--ligne);margin-bottom:var(--e-2);scroll-margin-top:80px}
@media(min-width:600px){.st{padding:var(--e-3)}}
.st-h{display:flex;align-items:center;gap:var(--e-1);margin-bottom:var(--e-2)}
.st-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--vert-fonce);color:var(--blanc);display:grid;place-items:center;font-weight:700;font-size:var(--t-xs)}
.st.done .st-n{background:var(--vert)}
.st-h h2{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-l);line-height:1.2;color:var(--vert-fonce)}
.st-h small{margin-left:auto;color:var(--gris);font-size:var(--t-xs)}
.st-err{display:none;color:#B42318;font-size:var(--t-xs);font-weight:600;margin-top:var(--e-1)}
.st.bad .st-err{display:block}
.st.bad{box-shadow:inset 0 0 0 2px #F3B4AE}

/* Code postal */
.cp-row{display:flex;gap:var(--e-2);align-items:center}
.inp{width:100%;font:inherit;font-size:16px;min-height:48px;padding:12px var(--e-2);border:2px solid var(--ligne);border-radius:var(--rayon);background:var(--blanc);color:var(--encre);outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--vert);box-shadow:0 0 0 3px rgba(22,101,52,.15)}
#cp{max-width:160px;font-size:var(--t-l);font-weight:700;letter-spacing:.06em}
.cp-msg{font-size:var(--t-xs);font-weight:600;color:var(--gris);line-height:1.4}
.cp-msg.ok{color:var(--vert)}
.cp-msg.warn{color:#8A5A00}

/* Cartes articles */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-1)}
@media(min-width:720px){.cats{grid-template-columns:repeat(4,1fr);gap:var(--e-2)}}
.cat{position:relative;text-align:left;border:2px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;background:var(--blanc);transition:border-color .15s}
.cat img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--vert-pale)}
.cat-b{display:block;padding:var(--e-1) 12px 12px}
.cat-b b{display:block;font-size:var(--t-s);font-weight:700;line-height:1.2}
.cat-b span{display:block;min-height:1.5em;font-size:var(--t-xs);color:var(--gris)}
.cat.on{border-color:var(--vert);box-shadow:0 0 0 3px rgba(22,101,52,.15)}
.cat-c{position:absolute;top:var(--e-1);right:var(--e-1);min-width:28px;height:28px;padding:0 var(--e-1);border-radius:14px;background:var(--vert-fonce);color:var(--blanc);font-weight:700;font-size:var(--t-xs);display:none;place-items:center}
.cat-c.has{display:grid}

.sizes{margin-top:var(--e-2);border:2px solid var(--vert);border-radius:var(--rayon);background:var(--vert-pale);padding:var(--e-1) var(--e-2)}
.sizes[hidden]{display:none}
.sz-t{font-size:var(--t-s);font-weight:700;color:var(--vert-fonce);padding:var(--e-1) 0 0}
.sz{display:flex;align-items:center;gap:var(--e-2);padding:12px 0;border-top:1px solid rgba(22,101,52,.15)}
.sz-t + .sz{border-top:0}
.sz-l{flex:1;min-width:0}
.sz-l b{display:block;font-size:var(--t-s);font-weight:600}
.sz-l span{font-size:var(--t-xs);color:var(--gris)}
.stp{display:flex;align-items:center;gap:2px;background:var(--blanc);border:2px solid var(--ligne);border-radius:40px;padding:2px}
.stp button{width:44px;height:44px;border-radius:50%;font-size:1.25rem;font-weight:700;display:grid;place-items:center;color:var(--vert-fonce)}
.stp button:hover{background:var(--vert-pale)}
.stp button[disabled]{opacity:.35;cursor:default;background:none}
.stp output{min-width:24px;text-align:center;font-weight:700}

/* Options */
.opts{display:grid;gap:var(--e-1);margin-top:var(--e-2)}
.opts-t{font-size:var(--t-s);font-weight:700;margin-top:var(--e-3)}
.opts-t span{font-weight:400;color:var(--gris)}
.opt{display:flex;align-items:center;gap:12px;border:2px solid var(--ligne);border-radius:var(--rayon);padding:12px;min-height:48px;background:var(--blanc);text-align:left;width:100%}
.opt-ck{flex:none;width:24px;height:24px;border-radius:6px;border:2px solid #A9B7AE;display:grid;place-items:center;transition:background-color .15s}
.opt-ck svg{width:14px;height:14px;color:var(--blanc);opacity:0}
.opt-l{flex:1;min-width:0}
.opt-l b{display:block;font-size:var(--t-s);font-weight:600}
.opt-l span{font-size:var(--t-xs);color:var(--gris)}
.opt-p{font-weight:700;font-size:var(--t-xs);color:var(--vert-fonce);text-align:right}
.opt.on{border-color:var(--vert);background:var(--vert-pale)}
.opt.on .opt-ck{background:var(--vert);border-color:var(--vert)}
.opt.on .opt-ck svg{opacity:1}
.opt-sub{display:none;align-items:center;justify-content:space-between;gap:var(--e-1);padding:0 var(--e-1) var(--e-1) 48px;font-size:var(--t-xs);color:var(--gris);font-weight:600}
.opt-sub.show{display:flex}

/* Disponibilités */
.days{display:flex;gap:var(--e-1);overflow-x:auto;padding:2px 2px var(--e-1);margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:64px;padding:var(--e-1) 0;border:2px solid var(--ligne);border-radius:var(--rayon);background:var(--blanc);text-align:center;line-height:1.15}
.day small{display:block;font-size:var(--t-xs);font-weight:600;color:var(--gris)}
.day b{display:block;font-size:var(--t-l);font-weight:700;margin-top:2px}
.day i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--gris)}
.day.on{background:var(--vert-fonce);border-color:var(--vert-fonce);color:var(--blanc)}
.day.on small,.day.on i{color:var(--vert-clair)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-1);margin-top:var(--e-1)}
.slot{border:2px solid var(--ligne);border-radius:var(--rayon);padding:var(--e-1) 4px;min-height:56px;background:var(--blanc);text-align:center;font-weight:600;font-size:var(--t-s);line-height:1.2}
.slot small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--gris)}
.slot.on{background:var(--vert-fonce);border-color:var(--vert-fonce);color:var(--blanc)}
.slot.on small{color:var(--vert-clair)}
.when-note{margin-top:12px;font-size:var(--t-xs);color:var(--gris);display:flex;gap:var(--e-1);align-items:flex-start}
.when-note svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--vert)}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-xs);font-weight:600;color:var(--vert);text-decoration:underline;text-underline-offset:3px;margin-top:var(--e-1)}
.when-free{display:none;margin-top:var(--e-1);padding:12px var(--e-2);border-radius:var(--rayon);background:var(--vert-pale);font-size:var(--t-xs);font-weight:600;color:var(--vert-fonce)}
.st-when.free .when-pick{display:none}
.st-when.free .when-free{display:block}

/* Coordonnées */
.fl{display:grid;gap:var(--e-2)}
@media(min-width:600px){.fl-2{grid-template-columns:1fr 1fr}}
.fld label{display:block;font-size:var(--t-xs);font-weight:600;margin-bottom:6px}
.fld label span{font-weight:400;color:var(--gris)}
.fld.bad .inp{border-color:#B42318}
.fld-e{display:none;color:#B42318;font-size:var(--t-xs);font-weight:600;margin-top:4px}
.fld.bad .fld-e{display:block}
.pills{display:flex;flex-wrap:wrap;gap:var(--e-1)}
.pill{position:relative;display:inline-flex;align-items:center;min-height:44px;border:2px solid var(--ligne);border-radius:40px;padding:0 var(--e-2);font-weight:600;font-size:var(--t-xs);background:var(--blanc);cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill.on{background:var(--vert-fonce);border-color:var(--vert-fonce);color:var(--blanc)}
.pill:focus-within{outline:3px solid var(--vert-clair);outline-offset:2px}
textarea.inp{resize:vertical;min-height:88px}
.more[hidden]{display:none}

/* Bouton d'envoi : le seul bouton principal de la page */
.go{width:100%;margin-top:var(--e-3);min-height:56px;border-radius:var(--rayon-bouton);background:var(--vert);color:var(--blanc);font-weight:700;font-size:var(--t-m);padding:var(--e-2);transition:background-color .15s;display:flex;align-items:center;justify-content:center}
.go:hover{background:var(--vert-fonce)}
.go[disabled]{opacity:.7;cursor:wait}
.reass{display:grid;gap:var(--e-1);margin-top:var(--e-2)}
.reass div{display:flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);color:var(--gris)}
.reass svg{flex:none;width:16px;height:16px;color:var(--vert)}
.other{text-align:center;margin-top:var(--e-3);font-size:var(--t-xs);color:var(--gris)}
.other a{color:var(--vert);font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* Récapitulatif */
.recap{background:var(--blanc);border-radius:var(--rayon-l);box-shadow:inset 0 0 0 1px var(--ligne);padding:var(--e-3) var(--e-2)}
@media(min-width:960px){.recap{position:sticky;top:88px;padding:var(--e-3)}}
.recap h2{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-l);color:var(--vert-fonce);margin-bottom:var(--e-1)}
.rc-empty{font-size:var(--t-xs);color:var(--gris);padding:6px 0 4px}
.rc-l{display:flex;justify-content:space-between;gap:var(--e-1);font-size:var(--t-xs);padding:6px 0}
.rc-l span:last-child{font-weight:600;white-space:nowrap}
.rc-l.opt span:first-child{color:var(--gris)}
.rc-l.cmp span{color:#8A5A00}
.rc-l.remise span:last-child{color:var(--vert);font-weight:700}
.rc-sep{border-top:1px dashed var(--ligne);margin:var(--e-1) 0}
.rc-tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px}
.rc-tot span{font-weight:700}
.rc-tot b{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-xl);color:var(--vert-fonce)}
.rc-sm{font-size:var(--t-xs);color:var(--gris);margin-top:2px}
.rc-when{margin-top:12px;font-size:var(--t-xs);background:var(--vert-pale);color:var(--vert-fonce);border-radius:var(--rayon);padding:var(--e-1) 12px;font-weight:600}
.rc-when:empty{display:none}
.rc-g{margin-top:var(--e-2);border-top:1px solid var(--ligne);padding-top:var(--e-2);display:grid;gap:var(--e-1)}
.rc-g div{display:flex;gap:var(--e-1);font-size:var(--t-xs);color:var(--gris)}
.rc-g svg{flex:none;width:16px;height:16px;color:var(--vert);margin-top:2px}
.rc-rev{margin-top:var(--e-2);background:var(--fond-doux);border-radius:var(--rayon);padding:12px var(--e-2);font-size:var(--t-xs)}
.rc-rev p{color:var(--encre);margin-top:4px}
.rc-rev small{display:block;margin-top:6px;color:var(--gris)}
@media(max-width:959px){.recap .rc-g,.recap .rc-rev{display:none}}

/* Barre fixe en bas sur téléphone */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--blanc);border-top:1px solid var(--ligne);box-shadow:0 -6px 20px rgba(15,61,36,.08);padding:var(--e-1) var(--e-2) calc(var(--e-1) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--e-2)}
@media(min-width:960px){.bar{display:none}}
.bar-l{flex:1;min-width:0;line-height:1.15}
.bar-l small{display:block;font-size:var(--t-xs);color:var(--gris)}
.bar-l b{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-l);color:var(--vert-fonce)}
.bar-l b.zero{font-family:var(--police-texte);font-size:var(--t-s);font-weight:600;color:var(--gris)}
.bar button{flex:none;min-height:48px;background:var(--vert);color:var(--blanc);font-weight:700;border-radius:var(--rayon-bouton);padding:0 var(--e-3);font-size:var(--t-s)}

/* Confirmation */
.ok{display:none;text-align:center;background:var(--blanc);border-radius:var(--rayon-l);box-shadow:inset 0 0 0 1px var(--ligne);padding:var(--e-4) var(--e-3)}
.ok-i{width:56px;height:56px;border-radius:50%;background:var(--vert-pale);color:var(--vert);display:grid;place-items:center;margin:0 auto 12px}
.ok-i svg{width:28px;height:28px}
.ok h2{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:var(--t-xl);color:var(--vert-fonce)}
.ok p{color:var(--gris);margin-top:var(--e-1)}
.ok .wa{display:inline-flex;align-items:center;gap:var(--e-1);min-height:48px;margin-top:var(--e-2);background:#1F7A45;color:var(--blanc);font-weight:700;text-decoration:none;border-radius:var(--rayon-bouton);padding:0 var(--e-3)}
.ok .wa svg{width:18px;height:18px}
body.sent .bk-grid,body.sent .bar,body.sent .bk-intro .bk-trust{display:none}
body.sent .ok{display:block}

/* Pied de page court : mentions obligatoires */
.bk-foot{max-width:var(--largeur);margin:0 auto;padding:var(--e-3) var(--e-2) var(--e-4);font-size:var(--t-xs);color:var(--gris);text-align:center}
.bk-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e-1);color:var(--gris)}

/* Bandeau cookies (mêmes fonctions que le site : js/site.js) */
#cookie-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--vert-fonce);color:var(--blanc);border-radius:var(--rayon-l);padding:var(--e-2);display:none;flex-wrap:wrap;align-items:center;gap:var(--e-1) var(--e-2);font-size:var(--t-xs);box-shadow:0 10px 30px rgba(0,0,0,.25)}
#cookie-bar p{flex:1 1 260px}
#cookie-bar a{color:var(--vert-clair)}
.ck-btns{display:flex;gap:var(--e-1)}
.ck-btns button{min-height:44px;border-radius:var(--rayon);padding:0 var(--e-2);font-weight:700}
.ck-no{background:rgba(255,255,255,.12);color:var(--blanc)}
.ck-ok{background:var(--blanc);color:var(--vert-fonce)}
@media(min-width:960px){#cookie-bar{left:auto;max-width:520px}}
/* Champ piège anti-robots (Formspree _gotcha), invisible */
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Place réservée aux listes construites par js/devis.js (options, dates) : rien ne bouge au chargement */
#opts:empty{min-height:296px}
#days:empty{min-height:78px}
/* Options sur téléphone : le prix passe sous le libellé (libellés longs) */
@media(max-width:600px){
  .opt{flex-wrap:wrap}
  .opt-l{flex:1 1 calc(100% - 40px)}
  .opt-p{flex-basis:100%;padding-left:36px;text-align:left}
}

/* Cartes « Qu'est-ce qu'on nettoie ? » : grande icône centrée (style D choisi le 02/11/2026) */
.cat{text-align:center;padding-top:var(--e-2)}
.cat-i{display:grid;place-items:center;height:64px}
.cat-i svg{width:60px;height:60px}
.cat-i .f{fill:var(--vert-pale);stroke:var(--vert);stroke-width:1.75;stroke-linejoin:round}
.cat-i .l{fill:none;stroke:var(--vert);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cat.on .cat-i .f{fill:var(--vert-clair)}
.cat-b{padding:var(--e-1) var(--e-1) 12px}

/* Formes des canapés dans le choix de la taille */
.sz-i{flex:none;width:48px;height:32px}
.sz-i .f{fill:var(--vert-pale);stroke:var(--vert);stroke-width:1.5}
.sz-i .l{fill:none;stroke:var(--vert);stroke-width:1.5}
.st-photo{margin:var(--e-2) 0 0;font-size:var(--t-s)}
.st-photo a{color:var(--vert);font-weight:600}
@media(max-width:420px){.sz{gap:12px}.sz-i{width:36px;height:24px}}

/* Offre bien visible dans la réservation (accord d'Erwan, 02/11/2026) */
.devis-offre{display:flex;gap:12px;align-items:flex-start;margin:0 0 var(--e-2);padding:12px var(--e-2);border-radius:var(--rayon);background:var(--vert-fonce);color:var(--blanc)}
.devis-offre[hidden]{display:none}
.devis-offre svg{flex:none;width:32px;height:32px;padding:6px;border-radius:10px;background:var(--vert-clair);color:var(--vert-fonce)}
.devis-offre p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:var(--t-xs);line-height:1.4}
.devis-offre b{font-size:var(--t-s);color:var(--vert-clair)}
.rc-l.remise{align-items:center}
.rc-l.remise span:nth-child(2){flex:1;color:var(--vert-fonce);font-weight:600}
.remise-b{flex:none;background:var(--vert-clair);color:var(--vert-fonce);font-weight:800;font-size:12px;padding:2px 8px;border-radius:999px}
.rc-eco{margin-top:var(--e-1);padding:8px 12px;border-radius:12px;background:var(--vert-pale);color:var(--vert);font-weight:800;text-align:center}
.rc-eco[hidden],.rc-astuce[hidden]{display:none}
.rc-astuce{margin-top:var(--e-1);padding:8px 12px;border-radius:12px;border:1.5px dashed var(--vert);color:var(--vert-fonce);font-size:var(--t-xs);font-weight:600}