/*
 * accueil.css : l onboarding d Aurora Bloom (1.5.0, 22/10/2026).
 * Charte « l heure doree » validee par Nathie le 19/10 :
 * Pub_et_vente_apps/DEMO_Aurora_direction_finale_2026-10-19.html (photos, cartouche en or,
 * phrase ecrite en lumiere, soleil derriere les mots) et DEMO_Aurora_heure_doree (questionnaire,
 * horizon qui se dore). Tout est range sous #accueil : rien ne deborde sur le reste de l app.
 * Seul le scintillement de l eau tourne en boucle (choix de Nathie) ; le reste joue une fois.
 * 30/10/2026 : les 5 effets d IdeaCrashTest (maquette Pub_et_vente_apps/maquettes_effets_2026-10-30) :
 * rond et coche dessinee, icones des questions, cadre de la preparation et son tour, sceau du lotus,
 * frise de l essai qui s allume. Les mouvements eux-memes sont dans js/accueil.js.
 */

#accueil {
  --hd-nuit: #0C0910;
  --hd-creme: #FBEFD9;
  --hd-creme-doux: rgba(251, 239, 217, 0.78);
  --hd-creme-pale: rgba(251, 239, 217, 0.56);
  --hd-or: #EFC878;
  --hd-or-clair: #FFF3C8;
  --hd-or-fonce: #C9A24F;
  --hd-verre: rgba(20, 14, 26, 0.38);
  --hd-verre-fort: rgba(18, 12, 22, 0.58);
  --hd-verre-bord: rgba(239, 200, 120, 0.28);
  --hd-douce: cubic-bezier(.2, .7, .2, 1);
  --acc-hx: 50%;
  --acc-hy: 50%;
  --acc-bandeau: 0px;

  position: fixed; inset: 0; z-index: 50;
  overflow: hidden; isolation: isolate;
  background: var(--hd-nuit);
  color: var(--hd-creme);
  font-family: var(--police-corps);
  font-size: 16px; line-height: 1.5;
  opacity: 1; transition: opacity .45s ease;
}
#accueil.acc-sortie { opacity: 0; }
/* Sans poids : chaque bouton garde sa propre couleur et sa propre taille. */
:where(#accueil) button { font: inherit; color: inherit; }
#accueil :focus-visible { outline: 2px solid var(--hd-or); outline-offset: 3px; }

/* ---------- Les couches de lumiere ---------- */
.acc-fonds { position: absolute; inset: 0; z-index: 0; }
.acc-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.acc-fond.visible { opacity: 1; }
.acc-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,12,.55) 0%, transparent 16%, transparent 28%, rgba(8,6,12,.5) 44%, rgba(6,5,10,.84) 62%, rgba(6,5,10,.94) 100%); }
#accueil[data-etape="offre"] .acc-voile,
#accueil[data-etape="rappel"] .acc-voile {
  background: linear-gradient(180deg, rgba(8,6,12,.6) 0%, rgba(8,6,12,.25) 22%, rgba(8,6,12,.55) 42%, rgba(6,5,10,.94) 70%, rgba(6,5,10,.97) 100%); }
.acc-soleil { position: absolute; z-index: 1; left: var(--acc-hx); top: var(--acc-hy); width: 360px; height: 360px; margin: -180px 0 0 -180px;
  border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,230,170,.62), rgba(255,184,104,.42) 30%, rgba(236,130,80,.18) 58%, transparent); }
.acc-soleil.leve { animation: acc-leve 3.6s var(--hd-douce) .4s both; }
@keyframes acc-leve { from { opacity: 0; transform: translateY(0) scale(.3); } to { opacity: 1; transform: translateY(var(--acc-vers-phrase, 0px)) scale(1); } }
.acc-eclats { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.acc-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.acc-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0,0,0,.45)); }
.acc-trait { position: absolute; z-index: 4; left: -10%; right: -10%; top: var(--acc-hy); height: 2px; margin-top: -1px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,236,190,.95) 50%, transparent); filter: blur(.6px); }
.acc-nuit { position: absolute; inset: 0; z-index: 4; background: #07050b; opacity: 0; pointer-events: none; }

/* L ouverture, jouee une seule fois : la lumiere se leve, un trait passe sur l horizon. */
#accueil.acc-ouverture .acc-fonds { animation: acc-pose 7s var(--hd-douce) both; }
#accueil.acc-ouverture .acc-nuit { animation: acc-aube 3.2s ease-out both; }
#accueil.acc-ouverture .acc-trait { animation: acc-trait 2.8s ease-in-out .7s both; }
@keyframes acc-pose { from { transform: scale(1.07); } to { transform: none; } }
@keyframes acc-aube { from { opacity: .93; } to { opacity: 0; } }
@keyframes acc-trait { 0% { opacity: 0; transform: scaleX(.2); } 45% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.1); } }

/* ---------- Le haut : retour, cartouche, passer ---------- */
.acc-haut { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--sure-haut, 0px) + 10px);
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 0 10px; }
.acc-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--hd-or); cursor: pointer; }
.acc-icone svg { width: 22px; height: 22px; }
.acc-passer { justify-self: end; min-height: 44px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
  font-size: .82rem; letter-spacing: .04em; color: var(--hd-creme-doux); }
.acc-cartouche { justify-self: center; position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 19px 8px 14px; border-radius: 999px;
  border: 1px solid rgba(239,200,120,.7);
  box-shadow: 0 0 0 3px rgba(12,8,16,.25), 0 0 0 4px rgba(239,200,120,.38), 0 8px 20px rgba(0,0,0,.3);
  background: rgba(12,8,16,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.acc-cartouche svg { width: 28px; height: 18px; flex: none; filter: drop-shadow(0 0 6px rgba(239,200,120,.45)); }
.acc-cartouche .acc-nom { font-family: var(--police-titre); font-weight: 500; font-size: 1.22rem; letter-spacing: .06em; line-height: 1; white-space: nowrap;
  background: linear-gradient(100deg, var(--hd-or-clair) 0%, var(--hd-or) 40%, #FFE9B0 55%, var(--hd-or-fonce) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(255,214,140,.45)); }
/* L eclat qui fait le tour du liseret, une fois. */
@property --acc-tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.acc-cartouche::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--acc-tour), transparent 0 72%, rgba(255,243,200,.4) 82%, #FFF8E0 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255,226,160,.9)); }
.acc-cartouche.joue::before { animation: acc-tour 2.8s ease-in-out .6s both; }
@keyframes acc-tour { 0% { opacity: 0; --acc-tour: 0deg; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; --acc-tour: 360deg; } }

/* ---------- La progression : l horizon qui se dore ---------- */
.acc-progression { position: absolute; z-index: 6; left: 22px; right: 22px; top: calc(var(--sure-haut, 0px) + 64px);
  max-width: 460px; margin: 0 auto; }
.acc-progression .acc-ligne { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(251,239,217,.86); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.acc-progression .acc-ligne b { font-weight: 600; color: var(--hd-or); }
.acc-horizon { position: relative; height: 1px; background: rgba(251,239,217,.2); }
.acc-horizon::after { content: ""; position: absolute; inset: -.5px 0; transform-origin: 0 50%; transform: scaleX(var(--acc-p, .2));
  transition: transform 1.6s var(--hd-douce);
  background: linear-gradient(90deg, transparent, var(--hd-or) 18%, var(--hd-or-clair) 50%, var(--hd-or) 82%, transparent);
  box-shadow: 0 0 10px rgba(255,220,150,.75); }

/* ---------- La scene : le contenu de chaque etape, en bas, sous le pouce ---------- */
.acc-scene { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(var(--sure-haut, 0px) + 112px) 20px calc(var(--sure-bas, 0px) + 22px + var(--acc-bandeau)); }
.acc-etape { margin-top: auto; width: 100%; max-width: 460px; margin-left: auto; margin-right: auto;
  transition: opacity .45s ease, transform .45s ease; }
.acc-etape.sort { opacity: 0; transform: translateY(-10px); }
.acc-etape.entre { opacity: 0; transform: translateY(10px); }

.acc-titre { font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 .45em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }
.acc-sous { margin: 0 0 1.4em; color: var(--hd-creme-doux); font-size: 1.02rem; }
.acc-question { font-family: var(--police-titre); font-weight: 400; font-size: 1.5rem; line-height: 1.22; margin: .3em 0 .85em;
  text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.acc-surtitre { margin: 0 0 .4em; font-size: .92rem; color: var(--hd-or); }
.acc-discret { margin: 14px 0 0; font-size: .74rem; text-align: center; color: var(--hd-creme-pale); }

/* L icone au trait d or au-dessus de chaque question (30/10), dessinee une fois par accueil.js. */
.acc-picto { display: block; width: 36px; height: 36px; color: var(--hd-or); filter: drop-shadow(0 0 6px rgba(239,200,120,.5)); }
.acc-picto path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

.acc-reponses { display: grid; gap: 9px; }
.acc-reponse { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px;
  text-align: left; cursor: pointer; padding: 13px 15px; border-radius: 16px; font-size: 1rem; line-height: 1.3; color: var(--hd-creme);
  background: var(--hd-verre); border: 1px solid rgba(239,200,120,.22); box-shadow: inset 0 1px 0 rgba(255,240,210,.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .35s, background .35s, box-shadow .35s, opacity .3s; }
.acc-reponse.choisie { border-color: var(--hd-or); background: linear-gradient(120deg, rgba(239,200,120,.2), rgba(20,14,26,.4));
  box-shadow: 0 0 24px rgba(239,200,120,.25), inset 0 1px 0 rgba(255,240,210,.15); }
.acc-reponse.autre { opacity: .5; }
.acc-reponse:disabled { cursor: default; }

/* Le rond dore et sa coche (30/10) : reponses et preparation. La coche se dessine au trait. */
.acc-rond { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(239,200,120,.6);
  transition: background .35s, box-shadow .35s, border-color .35s; }
.acc-coche { display: block; width: 12px; height: 12px; opacity: 0; }
.acc-coche path { fill: none; stroke: #2A1A22; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.acc-reponse.choisie .acc-rond,
.acc-prep li.fait .acc-rond { border-color: transparent; background: radial-gradient(circle at 35% 35%, var(--hd-or-clair), var(--hd-or) 55%, var(--hd-or-fonce)); box-shadow: 0 0 10px rgba(239,200,120,.8); }
.acc-reponse.choisie .acc-coche,
.acc-prep li.fait .acc-coche { opacity: 1; }

/* Boutons */
.acc-btn-or { position: relative; overflow: hidden; display: block; width: 100%; min-height: 56px; padding: 14px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 1.04rem; color: #2A1A22;
  background: linear-gradient(120deg, var(--hd-or-clair), var(--hd-or) 60%, var(--hd-or-fonce));
  box-shadow: 0 10px 30px rgba(239,200,120,.22), inset 0 1px 0 rgba(255,255,255,.5); }
.acc-btn-or::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.15) 56%, transparent 68%); }
.acc-btn-or.eclat::after { animation: acc-eclat-btn 1.4s ease-in-out .3s both; }
@keyframes acc-eclat-btn { to { transform: translateX(120%); } }
.acc-btn-or:disabled { opacity: .6; cursor: default; }
.acc-btn-verre { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 20px;
  border-radius: 999px; cursor: pointer; border: 1px solid rgba(239,200,120,.55); color: var(--hd-creme);
  background: var(--hd-verre); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 1rem; }
.acc-btn-verre svg { width: 20px; height: 20px; color: var(--hd-or); }
.acc-btn-verre svg path { transition: fill .4s ease; }
.acc-btn-verre.garde svg path { fill: url(#gOr); }
.acc-btn-verre.garde { animation: acc-pop .5s var(--hd-douce); }
@keyframes acc-pop { 40% { transform: scale(1.05); } }
.acc-lien { display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--hd-creme-doux); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(251,239,217,.35); }

/* ---------- Preparation ---------- */
/* 30/10 : les 3 lignes dans un cadre de verre ; un trait d or en fait une fois le tour a la fin. */
.acc-cadre-prep { position: relative; border-radius: 18px; padding: 16px; background: var(--hd-verre-fort); border: 1px solid var(--hd-verre-bord);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.acc-prep { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.acc-prep li { display: flex; align-items: center; gap: 12px; color: var(--hd-creme-pale); transition: color .5s ease; font-size: 1.02rem; }
.acc-prep li.fait { color: var(--hd-creme); }
/* Le meme eclat que celui du cartouche (variable --acc-tour, animation acc-tour), en 2,4 s. */
.acc-tour { position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1.5px; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--acc-tour), transparent 0 68%, rgba(255,243,200,.45) 82%, var(--hd-or-clair) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 5px var(--hd-or-clair)); }
.acc-tour.joue { animation: acc-tour 2.4s ease-in-out both; }

/* ---------- Revelation : la phrase ecrite en lumiere ---------- */
.acc-revele { text-align: center; }
.acc-cat { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--hd-or); text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.acc-orne { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 16px; width: 86px; }
.acc-orne::before, .acc-orne::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(239,200,120,.7)); }
.acc-orne::after { transform: scaleX(-1); }
.acc-orne i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--hd-or); box-shadow: 0 0 8px rgba(239,200,120,.8); }
.acc-aulieu { margin: 0 0 14px; font-size: .95rem; color: var(--hd-creme-doux); }
.acc-phrase-boite { position: relative; margin: 0 0 18px; }
.acc-phrase, .acc-phrase-eclat { font-family: var(--police-titre); font-weight: 350; font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.26; letter-spacing: -.008em; margin: 0; text-wrap: balance; }
.acc-phrase { color: var(--hd-creme); text-shadow: 0 0 30px rgba(255,210,140,.55), 0 1px 3px rgba(0,0,0,.35); }
.acc-mot { display: inline-block; }
.acc-phrase-eclat { position: absolute; inset: 0; color: transparent; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 0 42%, rgba(255,248,222,.98) 50%, transparent 58% 100%);
  background-size: 320% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.acc-revele.joue .acc-mot { animation: acc-mot 1s var(--hd-douce) both; animation-delay: calc(1.1s + var(--i) * 95ms); }
.acc-revele.joue .acc-phrase-eclat { animation: acc-eclat 2s ease-in-out both; animation-delay: var(--eclat, 2.7s); }
@keyframes acc-mot { from { opacity: 0; transform: translateY(9px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes acc-eclat { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0 0; } }
.acc-rdv { margin: 0 0 18px; font-size: .9rem; color: var(--hd-creme-doux); }
/* Le sceau du lotus (30/10), pose par accueil.js quand elle garde sa phrase. Il ne doit cacher aucun texte
   (controle a 360 px : 8 premieres phrases x 4 rendez-vous, fr et en). D ou trois ecarts avec la maquette :
   il se pose juste sous la phrase (bottom -60 px au lieu de -48 : sinon il mord sur son dernier mot),
   le rendez-vous laisse libre la colonne du sceau (marges de 58 px, sur 2 lignes si besoin),
   et sans rendez-vous, sa place est gardee au-dessus du bouton. */
.acc-revele .acc-rdv { min-height: 26px; padding: 0 58px; }
.acc-rdv-moment { display: inline-block; }
.acc-revele .acc-suite.sans-rdv { padding-top: 44px; }
.acc-sceau { position: absolute; z-index: 2; right: -4px; bottom: -60px; width: 58px; height: 58px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; transform: rotate(-8deg); border: 1.5px solid transparent;
  background: radial-gradient(circle at 40% 35%, #3A2433, #1A1016) padding-box,
    conic-gradient(from 210deg, #7E5E24, #E8C77E, #FFF6D6, #C9A24F, #8A6A2F, #F3D892, #FFF6D6, #B48A3E, #7E5E24) border-box;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 18px rgba(239,200,120,.35); }
.acc-sceau svg { width: 34px; height: 22px; }
.acc-sceau-anneau { position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(239,200,120,.55); }
.acc-sceau-onde { position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(255,236,190,.8); opacity: 0; }
.acc-revele .acc-suite { opacity: 0; }
.acc-revele.joue .acc-suite { animation: acc-apparait .8s ease both; animation-delay: var(--suite, 3.4s); }
@keyframes acc-apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- L offre « heure doree » ---------- */
.acc-offre-titre { font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.8rem, 8vw, 2.3rem); line-height: 1.1; margin: 0 0 .35em; text-wrap: balance; }
.acc-avantages { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.acc-avantages li { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.acc-avantages li::before { content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg); background: var(--hd-or); box-shadow: 0 0 8px rgba(239,200,120,.8); margin: 0 3px; }
.acc-frise { position: relative; margin: 0 0 18px; padding: 14px 16px; border-radius: 18px; background: var(--hd-verre-fort); border: 1px solid var(--hd-verre-bord);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.acc-pastille { position: absolute; top: -11px; right: 14px; padding: 3px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #2A1A22;
  background: linear-gradient(120deg, var(--hd-or-clair), var(--hd-or) 60%, var(--hd-or-fonce)); }
.acc-frise ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* 30/10 : chaque etape a son point et son fil d or ; elles partent attenuees et s allument une a une. */
.acc-frise li { position: relative; padding-left: 24px; transition: opacity .5s ease; }
.acc-frise li.eteint { opacity: .45; }
.acc-point { position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--hd-or); background: rgba(239,200,120,.25);
  transition: background .4s, box-shadow .4s; }
.acc-frise li.allume .acc-point { background: var(--hd-or); box-shadow: 0 0 10px rgba(239,200,120,.8); }
.acc-fil { position: absolute; left: 6.5px; top: 18px; bottom: -12px; width: 1px; background: rgba(239,200,120,.35); overflow: hidden; }
.acc-fil i { position: absolute; inset: 0; background: var(--hd-or-clair); box-shadow: 0 0 6px var(--hd-or); transform-origin: 50% 0; transform: scaleY(0); }
.acc-frise li.allume .acc-fil i { transform: none; }
.acc-frise b { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hd-or); }
.acc-frise span { font-size: .96rem; }
.acc-frise p { margin: 0; font-size: .96rem; }
.acc-conditions { margin: 10px 0 2px; font-size: .78rem; line-height: 1.45; text-align: center; color: var(--hd-creme-pale); }
.acc-cgv { display: block; text-align: center; font-size: .78rem; color: var(--hd-creme-pale); margin: 2px 0 0; }
.acc-rassure { margin: 8px 0 0; text-align: center; font-size: .78rem; letter-spacing: .04em; color: var(--hd-creme-pale); }

/* ---------- Animations reduites : rien ne bouge, tout s affiche ---------- */
@media (prefers-reduced-motion: reduce) {
  #accueil *, #accueil.acc-ouverture .acc-fonds, #accueil.acc-ouverture .acc-nuit, #accueil.acc-ouverture .acc-trait { animation: none !important; }
  #accueil .acc-fond, #accueil .acc-etape, #accueil .acc-horizon::after { transition: none; }
  #accueil .acc-reponse, #accueil .acc-rond, #accueil .acc-prep li, #accueil .acc-frise li, #accueil .acc-point { transition: none; }
  #accueil .acc-revele .acc-suite { opacity: 1; }
  #accueil .acc-soleil.leve { opacity: .85; transform: translateY(var(--acc-vers-phrase, 0px)); }
}