/* Bokoko Vivance : noir, rouge, ivoire. Du verre posé sur la nuit, éclairé par le rouge de la crinière. */
:root {
  --noir: #000000;
  --rouge: #e30208;
  --rouge-vif: #ff4a4a; /* petits textes rouges sur noir */
  --rouge-sombre: #b80106;
  --ivoire: #fcf6e4;
  --doux: #cfc8b6;
  --sourd: #9c9585;
  --titre: "Montserrat", "Avenir Next", system-ui, sans-serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marge: clamp(16px, 5vw, 64px);
  --large: 1120px;
  --rayon: 26px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--noir); color: var(--ivoire); font: 400 18px/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.sur { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rouge-vif); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.grand { width: 30px; height: 30px; color: var(--rouge-vif); }

/* La lumière derrière le verre : des lueurs rouges fixes et des éclats de crinière. */
.fond { position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(60vw 50vh at 85% 8%, rgba(227, 2, 8, 0.42), transparent 62%),
  radial-gradient(48vw 44vh at 6% 58%, rgba(227, 2, 8, 0.26), transparent 64%),
  radial-gradient(56vw 46vh at 70% 100%, rgba(227, 2, 8, 0.30), transparent 62%),
  var(--noir); }
.fond::before, .fond::after { content: ""; position: absolute; background: var(--rouge); opacity: 0.5; }
.fond::before { width: 34vw; height: 34vw; right: -6vw; top: 30vh; clip-path: polygon(0 62%, 100% 0, 62% 100%); }
.fond::after { width: 26vw; height: 26vw; left: -5vw; bottom: 6vh; clip-path: polygon(0 0, 100% 46%, 30% 100%); opacity: 0.4; }

/* Le verre liquide : translucide, flouté, un reflet clair en haut, une ombre profonde dessous. */
.verre {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.07));
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.5);
  border-radius: var(--rayon);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .verre { background: rgba(28, 22, 22, 0.94); } }

/* Barre flottante */
.haut { background: linear-gradient(140deg, rgba(40, 30, 30, 0.72), rgba(12, 8, 8, 0.66)); color: #fcf6e4; position: sticky; top: max(12px, env(safe-area-inset-top)); z-index: 30; width: min(var(--large), calc(100% - 2 * var(--marge))); margin: 12px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 14px; border-radius: 99px; }
.nom { display: flex; align-items: center; gap: 10px; font: 800 17px/1 var(--titre); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; }
.nom img { width: 40px; height: 40px; }
.haut ul { list-style: none; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); margin: 0; padding: 0; font-size: 16px; }
.haut a { text-decoration: none; }
.haut li a:hover { color: #fff; }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.10); cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--ivoire); border-radius: 2px; }
.lien-ia { background: var(--rouge); font-weight: 600; padding: 10px 18px; border-radius: 99px; display: inline-block; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.lien-ia:hover { background: var(--rouge-sombre); }

/* Entrée */
.these { max-width: var(--large); margin: 0 auto; padding: clamp(36px, 7vh, 84px) var(--marge) clamp(48px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(20px, 4vw, 56px); box-sizing: content-box; }
.astre { position: relative; isolation: isolate; width: 100%; max-width: 470px; justify-self: end; }
/* Les ondes du réveil : des cercles qui partent du lion et se perdent dans le noir. */
.astre::before { content: ""; position: absolute; inset: -46%; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(227, 2, 8, 0.34) 46px 47.500px);
  -webkit-mask-image: radial-gradient(circle, #000 24%, transparent 70%); mask-image: radial-gradient(circle, #000 24%, transparent 70%); }
.these .lion { width: 100%; filter: drop-shadow(0 30px 60px rgba(227, 2, 8, 0.35)); }
.these .sur { margin-bottom: 22px; }
.these h1 { font-weight: 900; font-size: clamp(40px, 6.4vw, 86px); line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase; }
.these h1 em { font-style: normal; color: var(--rouge); }
.chapo { margin-top: 28px; max-width: 52ch; font-size: clamp(18px, 1.6vw, 20px); color: var(--doux); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bouton { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; padding: 15px 24px; border-radius: 99px; transition: transform 0.15s ease, background 0.15s ease; }
.bouton:hover { transform: translateY(-2px); }
.bouton.plein { background: var(--rouge); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 34px rgba(227, 2, 8, 0.4); }
.bouton.plein:hover { background: #f0141a; }
.bouton.verre { border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32); }

/* Sections */
main { display: block; }
.bloc { max-width: var(--large); margin: 0 auto; padding-top: clamp(56px, 9vw, 120px); }
.bloc .sur { margin-bottom: 16px; }
.bloc h2 { font-weight: 800; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; max-width: 20ch; }
.intro { margin-top: 20px; max-width: 60ch; color: var(--doux); }

.combat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.combat p:not(.sur) { margin-top: 20px; color: var(--doux); }
.cadre { margin: 0; padding: 10px; }
.cadre img { border-radius: calc(var(--rayon) - 9px); width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.cadre.large { margin-top: 36px; }
.cadre.large img { aspect-ratio: 21 / 9; }

.principes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.principes article { padding: 28px 26px 30px; }
.principes h3 { font-weight: 800; font-size: 22px; line-height: 1.18; margin: 18px 0 12px; }
.principes p { color: var(--doux); font-size: 17px; }

.ia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.ia-texte > p:not(.sur):not(.note) { margin: 22px 0 26px; max-width: 52ch; color: var(--doux); }
.note { margin-top: 16px; font-size: 15px; color: var(--sourd); }
.echange { padding: clamp(18px, 3vw, 30px); display: grid; gap: 16px; }
.echange .q { justify-self: end; max-width: 88%; background: var(--rouge); color: #fff; padding: 12px 16px; border-radius: 20px 20px 4px 20px; font-size: 16.5px; }
.echange .r { position: relative; padding-left: 42px; font-size: 16.5px; }
.echange .r::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: url(/lion.svg) center / contain no-repeat; }

.film .ecran-film { margin-top: 30px; padding: 10px; max-width: 920px; }
.lancer, .ecran-film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: calc(var(--rayon) - 9px); overflow: hidden; }
.lancer { position: relative; padding: 0; background: #000; cursor: pointer; }
.lancer img { width: 100%; height: 100%; object-fit: cover; }
.lecture { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 12px rgba(255, 255, 255, 0.16), 0 18px 44px rgba(0, 0, 0, 0.55); }
.lecture svg { display: block; margin-left: 4px; }
.reveil .lecture { background: #fcf6e4; color: var(--rouge); }
.film .note a { margin-right: 6px; }
.pas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.pas article { padding: 26px 26px 22px; }
.pas h3 { font-weight: 800; font-size: 22px; margin-bottom: 14px; }
.pas ol { margin: 0; padding-left: 22px; color: var(--doux); font-size: 17px; }
.pas li { margin-bottom: 10px; padding-left: 4px; }
.pas li::marker { color: var(--rouge-vif); font-weight: 700; }
.pas .bouton { margin-top: 8px; color: #fff; text-decoration: none; }
.pas code { background: rgba(255, 255, 255, 0.12); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; }
.pas a:not(.bouton), .note a { color: var(--ivoire); text-underline-offset: 4px; }
.chantiers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chantiers li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 22px; border-radius: 22px; }
.chantiers li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.chantiers h3 { font-weight: 800; font-size: 20px; margin-bottom: 6px; }
.chantiers p { color: var(--doux); font-size: 16.5px; }
.chantiers p a { color: var(--ivoire); text-underline-offset: 4px; }
.etat { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; white-space: nowrap; }
.etat.ouvert { background: var(--rouge); color: #fff; }
.etat.venir { border: 1px solid rgba(255, 255, 255, 0.28); color: var(--doux); }

.appel { margin-top: clamp(56px, 9vw, 120px); padding: 12px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.appel img { border-radius: calc(var(--rayon) - 9px); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.appel > div { padding: 12px clamp(8px, 2vw, 24px) 12px 0; }
.appel p { margin-top: 14px; color: var(--doux); }

.soutenir { margin-top: clamp(40px, 6vw, 72px); padding: clamp(22px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.soutenir-texte p:not(.sur) { margin-top: 18px; color: var(--doux); }
.soutenir-texte .note { color: var(--sourd); }
.don { display: grid; gap: 14px; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); }
.choix label { position: relative; text-align: center; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix span { display: block; padding: 11px 10px; border-radius: 99px; font-weight: 600; font-size: 16px; color: var(--doux); }
.choix input:checked + span { background: var(--ivoire); color: #000; }
.choix input:focus-visible + span { outline: 3px solid var(--rouge-vif); outline-offset: 2px; }
.choix.petits span { padding: 7px 10px; font-size: 14.500px; }
.choix[hidden] { display: none; }
.montants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.montants button { font: 700 17px/1 var(--titre); color: var(--ivoire); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 16px 4px; cursor: pointer; }
.montants button[aria-pressed="true"] { background: var(--rouge); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.champ { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--doux); }
.champ input { font: inherit; font-size: 16px; font-weight: 400; color: var(--ivoire); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; padding: 12px 14px; width: 100%; }
.champ input::placeholder { color: var(--sourd); }
.champ input:focus { outline: 0; border-color: var(--rouge-vif); }
#don-mobile { display: grid; gap: 14px; }
#don-mobile[hidden] { display: none; }
.don-erreur { color: #ffd9d6; background: rgba(227, 2, 8, 0.22); border: 1px solid rgba(255, 74, 74, 0.5); border-radius: 14px; padding: 10px 14px; font-size: 15px; }
.don .bouton { justify-content: center; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.don .bouton:disabled { opacity: 0.6; cursor: default; transform: none; }
.don .note { margin-top: 0; text-align: center; }
.realise a { margin: 0 !important; color: var(--ivoire); font-weight: 600; text-underline-offset: 4px; }

/* Page de remerciement */
.merci { min-height: 100dvh; display: grid; place-items: center; padding: var(--marge); }
.merci .verre { max-width: 560px; padding: clamp(26px, 5vw, 48px); text-align: center; }
.merci img { width: 110px; margin: 0 auto 20px; }
.merci h1 { font-weight: 800; font-size: clamp(28px, 5vw, 40px); line-height: 1.08; }
.merci p { margin-top: 16px; color: var(--doux); }
.merci .actions { justify-content: center; }

.bas { padding: 0 var(--marge) max(40px, env(safe-area-inset-bottom)); text-align: center; }
.bas .logo { width: 96px; height: 96px; margin: 0 auto; }
.signature { margin-top: 18px; font: 900 clamp(26px, 5vw, 44px)/1 var(--titre); letter-spacing: -0.02em; text-transform: uppercase; }
.devise { margin-top: 8px; font: 800 clamp(17px, 2.4vw, 22px)/1.2 var(--titre); color: var(--rouge); }
.bas .fin { color: var(--sourd); font-size: 14.5px; margin-top: 12px; }
.bas .fin a { margin: 0 10px; }

@media (max-width: 860px) {
  .principes, .ia, .combat, .chantiers, .appel, .soutenir, .pas { grid-template-columns: 1fr; }
  .burger { display: block; order: 3; }
  .haut { position: sticky; }
  .haut ul { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: 26px; background: rgba(20, 14, 14, 0.94); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
  .haut ul.ouvert { display: flex; }
  .haut ul a { display: block; padding: 13px 16px; border-radius: 16px; font-size: 17px; }
  .haut ul .lien-ia { text-align: center; margin-top: 4px; }
  .haut ul .aide-lien { display: flex; align-items: center; gap: 10px; width: auto; height: auto; border: 0; border-radius: 16px; line-height: inherit; }
  .haut ul .aide-mot { display: inline; }
  .these { grid-template-columns: 1fr; padding-top: 20px; }
  .these .astre { grid-row: 1; justify-self: center; max-width: min(240px, 60vw); }
  .appel > div { padding: 4px 10px 14px; }
  .cadre.large img { aspect-ratio: 3 / 2; }
}
@media (max-width: 420px) {
  .nom span { font-size: 14px; }
  .chantiers li { grid-template-columns: 30px minmax(0, 1fr); }
  .chantiers .etat { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bouton { transition: none; } .bouton:hover { transform: none; } }

/* ——— Mouvement ———
   Tout est derrière « pas de préférence pour moins de mouvement », et derrière la classe .js posée par le script :
   sans script ou avec les animations coupées, la page s'affiche entière, immobile. */
@property --phase { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (prefers-reduced-motion: no-preference) {
  /* Les blocs montent en place quand ils entrent dans l'écran. */
  .js .revele { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--retard, 0s); }
  .js .revele.vu { opacity: 1; transform: none; }
  .js .temps.revele { transform: translateX(-70px); transition-duration: 1.1s; }
  .js .temps.revele.vu { transform: none; }
  .js .astre.revele { transform: scale(0.82); transition-duration: 1.1s; transition-timing-function: cubic-bezier(0.2, 1.3, 0.3, 1); }
  .js .astre.revele.vu { transform: none; }

  /* Le lion respire, les ondes du réveil partent de lui sans s'arrêter. */
  .these .lion { animation: respirer 7s ease-in-out infinite; }
  .astre::before { background: repeating-radial-gradient(circle at 50% 50%, transparent var(--phase), transparent calc(var(--phase) + 46px), rgba(227, 2, 8, 0.34) calc(var(--phase) + 46px), rgba(227, 2, 8, 0.34) calc(var(--phase) + 47.500px)); animation: ondes 2.600s linear infinite; }
  @keyframes respirer { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.018); } }
  @keyframes ondes { to { --phase: 47.500px; } }

  /* Les éclats du fond dérivent lentement. */
  .fond::before { animation: deriver 19s ease-in-out infinite alternate; }
  .fond::after { animation: deriver 23s ease-in-out infinite alternate-reverse; }
  @keyframes deriver { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-3vw, 4vh) rotate(7deg); } }

  /* Le mot « brutal » bat une fois de temps en temps. */
  .these h1 em { display: inline-block; animation: battre 5.500s ease-in-out infinite; transform-origin: 0 60%; }
  @keyframes battre { 0%, 86%, 100% { transform: scale(1); } 90% { transform: scale(1.06); } 94% { transform: scale(0.99); } }

  /* Les cartes se soulèvent sous le doigt ou la souris. */
  .principes article, .chantiers li, .pas article { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .principes article:hover, .chantiers li:hover, .pas article:hover { transform: translateY(-5px); }
  .js .principes article.revele.vu, .js .chantiers li.revele.vu, .js .pas article.revele.vu { transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.35s ease; transition-delay: var(--retard, 0s), 0s; }
  .js .principes article.revele.vu:hover, .js .chantiers li.revele.vu:hover, .js .pas article.revele.vu:hover { transform: translateY(-5px); }
  .bouton.plein { transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.25s ease; }
  .bouton.plein:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 44px rgba(227, 2, 8, 0.55); }
  .bouton .ico { transition: transform 0.2s ease; }
  .bouton:hover .ico { transform: translateX(5px); }
  .lecture { transition: transform 0.2s ease; }
  .lancer:hover .lecture { transform: scale(1.1); }

  /* La barre du haut descend à l'arrivée. */
  .js .haut { animation: descendre 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes descendre { from { transform: translateY(-90px); opacity: 0; } to { transform: none; opacity: 1; } }
}


/* ——— Les trois temps : le rêve (noir), le réveil (le rouge monte), le jour (ivoire) ——— */
.acte { position: relative; overflow-x: clip; }
.dedans { padding: 0 var(--marge) clamp(80px, 11vw, 150px); }
.temps { max-width: var(--large); margin: 0 auto; padding-top: clamp(40px, 7vw, 100px); font: 900 clamp(56px, 13.500vw, 196px)/0.86 var(--titre); letter-spacing: -0.045em; text-transform: uppercase; color: rgba(252, 246, 228, 0.09); user-select: none; }
.temps + .bloc { padding-top: clamp(18px, 3vw, 44px); }

.reve { background: radial-gradient(70vw 62vh at 82% 10%, rgba(227, 2, 8, 0.20), transparent 62%), #000; }

.reveil { --rouge-vif: #ffd2c4; --doux: #f6e3db; --sourd: #eccfc5; background: linear-gradient(180deg, #000 0%, #240002 16%, #6c0407 58%, #b70207 100%); }
.reveil .temps { color: rgba(252, 246, 228, 0.14); }
.reveil .bouton.plein, .reveil .echange .q { background: #fcf6e4; color: #000; box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(0, 0, 0, 0.35); }
.reveil .bouton.plein:hover { background: #fff; }
.reveil .pas .bouton { color: #000; }

/* Le jour se lève par des éclats, comme la crinière : l'ivoire perce le rouge. */
.jour { --ivoire: #0d0d0d; --doux: #4a443a; --sourd: #6b6455; --rouge-vif: #b80106; color: #0d0d0d; background: radial-gradient(64vw 44vh at 50% 0%, rgba(227, 2, 8, 0.10), transparent 70%), #fcf6e4; }
.jour::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(48px, 9vw, 130px); background: #fcf6e4; clip-path: polygon(0 100%, 0 58%, 4% 100%, 9% 22%, 14% 100%, 20% 50%, 25% 100%, 32% 4%, 38% 100%, 44% 46%, 49% 100%, 56% 14%, 62% 100%, 68% 38%, 73% 100%, 80% 0, 86% 100%, 91% 30%, 95% 100%, 100% 52%, 100% 100%); }
.jour .temps { color: rgba(227, 2, 8, 0.16); }
.jour .verre { background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55)); border-color: rgba(13, 13, 13, 0.08); box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(110, 24, 12, 0.14); }
.jour .etat.venir { border-color: rgba(13, 13, 13, 0.3); }
.jour .choix { background: rgba(13, 13, 13, 0.06); border-color: rgba(13, 13, 13, 0.12); }
.jour .choix input:checked + span { background: #0d0d0d; color: #fcf6e4; }
.jour .montants button { background: rgba(13, 13, 13, 0.05); border-color: rgba(13, 13, 13, 0.16); }
.jour .montants button[aria-pressed="true"] { background: var(--rouge); color: #fff; border-color: transparent; }
.jour .champ input { background: rgba(255, 255, 255, 0.75); border-color: rgba(13, 13, 13, 0.2); }
.jour .don-erreur { color: #7a0003; background: rgba(227, 2, 8, 0.10); border-color: rgba(227, 2, 8, 0.35); }
.jour .bouton.verre { box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(110, 24, 12, 0.12); }
.jour .cadre, .jour .appel { background: #0d0d0d; border-color: transparent; }
.jour .appel { --ivoire: #fcf6e4; --doux: #cfc8b6; color: #fcf6e4; }
.jour .appel .bouton.verre { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* Le repère des trois temps, sur le bord de l'écran. */
.rail-temps { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; gap: 14px; mix-blend-mode: difference; }
.rail-temps a { display: flex; align-items: center; gap: 10px; font-size: 11.500px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, 0.5); writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-temps a::after { content: ""; width: 2px; height: 22px; background: currentColor; }
.rail-temps a.ici { color: #fff; }
.rail-temps a.ici::after { height: 44px; }
@media (min-width: 1320px) { .rail-temps { display: flex; } }

/* ——— Pages de texte : confidentialité, conditions, aide ——— */
.page-claire { background: #fcf6e4; }
.page-claire .haut ul.toujours { display: flex; position: static; flex-direction: row; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-claire .jour::before { display: none; }
.texte-long { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 84px) var(--marge) clamp(48px, 7vw, 80px); background: none; }
.texte-long h1 { font-weight: 900; font-size: clamp(34px, 6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; margin-top: 14px; }
.texte-long .chapeau { margin-top: 22px; font-size: clamp(18px, 2vw, 21px); color: var(--doux); }
.texte-long h2 { font-weight: 800; font-size: clamp(22px, 3vw, 28px); line-height: 1.15; margin-top: 44px; }
.texte-long h3 { font-weight: 700; font-size: 19px; margin-top: 22px; }
.texte-long p, .texte-long ul { margin-top: 12px; }
.texte-long ul { padding-left: 22px; }
.texte-long li { margin-bottom: 8px; }
.texte-long li::marker { color: var(--rouge); }
.texte-long a { color: var(--rouge-vif); text-underline-offset: 4px; }
.aide { margin-top: 20px; }
.aide textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--ivoire); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(13, 13, 13, 0.2); border-radius: 14px; padding: 12px 14px; width: 100%; resize: vertical; }
.aide textarea:focus { outline: 0; border-color: var(--rouge-vif); }
.aide .bouton { color: #fff; }
.aide .reussite { margin: 0; font-size: 15px; color: #14532d; background: rgba(34, 139, 60, 0.14); border: 1px solid rgba(34, 139, 60, 0.4); border-radius: 14px; padding: 10px 14px; }
.aide .reussite[hidden] { display: none; }
.pied-simple { padding-top: 8px; background: none; }
.pied-simple::before { display: none; }
.aide-lien { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); line-height: 0; }
.aide-lien svg { display: block; }
.aide-mot { display: none; }
.aide-lien:hover { background: rgba(255, 255, 255, 0.14); }