/* Rekotla : styles de la page d'accueil uniquement (chargés après tokens.css et site.css).
   Refonte du 01/10/2026 : héros plein cadre + sélecteur d'univers, « Ce que vous y gagnez »,
   trois univers, démo « Votre journée », lecteurs (bloc masquable), vente en ligne, final sur bande verte.
   Couleurs, typo, rayons : uniquement les jetons du design system 7 (tokens.css). */

/* ---------- Téléphone : cadre titane (neutres du DS), îlot, reflet, ombre ---------- */
.phone-frame { width: min(280px, 80vw); aspect-ratio: 390 / 820; border-radius: 16% / 7.7%; padding: 2.1%; border: 3px solid transparent;
  background: linear-gradient(var(--ink-900), var(--ink-900)) padding-box,
              linear-gradient(140deg, var(--ink-400) 0%, var(--surface-2) 12%, var(--ink-600) 30%, var(--ink-900) 52%, var(--ink-600) 76%, var(--border) 90%, var(--ink-400) 100%) border-box;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-900) 12%, transparent), 0 10px 20px color-mix(in srgb, var(--ink-900) 10%, transparent), 0 30px 50px -10px color-mix(in srgb, var(--ink-900) 25%, transparent), 0 70px 100px -30px color-mix(in srgb, var(--ink-900) 40%, transparent); }
.phone-frame::before { content: ""; position: absolute; left: -7px; top: 17%; transform: none; width: 3px; height: 25%; border-radius: 2px; box-shadow: none; z-index: 0;
  background: linear-gradient(180deg, var(--ink-600) 0 16%, transparent 16% 28%, var(--ink-600) 28% 62%, transparent 62% 70%, var(--ink-600) 70% 100%); }
.phone-frame::after { content: ""; position: absolute; right: -7px; top: 27%; width: 3px; height: 13%; border-radius: 2px; background: var(--ink-600); }
.phone-screen { border-radius: 14% / 6.6%; }
.phone-screen::before { content: ""; position: absolute; z-index: 3; top: 1.8%; left: 50%; transform: translateX(-50%); width: 28%; height: 3.3%; border-radius: 100px; background: var(--ink-900); }
/* Reflet + bas d'écran neutre : la barre de navigation des captures actuelles est masquée (captures à refaire avec la nouvelle navigation) */
.phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(var(--ink-900), var(--ink-900)) no-repeat 50% 98.4% / 34% 0.55%,
    linear-gradient(0deg, var(--surface) 0 9.5%, transparent 12.5%),
    linear-gradient(118deg, color-mix(in srgb, var(--surface) 26%, transparent) 0%, color-mix(in srgb, var(--surface) 6%, transparent) 30%, transparent 46%); }
.phone-screen img { padding-top: 7.5%; background: var(--surface); }

/* ---------- Univers : textes conditionnels (le site reste en vert, html data-theme="rekotla-agri") ---------- */
html[data-theme="rekotla-agri"] [data-u="commerce"], html[data-theme="rekotla"] [data-u="agri"] { display: none; }

/* ---------- Héros ---------- */
.a-hero { position: relative; isolation: isolate; color: var(--surface); }
.a-hero picture img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.a-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--ink-900) 30%, transparent) 0%, color-mix(in srgb, var(--ink-900) 55%, transparent) 40%, color-mix(in srgb, var(--ink-900) 85%, transparent) 100%); }
.a-hero .wrap { display: grid; gap: var(--s-5); padding-block: var(--s-7) 0; }
.a-copy { padding-bottom: var(--s-5); }
.a-hero h1 { color: var(--surface); font-size: clamp(2.4rem, 9vw, 4.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: var(--s-4); }
.a-lead { font-size: 1.0625rem; max-width: 30em; margin: 0 0 var(--s-5); color: var(--surface); }
.a-hero .btn-primary { background: var(--surface); color: var(--range-1); }
.a-hero .btn-outline { color: var(--surface); border-color: var(--surface); }
.a-note { margin: var(--s-3) 0 0; font-size: .875rem; color: var(--surface); }
.a-hero :focus-visible { outline-color: var(--surface); }
.a-phone { justify-self: center; margin-bottom: -96px; position: relative; z-index: 2; }
.a-phone .phone-frame { width: 200px; }
.a-strip { padding-block: 120px var(--s-5); border-bottom: 1px solid var(--border); }
.a-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-6); }
.a-strip .stores { margin: 0; justify-content: center; }
.a-strip .label { height: 72px; width: auto; }
@media (max-width: 540px) { .a-hero .actions .btn { width: 100%; } }
@media (min-width: 900px) {
  .a-hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--ink-900) 35%, transparent) 0%, color-mix(in srgb, var(--ink-900) 18%, transparent) 35%, color-mix(in srgb, var(--ink-900) 80%, transparent) 100%); }
  .a-hero .wrap { grid-template-columns: 1.3fr .7fr; align-items: end; min-height: min(86vh, 760px); padding-block: var(--s-8) 0; }
  .a-copy { padding-bottom: var(--s-7); max-width: 620px; }
  .a-lead { font-size: 1.125rem; }
  .a-phone { justify-self: end; margin-bottom: -130px; }
  .a-phone .phone-frame { width: 270px; }
  .a-strip { padding-block: var(--s-5); }
  .a-strip .wrap { justify-content: space-between; padding-right: 310px; }
  .a-strip .label { height: 88px; }
}

/* ---------- Ce que vous y gagnez ---------- */
.gains { padding-block: var(--s-8); }
.gains h2, .univers h2, .band-green h2, .final2 h2 { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; }
.gains h2 { margin: 0 0 var(--s-6); }
.gains-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.gain { border-radius: var(--radius-xl); padding: var(--s-4); background: var(--surface-0); display: grid; gap: 4px; align-content: start; min-width: 0; }
.gain-ico { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--range-100); color: var(--range-1); display: grid; place-items: center; margin-bottom: var(--s-2); }
.gain-ico svg { width: 22px; height: 22px; }
.gain h3 { font-size: 1.0625rem; font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.gain p { margin: 0; color: var(--ink-600); font-size: .875rem; line-height: 1.45; }
.gain.pay { grid-column: 1 / -1; background: linear-gradient(160deg, var(--range-2) 0%, var(--range-1) 100%); color: var(--surface); padding: var(--s-5); overflow: hidden; }
.gain.pay h3 { color: var(--surface); font-size: clamp(1.6rem, 5vw, 2.25rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: var(--s-3); }
.pay-modes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pay-modes li { padding: 6px 12px; border-radius: var(--rpill); background: color-mix(in srgb, var(--surface) 14%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 28%, transparent); font-size: .8125rem; font-weight: 600; }
.pay-modes li.is-top { background: var(--surface); color: var(--range-1); border-color: var(--surface); }
.pay-stage { position: relative; display: grid; place-items: center; margin: var(--s-5) 0 calc(-1 * var(--s-5) - 150px); }
.pay-stage .phone-frame { width: 200px; transform: rotate(-4deg); }
@media (min-width: 900px) {
  .gains-grid { grid-template-columns: 1.15fr 1fr 1fr; gap: var(--s-4); }
  .gain { padding: var(--s-5); }
  .gain h3 { font-size: 1.25rem; }
  .gain p { font-size: .9375rem; }
  .gain.pay { grid-column: 1; grid-row: 1 / span 3; }
  .pay-stage { margin-bottom: calc(-1 * var(--s-5) - 120px); }
  .pay-stage .phone-frame { width: 190px; }
}

/* ---------- Trois univers ---------- */
.univers { padding-block: var(--s-8); background: var(--surface-0); }
.univers h2 { margin: 0 0 var(--s-2); }
.univers .sub { color: var(--ink-600); margin: 0 0 var(--s-6); }
.u-cards { display: grid; gap: var(--s-3); }
.u-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-xl); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-5); color: var(--surface); text-decoration: none; }
.u-card > img, .u-mosaic { position: absolute; inset: 0; z-index: -2; }
.u-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.u-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--range-1) 92%, transparent) 100%); }
.u-card h3 { color: var(--surface); font-size: 1.5rem; margin: var(--s-2) 0 4px; }
.u-card p { margin: 0 0 var(--s-3); color: var(--surface); font-size: .9375rem; }
.u-card .badge { align-self: flex-start; background: var(--surface); color: var(--range-1); border: 0; }
.u-card .go { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.u-card:hover > img { transform: scale(1.04); }
.u-card:focus-visible { outline: 3px solid var(--range-1); outline-offset: 3px; }
.u-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.u-mosaic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .u-cards { grid-template-columns: 1.2fr 1.2fr .8fr; } .u-card { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { .u-card > img { transition: none; } .u-card:hover > img { transform: none; } }

/* ---------- Votre journée (démo à onglets, téléphone collé) ---------- */
#application .lead { margin-bottom: var(--s-6); }
.demo .moments { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); margin-inline: calc(-1 * var(--s-5)); padding-inline: var(--s-5); scrollbar-width: none; }
.demo .moments::-webkit-scrollbar { display: none; }
.demo .moment { flex: 0 0 72%; scroll-snap-align: start; padding: var(--s-3) var(--s-4); }
.demo .moment b { font-size: 1rem; }
.demo .moment span { font-size: .875rem; }
.demo .phone { position: static; order: -1; }
.demo .phone .phone-frame { width: 220px; }
.phone figcaption { font-size: .9375rem; }
@media (min-width: 900px) {
  .demo .moments { display: grid; overflow: visible; margin-inline: 0; padding: 0; gap: var(--s-3); }
  .demo .moment { padding: var(--s-4) var(--s-5); }
  .demo .phone { position: sticky; top: 96px; order: 0; }
  .demo .phone .phone-frame { width: 270px; }
}

/* ---------- Encaisser : la scène Tap to Pay reprend le nouveau téléphone ---------- */
.tap-scene .phone-frame { width: min(250px, 72%); }
.pillar .phone-frame { width: 240px; margin-inline: auto; }
.pillar .phone-screen img { aspect-ratio: auto; max-height: none; border-radius: 0; margin: 0; }
@media (min-width: 900px) { .pillar { grid-template-columns: 1fr 1fr; } .pillar.flip > :first-child { order: 2; } }

/* ---------- Lecteurs de carte (bloc masqué en production tant que la précommande n'est pas ouverte) ---------- */
.tpe { background: var(--surface-0); }
.tpe-head { display: grid; gap: var(--s-4); align-items: end; margin-bottom: var(--s-5); }
.tpe-head p { color: var(--ink-600); max-width: 36em; margin: 0; }
.tpe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tpe-card { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--s-3); display: grid; gap: var(--s-2); align-content: start; }
.tpe-card.is-reco { border-color: var(--color-primary); }
.tpe-card .badge { position: absolute; top: var(--s-2); right: var(--s-2); }
.tpe-card img { width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.tpe-card b { display: block; font-size: .9375rem; }
.tpe-card figcaption span { color: var(--ink-600); font-size: .8125rem; line-height: 1.4; display: block; }
.tpe-src { font-size: .75rem; color: var(--ink-600); margin: var(--s-3) 0 0; }
@media (min-width: 900px) { .tpe-head { grid-template-columns: 1fr auto; } .tpe-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } .tpe-card { padding: var(--s-4); } }

/* ---------- Bandes vertes pleine largeur ---------- */
.band-green { background: linear-gradient(180deg, var(--range-2) 0%, var(--range-1) 100%); color: var(--surface); padding-block: var(--s-8); overflow: hidden; }
.band-green h2, .band-green h3, .band-green p, .band-green summary, .band-green label { color: var(--surface); }
.band-green .kicker { color: var(--range-6); }
.band-green .callout { background: color-mix(in srgb, var(--surface) 12%, transparent); border-color: color-mix(in srgb, var(--surface) 30%, transparent); }
.band-green a:not(.btn) { color: var(--surface); }
.band-green :focus-visible { outline-color: var(--surface); }
.feed { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); max-width: 440px; }
.feed li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: center; background: var(--surface); color: var(--ink-900); border-radius: var(--radius-lg); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-md); font-size: .875rem; line-height: 1.35; }
.feed i { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--range-100); color: var(--range-1); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.feed strong { display: block; color: var(--ink-900); } .feed span { color: var(--ink-600); }
@media (min-width: 540px) { .feed li:nth-child(2) { margin-left: 5%; } .feed li:nth-child(3) { margin-left: 10%; } }

/* ---------- Vendre sur internet ---------- */
.shop-stage { margin: 0; display: grid; place-items: center; }
.shop { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--ink-900) 30%, transparent); overflow: hidden; transform: rotate(-1.5deg); }
.shop-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.shop-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.shop-bar em { font-style: normal; font-size: .75rem; color: var(--ink-600); margin-left: 8px; background: var(--surface); border-radius: var(--rpill); padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-head { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); }
.shop-head b { display: block; } .shop-head small { color: var(--ink-600); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding: 0 var(--s-4); }
.shop-grid div { display: grid; gap: 2px; font-size: .875rem; }
.shop-grid span { color: var(--ink-600); font-size: .8125rem; }
.shop-cta { display: block; margin: var(--s-4); text-align: center; padding: 12px; border-radius: var(--rpill); background: var(--color-primary); color: var(--surface); font-weight: 600; font-size: .9375rem; }
/* neutralise la règle .pillar img du site à l'intérieur de la vitrine */
.pillar .shop img { aspect-ratio: auto; max-height: none; background: none; border-radius: 0; margin: 0; }
.pillar .shop .shop-head img { width: 28px; height: 28px; }
.pillar .shop .shop-grid img { border-radius: var(--radius-md); aspect-ratio: 1; object-fit: cover; margin-bottom: 4px; width: 100%; }

/* ---------- Final : deux portes ---------- */
.final2 h2 { margin: 0 0 var(--s-6); }
.doors { display: grid; gap: var(--s-3); }
.door { border-radius: var(--radius-xl); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.door h3 { font-size: 1.375rem; margin: 0; }
.door p { margin: 0; }
.door.solo { background: var(--surface); }
.door.solo h3 { color: var(--ink-900); }
.door.solo p { color: var(--ink-600); }
.door.solo .stores { margin-top: 0; }
.door.solo :focus-visible { outline-color: var(--range-1); }
.door.help { background: color-mix(in srgb, var(--surface) 12%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent); }
.door.help .btn-primary { background: var(--surface); color: var(--range-1); }
.door.help .form input { border-color: transparent; }
.door.help a:not(.btn) { font-weight: 600; }
.final2 .signature { font-size: 1.25rem; font-weight: 600; margin-top: var(--s-6); }
@media (min-width: 900px) { .doors { grid-template-columns: 1fr 1fr; gap: var(--s-4); } .door { padding: var(--s-6); } }

/* ---------- Newsletter sur une ligne ---------- */
.nl { padding-block: var(--s-7); background: var(--surface-0); }
.nl-grid { display: grid; gap: var(--s-4); align-items: center; }
.nl-grid > * { min-width: 0; }
.nl h2 { font-size: 1.25rem; margin: 0 0 var(--s-2); }
.nl p { margin: 0; }
.nl-form { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.nl-form input[type="email"] { flex: 1 1 200px; min-width: 0; font: inherit; font-size: max(1rem, 1em); min-height: var(--control-h); padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--rpill); background: var(--surface); color: var(--ink-900); }
.nl-form input::placeholder { color: var(--ink-600); opacity: 1; }
.nl-form .btn { min-height: var(--control-h); }
@media (min-width: 900px) { .nl-grid { grid-template-columns: 1fr 1fr; } }

.section h2 { margin-top: 0; }

/* ---------- Ajustements mobile ---------- */
.door .actions .btn { width: 100%; }
@media (max-width: 540px) {
  .door .actions .btn { font-size: 1rem; padding-inline: var(--s-4); }
  .pillar .phone-frame, .tap-scene .phone-frame { width: 200px; }
  .demo .phone .phone-frame { width: 200px; }
}

/* ---------- Captures de l'app (02/10/2026, nouvelle navigation flottante) ----------
   Écran plein, sans bande blanche ni fondu bas : la barre d'état est déjà nettoyée dans les images. */
.phone-screen.app { background: var(--ink-900); }
.phone-screen.app img { padding-top: 0; background: none; object-position: top; }
.phone-screen.app::after { background: linear-gradient(118deg, color-mix(in srgb, var(--surface) 22%, transparent) 0%, color-mix(in srgb, var(--surface) 5%, transparent) 30%, transparent 46%); }

/* Vidéo Tap to Pay (6,6 s en boucle) + carte synchronisée par accueil.js (classe .is-tap) */
.tap-scene video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--surface); }
.tap-scene.ttp .tap-card { animation: none; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.tap-scene.ttp.is-tap .tap-card { transform: rotate(-6deg) translate(-58%, -235%); }
@media (prefers-reduced-motion: reduce) { .tap-scene.ttp .tap-card { transform: rotate(-14deg) translate(0, 0); transition: none; } }

/* Mon activité : l'écran défile tout seul, la barre de navigation reste en place */
.phone-screen.scroller { overflow: hidden; }
.phone-screen.scroller img.long { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: initial; opacity: 1; }
.phone-screen.scroller img.nav { position: absolute; inset: auto auto 5% 6.06%; width: 87.9%; height: auto; max-height: none; aspect-ratio: auto; object-fit: initial; opacity: 1; z-index: 2; padding: 0; background: none; border-radius: 0; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .phone-screen.scroller img.long { animation: act-scroll 16s ease-in-out infinite; }
}
@keyframes act-scroll { 0%, 14% { transform: translateY(0); } 46%, 62% { transform: translateY(-38.5%); } 92%, 100% { transform: translateY(0); } }

/* Clin d'œil « gardez votre banque » sous les boutons du héros */
.a-wink { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 6px 14px 6px 10px; border-radius: var(--rpill); background: color-mix(in srgb, var(--surface) 14%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--surface); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.a-wink svg { width: 18px; height: 18px; flex: none; }

/* ---------- Tarif + « Ce que ça vous rapporte » présenté comme une addition (02/10, version épurée) ---------- */
.price-grid { display: grid; gap: var(--s-4); }
.price-grid .price-card { max-width: none; margin: 0; width: 100%; }
.gain-card { border-radius: var(--rlg); padding: var(--s-6) var(--s-5); background: var(--surface); border: 1px solid var(--border); display: grid; gap: var(--s-4); align-content: start; }
.gain-card h3 { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }
.ticket { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--ink-400); }
.ticket li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px dashed var(--border); font-size: .9375rem; line-height: 1.4; color: var(--ink-600); }
.ticket b { color: var(--ink-900); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticket li.calme b { font-weight: 600; font-style: italic; color: var(--range-2); }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin: 0; padding-top: var(--s-2); border-top: 2px solid var(--ink-900); font-weight: 700; }
.ticket-total b { font-size: clamp(1.5rem, 5vw, 1.875rem); font-weight: 900; color: var(--range-2); white-space: nowrap; letter-spacing: -0.02em; }
.gain-bonus { border-radius: var(--r); padding: var(--s-4); background: var(--range-100); font-size: .9375rem; line-height: 1.45; }
.gain-bonus p { margin: 0 0 var(--s-2); }
.gain-bonus .ticket-plus { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-weight: 700; color: var(--ink-900); padding-bottom: var(--s-2); border-bottom: 1px dashed color-mix(in srgb, var(--range-1) 30%, transparent); }
.gain-bonus .ticket-plus b { white-space: nowrap; color: var(--range-2); font-size: 1.125rem; }
.gain-bonus p:not(.ticket-plus) { font-size: .875rem; color: var(--ink-600); }
.gain-bonus a { color: var(--range-1); font-weight: 700; }
.gain-note { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--ink-600); }
@media (min-width: 900px) { .price-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

/* Confirmation du formulaire « Je veux être accompagné » : carte blanche bien visible sur la bande verte */
.door.help .callout { background: var(--surface); border: 0; color: var(--ink-900); margin: 0; font-size: 1rem; padding: var(--s-4) var(--s-5); }
.door.help .callout strong { color: var(--range-1); }
.door.help .callout::before { content: ""; display: block; width: 28px; height: 28px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--range-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 16px no-repeat; }