/* Design moderne des 7 écrans, en production depuis le 19/10/2026 (validé par
   Romain sur image, puis sur son Galaxy en aperçu de branche).

   C'est une SURCHARGE : chaque écran garde ses propres styles dans sa page, et
   cette feuille, chargée APRÈS eux, les corrige. La réorganisation en une feuille
   commune complète a été reportée par Romain ; celle-ci en est le premier pas.
   ⚠️ Conséquence : une règle écrite dans un écran est battue par celle-ci si elles
   visent le même élément. Pour retoucher l'apparence, c'est ICI qu'on regarde
   d'abord, puis DESIGN.md, qui décrit le système.
   ⚠️ Précachée par le service worker : absente du précache, l'app retomberait en
   sous-sol sur l'ancien design, et test-service-worker.js le vérifie.

   Charte inchangée, trois tons ajoutés (inscrits dans CLAUDE.md) : ambré texte
   #3e6688 et gris #707070 pour les petits textes, qui atteignent le contraste
   recommandé de 4,5 là où #c97b2a (3,0) et #7a7a7a (3,9) ne l'atteignent pas ; et
   #b56c22, le bas du dégradé de la case du montant (design-moderne-resultat.css).
   Plus aucune capitale (décision de Romain) : seule la 1re lettre garde la sienne. */

/* ---------- Plus aucune capitale ---------- */
.tag, .sec-lbl, .card-t, .field-l, .overlay-counter, .dev-t, .res-tag, .budget-lbl { text-transform: none !important; letter-spacing: 0 !important; }

/* ---------- Lisibilité : gris et ambré texte ---------- */
.step-d, .stat-l, .trust-i, .step-ind, .back, .item-meta, .feat-d, .cta-note, .etat-sub, .opt-sub,
.opt-note, .opt-gammes, .bonus-d, .punch-2, .surf-u, .meta-k, .vide-d, .retry a, .btn-vider,
.overlay-sub, .etat-niv, .region-pick label, .tab, .item-del, .etat-chev, .add-slot { color: #707070; }
.tag, .punch-1, .opt-total strong, h3.sub-art, .essentiel strong, .tg.ambre, .cta-note a, .meta-v.todo,
.add-slot.filled, .dev-flag strong, .dev-t, .dev-warn strong, .overlay-step.active { color: #3e6688; }

/* ---------- En-tête ---------- */
.nav { padding: 18px 20px 14px; }
.pill { padding: 9px 16px; font-size: 13px; }
.back { font-size: 13.5px; }
.score-pill { padding: 5px 12px; }

/* ---------- Titres ---------- */
.h1 { letter-spacing: -.035em; }
.tag { font-size: 12.5px; padding: 6px 12px; gap: 6px; }
.sec-lbl { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em !important; color: #0e0e0e; }
.card-t { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em !important; gap: 10px; margin-bottom: 14px; }
.card-t i {
  width: 32px; height: 32px; border-radius: 10px; background: #e3eff9; color: #3e6688;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.field-l { font-size: 12.5px; font-weight: 500; color: #707070; }

/* ---------- Cartes : plus rondes, bordure plus douce ---------- */
.card, .step, .stat, .feat:not(.budget-box), .item, .meta-box, .etat, .region-pick, .tva-pick,
.variante, .analyse, .vide-bloc .vide-i { border-radius: 22px; }
.card, .step, .stat, .feat:not(.budget-box), .item, .meta-box, .etat, .region-pick, .tva-pick,
.variante, .analyse { border: 1px solid rgba(0,0,0,.06); }
.card { padding: 18px; margin: 12px 20px; }
.note, .conseil, .alert, .punch, .dev-flag, .dev-toggle, .echec { border-radius: 18px; }
.note, .conseil, .alert { border: none; padding: 15px 16px; }
.essentiel { border-radius: 16px; border: none; border-left: 3px solid #4a7396; padding: 14px 16px; }

/* ---------- Boutons ---------- */
.btn-p, .btn-s, .cta, .analyze, .cta-dark, .cta-light, .echec-retry {
  border-radius: 18px; padding-top: 17px; padding-bottom: 17px; transition: transform .12s, background .15s;
}
.btn-s, .cta-light { border: 1px solid rgba(0,0,0,.08); }
.btn-p:active, .btn-s:active, .cta:active, .analyze:active, .cta-dark:active, .cta-light:active,
.echec-retry:active, .pill:active, .item-main:active, .etat:active, .etat-btn:active, .tva-opt:active,
.slot:active, .cbtn:active, .bonus-why:active { transform: scale(.97); }

/* ---------- Champs de saisie : remplis, anneau au focus ---------- */
.surf-w input, select.region-sel, .modal-row input {
  border-radius: 14px; border: 1px solid transparent; background-color: #f7f4ee; padding-top: 13px; padding-bottom: 13px;
}
.surf-w input:focus, select.region-sel:focus, .modal-row input:focus { border-color: transparent; box-shadow: 0 0 0 2px #4a7396; background-color: #fff; }

/* ---------- Choix à cartes : sélection en anneau ---------- */
.etat-btn, .tva-opt { border-radius: 16px; border: 1px solid transparent; background: #f7f4ee; }
.etat-btn.sel, .tva-opt.sel { border-color: transparent; box-shadow: 0 0 0 1.5px #4a7396 inset; background: #e3eff9; }
.etat { border: 1px solid rgba(0,0,0,.06); padding: 14px 16px; }
.etat.sel { border-color: transparent; box-shadow: 0 0 0 1.5px #4a7396 inset; }
.etat-illu { border-radius: 16px; }
.etat-title { font-size: 17px; letter-spacing: -.01em; }
.etat.sel.deg .etat-title, .etat.sel.deg .etat-pill { color: #3e6688; }

/* ---------- Icônes en tuile ---------- */
.feat-i { width: 38px; height: 38px; border-radius: 12px; }
.step-n { width: 30px; height: 30px; border-radius: 10px; }
.alert-i { border-radius: 12px; }
.vide-i { border-radius: 20px; }

/* ---------- Barre d'onglets : l'onglet actif dans une pastille ---------- */
.tab-bar { padding: 8px 10px 14px; border-top: 1px solid rgba(0,0,0,.05); }
.tab { gap: 4px; font-size: 11px; }
.tab i { font-size: 21px; width: 56px; height: 30px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.tab.ac { color: #3e6688; font-weight: 500; }
.tab.ac i { background: #e3eff9; color: #3e6688; }

/* ---------- Accueil ---------- */
.stats { gap: 8px; }
.stat { padding: 14px 10px; }
.stat-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.step { padding: 14px 16px; gap: 14px; align-items: center; margin-bottom: 10px; }
.step-t { font-size: 14.5px; }
.how, .sec { padding-top: 22px; }
.divider { display: none; }

/* ---------- Photos ---------- */
.slot { border-radius: 18px; border: 1.5px dashed rgba(0,0,0,.14); }
.slot.filled { box-shadow: 0 0 0 2px #4a7396 inset; border-color: transparent; }
.slot .slot-tag { border-radius: 8px; }
.bonus-txt, .add-slot { border-radius: 14px; }
.cbtn { width: 34px; height: 34px; border-radius: 11px; border: 1px solid rgba(0,0,0,.08); }
.opt-row { padding: 12px 0; }
.overlay-panel { border-radius: 26px; }
.overlay-progress, .overlay-progress-bar { height: 6px; border-radius: 99px; }

/* ---------- Mes estimations ---------- */
.item { padding: 16px; }
.item-amt { font-size: 17px; }
.liste { gap: 10px; }

/* ---------- CGU ---------- */
h2.art { font-size: 19px; letter-spacing: -.02em; margin: 26px 0 10px; }
ul.lst li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c97b2a; top: 13px; left: 4px; }

/* Défaut de production corrigé au passage : sur l'accueil, les onglets (des liens) étaient soulignés */
.tab { text-decoration: none; white-space: nowrap; }
/* Accueil : « Estimer maintenant » passait sur deux lignes à 360 px. Les deux boutons s'empilent */
.cta-row { flex-direction: column; gap: 10px; }
.cta-row .btn-p, .cta-row .btn-s { width: 100%; justify-content: center; }

/* ---------- Photos : options repliables (fenêtres, climatisation) ---------- */
.opt-pli > summary { list-style: none; cursor: pointer; margin-bottom: 0; -webkit-tap-highlight-color: transparent; }
.opt-pli > summary::-webkit-details-marker { display: none; }
.opt-pli[open] > summary { margin-bottom: 14px; }
.pli-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pli-fac { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 12px; color: #707070; letter-spacing: 0; margin-top: 2px; }
.pli-fac.plein { color: #3e6688; font-weight: 500; }
.opt-pli .card-t .pli-chev { width: auto; height: auto; background: none; color: #707070; font-size: 18px; transition: transform .2s; }
.opt-pli[open] .pli-chev { transform: rotate(180deg); }
.opt-pli > summary:active { transform: scale(.99); }

/* ---------- Accueil : carte immersive sur photo (version audacieuse, 19/10/2026) ---------- */
/* Limitée à l'accueil : c'est le seul .hero qui porte les chiffres clés, les 6 autres écrans ont aussi un .hero.
   La photo est précachée par le service worker. Le fond noir sous le dégradé est le secours si elle manque :
   sans lui, le haut de la carte serait crème et le titre blanc invisible. */
.hero:has(> .stats) {
  margin: 0 16px; padding: 84px 20px 20px; border-radius: 30px; position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14,14,14,.05) 0%, rgba(14,14,14,.6) 26%, rgba(14,14,14,.93) 52%, #0e0e0e 100%),
    url('pitchs/photos/mur-abime.jpg') center 22% / cover,
    #0e0e0e;
  box-shadow: 0 26px 50px -26px rgba(14,14,14,.7);
}
.hero:has(> .stats) .tag { background: rgba(255,255,255,.14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 10px; }
.hero:has(> .stats) .tag i { color: #e8a84a; }
.hero:has(> .stats) .h1 { color: #fff; font-size: 33px; line-height: 1.04; margin-bottom: 10px; }
.hero:has(> .stats) .h1 em { color: #e8a84a; }
.hero:has(> .stats) .sub { color: rgba(255,255,255,.78); font-weight: 400; margin-bottom: 14px; }
.hero:has(> .stats) .stats { gap: 8px; margin-bottom: 14px; }
.hero:has(> .stats) .stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 9px 6px; }
.hero:has(> .stats) .stat-n { color: #fff; font-size: 21px; }
.hero:has(> .stats) .stat-l { color: rgba(255,255,255,.62); }
/* Texte noir sur ambré : contraste 5,8, contre 3,3 en blanc */
.hero:has(> .stats) .btn-p { background: #3e6688; color: #fff; font-size: 16px; }
.hero:has(> .stats) .btn-s { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.22); }
.hero:has(> .stats) .btn-s i { color: #e8a84a; }
.hero:has(> .stats) .btn-s .dur { color: rgba(255,255,255,.55); }

/* Accueil : les étapes deviennent une frise, les gages de confiance des pastilles */
.how { padding: 26px 20px 4px; }
.how .step { position: relative; background: none; border: none; padding: 0 0 20px 0; margin: 0; gap: 16px; align-items: flex-start; }
.how .step:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; border-radius: 2px; background: rgba(62,102,136,.28); }
.how .step-n { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; flex-shrink: 0; }
.how .step-t { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; margin: 6px 0 3px; }
.trust { gap: 8px; padding: 6px 20px 10px; flex-wrap: wrap; justify-content: center; }
.trust-i { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 99px; padding: 7px 12px; }