/* Thème "vert" — base officielle de l'application depuis le 06/08 (remplace l'ancien crème/orange).
   Couleurs mesurées au pixel sur 2 générations indépendantes (Gemini puis Kling, extraction Python/PIL, pas à l'œil) —
   les deux convergent vers la même palette, ce qui la confirme. Règle du système : le NOIR porte l'info (titres,
   valeurs), le GRIS porte le secondaire, le VERT est réservé au bandeau + à la carte garantie + aux boutons —
   jamais utilisé comme couleur de texte générique. Validé par Emmanuel le 06/08/2026 — ne pas revenir au crème/orange
   (ancienne palette conservée dans styles.css.bak-avant-theme-vert-06aout si besoin de comparer). */
:root{
  --v-dark:#303A42; --v-vert:#80D2B2; --v-clair:#D0F0E3; --v-gris-carte:#E7E7EA; --v-noir:#0A0A0A;
  --grad-vert-clair:linear-gradient(135deg, #6FC7A0, #97E0C2);
  --grad-vert-fonce:linear-gradient(135deg, #163F38, #245A4E);
  /* Palette à 7 niveaux, une nuance distincte par module (clair -> foncé), même famille de vert */
  --mod-ticket:linear-gradient(135deg, #9EE3C4, #C4F1DD);
  --mod-abo:linear-gradient(135deg, #7FD6AE, #A6E8C6);
  --mod-enfant:linear-gradient(135deg, #5FC79A, #86DAB3);
  --mod-assurance:linear-gradient(135deg, #40AD82, #63C79E);
  --mod-expire:linear-gradient(135deg, #287D5E, #359173);
  --mod-promo:linear-gradient(135deg, #1C5F48, #276F57);
  --mod-bail:linear-gradient(135deg, #123F31, #1A4F3F);

  --creme:#FFFFFF;
  --creme2:#F5F6F7;
  --encre:var(--v-noir);
  --gris:#6B6459;
  --terracotta:#2D7D46;
  --terracotta-fonce:#245A4E;
  --teal:#1F5C52;
  --teal-clair:#E4EFEA;
  --ambre:#5E6B32;
  --ambre-clair:#E9EDD8;
  --rouge:#A03D28;
  --rouge-clair:#F3E1DB;
  --carte-bleu:var(--v-clair);
  --carte-vert:var(--v-clair);
  --carte-jaune:var(--v-clair);
  --carte-mauve:var(--v-clair);
  --carte-sable:var(--v-clair);
  --carte-rose:var(--v-clair);
  --ombre:0 8px 24px rgba(43,38,32,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Georgia,serif;
  background:var(--creme2);
  color:var(--encre);
}
.phone{
  width:390px; max-width:100%; min-height:100vh; margin:0 auto; background:var(--creme);
  padding:0; overflow:hidden; position:relative;
}
.screen{display:none; flex-direction:column; min-height:100vh}
.screen.active{display:flex}
.content{flex:1; padding:20px 20px 100px; overflow-y:auto}
.topbar{display:flex; justify-content:space-between; padding:14px 20px 0; font-size:13px}
.back{color:var(--gris); cursor:pointer}

h2.title{font-size:20px; line-height:1.32; margin:18px 0 8px}
p.lede{font-size:13px; color:var(--gris); line-height:1.55; margin:0 0 16px}

.btn{
  display:block; width:100%; text-align:center; padding:13px; border-radius:12px;
  background:var(--v-vert); color:var(--v-noir); font-size:14px; font-weight:600; border:none;
  cursor:pointer; text-decoration:none; margin-bottom:10px; font-family:inherit;
}
.btn-primary{background:#2D7D46; color:#fff}
.btn.caps{text-transform:uppercase; letter-spacing:.04em; font-size:12.5px}
.btn.secondary{background:transparent; border:1.5px solid var(--v-noir); color:var(--v-noir)}
.btn:disabled{opacity:.5; cursor:wait}
.btn-module{display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; font-size:16px; margin-bottom:12px}
.btn-icon{width:44px; height:44px; border-radius:11px; object-fit:cover; flex:none; background:rgba(255,255,255,.18)}
.btn-icon-emoji{display:flex; align-items:center; justify-content:center; font-size:22px}

.content.accueil{display:grid; place-content:center; justify-items:center; height:100%; padding:0 28px}
.accueil-inner{max-width:280px; text-align:center}
.accueil-inner .btn{margin-left:auto; margin-right:auto}
.accueil-logo{font-family:'Archivo Black',-apple-system,sans-serif; font-size:38px; letter-spacing:-.02em; margin-bottom:20px}
.accueil-logo span{color:var(--v-vert)}
.accueil-tagline{font-size:16px; line-height:1.5; color:var(--encre); margin:0 0 32px}
.accueil-disclaimer{font-size:10.5px; color:var(--gris); line-height:1.6; margin:26px 0 0}

.add-card{
  background:#fff; border-radius:16px; padding:22px; text-align:center; box-shadow:var(--ombre); margin-bottom:16px;
}
.cam-ico{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 14px;
}
.filet{
  font-size:11.5px; color:var(--gris); line-height:1.6; background:var(--creme2); border-radius:12px; padding:12px 14px;
  border:1px solid var(--v-gris-carte);
}
.filet b{color:var(--encre)}

.doc-preview{
  background:var(--creme2); border-radius:12px; padding:10px 14px; font-size:12.5px; color:var(--gris);
  margin-bottom:16px;
}
.field{margin-bottom:14px}
.field label{font-size:11.5px; font-weight:600; color:var(--gris); display:block; margin-bottom:4px}
.select-field{width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--v-gris-carte); font-size:14px; background:#fff; color:var(--encre); font-family:inherit}

.lien-signalement{
  display:block; background:none; border:none; text-decoration:underline; color:var(--gris);
  font-size:11px; padding:6px 0 0; cursor:pointer; text-align:left; font-family:inherit;
}
.lien-signalement:disabled{text-decoration:none; cursor:default; color:var(--teal)}
.field input{
  width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--v-gris-carte); font-size:14px;
  background:#fff; color:var(--encre); font-family:inherit;
}
.field textarea.champ-long{width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--v-gris-carte); font-size:14px; background:#fff; color:var(--encre); font-family:inherit; resize:vertical; line-height:1.5}
.field.unsure{background:var(--ambre-clair); border-radius:12px; padding:12px; margin:-4px -4px 14px}
.field.unsure input{border-color:var(--ambre)}
.tag-confirm{font-size:9.5px; padding:1px 7px; border-radius:10px; background:var(--ambre); color:#fff; font-weight:600}
.cite{
  font-size:11px; font-style:italic; color:var(--gris); margin-top:6px; padding-left:8px;
  border-left:3px solid var(--v-gris-carte); line-height:1.5;
}
.note-conf{font-size:11px; color:var(--gris); text-align:center; margin:6px 0 14px}

.countdown{
  border-radius:16px; padding:22px; text-align:center; margin-bottom:16px;
}
.countdown .num{font-size:44px; font-weight:800; line-height:1}
.countdown .lbl{font-size:13px; font-weight:600; margin-top:4px}
.contract-head{
  border-radius:12px; padding:14px 16px; margin-bottom:12px; display:flex; flex-direction:column; gap:2px;
}
.contract-head span{font-size:12.5px; color:var(--gris)}
.row-info{
  display:flex; justify-content:space-between; font-size:13px; padding:10px 0; border-bottom:1px solid var(--v-gris-carte);
}
.row-info span:first-child{color:var(--gris)}
.row-info span.g{font-weight:600; text-align:right}
.row-info.permanent{background:var(--teal-clair); border-radius:10px; padding:10px 12px; border-bottom:none; margin:6px 0}
.row-info.permanent span:first-child{color:var(--teal)}

.alert-toggle{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:14px; margin:16px 0;
  box-shadow:var(--ombre);
}
.alert-toggle .txt{flex:1; font-size:12.5px}
.alert-toggle .txt b{display:block; font-size:13px; margin-bottom:2px}
.alert-toggle .txt span{color:var(--gris)}
.toggle{
  width:38px; height:22px; border-radius:20px; background:var(--v-vert); position:relative; flex:none; cursor:pointer;
}
.toggle::after{content:""; position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:#fff}
.toggle.off{background:var(--v-gris-carte)}
.toggle.off::after{left:2px; right:auto}

.exclusions-box{background:#fff; border-radius:12px; padding:14px 16px; box-shadow:var(--ombre)}
.exclusions-box .titre{font-size:13px; font-weight:700; color:var(--v-noir); margin-bottom:8px}
.exclusions-box .item{font-size:12.5px; font-style:italic; color:var(--encre); line-height:1.5; padding:6px 0 6px 10px; border-left:3px solid var(--v-gris-carte); margin-bottom:6px}
.exclusions-box .item:last-child{margin-bottom:0}

.discl-box{
  background:var(--v-gris-carte); border-radius:12px; padding:12px 14px; font-size:11.3px;
  color:var(--gris); line-height:1.6; margin-top:14px; border:1px solid var(--v-gris-carte);
}
.discl-box b{color:var(--v-noir)}

a{color:#1F5C52; text-decoration:underline; font-weight:600}
.case-module{accent-color:var(--terracotta)}
a:hover, a:active{text-decoration:underline}
.chargement{text-align:center; padding:40px 0; color:var(--gris); font-size:13px}
.spinner{
  width:34px; height:34px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--v-clair); border-top-color:var(--v-vert);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud-warn{
  background:var(--ambre-clair); border-left:3px solid var(--ambre); border-radius:8px;
  padding:10px 12px; margin-top:10px; font-size:12px; color:var(--v-noir); line-height:1.5;
}
.cloud-warn strong{display:block; margin-bottom:2px}
.erreur-box{
  background:#F5E9E7; border:1px solid #e0b8b0; border-radius:12px; padding:14px; font-size:12.5px;
  color:var(--v-noir); margin-bottom:14px; line-height:1.5;
}

.alert-card{
  margin-top:18px; border-radius:14px; padding:16px; background:#fff; border:1.5px solid var(--ambre); box-shadow:var(--ombre);
}
.alert-card .tag{display:inline-block; background:var(--ambre-clair); color:var(--v-noir); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:10px}

/* Comparaison doublon (module Assurance) */
.compare2{display:flex; gap:10px; margin:12px 0}
.compare2 .col{flex:1; background:var(--creme2); border-radius:10px; padding:10px}
.compare2 .col b{font-size:11.5px; display:block; margin-bottom:4px}
.compare2 .col span{font-size:10.5px; color:var(--gris); line-height:1.4}
blockquote{
  font-size:11px; font-style:italic; color:var(--gris); border-left:3px solid var(--v-gris-carte);
  padding-left:11px; margin:14px 0; line-height:1.55;
}
.source-tag{font-size:9.5px; color:var(--teal); margin-top:3px; font-style:normal; display:block}

/* Checklist dossier enfant (module Papiers enfants) */
.checklist{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.cl-item{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:12px 14px; box-shadow:var(--ombre);
}
.cl-item.missing{cursor:pointer}
.cl-dot{
  width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.cl-item.done .cl-dot{background:var(--teal-clair); color:var(--teal)}
.cl-item.missing .cl-dot{background:var(--ambre-clair); color:var(--v-noir)}
.cl-dot.urgent{background:var(--rouge-clair); color:var(--rouge)}
.cl-dot.bientot{background:var(--ambre-clair); color:var(--ambre)}
.cl-dot.loin{background:var(--teal-clair); color:var(--teal)}
.cl-txt b{font-size:12.5px; display:block}
.cl-txt span{font-size:11px; color:var(--gris)}

/* Résumé des prochaines échéances sur l'accueil — tappable, invisible s'il n'y a rien à venir (le produit sait se taire) */
.resume-echeances{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:12px 14px;
  box-shadow:var(--ombre); margin-bottom:16px; cursor:pointer; border:none; width:100%; text-align:left; font:inherit;
}
.resume-echeances .cl-dot{width:30px; height:30px; font-size:15px}
.resume-echeances .cl-txt b{font-size:13px}
.resume-echeances .chevron{margin-left:auto; color:var(--gris); font-size:16px}

/* Bandeau sombre + cartes vertes — utilisables partout maintenant (plus besoin du scope .theme-vert) */
.topbar-dark{
  display:flex; align-items:center; justify-content:space-between; background:var(--v-dark);
  padding:16px 20px; border-radius:0 0 18px 18px; margin-bottom:2px;
}
.topbar-dark .back{color:var(--v-vert); font-size:22px; font-weight:700; cursor:pointer; width:24px}
.topbar-dark .topbar-titre{color:var(--v-vert); font-size:15px; font-weight:700; letter-spacing:.02em}
.row-icon{
  display:flex; align-items:center; gap:12px; background:var(--v-clair); border-radius:12px; padding:10px 12px; margin-bottom:8px;
}
.row-icon .ic{
  width:34px; height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  flex:none;
}
.row-icon .ic svg{width:18px; height:18px; stroke:var(--v-noir)}
.row-icon .txt{display:flex; flex-direction:column}
.row-icon .txt span{font-size:10.5px; color:var(--gris); text-transform:uppercase; letter-spacing:.03em}
.row-icon .txt b{font-size:13.5px; color:var(--v-noir)}

.cartes-2{display:flex; gap:10px; margin:10px 0 16px}
.carte-compare{
  flex:1; background:#fff; border-radius:14px; padding:14px 12px; text-align:left;
}
.carte-compare .ic{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.carte-compare .ic svg{width:16px; height:16px}
.carte-compare b{display:block; font-size:11.5px; line-height:1.3; margin-bottom:3px; color:var(--v-noir)}
.carte-compare span{display:block; font-size:10.5px; color:var(--gris)}
.carte-compare.garantie{border:1.5px solid var(--v-vert)}
.carte-compare.garantie .ic{background:var(--v-clair); color:var(--v-vert)}
.carte-compare.garantie .ic svg{stroke:#1F9D6E}
.carte-compare.secondaire{border:1.5px solid var(--v-gris-carte)}
.carte-compare.secondaire .ic{background:var(--v-gris-carte); color:var(--gris)}
.carte-compare.secondaire .ic svg{stroke:var(--gris)}

/* Classe conservée pour compatibilité HTML existante (ex. id="s4c") — n'a plus besoin de scoper quoi que ce soit,
   le vert est maintenant la base globale. */
.theme-vert{}

/* Dossier ZIP */
.zip-box{
  background:#fff; border-radius:14px; padding:16px; box-shadow:var(--ombre); text-align:center; margin:16px 0;
}
.zip-size{font-size:26px; font-weight:700; color:var(--encre)}
.zip-lbl{font-size:11px; color:var(--gris); margin-top:4px; line-height:1.5}