/* ============================================================
   Téléphone du héros : cadre fixe + trois médiappli en fondu.
   Toutes les tailles sont en cqw (largeur de .hero__device = celle du téléphone) :
   le rendu reste net et proportionné quelle que soit la taille affichée.
   Chaque écran porte sa palette en variables locales (--c-*) : rien ne fuit de l'un à l'autre.
   ============================================================ */

/* -------- Cadre, encoche, barre d'état (fixes) -------- */
.phone {
  position: relative; margin: 0; width: 100%;
  aspect-ratio: 9 / 19.2;
  padding: 3.4cqw;
  border-radius: 14cqw;
  background: #121212;
  box-shadow: inset 0 0 0 0.6cqw #3a3a3a, 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  transform: rotate(4deg);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 1.2cqw; border-radius: 1cqw; background: #2a2a2a; }
.phone::before { right: -1cqw; top: 26%; height: 14%; }
.phone::after { left: -1cqw; top: 20%; height: 8%; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 10.8cqw; background: #0B2A3C; font-family: var(--mp-font-sans); line-height: 1.25; }
.phone svg { display: block; }
.phone__status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 3.6cqw 7cqw 0; font-size: 3.6cqw; font-weight: 600;
  color: #fff; transition: color var(--showcase-fade);
}
.phone__status svg { height: 3cqw; width: auto; }
.phone__island { width: 27cqw; height: 7.6cqw; border-radius: 4cqw; background: #121212; }
/* La couleur des icônes de la barre d'état suit l'écran affiché. */
.phone__screen:has(.screen--entraide.is-active) .phone__status { color: #2A2620; }

/* -------- Mécanique du fondu (commune aux trois écrans) -------- */
.phone__slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; z-index: 0;
  transition: opacity var(--showcase-fade) cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear var(--showcase-fade);
}
.phone__slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }
.phone__slide.is-leaving { visibility: visible; z-index: 1; }
.phone__slide img { max-width: none; }
.phone__photo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); filter: blur(6px);
  transition: transform var(--showcase-fade) cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--showcase-fade) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-active .phone__photo { transform: scale(1); filter: blur(0); }
/* Texte entrant : monte de 12 px, décalé de 10 % de la transition. */
.phone__in {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--showcase-fade) cubic-bezier(0.22, 0.61, 0.36, 1), transform var(--showcase-fade) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-active .phone__in { opacity: 1; transform: none; transition-delay: calc(var(--showcase-fade) * 0.1); }
.is-leaving .phone__in { transition-delay: 0s; }
/* Voile orange léger qui traverse l'écran de gauche à droite à l'arrivée. */
.phone__sweep {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 106, 43, 0.34) 45%, transparent 90%);
  transform: translateX(-100%); opacity: 0;
}
.is-active .phone__sweep { animation: phone-sweep var(--showcase-fade) cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes phone-sweep { 0% { transform: translateX(-100%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* Bannière de notification (décorative), en superposition sous l'îlot : n'affecte pas
   la mise en page de l'écran. Glisse du haut 1,2 s après l'arrivée de l'écran, reste
   environ 4 s puis s'efface ; poursuivie pendant le fondu de sortie (.is-leaving),
   relancée à chaque retour de l'écran. */
.phone__notif {
  position: absolute; top: 13cqw; left: 5%; width: 90%; z-index: 7; box-sizing: border-box;
  display: flex; align-items: center; gap: 2.4cqw; padding: 2.2cqw 3cqw;
  border-radius: 4.4cqw; background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1.6cqw 5cqw rgba(0, 0, 0, 0.22);
  color: #1C1B1A; line-height: 1.2; text-align: left; pointer-events: none;
  opacity: 0; transform: translateY(-140%);
}
.phone__notif-icon { flex: none; width: 7.4cqw; height: 7.4cqw; border-radius: 1.8cqw; }
.phone__notif-text { display: flex; flex-direction: column; min-width: 0; }
.phone__notif-text b, .phone__notif-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone__notif-text b { font-size: 3.2cqw; font-weight: 700; }
.phone__notif-text span { font-size: 2.9cqw; color: #4A4640; }
.is-active .phone__notif, .is-leaving .phone__notif { animation: phone-notif 4.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s both; }
@keyframes phone-notif {
  0% { opacity: 0; transform: translateY(-140%); }
  10% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes phone-notif-still { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* Rythme : source unique, lue aussi par phone_showcase_controller.js.
   5 s entre deux changements, dont 2 s de fondu (3 s d'écran stable). */
[data-controller~="phone-showcase"] { position: relative; --showcase-interval: 5000ms; --showcase-fade: 2000ms; }

/* ============================================================
   1. Filière hydrogène : sobre, institutionnelle, tableau de bord
   ============================================================ */
.screen--hydrogene {
  --c-bg: #0B2A3C; --c-bg2: #081F2E; --c-accent: #19B5A5; --c-ice: #E8F6F8; --c-mute: #9FC3CB; --r: 2.4cqw;
  background: var(--c-bg); color: var(--c-ice); font-family: "Manrope", var(--mp-font-sans); font-weight: 600;
}
.hy-hero { position: relative; flex: none; height: 89cqw; overflow: hidden; }
.hy-hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.5) 78%, #0B2A3C 100%); }
.hy-hero__in { position: absolute; inset: 0; padding: 11.5cqw 5cqw 3cqw; display: flex; flex-direction: column; justify-content: space-between; }
.hy-logo { display: flex; align-items: center; gap: 2.4cqw; }
.hy-logo img { width: 9cqw; height: 9cqw; }
.hy-logo b { display: block; font-weight: 800; font-size: 5.4cqw; line-height: 1.1; color: #fff; }
.hy-logo small { display: block; margin-top: 0.4cqw; font-size: 4.1cqw; font-weight: 600; color: var(--c-ice); text-shadow: 0 0.2cqw 1.4cqw rgba(0, 0, 0, 0.6); }
.hy-chip { display: inline-block; padding: 0.7cqw 2.4cqw; border-radius: var(--r); background: var(--c-accent); color: var(--c-bg); font-size: 2.9cqw; font-weight: 800; letter-spacing: 0.04em; }
.hy-title { text-wrap: balance; margin-top: 1.6cqw; font-size: 5cqw; font-weight: 800; line-height: 1.18; color: #fff; text-shadow: 0 0.3cqw 2cqw rgba(0, 0, 0, 0.5); }
.hy-stats { flex: none; margin: 0 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 0.3cqw solid rgba(25, 181, 165, 0.45); }
.hy-stats div { padding: 3.2cqw 2cqw 3cqw 0; }
.hy-stats div + div { padding-left: 3cqw; border-left: 0.3cqw solid rgba(232, 246, 248, 0.16); }
.hy-stats dt { font-size: 8cqw; font-weight: 800; line-height: 1; color: var(--c-accent); }
.hy-stats dd { margin: 1.2cqw 0 0; font-size: 3.1cqw; line-height: 1.25; color: var(--c-ice); }
.hy-list { flex: none; margin: 1.5cqw 5cqw 0; }
.hy-list li { display: flex; align-items: center; gap: 3.2cqw; padding-block: 3.3cqw; border-bottom: 0.3cqw solid rgba(232, 246, 248, 0.16); }
.hy-list img { flex: none; width: 15cqw; height: 15cqw; border-radius: var(--r); object-fit: cover; }
.hy-list small { display: block; margin-bottom: 1cqw; font-size: 2.8cqw; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-accent); }
.hy-list b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 3.8cqw; font-weight: 600; line-height: 1.28; color: #fff; }
.hy-tabs { flex: none; margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; box-sizing: border-box; height: 19.2cqw; padding: 3cqw 4cqw 0; background: var(--c-bg2); border-top: 0.3cqw solid rgba(232, 246, 248, 0.14); }
.hy-tabs span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; font-size: 2.9cqw; font-weight: 600; white-space: nowrap; color: #4A3942; }
.hy-tabs svg { width: 5.4cqw; height: 5.4cqw; }
.hy-tabs .is-on { color: var(--c-accent); }
.hy-tabs .tab-main { --tab-pad: 3cqw; --tab-main-bg: var(--c-accent); --tab-main-ring: var(--c-bg2); }

/* ============================================================
   2. Entraide solidaire : chaleureuse, humaine, orientée action
   ============================================================ */
.screen--entraide {
  --c-bg: #FFF6E8; --c-brick: #E8541E; --c-brick-deep: #C9420F; --c-green: #2F6B4F; --c-ink: #2A2620; --c-sand: #F3DCC8; --r: 6cqw;
  background: var(--c-bg); color: var(--c-ink); font-family: "Inter", var(--mp-font-sans); font-weight: 500;
}
.en-head { flex: none; display: flex; align-items: center; gap: 2.6cqw; padding: 12cqw 5cqw 0; }
.en-head img { width: 10cqw; height: 10cqw; }
.en-head b { display: block; font-family: "Fraunces", var(--mp-font-serif); font-weight: 600; font-size: 5.6cqw; line-height: 1.1; color: var(--c-green); }
.en-head small { display: block; margin-top: 0.5cqw; font-size: 4.1cqw; line-height: 1.2; color: #4F5A50; }
.en-photo { position: relative; flex: none; margin: 3.4cqw 4.5cqw 0; height: 68cqw; overflow: hidden; border-radius: var(--r); background: var(--c-sand); }
.en-photo__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0) 100%); }
.en-sticker { position: absolute; top: 3.4cqw; left: 3.4cqw; padding: 1.2cqw 3cqw; border-radius: 99px; background: var(--c-brick-deep); color: #fff; font-size: 3.3cqw; font-weight: 700; transform: rotate(-5deg); box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.3); }
.en-photo figcaption { position: absolute; left: 4cqw; right: 4cqw; bottom: 3.4cqw; font-family: "Fraunces", var(--mp-font-serif); font-weight: 600; font-size: 5.8cqw; line-height: 1.12; color: #fff; text-shadow: 0 0.3cqw 1.6cqw rgba(0, 0, 0, 0.5); }
.en-gauge { flex: none; margin: 3.8cqw 4.5cqw 0; padding: 3cqw 4cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 1cqw 3cqw -1cqw rgba(60, 40, 20, 0.18); }
.en-gauge p { font-size: 3.5cqw; font-weight: 700; color: var(--c-green); }
.en-gauge__bar { display: block; margin-top: 2cqw; height: 3cqw; border-radius: 99px; background: var(--c-sand); overflow: hidden; }
.en-gauge__bar i { display: block; height: 100%; border-radius: 99px; background: var(--c-brick); }
.en-gauge .en-gauge__note { margin-top: 1.8cqw; font-size: 3.4cqw; font-weight: 500; color: var(--c-ink); }
.en-crew { flex: none; display: flex; align-items: center; gap: 3cqw; margin: 3.8cqw 4.5cqw 0; }
.en-crew__dots { display: flex; }
.en-crew__dots i { display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; margin-left: -2cqw; border: 0.7cqw solid var(--c-bg); border-radius: 50%; color: #fff; font-size: 2.7cqw; font-style: normal; font-weight: 700; }
.en-crew__dots i:first-child { margin-left: 0; }
.en-crew b { font-size: 3.5cqw; font-weight: 700; color: var(--c-ink); }
.en-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin: 3.8cqw 4.5cqw 0; }
.en-btn { display: grid; place-items: center; height: 10.6cqw; border-radius: 99px; font-size: 3.5cqw; font-weight: 700; }
.en-btn--fill { background: var(--c-brick-deep); color: #fff; }
.en-btn--line { border: 0.5cqw solid var(--c-green); color: var(--c-green); }
.en-news { flex: none; display: flex; align-items: center; gap: 3cqw; margin: 3.8cqw 4.5cqw 0; }
.en-news + .en-news { margin-top: 2.6cqw; }
.en-news img { flex: none; width: 11cqw; height: 11cqw; border-radius: 3cqw; object-fit: cover; }
.en-news b { display: block; font-size: 3.5cqw; font-weight: 600; line-height: 1.25; }
.en-news small { display: block; margin-top: 0.8cqw; font-size: 3cqw; color: #5F5A50; }
.en-tabs {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 4.2cqw; height: 15cqw;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  border-radius: 99px; background: #fff; box-shadow: 0 1.4cqw 4cqw -0.6cqw rgba(60, 40, 20, 0.32);
}
.en-tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; font-size: 2.9cqw; font-weight: 600; white-space: nowrap; color: #5F5A50; }
.en-tabs svg { width: 5.4cqw; height: 5.4cqw; }
.en-tabs .is-on { color: var(--c-green); }
.en-tabs .en-tabs__main { margin-top: -9cqw; color: var(--c-green); font-weight: 700; }
.en-tabs__main i { display: grid; place-items: center; width: 13.5cqw; height: 13.5cqw; border-radius: 50%; background: var(--c-brick-deep); color: #fff; box-shadow: 0 1cqw 2.4cqw rgba(201, 66, 15, 0.45); border: 0.8cqw solid #fff; }
.en-tabs__main i svg { width: 6cqw; height: 6cqw; }

/* ============================================================
   3. Ensemble contre le cancer du sein : mobilisation autour d'un événement
   ============================================================ */
.screen--cancer {
  --c-plum: #3B0F2A; --c-magenta: #D6246E; --c-pale: #FDE7F0; --r: 5cqw;
  background: #141211; color: #fff; font-family: "Inter", var(--mp-font-sans); font-weight: 500;
}
.ca-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.5) 100%); }
.ca-head { position: relative; flex: none; display: flex; align-items: center; gap: 2.4cqw; padding: 12cqw 5cqw 0; }
.ca-head img { width: 11cqw; height: 11cqw; }
.ca-head b { display: block; font-family: "DM Serif Display", var(--mp-font-serif); font-weight: 400; font-size: 9cqw; line-height: 1; color: #fff; }
.ca-head em { display: block; margin-top: 0.8cqw; font-style: normal; font-size: 2.7cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }
.ca-head small { display: block; margin-top: 1cqw; font-size: 4.1cqw; color: #fff; text-shadow: 0 0.2cqw 1.4cqw rgba(0, 0, 0, 0.6); }
/* Carte en plein cadre : du bord gauche au bord droit et jusqu'au bas de l'écran ; haut fondu dans la photo ; légende et onglets en surimpression. */
.ca-event { position: absolute; top: 117.5cqw; left: 0; right: 0; bottom: 0; color: var(--c-plum); }
.ca-map { position: absolute; inset: 0; overflow: hidden; background: #f3ede4; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3cqw); mask-image: linear-gradient(180deg, transparent 0, #000 3cqw); }
.ca-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 55%; }
.ca-me { position: absolute; width: 3cqw; height: 3cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #2F7BEA; border: 0.5cqw solid #fff; box-shadow: 0 0 0 2.2cqw rgba(47, 123, 234, 0.2); }
.ca-pin { --s: 4.6cqw; position: absolute; width: 0; height: 0; }
.ca-pin--big { --s: 6.4cqw; }
.ca-pin i, .ca-pin b { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) * -1.207); width: var(--s); height: var(--s); }
.ca-pin i { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.35); }
.ca-pin b { display: grid; place-items: center; }
.ca-pin svg { width: 52%; height: 52%; }
.ca-pin--mammo i { background: #D6246E; border: 0.3cqw solid #fff; }
.ca-pin--mammo b, .ca-pin--talk b, .ca-pin--race b { color: #fff; }
.ca-pin--talk i { background: #6B3FA0; border: 0.3cqw solid #fff; }
.ca-pin--race i { background: #E8A317; border: 0.3cqw solid #fff; }
.ca-bubble { position: absolute; transform: translate(4.6cqw, -5.6cqw); padding: 1cqw 2cqw; border-radius: 99px; background: #fff; color: var(--c-plum); font-size: 2.5cqw; font-weight: 700; white-space: nowrap; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.3); }
.ca-legend { list-style: none; margin: 0; padding: 2cqw 2.8cqw; position: absolute; left: 3.5cqw; bottom: 22.6cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw); box-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.28); font-size: 3.1cqw; font-weight: 600; color: #3F3239; white-space: nowrap; }
.ca-legend li { display: flex; align-items: center; gap: 1.2cqw; }
.ca-legend__dot { flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; }
.ca-legend__dot--mammo { background: #D6246E; }
.ca-legend__dot--talk { background: #6B3FA0; }
.ca-legend__dot--race { background: #E8A317; }
.ca-tabs { position: relative; flex: none; margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; box-sizing: border-box; height: 19.2cqw; padding: 1.4cqw 4cqw 0; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(2.4cqw) saturate(1.2); backdrop-filter: blur(2.4cqw) saturate(1.2); border-top: 0.3cqw solid rgba(255, 255, 255, 0.7); }
.ca-tabs span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; font-size: 2.9cqw; font-weight: 600; white-space: nowrap; color: #4A3942; }
.ca-tabs i { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; }
.ca-tabs svg { width: 5.4cqw; height: 5.4cqw; }
.ca-tabs .is-on { color: var(--c-plum); font-weight: 700; }
.ca-tabs .is-on i { background: var(--c-magenta); color: #fff; }

/* -------- Points indicateurs sous le téléphone (hors de l'inclinaison du cadre) -------- */
.phone-dots { position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem); display: flex; justify-content: center; gap: 0.1rem; }
.phone-dots__dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.phone-dots__dot span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: background 0.3s, transform 0.3s; }
.phone-dots__dot:hover span { background: rgba(255, 255, 255, 0.9); }
.phone-dots__dot.is-active span { background: var(--mp-orange); transform: scale(1.25); }
.phone-dots__dot:focus-visible { outline: 2px solid var(--mp-white); outline-offset: -2px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .phone__slide, .phone__photo, .phone__in, .phone__status { transition: none !important; }
  .phone__photo { transform: none; filter: none; }
  .phone__in { opacity: 1; transform: none; }
  .phone__sweep { display: none; }
  .phone__notif { transform: none; }
  .is-active .phone__notif, .is-leaving .phone__notif { animation-name: phone-notif-still; }
}
[data-controller~="phone-showcase"].is-instant .phone__slide,
[data-controller~="phone-showcase"].is-instant .phone__photo,
[data-controller~="phone-showcase"].is-instant .phone__in,
[data-controller~="phone-showcase"].is-instant .phone__status { transition: none !important; }
[data-controller~="phone-showcase"].is-instant .phone__sweep { display: none; }

/* ============================================================
   Écrans de maquette des cartes « en service » (.phone--sm) : identité propre, aucune image.
   Tailles en cqw (largeur du .phone--sm) ; l'étiquette « Maquette » reste discrète.
   ============================================================ */
.mk { position: relative; height: 100%; padding: 12cqw 5cqw 0; font-family: var(--mp-font-sans); line-height: 1.2; overflow: hidden; }
.mk__tag { position: absolute; top: 3.6cqw; right: 6cqw; z-index: 4; padding: 0.4cqw 2cqw; border-radius: 99px; font-size: 2.76cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(120, 120, 120, 0.22); color: inherit; opacity: 0.8; }
.mk small { display: block; font-size: 3.45cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mk svg { display: block; }

/* Faire campagne : bleu profond et rouge sobre */
.mk--campagne { --c-navy: #14285A; --c-red: #C8252C; background: #F4F6FB; color: var(--c-navy); font-family: "Manrope", var(--mp-font-sans); }
.mk-c-head { display: flex; align-items: center; gap: 2.6cqw; }
.mk-c-head svg { width: 12cqw; height: 12cqw; flex: none; }
.mk-c-head b { display: block; font-weight: 800; font-size: 7.59cqw; line-height: 1.05; }
.mk-c-head small { margin-top: 0.8cqw; text-transform: none; letter-spacing: 0; font-size: 3.91cqw; font-weight: 600; color: #46557E; }
.mk-c-banner { margin-top: 4.5cqw; padding: 4cqw; border-radius: 3.4cqw; background: var(--c-navy); color: #fff; }
.mk-c-banner p { font-weight: 800; font-size: 6.9cqw; line-height: 1.1; }
.mk-c-banner span { display: block; margin-top: 1.6cqw; font-size: 3.91cqw; font-weight: 600; color: #D3DCEE; }
.mk-c-banner i { display: inline-block; margin-top: 3cqw; padding: 1.6cqw 4cqw; border-radius: 99px; background: var(--c-red); font-style: normal; font-size: 4.14cqw; font-weight: 800; }
.mk-c-rally { margin-top: 3.4cqw; padding: 4cqw; border-radius: 3.4cqw; background: #fff; border: 0.4cqw solid #D9DFEE; }
.mk-c-rally small { color: var(--c-red); }
.mk-c-rally b { display: block; margin-top: 1.4cqw; font-weight: 800; font-size: 9.66cqw; line-height: 1; }
.mk-c-rally span { display: block; margin-top: 1.4cqw; font-size: 4.14cqw; font-weight: 600; color: #46557E; }
.mk-c-rally i { display: inline-block; margin-top: 3cqw; padding: 1.8cqw 6cqw; border-radius: 99px; background: var(--c-red); color: #fff; font-style: normal; font-size: 4.37cqw; font-weight: 800; }
.mk-c-news { margin-top: 3.4cqw; }
.mk-c-news li { padding-block: 2.6cqw; border-top: 0.3cqw solid #D9DFEE; }
.mk-c-news small { color: var(--c-red); font-size: 3.1cqw; }
.mk-c-news b { display: block; margin-top: 0.8cqw; font-size: 4.6cqw; font-weight: 800; }

/* Prime de risque : ardoise, rouge, vert */
.mk--risque { background: #11161D; color: #E6EBF0; font-family: "Manrope", var(--mp-font-sans); }
.mk-r-head { display: flex; align-items: center; gap: 2.4cqw; }
.mk-r-head svg { width: 8cqw; height: 8cqw; }
.mk-r-head b { font-weight: 800; font-size: 6.9cqw; }
.mk-r-title { margin-top: 5cqw; font-weight: 800; font-size: 8.28cqw; line-height: 1.12; color: #fff; }
.mk-r-chart { margin-top: 4cqw; padding: 3.6cqw; border-radius: 3.4cqw; background: #1B232D; border: 0.3cqw solid #2A3441; }
.mk-r-chart p { font-size: 3.91cqw; font-weight: 700; color: #AEB9C6; }
.mk-r-chart svg { width: 100%; height: auto; margin-top: 2cqw; }
.mk-r-chart div { display: flex; justify-content: space-between; margin-top: 1.4cqw; font-size: 3.33cqw; font-weight: 600; color: #8997A8; }
.mk-r-news { margin-top: 3cqw; }
.mk-r-news li { padding-block: 3cqw; border-top: 0.3cqw solid #2A3441; }
.mk-r-news small { color: #3DDC97; font-size: 3.1cqw; }
.mk-r-news b { display: block; margin-top: 0.8cqw; font-size: 4.6cqw; font-weight: 800; color: #E6EBF0; }

/* Bouton « + » central commun aux trois barres (référence : Entraide). */
span.tab-main { margin-top: calc(-6.3cqw - var(--tab-pad, 0cqw)); font-weight: 700; color: #fff; }
span.tab-main i { display: grid; place-items: center; width: 13.5cqw; height: 13.5cqw; border-radius: 50%; background: var(--tab-main-bg); color: #fff; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.35); border: 0.8cqw solid var(--tab-main-ring); }
span.tab-main i svg { width: 6cqw; height: 6cqw; }
.ca-tabs .tab-main { --tab-pad: 1.4cqw; --tab-main-bg: var(--c-magenta); --tab-main-ring: #fff; }
.ca-tabs span.tab-main { color: var(--c-plum); }
.ca-tabs span.tab-main i { color: #fff; box-shadow: 0 1cqw 2.4cqw rgba(214, 36, 110, 0.45); }