/* Page client — charte Bellevi_ v1 (piste 7b, validée le 7 octobre 2026).
 *
 * Archivo Expanded 900 pour le logo, les titres et les chiffres clés ; Archivo
 * pour le texte ; IBM Plex Mono pour les suffixes, étiquettes et montants.
 * Citron = accent unique (tiret, suffixe, icônes, UN bouton par écran) ;
 * citron foncé sur fond clair. Ni dégradé, ni second accent, ni ombre hors visuel héro.
 */
:root {
  /* Marque : les valeurs vivent dans tokens.css (chargé avant cette feuille). */
  --nuit: var(--mp-nuit);
  --surface-nuit: var(--mp-surface-nuit);
  --filet-nuit: var(--mp-filet-nuit);
  --lilas: var(--mp-accent);
  --lilas-fonce: var(--mp-accent-fonce);              /* tiret du logo seulement (décoratif) */
  --lilas-fonce: var(--mp-accent-fonce);      /* focus, jauge, bordures : ≥ 3,6:1 sur fond clair */
  --blanc-casse: var(--mp-blanc-casse);

  /* Sens : ce que chaque couleur veut dire sur cette page (clair par défaut). */
  --fg: var(--mp-nuit);
  --fg-muted: var(--mp-gris-sur-clair);
  --canvas: var(--mp-blanc);
  --canvas-subtle: var(--mp-blanc-casse);
  --border: var(--mp-filet-clair);
  --lien: var(--mp-nuit);
  --option: var(--mp-option);
  --option-cochee: var(--mp-option-cochee);
  --coche: var(--mp-nuit);
  --danger: var(--mp-danger);
  --radius: var(--mp-r-4);
  --font: var(--mp-police);
  --mono: var(--mp-police-mono);
  color-scheme: light;
}
:root[data-theme="sombre"] {
    --fg: var(--mp-blanc-casse); --fg-muted: var(--mp-legende-sur-nuit); --canvas: var(--mp-surface-nuit);
    --canvas-subtle: var(--mp-nuit); --border: var(--mp-filet-nuit); --lien: var(--mp-accent);
    --option: color-mix(in srgb, var(--mp-accent) 5%, transparent);
    --option-cochee: color-mix(in srgb, var(--mp-accent) 12%, transparent);
    --coche: var(--mp-accent); --danger: var(--mp-danger-sur-nuit);
    --lilas-fonce: var(--mp-accent);
    color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas-subtle); color: var(--fg); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.discret { color: var(--fg-muted); }
.petit { font-size: 13px; }
.aide { color: var(--fg-muted); font-size: 14px; }
.erreur { display: block; color: var(--danger); font-size: 13px; margin-top: 4px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bandeau-apercu { background: var(--lilas); color: var(--nuit); text-align: center; font: 500 13px var(--mono); padding: 8px 16px; }

/* ---------------------------------------------------------------- logotype */
.logotype { display: flex; align-items: baseline; gap: 10px; color: var(--blanc-casse); }
.logotype-racine { font: 900 34px/0.9 var(--font); font-stretch: 125%; letter-spacing: -0.04em; white-space: nowrap; }
.logotype-tiret { color: var(--lilas); }
.logotype-suffixe { font: 600 21px/1 var(--mono); color: var(--lilas); }   /* suffixe = racine / φ */
.pied-marque { font-weight: 900; font-stretch: 125%; letter-spacing: -0.04em; color: var(--fg); }
.pied-marque .logotype-tiret { color: var(--lilas-fonce); }

/* ---------------------------------------------------------------- en-tête nuit */
.hero { background: var(--nuit); color: var(--blanc-casse); padding: 34px 16px 120px; border-bottom: 1px solid var(--filet-nuit); }
.hero-interieur { max-width: 1120px; margin: 0 auto; }
.hero .logotype { margin-bottom: 55px; }
.surtitre { margin: 0 0 13px; font: 600 13px var(--mono); color: var(--lilas); text-transform: lowercase; letter-spacing: 0.02em; }
.hero h1 { margin: 0 0 21px; font: 900 clamp(34px, 5.2vw, 60px)/0.95 var(--font); font-stretch: 125%; letter-spacing: -0.045em; max-width: 16ch; }
.hero-texte { max-width: 60ch; margin: 0 0 8px; color: var(--mp-gris-sur-nuit); font-size: 18px; }
.hero-texte strong { color: var(--blanc-casse); }
.hero-texte a { color: var(--lilas); }
.hero-meta { margin: 21px 0 0; font: 400 13px var(--mono); color: var(--mp-legende-sur-nuit); }

/* ---------------------------------------------------------------- mise en page */
.contenu { max-width: 1120px; margin: -89px auto 0; padding: 0 16px 55px; position: relative; }
.mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 21px; align-items: start; }
.section { margin-bottom: 34px; }
.section h2 { margin: 0 0 13px; font: 900 21px/1.1 var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
.section:first-child > h2 { color: var(--blanc-casse); }
.section-titre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 4px; }
.section-titre h2 { margin: 0; }

/* ---------------------------------------------------------------- cartes de lot */
.carte-lot { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 13px; overflow: hidden; }
.carte-lot > header { display: flex; align-items: flex-start; gap: 13px; padding: 18px 21px; border-bottom: 1px solid var(--border); }
.carte-lot > header > div { flex: 1; min-width: 0; }
.carte-lot h3 { margin: 3px 0 0; font: 900 17px/1.2 var(--font); font-stretch: 125%; letter-spacing: -0.02em; }
.lot-numero { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--mp-r-3);
  background: var(--nuit); color: var(--lilas); font: 600 14px var(--mono); }
.lot-description { margin: 5px 0 0; color: var(--fg-muted); font-size: 14px; }
.lot-total { font: 600 16px var(--mono); white-space: nowrap; padding-top: 3px; }

.lignes { list-style: none; margin: 0; padding: 0; }
.ligne { display: flex; align-items: flex-start; gap: 13px; padding: 13px 21px; border-top: 1px solid var(--border); }
.ligne:first-child { border-top: 0; }
.ligne > label { display: flex; align-items: flex-start; gap: 13px; width: 100%; cursor: pointer; margin: -13px -21px; padding: 13px 21px; }
.ligne-option { background: var(--option); }
.ligne-option:has(input:checked) { background: var(--option-cochee); }
.ligne-texte { flex: 1; min-width: 0; }
.ligne-titre { display: block; font-weight: 500; }
.ligne-contenu { display: block; color: var(--fg-muted); font-size: 14px; }
.ligne-prix { white-space: nowrap; text-align: right; font: 600 15px/1.5 var(--mono); }
.ligne-prix small { font: 400 12px var(--mono); color: var(--fg-muted); }
.ligne-info { color: var(--fg-muted); font-style: italic; }
.ligne-lot { background: var(--canvas-subtle); }
.ligne-lot .ligne-titre { font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
.coche { flex: none; display: inline-grid; place-items: center; width: 21px; height: 21px; margin-top: 2px; border-radius: var(--mp-r-2);
  background: var(--lilas); color: var(--nuit); font-size: 12px; font-weight: 700; }
.ligne input[type=checkbox] { flex: none; width: 21px; height: 21px; margin: 2px 0 0; accent-color: var(--coche); cursor: pointer; }
.pastille { display: inline-block; padding: 0 8px; font: 600 11px/20px var(--mono); border-radius: var(--mp-r-2); vertical-align: 2px; }
.pastille-option { background: var(--lilas); color: var(--nuit); }

/* Bascule annuel / mensuel */
.bascule { display: inline-flex; padding: 3px; margin: 0; border: 1px solid var(--border); border-radius: var(--mp-r-3); background: var(--canvas); }
.bascule label { position: relative; margin: 0; cursor: pointer; }
.bascule input { position: absolute; opacity: 0; }
.bascule span { display: block; padding: 5px 16px; border-radius: var(--mp-r-2); font: 600 13px var(--mono); color: var(--fg-muted); text-transform: lowercase; }
.bascule input:checked + span { background: var(--nuit); color: var(--lilas); }
.bascule input:focus-visible + span { outline: var(--mp-focus); }
.periode-annuelle .si-mensuel, .periode-mensuelle .si-annuel { display: none !important; }

/* ---------------------------------------------------------------- totaux */
.colonne-totaux { position: sticky; top: 21px; }
.carte-totaux { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: 21px; }
.carte-totaux h2 { margin: 0 0 13px; font: 900 18px var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
.carte-totaux dl { margin: 0 0 16px; }
.carte-totaux dl > div { display: flex; justify-content: space-between; gap: 13px; padding: 6px 0; font-size: 14px; }
.carte-totaux dt { color: var(--fg-muted); }
.carte-totaux dd { margin: 0; font: 600 14px var(--mono); white-space: nowrap; }
.carte-totaux .sous-total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 10px; }
.carte-totaux .sous-total dt { color: var(--fg); font-weight: 500; }
.carte-totaux .discret dt, .carte-totaux .discret dd { color: var(--fg-muted); font-weight: 400; }
.budget { padding: 18px; margin: 0 0 16px; border-radius: var(--mp-r-3); background: var(--nuit); color: var(--blanc-casse); border: 1px solid var(--filet-nuit); }
.budget span { display: block; font: 600 12px var(--mono); color: var(--lilas); text-transform: lowercase; }
.budget strong { display: block; margin: 4px 0 2px; font: 900 34px/1.05 var(--font); font-stretch: 125%; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.budget small { font: 400 11px var(--mono); color: var(--mp-legende-sur-nuit); }
.calcul-en-cours [data-total] { opacity: .55; transition: opacity .1s; }
.flash-maj { animation: maj .6s ease-out; }
@keyframes maj { from { background: color-mix(in srgb, var(--mp-accent) 40%, transparent); } to { background: transparent; } }
.etat-valide { margin: 0; padding: 13px; text-align: center; font: 600 14px var(--mono); color: var(--nuit); background: var(--lilas); border-radius: var(--mp-r-3); }

/* ---------------------------------------------------------------- boutons : citron = le seul bouton d'action */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; font: 500 15px var(--font);
  color: var(--fg); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-3); cursor: pointer; }
.btn:hover { border-color: var(--fg-muted); }
.btn-primaire { background: var(--lilas); border-color: var(--lilas); color: var(--nuit); font-weight: 900; letter-spacing: -0.01em; }
.btn-primaire:hover { background: color-mix(in srgb, var(--mp-accent) 88%, black); border-color: color-mix(in srgb, var(--mp-accent) 88%, black); }
.btn-primaire:focus-visible { outline: 2px solid var(--nuit); outline-offset: 2px; }
.btn-large { width: 100%; height: auto; min-height: 48px; padding: 12px 18px; font-size: 16px; line-height: 1.2; margin-bottom: 8px; }
.seulement-sans-js { display: none; }
.sans-js .seulement-sans-js { display: inline-flex; }

.formulaire-validation { border-top: 1px solid var(--border); padding-top: 16px; }
.formulaire-validation label { display: block; font-size: 14px; font-weight: 500; margin: 13px 0 6px; }
.formulaire-validation input[type=text], .formulaire-validation input[type=email], .formulaire-validation textarea {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--fg); background: var(--canvas);
  border: 1px solid var(--border); border-radius: var(--mp-r-3); }
.formulaire-validation input:focus, .formulaire-validation textarea:focus { outline: var(--mp-focus); outline-offset: -1px; }
.case-conditions { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; margin: 16px 0 !important; cursor: pointer; }
.case-conditions input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--coche); }
.case-conditions.en-erreur span { color: var(--danger); }
.formulaire-validation .btn-large { margin-top: 8px; }

.decliner { max-width: 1120px; margin: 0 auto 34px; padding: 0 16px; color: var(--fg-muted); font-size: 14px; }
.decliner summary { cursor: pointer; }
.decliner form { margin-top: 13px; max-width: 520px; }
.decliner textarea { width: 100%; margin: 6px 0 8px; padding: 9px; font: inherit; border: 1px solid var(--border); border-radius: var(--mp-r-3); background: var(--canvas); color: var(--fg); }
.decliner .btn { height: 40px; }
.pied { text-align: center; color: var(--fg-muted); font-size: 13px; padding: 21px 16px 34px; border-top: 1px solid var(--border); }
.pied p { margin: 4px 0; }

.barre-mobile { display: none; }

@media (max-width: 880px) {
  .mise-en-page { grid-template-columns: 1fr; }
  .colonne-totaux { position: static; }
  .hero { padding-bottom: 110px; }
  .hero .logotype { margin-bottom: 34px; }
  .logotype-racine { font-size: 28px; }
  .logotype-suffixe { font-size: 17px; }
  .hero-texte { font-size: 16px; }
  .carte-lot > header, .ligne { padding-left: 16px; padding-right: 16px; }
  .ligne > label { margin: -13px -16px; padding: 13px 16px; }
  .ligne { flex-wrap: wrap; }
  .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center;
    justify-content: space-between; gap: 13px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--nuit); color: var(--blanc-casse); border-top: 1px solid var(--filet-nuit); }
  .barre-mobile span { display: block; font: 600 11px var(--mono); color: var(--lilas); text-transform: lowercase; }
  .barre-mobile strong { font: 900 21px var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
  .barre-mobile .btn { height: 44px; }
  body:has(.barre-mobile) .pied { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------- bilan carbone */
.carbone { margin: 0 0 16px; padding: 16px 0 0; border-top: 1px solid var(--border); }
.carbone h3 { margin: 0 0 6px; font: 600 12px var(--mono); color: var(--fg-muted); text-transform: lowercase; }
.carbone-accroche { margin: 0 0 12px; font-size: 14px; }
.carbone-accroche strong { font: 900 15px var(--font); font-stretch: 125%; letter-spacing: -0.02em; white-space: nowrap; }
.carbone-barres { display: grid; gap: 8px; }
.carbone-ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "libelle valeur" "piste piste"; gap: 3px 8px; font-size: 13px; }
.carbone-libelle { grid-area: libelle; color: var(--fg-muted); }
.carbone-valeur { grid-area: valeur; font: 600 13px var(--mono); white-space: nowrap; }
.carbone-piste { grid-area: piste; height: 8px; border-radius: var(--mp-r-1); background: var(--canvas-subtle); overflow: hidden; }
.carbone-barre { display: block; height: 100%; border-radius: var(--mp-r-1); transition: width .3s ease-out; }
.carbone-sans { width: 100%; background: var(--fg-muted); opacity: .45; }
.carbone-avec { width: 40%; background: var(--lilas-fonce); }
.carbone-methode { margin-top: 10px; font-size: 12px; color: var(--fg-muted); }
.carbone-methode summary { cursor: pointer; }
.carbone-methode p { margin: 6px 0 0; }

/* ---------------------------------------------------------------- exemples au survol */
.carte-lot { overflow: visible; }
.carte-lot > .lignes > .ligne:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.exemple { position: relative; display: inline-block; vertical-align: 1px; }
.exemple-lien { display: inline-block; padding: 0 6px; font: 500 11px/18px var(--mono); color: var(--fg-muted); background: none;
  border: 1px dashed var(--border); border-radius: var(--mp-r-2); cursor: pointer; text-decoration: none; }
.exemple-lien:hover, .exemple-lien:focus-visible, .exemple.ouvert .exemple-lien { color: var(--fg); border-style: solid; border-color: var(--fg-muted); }
.exemple-bulle { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 8px); width: min(300px, 78vw); display: none;
  padding: 10px; background: var(--nuit); color: var(--blanc-casse); border: 1px solid var(--filet-nuit); border-radius: var(--mp-r-3);
  font: 400 13px/1.45 var(--font); font-stretch: 100%; letter-spacing: 0; text-align: left; white-space: normal; }
.exemple-bulle img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; border-radius: var(--mp-r-2); margin-bottom: 8px; }
.exemple-texte { display: block; }
.exemple-source { display: block; margin-top: 6px; font: 400 11px var(--mono); color: var(--lilas); }
.exemple:hover .exemple-bulle, .exemple:focus-within .exemple-bulle, .exemple.ouvert .exemple-bulle { display: block; }
@media (hover: none) { .exemple:hover:not(.ouvert) .exemple-bulle { display: none; } }

/* ---------------------------------------------------------------- icônes */
.icone { flex: none; width: 16px; height: 16px; vertical-align: -3px; }
.carte-totaux dt { display: flex; align-items: center; gap: 8px; }
.carte-totaux dt .icone { color: var(--fg-muted); }
.carte-totaux .sous-total dt .icone { color: var(--fg); }
.budget span { display: flex; align-items: center; gap: 6px; }
.budget .icone { color: var(--lilas); }
.carbone h3 { display: flex; align-items: center; gap: 6px; }
.carbone h3 .icone { color: var(--lilas-fonce); width: 18px; height: 18px; }
.carbone-libelle { display: flex; align-items: center; gap: 6px; }
.carbone-libelle .icone { width: 14px; height: 14px; }
.carbone-economie { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; font-size: 13px;
  border-radius: var(--mp-r-3); background: var(--option); }
.carbone-economie .icone { color: var(--lilas-fonce); margin-top: 1px; }
.carbone-economie strong { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.carbone-methode summary { display: inline-flex; align-items: center; gap: 4px; }
.carbone-methode summary .icone { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- inclus figé / légende */
.inclus-fige { flex: none; display: inline-grid; place-items: center; width: 21px; height: 21px; margin-top: 2px;
  border-radius: var(--mp-r-2); border: 1px solid var(--border); background: var(--canvas-subtle); color: var(--fg-muted); cursor: default; }
.inclus-fige .icone { width: 13px; height: 13px; vertical-align: 0; }
.pastille-inclus { color: var(--fg-muted); border: 1px solid var(--border); background: var(--canvas-subtle); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 13px; padding: 10px 14px; font-size: 13px;
  color: var(--fg-muted); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-3); }
.legende-item { display: flex; align-items: center; gap: 8px; }
.legende-item strong { color: var(--fg); }
.legende .inclus-fige { margin-top: 0; }
.legende-case { display: inline-grid; place-items: center; width: 21px; height: 21px; color: var(--fg); }
.legende-case .icone { width: 21px; height: 21px; }
.section:first-child > .legende { margin-top: -2px; }

/* ---------------------------------------------------------------- jauge « votre pack » */
.pack { margin: 0 0 16px; padding: 12px 14px 10px; border: 1px solid var(--border); border-radius: var(--mp-r-3); background: var(--canvas-subtle); }
.pack-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.pack-icone { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nuit); color: var(--lilas); }
.pack-icone .icone { width: 15px; height: 15px; vertical-align: 0; }
.pack-titre { color: var(--fg-muted); }
.pack-libelle { margin-left: auto; font: 900 15px var(--font); font-stretch: 125%; letter-spacing: -0.02em; }
.pack-jauge { position: relative; height: 10px; border-radius: var(--mp-r-2); background: var(--border); overflow: hidden; }
.pack-remplissage { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: var(--mp-r-2); background: var(--lilas-fonce);
  transition: width .5s cubic-bezier(.3,.7,.4,1); }
.pack[data-niveau="3"] .pack-remplissage { background: var(--lilas); box-shadow: inset 0 0 0 1px var(--lilas-fonce); }
.pack-palier { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--canvas-subtle); }
.pack-palier-1 { left: 25%; } .pack-palier-2 { left: 50%; }
.pack-paliers { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 5px; font: 500 10px var(--mono); color: var(--fg-muted); text-transform: lowercase; }
.pack-paliers span:nth-child(2) { text-align: left; } .pack-paliers span:nth-child(3) { text-align: center; } .pack-paliers span:last-child { text-align: right; }
.pack[data-niveau="0"] .pack-paliers span:nth-child(1), .pack[data-niveau="1"] .pack-paliers span:nth-child(2),
.pack[data-niveau="2"] .pack-paliers span:nth-child(3), .pack[data-niveau="3"] .pack-paliers span:nth-child(4) { color: var(--fg); font-weight: 600; }
.pack-detail { display: block; margin-top: 4px; font: 400 11px var(--mono); color: var(--fg-muted); }
.pack.palier-atteint .pack-libelle { animation: palier .7s cubic-bezier(.3,1.6,.5,1); }
.pack.palier-atteint .pack-icone { animation: tremble .6s ease-in-out; }
@keyframes palier { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--lilas-fonce); } 100% { transform: scale(1); } }
@keyframes tremble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }

/* ---------------------------------------------------------------- suggestion d'option */
.suggestion { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--mp-r-3);
  border: 1px dashed var(--lilas-fonce); background: var(--option); font-size: 13px; }
.suggestion[hidden] { display: none; }
.suggestion-icone { color: var(--lilas-fonce); display: inline-flex; }
.suggestion-icone .icone { width: 18px; height: 18px; }
.suggestion-texte { flex: 1; min-width: 0; }
.suggestion-prix { font: 600 12px var(--mono); white-space: nowrap; }
.btn-ajouter { flex: none; height: 32px; padding: 0 12px; font: 600 13px var(--font); color: var(--fg); background: var(--canvas);
  border: 1px solid var(--fg); border-radius: var(--mp-r-2); cursor: pointer; }
.btn-ajouter:hover { background: var(--nuit); color: var(--lilas); border-color: var(--nuit); }
.suggestion.apparait { animation: apparait .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes apparait { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.seulement-avec-js { }
.sans-js .seulement-avec-js { display: none !important; }

/* ---------------------------------------------------------------- animations de coche */
.ligne-option.vient-d-etre-cochee { animation: coche .55s cubic-bezier(.3,1.4,.5,1); }
.ligne-option.vient-d-etre-cochee .pastille-option { animation: palier .55s cubic-bezier(.3,1.6,.5,1); }
.ligne-option.vient-d-etre-decochee { animation: decoche .3s ease-out; }
@keyframes coche { 0% { box-shadow: inset 4px 0 0 var(--lilas-fonce); } 35% { transform: scale(1.012); box-shadow: inset 4px 0 0 var(--lilas-fonce), 0 0 0 2px var(--lilas); } 100% { transform: none; box-shadow: inset 4px 0 0 transparent; } }
@keyframes decoche { from { opacity: .6; } to { opacity: 1; } }
.ligne-option:has(input:checked) { box-shadow: inset 4px 0 0 var(--lilas-fonce); }
.pastille-volante { position: fixed; z-index: 50; pointer-events: none; padding: 3px 10px; border-radius: var(--mp-r-2);
  background: var(--lilas); color: var(--nuit); font: 600 13px var(--mono); border: 1px solid var(--mp-nuit); }
.confetti { position: fixed; z-index: 50; width: 7px; height: 10px; border-radius: var(--mp-r-1); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- options liées */
.ligne-groupe .pastille-liee { color: var(--fg); border: 1px solid var(--lilas-fonce); background: transparent; display: inline-flex; align-items: center; gap: 3px; }
.pastille-liee .icone { width: 12px; height: 12px; vertical-align: 0; }
.sous-lignes { display: block; margin-top: 10px; border-left: 2px solid var(--lilas-fonce); padding-left: 12px; }
.sous-ligne { display: flex; gap: 12px; justify-content: space-between; padding: 6px 0; }
.sous-ligne + .sous-ligne { border-top: 1px dashed var(--border); }
.sous-ligne-texte { flex: 1; min-width: 0; }
.sous-ligne-titre { display: block; font-size: 15px; }
.sous-ligne-prix { font: 400 13px var(--mono); color: var(--fg-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- colonne des totaux : responsive
   PC : la colonne colle en haut de l'écran et ne dépasse jamais sa hauteur ; le haut défile,
   le budget et le bouton restent visibles. Tablette portrait et mobile : une seule colonne,
   barre fixe en bas d'écran. */
.carte-totaux { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.totaux-defilant { padding: 18px 18px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.totaux-pied { padding: 12px 18px 14px; border-top: 1px solid var(--border); background: var(--canvas); }
.totaux-pied .budget { margin: 0 0 10px; padding: 12px 14px; }
.totaux-pied .budget strong { font-size: 28px; }
.totaux-pied .btn-large { margin-bottom: 4px; }
.totaux-pied .aide { margin: 4px 0 0; font-size: 12px; }
.carte-totaux .pack { margin-bottom: 12px; }
.carte-totaux dl { margin-bottom: 10px; }
.carte-totaux dl > div { padding: 4px 0; }
.carte-totaux .suggestion { margin-bottom: 12px; }
.carbone { padding-top: 12px; margin-bottom: 10px; }

@media (min-width: 881px) {
  .colonne-totaux { top: 16px; }
  .carte-totaux { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
}
/* PC 1080p et grands écrans : plus d'air et une colonne un peu plus large. */
@media (min-width: 1400px) {
  .contenu, .hero-interieur { max-width: 1240px; }
  .mise-en-page { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
}
/* Tablette paysage / petit portable : colonne plus étroite. */
@media (min-width: 881px) and (max-width: 1100px) {
  .mise-en-page { grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; }
  .totaux-defilant { padding: 14px 14px 4px; }
  .totaux-pied { padding: 10px 14px 12px; }
  .totaux-pied .budget strong { font-size: 24px; }
  .hero h1 { font-size: 40px; }
}
/* Écrans peu hauts (portable 768 px) : on resserre l'en-tête de la colonne. */
@media (min-width: 881px) and (max-height: 820px) {
  .carte-totaux h2 { font-size: 16px; margin-bottom: 8px; }
  .pack-paliers { display: none; }
  .carbone-methode { display: none; }
}
/* Tablette portrait et mobile : une colonne, la carte suit le contenu. */
@media (max-width: 880px) {
  .carte-totaux { max-height: none; }
  .totaux-defilant { overflow: visible; }
  .totaux-pied .btn-large { display: none; }
  .totaux-pied .btn-large.seulement-sans-js { display: inline-flex; }
  .sans-js .totaux-pied .btn-primaire { display: inline-flex; }
  .legende { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .hero { padding-top: 24px; }
  .hero h1 { font-size: 30px; }
  .carte-lot > header { flex-wrap: wrap; }
  .lot-total { width: 100%; padding-left: 43px; }
  .ligne-prix { font-size: 14px; }
  .sous-ligne { flex-direction: column; gap: 2px; }
}

/* « Propulsé par MagicPropal » : la marque de l'outil, discrète sous celle du prestataire. */
.propulse { margin-top: 10px !important; font: 400 11px var(--mono); color: var(--fg-muted); letter-spacing: 0.02em; }
.propulse span { font-family: var(--font); font-size: 12px; color: var(--fg); }
.propulse strong { font-weight: 900; font-stretch: 125%; }

a.btn { text-decoration: none; }

/* ---------------------------------------------------------------- pages simples : erreurs, mentions légales */
.page-simple { background: var(--canvas-subtle); }
.barre-simple { background: var(--nuit); border-bottom: 1px solid var(--filet-nuit); padding: 13px 21px; }
.barre-simple .marque-mp { color: var(--blanc-casse); text-decoration: none; font: 400 21px var(--font); font-stretch: 125%; letter-spacing: -0.045em; }
.barre-simple .marque-mp strong { font-weight: 900; }
.contenu-simple { min-height: 60vh; padding: 55px 21px; }
.erreur-page { max-width: 560px; margin: 0 auto; text-align: left; }
.erreur-code { margin: 0; font: 900 clamp(72px, 22vw, 144px)/1 var(--font); font-stretch: 125%; letter-spacing: -0.06em; color: var(--lilas-fonce); }
.erreur-page h1 { margin: 13px 0 8px; font: 900 clamp(26px, 6vw, 34px)/1.1 var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
.erreur-texte { font-size: 18px; line-height: 1.55; color: var(--fg-muted); margin: 0 0 21px; }
.erreur-mono { margin-top: 34px; font: 400 12px var(--mono); color: var(--fg-muted); text-transform: lowercase; }
.texte-legal { max-width: 720px; margin: 0 auto; }
.texte-legal h1 { font: 900 clamp(26px, 6vw, 34px)/1.1 var(--font); font-stretch: 125%; letter-spacing: -0.03em; margin: 0 0 21px; }
.texte-legal h2 { font: 900 18px/1.2 var(--font); font-stretch: 125%; letter-spacing: -0.02em; margin: 34px 0 8px; }
.texte-legal p { margin: 0 0 13px; }
.pied-simple { background: var(--nuit); color: var(--mp-gris-sur-nuit); padding: 21px; font-size: 13px; }
.pied-simple a { color: var(--blanc-casse); }
.pied-simple .pied-marque strong { font-weight: 900; }

.coche-marque { height: 1.5em; width: auto; vertical-align: -0.35em; margin-right: 5px; }