/* style-kaoma.css — le nouveau style de KAOMA posé sur Forge (Romain, 02/10/2026 : maquette E validée, « du moment qu'on ne perd rien »).
   C'est un habillage : cette feuille ne fait que changer l'apparence (police, pilules, cartes crème, titres fins). Elle ne masque aucun
   bouton, aucun champ, aucun menu, et aucune page ne change de structure ni de code. La retirer rend l'ancien dessin, à l'identique.
   Repères du style : papier #EFE9E0, cartes crème #fcf5e9, encre #23212c, or #E8B672, vert #006434 ; Hanken Grotesk ; coins très ronds. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root{
  --kn-encre:#23212c; --kn-creme:#fcf5e9; --kn-papier:#EFE9E0; --kn-or:#E8B672; --kn-vert:#006434; --kn-gris:#5a5763;
  --radius-card:24px; --radius-btn:99px;
  --shadow:none;
}
body{font-family:'Hanken Grotesk','Helvetica Neue',system-ui,sans-serif;letter-spacing:-.005em}
h1,h2,h3,h4{font-family:'Hanken Grotesk','Helvetica Neue',system-ui,sans-serif;font-weight:500;letter-spacing:-.02em}
button,input,select,textarea{font-family:inherit}

/* La barre : plus de bandeau sombre, des pilules crème posées sur le décor (le logo officiel, le nom de l'appli, les écrans). */
.bar{background:transparent;height:auto;min-height:0;padding:14px 22px 6px;gap:10px;color:var(--kn-encre);flex-wrap:wrap}
.bar [data-kaoma-marque]{background:var(--kn-creme);border-radius:99px;padding:6px 14px 6px 8px;min-height:44px}
.bar h1{color:var(--kn-encre);background:var(--kn-creme);border-radius:99px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:600}
.bar h1 small{color:var(--kn-gris);opacity:1}
.bar .onglets{background:var(--kn-creme);border-radius:99px;padding:5px;gap:2px}
.bar .onglets a{color:var(--kn-encre);font-size:14.5px;font-weight:500;padding:8px 16px;border-radius:99px}
.bar .onglets a.on{background:var(--kn-encre);color:#fff}
.bar .onglets a:not(.on):hover{background:#fff}
.bar .sub{color:var(--kn-encre);opacity:1}
.bar .ghost{border:0;background:var(--kn-creme);color:var(--kn-encre);border-radius:99px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:500}
.bar .ghost:hover{background:#fff;color:var(--kn-encre)}

/* Les cartes : crème, sans bord ni ombre, coins très ronds. Ce qui est posé dedans reste blanc. */
.card{background:var(--kn-creme);border:0;border-radius:24px;box-shadow:none}
.card h2{font-weight:400;letter-spacing:-.02em}
.bonjour{font-weight:300!important;letter-spacing:-.03em}

/* Les boutons : des pilules. L'encre pour l'action, le contour pour le reste. */
.btn{border-radius:99px;font-weight:500;letter-spacing:-.005em}
.btn.sm{border-radius:99px}
details.menu>summary{border-radius:50%;border:0;background:var(--kn-creme)}
.menu-list{border:0;border-radius:18px;box-shadow:0 20px 60px rgba(35,33,44,.22);padding:8px}
.menu-list button{border-radius:12px;font-size:14px}

/* Les étapes et le récapitulatif : une pilule crème, l'étape en cours à l'encre. */
.recap{border-bottom:0}
.etapes{background:var(--kn-creme);border:0;border-radius:99px;padding:5px}
.etapes button{border-radius:99px;font-weight:500;font-size:14px;padding:8px 14px}
.etapes button.on{background:var(--kn-encre)}
.recap-nums b{font-family:inherit;font-weight:500}

/* Les champs : blancs, ronds, sans bord dur. */
input[type="text"],input[type="search"],input[type="number"],input[type="email"],input[type="date"],select,textarea{border-radius:14px}

/* Les chiffres gardent leur alignement. */
.recap-nums b,.lignes-total b,.ligne .tot b,.ligne .val b,.ligne .lin,.jauge-head b{font-family:inherit;font-variant-numeric:tabular-nums;font-weight:600}

/* Les lignes du devis : cartes blanches aux coins ronds. */
.ligne{border-radius:18px;border-color:transparent;box-shadow:none}
.ligne.repliee:hover{box-shadow:0 6px 20px rgba(35,33,44,.08)}
.ligne:not(.repliee){border-radius:20px}
.ligne:not(.repliee) .tete{border-radius:18px 18px 0 0}
.lignes-total{border-radius:18px;background:#fff}
.jauge{border-radius:18px;border:0;background:#fff}

/* Le bonjour de l'écran d'ouverture : un grand titre fin, comme sur l'accueil. */
.bonjour{font-size:clamp(30px,4vw,46px)!important;line-height:1!important;margin-bottom:10px}