/* ──────────────────────────────────────────────────────────────────────────
   Simulateur de prix — accueil et /tarifs.html (14/09/2026)

   Un seul composant pour deux pages : balisage dans la page (il se lit sans
   JavaScript et ne saute pas au chargement), comportement dans
   js/cv-simulateur.js, AUCUN montant ici ni là — les taux et les tranches
   sortent de js/calculerTarif.js.

   Couleurs : la charte ColisVoyage (bleu #3B82F6 sur fond sombre). Texte clair
   jamais sous 0,5 d'opacité (tests/lisibilite-textes.test.js).

   Mouvement : deux éléments seulement — la tranche active qui change de fond,
   et le total qui marque le passage d'une tranche à l'autre. Rien si le
   visiteur a demandé moins d'animations.
   ────────────────────────────────────────────────────────────────────────── */
.cv-sim{
  --cv-sim-accent:var(--accent,#3B82F6);
  position:relative;
  background:rgba(13,17,23,0.78);
  border:1px solid rgba(59,130,246,.28);
  border-radius:18px;
  padding:20px;
  margin:0 0 22px;
  max-width:520px;
  color:#fff;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  box-sizing:border-box;
}
/* js/cv-cinema-bg.js rend transparent le fond de toute <section> (!important) :
   le texte blanc tombait sur la photo (4,1:1 mesure sur /tarifs.html le 19/09).
   Specificite (0,3,1) pour garder le panneau sombre ci-dessus. */
section.cv-sim.cv-sim[data-cv-simulateur]{background:rgba(13,17,23,0.78) !important}
.cv-sim *{box-sizing:border-box}
/* `hidden` perd contre un `display:grid` d'auteur : on le rétablit. */
.cv-sim [hidden]{display:none !important}
/* Dans une colonne de contenu (/tarifs.html) : la largeur de la colonne. */
.cv-sim.cv-sim--pleine{max-width:none;margin-bottom:16px;border-radius:22px}
.cv-sim-titre{margin:0 0 12px;font-size:15px;font-weight:800;color:#fff;line-height:1.3}

/* Saisie : le champ et le curseur sur une ligne, synchronisés. */
.cv-sim-label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;color:rgba(255,255,255,0.72);letter-spacing:.3px}
.cv-sim-ligne{display:flex;align-items:center;gap:14px}
.cv-sim-champ-wrap{position:relative;flex:0 0 auto;width:112px}
/* Spécificité + !important : mobile-polish.css ramène tout champ texte à 16 px
   sous 768 px (anti-zoom iOS). Ici le champ est PLUS grand, pas plus petit. */
/* LE `!important` SUR LE PADDING N'EST PAS DECORATIF.
   Mesure du 18/09/2026, sur la page en production : ce padding-right de 38 px
   ressortait CALCULE a 16 px. Le champ aligne son texte a droite et l'unite
   « kg » est posee en absolu a 12 px du bord : avec 16 px de reserve au lieu
   de 38, le chiffre et l'unite se superposaient. On lisait « 7̶k̶g̶ », un glyphe
   illisible, sur les deux pages qui portent le simulateur.
   Le meme remede etait deja applique a `font-size` deux lignes plus bas, pour
   la meme raison et avec le commentaire qui l'explique — le padding avait ete
   oublie. Une regle de ce fichier qui perd la cascade casse la lisibilite d'un
   PRIX : elle se defend. */
.cv-sim input.cv-sim-champ{
  width:100%;min-height:52px;padding:8px 38px 8px 12px;padding-right:38px !important;
  background:rgba(9,9,9,.85);border:1px solid rgba(255,255,255,.18);border-radius:12px;
  color:#fff;font-family:inherit;font-size:24px !important;font-weight:800;text-align:right;
  outline:none;
}
.cv-sim input.cv-sim-champ:focus-visible{border-color:var(--cv-sim-accent);box-shadow:0 0 0 3px rgba(59,130,246,.35)}
.cv-sim-champ[aria-invalid="true"]{border-color:#F87171}
.cv-sim-unite{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;color:rgba(255,255,255,0.72);pointer-events:none}

/* Le curseur : 44 px de zone tactile, piste remplie jusqu'au poids choisi. */
.cv-sim-curseur{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer;
  --cv-sim-pct:0%;
}
.cv-sim-curseur:focus{outline:none}
.cv-sim-curseur::-webkit-slider-runnable-track{
  height:8px;border-radius:99px;
  background:linear-gradient(to right,var(--cv-sim-accent) var(--cv-sim-pct),rgba(255,255,255,.16) var(--cv-sim-pct));
}
.cv-sim-curseur::-moz-range-track{height:8px;border-radius:99px;background:rgba(255,255,255,.16)}
.cv-sim-curseur::-moz-range-progress{height:8px;border-radius:99px;background:var(--cv-sim-accent)}
.cv-sim-curseur::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:#fff;border:4px solid var(--cv-sim-accent);box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.cv-sim-curseur::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--cv-sim-accent);box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.cv-sim-curseur:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(59,130,246,.45)}
.cv-sim-curseur:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(59,130,246,.45)}
.cv-sim-aide{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,0.62);min-height:1.4em}

/* Résultat : le total en gros, le calcul juste dessous. */
.cv-sim-resultat{margin:14px 0 12px;min-height:88px}
.cv-sim-total{
  margin:0;font-family:'Bebas Neue','DM Sans',system-ui,sans-serif;
  font-size:clamp(46px,11vw,60px);line-height:1;color:var(--cv-sim-accent);letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
}
.cv-sim-detail{margin:6px 0 0;font-size:15px;font-weight:700;color:rgba(255,255,255,0.86);line-height:1.4}

/* Au-delà du plafond : le relais Africa Post, rédigé dans la page. */
.cv-sim-fret{margin:14px 0 12px;font-size:13px;line-height:1.6;color:rgba(255,255,255,0.72)}
.cv-sim-fret strong{color:#fff}
.cv-sim-fret-titre{margin:0 0 4px;font-family:'Bebas Neue','DM Sans',system-ui,sans-serif;font-size:26px;line-height:1.1;color:var(--cv-sim-accent)}
.cv-sim-fret a{color:var(--cv-sim-accent);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}

/* Les tranches : la tranche active porte un fond, une bordure pleine ET un
   texte « votre tranche » pour les lecteurs d'écran — pas seulement une couleur. */
.cv-sim-tranches{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:54px}
.cv-sim-tranche{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 6px;border-radius:10px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,0.68);
}
.cv-sim-tranche-poids{font-size:12px;font-weight:600;white-space:nowrap}
.cv-sim-tranche-taux{font-size:15px;font-weight:800;color:rgba(255,255,255,0.86);white-space:nowrap}
.cv-sim-tranche.is-active{background:rgba(59,130,246,.2);border:2px solid var(--cv-sim-accent);padding:7px 5px;color:#fff}
.cv-sim-tranche.is-active .cv-sim-tranche-taux{color:#fff}

.cv-sim-garantie{margin:0;font-size:13px;font-weight:600;line-height:1.5;color:rgba(255,255,255,0.82)}
.cv-sim-garantie strong{color:#fff}
.cv-sim-note{margin:4px 0 14px;font-size:12px;line-height:1.5;color:rgba(255,255,255,0.62)}

/* Un seul bouton d'action, pleine largeur, 48 px. */
.cv-sim-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  padding:12px 20px;border-radius:100px;background:#2563EB;color:#fff;
  font-size:16px;font-weight:800;text-decoration:none;text-align:center;
  box-shadow:0 6px 20px rgba(59,130,246,.3);
}
.cv-sim-cta:hover{background:#1D4ED8}
.cv-sim-cta:focus-visible{outline:3px solid #fff;outline-offset:2px}

.cv-sim-annonce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cv-sim .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Points de rupture 1024 / 768 / 480 ─────────────────────────────────────
   1024 et 768 : rien à changer. Sur l'accueil le bloc garde les 520 px du
   formulaire de recherche qui le suit (l'élargir seul casserait l'alignement
   du hero) ; sur /tarifs.html il suit la colonne. Le champ, le curseur et les
   trois tranches tiennent sur une ligne jusqu'à 320 px de large.
   480 : on resserre les marges et les tailles, rien ne se réordonne. */
@media (max-width:480px){
  .cv-sim{padding:16px;border-radius:16px}
  .cv-sim-ligne{gap:10px}
  .cv-sim-champ-wrap{width:96px}
  /* Meme raison qu'au-dessus : sans `!important` cette reserve est reprise et
     le chiffre repasse sous le « kg ». */
  .cv-sim input.cv-sim-champ{font-size:22px !important;padding-right:34px !important}
  .cv-sim-tranches{gap:6px}
  .cv-sim-tranche-poids{font-size:12px}
  .cv-sim-tranche-taux{font-size:14px}
}

/* ── Mouvement : deux éléments, et seulement si le visiteur l'accepte ──── */
@media (prefers-reduced-motion: no-preference){
  .cv-sim-tranche{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
  .cv-sim-total.is-bascule{animation:cvSimBascule .24s ease-out}
}
@keyframes cvSimBascule{
  from{opacity:.55;transform:translateY(3px)}
  to{opacity:1;transform:none}
}