/* Cycles Blain — accueil 2026, 1.5.7 : les actus, une carte à la fois (maquette « version C » validée le 3 nov. 2026).
 * Carte de couleur un peu transparente sur la photo, VÉLO / ATELIER dans la carte, un gros bouton, vrai vélo détouré,
 * thermomètre Glagla avec son échelle. Change toute seule toutes les 3 s ; flèches, points ou glisser au doigt. */

.cba-v2 .cba-haut > .cbc { max-width: 640px; }
.cbv-accueil .cbc { margin-top: 28px; font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif; }

/* Les cartes sont posées les unes sur les autres : la hauteur ne saute pas quand elles changent */
.cbv-accueil .cbc-piste { display: grid; }
.cbv-accueil .cbc-carte { grid-area: 1 / 1; position: relative; min-height: 320px; box-sizing: border-box; padding: 26px 30px; border-radius: 26px; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 44px rgba(20, 30, 25, .30);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.cbv-accueil .cbc-carte.actif { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.cbv-accueil .cbc-mille { background: rgba(168, 64, 63, .9); color: #ffffff; }
.cbv-accueil .cbc-glagla { background: rgba(226, 240, 251, .94); color: #13324f; }
@media (min-width: 761px) {
  .cbv-accueil .cbc-carte { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* Le vrai vélo détouré */
.cbv-accueil .cbc-velo { position: absolute; right: 16px; top: 26px; width: 260px; max-width: 46%; height: auto; pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }

.cbv-accueil .cbc-haut, .cbv-accueil .cbc-milieu, .cbv-accueil .cbc-bas { position: relative; }
.cbv-accueil .cbc-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cbv-accueil .cbc-sur { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.cbv-accueil .cbc-mille .cbc-sur { background: #ffffff; color: #8e3433; }
.cbv-accueil .cbc-glagla .cbc-sur { background: #1f4e7a; color: #ffffff; }
.cbv-accueil .cbc-quand { font-size: 13px; font-weight: 600; }

.cbv-accueil .cbc-milieu { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }

/* Opération 1000 */
.cbv-accueil h2.cbc-titre { margin: 0; color: inherit; font-family: inherit; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.cbv-accueil .cbc-mille h2.cbc-titre { display: flex; flex-direction: column; gap: 4px; }
.cbv-accueil .cbc-ligne1 { display: flex; align-items: baseline; gap: 12px; }
.cbv-accueil .cbc-avant { font-size: 15px; font-weight: 600; }
.cbv-accueil .cbc-grand { font-size: 62px; font-weight: 900; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.cbv-accueil .cbc-apres { font-size: 19px; font-weight: 700; max-width: 54%; }
.cbv-accueil .cbc-don { margin: 2px 0 0; font-size: 14px; font-weight: 500; opacity: .92; }

/* Glagla : la jauge et le thermomètre */
.cbv-accueil .cbc-thermo { display: flex; align-items: center; gap: 22px; }
.cbv-accueil .cbc-jauge { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.cbv-accueil .cbc-jauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cbv-accueil .cbc-jauge-fond { fill: #ffffff; stroke: #c3dcf0; stroke-width: 20; }
.cbv-accueil .cbc-jauge-plein { fill: none; stroke: #a8403f; stroke-width: 20; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
.cbv-accueil .cbc-jauge-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cbv-accueil .cbc-jauge-txt strong { font-size: 30px; font-weight: 900; line-height: 1; color: #a8403f; letter-spacing: -.03em; white-space: nowrap; }
.cbv-accueil .cbc-jauge-txt span { margin-top: 2px; font-size: 12px; font-weight: 700; }
.cbv-accueil .cbc-glagla-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cbv-accueil h2.cbc-titre-texte { font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.cbv-accueil .cbc-texte { margin: 0; font-size: 14px; line-height: 1.4; color: #2d4c69; }
.cbv-accueil .cbc-essai { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: #13324f; }
.cbv-accueil .cbc-curseur { width: 100%; height: 24px; margin: 0; accent-color: #a8403f; cursor: pointer; }
/* l'échelle discrète sous le curseur */
.cbv-accueil .cbc-echelle { position: relative; height: 18px; margin: -2px 8px 0; font-size: 10.5px; font-weight: 600; color: #3f5f7e; }
.cbv-accueil .cbc-echelle span { position: absolute; top: 0; transform: translateX(-50%); padding-top: 5px; line-height: 1; }
.cbv-accueil .cbc-echelle span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: #7d9ab5; }

/* Le gros bouton */
.cbv-accueil .cbc-bas { display: flex; align-items: center; gap: 22px; }
.cbv-accueil a.cbc-bouton { display: inline-flex; align-items: center; gap: 14px; height: 58px; padding: 0 10px 0 28px; box-sizing: border-box; border-radius: 999px;
  font-size: 18px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.cbv-accueil a.cbc-bouton:hover { text-decoration: none; transform: translateY(-1px); }
.cbv-accueil .cbc-rond { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cbv-accueil .cbc-mille a.cbc-bouton, .cbv-accueil .cbc-mille a.cbc-bouton:hover { background: #ffffff; color: #8e3433; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.cbv-accueil .cbc-mille .cbc-rond { background: #a8403f; color: #ffffff; }
.cbv-accueil .cbc-glagla a.cbc-bouton, .cbv-accueil .cbc-glagla a.cbc-bouton:hover { background: #a8403f; color: #ffffff; box-shadow: 0 10px 26px rgba(168, 64, 63, .45); }
.cbv-accueil .cbc-glagla .cbc-rond { background: #ffffff; color: #a8403f; }
.cbv-accueil .cbc-plus { padding: 8px 0; border: 0; background: none; color: inherit; font: 600 14px Montserrat, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Flèches et points */
.cbv-accueil .cbc-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.cbv-accueil .cbc-fleche { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .92); color: #1d1d1f; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cbv-accueil .cbc-fleche:hover { background: #ffffff; }
.cbv-accueil .cbc-points { display: flex; align-items: center; gap: 2px; }
.cbv-accueil .cbc-point { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cbv-accueil .cbc-point::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .6); transition: width .25s, background .25s; }
.cbv-accueil .cbc-point.actif::before { width: 24px; background: #ffffff; }

.cbv-accueil a.cbc-bouton:focus-visible, .cbv-accueil .cbc-plus:focus-visible, .cbv-accueil .cbc-curseur:focus-visible,
.cbv-accueil .cbc-fleche:focus-visible, .cbv-accueil .cbc-point:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; }

/* Téléphone */
@media (max-width: 760px) {
  .cbv-accueil .cbc { margin-top: 20px; }
  .cbv-accueil .cbc-carte { min-height: 430px; padding: 20px; border-radius: 22px; }
  .cbv-accueil .cbc-mille { background: rgba(168, 64, 63, .92); }
  .cbv-accueil .cbc-glagla { background: rgba(226, 240, 251, .95); }
  .cbv-accueil .cbc-velo { position: relative; right: auto; top: auto; align-self: flex-end; width: 190px; max-width: 60%; margin: -6px -6px -4px 0; order: 1; }
  .cbv-accueil .cbc-haut { order: 0; }
  .cbv-accueil .cbc-milieu { order: 2; }
  .cbv-accueil .cbc-bas { order: 3; }
  .cbv-accueil .cbc-sur { font-size: 11.5px; padding: 6px 13px; }
  .cbv-accueil .cbc-quand { font-size: 12px; }
  .cbv-accueil .cbc-grand { font-size: 50px; }
  .cbv-accueil .cbc-apres { font-size: 16px; max-width: none; }
  .cbv-accueil .cbc-don { font-size: 13px; }
  .cbv-accueil .cbc-thermo { gap: 14px; }
  .cbv-accueil .cbc-jauge { width: 92px; height: 92px; }
  .cbv-accueil .cbc-jauge-txt strong { font-size: 24px; }
  .cbv-accueil .cbc-jauge-txt span { font-size: 10px; }
  .cbv-accueil h2.cbc-titre-texte { font-size: 19px !important; line-height: 1.12; }
  .cbv-accueil .cbc-texte { font-size: 12.5px; line-height: 1.35; }
  .cbv-accueil .cbc-bas { flex-direction: column; align-items: stretch; gap: 2px; }
  .cbv-accueil a.cbc-bouton { justify-content: space-between; height: 54px; padding: 0 8px 0 22px; font-size: 16px; }
  .cbv-accueil .cbc-plus { align-self: center; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cbv-accueil .cbc-carte, .cbv-accueil .cbc-carte.actif { transition: none; transform: none; }
  .cbv-accueil .cbc-jauge-plein, .cbv-accueil a.cbc-bouton { transition: none; }
}