/* Le calculateur de budget mariage, /calculateur-budget-mariage (15/10/2026,
   app/calculateur-budget.php, assets/js/calculateur-budget.js). Servie à la
   place de site.css (templates/maison.php, `feuilles`), entre systeme.css et
   vitrine.css. Aucune valeur esthétique propre : uniquement les jetons de
   :root (systeme.css), ceux de l'analyse en 8 questions pour le curseur et
   les pastilles, ceux du budget pour les barres. */

.cb{padding-bottom:var(--e10)}
.cb-tete{max-width:var(--analyse-largeur);padding-top:var(--e9);padding-bottom:var(--e6);text-align:center}
.cb-tete .eyebrow{margin:0 0 var(--e3);color:var(--or)}
.cb-tete h1{font-size:var(--t-2xl);font-weight:400;line-height:var(--interligne-serre)}
.cb-chapo{margin:var(--e4) auto 0;max-width:var(--colonne-texte);color:var(--encre-2);font-size:var(--t-md)}

.cb-cadre{max-width:var(--analyse-largeur)}
.cb-formulaire{scroll-margin-top:calc(var(--barre-haute) + var(--e3));padding:var(--e7);background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-lg);box-shadow:var(--analyse-ombre-carte)}

/* Les quatre questions. Sans script, elles se suivent ; avec lui, une
   seule à l'écran (attribut hidden posé par le script). */
.cb-etape{min-width:0;margin:0 0 var(--e8);padding:0;border:0}
.cb-js .cb-etape{margin-bottom:0}
.cb-question{display:block;width:100%;margin:0 0 var(--e5);padding:0;font-family:var(--serif);font-size:var(--t-xl);font-weight:400;line-height:var(--interligne-serre);color:var(--encre)}
.cb-question:focus{outline:none}
.cb-legende{display:block;margin:var(--e5) 0 var(--e2);font-size:var(--t-sm);color:var(--encre-2)}
.cb-aide{margin:calc(-1 * var(--e2)) 0 var(--e5);font-size:var(--t-sm);color:var(--encre-2)}

/* La progression */
.cb-progression{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e6)}
.cb-retour{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--analyse-pastille);height:var(--analyse-pastille);padding:0;border:1px solid var(--trait);border-radius:var(--r-rond);background:var(--surface);color:var(--encre);font-size:var(--t-lg);line-height:1;cursor:pointer}
.cb-retour:focus-visible{outline:none;box-shadow:var(--analyse-anneau-focus)}
.cb-piste{position:relative;flex:1 1 auto;height:var(--analyse-piste);border-radius:var(--r-rond);background:var(--analyse-ivoire-fonce);overflow:hidden}
.cb-piste-jauge{position:absolute;inset:0 auto 0 0;width:25%;border-radius:var(--r-rond);background:var(--or);transition:width var(--duree) var(--courbe)}
.cb-compteur{flex:0 0 auto;font-size:var(--t-sm);color:var(--encre-3)}
.cb-repris{margin:0 0 var(--e5);padding:var(--e3) var(--e4);border-radius:var(--r-md);background:var(--analyse-sauge-fond);color:var(--analyse-sauge-fonce);font-size:var(--t-sm)}
.cb-repris .btn-lien{color:var(--analyse-sauge-fonce);font-size:inherit}

/* Question 1 : le curseur des invités */
.cb-invites-valeur{margin:0 0 var(--e4);text-align:center;line-height:1}
.cb-invites-valeur output{display:block;font-family:var(--serif);font-size:var(--t-4xl);font-weight:400;color:var(--encre)}
.cb-invites-valeur span{display:block;margin-top:var(--e2);font-size:var(--t-xs);letter-spacing:var(--chasse-etiquette);text-transform:uppercase;color:var(--or)}
.cb-curseur{display:flex;align-items:center;gap:var(--e3)}
.cb-pas{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--analyse-pastille);height:var(--analyse-pastille);padding:0;border:1px solid var(--trait);border-radius:var(--r-rond);background:var(--surface);color:var(--encre);font-size:var(--t-lg);line-height:1;cursor:pointer}
.cb-pas:focus-visible{outline:none;box-shadow:var(--analyse-anneau-focus)}
.cb-curseur input[type=range]{--cb-rempli:25%;flex:1 1 auto;min-width:0;height:var(--analyse-poignee);margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.cb-curseur input[type=range]::-webkit-slider-runnable-track{height:var(--analyse-piste);border-radius:var(--r-rond);background:linear-gradient(to right,var(--or) var(--cb-rempli),var(--analyse-ivoire-fonce) var(--cb-rempli))}
.cb-curseur input[type=range]::-moz-range-track{height:var(--analyse-piste);border-radius:var(--r-rond);background:var(--analyse-ivoire-fonce)}
.cb-curseur input[type=range]::-moz-range-progress{height:var(--analyse-piste);border-radius:var(--r-rond);background:var(--or)}
.cb-curseur input[type=range]::-webkit-slider-thumb{width:var(--analyse-poignee);height:var(--analyse-poignee);margin-top:calc((var(--analyse-piste) - var(--analyse-poignee)) / 2);border:var(--analyse-poignee-epaisseur) solid var(--or);border-radius:var(--r-rond);background:var(--surface);box-shadow:var(--ombre-1);-webkit-appearance:none;appearance:none}
.cb-curseur input[type=range]::-moz-range-thumb{width:var(--analyse-poignee);height:var(--analyse-poignee);box-sizing:border-box;border:var(--analyse-poignee-epaisseur) solid var(--or);border-radius:var(--r-rond);background:var(--surface);box-shadow:var(--ombre-1)}
.cb-curseur input[type=range]:focus,.cb-curseur input[type=range]:focus-visible{outline:none;box-shadow:none}
.cb-curseur input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--analyse-anneau-focus)}
.cb-curseur input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--analyse-anneau-focus)}
.cb-bornes{display:flex;justify-content:space-between;margin:var(--e2) 0 0;font-size:var(--t-xs);color:var(--encre-3)}
.cb-js .cb-bornes{padding:0 calc(var(--analyse-pastille) + var(--e3))}

/* Questions 2 et 3 : pastilles et cases, de gros boutons */
.cb-pastilles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e2)}
.cb-pastille,.cb-option,.cb-case{position:relative;display:block;cursor:pointer}
.cb-pastille input,.cb-option input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.cb-pastille span{display:flex;align-items:center;justify-content:center;min-height:var(--analyse-pastille);padding:0 var(--e2);border:1px solid var(--trait);border-radius:var(--r-rond);background:var(--surface);font-size:var(--t-base);color:var(--encre);text-align:center;transition:background var(--duree-courte) var(--courbe),border-color var(--duree-courte) var(--courbe),color var(--duree-courte) var(--courbe)}
.cb-pastille input:checked + span{border-color:var(--encre);background:var(--encre);color:var(--surface)}
.cb-pastille input:focus-visible + span,.cb-option input:focus-visible + span{box-shadow:var(--analyse-anneau-focus)}
.cb-pastille input:disabled + span{border-style:dashed;color:var(--encre-4);cursor:not-allowed}
.cb-ou{display:flex;align-items:center;gap:var(--e3);margin:var(--e5) 0;font-size:var(--t-sm);color:var(--encre-3)}
.cb-ou::before,.cb-ou::after{content:"";flex:1 1 auto;height:1px;background:var(--trait)}
.cb-option span{display:flex;align-items:center;min-height:var(--analyse-option);padding:var(--e3) var(--e5);border:1px solid var(--trait);border-radius:var(--r-md);background:var(--surface);font-size:var(--t-base);color:var(--encre)}
.cb-option span::after{content:"";flex:0 0 auto;width:var(--e5);height:var(--e5);margin-left:auto;border:1px solid var(--trait-fort);border-radius:var(--r-rond)}
.cb-option input:checked + span{border-color:var(--encre)}
.cb-option input:checked + span::after{border:var(--budget-chevron) solid var(--encre)}
.cb-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
.cb-case{display:flex;align-items:center;gap:var(--e3);min-height:var(--analyse-option);padding:var(--e2) var(--e4);border:1px solid var(--trait);border-radius:var(--r-md);background:var(--surface);font-size:var(--t-base);line-height:var(--interligne-serre);color:var(--encre)}
.cb-case input{flex:0 0 auto;width:var(--e5);height:var(--e5);margin:0;accent-color:var(--encre)}
.cb-case:has(input:checked){border-color:var(--encre);background:var(--fond)}
.cb-case:has(input:focus-visible){box-shadow:var(--analyse-anneau-focus)}

/* Question 4 : l'enveloppe */
.cb-montant{display:block;margin:0 0 var(--e4)}
.cb-montant-champ{display:flex;align-items:center;gap:var(--e3);padding:0 var(--e5);min-height:var(--analyse-option);border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--surface)}
.cb-montant-champ:focus-within{border-color:var(--encre);box-shadow:var(--anneau-focus)}
.cb-montant-champ input{flex:1 1 auto;min-width:0;padding:0;border:0;background:transparent;font-family:var(--serif);font-size:var(--t-xl);color:var(--encre)}
.cb-montant-champ input:focus{outline:none;box-shadow:none}
.cb-montant-champ span{font-family:var(--serif);font-size:var(--t-xl);color:var(--encre-3)}

.cb-nav{margin-top:var(--e6)}
.cb-suivant{width:100%;min-height:var(--e9);font-size:var(--t-base)}

/* Le résultat */
.cb-resultat{margin-top:var(--e2);scroll-margin-top:calc(var(--barre-haute) + var(--e3))}
.cb-resultat:focus{outline:none}
.cb-etiquette{margin:0 0 var(--e2);font-size:var(--t-xs);letter-spacing:var(--chasse-etiquette);text-transform:uppercase;color:var(--or)}
.cb-total{padding:var(--e6) var(--e5);border-radius:var(--r-md);background:var(--analyse-ivoire);text-align:center}
.cb-total-montant{margin:0;font-family:var(--serif);font-size:var(--t-3xl);font-weight:400;line-height:var(--interligne-serre);color:var(--encre)}
.cb-total-note{margin:var(--e2) 0 0;font-size:var(--t-sm);color:var(--encre-2)}
.cb-enveloppe{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-md);background:var(--fond-creux);font-size:var(--t-base);color:var(--encre)}
.cb-vide{margin:0;padding:var(--e5);border:1px dashed var(--trait-fort);border-radius:var(--r-md);text-align:center;color:var(--encre-2)}
.cb-barres{margin:var(--e6) 0 0;padding:0;list-style:none}
.cb-barre{display:block;padding:var(--e3) 0;border-bottom:1px solid var(--trait)}
.cb-barre:last-child{border-bottom:0}
.cb-barre-tete{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3)}
.cb-barre-nom{font-weight:500;color:var(--encre)}
.cb-barre-montant{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:500;color:var(--encre)}
.cb-barre-piste{display:block;height:var(--graphe-barre-fine);margin:var(--e2) 0;border-radius:var(--r-rond);background:var(--fond-creux);overflow:hidden}
.cb-barre-jauge{display:block;height:100%;border-radius:var(--r-rond);background:var(--or)}
.cb-barre-detail{display:block;font-size:var(--t-sm);color:var(--encre-2)}
/* Hors du total : fourchettes publiées, gâteau compris dans le traiteur,
   postes à estimer. Un cadre en pointillé, jamais confondu avec les barres. */
.cb-hors{margin-top:var(--e5);padding:var(--e4) var(--e5);border:1px dashed var(--trait-fort);border-radius:var(--r-md)}
.cb-hors ul{margin:0;padding:0;list-style:none}
.cb-hors li{padding:var(--e2) 0;font-size:var(--t-sm);color:var(--encre-2)}
.cb-hors li + li{border-top:1px solid var(--trait)}
.cb-hors li strong{display:block;font-size:var(--t-base);font-weight:500;color:var(--encre)}
.cb-hors-source{display:block;margin-top:var(--e1);font-size:var(--t-xs);color:var(--encre-3)}
.cb-hors-source a,.cb-repere a{color:inherit}
/* La moyenne nationale sous le total : un repère, en retrait. */
.cb-repere{margin:var(--e3) auto 0;max-width:var(--colonne-texte);padding-top:var(--e3);border-top:1px solid var(--trait);font-size:var(--t-xs);color:var(--encre-3)}
.cb-erreur{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-md);background:var(--rouge-fond);color:var(--rouge)}
.cb-suite{display:flex;flex-direction:column;gap:var(--e3);margin-top:var(--e7)}
.cb-suite .btn{width:100%;min-height:var(--e9);font-size:var(--t-base)}
.cb-mention{margin:var(--e4) 0 0;font-size:var(--t-note);color:var(--encre-3);text-align:center}
.cb-mention a{color:inherit}
.cb-modifier{margin:var(--e4) 0 0;text-align:center}

/* « Voir les sources » : rendu par le serveur, lisible sans script */
.cb-sources{margin-top:var(--e5);padding:var(--e4) var(--e5);border:1px solid var(--trait);border-radius:var(--r-lg);background:var(--surface)}
.cb-sources summary{display:flex;align-items:center;justify-content:center;min-height:var(--analyse-pastille);font-size:var(--t-sm);font-weight:500;color:var(--encre);cursor:pointer;list-style:none}
.cb-sources summary::-webkit-details-marker{display:none}
.cb-sources summary::after{content:"";width:var(--budget-chevron);height:var(--budget-chevron);margin-left:var(--e3);border-right:var(--budget-chevron-trait) solid currentColor;border-bottom:var(--budget-chevron-trait) solid currentColor;transform:rotate(45deg);transition:transform var(--duree-courte) var(--courbe)}
.cb-sources[open] summary::after{transform:rotate(-135deg)}
.cb-sources ol{margin:var(--e4) 0 0;padding-left:var(--e5);font-size:var(--t-sm);color:var(--encre-2)}
.cb-sources li{margin-bottom:var(--e3);overflow-wrap:anywhere}
.cb-sources a{color:var(--encre)}
.cb-sources-repris{display:block;margin-top:var(--e1)}

/* Le texte sous le calculateur */
.cb-texte{max-width:var(--analyse-largeur);margin-top:var(--e9)}
.cb-texte h2{margin:var(--e8) 0 var(--e4);font-size:var(--t-xl);font-weight:400}
.cb-texte p{margin:0 0 var(--e4);color:var(--encre-2);line-height:var(--interligne-aere)}
.cb-texte a{color:var(--encre)}
.cb-tableau{margin:var(--e5) 0 0}
.cb-tableau table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.cb-tableau caption{margin-bottom:var(--e2);text-align:left;font-size:var(--t-xs);letter-spacing:var(--chasse-etiquette);text-transform:uppercase;color:var(--encre-3)}
.cb-tableau th,.cb-tableau td{padding:var(--e3) var(--e2);border-bottom:1px solid var(--trait);text-align:left;vertical-align:top;color:var(--encre-2)}
.cb-tableau thead th{font-weight:500;color:var(--encre)}
.cb-tableau tbody th{font-weight:500;color:var(--encre)}

@media (min-width:720px){
    .cb-suite{flex-direction:row}
    .cb-suite .btn{width:auto;flex:1 1 0}
    .cb-cases{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:640px){
    .cb-tete{padding-top:var(--e7);padding-bottom:var(--e5)}
    .cb-tete h1{font-size:var(--t-xl)}
    .cb-chapo{font-size:var(--t-base)}
    .cb-formulaire{padding:var(--e5) var(--e4);border-radius:var(--r-md)}
    .cb-invites-valeur output{font-size:var(--t-3xl)}
    .cb-total-montant{font-size:var(--t-2xl)}
    .cb-case{padding:var(--e2) var(--e3);font-size:var(--t-sm)}
    /* Le tableau devient une carte par poste : aucun défilement latéral. */
    .cb-tableau thead{display:none}
    .cb-tableau caption{display:block}
    .cb-tableau table,.cb-tableau tbody,.cb-tableau tr,.cb-tableau th,.cb-tableau td{display:block;width:100%}
    .cb-tableau tr{padding:var(--e3) 0;border-bottom:1px solid var(--trait)}
    .cb-tableau th,.cb-tableau td{padding:var(--e1) 0;border-bottom:0}
    .cb-tableau td:last-child{font-size:var(--t-xs);color:var(--encre-3)}
}

@media (prefers-reduced-motion:reduce){
    .cb-piste-jauge,.cb-pastille span,.cb-sources summary::after{transition:none}
}