/* Page d'accueil — s'ajoute à style.css */
.large { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Barre du haut */
.barre { position: sticky; top: 0; z-index: 10; background: rgba(11, 13, 23, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
.barre .large { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.barre nav { display: flex; align-items: center; gap: 28px; }
.barre nav a { color: var(--texte-2); text-decoration: none; font-weight: 700; font-size: 15px; }
.barre nav a:hover { color: var(--texte); }
.barre .bouton { min-height: 40px; padding: 0 18px; font-size: 14px; color: var(--fond); }
@media (max-width: 760px) { .barre nav a:not(.bouton) { display: none; } }

/* Héros */
.une { position: relative; overflow: hidden; padding: 56px 0 80px; }
.une::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 420px at 78% 30%, rgba(255, 201, 77, 0.20), transparent 70%),
    radial-gradient(520px 380px at 10% 0%, rgba(92, 200, 255, 0.10), transparent 70%),
    radial-gradient(480px 360px at 95% 95%, rgba(180, 140, 255, 0.12), transparent 70%);
}
.une .large { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .une .large { grid-template-columns: 1fr; gap: 56px; text-align: center; } }

.etiquette { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--or-doux); color: var(--or); font: 800 13px/1 'Montserrat', sans-serif; letter-spacing: 0.04em; }
.etiquette::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(255, 201, 77, 0.25); }
.une h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -0.02em; margin: 20px 0 20px; }
.une h1 em { font-style: normal; background: linear-gradient(90deg, #FFE08A, var(--or) 45%, #FF9B54); -webkit-background-clip: text; background-clip: text; color: transparent; }
.une .chapeau { font-size: clamp(18px, 2.2vw, 21px); color: var(--texte-2); max-width: 520px; margin: 0 0 32px; }
@media (max-width: 900px) { .une .chapeau { margin-left: auto; margin-right: auto; } }

.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 900px) { .badges { justify-content: center; } }
.badges a { display: block; border-radius: 10px; transition: transform .15s ease; }
.badges a:hover { transform: translateY(-2px); }
.badges img { height: 54px; width: auto; }
.badges .gp img { height: 60px; margin: -3px 0; }
.badges .apple img { height: 54px; outline: 1px solid rgba(255,255,255,.35); outline-offset: -1px; border-radius: 10px; }
.garanties { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; color: var(--texte-3); font-size: 14px; font-weight: 700; }
@media (max-width: 900px) { .garanties { justify-content: center; } }
.garanties span::before { content: '✓'; color: var(--fluidite); margin-right: 6px; }

/* Téléphone */
.scene { position: relative; display: flex; justify-content: center; padding: 10px 0; }
.telephone {
  position: relative; width: 300px; height: 620px; border-radius: 48px; padding: 12px;
  background: linear-gradient(160deg, #2A2F55, #12152A 40%, #0A0C16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -20px rgba(0,0,0,.8), 0 0 120px rgba(255, 201, 77, 0.12);
}
.ecran { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--fond); }
.ilot { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 3; }
.ecran .haut { position: absolute; top: 48px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 18px; z-index: 2; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.ecran .haut b { color: var(--or); }

.defile { position: absolute; inset: 78px 0 92px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.defile .rouleau { padding: 0 22px; animation: defiler 26s linear infinite; }
.defile p { margin: 0 0 18px; font: 800 23px/1.42 'Nunito Sans', sans-serif; color: rgba(255,255,255,.92); }
.defile .lu { color: var(--fluidite); }
.defile .saute { color: #FF7A7A; text-decoration: line-through; text-decoration-thickness: 2px; }
@keyframes defiler { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ligne-lecture { position: absolute; left: 10px; right: 10px; top: 46%; height: 2px; background: var(--or); border-radius: 2px; box-shadow: 0 0 18px 3px rgba(255,201,77,.55); z-index: 2; }
.ligne-lecture::before, .ligne-lecture::after { content: ''; position: absolute; top: -5px; width: 0; height: 0; border: 6px solid transparent; }
.ligne-lecture::before { left: -4px; border-left-color: var(--or); }
.ligne-lecture::after { right: -4px; border-right-color: var(--or); }

.micro { position: absolute; left: 14px; right: 14px; bottom: 18px; height: 60px; border-radius: 20px; background: var(--surface); border: 1px solid var(--bordure); display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.micro .rec { width: 12px; height: 12px; border-radius: 50%; background: #FF5A5A; animation: clignote 1.2s ease-in-out infinite; }
.micro .onde { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.micro .onde i { flex: 1; border-radius: 2px; background: var(--or); animation: onde 1s ease-in-out infinite; }
.micro .temps { font: 800 14px 'Montserrat', sans-serif; color: var(--texte-2); }
@keyframes clignote { 50% { opacity: .3; } }
@keyframes onde { 0%, 100% { height: 20%; } 50% { height: 100%; } }

.flottant { position: absolute; background: rgba(23, 27, 54, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); animation: flotter 6s ease-in-out infinite; }
@keyframes flotter { 50% { transform: translateY(-10px); } }
.carte-score { left: calc(50% - 300px); bottom: 40px; width: 200px; padding: 16px 18px; text-align: left; }
.carte-score .total { display: flex; align-items: baseline; gap: 4px; font: 800 44px/1 'Montserrat', sans-serif; color: var(--or); }
.carte-score .total small { font-size: 16px; color: var(--texte-3); }
.carte-score .critere { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.carte-score .critere div { display: flex; justify-content: space-between; margin-bottom: 4px; }
.jauge { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 3px; }
.carte-defi { right: calc(50% - 290px); top: 70px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; animation-delay: -3s; text-align: left; }
.carte-defi .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--rythme), var(--precision)); font: 800 16px 'Montserrat', sans-serif; }
.carte-defi strong { display: block; font-size: 14px; }
.carte-defi span { font-size: 13px; color: var(--or); font-weight: 700; }
@media (max-width: 560px) {
  .carte-score { left: 0; bottom: 40px; width: 170px; padding: 12px 14px; }
  .carte-score .total { font-size: 36px; }
  .carte-defi { right: 0; top: 40px; }
  .telephone { width: 270px; height: 560px; }
}

/* Bandeau des catégories */
.bandeau { border-block: 1px solid var(--bordure); padding: 18px 0; overflow: hidden; }
.bandeau .piste { display: flex; gap: 12px; width: max-content; animation: bandeau 40s linear infinite; }
.bandeau span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure); font-weight: 700; white-space: nowrap; color: var(--texte-2); }
.bandeau span b { width: 8px; height: 8px; border-radius: 50%; }
@keyframes bandeau { to { transform: translateX(-50%); } }

/* Sections */
.section { padding: 96px 0; }
.section .tete { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section .tete .sur { color: var(--or); font: 800 13px 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.section h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.015em; margin: 12px 0 14px; }
.section .tete p { color: var(--texte-2); font-size: 18px; margin: 0; }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: etape; }
@media (max-width: 800px) { .etapes { grid-template-columns: 1fr; } }
.etape { position: relative; background: var(--surface); border: 1px solid var(--bordure); border-radius: 24px; padding: 28px; }
.etape::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--or-doux); color: var(--or); font: 800 20px 'Montserrat', sans-serif; margin-bottom: 18px; }
.etape h3 { font-size: 20px; margin: 0 0 8px; }
.etape p { margin: 0; color: var(--texte-2); }

/* Bloc deux colonnes */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.duo.inverse > :first-child { order: 2; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 36px; } .duo.inverse > :first-child { order: 0; } }
.duo h2 { font-size: clamp(28px, 4vw, 42px); margin: 12px 0 16px; letter-spacing: -0.015em; }
.duo .sur { color: var(--or); font: 800 13px 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.duo p { color: var(--texte-2); font-size: 18px; }
.puces { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.puces li { display: flex; gap: 12px; align-items: flex-start; color: var(--texte-2); }
.puces li b { color: var(--texte); }
.puces li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--or-doux) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC94D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; }

.panneau { background: linear-gradient(160deg, var(--surface-haute), var(--surface)); border: 1px solid var(--bordure); border-radius: 28px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }

/* Résultat de lecture */
.resultat .tete-res { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.anneau { --v: 92; position: relative; width: 110px; height: 110px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--or) calc(var(--v) * 1%), rgba(255,255,255,.08) 0); display: grid; place-items: center; }
.anneau::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface-haute); }
.anneau span { position: relative; font: 800 36px 'Montserrat', sans-serif; }
.resultat .tete-res strong { font: 800 22px 'Montserrat', sans-serif; display: block; }
.resultat .tete-res em { font-style: normal; color: var(--texte-3); font-size: 14px; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.note { background: rgba(255,255,255,.04); border-radius: 16px; padding: 12px; text-align: center; }
.note b { display: block; font: 800 24px 'Montserrat', sans-serif; }
.note span { font-size: 12px; font-weight: 700; color: var(--texte-3); }
.extrait { font: 700 17px/1.7 'Nunito Sans', sans-serif; color: var(--texte-2); background: rgba(0,0,0,.25); border-radius: 16px; padding: 14px 16px; margin: 0; }
.extrait .ok { color: var(--fluidite); }
.extrait .ko { color: #FF7A7A; text-decoration: line-through; }
.extrait .blanc { color: var(--rythme); font-weight: 800; padding: 0 2px; }

/* Selfie */
.selfie { width: 290px; height: 590px; margin: 0 auto; }
.selfie .ecran { display: grid; grid-template-rows: 1fr 1fr; }
.camera { position: relative; overflow: hidden; background:
  radial-gradient(circle at 50% 62%, #E8B48C 0 23%, transparent 23.5%),
  radial-gradient(ellipse 46% 40% at 50% 112%, #3B4A8F 0 99%, transparent 100%),
  radial-gradient(circle at 50% 46%, #2B1E1A 0 30%, transparent 30.5%),
  linear-gradient(160deg, #4B5BA8, #1D2350); }
.camera .rec { position: absolute; top: 48px; left: 16px; display: flex; align-items: center; gap: 6px; font: 800 11px 'Montserrat', sans-serif; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.45); }
.camera .rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #FF5A5A; animation: clignote 1.2s infinite; }
.camera .filigrane { position: absolute; right: 12px; bottom: 10px; font: 800 12px 'Montserrat', sans-serif; color: rgba(255,255,255,.85); }
.selfie .texte { position: relative; padding: 18px 18px 0; font: 800 19px/1.45 'Nunito Sans', sans-serif; color: rgba(255,255,255,.9); border-top: 2px solid var(--or); overflow: hidden; }
.selfie .texte .lu { color: var(--fluidite); }

/* Niveaux */
.niveaux { display: flex; align-items: flex-end; gap: 8px; height: 260px; margin-top: 8px; }
.niveaux div { flex: 1; border-radius: 12px 12px 4px 4px; background: linear-gradient(to top, rgba(255,201,77,.08), rgba(255,201,77,.35)); position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.niveaux div b { font: 800 15px 'Montserrat', sans-serif; color: var(--fond); }
.niveaux div:nth-child(-n+3) { background: linear-gradient(to top, var(--or), #FFE08A); }
.niveaux div:nth-child(n+4) b { color: var(--texte-2); }
.niveaux-legende { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--texte-3); }

/* Pour qui */
.publics { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.public { background: var(--surface); border: 1px solid var(--bordure); border-radius: 22px; padding: 22px; }
.public .em { font-size: 30px; line-height: 1; }
.public h3 { margin: 14px 0 6px; font-size: 18px; }
.public p { margin: 0; color: var(--texte-2); font-size: 15px; }

/* Tarifs */
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) { .offres { grid-template-columns: 1fr; } }
.offre { background: var(--surface); border: 1px solid var(--bordure); border-radius: 28px; padding: 32px; }
.offre.premium { background: linear-gradient(165deg, rgba(255,201,77,.16), var(--surface) 55%); border-color: rgba(255,201,77,.45); position: relative; }
.offre.premium .ruban { position: absolute; top: -13px; right: 24px; background: var(--or); color: var(--fond); font: 800 12px 'Montserrat', sans-serif; padding: 6px 12px; border-radius: 999px; }
.offre h3 { margin: 0; font-size: 22px; }
.offre .prix { font: 800 44px/1 'Montserrat', sans-serif; margin: 18px 0 4px; }
.offre .prix small { font-size: 16px; color: var(--texte-3); }
.offre .sous-prix { color: var(--texte-3); font-size: 14px; margin: 0 0 20px; }
.offre .puces { margin-top: 0; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--bordure); border-radius: 18px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--or); font: 800 22px/1 'Montserrat', sans-serif; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--texte-2); }

/* Appel final */
.final { text-align: center; padding: 72px 24px; border-radius: 36px; margin: 0 0 80px;
  background: radial-gradient(500px 260px at 50% 0%, rgba(255,201,77,.28), transparent 70%), var(--surface);
  border: 1px solid var(--bordure); }
.final img.icone { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 20px; box-shadow: 0 10px 40px rgba(255,201,77,.3); }
.final h2 { font-size: clamp(30px, 4.6vw, 48px); margin: 0 0 12px; }
.final p { color: var(--texte-2); font-size: 18px; margin: 0 0 28px; }
.final .badges { justify-content: center; }

.pied.large { max-width: 1120px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}