/* ==========================================================================
   Zongotik — page d'accueil, direction « Nuit maillée »
   La nuit pour fond, la lumière comme preuve de lien. Six sections au lieu de
   onze : les services tiennent dans un seul bloc à onglets, les questions
   accueillent le parrainage et le contact. Le mouvement est toujours un
   battement de lien (paquet qui voyage, poignée de main, routeur qui s'allume) ;
   tout ce qui s'anime part d'un état visible, et s'efface si l'on a demandé
   moins de mouvement.
   ========================================================================== */

:root {
  --a-courbe: cubic-bezier(.2, .7, .1, 1);
  --a-ressort: cubic-bezier(.3, 1.35, .45, 1);
  --a-scene: #0c1f28;
}

/* ------------------------------------------------------------------ bandes */

.a-bande { padding-block: 96px; position: relative; }
.a-bande .s-titre { font-size: clamp(30px, 3.7vw, 48px); }
/* Sur l'accueil, l'en-tête reste franc au-dessus des bandes claires. */
.s-entete:not(.s-entete--papier) { background: rgba(15, 37, 48, .9); }
.a-bande.s-bande--nuit, .a-une, .a-final { isolation: isolate; }
.a-tete { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.a-tete--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; max-width: none; }
.a-tete--ligne > div { display: grid; gap: 14px; max-width: 760px; }
.a-maillage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
/* Le maillage s'efface sous le texte : il éclaire la scène, jamais la lecture. */
.a-une .a-maillage { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .34) 40%, #000 62%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .34) 40%, #000 62%); }

/* ------------------------------------------------------------------ une */

.a-une { position: relative; margin-top: calc(-1 * var(--entete)); padding-top: calc(var(--entete) + 56px); background: radial-gradient(900px 620px at 76% 46%, #163746 0%, transparent 70%), var(--nuit); }
.a-une__grille { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 40px; align-items: center; padding-bottom: 48px; }
.a-une__texte { display: grid; gap: 24px; justify-items: start; }
.a-titre-une { font-size: clamp(40px, 5.3vw, 76px); font-stretch: 108%; line-height: .95; font-weight: 800; letter-spacing: -.045em; color: #fff; }
.a-ligne { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.a-ligne > * { display: inline-block; }
.a-titre-une em { font-style: normal; color: var(--ambre); }
.a-une__chapo { font-size: clamp(18px, 1.6vw, 20.5px); line-height: 1.55; color: var(--brume); max-width: 33em; }
.a-une__chapo b { color: #fff; font-weight: 700; }
.a-une__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.a-bouton-phare { min-height: 54px; padding-inline: 24px; font-size: 16.5px; }

.a-bouton-video { display: inline-flex; align-items: center; gap: 13px; min-height: 54px; padding: 5px 20px 5px 5px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.a-bouton-video:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); }
.a-bouton-video__rond { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--nuit); }
.a-bouton-video__rond svg { width: 18px; height: 18px; margin-left: 3px; }
.a-bouton-video__rond::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); opacity: 0; }
.a-bouton-video b { display: block; font-size: 15px; line-height: 1.2; }
.a-bouton-video small { display: block; font-size: 13px; color: var(--lilas); }

.a-une__assurance { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; color: var(--lilas); }
.a-une__assurance li { display: inline-flex; align-items: center; gap: 7px; }
.a-une__assurance svg { width: 16px; height: 16px; color: var(--menthe); }

/* La scène : le téléphone est la halte, les pastilles flottent autour. */
.a-une__scene { position: relative; margin: 0; justify-self: center; width: min(100%, 460px); padding-block: 12px 0; }
.a-telephone { width: 290px; margin: 0 auto; }
.a-telephone .lecteur__cadre { border-radius: 38px; box-shadow: 0 70px 120px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 9px rgba(255, 255, 255, .035); }
.a-puce { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: 16px; background: rgba(20, 46, 58, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, .13); color: #fff; font-size: 14px; line-height: 1.25; white-space: nowrap; box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .85); }
.a-puce small { display: block; color: var(--lilas); font-size: 12px; }
.a-puce svg { width: 21px; height: 21px; flex: none; color: var(--ambre); }
.a-puce--1 { left: -4%; top: 11%; }
.a-puce--2 { right: -9%; top: 40%; }
.a-puce--3 { left: -9%; bottom: 17%; }
.a-point { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 4px rgba(61, 211, 155, .2); }
.a-une__scene figcaption { margin-top: 16px; text-align: center; font-size: 13px; color: var(--lilas); }

/* Le défilé des faits */
.a-defile { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 22, 29, .55); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.a-defile__piste { display: flex; width: max-content; }
.a-defile ul { display: flex; list-style: none; margin: 0; padding: 17px 0; }
.a-defile li { display: flex; align-items: center; gap: 30px; padding-right: 30px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); white-space: nowrap; }
.a-defile li::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 12px rgba(245, 165, 36, .8); }

/* ------------------------------------------------------------------ services */

.a-services { background: var(--papier); }
.a-services .s-conteneur { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
.a-services .a-tete, .a-services .a-onglets { margin-bottom: 40px; }
.a-services .a-panneau { grid-column: 1 / -1; }
.a-onglets { position: relative; display: inline-flex; gap: 4px; max-width: 100%; padding: 6px; margin-bottom: 36px; border-radius: 19px; background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); overflow-x: auto; scrollbar-width: none; }
.a-onglets::-webkit-scrollbar { display: none; }
.a-onglets button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 0; border-radius: 14px; background: transparent; color: var(--doux); font-weight: 800; font-size: 16px; white-space: nowrap; cursor: pointer; transition: color .35s var(--a-courbe); }
.a-onglets button svg { width: 20px; height: 20px; flex: none; }
.a-onglets button:hover { color: var(--encre); }
.a-onglets button[aria-selected="true"] { color: #fff; background: var(--nuit); }
.a-onglets.est-pret button[aria-selected="true"] { background: transparent; }
.a-onglets button[aria-selected="true"] svg { color: var(--ambre); }
.a-onglets__curseur { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 14px; background: var(--nuit); box-shadow: 0 10px 22px -12px rgba(15, 37, 48, .8); transition: transform .55s var(--a-courbe), width .55s var(--a-courbe); }
.a-onglets.sans-transition .a-onglets__curseur { transition: none; }

.a-panneau { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.a-panneau + .a-panneau { margin-top: 72px; }
/* Les panneaux ne se replient qu'une fois les onglets branchés : sans script (Opera Mini…), les trois restent lisibles. */
.a-onglets.est-pret ~ .a-panneau + .a-panneau { margin-top: 0; }
.a-onglets.est-pret ~ .a-panneau:not(.est-actif) { display: none; }
.a-panneau:focus-visible { outline-offset: 12px; border-radius: 20px; }
.a-panneau__texte { display: grid; gap: 20px; align-content: start; }
.a-panneau blockquote { margin: 0; font-family: var(--display); font-stretch: 108%; font-weight: 800; font-size: clamp(25px, 2.6vw, 33px); line-height: 1.1; letter-spacing: -.028em; color: var(--encre); text-wrap: balance; }
.a-panneau blockquote::before { content: '« '; color: var(--ambre-fonce); }
.a-panneau blockquote::after { content: ' »'; color: var(--ambre-fonce); }
.a-reponse { font-size: 18px; line-height: 1.55; max-width: 36em; }
.a-reponse b { color: var(--encre); }
.a-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-coches li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.45; }
.a-coches svg { width: 20px; height: 20px; margin-top: 1px; color: var(--menthe-fonce); }
.a-badge-prix { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ambre-doux); color: #5b3800; font-size: 15.5px; }
.a-badge-prix svg { width: 24px; height: 24px; flex: none; color: var(--ambre-fonce); }
.a-badge-prix b { color: #3d2600; }
.a-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 18px; border-top: 1px dashed #c8d3d7; }
.a-prix b { font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--encre); }
.a-prix span { font-size: 14.5px; color: var(--doux); }
.a-panneau__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* La scène sombre où vit chaque démonstration */
.a-panneau__visuel { position: relative; display: grid; gap: 18px; padding: clamp(20px, 3vw, 36px); border-radius: 30px; color: var(--brume); background: radial-gradient(520px 340px at 85% 0%, rgba(245, 165, 36, .16), transparent 70%), radial-gradient(420px 300px at 0% 100%, rgba(61, 211, 155, .12), transparent 70%), var(--a-scene); box-shadow: 0 50px 90px -50px rgba(15, 37, 48, .9); overflow: hidden; }
.a-panneau__visuel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.2px); background-size: 26px 26px; }
.a-panneau__visuel > * { position: relative; }

/* Terminal */
.a-terminal { border-radius: 18px; overflow: hidden; background: #08141a; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); }
.a-terminal__barre { display: flex; align-items: center; gap: 8px; padding: 11px 15px; background: #13293380; color: #b4c6cd; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.a-terminal__barre i { width: 11px; height: 11px; border-radius: 50%; }
.a-terminal__barre i:nth-child(1) { background: #ec6a5e; } .a-terminal__barre i:nth-child(2) { background: #f4bf4f; } .a-terminal__barre i:nth-child(3) { background: #61c554; }
.a-terminal__barre span { margin-left: 8px; }
.a-terminal pre { margin: 0; min-height: 212px; padding: 18px 20px 22px; font: 500 13.5px/1.7 var(--mono); color: #d3dfe3; white-space: pre-wrap; word-break: break-all; }
.a-terminal .p { color: #7ee2a0; }
.a-terminal .d { color: #8fa6b0; }
.a-terminal .ok { color: #8fe0a8; font-weight: 700; }
.a-curseur { display: inline-block; width: 8px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--ambre); }
.a-connecte { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 12px; background: rgba(61, 211, 155, .12); border: 1px solid rgba(61, 211, 155, .35); color: #a8f0d4; font-weight: 700; font-size: 14.5px; }
.a-connecte i { width: 10px; height: 10px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 5px rgba(61, 211, 155, .22); }
.a-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: etape; }
.a-etapes li { counter-increment: etape; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); font-size: 14px; line-height: 1.3; }
.a-etapes li::before { content: counter(etape, decimal-leading-zero); font: 700 12px var(--mono); color: var(--ambre); }
.a-etapes b { color: #fff; }
[data-apres] { transition: opacity .45s var(--a-courbe), transform .45s var(--a-courbe); }
.a-cache { opacity: 0; transform: translateY(6px); }

/* Tableau Mikhmon (exemple) */
.a-tableau { border-radius: 18px; overflow: hidden; background: var(--blanc); color: var(--texte); box-shadow: 0 44px 80px -40px rgba(0, 0, 0, .95); }
.a-tableau__barre { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: var(--papier); border-bottom: 1px solid var(--trait); font: 500 13px var(--mono); color: var(--doux); }
.a-tableau__barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 3px rgba(61, 211, 155, .2); }
.a-tableau__barre b { color: var(--encre); }
.a-tableau__corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.a-kpi { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--papier-2); border: 1px solid var(--trait); }
.a-kpi small, .a-graphe small { font-size: 12.5px; font-weight: 600; color: var(--doux); }
.a-kpi b { font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--encre); font-variant-numeric: tabular-nums; }
.a-kpi__vie { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--menthe-fonce); }
.a-kpi__vie .a-point { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(61, 211, 155, .2); }
.a-kpi__hausse { font-size: 12px; font-weight: 700; color: var(--menthe-fonce); }
.a-graphe { grid-column: 1 / -1; padding: 14px 16px 10px; border-radius: 14px; border: 1px solid var(--trait); }
.a-barres { display: flex; align-items: flex-end; gap: 9px; height: 92px; margin-top: 10px; }
.a-barres i { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #f7c15f, var(--ambre)); transform-origin: bottom; }
.a-barres i:nth-child(6) { background: linear-gradient(180deg, #38b88a, var(--menthe-fonce)); }
.a-jours { display: flex; margin-top: 6px; gap: 9px; font: 500 11px var(--mono); color: var(--doux); }
.a-jours span { flex: 1; text-align: center; }
.a-tickets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.a-tickets span { display: grid; gap: 2px; padding: 8px 6px; border-radius: 10px; border: 1.5px dashed #b9c4c9; text-align: center; }
.a-tickets small { font-size: 10.5px; color: var(--doux); white-space: nowrap; }
.a-tickets b { font: 700 15px var(--mono); color: var(--encre); letter-spacing: .04em; }
.a-exemple { margin: 0; font-size: 13px; color: var(--lilas); text-align: center; }

/* Mosaïque Pro */
.a-mosaique { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.a-mosaique li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; line-height: 1.4; transition: background .25s ease, border-color .25s ease, translate .25s var(--a-courbe); }
.a-mosaique li:hover { background: rgba(255, 255, 255, .09); border-color: rgba(245, 165, 36, .45); translate: 0 -2px; }
.a-mosaique svg { width: 26px; height: 26px; color: var(--ambre); }
.a-mosaique b { font-family: var(--display); font-size: 17px; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.a-mosaique__large { grid-column: span 2; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.a-mosaique__large svg { grid-row: span 2; }

/* ------------------------------------------------------------------ tutoriels */

.a-tutos::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px 420px at 12% 0%, rgba(11, 107, 128, .38), transparent 70%), radial-gradient(520px 380px at 100% 100%, rgba(245, 165, 36, .12), transparent 70%); }
.a-tutos .s-onglets { margin-bottom: 24px; }
.a-tutos .s-onglets button { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.a-tutos .s-tutos { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 44px; }
.a-tutos .s-tuto { transition: background .2s ease, border-color .2s ease, translate .25s var(--a-courbe); }
.a-tutos .s-tuto:hover { translate: 4px 0; }

/* La présentation vidéo, en carte sous la liste */
.a-carte-video { position: relative; display: block; width: 100%; margin-top: 14px; padding: 0; aspect-ratio: 16 / 6; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); background: #08141a; cursor: pointer; text-align: left; color: #fff; }
.a-carte-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--a-courbe); }
.a-carte-video:hover img { transform: scale(1.04); }
.a-carte-video__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 26, .92) 0%, rgba(8, 20, 26, .55) 55%, rgba(8, 20, 26, .1)); }
.a-carte-video__texte { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 14px; }
.a-carte-video__texte b { display: block; font-family: var(--display); font-size: 18px; line-height: 1.2; }
.a-carte-video__texte small { display: block; font-size: 13.5px; color: var(--lilas); }

/* ------------------------------------------------------------------ tarifs */

.a-tarifs { background: var(--papier-2); border-block: 1px solid var(--trait); }
.a-tarifs__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.a-prix-unique { display: grid; gap: 22px; padding: 34px; border-radius: 30px; color: var(--brume); background: radial-gradient(440px 300px at 92% -8%, rgba(245, 165, 36, .3), transparent 70%), linear-gradient(160deg, var(--nuit-2), var(--nuit)); box-shadow: 0 50px 90px -50px rgba(15, 37, 48, .9); }
.a-prix-unique__haut { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.a-prix-unique small { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ambre); }
.a-prix-unique__montant { margin: 4px 0 6px; font-family: var(--display); font-stretch: 112%; font-size: clamp(56px, 6vw, 80px); font-weight: 800; line-height: .95; letter-spacing: -.05em; color: #fff; }
.a-prix-unique__montant b { font-variant-numeric: tabular-nums; }
.a-piece { width: 112px; height: 112px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #0f2530; background: radial-gradient(circle at 32% 28%, #ffe2b3, var(--ambre) 45%, var(--ambre-fonce) 100%); box-shadow: 0 20px 40px -18px rgba(232, 148, 12, .8), inset 0 -6px 14px rgba(138, 83, 0, .35), inset 0 4px 10px rgba(255, 255, 255, .5); }
.a-piece b { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: .9; letter-spacing: -.04em; }
.a-piece span { font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.a-offert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.a-offert svg { width: 24px; height: 24px; flex: none; color: var(--ambre); }
.a-offert b { color: #fff; }
.a-recharges { width: 100%; border-collapse: collapse; font-size: 15px; }
.a-recharges caption { text-align: left; padding-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lilas); }
.a-recharges thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.a-recharges td { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.a-recharges td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.a-recharges b { color: #fff; }
.a-paiement { font-size: 14px; color: var(--lilas); }
.a-simulateur { padding: 30px; border-radius: 30px; gap: 18px; }

/* ------------------------------------------------------------------ questions */

.a-questions { background: var(--papier); }
.a-questions__grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.a-questions__cote { position: sticky; top: calc(var(--entete) + 32px); display: grid; gap: 22px; }
.a-questions__cote .a-tete { margin-bottom: 4px; }
.a-questions__cote .s-titre { font-size: clamp(30px, 3.1vw, 42px); }
.a-joindre { display: grid; gap: 4px; padding: 20px 22px; border-radius: 22px; background: var(--blanc); border: 1px solid var(--trait); }
.a-joindre b { font-family: var(--display); font-size: 17px; color: var(--encre); margin-bottom: 4px; }
.a-joindre a { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-weight: 700; color: var(--violet-fonce); text-decoration: none; border-top: 1px solid var(--trait); }
.a-joindre a:hover { color: var(--encre); }
.a-joindre svg { width: 20px; height: 20px; flex: none; }
.a-parrainage { display: grid; gap: 10px; padding: 24px; border-radius: 22px; color: #d5ecf1; background: radial-gradient(300px 200px at 100% 0%, rgba(245, 165, 36, .3), transparent 70%), linear-gradient(150deg, var(--violet), var(--violet-fonce) 70%, #073f4b); }
.a-parrainage__taux { font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: 72px; line-height: .85; letter-spacing: -.06em; color: #fff; }
.a-parrainage__taux small { font-size: .45em; letter-spacing: -.02em; color: var(--ambre); }
.a-parrainage h3 { color: #fff; font-size: 21px; line-height: 1.15; }
.a-parrainage p:not(.a-parrainage__taux) { font-size: 15px; line-height: 1.5; }
.a-lien-fleche { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 800; color: var(--ambre); text-decoration: none; }
.a-lien-fleche svg { width: 18px; height: 18px; transition: translate .25s var(--a-courbe); }
.a-lien-fleche:hover svg { translate: 4px 0; }

.a-faq { display: grid; border-top: 1px solid var(--trait); }
.a-faq details { border-bottom: 1px solid var(--trait); }
.a-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 18px; align-items: center; padding: 22px 2px; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; color: var(--encre); }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after { content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2530' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid var(--trait); transition: transform .35s var(--a-courbe), background-color .25s ease; }
.a-faq summary:hover::after { border-color: var(--doux); }
.a-faq details[open] summary::after { transform: rotate(135deg); background-color: var(--ambre); border-color: var(--ambre); }
.a-faq details > div { overflow: hidden; }
.a-faq details > div p { padding: 0 48px 22px 2px; max-width: 68ch; font-size: 16.5px; }

/* ------------------------------------------------------------------ appel final */

.a-final { position: relative; overflow: hidden; padding-block: 128px; text-align: center; background: radial-gradient(700px 420px at 50% 50%, #173b4a, transparent 75%), var(--nuit); }
.a-final .s-conteneur { display: grid; gap: 22px; justify-items: center; }
.a-final h2 { font-size: clamp(38px, 5.6vw, 70px); line-height: .98; font-weight: 800; letter-spacing: -.045em; max-width: 14em; }
.a-final h2 em { font-style: normal; color: var(--ambre); }
.a-final p { font-size: clamp(17px, 1.5vw, 19px); max-width: 36em; }
.a-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.a-final__contact { font-size: 15px !important; color: var(--lilas); }
.a-final__contact a { color: var(--ambre); font-weight: 700; }
.a-final .a-maillage { opacity: .75; }

/* ------------------------------------------------------------------ repères : progression et rail */

.a-progres { position: fixed; z-index: 51; left: 0; right: 0; top: calc(var(--entete) + env(safe-area-inset-top, 0px)); height: 2px; pointer-events: none; }
.a-progres span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--ambre), #fbd38a); box-shadow: 0 0 10px rgba(245, 165, 36, .6); }
.a-rail { position: fixed; z-index: 40; right: 22px; top: 50%; translate: 0 -50%; display: none; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 99px; background: rgba(15, 37, 48, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); }
.a-rail a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; text-decoration: none; }
.a-rail a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: transform .3s var(--a-courbe), background .3s ease; }
.a-rail a:hover::before { background: #fff; transform: scale(1.3); }
.a-rail a[aria-current]::before { background: var(--ambre); transform: scale(1.5); box-shadow: 0 0 10px rgba(245, 165, 36, .8); }
.a-rail span { position: absolute; right: 34px; top: 50%; translate: 6px -50%; padding: 5px 10px; border-radius: 8px; background: var(--nuit); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .25s var(--a-courbe); }
.a-rail a:hover span, .a-rail a:focus-visible span { opacity: 1; translate: 0 -50%; }
.s-nav a.est-ici { opacity: 1; box-shadow: inset 0 -2px 0 var(--ambre); border-radius: 10px 10px 4px 4px; }
@media (min-width: 1240px) { .a-rail { display: flex; } }

/* ------------------------------------------------------------------ vidéo de présentation */

.a-video { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.a-video::backdrop { background: rgba(5, 15, 20, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.a-video__cadre { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); }
.a-video video { display: block; width: 100%; height: 100%; }
.a-video__fermer { position: absolute; top: -54px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.a-video__fermer svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ mouvement */

@media (prefers-reduced-motion: no-preference) {
  /* L'ouverture : le titre monte ligne à ligne, le reste suit. */
  .a-ligne > * { animation: a-monte 1s var(--a-courbe) both; animation-delay: calc(var(--d) * 95ms + 80ms); }
  .a-entre { animation: a-fondu .9s var(--a-courbe) both; animation-delay: calc(var(--d) * 95ms + 80ms); }
  .a-telephone { animation: a-telephone 1.2s var(--a-courbe) .25s both; }
  .a-puce { animation: a-puce .8s var(--a-ressort) both, a-flotte 7s ease-in-out infinite alternate; }
  .a-puce--1 { animation-delay: .9s, 1.7s; }
  .a-puce--2 { animation-delay: 1.1s, 2.4s; animation-duration: .8s, 8s; }
  .a-puce--3 { animation-delay: 1.3s, 1.2s; animation-duration: .8s, 6.5s; }
  .a-point { animation: a-pouls 2.2s ease-out infinite; }
  .a-bouton-video__rond::after { animation: a-onde 2.6s ease-out 1.6s infinite; }
  .a-curseur { animation: a-clignote 1.05s steps(1) infinite; }
  .a-defile__piste { animation: a-defile 46s linear infinite; }
  .a-defile:hover .a-defile__piste { animation-play-state: paused; }
  [data-parallaxe] > [data-profondeur] { transition: translate .9s var(--a-courbe); }

  /* Les apparitions au défilement, depuis un état lisible si le script manque. */
  .zt-anime [data-revele] { transition: opacity .9s var(--a-courbe), transform .9s var(--a-courbe); transition-delay: calc(var(--i, 0) * 45ms); }
  .zt-anime [data-revele]:not(.est-visible) { opacity: 0; transform: translateY(26px); }

  /* Un onglet qui s'ouvre : le texte se pose, la démonstration se joue. */
  .a-panneau.entre .a-panneau__texte > * { animation: a-fondu .6s var(--a-courbe) both; }
  .a-panneau.entre .a-panneau__texte > :nth-child(2) { animation-delay: .06s; }
  .a-panneau.entre .a-panneau__texte > :nth-child(3) { animation-delay: .12s; }
  .a-panneau.entre .a-panneau__texte > :nth-child(4) { animation-delay: .18s; }
  .a-panneau.entre .a-panneau__texte > :nth-child(5) { animation-delay: .24s; }
  .a-panneau.entre .a-panneau__visuel { animation: a-scene .8s var(--a-courbe) both; }
  .a-panneau.joue .a-barres i { animation: a-barre .9s var(--a-courbe) both; animation-delay: calc(var(--i) * 70ms + .25s); }
  .a-panneau.joue .a-tickets span { animation: a-ticket .6s var(--a-ressort) both; animation-delay: calc(var(--i) * 90ms + .7s); }
  .a-panneau.joue .a-mosaique li { animation: a-tuile .7s var(--a-ressort) both; animation-delay: calc(var(--i) * 70ms + .15s); }
  .a-panneau.joue .a-etapes li { animation: a-fondu .6s var(--a-courbe) both; }
  .a-panneau.joue .a-etapes li:nth-child(2) { animation-delay: .1s; }
  .a-panneau.joue .a-etapes li:nth-child(3) { animation-delay: .2s; }

  .a-piece.est-visible, .est-visible .a-piece { animation: a-piece 1.3s var(--a-courbe) .2s both; }
  .a-video[open] .a-video__cadre { animation: a-video .5s var(--a-courbe) both; }
  .a-final h2 em { background: linear-gradient(90deg, var(--ambre), #ffd68a, var(--ambre)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: a-reflet 5s ease-in-out infinite; }
}

@keyframes a-monte { from { transform: translateY(108%); } }
@keyframes a-fondu { from { opacity: 0; transform: translateY(14px); } }
@keyframes a-telephone { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes a-puce { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes a-flotte { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes a-pouls { 0% { box-shadow: 0 0 0 0 rgba(61, 211, 155, .55); } 100% { box-shadow: 0 0 0 10px rgba(61, 211, 155, 0); } }
@keyframes a-onde { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes a-clignote { 50% { opacity: 0; } }
@keyframes a-defile { to { transform: translateX(-50%); } }
@keyframes a-scene { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes a-barre { from { transform: scaleY(0); } }
@keyframes a-ticket { from { opacity: 0; transform: translateY(10px) rotate(-3deg); } }
@keyframes a-tuile { from { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes a-piece { 0% { transform: perspective(500px) rotateY(-180deg) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: perspective(500px) rotateY(0) scale(1); } }
@keyframes a-video { from { opacity: 0; transform: scale(.94); } }
@keyframes a-reflet { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .a-defile ul + ul { display: none; }
  .a-defile ul { flex-wrap: wrap; justify-content: center; }
}

/* ------------------------------------------------------------------ petits écrans */

@media (max-width: 1080px) {
  .a-une__grille { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 40px; }
  .a-une__scene { width: min(100%, 420px); }
  .a-panneau { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .a-tarifs__grille, .a-questions__grille { grid-template-columns: minmax(0, 1fr); }
  .a-questions__grille { gap: 36px; }
  .a-questions__cote { position: static; }
  .a-tutos .s-tutos { grid-template-columns: minmax(0, 1fr); }
  .a-services .s-conteneur { grid-template-columns: minmax(0, 1fr); }
  .a-services .a-tete { margin-bottom: 24px; }
  .a-une .a-maillage { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .3) 45%, #000 68%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .3) 45%, #000 68%); }
}
@media (max-width: 860px) {
  .a-bande { padding-block: 76px; }
  .a-final { padding-block: 96px; }
}
@media (max-width: 600px) {
  .a-une { padding-top: calc(var(--entete) + 32px); }
  .a-une__actions { display: grid; width: 100%; }
  .a-une__actions .s-bouton, .a-bouton-video { width: 100%; }
  .a-telephone { width: 232px; }
  .a-puce { padding: 8px 11px; font-size: 12.5px; gap: 8px; border-radius: 13px; }
  .a-puce small { font-size: 11px; }
  .a-puce svg { width: 17px; height: 17px; }
  .a-puce--1 { left: 0; top: 6%; }
  .a-puce--2 { right: 0; top: 44%; }
  .a-puce--3 { left: 0; bottom: 16%; }
  .a-onglets { display: flex; width: 100%; }
  .a-onglets button { flex: 1 0 auto; justify-content: center; padding: 10px 10px; font-size: 14px; gap: 6px; }
  .a-onglets button svg { width: 18px; height: 18px; }
  .a-onglets .a-long { display: none; }
  .a-prix-unique, .a-simulateur { padding: 22px; }
  .a-piece { width: 88px; height: 88px; }
  .a-piece b { font-size: 34px; }
  .a-etapes { grid-template-columns: minmax(0, 1fr); }
  .a-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-tableau__corps { grid-template-columns: minmax(0, 1fr); }
  .a-faq summary { font-size: 17px; padding-block: 18px; }
  .a-faq details > div p { padding-right: 4px; }
}